@material/web 1.0.0-pre.11 → 1.0.0-pre.13

package/tokens/_md-comp-filled-tonal-button.scss

@@ -26,29 +26,29 @@ $supported-tokens: (
   'disabled-container-color',
   'disabled-container-elevation',
   'disabled-container-opacity',
+  'disabled-icon-color',
+  'disabled-icon-opacity',
   'disabled-label-text-color',
   'disabled-label-text-opacity',
   'focus-container-elevation',
+  'focus-icon-color',
   'focus-label-text-color',
   'hover-container-elevation',
+  'hover-icon-color',
   'hover-label-text-color',
   'hover-state-layer-color',
   'hover-state-layer-opacity',
+  'icon-color',
+  'icon-size',
   'label-text-color',
   'label-text-type',
   'pressed-container-elevation',
+  'pressed-icon-color',
   'pressed-label-text-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
   'spacing-leading',
   'spacing-trailing',
-  'with-icon-disabled-icon-color',
-  'with-icon-disabled-icon-opacity',
-  'with-icon-focus-icon-color',
-  'with-icon-hover-icon-color',
-  'with-icon-icon-color',
-  'with-icon-icon-size',
-  'with-icon-pressed-icon-color',
   'with-icon-spacing-leading',
   'with-icon-spacing-trailing',
   'with-trailing-icon-spacing-leading',
@@ -93,6 +93,16 @@ $_default: (
       'with-trailing-icon-spacing-trailing':
         if($exclude-hardcoded-values, null, 16px),
       // go/keep-sorted end
+    ),
+    $renamed-tokens: (
+      // Remove "with-*" prefixes (b/273534858)
+      'with-icon-disabled-icon-color': 'disabled-icon-color',
+      'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',
+      'with-icon-focus-icon-color': 'focus-icon-color',
+      'with-icon-hover-icon-color': 'hover-icon-color',
+      'with-icon-icon-color': 'icon-color',
+      'with-icon-icon-size': 'icon-size',
+      'with-icon-pressed-icon-color': 'pressed-icon-color'
     )
   );
 

package/tokens/_md-comp-input-chip.scss

@@ -199,5 +199,12 @@ $_default: (
     )
   );
 
+  // TODO(b/288199264): remove once input chip leading icon color is fixed
+  $tokens: map.set(
+    $tokens,
+    'leading-icon-color',
+    map.get($deps, 'md-sys-color', 'primary')
+  );
+
   @return $tokens;
 }

package/tokens/_md-comp-list-item.scss

