refactor(material/core): split custom tokens into separate files

Separates out the custom M3 tokens into different files so they're easier to manage.

(cherry picked from commit 5e98b0d)

Author: crisbeto

src/material/core/tokens/_custom-tokens.scss

@@ -1,5 +1,6 @@
 @use 'sass:list';
 @use 'sass:map';
+@use 'sass:meta';
 @use '@material/elevation/elevation-theme' as mdc-elevation-theme;
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 @use '@material/theme/theme' as mdc-theme;
@@ -234,6 +235,59 @@ $_component-prefix: null;
   }
 }
 
+/// Gets the MDC tokens for the given prefix, M3 token values, and supported token slots.
+/// @param {List} $prefix The token prefix for the given tokens.
+/// @param {Map|(Map, Map)} $values A map of M3 token values for the given prefix.
+///  This param may also be a tuple of maps, the first one representing the default M3 token values,
+//   and the second containing overrides for different color variants.
+//   Single map example:
+//     (token1: green, token2: 2px)
+//   Tuple example:
+//     (
+//       (token1: green, token2: 2px),
+//       (
+//         secondary: (token1: blue),
+//         error: (token1: red),
+//       )
+//     )
+/// @param {Map} $slots A map of token slots, with null value indicating the token is not supported.
+/// @param {String|null} $variant The name of the variant the token values are for.
+/// @return {Map} A map of fully qualified token names to values, for only the supported tokens.
+@function namespace-tokens($prefix, $values, $slots, $variant: null) {
+  $result: ();
+  @if $variant == null and meta.type-of($values) == 'list' and list.length($values == 2) {
+    $variants: list.nth($values, 2);
+    $values: list.nth($values, 1);
+    @each $variant, $overrides in $variants {
+      $result: map.merge($result, namespace-tokens($prefix, $overrides, $slots, $variant));
+    }
+  }
+  $used-token-names: map.keys(_filter-nulls(map.get($slots, $prefix)));
+  $used-m3-tokens: _pick(_filter-nulls($values), $used-token-names);
+  $prefix: if($variant == null, $prefix, list.append($prefix, $variant));
+  @return map.merge($result, ($prefix: $used-m3-tokens));
+}
+
+/// Hardcode the given value, or null if hardcoded values are excluded.
+@function hardcode($value, $exclude-hardcoded) {
+  @return if($exclude-hardcoded, null, $value);
+}
+
+/// Sets all of the standard typography tokens for the given token base name to the given typography
+/// level.
+/// @param {Map} $systems The MDC system tokens
+/// @param {String} $base-name The token base name to get the typography tokens for
+/// @param {String} $typography-level The typography level to base the token values on
+/// @return {Map} A map containing the typography tokens for the given base token name
+@function generate-typography-tokens($systems, $base-name, $typography-level) {
+  $result: ();
+  @each $prop in (font, line-height, size, tracking, weight) {
+    $result: map.set($result, #{$base-name}-#{$prop},
+      map.get($systems, md-sys-typescale, #{$typography-level}-#{$prop}));
+  }
+  @return $result;
+}
+
 /// Verifies that the token overrides exist and are used in one of the given token maps.
 @mixin _validate-token-overrides($overrides: (), $token-maps) {
   $valid-token-names: ();
@@ -255,3 +309,31 @@ $_component-prefix: null;
     }
   }
 }
+
+/// Picks a submap containing only the given keys out the given map.
+/// @param {Map} $map The map to pick from.
+/// @param {List} $keys The map keys to pick.
+/// @return {Map} A submap containing only the given keys.
+@function _pick($map, $keys) {
+  $result: ();
+  @each $key in $keys {
+    @if map.has-key($map, $key) {
+      $result: map.set($result, $key, map.get($map, $key));
+    }
+  }
+  @return $result;
+}
+
+
+/// Filters keys with a null value out of the map.
+/// @param {Map} $map The map to filter.
+/// @return {Map} The given map with all of the null keys filtered out.
+@function _filter-nulls($map) {
+  $result: ();
+  @each $key, $val in $map {
+    @if $val != null {
+      $result: map.set($result, $key, $val);
+    }
+  }
+  @return $result;
+}

src/material/core/tokens/_m3-tokens.scss

