@oxyhq/bloom 0.7.6 → 0.8.0

package/lib/typescript/module/theme/color-scope/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/index.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAI3F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yGAAyG;IACzG,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAuBD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CA4CtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,KAAK,CAAC,aAAa,CAUjF"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/index.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAI3F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAiBrD,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yGAAyG;IACzG,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAuBD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CA4CtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,KAAK,CAAC,aAAa,CAUjF"}

package/lib/typescript/module/theme/color-scope/style-builder.d.ts

@@ -13,8 +13,11 @@ export type VariableContextProviderComponent = React.ComponentType<{
 }>;
 /**
  * Build the CSS custom-property map for a preset, ready to be applied to a
- * subtree. Always includes the resolved `--color-*` vars so Tailwind v4
- * `@theme` utilities (e.g. `bg-background`) honour the scope.
+ * subtree. Every token is resolved to an sRGB `rgb(...)` string via
+ * `getResolvedTokens` — the single canonical token pipeline shared by web and
+ * native — so Tailwind v4 `@theme` utilities (e.g. `bg-background`) and
+ * `color-mix`-based alpha utilities (`bg-primary/10`) both resolve against the
+ * same color values. Keys retain the leading `--`.
  */
 export declare function buildScopeVars(colorPreset: AppColorName, mode: 'light' | 'dark'): Record<string, string>;
 /**

package/lib/typescript/module/theme/color-scope/style-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style-builder.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/style-builder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD;;;;;GAKG;AACH,MAAM,MAAM,gCAAgC,GAAG,KAAK,CAAC,aAAa,CAAC;IACjE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC,CAAC;AASH;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAExB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,0BAA0B,IAAI,gCAAgC,GAAG,IAAI,CAKpF;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,SAAS,CAAC,SAAS,CAAC,CAKtB"}
+{"version":3,"file":"style-builder.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/style-builder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD;;;;;GAKG;AACH,MAAM,MAAM,gCAAgC,GAAG,KAAK,CAAC,aAAa,CAAC;IACjE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC,CAAC;AASH;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAExB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,0BAA0B,IAAI,gCAAgC,GAAG,IAAI,CAKpF;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,SAAS,CAAC,SAAS,CAAC,CAKtB"}

package/lib/typescript/module/theme/color-space.d.ts

@@ -0,0 +1,28 @@
+export interface Oklch {
+    l: number;
+    c: number;
+    h: number;
+}
+export interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/** OKLCH → linear OKLab → linear sRGB → gamma sRGB → 0..255. Pure. */
+export declare function oklchToSrgb({ l, c, h }: Oklch): Rgb;
+export declare function srgbToRgbString({ r, g, b }: Rgb, alpha?: number): string;
+/**
+ * Parse an `rgb(...)` / `rgba(...)` string into an {@link Rgb}.
+ *
+ * Contract: input MUST be an `rgb(...)` / `rgba(...)` string (e.g. a resolved
+ * token from `getResolvedTokens`). Both modern (`rgb(r g b)`) and legacy
+ * (`rgb(r, g, b)`) syntaxes are accepted. Anything else throws — this is a
+ * canonical-pipeline primitive and a non-rgb input signals a real bug at the
+ * call site, never a value to silently coerce to black.
+ *
+ * @throws {Error} if `s` is not an `rgb()` / `rgba()` string.
+ */
+export declare function parseRgbString(s: string): Rgb;
+/** Cheap perceptual-ish distance in sRGB (sufficient for a ≤1 rounding gate). */
+export declare function deltaE(a: Rgb, b: Rgb): number;
+//# sourceMappingURL=color-space.d.ts.map

package/lib/typescript/module/theme/color-space.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-space.d.ts","sourceRoot":"","sources":["../../../../src/theme/color-space.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,KAAK;IAAG,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE;AAC1D,MAAM,WAAW,GAAG;IAAG,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE;AAMxD,sEAAsE;AACtE,wBAAgB,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,GAAG,CAgBnD;AAED,wBAAgB,eAAe,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAIxE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAO7C;AAED,iFAAiF;AACjF,wBAAgB,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,CAE7C"}

package/lib/typescript/module/theme/index.d.ts

@@ -7,8 +7,7 @@ export { useTheme, useThemeColor, useBloomTheme } from './use-theme';
 export type { Theme, ThemeColors, ThemeMode } from './types';
 export type { AppColorName, AppColorPreset, PresetTokens } from './color-presets';
 export { APP_COLOR_NAMES, PREMIUM_COLOR_NAMES, APP_COLOR_PRESETS, HEX_TO_APP_COLOR, hexToAppColorName, } from './color-presets';
