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

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

@@ -170,32 +170,5 @@ $supported-tokens: (
     $new-tokens: get-new-tokens($deps, $exclude-hardcoded-values)
   );
 
-  @each $token, $value in $tokens {
-    $tokens: map.set($tokens, $token, var(--md-list-item-#{$token}, #{$value}));
-  }
-
-  @return $tokens;
-}
-
-// TODO(b/276957188): Remove this when we resolve issues with values fn.
-@function theme-values($deps: $_default, $exclude-hardcoded-values: false) {
-  $original-tokens: md-comp-list.values($deps, $exclude-hardcoded-values);
-  $original-tokens: map.merge($original-tokens, get-override-tokens($deps));
-
-  $tokens: values.validate(
-    md-comp-list.values($deps, $exclude-hardcoded-values),
-    $supported-tokens: $supported-tokens,
-    $unsupported-tokens: $unsupported-tokens,
-    $new-tokens: get-new-tokens($deps, $exclude-hardcoded-values)
-  );
-
-  @each $token, $value in $tokens {
-    @if $value {
-      $tokens: map.set($tokens, $token, #{$value});
-    } @else {
-      $tokens: map.remove($tokens, $token);
-    }
-  }
-
   @return $tokens;
 }

package/tokens/_md-comp-list.scss

@@ -116,41 +116,15 @@ $unsupported-tokens: (
   // go/keep-sorted end
 );
 
-$renamed-tokens: (
-  'list-item-container-color': 'container-color',
-);
-
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   $tokens: values.validate(
     md-comp-list.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
     $unsupported-tokens: $unsupported-tokens,
-    $renamed-tokens: $renamed-tokens
+    $renamed-tokens: (
+      'list-item-container-color': 'container-color',
+    )
   );
 
-  @each $token, $value in $tokens {
-    $tokens: map.set($tokens, $token, var(--md-list-#{$token}, #{$value}));
-  }
-
-  @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-list.values($deps, $exclude-hardcoded-values),
-    $supported-tokens: $supported-tokens,
-    $unsupported-tokens: $unsupported-tokens,
-    $renamed-tokens: $renamed-tokens
-  );
-
-  @each $token, $value in $tokens {
-    @if $value {
-      $tokens: map.set($tokens, $token, #{$value});
-    } @else {
-      $tokens: map.remove($tokens, $token);
-    }
-  }
-
   @return $tokens;
 }

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

@@ -36,41 +36,15 @@ $supported-tokens: (
   // go/keep-sorted end
 );
 
-$renamed-tokens: (
-  'container-color': 'list-item-container-color',
-);
-
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   $tokens: values.validate(
     md-comp-menu.values($deps),
     $supported-tokens: $supported-tokens,
     $unsupported-tokens: $unsupported-tokens,
-    $renamed-tokens: $renamed-tokens
+    $renamed-tokens: (
+      'container-color': 'list-item-container-color',
+    )
   );
 
-  @each $token, $value in $tokens {
-    $tokens: map.set($tokens, $token, var(--md-menu-item-#{$token}, #{$value}));
-  }
-
-  @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-menu.values($deps),
-    $supported-tokens: $supported-tokens,
-    $unsupported-tokens: $unsupported-tokens,
-    $renamed-tokens: $renamed-tokens
-  );
-
-  @each $token, $value in $tokens {
-    @if $value {
-      $tokens: map.set($tokens, $token, #{$value});
-    } @else {
-      $tokens: map.remove($tokens, $token);
-    }
-  }
-
   @return $tokens;
 }

package/tokens/_md-comp-menu.scss

@@ -44,28 +44,5 @@ $supported-tokens: (
     $unsupported-tokens: $unsupported-tokens
   );
 
-  @each $token, $value in $tokens {
-    $tokens: map.set($tokens, $token, var(--md-menu-#{$token}, #{$value}));
-  }
-
-  @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-menu.values($deps),
-    $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);
-    }
-  }
-
   @return $tokens;
 }

package/tokens/_md-comp-outlined-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-shape';
 @use './md-sys-state';
@@ -101,14 +100,5 @@ $_default: (
     )
   );
 
-  @each $token, $value in $tokens {
-    $tokens: map.set(
-      $tokens,
-      $token,
-      var(--md-outlined-button-#{$token}, #{$value})
-    );
-  }
-
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
   @return $tokens;
 }

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

@@ -7,23 +7,97 @@
 @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-outlined-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
+  'container-padding-horizontal',
+  'container-padding-vertical',
+  'container-shape',
+  'content-color',
+  'content-type',
+  'disabled-content-color',
+  'disabled-content-opacity',
+  'disabled-label-text-color',
+  'disabled-label-text-opacity',
+  'disabled-leading-content-color',
+  'disabled-leading-content-opacity',
+  'disabled-outline-color',
+  'disabled-outline-opacity',
+  'disabled-outline-width',
+  'disabled-supporting-text-color',
+  'disabled-supporting-text-opacity',
+  'disabled-trailing-content-color',
+  'disabled-trailing-content-opacity',
+  'error-content-color',
+  'error-focus-content-color',
+  'error-focus-label-text-color',
+  'error-focus-leading-content-color',
+  'error-focus-outline-color',
+  'error-focus-supporting-text-color',
+  'error-focus-trailing-content-color',
+  'error-hover-content-color',
+  'error-hover-label-text-color',
+  'error-hover-leading-content-color',
+  'error-hover-outline-color',
+  'error-hover-supporting-text-color',
+  'error-hover-trailing-content-color',
+  'error-label-text-color',
+  'error-leading-content-color',
+  'error-outline-color',
+  'error-supporting-text-color',
+  'error-trailing-content-color',
+  'focus-content-color',
+  'focus-label-text-color',
+  'focus-leading-content-color',
+  'focus-outline-color',
+  'focus-outline-width',
+  'focus-supporting-text-color',
+  'focus-trailing-content-color',
+  'hover-content-color',
+  'hover-label-text-color',
+  'hover-leading-content-color',
+  'hover-outline-color',
+  'hover-outline-width',
+  'hover-supporting-text-color',
+  'hover-trailing-content-color',
+  'label-text-color',
+  'label-text-padding-bottom',
+  'label-text-populated-line-height',
+  'label-text-populated-size',
+  'label-text-type',
+  'leading-content-color',
+  'outline-color',
+  'outline-label-padding',
+  'outline-width',
+  'supporting-text-color',
+  'supporting-text-padding',
+  'supporting-text-padding-top',
+  'supporting-text-type',
+  'trailing-content-color',
+  // go/keep-sorted end
 );
 
