From b352a6b59d5deb10fb1a29b0b521439b3823e7e3 Mon Sep 17 00:00:00 2001
From: FalseHonesty <thefalsehonesty@gmail.com>
Date: Mon, 25 May 2020 14:54:27 -0400
Subject: [PATCH] LibWeb: Implement vendor specific CSS color style for System
 Palette

Add "-libweb-palette-foo-bar" CSS color properties to allow CSS to
style itself using the currently selected System Theme.
---
 Base/home/anon/www/palette.html       |   9 ++
 Base/home/anon/www/welcome.html       |   1 +
 Libraries/LibWeb/CSS/StyleValue.cpp   | 225 +++++++++++++++++++++++++-
 Libraries/LibWeb/CSS/StyleValue.h     |  54 +++++++
 Libraries/LibWeb/Parser/CSSParser.cpp | 118 ++++++++++++++
 5 files changed, 406 insertions(+), 1 deletion(-)
 create mode 100644 Base/home/anon/www/palette.html
diff --git a/Base/home/anon/www/palette.html b/Base/home/anon/www/palette.html
new file mode 100644
index 00000000000..2fe2551021b
--- /dev/null
+++ b/Base/home/anon/www/palette.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>System palette css test</title>
+</head>
+<body>
+<p style="color: -libweb-palette-syntax-identifier">All of my text should be the identifier color</p>
+</body>
+</html>
diff --git a/Base/home/anon/www/welcome.html b/Base/home/anon/www/welcome.html
index adb12f2f037..4a7fa634ce5 100644
--- a/Base/home/anon/www/welcome.html
+++ b/Base/home/anon/www/welcome.html
@@ -28,6 +28,7 @@ span#ua {
     <p>Your user agent is: <b><span id="ua"></span></b></p>
     <p>Some small test pages:</p>
     <ul>
+        <li><a href="palette.html">system palette color css extension</a></li>
         <li><a href="inline-block-link.html">link inside display: inline-block</a></li>
         <li><a href="set-interval.html">setInterval() test</a></li>
         <li><a href="html-escape-test.html">html character escape test</a></li>
diff --git a/Libraries/LibWeb/CSS/StyleValue.cpp b/Libraries/LibWeb/CSS/StyleValue.cpp
index e507fc05295..f58d6d19da6 100644
--- a/Libraries/LibWeb/CSS/StyleValue.cpp
+++ b/Libraries/LibWeb/CSS/StyleValue.cpp
@@ -27,9 +27,11 @@
 #include <AK/ByteBuffer.h>
 #include <LibGfx/Bitmap.h>
 #include <LibGfx/PNGLoader.h>
+#include <LibGfx/Palette.h>
 #include <LibWeb/CSS/StyleValue.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/Frame.h>
