[Controls Refresh] Update controls styles for dark mode

This CL updates the dark mode styles for the following controls:
1. <meter> -  border color.
2. multi-select - foreground text color.
3. Button: Dark mode button design has no border and has unique fill
   color. Thus, a specific set of color enums is created for only
   buttons. Button's border color is styled to match its fill color
   in order to give the appearance of no borders and keep its
   dimensions unchanged. This impacts: button, file, and color
   controls.


Bug: 1107290, 1099624
Change-Id: I141c199f93acac2b950b8af7195e863f811c2f4c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2469357
Commit-Queue: Yu Han <yuzhehan@google.com>
Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org>
Reviewed-by: Mason Freed <masonfreed@chromium.org>
Cr-Commit-Position: refs/heads/master@{#818119}

third_party/blink/renderer/core/html/resources/controls_refresh.css

@@ -125,7 +125,7 @@ meter::-webkit-meter-bar {
   grid-row-start: line1;
   grid-row-end: line2;
   border-style: solid;
-  border-color: rgba(118, 118, 118, 0.3);
+  border-color: -internal-light-dark(rgba(118, 118, 118, 0.3), #858585);
   border-radius: 20px;
   box-sizing: border-box;
   overflow: hidden;
@@ -220,7 +220,7 @@ select:-internal-list-box:focus option:checked:hover {
   /* TODO(crbug.com/1129658): The dark mode color here should be handled
      within LayoutTheme::ActiveListBoxSelectionBackgroundColor(). */
   background-color: -internal-light-dark(-internal-active-list-box-selection, #99C8FF) !important;
-  color: -internal-light-dark(-internal-active-list-box-selection-text, #FFFFFF) !important;
+  color: -internal-light-dark(-internal-active-list-box-selection-text, #3B3B3B) !important;
 }
 
 select:-internal-list-box:focus option:checked:disabled {

ui/native_theme/native_theme_base.cc

@@ -891,7 +891,7 @@ void NativeThemeBase::PaintButton(cc::PaintCanvas* canvas,
 
     // If the button is too small, fallback to drawing a single, solid color.
     if (rect.width() < 5 || rect.height() < 5) {
-      flags.setColor(ControlsFillColorForState(state, color_scheme));
+      flags.setColor(ButtonFillColorForState(state, color_scheme));
       canvas->drawRect(skrect, flags);
       return;
     }
@@ -901,14 +901,14 @@ void NativeThemeBase::PaintButton(cc::PaintCanvas* canvas,
     // Paint the background (is not visible behind the rounded corners).
     skrect.inset(kBorderWidth / 2, kBorderWidth / 2);
     PaintLightenLayer(canvas, skrect, state, border_radius, color_scheme);
-    flags.setColor(ControlsFillColorForState(state, color_scheme));
+    flags.setColor(ButtonFillColorForState(state, color_scheme));
     canvas->drawRoundRect(skrect, border_radius, border_radius, flags);
 
     // Paint the border: 1px solid.
     if (button.has_border) {
       flags.setStyle(cc::PaintFlags::kStroke_Style);
       flags.setStrokeWidth(kBorderWidth);
-      flags.setColor(ControlsBorderColorForState(state, color_scheme));
+      flags.setColor(ButtonBorderColorForState(state, color_scheme));
       canvas->drawRoundRect(skrect, border_radius, border_radius, flags);
     }
     return;
@@ -1542,6 +1542,22 @@ SkColor NativeThemeBase::ControlsBorderColorForState(
   return GetControlColor(color_id, color_scheme);
 }
 
+SkColor NativeThemeBase::ButtonBorderColorForState(
+    State state,
+    ColorScheme color_scheme) const {
+  ControlColorId color_id;
+  if (state == kHovered) {
+    color_id = kButtonHoveredBorder;
+  } else if (state == kPressed) {
+    color_id = kButtonPressedBorder;
+  } else if (state == kDisabled) {
+    color_id = kButtonDisabledBorder;
+  } else {
+    color_id = kButtonBorder;
+  }
+  return GetControlColor(color_id, color_scheme);
+}
+
 SkColor NativeThemeBase::ControlsFillColorForState(
     State state,
     ColorScheme color_scheme) const {
@@ -1558,6 +1574,22 @@ SkColor NativeThemeBase::ControlsFillColorForState(
   return GetControlColor(color_id, color_scheme);
 }
 
+SkColor NativeThemeBase::ButtonFillColorForState(
+    State state,
+    ColorScheme color_scheme) const {
+  ControlColorId color_id;
+  if (state == kHovered) {
+    color_id = kButtonHoveredFill;
+  } else if (state == kPressed) {
+    color_id = kButtonPressedFill;
+  } else if (state == kDisabled) {
+    color_id = kButtonDisabledFill;
+  } else {
+    color_id = kButtonFill;
+  }
+  return GetControlColor(color_id, color_scheme);
+}
+
 SkColor NativeThemeBase::ControlsBackgroundColorForState(
     State state,
     ColorScheme color_scheme) const {
@@ -1582,12 +1614,16 @@ SkColor NativeThemeBase::GetControlColor(ControlColorId color_id,
 
   switch (color_id) {
     case kBorder:
+    case kButtonBorder:
       return SkColorSetRGB(0x76, 0x76, 0x76);
     case kHoveredBorder:
+    case kButtonHoveredBorder:
       return SkColorSetRGB(0x4F, 0x4F, 0x4F);
     case kPressedBorder:
+    case kButtonPressedBorder:
       return SkColorSetRGB(0x8D, 0x8D, 0x8D);
     case kDisabledBorder:
+    case kButtonDisabledBorder:
       return SkColorSetARGB(0x4D, 0x76, 0x76, 0x76);
     case kAccent:
       return SkColorSetRGB(0x00, 0x75, 0xFF);
@@ -1602,12 +1638,16 @@ SkColor NativeThemeBase::GetControlColor(ControlColorId color_id,
     case kDisabledBackground:
       return SkColorSetA(SK_ColorWHITE, 0x99);
     case kFill:
+    case kButtonFill:
       return SkColorSetRGB(0xEF, 0xEF, 0xEF);
     case kHoveredFill:
+    case kButtonHoveredFill:
       return SkColorSetRGB(0xE5, 0xE5, 0xE5);
     case kPressedFill:
+    case kButtonPressedFill:
       return SkColorSetRGB(0xF5, 0xF5, 0xF5);
     case kDisabledFill:
+    case kButtonDisabledFill:
       return SkColorSetARGB(0x4D, 0xEF, 0xEF, 0xEF);
     case kLightenLayer:
       return SkColorSetARGB(0x33, 0xA9, 0xA9, 0xA9);
@@ -1661,6 +1701,9 @@ SkColor NativeThemeBase::GetDarkModeControlColor(
       return SkColorSetRGB(0x63, 0xAD, 0xE5);
     case kFill:
       return SkColorSetRGB(0x3B, 0x3B, 0x3B);
+    case kButtonBorder:
+    case kButtonFill:
+      return SkColorSetRGB(0x6B, 0x6B, 0x6B);
     case kLightenLayer:
     case kAutoCompleteBackground:
     case kBackground:
@@ -1685,9 +1728,17 @@ SkColor NativeThemeBase::GetDarkModeControlColor(
       return SkColorSetRGB(0x62, 0x62, 0x62);
     case kHoveredFill:
       return SkColorSetRGB(0x3B, 0x3B, 0x3B);
+    case kButtonHoveredBorder:
+    case kButtonHoveredFill:
+      return SkColorSetRGB(0x7B, 0x7B, 0x7B);
     case kPressedFill:
       return SkColorSetRGB(0x3B, 0x3B, 0x3B);
+    case kButtonPressedBorder:
+    case kButtonPressedFill:
+      return SkColorSetRGB(0x61, 0x61, 0x61);
     case kDisabledFill:
+    case kButtonDisabledBorder:
+    case kButtonDisabledFill:
       return SkColorSetRGB(0x36, 0x36, 0x36);
     case kScrollbarArrowBackground:
       return SkColorSetRGB(0x42, 0x42, 0x42);
@@ -1720,10 +1771,14 @@ SkColor NativeThemeBase::GetHighContrastControlColor(
       case kDisabledBorder:
       case kDisabledAccent:
       case kDisabledSlider:
+      case kButtonDisabledBorder:
         return system_colors_[SystemThemeColor::kGrayText];
       case kBorder:
       case kHoveredBorder:
       case kPressedBorder:
+      case kButtonBorder:
+      case kButtonHoveredBorder:
+      case kButtonPressedBorder:
         return system_colors_[SystemThemeColor::kButtonText];
       case kAccent:
       case kHoveredAccent:
@@ -1743,6 +1798,10 @@ SkColor NativeThemeBase::GetHighContrastControlColor(
       case kHoveredFill:
       case kPressedFill:
       case kDisabledFill:
+      case kButtonFill:
+      case kButtonHoveredFill:
+      case kButtonPressedFill:
+      case kButtonDisabledFill:
       case kAutoCompleteBackground:
       case kLightenLayer:
       case kScrollbarArrowBackground:
@@ -1762,10 +1821,14 @@ SkColor NativeThemeBase::GetHighContrastControlColor(
       case kDisabledBorder:
       case kDisabledAccent:
       case kDisabledSlider:
+      case kButtonDisabledBorder:
         return SK_ColorGREEN;
       case kBorder:
       case kHoveredBorder:
       case kPressedBorder:
+      case kButtonBorder:
+      case kButtonHoveredBorder:
+      case kButtonPressedBorder:
       case kScrollbarThumbInactive:
       case kScrollbarArrowBackground:
       case kScrollbarTrack:
@@ -1784,6 +1847,10 @@ SkColor NativeThemeBase::GetHighContrastControlColor(
       case kHoveredFill:
       case kPressedFill:
       case kDisabledFill:
+      case kButtonFill:
+      case kButtonHoveredFill:
+      case kButtonPressedFill:
+      case kButtonDisabledFill:
       case kAutoCompleteBackground:
       case kLightenLayer:
       case kScrollbarThumb:

ui/native_theme/native_theme_base.h

@@ -76,7 +76,15 @@ class NATIVE_THEME_EXPORT NativeThemeBase : public NativeTheme {
     kScrollbarThumb,
     kScrollbarThumbHovered,
     kScrollbarThumbPressed,
-    kScrollbarThumbInactive
+    kScrollbarThumbInactive,
+    kButtonBorder,
+    kButtonDisabledBorder,
+    kButtonHoveredBorder,
+    kButtonPressedBorder,
+    kButtonFill,
+    kButtonDisabledFill,
+    kButtonHoveredFill,
+    kButtonPressedFill
   };
 
   using NativeTheme::NativeTheme;
@@ -260,6 +268,9 @@ class NATIVE_THEME_EXPORT NativeThemeBase : public NativeTheme {
                                   const SkScalar border_radius,
                                   ColorScheme color_scheme) const;
 
+  SkColor ButtonBorderColorForState(State state,
+                                    ColorScheme color_scheme) const;
+  SkColor ButtonFillColorForState(State state, ColorScheme color_scheme) const;
   SkColor ControlsAccentColorForState(State state,
                                       ColorScheme color_scheme) const;
   SkColor ControlsBorderColorForState(State state,