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

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,111 @@
+//
+// 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.
+/// @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-tokens}\': \'#{$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 {
+    @if not 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':

package/tokens/{v0_161 → v0_172}/_md-comp-bottom-app-bar.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';
@@ -25,11 +25,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'),
     'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'),
     'container-height': if($exclude-hardcoded-values, null, 80px),
-    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'),
-    'container-surface-tint-layer-color':
-      map.get($deps, 'md-sys-color', 'surface-tint')
+    'container-shape': map.get($deps, 'md-sys-shape', 'corner-none')
   );
 }

package/tokens/{v0_161 → v0_172}/_md-comp-carousel-item.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';
@@ -32,8 +32,6 @@ $_default: (
     'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),
     'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),
     'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),
-    'container-surface-tint-layer-color':
-      map.get($deps, 'md-sys-color', 'surface-tint'),
     'disabled-container-color': map.get($deps, 'md-sys-color', 'surface'),
     'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),
     'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.38),

package/tokens/{v0_161 → v0_172}/_md-comp-checkbox.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-circular-progress-indicator.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
 // User-configured context group "Audience": "3P"
 //
 

package/tokens/{v0_161 → v0_172}/_md-comp-data-table.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';
@@ -81,7 +81,7 @@ $_default: (
     'row-item-outline-color': map.get($deps, 'md-sys-color', 'outline-variant'),
     'row-item-outline-width': if($exclude-hardcoded-values, null, 1px),
     'row-item-selected-container-color':
-      map.get($deps, 'md-sys-color', 'surface-variant'),
+      map.get($deps, 'md-sys-color', 'surface-container-highest'),
     'row-item-selected-hover-state-layer-color':
       map.get($deps, 'md-sys-color', 'on-surface'),
     'row-item-selected-hover-state-layer-opacity':

package/tokens/{v0_161 → v0_172}/_md-comp-date-input-modal.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,12 +28,10 @@ $_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-high'),
     'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),
     'container-height': if($exclude-hardcoded-values, null, 512px),
     'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),
-    'container-surface-tint-layer-color':
-      map.get($deps, 'md-sys-color', 'surface-tint'),
     'container-width': if($exclude-hardcoded-values, null, 328px),
     'header-container-height': if($exclude-hardcoded-values, null, 120px),
     'header-container-width': if($exclude-hardcoded-values, null, 328px),

package/tokens/{v0_161 → v0_172}/_md-comp-date-picker-docked.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';
@@ -31,12 +31,10 @@ $_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-high'),
     'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),
     'container-height': if($exclude-hardcoded-values, null, 456px),
     'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),
-    'container-surface-tint-layer-color':
-      map.get($deps, 'md-sys-color', 'surface-tint'),
     'container-width': if($exclude-hardcoded-values, null, 360px),
     'date-container-height': if($exclude-hardcoded-values, null, 48px),
     'date-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),

package/tokens/{v0_161 → v0_172}/_md-comp-date-picker-modal.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';
@@ -31,12 +31,10 @@ $_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-high'),
     'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),
     'container-height': if($exclude-hardcoded-values, null, 568px),
     'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),
-    'container-surface-tint-layer-color':
-      map.get($deps, 'md-sys-color', 'surface-tint'),
     'container-width': if($exclude-hardcoded-values, null, 360px),
     'date-container-height': if($exclude-hardcoded-values, null, 40px),
     'date-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),