@oxyhq/bloom 0.7.5 → 0.7.7

package/lib/typescript/commonjs/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;AAU1F;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CA+CvD;AAmBD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAIlE;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;;;;;;;;;;GAUG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,IAAI,CAQN"}

package/lib/typescript/module/theme/apply-dark-class.d.ts

@@ -1,17 +1,26 @@
 import { type AppColorName } from './color-presets';
+export { toWebColorValue } from './preset-vars';
 export declare function applyDarkClass(resolved: 'light' | 'dark'): void;
 /**
  * Apply a color preset's CSS custom properties to the document root.
- * No-op on native — only affects web.
+ * No-op on native — only affects web (early-returns on `Platform.OS !== 'web'`).
  *
- * Writes both the raw HSL triples (e.g. `--primary: 185 100% 20%`) and the
- * resolved `--color-*` vars (`--color-primary: rgb(0 94 102)`) so both
- * shadcn-style `hsl(var(--primary))` plumbing and Tailwind v4 `@theme`
- * utilities resolve consistently. The resolved vars are emitted as `rgb(...)`
- * (not `hsl(...)`) so the alpha utilities (`bg-primary/10`) resolve on native —
- * see `getPresetVars` / `hslTripletToRgb`. Includes extended tokens (card,
- * chart-*, content-area, sidebar-*) so consumer apps don't need to synthesize
- * them.
+ * Web var contract (the form Tailwind v4 `@theme inline` compiles to)
+ * -------------------------------------------------------------------
+ * The shadcn/Tailwind-v4 web apps compile their color utilities to reference the
+ * BASE token directly (`.bg-background { background-color: var(--background) }`),
+ * so on web the base `--x` tokens MUST be FULL CSS colors. We therefore write
+ * them as `hsl(...)` (e.g. `--primary: hsl(185 100% 20%)`) — `var(--primary)`
+ * then resolves to a valid color. The resolved `--color-*` vars are written
+ * verbatim as `rgb(...)` (already full colors, used by native `color-mix` alpha
+ * utilities; harmless on web). Non-color tokens (`--radius`, etc.) pass through
+ * unchanged. See `toWebColorValue`.
+ *
+ * NATIVE writes the SAME tokens as RAW HSL triples (no `hsl()` wrapper) via
+ * `rootVariables` (`native-root-vars.native.ts`), consumed through bloom's
+ * native `global.css` `hsl(var(--x))` indirection — that path is untouched here.
+ * Includes extended tokens (card, chart-*, content-area, sidebar-*) so consumer
+ * apps don't need to synthesize them.
  */
 export declare function applyColorPresetVars(preset: AppColorName, resolved: 'light' | 'dark'): void;
 //# sourceMappingURL=apply-dark-class.d.ts.map

package/lib/typescript/module/theme/apply-dark-class.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apply-dark-class.d.ts","sourceRoot":"","sources":["../../../../src/theme/apply-dark-class.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGvE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,QAIxD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,QAUpF"}
+{"version":3,"file":"apply-dark-class.d.ts","sourceRoot":"","sources":["../../../../src/theme/apply-dark-class.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAMvE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,wBAAgB,cAAc,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,QAIxD;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,QAUpF"}

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

@@ -6,10 +6,16 @@ export type AppColorName = 'teal' | 'blue' | 'green' | 'amber' | 'yellow' | 'red
  * names) — keep in mind the values are platform-agnostic **raw HSL triples**
  * (e.g. `'185 100% 20%'` or `'185 100% 20% / 0.5'`), not CSS-resolved colors.
  * The same map drives both:
