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
This commit is contained in:
Shi-Hao Hong 2019-07-10 08:50:24 -07:00 committed by GitHub
parent 2b20345bb8
commit e7ef75680e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 31 additions and 25 deletions

View file

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

View file

@ -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<Color>], 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

View file

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

View file

@ -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(

View file

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

View file

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

View file

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

View file

@ -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 {