Skip to content

GitLab

T
tangled
Commit ad94c629 authored by Peter Kasting's avatar Peter Kasting Committed by Commit Bot
Browse files
Options

Simplify secondary UI colors further after self-review. 

* Remove dedicated link core color concept.  Links are now the same blue as
  (almost) everything else that's blue.
* Change how disabled prominent button backgrounds are computed, since the old
  way wasn't really justifiable semantically.
* Unify border and separator colors.

Bug: 1024091
Change-Id: Iec17f1d65133c32603a0ebe19d654d14897e0ee9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1925777Reviewed-by: default avatarRobert Liao <robliao@chromium.org>
Commit-Queue: Peter Kasting <pkasting@chromium.org>
Cr-Commit-Position: refs/heads/master@{#717176}
parent 30c41bbb
Hide whitespace changes
Inline Side-by-side
Showing with 42 additions and 50 deletions
ui/color/color_id.h
View file @ ad94c629
...@@ -23,14 +23,13 @@ enum ColorIds : ColorId { ...@@ -23,14 +23,13 @@ enum ColorIds : ColorId {
kColorAlertHighSeverity, kColorAlertHighSeverity,
kColorAlertLowSeverity, kColorAlertLowSeverity,
kColorAlertMediumSeverity, kColorAlertMediumSeverity,
kColorBorderAndSeparatorForeground,
kColorDisabledForeground, kColorDisabledForeground,
kColorLinkForeground, kColorItemSelectionBackground,
kColorPrimaryBackground, kColorPrimaryBackground,
kColorPrimaryForeground, kColorPrimaryForeground,
kColorSecondaryBackground,
kColorSecondaryBackgroundSubtle,
kColorSecondaryForeground, kColorSecondaryForeground,
kColorSeparatorForeground, kColorSubtleEmphasisBackground,
kColorTextSelectionBackground, kColorTextSelectionBackground,
// Further UI element colors // Further UI element colors
...@@ -56,6 +55,7 @@ enum ColorIds : ColorId { ...@@ -56,6 +55,7 @@ enum ColorIds : ColorId {
kColorLabelSelectionBackground, kColorLabelSelectionBackground,
kColorLabelSelectionForeground, kColorLabelSelectionForeground,
kColorLinkDisabledForeground, kColorLinkDisabledForeground,
kColorLinkForeground,
kColorLinkPressedForeground, kColorLinkPressedForeground,
kColorMenuBackground, kColorMenuBackground,
kColorMenuBorder, kColorMenuBorder,
......
ui/color/core_default_color_mixer.cc
View file @ ad94c629
...@@ -28,12 +28,11 @@ ColorMixer& AddMixerForDarkMode(ColorProvider* provider) { ...@@ -28,12 +28,11 @@ ColorMixer& AddMixerForDarkMode(ColorProvider* provider) {
{kColorAlertHighSeverity, gfx::kGoogleRed300}, {kColorAlertHighSeverity, gfx::kGoogleRed300},
{kColorAlertLowSeverity, gfx::kGoogleGreen300}, {kColorAlertLowSeverity, gfx::kGoogleGreen300},
{kColorAlertMediumSeverity, gfx::kGoogleYellow300}, {kColorAlertMediumSeverity, gfx::kGoogleYellow300},
{kColorSecondaryForeground, gfx::kGoogleGrey500}, {kColorBorderAndSeparatorForeground, gfx::kGoogleGrey800},
{kColorLinkForeground, gfx::kGoogleBlue300},
{kColorPrimaryBackground, SkColorSetRGB(0x29, 0x2A, 0x2D)}, {kColorPrimaryBackground, SkColorSetRGB(0x29, 0x2A, 0x2D)},
{kColorPrimaryForeground, gfx::kGoogleGrey200}, {kColorPrimaryForeground, gfx::kGoogleGrey200},
{kColorSecondaryBackgroundSubtle, SkColorSetRGB(0x32, 0x36, 0x39)}, {kColorSecondaryForeground, gfx::kGoogleGrey500},
{kColorSeparatorForeground, gfx::kGoogleGrey800}, {kColorSubtleEmphasisBackground, SkColorSetRGB(0x32, 0x36, 0x39)},
{kColorTextSelectionBackground, gfx::kGoogleBlue800}, {kColorTextSelectionBackground, gfx::kGoogleBlue800},
}}); }});
return mixer; return mixer;
...@@ -47,12 +46,11 @@ ColorMixer& AddMixerForLightMode(ColorProvider* provider) { ...@@ -47,12 +46,11 @@ ColorMixer& AddMixerForLightMode(ColorProvider* provider) {
{kColorAlertHighSeverity, gfx::kGoogleRed600}, {kColorAlertHighSeverity, gfx::kGoogleRed600},
{kColorAlertLowSeverity, gfx::kGoogleGreen700}, {kColorAlertLowSeverity, gfx::kGoogleGreen700},
{kColorAlertMediumSeverity, gfx::kGoogleYellow700}, {kColorAlertMediumSeverity, gfx::kGoogleYellow700},
{kColorSecondaryForeground, gfx::kGoogleGrey700}, {kColorBorderAndSeparatorForeground, gfx::kGoogleGrey300},
{kColorLinkForeground, gfx::kGoogleBlue700},
{kColorPrimaryBackground, SK_ColorWHITE}, {kColorPrimaryBackground, SK_ColorWHITE},
{kColorPrimaryForeground, gfx::kGoogleGrey900}, {kColorPrimaryForeground, gfx::kGoogleGrey900},
{kColorSecondaryBackgroundSubtle, gfx::kGoogleGrey050}, {kColorSecondaryForeground, gfx::kGoogleGrey700},
{kColorSeparatorForeground, gfx::kGoogleGrey300}, {kColorSubtleEmphasisBackground, gfx::kGoogleGrey050},
{kColorTextSelectionBackground, gfx::kGoogleBlue200}, {kColorTextSelectionBackground, gfx::kGoogleBlue200},
}}); }});
return mixer; return mixer;
...@@ -65,7 +63,7 @@ void AddCoreDefaultColorMixers(ColorProvider* provider, bool dark_window) { ...@@ -65,7 +63,7 @@ void AddCoreDefaultColorMixers(ColorProvider* provider, bool dark_window) {
: AddMixerForLightMode(provider); : AddMixerForLightMode(provider);
mixer[kColorDisabledForeground] = BlendForMinContrast( mixer[kColorDisabledForeground] = BlendForMinContrast(
gfx::kGoogleGrey600, kColorPrimaryBackground, kColorPrimaryForeground); gfx::kGoogleGrey600, kColorPrimaryBackground, kColorPrimaryForeground);
mixer[kColorSecondaryBackground] = mixer[kColorItemSelectionBackground] =
BlendForMinContrastWithSelf(kColorPrimaryBackground, 1.67f); BlendForMinContrastWithSelf(kColorPrimaryBackground, 1.67f);
// TODO(pkasting): High contrast? // TODO(pkasting): High contrast?
} }
......
ui/color/ui_color_mixer.cc
View file @ ad94c629
...@@ -16,16 +16,15 @@ void AddUiColorMixers(ColorProvider* provider) { ...@@ -16,16 +16,15 @@ void AddUiColorMixers(ColorProvider* provider) {
ColorMixer& mixer = provider->AddMixer(); ColorMixer& mixer = provider->AddMixer();
mixer[kColorBubbleBackground] = {kColorPrimaryBackground}; mixer[kColorBubbleBackground] = {kColorPrimaryBackground};
mixer[kColorBubbleFooterBackground] = {kColorSecondaryBackgroundSubtle}; mixer[kColorBubbleFooterBackground] = {kColorSubtleEmphasisBackground};
mixer[kColorButtonBackground] = {kColorPrimaryBackground}; mixer[kColorButtonBackground] = {kColorPrimaryBackground};
mixer[kColorButtonBorder] = {kColorSecondaryBackground}; mixer[kColorButtonBorder] = {kColorBorderAndSeparatorForeground};
mixer[kColorButtonDisabledForeground] = {kColorDisabledForeground}; mixer[kColorButtonDisabledForeground] = {kColorDisabledForeground};
mixer[kColorButtonForeground] = {kColorAccent}; mixer[kColorButtonForeground] = {kColorAccent};
mixer[kColorButtonPressedBackground] = {kColorButtonBackground}; mixer[kColorButtonPressedBackground] = {kColorButtonBackground};
mixer[kColorButtonProminentBackground] = {kColorAccent}; mixer[kColorButtonProminentBackground] = {kColorAccent};
mixer[kColorButtonProminentDisabledBackground] = mixer[kColorButtonProminentDisabledBackground] =
AlphaBlend(kColorSecondaryBackground, kColorButtonBackground, BlendForMinContrastWithSelf(kColorButtonBackground, 1.2f);
gfx::kDisabledControlAlpha);
mixer[kColorButtonProminentFocusedBackground] = mixer[kColorButtonProminentFocusedBackground] =
BlendForMinContrastWithSelf(kColorButtonProminentBackground, 1.3f); BlendForMinContrastWithSelf(kColorButtonProminentBackground, 1.3f);
mixer[kColorButtonProminentForeground] = mixer[kColorButtonProminentForeground] =
...@@ -34,7 +33,7 @@ void AddUiColorMixers(ColorProvider* provider) { ...@@ -34,7 +33,7 @@ void AddUiColorMixers(ColorProvider* provider) {
mixer[kColorDialogBackground] = {kColorPrimaryBackground}; mixer[kColorDialogBackground] = {kColorPrimaryBackground};
mixer[kColorDialogForeground] = {kColorSecondaryForeground}; mixer[kColorDialogForeground] = {kColorSecondaryForeground};
mixer[kColorFocusableBorderFocused] = SetAlpha(kColorAccent, 0x4D); mixer[kColorFocusableBorderFocused] = SetAlpha(kColorAccent, 0x4D);
mixer[kColorFocusableBorderUnfocused] = {kColorSecondaryBackground}; mixer[kColorFocusableBorderUnfocused] = {kColorBorderAndSeparatorForeground};
mixer[kColorIcon] = {kColorSecondaryForeground}; mixer[kColorIcon] = {kColorSecondaryForeground};
mixer[kColorLabelDisabledForeground] = {kColorDisabledForeground}; mixer[kColorLabelDisabledForeground] = {kColorDisabledForeground};
mixer[kColorLabelForeground] = {kColorPrimaryForeground}; mixer[kColorLabelForeground] = {kColorPrimaryForeground};
...@@ -42,19 +41,19 @@ void AddUiColorMixers(ColorProvider* provider) { ...@@ -42,19 +41,19 @@ void AddUiColorMixers(ColorProvider* provider) {
mixer[kColorLabelSelectionForeground] = {kColorLabelForeground}; mixer[kColorLabelSelectionForeground] = {kColorLabelForeground};
mixer[kColorLinkDisabledForeground] = {kColorDisabledForeground}; mixer[kColorLinkDisabledForeground] = {kColorDisabledForeground};
mixer[kColorLinkPressedForeground] = {kColorLinkForeground}; mixer[kColorLinkPressedForeground] = {kColorLinkForeground};
mixer[kColorLinkForeground] = {kColorAccent};
mixer[kColorMenuBackground] = {kColorPrimaryBackground}; mixer[kColorMenuBackground] = {kColorPrimaryBackground};
mixer[kColorMenuBorder] = {kColorSecondaryBackground}; mixer[kColorMenuBorder] = {kColorBorderAndSeparatorForeground};
mixer[kColorMenuItemAlertedBackground] = {kColorAccent}; mixer[kColorMenuItemAlertedBackground] = {kColorAccent};
mixer[kColorMenuItemDisabledForeground] = {kColorDisabledForeground}; mixer[kColorMenuItemDisabledForeground] = {kColorDisabledForeground};
mixer[kColorMenuItemForeground] = {kColorPrimaryForeground}; mixer[kColorMenuItemForeground] = {kColorPrimaryForeground};
mixer[kColorMenuItemHighlightedBackground] = { mixer[kColorMenuItemHighlightedBackground] = {kColorSubtleEmphasisBackground};
kColorSecondaryBackgroundSubtle};
mixer[kColorMenuItemHighlightedForeground] = {kColorMenuItemForeground}; mixer[kColorMenuItemHighlightedForeground] = {kColorMenuItemForeground};
mixer[kColorMenuItemSecondaryForeground] = {kColorSecondaryForeground}; mixer[kColorMenuItemSecondaryForeground] = {kColorSecondaryForeground};
mixer[kColorMenuItemSelectedBackground] = {kColorSecondaryBackground}; mixer[kColorMenuItemSelectedBackground] = {kColorItemSelectionBackground};
mixer[kColorMenuItemSelectedForeground] = {kColorMenuItemForeground}; mixer[kColorMenuItemSelectedForeground] = {kColorMenuItemForeground};
mixer[kColorMenuSeparator] = {kColorSeparatorForeground}; mixer[kColorMenuSeparator] = {kColorBorderAndSeparatorForeground};
mixer[kColorTabContentSeparator] = {kColorSecondaryBackground}; mixer[kColorTabContentSeparator] = {kColorBorderAndSeparatorForeground};
mixer[kColorTabForeground] = {kColorSecondaryForeground}; mixer[kColorTabForeground] = {kColorSecondaryForeground};
mixer[kColorTabSelectedForeground] = {kColorAccent}; mixer[kColorTabSelectedForeground] = {kColorAccent};
mixer[kColorTableBackground] = {kColorPrimaryBackground}; mixer[kColorTableBackground] = {kColorPrimaryBackground};
...@@ -62,8 +61,8 @@ void AddUiColorMixers(ColorProvider* provider) { ...@@ -62,8 +61,8 @@ void AddUiColorMixers(ColorProvider* provider) {
mixer[kColorTableGroupingIndicator] = {kColorTableSelectedFocusedBackground}; mixer[kColorTableGroupingIndicator] = {kColorTableSelectedFocusedBackground};
mixer[kColorTableHeaderBackground] = {kColorTableBackground}; mixer[kColorTableHeaderBackground] = {kColorTableBackground};
mixer[kColorTableHeaderForeground] = {kColorTableForeground}; mixer[kColorTableHeaderForeground] = {kColorTableForeground};
mixer[kColorTableHeaderSeparator] = {kColorSeparatorForeground}; mixer[kColorTableHeaderSeparator] = {kColorBorderAndSeparatorForeground};
mixer[kColorTableSelectedFocusedBackground] = {kColorSecondaryBackground}; mixer[kColorTableSelectedFocusedBackground] = {kColorItemSelectionBackground};
mixer[kColorTableSelectedFocusedForeground] = {kColorTableForeground}; mixer[kColorTableSelectedFocusedForeground] = {kColorTableForeground};
mixer[kColorTableSelectedUnfocusedBackground] = { mixer[kColorTableSelectedUnfocusedBackground] = {
kColorTableSelectedFocusedBackground}; kColorTableSelectedFocusedBackground};
...@@ -83,7 +82,8 @@ void AddUiColorMixers(ColorProvider* provider) { ...@@ -83,7 +82,8 @@ void AddUiColorMixers(ColorProvider* provider) {
SetAlpha(GetColorWithMaxContrast(kColorTooltipBackground), 0xDE); SetAlpha(GetColorWithMaxContrast(kColorTooltipBackground), 0xDE);
mixer[kColorTreeBackground] = {kColorPrimaryBackground}; mixer[kColorTreeBackground] = {kColorPrimaryBackground};
mixer[kColorTreeNodeForeground] = {kColorPrimaryForeground}; mixer[kColorTreeNodeForeground] = {kColorPrimaryForeground};
mixer[kColorTreeNodeSelectedFocusedBackground] = {kColorSecondaryBackground}; mixer[kColorTreeNodeSelectedFocusedBackground] = {
kColorItemSelectionBackground};
mixer[kColorTreeNodeSelectedFocusedForeground] = {kColorTreeNodeForeground}; mixer[kColorTreeNodeSelectedFocusedForeground] = {kColorTreeNodeForeground};
mixer[kColorTreeNodeSelectedUnfocusedBackground] = { mixer[kColorTreeNodeSelectedUnfocusedBackground] = {
kColorTreeNodeSelectedFocusedBackground}; kColorTreeNodeSelectedFocusedBackground};
......
ui/native_theme/common_theme.cc
View file @ ad94c629
...@@ -61,6 +61,8 @@ SkColor GetAuraColor(NativeTheme::ColorId color_id, ...@@ -61,6 +61,8 @@ SkColor GetAuraColor(NativeTheme::ColorId color_id,
// FocusableBorder // FocusableBorder
case NativeTheme::kColorId_FocusedBorderColor: case NativeTheme::kColorId_FocusedBorderColor:
return SkColorSetA(gfx::kGoogleBlue300, 0x4D); return SkColorSetA(gfx::kGoogleBlue300, 0x4D);
case NativeTheme::kColorId_UnfocusedBorderColor:
return gfx::kGoogleGrey800;
// Button // Button
case NativeTheme::kColorId_ButtonEnabledColor: case NativeTheme::kColorId_ButtonEnabledColor:
...@@ -70,12 +72,15 @@ SkColor GetAuraColor(NativeTheme::ColorId color_id, ...@@ -70,12 +72,15 @@ SkColor GetAuraColor(NativeTheme::ColorId color_id,
return gfx::kGoogleGrey500; return gfx::kGoogleGrey500;
case NativeTheme::kColorId_TextOnProminentButtonColor: case NativeTheme::kColorId_TextOnProminentButtonColor:
return gfx::kGoogleGrey900; return gfx::kGoogleGrey900;
case NativeTheme::kColorId_ButtonBorderColor:
return gfx::kGoogleGrey800;
// MenuItem // MenuItem
case NativeTheme::kColorId_EnabledMenuItemForegroundColor: case NativeTheme::kColorId_EnabledMenuItemForegroundColor:
case NativeTheme::kColorId_SelectedMenuItemForegroundColor: case NativeTheme::kColorId_SelectedMenuItemForegroundColor:
case NativeTheme::kColorId_HighlightedMenuItemForegroundColor: case NativeTheme::kColorId_HighlightedMenuItemForegroundColor:
return gfx::kGoogleGrey200; return gfx::kGoogleGrey200;
case NativeTheme::kColorId_MenuBorderColor:
case NativeTheme::kColorId_MenuSeparatorColor: case NativeTheme::kColorId_MenuSeparatorColor:
return gfx::kGoogleGrey800; return gfx::kGoogleGrey800;
case NativeTheme::kColorId_MenuBackgroundColor: case NativeTheme::kColorId_MenuBackgroundColor:
...@@ -109,6 +114,8 @@ SkColor GetAuraColor(NativeTheme::ColorId color_id, ...@@ -109,6 +114,8 @@ SkColor GetAuraColor(NativeTheme::ColorId color_id,
return gfx::kGoogleBlue300; return gfx::kGoogleBlue300;
case NativeTheme::kColorId_TabTitleColorInactive: case NativeTheme::kColorId_TabTitleColorInactive:
return gfx::kGoogleGrey500; return gfx::kGoogleGrey500;
case NativeTheme::kColorId_TabBottomBorder:
return gfx::kGoogleGrey800;
// Table // Table
case NativeTheme::kColorId_TableBackground: case NativeTheme::kColorId_TableBackground:
...@@ -198,31 +205,26 @@ SkColor GetAuraColor(NativeTheme::ColorId color_id, ...@@ -198,31 +205,26 @@ SkColor GetAuraColor(NativeTheme::ColorId color_id,
.color; .color;
} }
case NativeTheme::kColorId_ProminentButtonDisabledColor: { case NativeTheme::kColorId_ProminentButtonDisabledColor: {
const SkColor fg = base_theme->GetSystemColor(
NativeTheme::kColorId_ButtonBorderColor, color_scheme);
const SkColor bg = base_theme->GetSystemColor( const SkColor bg = base_theme->GetSystemColor(
NativeTheme::kColorId_DialogBackground, color_scheme); NativeTheme::kColorId_DialogBackground, color_scheme);
return color_utils::AlphaBlend(fg, bg, gfx::kDisabledControlAlpha); return color_utils::BlendForMinContrast(bg, bg, base::nullopt, 1.2f)
}
case NativeTheme::kColorId_ButtonBorderColor: {
const SkColor bg = base_theme->GetSystemColor(
NativeTheme::kColorId_DialogBackground, color_scheme);
return color_utils::BlendForMinContrast(bg, bg, base::nullopt, 1.67f)
.color; .color;
} }
case NativeTheme::kColorId_ButtonBorderColor:
return gfx::kGoogleGrey300;
// MenuItem // MenuItem
case NativeTheme::kColorId_EnabledMenuItemForegroundColor: case NativeTheme::kColorId_EnabledMenuItemForegroundColor:
case NativeTheme::kColorId_SelectedMenuItemForegroundColor: case NativeTheme::kColorId_SelectedMenuItemForegroundColor:
case NativeTheme::kColorId_HighlightedMenuItemForegroundColor: case NativeTheme::kColorId_HighlightedMenuItemForegroundColor:
return kPrimaryTextColor; return kPrimaryTextColor;
case NativeTheme::kColorId_FocusedMenuItemBackgroundColor: case NativeTheme::kColorId_FocusedMenuItemBackgroundColor: {
case NativeTheme::kColorId_MenuBorderColor: {
const SkColor bg = base_theme->GetSystemColor( const SkColor bg = base_theme->GetSystemColor(
NativeTheme::kColorId_MenuBackgroundColor, color_scheme); NativeTheme::kColorId_MenuBackgroundColor, color_scheme);
return color_utils::BlendForMinContrast(bg, bg, base::nullopt, 1.67f) return color_utils::BlendForMinContrast(bg, bg, base::nullopt, 1.67f)
.color; .color;
} }
case NativeTheme::kColorId_MenuBorderColor:
case NativeTheme::kColorId_MenuSeparatorColor: case NativeTheme::kColorId_MenuSeparatorColor:
return gfx::kGoogleGrey300; return gfx::kGoogleGrey300;
case NativeTheme::kColorId_MenuBackgroundColor: case NativeTheme::kColorId_MenuBackgroundColor:
...@@ -268,7 +270,7 @@ SkColor GetAuraColor(NativeTheme::ColorId color_id, ...@@ -268,7 +270,7 @@ SkColor GetAuraColor(NativeTheme::ColorId color_id,
} }
case NativeTheme::kColorId_LinkEnabled: case NativeTheme::kColorId_LinkEnabled:
case NativeTheme::kColorId_LinkPressed: case NativeTheme::kColorId_LinkPressed:
return gfx::kGoogleBlue700; return gfx::kGoogleBlue600;
// Separator // Separator
case NativeTheme::kColorId_SeparatorColor: case NativeTheme::kColorId_SeparatorColor:
...@@ -279,12 +281,8 @@ SkColor GetAuraColor(NativeTheme::ColorId color_id, ...@@ -279,12 +281,8 @@ SkColor GetAuraColor(NativeTheme::ColorId color_id,
return gfx::kGoogleBlue600; return gfx::kGoogleBlue600;
case NativeTheme::kColorId_TabTitleColorInactive: case NativeTheme::kColorId_TabTitleColorInactive:
return gfx::kGoogleGrey700; return gfx::kGoogleGrey700;
case NativeTheme::kColorId_TabBottomBorder: { case NativeTheme::kColorId_TabBottomBorder:
const SkColor bg = base_theme->GetSystemColor( return gfx::kGoogleGrey300;
NativeTheme::kColorId_DialogBackground, color_scheme);
return color_utils::BlendForMinContrast(bg, bg, base::nullopt, 1.67f)
.color;
}
// Textfield // Textfield
case NativeTheme::kColorId_TextfieldDefaultColor: case NativeTheme::kColorId_TextfieldDefaultColor:
...@@ -362,12 +360,8 @@ SkColor GetAuraColor(NativeTheme::ColorId color_id, ...@@ -362,12 +360,8 @@ SkColor GetAuraColor(NativeTheme::ColorId color_id,
// FocusableBorder // FocusableBorder
case NativeTheme::kColorId_FocusedBorderColor: case NativeTheme::kColorId_FocusedBorderColor:
return SkColorSetA(gfx::kGoogleBlue600, 0x4D); return SkColorSetA(gfx::kGoogleBlue600, 0x4D);
case NativeTheme::kColorId_UnfocusedBorderColor: { case NativeTheme::kColorId_UnfocusedBorderColor:
const SkColor bg = base_theme->GetSystemColor( return gfx::kGoogleGrey300;
NativeTheme::kColorId_WindowBackground, color_scheme);
return color_utils::BlendForMinContrast(bg, bg, base::nullopt, 1.67f)
.color;
}
// Material spinner/throbber // Material spinner/throbber
case NativeTheme::kColorId_ThrobberSpinningColor: case NativeTheme::kColorId_ThrobberSpinningColor:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment