Introduce tone-based surfaces and accent color add-ons - Part 2 (#138521)

This PR is to introduce 19 new color roles and deprecate 3 color roles in `ColorScheme`.
**Tone-based surface colors** (7 colors): 
* surfaceBright
* surfaceDim
* surfaceContainer
* surfaceContainerLowest
* surfaceContainerLow
* surfaceContainerHigh
* surfaceContainerHighest

**Accent color add-ons** (12 colors):
* primary/secondary/tertiary-Fixed
* primary/secondary/tertiary-FixedDim
* onPrimary/onSecondary/onTertiary-Fixed
* onPrimary/onSecondary/onTertiary-FixedVariant

**Deprecated colors**:
* background -> replaced with surface
* onBackground -> replaced with onSurface
* surfaceVariant -> replaced with surfaceContainerHighest

Please checkout this [design doc](https://docs.google.com/document/d/1ODqivpM_6c490T4j5XIiWCDKo5YqHy78YEFqDm4S8h4/edit?usp=sharing) for more information:)

![Screenshot 2024-01-08 at 4 56 51 PM](https://github.com/flutter/flutter/assets/36861262/353cdb4c-6ba9-4435-a518-fd3f67e415f0)

dev/benchmarks/macrobenchmarks/lib/src/web/material3.dart

@@ -443,7 +443,7 @@ class Cards extends StatelessWidget {
           SizedBox(
             width: cardWidth,
             child: Card(
-              color: Theme.of(context).colorScheme.surfaceVariant,
+              color: Theme.of(context).colorScheme.surfaceContainerHighest,
               elevation: 0,
               child: Container(
                 padding: const EdgeInsets.fromLTRB(10, 5, 5, 10),
@@ -1279,7 +1279,7 @@ class _IconToggleButtonState extends State<IconToggleButton> {
 ButtonStyle enabledFilledButtonStyle(bool selected, ColorScheme colors) {
   return IconButton.styleFrom(
     foregroundColor: selected ? colors.onPrimary : colors.primary,
-    backgroundColor: selected ? colors.primary : colors.surfaceVariant,
+    backgroundColor: selected ? colors.primary : colors.surfaceContainerHighest,
     disabledForegroundColor: colors.onSurface.withOpacity(0.38),
     disabledBackgroundColor: colors.onSurface.withOpacity(0.12),
     hoverColor: selected
@@ -1306,7 +1306,7 @@ ButtonStyle enabledFilledTonalButtonStyle(bool selected, ColorScheme colors) {
     foregroundColor:
         selected ? colors.onSecondaryContainer : colors.onSurfaceVariant,
     backgroundColor:
-        selected ? colors.secondaryContainer : colors.surfaceVariant,
+        selected ? colors.secondaryContainer : colors.surfaceContainerHighest,
     hoverColor: selected
         ? colors.onSecondaryContainer.withOpacity(0.08)
         : colors.onSurfaceVariant.withOpacity(0.08),
@@ -2350,7 +2350,7 @@ class ComponentGroupDecoration extends StatelessWidget {
       child: Card(
         margin: EdgeInsets.zero,
         elevation: 0,
-        color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3),
+        color: Theme.of(context).colorScheme.surfaceContainerHighest.withOpacity(0.3),
         child: Padding(
           padding: const EdgeInsets.symmetric(vertical: 20.0),
           child: Center(

dev/integration_tests/flutter_gallery/lib/demo/calculator/home.dart

@@ -202,7 +202,7 @@ class KeyPad extends StatelessWidget {
             ),
             Expanded(
               child: Material(
-                color: themeData.colorScheme.background,
+                color: themeData.colorScheme.surface,
                 child: Column(
                   children: <Widget>[
                     CalcKey('\u232B', calcState!.handleDelTap),

dev/integration_tests/flutter_gallery/lib/demo/material/chip_demo.dart

@@ -203,7 +203,7 @@ class _ChipDemoState extends State<ChipDemo> {
     assert(name.length > 1);
     final int hash = name.hashCode & 0xffff;
     final double hue = (360.0 * hash / (1 << 15)) % 360.0;
-    final double themeValue = HSVColor.fromColor(theme.colorScheme.background).value;
+    final double themeValue = HSVColor.fromColor(theme.colorScheme.surface).value;
     return HSVColor.fromAHSV(1.0, hue, 0.4, themeValue).toColor();
   }
 

dev/integration_tests/flutter_gallery/lib/demo/shrine/app.dart

@@ -114,12 +114,10 @@ const ColorScheme kShrineColorScheme = ColorScheme(
   primary: kShrinePink100,
   secondary: kShrinePink50,
   surface: kShrineSurfaceWhite,
-  background: kShrineBackgroundWhite,
   error: kShrineErrorRed,
   onPrimary: kShrineBrown900,
   onSecondary: kShrineBrown900,
   onSurface: kShrineBrown900,
-  onBackground: kShrineBrown900,
   onError: kShrineSurfaceWhite,
   brightness: Brightness.light,
 );

dev/integration_tests/flutter_gallery/lib/gallery/themes.dart

@@ -23,7 +23,7 @@ ThemeData _buildDarkTheme() {
     secondary: secondaryColor,
     onPrimary: Colors.white,
     error: const Color(0xFFB00020),
-    background: const Color(0xFF202124),
+    surface: const Color(0xFF202124),
   );
   final ThemeData base = ThemeData(
     useMaterial3: false,

dev/tools/gen_defaults/data/badge.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.badge.color": "error",
   "md.comp.badge.large.color": "error",

dev/tools/gen_defaults/data/banner.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
-  "md.comp.banner.container.color": "surface",
+  "md.comp.banner.container.color": "surfaceContainerLow",
   "md.comp.banner.container.elevation": "md.sys.elevation.level1",
   "md.comp.banner.container.shape": "md.sys.shape.corner.none",
-  "md.comp.banner.container.surface-tint-layer.color": "surfaceTint",
   "md.comp.banner.desktop.with-single-line.container.height": 52.0,
   "md.comp.banner.desktop.with-three-lines.container.height": 90.0,
   "md.comp.banner.desktop.with-two-lines.with-image.container.height": 72.0,

dev/tools/gen_defaults/data/bottom_app_bar.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
-  "md.comp.bottom-app-bar.container.color": "surface",
+  "md.comp.bottom-app-bar.container.color": "surfaceContainer",
   "md.comp.bottom-app-bar.container.elevation": "md.sys.elevation.level2",
   "md.comp.bottom-app-bar.container.height": 80.0,
-  "md.comp.bottom-app-bar.container.shape": "md.sys.shape.corner.none",
-  "md.comp.bottom-app-bar.container.surface-tint-layer.color": "surfaceTint"
+  "md.comp.bottom-app-bar.container.shape": "md.sys.shape.corner.none"
 }

dev/tools/gen_defaults/data/button_elevated.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
-  "md.comp.elevated-button.container.color": "surface",
+  "md.comp.elevated-button.container.color": "surfaceContainerLow",
   "md.comp.elevated-button.container.elevation": "md.sys.elevation.level1",
   "md.comp.elevated-button.container.height": 40.0,
   "md.comp.elevated-button.container.shadow-color": "shadow",
   "md.comp.elevated-button.container.shape": "md.sys.shape.corner.full",
-  "md.comp.elevated-button.container.surface-tint-layer.color": "surfaceTint",
   "md.comp.elevated-button.disabled.container.color": "onSurface",
   "md.comp.elevated-button.disabled.container.elevation": "md.sys.elevation.level0",
   "md.comp.elevated-button.disabled.container.opacity": 0.12,
   "md.comp.elevated-button.disabled.label-text.color": "onSurface",
   "md.comp.elevated-button.disabled.label-text.opacity": 0.38,
   "md.comp.elevated-button.focus.container.elevation": "md.sys.elevation.level1",
+  "md.comp.elevated-button.focus.indicator.color": "secondary",
+  "md.comp.elevated-button.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.elevated-button.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.elevated-button.focus.label-text.color": "primary",
   "md.comp.elevated-button.focus.state-layer.color": "primary",
   "md.comp.elevated-button.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",

dev/tools/gen_defaults/data/button_filled.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.filled-button.container.color": "primary",
   "md.comp.filled-button.container.elevation": "md.sys.elevation.level0",
@@ -12,6 +12,9 @@
   "md.comp.filled-button.disabled.label-text.color": "onSurface",
   "md.comp.filled-button.disabled.label-text.opacity": 0.38,
   "md.comp.filled-button.focus.container.elevation": "md.sys.elevation.level0",
+  "md.comp.filled-button.focus.indicator.color": "secondary",
+  "md.comp.filled-button.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.filled-button.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.filled-button.focus.label-text.color": "onPrimary",
   "md.comp.filled-button.focus.state-layer.color": "onPrimary",
   "md.comp.filled-button.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",

dev/tools/gen_defaults/data/button_filled_tonal.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.filled-tonal-button.container.color": "secondaryContainer",
   "md.comp.filled-tonal-button.container.elevation": "md.sys.elevation.level0",
@@ -12,6 +12,9 @@
   "md.comp.filled-tonal-button.disabled.label-text.color": "onSurface",
   "md.comp.filled-tonal-button.disabled.label-text.opacity": 0.38,
   "md.comp.filled-tonal-button.focus.container.elevation": "md.sys.elevation.level0",
+  "md.comp.filled-tonal-button.focus.indicator.color": "secondary",
+  "md.comp.filled-tonal-button.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.filled-tonal-button.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.filled-tonal-button.focus.label-text.color": "onSecondaryContainer",
   "md.comp.filled-tonal-button.focus.state-layer.color": "onSecondaryContainer",
   "md.comp.filled-tonal-button.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",

dev/tools/gen_defaults/data/button_outlined.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.outlined-button.container.height": 40.0,
   "md.comp.outlined-button.container.shape": "md.sys.shape.corner.full",
@@ -7,6 +7,9 @@
   "md.comp.outlined-button.disabled.label-text.opacity": 0.38,
   "md.comp.outlined-button.disabled.outline.color": "onSurface",
   "md.comp.outlined-button.disabled.outline.opacity": 0.12,
+  "md.comp.outlined-button.focus.indicator.color": "secondary",
+  "md.comp.outlined-button.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.outlined-button.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.outlined-button.focus.label-text.color": "primary",
   "md.comp.outlined-button.focus.outline.color": "primary",
   "md.comp.outlined-button.focus.state-layer.color": "primary",

dev/tools/gen_defaults/data/button_text.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.text-button.container.height": 40.0,
   "md.comp.text-button.container.shape": "md.sys.shape.corner.full",
   "md.comp.text-button.disabled.label-text.color": "onSurface",
   "md.comp.text-button.disabled.label-text.opacity": 0.38,
+  "md.comp.text-button.focus.indicator.color": "secondary",
+  "md.comp.text-button.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.text-button.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.text-button.focus.label-text.color": "primary",
   "md.comp.text-button.focus.state-layer.color": "primary",
   "md.comp.text-button.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",

dev/tools/gen_defaults/data/card_elevated.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
-  "md.comp.elevated-card.container.color": "surface",
+  "md.comp.elevated-card.container.color": "surfaceContainerLow",
   "md.comp.elevated-card.container.elevation": "md.sys.elevation.level1",
   "md.comp.elevated-card.container.shadow-color": "shadow",
   "md.comp.elevated-card.container.shape": "md.sys.shape.corner.medium",
-  "md.comp.elevated-card.container.surface-tint-layer.color": "surfaceTint",
   "md.comp.elevated-card.disabled.container.color": "surface",
   "md.comp.elevated-card.disabled.container.elevation": "md.sys.elevation.level1",
   "md.comp.elevated-card.disabled.container.opacity": 0.38,
@@ -13,6 +12,9 @@
   "md.comp.elevated-card.dragged.state-layer.color": "onSurface",
   "md.comp.elevated-card.dragged.state-layer.opacity": "md.sys.state.dragged.state-layer-opacity",
   "md.comp.elevated-card.focus.container.elevation": "md.sys.elevation.level1",
+  "md.comp.elevated-card.focus.indicator.color": "secondary",
+  "md.comp.elevated-card.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.elevated-card.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.elevated-card.focus.state-layer.color": "onSurface",
   "md.comp.elevated-card.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
   "md.comp.elevated-card.hover.container.elevation": "md.sys.elevation.level2",

dev/tools/gen_defaults/data/card_filled.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
-  "md.comp.filled-card.container.color": "surfaceVariant",
+  "md.comp.filled-card.container.color": "surfaceContainerHighest",
   "md.comp.filled-card.container.elevation": "md.sys.elevation.level0",
   "md.comp.filled-card.container.shadow-color": "shadow",
   "md.comp.filled-card.container.shape": "md.sys.shape.corner.medium",
@@ -12,6 +12,9 @@
   "md.comp.filled-card.dragged.state-layer.color": "onSurface",
   "md.comp.filled-card.dragged.state-layer.opacity": "md.sys.state.dragged.state-layer-opacity",
   "md.comp.filled-card.focus.container.elevation": "md.sys.elevation.level0",
+  "md.comp.filled-card.focus.indicator.color": "secondary",
+  "md.comp.filled-card.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.filled-card.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.filled-card.focus.state-layer.color": "onSurface",
   "md.comp.filled-card.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
   "md.comp.filled-card.hover.container.elevation": "md.sys.elevation.level1",

dev/tools/gen_defaults/data/card_outlined.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.outlined-card.container.color": "surface",
   "md.comp.outlined-card.container.elevation": "md.sys.elevation.level0",
   "md.comp.outlined-card.container.shadow-color": "shadow",
   "md.comp.outlined-card.container.shape": "md.sys.shape.corner.medium",
-  "md.comp.outlined-card.container.surface-tint-layer.color": "surfaceTint",
   "md.comp.outlined-card.disabled.container.elevation": "md.sys.elevation.level0",
   "md.comp.outlined-card.disabled.outline.color": "outline",
   "md.comp.outlined-card.disabled.outline.opacity": 0.12,
@@ -14,6 +13,9 @@
   "md.comp.outlined-card.dragged.state-layer.color": "onSurface",
   "md.comp.outlined-card.dragged.state-layer.opacity": "md.sys.state.dragged.state-layer-opacity",
   "md.comp.outlined-card.focus.container.elevation": "md.sys.elevation.level0",
+  "md.comp.outlined-card.focus.indicator.color": "secondary",
+  "md.comp.outlined-card.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.outlined-card.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.outlined-card.focus.outline.color": "onSurface",
   "md.comp.outlined-card.focus.state-layer.color": "onSurface",
   "md.comp.outlined-card.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",

dev/tools/gen_defaults/data/carousel_item.json

 {
-  "version": "v0_202",
+  "version": "v0_206",
 
   "md.comp.carousel-item.container.color": "surface",
   "md.comp.carousel-item.container.elevation": "md.sys.elevation.level0",
@@ -9,6 +9,9 @@
   "md.comp.carousel-item.disabled.container.elevation": "md.sys.elevation.level0",
   "md.comp.carousel-item.disabled.container.opacity": 0.38,
   "md.comp.carousel-item.focus.container.elevation": "md.sys.elevation.level0",
+  "md.comp.carousel-item.focus.indicator.color": "secondary",
+  "md.comp.carousel-item.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.carousel-item.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.carousel-item.focus.state-layer.color": "onSurface",
   "md.comp.carousel-item.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
   "md.comp.carousel-item.hover.container.elevation": "md.sys.elevation.level1",

dev/tools/gen_defaults/data/checkbox.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.checkbox.container.size": 18.0,
   "md.comp.checkbox.error.focus.state-layer.color": "error",
@@ -8,6 +8,9 @@
   "md.comp.checkbox.error.hover.state-layer.opacity": "md.sys.state.hover.state-layer-opacity",
   "md.comp.checkbox.error.pressed.state-layer.color": "error",
   "md.comp.checkbox.error.pressed.state-layer.opacity": "md.sys.state.pressed.state-layer-opacity",
+  "md.comp.checkbox.focus.indicator.color": "secondary",
+  "md.comp.checkbox.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.checkbox.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.checkbox.icon.size": 18.0,
   "md.comp.checkbox.selected.container.color": "primary",
   "md.comp.checkbox.selected.disabled.container.color": "onSurface",

dev/tools/gen_defaults/data/chip_assist.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.assist-chip.container.height": 32.0,
   "md.comp.assist-chip.container.shape": "md.sys.shape.corner.small",
-  "md.comp.assist-chip.container.surface-tint-layer.color": "surfaceTint",
   "md.comp.assist-chip.disabled.label-text.color": "onSurface",
   "md.comp.assist-chip.disabled.label-text.opacity": 0.38,
   "md.comp.assist-chip.dragged.container.elevation": "md.sys.elevation.level4",
   "md.comp.assist-chip.dragged.label-text.color": "onSurface",
   "md.comp.assist-chip.dragged.state-layer.color": "onSurface",
   "md.comp.assist-chip.dragged.state-layer.opacity": "md.sys.state.dragged.state-layer-opacity",
-  "md.comp.assist-chip.elevated.container.color": "surface",
+  "md.comp.assist-chip.elevated.container.color": "surfaceContainerLow",
   "md.comp.assist-chip.elevated.container.elevation": "md.sys.elevation.level1",
   "md.comp.assist-chip.elevated.container.shadow-color": "shadow",
   "md.comp.assist-chip.elevated.disabled.container.color": "onSurface",
@@ -25,6 +24,9 @@
   "md.comp.assist-chip.flat.focus.outline.color": "onSurface",
   "md.comp.assist-chip.flat.outline.color": "outline",
   "md.comp.assist-chip.flat.outline.width": 1.0,
+  "md.comp.assist-chip.focus.indicator.color": "secondary",
+  "md.comp.assist-chip.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.assist-chip.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.assist-chip.focus.label-text.color": "onSurface",
   "md.comp.assist-chip.focus.state-layer.color": "onSurface",
   "md.comp.assist-chip.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",

dev/tools/gen_defaults/data/chip_filter.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.filter-chip.container.height": 32.0,
   "md.comp.filter-chip.container.shape": "md.sys.shape.corner.small",
-  "md.comp.filter-chip.container.surface-tint-layer.color": "surfaceTint",
   "md.comp.filter-chip.disabled.label-text.color": "onSurface",
   "md.comp.filter-chip.disabled.label-text.opacity": 0.38,
   "md.comp.filter-chip.dragged.container.elevation": "md.sys.elevation.level4",
@@ -16,7 +15,7 @@
   "md.comp.filter-chip.elevated.hover.container.elevation": "md.sys.elevation.level2",
   "md.comp.filter-chip.elevated.pressed.container.elevation": "md.sys.elevation.level1",
   "md.comp.filter-chip.elevated.selected.container.color": "secondaryContainer",
-  "md.comp.filter-chip.elevated.unselected.container.color": "surface",
+  "md.comp.filter-chip.elevated.unselected.container.color": "surfaceContainerLow",
   "md.comp.filter-chip.flat.container.elevation": "md.sys.elevation.level0",
   "md.comp.filter-chip.flat.disabled.selected.container.color": "onSurface",
   "md.comp.filter-chip.flat.disabled.selected.container.opacity": 0.12,
@@ -33,6 +32,9 @@
   "md.comp.filter-chip.flat.unselected.outline.color": "outline",
   "md.comp.filter-chip.flat.unselected.outline.width": 1.0,
   "md.comp.filter-chip.flat.unselected.pressed.container.elevation": "md.sys.elevation.level0",
+  "md.comp.filter-chip.focus.indicator.color": "secondary",
+  "md.comp.filter-chip.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.filter-chip.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.filter-chip.label-text.text-style": "labelLarge",
   "md.comp.filter-chip.selected.dragged.label-text.color": "onSecondaryContainer",
   "md.comp.filter-chip.selected.dragged.state-layer.color": "onSecondaryContainer",

dev/tools/gen_defaults/data/chip_input.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.input-chip.container.elevation": "md.sys.elevation.level0",
   "md.comp.input-chip.container.height": 32.0,
@@ -11,6 +11,9 @@
   "md.comp.input-chip.disabled.unselected.outline.color": "onSurface",
   "md.comp.input-chip.disabled.unselected.outline.opacity": 0.12,
   "md.comp.input-chip.dragged.container.elevation": "md.sys.elevation.level4",
+  "md.comp.input-chip.focus.indicator.color": "secondary",
+  "md.comp.input-chip.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.input-chip.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.input-chip.label-text.text-style": "labelLarge",
   "md.comp.input-chip.selected.container.color": "secondaryContainer",
   "md.comp.input-chip.selected.dragged.label-text.color": "onSecondaryContainer",

dev/tools/gen_defaults/data/chip_suggestion.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.suggestion-chip.container.height": 32.0,
   "md.comp.suggestion-chip.container.shape": "md.sys.shape.corner.small",
-  "md.comp.suggestion-chip.container.surface-tint-layer.color": "surfaceTint",
   "md.comp.suggestion-chip.disabled.label-text.color": "onSurface",
   "md.comp.suggestion-chip.disabled.label-text.opacity": 0.38,
   "md.comp.suggestion-chip.dragged.container.elevation": "md.sys.elevation.level4",
   "md.comp.suggestion-chip.dragged.label-text.color": "onSurfaceVariant",
   "md.comp.suggestion-chip.dragged.state-layer.color": "onSurfaceVariant",
   "md.comp.suggestion-chip.dragged.state-layer.opacity": "md.sys.state.dragged.state-layer-opacity",
-  "md.comp.suggestion-chip.elevated.container.color": "surface",
+  "md.comp.suggestion-chip.elevated.container.color": "surfaceContainerLow",
   "md.comp.suggestion-chip.elevated.container.elevation": "md.sys.elevation.level1",
   "md.comp.suggestion-chip.elevated.container.shadow-color": "shadow",
   "md.comp.suggestion-chip.elevated.disabled.container.color": "onSurface",
@@ -25,6 +24,9 @@
   "md.comp.suggestion-chip.flat.focus.outline.color": "onSurfaceVariant",
   "md.comp.suggestion-chip.flat.outline.color": "outline",
   "md.comp.suggestion-chip.flat.outline.width": 1.0,
+  "md.comp.suggestion-chip.focus.indicator.color": "secondary",
+  "md.comp.suggestion-chip.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.suggestion-chip.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.suggestion-chip.focus.label-text.color": "onSurfaceVariant",
   "md.comp.suggestion-chip.focus.state-layer.color": "onSurfaceVariant",
   "md.comp.suggestion-chip.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",

dev/tools/gen_defaults/data/color_dark.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
-  "md.sys.color.background": "md.ref.palette.neutral10",
+  "md.sys.color.background": "md.ref.palette.neutral6",
   "md.sys.color.error": "md.ref.palette.error80",
   "md.sys.color.error-container": "md.ref.palette.error30",
   "md.sys.color.inverse-on-surface": "md.ref.palette.neutral20",
@@ -36,7 +36,7 @@
   "md.sys.color.secondary-fixed": "md.ref.palette.secondary90",
   "md.sys.color.secondary-fixed-dim": "md.ref.palette.secondary80",
   "md.sys.color.shadow": "md.ref.palette.neutral0",
-  "md.sys.color.surface": "md.ref.palette.neutral10",
+  "md.sys.color.surface": "md.ref.palette.neutral6",
   "md.sys.color.surface-bright": "md.ref.palette.neutral24",
   "md.sys.color.surface-container": "md.ref.palette.neutral12",
   "md.sys.color.surface-container-high": "md.ref.palette.neutral17",

dev/tools/gen_defaults/data/color_light.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
-  "md.sys.color.background": "md.ref.palette.neutral99",
+  "md.sys.color.background": "md.ref.palette.neutral98",
   "md.sys.color.error": "md.ref.palette.error40",
   "md.sys.color.error-container": "md.ref.palette.error90",
   "md.sys.color.inverse-on-surface": "md.ref.palette.neutral95",
@@ -36,7 +36,7 @@
   "md.sys.color.secondary-fixed": "md.ref.palette.secondary90",
   "md.sys.color.secondary-fixed-dim": "md.ref.palette.secondary80",
   "md.sys.color.shadow": "md.ref.palette.neutral0",
-  "md.sys.color.surface": "md.ref.palette.neutral99",
+  "md.sys.color.surface": "md.ref.palette.neutral98",
   "md.sys.color.surface-bright": "md.ref.palette.neutral98",
   "md.sys.color.surface-container": "md.ref.palette.neutral94",
   "md.sys.color.surface-container-high": "md.ref.palette.neutral92",

dev/tools/gen_defaults/data/date_picker_docked.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
-  "md.comp.date-picker.docked.container.color": "surface",
+  "md.comp.date-picker.docked.container.color": "surfaceContainerHigh",
   "md.comp.date-picker.docked.container.elevation": "md.sys.elevation.level3",
   "md.comp.date-picker.docked.container.height": 456.0,
   "md.comp.date-picker.docked.container.shape": "md.sys.shape.corner.large",
-  "md.comp.date-picker.docked.container.surface-tint-layer.color": "surfaceTint",
   "md.comp.date-picker.docked.container.width": 360.0,
   "md.comp.date-picker.docked.date.container.height": 48.0,
   "md.comp.date-picker.docked.date.container.shape": "md.sys.shape.corner.full",

dev/tools/gen_defaults/data/date_picker_input_modal.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
-  "md.comp.date-input.modal.container.color": "surface",
+  "md.comp.date-input.modal.container.color": "surfaceContainerHigh",
   "md.comp.date-input.modal.container.elevation": "md.sys.elevation.level3",
   "md.comp.date-input.modal.container.height": 512.0,
   "md.comp.date-input.modal.container.shape": "md.sys.shape.corner.extra-large",
-  "md.comp.date-input.modal.container.surface-tint-layer.color": "surfaceTint",
   "md.comp.date-input.modal.container.width": 328.0,
   "md.comp.date-input.modal.header.container.height": 120.0,
   "md.comp.date-input.modal.header.container.width": 328.0,

dev/tools/gen_defaults/data/date_picker_modal.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
-  "md.comp.date-picker.modal.container.color": "surface",
+  "md.comp.date-picker.modal.container.color": "surfaceContainerHigh",
   "md.comp.date-picker.modal.container.elevation": "md.sys.elevation.level3",
   "md.comp.date-picker.modal.container.height": 568.0,
   "md.comp.date-picker.modal.container.shape": "md.sys.shape.corner.extra-large",
-  "md.comp.date-picker.modal.container.surface-tint-layer.color": "surfaceTint",
   "md.comp.date-picker.modal.container.width": 360.0,
   "md.comp.date-picker.modal.date.container.height": 40.0,
   "md.comp.date-picker.modal.date.container.shape": "md.sys.shape.corner.full",

dev/tools/gen_defaults/data/dialog.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.dialog.action.focus.label-text.color": "primary",
   "md.comp.dialog.action.focus.state-layer.color": "primary",
@@ -12,10 +12,9 @@
   "md.comp.dialog.action.pressed.label-text.color": "primary",
   "md.comp.dialog.action.pressed.state-layer.color": "primary",
   "md.comp.dialog.action.pressed.state-layer.opacity": "md.sys.state.pressed.state-layer-opacity",
-  "md.comp.dialog.container.color": "surface",
+  "md.comp.dialog.container.color": "surfaceContainerHigh",
   "md.comp.dialog.container.elevation": "md.sys.elevation.level3",
   "md.comp.dialog.container.shape": "md.sys.shape.corner.extra-large",
-  "md.comp.dialog.container.surface-tint-layer.color": "surfaceTint",
   "md.comp.dialog.headline.color": "onSurface",
   "md.comp.dialog.headline.text-style": "headlineSmall",
   "md.comp.dialog.supporting-text.color": "onSurfaceVariant",

dev/tools/gen_defaults/data/dialog_fullscreen.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.full-screen-dialog.container.color": "surface",
   "md.comp.full-screen-dialog.container.elevation": "md.sys.elevation.level0",
@@ -18,10 +18,10 @@
   "md.comp.full-screen-dialog.header.container.color": "surface",
   "md.comp.full-screen-dialog.header.container.elevation": "md.sys.elevation.level0",
   "md.comp.full-screen-dialog.header.container.height": 56.0,
-  "md.comp.full-screen-dialog.header.container.surface-tint-layer.color": "surfaceTint",
   "md.comp.full-screen-dialog.header.headline.color": "onSurface",
   "md.comp.full-screen-dialog.header.headline.text-style": "titleLarge",
   "md.comp.full-screen-dialog.header.icon.color": "onSurface",
   "md.comp.full-screen-dialog.header.icon.size": 24.0,
+  "md.comp.full-screen-dialog.header.on-scroll.container.color": "surfaceContainer",
   "md.comp.full-screen-dialog.header.on-scroll.container.elevation": "md.sys.elevation.level2"
 }

dev/tools/gen_defaults/data/divider.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.divider.color": "outlineVariant",
   "md.comp.divider.thickness": 1.0

dev/tools/gen_defaults/data/elevation.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.sys.elevation.level0": 0.0,
   "md.sys.elevation.level1": 1.0,

dev/tools/gen_defaults/data/fab_extended_primary.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.extended-fab.primary.container.color": "primaryContainer",
   "md.comp.extended-fab.primary.container.elevation": "md.sys.elevation.level3",
@@ -8,6 +8,9 @@
   "md.comp.extended-fab.primary.container.shape": "md.sys.shape.corner.large",
   "md.comp.extended-fab.primary.focus.container.elevation": "md.sys.elevation.level3",
   "md.comp.extended-fab.primary.focus.icon.color": "onPrimaryContainer",
+  "md.comp.extended-fab.primary.focus.indicator.color": "secondary",
+  "md.comp.extended-fab.primary.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.extended-fab.primary.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.extended-fab.primary.focus.label-text.color": "onPrimaryContainer",
   "md.comp.extended-fab.primary.focus.state-layer.color": "onPrimaryContainer",
   "md.comp.extended-fab.primary.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",

dev/tools/gen_defaults/data/fab_large_primary.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.fab.primary.large.container.color": "primaryContainer",
   "md.comp.fab.primary.large.container.elevation": "md.sys.elevation.level3",
@@ -9,6 +9,9 @@
   "md.comp.fab.primary.large.container.width": 96.0,
   "md.comp.fab.primary.large.focus.container.elevation": "md.sys.elevation.level3",
   "md.comp.fab.primary.large.focus.icon.color": "onPrimaryContainer",
+  "md.comp.fab.primary.large.focus.indicator.color": "secondary",
+  "md.comp.fab.primary.large.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.fab.primary.large.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.fab.primary.large.focus.state-layer.color": "onPrimaryContainer",
   "md.comp.fab.primary.large.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
   "md.comp.fab.primary.large.hover.container.elevation": "md.sys.elevation.level4",

dev/tools/gen_defaults/data/fab_primary.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.fab.primary.container.color": "primaryContainer",
   "md.comp.fab.primary.container.elevation": "md.sys.elevation.level3",
@@ -9,6 +9,9 @@
   "md.comp.fab.primary.container.width": 56.0,
   "md.comp.fab.primary.focus.container.elevation": "md.sys.elevation.level3",
   "md.comp.fab.primary.focus.icon.color": "onPrimaryContainer",
+  "md.comp.fab.primary.focus.indicator.color": "secondary",
+  "md.comp.fab.primary.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.fab.primary.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.fab.primary.focus.state-layer.color": "onPrimaryContainer",
   "md.comp.fab.primary.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
   "md.comp.fab.primary.hover.container.elevation": "md.sys.elevation.level4",

dev/tools/gen_defaults/data/fab_small_primary.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.fab.primary.small.container.color": "primaryContainer",
   "md.comp.fab.primary.small.container.elevation": "md.sys.elevation.level3",
@@ -9,6 +9,9 @@
   "md.comp.fab.primary.small.container.width": 40.0,
   "md.comp.fab.primary.small.focus.container.elevation": "md.sys.elevation.level3",
   "md.comp.fab.primary.small.focus.icon.color": "onPrimaryContainer",
+  "md.comp.fab.primary.small.focus.indicator.color": "secondary",
+  "md.comp.fab.primary.small.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.fab.primary.small.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.fab.primary.small.focus.state-layer.color": "onPrimaryContainer",
   "md.comp.fab.primary.small.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
   "md.comp.fab.primary.small.hover.container.elevation": "md.sys.elevation.level4",

dev/tools/gen_defaults/data/icon_button.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.icon-button.disabled.icon.color": "onSurface",
   "md.comp.icon-button.disabled.icon.opacity": 0.38,
+  "md.comp.icon-button.focus.indicator.color": "secondary",
+  "md.comp.icon-button.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.icon-button.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.icon-button.icon.size": 24.0,
   "md.comp.icon-button.selected.focus.icon.color": "primary",
   "md.comp.icon-button.selected.focus.state-layer.color": "primary",
@@ -14,8 +17,9 @@
   "md.comp.icon-button.selected.pressed.icon.color": "primary",
   "md.comp.icon-button.selected.pressed.state-layer.color": "primary",
   "md.comp.icon-button.selected.pressed.state-layer.opacity": "md.sys.state.pressed.state-layer-opacity",
+  "md.comp.icon-button.state-layer.height": 40.0,
   "md.comp.icon-button.state-layer.shape": "md.sys.shape.corner.full",
-  "md.comp.icon-button.state-layer.size": 40.0,
+  "md.comp.icon-button.state-layer.width": 40.0,
   "md.comp.icon-button.unselected.focus.icon.color": "onSurfaceVariant",
   "md.comp.icon-button.unselected.focus.state-layer.color": "onSurfaceVariant",
   "md.comp.icon-button.unselected.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",

dev/tools/gen_defaults/data/icon_button_filled.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.filled-icon-button.container.color": "primary",
+  "md.comp.filled-icon-button.container.height": 40.0,
   "md.comp.filled-icon-button.container.shape": "md.sys.shape.corner.full",
-  "md.comp.filled-icon-button.container.size": 40.0,
+  "md.comp.filled-icon-button.container.width": 40.0,
   "md.comp.filled-icon-button.disabled.container.color": "onSurface",
   "md.comp.filled-icon-button.disabled.container.opacity": 0.12,
   "md.comp.filled-icon-button.disabled.icon.color": "onSurface",
   "md.comp.filled-icon-button.disabled.icon.opacity": 0.38,
   "md.comp.filled-icon-button.focus.icon.color": "onPrimary",
+  "md.comp.filled-icon-button.focus.indicator.color": "secondary",
+  "md.comp.filled-icon-button.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.filled-icon-button.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.filled-icon-button.focus.state-layer.color": "onPrimary",
   "md.comp.filled-icon-button.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
   "md.comp.filled-icon-button.hover.icon.color": "onPrimary",
@@ -34,5 +38,5 @@
   "md.comp.filled-icon-button.toggle.unselected.icon.color": "primary",
   "md.comp.filled-icon-button.toggle.unselected.pressed.icon.color": "primary",
   "md.comp.filled-icon-button.toggle.unselected.pressed.state-layer.color": "primary",
-  "md.comp.filled-icon-button.unselected.container.color": "surfaceVariant"
+  "md.comp.filled-icon-button.unselected.container.color": "surfaceContainerHighest"
 }

dev/tools/gen_defaults/data/icon_button_filled_tonal.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.filled-tonal-icon-button.container.color": "secondaryContainer",
+  "md.comp.filled-tonal-icon-button.container.height": 40.0,
   "md.comp.filled-tonal-icon-button.container.shape": "md.sys.shape.corner.full",
-  "md.comp.filled-tonal-icon-button.container.size": 40.0,
+  "md.comp.filled-tonal-icon-button.container.width": 40.0,
   "md.comp.filled-tonal-icon-button.disabled.container.color": "onSurface",
   "md.comp.filled-tonal-icon-button.disabled.container.opacity": 0.12,
   "md.comp.filled-tonal-icon-button.disabled.icon.color": "onSurface",
   "md.comp.filled-tonal-icon-button.disabled.icon.opacity": 0.38,
   "md.comp.filled-tonal-icon-button.focus.icon.color": "onSecondaryContainer",
+  "md.comp.filled-tonal-icon-button.focus.indicator.color": "secondary",
+  "md.comp.filled-tonal-icon-button.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.filled-tonal-icon-button.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.filled-tonal-icon-button.focus.state-layer.color": "onSecondaryContainer",
   "md.comp.filled-tonal-icon-button.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
   "md.comp.filled-tonal-icon-button.hover.icon.color": "onSecondaryContainer",
@@ -34,5 +38,5 @@
   "md.comp.filled-tonal-icon-button.toggle.unselected.icon.color": "onSurfaceVariant",
   "md.comp.filled-tonal-icon-button.toggle.unselected.pressed.icon.color": "onSurfaceVariant",
   "md.comp.filled-tonal-icon-button.toggle.unselected.pressed.state-layer.color": "onSurfaceVariant",
-  "md.comp.filled-tonal-icon-button.unselected.container.color": "surfaceVariant"
+  "md.comp.filled-tonal-icon-button.unselected.container.color": "surfaceContainerHighest"
 }

dev/tools/gen_defaults/data/icon_button_outlined.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
+  "md.comp.outlined-icon-button.container.height": 40.0,
   "md.comp.outlined-icon-button.container.shape": "md.sys.shape.corner.full",
-  "md.comp.outlined-icon-button.container.size": 40.0,
+  "md.comp.outlined-icon-button.container.width": 40.0,
   "md.comp.outlined-icon-button.disabled.icon.color": "onSurface",
   "md.comp.outlined-icon-button.disabled.icon.opacity": 0.38,
   "md.comp.outlined-icon-button.disabled.selected.container.color": "onSurface",
   "md.comp.outlined-icon-button.disabled.selected.container.opacity": 0.12,
   "md.comp.outlined-icon-button.disabled.unselected.outline.color": "onSurface",
   "md.comp.outlined-icon-button.disabled.unselected.outline.opacity": 0.12,
+  "md.comp.outlined-icon-button.focus.indicator.color": "secondary",
+  "md.comp.outlined-icon-button.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.outlined-icon-button.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.outlined-icon-button.focus.state-layer.opacity": "md.sys.state.hover.state-layer-opacity",
   "md.comp.outlined-icon-button.hover.state-layer.opacity": "md.sys.state.hover.state-layer-opacity",
   "md.comp.outlined-icon-button.icon.size": 24.0,

dev/tools/gen_defaults/data/list.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
+  "md.comp.list.divider.leading-space": 16.0,
+  "md.comp.list.divider.trailing-space": 16.0,
+  "md.comp.list.focus.indicator.color": "secondary",
+  "md.comp.list.focus.indicator.outline.offset": "md.sys.state.focus-indicator.inner-offset",
+  "md.comp.list.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.list.list-item.container.color": "surface",
   "md.comp.list.list-item.container.elevation": "md.sys.elevation.level0",
   "md.comp.list.list-item.container.shape": "md.sys.shape.corner.none",
@@ -37,10 +42,11 @@
   "md.comp.list.list-item.leading-avatar.shape": "md.sys.shape.corner.full",
   "md.comp.list.list-item.leading-avatar.size": 40.0,
   "md.comp.list.list-item.leading-icon.color": "onSurfaceVariant",
-  "md.comp.list.list-item.leading-icon.size": 18.0,
+  "md.comp.list.list-item.leading-icon.size": 24.0,
   "md.comp.list.list-item.leading-image.height": 56.0,
   "md.comp.list.list-item.leading-image.shape": "md.sys.shape.corner.none",
   "md.comp.list.list-item.leading-image.width": 56.0,
+  "md.comp.list.list-item.leading-space": 16.0,
   "md.comp.list.list-item.leading-video.shape": "md.sys.shape.corner.none",
   "md.comp.list.list-item.leading-video.width": 100.0,
   "md.comp.list.list-item.one-line.container.height": 56.0,
@@ -58,6 +64,7 @@
   "md.comp.list.list-item.three-line.container.height": 88.0,
   "md.comp.list.list-item.trailing-icon.color": "onSurfaceVariant",
   "md.comp.list.list-item.trailing-icon.size": 24.0,
+  "md.comp.list.list-item.trailing-space": 16.0,
   "md.comp.list.list-item.trailing-supporting-text.color": "onSurfaceVariant",
   "md.comp.list.list-item.trailing-supporting-text.text-style": "labelSmall",
   "md.comp.list.list-item.two-line.container.height": 72.0,

dev/tools/gen_defaults/data/menu.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
-  "md.comp.menu.container.color": "surface",
+  "md.comp.menu.container.color": "surfaceContainer",
   "md.comp.menu.container.elevation": "md.sys.elevation.level2",
   "md.comp.menu.container.shadow-color": "shadow",
   "md.comp.menu.container.shape": "md.sys.shape.corner.extra-small",
-  "md.comp.menu.container.surface-tint-layer.color": "surfaceTint",
-  "md.comp.menu.list-item.selected.container.color": "surfaceVariant"
+  "md.comp.menu.focus.indicator.color": "secondary",
+  "md.comp.menu.focus.indicator.outline.offset": "md.sys.state.focus-indicator.inner-offset",
+  "md.comp.menu.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
+  "md.comp.menu.list-item.selected.container.color": "secondaryContainer",
+  "md.comp.menu.list-item.selected.label-text.color": "onSecondaryContainer",
+  "md.comp.menu.list-item.selected.with-leading-icon.trailing-icon.color": "onSecondaryContainer",
+  "md.comp.menu.menu-list-item-with-leading-icon-icon-color": "onSecondaryContainer"
 }

dev/tools/gen_defaults/data/motion.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.sys.motion.duration.extra-long1Ms": 700.0,
   "md.sys.motion.duration.extra-long2Ms": 800.0,

dev/tools/gen_defaults/data/navigation_bar.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.navigation-bar.active.focus.icon.color": "onSecondaryContainer",
   "md.comp.navigation-bar.active.focus.label-text.color": "onSurface",
@@ -16,11 +16,13 @@
   "md.comp.navigation-bar.active.pressed.icon.color": "onSecondaryContainer",
   "md.comp.navigation-bar.active.pressed.label-text.color": "onSurface",
   "md.comp.navigation-bar.active.pressed.state-layer.color": "onSurface",
-  "md.comp.navigation-bar.container.color": "surface",
+  "md.comp.navigation-bar.container.color": "surfaceContainer",
   "md.comp.navigation-bar.container.elevation": "md.sys.elevation.level2",
   "md.comp.navigation-bar.container.height": 80.0,
   "md.comp.navigation-bar.container.shape": "md.sys.shape.corner.none",
-  "md.comp.navigation-bar.container.surface-tint-layer.color": "surfaceTint",
+  "md.comp.navigation-bar.focus.indicator.color": "secondary",
+  "md.comp.navigation-bar.focus.indicator.outline.offset": "md.sys.state.focus-indicator.inner-offset",
+  "md.comp.navigation-bar.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.navigation-bar.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
   "md.comp.navigation-bar.hover.state-layer.opacity": "md.sys.state.hover.state-layer-opacity",
   "md.comp.navigation-bar.icon.size": 24.0,

dev/tools/gen_defaults/data/navigation_drawer.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.navigation-drawer.active.focus.icon.color": "onSecondaryContainer",
   "md.comp.navigation-drawer.active.focus.label-text.color": "onSecondaryContainer",
@@ -17,11 +17,12 @@
   "md.comp.navigation-drawer.active.pressed.label-text.color": "onSecondaryContainer",
   "md.comp.navigation-drawer.active.pressed.state-layer.color": "onSecondaryContainer",
   "md.comp.navigation-drawer.bottom.container.shape": "md.sys.shape.corner.large.top",
-  "md.comp.navigation-drawer.container.color": "surface",
   "md.comp.navigation-drawer.container.height": 100.0,
   "md.comp.navigation-drawer.container.shape": "md.sys.shape.corner.large.end",
-  "md.comp.navigation-drawer.container.surface-tint-layer.color": "surfaceTint",
   "md.comp.navigation-drawer.container.width": 360.0,
+  "md.comp.navigation-drawer.focus.indicator.color": "secondary",
+  "md.comp.navigation-drawer.focus.indicator.outline.offset": "md.sys.state.focus-indicator.inner-offset",
+  "md.comp.navigation-drawer.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.navigation-drawer.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
   "md.comp.navigation-drawer.headline.color": "onSurfaceVariant",
   "md.comp.navigation-drawer.headline.text-style": "titleSmall",
@@ -41,7 +42,9 @@
   "md.comp.navigation-drawer.label-text.text-style": "labelLarge",
   "md.comp.navigation-drawer.large-badge-label.color": "onSurfaceVariant",
   "md.comp.navigation-drawer.large-badge-label.text-style": "labelLarge",
+  "md.comp.navigation-drawer.modal.container.color": "surfaceContainerLow",
   "md.comp.navigation-drawer.modal.container.elevation": "md.sys.elevation.level1",
   "md.comp.navigation-drawer.pressed.state-layer.opacity": "md.sys.state.pressed.state-layer-opacity",
+  "md.comp.navigation-drawer.standard.container.color": "surface",
   "md.comp.navigation-drawer.standard.container.elevation": "md.sys.elevation.level0"
 }

dev/tools/gen_defaults/data/navigation_rail.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.navigation-rail.active.focus.icon.color": "onSecondaryContainer",
   "md.comp.navigation-rail.active.focus.label-text.color": "onSurface",
@@ -35,17 +35,6 @@
   "md.comp.navigation-rail.inactive.pressed.label-text.color": "onSurface",
   "md.comp.navigation-rail.inactive.pressed.state-layer.color": "onSurface",
   "md.comp.navigation-rail.label-text.text-style": "labelMedium",
-  "md.comp.navigation-rail.menu.focus.icon.color": "onSurface",
-  "md.comp.navigation-rail.menu.focus.state-layer.color": "onSurface",
-  "md.comp.navigation-rail.menu.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
-  "md.comp.navigation-rail.menu.hover.icon.color": "onSurface",
-  "md.comp.navigation-rail.menu.hover.state-layer.color": "onSurface",
-  "md.comp.navigation-rail.menu.hover.state-layer.opacity": "md.sys.state.hover.state-layer-opacity",
-  "md.comp.navigation-rail.menu.icon.color": "onSurfaceVariant",
-  "md.comp.navigation-rail.menu.icon.size": 24.0,
-  "md.comp.navigation-rail.menu.pressed.icon.color": "onSurface",
-  "md.comp.navigation-rail.menu.pressed.state-layer.color": "onSurface",
-  "md.comp.navigation-rail.menu.pressed.state-layer.opacity": "md.sys.state.pressed.state-layer-opacity",
   "md.comp.navigation-rail.no-label.active-indicator.height": 56.0,
   "md.comp.navigation-rail.no-label.active-indicator.shape": "md.sys.shape.corner.full",
   "md.comp.navigation-rail.pressed.state-layer.opacity": "md.sys.state.pressed.state-layer-opacity"

dev/tools/gen_defaults/data/navigation_tab_primary.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.primary-navigation-tab.active.focus.state-layer.color": "primary",
   "md.comp.primary-navigation-tab.active.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
@@ -13,8 +13,9 @@
   "md.comp.primary-navigation-tab.container.elevation": "md.sys.elevation.level0",
   "md.comp.primary-navigation-tab.container.height": 48.0,
   "md.comp.primary-navigation-tab.container.shape": "md.sys.shape.corner.none",
-  "md.comp.primary-navigation-tab.divider.color": "surfaceVariant",
-  "md.comp.primary-navigation-tab.divider.height": 1.0,
+  "md.comp.primary-navigation-tab.focus.indicator.color": "secondary",
+  "md.comp.primary-navigation-tab.focus.indicator.outline.offset": "md.sys.state.focus-indicator.inner-offset",
+  "md.comp.primary-navigation-tab.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.primary-navigation-tab.inactive.focus.state-layer.color": "onSurface",
   "md.comp.primary-navigation-tab.inactive.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
   "md.comp.primary-navigation-tab.inactive.hover.state-layer.color": "onSurface",

dev/tools/gen_defaults/data/navigation_tab_secondary.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
+  "md.comp.secondary-navigation-tab.active-indicator.color": "primary",
+  "md.comp.secondary-navigation-tab.active-indicator.height": 2.0,
   "md.comp.secondary-navigation-tab.active.label-text.color": "onSurface",
   "md.comp.secondary-navigation-tab.container.color": "surface",
   "md.comp.secondary-navigation-tab.container.elevation": "md.sys.elevation.level0",
   "md.comp.secondary-navigation-tab.container.height": 48.0,
   "md.comp.secondary-navigation-tab.container.shadow-color": "shadow",
   "md.comp.secondary-navigation-tab.container.shape": "md.sys.shape.corner.none",
-  "md.comp.secondary-navigation-tab.divider.color": "surfaceVariant",
-  "md.comp.secondary-navigation-tab.divider.height": 1.0,
+  "md.comp.secondary-navigation-tab.focus.indicator.color": "secondary",
+  "md.comp.secondary-navigation-tab.focus.indicator.outline.offset": "md.sys.state.focus-indicator.inner-offset",
+  "md.comp.secondary-navigation-tab.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.secondary-navigation-tab.focus.label-text.color": "onSurface",
   "md.comp.secondary-navigation-tab.focus.state-layer.color": "onSurface",
   "md.comp.secondary-navigation-tab.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",

dev/tools/gen_defaults/data/palette.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.ref.palette.black": "0xFF000000",
   "md.ref.palette.error0": "0xFF000000",
@@ -16,29 +16,29 @@
   "md.ref.palette.error95": "0xFFFCEEEE",
   "md.ref.palette.error99": "0xFFFFFBF9",
   "md.ref.palette.neutral0": "0xFF000000",
-  "md.ref.palette.neutral10": "0xFF1C1B1F",
+  "md.ref.palette.neutral10": "0xFF1D1B20",
   "md.ref.palette.neutral100": "0xFFFFFFFF",
-  "md.ref.palette.neutral12": "0xFF201F23",
-  "md.ref.palette.neutral17": "0xFF2B292D",
-  "md.ref.palette.neutral20": "0xFF313033",
-  "md.ref.palette.neutral22": "0xFF313033",
-  "md.ref.palette.neutral24": "0xFF313033",
-  "md.ref.palette.neutral30": "0xFF484649",
-  "md.ref.palette.neutral4": "0xFF0E0E11",
-  "md.ref.palette.neutral40": "0xFF605D62",
-  "md.ref.palette.neutral50": "0xFF787579",
-  "md.ref.palette.neutral6": "0xFF141317",
-  "md.ref.palette.neutral60": "0xFF939094",
-  "md.ref.palette.neutral70": "0xFFAEAAAE",
-  "md.ref.palette.neutral80": "0xFFC9C5CA",
-  "md.ref.palette.neutral87": "0xFFDDD8DD",
-  "md.ref.palette.neutral90": "0xFFE6E1E5",
-  "md.ref.palette.neutral92": "0xFFECE7EC",
-  "md.ref.palette.neutral94": "0xFFF1ECF1",
-  "md.ref.palette.neutral95": "0xFFF4EFF4",
-  "md.ref.palette.neutral96": "0xFFF7F2F7",
-  "md.ref.palette.neutral98": "0xFFFDF8FD",
-  "md.ref.palette.neutral99": "0xFFFFFBFE",
+  "md.ref.palette.neutral12": "0xFF211F26",
+  "md.ref.palette.neutral17": "0xFF2B2930",
+  "md.ref.palette.neutral20": "0xFF322F35",
+  "md.ref.palette.neutral22": "0xFF36343B",
+  "md.ref.palette.neutral24": "0xFF3B383E",
+  "md.ref.palette.neutral30": "0xFF48464C",
+  "md.ref.palette.neutral4": "0xFF0F0D13",
+  "md.ref.palette.neutral40": "0xFF605D64",
+  "md.ref.palette.neutral50": "0xFF79767D",
+  "md.ref.palette.neutral6": "0xFF141218",
+  "md.ref.palette.neutral60": "0xFF938F96",
+  "md.ref.palette.neutral70": "0xFFAEA9B1",
+  "md.ref.palette.neutral80": "0xFFCAC5CD",
+  "md.ref.palette.neutral87": "0xFFDED8E1",
+  "md.ref.palette.neutral90": "0xFFE6E0E9",
+  "md.ref.palette.neutral92": "0xFFECE6F0",
+  "md.ref.palette.neutral94": "0xFFF3EDF7",
+  "md.ref.palette.neutral95": "0xFFF5EFF7",
+  "md.ref.palette.neutral96": "0xFFF7F2FA",
+  "md.ref.palette.neutral98": "0xFFFEF7FF",
+  "md.ref.palette.neutral99": "0xFFFFFBFF",
   "md.ref.palette.neutral-variant0": "0xFF000000",
   "md.ref.palette.neutral-variant10": "0xFF1D1A22",
   "md.ref.palette.neutral-variant100": "0xFFFFFFFF",

dev/tools/gen_defaults/data/progress_indicator_circular.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.circular-progress-indicator.active-indicator.color": "primary",
   "md.comp.circular-progress-indicator.active-indicator.shape": "md.sys.shape.corner.none",

dev/tools/gen_defaults/data/progress_indicator_linear.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.linear-progress-indicator.active-indicator.color": "primary",
   "md.comp.linear-progress-indicator.active-indicator.height": 4.0,
@@ -8,7 +8,7 @@
   "md.comp.linear-progress-indicator.four-color.active-indicator.one.color": "primary",
   "md.comp.linear-progress-indicator.four-color.active-indicator.three.color": "tertiary",
   "md.comp.linear-progress-indicator.four-color.active-indicator.two.color": "primaryContainer",
-  "md.comp.linear-progress-indicator.track.color": "surfaceVariant",
+  "md.comp.linear-progress-indicator.track.color": "surfaceContainerHighest",
   "md.comp.linear-progress-indicator.track.height": 4.0,
   "md.comp.linear-progress-indicator.track.shape": "md.sys.shape.corner.none"
 }

dev/tools/gen_defaults/data/radio_button.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.radio-button.disabled.selected.icon.color": "onSurface",
   "md.comp.radio-button.disabled.selected.icon.opacity": 0.38,

dev/tools/gen_defaults/data/search_bar.json

 {
-  "version": "v0_158",
+  "version": "v0_206",
 
   "md.comp.search-bar.avatar.shape": "md.sys.shape.corner.full",
   "md.comp.search-bar.avatar.size": 30.0,
-  "md.comp.search-bar.container.color": "surface",
+  "md.comp.search-bar.container.color": "surfaceContainerHigh",
   "md.comp.search-bar.container.elevation": "md.sys.elevation.level3",
   "md.comp.search-bar.container.height": 56.0,
   "md.comp.search-bar.container.shape": "md.sys.shape.corner.full",
-  "md.comp.search-bar.container.surface-tint-layer.color": "surfaceTint",
+  "md.comp.search-bar.focus.indicator.color": "secondary",
+  "md.comp.search-bar.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.search-bar.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.search-bar.hover.state-layer.color": "onSurface",
   "md.comp.search-bar.hover.state-layer.opacity": "md.sys.state.hover.state-layer-opacity",
   "md.comp.search-bar.hover.supporting-text.color": "onSurfaceVariant",

dev/tools/gen_defaults/data/search_view.json

 {
-  "version": "v0_158",
+  "version": "v0_206",
 
-  "md.comp.search-view.container.color": "surface",
+  "md.comp.search-view.container.color": "surfaceContainerHigh",
   "md.comp.search-view.container.elevation": "md.sys.elevation.level3",
-  "md.comp.search-view.container.surface-tint-layer.color": "surfaceTint",
   "md.comp.search-view.divider.color": "outline",
   "md.comp.search-view.docked.container.shape": "md.sys.shape.corner.extra-large",
   "md.comp.search-view.docked.header.container.height": 56.0,

dev/tools/gen_defaults/data/segmented_button_outlined.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.outlined-segmented-button.container.height": 40.0,
   "md.comp.outlined-segmented-button.disabled.icon.color": "onSurface",
@@ -8,6 +8,9 @@
   "md.comp.outlined-segmented-button.disabled.label-text.opacity": 0.38,
   "md.comp.outlined-segmented-button.disabled.outline.color": "onSurface",
   "md.comp.outlined-segmented-button.disabled.outline.opacity": 0.12,
+  "md.comp.outlined-segmented-button.focus.indicator.color": "secondary",
+  "md.comp.outlined-segmented-button.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.outlined-segmented-button.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.outlined-segmented-button.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
   "md.comp.outlined-segmented-button.hover.state-layer.opacity": "md.sys.state.hover.state-layer-opacity",
   "md.comp.outlined-segmented-button.label-text.text-style": "labelLarge",

dev/tools/gen_defaults/data/shape.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.sys.shape.corner.extra-large": {
     "family": "SHAPE_FAMILY_ROUNDED_CORNERS",

dev/tools/gen_defaults/data/sheet_bottom.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
-  "md.comp.sheet.bottom.docked.container.color": "surface",
+  "md.comp.sheet.bottom.docked.container.color": "surfaceContainerLow",
   "md.comp.sheet.bottom.docked.container.shape": "md.sys.shape.corner.extra-large.top",
-  "md.comp.sheet.bottom.docked.container.surface-tint-layer.color": "surfaceTint",
   "md.comp.sheet.bottom.docked.drag-handle.color": "onSurfaceVariant",
   "md.comp.sheet.bottom.docked.drag-handle.height": 4.0,
-  "md.comp.sheet.bottom.docked.drag-handle.opacity": 0.4,
   "md.comp.sheet.bottom.docked.drag-handle.width": 32.0,
   "md.comp.sheet.bottom.docked.minimized.container.shape": "md.sys.shape.corner.none",
   "md.comp.sheet.bottom.docked.modal.container.elevation": "md.sys.elevation.level1",
-  "md.comp.sheet.bottom.docked.standard.container.elevation": "md.sys.elevation.level1"
+  "md.comp.sheet.bottom.docked.standard.container.elevation": "md.sys.elevation.level1",
+  "md.comp.sheet.bottom.focus.indicator.color": "secondary",
+  "md.comp.sheet.bottom.focus.indicator.outline.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.sheet.bottom.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness"
 }

dev/tools/gen_defaults/data/slider.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.slider.active.track.color": "primary",
   "md.comp.slider.active.track.height": 4.0,
@@ -23,7 +23,7 @@
   "md.comp.slider.hover.handle.color": "primary",
   "md.comp.slider.hover.state-layer.color": "primary",
   "md.comp.slider.hover.state-layer.opacity": "md.sys.state.hover.state-layer-opacity",
-  "md.comp.slider.inactive.track.color": "surfaceVariant",
+  "md.comp.slider.inactive.track.color": "surfaceContainerHighest",
   "md.comp.slider.inactive.track.height": 4.0,
   "md.comp.slider.inactive.track.shape": "md.sys.shape.corner.full",
   "md.comp.slider.label.container.color": "primary",

dev/tools/gen_defaults/data/snackbar.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.snackbar.action.focus.label-text.color": "inversePrimary",
   "md.comp.snackbar.action.focus.state-layer.color": "inversePrimary",

dev/tools/gen_defaults/data/state.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.sys.state.dragged.state-layer-opacity": 0.16,
-  "md.sys.state.focus.state-layer-opacity": 0.12,
+  "md.sys.state.focus.state-layer-opacity": 0.1,
   "md.sys.state.hover.state-layer-opacity": 0.08,
-  "md.sys.state.pressed.state-layer-opacity": 0.12
+  "md.sys.state.pressed.state-layer-opacity": 0.1
 }

dev/tools/gen_defaults/data/switch.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.switch.disabled.selected.handle.color": "surface",
   "md.comp.switch.disabled.selected.handle.opacity": 1.0,
@@ -9,10 +9,13 @@
   "md.comp.switch.disabled.track.opacity": 0.12,
   "md.comp.switch.disabled.unselected.handle.color": "onSurface",
   "md.comp.switch.disabled.unselected.handle.opacity": 0.38,
-  "md.comp.switch.disabled.unselected.icon.color": "surfaceVariant",
+  "md.comp.switch.disabled.unselected.icon.color": "surfaceContainerHighest",
   "md.comp.switch.disabled.unselected.icon.opacity": 0.38,
-  "md.comp.switch.disabled.unselected.track.color": "surfaceVariant",
+  "md.comp.switch.disabled.unselected.track.color": "surfaceContainerHighest",
   "md.comp.switch.disabled.unselected.track.outline.color": "onSurface",
+  "md.comp.switch.focus.indicator.color": "secondary",
+  "md.comp.switch.focus.indicator.offset": "md.sys.state.focus-indicator.outer-offset",
+  "md.comp.switch.focus.indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.switch.handle.shape": "md.sys.shape.corner.full",
   "md.comp.switch.pressed.handle.height": 28.0,
   "md.comp.switch.pressed.handle.width": 28.0,
@@ -44,29 +47,29 @@
   "md.comp.switch.track.shape": "md.sys.shape.corner.full",
   "md.comp.switch.track.width": 52.0,
   "md.comp.switch.unselected.focus.handle.color": "onSurfaceVariant",
-  "md.comp.switch.unselected.focus.icon.color": "surfaceVariant",
+  "md.comp.switch.unselected.focus.icon.color": "surfaceContainerHighest",
   "md.comp.switch.unselected.focus.state-layer.color": "onSurface",
   "md.comp.switch.unselected.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
-  "md.comp.switch.unselected.focus.track.color": "surfaceVariant",
+  "md.comp.switch.unselected.focus.track.color": "surfaceContainerHighest",
   "md.comp.switch.unselected.focus.track.outline.color": "outline",
   "md.comp.switch.unselected.handle.color": "outline",
   "md.comp.switch.unselected.handle.height": 16.0,
   "md.comp.switch.unselected.handle.width": 16.0,
   "md.comp.switch.unselected.hover.handle.color": "onSurfaceVariant",
-  "md.comp.switch.unselected.hover.icon.color": "surfaceVariant",
+  "md.comp.switch.unselected.hover.icon.color": "surfaceContainerHighest",
   "md.comp.switch.unselected.hover.state-layer.color": "onSurface",
   "md.comp.switch.unselected.hover.state-layer.opacity": "md.sys.state.hover.state-layer-opacity",
-  "md.comp.switch.unselected.hover.track.color": "surfaceVariant",
+  "md.comp.switch.unselected.hover.track.color": "surfaceContainerHighest",
   "md.comp.switch.unselected.hover.track.outline.color": "outline",
-  "md.comp.switch.unselected.icon.color": "surfaceVariant",
+  "md.comp.switch.unselected.icon.color": "surfaceContainerHighest",
   "md.comp.switch.unselected.icon.size": 16.0,
   "md.comp.switch.unselected.pressed.handle.color": "onSurfaceVariant",
-  "md.comp.switch.unselected.pressed.icon.color": "surfaceVariant",
+  "md.comp.switch.unselected.pressed.icon.color": "surfaceContainerHighest",
   "md.comp.switch.unselected.pressed.state-layer.color": "onSurface",
   "md.comp.switch.unselected.pressed.state-layer.opacity": "md.sys.state.pressed.state-layer-opacity",
-  "md.comp.switch.unselected.pressed.track.color": "surfaceVariant",
+  "md.comp.switch.unselected.pressed.track.color": "surfaceContainerHighest",
   "md.comp.switch.unselected.pressed.track.outline.color": "outline",
-  "md.comp.switch.unselected.track.color": "surfaceVariant",
+  "md.comp.switch.unselected.track.color": "surfaceContainerHighest",
   "md.comp.switch.unselected.track.outline.color": "outline",
   "md.comp.switch.with-icon.handle.height": 24.0,
   "md.comp.switch.with-icon.handle.width": 24.0

dev/tools/gen_defaults/data/text_field_filled.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.filled-text-field.active-indicator.color": "onSurfaceVariant",
   "md.comp.filled-text-field.active-indicator.height": 1.0,
   "md.comp.filled-text-field.caret.color": "primary",
-  "md.comp.filled-text-field.container.color": "surfaceVariant",
+  "md.comp.filled-text-field.container.color": "surfaceContainerHighest",
   "md.comp.filled-text-field.container.shape": "md.sys.shape.corner.extra-small.top",
   "md.comp.filled-text-field.disabled.active-indicator.color": "onSurface",
   "md.comp.filled-text-field.disabled.active-indicator.height": 1.0,
@@ -44,6 +44,7 @@
   "md.comp.filled-text-field.error.trailing-icon.color": "error",
   "md.comp.filled-text-field.focus.active-indicator.color": "primary",
   "md.comp.filled-text-field.focus.active-indicator.height": 2.0,
+  "md.comp.filled-text-field.focus.active-indicator.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.filled-text-field.focus.input-text.color": "onSurface",
   "md.comp.filled-text-field.focus.label-text.color": "primary",
   "md.comp.filled-text-field.focus.leading-icon.color": "onSurfaceVariant",

dev/tools/gen_defaults/data/text_field_outlined.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.outlined-text-field.caret.color": "primary",
   "md.comp.outlined-text-field.container.shape": "md.sys.shape.corner.extra-small",
@@ -17,6 +17,7 @@
   "md.comp.outlined-text-field.disabled.trailing-icon.color": "onSurface",
   "md.comp.outlined-text-field.disabled.trailing-icon.opacity": 0.38,
   "md.comp.outlined-text-field.error.focus.caret.color": "error",
+  "md.comp.outlined-text-field.error.focus.indicator.outline.color": "error",
   "md.comp.outlined-text-field.error.focus.input-text.color": "onSurface",
   "md.comp.outlined-text-field.error.focus.label-text.color": "error",
   "md.comp.outlined-text-field.error.focus.leading-icon.color": "onSurfaceVariant",
@@ -35,6 +36,8 @@
   "md.comp.outlined-text-field.error.outline.color": "error",
   "md.comp.outlined-text-field.error.supporting-text.color": "error",
   "md.comp.outlined-text-field.error.trailing-icon.color": "error",
+  "md.comp.outlined-text-field.focus.indicator.outline.color": "secondary",
+  "md.comp.outlined-text-field.focus.indicator.outline.thickness": "md.sys.state.focus-indicator.thickness",
   "md.comp.outlined-text-field.focus.input-text.color": "onSurface",
   "md.comp.outlined-text-field.focus.label-text.color": "primary",
   "md.comp.outlined-text-field.focus.leading-icon.color": "onSurfaceVariant",

dev/tools/gen_defaults/data/text_style.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.sys.typescale.body-large.font": "md.ref.typeface.plain",
   "md.sys.typescale.body-large.line-height": 24.0,

dev/tools/gen_defaults/data/time_picker.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
-  "md.comp.time-picker.clock-dial.color": "surfaceVariant",
+  "md.comp.time-picker.clock-dial.color": "surfaceContainerHighest",
   "md.comp.time-picker.clock-dial.container.size": 256.0,
   "md.comp.time-picker.clock-dial.label-text.text-style": "bodyLarge",
   "md.comp.time-picker.clock-dial.selected.label-text.color": "onPrimary",
@@ -15,7 +15,7 @@
   "md.comp.time-picker.clock-dial.selector.track.container.width": 2.0,
   "md.comp.time-picker.clock-dial.shape": "md.sys.shape.corner.full",
   "md.comp.time-picker.clock-dial.unselected.label-text.color": "onSurface",
-  "md.comp.time-picker.container.color": "surface",
+  "md.comp.time-picker.container.color": "surfaceContainerHigh",
   "md.comp.time-picker.container.elevation": "md.sys.elevation.level3",
   "md.comp.time-picker.container.shape": "md.sys.shape.corner.extra-large",
   "md.comp.time-picker.headline.color": "onSurfaceVariant",
@@ -46,7 +46,6 @@
   "md.comp.time-picker.period-selector.unselected.pressed.state-layer.color": "onSurfaceVariant",
   "md.comp.time-picker.period-selector.vertical.container.height": 80.0,
   "md.comp.time-picker.period-selector.vertical.container.width": 52.0,
-  "md.comp.time-picker.surface-tint-layer.color": "surfaceTint",
   "md.comp.time-picker.time-selector.24h-vertical.container.width": 114.0,
   "md.comp.time-picker.time-selector.container.height": 80.0,
   "md.comp.time-picker.time-selector.container.shape": "md.sys.shape.corner.small",
@@ -65,7 +64,7 @@
   "md.comp.time-picker.time-selector.selected.pressed.state-layer.color": "onPrimaryContainer",
   "md.comp.time-picker.time-selector.separator.color": "onSurface",
   "md.comp.time-picker.time-selector.separator.text-style": "displayLarge",
-  "md.comp.time-picker.time-selector.unselected.container.color": "surfaceVariant",
+  "md.comp.time-picker.time-selector.unselected.container.color": "surfaceContainerHighest",
   "md.comp.time-picker.time-selector.unselected.focus.label-text.color": "onSurface",
   "md.comp.time-picker.time-selector.unselected.focus.state-layer.color": "onSurface",
   "md.comp.time-picker.time-selector.unselected.hover.label-text.color": "onSurface",

dev/tools/gen_defaults/data/top_app_bar_large.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.top-app-bar.large.container.color": "surface",
   "md.comp.top-app-bar.large.container.elevation": "md.sys.elevation.level0",
   "md.comp.top-app-bar.large.container.height": 152.0,
   "md.comp.top-app-bar.large.container.shape": "md.sys.shape.corner.none",
-  "md.comp.top-app-bar.large.container.surface-tint-layer.color": "surfaceTint",
   "md.comp.top-app-bar.large.headline.color": "onSurface",
   "md.comp.top-app-bar.large.headline.text-style": "headlineMedium",
   "md.comp.top-app-bar.large.leading-icon.color": "onSurface",

dev/tools/gen_defaults/data/top_app_bar_medium.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.top-app-bar.medium.container.color": "surface",
   "md.comp.top-app-bar.medium.container.elevation": "md.sys.elevation.level0",
   "md.comp.top-app-bar.medium.container.height": 112.0,
   "md.comp.top-app-bar.medium.container.shape": "md.sys.shape.corner.none",
-  "md.comp.top-app-bar.medium.container.surface-tint-layer.color": "surfaceTint",
   "md.comp.top-app-bar.medium.headline.color": "onSurface",
   "md.comp.top-app-bar.medium.headline.text-style": "headlineSmall",
   "md.comp.top-app-bar.medium.leading-icon.color": "onSurface",

dev/tools/gen_defaults/data/top_app_bar_small.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.comp.top-app-bar.small.container.color": "surface",
   "md.comp.top-app-bar.small.container.elevation": "md.sys.elevation.level0",
   "md.comp.top-app-bar.small.container.height": 64.0,
   "md.comp.top-app-bar.small.container.shape": "md.sys.shape.corner.none",
-  "md.comp.top-app-bar.small.container.surface-tint-layer.color": "surfaceTint",
   "md.comp.top-app-bar.small.headline.color": "onSurface",
   "md.comp.top-app-bar.small.headline.text-style": "titleLarge",
   "md.comp.top-app-bar.small.leading-icon.color": "onSurface",
   "md.comp.top-app-bar.small.leading-icon.size": 24.0,
+  "md.comp.top-app-bar.small.on-scroll.container.color": "surfaceContainer",
   "md.comp.top-app-bar.small.on-scroll.container.elevation": "md.sys.elevation.level2",
   "md.comp.top-app-bar.small.trailing-icon.color": "onSurfaceVariant",
   "md.comp.top-app-bar.small.trailing-icon.size": 24.0

dev/tools/gen_defaults/data/typeface.json

 {
-  "version": "v0_162",
+  "version": "v0_206",
 
   "md.ref.typeface.brand": "Roboto",
   "md.ref.typeface.plain": "Roboto",

dev/tools/gen_defaults/lib/action_chip_template.dart

@@ -52,7 +52,9 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
           ? ${componentColor("$tokenGroup$flatVariant.disabled.container")}
           : ${componentColor("$tokenGroup$elevatedVariant.disabled.container")};
       }
-      return ${componentColor("$tokenGroup$flatVariant.container")};
+      return _chipVariant == _ChipVariant.flat
+        ? ${componentColor("$tokenGroup$flatVariant.container")}
+        : ${componentColor("$tokenGroup$elevatedVariant.container")};
     });
 
   @override

dev/tools/gen_defaults/lib/banner_template.dart

@@ -24,7 +24,7 @@ class _${blockName}DefaultsM3 extends MaterialBannerThemeData {
   Color? get backgroundColor => ${componentColor("md.comp.banner.container")};
 
   @override
-  Color? get surfaceTintColor => ${color("md.comp.banner.container.surface-tint-layer.color")};
+  Color? get surfaceTintColor => ${colorOrTransparent("md.comp.banner.container.surface-tint-layer.color")};
 
   @override
   Color? get dividerColor => ${color("md.comp.divider.color")};

dev/tools/gen_defaults/lib/bottom_app_bar_template.dart

@@ -26,7 +26,7 @@ class _${blockName}DefaultsM3 extends BottomAppBarTheme {
   Color? get color => ${componentColor('md.comp.bottom-app-bar.container')};
 
   @override
-  Color? get surfaceTintColor => ${componentColor('md.comp.bottom-app-bar.container.surface-tint-layer')};
+  Color? get surfaceTintColor => ${colorOrTransparent('md.comp.bottom-app-bar.container.surface-tint-layer')};
 
   @override
   Color? get shadowColor => Colors.transparent;

dev/tools/gen_defaults/lib/bottom_sheet_template.dart

@@ -30,7 +30,7 @@ class _${blockName}DefaultsM3 extends BottomSheetThemeData {
   Color? get backgroundColor => ${componentColor("md.comp.sheet.bottom.docked.container")};
 
   @override
-  Color? get surfaceTintColor => ${componentColor("md.comp.sheet.bottom.docked.container.surface-tint-layer")};
+  Color? get surfaceTintColor => ${colorOrTransparent("md.comp.sheet.bottom.docked.container.surface-tint-layer")};
 
   @override
   Color? get shadowColor => Colors.transparent;

dev/tools/gen_defaults/lib/color_scheme_template.dart

@@ -32,14 +32,26 @@ const ColorScheme _colorSchemeLightM3 = ColorScheme(
   onPrimary: Color(${light('md.sys.color.on-primary')}),
   primaryContainer: Color(${light('md.sys.color.primary-container')}),
   onPrimaryContainer: Color(${light('md.sys.color.on-primary-container')}),
+  primaryFixed: Color(${light('md.sys.color.primary-fixed')}),
+  primaryFixedDim: Color(${light('md.sys.color.primary-fixed-dim')}),
+  onPrimaryFixed: Color(${light('md.sys.color.on-primary-fixed')}),
+  onPrimaryFixedVariant: Color(${light('md.sys.color.on-primary-fixed-variant')}),
   secondary: Color(${light('md.sys.color.secondary')}),
   onSecondary: Color(${light('md.sys.color.on-secondary')}),
   secondaryContainer: Color(${light('md.sys.color.secondary-container')}),
   onSecondaryContainer: Color(${light('md.sys.color.on-secondary-container')}),
+  secondaryFixed: Color(${light('md.sys.color.secondary-fixed')}),
+  secondaryFixedDim: Color(${light('md.sys.color.secondary-fixed-dim')}),
+  onSecondaryFixed: Color(${light('md.sys.color.on-secondary-fixed')}),
+  onSecondaryFixedVariant: Color(${light('md.sys.color.on-secondary-fixed-variant')}),
   tertiary: Color(${light('md.sys.color.tertiary')}),
   onTertiary: Color(${light('md.sys.color.on-tertiary')}),
   tertiaryContainer: Color(${light('md.sys.color.tertiary-container')}),
   onTertiaryContainer: Color(${light('md.sys.color.on-tertiary-container')}),
+  tertiaryFixed: Color(${light('md.sys.color.tertiary-fixed')}),
+  tertiaryFixedDim: Color(${light('md.sys.color.tertiary-fixed-dim')}),
+  onTertiaryFixed: Color(${light('md.sys.color.on-tertiary-fixed')}),
+  onTertiaryFixedVariant: Color(${light('md.sys.color.on-tertiary-fixed-variant')}),
   error: Color(${light('md.sys.color.error')}),
   onError: Color(${light('md.sys.color.on-error')}),
   errorContainer: Color(${light('md.sys.color.error-container')}),
@@ -47,6 +59,13 @@ const ColorScheme _colorSchemeLightM3 = ColorScheme(
   background: Color(${light('md.sys.color.background')}),
   onBackground: Color(${light('md.sys.color.on-background')}),
   surface: Color(${light('md.sys.color.surface')}),
+  surfaceBright: Color(${light('md.sys.color.surface-bright')}),
+  surfaceContainerLowest: Color(${light('md.sys.color.surface-container-lowest')}),
+  surfaceContainerLow: Color(${light('md.sys.color.surface-container-low')}),
+  surfaceContainer: Color(${light('md.sys.color.surface-container')}),
+  surfaceContainerHigh: Color(${light('md.sys.color.surface-container-high')}),
+  surfaceContainerHighest: Color(${light('md.sys.color.surface-container-highest')}),
+  surfaceDim: Color(${light('md.sys.color.surface-dim')}),
   onSurface: Color(${light('md.sys.color.on-surface')}),
   surfaceVariant: Color(${light('md.sys.color.surface-variant')}),
   onSurfaceVariant: Color(${light('md.sys.color.on-surface-variant')}),
@@ -67,14 +86,26 @@ const ColorScheme _colorSchemeDarkM3 = ColorScheme(
   onPrimary: Color(${dark('md.sys.color.on-primary')}),
   primaryContainer: Color(${dark('md.sys.color.primary-container')}),
   onPrimaryContainer: Color(${dark('md.sys.color.on-primary-container')}),
+  primaryFixed: Color(${dark('md.sys.color.primary-fixed')}),
+  primaryFixedDim: Color(${dark('md.sys.color.primary-fixed-dim')}),
+  onPrimaryFixed: Color(${dark('md.sys.color.on-primary-fixed')}),
+  onPrimaryFixedVariant: Color(${dark('md.sys.color.on-primary-fixed-variant')}),
   secondary: Color(${dark('md.sys.color.secondary')}),
   onSecondary: Color(${dark('md.sys.color.on-secondary')}),
   secondaryContainer: Color(${dark('md.sys.color.secondary-container')}),
   onSecondaryContainer: Color(${dark('md.sys.color.on-secondary-container')}),
+  secondaryFixed: Color(${dark('md.sys.color.secondary-fixed')}),
+  secondaryFixedDim: Color(${dark('md.sys.color.secondary-fixed-dim')}),
+  onSecondaryFixed: Color(${dark('md.sys.color.on-secondary-fixed')}),
+  onSecondaryFixedVariant: Color(${dark('md.sys.color.on-secondary-fixed-variant')}),
   tertiary: Color(${dark('md.sys.color.tertiary')}),
   onTertiary: Color(${dark('md.sys.color.on-tertiary')}),
   tertiaryContainer: Color(${dark('md.sys.color.tertiary-container')}),
   onTertiaryContainer: Color(${dark('md.sys.color.on-tertiary-container')}),
+  tertiaryFixed: Color(${dark('md.sys.color.tertiary-fixed')}),
+  tertiaryFixedDim: Color(${dark('md.sys.color.tertiary-fixed-dim')}),
+  onTertiaryFixed: Color(${dark('md.sys.color.on-tertiary-fixed')}),
+  onTertiaryFixedVariant: Color(${dark('md.sys.color.on-tertiary-fixed-variant')}),
   error: Color(${dark('md.sys.color.error')}),
   onError: Color(${dark('md.sys.color.on-error')}),
   errorContainer: Color(${dark('md.sys.color.error-container')}),
@@ -82,6 +113,13 @@ const ColorScheme _colorSchemeDarkM3 = ColorScheme(
   background: Color(${dark('md.sys.color.background')}),
   onBackground: Color(${dark('md.sys.color.on-background')}),
   surface: Color(${dark('md.sys.color.surface')}),
+  surfaceBright: Color(${dark('md.sys.color.surface-bright')}),
+  surfaceContainerLowest: Color(${dark('md.sys.color.surface-container-lowest')}),
+  surfaceContainerLow: Color(${dark('md.sys.color.surface-container-low')}),
+  surfaceContainer: Color(${dark('md.sys.color.surface-container')}),
+  surfaceContainerHigh: Color(${dark('md.sys.color.surface-container-high')}),
+  surfaceContainerHighest: Color(${dark('md.sys.color.surface-container-highest')}),
+  surfaceDim: Color(${dark('md.sys.color.surface-dim')}),
   onSurface: Color(${dark('md.sys.color.on-surface')}),
   surfaceVariant: Color(${dark('md.sys.color.surface-variant')}),
   onSurfaceVariant: Color(${dark('md.sys.color.on-surface-variant')}),

dev/tools/gen_defaults/lib/drawer_template.dart

@@ -17,7 +17,7 @@ class _${blockName}DefaultsM3 extends DrawerThemeData {
   late final TextDirection direction = Directionality.of(context);
 
   @override
-  Color? get backgroundColor => ${componentColor("md.comp.navigation-drawer.container")};
+  Color? get backgroundColor => ${componentColor("md.comp.navigation-drawer.modal.container")};
 
   @override
   Color? get surfaceTintColor => ${colorOrTransparent("md.comp.navigation-drawer.container.surface-tint-layer.color")};

dev/tools/gen_defaults/lib/filter_chip_template.dart

@@ -71,7 +71,7 @@ class _${blockName}DefaultsM3 extends ChipThemeData {
       }
       return _chipVariant == _ChipVariant.flat
         ? ${componentColor("$tokenGroup$flatVariant.container")}
-        : ${componentColor("$tokenGroup$elevatedVariant.container")};
+        : ${componentColor("$tokenGroup$elevatedVariant.unselected.container")};
     });
 
   @override

dev/tools/gen_defaults/lib/icon_button_template.dart

@@ -185,14 +185,14 @@ class IconButtonTemplate extends TokenTemplate {
   }
 
   String _minimumSize() {
-    if (tokenAvailable('$tokenGroup.container.size')) {
+    if (tokenAvailable('$tokenGroup.container.height') && tokenAvailable('$tokenGroup.container.width')) {
       return '''
 
-    const MaterialStatePropertyAll<Size>(Size(${getToken('$tokenGroup.container.size')}, ${getToken('$tokenGroup.container.size')}))''';
+    const MaterialStatePropertyAll<Size>(Size(${getToken('$tokenGroup.container.width')}, ${getToken('$tokenGroup.container.height')}))''';
     } else {
       return '''
 
-    const MaterialStatePropertyAll<Size>(Size(${getToken('$tokenGroup.state-layer.size')}, ${getToken('$tokenGroup.state-layer.size')}))''';
+    const MaterialStatePropertyAll<Size>(Size(40.0, 40.0))''';
     }
   }
 

dev/tools/gen_defaults/lib/menu_template.dart

@@ -38,7 +38,7 @@ class _MenuBarDefaultsM3 extends MenuStyle {
 
   @override
   MaterialStateProperty<Color?>? get surfaceTintColor {
-    return MaterialStatePropertyAll<Color?>(${componentColor('md.comp.menu.container.surface-tint-layer')});
+    return const MaterialStatePropertyAll<Color?>(${colorOrTransparent('md.comp.menu.container.surface-tint-layer')});
   }
 
   @override
@@ -242,7 +242,10 @@ class _MenuDefaultsM3 extends MenuStyle {
 
   @override
   MaterialStateProperty<Color?>? get surfaceTintColor {
-    return MaterialStatePropertyAll<Color?>(${componentColor('md.comp.menu.container.surface-tint-layer')});
+    return ${componentColor('md.comp.menu.container.surface-tint-layer') == 'null'
+      ? 'const MaterialStatePropertyAll<Color?>(Colors.transparent)'
+      : 'MaterialStatePropertyAll<Color?>(${componentColor('md.comp.menu.container.surface-tint-layer')})'
+  };
   }
 
   @override

dev/tools/gen_defaults/lib/navigation_drawer_template.dart

@@ -26,7 +26,7 @@ class _${blockName}DefaultsM3 extends NavigationDrawerThemeData {
   late final TextTheme _textTheme = Theme.of(context).textTheme;
 
   @override
-  Color? get backgroundColor => ${componentColor("md.comp.navigation-drawer.container")};
+  Color? get backgroundColor => ${componentColor("md.comp.navigation-drawer.modal.container")};
 
   @override
   Color? get surfaceTintColor => ${colorOrTransparent("md.comp.navigation-drawer.container.surface-tint-layer.color")};

dev/tools/gen_defaults/lib/popup_menu_template.dart

@@ -38,7 +38,7 @@ class _${blockName}DefaultsM3 extends PopupMenuThemeData {
   Color? get shadowColor => ${color("md.comp.menu.container.shadow-color")};
 
   @override
-  Color? get surfaceTintColor => ${color("md.comp.menu.container.surface-tint-layer.color")};
+  Color? get surfaceTintColor => ${colorOrTransparent("md.comp.menu.container.surface-tint-layer.color")};
 
   @override
   ShapeBorder? get shape => ${shape("md.comp.menu.container")};

dev/tools/gen_defaults/lib/search_bar_template.dart

@@ -10,6 +10,15 @@ class SearchBarTemplate extends TokenTemplate {
     super.textThemePrefix = '_textTheme.'
   });
 
+  String _surfaceTint() {
+    final String? color = colorOrTransparent('md.comp.search-bar.container.surface-tint-layer.color');
+    final String surfaceTintColor = 'MaterialStatePropertyAll<Color>($color);';
+    if (color == 'Colors.transparent') {
+      return 'const $surfaceTintColor';
+    }
+    return surfaceTintColor;
+  }
+
   @override
   String generate() => '''
 class _SearchBarDefaultsM3 extends SearchBarThemeData {
@@ -33,7 +42,7 @@ class _SearchBarDefaultsM3 extends SearchBarThemeData {
 
   @override
   MaterialStateProperty<Color>? get surfaceTintColor =>
-    MaterialStatePropertyAll<Color>(${colorOrTransparent("md.comp.search-bar.container.surface-tint-layer.color")});
+    ${_surfaceTint()}
 
   @override
   MaterialStateProperty<Color?>? get overlayColor =>

dev/tools/gen_defaults/lib/segmented_button_template.dart

@@ -124,23 +124,23 @@ class _${blockName}DefaultsM3 extends SegmentedButtonThemeData {
     return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
       if (states.contains(MaterialState.selected)) {
         if (states.contains(MaterialState.pressed)) {
-          return selectedColor?.withOpacity(0.12);
+          return selectedColor?.withOpacity(0.1);
         }
         if (states.contains(MaterialState.hovered)) {
           return selectedColor?.withOpacity(0.08);
         }
         if (states.contains(MaterialState.focused)) {
-          return selectedColor?.withOpacity(0.12);
+          return selectedColor?.withOpacity(0.1);
         }
       } else {
         if (states.contains(MaterialState.pressed)) {
-          return unselectedColor?.withOpacity(0.12);
+          return unselectedColor?.withOpacity(0.1);
         }
         if (states.contains(MaterialState.hovered)) {
           return unselectedColor?.withOpacity(0.08);
         }
         if (states.contains(MaterialState.focused)) {
-          return unselectedColor?.withOpacity(0.12);
+          return unselectedColor?.withOpacity(0.1);
         }
       }
       return Colors.transparent;

dev/tools/gen_defaults/lib/tabs_template.dart

@@ -21,11 +21,13 @@ class _${blockName}PrimaryDefaultsM3 extends TabBarTheme {
   late final TextTheme _textTheme = Theme.of(context).textTheme;
   final bool isScrollable;
 
+  // This value comes from Divider widget defaults. Token db deprecated 'primary-navigation-tab.divider.color' token.
   @override
-  Color? get dividerColor => ${componentColor("md.comp.primary-navigation-tab.divider")};
+  Color? get dividerColor => ${componentColor("md.comp.divider")};
 
+  // This value comes from Divider widget defaults. Token db deprecated 'primary-navigation-tab.divider.height' token.
   @override
-  double? get dividerHeight => ${getToken('md.comp.primary-navigation-tab.divider.height')};
+  double? get dividerHeight => ${getToken("md.comp.divider.thickness")};
 
   @override
   Color? get indicatorColor => ${componentColor("md.comp.primary-navigation-tab.active-indicator")};
@@ -93,11 +95,13 @@ class _${blockName}SecondaryDefaultsM3 extends TabBarTheme {
   late final TextTheme _textTheme = Theme.of(context).textTheme;
   final bool isScrollable;
 
+  // This value comes from Divider widget defaults. Token db deprecated 'secondary-navigation-tab.divider.color' token.
   @override
-  Color? get dividerColor => ${componentColor("md.comp.secondary-navigation-tab.divider")};
+  Color? get dividerColor => ${componentColor("md.comp.divider")};
 
+  // This value comes from Divider widget defaults. Token db deprecated 'secondary-navigation-tab.divider.height' token.
   @override
-  double? get dividerHeight => ${getToken('md.comp.secondary-navigation-tab.divider.height')};
+  double? get dividerHeight => ${getToken("md.comp.divider.thickness")};
 
   @override
   Color? get indicatorColor => ${componentColor("md.comp.primary-navigation-tab.active-indicator")};

examples/api/lib/material/color_scheme/dynamic_content_color.0.dart

@@ -126,7 +126,7 @@ class _DynamicColorExampleState extends State<DynamicColorExample> {
                         divider,
                         Expanded(
                           child: ColoredBox(
-                            color: colorScheme.background,
+                            color: colorScheme.surface,
                             child: LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
                               if (constraints.maxWidth < narrowScreenWidthThreshold) {
                                 return SingleChildScrollView(
@@ -226,7 +226,7 @@ class _DynamicColorExampleState extends State<DynamicColorExample> {
                 child: Card(
                   color: widget.images.indexOf(image) == selectedImage
                       ? colorScheme.primaryContainer
-                      : colorScheme.background,
+                      : colorScheme.surface,
                   child: Padding(
                     padding: const EdgeInsets.all(5.0),
                     child: ConstrainedBox(
@@ -305,21 +305,12 @@ class ColorSchemeView extends StatelessWidget {
           ],
         ),
         divider,
-        ColorGroup(
-          children: <ColorChip>[
-            ColorChip(label: 'background', color: colorScheme.background, onColor: colorScheme.onBackground),
-            ColorChip(label: 'onBackground', color: colorScheme.onBackground, onColor: colorScheme.background),
-          ],
-        ),
-        divider,
         ColorGroup(
           children: <ColorChip>[
             ColorChip(label: 'surface', color: colorScheme.surface, onColor: colorScheme.onSurface),
             ColorChip(label: 'onSurface', color: colorScheme.onSurface, onColor: colorScheme.surface),
             ColorChip(
-                label: 'surfaceVariant', color: colorScheme.surfaceVariant, onColor: colorScheme.onSurfaceVariant),
-            ColorChip(
-                label: 'onSurfaceVariant', color: colorScheme.onSurfaceVariant, onColor: colorScheme.surfaceVariant),
+                label: 'onSurfaceVariant', color: colorScheme.onSurfaceVariant, onColor: colorScheme.surfaceContainerHighest),
           ],
         ),
         divider,

examples/api/lib/widgets/draggable_scrollable_sheet/draggable_scrollable_sheet.0.dart

@@ -133,7 +133,7 @@ class Grabber extends StatelessWidget {
             width: 32.0,
             height: 4.0,
             decoration: BoxDecoration(
-              color: colorScheme.surfaceVariant,
+              color: colorScheme.surfaceContainerHighest,
               borderRadius: BorderRadius.circular(8.0),
             ),
           ),

examples/api/lib/widgets/page_view/page_view.0.dart

@@ -169,7 +169,7 @@ class PageIndicator extends StatelessWidget {
           ),
           TabPageSelector(
             controller: tabController,
-            color: colorScheme.background,
+            color: colorScheme.surface,
             selectedColor: colorScheme.primary,
           ),
           IconButton(

examples/api/test/material/app/app.0_test.dart

@@ -27,7 +27,7 @@ void main() {
     );
 
     // Test the default animation.
-    expect(getScaffoldMaterial().color, lightTheme.colorScheme.background);
+    expect(getScaffoldMaterial().color, lightTheme.colorScheme.surface);
 
     await tester.tap(find.text( 'Switch Theme Mode'));
     await tester.pump();
@@ -37,13 +37,13 @@ void main() {
     // The Scaffold background color is updated.
     expect(
       getScaffoldMaterial().color,
-      Color.lerp(lightTheme.colorScheme.background, darkTheme.colorScheme.background, 0.5),
+      Color.lerp(lightTheme.colorScheme.surface, darkTheme.colorScheme.surface, 0.5),
     );
 
     await tester.pumpAndSettle();
 
     // The Scaffold background color is now fully dark.
-    expect(getScaffoldMaterial().color, darkTheme.colorScheme.background);
+    expect(getScaffoldMaterial().color, darkTheme.colorScheme.surface);
 
     // Test the custom animation curve and duration.
     await tester.tap(find.text('Custom'));
@@ -55,12 +55,12 @@ void main() {
     await tester.pump(const Duration(milliseconds: 500));
 
     // The Scaffold background color is updated.
-    expect(getScaffoldMaterial().color, const Color(0xff3c3e3b));
+    expect(getScaffoldMaterial().color, const Color(0xff333731));
 
     await tester.pumpAndSettle();
 
     // The Scaffold background color is now fully light.
-    expect(getScaffoldMaterial().color, lightTheme.colorScheme.background);
+    expect(getScaffoldMaterial().color, lightTheme.colorScheme.surface);
 
     // Test the no animation style.
     await tester.tap(find.text('None'));
@@ -71,6 +71,6 @@ void main() {
     await tester.pump();
 
     // The Scaffold background color is updated immediately.
-    expect(getScaffoldMaterial().color, darkTheme.colorScheme.background);
+    expect(getScaffoldMaterial().color, darkTheme.colorScheme.surface);
   });
 }

examples/api/test/material/card/card.2_test.dart

@@ -31,9 +31,9 @@ void main() {
     expect(defaultCard.shape, const RoundedRectangleBorder(
       borderRadius: BorderRadius.all(Radius.circular(12.0)),
     ));
-    expect(defaultCard.color, const Color(0xfffffbfe));
+    expect(defaultCard.color, const Color(0xfff7f2fa));
     expect(defaultCard.shadowColor, const Color(0xff000000));
-    expect(defaultCard.surfaceTintColor, const Color(0xff6750a4));
+    expect(defaultCard.surfaceTintColor, Colors.transparent);
 
     final Material filledCard = getCardMaterial(tester, 1);
     expect(filledCard.clipBehavior, Clip.none);
@@ -41,7 +41,7 @@ void main() {
     expect(filledCard.shape, const RoundedRectangleBorder(
       borderRadius: BorderRadius.all(Radius.circular(12.0)),
     ));
-    expect(filledCard.color, const Color(0xffe7e0ec));
+    expect(filledCard.color, const Color(0xffe6e0e9));
     expect(filledCard.shadowColor, const Color(0xff000000));
     expect(filledCard.surfaceTintColor, const Color(0x00000000));
 
@@ -52,8 +52,8 @@ void main() {
       side: BorderSide(color: Color(0xffcac4d0)),
       borderRadius: BorderRadius.all(Radius.circular(12.0)),
     ));
-    expect(outlinedCard.color, const Color(0xfffffbfe));
+    expect(outlinedCard.color, const Color(0xfffef7ff));
     expect(outlinedCard.shadowColor, const Color(0xff000000));
-    expect(outlinedCard.surfaceTintColor, const Color(0xff6750a4));
+    expect(outlinedCard.surfaceTintColor, Colors.transparent);
   });
 }

examples/api/test/material/color_scheme/color_scheme.0_test.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter_api_samples/material/color_scheme/color_scheme.0.dart' as example;
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('ColorScheme Smoke Test', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const example.ColorSchemeExample(),
+    );
+    expect(find.text('Light ColorScheme'), findsOneWidget);
+    expect(find.text('Dark ColorScheme'), findsOneWidget);
+
+    expect(find.byType(example.ColorChip), findsNWidgets(86));
+  });
+
+  testWidgets('Change color seed', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const example.ColorSchemeExample(),
+    );
+
+    ColoredBox coloredBox() {
+      return tester.widget<ColoredBox>(
+        find.descendant(
+          of: find.widgetWithText(example.ColorChip, 'primary').first,
+          matching: find.byType(ColoredBox)
+        )
+      );
+    }
+    expect(coloredBox().color, const Color(0xFF6750A4));
+    await tester.tap(find.byType(MenuAnchor));
+    await tester.pumpAndSettle();
+    await tester.tap(find.widgetWithText(MenuItemButton, 'Yellow'));
+    await tester.pumpAndSettle();
+
+    expect(coloredBox().color, const Color(0xFF685F12));
+  });
+}

examples/api/test/material/toggle_buttons/toggle_buttons.0_test.dart

@@ -25,7 +25,7 @@ void main() {
     TextButton thirdButton = findButton('Orange');
 
     const Color selectedColor = Color(0xffef9a9a);
-    const Color unselectedColor = Color(0x00fffbfe);
+    const Color unselectedColor = Color(0x00fef7ff);
 
     /// First button is selected.
     expect(firstButton.style!.backgroundColor!.resolve(enabled), selectedColor);
@@ -63,7 +63,7 @@ void main() {
     TextButton thirdButton = findButton('Carrots');
 
     const Color selectedColor = Color(0xffa5d6a7);
-    const Color unselectedColor = Color(0x00fffbfe);
+    const Color unselectedColor = Color(0x00fef7ff);
 
     /// Second button is selected.
     expect(firstButton.style!.backgroundColor!.resolve(enabled), unselectedColor);
@@ -102,7 +102,7 @@ void main() {
     TextButton thirdButton = findButton(Icons.ac_unit);
 
     const Color selectedColor =  Color(0xff90caf9);
-    const Color unselectedColor = Color(0x00fffbfe);
+    const Color unselectedColor = Color(0x00fef7ff);
 
 
     /// Third button is selected.

packages/flutter/lib/src/material/action_chip.dart

@@ -280,7 +280,9 @@ class _ActionChipDefaultsM3 extends ChipThemeData {
           ? null
           : _colors.onSurface.withOpacity(0.12);
       }
-      return null;
+      return _chipVariant == _ChipVariant.flat
+        ? null
+        : _colors.surfaceContainerLow;
     });
 
   @override
@@ -289,7 +291,7 @@ class _ActionChipDefaultsM3 extends ChipThemeData {
     : _colors.shadow;
 
   @override
-  Color? get surfaceTintColor => _colors.surfaceTint;
+  Color? get surfaceTintColor => Colors.transparent;
 
   @override
   Color? get checkmarkColor => null;

packages/flutter/lib/src/material/app_bar.dart

@@ -848,6 +848,17 @@ class _AppBarState extends State<AppBar> {
       defaults.backgroundColor!,
     );
 
+    final Color scrolledUnderBackground = _resolveColor(
+      states,
+      widget.backgroundColor,
+      appBarTheme.backgroundColor,
+      Theme.of(context).colorScheme.surfaceContainer,
+    );
+
+    final Color effectiveBackgroundColor = states.contains(MaterialState.scrolledUnder)
+        ? scrolledUnderBackground
+        : backgroundColor;
+
     final Color foregroundColor = widget.foregroundColor
       ?? appBarTheme.foregroundColor
       ?? defaults.foregroundColor!;
@@ -1113,7 +1124,7 @@ class _AppBarState extends State<AppBar> {
       ?? appBarTheme.systemOverlayStyle
       ?? defaults.systemOverlayStyle
       ?? _systemOverlayStyleForBrightness(
-        ThemeData.estimateBrightnessForColor(backgroundColor),
+        ThemeData.estimateBrightnessForColor(effectiveBackgroundColor),
         // Make the status bar transparent for M3 so the elevation overlay
         // color is picked up by the statusbar.
         theme.useMaterial3 ? const Color(0x00000000) : null,
@@ -1124,7 +1135,7 @@ class _AppBarState extends State<AppBar> {
       child: AnnotatedRegion<SystemUiOverlayStyle>(
         value: overlayStyle,
         child: Material(
-          color: backgroundColor,
+          color: theme.useMaterial3 ? effectiveBackgroundColor : backgroundColor,
           elevation: effectiveElevation,
           type: widget.forceMaterialTransparency
               ? MaterialType.transparency
@@ -1134,7 +1145,10 @@ class _AppBarState extends State<AppBar> {
             ?? defaults.shadowColor,
           surfaceTintColor: widget.surfaceTintColor
             ?? appBarTheme.surfaceTintColor
-            ?? defaults.surfaceTintColor,
+            // M3 `defaults.surfaceTint` is Colors.transparent now. It is not used
+            // here because otherwise, it will cause breaking change for
+            // `scrolledUnderElevation`.
+            ?? (theme.useMaterial3 ? theme.colorScheme.surfaceTint : null),
           shape: widget.shape ?? appBarTheme.shape ?? defaults.shape,
           child: Semantics(
             explicitChildNodes: true,
@@ -2341,7 +2355,7 @@ class _AppBarDefaultsM3 extends AppBarTheme {
   Color? get shadowColor => Colors.transparent;
 
   @override
-  Color? get surfaceTintColor => _colors.surfaceTint;
+  Color? get surfaceTintColor => Colors.transparent;
 
   @override
   IconThemeData? get iconTheme => IconThemeData(

packages/flutter/lib/src/material/banner.dart

@@ -6,6 +6,7 @@ import 'package:flutter/widgets.dart';
 
 import 'banner_theme.dart';
 import 'color_scheme.dart';
+import 'colors.dart';
 import 'divider.dart';
 import 'material.dart';
 import 'scaffold.dart';
@@ -153,16 +154,18 @@ class MaterialBanner extends StatefulWidget {
   /// The color of the surface of this [MaterialBanner].
   ///
   /// If `null`, [MaterialBannerThemeData.backgroundColor] is used. If that is
-  /// also `null`, [ColorScheme.surface] of [ThemeData.colorScheme] is used.
+  /// also `null`, [ColorScheme.surfaceContainerLow] of [ThemeData.colorScheme] is used.
   final Color? backgroundColor;
 
   /// The color used as an overlay on [backgroundColor] to indicate elevation.
   ///
   /// If null, [MaterialBannerThemeData.surfaceTintColor] is used. If that
-  /// is also null, the default value is [ColorScheme.surfaceTint].
+  /// is also null, the default value is [Colors.transparent].
   ///
-  /// See [Material.surfaceTintColor] for more details on how this
-  /// overlay is applied.
+  /// This is not recommended for use. [Material 3 spec](https://m3.material.io/styles/color/the-color-system/color-roles)
+  /// introduced a set of tone-based surfaces and surface containers in its [ColorScheme],
+  /// which provide more flexibility. The intention is to eventually remove surface tint color from
+  /// the framework.
   final Color? surfaceTintColor;
 
   /// The color of the shadow below the [MaterialBanner].
@@ -483,10 +486,10 @@ class _BannerDefaultsM3 extends MaterialBannerThemeData {
   late final TextTheme _textTheme = Theme.of(context).textTheme;
 
   @override
-  Color? get backgroundColor => _colors.surface;
+  Color? get backgroundColor => _colors.surfaceContainerLow;
 
   @override
-  Color? get surfaceTintColor => _colors.surfaceTint;
+  Color? get surfaceTintColor => Colors.transparent;
 
   @override
   Color? get dividerColor => _colors.outlineVariant;

packages/flutter/lib/src/material/bottom_app_bar.dart

@@ -94,8 +94,9 @@ class BottomAppBar extends StatefulWidget {
   /// The bottom app bar's background color.
   ///
   /// If this property is null then [BottomAppBarTheme.color] of
-  /// [ThemeData.bottomAppBarTheme] is used. If that's null then
-  /// [ThemeData.bottomAppBarColor] is used.
+  /// [ThemeData.bottomAppBarTheme] is used. If that's null and [ThemeData.useMaterial3]
+  /// is true, the default value is [ColorScheme.surfaceContainer]; If that's null
+  /// and [ThemeData.useMaterial3] is false, then [ThemeData.bottomAppBarColor] is used.
   final Color? color;
 
   /// The z-coordinate at which to place this bottom app bar relative to its
@@ -129,18 +130,17 @@ class BottomAppBar extends StatefulWidget {
 
   /// A custom color for the Material 3 surface-tint elevation effect.
   ///
-  /// In Material 3, a "surface tint" with an opacity related to [elevation]
-  /// will be applied to the [BottomAppBar]'s background.
-  /// Use this property to override the default color of that tint.
+  /// This is not recommended for use. [Material 3 spec](https://m3.material.io/styles/color/the-color-system/color-roles)
+  /// introduced a set of tone-based surfaces and surface containers in its [ColorScheme],
+  /// which provide more flexibility. The intention is to eventually remove surface tint color from
+  /// the framework.
   ///
   /// If this property is null, then [BottomAppBarTheme.surfaceTintColor]
-  /// of [ThemeData.bottomAppBarTheme] is used.
-  /// If that is also null, [ColorScheme.surfaceTint] is used.
+  /// of [ThemeData.bottomAppBarTheme] is used. If that is also null, the default
+  /// value is [Colors.transparent].
   ///
   /// Ignored if [ThemeData.useMaterial3] is false.
   ///
-  /// The default is null.
-  ///
   /// See [Material.surfaceTintColor] for more details on how this overlay is applied.
   final Color? surfaceTintColor;
 
@@ -308,10 +308,10 @@ class _BottomAppBarDefaultsM3 extends BottomAppBarTheme {
   late final ColorScheme _colors = Theme.of(context).colorScheme;
 
   @override
-  Color? get color => _colors.surface;
+  Color? get color => _colors.surfaceContainer;
 
   @override
-  Color? get surfaceTintColor => _colors.surfaceTint;
+  Color? get surfaceTintColor => Colors.transparent;
 
   @override
   Color? get shadowColor => Colors.transparent;

packages/flutter/lib/src/material/bottom_sheet.dart

@@ -147,8 +147,7 @@ class BottomSheet extends StatefulWidget {
   /// The bottom sheet drag handle's color.
   ///
   /// Defaults to [BottomSheetThemeData.dragHandleColor].
-  /// If that is also null, defaults to [ColorScheme.onSurfaceVariant]
-  /// with an opacity of 0.4.
+  /// If that is also null, defaults to [ColorScheme.onSurfaceVariant].
   final Color? dragHandleColor;
 
   /// Defaults to [BottomSheetThemeData.dragHandleSize].
@@ -1405,16 +1404,16 @@ class _BottomSheetDefaultsM3 extends BottomSheetThemeData {
   late final ColorScheme _colors = Theme.of(context).colorScheme;
 
   @override
-  Color? get backgroundColor => _colors.surface;
+  Color? get backgroundColor => _colors.surfaceContainerLow;
 
   @override
-  Color? get surfaceTintColor => _colors.surfaceTint;
+  Color? get surfaceTintColor => Colors.transparent;
 
   @override
   Color? get shadowColor => Colors.transparent;
 
   @override
-  Color? get dragHandleColor => _colors.onSurfaceVariant.withOpacity(0.4);
+  Color? get dragHandleColor => _colors.onSurfaceVariant;
 
   @override
   Size? get dragHandleSize => const Size(32, 4);

packages/flutter/lib/src/material/card.dart

@@ -119,14 +119,8 @@ class Card extends StatelessWidget {
   ///
   /// Defines the card's [Material.color].
   ///
-  /// In Material 3, [surfaceTintColor] is drawn on top of this color
-  /// when the card is elevated. This might make the appearance of
-  /// the card slightly different than in Material 2. To disable this
-  /// feature, set [surfaceTintColor] to [Colors.transparent].
-  /// See [Material.surfaceTintColor] for more details.
-  ///
   /// If this property is null then the ambient [CardTheme.color] is used. If that is null,
-  /// and [ThemeData.useMaterial3] is true, then [ColorScheme.surface] of
+  /// and [ThemeData.useMaterial3] is true, then [ColorScheme.surfaceContainerLow] of
   /// [ThemeData.colorScheme] is used. Otherwise, [ThemeData.cardColor] is used.
   final Color? color;
 
@@ -139,11 +133,16 @@ class Card extends StatelessWidget {
 
   /// The color used as an overlay on [color] to indicate elevation.
   ///
+  /// This is not recommended for use. [Material 3 spec](https://m3.material.io/styles/color/the-color-system/color-roles)
+  /// introduced a set of tone-based surfaces and surface containers in its [ColorScheme],
+  /// which provide more flexibility. The intention is to eventually remove surface tint color from
+  /// the framework.
+  ///
   /// If this is null, no overlay will be applied. Otherwise this color
   /// will be composited on top of [color] with an opacity related
   /// to [elevation] and used to paint the background of the card.
   ///
-  /// The default is null.
+  /// The default is [Colors.transparent].
   ///
   /// See [Material.surfaceTintColor] for more details on how this
   /// overlay is applied.
@@ -289,13 +288,13 @@ class _CardDefaultsM3 extends CardTheme {
   late final ColorScheme _colors = Theme.of(context).colorScheme;
 
   @override
-  Color? get color => _colors.surface;
+  Color? get color => _colors.surfaceContainerLow;
 
   @override
   Color? get shadowColor => _colors.shadow;
 
   @override
-  Color? get surfaceTintColor => _colors.surfaceTint;
+  Color? get surfaceTintColor => Colors.transparent;
 
   @override
   ShapeBorder? get shape =>const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12.0)));
@@ -322,7 +321,7 @@ class _FilledCardDefaultsM3 extends CardTheme {
   late final ColorScheme _colors = Theme.of(context).colorScheme;
 
   @override
-  Color? get color => _colors.surfaceVariant;
+  Color? get color => _colors.surfaceContainerHighest;
 
   @override
   Color? get shadowColor => _colors.shadow;
@@ -361,7 +360,7 @@ class _OutlinedCardDefaultsM3 extends CardTheme {
   Color? get shadowColor => _colors.shadow;
 
   @override
-  Color? get surfaceTintColor => _colors.surfaceTint;
+  Color? get surfaceTintColor => Colors.transparent;
 
   @override
   ShapeBorder? get shape =>

packages/flutter/lib/src/material/checkbox.dart

@@ -975,35 +975,35 @@ class _CheckboxDefaultsM3 extends CheckboxThemeData {
     return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
       if (states.contains(MaterialState.error)) {
         if (states.contains(MaterialState.pressed)) {
-          return _colors.error.withOpacity(0.12);
+          return _colors.error.withOpacity(0.1);
         }
         if (states.contains(MaterialState.hovered)) {
           return _colors.error.withOpacity(0.08);
         }
         if (states.contains(MaterialState.focused)) {
-          return _colors.error.withOpacity(0.12);
+          return _colors.error.withOpacity(0.1);
         }
       }
       if (states.contains(MaterialState.selected)) {
         if (states.contains(MaterialState.pressed)) {
-          return _colors.onSurface.withOpacity(0.12);
+          return _colors.onSurface.withOpacity(0.1);
         }
         if (states.contains(MaterialState.hovered)) {
           return _colors.primary.withOpacity(0.08);
         }
         if (states.contains(MaterialState.focused)) {
-          return _colors.primary.withOpacity(0.12);
+          return _colors.primary.withOpacity(0.1);
         }
         return Colors.transparent;
       }
       if (states.contains(MaterialState.pressed)) {
-        return _colors.primary.withOpacity(0.12);
+        return _colors.primary.withOpacity(0.1);
       }
       if (states.contains(MaterialState.hovered)) {
         return _colors.onSurface.withOpacity(0.08);
       }
       if (states.contains(MaterialState.focused)) {
-        return _colors.onSurface.withOpacity(0.12);
+        return _colors.onSurface.withOpacity(0.1);
       }
       return Colors.transparent;
     });

packages/flutter/lib/src/material/chip.dart

@@ -212,9 +212,12 @@ abstract interface class ChipAttributes {
   /// Color of the chip's surface tint overlay when its elevation is
   /// greater than 0.
   ///
-  /// If this is null and [ThemeData.useMaterial3] is true, then
-  /// [ColorScheme.surfaceTint] color is used. Otherwise, it defaults
-  /// to null.
+  /// This is not recommended for use. [Material 3 spec](https://m3.material.io/styles/color/the-color-system/color-roles)
+  /// introduced a set of tone-based surfaces and surface containers in its [ColorScheme],
+  /// which provide more flexibility. The intention is to eventually remove surface tint color from
+  /// the framework.
+  ///
+  /// If this is null, defaults to [Colors.transparent].
   Color? get surfaceTintColor;
 
   /// Theme used for all icons in the chip.
@@ -2369,7 +2372,7 @@ class _ChipDefaultsM3 extends ChipThemeData {
   Color? get shadowColor => Colors.transparent;
 
   @override
-  Color? get surfaceTintColor => _colors.surfaceTint;
+  Color? get surfaceTintColor => Colors.transparent;
 
   @override
   Color? get checkmarkColor => null;