feat(material-experimental/theming): add M3 dialog support (#28163)

(cherry picked from commit 7a1cd42)
angular · Nov 22, 2023 · 4424c0b · 4424c0b
1 parent 4675fd9
commit 4424c0b
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 17 deletions.
diff --git 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.form-field-theme($light-theme);
   @include mat.grid-list-theme($light-theme);
@@ -73,6 +74,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.form-field-color($dark-theme);
   @include mat.grid-list-color($dark-theme);
@@ -107,6 +109,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.form-field-density($scale-theme);
     @include mat.grid-list-density($scale-theme);

diff --git 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, filled-text-field): (),
   (mdc, linear-progress): (),

diff --git 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
@@ -1,43 +1,74 @@
+@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;
 @use '../core/theming/theming';
 @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));
+  }
+}