Make frontend CSS color validation Chromium-only (remove DOM style fallback) (#2946)

The new color validator is used exclusively in the Electron/Chromium
frontend, so fallback parsing via temporary DOM elements is unnecessary.
This update tightens the implementation to rely on the browser-native
CSS capability check only.

- **Scope**
- Keep `validateCssColor(color: string): string` behavior unchanged
(returns normalized type for valid colors, throws on invalid).
  - Remove non-Chromium fallback logic from validation path.

- **Implementation**
  - **`frontend/util/color-validator.ts`**
    - `isValidCssColor` now exclusively uses:
      - `CSS.supports("color", color)`
- Removed fallback using `document.createElement(...).style.color`
assignment/parsing.

- **Behavioral contract (unchanged)**
- Valid values still return specific type strings (`hex`, `hex8`, `rgb`,
`rgba`, `hsl`, `keyword`, etc.).
  - Invalid values still throw `Error("Invalid CSS color: ...")`.

```ts
function isValidCssColor(color: string): boolean {
    if (typeof CSS == "undefined" || typeof CSS.supports != "function") {
        return false;
    }
    return CSS.supports("color", color);
}
```

<!-- START COPILOT CODING AGENT TIPS -->
---

✨ Let Copilot coding agent [set things up for
you](https://github.com/wavetermdev/waveterm/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot)
— coding agent works faster and does higher quality work when set up for
your repo.

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>
Co-authored-by: sawka <mike@commandline.dev>

Author: Copilot

Taskfile.yml

@@ -1,4 +1,4 @@
-# Copyright 2024, Command Line Inc.
+# Copyright 2026, Command Line Inc.
 # SPDX-License-Identifier: Apache-2.0
 
 version: "3"

frontend/util/color-validator.test.ts

@@ -0,0 +1,43 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { validateCssColor } from "./color-validator";
+
+describe("validateCssColor", () => {
+    beforeEach(() => {
+        vi.stubGlobal("CSS", {
+            supports: (_property: string, value: string) => {
+                return [
+                    "red",
+                    "#aabbcc",
+                    "#aabbccdd",
+                    "rgb(255, 0, 0)",
+                    "rgba(255, 0, 0, 0.5)",
+                    "hsl(120 100% 50%)",
+                    "transparent",
+                    "currentColor",
+                ].includes(value);
+            },
+        });
+    });
+
+    afterEach(() => {
+        vi.unstubAllGlobals();
+    });
+
+    it("returns type for supported CSS color formats", () => {
+        expect(validateCssColor("red")).toBe("keyword");
+        expect(validateCssColor("#aabbcc")).toBe("hex");
+        expect(validateCssColor("#aabbccdd")).toBe("hex8");
+        expect(validateCssColor("rgb(255, 0, 0)")).toBe("rgb");
+        expect(validateCssColor("rgba(255, 0, 0, 0.5)")).toBe("rgba");
+        expect(validateCssColor("hsl(120 100% 50%)")).toBe("hsl");
+        expect(validateCssColor("transparent")).toBe("transparent");
+        expect(validateCssColor("currentColor")).toBe("currentcolor");
+    });
+
+    it("throws for invalid CSS colors", () => {
+        expect(() => validateCssColor(":not-a-color:")).toThrow("Invalid CSS color");
+        expect(() => validateCssColor("#12")).toThrow("Invalid CSS color");
+        expect(() => validateCssColor("rgb(255, 0)")).toThrow("Invalid CSS color");
+    });
+});

frontend/util/color-validator.ts

@@ -0,0 +1,54 @@
+// Copyright 2026, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+const HexColorRegex = /^#([\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i;
+const FunctionalColorRegex = /^([a-z-]+)\(/i;
+const NamedColorRegex = /^[a-z]+$/i;
+
+function isValidCssColor(color: string): boolean {
+    if (typeof CSS == "undefined" || typeof CSS.supports != "function") {
+        return false;
+    }
+    return CSS.supports("color", color);
+}
+
+function getCssColorType(color: string): string {
+    const normalizedColor = color.toLowerCase();
+    if (HexColorRegex.test(normalizedColor)) {
+        if (normalizedColor.length === 4) {
+            return "hex3";
+        }
+        if (normalizedColor.length === 5) {
+            return "hex4";
+        }
+        if (normalizedColor.length === 9) {
+            return "hex8";
+        }
+        return "hex";
+    }
+    if (normalizedColor === "transparent") {
+        return "transparent";
+    }
+    if (normalizedColor === "currentcolor") {
+        return "currentcolor";
+    }
+    const functionMatch = normalizedColor.match(FunctionalColorRegex);
+    if (functionMatch) {
+        return functionMatch[1];
+    }
+    if (NamedColorRegex.test(normalizedColor)) {
+        return "keyword";
+    }
+    return "color";
+}
+
+export function validateCssColor(color: string): string {
+    if (typeof color != "string") {
+        throw new Error(`Invalid CSS color: ${String(color)}`);
+    }
+    const normalizedColor = color.trim();
+    if (normalizedColor === "" || !isValidCssColor(normalizedColor)) {
+        throw new Error(`Invalid CSS color: ${color}`);
+    }
+    return getCssColorType(normalizedColor);
+}