@angular/material-experimental 17.1.0-next.3 → 17.1.0

package/theming/_m3-tokens.scss

@@ -1,4 +1,6 @@
+@use 'sass:list';
 @use 'sass:map';
+@use 'sass:meta';
 @use '@angular/material' as mat;
 @use '@material/tokens/v0_161' as mdc-tokens;
 @use './m3-density';
@@ -49,15 +51,35 @@
 
 /// 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} $m3-values A map of M3 token values for the given prefix.
+/// @param {Map|(Map, Map)} $m3-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, $m3-values, $slots) {
+@function _namespace-tokens($prefix, $m3-values, $slots, $variant: null) {
+  $result: ();
+  @if $variant == null and meta.type-of($m3-values) == 'list' and list.length($m3-values == 2) {
+    $variants: list.nth($m3-values, 2);
+    $m3-values: list.nth($m3-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($m3-values), $used-token-names);
-  @return (
-    $prefix: $used-m3-tokens,
-  );
+  $prefix: if($variant == null, $prefix, list.append($prefix, $variant));
+  @return map.merge($result, ($prefix: $used-m3-tokens));
 }
 
 /// Generates tokens for the given palette with the given prefix.
@@ -110,6 +132,36 @@
   );
 }
 
+/// At the time of writing, some color tokens (e.g. disabled state) are defined as a solid color
+/// token and a separate opacity token. This function applies the opacity to the color and drops the
+/// opacity key from the map. Can be removed once b/213331407 is resolved.
+/// @param {Map} $tokens The map of tokens currently being generated
+/// @param {Map} $all-tokens A map of all tokens, including hardcoded values
+/// @param {List} $pairs Pairs of color token names and their opacities. Should be in the shape of
+/// `((color: 'color-key', opacity: 'opacity-key'))`.
+/// @return {Map} The initial tokens with the combined color values.
+@function _combine-color-tokens($tokens, $opacity-lookup, $pairs) {
+  $result: $tokens;
+
+  @each $pair in $pairs {
+    $color-key: map.get($pair, color);
+    $opacity-key: map.get($pair, opacity);
+    $color: map.get($tokens, $color-key);
+    $opacity: map.get($opacity-lookup, $opacity-key);
+
+    @if meta.type-of($color) == 'color' {
+      @if meta.type-of($opacity) != 'number' {
+        @error 'Cannot find valid opacity value for color token "#{$color-key}"';
+      }
+
+      $result: map.remove($result, $opacity-key);
+      $result: map.set($result, $color-key, rgba($color, $opacity));
+    }
+  }
+
+  @return $result;
+}
+
 /// Renames the official checkbox tokens to match the names actually used in MDC's code (which are
 /// different). This is a temporary workaround until MDC updates to use the correct names for the
 /// tokens.
@@ -135,6 +187,203 @@
   @return _rename-map-keys($tokens, $rename-keys);
 }
 
