diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss index a6898d67711a..7ed533bbbc77 100644 --- a/src/dev-app/theme-m3.scss +++ b/src/dev-app/theme-m3.scss @@ -38,11 +38,13 @@ $dark-theme: matx.define-theme(map.set($m3-base-config, color, theme-type, dark) html { @include mat.card-theme($light-theme); @include mat.checkbox-theme($light-theme); + @include mat.divider-theme($light-theme); @include mat.form-field-theme($light-theme); @include mat.grid-list-theme($light-theme); @include mat.icon-theme($light-theme); @include mat.input-theme($light-theme); @include mat.list-theme($light-theme); + @include mat.menu-theme($light-theme); @include mat.progress-bar-theme($light-theme); @include mat.progress-spinner-theme($light-theme); @include mat.radio-theme($light-theme); @@ -68,11 +70,13 @@ html { @include mat.card-color($dark-theme); @include mat.checkbox-color($dark-theme); + @include mat.divider-color($dark-theme); @include mat.form-field-color($dark-theme); @include mat.grid-list-color($dark-theme); @include mat.icon-color($dark-theme); @include mat.input-color($dark-theme); @include mat.list-color($dark-theme); + @include mat.menu-color($dark-theme); @include mat.progress-bar-color($dark-theme); @include mat.progress-spinner-color($dark-theme); @include mat.radio-color($dark-theme); @@ -97,11 +101,13 @@ html { .demo-density-#{$scale} { @include mat.card-density($scale-theme); @include mat.checkbox-density($scale-theme); + @include mat.divider-density($scale-theme); @include mat.form-field-density($scale-theme); @include mat.grid-list-density($scale-theme); @include mat.icon-density($scale-theme); @include mat.input-density($scale-theme); @include mat.list-density($scale-theme); + @include mat.menu-density($scale-theme); @include mat.progress-bar-density($scale-theme); @include mat.progress-spinner-density($scale-theme); @include mat.radio-density($scale-theme); diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index 96aebfec13ac..51650ca66e7e 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -35,6 +35,17 @@ ); } +/// Generates custom tokens for the mat-divider. +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @return {Map} A set of custom tokens for the mat-divider +@function divider($systems, $exclude-hardcoded) { + @return ( + width: _hardcode(1px, $exclude-hardcoded), + color: map.get($systems, md-sys-color, outline-variant), + ); +} + /// Generates custom tokens for the mat-form-field. /// @param {Map} $systems The MDC system tokens /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values @@ -85,48 +96,30 @@ ); } -/// Generates custom tokens for the mat-toolbar. +/// Generates custom tokens for the mat-menu. /// @param {Map} $systems The MDC system tokens /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @return {Map} A set of custom tokens for the mat-toolbar -@function toolbar($systems, $exclude-hardcoded) { +/// @return {Map} A set of custom tokens for the mat-menu +@function menu($systems, $exclude-hardcoded) { @return mat.private-merge-all( - _generate-typography-tokens($systems, title-text, title-large), + _generate-typography-tokens($systems, item-label-text, label-large), ( - container-background-color: map.get($systems, md-sys-color, surface), - container-text-color: map.get($systems, md-sys-color, on-surface), + container-shape: _hardcode(4px, $exclude-hardcoded), + item-label-text-color: map.get($systems, md-sys-color, on-surface), + item-icon-color: map.get($systems, md-sys-color, on-surface-variant), + item-hover-state-layer-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, on-surface), + $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity) + ), + item-focus-state-layer-color: mat.private-safe-color-change( + map.get($systems, md-sys-color, on-surface), + $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity) + ), + container-color: map.get($systems, md-sys-color, surface-container), ) ); } -/// Generates custom tokens for the mat-slide-toggle. -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @return {Map} A set of custom tokens for the mat-slide-toggle -@function slide-toggle($systems, $exclude-hardcoded) { - @return _generate-typography-tokens($systems, label-text, label-large); -} - -/// Generates custom tokens for the mat-slider. -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @return {Map} A set of custom tokens for the mat-slider -@function slider($systems, $exclude-hardcoded) { - @return ( - value-indicator-opacity: _hardcode(1, $exclude-hardcoded), - ); -} - -/// Generates custom tokens for the mat-snack-bar. -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @return {Map} A set of custom tokens for the mat-snack-bar -@function snack-bar($systems, $exclude-hardcoded) { - @return ( - button-color: map.get($systems, md-sys-color, inverse-primary), - ); -} - /// Generates custom tokens for the mat-radio. /// @param {Map} $systems The MDC system tokens /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values @@ -166,6 +159,34 @@ ); } +/// Generates custom tokens for the mat-slide-toggle. +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @return {Map} A set of custom tokens for the mat-slide-toggle +@function slide-toggle($systems, $exclude-hardcoded) { + @return _generate-typography-tokens($systems, label-text, label-large); +} + +/// Generates custom tokens for the mat-slider. +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @return {Map} A set of custom tokens for the mat-slider +@function slider($systems, $exclude-hardcoded) { + @return ( + value-indicator-opacity: _hardcode(1, $exclude-hardcoded), + ); +} + +/// Generates custom tokens for the mat-snack-bar. +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @return {Map} A set of custom tokens for the mat-snack-bar +@function snack-bar($systems, $exclude-hardcoded) { + @return ( + button-color: map.get($systems, md-sys-color, inverse-primary), + ); +} + /// Generates custom tokens for the mat-sort. /// @param {Map} $systems The MDC system tokens /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values @@ -221,7 +242,7 @@ @return mat.private-merge-all( _generate-typography-tokens($systems, label-text, title-small), ( - disabled-ripple-color: blue, // TODO(mmalerba): Figure out correct value. + disabled-ripple-color: null, // TODO(mmalerba): Figure out correct value. pagination-icon-color: map.get($systems, md-sys-color, on-surface), inactive-label-text-color: map.get($systems, md-sys-color, on-surface), active-label-text-color: map.get($systems, md-sys-color, on-surface), @@ -270,6 +291,20 @@ ); } +/// Generates custom tokens for the mat-toolbar. +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @return {Map} A set of custom tokens for the mat-toolbar +@function toolbar($systems, $exclude-hardcoded) { + @return mat.private-merge-all( + _generate-typography-tokens($systems, title-text, title-large), + ( + container-background-color: map.get($systems, md-sys-color, surface), + container-text-color: map.get($systems, md-sys-color, on-surface), + ) + ); +} + /// Generates custom tokens for the mat-tree. /// @param {Map} $systems The MDC system tokens /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values diff --git a/src/material-experimental/theming/_m3-density.scss b/src/material-experimental/theming/_m3-density.scss index b5c24a4352d0..c3e0406aec8d 100644 --- a/src/material-experimental/theming/_m3-density.scss +++ b/src/material-experimental/theming/_m3-density.scss @@ -19,23 +19,23 @@ $_density-tokens: ( (mdc, checkbox): ( state-layer-size: (40px, 36px, 32px, 28px), ), + (mdc, circular-progress): (), (mdc, elevated-card): (), (mdc, filled-text-field): (), - (mdc, outlined-card): (), - (mdc, outlined-text-field): (), - (mdc, slider): (), - (mdc, snackbar): (), - (mdc, plain-tooltip): (), - (mdc, circular-progress): (), - (mdc, radio): ( - state-layer-size: (40px, 36px, 32px, 28px), - ), (mdc, linear-progress): (), (mdc, list): ( list-item-one-line-container-height: (48px, 44px, 40px, 36px, 32px, 24px), list-item-two-line-container-height: (64px, 60px, 56px, 52px, 48px, 48px), list-item-three-line-container-height: (88px, 84px, 80px, 76px, 72px, 56px), ), + (mdc, outlined-card): (), + (mdc, outlined-text-field): (), + (mdc, plain-tooltip): (), + (mdc, radio): ( + state-layer-size: (40px, 36px, 32px, 28px), + ), + (mdc, slider): (), + (mdc, snackbar): (), (mdc, switch): (), (mdc, tab): ( container-height: (48px, 44px, 40px, 36px, 32px) @@ -44,19 +44,17 @@ $_density-tokens: ( // Custom Angular Material tokens (mat, card): (), + (mat, divider): (), (mat, form-fild): (), (mat, grid-list): (), (mat, icon): (), - (mat, toolbar): ( - standard-height: (64px, 60px, 56px, 52px), - mobile-height: (56px, 52px, 48px, 44px), - ), - (mat, slider): (), - (mat, snack-bar): (), + (mat, menu): (), (mat, radio): (), (mat, ripple): (), (mat, sidenav): (), (mat, slide-toggle): (), + (mat, slider): (), + (mat, snack-bar): (), (mat, sort): (), (mat, stepper): ( header-height: (72px, 68px, 64px, 60px, 42px), @@ -67,6 +65,10 @@ $_density-tokens: ( footer-container-height: (52px, 48px, 44px, 40px, 36px), row-item-container-height: (52px, 48px, 44px, 40px, 36px), ), + (mat, toolbar): ( + standard-height: (64px, 60px, 56px, 52px), + mobile-height: (56px, 52px, 48px, 44px), + ), (mat, tree): ( node-min-height: (48px, 44px, 40px, 36px, 28px), ), diff --git a/src/material-experimental/theming/_m3-palettes.scss b/src/material-experimental/theming/_m3-palettes.scss index 5064e49f7a25..60bf1a77422c 100644 --- a/src/material-experimental/theming/_m3-palettes.scss +++ b/src/material-experimental/theming/_m3-palettes.scss @@ -1,5 +1,34 @@ +@use 'sass:color'; +@use 'sass:map'; +@use 'sass:math'; + +/// Estimate a hue using the given previous and next hues. +@function _estimate-hue($hues, $hue, $prev-hue, $next-hue) { + $weight: math.div($next-hue - $hue, $next-hue - $prev-hue) * 100%; + @return color.mix(map.get($hues, $prev-hue), map.get($hues, $next-hue), $weight); +} + +// TODO(mmalerba): Remove this and add correct values for these hues. +/// The Material Design spec references some neutral hues that are not generated by +/// https://m3.material.io/theme-builder. For now we use this function to estimate the missing hues +/// by blending the nearest hues that are generated. +@function _patch-missing-hues($palette) { + $neutral: map.get($palette, neutral); + $palette: map.set($palette, neutral, 4, _estimate-hue($neutral, 4, 0, 10)); + $palette: map.set($palette, neutral, 6, _estimate-hue($neutral, 6, 0, 10)); + $palette: map.set($palette, neutral, 12, _estimate-hue($neutral, 12, 10, 20)); + $palette: map.set($palette, neutral, 17, _estimate-hue($neutral, 17, 10, 20)); + $palette: map.set($palette, neutral, 22, _estimate-hue($neutral, 22, 20, 25)); + $palette: map.set($palette, neutral, 24, _estimate-hue($neutral, 24, 20, 25)); + $palette: map.set($palette, neutral, 87, _estimate-hue($neutral, 87, 80, 90)); + $palette: map.set($palette, neutral, 92, _estimate-hue($neutral, 92, 90, 95)); + $palette: map.set($palette, neutral, 94, _estimate-hue($neutral, 94, 90, 95)); + $palette: map.set($palette, neutral, 96, _estimate-hue($neutral, 96, 95, 98)); + @return $palette; +} + /// Blue color palette to be used as primary, secondary, or tertiary palette. -$blue-palette: ( +$blue-palette: _patch-missing-hues(( 0: #000000, 10: #00006e, 20: #0001ac, @@ -52,10 +81,10 @@ $blue-palette: ( 99: #fffbff, 100: #ffffff, ), -); +)); /// Cyan color palette to be used as primary, secondary, or tertiary palette. -$cyan-palette: ( +$cyan-palette: _patch-missing-hues(( 0: #000000, 10: #002020, 20: #003737, @@ -108,10 +137,10 @@ $cyan-palette: ( 99: #f4fefd, 100: #ffffff, ), -); +)); /// Green color palette to be used as primary, secondary, or tertiary palette. -$green-palette: ( +$green-palette: _patch-missing-hues(( 0: #000000, 10: #002200, 20: #013a00, @@ -164,10 +193,10 @@ $green-palette: ( 99: #f9fef1, 100: #ffffff, ), -); +)); /// Magenta color palette to be used as primary, secondary, or tertiary palette. -$magenta-palette: ( +$magenta-palette: _patch-missing-hues(( 0: #000000, 10: #380038, 20: #5b005b, @@ -220,10 +249,10 @@ $magenta-palette: ( 99: #fffbff, 100: #ffffff, ), -); +)); /// Orange color palette to be used as primary, secondary, or tertiary palette. -$orange-palette: ( +$orange-palette: _patch-missing-hues(( 0: #000000, 10: #311300, 20: #502400, @@ -276,10 +305,10 @@ $orange-palette: ( 99: #fffbff, 100: #ffffff, ), -); +)); /// Purple color palette to be used as primary, secondary, or tertiary palette. -$purple-palette: ( +$purple-palette: _patch-missing-hues(( 0: #000000, 10: #270057, 20: #42008a, @@ -332,10 +361,10 @@ $purple-palette: ( 99: #fffbff, 100: #ffffff, ), -); +)); /// Red color palette to be used as primary, secondary, or tertiary palette. -$red-palette: ( +$red-palette: _patch-missing-hues(( 0: #000000, 10: #410000, 20: #690100, @@ -388,10 +417,10 @@ $red-palette: ( 99: #fffbff, 100: #ffffff, ), -); +)); /// Yellow color palette to be used as primary, secondary, or tertiary palette. -$yellow-palette: ( +$yellow-palette: _patch-missing-hues(( 0: #000000, 10: #1d1d00, 20: #323200, @@ -444,4 +473,4 @@ $yellow-palette: ( 99: #fffbff, 100: #ffffff, ), -); +)); diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss index 699589c3ffcf..c50182976cee 100644 --- a/src/material-experimental/theming/_m3-tokens.scss +++ b/src/material-experimental/theming/_m3-tokens.scss @@ -177,6 +177,11 @@ _fix-checkbox-tokens(mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded)), $token-slots ), + _namespace-tokens( + (mdc, circular-progress), + mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded), + $token-slots + ), _namespace-tokens( (mdc, elevated-card), mdc-tokens.md-comp-elevated-card-values($systems, $exclude-hardcoded), @@ -187,6 +192,11 @@ mdc-tokens.md-comp-filled-text-field-values($systems, $exclude-hardcoded), $token-slots ), + _namespace-tokens( + (mdc, linear-progress), + mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded), + $token-slots + ), _namespace-tokens( (mdc, list), mdc-tokens.md-comp-list-values($systems, $exclude-hardcoded), @@ -202,6 +212,16 @@ mdc-tokens.md-comp-outlined-text-field-values($systems, $exclude-hardcoded), $token-slots ), + _namespace-tokens( + (mdc, plain-tooltip), + mdc-tokens.md-comp-plain-tooltip-values($systems, $exclude-hardcoded), + $token-slots + ), + _namespace-tokens( + (mdc, radio), + mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded), + $token-slots + ), _namespace-tokens( (mdc, slider), mdc-tokens.md-comp-slider-values($systems, $exclude-hardcoded), @@ -217,31 +237,12 @@ mdc-tokens.md-comp-switch-values($systems, $exclude-hardcoded), $token-slots ), - _namespace-tokens( - (mdc, plain-tooltip), - mdc-tokens.md-comp-plain-tooltip-values($systems, $exclude-hardcoded), - $token-slots - ), - _namespace-tokens( - (mdc, circular-progress), - mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded), - $token-slots - ), - _namespace-tokens( - (mdc, radio), - mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded), - $token-slots - ), - _namespace-tokens( - (mdc, linear-progress), - mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded), - $token-slots - ), _namespace-tokens( (mdc, tab), mdc-tokens.md-comp-secondary-navigation-tab-values($systems, $exclude-hardcoded), $token-slots ), + // Choose values for our made up tokens based on MDC system tokens or sensible hardcoded // values. _namespace-tokens( @@ -254,6 +255,11 @@ custom-tokens.card($systems, $exclude-hardcoded), $token-slots ), + _namespace-tokens( + (mat, divider), + custom-tokens.divider($systems, $exclude-hardcoded), + $token-slots + ), _namespace-tokens( (mat, form-field), custom-tokens.form-field($systems, $exclude-hardcoded), @@ -270,38 +276,38 @@ $token-slots ), _namespace-tokens( - (mat, sidenav), - custom-tokens.sidenav($systems, $exclude-hardcoded), + (mat, menu), + custom-tokens.menu($systems, $exclude-hardcoded), $token-slots ), _namespace-tokens( - (mat, toolbar), - custom-tokens.toolbar($systems, $exclude-hardcoded), - $token-slots, + (mat, radio), + custom-tokens.radio($systems, $exclude-hardcoded), + $token-slots ), _namespace-tokens( - (mat, slide-toggle), - custom-tokens.slide-toggle($systems, $exclude-hardcoded), + (mat, ripple), + custom-tokens.ripple($systems, $exclude-hardcoded), $token-slots ), _namespace-tokens( - (mat, slider), - custom-tokens.slider($systems, $exclude-hardcoded), + (mat, sidenav), + custom-tokens.sidenav($systems, $exclude-hardcoded), $token-slots ), _namespace-tokens( - (mat, snack-bar), - custom-tokens.snack-bar($systems, $exclude-hardcoded), + (mat, slide-toggle), + custom-tokens.slide-toggle($systems, $exclude-hardcoded), $token-slots ), _namespace-tokens( - (mat, radio), - custom-tokens.radio($systems, $exclude-hardcoded), + (mat, slider), + custom-tokens.slider($systems, $exclude-hardcoded), $token-slots ), _namespace-tokens( - (mat, ripple), - custom-tokens.ripple($systems, $exclude-hardcoded), + (mat, snack-bar), + custom-tokens.snack-bar($systems, $exclude-hardcoded), $token-slots ), _namespace-tokens( @@ -324,6 +330,11 @@ custom-tokens.table($systems, $exclude-hardcoded), $token-slots ), + _namespace-tokens( + (mat, toolbar), + custom-tokens.toolbar($systems, $exclude-hardcoded), + $token-slots, + ), _namespace-tokens( (mat, tree), custom-tokens.tree($systems, $exclude-hardcoded), diff --git a/src/material/core/tokens/m2/_index.scss b/src/material/core/tokens/m2/_index.scss index eb03730a222a..6f34d45b7e7a 100644 --- a/src/material/core/tokens/m2/_index.scss +++ b/src/material/core/tokens/m2/_index.scss @@ -2,9 +2,11 @@ @use 'sass:meta'; @use '../../style/sass-utils'; @use './mat/card' as tokens-mat-card; +@use './mat/divider' as tokens-mat-divider; @use './mat/form-field' as tokens-mat-form-field; @use './mat/grid-list' as tokens-mat-grid-list; @use './mat/icon' as tokens-mat-icon; +@use './mat/menu' as tokens-mat-menu; @use './mat/radio' as tokens-mat-radio; @use './mat/ripple' as tokens-mat-ripple; @use './mat/sidenav' as tokens-mat-sidenav; @@ -80,9 +82,11 @@ @function m2-tokens-from-theme($theme) { @return sass-utils.deep-merge-all( _get-tokens-for-module($theme, tokens-mat-card), + _get-tokens-for-module($theme, tokens-mat-divider), _get-tokens-for-module($theme, tokens-mat-form-field), _get-tokens-for-module($theme, tokens-mat-grid-list), _get-tokens-for-module($theme, tokens-mat-icon), + _get-tokens-for-module($theme, tokens-mat-menu), _get-tokens-for-module($theme, tokens-mat-radio), _get-tokens-for-module($theme, tokens-mat-ripple), _get-tokens-for-module($theme, tokens-mat-sidenav), diff --git a/src/material/divider/_divider-theme.scss b/src/material/divider/_divider-theme.scss index a05ce9b853ba..8e4afe2adfc8 100644 --- a/src/material/divider/_divider-theme.scss +++ b/src/material/divider/_divider-theme.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @use '../core/style/sass-utils'; @use '../core/theming/theming'; @use '../core/theming/inspection'; @@ -5,34 +6,66 @@ @use '../core/tokens/m2/mat/divider' as tokens-mat-divider; @mixin base($theme) { - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( - tokens-mat-divider.$prefix, tokens-mat-divider.get-unthemable-tokens()); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); + } + @else { + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values( + tokens-mat-divider.$prefix, tokens-mat-divider.get-unthemable-tokens()); + } } } @mixin color($theme) { - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-divider.$prefix, - tokens-mat-divider.get-color-tokens($theme)); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); + } + @else { + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-divider.$prefix, + tokens-mat-divider.get-color-tokens($theme)); + } } } -@mixin typography($theme) {} +@mixin typography($theme) { + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); + } + @else {} +} -@mixin density($theme) {} +@mixin density($theme) { + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); + } + @else {} +} @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-divider') { - @include base($theme); - @if inspection.theme-has($theme, color) { - @include color($theme); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme)); } - @if inspection.theme-has($theme, density) { - @include density($theme); - } - @if inspection.theme-has($theme, typography) { - @include typography($theme); + @else { + @include base($theme); + @if inspection.theme-has($theme, color) { + @include color($theme); + } + @if inspection.theme-has($theme, density) { + @include density($theme); + } + @if inspection.theme-has($theme, typography) { + @include typography($theme); + } } } } + +@mixin _theme-from-tokens($tokens) { + @if ($tokens != ()) { + @include token-utils.create-token-values( + tokens-mat-divider.$prefix, map.get($tokens, tokens-mat-divider.$prefix)); + } +} diff --git a/src/material/menu/_menu-theme.scss b/src/material/menu/_menu-theme.scss index 653d98230772..5fa226943b03 100644 --- a/src/material/menu/_menu-theme.scss +++ b/src/material/menu/_menu-theme.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @use '../core/tokens/m2/mat/menu' as tokens-mat-menu; @use '../core/style/sass-utils'; @use '../core/tokens/token-utils'; @@ -6,40 +7,71 @@ @use '../core/typography/typography'; @mixin base($theme) { - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-menu.$prefix, - tokens-mat-menu.get-unthemable-tokens()); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); + } + @else { + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-menu.$prefix, + tokens-mat-menu.get-unthemable-tokens()); + } } } @mixin color($theme) { - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-menu.$prefix, - tokens-mat-menu.get-color-tokens($theme)); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); + } + @else { + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-menu.$prefix, + tokens-mat-menu.get-color-tokens($theme)); + } } } @mixin typography($theme) { - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-menu.$prefix, - tokens-mat-menu.get-typography-tokens($theme)); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); + } + @else { + @include sass-utils.current-selector-or-root() { + @include token-utils.create-token-values(tokens-mat-menu.$prefix, + tokens-mat-menu.get-typography-tokens($theme)); + } } } -@mixin density($theme) {} +@mixin density($theme) { + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); + } + @else {} +} @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-menu') { - @include base($theme); - @if inspection.theme-has($theme, color) { - @include color($theme); - } - @if inspection.theme-has($theme, density) { - @include density($theme); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme)); } - @if inspection.theme-has($theme, typography) { - @include typography($theme); + @else { + @include base($theme); + @if inspection.theme-has($theme, color) { + @include color($theme); + } + @if inspection.theme-has($theme, density) { + @include density($theme); + } + @if inspection.theme-has($theme, typography) { + @include typography($theme); + } } } } +@mixin _theme-from-tokens($tokens) { + @if ($tokens != ()) { + @include token-utils.create-token-values( + tokens-mat-menu.$prefix, map.get($tokens, tokens-mat-menu.$prefix)); + } +}