Support CSS variables and OKLCH colors

[schickling]

Summary

Add support for CSS color values beyond hex, specifically CSS variables (e.g. var(--color-primary)) and CSS Color 4 functions such as oklch()/oklab() in places where D2 accepts colors.

Motivation

• Modern design systems expose tokens as CSS variables, often using OKLCH; Tailwind CSS v4 defaults to OKLCH variables for its palette.
• When embedding D2 diagrams in HTML/SVG alongside an app that already defines colors as CSS variables, we currently have to pre-convert everything to hex, which loses dynamic theming and Tailwind token compatibility.
• Allowing CSS variables and OKLCH would let diagrams stay in sync with site/app styling without manual conversion.

Desired behavior

• Color fields (e.g. style.fill, style.stroke, theme definitions) accept CSS variables like var(--color-primary) and resolve them when rendering HTML/SVG.
• Parse CSS Color 4 notations: oklch(), oklab(), lch(), lab(), possibly color-mix().
• Keep hex and named colors working as-is, but expand the parser so Tailwind v4 tokens can be used directly.

Example

app: {
  style.fill: var(--color-surface)
  style.stroke: oklch(62% 0.18 240)
}

Current result: D2 reports the values as invalid colors and falls back to default styling. Expected: colors are parsed/resolved so the diagram matches the surrounding Tailwind v4 theme.

Alternatives considered

• Pre-converting Tailwind variables to hex during a build step, but this removes live theming and adds maintenance overhead.

Additional context

• Tailwind CSS v4 RC notes: https://tailwindcss.com/blog/tailwindcss-v4-alpha#oklch-color-space