@oxyhq/bloom 0.7.6 → 0.7.7

package/lib/module/theme/index.js

@@ -5,7 +5,7 @@ export { BloomColorScope, useColorScopeStyle } from './color-scope';
 export { buildTheme, STATUS_COLORS } from "./build-theme.js";
 export { useTheme, useThemeColor, useBloomTheme } from "./use-theme.js";
 export { APP_COLOR_NAMES, PREMIUM_COLOR_NAMES, APP_COLOR_PRESETS, HEX_TO_APP_COLOR, hexToAppColorName } from "./color-presets.js";
-export { getPresetVars, applyPresetVarsToDocument } from "./preset-vars.js";
+export { getPresetVars, applyPresetVarsToDocument, toWebColorValue } from "./preset-vars.js";
 export { applyDarkClass } from "./apply-dark-class.js";
 export { setColorSchemeSafe } from "./set-color-scheme-safe.js";
 export { initCssInteropDarkMode } from "./init-css-interop.js";

package/lib/module/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["BloomThemeProvider","BloomColorScope","useColorScopeStyle","buildTheme","STATUS_COLORS","useTheme","useThemeColor","useBloomTheme","APP_COLOR_NAMES","PREMIUM_COLOR_NAMES","APP_COLOR_PRESETS","HEX_TO_APP_COLOR","hexToAppColorName","getPresetVars","applyPresetVarsToDocument","applyDarkClass","setColorSchemeSafe","initCssInteropDarkMode","webLocalStorage"],"sourceRoot":"../../../src","sources":["theme/index.ts"],"mappings":";;AAAA,SAASA,kBAAkB,QAAQ,yBAAsB;AAKzD,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,eAAe;AAEnE,SAASC,UAAU,EAAEC,aAAa,QAAQ,kBAAe;AACzD,SAASC,QAAQ,EAAEC,aAAa,EAAEC,aAAa,QAAQ,gBAAa;AAGpE,SACEC,eAAe,EACfC,mBAAmB,EACnBC,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,QACZ,oBAAiB;AACxB,SACEC,aAAa,EACbC,yBAAyB,QACpB,kBAAe;AAEtB,SAASC,cAAc,QAAQ,uBAAoB;AACnD,SAASC,kBAAkB,QAAQ,4BAAyB;AAC5D,SAASC,sBAAsB,QAAQ,uBAAoB;AAE3D,SAASC,eAAe,QAAQ,kBAAe","ignoreList":[]}
+{"version":3,"names":["BloomThemeProvider","BloomColorScope","useColorScopeStyle","buildTheme","STATUS_COLORS","useTheme","useThemeColor","useBloomTheme","APP_COLOR_NAMES","PREMIUM_COLOR_NAMES","APP_COLOR_PRESETS","HEX_TO_APP_COLOR","hexToAppColorName","getPresetVars","applyPresetVarsToDocument","toWebColorValue","applyDarkClass","setColorSchemeSafe","initCssInteropDarkMode","webLocalStorage"],"sourceRoot":"../../../src","sources":["theme/index.ts"],"mappings":";;AAAA,SAASA,kBAAkB,QAAQ,yBAAsB;AAKzD,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,eAAe;AAEnE,SAASC,UAAU,EAAEC,aAAa,QAAQ,kBAAe;AACzD,SAASC,QAAQ,EAAEC,aAAa,EAAEC,aAAa,QAAQ,gBAAa;AAGpE,SACEC,eAAe,EACfC,mBAAmB,EACnBC,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,QACZ,oBAAiB;AACxB,SACEC,aAAa,EACbC,yBAAyB,EACzBC,eAAe,QACV,kBAAe;AAEtB,SAASC,cAAc,QAAQ,uBAAoB;AACnD,SAASC,kBAAkB,QAAQ,4BAAyB;AAC5D,SAASC,sBAAsB,QAAQ,uBAAoB;AAE3D,SAASC,eAAe,QAAQ,kBAAe","ignoreList":[]}

package/lib/module/theme/preset-vars.js

