Skip to content

Commit

Permalink
Reland - Introduce tone-based surfaces and accent color add-ons - Par…
Browse files Browse the repository at this point in the history
…t 2 (flutter#144001)

Reverts flutter#143973

This is a reland for flutter#138521 with an updated g3fix(cl/605555997). Local test: cl/609608958.
  • Loading branch information
QuncCccccc committed Feb 27, 2024
1 parent 609d30f commit 871d592
Show file tree
Hide file tree
Showing 181 changed files with 2,520 additions and 999 deletions.
8 changes: 4 additions & 4 deletions dev/benchmarks/macrobenchmarks/lib/src/web/material3.dart
Expand Up @@ -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),
Expand Down Expand Up @@ -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
Expand All @@ -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),
Expand Down Expand Up @@ -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(
Expand Down
Expand Up @@ -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),
Expand Down
Expand Up @@ -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();
}

Expand Down
Expand Up @@ -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,
);
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion 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",
Expand Down
5 changes: 2 additions & 3 deletions 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,
Expand Down
7 changes: 3 additions & 4 deletions 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"
}
8 changes: 5 additions & 3 deletions 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",
Expand Down
5 changes: 4 additions & 1 deletion 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",
Expand All @@ -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",
Expand Down
5 changes: 4 additions & 1 deletion dev/tools/gen_defaults/data/button_filled_tonal.json
@@ -1,5 +1,5 @@
{
"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",
Expand All @@ -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",
Expand Down
5 changes: 4 additions & 1 deletion dev/tools/gen_defaults/data/button_outlined.json
@@ -1,12 +1,15 @@
{
"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",
"md.comp.outlined-button.disabled.label-text.color": "onSurface",
"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",
Expand Down
5 changes: 4 additions & 1 deletion dev/tools/gen_defaults/data/button_text.json
@@ -1,10 +1,13 @@
{
"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",
Expand Down
8 changes: 5 additions & 3 deletions dev/tools/gen_defaults/data/card_elevated.json
@@ -1,18 +1,20 @@
{
"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,
"md.comp.elevated-card.dragged.container.elevation": "md.sys.elevation.level4",
"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",
Expand Down
7 changes: 5 additions & 2 deletions dev/tools/gen_defaults/data/card_filled.json
@@ -1,7 +1,7 @@
{
"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",
Expand All @@ -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",
Expand Down
6 changes: 4 additions & 2 deletions dev/tools/gen_defaults/data/card_outlined.json
@@ -1,11 +1,10 @@
{
"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,
Expand All @@ -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",
Expand Down
5 changes: 4 additions & 1 deletion dev/tools/gen_defaults/data/carousel_item.json
@@ -1,5 +1,5 @@
{
"version": "v0_202",
"version": "v0_206",

"md.comp.carousel-item.container.color": "surface",
"md.comp.carousel-item.container.elevation": "md.sys.elevation.level0",
Expand All @@ -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",
Expand Down
5 changes: 4 additions & 1 deletion dev/tools/gen_defaults/data/checkbox.json
@@ -1,5 +1,5 @@
{
"version": "v0_162",
"version": "v0_206",

"md.comp.checkbox.container.size": 18.0,
"md.comp.checkbox.error.focus.state-layer.color": "error",
Expand All @@ -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",
Expand Down
8 changes: 5 additions & 3 deletions dev/tools/gen_defaults/data/chip_assist.json
@@ -1,16 +1,15 @@
{
"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",
Expand All @@ -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",
Expand Down
8 changes: 5 additions & 3 deletions dev/tools/gen_defaults/data/chip_filter.json
@@ -1,9 +1,8 @@
{
"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",
Expand All @@ -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,
Expand All @@ -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",
Expand Down
5 changes: 4 additions & 1 deletion dev/tools/gen_defaults/data/chip_input.json
@@ -1,5 +1,5 @@
{
"version": "v0_162",
"version": "v0_206",

"md.comp.input-chip.container.elevation": "md.sys.elevation.level0",
"md.comp.input-chip.container.height": 32.0,
Expand All @@ -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",
Expand Down

0 comments on commit 871d592

Please sign in to comment.