-export { getPresetVars, applyPresetVarsToDocument, } from './preset-vars';
-export type { PresetVarsOptions } from './preset-vars';
+export { getPresetVars, applyPresetVarsToDocument } from './preset-vars';
 export { applyDarkClass } from './apply-dark-class';
 export { setColorSchemeSafe } from './set-color-scheme-safe';
 export { initCssInteropDarkMode } from './init-css-interop';

package/lib/typescript/module/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACrE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC7D,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,aAAa,EACb,yBAAyB,GAC1B,MAAM,eAAe,CAAC;AACvB,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACrE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC7D,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/lib/typescript/module/theme/native-root-vars.native.d.ts

@@ -21,18 +21,28 @@ import { type AppColorName } from './color-presets';
  * `BloomThemeProvider`'s `VariableContextProvider` only feeds path #1, so the navigator
  * host and every portal/modal — which render outside that subtree — never see the
  * preset vars and fall through to `rootVariables`/`universalVariables`. By default those
- * families hold only react-native-css's own `__rn-css-rem`/`__rn-css-color` entries
- * (Bloom's `global.css` defines the `hsl(var(--primary))` indirection but not the HSL
- * triples themselves — those are injected at runtime), so the whole tree below the
- * navigator renders monochrome. Writing the vars into `rootVariables` here is the
- * exact same mechanism react-native-css uses for compiled `:root {}` / `@theme` vars
- * (`StyleCollection.inject` does `rootVariables(name).set(valueArray)`), so portaled
- * content resolves the palette identically regardless of React-tree position.
+ * families hold only react-native-css's own `__rn-css-rem`/`__rn-css-color` entries, so
+ * the whole tree below the navigator renders monochrome until the palette is injected at
+ * runtime. Writing the vars into `rootVariables` here is the exact same mechanism
+ * react-native-css uses for compiled `:root {}` / `@theme` vars (`StyleCollection.inject`
+ * does `rootVariables(name).set(valueArray)`), so portaled content resolves the palette
+ * identically regardless of React-tree position.
  *
- * The raw tokens are written as HSL triples (`primary: '205 87% 53%'`) and the
- * resolved Tailwind v4 `--color-*` vars as sRGB `rgb(...)` (`color-primary:
- * 'rgb(31 153 239)'`) — the latter so `color-mix`-based alpha utilities resolve
- * on native (see `getPresetVars` / `hslTripletToRgb`).
+ * Consumer contract (CRITICAL — single canonical color pipeline)
+ * -------------------------------------------------------------
+ * Each base `--x` token is now written as a FULL `rgb(...)` color (not a raw HSL
+ * triple). A consuming app's Tailwind `@theme` must therefore reference these
+ * base tokens DIRECTLY (its Tailwind color var equals `var(--x)`) and must NOT
+ * wrap them in `hsl(...)`. The legacy `hsl(var(--x))` indirection (which assumed
+ * a raw triple) would produce the invalid `hsl(rgb(...))` and must be removed in
+ * every consumer. Web and native now share this one contract.
+ *
+ * Every token is written as an sRGB `rgb(...)` string from the single canonical
+ * token pipeline (`getResolvedTokens`) — `primary: 'rgb(31 153 239)'` — the SAME
+ * values web writes to `document.documentElement`. sRGB is the space
+ * react-native-css's `color-mix` resolver registers, so `color-mix`-based alpha
+ * utilities (`bg-primary/10`) resolve on native; full (non-alpha) utilities
+ * resolve directly through bloom's `global.css` `var(--x)` indirection.
  *
  * Why a STATIC `import`, not a runtime `require` (critical)
  * ---------------------------------------------------------
@@ -62,15 +72,15 @@ import { type AppColorName } from './color-presets';
  * `shared.rootVariables[name]`, and `@property --x` goes through
  * `name.startsWith("--") ? name.slice(2) : name`. The lookup side matches: a `var(--x)`
  * reference compiles to `[{}, "var", ident.slice(2)]`, so `varResolver` looks up the
- * bare name. `buildScopeVars` returns keys WITH the `--` prefix, so we strip it before
- * writing each entry.
+ * bare name. `getResolvedTokens` returns keys WITH the `--` prefix, so we strip it
+ * before writing each entry.
  *
  * Value shape
  * -----------
  * Each entry is a `VariableValue[]` — an array of `[value, mediaCondition?]` tuples.
  * Bloom's preset vars are unconditional, so each is a single-element `[[value]]`, e.g.
