@oxyhq/bloom 0.7.1 → 0.7.2

package/lib/commonjs/theme/apply-dark-class.js

@@ -19,10 +19,13 @@ function applyDarkClass(resolved) {
  * No-op on native — only affects web.
  *
  * Writes both the raw HSL triples (e.g. `--primary: 185 100% 20%`) and the
- * resolved `--color-*` vars (`--color-primary: hsl(185 100% 20%)`) so both
+ * resolved `--color-*` vars (`--color-primary: rgb(0 94 102)`) so both
  * shadcn-style `hsl(var(--primary))` plumbing and Tailwind v4 `@theme`
- * utilities resolve consistently. Includes extended tokens (card, chart-*,
- * content-area, sidebar-*) so consumer apps don't need to synthesize them.
+ * 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.
  */
 function applyColorPresetVars(preset, resolved) {
   if (_reactNative.Platform.OS !== 'web' || typeof document === 'undefined') return;

package/lib/commonjs/theme/apply-dark-class.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_colorPresets","_presetVars","applyDarkClass","resolved","Platform","OS","document","documentElement","classList","toggle","applyColorPresetVars","preset","APP_COLOR_PRESETS","vars","getPresetVars","includeResolvedColorVars","root","style","key","value","Object","entries","setProperty"],"sourceRoot":"../../../src","sources":["theme/apply-dark-class.ts"],"mappings":";;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAEO,SAASG,cAAcA,CAACC,QAA0B,EAAE;EACzD,IAAIC,qBAAQ,CAACC,EAAE,KAAK,KAAK,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;IAC5DA,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACC,MAAM,CAAC,MAAM,EAAEN,QAAQ,KAAK,MAAM,CAAC;EACxE;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASO,oBAAoBA,CAACC,MAAoB,EAAER,QAA0B,EAAE;EACrF,IAAIC,qBAAQ,CAACC,EAAE,KAAK,KAAK,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;EAC9D,IAAI,CAACM,+BAAiB,CAACD,MAAM,CAAC,EAAE;EAEhC,MAAME,IAAI,GAAG,IAAAC,yBAAa,EAACH,MAAM,EAAER,QAAQ,EAAE;IAAEY,wBAAwB,EAAE;EAAK,CAAC,CAAC;EAChF,MAAMC,IAAI,GAAGV,QAAQ,CAACC,eAAe,CAACU,KAAK;EAE3C,KAAK,MAAM,CAACC,GAAG,EAAEC,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACR,IAAI,CAAC,EAAE;IAC/CG,IAAI,CAACM,WAAW,CAACJ,GAAG,EAAEC,KAAK,CAAC;EAC9B;AACF","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_colorPresets","_presetVars","applyDarkClass","resolved","Platform","OS","document","documentElement","classList","toggle","applyColorPresetVars","preset","APP_COLOR_PRESETS","vars","getPresetVars","includeResolvedColorVars","root","style","key","value","Object","entries","setProperty"],"sourceRoot":"../../../src","sources":["theme/apply-dark-class.ts"],"mappings":";;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAEO,SAASG,cAAcA,CAACC,QAA0B,EAAE;EACzD,IAAIC,qBAAQ,CAACC,EAAE,KAAK,KAAK,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;IAC5DA,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACC,MAAM,CAAC,MAAM,EAAEN,QAAQ,KAAK,MAAM,CAAC;EACxE;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASO,oBAAoBA,CAACC,MAAoB,EAAER,QAA0B,EAAE;EACrF,IAAIC,qBAAQ,CAACC,EAAE,KAAK,KAAK,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;EAC9D,IAAI,CAACM,+BAAiB,CAACD,MAAM,CAAC,EAAE;EAEhC,MAAME,IAAI,GAAG,IAAAC,yBAAa,EAACH,MAAM,EAAER,QAAQ,EAAE;IAAEY,wBAAwB,EAAE;EAAK,CAAC,CAAC;EAChF,MAAMC,IAAI,GAAGV,QAAQ,CAACC,eAAe,CAACU,KAAK;EAE3C,KAAK,MAAM,CAACC,GAAG,EAAEC,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACR,IAAI,CAAC,EAAE;IAC/CG,IAAI,CAACM,WAAW,CAACJ,GAAG,EAAEC,KAAK,CAAC;EAC9B;AACF","ignoreList":[]}

package/lib/commonjs/theme/native-root-vars.js

@@ -31,11 +31,16 @@ var _styleBuilder = require("./color-scope/style-builder.js");
  * 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 triples into `rootVariables` here is 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

package/lib/commonjs/theme/native-root-vars.js.map

@@ -1 +1 @@
-{"version":3,"names":["_nativeInternal","require","_styleBuilder","applyNativeRootVars","colorPreset","mode","rootVariables","vars","buildScopeVars","key","value","Object","entries","name","startsWith","slice","set"],"sourceRoot":"../../../src","sources":["theme/native-root-vars.ts"],"mappings":";;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA;AAEA,IAAAC,aAAA,GAAAD,OAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,mBAAmBA,CAACC,WAAyB,EAAEC,IAAsB,EAAQ;EAC3F,IAAI,OAAOC,6BAAa,KAAK,UAAU,EAAE;EAEzC,MAAMC,IAAI,GAAG,IAAAC,4BAAc,EAACJ,WAAW,EAAEC,IAAI,CAAC;EAC9C,KAAK,MAAM,CAACI,GAAG,EAAEC,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACL,IAAI,CAAC,EAAE;IAC/C;IACA,MAAMM,IAAI,GAAGJ,GAAG,CAACK,UAAU,CAAC,IAAI,CAAC,GAAGL,GAAG,CAACM,KAAK,CAAC,CAAC,CAAC,GAAGN,GAAG;IACtD,IAAAH,6BAAa,EAACO,IAAI,CAAC,CAACG,GAAG,CAAC,CAAC,CAACN,KAAK,CAAC,CAAC,CAAC;EACpC;AACF","ignoreList":[]}
+{"version":3,"names":["_nativeInternal","require","_styleBuilder","applyNativeRootVars","colorPreset","mode","rootVariables","vars","buildScopeVars","key","value","Object","entries","name","startsWith","slice","set"],"sourceRoot":"../../../src","sources":["theme/native-root-vars.ts"],"mappings":";;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA;AAEA,IAAAC,aAAA,GAAAD,OAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,mBAAmBA,CAACC,WAAyB,EAAEC,IAAsB,EAAQ;EAC3F,IAAI,OAAOC,6BAAa,KAAK,UAAU,EAAE;EAEzC,MAAMC,IAAI,GAAG,IAAAC,4BAAc,EAACJ,WAAW,EAAEC,IAAI,CAAC;EAC9C,KAAK,MAAM,CAACI,GAAG,EAAEC,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACL,IAAI,CAAC,EAAE;IAC/C;IACA,MAAMM,IAAI,GAAGJ,GAAG,CAACK,UAAU,CAAC,IAAI,CAAC,GAAGL,GAAG,CAACM,KAAK,CAAC,CAAC,CAAC,GAAGN,GAAG;IACtD,IAAAH,6BAAa,EAACO,IAAI,CAAC,CAACG,GAAG,CAAC,CAAC,CAACN,KAAK,CAAC,CAAC,CAAC;EACpC;AACF","ignoreList":[]}

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.applyPresetVarsToDocument = applyPresetVarsToDocument;
 exports.getPresetVars = getPresetVars;
+exports.hslTripletToRgb = hslTripletToRgb;
 var _reactNative = require("react-native");
 var _colorPresets = require("./color-presets.js");
 function extractHue(hslVar) {
@@ -13,6 +14,71 @@ function extractHue(hslVar) {
 function extractSat(hslVar) {
   return parseInt(hslVar.split(' ')[1] ?? '0', 10);
 }
+
+/**
+ * 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.
+ */
+function hslTripletToRgb(triplet) {
+  const [colorPart, alphaPart] = triplet.split('/').map(part => part.trim());
+  const channels = (colorPart ?? '').split(/\s+/).filter(Boolean);
+  const hue = parseFloat((channels[0] ?? '0').replace(/deg$/i, ''));
+  const sat = parseFloat((channels[1] ?? '0').replace('%', '')) / 100;
+  const light = parseFloat((channels[2] ?? '0').replace('%', '')) / 100;
+  const h = Number.isFinite(hue) ? hue : 0;
+  const s = Number.isFinite(sat) ? sat : 0;
+  const l = Number.isFinite(light) ? light : 0;
+  const chroma = (1 - Math.abs(2 * l - 1)) * s;
+  const huePrime = (h % 360 + 360) % 360 / 60;
+  const second = chroma * (1 - Math.abs(huePrime % 2 - 1));
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (huePrime < 1) {
+    [r, g, b] = [chroma, second, 0];
+  } else if (huePrime < 2) {
+    [r, g, b] = [second, chroma, 0];
+  } else if (huePrime < 3) {
+    [r, g, b] = [0, chroma, second];
+  } else if (huePrime < 4) {
+    [r, g, b] = [0, second, chroma];
+  } else if (huePrime < 5) {
+    [r, g, b] = [second, 0, chroma];
+  } else {
+    [r, g, b] = [chroma, 0, second];
+  }
+  const match = l - chroma / 2;
+  const red = Math.round((r + match) * 255);
+  const green = Math.round((g + match) * 255);
+  const blue = Math.round((b + match) * 255);
+  if (alphaPart !== undefined && alphaPart !== '') {
+    const alpha = alphaPart.endsWith('%') ? parseFloat(alphaPart) / 100 : parseFloat(alphaPart);
+    const safeAlpha = Number.isFinite(alpha) ? alpha : 1;
+    return `rgb(${red} ${green} ${blue} / ${safeAlpha})`;
+  }
+  return `rgb(${red} ${green} ${blue})`;
+}
 const RESOLVED_COLOR_MAP = {
   '--background': '--color-background',
   '--foreground': '--color-foreground',
@@ -79,7 +145,7 @@ function getPresetVars(colorName, mode, options = {}) {
   };
   for (const [rawKey, colorKey] of Object.entries(RESOLVED_COLOR_MAP)) {
     const value = extended[rawKey];
-    if (value) resolved[colorKey] = `hsl(${value})`;
+    if (value) resolved[colorKey] = hslTripletToRgb(value);
   }
   return resolved;
 }

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

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_colorPresets","extractHue","hslVar","parseInt","split","extractSat","RESOLVED_COLOR_MAP","getPresetVars","colorName","mode","options","preset","APP_COLOR_PRESETS","base","light","dark","get","key","primary","foreground","hue","sat","Math","min","isDark","extended","includeResolvedColorVars","resolved","rawKey","colorKey","Object","entries","value","applyPresetVarsToDocument","Platform","OS","document","vars","root","documentElement","style","setProperty"],"sourceRoot":"../../../src","sources":["theme/preset-vars.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_colorPresets","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","APP_COLOR_PRESETS","base","dark","get","key","primary","foreground","min","isDark","extended","includeResolvedColorVars","resolved","rawKey","colorKey","Object","entries","value","applyPresetVarsToDocument","Platform","OS","document","vars","root","documentElement","style","setProperty"],"sourceRoot":"../../../src","sources":["theme/preset-vars.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/theme/apply-dark-class.js

@@ -14,10 +14,13 @@ export function applyDarkClass(resolved) {
  * No-op on native — only affects web.
  *
  * Writes both the raw HSL triples (e.g. `--primary: 185 100% 20%`) and the
- * resolved `--color-*` vars (`--color-primary: hsl(185 100% 20%)`) so both
+ * resolved `--color-*` vars (`--color-primary: rgb(0 94 102)`) so both
  * shadcn-style `hsl(var(--primary))` plumbing and Tailwind v4 `@theme`
- * utilities resolve consistently. Includes extended tokens (card, chart-*,
- * content-area, sidebar-*) so consumer apps don't need to synthesize them.
+ * 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.
  */
 export function applyColorPresetVars(preset, resolved) {
   if (Platform.OS !== 'web' || typeof document === 'undefined') return;

package/lib/module/theme/apply-dark-class.js.map

@@ -1 +1 @@
-{"version":3,"names":["Platform","APP_COLOR_PRESETS","getPresetVars","applyDarkClass","resolved","OS","document","documentElement","classList","toggle","applyColorPresetVars","preset","vars","includeResolvedColorVars","root","style","key","value","Object","entries","setProperty"],"sourceRoot":"../../../src","sources":["theme/apply-dark-class.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,iBAAiB,QAA2B,oBAAiB;AACtE,SAASC,aAAa,QAAQ,kBAAe;AAE7C,OAAO,SAASC,cAAcA,CAACC,QAA0B,EAAE;EACzD,IAAIJ,QAAQ,CAACK,EAAE,KAAK,KAAK,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;IAC5DA,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACC,MAAM,CAAC,MAAM,EAAEL,QAAQ,KAAK,MAAM,CAAC;EACxE;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASM,oBAAoBA,CAACC,MAAoB,EAAEP,QAA0B,EAAE;EACrF,IAAIJ,QAAQ,CAACK,EAAE,KAAK,KAAK,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;EAC9D,IAAI,CAACL,iBAAiB,CAACU,MAAM,CAAC,EAAE;EAEhC,MAAMC,IAAI,GAAGV,aAAa,CAACS,MAAM,EAAEP,QAAQ,EAAE;IAAES,wBAAwB,EAAE;EAAK,CAAC,CAAC;EAChF,MAAMC,IAAI,GAAGR,QAAQ,CAACC,eAAe,CAACQ,KAAK;EAE3C,KAAK,MAAM,CAACC,GAAG,EAAEC,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACP,IAAI,CAAC,EAAE;IAC/CE,IAAI,CAACM,WAAW,CAACJ,GAAG,EAAEC,KAAK,CAAC;EAC9B;AACF","ignoreList":[]}
+{"version":3,"names":["Platform","APP_COLOR_PRESETS","getPresetVars","applyDarkClass","resolved","OS","document","documentElement","classList","toggle","applyColorPresetVars","preset","vars","includeResolvedColorVars","root","style","key","value","Object","entries","setProperty"],"sourceRoot":"../../../src","sources":["theme/apply-dark-class.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,iBAAiB,QAA2B,oBAAiB;AACtE,SAASC,aAAa,QAAQ,kBAAe;AAE7C,OAAO,SAASC,cAAcA,CAACC,QAA0B,EAAE;EACzD,IAAIJ,QAAQ,CAACK,EAAE,KAAK,KAAK,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;IAC5DA,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACC,MAAM,CAAC,MAAM,EAAEL,QAAQ,KAAK,MAAM,CAAC;EACxE;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASM,oBAAoBA,CAACC,MAAoB,EAAEP,QAA0B,EAAE;EACrF,IAAIJ,QAAQ,CAACK,EAAE,KAAK,KAAK,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;EAC9D,IAAI,CAACL,iBAAiB,CAACU,MAAM,CAAC,EAAE;EAEhC,MAAMC,IAAI,GAAGV,aAAa,CAACS,MAAM,EAAEP,QAAQ,EAAE;IAAES,wBAAwB,EAAE;EAAK,CAAC,CAAC;EAChF,MAAMC,IAAI,GAAGR,QAAQ,CAACC,eAAe,CAACQ,KAAK;EAE3C,KAAK,MAAM,CAACC,GAAG,EAAEC,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACP,IAAI,CAAC,EAAE;IAC/CE,IAAI,CAACM,WAAW,CAACJ,GAAG,EAAEC,KAAK,CAAC;EAC9B;AACF","ignoreList":[]}

package/lib/module/theme/native-root-vars.js

@@ -27,11 +27,16 @@ import { buildScopeVars } from "./color-scope/style-builder.js";
  * 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 triples into `rootVariables` here is 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

package/lib/module/theme/native-root-vars.js.map

@@ -1 +1 @@
-{"version":3,"names":["rootVariables","buildScopeVars","applyNativeRootVars","colorPreset","mode","vars","key","value","Object","entries","name","startsWith","slice","set"],"sourceRoot":"../../../src","sources":["theme/native-root-vars.ts"],"mappings":";;AAAA,SAASA,aAAa,QAAQ,kCAAkC;AAEhE,SAASC,cAAc,QAAQ,gCAA6B;AAG5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,mBAAmBA,CAACC,WAAyB,EAAEC,IAAsB,EAAQ;EAC3F,IAAI,OAAOJ,aAAa,KAAK,UAAU,EAAE;EAEzC,MAAMK,IAAI,GAAGJ,cAAc,CAACE,WAAW,EAAEC,IAAI,CAAC;EAC9C,KAAK,MAAM,CAACE,GAAG,EAAEC,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACJ,IAAI,CAAC,EAAE;IAC/C;IACA,MAAMK,IAAI,GAAGJ,GAAG,CAACK,UAAU,CAAC,IAAI,CAAC,GAAGL,GAAG,CAACM,KAAK,CAAC,CAAC,CAAC,GAAGN,GAAG;IACtDN,aAAa,CAACU,IAAI,CAAC,CAACG,GAAG,CAAC,CAAC,CAACN,KAAK,CAAC,CAAC,CAAC;EACpC;AACF","ignoreList":[]}
+{"version":3,"names":["rootVariables","buildScopeVars","applyNativeRootVars","colorPreset","mode","vars","key","value","Object","entries","name","startsWith","slice","set"],"sourceRoot":"../../../src","sources":["theme/native-root-vars.ts"],"mappings":";;AAAA,SAASA,aAAa,QAAQ,kCAAkC;AAEhE,SAASC,cAAc,QAAQ,gCAA6B;AAG5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,mBAAmBA,CAACC,WAAyB,EAAEC,IAAsB,EAAQ;EAC3F,IAAI,OAAOJ,aAAa,KAAK,UAAU,EAAE;EAEzC,MAAMK,IAAI,GAAGJ,cAAc,CAACE,WAAW,EAAEC,IAAI,CAAC;EAC9C,KAAK,MAAM,CAACE,GAAG,EAAEC,KAAK,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACJ,IAAI,CAAC,EAAE;IAC/C;IACA,MAAMK,IAAI,GAAGJ,GAAG,CAACK,UAAU,CAAC,IAAI,CAAC,GAAGL,GAAG,CAACM,KAAK,CAAC,CAAC,CAAC,GAAGN,GAAG;IACtDN,aAAa,CAACU,IAAI,CAAC,CAACG,GAAG,CAAC,CAAC,CAACN,KAAK,CAAC,CAAC,CAAC;EACpC;AACF","ignoreList":[]}

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

@@ -8,6 +8,71 @@ function extractHue(hslVar) {
 function extractSat(hslVar) {
   return parseInt(hslVar.split(' ')[1] ?? '0', 10);
 }
+
+/**
+ * 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 function hslTripletToRgb(triplet) {
+  const [colorPart, alphaPart] = triplet.split('/').map(part => part.trim());
+  const channels = (colorPart ?? '').split(/\s+/).filter(Boolean);
+  const hue = parseFloat((channels[0] ?? '0').replace(/deg$/i, ''));
+  const sat = parseFloat((channels[1] ?? '0').replace('%', '')) / 100;
+  const light = parseFloat((channels[2] ?? '0').replace('%', '')) / 100;
+  const h = Number.isFinite(hue) ? hue : 0;
+  const s = Number.isFinite(sat) ? sat : 0;
+  const l = Number.isFinite(light) ? light : 0;
+  const chroma = (1 - Math.abs(2 * l - 1)) * s;
+  const huePrime = (h % 360 + 360) % 360 / 60;
+  const second = chroma * (1 - Math.abs(huePrime % 2 - 1));
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (huePrime < 1) {
+    [r, g, b] = [chroma, second, 0];
+  } else if (huePrime < 2) {
+    [r, g, b] = [second, chroma, 0];
+  } else if (huePrime < 3) {
+    [r, g, b] = [0, chroma, second];
+  } else if (huePrime < 4) {
+    [r, g, b] = [0, second, chroma];
+  } else if (huePrime < 5) {
+    [r, g, b] = [second, 0, chroma];
+  } else {
+    [r, g, b] = [chroma, 0, second];
+  }
+  const match = l - chroma / 2;
+  const red = Math.round((r + match) * 255);
+  const green = Math.round((g + match) * 255);
+  const blue = Math.round((b + match) * 255);
+  if (alphaPart !== undefined && alphaPart !== '') {
+    const alpha = alphaPart.endsWith('%') ? parseFloat(alphaPart) / 100 : parseFloat(alphaPart);
+    const safeAlpha = Number.isFinite(alpha) ? alpha : 1;
+    return `rgb(${red} ${green} ${blue} / ${safeAlpha})`;
+  }
+  return `rgb(${red} ${green} ${blue})`;
+}
 const RESOLVED_COLOR_MAP = {
   '--background': '--color-background',
   '--foreground': '--color-foreground',
@@ -74,7 +139,7 @@ export function getPresetVars(colorName, mode, options = {}) {
   };
   for (const [rawKey, colorKey] of Object.entries(RESOLVED_COLOR_MAP)) {
     const value = extended[rawKey];
-    if (value) resolved[colorKey] = `hsl(${value})`;
+    if (value) resolved[colorKey] = hslTripletToRgb(value);
   }
   return resolved;
 }

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

@@ -1 +1 @@
-{"version":3,"names":["Platform","APP_COLOR_PRESETS","extractHue","hslVar","parseInt","split","extractSat","RESOLVED_COLOR_MAP","getPresetVars","colorName","mode","options","preset","base","light","dark","get","key","primary","foreground","hue","sat","Math","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_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":[]}

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

@@ -5,10 +5,13 @@ export declare function applyDarkClass(resolved: 'light' | 'dark'): void;
  * No-op on native — only affects web.
  *
  * Writes both the raw HSL triples (e.g. `--primary: 185 100% 20%`) and the
- * resolved `--color-*` vars (`--color-primary: hsl(185 100% 20%)`) so both
+ * resolved `--color-*` vars (`--color-primary: rgb(0 94 102)`) so both
  * shadcn-style `hsl(var(--primary))` plumbing and Tailwind v4 `@theme`
- * utilities resolve consistently. Includes extended tokens (card, chart-*,
- * content-area, sidebar-*) so consumer apps don't need to synthesize them.
+ * 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.
  */
 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;;;;;;;;;GASG;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;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"}

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

@@ -24,11 +24,16 @@ import { type AppColorName } from './color-presets';
  * 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 triples into `rootVariables` here is 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

package/lib/typescript/commonjs/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":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;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":"AAGA,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/commonjs/theme/preset-vars.d.ts

@@ -1,11 +1,44 @@
 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 (wrapped in `hsl(...)`)
+     * 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`.
-     * Default `false`.
+     *
+     * 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;
 }

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;AAiC1F,MAAM,WAAW,iBAAiB;IAChC;;;;;;OAMG;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;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"}

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

@@ -5,10 +5,13 @@ export declare function applyDarkClass(resolved: 'light' | 'dark'): void;
  * No-op on native — only affects web.
  *
  * Writes both the raw HSL triples (e.g. `--primary: 185 100% 20%`) and the
- * resolved `--color-*` vars (`--color-primary: hsl(185 100% 20%)`) so both
+ * resolved `--color-*` vars (`--color-primary: rgb(0 94 102)`) so both
  * shadcn-style `hsl(var(--primary))` plumbing and Tailwind v4 `@theme`
- * utilities resolve consistently. Includes extended tokens (card, chart-*,
- * content-area, sidebar-*) so consumer apps don't need to synthesize them.
+ * 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.
  */
 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;;;;;;;;;GASG;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;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"}

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

@@ -24,11 +24,16 @@ import { type AppColorName } from './color-presets';
  * 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 triples into `rootVariables` here is 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

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":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;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":"AAGA,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

@@ -1,11 +1,44 @@
 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 (wrapped in `hsl(...)`)
+     * 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`.
-     * Default `false`.
+     *
+     * 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;
 }

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;AAiC1F,MAAM,WAAW,iBAAiB;IAChC;;;;;;OAMG;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;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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "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__/native-root-vars.test.ts

@@ -51,9 +51,11 @@ describe('applyNativeRootVars (native variant)', () => {
     expect(sets).not.toHaveProperty('--primary');
     expect(sets.primary).toEqual([['205 87% 53%']]);
 
-    // Resolved Tailwind v4 `--color-*` vars are written too, also bare-keyed.
+    // 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([['hsl(205 87% 53%)']]);
+    expect(sets['color-primary']).toEqual([['rgb(31 153 239)']]);
 
     // 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,5 @@
 import { APP_COLOR_NAMES, APP_COLOR_PRESETS } from '../theme/color-presets';
-import { getPresetVars } from '../theme/preset-vars';
+import { getPresetVars, hslTripletToRgb } from '../theme/preset-vars';
 
 const EXTENDED_KEYS = [
   '--card',
@@ -50,9 +50,50 @@ describe('getPresetVars', () => {
     expect(vars['--color-primary']).toBeUndefined();
   });
 
-  it('emits resolved --color-* vars wrapped in hsl() when requested', () => {
+  it('emits resolved --color-* vars as rgb() when requested', () => {
     const vars = getPresetVars('green', 'dark', { includeResolvedColorVars: true });
-    expect(vars['--color-primary']).toBe(`hsl(${APP_COLOR_PRESETS.green.dark['--primary']})`);
-    expect(vars['--color-card']).toBe(`hsl(${vars['--card']})`);
+    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'] ?? ''));
+  });
+
+  it('resolves --color-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)');
+  });
+});
+
+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)');
   });
 });

package/src/react-native-css.d.ts

@@ -20,8 +20,9 @@
 declare module 'react-native-css/native-internal' {
   /**
    * A leaf style value. Mirrors react-native-css's `compiler.types`
-   * `StyleDescriptor`. Bloom only ever writes string HSL triples / `hsl(...)`
-   * strings, but the family is typed against the full descriptor union.
+   * `StyleDescriptor`. Bloom only ever writes string color values (raw HSL
+   * triples for the `--*` vars, sRGB `rgb(...)` for the resolved `--color-*`
+   * vars), but the family is typed against the full descriptor union.
    */
   type StyleDescriptor =
     | string

package/src/theme/apply-dark-class.ts

@@ -13,10 +13,13 @@ export function applyDarkClass(resolved: 'light' | 'dark') {
  * No-op on native — only affects web.
  *
  * Writes both the raw HSL triples (e.g. `--primary: 185 100% 20%`) and the
- * resolved `--color-*` vars (`--color-primary: hsl(185 100% 20%)`) so both
+ * resolved `--color-*` vars (`--color-primary: rgb(0 94 102)`) so both
  * shadcn-style `hsl(var(--primary))` plumbing and Tailwind v4 `@theme`
- * utilities resolve consistently. Includes extended tokens (card, chart-*,
- * content-area, sidebar-*) so consumer apps don't need to synthesize them.
+ * 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.
  */
 export function applyColorPresetVars(preset: AppColorName, resolved: 'light' | 'dark') {
   if (Platform.OS !== 'web' || typeof document === 'undefined') return;

package/src/theme/native-root-vars.ts

@@ -28,11 +28,16 @@ import { type AppColorName } from './color-presets';
  * 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 triples into `rootVariables` here is 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

package/src/theme/preset-vars.ts

@@ -9,6 +9,80 @@ function extractSat(hslVar: string): number {
   return parseInt(hslVar.split(' ')[1] ?? '0', 10);
 }
 
+/**
+ * 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 function hslTripletToRgb(triplet: string): string {
+  const [colorPart, alphaPart] = triplet.split('/').map((part) => part.trim());
+  const channels = (colorPart ?? '').split(/\s+/).filter(Boolean);
+
+  const hue = parseFloat((channels[0] ?? '0').replace(/deg$/i, ''));
+  const sat = parseFloat((channels[1] ?? '0').replace('%', '')) / 100;
+  const light = parseFloat((channels[2] ?? '0').replace('%', '')) / 100;
+
+  const h = Number.isFinite(hue) ? hue : 0;
+  const s = Number.isFinite(sat) ? sat : 0;
+  const l = Number.isFinite(light) ? light : 0;
+
+  const chroma = (1 - Math.abs(2 * l - 1)) * s;
+  const huePrime = ((((h % 360) + 360) % 360) / 60);
+  const second = chroma * (1 - Math.abs((huePrime % 2) - 1));
+
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (huePrime < 1) {
+    [r, g, b] = [chroma, second, 0];
+  } else if (huePrime < 2) {
+    [r, g, b] = [second, chroma, 0];
+  } else if (huePrime < 3) {
+    [r, g, b] = [0, chroma, second];
+  } else if (huePrime < 4) {
+    [r, g, b] = [0, second, chroma];
+  } else if (huePrime < 5) {
+    [r, g, b] = [second, 0, chroma];
+  } else {
+    [r, g, b] = [chroma, 0, second];
+  }
+
+  const match = l - chroma / 2;
+  const red = Math.round((r + match) * 255);
+  const green = Math.round((g + match) * 255);
+  const blue = Math.round((b + match) * 255);
+
+  if (alphaPart !== undefined && alphaPart !== '') {
+    const alpha = alphaPart.endsWith('%')
+      ? parseFloat(alphaPart) / 100
+      : parseFloat(alphaPart);
+    const safeAlpha = Number.isFinite(alpha) ? alpha : 1;
+    return `rgb(${red} ${green} ${blue} / ${safeAlpha})`;
+  }
+
+  return `rgb(${red} ${green} ${blue})`;
+}
+
 const RESOLVED_COLOR_MAP: Record<string, string> = {
   '--background': '--color-background',
   '--foreground': '--color-foreground',
@@ -34,11 +108,18 @@ const RESOLVED_COLOR_MAP: Record<string, string> = {
 
 export interface PresetVarsOptions {
   /**
-   * Also emit Tailwind v4 resolved `--color-*` vars (wrapped in `hsl(...)`)
+   * 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`.
-   * Default `false`.
+   *
+   * 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;
 }
@@ -92,7 +173,7 @@ export function getPresetVars(
   const resolved: PresetTokens = { ...extended };
   for (const [rawKey, colorKey] of Object.entries(RESOLVED_COLOR_MAP)) {
     const value = extended[rawKey];
-    if (value) resolved[colorKey] = `hsl(${value})`;
+    if (value) resolved[colorKey] = hslTripletToRgb(value);
   }
   return resolved;
 }