@oxyhq/bloom 0.8.4 → 0.8.6

package/lib/commonjs/theme/color-scope/index.web.js

@@ -8,17 +8,16 @@ exports.useColorScopeStyle = useColorScopeStyle;
 var _react = _interopRequireWildcard(require("react"));
 var _BloomThemeProvider = require("../BloomThemeProvider.js");
 var _buildTheme = require("../build-theme.js");
-var _tokenRegistry = require("../token-registry.js");
+var _styleBuilder = require("./style-builder.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
- * `getResolvedTokens` returns every canonical token already resolved to an sRGB
- * `rgb(...)` string — the SAME pipeline the document-root web writer and the
- * native writer use. Scoped onto an element's inline `style`, Tailwind v4's
- * compiled utilities read these as `var(--x)` directly, so each base token is a
- * full CSS color with no per-value wrapping needed.
+ * `buildScopeVars` returns every canonical token already resolved to an sRGB
+ * `rgb(...)` string, plus the `--color-*` aliases consumed by Tailwind v4
+ * utilities. Scoped onto an element's inline `style`, profile-level NativeWind
+ * classes resolve against the subtree preset instead of the document root.
  */function buildWebScopeVars(colorPreset, mode) {
-  return (0, _tokenRegistry.getResolvedTokens)(colorPreset, mode);
+  return (0, _styleBuilder.buildScopeVars)(colorPreset, mode);
 }
 
 /**

package/lib/commonjs/theme/color-scope/index.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_BloomThemeProvider","_buildTheme","_tokenRegistry","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","buildWebScopeVars","colorPreset","mode","getResolvedTokens","BloomColorScope","asChild","style","children","parent","useContext","BloomThemeContext","Error","jsx","Fragment","resolvedMode","theme","contextValue","useMemo","buildTheme","varsStyle","content","child","Children","only","isValidElement","childStyle","props","mergedStyle","cloneElement","Provider","value","useColorScopeStyle"],"sourceRoot":"../../../../src","sources":["theme/color-scope/index.web.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_BloomThemeProvider","_buildTheme","_styleBuilder","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","buildWebScopeVars","colorPreset","mode","buildScopeVars","BloomColorScope","asChild","style","children","parent","useContext","BloomThemeContext","Error","jsx","Fragment","resolvedMode","theme","contextValue","useMemo","buildTheme","varsStyle","content","child","Children","only","isValidElement","childStyle","props","mergedStyle","cloneElement","Provider","value","useColorScopeStyle"],"sourceRoot":"../../../../src","sources":["theme/color-scope/index.web.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/theme/color-scope/style-builder.js

@@ -20,14 +20,26 @@ const getNativeWindVars = (0, _lazyRequire.lazyRequire)('nativewind');
 
 /**
  * Build the CSS custom-property map for a preset, ready to be applied to a
- * subtree. Every token is resolved to an sRGB `rgb(...)` string via
- * `getResolvedTokens` — the single canonical token pipeline shared by web and
- * native — so Tailwind v4 `@theme` utilities (e.g. `bg-background`) and
- * `color-mix`-based alpha utilities (`bg-primary/10`) both resolve against the
- * same color values. Keys retain the leading `--`.
+ * subtree. Every canonical `--x` token is resolved to an sRGB `rgb(...)` string
+ * via `getResolvedTokens` — the single token pipeline shared by web and native.
+ *
+ * The returned map also includes Tailwind v4 `--color-x` aliases generated from
+ * those same canonical values. Scoped aliases are required on web because
+ * inherited custom properties like `--color-primary: var(--primary)` compute at
+ * the document root and would otherwise keep pointing at the app-wide preset.
  */
 function buildScopeVars(colorPreset, mode) {
-  return (0, _tokenRegistry.getResolvedTokens)(colorPreset, mode);
+  const tokens = (0, _tokenRegistry.getResolvedTokens)(colorPreset, mode);
+  const vars = {
+    ...tokens
+  };
+  for (const token of _tokenRegistry.CANONICAL_TOKENS) {
+    const value = tokens[`--${token}`];
+    if (value !== undefined) {
+      vars[`--color-${token}`] = value;
+    }
+  }
+  return vars;
 }
 
 /**

package/lib/commonjs/theme/color-scope/style-builder.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_tokenRegistry","_lazyRequire","getNativeWindVars","lazyRequire","buildScopeVars","colorPreset","mode","getResolvedTokens","getVariableContextProvider","Platform","OS","module","VariableContextProvider","buildNativePresetStyle","undefined","vars"],"sourceRoot":"../../../../src","sources":["theme/color-scope/style-builder.ts"],"mappings":";;;;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAEA,IAAAE,YAAA,GAAAF,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;;AAWA,MAAMG,iBAAiB,GAAG,IAAAC,wBAAW,EAAuB,YAAY,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,cAAcA,CAC5BC,WAAyB,EACzBC,IAAsB,EACE;EACxB,OAAO,IAAAC,gCAAiB,EAACF,WAAW,EAAEC,IAAI,CAAC;AAC7C;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,0BAA0BA,CAAA,EAA4C;EACpF,IAAIC,qBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE,OAAO,IAAI;EACtC,MAAMC,MAAM,GAAGT,iBAAiB,CAAC,CAAC;EAClC,IAAI,CAACS,MAAM,IAAI,OAAOA,MAAM,CAACC,uBAAuB,KAAK,UAAU,EAAE,OAAO,IAAI;EAChF,OAAOD,MAAM,CAACC,uBAAuB;AACvC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,sBAAsBA,CACpCR,WAAyB,EACzBC,IAAsB,EACA;EACtB,IAAIG,qBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE,OAAOI,SAAS;EAC3C,MAAMH,MAAM,GAAGT,iBAAiB,CAAC,CAAC;EAClC,IAAI,CAACS,MAAM,IAAI,OAAOA,MAAM,CAACI,IAAI,KAAK,UAAU,EAAE,OAAOD,SAAS;EAClE,OAAOH,MAAM,CAACI,IAAI,CAACX,cAAc,CAACC,WAAW,EAAEC,IAAI,CAAC,CAAC;AACvD","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_tokenRegistry","_lazyRequire","getNativeWindVars","lazyRequire","buildScopeVars","colorPreset","mode","tokens","getResolvedTokens","vars","token","CANONICAL_TOKENS","value","undefined","getVariableContextProvider","Platform","OS","module","VariableContextProvider","buildNativePresetStyle"],"sourceRoot":"../../../../src","sources":["theme/color-scope/style-builder.ts"],"mappings":";;;;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAEA,IAAAE,YAAA,GAAAF,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;;AAWA,MAAMG,iBAAiB,GAAG,IAAAC,wBAAW,EAAuB,YAAY,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,cAAcA,CAC5BC,WAAyB,EACzBC,IAAsB,EACE;EACxB,MAAMC,MAAM,GAAG,IAAAC,gCAAiB,EAACH,WAAW,EAAEC,IAAI,CAAC;EACnD,MAAMG,IAA4B,GAAG;IAAE,GAAGF;EAAO,CAAC;EAElD,KAAK,MAAMG,KAAK,IAAIC,+BAAgB,EAAE;IACpC,MAAMC,KAAK,GAAGL,MAAM,CAAC,KAAKG,KAAK,EAAE,CAAC;IAClC,IAAIE,KAAK,KAAKC,SAAS,EAAE;MACvBJ,IAAI,CAAC,WAAWC,KAAK,EAAE,CAAC,GAAGE,KAAK;IAClC;EACF;EAEA,OAAOH,IAAI;AACb;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASK,0BAA0BA,CAAA,EAA4C;EACpF,IAAIC,qBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE,OAAO,IAAI;EACtC,MAAMC,MAAM,GAAGf,iBAAiB,CAAC,CAAC;EAClC,IAAI,CAACe,MAAM,IAAI,OAAOA,MAAM,CAACC,uBAAuB,KAAK,UAAU,EAAE,OAAO,IAAI;EAChF,OAAOD,MAAM,CAACC,uBAAuB;AACvC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,sBAAsBA,CACpCd,WAAyB,EACzBC,IAAsB,EACA;EACtB,IAAIS,qBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE,OAAOH,SAAS;EAC3C,MAAMI,MAAM,GAAGf,iBAAiB,CAAC,CAAC;EAClC,IAAI,CAACe,MAAM,IAAI,OAAOA,MAAM,CAACR,IAAI,KAAK,UAAU,EAAE,OAAOI,SAAS;EAClE,OAAOI,MAAM,CAACR,IAAI,CAACL,cAAc,CAACC,WAAW,EAAEC,IAAI,CAAC,CAAC;AACvD","ignoreList":[]}

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

@@ -15,8 +15,7 @@ exports.applyNativeRootVars = applyNativeRootVars;
  *     `exports` `import`/`require` conditions to `lib/.../native-root-vars.js`.
  *
  * It deliberately does NOT import `react-native-css/native-internal`. That subpath
- * is native-only: it has no web build, and react-native-css is not even a Bloom
- * dependency. Statically importing it from a file a web bundler resolves breaks
+ * is native-only. Statically importing it from a file a web bundler resolves breaks
  * module resolution outright (the original report: `Rolldown failed to resolve
  * import "react-native-css/native-internal" from .../native-root-vars.js`).
  * Importing it from a file a consumer's `tsc` resolves breaks type-check (TS2307).

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

@@ -1 +1 @@
-{"version":3,"names":["applyNativeRootVars","_colorPreset","_mode"],"sourceRoot":"../../../src","sources":["theme/native-root-vars.ts"],"mappings":";;;;;;AAEA;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;AACO,SAASA,mBAAmBA,CAACC,YAA0B,EAAEC,KAAuB,EAAQ;EAC7F;EACA;AAAA","ignoreList":[]}
+{"version":3,"names":["applyNativeRootVars","_colorPreset","_mode"],"sourceRoot":"../../../src","sources":["theme/native-root-vars.ts"],"mappings":";;;;;;AAEA;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;AACO,SAASA,mBAAmBA,CAACC,YAA0B,EAAEC,KAAuB,EAAQ;EAC7F;EACA;AAAA","ignoreList":[]}

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

@@ -17,11 +17,11 @@ var _tokenRegistry = require("./token-registry.js");
 // `node_modules/@oxyhq/bloom/src/**`, and TypeScript does NOT auto-pick-up
 // ambient `.d.ts` files that live under `node_modules`, so
 // `react-native-css/native-internal` is unresolved (TS2307) unless the reference
-// travels with the source. react-native-css is intentionally NOT a Bloom
-// dependency — it arrives transitively via a host's NativeWind 5 install, or is
-// absent entirely for NativeWind 4 consumers — so the ambient declaration is the
-// only thing that can type this import, and it MUST reach the consumer. The
-// directive ships raw in `src/` (Bloom publishes `files: ["src", "lib"]`).
+// travels with the source. Bloom now declares react-native-css directly because
+// this native source imports it; the ambient declaration still travels with
+// `src/` so consumer TypeScript programs that read Bloom source see the exact
+// subpath shape. The directive ships raw in `src/` (Bloom publishes
+// `files: ["src", "lib"]`).
 
 /**
  * Publish the active color preset's CSS custom properties into react-native-css's

package/lib/module/theme/color-scope/index.web.js

@@ -3,18 +3,17 @@
 import React, { Children, cloneElement, isValidElement, useContext, useMemo } from 'react';
 import { BloomThemeContext } from "../BloomThemeProvider.js";
 import { buildTheme } from "../build-theme.js";
-import { getResolvedTokens } from "../token-registry.js";
+import { buildScopeVars } from "./style-builder.js";
 
 /**
- * `getResolvedTokens` returns every canonical token already resolved to an sRGB
- * `rgb(...)` string — the SAME pipeline the document-root web writer and the
- * native writer use. Scoped onto an element's inline `style`, Tailwind v4's
- * compiled utilities read these as `var(--x)` directly, so each base token is a
- * full CSS color with no per-value wrapping needed.
+ * `buildScopeVars` returns every canonical token already resolved to an sRGB
+ * `rgb(...)` string, plus the `--color-*` aliases consumed by Tailwind v4
+ * utilities. Scoped onto an element's inline `style`, profile-level NativeWind
+ * classes resolve against the subtree preset instead of the document root.
  */
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 function buildWebScopeVars(colorPreset, mode) {
-  return getResolvedTokens(colorPreset, mode);
+  return buildScopeVars(colorPreset, mode);
 }
 
 /**

package/lib/module/theme/color-scope/index.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Children","cloneElement","isValidElement","useContext","useMemo","BloomThemeContext","buildTheme","getResolvedTokens","Fragment","_Fragment","jsx","_jsx","buildWebScopeVars","colorPreset","mode","BloomColorScope","asChild","style","children","parent","Error","resolvedMode","theme","contextValue","varsStyle","content","child","only","childStyle","props","mergedStyle","Provider","value","useColorScopeStyle"],"sourceRoot":"../../../../src","sources":["theme/color-scope/index.web.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Children","cloneElement","isValidElement","useContext","useMemo","BloomThemeContext","buildTheme","buildScopeVars","Fragment","_Fragment","jsx","_jsx","buildWebScopeVars","colorPreset","mode","BloomColorScope","asChild","style","children","parent","Error","resolvedMode","theme","contextValue","varsStyle","content","child","only","childStyle","props","mergedStyle","Provider","value","useColorScopeStyle"],"sourceRoot":"../../../../src","sources":["theme/color-scope/index.web.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/theme/color-scope/style-builder.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { Platform } from 'react-native';
-import { getResolvedTokens } from "../token-registry.js";
+import { CANONICAL_TOKENS, getResolvedTokens } from "../token-registry.js";
 import { lazyRequire } from "../../utils/lazy-require.js";
 
 /**
@@ -15,14 +15,26 @@ const getNativeWindVars = lazyRequire('nativewind');
 
 /**
  * Build the CSS custom-property map for a preset, ready to be applied to a
- * subtree. Every token is resolved to an sRGB `rgb(...)` string via
- * `getResolvedTokens` — the single canonical token pipeline shared by web and
- * native — so Tailwind v4 `@theme` utilities (e.g. `bg-background`) and
- * `color-mix`-based alpha utilities (`bg-primary/10`) both resolve against the
- * same color values. Keys retain the leading `--`.
+ * subtree. Every canonical `--x` token is resolved to an sRGB `rgb(...)` string
+ * via `getResolvedTokens` — the single token pipeline shared by web and native.
+ *
+ * The returned map also includes Tailwind v4 `--color-x` aliases generated from
+ * those same canonical values. Scoped aliases are required on web because
+ * inherited custom properties like `--color-primary: var(--primary)` compute at
+ * the document root and would otherwise keep pointing at the app-wide preset.
  */
 export function buildScopeVars(colorPreset, mode) {
-  return getResolvedTokens(colorPreset, mode);
+  const tokens = getResolvedTokens(colorPreset, mode);
+  const vars = {
+    ...tokens
+  };
+  for (const token of CANONICAL_TOKENS) {
+    const value = tokens[`--${token}`];
+    if (value !== undefined) {
+      vars[`--color-${token}`] = value;
+    }
+  }
+  return vars;
 }
 
 /**

package/lib/module/theme/color-scope/style-builder.js.map

@@ -1 +1 @@
-{"version":3,"names":["Platform","getResolvedTokens","lazyRequire","getNativeWindVars","buildScopeVars","colorPreset","mode","getVariableContextProvider","OS","module","VariableContextProvider","buildNativePresetStyle","undefined","vars"],"sourceRoot":"../../../../src","sources":["theme/color-scope/style-builder.ts"],"mappings":";;AACA,SAASA,QAAQ,QAAwC,cAAc;AAEvE,SAASC,iBAAiB,QAAQ,sBAAmB;AAErD,SAASC,WAAW,QAAQ,6BAA0B;;AAEtD;AACA;AACA;AACA;AACA;AACA;;AAWA,MAAMC,iBAAiB,GAAGD,WAAW,CAAuB,YAAY,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,cAAcA,CAC5BC,WAAyB,EACzBC,IAAsB,EACE;EACxB,OAAOL,iBAAiB,CAACI,WAAW,EAAEC,IAAI,CAAC;AAC7C;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,0BAA0BA,CAAA,EAA4C;EACpF,IAAIP,QAAQ,CAACQ,EAAE,KAAK,KAAK,EAAE,OAAO,IAAI;EACtC,MAAMC,MAAM,GAAGN,iBAAiB,CAAC,CAAC;EAClC,IAAI,CAACM,MAAM,IAAI,OAAOA,MAAM,CAACC,uBAAuB,KAAK,UAAU,EAAE,OAAO,IAAI;EAChF,OAAOD,MAAM,CAACC,uBAAuB;AACvC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,sBAAsBA,CACpCN,WAAyB,EACzBC,IAAsB,EACA;EACtB,IAAIN,QAAQ,CAACQ,EAAE,KAAK,KAAK,EAAE,OAAOI,SAAS;EAC3C,MAAMH,MAAM,GAAGN,iBAAiB,CAAC,CAAC;EAClC,IAAI,CAACM,MAAM,IAAI,OAAOA,MAAM,CAACI,IAAI,KAAK,UAAU,EAAE,OAAOD,SAAS;EAClE,OAAOH,MAAM,CAACI,IAAI,CAACT,cAAc,CAACC,WAAW,EAAEC,IAAI,CAAC,CAAC;AACvD","ignoreList":[]}
+{"version":3,"names":["Platform","CANONICAL_TOKENS","getResolvedTokens","lazyRequire","getNativeWindVars","buildScopeVars","colorPreset","mode","tokens","vars","token","value","undefined","getVariableContextProvider","OS","module","VariableContextProvider","buildNativePresetStyle"],"sourceRoot":"../../../../src","sources":["theme/color-scope/style-builder.ts"],"mappings":";;AACA,SAASA,QAAQ,QAAwC,cAAc;AAEvE,SAASC,gBAAgB,EAAEC,iBAAiB,QAAQ,sBAAmB;AAEvE,SAASC,WAAW,QAAQ,6BAA0B;;AAEtD;AACA;AACA;AACA;AACA;AACA;;AAWA,MAAMC,iBAAiB,GAAGD,WAAW,CAAuB,YAAY,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,cAAcA,CAC5BC,WAAyB,EACzBC,IAAsB,EACE;EACxB,MAAMC,MAAM,GAAGN,iBAAiB,CAACI,WAAW,EAAEC,IAAI,CAAC;EACnD,MAAME,IAA4B,GAAG;IAAE,GAAGD;EAAO,CAAC;EAElD,KAAK,MAAME,KAAK,IAAIT,gBAAgB,EAAE;IACpC,MAAMU,KAAK,GAAGH,MAAM,CAAC,KAAKE,KAAK,EAAE,CAAC;IAClC,IAAIC,KAAK,KAAKC,SAAS,EAAE;MACvBH,IAAI,CAAC,WAAWC,KAAK,EAAE,CAAC,GAAGC,KAAK;IAClC;EACF;EAEA,OAAOF,IAAI;AACb;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASI,0BAA0BA,CAAA,EAA4C;EACpF,IAAIb,QAAQ,CAACc,EAAE,KAAK,KAAK,EAAE,OAAO,IAAI;EACtC,MAAMC,MAAM,GAAGX,iBAAiB,CAAC,CAAC;EAClC,IAAI,CAACW,MAAM,IAAI,OAAOA,MAAM,CAACC,uBAAuB,KAAK,UAAU,EAAE,OAAO,IAAI;EAChF,OAAOD,MAAM,CAACC,uBAAuB;AACvC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,sBAAsBA,CACpCX,WAAyB,EACzBC,IAAsB,EACA;EACtB,IAAIP,QAAQ,CAACc,EAAE,KAAK,KAAK,EAAE,OAAOF,SAAS;EAC3C,MAAMG,MAAM,GAAGX,iBAAiB,CAAC,CAAC;EAClC,IAAI,CAACW,MAAM,IAAI,OAAOA,MAAM,CAACN,IAAI,KAAK,UAAU,EAAE,OAAOG,SAAS;EAClE,OAAOG,MAAM,CAACN,IAAI,CAACJ,cAAc,CAACC,WAAW,EAAEC,IAAI,CAAC,CAAC;AACvD","ignoreList":[]}

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

@@ -11,8 +11,7 @@
  *     `exports` `import`/`require` conditions to `lib/.../native-root-vars.js`.
  *
  * It deliberately does NOT import `react-native-css/native-internal`. That subpath
- * is native-only: it has no web build, and react-native-css is not even a Bloom
- * dependency. Statically importing it from a file a web bundler resolves breaks
+ * is native-only. Statically importing it from a file a web bundler resolves breaks
  * module resolution outright (the original report: `Rolldown failed to resolve
  * import "react-native-css/native-internal" from .../native-root-vars.js`).
  * Importing it from a file a consumer's `tsc` resolves breaks type-check (TS2307).

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

@@ -1 +1 @@
-{"version":3,"names":["applyNativeRootVars","_colorPreset","_mode"],"sourceRoot":"../../../src","sources":["theme/native-root-vars.ts"],"mappings":";;AAEA;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,OAAO,SAASA,mBAAmBA,CAACC,YAA0B,EAAEC,KAAuB,EAAQ;EAC7F;EACA;AAAA","ignoreList":[]}
+{"version":3,"names":["applyNativeRootVars","_colorPreset","_mode"],"sourceRoot":"../../../src","sources":["theme/native-root-vars.ts"],"mappings":";;AAEA;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,OAAO,SAASA,mBAAmBA,CAACC,YAA0B,EAAEC,KAAuB,EAAQ;EAC7F;EACA;AAAA","ignoreList":[]}

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

@@ -11,11 +11,11 @@
 // `node_modules/@oxyhq/bloom/src/**`, and TypeScript does NOT auto-pick-up
 // ambient `.d.ts` files that live under `node_modules`, so
 // `react-native-css/native-internal` is unresolved (TS2307) unless the reference
-// travels with the source. react-native-css is intentionally NOT a Bloom
-// dependency — it arrives transitively via a host's NativeWind 5 install, or is
-// absent entirely for NativeWind 4 consumers — so the ambient declaration is the
-// only thing that can type this import, and it MUST reach the consumer. The
-// directive ships raw in `src/` (Bloom publishes `files: ["src", "lib"]`).
+// travels with the source. Bloom now declares react-native-css directly because
+// this native source imports it; the ambient declaration still travels with
+// `src/` so consumer TypeScript programs that read Bloom source see the exact
+// subpath shape. The directive ships raw in `src/` (Bloom publishes
+// `files: ["src", "lib"]`).
 import { rootVariables } from 'react-native-css/native-internal';
 import { getResolvedTokens } from "./token-registry.js";
 

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;AAiBrD,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yGAAyG;IACzG,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAuBD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CA4CtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,KAAK,CAAC,aAAa,CAUjF"}
+{"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;AAgBrD,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/color-scope/style-builder.d.ts

@@ -13,11 +13,13 @@ export type VariableContextProviderComponent = React.ComponentType<{
 }>;
 /**
  * Build the CSS custom-property map for a preset, ready to be applied to a
- * subtree. Every token is resolved to an sRGB `rgb(...)` string via
- * `getResolvedTokens` — the single canonical token pipeline shared by web and
- * native — so Tailwind v4 `@theme` utilities (e.g. `bg-background`) and
- * `color-mix`-based alpha utilities (`bg-primary/10`) both resolve against the
- * same color values. Keys retain the leading `--`.
+ * subtree. Every canonical `--x` token is resolved to an sRGB `rgb(...)` string
+ * via `getResolvedTokens` — the single token pipeline shared by web and native.
+ *
+ * The returned map also includes Tailwind v4 `--color-x` aliases generated from
+ * those same canonical values. Scoped aliases are required on web because
+ * inherited custom properties like `--color-primary: var(--primary)` compute at
+ * the document root and would otherwise keep pointing at the app-wide preset.
  */
 export declare function buildScopeVars(colorPreset: AppColorName, mode: 'light' | 'dark'): Record<string, string>;
 /**

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

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

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

@@ -10,8 +10,7 @@ import { type AppColorName } from './color-presets';
  *     `exports` `import`/`require` conditions to `lib/.../native-root-vars.js`.
  *
  * It deliberately does NOT import `react-native-css/native-internal`. That subpath
- * is native-only: it has no web build, and react-native-css is not even a Bloom
- * dependency. Statically importing it from a file a web bundler resolves breaks
+ * is native-only. Statically importing it from a file a web bundler resolves breaks
  * module resolution outright (the original report: `Rolldown failed to resolve
  * import "react-native-css/native-internal" from .../native-root-vars.js`).
  * Importing it from a file a consumer's `tsc` resolves breaks type-check (TS2307).

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

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;AAiBrD,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yGAAyG;IACzG,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAuBD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CA4CtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,KAAK,CAAC,aAAa,CAUjF"}
+{"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;AAgBrD,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yGAAyG;IACzG,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAuBD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CA4CtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,KAAK,CAAC,aAAa,CAUjF"}

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

@@ -13,11 +13,13 @@ export type VariableContextProviderComponent = React.ComponentType<{
 }>;
 /**
  * Build the CSS custom-property map for a preset, ready to be applied to a
- * subtree. Every token is resolved to an sRGB `rgb(...)` string via
- * `getResolvedTokens` — the single canonical token pipeline shared by web and
- * native — so Tailwind v4 `@theme` utilities (e.g. `bg-background`) and
- * `color-mix`-based alpha utilities (`bg-primary/10`) both resolve against the
- * same color values. Keys retain the leading `--`.
+ * subtree. Every canonical `--x` token is resolved to an sRGB `rgb(...)` string
+ * via `getResolvedTokens` — the single token pipeline shared by web and native.
+ *
+ * The returned map also includes Tailwind v4 `--color-x` aliases generated from
+ * those same canonical values. Scoped aliases are required on web because
+ * inherited custom properties like `--color-primary: var(--primary)` compute at
+ * the document root and would otherwise keep pointing at the app-wide preset.
  */
 export declare function buildScopeVars(colorPreset: AppColorName, mode: 'light' | 'dark'): Record<string, string>;
 /**

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

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

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

@@ -10,8 +10,7 @@ import { type AppColorName } from './color-presets';
  *     `exports` `import`/`require` conditions to `lib/.../native-root-vars.js`.
  *
  * It deliberately does NOT import `react-native-css/native-internal`. That subpath
- * is native-only: it has no web build, and react-native-css is not even a Bloom
- * dependency. Statically importing it from a file a web bundler resolves breaks
+ * is native-only. Statically importing it from a file a web bundler resolves breaks
  * module resolution outright (the original report: `Rolldown failed to resolve
  * import "react-native-css/native-internal" from .../native-root-vars.js`).
  * Importing it from a file a consumer's `tsc` resolves breaks type-check (TS2307).

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -871,6 +871,7 @@
   },
   "dependencies": {
     "nanoid": "^5.1.5",
+    "react-native-css": "3.0.7",
     "react-remove-scroll-bar": "^2.3.8"
   }
 }

package/src/__tests__/BloomColorScope.test.tsx

@@ -153,17 +153,25 @@ describe('BloomColorScope', () => {
       );
 
       // Web var contract: the scoped base tokens (`--background`, `--primary`)
-      // must be full `rgb(...)` colors from the single canonical pipeline —
-      // never bare HSL triples — so the web apps' `var(--x)` color utilities
-      // resolve. (The production incident was a bare triple here too.)
+      // must be full `rgb(...)` colors from the single canonical pipeline, and
+      // the scoped Tailwind v4 aliases (`--color-primary`) must be generated
+      // from those same values so NativeWind utilities resolve inside the
+      // subtree instead of inheriting the app-wide preset.
       const vars = Object.assign(
         {},
-        ...flat.filter((entry) => '--background' in entry || '--primary' in entry),
+        ...flat.filter(
+          (entry) =>
+            '--background' in entry ||
+            '--primary' in entry ||
+            '--color-primary' in entry,
+        ),
       ) as Record<string, unknown>;
       const background = String(vars['--background'] ?? '');
       const primary = String(vars['--primary'] ?? '');
+      const colorPrimary = String(vars['--color-primary'] ?? '');
       expect(background.startsWith('rgb(')).toBe(true);
       expect(primary.startsWith('rgb(')).toBe(true);
+      expect(colorPrimary).toBe(primary);
       expect(/^-?\d[\d.]*\s+[\d.]+%/.test(background)).toBe(false);
     });
   });

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

@@ -1,21 +1,20 @@
 /**
  * Ambient declaration for `react-native-css/native-internal`.
  *
- * react-native-css is NOT a Bloom dependency — it arrives transitively via the
- * host app's NativeWind install (NativeWind 5 is built on react-native-css@3).
- * Bloom's `native-root-vars.native.ts` statically imports `rootVariables` from
- * this subpath so Metro resolves the `import` export condition to the package's
+ * Bloom's native theme bridge statically imports `rootVariables` from this
+ * subpath so Metro resolves the `import` export condition to the package's
  * `module` build — the SAME family instance the react-native-css renderer
- * (`varResolver`) subscribes to. A runtime `require()` would resolve the
- * `require` condition to the separate `commonjs` build, whose `rootVariables`
- * is a distinct, un-observed family instance (see the file-level comment in
- * `native-root-vars.native.ts`).
+ * (`varResolver`) subscribes to. `react-native-css` is a direct Bloom dependency
+ * because this subpath is imported from published native source, including
+ * NativeWind 4 consumers whose test/native resolvers still select `.native.ts`.
+ * A runtime `require()` would resolve the `require` condition to the separate
+ * `commonjs` build, whose `rootVariables` is a distinct, un-observed family
+ * instance (see the file-level comment in `native-root-vars.native.ts`).
  *
- * Because the package isn't installed in Bloom, `tsc` can't see its published
- * types, so we declare the slice we use here — typed to match react-native-css
- * @3.0.7's `dist/typescript/.../native-internal/root.d.ts` exactly (no `any`,
- * no shims). This file is `.native`-only in spirit; the web fork never imports
- * the subpath, so on web bundlers the static import is never reached.
+ * We declare the slice we use here — typed to match react-native-css @3.0.7's
+ * `dist/typescript/.../native-internal/root.d.ts` exactly (no `any`, no shims).
+ * This file is `.native`-only in spirit; the web fork never imports the subpath,
+ * so on web bundlers the static import is never reached.
  */
 declare module 'react-native-css/native-internal' {
   /**

package/src/theme/color-scope/index.web.tsx

@@ -3,20 +3,19 @@ import React, { Children, cloneElement, isValidElement, useContext, useMemo } fr
 import { BloomThemeContext, type BloomThemeContextValue } from '../BloomThemeProvider';
 import { buildTheme } from '../build-theme';
 import type { AppColorName } from '../color-presets';
-import { getResolvedTokens } from '../token-registry';
+import { buildScopeVars } from './style-builder';
 
 /**
- * `getResolvedTokens` returns every canonical token already resolved to an sRGB
- * `rgb(...)` string — the SAME pipeline the document-root web writer and the
- * native writer use. Scoped onto an element's inline `style`, Tailwind v4's
- * compiled utilities read these as `var(--x)` directly, so each base token is a
- * full CSS color with no per-value wrapping needed.
+ * `buildScopeVars` returns every canonical token already resolved to an sRGB
+ * `rgb(...)` string, plus the `--color-*` aliases consumed by Tailwind v4
+ * utilities. Scoped onto an element's inline `style`, profile-level NativeWind
+ * classes resolve against the subtree preset instead of the document root.
  */
 function buildWebScopeVars(
   colorPreset: AppColorName,
   mode: 'light' | 'dark',
 ): React.CSSProperties {
-  return getResolvedTokens(colorPreset, mode) as React.CSSProperties;
+  return buildScopeVars(colorPreset, mode) as React.CSSProperties;
 }
 
 export interface BloomColorScopeProps {

package/src/theme/color-scope/style-builder.ts

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { Platform, type StyleProp, type ViewStyle } from 'react-native';
 
-import { getResolvedTokens } from '../token-registry';
+import { CANONICAL_TOKENS, getResolvedTokens } from '../token-registry';
 import type { AppColorName } from '../color-presets';
 import { lazyRequire } from '../../utils/lazy-require';
 
@@ -25,17 +25,29 @@ const getNativeWindVars = lazyRequire<NativeWindVarsModule>('nativewind');
 
 /**
  * Build the CSS custom-property map for a preset, ready to be applied to a
- * subtree. Every token is resolved to an sRGB `rgb(...)` string via
- * `getResolvedTokens` — the single canonical token pipeline shared by web and
- * native — so Tailwind v4 `@theme` utilities (e.g. `bg-background`) and
- * `color-mix`-based alpha utilities (`bg-primary/10`) both resolve against the
- * same color values. Keys retain the leading `--`.
+ * subtree. Every canonical `--x` token is resolved to an sRGB `rgb(...)` string
+ * via `getResolvedTokens` — the single token pipeline shared by web and native.
+ *
+ * The returned map also includes Tailwind v4 `--color-x` aliases generated from
+ * those same canonical values. Scoped aliases are required on web because
+ * inherited custom properties like `--color-primary: var(--primary)` compute at
+ * the document root and would otherwise keep pointing at the app-wide preset.
  */
 export function buildScopeVars(
   colorPreset: AppColorName,
   mode: 'light' | 'dark',
 ): Record<string, string> {
-  return getResolvedTokens(colorPreset, mode);
+  const tokens = getResolvedTokens(colorPreset, mode);
+  const vars: Record<string, string> = { ...tokens };
+
+  for (const token of CANONICAL_TOKENS) {
+    const value = tokens[`--${token}`];
+    if (value !== undefined) {
+      vars[`--color-${token}`] = value;
+    }
+  }
+
+  return vars;
 }
 
 /**

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

@@ -9,11 +9,11 @@
 // `node_modules/@oxyhq/bloom/src/**`, and TypeScript does NOT auto-pick-up
 // ambient `.d.ts` files that live under `node_modules`, so
 // `react-native-css/native-internal` is unresolved (TS2307) unless the reference
-// travels with the source. react-native-css is intentionally NOT a Bloom
-// dependency — it arrives transitively via a host's NativeWind 5 install, or is
-// absent entirely for NativeWind 4 consumers — so the ambient declaration is the
-// only thing that can type this import, and it MUST reach the consumer. The
-// directive ships raw in `src/` (Bloom publishes `files: ["src", "lib"]`).
+// travels with the source. Bloom now declares react-native-css directly because
+// this native source imports it; the ambient declaration still travels with
+// `src/` so consumer TypeScript programs that read Bloom source see the exact
+// subpath shape. The directive ships raw in `src/` (Bloom publishes
+// `files: ["src", "lib"]`).
 import { rootVariables } from 'react-native-css/native-internal';
 
 import { type AppColorName } from './color-presets';

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

@@ -11,8 +11,7 @@ import { type AppColorName } from './color-presets';
  *     `exports` `import`/`require` conditions to `lib/.../native-root-vars.js`.
  *
  * It deliberately does NOT import `react-native-css/native-internal`. That subpath
- * is native-only: it has no web build, and react-native-css is not even a Bloom
- * dependency. Statically importing it from a file a web bundler resolves breaks
+ * is native-only. Statically importing it from a file a web bundler resolves breaks
  * module resolution outright (the original report: `Rolldown failed to resolve
  * import "react-native-css/native-internal" from .../native-root-vars.js`).
  * Importing it from a file a consumer's `tsc` resolves breaks type-check (TS2307).