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

package/theming/_custom-tokens.scss

@@ -70,15 +70,15 @@
     small-size-container-size: _hardcode(6px, $exclude-hardcoded),
     container-padding: _hardcode(0 4px, $exclude-hardcoded),
     small-size-container-padding: _hardcode(0, $exclude-hardcoded),
-    container-offset: -12px 0,
-    small-size-container-offset: -6px 0,
-    container-overlap-offset: -12px,
-    small-size-container-overlap-offset: -6px,
+    container-offset: _hardcode(-12px 0, $exclude-hardcoded),
+    small-size-container-offset: _hardcode(-6px 0, $exclude-hardcoded),
+    container-overlap-offset: _hardcode(-12px, $exclude-hardcoded),
+    small-size-container-overlap-offset: _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: _hardcode(16px, $exclude-hardcoded),
-    large-size-container-offset: -12px 0,
-    large-size-container-overlap-offset: -12px,
+    large-size-container-offset: _hardcode(-12px 0, $exclude-hardcoded),
+    large-size-container-overlap-offset: _hardcode(-12px, $exclude-hardcoded),
     large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
     large-size-container-padding: _hardcode(0 4px, $exclude-hardcoded),
     legacy-large-size-container-size: _hardcode(unset, $exclude-hardcoded),
@@ -134,8 +134,10 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-button-toggle
 @function button-toggle($systems, $exclude-hardcoded) {
-  @return ((
-    shape: _hardcode(9999px, $exclude-hardcoded),
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, label-text, label-large),
+  (
+    shape: map.get($systems, md-sys-shape, corner-full),
     hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
     focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
     text-color: map.get($systems, md-sys-color, on-surface),
@@ -157,7 +159,6 @@
       $alpha: 0.12,
     ),
     divider-color: map.get($systems, md-sys-color, outline),
-    text-font: map.get($systems, md-sys-typescale, label-large-font),
   ), (
     // Color variants:
     primary: (
@@ -341,9 +342,10 @@
     toggle-active-state-icon-color: map.get($systems, md-sys-color, on-surface-variant),
     toggle-icon-color: map.get($systems, md-sys-color, on-surface-variant),
     calendar-body-label-text-color: map.get($systems, md-sys-color, on-surface),
+    calendar-period-button-text-color: map.get($systems, md-sys-color, on-surface-variant),
     calendar-period-button-icon-color: map.get($systems, md-sys-color, on-surface-variant),
     calendar-navigation-button-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-    calendar-header-divider-color: map.get($systems, md-sys-color, outline-variant),
+    calendar-header-divider-color: _hardcode(transparent, $exclude-hardcoded),
     calendar-header-text-color: map.get($systems, md-sys-color, on-surface-variant),
     calendar-date-today-outline-color: map.get($systems, md-sys-color, primary),
     calendar-date-today-disabled-state-outline-color: mat.private-safe-color-change(
@@ -368,6 +370,12 @@
     ),
     calendar-container-background-color: map.get($systems, md-sys-color, surface-container-high),
     calendar-container-text-color: map.get($systems, md-sys-color, on-surface),
+    calendar-container-elevation-shadow: _hardcode(mdc-elevation.elevation-box-shadow(0),
+      $exclude-hardcoded),
+    calendar-container-touch-elevation-shadow: _hardcode(mdc-elevation.elevation-box-shadow(0),
+      $exclude-hardcoded),
+    calendar-container-shape: map.get($systems, md-sys-shape, corner-large),
+    calendar-container-touch-shape: map.get($systems, md-sys-shape, corner-extra-large),
     calendar-text-font: map.get($systems, md-sys-typescale, body-large-font),
     calendar-text-size: map.get($systems, md-sys-typescale, body-large-size),
     calendar-body-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
@@ -423,7 +431,7 @@
   @return (
     container-max-width: _hardcode(560px, $exclude-hardcoded),
     container-small-max-width: _hardcode(calc(100vw - 32px), $exclude-hardcoded),
-    container-min-width: _harcode(280px, $exclude-hardcoded),
+    container-min-width: _hardcode(280px, $exclude-hardcoded),
     actions-alignment: _hardcode(flex-end, $exclude-hardcoded),
     content-padding: _hardcode(20px 24px, $exclude-hardcoded),
     with-actions-content-padding: _hardcode(20px 24px 0, $exclude-hardcoded),
@@ -649,6 +657,17 @@
   ));
 }
 
+/// Generates custom tokens for the mat-list.
+/// @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-list
+@function list($systems, $exclude-hardcoded) {
+  @return (
+    active-indicator-color: map.get($systems, md-sys-color, secondary-container),
+    active-indicator-shape: map.get($systems, md-sys-shape, corner-full),
+  );
+}
+
 /// Generates custom tokens for the mat-button.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
@@ -856,9 +875,13 @@
   @return mat.private-merge-all(
     _generate-typography-tokens($systems, item-label-text, label-large),
     (
-      container-shape: _hardcode(4px, $exclude-hardcoded),
+      container-shape: map.get($systems, md-sys-shape, corner-extra-small),
+      divider-color: map.get($systems, md-sys-color, surface-variant),
+      divider-bottom-spacing: _hardcode(8px, $exclude-hardcoded),
+      divider-top-spacing: _hardcode(8px, $exclude-hardcoded),
       item-label-text-color: map.get($systems, md-sys-color, on-surface),
       item-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+      item-icon-size: _hardcode(24px, $exclude-hardcoded),
       item-hover-state-layer-color: mat.private-safe-color-change(
         map.get($systems, md-sys-color, on-surface),
         $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
@@ -867,6 +890,11 @@
         map.get($systems, md-sys-color, on-surface),
         $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
       ),
+      item-spacing: _hardcode(12px, $exclude-hardcoded),
+      item-leading-spacing: _hardcode(12px, $exclude-hardcoded),
+      item-trailing-spacing: _hardcode(12px, $exclude-hardcoded),
+      item-with-icon-leading-spacing: _hardcode(12px, $exclude-hardcoded),
+      item-with-icon-trailing-spacing: _hardcode(12px, $exclude-hardcoded),
       container-color: map.get($systems, md-sys-color, surface-container),
     )
   );
@@ -1160,28 +1188,34 @@
 /// @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,
+  @return (
+    disabled-selected-handle-opacity: _hardcode(1, $exclude-hardcoded),
+    disabled-unselected-handle-opacity: _hardcode(0.38, $exclude-hardcoded),
+    unselected-handle-size: _hardcode(16px, $exclude-hardcoded),
+    selected-handle-size: _hardcode(24px, $exclude-hardcoded),
+    with-icon-handle-size: _hardcode(24px, $exclude-hardcoded),
+    pressed-handle-size: _hardcode(28px, $exclude-hardcoded),
+    selected-handle-horizontal-margin: _hardcode(0 24px, $exclude-hardcoded),
+    selected-with-icon-handle-horizontal-margin: _hardcode(0 24px, $exclude-hardcoded),
+    selected-pressed-handle-horizontal-margin: _hardcode(0 22px, $exclude-hardcoded),
+    unselected-handle-horizontal-margin: _hardcode(0 8px, $exclude-hardcoded),
+    unselected-with-icon-handle-horizontal-margin: _hardcode(0 4px, $exclude-hardcoded),
+    unselected-pressed-handle-horizontal-margin: _hardcode(0 2px, $exclude-hardcoded),
     // 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,
-  ), ());
+    visible-track-opacity: _hardcode(1, $exclude-hardcoded),
+    hidden-track-opacity: _hardcode(0, $exclude-hardcoded),
+    visible-track-transition: _hardcode(opacity 75ms, $exclude-hardcoded),
+    hidden-track-transition: _hardcode(opacity 75ms, $exclude-hardcoded),
+    track-outline-width: _hardcode(2px, $exclude-hardcoded),
+    track-outline-color:  map.get($systems, md-sys-color, outline),
+    disabled-unselected-track-outline-width: _hardcode(2px, $exclude-hardcoded),
+    disabled-unselected-track-outline-color: map.get($systems, md-sys-color, on-surface),
+  ), ();
 }
 
 /// Generates custom tokens for the mat-snack-bar.