@@ -43,11 +43,14 @@ $supported-tokens: (
   'list-item-leading-avatar-label-type',
   'list-item-leading-avatar-shape',
   'list-item-leading-avatar-size',
+  'list-item-leading-element-leading-space',
   'list-item-leading-icon-color',
   'list-item-leading-icon-size',
   'list-item-leading-image-height',
   'list-item-leading-image-shape',
   'list-item-leading-image-width',
+  'list-item-leading-space',
+  'list-item-leading-video-leading-space',
   'list-item-leading-video-shape',
   'list-item-leading-video-width',
   'list-item-one-line-container-height',
@@ -60,8 +63,10 @@ $supported-tokens: (
   'list-item-supporting-text-color',
   'list-item-supporting-text-type',
   'list-item-three-line-container-height',
+  'list-item-trailing-element-headline-trailing-element-space',
   'list-item-trailing-icon-color',
   'list-item-trailing-icon-size',
+  'list-item-trailing-space',
   'list-item-trailing-supporting-text-color',
   'list-item-trailing-supporting-text-line-height',
   'list-item-trailing-supporting-text-type',

package/tokens/_md-comp-menu-item.scss

@@ -18,6 +18,7 @@
 
 $supported-tokens: (
   // go/keep-sorted start
+  'list-item-container-color',
   'list-item-selected-container-color',
   // go/keep-sorted end
 );

package/tokens/_md-comp-outlined-button.scss

@@ -19,33 +19,31 @@ $supported-tokens: (
   // go/keep-sorted start
   'container-height',
   'container-shape',
+  'disabled-icon-color',
+  'disabled-icon-opacity',
   'disabled-label-text-color',
   'disabled-label-text-opacity',
   'disabled-outline-color',
   'disabled-outline-opacity',
+  'focus-icon-color',
   'focus-label-text-color',
-  'focus-outline-color',
+  'hover-icon-color',
   'hover-label-text-color',
-  'hover-outline-color',
   'hover-state-layer-color',
   'hover-state-layer-opacity',
+  'icon-color',
+  'icon-size',
   'label-text-color',
   'label-text-type',
   'outline-color',
   'outline-width',
+  'pressed-icon-color',
   'pressed-label-text-color',
   'pressed-outline-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
   'spacing-leading',
   'spacing-trailing',
-  'with-icon-disabled-icon-color',
-  'with-icon-disabled-icon-opacity',
-  'with-icon-focus-icon-color',
-  'with-icon-hover-icon-color',
-  'with-icon-icon-color',
-  'with-icon-icon-size',
-  'with-icon-pressed-icon-color',
   'with-icon-spacing-leading',
   'with-icon-spacing-trailing',
   'with-trailing-icon-spacing-leading',
@@ -55,8 +53,10 @@ $supported-tokens: (
 
 $unsupported-tokens: (
   // go/keep-sorted start
+  'focus-outline-color',
   'focus-state-layer-color',
   'focus-state-layer-opacity',
+  'hover-outline-color',
   'label-text-font',
   'label-text-line-height',
   'label-text-size',
@@ -89,6 +89,16 @@ $_default: (
       'with-trailing-icon-spacing-trailing':
         if($exclude-hardcoded-values, null, 16px),
       // go/keep-sorted end
+    ),
+    $renamed-tokens: (
+      // Remove "with-*" prefixes (b/273534858)
+      'with-icon-disabled-icon-color': 'disabled-icon-color',
+      'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',
+      'with-icon-focus-icon-color': 'focus-icon-color',
+      'with-icon-hover-icon-color': 'hover-icon-color',
+      'with-icon-icon-color': 'icon-color',
+      'with-icon-icon-size': 'icon-size',
+      'with-icon-pressed-icon-color': 'pressed-icon-color'
     )
   );
 

package/tokens/_md-comp-outlined-segmented-button.scss

@@ -16,54 +16,54 @@
 
 $supported-tokens: (
   // go/keep-sorted start
-  'container-height',
   'disabled-icon-color',
-  'disabled-icon-opacity',
   'disabled-label-text-color',
-  'disabled-label-text-opacity',
   'disabled-outline-color',
-  'disabled-outline-opacity',
-  'focus-state-layer-opacity',
   'hover-state-layer-opacity',
+  'icon-size',
   'label-text-type',
   'outline-color',
-  'outline-width',
   'pressed-state-layer-opacity',
   'selected-container-color',
   'selected-focus-icon-color',
   'selected-focus-label-text-color',
-  'selected-focus-state-layer-color',
   'selected-hover-icon-color',
   'selected-hover-label-text-color',
   'selected-hover-state-layer-color',
+  'selected-icon-color',
   'selected-label-text-color',
   'selected-pressed-icon-color',
   'selected-pressed-label-text-color',
   'selected-pressed-state-layer-color',
-  'selected-with-icon-icon-color',
-  'shape',
   'unselected-focus-icon-color',
   'unselected-focus-label-text-color',
-  'unselected-focus-state-layer-color',
   'unselected-hover-icon-color',
   'unselected-hover-label-text-color',
   'unselected-hover-state-layer-color',
+  'unselected-icon-color',
   'unselected-label-text-color',
   'unselected-pressed-icon-color',
   'unselected-pressed-label-text-color',
   'unselected-pressed-state-layer-color',
-  'unselected-with-icon-icon-color',
-  'with-icon-icon-size',
   // go/keep-sorted end
 );
 
 $unsupported-tokens: (
   // go/keep-sorted start
+  'container-height',
+  'disabled-icon-opacity',
+  'disabled-label-text-opacity',
+  'disabled-outline-opacity',
+  'focus-state-layer-opacity',
   'label-text-font',
   'label-text-line-height',
   'label-text-size',
   'label-text-tracking',
   'label-text-weight',
+  'outline-width',
+  'selected-focus-state-layer-color',
+  'shape',
+  'unselected-focus-state-layer-color',
   // go/keep-sorted end
 );
 
@@ -78,7 +78,13 @@ $_default: (
   $tokens: values.validate(
     md-comp-outlined-segmented-button.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
-    $unsupported-tokens: $unsupported-tokens
+    $unsupported-tokens: $unsupported-tokens,
+    $renamed-tokens: (
+      // Remove "with-*" prefixes (b/273534858)
+      'with-icon-icon-size': 'icon-size',
+      'selected-with-icon-icon-color': 'selected-icon-color',
+      'unselected-with-icon-icon-color': 'unselected-icon-color'
+    )
   );
 
   // TODO(b/271876162): remove when tokens compiler emits typescale tokens

package/tokens/_md-comp-slider.scss

@@ -13,8 +13,50 @@
 @use './md-sys-state';
 @use './md-sys-typescale';
 @use './v0_172/md-comp-slider';
+@use './values';
 // go/keep-sorted end
 
+$supported-tokens: (
+  // go/keep-sorted start
+  'active-track-color',
+  'active-track-height',
+  'active-track-shape',
+  'disabled-active-track-color',
+  'disabled-active-track-opacity',
+  'disabled-handle-color',
+  'disabled-handle-elevation',
+  'disabled-inactive-track-color',
+  'disabled-inactive-track-opacity',
+  'focus-handle-color',
+  'handle-color',
+  'handle-elevation',
+  'handle-height',
+  'handle-shadow-color',
+  'handle-shape',
+  'handle-width',
+  'hover-handle-color',
+  'hover-state-layer-color',
+  'hover-state-layer-opacity',
+  'inactive-track-color',
+  'inactive-track-height',
+  'inactive-track-shape',
+  'label-container-color',
+  'label-container-height',
+  'label-label-text-color',
+  'label-label-text-type',
+  'pressed-handle-color',
+  'pressed-state-layer-color',
+  'pressed-state-layer-opacity',
+  'state-layer-size',
+  'with-overlap-handle-outline-color',
+  'with-overlap-handle-outline-width',
+  'with-tick-marks-active-container-color',
+  'with-tick-marks-container-size',
+  'with-tick-marks-disabled-container-color',
+  'with-tick-marks-inactive-container-color',
+  // go/keep-sorted end
+);
+
 $_default: (
   'md-sys-color': md-sys-color.values-light(),
   'md-sys-elevation': md-sys-elevation.values(),
@@ -44,8 +86,11 @@ $_unsupported-tokens: (
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  $tokens: md-comp-slider.values($deps, $exclude-hardcoded-values);
-  $tokens: map.remove($tokens, $_unsupported-tokens...);
+  $tokens: values.validate(
+    md-comp-slider.values($deps, $exclude-hardcoded-values),
+    $supported-tokens: $supported-tokens,
+    $unsupported-tokens: $_unsupported-tokens
+  );
 
   // TODO(b/271876162): remove when tokens compiler emits typescale tokens
   $tokens: map.merge(
@@ -55,5 +100,6 @@ $_unsupported-tokens: (
         map.get($deps, 'md-sys-typescale', 'label-medium'),
     )
   );
+
   @return $tokens;
 }

package/tokens/_md-comp-suggestion-chip.scss

@@ -23,6 +23,7 @@ $supported-tokens: (
   'disabled-label-text-color',
   'disabled-label-text-opacity',
   'disabled-leading-icon-color',
+  'disabled-leading-icon-opacity',
   'disabled-outline-color',
   'disabled-outline-opacity',
   'elevated-container-color',

package/tokens/_md-comp-text-button.scss

@@ -19,26 +19,26 @@ $supported-tokens: (
   // go/keep-sorted start
   'container-height',
   'container-shape',
+  'disabled-icon-color',
+  'disabled-icon-opacity',
   'disabled-label-text-color',
   'disabled-label-text-opacity',
+  'focus-icon-color',
   'focus-label-text-color',
+  'hover-icon-color',
   'hover-label-text-color',
   'hover-state-layer-color',
   'hover-state-layer-opacity',
+  'icon-color',
+  'icon-size',
   'label-text-color',
   'label-text-type',
+  'pressed-icon-color',
   'pressed-label-text-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
   'spacing-leading',
   'spacing-trailing',
-  'with-icon-disabled-icon-color',
-  'with-icon-disabled-icon-opacity',
-  'with-icon-focus-icon-color',
-  'with-icon-hover-icon-color',
-  'with-icon-icon-color',
-  'with-icon-icon-size',
-  'with-icon-pressed-icon-color',
   'with-icon-spacing-leading',
   'with-icon-spacing-trailing',
   'with-trailing-icon-spacing-leading',
@@ -82,6 +82,16 @@ $_default: (
       'with-trailing-icon-spacing-trailing':
         if($exclude-hardcoded-values, null, 12px),
       // go/keep-sorted end
+    ),
+    $renamed-tokens: (
+      // Remove "with-*" prefixes (b/273534858)
+      'with-icon-disabled-icon-color': 'disabled-icon-color',
+      'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',
+      'with-icon-focus-icon-color': 'focus-icon-color',
+      'with-icon-hover-icon-color': 'hover-icon-color',
+      'with-icon-icon-color': 'icon-color',
+      'with-icon-icon-size': 'icon-size',
+      'with-icon-pressed-icon-color': 'pressed-icon-color'
     )
   );
 

package/tokens/_values.scss

@@ -94,7 +94,7 @@
   }
 
   @each $token in map.keys($values) {
-    @if list.index($supported-tokens, $token) == 0 {
+    @if list.index($supported-tokens, $token) == null {
       @error 'values.validate($supported-tokens)) is missing the \'#{$token}\' token. Does it need adding to $unsupported-tokens?';
     }
   }