From e7ef75680ece2afde363f39a2f218574aada104d Mon Sep 17 00:00:00 2001 From: Shi-Hao Hong Date: Wed, 10 Jul 2019 08:50:24 -0700 Subject: [PATCH] Update Dark Theme disabledColor to White38 (#35136) * Add Colors.white38 * Update ThemeData.disabledColor and ButtonThemeData.disabledColor to Colors.white38 * Update pre-existing tests to expect Colors.white38 instead of Colors.white30 * Update API documentation to reflect these changes --- examples/stocks/test/icon_color_test.dart | 2 +- .../lib/src/material/button_theme.dart | 14 +++------ packages/flutter/lib/src/material/colors.dart | 30 +++++++++++++------ .../flutter/lib/src/material/data_table.dart | 2 +- .../flutter/lib/src/material/expand_icon.dart | 2 +- .../flutter/lib/src/material/stepper.dart | 2 +- .../flutter/lib/src/material/theme_data.dart | 2 +- .../test/material/expand_icon_test.dart | 2 +- 8 files changed, 31 insertions(+), 25 deletions(-) diff --git a/examples/stocks/test/icon_color_test.dart b/examples/stocks/test/icon_color_test.dart index 5dedeb4a7f8..b36b214ae47 100644 --- a/examples/stocks/test/icon_color_test.dart +++ b/examples/stocks/test/icon_color_test.dart @@ -85,7 +85,7 @@ void main() { // check the color of the icon - dark mode checkIconColor(tester, 'Stock List', Colors.redAccent); // theme accent color - checkIconColor(tester, 'Account Balance', Colors.white30); // disabled + checkIconColor(tester, 'Account Balance', Colors.white38); // disabled checkIconColor(tester, 'About', Colors.white); // enabled }); } diff --git a/packages/flutter/lib/src/material/button_theme.dart b/packages/flutter/lib/src/material/button_theme.dart index 742f9e2b9c1..0102034a1c4 100644 --- a/packages/flutter/lib/src/material/button_theme.dart +++ b/packages/flutter/lib/src/material/button_theme.dart @@ -468,18 +468,12 @@ class ButtonThemeData extends Diagnosticable { return button.textTheme ?? textTheme; } - Color _getDisabledColor(MaterialButton button) { - return getBrightness(button) == Brightness.dark - ? colorScheme.onSurface.withOpacity(0.30) // default == Colors.white30 - : colorScheme.onSurface.withOpacity(0.38); // default == Colors.black38; - } - /// The foreground color of the [button]'s text and icon when /// [MaterialButton.onPressed] is null (when MaterialButton.enabled is false). /// /// Returns the button's [MaterialButton.disabledColor] if it is non-null. /// Otherwise the color scheme's [ColorScheme.onSurface] color is returned - /// with its opacity set to 0.30 if [getBrightness] is dark, 0.38 otherwise. + /// with its opacity set to 0.38. /// /// If [MaterialButton.textColor] is a [MaterialStateProperty], it will be /// used as the `disabledTextColor`. It will be resolved in the [MaterialState.disabled] state. @@ -488,7 +482,7 @@ class ButtonThemeData extends Diagnosticable { return button.textColor; if (button.disabledTextColor != null) return button.disabledTextColor; - return _getDisabledColor(button); + return colorScheme.onSurface.withOpacity(0.38); } /// The [button]'s background color when [MaterialButton.onPressed] is null @@ -500,13 +494,13 @@ class ButtonThemeData extends Diagnosticable { /// is returned, if it is non-null. /// /// Otherwise the color scheme's [ColorScheme.onSurface] color is returned - /// with its opacity set to 0.3 if [getBrightness] is dark, 0.38 otherwise. + /// with its opacity set to 0.38. Color getDisabledFillColor(MaterialButton button) { if (button.disabledColor != null) return button.disabledColor; if (_disabledColor != null) return _disabledColor; - return _getDisabledColor(button); + return colorScheme.onSurface.withOpacity(0.38); } /// The button's background fill color or null for buttons that don't have diff --git a/packages/flutter/lib/src/material/colors.dart b/packages/flutter/lib/src/material/colors.dart index 7f2131d6c0b..6c2fbd75cd4 100644 --- a/packages/flutter/lib/src/material/colors.dart +++ b/packages/flutter/lib/src/material/colors.dart @@ -303,7 +303,7 @@ class Colors { /// * [Typography.white], which uses this color for its text styles. /// * [Theme.of], which allows you to select colors from the current theme /// rather than hard-coding colors in your build methods. - /// * [white70, white60, white54, white30, white12, white10], which are variants on this color + /// * [white70, white60, white54, white38, white30, white12, white10], which are variants on this color /// but with different opacities. /// * [black], a solid black color. /// * [transparent], a fully-transparent color. @@ -320,7 +320,7 @@ class Colors { /// * [Typography.white], which uses this color for its text styles. /// * [Theme.of], which allows you to select colors from the current theme /// rather than hard-coding colors in your build methods. - /// * [white, white60, white54, white30, white12, white10], which are variants on this color + /// * [white, white60, white54, white38, white30, white12, white10], which are variants on this color /// but with different opacities. static const Color white70 = Color(0xB3FFFFFF); @@ -336,7 +336,7 @@ class Colors { /// * [ExpandIcon], which uses this color for dark themes. /// * [Theme.of], which allows you to select colors from the current theme /// rather than hard-coding colors in your build methods. - /// * [white, white54, white30, white12, white10], which are variants on this color + /// * [white, white54, white30, white38, white12, white10], which are variants on this color /// but with different opacities. static const Color white60 = Color(0x99FFFFFF); @@ -348,11 +348,11 @@ class Colors { /// /// * [Theme.of], which allows you to select colors from the current theme /// rather than hard-coding colors in your build methods. - /// * [white, white60, white30, white12, white10], which are variants on this color + /// * [white, white60, white38, white30, white12, white10], which are variants on this color /// but with different opacities. static const Color white54 = Color(0x8AFFFFFF); - /// White with 30% opacity. + /// White with 38% opacity. /// /// Used for disabled radio buttons and the text of disabled flat buttons in dark themes. /// @@ -363,7 +363,19 @@ class Colors { /// * [ThemeData.disabledColor], which uses this color by default in dark themes. /// * [Theme.of], which allows you to select colors from the current theme /// rather than hard-coding colors in your build methods. - /// * [white, white60, white54, white70, white12, white10], which are variants on this color + /// * [white, white60, white54, white70, white30, white12, white10], which are variants on this color + /// but with different opacities. + static const Color white38 = Color(0x62FFFFFF); + + /// White with 30% opacity. + /// + /// ![](https://flutter.github.io/assets-for-api-docs/assets/material/Colors.whites.png) + /// + /// See also: + /// + /// * [Theme.of], which allows you to select colors from the current theme + /// rather than hard-coding colors in your build methods. + /// * [white, white60, white54, white70, white38, white12, white10], which are variants on this color /// but with different opacities. static const Color white30 = Color(0x4DFFFFFF); @@ -375,7 +387,7 @@ class Colors { /// /// See also: /// - /// * [white, white60, white54, white70, white30, white10], which are variants on this color + /// * [white, white60, white54, white70, white38, white30, white10], which are variants on this color /// but with different opacities. static const Color white24 = Color(0x3DFFFFFF); @@ -387,7 +399,7 @@ class Colors { /// /// See also: /// - /// * [white, white60, white54, white70, white30, white10], which are variants on this color + /// * [white, white60, white54, white70, white38, white30, white10], which are variants on this color /// but with different opacities. static const Color white12 = Color(0x1FFFFFFF); @@ -397,7 +409,7 @@ class Colors { /// /// See also: /// - /// * [white, white60, white54, white70, white30, white12], which are variants on this color + /// * [white, white60, white54, white70, white38, white30, white12], which are variants on this color /// but with different opacities. /// * [transparent], a fully-transparent color, not far from this one. static const Color white10 = Color(0x1AFFFFFF); diff --git a/packages/flutter/lib/src/material/data_table.dart b/packages/flutter/lib/src/material/data_table.dart index 47ad31fce06..60822095313 100644 --- a/packages/flutter/lib/src/material/data_table.dart +++ b/packages/flutter/lib/src/material/data_table.dart @@ -505,7 +505,7 @@ class DataTable extends StatelessWidget { fontSize: 13.0, color: isLightTheme ? (placeholder ? Colors.black38 : Colors.black87) - : (placeholder ? Colors.white30 : Colors.white70), + : (placeholder ? Colors.white38 : Colors.white70), ), child: IconTheme.merge( data: IconThemeData( diff --git a/packages/flutter/lib/src/material/expand_icon.dart b/packages/flutter/lib/src/material/expand_icon.dart index 6f6e52f464c..488f3df38d8 100644 --- a/packages/flutter/lib/src/material/expand_icon.dart +++ b/packages/flutter/lib/src/material/expand_icon.dart @@ -81,7 +81,7 @@ class ExpandIcon extends StatefulWidget { /// /// Defaults to [Colors.black38] when the theme's /// [ThemeData.brightness] is [Brightness.light] and to - /// [Colors.white30] when it is [Brightness.dark]. This adheres to the + /// [Colors.white38] when it is [Brightness.dark]. This adheres to the /// Material Design specifications for [icons](https://material.io/design/iconography/system-icons.html#color) /// and for [dark theme](https://material.io/design/color/dark-theme.html#ui-application) final Color disabledColor; diff --git a/packages/flutter/lib/src/material/stepper.dart b/packages/flutter/lib/src/material/stepper.dart index 291c445d924..a63a7dada9c 100644 --- a/packages/flutter/lib/src/material/stepper.dart +++ b/packages/flutter/lib/src/material/stepper.dart @@ -62,7 +62,7 @@ final Color _kErrorDark = Colors.red.shade400; const Color _kCircleActiveLight = Colors.white; const Color _kCircleActiveDark = Colors.black87; const Color _kDisabledLight = Colors.black38; -const Color _kDisabledDark = Colors.white30; +const Color _kDisabledDark = Colors.white38; const double _kStepSize = 24.0; const double _kTriangleHeight = _kStepSize * 0.866025; // Triangle height. sqrt(3.0) / 2.0 diff --git a/packages/flutter/lib/src/material/theme_data.dart b/packages/flutter/lib/src/material/theme_data.dart index 62cb7a53ac3..53dc55883c7 100644 --- a/packages/flutter/lib/src/material/theme_data.dart +++ b/packages/flutter/lib/src/material/theme_data.dart @@ -249,7 +249,7 @@ class ThemeData extends Diagnosticable { splashColor: splashColor, materialTapTargetSize: materialTapTargetSize, ); - disabledColor ??= isDark ? Colors.white30 : Colors.black38; + disabledColor ??= isDark ? Colors.white38 : Colors.black38; highlightColor ??= isDark ? _kDarkThemeHighlightColor : _kLightThemeHighlightColor; splashColor ??= isDark ? _kDarkThemeSplashColor : _kLightThemeSplashColor; diff --git a/packages/flutter/test/material/expand_icon_test.dart b/packages/flutter/test/material/expand_icon_test.dart index 16dc6de25d0..9cf2b6200e0 100644 --- a/packages/flutter/test/material/expand_icon_test.dart +++ b/packages/flutter/test/material/expand_icon_test.dart @@ -92,7 +92,7 @@ void main() { await tester.pumpAndSettle(); iconTheme = tester.firstWidget(find.byType(IconTheme).last); - expect(iconTheme.data.color, equals(Colors.white30)); + expect(iconTheme.data.color, equals(Colors.white38)); }); testWidgets('ExpandIcon test isExpanded does not trigger callback', (WidgetTester tester) async {