@@ -73,6 +73,53 @@ export function hslTripletToRgb(triplet) {
   }
   return `rgb(${red} ${green} ${blue})`;
 }
+
+/**
+ * Prefix that marks a Tailwind v4 resolved color var (`--color-primary`). These
+ * are already emitted as full `rgb(...)` colors by `getPresetVars` and must be
+ * written to web verbatim — wrapping them would corrupt the value.
+ */
+const RESOLVED_COLOR_VAR_PREFIX = '--color-';
+
+/**
+ * Matches a shadcn-style raw HSL triple — `H S% L%`, optionally with an alpha
+ * tail `H S% L% / A`. The value starts with a digit (or a leading `-`) and
+ * carries at least one `%` (the saturation/lightness units), which together
+ * distinguish a bare triple from an already-resolved CSS color (`rgb(...)`,
+ * `hsl(...)`, `#fff`, named colors) or a unitless/length token (`--radius`).
+ * Mirrors the triple shape parsed by `hslTripletToRgb`.
+ */
+const RAW_HSL_TRIPLE = /^-?\d[\d.]*\s+[\d.]+%/;
+
+/**
+ * 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 function toWebColorValue(key, value) {
+  if (key.startsWith(RESOLVED_COLOR_VAR_PREFIX)) return value;
+  if (!RAW_HSL_TRIPLE.test(value)) return value;
+  return `hsl(${value})`;
+}
 const RESOLVED_COLOR_MAP = {
   '--background': '--color-background',
   '--foreground': '--color-foreground',
@@ -149,13 +196,18 @@ export function getPresetVars(colorName, mode, options = {}) {
  * 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 function applyPresetVarsToDocument(colorName, mode, options) {
   if (Platform.OS !== 'web' || typeof document === 'undefined') return;
   const vars = getPresetVars(colorName, mode, options);
   const root = document.documentElement.style;
   for (const [key, value] of Object.entries(vars)) {
-    root.setProperty(key, value);
+    root.setProperty(key, toWebColorValue(key, value));
   }
 }
 //# sourceMappingURL=preset-vars.js.map

package/lib/module/theme/preset-vars.js.map

@@ -1 +1 @@
-{"version":3,"names":["Platform","APP_COLOR_PRESETS","extractHue","hslVar","parseInt","split","extractSat","hslTripletToRgb","triplet","colorPart","alphaPart","map","part","trim","channels","filter","Boolean","hue","parseFloat","replace","sat","light","h","Number","isFinite","s","l","chroma","Math","abs","huePrime","second","r","g","b","match","red","round","green","blue","undefined","alpha","endsWith","safeAlpha","RESOLVED_COLOR_MAP","getPresetVars","colorName","mode","options","preset","base","dark","get","key","primary","foreground","min","isDark","extended","includeResolvedColorVars","resolved","rawKey","colorKey","Object","entries","value","applyPresetVarsToDocument","OS","document","vars","root","documentElement","style","setProperty"],"sourceRoot":"../../../src","sources":["theme/preset-vars.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Platform","APP_COLOR_PRESETS","extractHue","hslVar","parseInt","split","extractSat","hslTripletToRgb","triplet","colorPart","alphaPart","map","part","trim","channels","filter","Boolean","hue","parseFloat","replace","sat","light","h","Number","isFinite","s","l","chroma","Math","abs","huePrime","second","r","g","b","match","red","round","green","blue","undefined","alpha","endsWith","safeAlpha","RESOLVED_COLOR_VAR_PREFIX","RAW_HSL_TRIPLE","toWebColorValue","key","value","startsWith","test","RESOLVED_COLOR_MAP","getPresetVars","colorName","mode","options","preset","base","dark","get","primary","foreground","min","isDark","extended","includeResolvedColorVars","resolved","rawKey","colorKey","Object","entries","applyPresetVarsToDocument","OS","document","vars","root","documentElement","style","setProperty"],"sourceRoot":"../../../src","sources":["theme/preset-vars.ts"],"mappings":"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","ignoreList":[]}

package/lib/typescript/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/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/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/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.6",
+  "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__/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,
+          );
+        }
+      }
+    }
+  });
+});