firka/flutter
firka/flutter
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add outlineVariant and scrim colors to ColorScheme (#109071)

Browse Source
This commit is contained in:
Pierre-Louis 2022-08-08 19:24:04 +02:00 committed by GitHub
parent acac61539c
commit d880c33e7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 64 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
packages/flutter/lib/src/material/color_scheme.dart
View File

@ -9,7 +9,7 @@ import 'package:material_color_utilities/material_color_utilities.dart';
import 'colors.dart';
import 'theme_data.dart';
/// A set of 25 colors based on the
/// A set of 30 colors based on the
/// [Material spec](https://m3.material.io/styles/color/the-color-system/color-roles)
/// that can be used to configure the color properties of most components.
///
@ -100,7 +100,9 @@ class ColorScheme with Diagnosticable {
Color? surfaceVariant,
Color? onSurfaceVariant,
Color? outline,
Color? outlineVariant,
Color? shadow,
Color? scrim,
Color? inverseSurface,
Color? onInverseSurface,
Color? inversePrimary,
@ -139,7 +141,9 @@ class ColorScheme with Diagnosticable {
_surfaceVariant = surfaceVariant,
_onSurfaceVariant = onSurfaceVariant,
_outline = outline,
_outlineVariant = outlineVariant,
_shadow = shadow,
_scrim = scrim,
_inverseSurface = inverseSurface,
_onInverseSurface = onInverseSurface,
_inversePrimary = inversePrimary,
@ -189,6 +193,7 @@ class ColorScheme with Diagnosticable {
Color? errorContainer,
Color? onErrorContainer,
Color? outline,
Color? outlineVariant,
Color? background,
Color? onBackground,
Color? surface,
@ -199,6 +204,7 @@ class ColorScheme with Diagnosticable {
Color? onInverseSurface,
Color? inversePrimary,
Color? shadow,
Color? scrim,
Color? surfaceTint,
}) {
final Scheme scheme;
@ -228,6 +234,7 @@ class ColorScheme with Diagnosticable {
errorContainer: errorContainer ?? Color(scheme.errorContainer),
onErrorContainer: onErrorContainer ?? Color(scheme.onErrorContainer),
outline: outline ?? Color(scheme.outline),
outlineVariant: outlineVariant ?? Color(scheme.outlineVariant),
background: background ?? Color(scheme.background),
onBackground: onBackground ?? Color(scheme.onBackground),
surface: surface ?? Color(scheme.surface),
@ -238,6 +245,7 @@ class ColorScheme with Diagnosticable {
onInverseSurface: onInverseSurface ?? Color(scheme.inverseOnSurface),
inversePrimary: inversePrimary ?? Color(scheme.inversePrimary),
shadow: shadow ?? Color(scheme.shadow),
scrim: scrim ?? Color(scheme.scrim),
surfaceTint: surfaceTint ?? Color(scheme.primary),
brightness: brightness,
);
@ -270,7 +278,9 @@ class ColorScheme with Diagnosticable {
Color? surfaceVariant,
Color? onSurfaceVariant,
Color? outline,
Color? outlineVariant,
Color? shadow,
Color? scrim,
Color? inverseSurface,
Color? onInverseSurface,
Color? inversePrimary,
@ -309,7 +319,9 @@ class ColorScheme with Diagnosticable {
_surfaceVariant = surfaceVariant,
_onSurfaceVariant = onSurfaceVariant,
_outline = outline,
_outlineVariant = outlineVariant,
_shadow = shadow,
_scrim = scrim,
_inverseSurface = inverseSurface,
_onInverseSurface = onInverseSurface,
_inversePrimary = inversePrimary,
@ -344,7 +356,9 @@ class ColorScheme with Diagnosticable {
Color? surfaceVariant,
Color? onSurfaceVariant,
Color? outline,
Color? outlineVariant,
Color? shadow,
Color? scrim,
Color? inverseSurface,
Color? onInverseSurface,
Color? inversePrimary,
@ -383,7 +397,9 @@ class ColorScheme with Diagnosticable {
_surfaceVariant = surfaceVariant,
_onSurfaceVariant = onSurfaceVariant,
_outline = outline,
_outlineVariant = outlineVariant,
_shadow = shadow,
_scrim = scrim,
_inverseSurface = inverseSurface,
_onInverseSurface = onInverseSurface,
_inversePrimary = inversePrimary,
@ -418,7 +434,9 @@ class ColorScheme with Diagnosticable {
Color? surfaceVariant,
Color? onSurfaceVariant,
Color? outline,
Color? outlineVariant,
Color? shadow,
Color? scrim,
Color? inverseSurface,
Color? onInverseSurface,
Color? inversePrimary,
@ -457,7 +475,9 @@ class ColorScheme with Diagnosticable {
_surfaceVariant = surfaceVariant,
_onSurfaceVariant = onSurfaceVariant,
_outline = outline,
_outlineVariant = outlineVariant,
_shadow = shadow,
_scrim = scrim,
_inverseSurface = inverseSurface,
_onInverseSurface = onInverseSurface,
_inversePrimary = inversePrimary,
@ -492,7 +512,9 @@ class ColorScheme with Diagnosticable {
Color? surfaceVariant,
Color? onSurfaceVariant,
Color? outline,
Color? outlineVariant,
Color? shadow,
Color? scrim,
Color? inverseSurface,
Color? onInverseSurface,
Color? inversePrimary,
@ -531,7 +553,9 @@ class ColorScheme with Diagnosticable {
_surfaceVariant = surfaceVariant,
_onSurfaceVariant = onSurfaceVariant,
_outline = outline,
_outlineVariant = outlineVariant,
_shadow = shadow,
_scrim = scrim,
_inverseSurface = inverseSurface,
_onInverseSurface = onInverseSurface,
_inversePrimary = inversePrimary,
@ -718,10 +742,19 @@ class ColorScheme with Diagnosticable {
/// A utility color that creates boundaries and emphasis to improve usability.
Color get outline => _outline ?? onBackground;
final Color? _outlineVariant;
/// A utility color that creates boundaries for decorative elements when a
/// 3:1 contrast isn’t required, such as for dividers or decorative elements.
Color get outlineVariant => _outlineVariant ?? onBackground;
final Color? _shadow;
/// A color use to paint the drop shadows of elevated components.
Color get shadow => _shadow ?? const Color(0xff000000);
final Color? _scrim;
/// A color use to paint the scrim around of modal components.
Color get scrim => _scrim ?? const Color(0xff000000);
final Color? _inverseSurface;
/// A surface color used for displaying the reverse of what’s seen in the
/// surrounding UI, for example in a SnackBar to bring attention to
@ -790,7 +823,9 @@ class ColorScheme with Diagnosticable {
Color? surfaceVariant,
Color? onSurfaceVariant,
Color? outline,
Color? outlineVariant,
Color? shadow,
Color? scrim,
Color? inverseSurface,
Color? onInverseSurface,
Color? inversePrimary,
@ -831,7 +866,9 @@ class ColorScheme with Diagnosticable {
surfaceVariant : surfaceVariant ?? this.surfaceVariant,
onSurfaceVariant : onSurfaceVariant ?? this.onSurfaceVariant,
outline : outline ?? this.outline,
outlineVariant : outlineVariant ?? this.outlineVariant,
shadow : shadow ?? this.shadow,
scrim : scrim ?? this.scrim,
inverseSurface : inverseSurface ?? this.inverseSurface,
onInverseSurface : onInverseSurface ?? this.onInverseSurface,
inversePrimary : inversePrimary ?? this.inversePrimary,
@ -870,7 +907,9 @@ class ColorScheme with Diagnosticable {
surfaceVariant: Color.lerp(a.surfaceVariant, b.surfaceVariant, t),
onSurfaceVariant: Color.lerp(a.onSurfaceVariant, b.onSurfaceVariant, t),
outline: Color.lerp(a.outline, b.outline, t),
outlineVariant: Color.lerp(a.outlineVariant, b.outlineVariant, t),
shadow: Color.lerp(a.shadow, b.shadow, t),
scrim: Color.lerp(a.scrim, b.scrim, t),
inverseSurface: Color.lerp(a.inverseSurface, b.inverseSurface, t),
onInverseSurface: Color.lerp(a.onInverseSurface, b.onInverseSurface, t),
inversePrimary: Color.lerp(a.inversePrimary, b.inversePrimary, t),
@ -913,7 +952,9 @@ class ColorScheme with Diagnosticable {
&& other.surfaceVariant == surfaceVariant
&& other.onSurfaceVariant == onSurfaceVariant
&& other.outline == outline
&& other.outlineVariant == outlineVariant
&& other.shadow == shadow
&& other.scrim == scrim
&& other.inverseSurface == inverseSurface
&& other.onInverseSurface == onInverseSurface
&& other.inversePrimary == inversePrimary
@ -949,7 +990,9 @@ class ColorScheme with Diagnosticable {
surfaceVariant,
onSurfaceVariant,
outline,
outlineVariant,
shadow,
scrim,
inverseSurface,
onInverseSurface,
inversePrimary,
@ -987,7 +1030,9 @@ class ColorScheme with Diagnosticable {
properties.add(ColorProperty('surfaceVariant', surfaceVariant, defaultValue: defaultScheme.surfaceVariant));
properties.add(ColorProperty('onSurfaceVariant', onSurfaceVariant, defaultValue: defaultScheme.onSurfaceVariant));
properties.add(ColorProperty('outline', outline, defaultValue: defaultScheme.outline));
properties.add(ColorProperty('outlineVariant', outlineVariant, defaultValue: defaultScheme.outlineVariant));
properties.add(ColorProperty('shadow', shadow, defaultValue: defaultScheme.shadow));
properties.add(ColorProperty('scrim', scrim, defaultValue: defaultScheme.scrim));
properties.add(ColorProperty('inverseSurface', inverseSurface, defaultValue: defaultScheme.inverseSurface));
properties.add(ColorProperty('onInverseSurface', onInverseSurface, defaultValue: defaultScheme.onInverseSurface));
properties.add(ColorProperty('inversePrimary', inversePrimary, defaultValue: defaultScheme.inversePrimary));

18
packages/flutter/test/material/color_scheme_test.dart
View File

@ -36,7 +36,9 @@ void main() {
expect(scheme.surfaceVariant, scheme.surface);
expect(scheme.onSurfaceVariant, scheme.onSurface);
expect(scheme.outline, scheme.onBackground);
expect(scheme.outlineVariant, scheme.onBackground);
expect(scheme.shadow, const Color(0xff000000));
expect(scheme.scrim, const Color(0xff000000));
expect(scheme.inverseSurface, scheme.onSurface);
expect(scheme.onInverseSurface, scheme.surface);
expect(scheme.inversePrimary, scheme.onPrimary);
@ -76,7 +78,9 @@ void main() {
expect(scheme.surfaceVariant, scheme.surface);
expect(scheme.onSurfaceVariant, scheme.onSurface);
expect(scheme.outline, scheme.onBackground);
expect(scheme.outlineVariant, scheme.onBackground);
expect(scheme.shadow, const Color(0xff000000));
expect(scheme.scrim, const Color(0xff000000));
expect(scheme.inverseSurface, scheme.onSurface);
expect(scheme.onInverseSurface, scheme.surface);
expect(scheme.inversePrimary, scheme.onPrimary);
@ -116,7 +120,9 @@ void main() {
expect(scheme.surfaceVariant, scheme.surface);
expect(scheme.onSurfaceVariant, scheme.onSurface);
expect(scheme.outline, scheme.onBackground);
expect(scheme.outlineVariant, scheme.onBackground);
expect(scheme.shadow, const Color(0xff000000));
expect(scheme.scrim, const Color(0xff000000));
expect(scheme.inverseSurface, scheme.onSurface);
expect(scheme.onInverseSurface, scheme.surface);
expect(scheme.inversePrimary, scheme.onPrimary);
@ -156,7 +162,9 @@ void main() {
expect(scheme.surfaceVariant, scheme.surface);
expect(scheme.onSurfaceVariant, scheme.onSurface);
expect(scheme.outline, scheme.onBackground);
expect(scheme.outlineVariant, scheme.onBackground);
expect(scheme.shadow, const Color(0xff000000));
expect(scheme.scrim, const Color(0xff000000));
expect(scheme.inverseSurface, scheme.onSurface);
expect(scheme.onInverseSurface, scheme.surface);
expect(scheme.inversePrimary, scheme.onPrimary);
@ -185,6 +193,7 @@ void main() {
expect(scheme.errorContainer, const Color(0xffffdad6));
expect(scheme.onErrorContainer, const Color(0xff410002));
expect(scheme.outline, const Color(0xff73777f));
expect(scheme.outlineVariant, const Color(0xffc3c7cf));
expect(scheme.background, const Color(0xfffdfcff));
expect(scheme.onBackground, const Color(0xff1a1c1e));
expect(scheme.surface, const Color(0xfffdfcff));
@ -195,6 +204,7 @@ void main() {
expect(scheme.onInverseSurface, const Color(0xfff1f0f4));
expect(scheme.inversePrimary, const Color(0xff9ecaff));
expect(scheme.shadow, const Color(0xff000000));
expect(scheme.scrim, const Color(0xff000000));
expect(scheme.surfaceTint, const Color(0xff0061a4));
expect(scheme.brightness, Brightness.light);
});
@ -225,7 +235,9 @@ void main() {
surfaceVariant: const Color(0x00000015),
onSurfaceVariant: const Color(0x00000016),
outline: const Color(0x00000017),
outlineVariant: const Color(0x00000117),
shadow: const Color(0x00000018),
scrim: const Color(0x00000118),
inverseSurface: const Color(0x00000019),
onInverseSurface: const Color(0x0000001A),
inversePrimary: const Color(0x0000001B),
@ -259,7 +271,9 @@ void main() {
expect(scheme.surfaceVariant, const Color(0x00000015));
expect(scheme.onSurfaceVariant, const Color(0x00000016));
expect(scheme.outline, const Color(0x00000017));
expect(scheme.outlineVariant, const Color(0x00000117));
expect(scheme.shadow, const Color(0x00000018));
expect(scheme.scrim, const Color(0x00000118));
expect(scheme.inverseSurface, const Color(0x00000019));
expect(scheme.onInverseSurface, const Color(0x0000001A));
expect(scheme.inversePrimary, const Color(0x0000001B));
@ -288,6 +302,7 @@ void main() {
expect(scheme.errorContainer, const Color(0xff93000a));
expect(scheme.onErrorContainer, const Color(0xffffb4ab));
expect(scheme.outline, const Color(0xff8d9199));
expect(scheme.outlineVariant, const Color(0xff43474e));
expect(scheme.background, const Color(0xff1a1c1e));
expect(scheme.onBackground, const Color(0xffe2e2e6));
expect(scheme.surface, const Color(0xff1a1c1e));
@ -298,6 +313,7 @@ void main() {
expect(scheme.onInverseSurface, const Color(0xff2f3033));
expect(scheme.inversePrimary, const Color(0xff0061a4));
expect(scheme.shadow, const Color(0xff000000));
expect(scheme.scrim, const Color(0xff000000));
expect(scheme.surfaceTint, const Color(0xff9ecaff));
expect(scheme.brightness, Brightness.dark);
});
@ -327,6 +343,7 @@ void main() {
expect(scheme.errorContainer, baseScheme.errorContainer);
expect(scheme.onErrorContainer, baseScheme.onErrorContainer);
expect(scheme.outline, baseScheme.outline);
expect(scheme.outlineVariant, baseScheme.outlineVariant);
expect(scheme.background, baseScheme.background);
expect(scheme.onBackground, baseScheme.onBackground);
expect(scheme.surface, baseScheme.surface);
@ -337,6 +354,7 @@ void main() {
expect(scheme.onInverseSurface, baseScheme.onInverseSurface);
expect(scheme.inversePrimary, baseScheme.inversePrimary);
expect(scheme.shadow, baseScheme.shadow);
expect(scheme.scrim, baseScheme.shadow);
expect(scheme.surfaceTint, baseScheme.surfaceTint);
expect(scheme.brightness, baseScheme.brightness);
});