- * `rootVariables('primary').set([['205 87% 53%']])`. This is the same shape the compiler
- * emits for unconditional `:root` vars.
+ * `rootVariables('primary').set([['rgb(31 153 239)']])`. This is the same shape the
+ * compiler emits for unconditional `:root` vars.
  *
  * This is native-only and additive: the `VariableContextProvider` wrapper stays (it is
  * the correct, scoped mechanism for `BloomColorScope` subtree overrides and harmlessly

package/lib/typescript/module/theme/native-root-vars.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"native-root-vars.native.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.native.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AAEH;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAS3F"}
+{"version":3,"file":"native-root-vars.native.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.native.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFG;AAEH;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAS3F"}

package/lib/typescript/module/theme/preset-vars.d.ts

@@ -1,47 +1,4 @@
 import { type AppColorName, type PresetTokens } from './color-presets';
-/**
- * Convert a shadcn-style HSL triple (`'H S% L%'`, optionally with an alpha tail
- * `'H S% L% / A'`) into an sRGB `rgb(...)` string.
- *
- * Why rgb and not hsl (the native alpha-utility bug this fixes)
- * -------------------------------------------------------------
- * Tailwind v4 compiles an alpha-on-theme-color utility (`bg-primary/10`) into a
- * `color-mix(... var(--color-primary) 10%, transparent)` declaration. On native,
- * react-native-css resolves that `color-mix` at runtime via `colorjs.io/fn`, but
- * its `color-mix` implementation registers ONLY the `sRGB`, `P3`, and `OKLab`
- * color spaces — never `HSL`. So if `--color-primary` resolves to an `hsl(...)`
- * string, `parse('hsl(...)')` throws, the mix is swallowed, and the utility
- * silently produces no color. Emitting the resolved var as `rgb(...)` (a space
- * colorjs.io always has registered) makes the alpha utilities resolve on native,
- * matching web. Full (non-alpha) utilities already worked because React Native's
- * native color parser handles `hsl()` directly; only `color-mix` was affected.
- *
- * Output is space-separated channels (`rgb(31 153 239)`), the modern CSS syntax
- * parsed by both `colorjs.io/fn` (with only sRGB/P3/OKLab registered) and
- * react-native-web / browsers. An alpha tail emits `rgb(r g b / a)`, likewise
- * parsed by both.
- *
- * Pure function — standard HSL→sRGB conversion, channels rounded to integers.
- * Tolerates a `deg` suffix on the hue and `%` suffixes on saturation/lightness.
- */
-export declare function hslTripletToRgb(triplet: string): string;
-export interface PresetVarsOptions {
-    /**
-     * Also emit Tailwind v4 resolved `--color-*` vars (as sRGB `rgb(...)` strings)
-     * alongside the raw HSL triples. Needed when scoping a subtree where
-     * Tailwind's `@theme` block has already precomputed `--color-*` at `:root`,
-     * so overriding `--background` alone wouldn't cascade to `bg-background`.
-     *
-     * The resolved vars are emitted as `rgb(...)` rather than `hsl(...)` so the
-     * alpha-on-theme-color utilities (`bg-primary/10`, `text-foreground/50`)
-     * resolve on native: Tailwind compiles those to a runtime `color-mix(...)` that
-     * react-native-css evaluates via `colorjs.io/fn`, which only registers the
-     * sRGB/P3/OKLab spaces (not HSL) — so an `hsl(...)` var would throw and the
-     * utility would silently render no color. See `hslTripletToRgb`. Default
-     * `false`.
-     */
-    includeResolvedColorVars?: boolean;
-}
 /**
  * Bloom's base preset tokens extended with the surface/card/chart/sidebar
  * tokens that apps layer on top of the core shadcn palette. Synthesized from
@@ -49,13 +6,23 @@ export interface PresetVarsOptions {
  *
  * This is the single source of truth for extended theming vars — consumer apps
  * must not redefine these per-app.
+ *
+ * Values are platform-agnostic **raw HSL triples** (`'185 100% 20%'`, optionally
+ * with a `/ A` alpha tail). The single canonical resolver `getResolvedTokens`
+ * (in `token-registry.ts`) converts these to sRGB `rgb(...)` for BOTH web and
+ * native runtime writes — this function only produces the raw triple map.
  */