+/// Fixes inconsistent values in the text field color tokens. Applies to both filled and outlined
+/// variants.
+/// @param {Map} $initial-tokens Map of text field tokens currently being generated.
+/// @param {Map} $all-tokens Map of all text field tokens, including hardcoded values.
+/// This is necessary in order to do opacity lookups.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-text-field-color-tokens($initial-tokens, $all-tokens) {
+  @return _combine-color-tokens($initial-tokens, $all-tokens, (
+    (
+      color: 'disabled-active-indicator-color',
+      opacity: 'disabled-active-indicator-opacity'
+    ),
+    (
+      color: 'disabled-container-color',
+      opacity: 'disabled-container-opacity'
+    ),
+    (
+      color: 'disabled-input-text-color',
+      opacity: 'disabled-input-text-opacity'
+    ),
+    (
+      color: 'disabled-label-text-color',
+      opacity: 'disabled-label-text-opacity'
+    ),
+    (
+      color: 'disabled-leading-icon-color',
+      opacity: 'disabled-leading-icon-opacity'
+    ),
+    (
+      color: 'disabled-supporting-text-color',
+      opacity: 'disabled-supporting-text-opacity'
+    ),
+    (
+      color: 'disabled-trailing-icon-color',
+      opacity: 'disabled-trailing-icon-opacity'
+    )
+  ));
+}
+
+
+/// Fixes inconsistent values in the filled text field tokens so that they can produce valid
+/// styles.
+/// @param {Map} $initial-tokens Map of filled text field tokens currently being generated.
+/// @param {Map} $all-tokens Map of all filled text field tokens, including hardcoded values.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-filled-text-field-tokens($initial-tokens, $all-tokens) {
+  $tokens: _combine-color-tokens($initial-tokens, $all-tokens, (
+    (
+      color: 'disabled-active-indicator-color',
+      opacity: 'disabled-active-indicator-opacity'
+    ),
+    (
+      color: 'disabled-container-color',
+      opacity: 'disabled-container-opacity'
+    ),
+    (
+      color: 'disabled-input-text-color',
+      opacity: 'disabled-input-text-opacity'
+    ),
+    (
+      color: 'disabled-label-text-color',
+      opacity: 'disabled-label-text-opacity'
+    ),
+    (
+      color: 'disabled-leading-icon-color',
+      opacity: 'disabled-leading-icon-opacity'
+    ),
+    (
+      color: 'disabled-supporting-text-color',
+      opacity: 'disabled-supporting-text-opacity'
+    ),
+    (
+      color: 'disabled-trailing-icon-color',
+      opacity: 'disabled-trailing-icon-opacity'
+    )
+  ));
+
+  $container-shape: map.get($tokens, container-shape);
+
+  // The M2 token slots define a single `container-shape` slot while the M3 tokens provide a list
+  // of shapes (e.g. top/bottom/left/right). Extract the first value so it matches the expected
+  // token slot in M2.
+  @if meta.type-of($container-shape) == 'list' {
+    $tokens: map.set($tokens, container-shape, list.nth($container-shape, 1));
+  }
+
+  @return $tokens;
+}
+
+
+/// Fixes inconsistent values in the text button tokens so that they can produce valid styles.
+/// @param {Map} $initial-tokens Map of text button tokens currently being generated.
+/// @param {Map} $all-tokens Map of all text button tokens, including hardcoded values.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-text-button-tokens($initial-tokens, $all-tokens) {
+  @return _combine-color-tokens($initial-tokens, $all-tokens, (
+    (
+      color: 'disabled-label-text-color',
+      opacity: 'disabled-label-text-opacity',
+    ),
+  ));
+}
+
+/// Fixes inconsistent values in the filled button tokens so that they can produce valid styles.
+/// @param {Map} $initial-tokens Map of filled button tokens currently being generated.
+/// @param {Map} $all-tokens Map of all filled button tokens, including hardcoded values.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-filled-button-tokens($initial-tokens, $all-tokens) {
+  @return _combine-color-tokens($initial-tokens, $all-tokens, (
+    (
+      color: 'disabled-label-text-color',
+      opacity: 'disabled-label-text-opacity',
+    ),
+    (
+      color: 'disabled-container-color',
+      opacity: 'disabled-container-opacity',
+    )
+  ));
+}
+
+/// Fixes inconsistent values in the protected button tokens so that they can produce valid styles.
+/// @param {Map} $initial-tokens Map of protected button tokens currently being generated.
+/// @param {Map} $all-tokens Map of all protected button tokens, including hardcoded values.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-protected-button-tokens($initial-tokens, $all-tokens) {
+  @return _combine-color-tokens($initial-tokens, $all-tokens, (
+    (
+      color: 'disabled-label-text-color',
+      opacity: 'disabled-label-text-opacity',
+    ),
+    (
+      color: 'disabled-container-color',
+      opacity: 'disabled-container-opacity',
+    )
+  ));
+}
+
+/// Fixes inconsistent values in the outlined button tokens so that they can produce valid styles.
+/// @param {Map} $initial-tokens Map of outlined button tokens currently being generated.
+/// @param {Map} $all-tokens Map of all outlined button tokens, including hardcoded values.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-outlined-button-tokens($initial-tokens, $all-tokens) {
+  @return _combine-color-tokens($initial-tokens, $all-tokens, (
+    (
+      color: 'disabled-label-text-color',
+      opacity: 'disabled-label-text-opacity',
+    ),
+    (
+      color: 'disabled-outline-color',
+      opacity: 'disabled-outline-opacity',
+    )
+  ));
+}
+
+/// Fixes inconsistent values in the outlined text field tokens so that they can produce valid
+/// styles.
+/// @param {Map} $initial-tokens Map of outlined text field tokens currently being generated.
+/// @param {Map} $all-tokens Map of all outlined text field tokens, including hardcoded values.
+/// This is necessary in order to do opacity lookups.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-outlined-text-field-tokens($initial-tokens, $all-tokens) {
+  @return _combine-color-tokens($initial-tokens, $all-tokens, (
+    (
+      color: 'disabled-outline-color',
+      opacity: 'disabled-outline-opacity'
+    ),
+    (
+      color: 'disabled-active-indicator-color',
+      opacity: 'disabled-active-indicator-opacity'
+    ),
+    (
+      color: 'disabled-container-color',
+      opacity: 'disabled-container-opacity'
+    ),
+    (
+      color: 'disabled-input-text-color',
+      opacity: 'disabled-input-text-opacity'
+    ),
+    (
+      color: 'disabled-label-text-color',
+      opacity: 'disabled-label-text-opacity'
+    ),
+    (
+      color: 'disabled-leading-icon-color',
+      opacity: 'disabled-leading-icon-opacity'
+    ),
+    (
+      color: 'disabled-supporting-text-color',
+      opacity: 'disabled-supporting-text-opacity'
+    ),
+    (
+      color: 'disabled-trailing-icon-color',
+      opacity: 'disabled-trailing-icon-opacity'
+    )
+  ));
+}
+
 /// 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