@@ -0,0 +1,131 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use './mat/app' as tokens-mat-app;
+@use './mat/autocomplete' as tokens-mat-autocomplete;
+@use './mat/badge' as tokens-mat-badge;
+@use './mat/text-button' as tokens-mat-text-button;
+@use './mat/protected-button' as tokens-mat-protected-button;
+@use './mat/filled-button' as tokens-mat-filled-button;
+@use './mat/outlined-button' as tokens-mat-outlined-button;
+@use './mat/dialog' as tokens-mat-dialog;
+@use './mat/bottom-sheet' as tokens-mat-bottom-sheet;
+@use './mat/card' as tokens-mat-card;
+@use './mat/chip' as tokens-mat-chip;
+@use './mat/datepicker' as tokens-mat-datepicker;
+@use './mat/divider' as tokens-mat-divider;
+@use './mat/expansion' as tokens-mat-expansion;
+@use './mat/fab' as tokens-mat-fab;
+@use './mat/fab-small' as tokens-mat-fab-small;
+@use './mat/form-field' as tokens-mat-form-field;
+@use './mat/grid-list' as tokens-mat-grid-list;
+@use './mat/icon' as tokens-mat-icon;
+@use './mat/icon-button' as tokens-mat-icon-button;
+@use './mat/list' as tokens-mat-list;
+@use './mat/menu' as tokens-mat-menu;
+@use './mat/option' as tokens-mat-option;
+@use './mat/optgroup' as tokens-mat-optgroup;
+@use './mat/paginator' as tokens-mat-paginator;
+@use './mat/checkbox' as tokens-mat-checkbox;
+@use './mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
+@use './mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
+@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/slider' as tokens-mat-slider;
+@use './mat/switch' as tokens-mat-switch;
+@use './mat/snack-bar' as tokens-mat-snack-bar;
+@use './mat/sort' as tokens-mat-sort;
+@use './mat/standard-button-toggle' as tokens-mat-button-toggle;
+@use './mat/stepper' as tokens-mat-stepper;
+@use './mat/tab-header' as tokens-mat-tab-header;
+@use './mat/table' as tokens-mat-table;
+@use './mat/toolbar' as tokens-mat-toolbar;
+@use './mat/tree' as tokens-mat-tree;
+// @use './mdc/checkbox' as tokens-mdc-checkbox;
+// @use './mdc/text-button' as tokens-mdc-text-button;
+// @use './mdc/protected-button' as tokens-mdc-protected-button;
+// @use './mdc/filled-button' as tokens-mdc-filled-button;
+// @use './mdc/outlined-button' as tokens-mdc-outlined-button;
+// @use './mdc/chip' as tokens-mdc-chip;
+// @use './mdc/circular-progress' as tokens-mdc-circular-progress;
+// @use './mdc/dialog' as tokens-mdc-dialog;
+// @use './mdc/elevated-card' as tokens-mdc-elevated-card;
+// @use './mdc/extended-fab' as tokens-mdc-extended-fab;
+// @use './mdc/fab' as tokens-mdc-fab;
+// @use './mdc/fab-small' as tokens-mdc-fab-small;
+// @use './mdc/form-field' as tokens-mdc-form-field;
+// @use './mdc/filled-text-field' as tokens-mdc-filled-text-field;
+// @use './mdc/icon-button' as tokens-mdc-icon-button;
+// @use './mdc/linear-progress' as tokens-mdc-linear-progress;
+// @use './mdc/list' as tokens-mdc-list;
+// @use './mdc/outlined-card' as tokens-mdc-outlined-card;
+// @use './mdc/outlined-text-field' as tokens-mdc-outlined-text-field;
+// @use './mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
+// @use './mdc/radio' as tokens-mdc-radio;
+// @use './mdc/slider' as tokens-mdc-slider;
+// @use './mdc/snack-bar' as tokens-mdc-snack-bar;
+// @use './mdc/switch' as tokens-mdc-switch;
+// @use './mdc/tab' as tokens-mdc-tab;
+// @use './mdc/tab-indicator' as tokens-mdc-tab-indicator;
+
+$_module-names: (
+  tokens-mat-app,
+  tokens-mat-autocomplete,
+  tokens-mat-badge,
+  tokens-mat-bottom-sheet,
+  tokens-mat-button-toggle,
+  tokens-mat-card,
+  tokens-mat-chip,
+  tokens-mat-datepicker,
+  tokens-mat-dialog,
+  tokens-mat-divider,
+  tokens-mat-expansion,
+  tokens-mat-fab,
+  tokens-mat-fab-small,
+  tokens-mat-filled-button,
+  tokens-mat-form-field,
+  tokens-mat-grid-list,
+  tokens-mat-icon-button,
+  tokens-mat-icon,
+  tokens-mat-menu,
+  tokens-mat-optgroup,
+  tokens-mat-option,
+  tokens-mat-outlined-button,
+  tokens-mat-paginator,
+  tokens-mat-checkbox,
+  tokens-mat-full-pseudo-checkbox,
+  tokens-mat-list,
+  tokens-mat-minimal-pseudo-checkbox,
+  tokens-mat-protected-button,
+  tokens-mat-radio,
+  tokens-mat-ripple,
+  tokens-mat-select,
+  tokens-mat-sidenav,
+  tokens-mat-slider,
+  tokens-mat-switch,
+  tokens-mat-snack-bar,
+  tokens-mat-sort,
+  tokens-mat-stepper,
+  tokens-mat-tab-header,
+  tokens-mat-table,
+  tokens-mat-text-button,
+  tokens-mat-toolbar,
+  tokens-mat-tree,
+);
+
+/// Gets the full set of M3 tokens for the given theme object.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} Full set of M3 tokens
+@function get-m3-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ();
+
+  @each $module-name in $_module-names {
+    $fn: meta.get-function($name: 'get-tokens', $module: $module-name);
+    $tokens: map.merge($tokens, meta.call($fn, $systems, $exclude-hardcoded, $token-slots));
+  }
+
+  @return $tokens;
+}