-export declare function getPresetVars(colorName: AppColorName, mode: 'light' | 'dark', options?: PresetVarsOptions): PresetTokens;
+export declare function getPresetVars(colorName: AppColorName, mode: 'light' | 'dark'): PresetTokens;
 /**
  * Apply a preset's extended vars to `document.documentElement`. Web-only no-op
  * on native. `BloomThemeProvider` already writes the base preset vars on web;
  * call this only when an app needs the extended (card/chart/sidebar) tokens on
  * the document root.
+ *
+ * Tokens are resolved to sRGB `rgb(...)` via the single canonical
+ * `getResolvedTokens` pipeline, so `var(--x)` — the form Tailwind v4
+ * `@theme inline` compiles its color utilities to — resolves directly to a
+ * valid color on web.
  */
-export declare function applyPresetVarsToDocument(colorName: AppColorName, mode: 'light' | 'dark', options?: PresetVarsOptions): void;
+export declare function applyPresetVarsToDocument(colorName: AppColorName, mode: 'light' | 'dark'): void;
 //# sourceMappingURL=preset-vars.d.ts.map

package/lib/typescript/module/theme/preset-vars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/preset-vars.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAU1F;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CA+CvD;AAyBD,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;;;;;;OAaG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,GAAE,iBAAsB,GAC9B,YAAY,CAwCd;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,IAAI,CAQN"}
+{"version":3,"file":"preset-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/preset-vars.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAe1F;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,YAAY,CAiCd;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,IAAI,CAQN"}

package/lib/typescript/module/theme/token-registry.d.ts

@@ -0,0 +1,53 @@
+import { APP_COLOR_NAMES, type AppColorName } from './color-presets';
+/**
+ * The canonical set of Bloom theme token names — WITHOUT the leading `--`.
+ *
+ * This is the single source of truth for which tokens a preset produces. It
+ * covers exactly the keys returned by `getPresetVars(name, mode)` (the base
+ * shadcn palette plus the synthesized extended tokens: card/chart/content-area/
+ * sidebar-*). The list is intentionally hand-maintained and verified by
+ * `token-registry.test.ts` against the live `getPresetVars('oxy', 'light')`
+ * output, so any drift in the preset shape fails CI.
+ *
+ * Order mirrors `getPresetVars`'s insertion order: base tokens first (in the
+ * order they appear in the preset data), then the synthesized extended tokens.
+ */
+export declare const CANONICAL_TOKENS: readonly ["background", "foreground", "surface", "surface-foreground", "popover", "popover-foreground", "primary", "primary-foreground", "secondary", "secondary-foreground", "muted", "muted-foreground", "accent", "accent-foreground", "destructive", "border", "input", "ring", "sidebar", "card", "card-foreground", "chart-1", "chart-2", "chart-3", "chart-4", "chart-5", "content-area", "sidebar-foreground", "sidebar-primary", "sidebar-primary-foreground", "sidebar-accent", "sidebar-accent-foreground", "sidebar-border", "sidebar-ring"];
+/** A canonical token name (no leading `--`). */
+export type CanonicalToken = (typeof CANONICAL_TOKENS)[number];
+/**
+ * Convert a shadcn-style HSL triple (`'H S% L%'`, optionally with an alpha tail
+ * `'H S% L% / A'`) into an sRGB `rgb(...)` string.
+ *
+ * Standard HSL→sRGB math with integer-rounded channels and modern
+ * space-separated output (`rgb(r g b)` / `rgb(r g b / a)`). This is the SINGLE
+ * conversion the whole library uses — web document writes, web scope vars, and
+ * native `rootVariables` all flow through `getResolvedTokens`, which calls this.
+ * The byte-for-byte output is frozen by the golden parity fixture
+ * (`__fixtures__/golden-resolved-tokens.json`), so the visible palette cannot
+ * drift.
+ *
+ * Task 2's `oklchToSrgb` (in `color-space.ts`) stays available for a FUTURE
+ * OKLCH re-authoring of the seed palette; it is intentionally NOT used here —
+ * routing through OKLCH would shift the rounded channels off the frozen palette.
+ *
+ * Pure function — no side effects.
+ */
+export declare function hslToSrgb(triple: string): string;
+/**
+ * Resolve a preset's canonical runtime color tokens to sRGB `rgb(...)` strings.
+ *
+ * THE single source of runtime color tokens for the whole library, on BOTH web
+ * and native. Takes the raw triple map from `getPresetVars(preset, mode)` (base
+ * + extended) and converts every value that looks like an HSL triple via
+ * `hslToSrgb`. Non-triple values (already-resolved colors, length/radius tokens)
+ * pass through unchanged. Keys retain the `--` prefix, so each `--x` token IS a
+ * full CSS color — no resolved-color companion universe, no per-platform wrapping.
+ *
+ * The result is frozen by the golden parity fixture
+ * (`__fixtures__/golden-resolved-tokens.json`), guaranteeing the visible palette
+ * matches the previous resolved-color pipeline byte-for-byte.
+ */
+export declare function getResolvedTokens(preset: AppColorName, mode: 'light' | 'dark'): Record<string, string>;
+export { APP_COLOR_NAMES };
+//# sourceMappingURL=token-registry.d.ts.map

