Add outlineVariant and scrim colors to ColorScheme (#109071)

Author: guidezpl

packages/flutter/lib/src/material/color_scheme.dart

@@ -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));

packages/flutter/test/material/color_scheme_test.dart

@@ -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);
   });