refactor(material/core): switch option and option group to tokens API (#27365)

Reworks the `mat-option` and `mat-optgroup` themes to use the new tokens theming API.

Author: crisbeto

src/material/core/option/_optgroup-theme.scss

@@ -1,24 +1,27 @@
-@use '@material/theme/theme' as mdc-theme;
+@use '../tokens/m2/mat/optgroup' as tokens-mat-optgroup;
+@use '../tokens/token-utils';
+@use '../style/sass-utils';
 
 @use '../theming/theming';
 @use '../typography/typography';
-@use '../mdc-helpers/mdc-helpers';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
 
-  @include mdc-helpers.using-mdc-theme($config) {
-    .mat-mdc-optgroup-label {
-      // Since this will usually be rendered in an overlay,
-      // we have to explicitly set the default color.
-      @include mdc-theme.prop(color, text-primary-on-background);
-    }
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-optgroup.$prefix,
+      tokens-mat-optgroup.get-color-tokens($config));
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
       theming.get-typography-config($config-or-theme));
+
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-optgroup.$prefix,
+      tokens-mat-optgroup.get-typography-tokens($config));
+  }
 }
 
 @mixin density($config-or-theme) {

src/material/core/option/_option-theme.scss

@@ -1,8 +1,7 @@
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/list/evolution-mixins' as mdc-list-mixins;
-@use '@material/typography' as mdc-typography;
-@use '@material/ripple' as mdc-ripple;
+@use 'sass:map';
+@use '../tokens/m2/mat/option' as tokens-mat-option;
+@use '../tokens/token-utils';
+@use '../style/sass-utils';
 
 @use '../theming/theming';
 @use '../typography/typography';
@@ -12,42 +11,19 @@
   $config: theming.get-color-config($config-or-theme);
 
   @include mdc-helpers.using-mdc-theme($config) {
-    .mat-mdc-option {
-      // Since this will usually be rendered in an overlay,
-      // we have explicitly set the default color.
-      @include mdc-theme.prop(color, text-primary-on-background);
-
-      // Increase specificity to override styles from list theme.
-      &:hover:not(.mdc-list-item--disabled),
-      &:focus.mdc-list-item,
-      &.mat-mdc-option-active.mdc-list-item,
-
-      // In multiple mode there is a checkbox to show that the option is selected.
-      &.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
-        $color: mdc-theme-color.$on-surface;
-        background: rgba($color, mdc-ripple.states-opacity($color, hover));
-      }
-    }
-
-    .mat-primary {
-      .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-        @include mdc-list-mixins.list-primary-text-ink-color(primary,
-          $query: mdc-helpers.$mdc-theme-styles-query);
-      }
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-option.$prefix,
+        tokens-mat-option.get-color-tokens($config));
     }
 
     .mat-accent {
-      .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-        @include mdc-list-mixins.list-primary-text-ink-color(secondary,
-          $query: mdc-helpers.$mdc-theme-styles-query);
-      }
+      @include token-utils.create-token-values(tokens-mat-option.$prefix,
+        tokens-mat-option.private-get-color-palette-color-tokens(map.get($config, accent)));
     }
 
     .mat-warn {
-      .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-        @include mdc-list-mixins.list-primary-text-ink-color(error,
-          $query: mdc-helpers.$mdc-theme-styles-query);
-      }
+      @include token-utils.create-token-values(tokens-mat-option.$prefix,
+        tokens-mat-option.private-get-color-palette-color-tokens(map.get($config, warn)));
     }
   }
 }
@@ -56,17 +32,9 @@
   $config: typography.private-typography-to-2018-config(
       theming.get-typography-config($config-or-theme));
 
-  @include mdc-helpers.using-mdc-typography($config) {
-    // MDC uses the `subtitle1` level for list items, but
-    // the spec shows `body1` as the correct level.
-    .mat-mdc-option {
-      @include mdc-typography.typography(body1,
-        $query: mdc-helpers.$mdc-typography-styles-query,
-        // Exclude these properties, because they cause some build
-        // issues internally and they aren't used for anything.
-        $exclude-props: (text-decoration, text-transform)
-      );
-    }
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-option.$prefix,
+      tokens-mat-option.get-typography-tokens($config));
   }
 }
 

src/material/core/option/optgroup.scss

@@ -1,8 +1,23 @@
 @use 'sass:map';
 @use '@material/list/evolution-mixins' as mdc-list-mixins;
 @use '@material/list/evolution-variables' as mdc-list-variables;
+@use '../tokens/m2/mat/optgroup' as tokens-mat-optgroup;
+@use '../tokens/token-utils';
 @use '../mdc-helpers/mdc-helpers';
 
