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

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

@@ -13,11 +13,55 @@
 @use './md-sys-shape';
 @use './md-sys-state';
 @use './md-sys-typescale';
-@use './v0_161/md-comp-suggestion-chip';
+@use './v0_172/md-comp-suggestion-chip';
+@use './values';
 // go/keep-sorted end
 
-$_unsupported-tokens: (
+$supported-tokens: (
   // go/keep-sorted start
+  'container-height',
+  'container-shape',
+  'disabled-label-text-color',
+  'disabled-label-text-opacity',
+  'disabled-leading-icon-color',
+  'disabled-outline-color',
+  'disabled-outline-opacity',
+  'elevated-container-color',
+  'elevated-container-elevation',
+  'elevated-container-shadow-color',
+  'elevated-disabled-container-color',
+  'elevated-disabled-container-elevation',
+  'elevated-disabled-container-opacity',
+  'elevated-focus-container-elevation',
+  'elevated-hover-container-elevation',
+  'elevated-pressed-container-elevation',
+  'focus-label-text-color',
+  'focus-leading-icon-color',
+  'focus-outline-color',
+  'focus-state-layer-color',
+  'focus-state-layer-opacity',
+  'hover-label-text-color',
+  'hover-leading-icon-color',
+  'hover-state-layer-color',
+  'hover-state-layer-opacity',
+  'icon-size',
+  'label-text-color',
+  'label-text-type',
+  'leading-icon-color',
+  'outline-color',
+  'outline-width',
+  'pressed-label-text-color',
+  'pressed-leading-icon-color',
+  'pressed-state-layer-color',
+  'pressed-state-layer-opacity',
+  // go/keep-sorted end
+);
+
+$unsupported-tokens: (
+  // go/keep-sorted start
+  'container-elevation',
+  'dragged-container-elevation',
+  'dragged-label-text-color',
   'dragged-leading-icon-color',
   'dragged-state-layer-color',
   'dragged-state-layer-opacity',
@@ -29,37 +73,52 @@ $_unsupported-tokens: (
   // go/keep-sorted end
 );
 
-$_renamed-tokens: (
-  // go/keep-sorted start
-  'with-leading-icon-disabled-leading-icon-color': 'disabled-leading-icon-color',
-  'with-leading-icon-disabled-leading-icon-opacity':
-    'disabled-leading-icon-opacity',
-  'with-leading-icon-dragged-leading-icon-color': 'dragged-leading-icon-color',
-  'with-leading-icon-focus-leading-icon-color': 'focus-leading-icon-color',
-  'with-leading-icon-hover-leading-icon-color': 'hover-leading-icon-color',
-  'with-leading-icon-leading-icon-color': 'leading-icon-color',
-  'with-leading-icon-leading-icon-size': 'leading-icon-size',
-  'with-leading-icon-pressed-leading-icon-color': 'pressed-leading-icon-color',
-  // go/keep-sorted end
-);
-
 $_default: (
-  // go/keep-sorted start
   'md-sys-color': md-sys-color.values-light(),
   'md-sys-elevation': md-sys-elevation.values(),
   'md-sys-shape': md-sys-shape.values(),
   'md-sys-state': md-sys-state.values(),
   'md-sys-typescale': md-sys-typescale.values(),
-  // go/keep-sorted end
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  $tokens: md-comp-suggestion-chip.values($deps, $exclude-hardcoded-values);
-  @each $old-token, $new-token in $_renamed-tokens {
-    $tokens: map.set($tokens, $new-token, map.get($tokens, $old-token));
-    $tokens: map.remove($tokens, $old-token);
-  }
-  $tokens: map.remove($tokens, $_unsupported-tokens...);
+  $tokens: values.validate(
+    md-comp-suggestion-chip.values($deps, $exclude-hardcoded-values),
+    $supported-tokens: $supported-tokens,
+    $unsupported-tokens: $unsupported-tokens,
+    $renamed-tokens: (
+      // Remove "flat-*" prefix (b/275577569)
+      'flat-container-elevation': 'container-elevation',
+      'flat-disabled-outline-color': 'disabled-outline-color',
+      'flat-disabled-outline-opacity': 'disabled-outline-opacity',
+      'flat-focus-outline-color': 'focus-outline-color',
+      'flat-outline-color': 'outline-color',
+      'flat-outline-width': 'outline-width',
+      // Remove "with-*" prefixes (b/273534858)
+      'with-leading-icon-disabled-leading-icon-color':
+        'disabled-leading-icon-color',
+      'with-leading-icon-disabled-leading-icon-opacity':
+        'disabled-leading-icon-opacity',
+      'with-leading-icon-dragged-leading-icon-color':
+        'dragged-leading-icon-color',
+      'with-leading-icon-focus-leading-icon-color': 'focus-leading-icon-color',
+      'with-leading-icon-hover-leading-icon-color': 'hover-leading-icon-color',
+      'with-leading-icon-leading-icon-color': 'leading-icon-color',
+      'with-leading-icon-pressed-leading-icon-color':
+        'pressed-leading-icon-color',
+      // Rename "leading-icon-size" to "icon-size" (b/275577569)
+      'with-leading-icon-leading-icon-size': 'icon-size'
+    )
+  );
+
+  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
+  $tokens: map.merge(
+    $tokens,
+    (
+      'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'),
+    )
+  );
+
   @each $token, $value in $tokens {
     $tokens: map.set(
       $tokens,

package/tokens/_md-comp-switch.scss

@@ -7,7 +7,7 @@
 @use './md-sys-color';
 @use './md-sys-shape';
 @use './md-sys-state';
-@use './v0_161/md-comp-switch';
+@use './v0_172/md-comp-switch';
 // go/keep-sorted end
 
 $_default: (

package/tokens/_md-comp-test-table.scss

@@ -0,0 +1,31 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use './md-sys-color';
+@use './md-sys-typescale';
+// go/keep-sorted end
+
+$_default: (
+  'md-sys-color': md-sys-color.values-light(),
+  'md-sys-typescale': md-sys-typescale.values(),
+);
+
+@function values($deps: $_default) {
+  @return (
+    'cell-color': map.get($deps, 'md-sys-color', 'surface-container-lowest'),
+    'cell-text-color': map.get($deps, 'md-sys-color', 'on-surface-container'),
+    'cell-text-type': map.get($deps, 'md-sys-typescale', 'body-medium'),
+    'cell-grid-color': map.get($deps, 'md-sys-color', 'surface-variant'),
+    'header-cell-color': map.get($deps, 'md-sys-color', 'surface-variant'),
+    'header-cell-text-color':
+      map.get($deps, 'md-sys-color', 'on-surface-variant'),
+    'header-cell-text-type': map.get($deps, 'md-sys-typescale', 'title-medium'),
+    'outline-color': map.get($deps, 'md-sys-color', 'outline')
+  );
+}

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

@@ -12,37 +12,88 @@
 @use './md-sys-shape';
 @use './md-sys-state';
 @use './md-sys-typescale';
-@use './v0_161/md-comp-text-button';
+@use './v0_172/md-comp-text-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',
+  'container-shape',
+  'disabled-label-text-color',
+  'disabled-label-text-opacity',
+  'focus-label-text-color',
+  'focus-state-layer-color',
+  'focus-state-layer-opacity',
+  'hover-label-text-color',
+  'hover-state-layer-color',
+  'hover-state-layer-opacity',
+  'label-text-color',
+  'label-text-type',
+  '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',
+  'with-trailing-icon-spacing-trailing',
+  // 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-text-button.values($deps, $exclude-hardcoded-values);
-  @if not $exclude-hardcoded-values {
-    // TODO(b/198759625): Remove once spacing tokens are formally added
-    $tokens: map.set($tokens, 'spacing-leading', 12px);
-    $tokens: map.set($tokens, 'spacing-trailing', 12px);
-    $tokens: map.set($tokens, 'with-icon-spacing-leading', 12px);
-    $tokens: map.set($tokens, 'with-icon-spacing-trailing', 16px);
-    $tokens: map.set($tokens, 'with-trailing-icon-spacing-leading', 16px);
-    $tokens: map.set($tokens, 'with-trailing-icon-spacing-trailing', 12px);
-  }
+  $tokens: values.validate(
+    md-comp-text-button.values($deps, $exclude-hardcoded-values),
+    $supported-tokens: $supported-tokens,
+    $unsupported-tokens: $unsupported-tokens,
+    $new-tokens: (
+      // TODO(b/198759625): Remove once spacing tokens are formally added
+      // go/keep-sorted start
+      'spacing-leading': if($exclude-hardcoded-values, null, 12px),
+      'spacing-trailing': if($exclude-hardcoded-values, null, 12px),
+      'with-icon-spacing-leading': if($exclude-hardcoded-values, null, 12px),
+      'with-icon-spacing-trailing': if($exclude-hardcoded-values, null, 16px),
+      'with-trailing-icon-spacing-leading':
+        if($exclude-hardcoded-values, null, 16px),
+      'with-trailing-icon-spacing-trailing':
+        if($exclude-hardcoded-values, null, 12px),
+      // go/keep-sorted end
+    )
+  );
+
+  // TODO(b/271876162): remove this when tokens compiler emits typescale tokens
+  $tokens: map.merge(
+    $tokens,
+    (
+      'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'),
+    )
+  );
 
-  $tokens: map.remove($tokens, $_unsupported-tokens...);
   @each $token, $value in $tokens {
     $tokens: map.set(
       $tokens,

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

@@ -9,7 +9,7 @@
 @use './md-sys-shape';
 @use './md-sys-state';
 @use './md-sys-typescale';
-@use './v0_161/md-comp-time-input';
+@use './v0_172/md-comp-time-input';
 // go/keep-sorted end
 
 $_default: (

package/tokens/_md-comp-time-picker.scss

@@ -9,7 +9,7 @@
 @use './md-sys-shape';
 @use './md-sys-state';
 @use './md-sys-typescale';
-@use './v0_161/md-comp-time-picker';
+@use './v0_172/md-comp-time-picker';
 // go/keep-sorted end
 
 $_default: (

package/tokens/_md-comp-top-app-bar-large.scss

@@ -8,7 +8,7 @@
 @use './md-sys-elevation';
 @use './md-sys-shape';
 @use './md-sys-typescale';
-@use './v0_161/md-comp-top-app-bar-large';
+@use './v0_172/md-comp-top-app-bar-large';
 // go/keep-sorted end
 
 $_default: (

package/tokens/_md-comp-top-app-bar-medium.scss

@@ -8,7 +8,7 @@
 @use './md-sys-elevation';
 @use './md-sys-shape';
 @use './md-sys-typescale';
-@use './v0_161/md-comp-top-app-bar-medium';
+@use './v0_172/md-comp-top-app-bar-medium';
 // go/keep-sorted end
 
 $_default: (

package/tokens/_md-comp-top-app-bar-small-centered.scss

@@ -8,7 +8,7 @@
 @use './md-sys-elevation';
 @use './md-sys-shape';
 @use './md-sys-typescale';
-@use './v0_161/md-comp-top-app-bar-small-centered';
+@use './v0_172/md-comp-top-app-bar-small-centered';
 // go/keep-sorted end
 
 $_default: (

package/tokens/_md-comp-top-app-bar-small.scss

@@ -8,7 +8,7 @@
 @use './md-sys-elevation';
 @use './md-sys-shape';
 @use './md-sys-typescale';
-@use './v0_161/md-comp-top-app-bar-small';
+@use './v0_172/md-comp-top-app-bar-small';
 // go/keep-sorted end
 
 $_default: (

package/tokens/_md-ref-palette.scss

@@ -4,7 +4,7 @@
 //
 
 // go/keep-sorted start
-@use './v0_161/md-ref-palette';
+@use './v0_172/md-ref-palette';
 // go/keep-sorted end
 
 @function values($exclude-hardcoded-values: false) {

package/tokens/_md-ref-typeface.scss

@@ -4,9 +4,31 @@
 //
 
 // go/keep-sorted start
-@use './v0_161/md-ref-typeface';
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use './v0_172/md-ref-typeface';
 // go/keep-sorted end
 
+$supported-tokens: (
+  // go/keep-sorted start
+  'brand',
+  'plain',
+  // go/keep-sorted end
+);
+
 @function values($exclude-hardcoded-values: false) {
-  @return md-ref-typeface.values($exclude-hardcoded-values);
+  $tokens: md-ref-typeface.values($exclude-hardcoded-values);
+
+  @each $token in $supported-tokens {
+    $value: map.get($tokens, $token);
+    @if $value != null {
+      $tokens: map.set(
+        $tokens,
+        $token,
+        var(--md-ref-typeface-#{$token}, #{$value})
+      );
+    }
+  }
+  @return $tokens;
 }

package/tokens/_md-sys-color.scss

@@ -5,7 +5,7 @@
 
 // go/keep-sorted start
 @use './md-ref-palette';
-@use './v0_161/md-sys-color';
+@use './v0_172/md-sys-color';
 // go/keep-sorted end
 
 $_default-dark: (

package/tokens/_md-sys-elevation.scss

@@ -7,7 +7,7 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use './v0_161/md-sys-elevation';
+@use './v0_172/md-sys-elevation';
 // go/keep-sorted end
 
 @function values($exclude-hardcoded-values: false) {

package/tokens/_md-sys-motion.scss

@@ -4,7 +4,7 @@
 //
 
 // go/keep-sorted start
-@use './v0_161/md-sys-motion';
+@use './v0_172/md-sys-motion';
 // go/keep-sorted end
 
 @function values($exclude-hardcoded-values: false) {

package/tokens/_md-sys-shape.scss

@@ -4,7 +4,7 @@
 //
 
 // go/keep-sorted start
-@use './v0_161/md-sys-shape';
+@use './v0_172/md-sys-shape';
 // go/keep-sorted end
 
 @function values($exclude-hardcoded-values: false) {

package/tokens/_md-sys-state.scss

@@ -4,7 +4,7 @@
 //
 
 // go/keep-sorted start
-@use './v0_161/md-sys-state';
+@use './v0_172/md-sys-state';
 // go/keep-sorted end
 
 @function values($exclude-hardcoded-values: false) {

package/tokens/_md-sys-typescale.scss

@@ -3,15 +3,49 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
 // go/keep-sorted start
 @use './md-ref-typeface';
-@use './v0_161/md-sys-typescale';
+@use './v0_172/md-sys-typescale';
 // go/keep-sorted end
 
 $_default: (
   'md-ref-typeface': md-ref-typeface.values(),
 );
 
+$supported-tokens: (
+  'body-large',
+  'body-medium',
+  'body-small',
+  'display-large',
+  'display-medium',
+  'display-small',
+  'headline-large',
+  'headline-medium',
+  'headline-small',
+  'label-large',
+  'label-medium',
+  'label-small',
+  'title-large',
+  'title-medium',
+  'title-small'
+);
+
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  @return md-sys-typescale.values($deps, $exclude-hardcoded-values);
+  $tokens: md-sys-typescale.values($deps, $exclude-hardcoded-values);
+
+  // TODO(b/271876162): Remove when the token compiler emits these custom properties
+  @each $token in $supported-tokens {
+    $value: map.get($tokens, $token);
+    @if $value != null {
+      $tokens: map.set(
+        $tokens,
+        $token,
+        var(--md-sys-typescale-#{$token}, #{$value})
+      );
+    }
+  }
+  @return $tokens;
 }

package/tokens/_values.scss

@@ -0,0 +1,114 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+// go/keep-sorted end
+
+/// Validates the Map returned from `tokens.md-comp-*-values()` functions.
+///
+/// Validation requires a `$values` Map and at least the `$supported-tokens`
+/// keyword argument.
+/// @example - scss
+///   $tokens: values.validate(
+///     md-comp-foo.values($deps, $exclude-hardcoded-values),
+///     $supported-tokens: (),
+///       'foo-color',
+///       'foo-size',
+///     ),
+///   );
+///
+/// Additional keyword arguments for `$unsupported-tokens`, `$renamed-tokens`,
+/// and `$new-tokens` are optional.
+///
+/// @param {Map} $values - The values Map returned from
+///     `tokens.md-comp-*-values()` functions.
+/// @param {List} $supported-tokens - Keyword argument for every token that is
+///     supported.
+/// @param {List} $unsupported-tokens [null] - Keyword argument for every token
+///     that is not supported and should be removed.
+/// @param {Map} $renamed-tokens [null] - Keyword argument for a Map whose keys
+///     are token names and values are new token names to rename them to. The
+///     new token name must appear in the `$supported-tokens` list.
+/// @param {Map} $new-tokens [null] - Keyword argument for a Map whose keys
+///     and values are new tokens to be added. They must also appear in the
+///     `$supported-tokens` list.
+/// @param {Bool} $is-subset [null] - Check if provided tokens are only a subset
+///     of the supported tokens. e.g. when generating a theme.
+/// @return {Map} The `tokens.md-comp-*-values()` Map with any unsupported
+///     tokens removed, renamed tokens updated, and new tokens added.
+@function validate($values, $tokens...) {
+  $tokens: meta.keywords($tokens);
+
+  $renamed-tokens: map.get($tokens, 'renamed-tokens');
+  @if $renamed-tokens {
+    @if meta.type-of($renamed-tokens) != 'map' {
+      @error 'values.validate($renamed-tokens) must be a map.';
+    }
+
+    @each $old-token, $new-token in $renamed-tokens {
+      @if not map.has-key($values, $old-token) {
+        @error 'values.validate($renamed-tokens: (\'#{$old-token}\': \'#{$new-token}\')) old-token in not the provided values.';
+      }
+
+      $values: map.set($values, $new-token, map.get($values, $old-token));
+      $values: map.remove($values, $old-token);
+    }
+  }
+
+  $unsupported-tokens: map.get($tokens, 'unsupported-tokens');
+  @if $unsupported-tokens {
+    @if meta.type-of($unsupported-tokens) != 'list' {
+      @error 'values.validate($unsupported-tokens) must be a list.';
+    }
+
+    @each $unsupported-token in $unsupported-tokens {
+      @if not map.has-key($values, $unsupported-token) {
+        @error 'values.validate($unsupported-tokens: (\'#{$unsupported-token}\')) token is not in the provided values.';
+      }
+
+      $values: map.remove($values, $unsupported-token);
+    }
+  }
+
+  $new-tokens: map.get($tokens, 'new-tokens');
+  @if $new-tokens {
+    @if meta.type-of($new-tokens) != 'map' {
+      @error 'values.validate($new-tokens) must be a map.';
+    }
+
+    @each $new-token, $new-value in $new-tokens {
+      @if map.has-key($values, $new-token) {
+        @warn 'values.validate($new-tokens: (\'#{$new-token}\': \'#{$new-value}\')) already exists. Has it been added to tokens? If so, remove this new token.';
+      }
+
+      @if $new-value {
+        $values: map.set($values, $new-token, $new-value);
+      }
+    }
+  }
+
+  $supported-tokens: map.get($tokens, 'supported-tokens');
+  @if not $supported-tokens or meta.type-of($supported-tokens) != 'list' {
+    @error 'values.validate() must include a $supported-tokens list.';
+  }
+
+  @each $token in map.keys($values) {
+    @if list.index($supported-tokens, $token) == 0 {
+      @error 'values.validate($supported-tokens)) is missing the \'#{$token}\' token. Does it need adding to $unsupported-tokens?';
+    }
+  }
+
+  @each $supported-token in $supported-tokens {
+    $is-subset: map.get($tokens, 'is-subset');
+    @if not($is-subset or map.has-key($values, $supported-token)) {
+      @error 'The provided values are missing the supported \'#{$supported-token}\' token.';
+    }
+  }
+
+  @return $values;
+}

package/tokens/{v0_161 → v0_172}/_md-comp-assist-chip.scss

@@ -6,7 +6,7 @@
 // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!
 // !!! DO NOT MODIFY IT BY HAND !!!
 // Design system display name: Google Material 3
-// Design system version: v0.161
+// Design system version: v0.172
 //
 
 @use 'sass:map';
@@ -33,8 +33,6 @@ $_default: (
   @return (
     'container-height': if($exclude-hardcoded-values, null, 32px),
     'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'),
-    'container-surface-tint-layer-color':
-      map.get($deps, 'md-sys-color', 'surface-tint'),
     'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),
     'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38),
     'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),
@@ -42,7 +40,8 @@ $_default: (
     'dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'),
     'dragged-state-layer-opacity':
       map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'),
-    'elevated-container-color': map.get($deps, 'md-sys-color', 'surface'),
+    'elevated-container-color':
+      map.get($deps, 'md-sys-color', 'surface-container-low'),
     'elevated-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),
     'elevated-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),
     'elevated-disabled-container-color':

package/tokens/{v0_161 → v0_172}/_md-comp-badge.scss

@@ -6,7 +6,7 @@
 // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!
 // !!! DO NOT MODIFY IT BY HAND !!!
 // Design system display name: Google Material 3
-// Design system version: v0.161
+// Design system version: v0.172
 //
 
 @use 'sass:map';

package/tokens/{v0_161 → v0_172}/_md-comp-banner.scss

@@ -6,7 +6,7 @@
 // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!!
 // !!! DO NOT MODIFY IT BY HAND !!!
 // Design system display name: Google Material 3
-// Design system version: v0.161
+// Design system version: v0.172
 //
 
 @use 'sass:map';
@@ -28,11 +28,9 @@ $_default: (
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   @return (
-    'container-color': map.get($deps, 'md-sys-color', 'surface'),
+    'container-color': map.get($deps, 'md-sys-color', 'surface-container-low'),
     'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),
     'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),
-    'container-surface-tint-layer-color':
-      map.get($deps, 'md-sys-color', 'surface-tint'),
     'desktop-with-single-line-container-height':
       if($exclude-hardcoded-values, null, 52px),
     'desktop-with-three-lines-container-height':