@@ -165,7 +414,7 @@
   $token-slots: mat.m2-tokens-from-theme($fake-theme);
 
   // TODO(mmalerba): Fill in remaining tokens.
-  $result: mat.private-merge-all(
+  $result: mat.private-deep-merge-all(
     // Add the system color & typography tokens (so we can give users access via an API).
     (
       (mdc, theme): map.get($systems, md-sys-color),
@@ -209,7 +458,12 @@
     ),
     _namespace-tokens(
       (mdc, filled-text-field),
-      mdc-tokens.md-comp-filled-text-field-values($systems, $exclude-hardcoded),
+      _fix-filled-text-field-tokens(
+        mdc-tokens.md-comp-filled-text-field-values($systems, $exclude-hardcoded),
+        // Need to pass in the hardcoded values, because they
+        // include opacities that are used for the disabled state.
+        mdc-tokens.md-comp-filled-text-field-values($systems, false)
+      ),
       $token-slots
     ),
     _namespace-tokens(
@@ -217,6 +471,47 @@
       mdc-tokens.md-comp-icon-button-values($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mdc, text-button),
+      _fix-text-button-tokens(
+        mdc-tokens.md-comp-text-button-values($systems, $exclude-hardcoded),
+        // Need to pass in the hardcoded values, because they
+        // include opacities that are used for the disabled state.
+        mdc-tokens.md-comp-text-button-values($systems, false),
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      // Note: in M3 the "protected" button is called "elevated".
+      (mdc, protected-button),
+      _fix-protected-button-tokens(
+        mdc-tokens.md-comp-elevated-button-values($systems, $exclude-hardcoded),
+        // Need to pass in the hardcoded values, because they
+        // include opacities that are used for the disabled state.
+        mdc-tokens.md-comp-elevated-button-values($systems, false),
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, filled-button),
+      _fix-filled-button-tokens(
+        mdc-tokens.md-comp-filled-button-values($systems, $exclude-hardcoded),
+        // Need to pass in the hardcoded values, because they
+        // include opacities that are used for the disabled state.
+        mdc-tokens.md-comp-filled-button-values($systems, false),
+      ),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, outlined-button),
+      _fix-outlined-button-tokens(
+        mdc-tokens.md-comp-outlined-button-values($systems, $exclude-hardcoded),
+        // Need to pass in the hardcoded values, because they
+        // include opacities that are used for the disabled state.
+        mdc-tokens.md-comp-outlined-button-values($systems, false),
+      ),
+      $token-slots
+    ),
     _namespace-tokens(
       (mdc, linear-progress),
       mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded),
@@ -234,7 +529,12 @@
     ),
     _namespace-tokens(
       (mdc, outlined-text-field),
-      mdc-tokens.md-comp-outlined-text-field-values($systems, $exclude-hardcoded),
+      _fix-outlined-text-field-tokens(
+        mdc-tokens.md-comp-outlined-text-field-values($systems, $exclude-hardcoded),
+        // Need to pass in the hardcoded values, because they
+        // include opacities that are used for the disabled state.
+        mdc-tokens.md-comp-outlined-text-field-values($systems, false),
+      ),
       $token-slots
     ),
     _namespace-tokens(
@@ -330,6 +630,27 @@
       custom-tokens.icon($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, text-button),
+      custom-tokens.text-button($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, filled-button),
+      custom-tokens.filled-button($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      // Note: in M3 the "protected" button is called "elevated".
+      (mat, protected-button),
+      custom-tokens.elevated-button($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, outlined-button),
+      custom-tokens.outlined-button($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, icon-button),
       custom-tokens.icon-button($systems, $exclude-hardcoded),

package/theming-next/_card.scss

@@ -1,93 +0,0 @@
-@use 'sass:color';
-@use 'sass:meta';
-@use '@angular/material' as mat;
-@use './token-resolution';
-
-// TODO(mmalerba): This should live under material/card when moving out of experimental.
-
-/// Gets tokens for setting the card's shape.
-/// @param {String} $shape The card's shape.
-/// @return {Map} A map of tokens for setting the card's shape.
-// Note: we use a function rather than simple rename, because we want to map a single shape value to
-// multiple tokens, rather than offer separate shape customizations for elevated and outlined cards.
-@function _get-tokens-for-card-shape($shape) {
-  @return (
-      (mdc, elevated-card): (container-shape: $shape),
-      (mdc, outline-card): (container-shape: $shape),
-  );
-}
-
-/// Gets tokens for setting the card's color.
-/// @param {String} $shape The card's shape.
-/// @return {Map} A map of tokens for setting the card's shape.
-@function _get-tokens-for-card-color($color) {
-  @return (
-      (mdc, elevated-card): (container-color: $color),
-      (mdc, outline-card): (container-color: $color),
-  );
-}
-
-/// Gets a map of card token values that are derived from the theme type.
-/// @param {'light' | 'dark'} $theme-type The type of theme.
-/// @return {Map} A map of card token values derived from the given theme type.
-@function _get-tokens-for-theme-type($theme-type) {
-  $is-dark: $theme-type == 'dark';
-  $foreground: if($is-dark, white, black);
-  $card-color: if($is-dark, mat.get-color-from-palette(mat.$gray-palette, 800), white);
-  $outline-color: color.change($foreground, $alpha: 0.12);
-  $subtitle-color: if($is-dark, rgba(white, 0.7), rgba(black, 0.54));
-
-  @return (
-    (mdc, elevated-card): (
-      container-color: $card-color,
-    ),
-    (mdc, outlined-card): (
-      container-color: $card-color,
-      outline-color: $outline-color,
-    ),
-    (mat, card): (
-      subtitle-text-color: $subtitle-color,
-    ),
-  );
-}
-
-/// Resolvers for mat-card customizations.
-$_customization-resolvers: mat.private-merge-all(
-  token-resolution.alias((
-    elevation: container-elevation,
-    shadow-color: container-shadow-color,
-  ), (mdc, elevated-card)),
-  token-resolution.forward((
-    outline-width,
-    outline-color
-  ), (mdc, outlined-card)),
-  token-resolution.alias((
-    title-font: title-text-font,
-    title-line-height: title-text-line-height,
-    title-font-size: title-text-size,
-    title-letter-spacing: title-text-tracking,
-    title-font-weight: title-text-weight,
-    subtitle-font: subtitle-text-font,
-    subtitle-line-height: subtitle-text-line-height,
-    subtitle-font-size: subtitle-text-size,
-    subtitle-letter-spacing: subtitle-text-tracking,
-    subtitle-font-weight: subtitle-text-weight,
-    subtitle-color: subtitle-text-color
-  ), (mat, card)),
-  (
-    background-color: meta.get-function(_get-tokens-for-card-color),
-    border-radius: meta.get-function(_get-tokens-for-card-shape),
-    theme-type: meta.get-function(_get-tokens-for-theme-type),
-  )
-);
-
-/// Configure the mat-card's theme.
-/// @param {Map} $customizations [()] A map of custom values to use when theming mat-card.
-@function card($customizations: ()) {
-  @return (
-    id: 'mat.card',
-    customizations: token-resolution.resolve-customized-tokens(
-        'mat.card', $_customization-resolvers, $customizations),
-    deps: (),
-  );
-}

package/theming-next/_checkbox.scss

@@ -1,109 +0,0 @@
-@use 'sass:color';
-@use 'sass:map';
-@use 'sass:meta';
-@use '@angular/material' as mat;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use './token-resolution';
-
-// TODO(mmalerba): This should live under material/checkbox when moving out of experimental.
-
-// Duplicated from core/tokens/m2/mdc/checkbox
-// TODO(mmalerba): Delete duplicated code when this is moved out of experimental.
-@function _contrast-tone($value, $light-color: '#fff', $dark-color: '#000') {
-  @if ($value == 'dark' or $value == 'light' or type-of($value) == 'color') {
-    @return if(mdc-theme-color.contrast-tone($value) == 'dark', $dark-color, $light-color);
-  }
-  @return false;
-}
-
-/// Gets a map of checkbox token values that are derived from the given palette.
-/// @param {Map} $palette An Angular Material palette object.
-/// @return {Map} A map of checkbox token values derived from the given palette.
-@function _get-tokens-for-color-palette($palette) {
-  $palette-default-color: mat.get-color-from-palette($palette);
-  $checkmark-color: _contrast-tone($palette-default-color);
-
-  @return (
-    (mdc, checkbox): (
-      selected-checkmark-color: $checkmark-color,
-      selected-focus-icon-color: $palette-default-color,
-      selected-hover-icon-color: $palette-default-color,
-      selected-icon-color: $palette-default-color,
-      selected-pressed-icon-color: $palette-default-color,
-      selected-focus-state-layer-color: $palette-default-color,
-      selected-hover-state-layer-color: $palette-default-color,
-      selected-pressed-state-layer-color: $palette-default-color,
-    )
-  );
-}
-
-/// Gets a map of checkbox token values that are derived from the theme type.
-/// @param {'light' | 'dark'} $theme-type The type of theme.
-/// @return {Map} A map of checkbox token values derived from the given theme type.
-@function _get-tokens-for-theme-type($theme-type) {
-  $is-dark: $theme-type == dark;
-  $foreground: if($is-dark, white, black);
-  $disabled-color: color.change($foreground, $alpha: 0.38);
-  $border-color: color.change($foreground, $alpha: 0.54);
-  $active-border-color: mat.get-color-from-palette(mat.$gray-palette, if($is-dark, 200, 900));
-
-  @return (
-    (mdc, checkbox): (
-      disabled-selected-icon-color: $disabled-color,
-      disabled-unselected-icon-color: $disabled-color,
-      unselected-focus-icon-color: $active-border-color,
-      unselected-hover-icon-color: $active-border-color,
-      unselected-icon-color: $border-color,
-      unselected-pressed-icon-color: $border-color,
-      unselected-focus-state-layer-color: $foreground,
-      unselected-hover-state-layer-color: $foreground,
-      unselected-pressed-state-layer-color: $foreground,
-    )
-  );
-}
-
-/// Resolvers for mat-checkbox customizations.
-$_customization-resolvers: map.merge(
-    token-resolution.alias((
-      checkmark-color: selected-checkmark-color,
-      disabled-checkmark-color: disabled-selected-checkmark-color,
-      selected-focus-ring-opacity: selected-focus-state-layer-opacity,
-      selected-hover-ring-opacity: selected-hover-state-layer-opacity,
-      selected-pressed-ring-opacity: selected-pressed-state-layer-opacity,
-      unselected-focus-ring-opacity: unselected-focus-state-layer-opacity,
-      unselected-hover-ring-opacity: unselected-hover-state-layer-opacity,
-      unselected-pressed-ring-opacity: unselected-pressed-state-layer-opacity,
-      disabled-selected-box-color: disabled-selected-icon-color,
-      disabled-unselected-box-color: disabled-unselected-icon-color,
-      selected-focus-box-color: selected-focus-icon-color,
-      selected-hover-box-color: selected-hover-icon-color,
-      selected-box-color: selected-icon-color,
-      selected-pressed-box-color: selected-pressed-icon-color,
-      unselected-focus-box-color: unselected-focus-icon-color,
-      unselected-hover-box-color: unselected-hover-icon-color,
-      unselected-box-color: unselected-icon-color,
-      unselected-pressed-box-color: unselected-pressed-icon-color,
-      selected-focus-ring-color: selected-focus-state-layer-color,
-      selected-hover-ring-color: selected-hover-state-layer-color,
-      selected-pressed-ring-color: selected-pressed-state-layer-color,
-      unselected-focus-ring-color: unselected-focus-state-layer-color,
-      unselected-hover-ring-color: unselected-hover-state-layer-color,
-      unselected-pressed-ring-color: unselected-pressed-state-layer-color,
-      ripple-size: state-layer-size,
-    ), (mdc, checkbox)),
-    (
-      color-palette: meta.get-function(_get-tokens-for-color-palette),
-      theme-type: meta.get-function(_get-tokens-for-theme-type),
-    )
-);
-
-/// Configure the mat-checkbox's theme.
-/// @param {Map} $customizations [()] A map of custom values to use when theming mat-checkbox.
-@function checkbox($customizations: ()) {
-  @return (
-    id: 'mat.checkbox',
-    customizations: token-resolution.resolve-customized-tokens(
-        'mat.checkbox', $_customization-resolvers, $customizations),
-    deps: (),
-  );
-}