@oxyhq/bloom 0.41.0 → 0.42.1

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

@@ -17,6 +17,7 @@
 import { rootVariables } from 'react-native-css/native-internal';
 
 import { type AppColorName } from './color-presets';
+import type { ExplicitAccents } from './preset-vars';
 import { getResolvedTokens } from './token-registry';
 
 /**
@@ -121,10 +122,14 @@ import { getResolvedTokens } from './token-registry';
  * 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 {
+export function applyNativeRootVars(
+  colorPreset: AppColorName,
+  mode: 'light' | 'dark',
+  accents?: ExplicitAccents,
+): void {
   if (typeof rootVariables !== 'function') return;
 
-  const vars = getResolvedTokens(colorPreset, mode);
+  const vars = getResolvedTokens(colorPreset, mode, accents);
   for (const [key, value] of Object.entries(vars)) {
     // The family is keyed by the bare name; `getResolvedTokens` keys include `--`.
     const name = key.startsWith('--') ? key.slice(2) : key;

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

@@ -1,4 +1,5 @@
 import { type AppColorName } from './color-presets';
+import type { ExplicitAccents } from './preset-vars';
 
 /**
  * Platform-neutral DEFAULT variant of `applyNativeRootVars` — a no-op.
@@ -30,7 +31,11 @@ import { type AppColorName } from './color-presets';
  * The signature is intentionally identical to those variants so the import site in
  * `BloomThemeProvider` is platform-agnostic.
  */
