Skip to content

Commit baf043c

Browse files
committed
Add const values for new surface colors.
1 parent c645715 commit baf043c

File tree

4 files changed

+136
-3
lines changed

4 files changed

+136
-3
lines changed

.fvmrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"flutter": "beta",
2+
"flutter": "stable",
33
"flavors": {}
44
}

.vscode/settings.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,5 @@
2020
"Tert",
2121
"themedata"
2222
],
23-
"dart.flutterSdkPath": ".fvm/versions/beta"
23+
"dart.flutterSdkPath": ".fvm/versions/stable"
2424
}

CHANGELOG.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ All changes to the **FlexColorScheme** (FCS) package are documented here.
44

55
## 8.0.0-dev.1 - WIP
66

7-
**May 22, 2024**
7+
**May 30, 2024**
88

99
**PACKAGE**
1010

@@ -36,6 +36,7 @@ more aligned with Flutter's Material-3 theming defaults, by using them as starti
3636

3737
**NEW**
3838

39+
- Added color constants for new Material-3 surface colors based on the monochrome seeded scheme, and its standard tones. These are used as baseline for different surface shades in FCS when seed generated colors are not being used.
3940
- Added `variant` a `FlexSchemeVariant` to FlexColorsScheme/FlexThemeData light and dark. This is used to define the variant of the seeded `ColorScheme`. It is an alternative to `tones` that also includes scheme seed variants that Flutter SDK had planned to include in version 3.22, but that did not land yet. The variants like `fidelity` will come later to Flutter. With FlexColorScheme 8.0.0 you can use them already now.
4041

4142
- Added `isDense` property to `FlexSubThemes.inputDecoratorTheme()`.

lib/src/flex_color.dart