- *   - the web layer (written verbatim into `document.documentElement.style`
- *     so Tailwind's `hsl(var(--primary))` plumbing picks them up), and
- *   - the native layer (`buildTheme` resolves them into `hsl(...)` strings
- *     consumable by React Native styles).
+ *   - the web layer: the base `--x` tokens are wrapped to full `hsl(...)` colors
+ *     (via `toWebColorValue`) before being written to `document.documentElement`
+ *     / a `BloomColorScope` element, so `var(--x)` — the form Tailwind v4
+ *     `@theme inline` compiles its color utilities to — resolves to a valid
+ *     color directly; the resolved `--color-*` companions are written as
+ *     `rgb(...)`, and
+ *   - the native layer (`buildTheme` resolves the raw triples into `hsl(...)`
+ *     strings consumable by React Native styles; `native-root-vars.native.ts`
+ *     writes the raw triples through bloom's `hsl(var(--x))` `global.css`
+ *     indirection).
  *
  * The `--` prefix is an implementation detail we will drop in a future major.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"color-presets.d.ts","sourceRoot":"","sources":["../../../../src/theme/color-presets.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,UAAU,CAAC;AAEvJ;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,YAAY,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,EAAE,SAAS,YAAY,EAAsH,CAAC;AAE1K,wEAAwE;AACxE,eAAO,MAAM,mBAAmB,EAAE,SAAS,YAAY,EAAwB,CAAC;AAEhF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAczD,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,YAAY,CAE3D;AAED,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,YAAY,EAAE,cAAc,CAkmBlE,CAAC"}
+{"version":3,"file":"color-presets.d.ts","sourceRoot":"","sources":["../../../../src/theme/color-presets.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,UAAU,CAAC;AAEvJ;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,YAAY,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,EAAE,SAAS,YAAY,EAAsH,CAAC;AAE1K,wEAAwE;AACxE,eAAO,MAAM,mBAAmB,EAAE,SAAS,YAAY,EAAwB,CAAC;AAEhF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAczD,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,YAAY,CAE3D;AAED,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,YAAY,EAAE,cAAc,CAkmBlE,CAAC"}

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;AAwBrD,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/index.d.ts

@@ -7,7 +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 { getPresetVars, applyPresetVarsToDocument, toWebColorValue, } from './preset-vars';
 export type { PresetVarsOptions } from './preset-vars';
 export { applyDarkClass } from './apply-dark-class';
 export { setColorSchemeSafe } from './set-color-scheme-safe';

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,EACL,aAAa,EACb,yBAAyB,EACzB,eAAe,GAChB,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"}

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

@@ -1,94 +1,34 @@
 import { type AppColorName } from './color-presets';
 /**
- * Publish the active color preset's CSS custom properties into react-native-css's
- * GLOBAL root-variable family so they reach the ENTIRE native app tree — including
- * content rendered outside the React subtree of `BloomThemeProvider`: expo-router
- * navigator screens, `Portal`s, `Dialog`/`BottomSheet` overlays, and any other host
- * that paints through a separate React root.
- *
- * Why a global write is required (native only)
- * --------------------------------------------
- * react-native-css resolves a `var(--x)` reference (its `varResolver`) in this order:
- *   1. `name in inheritedVariables`  — the React-context-inherited vars. This is what
- *      `VariableContextProvider` populates, but it is React-context-scoped, so it only
- *      reaches *direct descendants* of the provider in the React tree.
- *   2. `inlineVariables[name]`        — same-component inline vars.
- *   3. `variables[name]`             — resolved inherited vars.
- *   4. `universalVariables(name)`    — a GLOBAL observable family.
- *   5. `rootVariables(name)`         — a GLOBAL observable family.
- *   6. the declared fallback.
- *
- * `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.
- *
- * 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`).
- *
- * Why a STATIC `import`, not a runtime `require` (critical)
- * ---------------------------------------------------------
- * react-native-css@3.0.7 ships both a `dist/commonjs` and a `dist/module` build, and
- * Metro bundles BOTH. In `native-internal/root.js` the variable families are plain
- * module-local consts — NOT `globalThis`-guarded the way `StyleCollection` is — so the
- * commonjs `root.js` and the module `root.js` each instantiate their OWN separate
- * `rootVariables` family. The react-native-css renderer (`react-native-css/src/components/View.tsx`
- * → `varResolver`) imports its `root.js` via ESM `import`, i.e. the MODULE build. A
- * runtime `require('react-native-css/native-internal')` resolves the package's `require`
- * export condition → the COMMONJS build → a DIFFERENT family the renderer never
- * subscribes to, so the writes are a silent no-op on device. A static top-level
- * `import` resolves the `import` condition → the MODULE build → the renderer's instance.
- *
- * This plain file is the NATIVE/default variant (Metro selects it on iOS/Android,
- * which have no `.native` override here); the web variant lives in the sibling
- * `native-root-vars.web.ts` no-op, which web bundlers pick over this one. So the
- * static `react-native-css/native-internal` import below is never pulled into a web
- * bundle — only into native. This mirrors Bloom's existing platform-split convention
- * (`color-scope/index.tsx` + `color-scope/index.web.tsx`, `FontLoader.native.tsx`).
- *
- * Keying contract (verified against react-native-css@3.0.7)
- * ---------------------------------------------------------
- * The `rootVariables` family is keyed by the BARE variable name, WITHOUT the leading
- * `--`. The compiler strips it uniformly: a `:root { --primary: ... }` declaration is
- * stored via `rule.v.push([property.slice(2), value])` then routed into
- * `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.
- *
- * 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.
- *
- * This is native-only and additive: the `VariableContextProvider` wrapper stays (it is
- * the correct, scoped mechanism for `BloomColorScope` subtree overrides and harmlessly
- * covers direct descendants). The web fork (`native-root-vars.web.ts`) no-ops — web
- * writes the same vars to `document.documentElement` via `applyColorPresetVars`.
- */
-/**
- * Write the preset's CSS vars to react-native-css's global `rootVariables` family
- * so the whole native tree (navigator screens + portals/modals/bottom-sheets)
- * resolves the active palette.
- *
- * Each `.set` notifies its own observers synchronously (react-native-css only
- * batches notifications inside its own `StyleCollection.inject`; outside it,
- * `observableBatch.current` is unset so every `.set` runs observers immediately),
- * so sequential writes correctly trigger a re-render when the preset/mode changes.
- *
- * Defensive guard: if a host ships a react-native-css build that doesn't expose
- * `rootVariables` as a callable (it always does on @3), we bail rather than throw.
+ * Platform-neutral DEFAULT variant of `applyNativeRootVars` — a no-op.
+ *
+ * This is the file resolved by every bundler / type-checker that does NOT do
+ * React Native's platform-extension resolution:
+ *   - a consumer's `tsc` (resolving Bloom's `"react-native"` -> `./src/...` source
+ *     export condition: `theme/index.ts` -> `BloomThemeProvider` -> this import);
+ *   - non-Metro web bundlers (Vite/Rolldown, webpack) resolving the package
+ *     `exports` `import`/`require` conditions to `lib/.../native-root-vars.js`.
+ *
+ * It deliberately does NOT import `react-native-css/native-internal`. That subpath
+ * is native-only: it has no web build, and react-native-css is not even a Bloom
+ * dependency. Statically importing it from a file a web bundler resolves breaks
+ * module resolution outright (the original report: `Rolldown failed to resolve
+ * import "react-native-css/native-internal" from .../native-root-vars.js`).
+ * Importing it from a file a consumer's `tsc` resolves breaks type-check (TS2307).
+ *
+ * Confining the real implementation (and that import) to the `.native` sibling —
+ * `native-root-vars.native.ts`, which ONLY Metro selects — keeps both web bundling
+ * AND downstream `tsc` green, while native still publishes the preset vars into
+ * react-native-css's GLOBAL `rootVariables` family so the whole native tree
+ * (navigator screens + portals/modals) resolves the palette.
+ *
+ * The other variants:
+ *   - `native-root-vars.native.ts` — iOS/Android (Metro), the real implementation;
+ *   - `native-root-vars.web.ts` — web, also a no-op (web writes the same vars to
+ *     `document.documentElement` via `applyColorPresetVars` instead).
+ *
+ * The signature is intentionally identical to those variants so the import site in
+ * `BloomThemeProvider` is platform-agnostic.
  */
-export declare function applyNativeRootVars(colorPreset: AppColorName, mode: 'light' | 'dark'): void;
+export declare function applyNativeRootVars(_colorPreset: AppColorName, _mode: 'light' | 'dark'): void;
 //# sourceMappingURL=native-root-vars.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"native-root-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.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.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,mBAAmB,CAAC,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAG7F"}

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

@@ -0,0 +1,94 @@
+import { type AppColorName } from './color-presets';
+/**
+ * Publish the active color preset's CSS custom properties into react-native-css's
+ * GLOBAL root-variable family so they reach the ENTIRE native app tree — including
+ * content rendered outside the React subtree of `BloomThemeProvider`: expo-router
+ * navigator screens, `Portal`s, `Dialog`/`BottomSheet` overlays, and any other host
+ * that paints through a separate React root.
+ *
+ * Why a global write is required (native only)
+ * --------------------------------------------
+ * react-native-css resolves a `var(--x)` reference (its `varResolver`) in this order:
+ *   1. `name in inheritedVariables`  — the React-context-inherited vars. This is what
+ *      `VariableContextProvider` populates, but it is React-context-scoped, so it only
+ *      reaches *direct descendants* of the provider in the React tree.
+ *   2. `inlineVariables[name]`        — same-component inline vars.
+ *   3. `variables[name]`             — resolved inherited vars.
+ *   4. `universalVariables(name)`    — a GLOBAL observable family.
+ *   5. `rootVariables(name)`         — a GLOBAL observable family.
+ *   6. the declared fallback.
+ *
+ * `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.
+ *
+ * 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`).
+ *
+ * Why a STATIC `import`, not a runtime `require` (critical)
+ * ---------------------------------------------------------
+ * react-native-css@3.0.7 ships both a `dist/commonjs` and a `dist/module` build, and
+ * Metro bundles BOTH. In `native-internal/root.js` the variable families are plain
+ * module-local consts — NOT `globalThis`-guarded the way `StyleCollection` is — so the
+ * commonjs `root.js` and the module `root.js` each instantiate their OWN separate
+ * `rootVariables` family. The react-native-css renderer (`react-native-css/src/components/View.tsx`
+ * → `varResolver`) imports its `root.js` via ESM `import`, i.e. the MODULE build. A
+ * runtime `require('react-native-css/native-internal')` resolves the package's `require`
+ * export condition → the COMMONJS build → a DIFFERENT family the renderer never
+ * subscribes to, so the writes are a silent no-op on device. A static top-level
+ * `import` resolves the `import` condition → the MODULE build → the renderer's instance.
+ *
+ * This plain file is the NATIVE/default variant (Metro selects it on iOS/Android,
+ * which have no `.native` override here); the web variant lives in the sibling
+ * `native-root-vars.web.ts` no-op, which web bundlers pick over this one. So the
+ * static `react-native-css/native-internal` import below is never pulled into a web
+ * bundle — only into native. This mirrors Bloom's existing platform-split convention
+ * (`color-scope/index.tsx` + `color-scope/index.web.tsx`, `FontLoader.native.tsx`).
+ *
+ * Keying contract (verified against react-native-css@3.0.7)
+ * ---------------------------------------------------------
+ * The `rootVariables` family is keyed by the BARE variable name, WITHOUT the leading
+ * `--`. The compiler strips it uniformly: a `:root { --primary: ... }` declaration is
+ * stored via `rule.v.push([property.slice(2), value])` then routed into
+ * `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.
+ *
+ * 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.
+ *
+ * This is native-only and additive: the `VariableContextProvider` wrapper stays (it is
+ * the correct, scoped mechanism for `BloomColorScope` subtree overrides and harmlessly
+ * covers direct descendants). The web fork (`native-root-vars.web.ts`) no-ops — web
+ * writes the same vars to `document.documentElement` via `applyColorPresetVars`.
+ */
+/**
+ * Write the preset's CSS vars to react-native-css's global `rootVariables` family
+ * so the whole native tree (navigator screens + portals/modals/bottom-sheets)
+ * resolves the active palette.
+ *
+ * Each `.set` notifies its own observers synchronously (react-native-css only
+ * batches notifications inside its own `StyleCollection.inject`; outside it,
+ * `observableBatch.current` is unset so every `.set` runs observers immediately),
+ * so sequential writes correctly trigger a re-render when the preset/mode changes.
+ *
+ * Defensive guard: if a host ships a react-native-css build that doesn't expose
+ * `rootVariables` as a callable (it always does on @3), we bail rather than throw.
+ */
+export declare function applyNativeRootVars(colorPreset: AppColorName, mode: 'light' | 'dark'): void;
+//# sourceMappingURL=native-root-vars.native.d.ts.map

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

@@ -0,0 +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"}

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

@@ -25,6 +25,31 @@ import { type AppColorName, type PresetTokens } from './color-presets';
  * Tolerates a `deg` suffix on the hue and `%` suffixes on saturation/lightness.
  */
 export declare function hslTripletToRgb(triplet: string): string;
+/**
+ * Transform a single preset var into the value to write to a WEB element
+ * (`document.documentElement` or a `BloomColorScope` subtree element).
+ *
+ * The web apps (Vite + Tailwind v4 + shadcn) compile their `@theme inline`
+ * block so the color utilities reference the BASE token directly — e.g.
+ * `.bg-background { background-color: var(--background) }`. So on web the base
+ * `--x` tokens MUST resolve to a COMPLETE CSS color; a bare HSL triple
+ * (`185 50% 5%`) is invalid as a `background-color` value and renders
+ * transparent (the production incident this fixes). We therefore wrap raw
+ * triples in `hsl(...)`, preserving the exact preset color math (and any `/ A`
+ * alpha tail, valid in modern `hsl(H S% L% / A)` syntax) with zero rounding
+ * drift.
+ *
+ * Values that are already full colors pass through unchanged:
+ *   - `--color-*` resolved vars (already `rgb(...)` from `getPresetVars`),
+ *   - any value not shaped like a raw HSL triple (`--radius: 0.5rem`,
+ *     pre-resolved `rgb(...)`/`hsl(...)`, etc.).
+ *
+ * NATIVE never calls this — `getPresetVars` returns raw triples verbatim and
+ * `native-root-vars.native.ts` writes them through bloom's `hsl(var(--x))`
+ * native `global.css` indirection. Pure function — no side effects — so it is
+ * unit-testable in isolation.
+ */
+export declare function toWebColorValue(key: string, value: string): string;
 export interface PresetVarsOptions {
     /**
      * Also emit Tailwind v4 resolved `--color-*` vars (as sRGB `rgb(...)` strings)
@@ -56,6 +81,11 @@ export declare function getPresetVars(colorName: AppColorName, mode: 'light' | '
  * 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.
+ *
+ * The base raw-HSL-triple tokens are wrapped to full `hsl(...)` colors via
+ * `toWebColorValue` so `var(--x)` (the form Tailwind v4 `@theme inline`
+ * compiles to) resolves directly on web; `--color-*` rgb vars pass through. See
+ * `toWebColorValue` for the web var contract.
  */
 export declare function applyPresetVarsToDocument(colorName: AppColorName, mode: 'light' | 'dark', options?: PresetVarsOptions): 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;AAU1F;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CA+CvD;AAmBD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAIlE;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;;;;;;;;;;GAUG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,IAAI,CAQN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.7.5",
+  "version": "0.7.7",
   "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 `hsl(...)` colors — 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('hsl(')).toBe(true);
+      expect(primary.startsWith('hsl(')).toBe(true);
+      expect(/^-?\d[\d.]*\s+[\d.]+%/.test(background)).toBe(false);
     });
   });
 });

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

