@angular/material 20.0.0-rc.0 → 20.0.0-rc.2

package/core/tokens/_m3-tokens.scss

@@ -1,127 +1,7 @@
-@use '../../autocomplete/m3-autocomplete';
-@use '../../badge/m3-badge';
-@use '../../bottom-sheet/m3-bottom-sheet';
-@use '../../button-toggle/m3-button-toggle';
-@use '../../button/m3-button';
-@use '../../button/m3-fab';
-@use '../../button/m3-icon-button';
-@use '../../card/m3-card';
-@use '../../checkbox/m3-checkbox';
-@use '../../chips/m3-chip';
-@use '../../datepicker/m3-datepicker';
-@use '../../dialog/m3-dialog';
-@use '../../divider/m3-divider';
-@use '../../expansion/m3-expansion';
-@use '../../form-field/m3-form-field';
-@use '../../grid-list/m3-grid-list';
-@use '../../icon/m3-icon';
-@use '../../list/m3-list';
-@use '../../menu/m3-menu';
-@use '../../paginator/m3-paginator';
-@use '../../progress-bar/m3-progress-bar';
-@use '../../progress-spinner/m3-progress-spinner';
-@use '../../radio/m3-radio';
-@use '../../select/m3-select';
-@use '../../sidenav/m3-sidenav';
-@use '../../slide-toggle/m3-slide-toggle';
-@use '../../slider/m3-slider';
-@use '../../snack-bar/m3-snack-bar';
-@use '../../sort/m3-sort';
-@use '../../stepper/m3-stepper';
-@use '../../table/m3-table';
-@use '../../tabs/m3-tabs';
-@use '../../timepicker/m3-timepicker';
-@use '../../toolbar/m3-toolbar';
-@use '../../tooltip/m3-tooltip';
-@use '../../tree/m3-tree';
-@use '../m2' as m2-theming;
-@use '../m3-app';
-@use '../option/m3-optgroup';
-@use '../option/m3-option';
-@use '../ripple/m3-ripple';
-@use '../selection/pseudo-checkbox/m3-pseudo-checkbox';
 @use '../style/sass-utils';
-@use './format-tokens';
-@use './m2-tokens';
 @use './m3';
 @use 'sass:map';
 
-/// Generates tokens for the given palette with the given prefix.
-/// @param {Map} $palette The palette to generate tokens for
-/// @param {String} $prefix The key prefix used to name the tokens
-/// @return {Map} A set of tokens for the given palette
-@function _generate-palette-tokens($palette, $prefix) {
-  $palette: map.remove($palette, neutral, neutral-variant);
-  $result: ();
-  @each $hue, $value in $palette {
-    $result: map.set($result, '#{$prefix}#{$hue}', $value);
-  }
-  @return $result;
-}
-
-/// Creates a set of `md-ref-palette` tokens from the given palettes. (See
-/// ./m3/definitions/_md-ref-palette.scss)
-/// @param {Map} $primary The primary palette
-/// @param {Map} $secondary The secondary palette
-/// @param {Map} $tertiary The tertiary palette
-/// @param {Map} $error The error palette
-/// @return {Map} A set of `md-ref-palette` tokens
-@function generate-ref-palette-tokens($primary, $tertiary, $error) {
-  @return sass-utils.merge-all(
-      (black: #000, white: #fff),
-      _generate-palette-tokens($primary, primary),
-      _generate-palette-tokens(map.get($primary, secondary), secondary),
-      _generate-palette-tokens($tertiary, tertiary),
-      _generate-palette-tokens(map.get($primary, neutral), neutral),
-      _generate-palette-tokens(map.get($primary, neutral-variant), neutral-variant),
-      _generate-palette-tokens($error, error),
-  );
-}
-
-/// Creates a set of `md-ref-typeface` tokens from the given palettes. (See
-/// ./m3/definitions/_md-ref-typeface.scss)
-/// @param {List|String} $brand The font-family to use for brand text
-/// @param {List|String} $plain The font-family to use for plain text
-/// @param {String} $bold The font-weight to use for bold text
-/// @param {String} $medium The font-weight to use for medium text
-/// @param {String} $regular The font-weight to use for regular text
-/// @return {Map} A set of `md-ref-typeface` tokens
-@function generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular) {
-  @return (
-    brand: $brand,
-    plain: $plain,
-    weight-bold: $bold,
-    weight-medium: $medium,
-    weight-regular: $regular,
-  );
-}
-
-$_cached-token-slots: null;
-
-/// Determines the token slots for all components.
-@function _get-token-slots() {
-  // Cache the slots since they're constant and calculating
-  // them appears to be expensive (see #29009).
-  @if ($_cached-token-slots) {
-    @return $_cached-token-slots;
-  }
-
-  // TODO(mmalerba): Refactor this to not depend on the legacy theme when moving out of
-  //  material-experimental. This is a hack for now because there is no good way to get the token
-  //  slots in material-experimental without exposing them all from material.
-  $fake-theme: m2-theming.define-light-theme((
-    color: (
-      primary: m2-theming.define-palette(m2-theming.$red-palette),
-      accent: m2-theming.define-palette(m2-theming.$red-palette),
-      warn: m2-theming.define-palette(m2-theming.$red-palette),
-    ),
-    typography: m2-theming.define-typography-config(),
-    density: 0
-  ));
-  $_cached-token-slots: m2-tokens.m2-tokens-from-theme($fake-theme) !global;
-  @return $_cached-token-slots;
-}
-
 /// Generates a set of namespaced tokens for all components.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $include-non-systemized Whether to include non-systemized tokens
