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)

Author: QuncCccccc

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

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

dev/tools/gen_defaults/data/banner.json

@@ -1,10 +1,9 @@
 {
-  "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

@@ -1,9 +1,8 @@
 {
-  "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

@@ -1,18 +1,20 @@
 {
-  "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

@@ -1,5 +1,5 @@
 {
-  "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",