diff --git a/Userland/Libraries/LibWeb/CMakeLists.txt b/Userland/Libraries/LibWeb/CMakeLists.txt index 969256524ea..b2237256a57 100644 --- a/Userland/Libraries/LibWeb/CMakeLists.txt +++ b/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 diff --git a/Userland/Libraries/LibWeb/CSS/Identifiers.json b/Userland/Libraries/LibWeb/CSS/Identifiers.json index fe05098ce5f..797043150b4 100644 --- a/Userland/Libraries/LibWeb/CSS/Identifiers.json +++ b/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", diff --git a/Userland/Libraries/LibWeb/CSS/StyleValues/IdentifierStyleValue.cpp b/Userland/Libraries/LibWeb/CSS/StyleValues/IdentifierStyleValue.cpp index ae4ab201a11..843503771dc 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleValues/IdentifierStyleValue.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleValues/IdentifierStyleValue.cpp @@ -9,6 +9,7 @@ #include "IdentifierStyleValue.h" #include +#include #include #include @@ -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 node return node->computed_values().color(); } + // First, handle 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; diff --git a/Userland/Libraries/LibWeb/CSS/SystemColor.cpp b/Userland/Libraries/LibWeb/CSS/SystemColor.cpp new file mode 100644 index 00000000000..5e57594887a --- /dev/null +++ b/Userland/Libraries/LibWeb/CSS/SystemColor.cpp @@ -0,0 +1,106 @@ +/* + * Copyright (c) 2023, Sam Atkins + * + * SPDX-License-Identifier: BSD-2-Clause + */ + +#include + +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); +} + +} diff --git a/Userland/Libraries/LibWeb/CSS/SystemColor.h b/Userland/Libraries/LibWeb/CSS/SystemColor.h new file mode 100644 index 00000000000..c6408342a3f --- /dev/null +++ b/Userland/Libraries/LibWeb/CSS/SystemColor.h @@ -0,0 +1,35 @@ +/* + * Copyright (c) 2023, Sam Atkins + * + * SPDX-License-Identifier: BSD-2-Clause + */ + +#pragma once + +#include + +// 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(); + +}