@@ -0,0 +1,65 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Platform } from 'react-native';
+
+import { applyColorPresetVars, toWebColorValue } from '../theme/apply-dark-class';
+
+// `applyColorPresetVars` is the WEB write path that feeds the live document. It
+// regressed by writing the base `--x` tokens as bare HSL triples (`185 50% 5%`),
+// which the shadcn/Tailwind-v4 web apps consume directly as
+// `background-color: var(--background)` → invalid CSS → transparent → unstyled
+// app. These tests pin the corrected contract: base tokens are full `hsl(...)`
+// colors, `--color-*` companions stay `rgb(...)`.
+
+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('re-exports toWebColorValue (helper is consumed by the web write paths)', () => {
+    expect(toWebColorValue('--background', '185 50% 5%')).toBe('hsl(185 50% 5%)');
+  });
+
+  it('writes base tokens to the document as full hsl() 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 wrapped color now.
+    expect(background.startsWith('hsl(')).toBe(true);
+    expect(background.endsWith(')')).toBe(true);
+    expect(/^-?\d[\d.]*\s+[\d.]+%/.test(background)).toBe(false);
+
+    expect(primary.startsWith('hsl(')).toBe(true);
+    expect(foreground.startsWith('hsl(')).toBe(true);
+  });
+
+  it('keeps the resolved --color-* vars as rgb() full colors', () => {
+    applyColorPresetVars('oxy', 'dark');
+
+    const colorPrimary = document.documentElement.style
+      .getPropertyValue('--color-primary')
+      .trim();
+    expect(colorPrimary.startsWith('rgb(')).toBe(true);
+  });
+
+  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