src/material/core/tokens/_token-utils.scss

@@ -0,0 +1,19 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, app);
+
+/// Generates custom tokens for the app.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the app
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    background-color: map.get($systems, md-sys-color, background),
+    text-color: map.get($systems, md-sys-color, on-background),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

src/material/core/tokens/m3/_index.scss

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@use '@material/elevation/elevation-theme' as mdc-elevation;
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, autocomplete);
+
+/// Generates custom tokens for the mat-autocomplete.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-autocomplete
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    background-color: map.get($systems, md-sys-color, surface-container),
+    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
+    container-elevation-shadow:
+      token-utils.hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

src/material/core/tokens/m3/mat/_app.scss

@@ -0,0 +1,77 @@
+@use 'sass:map';
+@use '../../../style/sass-utils';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, badge);
+
+/// Generates custom tokens for the mat-badge.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-badge
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ((
+    background-color: map.get($systems, md-sys-color, error),
+    text-color: map.get($systems, md-sys-color, on-error),
+    disabled-state-background-color: sass-utils.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: token-utils.hardcode(0, $exclude-hardcoded),
+    container-shape: map.get($systems, md-sys-shape, corner-full),
+    container-size: token-utils.hardcode(16px, $exclude-hardcoded),
+    legacy-container-size: token-utils.hardcode(unset, $exclude-hardcoded),
+    legacy-small-size-container-size: token-utils.hardcode(unset, $exclude-hardcoded),
+    small-size-container-size: token-utils.hardcode(6px, $exclude-hardcoded),
+    container-padding: token-utils.hardcode(0 4px, $exclude-hardcoded),
+    small-size-container-padding: token-utils.hardcode(0, $exclude-hardcoded),
+    container-offset: token-utils.hardcode(-12px 0, $exclude-hardcoded),
+    small-size-container-offset: token-utils.hardcode(-6px 0, $exclude-hardcoded),
+    container-overlap-offset: token-utils.hardcode(-12px, $exclude-hardcoded),
+    small-size-container-overlap-offset: token-utils.hardcode(-6px, $exclude-hardcoded),
+
+    // This size isn't in the M3 spec so we emit the same values as for `medium`.
+    large-size-container-size: token-utils.hardcode(16px, $exclude-hardcoded),
+    large-size-container-offset: token-utils.hardcode(-12px 0, $exclude-hardcoded),
+    large-size-container-overlap-offset: token-utils.hardcode(-12px, $exclude-hardcoded),
+    large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
+    large-size-container-padding: token-utils.hardcode(0 4px, $exclude-hardcoded),
+    legacy-large-size-container-size: token-utils.hardcode(unset, $exclude-hardcoded),
+  ), (
+    primary: (
+      background-color: map.get($systems, md-sys-color, primary),
+      text-color: map.get($systems, md-sys-color, on-primary),
+      disabled-state-background-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, primary),
+        $alpha: 0.38,
+      ),
+      disabled-state-text-color: map.get($systems, md-sys-color, on-primary),
+    ),
+    secondary: (
+      background-color: map.get($systems, md-sys-color, secondary),
+      text-color: map.get($systems, md-sys-color, on-secondary),
+      disabled-state-background-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, secondary),
+        $alpha: 0.38,
+      ),
+      disabled-state-text-color: map.get($systems, md-sys-color, on-secondary),
+    ),
+    tertiary: (
+      background-color: map.get($systems, md-sys-color, tertiary),
+      text-color: map.get($systems, md-sys-color, on-tertiary),
+      disabled-state-background-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, tertiary),
+        $alpha: 0.38,
+      ),
+      disabled-state-text-color: map.get($systems, md-sys-color, on-tertiary),
+    ),
+    error: () // Default, no overrides needed
+  ));
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

src/material/core/tokens/m3/mat/_autocomplete.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+@use '../../../style/sass-utils';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, bottom-sheet);
+
+/// 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
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-bottom-sheet
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: sass-utils.merge-all(
+    token-utils.generate-typography-tokens($systems, container-text, body-large),
+    (
+      container-shape: token-utils.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),
+    ),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}