+#include <LibWeb/HtmlView.h>
 #include <LibWeb/ResourceLoader.h>
 
 namespace Web {
@@ -50,6 +52,114 @@ String IdentifierStyleValue::to_string() const
         return "(invalid)";
     case CSS::ValueID::VendorSpecificLink:
         return "-libweb-link";
+    case CSS::ValueID::VendorSpecificPaletteDesktopBackground:
+        return "-libweb-palette-desktop-background";
+    case CSS::ValueID::VendorSpecificPaletteActiveWindowBorder1:
+        return "-libweb-palette-active-window-border1";
+    case CSS::ValueID::VendorSpecificPaletteActiveWindowBorder2:
+        return "-libweb-palette-active-window-border2";
+    case CSS::ValueID::VendorSpecificPaletteActiveWindowTitle:
+        return "-libweb-palette-active-window-title";
+    case CSS::ValueID::VendorSpecificPaletteInactiveWindowBorder1:
+        return "-libweb-palette-inactive-window-border1";
+    case CSS::ValueID::VendorSpecificPaletteInactiveWindowBorder2:
+        return "-libweb-palette-inactive-window-border2";
+    case CSS::ValueID::VendorSpecificPaletteInactiveWindowTitle:
+        return "-libweb-palette-inactive-window-title";
+    case CSS::ValueID::VendorSpecificPaletteMovingWindowBorder1:
+        return "-libweb-palette-moving-window-border1";
+    case CSS::ValueID::VendorSpecificPaletteMovingWindowBorder2:
+        return "-libweb-palette-moving-window-border2";
+    case CSS::ValueID::VendorSpecificPaletteMovingWindowTitle:
+        return "-libweb-palette-moving-window-title";
+    case CSS::ValueID::VendorSpecificPaletteHighlightWindowBorder1:
+        return "-libweb-palette-highlight-window-border1";
+    case CSS::ValueID::VendorSpecificPaletteHighlightWindowBorder2:
+        return "-libweb-palette-highlight-window-border2";
+    case CSS::ValueID::VendorSpecificPaletteHighlightWindowTitle:
+        return "-libweb-palette-highlight-window-title";
+    case CSS::ValueID::VendorSpecificPaletteMenuStripe:
+        return "-libweb-palette-menu-stripe";
+    case CSS::ValueID::VendorSpecificPaletteMenuBase:
+        return "-libweb-palette-menu-base";
+    case CSS::ValueID::VendorSpecificPaletteMenuBaseText:
+        return "-libweb-palette-menu-base-text";
+    case CSS::ValueID::VendorSpecificPaletteMenuSelection:
+        return "-libweb-palette-menu-selection";
+    case CSS::ValueID::VendorSpecificPaletteMenuSelectionText:
+        return "-libweb-palette-menu-selection-text";
+    case CSS::ValueID::VendorSpecificPaletteWindow:
+        return "-libweb-palette-window";
+    case CSS::ValueID::VendorSpecificPaletteWindowText:
+        return "-libweb-palette-window-text";
+    case CSS::ValueID::VendorSpecificPaletteButton:
+        return "-libweb-palette-button";
+    case CSS::ValueID::VendorSpecificPaletteButtonText:
+        return "-libweb-palette-button-text";
+    case CSS::ValueID::VendorSpecificPaletteBase:
+        return "-libweb-palette-base";
+    case CSS::ValueID::VendorSpecificPaletteBaseText:
+        return "-libweb-palette-base-text";
+    case CSS::ValueID::VendorSpecificPaletteThreedHighlight:
+        return "-libweb-palette-threed-highlight";
+    case CSS::ValueID::VendorSpecificPaletteThreedShadow1:
+        return "-libweb-palette-threed-shadow1";
+    case CSS::ValueID::VendorSpecificPaletteThreedShadow2:
+        return "-libweb-palette-threed-shadow2";
+    case CSS::ValueID::VendorSpecificPaletteHoverHighlight:
+        return "-libweb-palette-hover-highlight";
+    case CSS::ValueID::VendorSpecificPaletteSelection:
+        return "-libweb-palette-selection";
+    case CSS::ValueID::VendorSpecificPaletteSelectionText:
+        return "-libweb-palette-selection-text";
+    case CSS::ValueID::VendorSpecificPaletteInactiveSelection:
+        return "-libweb-palette-inactive-selection";
+    case CSS::ValueID::VendorSpecificPaletteInactiveSelectionText:
+        return "-libweb-palette-inactive-selection-text";
+    case CSS::ValueID::VendorSpecificPaletteRubberBandFill:
+        return "-libweb-palette-rubber-band-fill";
+    case CSS::ValueID::VendorSpecificPaletteRubberBandBorder:
+        return "-libweb-palette-rubber-band-border";
+    case CSS::ValueID::VendorSpecificPaletteLink:
+        return "-libweb-palette-link";
+    case CSS::ValueID::VendorSpecificPaletteActiveLink:
+        return "-libweb-palette-active-link";
+    case CSS::ValueID::VendorSpecificPaletteVisitedLink:
+        return "-libweb-palette-visited-link";
+    case CSS::ValueID::VendorSpecificPaletteRuler:
+        return "-libweb-palette-ruler";
+    case CSS::ValueID::VendorSpecificPaletteRulerBorder:
+        return "-libweb-palette-ruler-border";
+    case CSS::ValueID::VendorSpecificPaletteRulerActiveText:
+        return "-libweb-palette-ruler-active-text";
+    case CSS::ValueID::VendorSpecificPaletteRulerInactiveText:
+        return "-libweb-palette-ruler-inactive-text";
+    case CSS::ValueID::VendorSpecificPaletteTextCursor:
+        return "-libweb-palette-text-cursor";
+    case CSS::ValueID::VendorSpecificPaletteFocusOutline:
+        return "-libweb-palette-focus-outline";
+    case CSS::ValueID::VendorSpecificPaletteSyntaxComment:
+        return "-libweb-palette-syntax-comment";
+    case CSS::ValueID::VendorSpecificPaletteSyntaxNumber:
+        return "-libweb-palette-syntax-number";
+    case CSS::ValueID::VendorSpecificPaletteSyntaxString:
+        return "-libweb-palette-syntax-string";
+    case CSS::ValueID::VendorSpecificPaletteSyntaxType:
+        return "-libweb-palette-syntax-type";
+    case CSS::ValueID::VendorSpecificPaletteSyntaxPunctuation:
+        return "-libweb-palette-syntax-punctuation";
+    case CSS::ValueID::VendorSpecificPaletteSyntaxOperator:
+        return "-libweb-palette-syntax-operator";
+    case CSS::ValueID::VendorSpecificPaletteSyntaxKeyword:
+        return "-libweb-palette-syntax-keyword";
+    case CSS::ValueID::VendorSpecificPaletteSyntaxControlKeyword:
+        return "-libweb-palette-syntax-control-keyword";
+    case CSS::ValueID::VendorSpecificPaletteSyntaxIdentifier:
+        return "-libweb-palette-syntax-identifier";
+    case CSS::ValueID::VendorSpecificPaletteSyntaxPreprocessorStatement:
+        return "-libweb-palette-syntax-preprocessor-statement";
+    case CSS::ValueID::VendorSpecificPaletteSyntaxPreprocessorValue:
+        return "-libweb-palette-syntax-preprocessor-value";
     default:
         ASSERT_NOT_REACHED();
     }
