diff --git a/packages/flutter/lib/src/material/color_scheme.dart b/packages/flutter/lib/src/material/color_scheme.dart index bceecd88ab..c198904b54 100644 --- a/packages/flutter/lib/src/material/color_scheme.dart +++ b/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)); diff --git a/packages/flutter/test/material/color_scheme_test.dart b/packages/flutter/test/material/color_scheme_test.dart index e0e8601c7f..9b160a5a2b 100644 --- a/packages/flutter/test/material/color_scheme_test.dart +++ b/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); });