@angular/material-experimental 17.2.0-next.0 → 17.2.0-rc.0

package/theming/_custom-tokens.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 
 /// Hardcode the given value, or null if hardcoded values are excluded.
 @function _hardcode($value, $exclude-hardcoded) {
@@ -28,6 +29,9 @@
 @function autocomplete($systems, $exclude-hardcoded) {
   @return (
     background-color: map.get($systems, md-sys-color, surface-container),
+    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
+    container-elevation-shadow:
+      _hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
   );
 }
 
@@ -186,13 +190,51 @@
   );
 }
 
+/// Generates custom tokens for the mat-chip.
+/// @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-chip
+@function chip($systems, $exclude-hardcoded) {
+  @return ((
+    disabled-container-opacity: _hardcode(1, $exclude-hardcoded),
+    selected-trailing-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+    selected-disabled-trailing-icon-color: map.get($systems, md-sys-color, on-surface),
+    trailing-action-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    selected-trailing-action-state-layer-color:
+        map.get($systems, md-sys-color, on-secondary-container),
+    trailing-action-hover-state-layer-opacity:
+        map.get($systems, md-sys-state, hover-state-layer-opacity),
+    trailing-action-focus-state-layer-opacity:
+        map.get($systems, md-sys-state, focus-state-layer-opacity),
+    trailing-action-opacity: _hardcode(1, $exclude-hardcoded),
+    trailing-action-focus-opacity: _hardcode(1, $exclude-hardcoded),
+  ), (
+    primary: (
+      selected-trailing-icon-color: map.get($systems, md-sys-color, on-primary-container),
+      selected-trailing-action-state-layer-color:
+          map.get($systems, md-sys-color, on-primary-container),
+    ),
+    secondary: (), // Default, no overrides needed.
+    tertiary: (
+      selected-trailing-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-trailing-action-state-layer-color:
+          map.get($systems, md-sys-color, on-tertiary-container),
+    ),
+    error: (
+      selected-trailing-icon-color: map.get($systems, md-sys-color, on-error-container),
+      selected-trailing-action-state-layer-color:
+          map.get($systems, md-sys-color, on-error-container),
+    ),
+  ));
+}
+
 /// Generates custom tokens for the mdc-chip. (MDC has a chip component, but they
 /// seem to have made up the tokens rather than using ones generated from the token database,
 /// therefore we need a custom token function for it).
 /// @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 mdc-chip
