diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss index be4c5c3b9b4c..8000a6f95f47 100644 --- a/src/dev-app/theme-m3.scss +++ b/src/dev-app/theme-m3.scss @@ -45,6 +45,7 @@ html { @include mat.progress-spinner-theme($light-theme); @include mat.radio-theme($light-theme); @include mat.ripple-theme($light-theme); + @include mat.sidenav-theme($light-theme); @include mat.slide-toggle-theme($light-theme); @include mat.slider-theme($light-theme); @include mat.snack-bar-theme($light-theme); @@ -72,6 +73,7 @@ html { @include mat.progress-spinner-color($dark-theme); @include mat.radio-color($dark-theme); @include mat.ripple-color($dark-theme); + @include mat.sidenav-color($dark-theme); @include mat.slide-toggle-color($dark-theme); @include mat.slider-color($dark-theme); @include mat.snack-bar-color($dark-theme); @@ -97,6 +99,7 @@ html { @include mat.progress-bar-density($scale-theme); @include mat.progress-spinner-density($scale-theme); @include mat.radio-density($scale-theme); + @include mat.sidenav-density($scale-theme); @include mat.slide-toggle-density($scale-theme); @include mat.slider-density($scale-theme); @include mat.snack-bar-density($scale-theme); diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index 15566ea32c5c..fd22c145f831 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -126,6 +126,23 @@ ); } +/// Generates custom tokens for the mat-sidenav. +/// @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-sidenav +@function sidenav($systems, $exclude-hardcoded) { + @return ( + container-shape: 16px, + container-divider-color: map.get($systems, md-sys-color, outline), + container-background-color: map.get($systems, md-sys-color, surface), + container-text-color: map.get($systems, md-sys-color, on-surface-variant), + content-background-color: _hardcode(inherit, $exclude-hardcoded), + content-text-color: _hardcode(inherit, $exclude-hardcoded), + scrim-color: mat.private-safe-color-change( + map.get($systems, md-ref-palette, neutral-variant20), $alpha: 0.4), + ); +} + /// Generates custom tokens for the mat-sort. /// @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 7646858494be..73e72d28f80d 100644 --- a/src/material-experimental/theming/_m3-density.scss +++ b/src/material-experimental/theming/_m3-density.scss @@ -53,6 +53,7 @@ $_density-tokens: ( (mat, snack-bar): (), (mat, radio): (), (mat, ripple): (), + (mat, sidenav): (), (mat, slide-toggle): (), (mat, sort): (), (mat, stepper): ( diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss index 0f3a748aa550..a70c5238ac1e 100644 --- a/src/material-experimental/theming/_m3-tokens.scss +++ b/src/material-experimental/theming/_m3-tokens.scss @@ -264,6 +264,11 @@ custom-tokens.form-field($systems, $exclude-hardcoded), $token-slots ), + _namespace-tokens( + (mat, sidenav), + custom-tokens.sidenav($systems, $exclude-hardcoded), + $token-slots + ), _namespace-tokens( (mat, toolbar), custom-tokens.toolbar($systems, $exclude-hardcoded), @@ -347,11 +352,11 @@ $sys-color: if($type == dark, mdc-tokens.md-sys-color-values-dark($ref), mdc-tokens.md-sys-color-values-light($ref)); - @return _generate-tokens(( + @return _generate-tokens(map.merge($ref, ( md-sys-color: $sys-color, md-sys-elevation: mdc-tokens.md-sys-elevation-values(), md-sys-state: mdc-tokens.md-sys-state-values(), - )); + ))); } /// Generates a set of namespaced color tokens for all components. diff --git a/src/material/core/tokens/m2/_index.scss b/src/material/core/tokens/m2/_index.scss index 0b8a09421c5a..8f18b8762946 100644 --- a/src/material/core/tokens/m2/_index.scss +++ b/src/material/core/tokens/m2/_index.scss @@ -5,6 +5,7 @@ @use './mat/form-field' as tokens-mat-form-field; @use './mat/radio' as tokens-mat-radio; @use './mat/ripple' as tokens-mat-ripple; +@use './mat/sidenav' as tokens-mat-sidenav; @use './mat/slide-toggle' as tokens-mat-slide-toggle; @use './mat/slider' as tokens-mat-slider; @use './mat/snack-bar' as tokens-mat-snack-bar; @@ -80,6 +81,7 @@ _get-tokens-for-module($theme, tokens-mat-form-field), _get-tokens-for-module($theme, tokens-mat-radio), _get-tokens-for-module($theme, tokens-mat-ripple), + _get-tokens-for-module($theme, tokens-mat-sidenav), _get-tokens-for-module($theme, tokens-mat-slide-toggle), _get-tokens-for-module($theme, tokens-mat-slider), _get-tokens-for-module($theme, tokens-mat-snack-bar), diff --git a/src/material/sidenav/_sidenav-theme.scss b/src/material/sidenav/_sidenav-theme.scss index 1a2fba911f35..d25e0b6bef1c 100644 --- a/src/material/sidenav/_sidenav-theme.scss +++ b/src/material/sidenav/_sidenav-theme.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @use '../core/theming/theming'; @use '../core/theming/inspection'; @use '../core/tokens/m2/mat/sidenav' as tokens-mat-sidenav; @@ -5,34 +6,66 @@ @use '../core/style/sass-utils'; @mixin base($theme) { - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values( - tokens-mat-sidenav.$prefix, tokens-mat-sidenav.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-sidenav.$prefix, tokens-mat-sidenav.get-unthemable-tokens()); + } } } @mixin color($theme) { - @include sass-utils.current-selector-or-root() { - @include token-utils.create-token-values(tokens-mat-sidenav.$prefix, - tokens-mat-sidenav.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-sidenav.$prefix, + tokens-mat-sidenav.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-sidenav') { - @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-sidenav.$prefix, map.get($tokens, tokens-mat-sidenav.$prefix)); + } +}