+132
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,138 @@ class FlexColor {
7878
/// FlexColors standard for dark scaffold background, same as Material.
7979
static const Color darkScaffoldBackground = Color(0xFF121212);
8080

81+
// New surface colors in revised Material-3 design style that landed in
82+
// Flutter 3.22.0. The new surface colors are used by the new ColorScheme
83+
// in the updated Material-3 design system.
84+
85+
// Add these light surface colors
86+
// surface 0xFFF9F9F9 Tone98 Consider 0xFFFCFCFC Tone99 instead
87+
// surfaceDim 0xFFDADADA Tone87
88+
// surfaceBright 0xFFF9F9F9 Tone98
89+
// surfaceContainerLowest 0xFFFFFFFF Tone100
90+
// surfaceContainerLow 0xFFF3F3F3 Tone96
91+
// surfaceContainer 0xFFEEEEEE Tone94
92+
// surfaceContainerHigh 0xFFE8E8E8 Tone92
93+
// surfaceContainerHighest 0xFFE2E2E2 Tone90
94+
// onSurface 0xFF1B1B1B Tone10
95+
// onSurfaceVariant 0xFF474747 Tone30
96+
// inverseSurface 0xFF303030 Tone20
97+
// onInverseSurface 0xFFF1F1F1 Tone95
98+
99+
/// None tinted neutral surface color used as FlexColor standard for light
100+
/// surface. Based on M3 monochrome tone 98.
101+
static const Color lightM3Surface = Color(0xFFF9F9F9);
102+
103+
/// None tinted neutral surfaceDim color used as FlexColor standard for light
104+
/// surfaceDim. Based on M3 monochrome tone 87.
105+
static const Color lightM3SurfaceDim = Color(0xFFDADADA);
106+
107+
/// None tinted neutral surfaceBright color used as FlexColor standard for
108+
/// light surfaceBright. Based on M3 monochrome tone 98.
109+
static const Color lightM3SurfaceBright = Color(0xFFF9F9F9);
110+
111+
/// None tinted neutral surfaceContainerLowest color used as FlexColor
112+
/// standard for light surfaceContainerLowest.
113+
/// Based on M3 monochrome tone 100.
114+
static const Color lightM3SurfaceContainerLowest = Color(0xFFFFFFFF);
115+
116+
/// None tinted neutral surfaceContainerLow color used as FlexColor standard
117+
/// for light surfaceContainerLow. Based on M3 monochrome tone 96.
118+
static const Color lightM3SurfaceContainerLow = Color(0xFFF3F3F3);
119+
120+
/// None tinted neutral surfaceContainer color used as FlexColor standard for
121+
/// light surfaceContainer. Based on M3 monochrome tone 94.
122+
static const Color lightM3SurfaceContainer = Color(0xFFEEEEEE);
123+
124+
/// None tinted neutral surfaceContainerHigh color used as FlexColor standard
125+
/// for light surfaceContainerHigh. Based on M3 monochrome tone 92.
126+
static const Color lightM3SurfaceContainerHigh = Color(0xFFE8E8E8);
127+
128+
/// None tinted neutral surfaceContainerHighest color used as FlexColor
129+
/// standard for light surfaceContainerHighest.
130+
/// Based on M3 monochrome tone 90.
131+
static const Color lightM3SurfaceContainerHighest = Color(0xFFE2E2E2);
132+
133+
/// None tinted neutral onSurface color used as FlexColor standard for light
134+
/// onSurface. Based on M3 monochrome tone 10.
135+
static const Color lightM3OnSurface = Color(0xFF1B1B1B);
136+
137+
/// None tinted neutral onSurfaceVariant color used as FlexColor standard for
138+
/// light onSurfaceVariant. Based on M3 monochrome tone 30.
139+
static const Color lightM3OnSurfaceVariant = Color(0xFF474747);
140+
141+
/// None tinted neutral inverseSurface color used as FlexColor standard for
142+
/// light inverseSurface. Based on M3 monochrome tone 20.
143+
static const Color lightM3InverseSurface = Color(0xFF303030);
144+
145+
/// None tinted neutral onInverseSurface color used as FlexColor standard for
146+
/// light onInverseSurface. Based on M3 monochrome tone 95.
147+
static const Color lightM3OnInverseSurface = Color(0xFFF1F1F1);
148+
149+
// Add these dark surface colors
150+
// surface 0xFF131313 Tone6 Consider 0xFF0E0E0E Tone4 instead
151+
// surfaceDim 0xFF131313 Tone6 Consider 0xFF0E0E0E Tone4 instead
152+
// surfaceBright 0xFF393939 Tone24
153+
// surfaceContainerLowest 0xFF0E0E0E Tone4 Consider 0xFF070707 Tone2 instead
154+
// surfaceContainerLow 0xFF1B1B1B Tone10
155+
// surfaceContainer 0xFF1F1F1F Tone12
156+
// surfaceContainerHigh 0xFF2A2A2A Tone17
157+
// surfaceContainerHighest 0xFF353535 Tone22
158+
// onSurface 0xFFE2E2E2 Tone90
159+
// onSurfaceVariant 0xFFC6C6C6 Tone80
160+
// inverseSurface 0xFFE2E2E2 Tone90
161+
// onInverseSurface 0xFF303030 Tone20
162+
163+
/// None tinted neutral surface color used as FlexColor standard for dark
164+
/// surface. Based on M3 monochrome tone 6.
165+
static const Color darkM3Surface = Color(0xFF131313);
166+
167+
/// None tinted neutral surfaceDim color used as FlexColor standard for dark
168+
/// surfaceDim. Based on M3 monochrome tone 6.
169+
static const Color darkM3SurfaceDim = Color(0xFF131313);
170+
171+
/// None tinted neutral surfaceBright color used as FlexColor standard for
172+
/// dark surfaceBright. Based on M3 monochrome tone 24.
173+
static const Color darkM3SurfaceBright = Color(0xFF393939);
174+
175+
/// None tinted neutral surfaceContainerLowest color used as FlexColor
176+
/// standard for dark surfaceContainerLowest.
177+
/// Based on M3 monochrome tone 4.
178+
static const Color darkM3SurfaceContainerLowest = Color(0xFF0E0E0E);
179+
180+
/// None tinted neutral surfaceContainerLow color used as FlexColor standard
181+
/// for dark surfaceContainerLow. Based on M3 monochrome tone 10.
182+
static const Color darkM3SurfaceContainerLow = Color(0xFF1B1B1B);
183+
184+
/// None tinted neutral surfaceContainer color used as FlexColor standard for
185+
/// dark surfaceContainer. Based on M3 monochrome tone 12.
186+
static const Color darkM3SurfaceContainer = Color(0xFF1F1F1F);
187+
188+
/// None tinted neutral surfaceContainerHigh color used as FlexColor standard
189+
/// for dark surfaceContainerHigh. Based on M3 monochrome tone 17.
190+
static const Color darkM3SurfaceContainerHigh = Color(0xFF2A2A2A);
191+
192+
/// None tinted neutral surfaceContainerHighest color used as FlexColor
193+
/// standard for dark surfaceContainerHighest.
194+
/// Based on M3 monochrome tone 22.
195+
static const Color darkM3SurfaceContainerHighest = Color(0xFF353535);
196+
197+
/// None tinted neutral onSurface color used as FlexColor standard for dark
198+
/// onSurface. Based on M3 monochrome tone 90.
199+
static const Color darkM3OnSurface = Color(0xFFE2E2E2);
200+
201+
/// None tinted neutral onSurfaceVariant color used as FlexColor standard for
202+
/// dark onSurfaceVariant. Based on M3 monochrome tone 80.
203+
static const Color darkM3OnSurfaceVariant = Color(0xFFC6C6C6);
204+
205+
/// None tinted neutral inverseSurface color used as FlexColor standard for
206+
/// dark inverseSurface. Based on M3 monochrome tone 90.
207+
static const Color darkM3InverseSurface = Color(0xFFE2E2E2);
208+
209+
/// None tinted neutral onInverseSurface color used as FlexColor standard for
210+
/// dark onInverseSurface. Based on M3 monochrome tone 20.
211+
static const Color darkM3OnInverseSurface = Color(0xFF303030);
212+
81213
// The Material standard error colors for light and dark modes as defined by
82214
// https://material.io/design/color/the-color-system.html#color-theme-creation.
83215
// As they were July 11, 2020.

0 commit comments

Comments
 (0)