+.mat-mdc-optgroup {
+  // These tokens are set on the root option group to make them easier to override.
+  @include token-utils.use-tokens(
+    tokens-mat-optgroup.$prefix, tokens-mat-optgroup.get-token-slots()) {
+    @include token-utils.create-token-slot(color, label-text-color);
+    @include token-utils.create-token-slot(font-family, label-text-font);
+    @include token-utils.create-token-slot(line-height, label-text-line-height);
+    @include token-utils.create-token-slot(font-size, label-text-size);
+    @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
+    @include token-utils.create-token-slot(font-weight, label-text-weight);
+  }
+}
+
 .mat-mdc-optgroup-label {
   @include mdc-list-mixins.item-base;
   @include mdc-list-mixins.item-spacing(
@@ -23,6 +38,16 @@
   // Needs to be overwritten explicitly, because the style can
   // leak in from the list and cause the text to truncate.
   .mdc-list-item__primary-text {
+    // MDC assigns the typography to this element, rather than the element itself, which will break
+    // existing overrides. Set all of the typography-related properties to `inherit` so that any
+    // styles set on the host can propagate down.
+    font-size: inherit;
+    font-weight: inherit;
+    letter-spacing: inherit;
+    line-height: inherit;
+    font-family: inherit;
+    text-decoration: inherit;
+    text-transform: inherit;
     white-space: normal;
   }
 }

src/material/core/option/option.scss

@@ -2,7 +2,10 @@
 @use '@angular/cdk';
 @use '@material/list/evolution-mixins' as mdc-list-mixins;
 @use '@material/list/evolution-variables' as mdc-list-variables;
+@use '@material/typography/typography' as mdc-typography;
 
+@use '../tokens/m2/mat/option' as tokens-mat-option;
+@use '../tokens/token-utils';
 @use '../mdc-helpers/mdc-helpers';
 @use '../style/vendor-prefixes';
 @use '../style/layout-common';
@@ -13,9 +16,42 @@
   @include mdc-list-mixins.item-spacing(
     mdc-list-variables.$side-padding, $query: mdc-helpers.$mdc-base-styles-query);
   @include vendor-prefixes.user-select(none);
+  @include mdc-typography.smooth-font();
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 
+  @include token-utils.use-tokens(
+    tokens-mat-option.$prefix, tokens-mat-option.get-token-slots()) {
+    @include token-utils.create-token-slot(color, label-text-color);
+    @include token-utils.create-token-slot(font-family, label-text-font);
+    @include token-utils.create-token-slot(line-height, label-text-line-height);
+    @include token-utils.create-token-slot(font-size, label-text-size);
+    @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
+    @include token-utils.create-token-slot(font-weight, label-text-weight);
+
+    // Increase specificity to override styles from list theme.
+    &:hover:not(.mdc-list-item--disabled) {
+      @include token-utils.create-token-slot(background-color, hover-state-layer-color);
+    }
+
+    &:focus.mdc-list-item,
+    &.mat-mdc-option-active.mdc-list-item {
+      @include token-utils.create-token-slot(background-color, focus-state-layer-color);
+    }
+
+    &.mdc-list-item--selected:not(.mdc-list-item--disabled) {
+      .mdc-list-item__primary-text {
+        @include token-utils.create-token-slot(color, selected-state-label-text-color);
+      }
+
+      // We don't change the background in multiple mode since
+      // it has the checkbox to show the selected state.
+      &:not(.mat-mdc-option-multiple) {
+        @include token-utils.create-token-slot(background-color, selected-state-layer-color);
+      }
+    }
+  }
+
   // If the MDC list is loaded after the option, this gets overwritten which breaks the text
   // alignment. Ideally we'd wrap all the MDC mixins above with this selector, but the increased
   // specificity breaks some internal overrides.

src/material/core/tokens/m2/mat/_optgroup.scss

@@ -0,0 +1,60 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+@use '../../../typography/typography-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, optgroup);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $foreground: map.get($config, foreground);
+
+  @return (
+    label-text-color: theming.get-color-from-palette($foreground, text),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  // TODO(crisbeto): The earlier implementation of the option used MDC's APIs to create the
+  // typography tokens. As a result, we unintentionally allowed `null` typography configs to be
+  // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary
+  // fallback.
+  @if ($config == null) {
+    $config: mdc-helpers.private-fallback-typography-from-mdc();
+  }
+
+  @return (
+    label-text-font: typography-utils.font-family($config, body-1) or
+      typography-utils.font-family($config),
+    label-text-line-height: typography-utils.line-height($config, body-1),
+    label-text-size: typography-utils.font-size($config, body-1),
+    label-text-tracking: typography-utils.letter-spacing($config, body-1),
+    label-text-weight: typography-utils.font-weight($config, body-1)
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

src/material/core/tokens/m2/mat/_option.scss

@@ -0,0 +1,75 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+@use '../../../typography/typography-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, option);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $is-dark: map.get($config, is-dark);
+  $foreground: map.get($config, foreground);
+  $primary: map.get($config, primary);
+  $on-surface: if($is-dark, #fff, #000);
+  $active-state-layer-color: rgba($on-surface, if($is-dark, 0.08, 0.04));
+  $palette-tokens: private-get-color-palette-color-tokens($primary);
+
+  @return map.merge($palette-tokens, (
+    label-text-color: theming.get-color-from-palette($foreground, text),
+    hover-state-layer-color: $active-state-layer-color,
+    focus-state-layer-color: $active-state-layer-color,
+    selected-state-layer-color: $active-state-layer-color,
+  ));
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  // TODO(crisbeto): The earlier implementation of the option used MDC's APIs to create the
+  // typography tokens. As a result, we unintentionally allowed `null` typography configs to be
+  // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary
+  // fallback.
+  @if ($config == null) {
+    $config: mdc-helpers.private-fallback-typography-from-mdc();
+  }
+
+  @return (
+    label-text-font: typography-utils.font-family($config, body-1) or
+      typography-utils.font-family($config),
+    label-text-line-height: typography-utils.line-height($config, body-1),
+    label-text-size: typography-utils.font-size($config, body-1),
+    label-text-tracking: typography-utils.letter-spacing($config, body-1),
+    label-text-weight: typography-utils.font-weight($config, body-1)
+  );
+}
+
+// Generates the tokens used to theme the option based on a palette.
+@function private-get-color-palette-color-tokens($palette) {
+  @return (
+    selected-state-label-text-color: theming.get-color-from-palette($palette),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}