UI: Use culori for Monaco theme color conversion

Address review feedback: the canvas-based cssVarToHex was brittle
(depended on Canvas2D rendering and browser-specific fillStyle
behavior, and required canvas mocking in happy-dom tests). Replace
it with culori's parse/formatHex, which handles OKLCH and other
modern color spaces directly with no DOM rasterization.

Also add afterEach(vi.restoreAllMocks()) to the tests so the
getComputedStyle spy does not leak between runs.

Author: shivaam

airflow-core/src/airflow/ui/package.json

@@ -43,6 +43,7 @@
     "chart.js": "^4.5.1",
     "chartjs-adapter-dayjs-4": "^1.0.4",
     "chartjs-plugin-annotation": "^3.1.0",
+    "culori": "^4.0.2",
     "dayjs": "^1.11.19",
     "elkjs": "^0.11.1",
     "html-to-image": "^1.11.13",
@@ -78,6 +79,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/culori": "^4.0.1",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",

airflow-core/src/airflow/ui/pnpm-lock.yaml

@@ -18,7 +18,7 @@
  */
 import type { Monaco } from "@monaco-editor/react";
 import { renderHook } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 // `useColorMode` is the only dependency of the hook we want to test. We mock
 // it with a mutable return so individual tests can drive light/dark behaviour.
@@ -42,29 +42,25 @@ const createFakeMonaco = () => {
   return { defineTheme, monaco: { editor: { defineTheme } } as unknown as Monaco };
 };
 
-// happy-dom does not implement Canvas2D rendering, so the hook's `getContext`
-// call would return null and short-circuit before registering themes. We stub
-// it with the minimal surface the hook needs: the draw/clear methods and a
-// `getImageData` that returns arbitrary RGB bytes (the exact hex values are
-// irrelevant to these tests — we only care that theme registration happens).
-const stubCanvasContext = () => {
-  const fakeContext = {
-    clearRect: vi.fn(),
-    fillRect: vi.fn(),
-    fillStyle: "",
-    getImageData: vi.fn(() => ({ data: new Uint8ClampedArray([0, 0, 0, 255]) })),
-  };
-
-  vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(
-    fakeContext as unknown as CanvasRenderingContext2D,
-  );
+// happy-dom does not resolve Chakra's CSS custom properties, so the hook's
+// `getPropertyValue` calls would return empty strings. Stub it to return a
+// parseable value — culori accepts plain hex, so the exact string doesn't
+// matter as long as it's a valid CSS color the parser recognizes.
+const stubComputedStyle = () => {
+  vi.spyOn(globalThis, "getComputedStyle").mockReturnValue({
+    getPropertyValue: () => "#abcdef",
+  } as unknown as CSSStyleDeclaration);
 };
 
 describe("useMonacoTheme", () => {
   beforeEach(() => {
     vi.resetModules();
     colorModeMock.mockReturnValue({ colorMode: "light" });
-    stubCanvasContext();
+    stubComputedStyle();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
   });
 
   it("returns the airflow-light theme name when color mode is light", async () => {

airflow-core/src/airflow/ui/src/context/colorMode/useMonacoTheme.test.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 import type { Monaco } from "@monaco-editor/react";
+import { formatHex, parse } from "culori";
 
 import { useColorMode } from "./useColorMode";
 
@@ -26,44 +27,20 @@ const DARK_THEME_NAME = "airflow-dark";
 let themesRegistered = false;
 
 // Convert any CSS color (including modern color spaces like OKLCH that Chakra
-// UI uses) to a #rrggbb string that Monaco's `defineTheme` accepts.
-//
-// We rasterize a single pixel and read back its sRGB bytes via `getImageData`.
-// `ctx.fillStyle` readback does NOT work for this: starting in Chrome 111, it
-// preserves the original OKLCH string instead of converting to hex, which
-// Monaco would silently ignore.
-const cssVarToHex = (ctx: CanvasRenderingContext2D, cssVar: string): string => {
+// UI uses) to a #rrggbb string that Monaco's `defineTheme` accepts. culori
+// handles parsing and gamut mapping; we fall back to black for unset or
+// unparseable values so Monaco never sees an invalid color.
+const toHex = (cssVar: string): string => {
   const value = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
 
-  if (value === "") {
-    return "#000000";
-  }
-
-  ctx.fillStyle = value;
-  ctx.clearRect(0, 0, 1, 1);
-  ctx.fillRect(0, 0, 1, 1);
-  const [red, green, blue] = ctx.getImageData(0, 0, 1, 1).data;
-
-  return `#${[red, green, blue].map((channel) => (channel ?? 0).toString(16).padStart(2, "0")).join("")}`;
+  return formatHex(parse(value)) ?? "#000000";
 };
 
 const defineAirflowMonacoThemes = (monaco: Monaco) => {
   if (themesRegistered) {
     return;
   }
 
-  const canvas = document.createElement("canvas");
-
-  canvas.width = 1;
-  canvas.height = 1;
-  const ctx = canvas.getContext("2d");
-
-  if (!ctx) {
-    return;
-  }
-
-  const toHex = (cssVar: string) => cssVarToHex(ctx, cssVar);
-
   monaco.editor.defineTheme(LIGHT_THEME_NAME, {
     base: "vs",
     colors: {