Change toggle button colors to match UX specs

Bug: 1145295
Change-Id: I8c3f2cb0a07895af16ac6c7ea24d3b4ae2f7c2b1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2545643Reviewed-by: Min Chen <minch@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Commit-Queue: Ahmed Mehfooz <amehfooz@chromium.org>
Cr-Commit-Position: refs/heads/master@{#829043}

ash/style/ash_color_provider.cc

@@ -223,11 +223,20 @@ SkColor AshColorProvider::GetContentLayerColor(ContentLayerType type) const {
     case ContentLayerType::kSliderColorInactive:
     case ContentLayerType::kRadioColorInactive:
       return is_dark_mode ? gfx::kGoogleGrey200 : gfx::kGoogleGrey700;
+    case ContentLayerType::kSwitchKnobColorInactive:
+      return is_dark_mode ? gfx::kGoogleGrey800 : SK_ColorWHITE;
+    case ContentLayerType::kSwitchTrackColorInactive:
+      return GetSecondToneColor(is_dark_mode ? gfx::kGoogleGrey200
+                                             : gfx::kGoogleGrey700);
     case ContentLayerType::kButtonLabelColorBlue:
     case ContentLayerType::kSliderColorActive:
     case ContentLayerType::kRadioColorActive:
     case ContentLayerType::kSwitchAccessInnerStrokeColor:
+    case ContentLayerType::kSwitchKnobColorActive:
       return is_dark_mode ? gfx::kGoogleBlue300 : gfx::kGoogleBlue600;
+    case ContentLayerType::kSwitchTrackColorActive:
+      return GetSecondToneColor(
+          GetContentLayerColor(ContentLayerType::kSwitchKnobColorActive));
     case ContentLayerType::kButtonLabelColorPrimary:
     case ContentLayerType::kButtonIconColorPrimary:
     case ContentLayerType::kBatteryBadgeColor:

ash/style/ash_color_provider.h

@@ -121,6 +121,12 @@ class ASH_EXPORT AshColorProvider : public SessionObserver {
     kRadioColorActive,
     kRadioColorInactive,
 
+    // Color for toggle button.
+    kSwitchKnobColorActive,
+    kSwitchKnobColorInactive,
+    kSwitchTrackColorActive,
+    kSwitchTrackColorInactive,
+
     // Color for current active desk's border.
     kCurrentDeskColor,
 

ash/system/dark_mode/dark_mode_detailed_view.cc

@@ -122,6 +122,7 @@ void DarkModeDetailedView::OnThemeChanged() {
   TrayDetailedView::OnThemeChanged();
   themed_label_->SetEnabledColor(GetLabelColor());
   neutral_label_->SetEnabledColor(GetLabelColor());
+  TrayPopupUtils::UpdateToggleButtonColors(toggle_);
 }
 
 void DarkModeDetailedView::UpdateToggleButton(bool dark_mode_enabled) {

ash/system/tray/tray_popup_utils.cc

@@ -219,15 +219,6 @@ views::ImageView* TrayPopupUtils::CreateMainImageView() {
 views::ToggleButton* TrayPopupUtils::CreateToggleButton(
     views::Button::PressedCallback callback,
     int accessible_name_id) {
-  constexpr SkColor kTrackAlpha = 0x66;
-  auto GetColor = [](bool is_on, SkAlpha alpha = SK_AlphaOPAQUE) {
-    AshColorProvider::ContentLayerType type =
-        is_on ? AshColorProvider::ContentLayerType::kIconColorProminent
-              : AshColorProvider::ContentLayerType::kTextColorPrimary;
-
-    return SkColorSetA(AshColorProvider::Get()->GetContentLayerColor(type),
-                       alpha);
-  };
   views::ToggleButton* toggle = new views::ToggleButton(std::move(callback));
   const gfx::Size toggle_size(toggle->GetPreferredSize());
   const int vertical_padding = (kMenuButtonSize - toggle_size.height()) / 2;
@@ -236,10 +227,7 @@ views::ToggleButton* TrayPopupUtils::CreateToggleButton(
   toggle->SetBorder(views::CreateEmptyBorder(
       gfx::Insets(vertical_padding, horizontal_padding)));
   toggle->SetAccessibleName(l10n_util::GetStringUTF16(accessible_name_id));
-  toggle->SetThumbOnColor(GetColor(true));
-  toggle->SetThumbOffColor(GetColor(false));
-  toggle->SetTrackOnColor(GetColor(true, kTrackAlpha));
-  toggle->SetTrackOffColor(GetColor(false, kTrackAlpha));
+  UpdateToggleButtonColors(toggle);
   return toggle;
 }
 
@@ -367,6 +355,18 @@ void TrayPopupUtils::UpdateCheckMarkVisibility(HoverHighlightView* container,
               : HoverHighlightView::AccessibilityState::UNCHECKED_CHECKBOX);
 }
 
+void TrayPopupUtils::UpdateToggleButtonColors(views::ToggleButton* toggle) {
+  auto* ash_color_provider = AshColorProvider::Get();
+  toggle->SetThumbOnColor(ash_color_provider->GetContentLayerColor(
+      AshColorProvider::ContentLayerType::kSwitchKnobColorActive));
+  toggle->SetThumbOffColor(ash_color_provider->GetContentLayerColor(
+      AshColorProvider::ContentLayerType::kSwitchKnobColorInactive));
+  toggle->SetTrackOnColor(ash_color_provider->GetContentLayerColor(
+      AshColorProvider::ContentLayerType::kSwitchTrackColorActive));
+  toggle->SetTrackOffColor(ash_color_provider->GetContentLayerColor(
+      AshColorProvider::ContentLayerType::kSwitchTrackColorInactive));
+}
+
 void TrayPopupUtils::SetLabelFontList(views::Label* label, FontStyle style) {
   label->SetAutoColorReadabilityEnabled(false);
   const gfx::FontList& base_font_list = views::Label::GetDefaultFontList();

ash/system/tray/tray_popup_utils.h

@@ -201,6 +201,9 @@ class TrayPopupUtils {
   static void UpdateCheckMarkVisibility(HoverHighlightView* container,
                                         bool visible);
 
+  // Updates the toggle button colors based on the current color mode.
+  static void UpdateToggleButtonColors(views::ToggleButton* toggle);
+
   // Sets the font list for |label| based on |style|.
   static void SetLabelFontList(views::Label* label, FontStyle style);