Skip to content

Commit

Permalink
Add outlineVariant and scrim colors to ColorScheme (flutter#109071
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@guidezpl
guidezpl authored Aug 8, 2022
1 parent acac615 commit d880c33
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 1 deletion.
47 changes: 46 additions & 1 deletion packages/flutter/lib/src/material/color_scheme.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
///
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -189,6 +193,7 @@ class ColorScheme with Diagnosticable {
Color? errorContainer,
Color? onErrorContainer,
Color? outline,
Color? outlineVariant,
Color? background,
Color? onBackground,
Color? surface,
Expand All @@ -199,6 +204,7 @@ class ColorScheme with Diagnosticable {
Color? onInverseSurface,
Color? inversePrimary,
Color? shadow,
Color? scrim,
Color? surfaceTint,
}) {
final Scheme scheme;
Expand Down Expand Up @@ -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),
Expand All @@ -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,
);
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -949,7 +990,9 @@ class ColorScheme with Diagnosticable {
surfaceVariant,
onSurfaceVariant,
outline,
outlineVariant,
shadow,
scrim,
inverseSurface,
onInverseSurface,
inversePrimary,
Expand Down Expand Up @@ -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));
Expand Down
18 changes: 18 additions & 0 deletions packages/flutter/test/material/color_scheme_test.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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));
Expand All @@ -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);
});
Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -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));
Expand All @@ -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);
});
Expand Down Expand Up @@ -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);
Expand All @@ -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);
});
Expand Down

0 comments on commit d880c33

Please sign in to comment.