@oxyhq/bloom 0.8.0 → 0.8.2

package/src/theme/__tests__/runtime-contract.test.ts

@@ -7,6 +7,7 @@ import { Platform } from 'react-native';
 
 import { buildTheme } from '../build-theme';
 import { applyColorPresetVars } from '../apply-dark-class';
+import { getResolvedTokens } from '../token-registry';
 
 // `@react-native/normalize-colors` is the exact parser React Native (native) and
 // react-native-web use behind `StyleSheet`/`processColor`. If it returns `null`
@@ -43,7 +44,20 @@ describe('web var(--primary) resolves to a real color (not a bare triple)', () =
   });
 });
 
-it('mislabeled aliases are fixed: secondary !== primary', () => {
-  const { colors } = buildTheme('oxy', 'light');
-  expect(colors.secondary).not.toBe(colors.primary);
+it('restored legacy alias invariants hold', () => {
+  // Pre-0.8.0 semantics, restored in 0.8.1: `secondary` mirrors `primary`,
+  // `card` and `primaryLight` are the page surface, `primaryDark` is the page
+  // background. All read straight from the same resolved rgb token map, so the
+  // alias values are byte-identical to their source tokens.
+  for (const preset of ['oxy', 'blue'] as const) {
+    for (const mode of ['light', 'dark'] as const) {
+      const { colors } = buildTheme(preset, mode);
+      const t = getResolvedTokens(preset, mode);
+      expect(colors.secondary).toBe(colors.primary);
+      expect(colors.secondary).toBe(t['--primary']);
+      expect(colors.card).toBe(t['--surface']);
+      expect(colors.primaryLight).toBe(t['--surface']);
+      expect(colors.primaryDark).toBe(t['--background']);
+    }
+  }
 });

package/src/theme/__tests__/theme-colors-parity.test.ts

@@ -0,0 +1,115 @@
+/**
+ * @jest-environment node
+ */
+
+import normalizeColor from '@react-native/normalize-colors';
+
+import { buildTheme } from '../build-theme';
+import type { AppColorName } from '../color-presets';
+import type { ThemeColors } from '../types';
+
+// Parity guard for the 0.8.1 restoration of the pre-0.8.0 `theme.colors`
+// derived/alias values. 0.8.0 changed several derived/alias mappings, visibly
+// altering dark (and light) mode for consuming components. 0.8.1 restores the
+// EXACT pre-0.8.0 colors while keeping the single rgb pipeline (the old logic
+// emitted `hsl(h,s%,l%)` strings; the new logic emits the `rgb(...)` of the same
+// color). These oracles are the VERBATIM pre-0.8.0 outputs (commit 00a4cf3:
+// `git show 00a4cf3:src/theme/build-theme.ts`). We assert visual equality via
+// ΔE on the parsed sRGB — `hsl(...)` and the matching `rgb(...)` parse to the
+// same bytes under the RN/RNW/browser `normalizeColor`, so ΔE is 0.
+
+type Rgb = { r: number; g: number; b: number };
+
+function parse(color: string): Rgb {
+  const n = normalizeColor(color);
+  if (n === null || n === undefined) {
+    throw new Error(`unparseable color: ${color}`);
+  }
+  // normalizeColor returns 0xRRGGBBAA.
+  return { r: (n >>> 24) & 0xff, g: (n >>> 16) & 0xff, b: (n >>> 8) & 0xff };
+}
+
+function deltaE(a: Rgb, b: Rgb): number {
+  return Math.sqrt((a.r - b.r) ** 2 + (a.g - b.g) ** 2 + (a.b - b.b) ** 2) / Math.sqrt(3);
+}
+
+/**
+ * The pre-0.8.0 `theme.colors` for a (preset, mode) pair, expressed in the EXACT
+ * source forms commit 00a4cf3 produced — token-backed values as `hsl(H, S%, L%)`
+ * (from the preset's raw triples) and computed tints via `hsl(hue, s%, l%)`.
+ *
+ * We only assert the fields the restoration touches plus the load-bearing
+ * aliases (primaryLight/primaryDark/secondary/card). Status colors and
+ * shadow/overlay were never changed, so they are intentionally omitted.
+ */
+type Oracle = Partial<Record<keyof ThemeColors, string>>;
+
+const ORACLES: Array<{ preset: AppColorName; mode: 'light' | 'dark'; old: Oracle }> = [
+  {
+    // blue: primary 205 87% 53%, surface dark 205 20% 18%, background dark 205 50% 5%, destructive hue 0.
+    preset: 'blue',
+    mode: 'dark',
+    old: {
+      secondary: 'hsl(205, 87%, 53%)', // == primary
+      primary: 'hsl(205, 87%, 53%)',
+      card: 'hsl(205, 20%, 18%)', // == surface
+      primaryLight: 'hsl(205, 20%, 18%)', // == surface
+      primaryDark: 'hsl(205, 50%, 5%)', // == background
+      primarySubtle: 'hsl(205, 50%, 10%)',
+      primarySubtleForeground: 'hsl(205, 70%, 65%)',
+      negative: 'hsl(0, 84%, 45%)',
+      negativeForeground: '#FFFFFF',
+      negativeSubtle: 'hsl(0, 50%, 10%)',
+      negativeSubtleForeground: 'hsl(0, 70%, 65%)',
+      contrast50: 'hsl(205, 15%, 12%)',
+    },
+  },
+  {
+    // oxy: primary 277 66% 56%, surface dark 277 20% 18%, background dark 277 50% 5%, destructive hue 0.
+    preset: 'oxy',
+    mode: 'dark',
+    old: {
+      secondary: 'hsl(277, 66%, 56%)',
+      primary: 'hsl(277, 66%, 56%)',
+      card: 'hsl(277, 20%, 18%)',
+      primaryLight: 'hsl(277, 20%, 18%)',
+      primaryDark: 'hsl(277, 50%, 5%)',
+      primarySubtle: 'hsl(277, 50%, 10%)',
+      primarySubtleForeground: 'hsl(277, 70%, 65%)',
+      negative: 'hsl(0, 84%, 45%)',
+      negativeForeground: '#FFFFFF',
+      negativeSubtle: 'hsl(0, 50%, 10%)',
+      negativeSubtleForeground: 'hsl(0, 70%, 65%)',
+      contrast50: 'hsl(277, 15%, 12%)',
+    },
+  },
+  {
+    // blue light: surface 205 58% 94%, background 205 55% 96%.
+    preset: 'blue',
+    mode: 'light',
+    old: {
+      secondary: 'hsl(205, 87%, 53%)',
+      primary: 'hsl(205, 87%, 53%)',
+      card: 'hsl(205, 58%, 94%)',
+      primaryLight: 'hsl(205, 58%, 94%)',
+      primaryDark: 'hsl(205, 55%, 96%)',
+      primarySubtle: 'hsl(205, 70%, 93%)',
+      primarySubtleForeground: 'hsl(205, 90%, 25%)',
+      negative: 'hsl(0, 84%, 45%)',
+      negativeForeground: '#FFFFFF',
+      negativeSubtle: 'hsl(0, 90%, 95%)',
+      negativeSubtleForeground: 'hsl(0, 80%, 40%)',
+      contrast50: 'hsl(205, 10%, 93%)',
+    },
+  },
+];
+
+describe.each(ORACLES)('theme.colors parity with pre-0.8.0 ($preset/$mode)', ({ preset, mode, old }) => {
+  const { colors } = buildTheme(preset, mode);
+
+  it.each(Object.entries(old))('%s matches the pre-0.8.0 color (ΔE ≤ 1)', (key, oldColor) => {
+    const newColor = colors[key as keyof ThemeColors];
+    const dE = deltaE(parse(oldColor), parse(newColor));
+    expect(dE).toBeLessThanOrEqual(1);
+  });
+});

package/src/theme/build-theme.ts

@@ -1,8 +1,7 @@
 import { Platform } from 'react-native';
-import type { AppColorName } from './color-presets';
+import { APP_COLOR_PRESETS, type AppColorName } from './color-presets';
 import { getAdaptiveColors } from './adaptive-colors';
-import { getResolvedTokens } from './token-registry';
-import { parseRgbString, srgbToRgbString } from './color-space';
+import { getResolvedTokens, hslToSrgb } from './token-registry';
 import type { Theme, ThemeColors } from './types';
 
 /**
@@ -16,12 +15,30 @@ export const STATUS_COLORS = {
   info: '#3B82F6',
 } as const;
 
+/**
+ * Extract the integer hue from a shadcn-style raw HSL triple (`'H S% L%'`,
+ * optionally with an alpha tail). Used to seed the computed brand tints below
+ * from the preset's primary/destructive hue, exactly as pre-0.8.0.
+ */
+function extractHue(triple: string): number {
+  const first = (triple.split(/\s+/)[0] ?? '0').replace(/deg$/i, '');
+  const hue = parseInt(first, 10);
+  return Number.isFinite(hue) ? hue : 0;
+}
+
 /**
  * Build the JS `theme.colors` object from the SAME canonical rgb token source
  * the web/native CSS-var writes use (`getResolvedTokens`). JS styles and the
  * `var(--x)` document tokens therefore share one rgb pipeline — no second,
- * drift-prone HSL conversion lives here. Subtle/alpha mixes derive from the
- * resolved rgb via `parseRgbString` + `srgbToRgbString`.
+ * drift-prone HSL conversion lives here.
+ *
+ * Token-backed values read straight from the resolved rgb map via `g(...)`.
+ * The brand tints (primarySubtle/negative/contrast50/...) reproduce the EXACT
+ * pre-0.8.0 colors — computed from the preset's primary/destructive HUE with
+ * the historical `hsl(h, s%, l%)` math — but are emitted as `rgb(...)` by
+ * routing the triple through the registry's `hslToSrgb`, so the single-format
+ * pipeline is preserved. (`hsl(h,s%,l%)` and the `rgb(...)` of the same color
+ * are byte-identical under the RN/RNW/browser parser.)
  */
 function buildColorsFromPreset(
   preset: AppColorName,
@@ -32,8 +49,16 @@ function buildColorsFromPreset(
 
   // Read a resolved `rgb(...)` token by its bare name (no leading `--`).
   const g = (k: string): string => t[`--${k}`] ?? 'rgb(0 0 0)';
-  // Re-emit a resolved token at a given alpha (sRGB rgb-with-alpha).
-  const mix = (k: string, a: number): string => srgbToRgbString(parseRgbString(g(k)), a);
+
+  // Convert a computed `H S% L%` triple to the canonical `rgb(...)` via the
+  // registry's single HSL→sRGB conversion (matches the old `hsl(h,s%,l%)`).
+  const hslRgb = (h: number, s: number, l: number): string => hslToSrgb(`${h} ${s}% ${l}%`);
+
+  // Brand hues seed the computed tints from the preset's raw HSL triples,
+  // exactly as the pre-0.8.0 logic did.
+  const presetTokens = isDark ? APP_COLOR_PRESETS[preset].dark : APP_COLOR_PRESETS[preset].light;
+  const pHue = extractHue(presetTokens['--primary'] ?? '0 0% 50%');
+  const dHue = extractHue(presetTokens['--destructive'] ?? '0 0% 0%');
 
   return {
     background: g('background'),
@@ -49,13 +74,13 @@ function buildColorsFromPreset(
 
     primary: g('primary'),
     primaryForeground: g('primary-foreground'),
-    // Corrected aliases (see types.ts): `primaryLight` is the preset accent
-    // tint, `primaryDark` is the focus-ring shade — NOT the surface/background.
-    primaryLight: g('accent'),
-    primaryDark: g('ring'),
+    // Legacy aliases (see types.ts): `primaryLight` is the page surface tint,
+    // `primaryDark` is the page background — retained for downstream consumers.
+    primaryLight: g('surface'),
+    primaryDark: g('background'),
 
-    // Corrected: `secondary` is the preset's secondary surface, NOT a primary mirror.
-    secondary: g('secondary'),
+    // `secondary` historically mirrors `primary`. Retained for compatibility.
+    secondary: g('primary'),
 
     tint: g('primary'),
     icon: g('muted-foreground'),
@@ -63,15 +88,15 @@ function buildColorsFromPreset(
 
     ...STATUS_COLORS,
 
-    primarySubtle: mix('primary', isDark ? 0.16 : 0.12),
-    primarySubtleForeground: g('primary'),
-    negative: g('destructive'),
+    primarySubtle: isDark ? hslRgb(pHue, 50, 10) : hslRgb(pHue, 70, 93),
+    primarySubtleForeground: isDark ? hslRgb(pHue, 70, 65) : hslRgb(pHue, 90, 25),
+    negative: hslRgb(dHue, 84, 45),
     negativeForeground: '#FFFFFF',
-    negativeSubtle: mix('destructive', isDark ? 0.16 : 0.12),
-    negativeSubtleForeground: g('destructive'),
-    contrast50: mix('foreground', 0.5),
+    negativeSubtle: isDark ? hslRgb(dHue, 50, 10) : hslRgb(dHue, 90, 95),
+    negativeSubtleForeground: isDark ? hslRgb(dHue, 70, 65) : hslRgb(dHue, 80, 40),
+    contrast50: isDark ? hslRgb(pHue, 15, 12) : hslRgb(pHue, 10, 93),
 
-    card: g('card'),
+    card: g('surface'),
     shadow: isDark ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.1)',
     overlay: 'rgba(0, 0, 0, 0.5)',
   };

package/src/theme/types.ts

@@ -14,12 +14,12 @@ export interface ThemeColors {
 
   primary: string;
   primaryForeground: string;
-  /** Preset accent tint (`--accent`) — a soft brand-tinted surface, NOT the page surface. */
+  /** Legacy alias: the page surface tint (`--surface`), NOT a brand accent. */
   primaryLight: string;
-  /** Focus-ring shade (`--ring`) — the preset's emphasized ring/border color, NOT the page background. */
+  /** Legacy alias: the page background (`--background`), NOT the focus ring. */
   primaryDark: string;
 
-  /** Preset secondary surface (`--secondary`) — a muted companion surface, NOT a mirror of `primary`. */
+  /** Legacy alias: mirrors `primary` (`--primary`) for backwards compatibility. */
   secondary: string;
 
   tint: string;