diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss index 86417c0a4b23..65e642580c52 100644 --- a/src/dev-app/theme-m3.scss +++ b/src/dev-app/theme-m3.scss @@ -38,6 +38,7 @@ $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.dialog-theme($light-theme); @include mat.divider-theme($light-theme); @include mat.fab-theme($light-theme); @include mat.form-field-theme($light-theme); @@ -75,6 +76,7 @@ html { @include mat.card-color($dark-theme); @include mat.checkbox-color($dark-theme); + @include mat.dialog-color($dark-theme); @include mat.divider-color($dark-theme); @include mat.fab-color($dark-theme); @include mat.form-field-color($dark-theme); @@ -111,6 +113,7 @@ html { .demo-density-#{$scale} { @include mat.card-density($scale-theme); @include mat.checkbox-density($scale-theme); + @include mat.dialog-density($scale-theme); @include mat.divider-density($scale-theme); @include mat.fab-density($scale-theme); @include mat.form-field-density($scale-theme); diff --git a/src/material-experimental/theming/_m3-density.scss b/src/material-experimental/theming/_m3-density.scss index b6532be1d063..85c9021bb268 100644 --- a/src/material-experimental/theming/_m3-density.scss +++ b/src/material-experimental/theming/_m3-density.scss @@ -20,6 +20,7 @@ $_density-tokens: ( state-layer-size: (40px, 36px, 32px, 28px), ), (mdc, circular-progress): (), + (mdc, dialog): (), (mdc, elevated-card): (), (mdc, extended-fab): (), (mdc, fab): (), diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss index 1ecffc4f65aa..11900ec5326f 100644 --- a/src/material-experimental/theming/_m3-tokens.scss +++ b/src/material-experimental/theming/_m3-tokens.scss @@ -182,6 +182,11 @@ mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded), $token-slots ), + _namespace-tokens( + (mdc, dialog), + mdc-tokens.md-comp-dialog-values($systems, $exclude-hardcoded), + $token-slots + ), _namespace-tokens( (mdc, elevated-card), mdc-tokens.md-comp-elevated-card-values($systems, $exclude-hardcoded), diff --git a/src/material/dialog/_dialog-theme.scss b/src/material/dialog/_dialog-theme.scss index 06c536992440..297d30f26bc4 100644 --- a/src/material/dialog/_dialog-theme.scss +++ b/src/material/dialog/_dialog-theme.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @use '@material/dialog/dialog-theme' as mdc-dialog-theme; @use '../core/style/sass-utils'; @use '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog; @@ -5,39 +6,69 @@ @use '../core/theming/inspection'; @use '../core/typography/typography'; - @mixin base($theme) { - // Add default values for tokens not related to color, typography, or density. - @include sass-utils.current-selector-or-root() { - @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-unthemable-tokens()); + @if inspection.get-theme-version($theme) == 1 { + @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); + } + @else { + // Add default values for tokens not related to color, typography, or density. + @include sass-utils.current-selector-or-root() { + @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-unthemable-tokens()); + } } } @mixin color($theme) { - @include sass-utils.current-selector-or-root() { - @include mdc-dialog-theme.theme(tokens-mdc-dialog.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 mdc-dialog-theme.theme(tokens-mdc-dialog.get-color-tokens($theme)); + } } } @mixin typography($theme) { - @include sass-utils.current-selector-or-root() { - @include mdc-dialog-theme.theme(tokens-mdc-dialog.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 mdc-dialog-theme.theme(tokens-mdc-dialog.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-dialog') { - @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 mdc-dialog-theme.theme(map.get($tokens, tokens-mdc-dialog.$prefix)); + } +}