feat(material-experimental/theming): add M3 select, option, and optgr…

…oup support (#28148) * feat(material-experimental/theming): add M3 select support * feat(material-experimental/theming): add M3 option & optgroup support
angular · Nov 20, 2023 · 0f3a55f · 0f3a55f
1 parent 576f44f
commit 0f3a55f
Show file tree

Hide file tree

Showing 8 changed files with 263 additions and 77 deletions.
diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss
@@ -45,10 +45,13 @@ html {
   @include mat.input-theme($light-theme);
   @include mat.list-theme($light-theme);
   @include mat.menu-theme($light-theme);
+  @include mat.optgroup-theme($light-theme);
+  @include mat.option-theme($light-theme);
   @include mat.progress-bar-theme($light-theme);
   @include mat.progress-spinner-theme($light-theme);
   @include mat.radio-theme($light-theme);
   @include mat.ripple-theme($light-theme);
+  @include mat.select-theme($light-theme);
   @include mat.sidenav-theme($light-theme);
   @include mat.slide-toggle-theme($light-theme);
   @include mat.slider-theme($light-theme);
@@ -77,10 +80,13 @@ html {
   @include mat.input-color($dark-theme);
   @include mat.list-color($dark-theme);
   @include mat.menu-color($dark-theme);
+  @include mat.optgroup-color($dark-theme);
+  @include mat.option-color($dark-theme);
   @include mat.progress-bar-color($dark-theme);
   @include mat.progress-spinner-color($dark-theme);
   @include mat.radio-color($dark-theme);
   @include mat.ripple-color($dark-theme);
+  @include mat.select-color($dark-theme);
   @include mat.sidenav-color($dark-theme);
   @include mat.slide-toggle-color($dark-theme);
   @include mat.slider-color($dark-theme);
@@ -108,9 +114,12 @@ html {
     @include mat.input-density($scale-theme);
     @include mat.list-density($scale-theme);
     @include mat.menu-density($scale-theme);
+    @include mat.optgroup-density($scale-theme);
+    @include mat.option-density($scale-theme);
     @include mat.progress-bar-density($scale-theme);
     @include mat.progress-spinner-density($scale-theme);
     @include mat.radio-density($scale-theme);
+    @include mat.select-density($scale-theme);
     @include mat.sidenav-density($scale-theme);
     @include mat.slide-toggle-density($scale-theme);
     @include mat.slider-density($scale-theme);

diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
@@ -120,6 +120,42 @@
   );
 }
 
+/// Generates custom tokens for the mat-optgroup.
+/// @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-optgroup
+@function optgroup($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, label-text, title-small),
+    (
+      label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+    )
+  );
+}
+
+/// Generates custom tokens for the mat-option.
+/// @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-option
+@function option($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, label-text, label-large),
+    (
+      selected-state-label-text-color: map.get($systems, md-sys-color, on-secondary-container),
+      label-text-color: map.get($systems, md-sys-color, on-surface),
+      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)
+      ),
+      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)
+      ),
+      selected-state-layer-color: map.get($systems, md-sys-color, secondary-container),
+    ),
+  );
+}
+
 /// Generates custom tokens for the mat-radio.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
@@ -142,6 +178,28 @@
   );
 }
 
+/// Generates custom tokens for the mat-select.
+/// @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-select
+@function select($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, trigger-text, body-large),
+    (
+      panel-background-color: map.get($systems, md-sys-color, surface-container),
+      enabled-trigger-text-color: map.get($systems, md-sys-color, on-surface),
+      disabled-trigger-text-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      placeholder-text-color: map.get($systems, md-sys-color, on-surface-variant),
+      enabled-arrow-color: map.get($systems, md-sys-color, on-surface-variant),
+      disabled-arrow-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      focused-arrow-color: map.get($systems, md-sys-color, primary),
+      invalid-arrow-color: map.get($systems, md-sys-color, error),
+    )
+  );
+}
+
 /// Generates custom tokens for the mat-sidenav.
 /// @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
