@material/web 1.0.0-pre.7 → 1.0.0-pre.8

package/{field/lib → tokens}/_md-comp-filled-field.scss

@@ -7,23 +7,103 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../tokens';
+@use './md-sys-color';
+@use './md-sys-shape';
+@use './md-sys-state';
+@use './md-sys-typescale';
+@use './v0_172/md-comp-filled-text-field';
+@use './values';
 // go/keep-sorted end
 
-$_default-deps: (
-  'md-sys-color': tokens.md-sys-color-values-light(),
-  'md-sys-shape': tokens.md-sys-shape-values(),
-  'md-sys-state': tokens.md-sys-state-values(),
-  'md-sys-typescale': tokens.md-sys-typescale-values(),
+$supported-tokens: (
+  // go/keep-sorted start
+  'active-indicator-color',
+  'active-indicator-height',
+  'container-color',
+  'container-padding-horizontal',
+  'container-padding-vertical',
+  'container-shape',
+  'content-color',
+  'content-type',
+  'disabled-active-indicator-color',
+  'disabled-active-indicator-height',
+  'disabled-active-indicator-opacity',
+  'disabled-container-color',
+  'disabled-container-opacity',
+  'disabled-content-color',
+  'disabled-content-opacity',
+  'disabled-label-text-color',
+  'disabled-label-text-opacity',
+  'disabled-leading-content-color',
+  'disabled-leading-content-opacity',
+  'disabled-supporting-text-color',
+  'disabled-supporting-text-opacity',
+  'disabled-trailing-content-color',
+  'disabled-trailing-content-opacity',
+  'error-active-indicator-color',
+  'error-content-color',
+  'error-focus-active-indicator-color',
+  'error-focus-content-color',
+  'error-focus-label-text-color',
+  'error-focus-leading-content-color',
+  'error-focus-supporting-text-color',
+  'error-focus-trailing-content-color',
+  'error-hover-active-indicator-color',
+  'error-hover-content-color',
+  'error-hover-label-text-color',
+  'error-hover-leading-content-color',
+  'error-hover-state-layer-color',
+  'error-hover-state-layer-opacity',
+  'error-hover-supporting-text-color',
+  'error-hover-trailing-content-color',
+  'error-label-text-color',
+  'error-leading-content-color',
+  'error-supporting-text-color',
+  'error-trailing-content-color',
+  'focus-active-indicator-color',
+  'focus-active-indicator-height',
+  'focus-content-color',
+  'focus-label-text-color',
+  'focus-leading-content-color',
+  'focus-supporting-text-color',
+  'focus-trailing-content-color',
+  'hover-active-indicator-color',
+  'hover-active-indicator-height',
+  'hover-content-color',
+  'hover-label-text-color',
+  'hover-leading-content-color',
+  'hover-state-layer-color',
+  'hover-state-layer-opacity',
+  'hover-supporting-text-color',
+  'hover-trailing-content-color',
+  'label-text-color',
+  'label-text-populated-line-height',
+  'label-text-populated-size',
+  'label-text-type',
+  'leading-content-color',
+  'supporting-text-color',
+  'supporting-text-padding',
+  'supporting-text-padding-top',
+  'supporting-text-type',
+  'trailing-content-color',
+  'with-label-container-padding-vertical',
+  // go/keep-sorted end
 );
 
-@function values($deps: $_default-deps, $exclude-hardcoded-values: false) {
-  $text-field: tokens.md-comp-filled-text-field-values(
+$_default: (
+  'md-sys-color': md-sys-color.values-light(),
+  'md-sys-shape': md-sys-shape.values(),
+  'md-sys-state': md-sys-state.values(),
+  'md-sys-typescale': md-sys-typescale.values(),
+);
+
+@function values($deps: $_default, $exclude-hardcoded-values: false) {
+  $text-field: md-comp-filled-text-field.values(
     $deps,
     $exclude-hardcoded-values
   );
 
-  @return (
+  $tokens: (
     // go/keep-sorted start
     'active-indicator-color': map.get($text-field, 'active-indicator-color'),
     'active-indicator-height': map.get($text-field, 'active-indicator-height'),
@@ -142,4 +222,6 @@ $_default-deps: (
       if($exclude-hardcoded-values, null, 8px),
     // go/keep-sorted end
   );
+
+  @return values.validate($tokens, $supported-tokens: $supported-tokens);
 }

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

@@ -8,8 +8,48 @@
 @use './md-sys-shape';
 @use './md-sys-state';
 @use './v0_172/md-comp-filled-icon-button';
+@use './values';
 // go/keep-sorted end
 
+$supported-tokens: (
+  // go/keep-sorted start
+  'container-color',
+  'container-shape',
+  'container-size',
+  'disabled-container-color',
+  'disabled-container-opacity',
+  'disabled-icon-color',
+  'disabled-icon-opacity',
+  'focus-icon-color',
+  'focus-state-layer-color',
+  'focus-state-layer-opacity',
+  'hover-icon-color',
+  'hover-state-layer-color',
+  'hover-state-layer-opacity',
+  'icon-color',
+  'icon-size',
+  'pressed-icon-color',
+  'pressed-state-layer-color',
+  'pressed-state-layer-opacity',
+  'selected-container-color',
+  'toggle-selected-focus-icon-color',
+  'toggle-selected-focus-state-layer-color',
+  'toggle-selected-hover-icon-color',
+  'toggle-selected-hover-state-layer-color',
+  'toggle-selected-icon-color',
+  'toggle-selected-pressed-icon-color',
+  'toggle-selected-pressed-state-layer-color',
+  'toggle-unselected-focus-icon-color',
+  'toggle-unselected-focus-state-layer-color',
+  'toggle-unselected-hover-icon-color',
+  'toggle-unselected-hover-state-layer-color',
+  'toggle-unselected-icon-color',
+  'toggle-unselected-pressed-icon-color',
+  'toggle-unselected-pressed-state-layer-color',
+  'unselected-container-color',
+  // go/keep-sorted end
+);
+
 $_default: (
   'md-sys-color': md-sys-color.values-light(),
   'md-sys-shape': md-sys-shape.values(),
@@ -17,5 +57,10 @@ $_default: (
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  @return md-comp-filled-icon-button.values($deps, $exclude-hardcoded-values);
+  $tokens: values.validate(
+    md-comp-filled-icon-button.values($deps, $exclude-hardcoded-values),
+    $supported-tokens: $supported-tokens
+  );
+
+  @return $tokens;
 }

package/tokens/_md-comp-filled-select.scss

@@ -7,7 +7,6 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../sass/shape';
 @use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
@@ -75,11 +74,15 @@ $supported-tokens: (
   'text-field-hover-supporting-text-color',
   'text-field-hover-trailing-icon-color',
   'text-field-input-text-color',
+  'text-field-input-text-type',
   'text-field-label-text-color',
+  'text-field-label-text-populated-line-height',
   'text-field-label-text-populated-size',
+  'text-field-label-text-type',
   'text-field-leading-icon-color',
   'text-field-leading-icon-size',
   'text-field-supporting-text-color',
+  'text-field-supporting-text-type',
   'text-field-trailing-icon-color',
   'text-field-trailing-icon-size',
   // go/keep-sorted end
@@ -141,34 +144,5 @@ $_default: (
     $unsupported-tokens: $unsupported-tokens
   );
 
-  @each $token, $value in $tokens {
-    $tokens: map.set(
-      $tokens,
-      $token,
-      var(--md-filled-select-#{$token}, #{$value})
-    );
-  }
-
-  $tokens: shape.resolve-tokens($tokens, 'text-field-container-shape');
-  @return $tokens;
-}
-
-// TODO(b/276957188): Remove this when we resolve issues with values fn.
-@function theme-values($deps: $_default, $exclude-hardcoded-values: false) {
-  $tokens: values.validate(
-    md-comp-filled-select.values($deps, $exclude-hardcoded-values),
-    $supported-tokens: $supported-tokens,
-    $unsupported-tokens: $unsupported-tokens
-  );
-
-  @each $token, $value in $tokens {
-    @if $value {
-      $tokens: map.set($tokens, $token, #{$value});
-    } @else {
-      $tokens: map.remove($tokens, $token);
-    }
-  }
-
-  $tokens: shape.resolve-tokens($tokens, 'text-field-container-shape');
   @return $tokens;
 }

package/tokens/_md-comp-filled-text-field.scss

@@ -12,16 +12,87 @@
 @use './md-sys-state';
 @use './md-sys-typescale';
 @use './v0_172/md-comp-filled-text-field';
+@use './values';
 // go/keep-sorted end
 
-$_default: (
-  'md-sys-color': md-sys-color.values-light(),
-  'md-sys-shape': md-sys-shape.values(),
-  'md-sys-state': md-sys-state.values(),
-  'md-sys-typescale': md-sys-typescale.values(),
+$supported-tokens: (
+  // go/keep-sorted start
+  'active-indicator-color',
+  'active-indicator-height',
+  'caret-color',
+  'container-color',
+  'container-shape',
+  'disabled-active-indicator-color',
+  'disabled-active-indicator-height',
+  'disabled-active-indicator-opacity',
+  'disabled-container-color',
+  'disabled-container-opacity',
+  'disabled-input-text-color',
+  'disabled-input-text-opacity',
+  'disabled-label-text-color',
+  'disabled-label-text-opacity',
+  'disabled-leading-icon-color',
+  'disabled-leading-icon-opacity',
+  'disabled-supporting-text-color',
+  'disabled-supporting-text-opacity',
+  'disabled-trailing-icon-color',
+  'disabled-trailing-icon-opacity',
+  'error-active-indicator-color',
+  'error-focus-active-indicator-color',
+  'error-focus-caret-color',
+  'error-focus-input-text-color',
+  'error-focus-label-text-color',
+  'error-focus-leading-icon-color',
+  'error-focus-supporting-text-color',
+  'error-focus-trailing-icon-color',
+  'error-hover-active-indicator-color',
+  'error-hover-input-text-color',
+  'error-hover-label-text-color',
+  'error-hover-leading-icon-color',
+  'error-hover-state-layer-color',
+  'error-hover-state-layer-opacity',
+  'error-hover-supporting-text-color',
+  'error-hover-trailing-icon-color',
+  'error-input-text-color',
+  'error-label-text-color',
+  'error-leading-icon-color',
+  'error-supporting-text-color',
+  'error-trailing-icon-color',
+  'focus-active-indicator-color',
+  'focus-active-indicator-height',
+  'focus-input-text-color',
+  'focus-label-text-color',
+  'focus-leading-icon-color',
+  'focus-supporting-text-color',
+  'focus-trailing-icon-color',
+  'hover-active-indicator-color',
+  'hover-active-indicator-height',
+  'hover-input-text-color',
+  'hover-label-text-color',
+  'hover-leading-icon-color',
+  'hover-state-layer-color',
+  'hover-state-layer-opacity',
+  'hover-supporting-text-color',
+  'hover-trailing-icon-color',
+  'input-text-color',
+  'input-text-placeholder-color',
+  'input-text-prefix-color',
+  'input-text-suffix-color',
+  'input-text-type',
+  'label-text-color',
+  'label-text-populated-line-height',
+  'label-text-populated-size',
+  'label-text-type',
+  'leading-icon-color',
+  'leading-icon-size',
+  'supporting-text-color',
+  'supporting-text-type',
+  'trailing-icon-color',
+  'trailing-icon-size' // go/keep-sorted end
 );
 
-$_unsupported-tokens: (
+$unsupported-tokens: (
+  // go/keep-sorted start
   'input-text-font',
   'input-text-line-height',
   'input-text-size',
@@ -36,12 +107,24 @@ $_unsupported-tokens: (
   'supporting-text-line-height',
   'supporting-text-size',
   'supporting-text-tracking',
-  'supporting-text-weight'
+  'supporting-text-weight',
+  // go/keep-sorted end
+);
+
+$_default: (
+  'md-sys-color': md-sys-color.values-light(),
+  'md-sys-shape': md-sys-shape.values(),
+  'md-sys-state': md-sys-state.values(),
+  'md-sys-typescale': md-sys-typescale.values(),
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  $tokens: md-comp-filled-text-field.values($deps, $exclude-hardcoded-values);
-  $tokens: map.remove($tokens, $_unsupported-tokens...);
+  $tokens: values.validate(
+    md-comp-filled-text-field.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(
     $tokens,
@@ -51,5 +134,6 @@ $_unsupported-tokens: (
       'supporting-text-type': map.get($deps, 'md-sys-typescale', 'body-small'),
     )
   );
+
   @return $tokens;
 }

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

@@ -7,7 +7,6 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../sass/shape';
 @use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
@@ -105,15 +104,5 @@ $_default: (
     )
   );
 
-  @each $token, $value in $tokens {
-    // TODO: change to filled-tonal-button
-    $tokens: map.set(
-      $tokens,
-      $token,
-      var(--md-tonal-button-#{$token}, #{$value})
-    );
-  }
-
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
   @return $tokens;
 }

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

@@ -8,8 +8,48 @@
 @use './md-sys-shape';
 @use './md-sys-state';
 @use './v0_172/md-comp-filled-tonal-icon-button';
+@use './values';
 // go/keep-sorted end
 
+$supported-tokens: (
+  // go/keep-sorted start
+  'container-color',
+  'container-shape',
+  'container-size',
+  'disabled-container-color',
+  'disabled-container-opacity',
+  'disabled-icon-color',
+  'disabled-icon-opacity',
+  'focus-icon-color',
+  'focus-state-layer-color',
+  'focus-state-layer-opacity',
+  'hover-icon-color',
+  'hover-state-layer-color',
+  'hover-state-layer-opacity',
+  'icon-color',
+  'icon-size',
+  'pressed-icon-color',
+  'pressed-state-layer-color',
+  'pressed-state-layer-opacity',
+  'selected-container-color',
+  'toggle-selected-focus-icon-color',
+  'toggle-selected-focus-state-layer-color',
+  'toggle-selected-hover-icon-color',
+  'toggle-selected-hover-state-layer-color',
+  'toggle-selected-icon-color',
+  'toggle-selected-pressed-icon-color',
+  'toggle-selected-pressed-state-layer-color',
+  'toggle-unselected-focus-icon-color',
+  'toggle-unselected-focus-state-layer-color',
+  'toggle-unselected-hover-icon-color',
+  'toggle-unselected-hover-state-layer-color',
+  'toggle-unselected-icon-color',
+  'toggle-unselected-pressed-icon-color',
+  'toggle-unselected-pressed-state-layer-color',
+  'unselected-container-color',
+  // go/keep-sorted end
+);
+
 $_default: (
   'md-sys-color': md-sys-color.values-light(),
   'md-sys-shape': md-sys-shape.values(),
@@ -17,8 +57,10 @@ $_default: (
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  @return md-comp-filled-tonal-icon-button.values(
-    $deps,
-    $exclude-hardcoded-values
+  $tokens: values.validate(
+    md-comp-filled-tonal-icon-button.values($deps, $exclude-hardcoded-values),
+    $supported-tokens: $supported-tokens
   );
+
+  @return $tokens;
 }

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

@@ -7,7 +7,6 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../sass/shape';
 @use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
@@ -225,14 +224,5 @@ $_default: (
     )
   );
 
-  @each $token, $value in $tokens {
-    $tokens: map.set(
-      $tokens,
-      $token,
-      var(--md-filter-chip-#{$token}, #{$value})
-    );
-  }
-
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
   @return $tokens;
 }

package/tokens/_md-comp-focus-ring.scss

@@ -5,42 +5,41 @@
 
 // go/keep-sorted start
 @use 'sass:map';
+@use 'sass:string';
 // go/keep-sorted end
 // go/keep-sorted start
 @use './md-sys-color';
 @use './md-sys-motion';
 @use './md-sys-shape';
+@use './values';
 // go/keep-sorted end
 
+$supported-tokens: (
+  // go/keep-sorted start
+  'active-width',
+  'color',
+  'duration',
+  'offset',
+  'shape',
+  'width',
+  // go/keep-sorted end
+);
+
 $_default: (
   'md-sys-color': md-sys-color.values-light(),
-  'md-sys-shape': md-sys-shape.values(),
   'md-sys-motion': md-sys-motion.values(),
+  'md-sys-shape': md-sys-shape.values(),
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  @return (
-    shape:
-      if(
-        $exclude-hardcoded-values,
-        null,
-        map.get($deps, 'md-sys-shape', 'corner-full')
-      ),
-    offset: if($exclude-hardcoded-values, null, 2px),
-    width: if($exclude-hardcoded-values, null, 3px),
-    animation-width: if($exclude-hardcoded-values, null, 8px),
-    animation-duration:
-      if(
-        $exclude-hardcoded-values,
-        null,
-        map.get($deps, 'md-sys-motion', 'duration-long4')
-      ),
-    easing:
-      if(
-        $exclude-hardcoded-values,
-        null,
-        map.get($deps, 'md-sys-motion', 'easing-emphasized')
-      ),
-    color: map.get($deps, 'md-sys-color', 'secondary')
+  $tokens: (
+    'active-width': if($exclude-hardcoded-values, null, 8px),
+    'color': map.get($deps, 'md-sys-color', 'secondary'),
+    'duration': map.get($deps, 'md-sys-motion', 'duration-long4'),
+    'offset': if($exclude-hardcoded-values, null, 2px),
+    'shape': map.get($deps, 'md-sys-shape', 'corner-full'),
+    'width': if($exclude-hardcoded-values, null, 3px),
   );
+
+  @return values.validate($tokens, $supported-tokens: $supported-tokens);
 }

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

@@ -8,8 +8,39 @@
 @use './md-sys-shape';
 @use './md-sys-state';
 @use './v0_172/md-comp-icon-button';
+@use './values';
 // go/keep-sorted end
 
+$supported-tokens: (
+  // go/keep-sorted start
+  'disabled-icon-color',
+  'disabled-icon-opacity',
+  'icon-size',
+  'selected-focus-icon-color',
+  'selected-focus-state-layer-color',
+  'selected-focus-state-layer-opacity',
+  'selected-hover-icon-color',
+  'selected-hover-state-layer-color',
+  'selected-hover-state-layer-opacity',
+  'selected-icon-color',
+  'selected-pressed-icon-color',
+  'selected-pressed-state-layer-color',
+  'selected-pressed-state-layer-opacity',
+  'state-layer-shape',
+  'state-layer-size',
+  'unselected-focus-icon-color',
+  'unselected-focus-state-layer-color',
+  'unselected-focus-state-layer-opacity',
+  'unselected-hover-icon-color',
+  'unselected-hover-state-layer-color',
+  'unselected-hover-state-layer-opacity',
+  'unselected-icon-color',
+  'unselected-pressed-icon-color',
+  'unselected-pressed-state-layer-color',
+  'unselected-pressed-state-layer-opacity',
+  // go/keep-sorted end
+);
+
 $_default: (
   'md-sys-color': md-sys-color.values-light(),
   'md-sys-shape': md-sys-shape.values(),
@@ -17,5 +48,10 @@ $_default: (
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  @return md-comp-icon-button.values($deps, $exclude-hardcoded-values);
+  $tokens: values.validate(
+    md-comp-icon-button.values($deps, $exclude-hardcoded-values),
+    $supported-tokens: $supported-tokens
+  );
+
+  @return $tokens;
 }

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

@@ -7,7 +7,6 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../sass/shape';
 @use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
@@ -200,14 +199,5 @@ $_default: (
     )
   );
 
-  @each $token, $value in $tokens {
-    $tokens: map.set(
-      $tokens,
-      $token,
-      var(--md-input-chip-#{$token}, #{$value})
-    );
-  }
-
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
   @return $tokens;
 }

package/tokens/_md-comp-linear-progress-indicator.scss

@@ -10,6 +10,7 @@
 @use './md-sys-color';
 @use './md-sys-shape';
 @use './v0_172/md-comp-linear-progress-indicator';
+@use './values';
 // go/keep-sorted end
 
 $_default: (
@@ -17,19 +18,33 @@ $_default: (
   'md-sys-shape': md-sys-shape.values(),
 );
 
-$_unsupported-tokens: (
+$supported-tokens: (
+  // go/keep-sorted start
+  'active-indicator-color',
+  'active-indicator-height',
+  'four-color-active-indicator-four-color',
+  'four-color-active-indicator-one-color',
+  'four-color-active-indicator-three-color',
+  'four-color-active-indicator-two-color',
+  'track-color',
+  'track-height',
+  'track-shape',
+  // go/keep-sorted end
+);
+
+$unsupported-tokens: (
+  // go/keep-sorted start
   // can only control track since scaling is used on buffer/progress
-  'active-indicator-shape'
+  'active-indicator-shape',
+  // go/keep-sorted end
 );
 
 // TODO(b/275045611) may need to update based on resolution of design
 // for buffer and background animation.
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  $tokens: md-comp-linear-progress-indicator.values(
-    $deps,
-    $exclude-hardcoded-values
+  @return values.validate(
+    md-comp-linear-progress-indicator.values($deps, $exclude-hardcoded-values),
+    $supported-tokens: $supported-tokens,
+    $unsupported-tokens: $unsupported-tokens
   );
-  $tokens: map.remove($tokens, $_unsupported-tokens...);
-
-  @return $tokens;
 }