-export function applyNativeRootVars(_colorPreset: AppColorName, _mode: 'light' | 'dark'): void {
+export function applyNativeRootVars(
+  _colorPreset: AppColorName,
+  _mode: 'light' | 'dark',
+  _accents?: ExplicitAccents,
+): void {
   // Intentionally empty — the native variant (`native-root-vars.native.ts`) does
   // the real work; this neutral default and the web fork are inert.
 }

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

@@ -1,4 +1,5 @@
 import { type AppColorName } from './color-presets';
+import type { ExplicitAccents } from './preset-vars';
 
 /**
  * Web fork of `applyNativeRootVars` — a no-op.
@@ -17,6 +18,10 @@ import { type AppColorName } from './color-presets';
  * 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 {
+export function applyNativeRootVars(
+  _colorPreset: AppColorName,
+  _mode: 'light' | 'dark',
+  _accents?: ExplicitAccents,
+): void {
   // Intentionally empty — web applies preset vars to `document.documentElement`.
 }

package/src/theme/preset-vars.ts

@@ -1,5 +1,17 @@
 import { APP_COLOR_PRESETS, type AppColorName, type PresetTokens } from './color-presets';
 import { generateRoleColors, type RoleColors } from './color-engine';
+
+/**
+ * Optional explicit accent-colour overrides (`#rrggbb`) that PIN the secondary
+ * and/or tertiary palette app-wide, regardless of the active preset's own seed.
+ * Threaded from `BloomThemeProvider`'s `secondaryColor` / `tertiaryColor` props
+ * down through the whole token pipeline. When both are omitted, the preset's own
+ * (usually derived) accents are used — output is unchanged.
+ */
+export interface ExplicitAccents {
+  secondaryHex?: string;
+  tertiaryHex?: string;
+}
 // Circular at the module graph level (`token-registry` imports `getPresetVars`
 // from here), but safe: `getResolvedTokens` is only referenced inside the
 // `applyPresetVarsToDocument` function body — i.e. at call time, after both
@@ -26,12 +38,19 @@ import { getResolvedTokens } from './token-registry';
 export function getPresetVars(
   colorName: AppColorName,
   mode: 'light' | 'dark',
+  accents?: ExplicitAccents,
 ): PresetTokens {
   const preset = APP_COLOR_PRESETS[colorName];
   const r: RoleColors = generateRoleColors({
     seed: preset.hex,
     variant: preset.variant,
     isDark: mode === 'dark',
+    // Pinned accents: an explicit app-wide override (from the provider) wins,
+    // else the preset's own declared accent, else undefined → derived rotation.
+    // The built-in presets declare none, so with no override their generated
+    // tokens stay byte-identical.
+    secondarySeed: accents?.secondaryHex ?? preset.secondaryHex,
+    tertiarySeed: accents?.tertiaryHex ?? preset.tertiaryHex,
   });
 
   return {

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

@@ -15,6 +15,14 @@ export interface BloomSeedScopeProps {
    * mouse-leave/blur when restoring the default theme).
    */
   seed: string | undefined;
+  /**
+   * Optional explicit secondary-accent seed (`#rrggbb`). Pins the secondary
+   * palette to a distinct brand/artwork colour instead of the derived rotation —
+   * e.g. pass `seedsFromImagePixels(pixels)[1]` for a richer artwork theme.
+   */
+  secondarySeed?: string;
+  /** Optional explicit tertiary-accent seed (`#rrggbb`). Same semantics. */
+  tertiarySeed?: string;
   /** Tonal scheme variant. Defaults to `'vibrant'` (matches Bloom presets). */
   variant?: SchemeVariant;
   /** −1 (low) … 0 (normal) … 1 (high). Defaults to 0. */
@@ -46,6 +54,8 @@ interface StyleableProps {
  */
 export function BloomSeedScope({
   seed,
+  secondarySeed,
+  tertiarySeed,
   variant,
   contrastLevel,
   asChild = false,
@@ -57,15 +67,18 @@ export function BloomSeedScope({
   const resolvedMode = parent?.theme.mode ?? 'light';
 
   const nativeVars = useMemo<Record<string, string> | null>(
-    () => (seed ? buildSeedScopeVars({ seed, mode: resolvedMode, variant, contrastLevel }) : null),
-    [seed, resolvedMode, variant, contrastLevel],
+    () =>
+      seed
+        ? buildSeedScopeVars({ seed, mode: resolvedMode, variant, contrastLevel, secondarySeed, tertiarySeed })
+        : null,
+    [seed, resolvedMode, variant, contrastLevel, secondarySeed, tertiarySeed],
   );
 
   const contextValue = useMemo<BloomThemeContextValue | null>(() => {
     if (!parent || !seed) return null;
-    const theme = buildThemeFromSeed(seed, resolvedMode, variant, contrastLevel);
+    const theme = buildThemeFromSeed(seed, resolvedMode, variant, contrastLevel, { secondarySeed, tertiarySeed });
     return { ...parent, theme };
-  }, [parent, seed, resolvedMode, variant, contrastLevel]);
+  }, [parent, seed, resolvedMode, variant, contrastLevel, secondarySeed, tertiarySeed]);
 
   if (!parent) {
     throw new Error('BloomSeedScope must be used within a <BloomThemeProvider>');

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

@@ -13,6 +13,14 @@ export interface BloomSeedScopeProps {
    * mouse-leave/blur when restoring the default theme).
    */
   seed: string | undefined;
+  /**
+   * Optional explicit secondary-accent seed (`#rrggbb`). Pins the secondary
+   * palette to a distinct brand/artwork colour instead of the derived rotation —
+   * e.g. pass `seedsFromImagePixels(pixels)[1]` for a richer artwork theme.
+   */
+  secondarySeed?: string;
+  /** Optional explicit tertiary-accent seed (`#rrggbb`). Same semantics. */
+  tertiarySeed?: string;
   /** Tonal scheme variant. Defaults to `'vibrant'` (matches Bloom presets). */
   variant?: SchemeVariant;
   /** −1 (low) … 0 (normal) … 1 (high). Defaults to 0. */
@@ -57,6 +65,8 @@ interface StyleableProps {
  */
 export function BloomSeedScope({
   seed,
+  secondarySeed,
+  tertiarySeed,
   variant,
   contrastLevel,
   asChild = false,
@@ -74,16 +84,18 @@ export function BloomSeedScope({
             mode: resolvedMode,
             variant,
             contrastLevel,
+            secondarySeed,
+            tertiarySeed,
           }) as React.CSSProperties)
         : null,
-    [seed, resolvedMode, variant, contrastLevel],
+    [seed, resolvedMode, variant, contrastLevel, secondarySeed, tertiarySeed],
   );
 
   const contextValue = useMemo<BloomThemeContextValue | null>(() => {
     if (!parent || !seed) return null;
-    const theme = buildThemeFromSeed(seed, resolvedMode, variant, contrastLevel);
+    const theme = buildThemeFromSeed(seed, resolvedMode, variant, contrastLevel, { secondarySeed, tertiarySeed });
     return { ...parent, theme };
-  }, [parent, seed, resolvedMode, variant, contrastLevel]);
+  }, [parent, seed, resolvedMode, variant, contrastLevel, secondarySeed, tertiarySeed]);
 
   if (!parent) {
     throw new Error('BloomSeedScope must be used within a <BloomThemeProvider>');

package/src/theme/token-registry.ts

@@ -1,5 +1,5 @@
 import { APP_COLOR_NAMES, type AppColorName } from './color-presets';
-import { getPresetVars } from './preset-vars';
+import { getPresetVars, type ExplicitAccents } from './preset-vars';
 
 /**
  * The canonical set of Bloom theme token names — WITHOUT the leading `--`.
@@ -149,8 +149,9 @@ export function hslToSrgb(triple: string): string {
 export function getResolvedTokens(
   preset: AppColorName,
   mode: 'light' | 'dark',
+  accents?: ExplicitAccents,
 ): Record<string, string> {
-  const raw = getPresetVars(preset, mode);
+  const raw = getPresetVars(preset, mode, accents);
   const resolved: Record<string, string> = {};
   for (const [key, value] of Object.entries(raw)) {
     resolved[key] = RAW_HSL_TRIPLE.test(value) ? hslToSrgb(value) : value;