@oxyhq/bloom 0.7.6 → 0.7.7

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

@@ -1,6 +1,11 @@
 import { Platform } from 'react-native';
 import { APP_COLOR_PRESETS, type AppColorName } from './color-presets';
-import { getPresetVars } from './preset-vars';
+import { getPresetVars, toWebColorValue } from './preset-vars';
+
+// Re-exported so the web var-contract helper is reachable from this file (the
+// home of the web write path). Defined in `preset-vars.ts` next to the related
+// HSL parsing so native (which never imports this module) doesn't pull it in.
+export { toWebColorValue } from './preset-vars';
 
 export function applyDarkClass(resolved: 'light' | 'dark') {
   if (Platform.OS === 'web' && typeof document !== 'undefined') {
@@ -10,16 +15,24 @@ export function applyDarkClass(resolved: 'light' | 'dark') {
 
 /**
  * Apply a color preset's CSS custom properties to the document root.
- * No-op on native — only affects web.
+ * No-op on native — only affects web (early-returns on `Platform.OS !== 'web'`).
+ *
+ * Web var contract (the form Tailwind v4 `@theme inline` compiles to)
+ * -------------------------------------------------------------------
+ * The shadcn/Tailwind-v4 web apps compile their color utilities to reference the
+ * BASE token directly (`.bg-background { background-color: var(--background) }`),
+ * so on web the base `--x` tokens MUST be FULL CSS colors. We therefore write
+ * them as `hsl(...)` (e.g. `--primary: hsl(185 100% 20%)`) — `var(--primary)`
+ * then resolves to a valid color. The resolved `--color-*` vars are written
+ * verbatim as `rgb(...)` (already full colors, used by native `color-mix` alpha
+ * utilities; harmless on web). Non-color tokens (`--radius`, etc.) pass through
+ * unchanged. See `toWebColorValue`.
  *
- * Writes both the raw HSL triples (e.g. `--primary: 185 100% 20%`) and the
- * resolved `--color-*` vars (`--color-primary: rgb(0 94 102)`) so both
- * shadcn-style `hsl(var(--primary))` plumbing and Tailwind v4 `@theme`
- * utilities resolve consistently. The resolved vars are emitted as `rgb(...)`
- * (not `hsl(...)`) so the alpha utilities (`bg-primary/10`) resolve on native —
- * see `getPresetVars` / `hslTripletToRgb`. Includes extended tokens (card,
- * chart-*, content-area, sidebar-*) so consumer apps don't need to synthesize
- * them.
+ * NATIVE writes the SAME tokens as RAW HSL triples (no `hsl()` wrapper) via
+ * `rootVariables` (`native-root-vars.native.ts`), consumed through bloom's
+ * native `global.css` `hsl(var(--x))` indirection — that path is untouched here.
+ * Includes extended tokens (card, chart-*, content-area, sidebar-*) so consumer
+ * apps don't need to synthesize them.
  */
 export function applyColorPresetVars(preset: AppColorName, resolved: 'light' | 'dark') {
   if (Platform.OS !== 'web' || typeof document === 'undefined') return;
@@ -29,6 +42,6 @@ export function applyColorPresetVars(preset: AppColorName, resolved: 'light' | '
   const root = document.documentElement.style;
 
   for (const [key, value] of Object.entries(vars)) {
-    root.setProperty(key, value);
+    root.setProperty(key, toWebColorValue(key, value));
   }
 }

package/src/theme/color-presets.ts

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

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

@@ -3,8 +3,29 @@ 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 { toWebColorValue } from '../preset-vars';
 import { buildScopeVars } from './style-builder';
 
+/**
+ * `buildScopeVars` returns the preset's tokens as platform-agnostic raw HSL
+ * triples (shared with the native write path). On web they are scoped onto an
+ * element's inline `style`, where Tailwind v4's compiled utilities read them as
+ * `var(--x)` directly — so the base tokens MUST be full CSS colors. Wrap each
+ * raw triple in `hsl(...)` via `toWebColorValue`; `--color-*` rgb vars and
+ * non-color tokens pass through. See `toWebColorValue` in `../preset-vars`.
+ */
+function buildWebScopeVars(
+  colorPreset: AppColorName,
+  mode: 'light' | 'dark',
+): React.CSSProperties {
+  const raw = buildScopeVars(colorPreset, mode);
+  const out: Record<string, string> = {};
+  for (const [key, value] of Object.entries(raw)) {
+    out[key] = toWebColorValue(key, value);
+  }
+  return out as React.CSSProperties;
+}
+
 export interface BloomColorScopeProps {
   /**
    * Preset to apply within this subtree. When `undefined`, the scope is a
@@ -63,7 +84,7 @@ export function BloomColorScope({
   }, [colorPreset, resolvedMode, parent]);
 
   const varsStyle = useMemo(
-    () => buildScopeVars(colorPreset, resolvedMode) as React.CSSProperties,
+    () => buildWebScopeVars(colorPreset, resolvedMode),
     [colorPreset, resolvedMode],
   );
 
@@ -104,7 +125,7 @@ export function useColorScopeStyle(colorPreset: AppColorName): React.CSSProperti
   }
   const resolvedMode = parent.theme.mode;
   return useMemo(
-    () => buildScopeVars(colorPreset, resolvedMode) as React.CSSProperties,
+    () => buildWebScopeVars(colorPreset, resolvedMode),
     [colorPreset, resolvedMode],
   );
 }

package/src/theme/index.ts

@@ -19,6 +19,7 @@ export {
 export {
   getPresetVars,
   applyPresetVarsToDocument,
+  toWebColorValue,
 } from './preset-vars';
 export type { PresetVarsOptions } from './preset-vars';
 export { applyDarkClass } from './apply-dark-class';

package/src/theme/preset-vars.ts

@@ -83,6 +83,53 @@ export function hslTripletToRgb(triplet: string): string {
   return `rgb(${red} ${green} ${blue})`;
 }
 
+/**
+ * Prefix that marks a Tailwind v4 resolved color var (`--color-primary`). These
+ * are already emitted as full `rgb(...)` colors by `getPresetVars` and must be
+ * written to web verbatim — wrapping them would corrupt the value.
+ */
+const RESOLVED_COLOR_VAR_PREFIX = '--color-';
+
+/**
+ * Matches a shadcn-style raw HSL triple — `H S% L%`, optionally with an alpha
+ * tail `H S% L% / A`. The value starts with a digit (or a leading `-`) and
+ * carries at least one `%` (the saturation/lightness units), which together
+ * distinguish a bare triple from an already-resolved CSS color (`rgb(...)`,
+ * `hsl(...)`, `#fff`, named colors) or a unitless/length token (`--radius`).
+ * Mirrors the triple shape parsed by `hslTripletToRgb`.
+ */
+const RAW_HSL_TRIPLE = /^-?\d[\d.]*\s+[\d.]+%/;
+
+/**
+ * Transform a single preset var into the value to write to a WEB element
+ * (`document.documentElement` or a `BloomColorScope` subtree element).
+ *
+ * The web apps (Vite + Tailwind v4 + shadcn) compile their `@theme inline`
+ * block so the color utilities reference the BASE token directly — e.g.
+ * `.bg-background { background-color: var(--background) }`. So on web the base
+ * `--x` tokens MUST resolve to a COMPLETE CSS color; a bare HSL triple
+ * (`185 50% 5%`) is invalid as a `background-color` value and renders
+ * transparent (the production incident this fixes). We therefore wrap raw
+ * triples in `hsl(...)`, preserving the exact preset color math (and any `/ A`
+ * alpha tail, valid in modern `hsl(H S% L% / A)` syntax) with zero rounding
+ * drift.
+ *
+ * Values that are already full colors pass through unchanged:
+ *   - `--color-*` resolved vars (already `rgb(...)` from `getPresetVars`),
+ *   - any value not shaped like a raw HSL triple (`--radius: 0.5rem`,
+ *     pre-resolved `rgb(...)`/`hsl(...)`, etc.).
+ *
+ * NATIVE never calls this — `getPresetVars` returns raw triples verbatim and
+ * `native-root-vars.native.ts` writes them through bloom's `hsl(var(--x))`
+ * native `global.css` indirection. Pure function — no side effects — so it is
+ * unit-testable in isolation.
+ */
+export function toWebColorValue(key: string, value: string): string {
+  if (key.startsWith(RESOLVED_COLOR_VAR_PREFIX)) return value;
+  if (!RAW_HSL_TRIPLE.test(value)) return value;
+  return `hsl(${value})`;
+}
+
 const RESOLVED_COLOR_MAP: Record<string, string> = {
   '--background': '--color-background',
   '--foreground': '--color-foreground',
@@ -183,6 +230,11 @@ export function getPresetVars(
  * on native. `BloomThemeProvider` already writes the base preset vars on web;
  * call this only when an app needs the extended (card/chart/sidebar) tokens on
  * the document root.
+ *
+ * The base raw-HSL-triple tokens are wrapped to full `hsl(...)` colors via
+ * `toWebColorValue` so `var(--x)` (the form Tailwind v4 `@theme inline`
+ * compiles to) resolves directly on web; `--color-*` rgb vars pass through. See
+ * `toWebColorValue` for the web var contract.
  */
 export function applyPresetVarsToDocument(
   colorName: AppColorName,
@@ -194,6 +246,6 @@ export function applyPresetVarsToDocument(
   const vars = getPresetVars(colorName, mode, options);
   const root = document.documentElement.style;
   for (const [key, value] of Object.entries(vars)) {
-    root.setProperty(key, value);
+    root.setProperty(key, toWebColorValue(key, value));
   }
 }