Implement AccentColor and AccentColorText system colors

This was proposed and resolved here:
w3c/csswg-drafts#7347

This patch matches the firefox behavior. We don't currently have a way
of getting custom accent colors on any platform besides MacOS, and it
would seem that firefox doesn't do so either.

This is gated behind an experimental flag for now.

Bug: 1338061
Change-Id: I97393303f5b6fb141acaaf525d9f353bea49a604
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3764721
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Reviewed-by: Mason Freed <masonf@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1098956}

third_party/blink/renderer/core/css/css.dict

@@ -935,6 +935,8 @@
 "spelling-error"
 "grammar-error"
 "color-contrast"
+"accentcolor"
+"accentcolortext"
 
 # at-rules
 "@charset"

third_party/blink/renderer/core/css/css_value_keywords.json5

@@ -204,6 +204,8 @@
     "transparent",
     "-webkit-link",
     "-webkit-activelink",
+    "accentcolor",
+    "accentcolortext",
     "activeborder",
     "activecaption",
     "activetext",

third_party/blink/renderer/core/css/style_color.cc

@@ -319,6 +319,8 @@ bool StyleColor::IsSystemColorIncludingDeprecated(CSSValueID id) {
 
 bool StyleColor::IsSystemColor(CSSValueID id) {
   switch (id) {
+    case CSSValueID::kAccentcolor:
+    case CSSValueID::kAccentcolortext:
     case CSSValueID::kActivetext:
     case CSSValueID::kButtonborder:
     case CSSValueID::kButtonface:

third_party/blink/renderer/core/layout/layout_theme.cc

@@ -585,6 +585,14 @@ Color LayoutTheme::DefaultSystemColor(
   // https://www.w3.org/TR/css-color-4/#deprecated-system-colors.
 
   switch (css_value_id) {
+    case CSSValueID::kAccentcolor:
+      return RuntimeEnabledFeatures::CSSSystemAccentColorEnabled()
+                 ? GetAccentColorOrDefault(color_scheme)
+                 : Color();
+    case CSSValueID::kAccentcolortext:
+      return RuntimeEnabledFeatures::CSSSystemAccentColorEnabled()
+                 ? GetAccentColorText(color_scheme)
+                 : Color();
     case CSSValueID::kActivetext:
       return Color::FromRGBA32(0xFFFF0000);
     case CSSValueID::kButtonborder:
@@ -844,4 +852,22 @@ void LayoutTheme::UpdateForcedColorsState() {
       ForcedColors::kNone;
 }
 
+Color LayoutTheme::GetAccentColorOrDefault(
+    mojom::blink::ColorScheme color_scheme) const {
+  // This is from the kAccent color from NativeThemeBase::GetControlColor
+  const Color kDefaultAccentColor = Color(0x00, 0x75, 0xFF);
+  Color accent_color = GetSystemAccentColor(color_scheme);
+  return accent_color == Color() ? kDefaultAccentColor : accent_color;
+}
+
+Color LayoutTheme::GetAccentColorText(
+    mojom::blink::ColorScheme color_scheme) const {
+  Color accent_color = GetAccentColorOrDefault(color_scheme);
+  // This logic matches AccentColorText in Firefox. If the accent color to draw
+  // text on is dark, then use white. If it's light, then use dark.
+  return color_utils::GetRelativeLuminance4f(accent_color.toSkColor4f()) <= 128
+             ? Color::kWhite
+             : Color::kBlack;
+}
+
 }  // namespace blink

third_party/blink/renderer/core/layout/layout_theme.h

@@ -185,9 +185,18 @@ class CORE_EXPORT LayoutTheme : public RefCounted<LayoutTheme> {
       mojom::blink::ColorScheme color_scheme) const {
     return false;
   }
-  virtual Color GetAccentColor(mojom::blink::ColorScheme color_scheme) const {
+  // GetSystemAccentColor returns transparent unless there is a special value
+  // from the OS color scheme.
+  virtual Color GetSystemAccentColor(
+      mojom::blink::ColorScheme color_scheme) const {
     return Color();
   }
+  // GetAccentColorOrDefault will return GetAccentColor if there is a value from
+  // the OS, otherwise it will return the default accent color.
+  Color GetAccentColorOrDefault(mojom::blink::ColorScheme color_scheme) const;
+  // GetAccentColorText returns black or white depending on which can be
+  // rendered with enough contrast on the result of GetAccentColorOrDefault.
+  Color GetAccentColorText(mojom::blink::ColorScheme color_scheme) const;
 
   bool InForcedColorsMode() const { return in_forced_colors_mode_; }
 

third_party/blink/renderer/core/layout/layout_theme_mac.h

@@ -52,7 +52,7 @@ class LayoutThemeMac final : public LayoutThemeDefault {
   bool SupportsSelectionForegroundColors() const override { return false; }
   bool IsAccentColorCustomized(
       mojom::blink::ColorScheme color_scheme) const override;
-  Color GetAccentColor(mojom::blink::ColorScheme color_scheme) const override;
+  Color GetSystemAccentColor(mojom::blink::ColorScheme color_scheme) const override;
 
  protected:
   // Controls color values returned from FocusRingColor().

third_party/blink/renderer/core/layout/layout_theme_mac.mm

@@ -104,7 +104,7 @@ Color GetSystemColor(MacSystemColorID color_id,
   return true;
 }
 
-Color LayoutThemeMac::GetAccentColor(
+Color LayoutThemeMac::GetSystemAccentColor(
     mojom::blink::ColorScheme color_scheme) const {
   if (@available(macOS 10.14, *)) {
     return GetSystemColor(MacSystemColorID::kControlAccentColor, color_scheme);

third_party/blink/renderer/core/paint/theme_painter_default.cc

@@ -181,7 +181,7 @@ absl::optional<SkColor> GetAccentColor(const ComputedStyle& style) {
   mojom::blink::ColorScheme color_scheme = style.UsedColorScheme();
   LayoutTheme& layout_theme = LayoutTheme::GetTheme();
   if (layout_theme.IsAccentColorCustomized(color_scheme)) {
-    return layout_theme.GetAccentColor(color_scheme).Rgb();
+    return layout_theme.GetSystemAccentColor(color_scheme).Rgb();
   }
 
   return absl::nullopt;

third_party/blink/renderer/platform/runtime_enabled_features.json5

@@ -913,6 +913,10 @@
       name: "CSSStyleQueries",
       status: "stable"
     },
+    {
+      name: "CSSSystemAccentColor",
+      status: "experimental",
+    },
     // Support for CSS Toggles, https://tabatkins.github.io/css-toggle/
     {
       name: "CSSToggles",