@oxyhq/bloom 0.7.0 → 0.7.2

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

@@ -4,7 +4,7 @@ import { View, type StyleProp, type ViewStyle } from 'react-native';
 import { BloomThemeContext, type BloomThemeContextValue } from '../BloomThemeProvider';
 import { buildTheme } from '../build-theme';
 import type { AppColorName } from '../color-presets';
-import { buildNativePresetStyle } from './style-builder';
+import { buildNativePresetStyle, buildScopeVars, getVariableContextProvider } from './style-builder';
 
 export interface BloomColorScopeProps {
   /**
@@ -46,10 +46,15 @@ export function BloomColorScope({
     return { ...parent, theme, colorPreset };
   }, [colorPreset, resolvedMode, parent]);
 
-  const varsStyle = useMemo(
-    () => buildNativePresetStyle(colorPreset, resolvedMode),
+  // Preset vars flow to the subtree through react-native-css's real
+  // VariableContext (`VariableContextProvider`), NOT via an inline `vars()`
+  // style — under react-native-css@3 inline vars applied to a plain `<View>`
+  // (no matched className rules) are dropped silently. See `style-builder.ts`.
+  const nativeVars = useMemo(
+    () => buildScopeVars(colorPreset, resolvedMode),
     [colorPreset, resolvedMode],
   );
+  const VariableProvider = getVariableContextProvider();
 
   let content: React.ReactNode;
   if (asChild) {
@@ -59,20 +64,37 @@ export function BloomColorScope({
         'BloomColorScope with `asChild` requires a single React element child that accepts a `style` prop.',
       );
     }
+    // The vars no longer ride on the child's `style`; merge only the caller's
+    // `style` and the child's own `style` (child last so its styles win).
     const childStyle = child.props.style;
-    const mergedStyle: StyleProp<ViewStyle> = [varsStyle, style, childStyle];
+    const mergedStyle: StyleProp<ViewStyle> = [style, childStyle];
     content = cloneElement(child, { style: mergedStyle });
   } else {
-    content = <View style={[{ flex: 1 }, varsStyle, style]}>{children}</View>;
+    content = <View style={[{ flex: 1 }, style]}>{children}</View>;
   }
 
-  return <BloomThemeContext.Provider value={contextValue}>{content}</BloomThemeContext.Provider>;
+  // Wrap the subtree in the variable provider when NativeWind is available;
+  // otherwise render as-is so we never crash on web/non-NativeWind hosts.
+  const scoped = VariableProvider ? (
+    <VariableProvider value={nativeVars}>{content}</VariableProvider>
+  ) : (
+    content
+  );
+
+  return <BloomThemeContext.Provider value={contextValue}>{scoped}</BloomThemeContext.Provider>;
 }
 
 /**
  * Escape hatch for advanced cases where the wrapping element is owned by the
- * caller. Returns a stable native style object carrying the preset's CSS vars.
- * Returns `undefined` on web or when `nativewind` is not installed.
+ * caller. Returns a stable native style object carrying the preset's CSS vars
+ * via NativeWind's `vars()`. Returns `undefined` on web or when `nativewind`
+ * is not installed.
+ *
+ * NOTE: subject to the react-native-css@3 limitation — the returned style only
+ * propagates vars to descendants when applied to an interop className component
+ * (the runtime gates propagation on matched className style rules). It is a
+ * no-op on a plain `<View>` with no `className`. For the common case prefer
+ * `<BloomColorScope>`, which wraps children in `VariableContextProvider`.
  */
 export function useColorScopeStyle(colorPreset: AppColorName): StyleProp<ViewStyle> {
   const parent = useContext(BloomThemeContext);

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

@@ -1,11 +1,24 @@
+import type React from 'react';
 import { Platform, type StyleProp, type ViewStyle } from 'react-native';
 
 import { getPresetVars } from '../preset-vars';
 import type { AppColorName } from '../color-presets';
 import { lazyRequire } from '../../utils/lazy-require';
 
+/**
+ * Component that provides inline CSS variables to a subtree via NativeWind's
+ * (react-native-css's) real `VariableContext`. The runtime strips the leading
+ * `--` from each key internally, so we feed it the full `--name -> value`
+ * record produced by `buildScopeVars`.
+ */
+export type VariableContextProviderComponent = React.ComponentType<{
+  value: Record<string, string>;
+  children: React.ReactNode;
+}>;
+
 interface NativeWindVarsModule {
   vars: (record: Record<string, string>) => StyleProp<ViewStyle>;
+  VariableContextProvider?: VariableContextProviderComponent;
 }
 
 const getNativeWindVars = lazyRequire<NativeWindVarsModule>('nativewind');
@@ -22,11 +35,38 @@ export function buildScopeVars(
   return getPresetVars(colorPreset, mode, { includeResolvedColorVars: true });
 }
 
+/**
+ * Resolve NativeWind's `VariableContextProvider` — the canonical, non-deprecated
+ * react-native-css v3 API for providing inline CSS variables to a subtree. It
+ * reads the same `VariableContext` that interop className components consume, so
+ * descendants resolve `var(--primary)` etc. correctly. Returns `null` on web or
+ * when `nativewind` is not installed.
+ *
+ * This replaces the deprecated `vars()`-on-a-plain-`<View>`-style mechanism:
+ * under react-native-css@3, `vars()` returns an inline-vars marker that is only
+ * propagated to children when the host element matches className style rules
+ * (`usesVariables`/`variables`). A plain `<View>` with no `className` drops the
+ * vars silently, so the subtree renders without the preset palette.
+ */
+export function getVariableContextProvider(): VariableContextProviderComponent | null {
+  if (Platform.OS === 'web') return null;
+  const module = getNativeWindVars();
+  if (!module || typeof module.VariableContextProvider !== 'function') return null;
+  return module.VariableContextProvider;
+}
+
 /**
  * Build a native style object carrying every CSS var of the preset, using
  * NativeWind's `vars()` when available. Returns `undefined` on web (where the
  * provider writes vars to `documentElement` instead) or when `nativewind` is
  * not installed.
+ *
+ * @deprecated Under react-native-css@3, `vars()` only propagates to a subtree
+ * when applied to an interop className component (the runtime gates propagation
+ * on matched className style rules). Applied to a plain `<View>` the vars are
+ * dropped silently. Prefer wrapping children in `getVariableContextProvider()`.
+ * Retained only as the escape-hatch contract of `useColorScopeStyle`, where the
+ * caller owns the host element and is expected to be a className component.
  */
 export function buildNativePresetStyle(
   colorPreset: AppColorName,

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

@@ -0,0 +1,107 @@
+import { rootVariables } from 'react-native-css/native-internal';
+
+import { buildScopeVars } from './color-scope/style-builder';
+import { type AppColorName } from './color-presets';
+
+/**
+ * Publish the active color preset's CSS custom properties into react-native-css's
+ * GLOBAL root-variable family so they reach the ENTIRE native app tree — including
+ * content rendered outside the React subtree of `BloomThemeProvider`: expo-router
+ * navigator screens, `Portal`s, `Dialog`/`BottomSheet` overlays, and any other host
+ * that paints through a separate React root.
+ *
+ * Why a global write is required (native only)
+ * --------------------------------------------
+ * react-native-css resolves a `var(--x)` reference (its `varResolver`) in this order:
+ *   1. `name in inheritedVariables`  — the React-context-inherited vars. This is what
+ *      `VariableContextProvider` populates, but it is React-context-scoped, so it only
+ *      reaches *direct descendants* of the provider in the React tree.
+ *   2. `inlineVariables[name]`        — same-component inline vars.
+ *   3. `variables[name]`             — resolved inherited vars.
+ *   4. `universalVariables(name)`    — a GLOBAL observable family.
+ *   5. `rootVariables(name)`         — a GLOBAL observable family.
+ *   6. the declared fallback.
+ *
+ * `BloomThemeProvider`'s `VariableContextProvider` only feeds path #1, so the navigator
+ * host and every portal/modal — which render outside that subtree — never see the
+ * preset vars and fall through to `rootVariables`/`universalVariables`. By default those
+ * families hold only react-native-css's own `__rn-css-rem`/`__rn-css-color` entries
+ * (Bloom's `global.css` defines the `hsl(var(--primary))` indirection but not the HSL
+ * triples themselves — those are injected at runtime), so the whole tree below the
+ * navigator renders monochrome. Writing the vars into `rootVariables` here is the
+ * exact same mechanism react-native-css uses for compiled `:root {}` / `@theme` vars
+ * (`StyleCollection.inject` does `rootVariables(name).set(valueArray)`), so portaled
+ * content resolves the palette identically regardless of React-tree position.
+ *
+ * The raw tokens are written as HSL triples (`primary: '205 87% 53%'`) and the
+ * resolved Tailwind v4 `--color-*` vars as sRGB `rgb(...)` (`color-primary:
+ * 'rgb(31 153 239)'`) — the latter so `color-mix`-based alpha utilities resolve
+ * on native (see `getPresetVars` / `hslTripletToRgb`).
+ *
+ * Why a STATIC `import`, not a runtime `require` (critical)
+ * ---------------------------------------------------------
+ * react-native-css@3.0.7 ships both a `dist/commonjs` and a `dist/module` build, and
+ * Metro bundles BOTH. In `native-internal/root.js` the variable families are plain
+ * module-local consts — NOT `globalThis`-guarded the way `StyleCollection` is — so the
+ * commonjs `root.js` and the module `root.js` each instantiate their OWN separate
+ * `rootVariables` family. The react-native-css renderer (`react-native-css/src/components/View.tsx`
+ * → `varResolver`) imports its `root.js` via ESM `import`, i.e. the MODULE build. A
+ * runtime `require('react-native-css/native-internal')` resolves the package's `require`
+ * export condition → the COMMONJS build → a DIFFERENT family the renderer never
+ * subscribes to, so the writes are a silent no-op on device. A static top-level
+ * `import` resolves the `import` condition → the MODULE build → the renderer's instance.
+ *
+ * This plain file is the NATIVE/default variant (Metro selects it on iOS/Android,
+ * which have no `.native` override here); the web variant lives in the sibling
+ * `native-root-vars.web.ts` no-op, which web bundlers pick over this one. So the
+ * static `react-native-css/native-internal` import below is never pulled into a web
+ * bundle — only into native. This mirrors Bloom's existing platform-split convention
+ * (`color-scope/index.tsx` + `color-scope/index.web.tsx`, `FontLoader.native.tsx`).
+ *
+ * Keying contract (verified against react-native-css@3.0.7)
+ * ---------------------------------------------------------
+ * The `rootVariables` family is keyed by the BARE variable name, WITHOUT the leading
+ * `--`. The compiler strips it uniformly: a `:root { --primary: ... }` declaration is
+ * stored via `rule.v.push([property.slice(2), value])` then routed into
+ * `shared.rootVariables[name]`, and `@property --x` goes through
+ * `name.startsWith("--") ? name.slice(2) : name`. The lookup side matches: a `var(--x)`
+ * reference compiles to `[{}, "var", ident.slice(2)]`, so `varResolver` looks up the
+ * bare name. `buildScopeVars` returns keys WITH the `--` prefix, so we strip it before
+ * writing each entry.
+ *
+ * Value shape
+ * -----------
+ * Each entry is a `VariableValue[]` — an array of `[value, mediaCondition?]` tuples.
+ * Bloom's preset vars are unconditional, so each is a single-element `[[value]]`, e.g.
+ * `rootVariables('primary').set([['205 87% 53%']])`. This is the same shape the compiler
+ * emits for unconditional `:root` vars.
+ *
+ * This is native-only and additive: the `VariableContextProvider` wrapper stays (it is
+ * the correct, scoped mechanism for `BloomColorScope` subtree overrides and harmlessly
+ * covers direct descendants). The web fork (`native-root-vars.web.ts`) no-ops — web
+ * writes the same vars to `document.documentElement` via `applyColorPresetVars`.
+ */
+
+/**
+ * Write the preset's CSS vars to react-native-css's global `rootVariables` family
+ * so the whole native tree (navigator screens + portals/modals/bottom-sheets)
+ * resolves the active palette.
+ *
+ * Each `.set` notifies its own observers synchronously (react-native-css only
+ * batches notifications inside its own `StyleCollection.inject`; outside it,
+ * `observableBatch.current` is unset so every `.set` runs observers immediately),
+ * so sequential writes correctly trigger a re-render when the preset/mode changes.
+ *
+ * Defensive guard: if a host ships a react-native-css build that doesn't expose
+ * `rootVariables` as a callable (it always does on @3), we bail rather than throw.
+ */
+export function applyNativeRootVars(colorPreset: AppColorName, mode: 'light' | 'dark'): void {
+  if (typeof rootVariables !== 'function') return;
+
+  const vars = buildScopeVars(colorPreset, mode);
+  for (const [key, value] of Object.entries(vars)) {
+    // The family is keyed by the bare name; `buildScopeVars` keys include `--`.
+    const name = key.startsWith('--') ? key.slice(2) : key;
+    rootVariables(name).set([[value]]);
+  }
+}

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

@@ -0,0 +1,22 @@
+import { type AppColorName } from './color-presets';
+
+/**
+ * Web fork of `applyNativeRootVars` — a no-op.
+ *
+ * On web, `BloomThemeProvider` already writes the active preset's CSS vars to
+ * `document.documentElement` via `applyColorPresetVars`, which the browser /
+ * react-native-web resolve natively. The native/default variant — the plain
+ * sibling `native-root-vars.ts` — instead publishes those vars into
+ * react-native-css's GLOBAL `rootVariables` family.
+ *
+ * Keeping the native variant's `react-native-css/native-internal` import out of
+ * the web bundle is the whole reason this is a platform-split module: web (and
+ * any non-NativeWind host) picks this `.web` fork over the plain file and so
+ * never statically pulls react-native-css internals.
+ *
+ * The signature is intentionally identical to the plain variant so the import
+ * site in `BloomThemeProvider` is platform-agnostic.
+ */
+export function applyNativeRootVars(_colorPreset: AppColorName, _mode: 'light' | 'dark'): void {
+  // Intentionally empty — web applies preset vars to `document.documentElement`.
+}

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;
 }
@@ -67,7 +148,10 @@ export function getPresetVars(
 
   const extended: PresetTokens = {
     ...base,
-    '--card': isDark ? `${hue} 30% 10%` : '0 0% 100%',
+    // Light cards carry the same faint preset tint as `--popover` (H 12% 99%)
+    // so they read as part of the preset family rather than a pure-white slab —
+    // mirroring how dark cards (H 30% 10%) carry the accent hue into near-black.
+    '--card': isDark ? `${hue} 30% 10%` : `${hue} 12% 99%`,
     '--card-foreground': foreground,
     '--chart-1': `${hue} ${sat}% 85%`,
     '--chart-2': `${hue} ${sat}% 75%`,
@@ -89,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;
 }