LibWeb: Implement <system-color> and <deprecated-color> keywords

The spec allows for these either to be based on the OS, or to be defined
by the browser. Looking at the other browser engines, there's a mix of
the two options. Since we've had issues with using OS colors as
defaults, let's use hard-coded colors for now. Some of these are based
on the definitions in
https://html.spec.whatwg.org/multipage/rendering.html

Userland/Libraries/LibWeb/CMakeLists.txt

@@ -126,6 +126,7 @@ set(SOURCES
     CSS/StyleValues/UnresolvedStyleValue.cpp
     CSS/Supports.cpp
     CSS/SyntaxHighlighter/SyntaxHighlighter.cpp
+    CSS/SystemColor.cpp
     CSS/Time.cpp
     CSS/VisualViewport.cpp
     Cookie/Cookie.cpp

Userland/Libraries/LibWeb/CSS/Identifiers.json

@@ -58,7 +58,12 @@
   "-libweb-palette-window",
   "-libweb-palette-window-text",
   "absolute",
+  "accentcolor",
+  "accentcolortext",
   "active",
+  "activeborder",
+  "activecaption",
+  "activetext",
   "additive",
   "alias",
   "all",
@@ -66,8 +71,10 @@
   "alternate",
   "alternate-reverse",
   "anywhere",
+  "appworkspace",
   "auto",
   "back",
+  "background",
   "backwards",
   "baseline",
   "blink",
@@ -80,7 +87,15 @@
   "break-word",
   "browser",
   "button",
+  "buttonborder",
+  "buttonface",
+  "buttonhighlight",
+  "buttonshadow",
+  "buttontext",
+  "canvas",
+  "canvastext",
   "capitalize",
+  "captiontext",
   "cell",
   "center",
   "circle",
@@ -130,6 +145,8 @@
   "extra-expanded",
   "fantasy",
   "fast",
+  "field",
+  "fieldtext",
   "fine",
   "fill",
   "fit-content",
@@ -146,14 +163,22 @@
   "fullscreen",
   "grab",
   "grabbing",
+  "graytext",
   "grid",
   "groove",
   "help",
   "hidden",
   "high",
   "high-quality",
+  "highlight",
+  "highlighttext",
   "hover",
+  "inactiveborder",
+  "inactivecaption",
+  "inactivecaptiontext",
   "infinite",
+  "infobackground",
+  "infotext",
   "initial-only",
   "inline",
   "inline-block",
@@ -183,6 +208,7 @@
   "lighter",
   "linear",
   "line-through",
+  "linktext",
   "list-item",
   "local",
   "lower-alpha",
@@ -191,8 +217,12 @@
   "lowercase",
   "ltr",
   "listbox",
+  "mark",
+  "marktext",
   "max-content",
   "medium",
+  "menu",
+  "menutext",
   "middle",
   "min-content",
   "minimal-ui",
@@ -265,7 +295,10 @@
   "sans-serif",
   "scale-down",
   "scroll",
+  "scrollbar",
   "se-resize",
+  "selecteditem",
+  "selecteditemtext",
   "self-end",
   "self-start",
   "semi-condensed",
@@ -311,6 +344,11 @@
   "text-top",
   "thick",
   "thin",
+  "threeddarkshadow",
+  "threedface",
+  "threedhighlight",
+  "threedlightshadow",
+  "threedshadow",
   "to-zero",
   "top",
   "textarea",
@@ -330,9 +368,13 @@
   "uppercase",
   "vertical-text",
   "visible",
+  "visitedtext",
   "w-resize",
   "wait",
   "wavy",
+  "window",
+  "windowframe",
+  "windowtext",
   "wrap",
   "wrap-reverse",
   "x-large",

Userland/Libraries/LibWeb/CSS/StyleValues/IdentifierStyleValue.cpp

@@ -9,6 +9,7 @@
 
 #include "IdentifierStyleValue.h"
 #include <LibGfx/Palette.h>
+#include <LibWeb/CSS/SystemColor.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/Layout/Node.h>
 
@@ -22,7 +23,32 @@ String IdentifierStyleValue::to_string() const
 bool IdentifierStyleValue::is_color(ValueID value_id)
 {
     switch (value_id) {
+    case ValueID::Accentcolor:
+    case ValueID::Accentcolortext:
+    case ValueID::Activeborder:
+    case ValueID::Activecaption:
+    case ValueID::Activetext:
+    case ValueID::Appworkspace:
+    case ValueID::Background:
+    case ValueID::Buttonborder:
+    case ValueID::Buttonface:
+    case ValueID::Buttonhighlight:
+    case ValueID::Buttonshadow:
+    case ValueID::Buttontext:
+    case ValueID::Canvas:
+    case ValueID::Canvastext:
+    case ValueID::Captiontext:
     case ValueID::Currentcolor:
+    case ValueID::Field:
+    case ValueID::Fieldtext:
+    case ValueID::Graytext:
+    case ValueID::Highlight:
+    case ValueID::Highlighttext:
+    case ValueID::Inactiveborder:
+    case ValueID::Inactivecaption:
+    case ValueID::Inactivecaptiontext:
+    case ValueID::Infobackground:
+    case ValueID::Infotext:
     case ValueID::LibwebLink:
     case ValueID::LibwebPaletteActiveLink:
     case ValueID::LibwebPaletteActiveWindowBorder1:
@@ -78,6 +104,23 @@ bool IdentifierStyleValue::is_color(ValueID value_id)
     case ValueID::LibwebPaletteVisitedLink:
     case ValueID::LibwebPaletteWindow:
     case ValueID::LibwebPaletteWindowText:
+    case ValueID::Linktext:
+    case ValueID::Mark:
+    case ValueID::Marktext:
+    case ValueID::Menu:
+    case ValueID::Menutext:
+    case ValueID::Scrollbar:
+    case ValueID::Selecteditem:
+    case ValueID::Selecteditemtext:
+    case ValueID::Threeddarkshadow:
+    case ValueID::Threedface:
+    case ValueID::Threedhighlight:
+    case ValueID::Threedlightshadow:
+    case ValueID::Threedshadow:
+    case ValueID::Visitedtext:
+    case ValueID::Window:
+    case ValueID::Windowframe:
+    case ValueID::Windowtext:
         return true;
     default:
         return false;
@@ -97,6 +140,75 @@ Color IdentifierStyleValue::to_color(Optional<Layout::NodeWithStyle const&> node
         return node->computed_values().color();
     }
 
+    // First, handle <system-color>s, since they don't require a node.
+    // https://www.w3.org/TR/css-color-4/#css-system-colors
+    // https://www.w3.org/TR/css-color-4/#deprecated-system-colors
+    switch (id()) {
+    case ValueID::Accentcolor:
+        return SystemColor::accent_color();
+    case ValueID::Accentcolortext:
+        return SystemColor::accent_color_text();
+    case ValueID::Activetext:
+        return SystemColor::active_text();
+    case ValueID::Buttonborder:
+    case ValueID::Activeborder:
+    case ValueID::Inactiveborder:
+    case ValueID::Threeddarkshadow:
+    case ValueID::Threedhighlight:
+    case ValueID::Threedlightshadow:
+    case ValueID::Threedshadow:
+    case ValueID::Windowframe:
+        return SystemColor::button_border();
+    case ValueID::Buttonface:
+    case ValueID::Buttonhighlight:
+    case ValueID::Buttonshadow:
+    case ValueID::Threedface:
+        return SystemColor::button_face();
+    case ValueID::Buttontext:
+        return SystemColor::button_face();
+    case ValueID::Canvas:
+    case ValueID::Appworkspace:
+    case ValueID::Background:
+    case ValueID::Inactivecaption:
+    case ValueID::Infobackground:
+    case ValueID::Menu:
+    case ValueID::Scrollbar:
+    case ValueID::Window:
+        return SystemColor::canvas();
+    case ValueID::Canvastext:
+    case ValueID::Activecaption:
+    case ValueID::Captiontext:
+    case ValueID::Infotext:
+    case ValueID::Menutext:
+    case ValueID::Windowtext:
+        return SystemColor::canvas_text();
+    case ValueID::Field:
+        return SystemColor::field();
+    case ValueID::Fieldtext:
+        return SystemColor::field_text();
+    case ValueID::Graytext:
+    case ValueID::Inactivecaptiontext:
+        return SystemColor::gray_text();
+    case ValueID::Highlight:
+        return SystemColor::highlight();
+    case ValueID::Highlighttext:
+        return SystemColor::highlight_text();
+    case ValueID::Linktext:
+        return SystemColor::link_text();
+    case ValueID::Mark:
+        return SystemColor::mark();
+    case ValueID::Marktext:
+        return SystemColor::mark_text();
+    case ValueID::Selecteditem:
+        return SystemColor::selected_item();
+    case ValueID::Selecteditemtext:
+        return SystemColor::selected_item_text();
+    case ValueID::Visitedtext:
+        return SystemColor::visited_text();
+    default:
+        break;
+    }
+
     if (!node.has_value()) {
         // FIXME: Can't resolve palette colors without layout node.
         return Color::Black;

Userland/Libraries/LibWeb/CSS/SystemColor.cpp

@@ -0,0 +1,106 @@
+/*
+ * Copyright (c) 2023, Sam Atkins <atkinssj@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include <LibWeb/CSS/SystemColor.h>
+
+namespace Web::CSS::SystemColor {
+
+Color accent_color()
+{
+    return Color(61, 174, 233);
+}
+
+Color accent_color_text()
+{
+    return Color(255, 255, 255);
+}
+
+Color active_text()
+{
+    return Color(255, 0, 0);
+}
+
+Color button_border()
+{
+    return Color(128, 128, 128);
+}
+
+Color button_face()
+{
+    return Color(212, 208, 200);
+}
+
+Color button_text()
+{
+    return Color(0, 0, 0);
+}
+
+Color canvas()
+{
+    return Color(255, 255, 255);
+}
+
+Color canvas_text()
+{
+    return Color(0, 0, 0);
+}
+
+Color field()
+{
+    return Color(255, 255, 255);
+}
+
+Color field_text()
+{
+    return Color(0, 0, 0);
+}
+
+Color gray_text()
+{
+    return Color(128, 128, 128);
+}
+
+Color highlight()
+{
+    return Color(61, 174, 233);
+}
+
+Color highlight_text()
+{
+    return Color(255, 255, 255);
+}
+
+Color link_text()
+{
+    return Color(0, 0, 238);
+}
+
+Color mark()
+{
+    return Color(255, 255, 0);
+}
+
+Color mark_text()
+{
+    return Color(0, 0, 0);
+}
+
+Color selected_item()
+{
+    return Color(61, 174, 233);
+}
+
+Color selected_item_text()
+{
+    return Color(255, 255, 255);
+}
+
+Color visited_text()
+{
+    return Color(85, 26, 139);
+}
+
+}

Userland/Libraries/LibWeb/CSS/SystemColor.h

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2023, Sam Atkins <atkinssj@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <LibGfx/Color.h>
+
+// https://www.w3.org/TR/css-color-4/#css-system-colors
+namespace Web::CSS::SystemColor {
+
+// FIXME: Provide colors for `color-scheme: dark` once we support that.
+Color accent_color();
+Color accent_color_text();
+Color active_text();
+Color button_border();
+Color button_face();
+Color button_text();
+Color canvas();
+Color canvas_text();
+Color field();
+Color field_text();
+Color gray_text();
+Color highlight();
+Color highlight_text();
+Color link_text();
+Color mark();
+Color mark_text();
+Color selected_item();
+Color selected_item_text();
+Color visited_text();
+
+}