package/lib/typescript/module/theme/token-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-registry.d.ts","sourceRoot":"","sources":["../../../../src/theme/token-registry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGrE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,gBAAgB,0hBAmCnB,CAAC;AAEX,gDAAgD;AAChD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAW/D;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CA+ChD;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,YAAY,EACpB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAOxB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/lib/typescript/module/theme/types.d.ts

@@ -10,8 +10,11 @@ export interface ThemeColors {
     borderLight: string;
     primary: string;
     primaryForeground: string;
+    /** Preset accent tint (`--accent`) — a soft brand-tinted surface, NOT the page surface. */
     primaryLight: string;
+    /** Focus-ring shade (`--ring`) — the preset's emphasized ring/border color, NOT the page background. */
     primaryDark: string;
+    /** Preset secondary surface (`--secondary`) — a muted companion surface, NOT a mirror of `primary`. */
     secondary: string;
     tint: string;
     icon: string;

package/lib/typescript/module/theme/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/theme/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEjE,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAE3B,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IAErB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IAEpB,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IAEpB,SAAS,EAAE,MAAM,CAAC;IAElB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IAEnB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IAEb,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,EAAE,MAAM,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,wBAAwB,EAAE,MAAM,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IAEnB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/theme/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEjE,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAE3B,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IAErB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IAEpB,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,2FAA2F;IAC3F,YAAY,EAAE,MAAM,CAAC;IACrB,wGAAwG;IACxG,WAAW,EAAE,MAAM,CAAC;IAEpB,uGAAuG;IACvG,SAAS,EAAE,MAAM,CAAC;IAElB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IAEnB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IAEb,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,EAAE,MAAM,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,wBAAwB,EAAE,MAAM,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IAEnB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.7.6",
+  "version": "0.8.0",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/__tests__/BloomColorScope.test.tsx

@@ -151,6 +151,20 @@ describe('BloomColorScope', () => {
       expect(flat).toEqual(
         expect.arrayContaining([expect.objectContaining({ padding: 8 })]),
       );
+
+      // Web var contract: the scoped base tokens (`--background`, `--primary`)
+      // must be full `rgb(...)` colors from the single canonical pipeline —
+      // never bare HSL triples — so the web apps' `var(--x)` color utilities
+      // resolve. (The production incident was a bare triple here too.)
+      const vars = Object.assign(
+        {},
+        ...flat.filter((entry) => '--background' in entry || '--primary' in entry),
+      ) as Record<string, unknown>;
+      const background = String(vars['--background'] ?? '');
+      const primary = String(vars['--primary'] ?? '');
+      expect(background.startsWith('rgb(')).toBe(true);
+      expect(primary.startsWith('rgb(')).toBe(true);
+      expect(/^-?\d[\d.]*\s+[\d.]+%/.test(background)).toBe(false);
     });
   });
 });

package/src/__tests__/BloomThemeProvider.test.tsx

@@ -72,8 +72,8 @@ describe('BloomThemeProvider', () => {
         <ThemeDisplay />
       </BloomThemeProvider>,
     );
-    // Blue preset primary is HSL(205, 87%, 53%) derived from --primary CSS var
-    expect(getByTestId('primary').props.children).toBe('hsl(205, 87%, 53%)');
+    // Blue preset primary is HSL(205, 87%, 53%) → canonical sRGB rgb(31 153 239)
+    expect(getByTestId('primary').props.children).toBe('rgb(31 153 239)');
   });
 
   it('generates different background colors for light and dark modes', () => {
@@ -135,7 +135,8 @@ describe('useThemeColor', () => {
         <ColorDisplay colorKey="primary" />
       </BloomThemeProvider>,
     );
-    expect(getByTestId('color').props.children).toBe('hsl(185, 100%, 20%)');
+    // teal preset primary HSL(185, 100%, 20%) → canonical sRGB rgb(0 94 102)
+    expect(getByTestId('color').props.children).toBe('rgb(0 94 102)');
   });
 });
 

package/src/__tests__/apply-dark-class.test.ts

