@oxyhq/bloom 0.6.14 → 0.6.16

package/src/theme/color-presets.ts

@@ -25,6 +25,9 @@ export interface AppColorPreset {
 
 export const APP_COLOR_NAMES: readonly AppColorName[] = ['teal', 'blue', 'green', 'amber', 'yellow', 'red', 'purple', 'pink', 'sky', 'orange', 'mint', 'oxy', 'faircoin'];
 
+/** Premium-exclusive presets, hidden from the standard color picker. */
+export const PREMIUM_COLOR_NAMES: readonly AppColorName[] = ['oxy', 'faircoin'];
+
 export const HEX_TO_APP_COLOR: Record<string, AppColorName> = {
   '#005c67': 'teal',
   '#1d9bf0': 'blue',

package/src/theme/index.ts

@@ -10,10 +10,16 @@ export type { Theme, ThemeColors, ThemeMode } from './types';
 export type { AppColorName, AppColorPreset, PresetTokens } from './color-presets';
 export {
   APP_COLOR_NAMES,
+  PREMIUM_COLOR_NAMES,
   APP_COLOR_PRESETS,
   HEX_TO_APP_COLOR,
   hexToAppColorName,
 } from './color-presets';
+export {
+  getPresetVars,
+  applyPresetVarsToDocument,
+} from './preset-vars';
+export type { PresetVarsOptions } from './preset-vars';
 export { applyDarkClass } from './apply-dark-class';
 export { setColorSchemeSafe } from './set-color-scheme-safe';
 export { initCssInteropDarkMode } from './init-css-interop';

package/src/theme/persistence.ts

@@ -20,6 +20,7 @@ const VALID_MODES = new Set<string>(['light', 'dark', 'system', 'adaptive']);
 export interface BloomThemeStorage {
   getItem(key: string): string | null | Promise<string | null>;
   setItem(key: string, value: string): void | Promise<void>;
+  removeItem?(key: string): void | Promise<void>;
 }
 
 export interface PersistedThemeState {
@@ -119,6 +120,23 @@ export async function writePersistedTheme(
   }
 }
 
+export async function removePersistedTheme(
+  persistKey: string | undefined,
+  storage: BloomThemeStorage | undefined,
+): Promise<void> {
+  if (!persistKey || !storage) return;
+
+  try {
+    if (typeof storage.removeItem === 'function') {
+      await storage.removeItem(persistKey);
+      return;
+    }
+    await storage.setItem(persistKey, '');
+  } catch {
+    // Best-effort cleanup.
+  }
+}
+
 /**
  * `localStorage`-backed storage adapter. Only defined on web; on native the
  * export is `undefined` so consumers pass an `AsyncStorage` adapter explicitly.
@@ -145,5 +163,12 @@ export const webLocalStorage: BloomThemeStorage | undefined = (() => {
         // Swallow quota / privacy-mode errors.
       }
     },
+    removeItem: (key) => {
+      try {
+        ls.removeItem(key);
+      } catch {
+        // Swallow privacy-mode errors.
+      }
+    },
   };
 })();

package/src/theme/preset-vars.ts

@@ -0,0 +1,115 @@
+import { Platform } from 'react-native';
+import { APP_COLOR_PRESETS, type AppColorName, type PresetTokens } from './color-presets';
+
+function extractHue(hslVar: string): number {
+  return parseInt(hslVar.split(' ')[0] ?? '0', 10);
+}
+
+function extractSat(hslVar: string): number {
+  return parseInt(hslVar.split(' ')[1] ?? '0', 10);
+}
+
+const RESOLVED_COLOR_MAP: Record<string, string> = {
+  '--background': '--color-background',
+  '--foreground': '--color-foreground',
+  '--primary': '--color-primary',
+  '--primary-foreground': '--color-primary-foreground',
+  '--secondary': '--color-secondary',
+  '--secondary-foreground': '--color-secondary-foreground',
+  '--muted': '--color-muted',
+  '--muted-foreground': '--color-muted-foreground',
+  '--accent': '--color-accent',
+  '--accent-foreground': '--color-accent-foreground',
+  '--destructive': '--color-destructive',
+  '--border': '--color-border',
+  '--input': '--color-input',
+  '--ring': '--color-ring',
+  '--popover': '--color-popover',
+  '--popover-foreground': '--color-popover-foreground',
+  '--surface': '--color-surface',
+  '--surface-foreground': '--color-surface-foreground',
+  '--card': '--color-card',
+  '--card-foreground': '--color-card-foreground',
+};
+
+export interface PresetVarsOptions {
+  /**
+   * Also emit Tailwind v4 resolved `--color-*` vars (wrapped in `hsl(...)`)
+   * 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`.
+   */
+  includeResolvedColorVars?: boolean;
+}
+
+/**
+ * Bloom's base preset tokens extended with the surface/card/chart/sidebar
+ * tokens that apps layer on top of the core shadcn palette. Synthesized from
+ * the preset's primary hue so every preset stays in sync automatically.
+ *
+ * This is the single source of truth for extended theming vars — consumer apps
+ * must not redefine these per-app.
+ */
+export function getPresetVars(
+  colorName: AppColorName,
+  mode: 'light' | 'dark',
+  options: PresetVarsOptions = {},
+): PresetTokens {
+  const preset = APP_COLOR_PRESETS[colorName];
+  const base = mode === 'light' ? preset.light : preset.dark;
+  const get = (key: string): string => base[key] ?? '0 0% 0%';
+  const primary = get('--primary');
+  const foreground = get('--foreground');
+  const hue = extractHue(primary);
+  const sat = Math.min(extractSat(primary), 80);
+  const isDark = mode === 'dark';
+
+  const extended: PresetTokens = {
+    ...base,
+    '--card': isDark ? `${hue} 30% 10%` : '0 0% 100%',
+    '--card-foreground': foreground,
+    '--chart-1': `${hue} ${sat}% 85%`,
+    '--chart-2': `${hue} ${sat}% 75%`,
+    '--chart-3': `${hue} ${sat}% 65%`,
+    '--chart-4': `${hue} ${sat}% ${isDark ? 55 : 75}%`,
+    '--chart-5': `${hue} ${sat}% ${isDark ? 45 : 65}%`,
+    '--content-area': isDark ? `${hue} 30% 8%` : get('--surface'),
+    '--sidebar-foreground': foreground,
+    '--sidebar-primary': primary,
+    '--sidebar-primary-foreground': get('--primary-foreground'),
+    '--sidebar-accent': isDark ? get('--sidebar') : get('--accent'),
+    '--sidebar-accent-foreground': isDark ? foreground : get('--accent-foreground'),
+    '--sidebar-border': get('--border'),
+    '--sidebar-ring': get('--ring'),
+  };
+
+  if (!options.includeResolvedColorVars) return extended;
+
+  const resolved: PresetTokens = { ...extended };
+  for (const [rawKey, colorKey] of Object.entries(RESOLVED_COLOR_MAP)) {
+    const value = extended[rawKey];
+    if (value) resolved[colorKey] = `hsl(${value})`;
+  }
+  return resolved;
+}
+
+/**
+ * Apply a preset's extended vars to `document.documentElement`. Web-only no-op
+ * 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.
+ */
+export function applyPresetVarsToDocument(
+  colorName: AppColorName,
+  mode: 'light' | 'dark',
+  options?: PresetVarsOptions,
+): void {
+  if (Platform.OS !== 'web' || typeof document === 'undefined') return;
+
+  const vars = getPresetVars(colorName, mode, options);
+  const root = document.documentElement.style;
+  for (const [key, value] of Object.entries(vars)) {
+    root.setProperty(key, value);
+  }
+}