feat(material-experimental/theming): add M3 autocomplete, badge, and …

…bottom-sheet support (#28177) (cherry picked from commit 85c658f)
angular · Nov 23, 2023 · 3d118c6 · 3d118c6
1 parent c2a8129
commit 3d118c6
Show file tree

Hide file tree

Showing 8 changed files with 244 additions and 67 deletions.
diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss
@@ -38,6 +38,9 @@ $dark-theme: matx.define-theme(map.set($m3-base-config, color, theme-type, dark)
 
 // Emit default theme styles.
 html {
+  @include mat.autocomplete-theme($light-theme);
+  @include mat.badge-theme($light-theme);
+  @include mat.bottom-sheet-theme($light-theme);
   @include mat.card-theme($light-theme);
   @include mat.checkbox-theme($light-theme);
   @include mat.datepicker-theme($light-theme);
@@ -76,6 +79,9 @@ html {
   background: black;
   color: white;
 
+  @include mat.autocomplete-color($dark-theme);
+  @include mat.badge-color($dark-theme);
+  @include mat.bottom-sheet-color($dark-theme);
   @include mat.card-color($dark-theme);
   @include mat.checkbox-color($dark-theme);
   @include mat.datepicker-color($dark-theme);
@@ -113,6 +119,9 @@ html {
   $scale-theme: matx.define-theme(map.set($m3-base-config, density, scale, $scale));
 
   .demo-density-#{$scale} {
+    @include mat.autocomplete-density($scale-theme);
+    @include mat.badge-density($scale-theme);
+    @include mat.bottom-sheet-density($scale-theme);
     @include mat.card-density($scale-theme);
     @include mat.checkbox-density($scale-theme);
     @include mat.datepicker-density($scale-theme);

diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
@@ -21,6 +21,52 @@
   @return $result;
 }
 
+/// Generates custom tokens for the mat-autocomplete.
+/// @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-autocomplete
+@function autocomplete($systems, $exclude-hardcoded) {
+  @return (
+    background-color: map.get($systems, md-sys-color, surface-container),
+  );
+}
+
+/// Generates custom tokens for the mat-badge.
+/// @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-badge
+@function badge($systems, $exclude-hardcoded) {
+  @return (
+    background-color: map.get($systems, md-sys-color, error),
+    text-color: map.get($systems, md-sys-color, on-error),
+    disabled-state-background-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, error),
+      $alpha: 0.38,
+    ),
+    disabled-state-text-color: map.get($systems, md-sys-color, on-error),
+    text-font: map.get($systems, md-sys-typescale, label-small-font),
+    text-size: map.get($systems, md-sys-typescale, label-small-size),
+    text-weight: map.get($systems, md-sys-typescale, label-small-weight),
+    small-size-text-size: _hardcode(0, $exclude-hardcoded),
+    large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
+  );
+}
+
+/// Generates custom tokens for the mat-bottom-sheet.
+/// @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-bottom-sheet
+@function bottom-sheet($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, container-text, body-large),
+    (
+      container-shape: _hardcode(28px, $exclude-hardcoded),
+      container-text-color: map.get($systems, md-sys-color, on-surface),
+      container-background-color: map.get($systems, md-sys-color, surface-container-low),
+    ),
+  );
+}
+
 /// Generates custom tokens for the mat-card.
 /// @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
@@ -44,6 +44,9 @@ $_density-tokens: (
   (mdc, tab-indicator): (),
 
   // Custom Angular Material tokens
+  (mat, autocomplete): (),
+  (mat, badge): (),
+  (mat, bottom-sheet): (),
   (mat, card): (),
   (mat, datepicker): (),
   (mat, divider): (),

diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss
@@ -255,6 +255,21 @@
       custom-tokens.tab-indicator($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, autocomplete),
+      custom-tokens.autocomplete($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, badge),
+      custom-tokens.badge($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, bottom-sheet),
+      custom-tokens.bottom-sheet($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, card),
       custom-tokens.card($systems, $exclude-hardcoded),

diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss
@@ -1,34 +1,67 @@
+@use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete;
 
-@mixin base($theme) {}
+@mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {}
+}
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
-      tokens-mat-autocomplete.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-autocomplete.$prefix,
+        tokens-mat-autocomplete.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-autocomplete') {
-    @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-autocomplete.$prefix, map.get($tokens, tokens-mat-autocomplete.$prefix));
+  }
+}
diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss
@@ -1,7 +1,7 @@
 @use 'sass:color';
+@use 'sass:map';
 @use 'sass:math';
 @use '@angular/cdk';
-
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
@@ -164,57 +164,89 @@ $_emit-fallback-vars: true;
   }
 }
 
-@mixin base($theme) {}
+@mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {}
+}
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-      tokens-mat-badge.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-badge.$prefix,
+        tokens-mat-badge.get-color-tokens($theme));
+    }
 
-  .mat-badge-accent {
-    @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-      tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent));
-  }
+    .mat-badge-accent {
+      @include token-utils.create-token-values(tokens-mat-badge.$prefix,
+        tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent));
+    }
 
-  .mat-badge-warn {
-    @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-      tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn));
+    .mat-badge-warn {
+      @include token-utils.create-token-values(tokens-mat-badge.$prefix,
+        tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn));
+    }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-      tokens-mat-badge.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-badge.$prefix,
+        tokens-mat-badge.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-badge') {
-    // Try to reduce the number of times that the structural styles are emitted.
-    @if not $_badge-structure-emitted {
-      @include _badge-structure;
-
-      // Only flip the flag if the mixin is included at the top level. Otherwise the first
-      // inclusion might be inside of a theme class which will exclude the structural styles
-      // from all other themes.
-      @if not & {
-        $_badge-structure-emitted: true !global;
-      }
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
+    @else {
+      // Try to reduce the number of times that the structural styles are emitted.
+      @if not $_badge-structure-emitted {
+        @include _badge-structure;
+
+        // Only flip the flag if the mixin is included at the top level. Otherwise the first
+        // inclusion might be inside of a theme class which will exclude the structural styles
+        // from all other themes.
+        @if not & {
+          $_badge-structure-emitted: true !global;
+        }
+      }
 
-    @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);
+      @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-badge.$prefix, map.get($tokens, tokens-mat-badge.$prefix));
+  }
+}