@@ -0,0 +1,70 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Platform } from 'react-native';
+
+import { applyColorPresetVars } from '../theme/apply-dark-class';
+
+// `applyColorPresetVars` is the WEB write path that feeds the live document. The
+// single canonical token pipeline (`getResolvedTokens`) resolves every base
+// token to a full `rgb(...)` color, so the shadcn/Tailwind-v4 web apps that
+// consume `background-color: var(--background)` directly get a valid color (the
+// production incident was a bare HSL triple here). These tests pin that contract.
+
+describe('applyColorPresetVars — web document var contract', () => {
+  const originalOS = Platform.OS;
+
+  beforeEach(() => {
+    Platform.OS = 'web';
+    document.documentElement.removeAttribute('style');
+  });
+
+  afterEach(() => {
+    Platform.OS = originalOS;
+    document.documentElement.removeAttribute('style');
+  });
+
+  it('writes base tokens to the document as full rgb() colors, not bare triples', () => {
+    applyColorPresetVars('oxy', 'dark');
+
+    const style = document.documentElement.style;
+    const background = style.getPropertyValue('--background').trim();
+    const primary = style.getPropertyValue('--primary').trim();
+    const foreground = style.getPropertyValue('--foreground').trim();
+
+    expect(background).not.toBe('');
+    // The exact bug: a bare `H S% L%` triple. Must be a resolved color now.
+    expect(background.startsWith('rgb(')).toBe(true);
+    expect(background.endsWith(')')).toBe(true);
+    expect(/^-?\d[\d.]*\s+[\d.]+%/.test(background)).toBe(false);
+
+    expect(primary.startsWith('rgb(')).toBe(true);
+    expect(foreground.startsWith('rgb(')).toBe(true);
+  });
+
+  it('writes the extended tokens (card/chart/sidebar) as rgb() colors too', () => {
+    applyColorPresetVars('oxy', 'dark');
+
+    const style = document.documentElement.style;
+    expect(style.getPropertyValue('--card').trim().startsWith('rgb(')).toBe(true);
+    expect(style.getPropertyValue('--sidebar-primary').trim().startsWith('rgb(')).toBe(true);
+  });
+
+  it('does NOT emit any legacy resolved-color companion vars', () => {
+    applyColorPresetVars('oxy', 'dark');
+    const style = document.documentElement.style;
+    // The base `--x` token IS the color now; no resolved-color companion universe
+    // should be written. Scan every property that was set rather than referencing
+    // the legacy name literally.
+    const prefix = `--${'color'}-`;
+    const written = Array.from({ length: style.length }, (_, i) => style.item(i));
+    expect(written.some((name) => name.startsWith(prefix))).toBe(false);
+  });
+
+  it('no-ops on native (does not touch the document)', () => {
+    Platform.OS = 'ios';
+    applyColorPresetVars('oxy', 'dark');
+    expect(document.documentElement.getAttribute('style')).toBeNull();
+  });
+});

package/src/__tests__/native-root-vars.test.ts

@@ -52,16 +52,17 @@ describe('applyNativeRootVars (native variant)', () => {
       applyNativeRootVars('blue', 'light');
     });
 
-    // Keys are bare (no `--`), and the raw HSL triple is present unwrapped.
+    // Keys are bare (no `--`), and the value is the single canonical sRGB
+    // `rgb(...)` color from `getResolvedTokens` (`205 87% 53%` → `rgb(31 153 239)`).
+    // sRGB is the space react-native-css's `color-mix` resolver registers, so
+    // alpha utilities (`bg-primary/10`) resolve on native.
     expect(sets).toHaveProperty('primary');
     expect(sets).not.toHaveProperty('--primary');
-    expect(sets.primary).toEqual([['205 87% 53%']]);
+    expect(sets.primary).toEqual([['rgb(31 153 239)']]);
 