@@ -1282,7 +1316,7 @@
     _generate-typography-tokens($systems, label-text, title-small),
     (
       divider-color: map.get($systems, md-sys-color, surface-variant),
-      divider-height: 1px,
+      divider-height: _hardcode(1px, $exclude-hardcoded),
       disabled-ripple-color: null, // TODO(mmalerba): Figure out correct value.
       pagination-icon-color: map.get($systems, md-sys-color, on-surface),
       inactive-label-text-color: map.get($systems, md-sys-color, on-surface),

package/theming/_m3-density.scss

@@ -95,6 +95,10 @@ $_density-tokens: (
   (mat, icon-button): (
     touch-target-display: (block, block, none, none),
   ),
+  (mat, list): (
+    list-item-leading-icon-start-space: (16px, 12px, 8px, 4px),
+    list-item-leading-icon-end-space: (16px, 12px, 8px, 4px),
+  ),
   (mat, text-button): (
     touch-target-display: (block, block, none, none),
   ),
@@ -114,12 +118,20 @@ $_density-tokens: (
   (mat, minimal-pseudo-checkbox): (),
   (mat, paginator): (
     container-size: (56px, 52px, 48px, 40px),
+    form-field-container-height: (40px, 40px, 40px, 40px, 40px, 36px),
+    form-field-container-vertical-padding: (8px, 8px, 8px, 8px, 8px, 6px),
   ),
   (mat, radio): (
     touch-target-display: (block, block, none, none),
   ),
   (mat, ripple): (),
-  (mat, select): (),
+  (mat, select): (
+    arrow-transform: (
+      translateY(-8px),
+      translateY(-8px),
+      none,
+    ),
+  ),
   (mat, sidenav): (),
   (mat, slide-toggle): (),
   (mat, slider): (),

package/theming/_m3-tokens.scss

@@ -446,7 +446,7 @@
     headline-weight: subhead-weight,
   ));
 
-  @if (map.has-key($tokens, container-elevation)) {
+  @if map.get($tokens, container-elevation) != null {
     $tokens: map.merge($tokens, (
       // The spec has the dialog at an elevation of 3 which is consistent with the current
       // version of the tokens (0_161), however both the designs and MDC's implementation
@@ -472,7 +472,17 @@
   // 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);
+  @if map.get($tokens, list-item-container-color) != null {
+    $tokens: map.set($tokens, list-item-container-color, transparent);
+  }
+
+  // Match spec, which has list-item-leading-icon-size of 24px. Current version of tokens (0_161)
+  // has 18px.
+  @if map.get($tokens, list-item-leading-icon-size) != null {
+    $tokens: map.set($tokens, list-item-leading-icon-size, 24px);
+  }
+
+  @return $tokens;
 }
 
 /// Generates a set of namespaced tokens for all components.
@@ -826,6 +836,11 @@
       custom-tokens.filled-button($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, list),
+      custom-tokens.list($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       // Note: in M3 the "protected" button is called "elevated".
       (mat, protected-button),
@@ -976,7 +991,13 @@
     mdc-tokens.md-sys-color-values-light($ref));
   @return _generate-tokens(map.merge($ref, (
     md-sys-color: $sys-color,
+    // 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: mdc-tokens.md-sys-elevation-values(),
+    // Because the state values are sometimes combined with color values to create rgba colors,
+    // state needs to be part of color dimension.
+    // 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: mdc-tokens.md-sys-state-values(),
   )));
 }
@@ -1012,6 +1033,5 @@
   @return _generate-tokens((
     md-sys-motion: mdc-tokens.md-sys-motion-values(),
     md-sys-shape: mdc-tokens.md-sys-shape-values(),
-    md-sys-state: mdc-tokens.md-sys-state-values(),
   ), $include-non-systemized: true);
 }