-@function values($deps: $_default-deps, $exclude-hardcoded-values: false) {
-  $text-field: tokens.md-comp-outlined-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-outlined-text-field.values(
     $deps,
     $exclude-hardcoded-values
   );
 
-  @return (
+  $tokens: (
     // go/keep-sorted start
     'container-padding-horizontal': if($exclude-hardcoded-values, null, 16px),
     'container-padding-vertical': if($exclude-hardcoded-values, null, 16px),
@@ -123,4 +197,6 @@ $_default-deps: (
     'trailing-content-color': map.get($text-field, 'trailing-icon-color'),
     // go/keep-sorted end
   );
+
+  @return values.validate($tokens, $supported-tokens: $supported-tokens);
 }

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

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

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

@@ -11,29 +11,75 @@
 @use './md-sys-state';
 @use './md-sys-typescale';
 @use './v0_172/md-comp-outlined-segmented-button';
+@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
+  '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',
+  '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-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-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: (
+$unsupported-tokens: (
+  // go/keep-sorted start
   'label-text-font',
   'label-text-line-height',
   'label-text-size',
   'label-text-tracking',
-  'label-text-weight'
+  'label-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-outlined-segmented-button.values(
-    $deps,
-    $exclude-hardcoded-values
+  $tokens: values.validate(
+    md-comp-outlined-segmented-button.values($deps, $exclude-hardcoded-values),
+    $supported-tokens: $supported-tokens,
+    $unsupported-tokens: $unsupported-tokens
   );
-  $tokens: map.remove($tokens, $_unsupported-tokens...);
 
   // TODO(b/271876162): remove when tokens compiler emits typescale tokens
   $tokens: map.merge(

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

@@ -8,7 +8,6 @@
 @use 'sass:string';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../sass/shape';
 @use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
@@ -69,6 +68,7 @@ $supported-tokens: (
   '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',
@@ -143,32 +143,5 @@ $_default: (
     $unsupported-tokens: $unsupported-tokens
   );
 
-  @each $token, $value in $tokens {
-    $tokens: map.set(
-      $tokens,
-      $token,
-      var(--md-outlined-select-#{$token}, #{$value})
-    );
-  }
-
-  @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-outlined-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);
-    }
-  }
-
   @return $tokens;
 }

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

@@ -11,15 +11,81 @@
 @use './md-sys-shape';
 @use './md-sys-typescale';
 @use './v0_172/md-comp-outlined-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-typescale': md-sys-typescale.values(),
+$supported-tokens: (
+  // go/keep-sorted start
+  'caret-color',
+  'container-shape',
+  '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-outline-color',
+  'disabled-outline-opacity',
+  'disabled-outline-width',
+  'disabled-supporting-text-color',
+  'disabled-supporting-text-opacity',
+  'disabled-trailing-icon-color',
+  'disabled-trailing-icon-opacity',
+  'error-focus-caret-color',
+  'error-focus-input-text-color',
+  'error-focus-label-text-color',
+  'error-focus-leading-icon-color',
+  'error-focus-outline-color',
+  'error-focus-supporting-text-color',
+  'error-focus-trailing-icon-color',
+  'error-hover-input-text-color',
+  'error-hover-label-text-color',
+  'error-hover-leading-icon-color',
+  'error-hover-outline-color',
+  'error-hover-supporting-text-color',
+  'error-hover-trailing-icon-color',
+  'error-input-text-color',
+  'error-label-text-color',
+  'error-leading-icon-color',
+  'error-outline-color',
+  'error-supporting-text-color',
+  'error-trailing-icon-color',
+  'focus-input-text-color',
+  'focus-label-text-color',
+  'focus-leading-icon-color',
+  'focus-outline-color',
+  'focus-outline-width',
+  'focus-supporting-text-color',
+  'focus-trailing-icon-color',
+  'hover-input-text-color',
+  'hover-label-text-color',
+  'hover-leading-icon-color',
+  'hover-outline-color',
+  'hover-outline-width',
+  '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',
+  'outline-color',
+  'outline-width',
+  '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',
@@ -34,12 +100,22 @@ $_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-typescale': md-sys-typescale.values(),
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  $tokens: md-comp-outlined-text-field.values($deps, $exclude-hardcoded-values);
-  $tokens: map.remove($tokens, $_unsupported-tokens...);
+  $tokens: values.validate(
+    md-comp-outlined-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,
@@ -49,5 +125,6 @@ $_unsupported-tokens: (
       'supporting-text-type': map.get($deps, 'md-sys-typescale', 'body-small'),
     )
   );
+
   @return $tokens;
 }

package/tokens/_md-comp-suggestion-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';
@@ -119,13 +118,5 @@ $_default: (
     )
   );
 
-  @each $token, $value in $tokens {
-    $tokens: map.set(
-      $tokens,
-      $token,
-      var(--md-suggestion-chip-#{$token}, #{$value})
-    );
-  }
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
   @return $tokens;
 }