@@ -49,8 +49,11 @@ $_density-tokens: (
   (mat, grid-list): (),
   (mat, icon): (),
   (mat, menu): (),
+  (mat, optgroup): (),
+  (mat, option): (),
   (mat, radio): (),
   (mat, ripple): (),
+  (mat, select): (),
   (mat, sidenav): (),
   (mat, slide-toggle): (),
   (mat, slider): (),

diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss
@@ -280,6 +280,16 @@
       custom-tokens.menu($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, optgroup),
+      custom-tokens.optgroup($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, option),
+      custom-tokens.option($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, radio),
       custom-tokens.radio($systems, $exclude-hardcoded),
@@ -290,6 +300,11 @@
       custom-tokens.ripple($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, select),
+      custom-tokens.select($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, sidenav),
       custom-tokens.sidenav($systems, $exclude-hardcoded),

diff --git a/src/material/core/option/_optgroup-theme.scss b/src/material/core/option/_optgroup-theme.scss
@@ -1,41 +1,72 @@
+@use 'sass:map';
 @use '../tokens/m2/mat/optgroup' as tokens-mat-optgroup;
 @use '../tokens/token-utils';
 @use '../style/sass-utils';
-
 @use '../theming/theming';
 @use '../theming/inspection';
 @use '../typography/typography';
 
-@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-optgroup.$prefix,
-      tokens-mat-optgroup.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-optgroup.$prefix,
+        tokens-mat-optgroup.get-color-tokens($theme));
+    }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-optgroup.$prefix,
-      tokens-mat-optgroup.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-optgroup.$prefix,
+        tokens-mat-optgroup.get-typography-tokens($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-optgroup') {
-    @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-optgroup.$prefix, map.get($tokens, tokens-mat-optgroup.$prefix));
+  }
+}
diff --git a/src/material/core/option/_option-theme.scss b/src/material/core/option/_option-theme.scss
@@ -1,51 +1,82 @@
+@use 'sass:map';
 @use '../tokens/m2/mat/option' as tokens-mat-option;
 @use '../tokens/token-utils';
 @use '../style/sass-utils';
-
 @use '../theming/theming';
 @use '../theming/inspection';
 @use '../typography/typography';
 
-@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-option.$prefix,
-      tokens-mat-option.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-option.$prefix,
+        tokens-mat-option.get-color-tokens($theme));
+    }
 
-  .mat-accent {
-    @include token-utils.create-token-values(tokens-mat-option.$prefix,
-      tokens-mat-option.get-color-tokens($theme, accent));
-  }
+    .mat-accent {
+      @include token-utils.create-token-values(tokens-mat-option.$prefix,
+        tokens-mat-option.get-color-tokens($theme, accent));
+    }
 
-  .mat-warn {
-    @include token-utils.create-token-values(tokens-mat-option.$prefix,
-      tokens-mat-option.get-color-tokens($theme, warn));
+    .mat-warn {
+      @include token-utils.create-token-values(tokens-mat-option.$prefix,
+        tokens-mat-option.get-color-tokens($theme, warn));
+    }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-option.$prefix,
-      tokens-mat-option.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-option.$prefix,
+        tokens-mat-option.get-typography-tokens($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-option') {
-    @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-option.$prefix, map.get($tokens, tokens-mat-option.$prefix));
+  }
+}
diff --git a/src/material/core/tokens/m2/_index.scss b/src/material/core/tokens/m2/_index.scss
@@ -7,8 +7,11 @@
 @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/option' as tokens-mat-option;
+@use './mat/optgroup' as tokens-mat-optgroup;
 @use './mat/radio' as tokens-mat-radio;
 @use './mat/ripple' as tokens-mat-ripple;
+@use './mat/select' as tokens-mat-select;
 @use './mat/sidenav' as tokens-mat-sidenav;
 @use './mat/slide-toggle' as tokens-mat-slide-toggle;
 @use './mat/slider' as tokens-mat-slider;
@@ -87,8 +90,11 @@
       _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-optgroup),
+      _get-tokens-for-module($theme, tokens-mat-option),
       _get-tokens-for-module($theme, tokens-mat-radio),
       _get-tokens-for-module($theme, tokens-mat-ripple),
+      _get-tokens-for-module($theme, tokens-mat-select),
       _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),