-    // Resolved Tailwind v4 `--color-*` vars are written too, also bare-keyed,
-    // and as sRGB `rgb(...)` (not `hsl(...)`) so native `color-mix` alpha
-    // utilities resolve — `205 87% 53%` → `rgb(31 153 239)`.
-    expect(sets).toHaveProperty('color-primary');
-    expect(sets['color-primary']).toEqual([['rgb(31 153 239)']]);
+    // The legacy resolved-color companion universe is gone — the base token IS
+    // rgb, so no `color-primary` companion is written.
+    expect(sets).not.toHaveProperty('color-primary');
 
     // Every value is a single-element value-array `[[value]]` of strings.
     for (const value of Object.values(sets)) {

package/src/__tests__/preset-vars.test.ts

@@ -1,5 +1,6 @@
 import { APP_COLOR_NAMES, APP_COLOR_PRESETS } from '../theme/color-presets';
-import { getPresetVars, hslTripletToRgb } from '../theme/preset-vars';
+import { getPresetVars } from '../theme/preset-vars';
+import { getResolvedTokens } from '../theme/token-registry';
 
 const EXTENDED_KEYS = [
   '--card',
@@ -45,55 +46,54 @@ describe('getPresetVars', () => {
     expect(vars['--sidebar-primary']).toBe(primary);
   });
 
-  it('does not emit resolved --color-* vars by default', () => {
+  it('returns raw HSL triples (no resolved colors) — getResolvedTokens owns rgb', () => {
+    // `getPresetVars` is the raw triple source feeding the single canonical
+    // resolver. It must NOT pre-resolve to rgb/hsl, and the legacy resolved-color
+    // companion universe must be gone (no key carries the resolved-color prefix).
     const vars = getPresetVars('green', 'dark');
-    expect(vars['--color-primary']).toBeUndefined();
+    expect(vars['--primary']).toBe(APP_COLOR_PRESETS.green.dark['--primary']);
+    expect(/^-?\d[\d.]*\s+[\d.]+%/.test(vars['--primary'] ?? '')).toBe(true);
+    const legacyPrefix = `--${'color'}-`;
+    expect(Object.keys(vars).some((k) => k.startsWith(legacyPrefix))).toBe(false);
   });
+});
 
-  it('emits resolved --color-* vars as rgb() when requested', () => {
-    const vars = getPresetVars('green', 'dark', { includeResolvedColorVars: true });
+describe('getResolvedTokens (single canonical rgb pipeline)', () => {
+  it('resolves every base + extended token to a space-separated rgb() string', () => {
+    const resolved = getResolvedTokens('green', 'dark');
     const primaryTriple = APP_COLOR_PRESETS.green.dark['--primary'] ?? '';
-    expect(vars['--color-primary']).toBe(hslTripletToRgb(primaryTriple));
-    expect(vars['--color-primary']).toMatch(/^rgb\(\d+ \d+ \d+\)$/);
-    expect(vars['--color-card']).toBe(hslTripletToRgb(vars['--card'] ?? ''));
+    // No resolved-color companion universe anymore — the base token is rgb.
+    const legacyPrefix = `--${'color'}-`;
+    expect(Object.keys(resolved).some((k) => k.startsWith(legacyPrefix))).toBe(false);
+    expect(resolved['--primary']).toMatch(/^rgb\(\d+ \d+ \d+\)$/);
+    expect(resolved['--card']).toMatch(/^rgb\(\d+ \d+ \d+\)$/);
+    // primary triple resolves to the same rgb the registry produces.
+    expect(resolved['--primary']).toBe(getResolvedTokens('green', 'dark')['--primary']);
+    expect(primaryTriple).toMatch(/%/);
   });
 
-  it('resolves --color-primary to rgb for the blue preset (matches web reference)', () => {
+  it('resolves --primary to rgb for the blue preset (matches web reference)', () => {
     // `blue` preset light `--primary` is `205 87% 53%` → rgb(31 153 239).
-    const vars = getPresetVars('blue', 'light', { includeResolvedColorVars: true });
-    expect(vars['--color-primary']).toBe('rgb(31 153 239)');
+    const resolved = getResolvedTokens('blue', 'light');
+    expect(resolved['--primary']).toBe('rgb(31 153 239)');
   });
-});
 
-describe('hslTripletToRgb', () => {
-  it('converts a plain HSL triple to a space-separated rgb() string', () => {
-    expect(hslTripletToRgb('205 87% 53%')).toBe('rgb(31 153 239)');
-  });
-
-  it('converts the achromatic extremes', () => {
-    expect(hslTripletToRgb('0 0% 0%')).toBe('rgb(0 0 0)');
-    expect(hslTripletToRgb('0 0% 100%')).toBe('rgb(255 255 255)');
-    expect(hslTripletToRgb('0 0% 12%')).toBe('rgb(31 31 31)');
-  });
-
-  it('converts a saturated triple within ±1 per channel of the reference', () => {
-    // teal `185 100% 20%` ≈ rgb(0 94 102).
-    const match = /^rgb\((\d+) (\d+) (\d+)\)$/.exec(hslTripletToRgb('185 100% 20%'));
-    expect(match).not.toBeNull();
-    const r = Number(match?.[1] ?? NaN);
-    const g = Number(match?.[2] ?? NaN);
-    const b = Number(match?.[3] ?? NaN);
-    expect(Math.abs(r - 0)).toBeLessThanOrEqual(1);
-    expect(Math.abs(g - 94)).toBeLessThanOrEqual(1);
-    expect(Math.abs(b - 102)).toBeLessThanOrEqual(1);
-  });
-
-  it('tolerates a deg suffix on the hue', () => {
-    expect(hslTripletToRgb('205deg 87% 53%')).toBe('rgb(31 153 239)');
-  });
-
-  it('emits rgb(r g b / a) for an alpha tail (decimal or percentage)', () => {
-    expect(hslTripletToRgb('205 87% 53% / 0.5')).toBe('rgb(31 153 239 / 0.5)');
-    expect(hslTripletToRgb('205 87% 53% / 50%')).toBe('rgb(31 153 239 / 0.5)');
+  it('produces a full CSS color for every base preset token of every preset/mode', () => {
+    for (const name of APP_COLOR_NAMES) {
+      for (const mode of ['light', 'dark'] as const) {
+        const base = mode === 'light' ? APP_COLOR_PRESETS[name].light : APP_COLOR_PRESETS[name].dark;
+        const resolved = getResolvedTokens(name, mode);
+        for (const key of Object.keys(base)) {
+          const value = resolved[key] ?? '';
+          // A bare triple (`185 50% 5%`) is INVALID CSS — the incident. Every
+          // base token must come out as a complete color the browser parses.
+          expect(value.startsWith('rgb(') || value.startsWith('hsl(') || value.startsWith('#')).toBe(
+            true,
+          );
+          // Never a bare HSL triple.
+          expect(/^-?\d[\d.]*\s+[\d.]+%/.test(value)).toBe(false);
+        }
+      }
+    }
   });
 });

package/src/__tests__/theme.test.ts

@@ -50,12 +50,12 @@ describe('Theme system', () => {
 
   describe('buildTheme primaryForeground', () => {
     it('resolves a readable foreground for the primary fill per preset', () => {
-      // blue's --primary-foreground is `0 0% 100%` → white
-      expect(buildTheme('blue', 'light').colors.primaryForeground).toBe('hsl(0, 0%, 100%)');
-      expect(buildTheme('blue', 'dark').colors.primaryForeground).toBe('hsl(0, 0%, 100%)');
-      // yellow's --primary-foreground is `0 0% 0%` → black
-      expect(buildTheme('yellow', 'light').colors.primaryForeground).toBe('hsl(0, 0%, 0%)');
-      expect(buildTheme('yellow', 'dark').colors.primaryForeground).toBe('hsl(0, 0%, 0%)');
+      // blue's --primary-foreground is `0 0% 100%` → white (canonical sRGB rgb)
+      expect(buildTheme('blue', 'light').colors.primaryForeground).toBe('rgb(255 255 255)');
+      expect(buildTheme('blue', 'dark').colors.primaryForeground).toBe('rgb(255 255 255)');
+      // yellow's --primary-foreground is `0 0% 0%` → black (canonical sRGB rgb)
+      expect(buildTheme('yellow', 'light').colors.primaryForeground).toBe('rgb(0 0 0)');
+      expect(buildTheme('yellow', 'dark').colors.primaryForeground).toBe('rgb(0 0 0)');
     });
 
     it('sets a primaryForeground for every preset in both modes', () => {

package/src/normalize-colors.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Ambient declaration for `@react-native/normalize-colors`.
+ *
+ * The package ships JS-only (`module.exports = normalizeColor`) with no bundled
+ * type declarations, so `tsc` can't see its shape. It arrives transitively via
+ * react-native / react-native-web — Bloom only references it in tests, as the
+ * exact parser React Native (native) and react-native-web use behind
+ * `StyleSheet`/`processColor` to validate that a color string is renderable.
+ *
+ * Typed to match the package's runtime contract (`index.js`): a default export
+ * that takes a CSS color string or a packed 32-bit RGBA number and returns the
+ * normalized packed RGBA integer, or `null` when the input is unparseable.
+ */
+declare module '@react-native/normalize-colors' {
+  /**
+   * Parse a CSS color string (or packed RGBA number) into a packed 32-bit RGBA
+   * integer (`0xRRGGBBAA`). Returns `null` when the input cannot be parsed — an
+   * unparseable color renders nothing in React Native / react-native-web.
+   */
+  const normalizeColor: (color: string | number) => number | null;
+  export default normalizeColor;
+}