@@ -59,7 +169,120 @@ Color IdentifierStyleValue::to_color(const Document& document) const
 {
     if (id() == CSS::ValueID::VendorSpecificLink)
         return document.link_color();
-    return {};
+
+    auto palette = document.frame()->html_view()->palette();
+    switch (id()) {
+    case CSS::ValueID::VendorSpecificPaletteDesktopBackground:
+        return palette.color(ColorRole::DesktopBackground);
+    case CSS::ValueID::VendorSpecificPaletteActiveWindowBorder1:
+        return palette.color(ColorRole::ActiveWindowBorder1);
+    case CSS::ValueID::VendorSpecificPaletteActiveWindowBorder2:
+        return palette.color(ColorRole::ActiveWindowBorder2);
+    case CSS::ValueID::VendorSpecificPaletteActiveWindowTitle:
+        return palette.color(ColorRole::ActiveWindowTitle);
+    case CSS::ValueID::VendorSpecificPaletteInactiveWindowBorder1:
+        return palette.color(ColorRole::InactiveWindowBorder1);
+    case CSS::ValueID::VendorSpecificPaletteInactiveWindowBorder2:
+        return palette.color(ColorRole::InactiveWindowBorder2);
+    case CSS::ValueID::VendorSpecificPaletteInactiveWindowTitle:
+        return palette.color(ColorRole::InactiveWindowTitle);
+    case CSS::ValueID::VendorSpecificPaletteMovingWindowBorder1:
+        return palette.color(ColorRole::MovingWindowBorder1);
+    case CSS::ValueID::VendorSpecificPaletteMovingWindowBorder2:
+        return palette.color(ColorRole::MovingWindowBorder2);
+    case CSS::ValueID::VendorSpecificPaletteMovingWindowTitle:
+        return palette.color(ColorRole::MovingWindowTitle);
+    case CSS::ValueID::VendorSpecificPaletteHighlightWindowBorder1:
+        return palette.color(ColorRole::HighlightWindowBorder1);
+    case CSS::ValueID::VendorSpecificPaletteHighlightWindowBorder2:
+        return palette.color(ColorRole::HighlightWindowBorder2);
+    case CSS::ValueID::VendorSpecificPaletteHighlightWindowTitle:
+        return palette.color(ColorRole::HighlightWindowTitle);
+    case CSS::ValueID::VendorSpecificPaletteMenuStripe:
+        return palette.color(ColorRole::MenuStripe);
+    case CSS::ValueID::VendorSpecificPaletteMenuBase:
+        return palette.color(ColorRole::MenuBase);
+    case CSS::ValueID::VendorSpecificPaletteMenuBaseText:
+        return palette.color(ColorRole::MenuBaseText);
+    case CSS::ValueID::VendorSpecificPaletteMenuSelection:
+        return palette.color(ColorRole::MenuSelection);
+    case CSS::ValueID::VendorSpecificPaletteMenuSelectionText:
+        return palette.color(ColorRole::MenuSelectionText);
+    case CSS::ValueID::VendorSpecificPaletteWindow:
+        return palette.color(ColorRole::Window);
+    case CSS::ValueID::VendorSpecificPaletteWindowText:
+        return palette.color(ColorRole::WindowText);
+    case CSS::ValueID::VendorSpecificPaletteButton:
+        return palette.color(ColorRole::Button);
+    case CSS::ValueID::VendorSpecificPaletteButtonText:
+        return palette.color(ColorRole::ButtonText);
+    case CSS::ValueID::VendorSpecificPaletteBase:
+        return palette.color(ColorRole::Base);
+    case CSS::ValueID::VendorSpecificPaletteBaseText:
+        return palette.color(ColorRole::BaseText);
+    case CSS::ValueID::VendorSpecificPaletteThreedHighlight:
+        return palette.color(ColorRole::ThreedHighlight);
+    case CSS::ValueID::VendorSpecificPaletteThreedShadow1:
+        return palette.color(ColorRole::ThreedShadow1);
+    case CSS::ValueID::VendorSpecificPaletteThreedShadow2:
+        return palette.color(ColorRole::ThreedShadow2);
+    case CSS::ValueID::VendorSpecificPaletteHoverHighlight:
+        return palette.color(ColorRole::HoverHighlight);
+    case CSS::ValueID::VendorSpecificPaletteSelection:
+        return palette.color(ColorRole::Selection);
+    case CSS::ValueID::VendorSpecificPaletteSelectionText:
+        return palette.color(ColorRole::SelectionText);
+    case CSS::ValueID::VendorSpecificPaletteInactiveSelection:
+        return palette.color(ColorRole::InactiveSelection);
+    case CSS::ValueID::VendorSpecificPaletteInactiveSelectionText:
+        return palette.color(ColorRole::InactiveSelectionText);
+    case CSS::ValueID::VendorSpecificPaletteRubberBandFill:
+        return palette.color(ColorRole::RubberBandFill);
+    case CSS::ValueID::VendorSpecificPaletteRubberBandBorder:
+        return palette.color(ColorRole::RubberBandBorder);
+    case CSS::ValueID::VendorSpecificPaletteLink:
+        return palette.color(ColorRole::Link);
+    case CSS::ValueID::VendorSpecificPaletteActiveLink:
+        return palette.color(ColorRole::ActiveLink);
+    case CSS::ValueID::VendorSpecificPaletteVisitedLink:
+        return palette.color(ColorRole::VisitedLink);
+    case CSS::ValueID::VendorSpecificPaletteRuler:
+        return palette.color(ColorRole::Ruler);
+    case CSS::ValueID::VendorSpecificPaletteRulerBorder:
+        return palette.color(ColorRole::RulerBorder);
+    case CSS::ValueID::VendorSpecificPaletteRulerActiveText:
+        return palette.color(ColorRole::RulerActiveText);
+    case CSS::ValueID::VendorSpecificPaletteRulerInactiveText:
+        return palette.color(ColorRole::RulerInactiveText);
+    case CSS::ValueID::VendorSpecificPaletteTextCursor:
+        return palette.color(ColorRole::TextCursor);
+    case CSS::ValueID::VendorSpecificPaletteFocusOutline:
+        return palette.color(ColorRole::FocusOutline);
+    case CSS::ValueID::VendorSpecificPaletteSyntaxComment:
+        return palette.color(ColorRole::SyntaxComment);
+    case CSS::ValueID::VendorSpecificPaletteSyntaxNumber:
+        return palette.color(ColorRole::SyntaxNumber);
+    case CSS::ValueID::VendorSpecificPaletteSyntaxString:
+        return palette.color(ColorRole::SyntaxString);
+    case CSS::ValueID::VendorSpecificPaletteSyntaxType:
+        return palette.color(ColorRole::SyntaxType);
+    case CSS::ValueID::VendorSpecificPaletteSyntaxPunctuation:
+        return palette.color(ColorRole::SyntaxPunctuation);
+    case CSS::ValueID::VendorSpecificPaletteSyntaxOperator:
+        return palette.color(ColorRole::SyntaxOperator);
+    case CSS::ValueID::VendorSpecificPaletteSyntaxKeyword:
+        return palette.color(ColorRole::SyntaxKeyword);
+    case CSS::ValueID::VendorSpecificPaletteSyntaxControlKeyword:
+        return palette.color(ColorRole::SyntaxControlKeyword);
+    case CSS::ValueID::VendorSpecificPaletteSyntaxIdentifier:
+        return palette.color(ColorRole::SyntaxIdentifier);
+    case CSS::ValueID::VendorSpecificPaletteSyntaxPreprocessorStatement:
+        return palette.color(ColorRole::SyntaxPreprocessorStatement);
+    case CSS::ValueID::VendorSpecificPaletteSyntaxPreprocessorValue:
+        return palette.color(ColorRole::SyntaxPreprocessorValue);
+    default:
+        return {};
+    }
 }
 
 ImageStyleValue::ImageStyleValue(const URL& url, Document& document)