-@function chip($systems, $exclude-hardcoded) {
+@function mdc-chip($systems, $exclude-hardcoded) {
   @return (mat.private-merge-all(
     _generate-typography-tokens($systems, label-text, label-large),
     (
@@ -201,11 +243,6 @@
         radius: 8px,
       ), $exclude-hardcoded),
       with-avatar-avatar-size: _hardcode(24px, $exclude-hardcoded),
-      elevated-container-color: map.get($systems, md-sys-color, surface-container-low),
-      elevated-disabled-container-color: mat.private-safe-color-change(
-        map.get($systems, md-sys-color, on-surface),
-        $alpha: 0.12,
-      ),
       label-text-color: map.get($systems, md-sys-color, on-surface-variant),
       disabled-label-text-color: mat.private-safe-color-change(
         map.get($systems, md-sys-color, on-surface),
@@ -213,30 +250,61 @@
       ),
       with-icon-icon-size: _hardcode(18px, $exclude-hardcoded),
       with-icon-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-      with-icon-disabled-icon-color: mat.private-safe-color-change(
-        map.get($systems, md-sys-color, on-surface),
-        $alpha: 0.38,
-      ),
+      with-icon-disabled-icon-color: map.get($systems, md-sys-color, on-surface),
       with-icon-selected-icon-color: map.get($systems, md-sys-color, on-secondary-container),
       with-trailing-icon-trailing-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-      with-trailing-icon-disabled-trailing-icon-color: mat.private-safe-color-change(
-        map.get($systems, md-sys-color, on-surface),
-        $alpha: 0.38,
-      ),
+      with-trailing-icon-disabled-trailing-icon-color: map.get($systems, md-sys-color, on-surface),
       focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
       focus-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+      outline-width: _hardcode(1px, $exclude-hardcoded),
+      outline-color: map.get($systems, md-sys-color, outline),
+      disabled-outline-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: 0.12,
+      ),
+      focus-outline-color: map.get($systems, md-sys-color, on-surface-variant),
+      hover-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+      hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+      with-avatar-disabled-avatar-opacity: _hardcode(0.38, $exclude-hardcoded),
+      elevated-selected-container-color: map.get($systems, md-sys-color, secondary-container),
+      flat-selected-outline-width: _hardcode(0, $exclude-hardcoded),
+      selected-label-text-color: map.get($systems, md-sys-color, on-secondary-container),
+      flat-disabled-selected-container-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: 0.12,
+      ),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
+      selected-hover-state-layer-opacity:
+        map.get($systems, md-sys-state, hover-state-layer-opacity),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
+      selected-focus-state-layer-opacity:
+        map.get($systems, md-sys-state, focus-state-layer-opacity),
+      with-icon-disabled-icon-opacity: _hardcode(0.38, $exclude-hardcoded),
+      with-trailing-icon-disabled-trailing-icon-opacity: _hardcode(0.38, $exclude-hardcoded),
     ),
   ), (
     // Color variants:
     primary: (
       with-icon-selected-icon-color: map.get($systems, md-sys-color, on-primary-container),
+      elevated-selected-container-color: map.get($systems, md-sys-color, primary-container),
+      selected-label-text-color: map.get($systems, md-sys-color, on-primary-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-primary-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-primary-container),
     ),
     secondary: (), // Default, no overrides needed.
     tertiary: (
       with-icon-selected-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      elevated-selected-container-color: map.get($systems, md-sys-color, tertiary-container),
+      selected-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
     ),
     error: (
       with-icon-selected-icon-color: map.get($systems, md-sys-color, on-error-container),
+      elevated-selected-container-color: map.get($systems, md-sys-color, error-container),
+      selected-label-text-color: map.get($systems, md-sys-color, on-error-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-error-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-error-container),
     )
   ));
 }
@@ -822,9 +890,7 @@
 /// @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),
-    (
+  @return ((
       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(
@@ -836,7 +902,17 @@
         $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
       ),
       selected-state-layer-color: map.get($systems, md-sys-color, secondary-container),
-    ),
+
+      // According to the spec the options have to be `label-large` in all typography
+      // dimensions, however this is inconsistent with the designs and with MDC's
+      // own implementation. This appears to be a bug in the spec, because MDC overrides
+      // the font size and weight to be `body-large` (see b/261838263). We make the same
+      // override here so the label looks correct.
+      label-text-size: map.get($systems, md-sys-typescale, body-large-size),
+      label-text-weight: map.get($systems, md-sys-typescale, body-large-weight),
+      label-text-font: map.get($systems, md-sys-typescale, label-large-font),
+      label-text-line-height: map.get($systems, md-sys-typescale, label-large-line-height),
+      label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
   ), (
     // Color variants:
     primary: (
@@ -995,6 +1071,8 @@
           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),
+      container-elevation-shadow:
+        _hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
     )
   ), (
     // Color variants:
@@ -1017,12 +1095,14 @@
 /// @return {Map} A set of custom tokens for the mat-sidenav
 @function sidenav($systems, $exclude-hardcoded) {
   @return (
-    container-shape: 16px,
-    container-divider-color: map.get($systems, md-sys-color, outline),
+    container-elevation-shadow: _hardcode(none, $exclude-hardcoded),
+    container-divider-color: _hardcode(transparent, $exclude-hardcoded),
+    container-width: _hardcode(360px, $exclude-hardcoded),
+    container-shape: map.get($systems, md-sys-shape, corner-large),
     container-background-color: map.get($systems, md-sys-color, surface),
     container-text-color: map.get($systems, md-sys-color, on-surface-variant),
-    content-background-color: _hardcode(inherit, $exclude-hardcoded),
-    content-text-color: _hardcode(inherit, $exclude-hardcoded),
+    content-background-color: map.get($systems, md-sys-color, background),
+    content-text-color: map.get($systems, md-sys-color, on-background),
     scrim-color: mat.private-safe-color-change(
         map.get($systems, md-ref-palette, neutral-variant20), $alpha: 0.4),
   );
@@ -1075,6 +1155,35 @@
   ));
 }
 