@@ -138,11 +18,6 @@ $_cached-token-slots: null;
   ), $systems);
   $exclude-hardcoded: not $include-non-systemized;
 
-  // DO NOT REMOVE
-  // This function is used internally.
-  $systems: format-tokens.private-format-tokens($systems);
-  $token-slots: _get-token-slots();
-
   // TODO(mmalerba): Fill in remaining tokens.
   $result: sass-utils.deep-merge-all(
     // Add the system color & typography tokens (so we can give users access via an API).
@@ -150,7 +25,6 @@ $_cached-token-slots: null;
       (mat, theme): map.get($systems, md-sys-color),
       (mat, typography): map.get($systems, md-sys-typescale),
     ),
-    get-m3-tokens($systems, $exclude-hardcoded, $token-slots),
   );
 
   @return $result;
@@ -164,170 +38,34 @@ $_cached-token-slots: null;
   @return $result;
 }
 
-@function _get-sys-color($type, $ref, $prefix) {
-  $mdc-sys-color: if($type == dark,
-    m3.md-sys-color-values-dark($ref),
-    m3.md-sys-color-values-light($ref));
+@function get-sys-color($type, $palettes, $prefix) {
+  $sys-color: if($type == dark,
+    m3.md-sys-color-values-dark($palettes),
+    m3.md-sys-color-values-light($palettes));
 
   @if (sass-utils.$use-system-color-variables) {
-    $keys: (
-            'background',
-            'error',
-            'error-container',
-            'inverse-on-surface',
-            'inverse-primary',
-            'inverse-surface',
-            'on-background',
-            'on-error',
-            'on-error-container',
-            'on-primary',
-            'on-primary-container',
-            'on-primary-fixed',
-            'on-primary-fixed-variant',
-            'on-secondary',
-            'on-secondary-container',
-            'on-secondary-fixed',
-            'on-secondary-fixed-variant',
-            'on-surface',
-            'on-surface-variant',
-            'on-tertiary',
-            'on-tertiary-container',
-            'on-tertiary-fixed',
-            'on-tertiary-fixed-variant',
-            'outline',
-            'outline-variant',
-            'primary',
-            'primary-container',
-            'primary-fixed',
-            'primary-fixed-dim',
-            'scrim',
-            'secondary',
-            'secondary-container',
-            'secondary-fixed',
-            'secondary-fixed-dim',
-            'surface',
-            'surface-bright',
-            'surface-container',
-            'surface-container-high',
-            'surface-container-highest',
-            'surface-container-low',
-            'surface-container-lowest',
-            'surface-dim',
-            'surface-tint',
-            'surface-variant',
-            'tertiary',
-            'tertiary-container',
-            'tertiary-fixed',
-            'tertiary-fixed-dim'
-    );
-    @return map.merge(create-map($keys, $prefix), (
-      shadow: map.get($mdc-sys-color, shadow)
-    ));
+    $var-values: ();
+    @each $key in map.keys($sys-color) {
+      $var-values: map.set($var-values, $key, var(--#{$prefix}-#{$key}));
+    }
+    $var-values: map.set($var-values, shadow, map.get($sys-color, shadow));
+    @return $var-values;
   }
 
-  @return $mdc-sys-color;
+  @return $sys-color;
 }
 
-@function _get-sys-typeface($ref, $prefix) {
+@function get-sys-typeface($typography, $prefix) {
+  $sys-typography: m3.md-sys-typescale-values($typography);
   @if (sass-utils.$use-system-typography-variables) {
-    $keys: (
-            'body-large',
-            'body-large-font',
-            'body-large-line-height',
-            'body-large-size',
-            'body-large-tracking',
-            'body-large-weight',
-            'body-medium',
-            'body-medium-font',
-            'body-medium-line-height',
-            'body-medium-size',
-            'body-medium-tracking',
-            'body-medium-weight',
-            'body-small',
-            'body-small-font',
-            'body-small-line-height',
-            'body-small-size',
-            'body-small-tracking',
-            'body-small-weight',
-            'display-large',
-            'display-large-font',
-            'display-large-line-height',
-            'display-large-size',
-            'display-large-tracking',
-            'display-large-weight',
-            'display-medium',
-            'display-medium-font',
-            'display-medium-line-height',
-            'display-medium-size',
-            'display-medium-tracking',
-            'display-medium-weight',
-            'display-small',
-            'display-small-font',
-            'display-small-line-height',
-            'display-small-size',
-            'display-small-tracking',
-            'display-small-weight',
-            'headline-large',
-            'headline-large-font',
-            'headline-large-line-height',
-            'headline-large-size',
-            'headline-large-tracking',
-            'headline-large-weight',
-            'headline-medium',
-            'headline-medium-font',
-            'headline-medium-line-height',
-            'headline-medium-size',
-            'headline-medium-tracking',
-            'headline-medium-weight',
-            'headline-small',
-            'headline-small-font',
-            'headline-small-line-height',
-            'headline-small-size',
-            'headline-small-tracking',
-            'headline-small-weight',
-            'label-large',
-            'label-large-font',
-            'label-large-line-height',
-            'label-large-size',
-            'label-large-tracking',
-            'label-large-weight',
-            'label-large-weight-prominent',
-            'label-medium',
-            'label-medium-font',
-            'label-medium-line-height',
-            'label-medium-size',
-            'label-medium-tracking',
-            'label-medium-weight',
-            'label-medium-weight-prominent',
-            'label-small',
-            'label-small-font',
-            'label-small-line-height',
-            'label-small-size',
-            'label-small-tracking',
-            'label-small-weight',
-            'title-large',
-            'title-large-font',
-            'title-large-line-height',
-            'title-large-size',
-            'title-large-tracking',
-            'title-large-weight',
-            'title-medium',
-            'title-medium-font',
-            'title-medium-line-height',
-            'title-medium-size',
-            'title-medium-tracking',
-            'title-medium-weight',
-            'title-small',
-            'title-small-font',
-            'title-small-line-height',
-            'title-small-size',
-            'title-small-tracking',
-            'title-small-weight'
-    );
-
-    @return create-map($keys, $prefix);
+    $var-values: ();
+    @each $key in map.keys($sys-typography) {
+      $var-values: map.set($var-values, $key, var(--#{$prefix}-#{$key}));
+    }
+    @return $var-values;
   }
-  @return m3.md-sys-typescale-values($ref);
+
+  @return $sys-typography;
 }
 
 /// Generates a set of namespaced color tokens for all components.
@@ -337,15 +75,15 @@ $_cached-token-slots: null;
 /// @param {Map} $error The error palette
 /// @param {String} $system-variables-prefix The prefix of system tokens
 /// @return {Map} A map of namespaced color tokens
-@function generate-color-tokens($type, $primary, $tertiary, $error, $system-variables-prefix) {
-  $ref: (
-    md-ref-palette: generate-ref-palette-tokens($primary, $tertiary, $error)
-  );
-
-  $sys-color: _get-sys-color($type, $ref, $system-variables-prefix);
+@function generate-color-tokens($type, $palettes, $system-variables-prefix) {
+  $sys-color: get-sys-color($type, $palettes, $system-variables-prefix);
 
-  @return generate-tokens(map.merge($ref, (
+  @return generate-tokens((
     md-sys-color: $sys-color,
+    md-ref-palette: (
+      neutral-10: map.get($palettes, neutral, 10),
+      neutral-variant20: map.get($palettes, neutral-variant, 20),
+    ),
     // Because the elevation values are always combined with color values to create the box shadow,
     // elevation needs to be part of the color dimension.
     md-sys-elevation: m3.md-sys-elevation-values(),
@@ -354,7 +92,7 @@ $_cached-token-slots: null;
     // TODO(mmalerba): If at some point we remove the need for these combined values, we can move
     //  state to the base dimension.
     md-sys-state: m3.md-sys-state-values(),
-  )));
+  ));
 }
 
 /// Generates a set of namespaced color tokens for all components.
@@ -365,12 +103,8 @@ $_cached-token-slots: null;
 /// @param {String|Number} $regular The regular font-weight
 /// @param {String} $system-variables-prefix The prefix of system tokens
 /// @return {Map} A map of namespaced typography tokens
-@function generate-typography-tokens($brand, $plain, $bold, $medium, $regular,
-$system-variables-prefix) {
-  $ref: (
-    md-ref-typeface: generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
-  );
-  $sys-typeface: _get-sys-typeface($ref, $system-variables-prefix);
+@function generate-typography-tokens($typography, $system-variables-prefix) {
+  $sys-typeface: get-sys-typeface($typography, $system-variables-prefix);
   @return generate-tokens((
     md-sys-typescale: $sys-typeface
   ));
@@ -386,61 +120,3 @@ $system-variables-prefix) {
     md-sys-shape: m3.md-sys-shape-values(),
   ), $include-non-systemized: true);
 }
-
-/// 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-list: (
-    m3-app.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-autocomplete.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-badge.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-bottom-sheet.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-button-toggle.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-card.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-chip.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-datepicker.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-dialog.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-divider.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-expansion.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-fab.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-form-field.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-grid-list.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-icon-button.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-icon.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-list.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-menu.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-optgroup.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-option.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-paginator.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-progress-bar.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-progress-spinner.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-radio.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-ripple.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-tabs.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-select.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-sidenav.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-slide-toggle.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-slider.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-snack-bar.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-sort.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-stepper.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-table.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-timepicker.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-toolbar.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-tooltip.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-tree.get-tokens($systems, $exclude-hardcoded, $token-slots),
-  );
-
-  $merged-tokens: ();
-  @each $tokens in $tokens-list {
-    $merged-tokens: map.deep-merge($merged-tokens, $tokens);
-  }
-
-  @return $merged-tokens;
-}

package/core/tokens/_m3-utils.scss

@@ -1,85 +1,48 @@
 @use 'sass:map';
-@use 'sass:list';
 @use 'sass:meta';
+@use 'sass:string';
 
-/// 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($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($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));
+// Replaces color tokens in the map with those defined as the variant color.
+@function replace-colors-with-variant($system, $color, $variant) {
+  $system: map.set($system, on-#{$color}, map.get($system, on-#{$variant}));
+  $system: map.set($system, on-#{$color}-container, map.get($system, on-#{$variant}-container));
+  $system: map.set($system, #{$color}, map.get($system, #{$variant}));
+  $system: map.set($system, #{$color}-container, map.get($system, #{$variant}-container));
+  @return $system;
 }
 
-/// Hardcode the given value, or null if hardcoded values are excluded.
-@function hardcode($value, $exclude-hardcoded) {
-  @return if($exclude-hardcoded, null, $value);
+// Gets the theme's system values as a flat map.
+@function get-system($theme) {
+  $system: ();
+  $system: map.merge($system,
+      map.get($theme, _mat-theming-internals-do-not-access, md-sys-color));
+  $system: map.merge($system,
+      map.get($theme, _mat-theming-internals-do-not-access, md-sys-elevation));
+  $system: map.merge($system,
+      map.get($theme, _mat-theming-internals-do-not-access, md-sys-shape));
+  $system: map.merge($system,
+      map.get($theme, _mat-theming-internals-do-not-access, md-sys-state));
+  $system: map.merge($system,
+      map.get($theme, _mat-theming-internals-do-not-access, md-sys-typescale));
+  $system: map.merge($system,
+      map.get($theme, _mat-theming-internals-do-not-access, md-ref-palette));
+  @return $system;
 }
 
-/// 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));
-    }
+// Returns the color with an opacity value using color-mix. If the color is a variable name, it
+// will wrap it with `var()`.
+@function color-with-opacity($color, $opacity) {
+  @if (meta.type-of($color) == string and string.index($color, '--') == 1) {
+    $color: var($color);
   }
-  @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);
-    }
+  // Opacity may be a system level value less than 1, instead of the intended
+  // whole percentage, e.g. 38%. Remove this support when possible.
+  @if (meta.type-of($opacity) == string and string.index($opacity, '--') == 1) {
+    $opacity: 'calc(var(#{$opacity}) * 100%)';
+  } @else if (meta.type-of($opacity) == number and $opacity < 1) {
+    $opacity: '#{$opacity * 100}%';
   }
-  @return $result;
-}
 
-/// 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;
+  @return color-mix(in srgb, #{$color} #{$opacity}, transparent);
 }