diff --git a/Libraries/LibWeb/CSS/StyleValue.h b/Libraries/LibWeb/CSS/StyleValue.h
index 8f49de7cd48..e269441ec0f 100644
--- a/Libraries/LibWeb/CSS/StyleValue.h
+++ b/Libraries/LibWeb/CSS/StyleValue.h
@@ -45,6 +45,60 @@ namespace CSS {
 enum class ValueID {
     Invalid,
     VendorSpecificLink,
+    VendorSpecificPaletteDesktopBackground,
+    VendorSpecificPaletteActiveWindowBorder1,
+    VendorSpecificPaletteActiveWindowBorder2,
+    VendorSpecificPaletteActiveWindowTitle,
+    VendorSpecificPaletteInactiveWindowBorder1,
+    VendorSpecificPaletteInactiveWindowBorder2,
+    VendorSpecificPaletteInactiveWindowTitle,
+    VendorSpecificPaletteMovingWindowBorder1,
+    VendorSpecificPaletteMovingWindowBorder2,
+    VendorSpecificPaletteMovingWindowTitle,
+    VendorSpecificPaletteHighlightWindowBorder1,
+    VendorSpecificPaletteHighlightWindowBorder2,
+    VendorSpecificPaletteHighlightWindowTitle,
+    VendorSpecificPaletteMenuStripe,
+    VendorSpecificPaletteMenuBase,
+    VendorSpecificPaletteMenuBaseText,
+    VendorSpecificPaletteMenuSelection,
+    VendorSpecificPaletteMenuSelectionText,
+    VendorSpecificPaletteWindow,
+    VendorSpecificPaletteWindowText,
+    VendorSpecificPaletteButton,
+    VendorSpecificPaletteButtonText,
+    VendorSpecificPaletteBase,
+    VendorSpecificPaletteBaseText,
+    VendorSpecificPaletteThreedHighlight,
+    VendorSpecificPaletteThreedShadow1,
+    VendorSpecificPaletteThreedShadow2,
+    VendorSpecificPaletteHoverHighlight,
+    VendorSpecificPaletteSelection,
+    VendorSpecificPaletteSelectionText,
+    VendorSpecificPaletteInactiveSelection,
+    VendorSpecificPaletteInactiveSelectionText,
+    VendorSpecificPaletteRubberBandFill,
+    VendorSpecificPaletteRubberBandBorder,
+    VendorSpecificPaletteLink,
+    VendorSpecificPaletteActiveLink,
+    VendorSpecificPaletteVisitedLink,
+    VendorSpecificPaletteRuler,
+    VendorSpecificPaletteRulerBorder,
+    VendorSpecificPaletteRulerActiveText,
+    VendorSpecificPaletteRulerInactiveText,
+    VendorSpecificPaletteTextCursor,
+    VendorSpecificPaletteFocusOutline,
+    VendorSpecificPaletteSyntaxComment,
+    VendorSpecificPaletteSyntaxNumber,
+    VendorSpecificPaletteSyntaxString,
+    VendorSpecificPaletteSyntaxType,
+    VendorSpecificPaletteSyntaxPunctuation,
+    VendorSpecificPaletteSyntaxOperator,
+    VendorSpecificPaletteSyntaxKeyword,
+    VendorSpecificPaletteSyntaxControlKeyword,
+    VendorSpecificPaletteSyntaxIdentifier,
+    VendorSpecificPaletteSyntaxPreprocessorStatement,
+    VendorSpecificPaletteSyntaxPreprocessorValue,
     Center,
     Left,
     Right,
diff --git a/Libraries/LibWeb/Parser/CSSParser.cpp b/Libraries/LibWeb/Parser/CSSParser.cpp
index b432ead398b..e7ded2342a4 100644
--- a/Libraries/LibWeb/Parser/CSSParser.cpp
+++ b/Libraries/LibWeb/Parser/CSSParser.cpp
@@ -41,6 +41,120 @@
 
 namespace Web {
 
+static CSS::ValueID value_id_for_palette_string(const StringView& string)
+{
+    if (string == "desktop-background")
+        return CSS::ValueID::VendorSpecificPaletteDesktopBackground;
+    else if (string == "active-window-border1")
+        return CSS::ValueID::VendorSpecificPaletteActiveWindowBorder1;
+    else if (string == "active-window-border2")
+        return CSS::ValueID::VendorSpecificPaletteActiveWindowBorder2;
+    else if (string == "active-window-title")
+        return CSS::ValueID::VendorSpecificPaletteActiveWindowTitle;
+    else if (string == "inactive-window-border1")
+        return CSS::ValueID::VendorSpecificPaletteInactiveWindowBorder1;
+    else if (string == "inactive-window-border2")
+        return CSS::ValueID::VendorSpecificPaletteInactiveWindowBorder2;
+    else if (string == "inactive-window-title")
+        return CSS::ValueID::VendorSpecificPaletteInactiveWindowTitle;
+    else if (string == "moving-window-border1")
+        return CSS::ValueID::VendorSpecificPaletteMovingWindowBorder1;
+    else if (string == "moving-window-border2")
+        return CSS::ValueID::VendorSpecificPaletteMovingWindowBorder2;
+    else if (string == "moving-window-title")
+        return CSS::ValueID::VendorSpecificPaletteMovingWindowTitle;
+    else if (string == "highlight-window-border1")
+        return CSS::ValueID::VendorSpecificPaletteHighlightWindowBorder1;
+    else if (string == "highlight-window-border2")
+        return CSS::ValueID::VendorSpecificPaletteHighlightWindowBorder2;
+    else if (string == "highlight-window-title")
+        return CSS::ValueID::VendorSpecificPaletteHighlightWindowTitle;
+    else if (string == "menu-stripe")
+        return CSS::ValueID::VendorSpecificPaletteMenuStripe;
+    else if (string == "menu-base")
+        return CSS::ValueID::VendorSpecificPaletteMenuBase;
+    else if (string == "menu-base-text")
+        return CSS::ValueID::VendorSpecificPaletteMenuBaseText;
+    else if (string == "menu-selection")
+        return CSS::ValueID::VendorSpecificPaletteMenuSelection;
+    else if (string == "menu-selection-text")
+        return CSS::ValueID::VendorSpecificPaletteMenuSelectionText;
+    else if (string == "window")
+        return CSS::ValueID::VendorSpecificPaletteWindow;
+    else if (string == "window-text")
+        return CSS::ValueID::VendorSpecificPaletteWindowText;
+    else if (string == "button")
+        return CSS::ValueID::VendorSpecificPaletteButton;
+    else if (string == "button-text")
+        return CSS::ValueID::VendorSpecificPaletteButtonText;
+    else if (string == "base")
+        return CSS::ValueID::VendorSpecificPaletteBase;
+    else if (string == "base-text")
+        return CSS::ValueID::VendorSpecificPaletteBaseText;
+    else if (string == "threed-highlight")
+        return CSS::ValueID::VendorSpecificPaletteThreedHighlight;
+    else if (string == "threed-shadow1")
+        return CSS::ValueID::VendorSpecificPaletteThreedShadow1;
+    else if (string == "threed-shadow2")
+        return CSS::ValueID::VendorSpecificPaletteThreedShadow2;
+    else if (string == "hover-highlight")
+        return CSS::ValueID::VendorSpecificPaletteHoverHighlight;
+    else if (string == "selection")
+        return CSS::ValueID::VendorSpecificPaletteSelection;
+    else if (string == "selection-text")
+        return CSS::ValueID::VendorSpecificPaletteSelectionText;
+    else if (string == "inactive-selection")
+        return CSS::ValueID::VendorSpecificPaletteInactiveSelection;
+    else if (string == "inactive-selection-text")
+        return CSS::ValueID::VendorSpecificPaletteInactiveSelectionText;
+    else if (string == "rubber-band-fill")
+        return CSS::ValueID::VendorSpecificPaletteRubberBandFill;
+    else if (string == "rubber-band-border")
+        return CSS::ValueID::VendorSpecificPaletteRubberBandBorder;
+    else if (string == "link")
+        return CSS::ValueID::VendorSpecificPaletteLink;
+    else if (string == "active-link")
+        return CSS::ValueID::VendorSpecificPaletteActiveLink;
+    else if (string == "visited-link")
+        return CSS::ValueID::VendorSpecificPaletteVisitedLink;
+    else if (string == "ruler")
+        return CSS::ValueID::VendorSpecificPaletteRuler;
+    else if (string == "ruler-border")
+        return CSS::ValueID::VendorSpecificPaletteRulerBorder;
+    else if (string == "ruler-active-text")
+        return CSS::ValueID::VendorSpecificPaletteRulerActiveText;
+    else if (string == "ruler-inactive-text")
+        return CSS::ValueID::VendorSpecificPaletteRulerInactiveText;
+    else if (string == "text-cursor")
+        return CSS::ValueID::VendorSpecificPaletteTextCursor;
+    else if (string == "focus-outline")
+        return CSS::ValueID::VendorSpecificPaletteFocusOutline;
+    else if (string == "syntax-comment")
+        return CSS::ValueID::VendorSpecificPaletteSyntaxComment;
+    else if (string == "syntax-number")
+        return CSS::ValueID::VendorSpecificPaletteSyntaxNumber;
+    else if (string == "syntax-string")
+        return CSS::ValueID::VendorSpecificPaletteSyntaxString;
+    else if (string == "syntax-type")
+        return CSS::ValueID::VendorSpecificPaletteSyntaxType;
+    else if (string == "syntax-punctuation")
+        return CSS::ValueID::VendorSpecificPaletteSyntaxPunctuation;
+    else if (string == "syntax-operator")
+        return CSS::ValueID::VendorSpecificPaletteSyntaxOperator;
+    else if (string == "syntax-keyword")
+        return CSS::ValueID::VendorSpecificPaletteSyntaxKeyword;
+    else if (string == "syntax-control-keyword")
+        return CSS::ValueID::VendorSpecificPaletteSyntaxControlKeyword;
+    else if (string == "syntax-identifier")
+        return CSS::ValueID::VendorSpecificPaletteSyntaxIdentifier;
+    else if (string == "syntax-preprocessor-statement")
+        return CSS::ValueID::VendorSpecificPaletteSyntaxPreprocessorStatement;
+    else if (string == "syntax-preprocessor-value")
+        return CSS::ValueID::VendorSpecificPaletteSyntaxPreprocessorValue;
+    else
+        return CSS::ValueID::Invalid;
+}
+
 static Optional<Color> parse_css_color(const StringView& view)
 {
     if (view.equals_ignoring_case("transparent"))
@@ -160,6 +274,10 @@ NonnullRefPtr<StyleValue> parse_css_value(const StringView& string)
 
     if (string == "-libweb-link")
         return IdentifierStyleValue::create(CSS::ValueID::VendorSpecificLink);
+    else if (string.starts_with("-libweb-palette-")) {
+        auto value_id = value_id_for_palette_string(string.substring_view(16, string.length() - 16));
+        return IdentifierStyleValue::create(value_id);
+    }
 
     return StringStyleValue::create(string);
 }
