Dark mode secondary UI spec/refinements

This change:
- Mostly implements UX's secondary UI spec
- Switches topchrome to use the same colors as incognito, though
this may be temporary
- Replaces some temp colors

Bug: 912375, 850098

Change-Id: I447c3062455330b01c0e7381d3a9eabd2709a970
Reviewed-on: https://chromium-review.googlesource.com/c/1378408
Commit-Queue: Leonard Grey <lgrey@chromium.org>
Reviewed-by: Peter Kasting <pkasting@chromium.org>
Reviewed-by: Michael Wasserman <msw@chromium.org>
Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org>
Cr-Commit-Position: refs/heads/master@{#618375}

chrome/browser/themes/theme_properties.cc

@@ -34,34 +34,6 @@ constexpr char kTilingRepeatX[] = "repeat-x";
 constexpr char kTilingRepeatY[] = "repeat-y";
 constexpr char kTilingRepeat[] = "repeat";
 
-base::Optional<SkColor> GetDarkModeColor(int id) {
-  switch (id) {
-    case ThemeProperties::COLOR_BOOKMARK_TEXT:
-    case ThemeProperties::COLOR_TAB_TEXT:
-    case ThemeProperties::COLOR_BACKGROUND_TAB_TEXT:
-    case ThemeProperties::COLOR_BACKGROUND_TAB_TEXT_INACTIVE:
-    case ThemeProperties::COLOR_NTP_TEXT:
-      return SK_ColorWHITE;
-    case ThemeProperties::COLOR_TOOLBAR:
-    case ThemeProperties::COLOR_DETACHED_BOOKMARK_BAR_BACKGROUND:
-      return SkColorSetRGB(0x41, 0x41, 0x41);
-    case ThemeProperties::COLOR_FRAME:
-    case ThemeProperties::COLOR_BACKGROUND_TAB:
-      return SkColorSetRGB(0x2B, 0x2B, 0x2B);
-    case ThemeProperties::COLOR_TOOLBAR_CONTENT_AREA_SEPARATOR:
-      return SK_ColorLTGRAY;
-    case ThemeProperties::COLOR_NTP_BACKGROUND:
-      return SK_ColorBLACK;
-    case ThemeProperties::COLOR_BUTTON_BACKGROUND:
-      return SkColorSetARGB(0xE5, 0x41, 0x41, 0x41);
-    case ThemeProperties::COLOR_FRAME_INACTIVE:
-    case ThemeProperties::COLOR_BACKGROUND_TAB_INACTIVE:
-      return gfx::kGoogleGrey800;
-    default:
-      return base::nullopt;
-  }
-}
-
 base::Optional<SkColor> GetIncognitoColor(int id) {
   switch (id) {
     case ThemeProperties::COLOR_FRAME:
@@ -102,6 +74,19 @@ base::Optional<SkColor> GetIncognitoColor(int id) {
   }
 }
 
+base::Optional<SkColor> GetDarkModeColor(int id) {
+  // Current UX thinking is to use the same colors for dark mode and incognito,
+  // but this is very subject to change. Additionally, dark mode incognito may
+  // end up having a different look. For now, just call into GetIncognitoColor
+  // for convenience, but maintain a separate interface.
+
+  // NTP background is an exception since the NTP is different in incognito.
+  if (id == ThemeProperties::COLOR_NTP_BACKGROUND) {
+    return base::nullopt;
+  }
+  return GetIncognitoColor(id);
+}
+
 }  // namespace
 
 // static

chrome/browser/ui/views/chrome_typography_provider.cc

@@ -32,6 +32,13 @@ namespace {
 // in Windows 10 still has black text, but (since the user wants high contrast)
 // the grey text shades in Harmony should not be used.
 bool ShouldIgnoreHarmonySpec(const ui::NativeTheme& theme) {
+  // Mac provides users limited ways to customize the UI, including dark and
+  // high contrast modes; all these are addressed elsewhere, so there's no need
+  // for Mac to try to detect non-Harmony cases as Windows and Linux need to,
+  // and dark mode can interfere with the detection below.
+#if defined(OS_MACOSX)
+  return false;
+#else
   if (theme.UsesHighContrastColors())
     return true;
 
@@ -42,6 +49,7 @@ bool ShouldIgnoreHarmonySpec(const ui::NativeTheme& theme) {
   const bool label_color_is_black =
       test_color == SK_ColorBLACK || test_color == gfx::kGoogleGrey900;
   return !label_color_is_black;
+#endif  // defined(OS_MACOSX)
 }
 
 // Returns a color for a possibly inverted or high-contrast OS color theme.
@@ -173,6 +181,8 @@ const gfx::FontList& ChromeTypographyProvider::GetFont(int context,
 SkColor ChromeTypographyProvider::GetColor(const views::View& view,
                                            int context,
                                            int style) const {
+  // TODO(lgrey): Remove anything that could be using native theme
+  // colors from here after UX review of divergences.
   const ui::NativeTheme* native_theme = view.GetNativeTheme();
   DCHECK(native_theme);
   if (ShouldIgnoreHarmonySpec(*native_theme)) {
@@ -183,11 +193,16 @@ SkColor ChromeTypographyProvider::GetColor(const views::View& view,
   if (context == views::style::CONTEXT_BUTTON_MD) {
     switch (style) {
       case views::style::STYLE_DIALOG_BUTTON_DEFAULT:
-        return SK_ColorWHITE;
+        return native_theme->SystemDarkModeEnabled() ? gfx::kGoogleGrey900
+                                                     : SK_ColorWHITE;
       case views::style::STYLE_DISABLED:
-        return SkColorSetRGB(0x9e, 0x9e, 0x9e);
+        return native_theme->SystemDarkModeEnabled()
+                   ? gfx::kGoogleGrey600
+                   : SkColorSetRGB(0x9e, 0x9e, 0x9e);
       default:
-        return SkColorSetRGB(0x75, 0x75, 0x75);
+        return native_theme->SystemDarkModeEnabled()
+                   ? gfx::kGoogleBlue300
+                   : SkColorSetRGB(0x75, 0x75, 0x75);
     }
   }
 
@@ -201,21 +216,27 @@ SkColor ChromeTypographyProvider::GetColor(const views::View& view,
     case views::style::STYLE_DIALOG_BUTTON_DEFAULT:
       return SK_ColorWHITE;
     case views::style::STYLE_DISABLED:
-      return SkColorSetRGB(0x9e, 0x9e, 0x9e);
+      return native_theme->SystemDarkModeEnabled()
+                 ? gfx::kGoogleGrey800
+                 : SkColorSetRGB(0x9e, 0x9e, 0x9e);
     case views::style::STYLE_LINK:
       return gfx::kGoogleBlue700;
     case STYLE_SECONDARY:
     case STYLE_EMPHASIZED_SECONDARY:
     case STYLE_HINT:
-      return gfx::kGoogleGrey700;
+      return native_theme->SystemDarkModeEnabled()
+                 ? SkColorSetA(SK_ColorWHITE, 0x99)
+                 : gfx::kGoogleGrey700;
     case STYLE_RED:
       return gfx::kGoogleRed700;
     case STYLE_GREEN:
       return gfx::kGoogleGreen700;
   }
 
-  // Use GoogleGrey900 as primary color for everything else.
-  return gfx::kGoogleGrey900;
+  // Use default primary color for everything else.
+  return native_theme->SystemDarkModeEnabled()
+             ? SkColorSetA(SK_ColorWHITE, 0xDD)
+             : gfx::kGoogleGrey900;
 }
 
 int ChromeTypographyProvider::GetLineHeight(int context, int style) const {

chrome/browser/ui/views/profiles/profile_chooser_view.cc

@@ -217,6 +217,14 @@ std::vector<gfx::Image> GetImagesForAccounts(
   return images;
 }
 
+gfx::ImageSkia CreateVectorIcon(const gfx::VectorIcon& icon) {
+  return gfx::CreateVectorIcon(
+      icon, kIconSize,
+      ui::NativeTheme::GetInstanceForNativeUi()->SystemDarkModeEnabled()
+          ? gfx::kGoogleGrey500
+          : gfx::kChromeIconGrey);
+}
+
 }  // namespace
 
 // A title card with one back button left aligned and one label center aligned.
@@ -1333,9 +1341,7 @@ views::View* ProfileChooserView::CreateOptionsView(bool display_lock,
     DCHECK(service);
     if (service->GetBoolean(prefs::kBrowserGuestModeEnabled)) {
       guest_profile_button_ = new HoverButton(
-          this,
-          gfx::CreateVectorIcon(kUserMenuGuestIcon, kIconSize,
-                                gfx::kChromeIconGrey),
+          this, CreateVectorIcon(kUserMenuGuestIcon),
           l10n_util::GetStringUTF16(IDS_PROFILES_OPEN_GUEST_PROFILE_BUTTON));
       layout->StartRow(1.0, 0);
       layout->AddView(guest_profile_button_);
@@ -1346,10 +1352,7 @@ views::View* ProfileChooserView::CreateOptionsView(bool display_lock,
       is_guest ? IDS_PROFILES_EXIT_GUEST : IDS_PROFILES_MANAGE_USERS_BUTTON);
   const gfx::VectorIcon& settings_icon =
       is_guest ? kCloseAllIcon : kSettingsIcon;
-  users_button_ = new HoverButton(
-      this,
-      gfx::CreateVectorIcon(settings_icon, kIconSize, gfx::kChromeIconGrey),
-      text);
+  users_button_ = new HoverButton(this, CreateVectorIcon(settings_icon), text);
 
   layout->StartRow(1.0, 0);
   layout->AddView(users_button_);
@@ -1366,8 +1369,7 @@ views::View* ProfileChooserView::CreateOptionsView(bool display_lock,
     AvatarMenu::Item active_avatar_item =
         avatar_menu->GetItemAt(ordered_item_indices[0]);
     close_all_windows_button_ = new HoverButton(
-        this,
-        gfx::CreateVectorIcon(kCloseAllIcon, kIconSize, gfx::kChromeIconGrey),
+        this, CreateVectorIcon(kCloseAllIcon),
         avatar_menu->GetNumberOfItems() >= 2
             ? l10n_util::GetStringFUTF16(IDS_PROFILES_EXIT_PROFILE_BUTTON,
                                          active_avatar_item.name)
@@ -1409,23 +1411,20 @@ views::View* ProfileChooserView::CreateAutofillHomeView() {
       std::make_unique<views::BoxLayout>(views::BoxLayout::kVertical));
 
   // Passwords.
-  passwords_button_ = new HoverButton(
-      this, gfx::CreateVectorIcon(kKeyIcon, kIconSize, gfx::kChromeIconGrey),
-      l10n_util::GetStringUTF16(IDS_PROFILES_PASSWORDS_LINK));
+  passwords_button_ =
+      new HoverButton(this, CreateVectorIcon(kKeyIcon),
+                      l10n_util::GetStringUTF16(IDS_PROFILES_PASSWORDS_LINK));
   view->AddChildView(passwords_button_);
 
   // Credit cards.
   credit_cards_button_ = new HoverButton(
-      this,
-      gfx::CreateVectorIcon(kCreditCardIcon, kIconSize, gfx::kChromeIconGrey),
+      this, CreateVectorIcon(kCreditCardIcon),
       l10n_util::GetStringUTF16(IDS_PROFILES_CREDIT_CARDS_LINK));
   view->AddChildView(credit_cards_button_);
 
   // Addresses.
   addresses_button_ =
-      new HoverButton(this,
-                      gfx::CreateVectorIcon(vector_icons::kLocationOnIcon,
-                                            kIconSize, gfx::kChromeIconGrey),
+      new HoverButton(this, CreateVectorIcon(vector_icons::kLocationOnIcon),
                       l10n_util::GetStringUTF16(IDS_PROFILES_ADDRESSES_LINK));
   view->AddChildView(addresses_button_);
   return view;
@@ -1493,8 +1492,7 @@ void ProfileChooserView::CreateAccountButton(views::GridLayout* layout,
   int warning_button_width = 0;
   if (reauth_required) {
     const int kIconSize = 18;
-    warning_default_image = gfx::CreateVectorIcon(
-        vector_icons::kWarningIcon, kIconSize, gfx::kChromeIconGrey);
+    warning_default_image = CreateVectorIcon(vector_icons::kWarningIcon),
     warning_button_width =
         kIconSize +
         provider->GetDistanceMetric(views::DISTANCE_RELATED_BUTTON_HORIZONTAL);

ui/native_theme/common_theme.cc

@@ -23,12 +23,37 @@ SkColor GetAuraColor(NativeTheme::ColorId color_id,
     switch (color_id) {
       case NativeTheme::kColorId_LabelEnabledColor:
       case NativeTheme::kColorId_TextfieldDefaultColor:
-        return SK_ColorWHITE;
+      case NativeTheme::kColorId_SelectedMenuItemForegroundColor:
+        return SkColorSetA(SK_ColorWHITE, 0xDD);
       case NativeTheme::kColorId_UnfocusedBorderColor:
-        return gfx::kGoogleGrey900;
+        return SK_ColorTRANSPARENT;
       case NativeTheme::kColorId_ButtonEnabledColor:
       case NativeTheme::kColorId_ButtonHoverColor:
         return gfx::kGoogleGrey200;
+      case NativeTheme::kColorId_FocusedMenuItemBackgroundColor:
+        return SkColorSetA(gfx::kGoogleGrey800, 0x99);
+      case NativeTheme::kColorId_MenuBackgroundColor:
+      case NativeTheme::kColorId_BubbleBackground:
+      case NativeTheme::kColorId_DialogBackground:
+        return color_utils::AlphaBlend(SK_ColorWHITE, gfx::kGoogleGrey900, 0xA);
+      case NativeTheme::kColorId_ProminentButtonColor:
+        return gfx::kGoogleBlue300;
+      case NativeTheme::kColorId_TextOnProminentButtonColor:
+        return gfx::kGoogleGrey900;
+      case NativeTheme::kColorId_TextfieldSelectionColor:
+      case NativeTheme::kColorId_LabelTextSelectionColor:
+        return color_utils::AlphaBlend(
+            SK_ColorWHITE,
+            GetAuraColor(
+                NativeTheme::kColorId_LabelTextSelectionBackgroundFocused,
+                base_theme),
+            0xDD);
+      case NativeTheme::kColorId_MenuSeparatorColor:
+      case NativeTheme::kColorId_SeparatorColor:
+        return SkColorSetA(gfx::kGoogleGrey800, 0xCC);
+      case NativeTheme::kColorId_TextfieldDefaultBackground:
+        return SkColorSetA(SK_ColorBLACK, 0x4D);
+
       default:
         break;
     }
@@ -132,7 +157,7 @@ SkColor GetAuraColor(NativeTheme::ColorId color_id,
     case NativeTheme::kColorId_MenuBackgroundColor:
       return SK_ColorWHITE;
     case NativeTheme::kColorId_FocusedMenuItemBackgroundColor:
-      return SkColorSetA(SK_ColorBLACK, 0x14);
+      return gfx::kGoogleGrey200;
     case NativeTheme::kColorId_DisabledMenuItemForegroundColor:
       return kDisabledTextColor;
     case NativeTheme::kColorId_MenuItemMinorTextColor:

ui/native_theme/native_theme_mac.mm

@@ -62,11 +62,6 @@
 
 namespace {
 
-const SkColor kMenuPopupBackgroundColor = SK_ColorWHITE;
-// TODO(crbug.com/893598): Finalize dark mode color.
-const SkColor kMenuPopupBackgroundColorDarkMode =
-    SkColorSetRGB(0x2B, 0x2B, 0x2B);
-
 // Helper to make indexing an array by an enum class easier.
 template <class KEY, class VALUE>
 struct EnumArray {
@@ -176,6 +171,17 @@ SkColor NativeThemeMac::GetSystemColor(ColorId color_id) const {
       [NSAppearance setCurrentAppearance:effective_appearance];
     }
   }
+
+  if (UsesHighContrastColors()) {
+    switch (color_id) {
+      case kColorId_SelectedMenuItemForegroundColor:
+        return SK_ColorWHITE;
+      case kColorId_FocusedMenuItemBackgroundColor:
+        return SK_ColorDKGRAY;
+      default:
+        break;
+    }
+  }
   // Even with --secondary-ui-md, menus use the platform colors and styling, and
   // Mac has a couple of specific color overrides, documented below.
   switch (color_id) {
@@ -183,21 +189,10 @@ SkColor NativeThemeMac::GetSystemColor(ColorId color_id) const {
       return NSSystemColorToSkColor([NSColor controlTextColor]);
     case kColorId_DisabledMenuItemForegroundColor:
       return NSSystemColorToSkColor([NSColor disabledControlTextColor]);
-    case kColorId_SelectedMenuItemForegroundColor:
-      return UsesHighContrastColors() ? SK_ColorWHITE : SK_ColorBLACK;
-    case kColorId_FocusedMenuItemBackgroundColor:
-      return UsesHighContrastColors() ? SK_ColorDKGRAY : gfx::kGoogleGrey200;
-    case kColorId_MenuBackgroundColor:
-    case kColorId_BubbleBackground:
-    case kColorId_DialogBackground:
-      return SystemDarkModeEnabled() ? kMenuPopupBackgroundColorDarkMode
-                                     : kMenuPopupBackgroundColor;
     case kColorId_MenuSeparatorColor:
-      return UsesHighContrastColors() ? SK_ColorBLACK
-                                      : SkColorSetA(SK_ColorBLACK, 0x26);
+      return SkColorSetA(SK_ColorBLACK, 0x26);
     case kColorId_MenuBorderColor:
-      return UsesHighContrastColors() ? SK_ColorBLACK
-                                      : SkColorSetA(SK_ColorBLACK, 0x60);
+      return SkColorSetA(SK_ColorBLACK, 0x60);
 
     // Mac has a different "pressed button" styling because it doesn't use
     // ripples.

ui/views/bubble/footnote_container_view.cc

@@ -62,9 +62,8 @@ FootnoteContainerView::FootnoteContainerView(const gfx::Insets& margins,
 FootnoteContainerView::~FootnoteContainerView() = default;
 
 void FootnoteContainerView::SetCornerRadius(float corner_radius) {
-  // TODO(crbug.com/893598): Finalize dark mode color.
   SkColor background_color = GetNativeTheme()->SystemDarkModeEnabled()
-                                 ? gfx::kGoogleGrey800
+                                 ? SkColorSetRGB(0x32, 0x36, 0x39)
                                  : gfx::kGoogleGrey050;
   SetBackground(std::make_unique<HalfRoundedRectBackground>(background_color,
                                                             corner_radius));

ui/views/controls/button/md_text_button.cc

@@ -75,10 +75,15 @@ void MdTextButton::set_corner_radius(float radius) {
 void MdTextButton::OnPaintBackground(gfx::Canvas* canvas) {
   LabelButton::OnPaintBackground(canvas);
   if (hover_animation().is_animating() || state() == STATE_HOVERED) {
-    const int kHoverAlpha = is_prominent_ ? 0x0c : 0x05;
-    SkScalar alpha = hover_animation().CurrentValueBetween(0, kHoverAlpha);
+    bool is_dark_mode = GetNativeTheme()->SystemDarkModeEnabled();
+    int hover_alpha = is_prominent_ ? 0x0C : 0x05;
+    if (is_dark_mode)
+      hover_alpha = 0x0A;
+    const SkColor hover_color =
+        is_dark_mode && !is_prominent_ ? gfx::kGoogleBlue300 : SK_ColorBLACK;
+    SkScalar alpha = hover_animation().CurrentValueBetween(0, hover_alpha);
     cc::PaintFlags flags;
-    flags.setColor(SkColorSetA(SK_ColorBLACK, alpha));
+    flags.setColor(SkColorSetA(hover_color, alpha));
     flags.setStyle(cc::PaintFlags::kFill_Style);
     flags.setAntiAlias(true);
     canvas->DrawRoundRect(gfx::RectF(GetLocalBounds()), corner_radius_, flags);
@@ -123,18 +128,21 @@ void MdTextButton::OnBlur() {
 
 std::unique_ptr<views::InkDropHighlight> MdTextButton::CreateInkDropHighlight()
     const {
+  bool is_dark_mode = GetNativeTheme()->SystemDarkModeEnabled();
   // The prominent button hover effect is a shadow.
   const int kYOffset = 1;
   const int kSkiaBlurRadius = 2;
   const int shadow_alpha = is_prominent_ ? 0x3D : 0x1A;
+  const SkColor shadow_color =
+      is_dark_mode && is_prominent_ ? gfx::kGoogleBlue300 : SK_ColorBLACK;
   std::vector<gfx::ShadowValue> shadows;
   // The notion of blur that gfx::ShadowValue uses is twice the Skia/CSS value.
   // Skia counts the number of pixels outside the mask area whereas
   // gfx::ShadowValue counts together the number of pixels inside and outside
   // the mask bounds.
-  shadows.push_back(gfx::ShadowValue(gfx::Vector2d(0, kYOffset),
-                                     2 * kSkiaBlurRadius,
-                                     SkColorSetA(SK_ColorBLACK, shadow_alpha)));
+  shadows.push_back(gfx::ShadowValue(
+      gfx::Vector2d(0, kYOffset), 2 * kSkiaBlurRadius,
+      SkColorSetA(shadow_color, is_dark_mode ? 0x7F : shadow_alpha)));
   const SkColor fill_color =
       SkColorSetA(SK_ColorWHITE, is_prominent_ ? 0x0D : 0x05);
   return std::make_unique<InkDropHighlight>(