@@ -1,10 +1,11 @@
 type SetCall = ReadonlyArray<readonly [string]>;
 
 /**
- * Verifies the native/default variant `theme/native-root-vars.ts` publishes the
+ * Verifies the native variant `theme/native-root-vars.native.ts` publishes the
  * active preset into react-native-css's GLOBAL `rootVariables` family with the
  * exact keying and value shape react-native-css itself uses for compiled `:root`
- * vars, and that the web fork `theme/native-root-vars.web.ts` is an inert no-op.
+ * vars, and that BOTH the platform-neutral default (`theme/native-root-vars.ts`)
+ * and the web fork (`theme/native-root-vars.web.ts`) are inert no-ops.
  *
  *  - keys are written WITHOUT the leading `--` (the family is keyed by the bare
  *    name — confirmed against react-native-css@3.0.7's compiler, which stores
@@ -12,6 +13,11 @@ type SetCall = ReadonlyArray<readonly [string]>;
  *  - each value is a single-element value-array `[[value]]` (`VariableValue[]`);
  *  - the native variant reaches react-native-css via a STATIC ESM import (so
  *    Metro resolves the `module` build — the SAME family the renderer reads);
+ *  - the default variant never imports react-native-css and writes nothing — it
+ *    is what `tsc` and non-Metro web bundlers (Vite/Rolldown) resolve, so
+ *    confining the `react-native-css/native-internal` import to the `.native`
+ *    variant keeps web bundling resolvable AND a NativeWind-4 consumer's `tsc`
+ *    from failing with TS2307;
  *  - the web variant never imports react-native-css and writes nothing.
  *
  * react-native-css is NOT a Bloom dependency (it arrives transitively via the
@@ -40,7 +46,7 @@ describe('applyNativeRootVars (native variant)', () => {
         { virtual: true },
       );
 
-      const { applyNativeRootVars } = require('../theme/native-root-vars') as {
+      const { applyNativeRootVars } = require('../theme/native-root-vars.native') as {
         applyNativeRootVars: (preset: string, mode: 'light' | 'dark') => void;
       };
       applyNativeRootVars('blue', 'light');
@@ -81,7 +87,7 @@ describe('applyNativeRootVars (native variant)', () => {
           }),
           { virtual: true },
         );
-        const { applyNativeRootVars } = require('../theme/native-root-vars') as {
+        const { applyNativeRootVars } = require('../theme/native-root-vars.native') as {
           applyNativeRootVars: (preset: string, mode: 'light' | 'dark') => void;
         };
         applyNativeRootVars('teal', mode);
@@ -99,10 +105,30 @@ describe('applyNativeRootVars (native variant)', () => {
         () => ({ rootVariables: undefined }),
         { virtual: true },
       );
+      const { applyNativeRootVars } = require('../theme/native-root-vars.native') as {
+        applyNativeRootVars: (preset: string, mode: 'light' | 'dark') => void;
+      };
+      expect(() => applyNativeRootVars('blue', 'light')).not.toThrow();
+    });
+  });
+});
+
+describe('applyNativeRootVars (default variant - tsc / web-bundler resolution)', () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  it('no-ops without importing react-native-css (keeps web bundling + tsc green)', () => {
+    // The platform-neutral default is what a consumer's `tsc` and non-Metro web
+    // bundlers (Vite/Rolldown) resolve. It must never touch react-native-css.
+    // Confining the `react-native-css/native-internal` import to the `.native`
+    // sibling fixes both the downstream TS2307 AND the Vite/Rolldown resolve fail.
+    jest.isolateModules(() => {
       const { applyNativeRootVars } = require('../theme/native-root-vars') as {
         applyNativeRootVars: (preset: string, mode: 'light' | 'dark') => void;
       };
       expect(() => applyNativeRootVars('blue', 'light')).not.toThrow();
+      expect(applyNativeRootVars('blue', 'light')).toBeUndefined();
     });
   });
 });

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

@@ -1,5 +1,5 @@
 import { APP_COLOR_NAMES, APP_COLOR_PRESETS } from '../theme/color-presets';
-import { getPresetVars, hslTripletToRgb } from '../theme/preset-vars';
+import { getPresetVars, hslTripletToRgb, toWebColorValue } from '../theme/preset-vars';
 
 const EXTENDED_KEYS = [
   '--card',
@@ -97,3 +97,49 @@ describe('hslTripletToRgb', () => {
     expect(hslTripletToRgb('205 87% 53% / 50%')).toBe('rgb(31 153 239 / 0.5)');
   });
 });
+
+describe('toWebColorValue (web var contract)', () => {
+  it('wraps a raw HSL triple base token in hsl()', () => {
+    expect(toWebColorValue('--background', '185 50% 5%')).toBe('hsl(185 50% 5%)');
+    expect(toWebColorValue('--primary', '185 100% 20%')).toBe('hsl(185 100% 20%)');
+    expect(toWebColorValue('--foreground', '0 0% 12%')).toBe('hsl(0 0% 12%)');
+  });
+
+  it('wraps a raw HSL triple with an alpha tail into modern hsl(H S% L% / A) syntax', () => {
+    expect(toWebColorValue('--ring', '0 0% 0% / 0.5')).toBe('hsl(0 0% 0% / 0.5)');
+  });
+
+  it('passes --color-* resolved rgb() vars through unchanged', () => {
+    expect(toWebColorValue('--color-primary', 'rgb(31 153 239)')).toBe('rgb(31 153 239)');
+    expect(toWebColorValue('--color-background', 'rgb(0 94 102 / 0.5)')).toBe(
+      'rgb(0 94 102 / 0.5)',
+    );
+  });
+
+  it('passes non-color tokens (radius / lengths) through unchanged', () => {
+    expect(toWebColorValue('--radius', '0.5rem')).toBe('0.5rem');
+    expect(toWebColorValue('--radius-lg', '12px')).toBe('12px');
+  });
+
+  it('passes already-resolved color values through unchanged', () => {
+    expect(toWebColorValue('--primary', 'rgb(31 153 239)')).toBe('rgb(31 153 239)');
+    expect(toWebColorValue('--primary', 'hsl(185 100% 20%)')).toBe('hsl(185 100% 20%)');
+    expect(toWebColorValue('--primary', '#1d9bf0')).toBe('#1d9bf0');
+  });
+
+  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;
+        for (const [key, value] of Object.entries(base)) {
+          const web = toWebColorValue(key, value);
+          // 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(web.startsWith('hsl(') || web.startsWith('rgb(') || web.startsWith('#')).toBe(
+            true,
+          );
+        }
+      }
+    }
+  });
+});