@orangecheck/design / OcSceneRGB
Interface: OcSceneRGB
Defined in: tokens/scene-tokens.ts:21
scene-tokens — the token→uniform rail for GPU-rendered backdrops.
A WebGL layer cannot read OKLCH custom properties the way CSS can:
getComputedStyle(...).getPropertyValue('--brand') returns the raw
oklch(…) string (or an unresolved color-mix(…) expression) that no
rgb-regex survives. The zero-dependency bridge: a hidden probe element per
slot styled color: color-mix(in srgb, var(--slot), var(--slot)) — the
browser performs the OKLCH→sRGB conversion + gamut mapping natively and
serializes the computed value as color(srgb r g b) (or legacy rgb(…))
floats, parsed with one regex.
Probes are mounted INSIDE the .oc-aurora element so per-skin re-hue hooks
(ember's [data-oc-theme='ember'] .oc-aurora { --au-green; --au-blue })
apply for free. Change detection is one MutationObserver on <html>
(class + data-oc-theme + data-oc-motion) resampling in a double-rAF — it
catches next-themes mode flips, system scheme changes, cross-tab cookie
pickup, and skin swaps, framework-free (works in Storybook).
Properties
| Property | Type | Defined in |
|---|---|---|
<a id="property-b"></a> b | number | tokens/scene-tokens.ts:24 |
<a id="property-g"></a> g | number | tokens/scene-tokens.ts:23 |
<a id="property-r"></a> r | number | tokens/scene-tokens.ts:22 |