+/// Generates custom tokens for the mat-slide-toggle.
+/// @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-slide-toggle
+@function switch($systems, $exclude-hardcoded) {
+  @return ((
+    unselected-handle-size: 16px,
+    selected-handle-size: 24px,
+    with-icon-handle-size: 24px,
+    pressed-handle-size: 28px,
+    selected-handle-horizontal-margin: 0 24px,
+    selected-with-icon-handle-horizontal-margin: 0 24px,
+    selected-pressed-handle-horizontal-margin: 0 22px,
+    unselected-handle-horizontal-margin: 0 8px,
+    unselected-with-icon-handle-horizontal-margin: 0 4px,
+    unselected-pressed-handle-horizontal-margin: 0 2px,
+    // The hidden and visible track represent whichever track is visible or
+    // hidden in the ui. This could be the .mdc-switch__track :before or
+    // :after depending on whether the switch is selected or unselected.
+    //
+    // The m2 slide-toggle uses transforms to hide & show the tracks while
+    // the m3 slide-toggle uses opacity.
+    visible-track-opacity: 1,
+    hidden-track-opacity: 0,
+    visible-track-transition: opacity 75ms,
+    hidden-track-transition: opacity 75ms,
+  ), ());
+}
+
 /// Generates custom tokens for the mat-snack-bar.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
@@ -1505,12 +1614,15 @@
     primary: (), // Default, no overrides needed
     secondary: (
       active-indicator-color: map.get($systems, md-sys-color, secondary),
+      track-color: map.get($systems, md-sys-color, secondary-container),
     ),
     tertiary: (
       active-indicator-color: map.get($systems, md-sys-color, tertiary),
+      track-color: map.get($systems, md-sys-color, tertiary-container),
     ),
     error: (
       active-indicator-color: map.get($systems, md-sys-color, error),
+      track-color: map.get($systems, md-sys-color, error-container),
     ),
   );
 }

package/theming/_m3-tokens.scss

@@ -464,6 +464,17 @@
   @return $tokens;
 }
 
+/// Fixes values in the list tokens that are inconsistent with its usage.
+/// @param {Map} $initial-tokens Map of list tokens currently being generated.
+/// @return {Map} The given tokens, with the inconsistent values replaced with valid ones.
+@function _fix-list-tokens($tokens) {
+  // This does not match the spec, which defines this to be `md.sys.color.surface`.
+  // However, this interferes with the use case of placing a list on other components. For example,
+  // the bottom sheet's container color is `md.sys.color.surface-container-low`. Instead, allow the
+  // list to just display the colors for its background.
+  @return map.set($tokens, list-item-container-color, transparent);
+}
+
 /// 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
@@ -514,7 +525,7 @@
     ),
     _namespace-tokens(
       (mdc, chip),
-      custom-tokens.chip($systems, $exclude-hardcoded),
+      custom-tokens.mdc-chip($systems, $exclude-hardcoded),
       $token-slots
     ),
     _namespace-tokens(
@@ -660,7 +671,9 @@
     ),
     _namespace-tokens(
       (mdc, list),
-      mdc-tokens.md-comp-list-values($systems, $exclude-hardcoded),
+      _fix-list-tokens(
+        mdc-tokens.md-comp-list-values($systems, $exclude-hardcoded)
+      ),
       $token-slots
     ),
     _namespace-tokens(
@@ -753,6 +766,11 @@
       custom-tokens.card($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, chip),
+      custom-tokens.chip($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, datepicker),
       custom-tokens.datepicker($systems, $exclude-hardcoded),
@@ -904,6 +922,11 @@
       custom-tokens.stepper($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, switch),
+      custom-tokens.switch($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, tab-header),
       custom-tokens.tab-header($systems, $exclude-hardcoded),