LibWeb/CSS: Implement the light-dark color function

Author: https://github.com/Gingeh
Commit: 8e56109515
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3146
Reviewed-by: https://github.com/AtkinsSJ ✅

Libraries/LibWeb/CMakeLists.txt

@@ -138,6 +138,7 @@ set(SOURCES
     CSS/StyleValues/CSSKeywordValue.cpp
     CSS/StyleValues/CSSLabLike.cpp
     CSS/StyleValues/CSSLCHLike.cpp
+    CSS/StyleValues/CSSLightDark.cpp
     CSS/StyleValues/CSSRGB.cpp
     CSS/StyleValues/DisplayStyleValue.cpp
     CSS/StyleValues/EasingStyleValue.cpp

Libraries/LibWeb/CSS/Parser/Parser.cpp

@@ -41,6 +41,7 @@
 #include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
 #include <LibWeb/CSS/StyleValues/CSSLCHLike.h>
 #include <LibWeb/CSS/StyleValues/CSSLabLike.h>
+#include <LibWeb/CSS/StyleValues/CSSLightDark.h>
 #include <LibWeb/CSS/StyleValues/CSSRGB.h>
 #include <LibWeb/CSS/StyleValues/ColorSchemeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ContentStyleValue.h>
@@ -3491,6 +3492,40 @@ RefPtr<CSSStyleValue> Parser::parse_color_function(TokenStream<ComponentValue>&
         alpha.release_nonnull());
 }
 
+// https://drafts.csswg.org/css-color-5/#funcdef-light-dark
+RefPtr<CSSStyleValue> Parser::parse_light_dark_color_value(TokenStream<ComponentValue>& outer_tokens)
+{
+    auto transaction = outer_tokens.begin_transaction();
+
+    outer_tokens.discard_whitespace();
+    auto const& function_token = outer_tokens.consume_a_token();
+    if (!function_token.is_function("light-dark"sv))
+        return {};
+
+    auto inner_tokens = TokenStream { function_token.function().value };
+
+    inner_tokens.discard_whitespace();
+    auto light = parse_color_value(inner_tokens);
+    if (!light)
+        return {};
+
+    inner_tokens.discard_whitespace();
+    if (!inner_tokens.consume_a_token().is(Token::Type::Comma))
+        return {};
+
+    inner_tokens.discard_whitespace();
+    auto dark = parse_color_value(inner_tokens);
+    if (!dark)
+        return {};
+
+    inner_tokens.discard_whitespace();
+    if (inner_tokens.has_next_token())
+        return {};
+
+    transaction.commit();
+    return CSSLightDark::create(light.release_nonnull(), dark.release_nonnull());
+}
+
 // https://www.w3.org/TR/css-color-4/#color-syntax
 RefPtr<CSSStyleValue> Parser::parse_color_value(TokenStream<ComponentValue>& tokens)
 {
@@ -3522,6 +3557,8 @@ RefPtr<CSSStyleValue> Parser::parse_color_value(TokenStream<ComponentValue>& tok
         return oklab;
     if (auto oklch = parse_oklch_color_value(tokens))
         return oklch;
+    if (auto light_dark = parse_light_dark_color_value(tokens))
+        return light_dark;
 
     auto transaction = tokens.begin_transaction();
     tokens.discard_whitespace();

Libraries/LibWeb/CSS/Parser/Parser.h

@@ -291,6 +291,7 @@ private:
     RefPtr<CSSStyleValue> parse_lch_color_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue> parse_oklch_color_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue> parse_color_function(TokenStream<ComponentValue>&);
+    RefPtr<CSSStyleValue> parse_light_dark_color_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue> parse_color_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue> parse_color_scheme_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue> parse_counter_value(TokenStream<ComponentValue>&);

Libraries/LibWeb/CSS/StyleValues/CSSColorValue.h

@@ -39,6 +39,7 @@ public:
         Rec2020,
         XYZD50,
         XYZD65,
+        LightDark, // This is used by CSSLightDark for light-dark(..., ...).
     };
     ColorType color_type() const { return m_color_type; }
 

Libraries/LibWeb/CSS/StyleValues/CSSLightDark.cpp

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2025, Ladybird contributors
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include "CSSLightDark.h"
+#include <LibWeb/Layout/Node.h>
+
+namespace Web::CSS {
+
+Color CSSLightDark::to_color(Optional<Layout::NodeWithStyle const&> node) const
+{
+    if (node.has_value() && node.value().computed_values().color_scheme() == PreferredColorScheme::Dark)
+        return m_properties.dark->to_color(node);
+
+    return m_properties.light->to_color(node);
+}
+
+bool CSSLightDark::equals(CSSStyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    auto const& other_color = other.as_color();
+    if (color_type() != other_color.color_type())
+        return false;
+    auto const& other_light_dark = verify_cast<CSSLightDark>(other_color);
+    return m_properties == other_light_dark.m_properties;
+}
+
+String CSSLightDark::to_string(SerializationMode mode) const
+{
+    // FIXME: We don't have enough information to determine the computed value here.
+    return MUST(String::formatted("light-dark({}, {})", m_properties.light->to_string(mode), m_properties.dark->to_string(mode)));
+}
+
+}

Libraries/LibWeb/CSS/StyleValues/CSSLightDark.h

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2025, Ladybird contributors
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <LibWeb/CSS/StyleValues/CSSColorValue.h>
+
+namespace Web::CSS {
+
+// https://drafts.csswg.org/css-color-5/#funcdef-light-dark
+class CSSLightDark final : public CSSColorValue {
+public:
+    virtual ~CSSLightDark() override = default;
+
+    static ValueComparingNonnullRefPtr<CSSLightDark> create(ValueComparingNonnullRefPtr<CSSStyleValue> light, ValueComparingNonnullRefPtr<CSSStyleValue> dark)
+    {
+        return AK::adopt_ref(*new (nothrow) CSSLightDark(move(light), move(dark)));
+    }
+
+    virtual bool equals(CSSStyleValue const&) const override;
+    virtual Color to_color(Optional<Layout::NodeWithStyle const&>) const override;
+    virtual String to_string(SerializationMode) const override;
+
+private:
+    CSSLightDark(ValueComparingNonnullRefPtr<CSSStyleValue> light, ValueComparingNonnullRefPtr<CSSStyleValue> dark)
+        : CSSColorValue(CSSColorValue::ColorType::LightDark)
+        , m_properties { .light = move(light), .dark = move(dark) }
+    {
+    }
+
+    struct Properties {
+        ValueComparingNonnullRefPtr<CSSStyleValue> light;
+        ValueComparingNonnullRefPtr<CSSStyleValue> dark;
+        bool operator==(Properties const&) const = default;
+    };
+
+    Properties m_properties;
+};
+
+} // Web::CSS