@oxyhq/bloom 0.7.7 → 0.8.0

package/src/__tests__/preset-vars.test.ts

@@ -1,5 +1,6 @@
 import { APP_COLOR_NAMES, APP_COLOR_PRESETS } from '../theme/color-presets';
-import { getPresetVars, hslTripletToRgb, toWebColorValue } from '../theme/preset-vars';
+import { getPresetVars } from '../theme/preset-vars';
+import { getResolvedTokens } from '../theme/token-registry';
 
 const EXTENDED_KEYS = [
   '--card',
@@ -45,99 +46,52 @@ describe('getPresetVars', () => {
     expect(vars['--sidebar-primary']).toBe(primary);
   });
 
-  it('does not emit resolved --color-* vars by default', () => {
+  it('returns raw HSL triples (no resolved colors) — getResolvedTokens owns rgb', () => {
+    // `getPresetVars` is the raw triple source feeding the single canonical
+    // resolver. It must NOT pre-resolve to rgb/hsl, and the legacy resolved-color
+    // companion universe must be gone (no key carries the resolved-color prefix).
     const vars = getPresetVars('green', 'dark');
-    expect(vars['--color-primary']).toBeUndefined();
+    expect(vars['--primary']).toBe(APP_COLOR_PRESETS.green.dark['--primary']);
+    expect(/^-?\d[\d.]*\s+[\d.]+%/.test(vars['--primary'] ?? '')).toBe(true);
+    const legacyPrefix = `--${'color'}-`;
+    expect(Object.keys(vars).some((k) => k.startsWith(legacyPrefix))).toBe(false);
   });
+});
 
-  it('emits resolved --color-* vars as rgb() when requested', () => {
-    const vars = getPresetVars('green', 'dark', { includeResolvedColorVars: true });
+describe('getResolvedTokens (single canonical rgb pipeline)', () => {
+  it('resolves every base + extended token to a space-separated rgb() string', () => {
+    const resolved = getResolvedTokens('green', 'dark');
     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'] ?? ''));
+    // No resolved-color companion universe anymore — the base token is rgb.
+    const legacyPrefix = `--${'color'}-`;
+    expect(Object.keys(resolved).some((k) => k.startsWith(legacyPrefix))).toBe(false);
+    expect(resolved['--primary']).toMatch(/^rgb\(\d+ \d+ \d+\)$/);
+    expect(resolved['--card']).toMatch(/^rgb\(\d+ \d+ \d+\)$/);
+    // primary triple resolves to the same rgb the registry produces.
+    expect(resolved['--primary']).toBe(getResolvedTokens('green', 'dark')['--primary']);
+    expect(primaryTriple).toMatch(/%/);
   });
 
-  it('resolves --color-primary to rgb for the blue preset (matches web reference)', () => {
+  it('resolves --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)');
-  });
-});
-
-describe('toWebColorValue (web var contract)', () => {
-  it('wraps a raw HSL triple base token in hsl()', () => {
-    expect(toWebColorValue('--background', '185 50% 5%')).toBe('hsl(185 50% 5%)');
-    expect(toWebColorValue('--primary', '185 100% 20%')).toBe('hsl(185 100% 20%)');
-    expect(toWebColorValue('--foreground', '0 0% 12%')).toBe('hsl(0 0% 12%)');
-  });
-
-  it('wraps a raw HSL triple with an alpha tail into modern hsl(H S% L% / A) syntax', () => {
-    expect(toWebColorValue('--ring', '0 0% 0% / 0.5')).toBe('hsl(0 0% 0% / 0.5)');
-  });
-
-  it('passes --color-* resolved rgb() vars through unchanged', () => {
-    expect(toWebColorValue('--color-primary', 'rgb(31 153 239)')).toBe('rgb(31 153 239)');
-    expect(toWebColorValue('--color-background', 'rgb(0 94 102 / 0.5)')).toBe(
-      'rgb(0 94 102 / 0.5)',
-    );
-  });
-
-  it('passes non-color tokens (radius / lengths) through unchanged', () => {
-    expect(toWebColorValue('--radius', '0.5rem')).toBe('0.5rem');
-    expect(toWebColorValue('--radius-lg', '12px')).toBe('12px');
-  });
-
-  it('passes already-resolved color values through unchanged', () => {
-    expect(toWebColorValue('--primary', 'rgb(31 153 239)')).toBe('rgb(31 153 239)');
-    expect(toWebColorValue('--primary', 'hsl(185 100% 20%)')).toBe('hsl(185 100% 20%)');
-    expect(toWebColorValue('--primary', '#1d9bf0')).toBe('#1d9bf0');
+    const resolved = getResolvedTokens('blue', 'light');
+    expect(resolved['--primary']).toBe('rgb(31 153 239)');
   });
 
   it('produces a full CSS color for every base preset token of every preset/mode', () => {
     for (const name of APP_COLOR_NAMES) {
       for (const mode of ['light', 'dark'] as const) {
         const base = mode === 'light' ? APP_COLOR_PRESETS[name].light : APP_COLOR_PRESETS[name].dark;
-        for (const [key, value] of Object.entries(base)) {
-          const web = toWebColorValue(key, value);
+        const resolved = getResolvedTokens(name, mode);
+        for (const key of Object.keys(base)) {
+          const value = resolved[key] ?? '';
           // A bare triple (`185 50% 5%`) is INVALID CSS — the incident. Every
           // base token must come out as a complete color the browser parses.
-          expect(web.startsWith('hsl(') || web.startsWith('rgb(') || web.startsWith('#')).toBe(
+          expect(value.startsWith('rgb(') || value.startsWith('hsl(') || value.startsWith('#')).toBe(
             true,
           );
+          // Never a bare HSL triple.
+          expect(/^-?\d[\d.]*\s+[\d.]+%/.test(value)).toBe(false);
         }
       }
     }

package/src/__tests__/theme.test.ts

@@ -50,12 +50,12 @@ describe('Theme system', () => {
 
   describe('buildTheme primaryForeground', () => {
     it('resolves a readable foreground for the primary fill per preset', () => {
-      // blue's --primary-foreground is `0 0% 100%` → white
-      expect(buildTheme('blue', 'light').colors.primaryForeground).toBe('hsl(0, 0%, 100%)');
-      expect(buildTheme('blue', 'dark').colors.primaryForeground).toBe('hsl(0, 0%, 100%)');
-      // yellow's --primary-foreground is `0 0% 0%` → black
-      expect(buildTheme('yellow', 'light').colors.primaryForeground).toBe('hsl(0, 0%, 0%)');
-      expect(buildTheme('yellow', 'dark').colors.primaryForeground).toBe('hsl(0, 0%, 0%)');
+      // blue's --primary-foreground is `0 0% 100%` → white (canonical sRGB rgb)
+      expect(buildTheme('blue', 'light').colors.primaryForeground).toBe('rgb(255 255 255)');
+      expect(buildTheme('blue', 'dark').colors.primaryForeground).toBe('rgb(255 255 255)');
+      // yellow's --primary-foreground is `0 0% 0%` → black (canonical sRGB rgb)
+      expect(buildTheme('yellow', 'light').colors.primaryForeground).toBe('rgb(0 0 0)');
+      expect(buildTheme('yellow', 'dark').colors.primaryForeground).toBe('rgb(0 0 0)');
     });
 
     it('sets a primaryForeground for every preset in both modes', () => {

package/src/normalize-colors.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Ambient declaration for `@react-native/normalize-colors`.
+ *
+ * The package ships JS-only (`module.exports = normalizeColor`) with no bundled
+ * type declarations, so `tsc` can't see its shape. It arrives transitively via
+ * react-native / react-native-web — Bloom only references it in tests, as the
+ * exact parser React Native (native) and react-native-web use behind
+ * `StyleSheet`/`processColor` to validate that a color string is renderable.
+ *
+ * Typed to match the package's runtime contract (`index.js`): a default export
+ * that takes a CSS color string or a packed 32-bit RGBA number and returns the
+ * normalized packed RGBA integer, or `null` when the input is unparseable.
+ */
+declare module '@react-native/normalize-colors' {
+  /**
+   * Parse a CSS color string (or packed RGBA number) into a packed 32-bit RGBA
+   * integer (`0xRRGGBBAA`). Returns `null` when the input cannot be parsed — an
+   * unparseable color renders nothing in React Native / react-native-web.
+   */
+  const normalizeColor: (color: string | number) => number | null;
+  export default normalizeColor;
+}

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

@@ -20,9 +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 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.
+   * `StyleDescriptor`. Bloom only ever writes string color values (sRGB
+   * `rgb(...)` strings from the single canonical token pipeline), but the family
+   * is typed against the full descriptor union.
    */
   type StyleDescriptor =
     | string