npm - @oxyhq/bloom - Versions diffs - 0.6.12 → 0.6.14 - Mend

@oxyhq/bloom 0.6.12 → 0.6.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/src/theme/BloomThemeProvider.tsx CHANGED Viewed

@@ -3,107 +3,37 @@
 // throw "Cannot manually set color scheme, as dark mode is type 'media'" the
 // first time Bloom toggles the dark class on <html>. See ./init-css-interop.
 import './init-css-interop';
-import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
-import { useColorScheme as useRNColorScheme, Platform } from 'react-native';
-import { APP_COLOR_PRESETS, type AppColorName } from './color-presets';
-import { getAdaptiveColors } from './adaptive-colors';
-import { applyDarkClass, applyColorPresetVars } from './apply-dark-class';
-import { setColorSchemeSafe } from './set-color-scheme-safe';
-import { FontLoader } from '../fonts/FontLoader';
-import type { Theme, ThemeColors, ThemeMode } from './types';
-function hslVarToCSS(value: string): string {
-  const parts = value.split('/').map((s) => s.trim());
-  if (parts.length === 2) {
-    const alpha = parseFloat(parts[1] ?? '100') / 100;
-    return `hsla(${(parts[0] ?? '').replace(/ /g, ', ')}, ${alpha})`;
-  }
-  return `hsl(${value.replace(/ /g, ', ')})`;
-}
-function extractHue(hslVar: string): number {
-  return parseInt(hslVar.split(' ')[0] ?? '0', 10);
-}
-function hsl(h: number, s: number, l: number): string {
-  return `hsl(${h}, ${s}%, ${l}%)`;
-}
-/** Build a Theme object from a color preset name and resolved light/dark mode. */
-export function buildTheme(appColor: AppColorName, resolved: 'light' | 'dark', isAdaptive: boolean = false): Theme {
-  const isDark = resolved === 'dark';
-  let themeColors: ThemeColors | undefined;
-  if (isAdaptive && Platform.OS !== 'web') {
-    const adaptive = getAdaptiveColors();
-    if (adaptive) {
-      themeColors = adaptive;
-    }
-  }
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useColorScheme as useRNColorScheme } from 'react-native';
+import { useControllableState } from '../hooks/useControllableState';
+import { FontLoader } from '../fonts/FontLoader';
-  if (!themeColors) {
-    const preset = APP_COLOR_PRESETS[appColor];
-    const vars = resolved === 'light' ? preset.light : preset.dark;
-    const primaryHue = extractHue(vars['--primary'] ?? '0 0% 0%');
-    const destructiveHue = extractHue(vars['--destructive'] ?? '0 0% 0%');
-    const surface = hslVarToCSS(vars['--surface'] ?? '0 0% 0%');
-    const background = hslVarToCSS(vars['--background'] ?? '0 0% 0%');
-    const mutedForeground = hslVarToCSS(vars['--muted-foreground'] ?? '0 0% 50%');
-    const primaryColor = hslVarToCSS(vars['--primary'] ?? '0 0% 50%');
-    const primaryForeground = hslVarToCSS(vars['--primary-foreground'] ?? '0 0% 100%');
-    themeColors = {
-      background,
-      backgroundSecondary: surface,
-      backgroundTertiary: hslVarToCSS(vars['--muted'] ?? '0 0% 0%'),
-      text: hslVarToCSS(vars['--foreground'] ?? '0 0% 100%'),
-      textSecondary: mutedForeground,
-      textTertiary: mutedForeground,
-      border: hslVarToCSS(vars['--border'] ?? '0 0% 20%'),
-      borderLight: hslVarToCSS(vars['--input'] ?? '0 0% 20%'),
-      primary: primaryColor,
-      primaryForeground,
-      primaryLight: surface,
-      primaryDark: background,
-      secondary: primaryColor,
-      tint: primaryColor,
-      icon: mutedForeground,
-      iconActive: primaryColor,
-      success: '#10B981',
-      error: '#EF4444',
-      warning: '#F59E0B',
-      info: '#3B82F6',
-      primarySubtle: isDark ? hsl(primaryHue, 50, 10) : hsl(primaryHue, 70, 93),
-      primarySubtleForeground: isDark ? hsl(primaryHue, 70, 65) : hsl(primaryHue, 90, 25),
-      negative: hsl(destructiveHue, 84, 45),
-      negativeForeground: '#FFFFFF',
-      negativeSubtle: isDark ? hsl(destructiveHue, 50, 10) : hsl(destructiveHue, 90, 95),
-      negativeSubtleForeground: isDark ? hsl(destructiveHue, 70, 65) : hsl(destructiveHue, 80, 40),
-      contrast50: isDark ? hsl(primaryHue, 15, 12) : hsl(primaryHue, 10, 93),
-      card: surface,
-      shadow: isDark ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.1)',
-      overlay: 'rgba(0, 0, 0, 0.5)',
-    };
-  }
+import { applyDarkClass, applyColorPresetVars } from './apply-dark-class';
+import { buildTheme } from './build-theme';
+import { type AppColorName } from './color-presets';
+import {
+  readPersistedTheme,
+  readPersistedThemeSync,
+  writePersistedTheme,
+  type BloomThemeStorage,
+  type SyncReadResult,
+} from './persistence';
+import { setColorSchemeSafe } from './set-color-scheme-safe';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
+import type { Theme, ThemeMode } from './types';
-  return {
-    mode: resolved,
-    colors: themeColors,
-    isDark,
-    isLight: !isDark,
-  };
-}
+const DEFAULT_PRESET: AppColorName = 'oxy';
+const DEFAULT_MODE: ThemeMode = 'system';
 export interface BloomThemeContextValue {
   theme: Theme;
@@ -116,97 +46,235 @@ export interface BloomThemeContextValue {
 export const BloomThemeContext = createContext<BloomThemeContextValue | null>(null);
 export interface BloomThemeProviderProps {
+  /** Controlled mode. Omit to use Bloom's internal state (with optional persistence). */
   mode?: ThemeMode;
+  /** Controlled color preset. Omit to use Bloom's internal state. */
   colorPreset?: AppColorName;
+  /** Initial mode when uncontrolled and nothing is persisted yet. */
+  defaultMode?: ThemeMode;
+  /** Initial color preset when uncontrolled and nothing is persisted yet. */
+  defaultColorPreset?: AppColorName;
   onModeChange?: (mode: ThemeMode) => void;
   onColorPresetChange?: (preset: AppColorName) => void;
   /**
-   * Load and inject the Bloom font system (BlomusModernus + Inter Variable
-   * + Geist Mono Variable). Default true. Set to false to opt out — e.g.
-   * apps that already ship their own font loader.
+   * Persist mode + preset under this storage key. Bloom becomes the single
+   * source of truth — apps don't need their own theme store. Has no effect
+   * without `storage`.
    */
-  fonts?: boolean;
+  persistKey?: string;
   /**
-   * Rendered while native fonts load. Ignored on web. Useful for matching
-   * an app-level splash screen so consumers don't see a system-font flash
-   * before the bundled fonts resolve.
+   * Storage adapter paired with `persistKey`. Use `webLocalStorage` on web,
+   * or pass an `AsyncStorage`-compatible adapter on native.
    */
+  storage?: BloomThemeStorage;
+  /**
+   * Block rendering until persisted state has been read. Default `true` when
+   * both `persistKey` and `storage` are provided, ensuring native apps don't
+   * flash the default palette. Web hydrates synchronously so this is a no-op
+   * there.
+   */
+  awaitHydration?: boolean;
+  /** Rendered while async hydration is pending. */
+  onHydrating?: React.ReactNode;
+  /** Load and inject Bloom's font system. Default `true`. */
+  fonts?: boolean;
+  /** Rendered while native fonts load. Ignored on web. */
   onFontsLoading?: React.ReactNode;
   children: React.ReactNode;
 }
+interface ThemeStateOptions {
+  controlledMode?: ThemeMode;
+  controlledPreset?: AppColorName;
+  defaultMode: ThemeMode;
+  defaultPreset: AppColorName;
+  persistKey?: string;
+  storage?: BloomThemeStorage;
+  onModeChange?: (mode: ThemeMode) => void;
+  onColorPresetChange?: (preset: AppColorName) => void;
+}
+interface ThemeStateResult {
+  mode: ThemeMode;
+  colorPreset: AppColorName;
+  setMode: (mode: ThemeMode) => void;
+  setColorPreset: (preset: AppColorName) => void;
+  hydrated: boolean;
+}
+function useThemeState({
+  controlledMode,
+  controlledPreset,
+  defaultMode,
+  defaultPreset,
+  persistKey,
+  storage,
+  onModeChange,
+  onColorPresetChange,
+}: ThemeStateOptions): ThemeStateResult {
+  // Synchronous read happens once on first render. Succeeds on web with
+  // localStorage-backed adapters; async adapters rehydrate via the effect
+  // below. Lazy-initialized via `useState` so it runs exactly once per mount.
+  const [syncResult] = useState<SyncReadResult>(() =>
+    readPersistedThemeSync(persistKey, storage),
+  );
+  const syncState = syncResult.kind === 'sync' ? syncResult.state : null;
+  const initialMode = syncState?.mode ?? defaultMode;
+  const initialPreset = syncState?.colorPreset ?? defaultPreset;
+  // Hydrated immediately when persistence is off or the adapter resolved
+  // synchronously (including a null hit — that's a valid "no value" answer).
+  const [hydrated, setHydrated] = useState<boolean>(syncResult.kind !== 'async');
+  const [mode, setModeInternal] = useControllableState<ThemeMode>({
+    value: controlledMode,
+    defaultValue: initialMode,
+  });
+  const [colorPreset, setPresetInternal] = useControllableState<AppColorName>({
+    value: controlledPreset,
+    defaultValue: initialPreset,
+  });
+  // Refs let setMode/setColorPreset stay referentially stable. Callbacks
+  // memoized only by setters and storage identity won't churn the context
+  // value on every theme change.
+  const modeRef = useRef(mode);
+  modeRef.current = mode;
+  const presetRef = useRef(colorPreset);
+  presetRef.current = colorPreset;
+  // Async hydration for adapters that can't be read synchronously
+  // (AsyncStorage, MMKV via JSI fallback, etc).
+  useEffect(() => {
+    if (hydrated) return;
+    if (!persistKey || !storage) {
+      setHydrated(true);
+      return;
+    }
+    let cancelled = false;
+    readPersistedTheme(persistKey, storage).then((state) => {
+      if (cancelled) return;
+      if (state?.mode && controlledMode === undefined) {
+        setModeInternal(state.mode);
+        onModeChange?.(state.mode);
+      }
+      if (state?.colorPreset && controlledPreset === undefined) {
+        setPresetInternal(state.colorPreset);
+        onColorPresetChange?.(state.colorPreset);
+      }
+      setHydrated(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+    // Hydration runs once per storage instance. controlledMode/Preset are
+    // captured by closure intentionally — switching controlled-ness mid-flight
+    // is unsupported and would invalidate the in-flight hydration anyway.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [persistKey, storage]);
+  const setMode = useCallback(
+    (next: ThemeMode) => {
+      setModeInternal(next);
+      onModeChange?.(next);
+      void writePersistedTheme(persistKey, storage, {
+        mode: next,
+        colorPreset: presetRef.current,
+      });
+    },
+    [setModeInternal, onModeChange, persistKey, storage],
+  );
+  const setColorPreset = useCallback(
+    (next: AppColorName) => {
+      setPresetInternal(next);
+      onColorPresetChange?.(next);
+      void writePersistedTheme(persistKey, storage, {
+        mode: modeRef.current,
+        colorPreset: next,
+      });
+    },
+    [setPresetInternal, onColorPresetChange, persistKey, storage],
+  );
+  return { mode, colorPreset, setMode, setColorPreset, hydrated };
+}
 export function BloomThemeProvider({
   mode: controlledMode,
   colorPreset: controlledPreset,
+  defaultMode = DEFAULT_MODE,
+  defaultColorPreset = DEFAULT_PRESET,
   onModeChange,
   onColorPresetChange,
+  persistKey,
+  storage,
+  awaitHydration,
+  onHydrating,
   fonts = true,
   onFontsLoading,
   children,
 }: BloomThemeProviderProps) {
   const rnScheme = useRNColorScheme();
-  const [internalPreset, setInternalPreset] = useState<AppColorName>(controlledPreset ?? 'oxy');
-  if (controlledPreset !== undefined && controlledPreset !== internalPreset) {
-    setInternalPreset(controlledPreset);
-  }
-  const appColor = internalPreset;
-  const mode = controlledMode ?? 'system';
+  const { mode, colorPreset, setMode, setColorPreset, hydrated } = useThemeState({
+    controlledMode,
+    controlledPreset,
+    defaultMode,
+    defaultPreset: defaultColorPreset,
+    persistKey,
+    storage,
+    onModeChange,
+    onColorPresetChange,
+  });
   const isAdaptive = mode === 'adaptive';
-  const effectiveMode = isAdaptive ? 'system' : mode;
+  const effectiveMode: Exclude<ThemeMode, 'adaptive'> = isAdaptive ? 'system' : mode;
   const resolved: 'light' | 'dark' =
-    effectiveMode === 'system'
-      ? (rnScheme === 'dark' ? 'dark' : 'light')
-      : effectiveMode;
-  // Apply native color scheme and CSS vars synchronously on first render
-  // and whenever the resolved mode or preset changes. Using a ref to track
-  // the last-applied values avoids calling side effects on every render
-  // while still applying them before the first paint.
-  const lastApplied = useRef<string>('');
-  const applyKey = `${resolved}:${appColor}`;
-  if (lastApplied.current !== applyKey) {
-    lastApplied.current = applyKey;
+    effectiveMode === 'system' ? (rnScheme === 'dark' ? 'dark' : 'light') : effectiveMode;
+  // Apply native color scheme, dark class, and CSS vars whenever the resolved
+  // mode or preset changes. `useIsomorphicLayoutEffect` runs before paint on
+  // both native and web, eliminating the previous render-time side effect.
+  useIsomorphicLayoutEffect(() => {
     setColorSchemeSafe(effectiveMode);
     applyDarkClass(resolved);
-    applyColorPresetVars(appColor, resolved);
-  }
-  const setMode = useCallback(
-    (newMode: ThemeMode) => {
-      setColorSchemeSafe(newMode);
-      onModeChange?.(newMode);
-    },
-    [onModeChange],
-  );
+    applyColorPresetVars(colorPreset, resolved);
+  }, [effectiveMode, resolved, colorPreset]);
-  const setColorPreset = useCallback(
-    (preset: AppColorName) => {
-      setInternalPreset(preset);
-      onColorPresetChange?.(preset);
-    },
-    [onColorPresetChange],
+  const contextValue = useMemo<BloomThemeContextValue>(
+    () => ({
+      theme: buildTheme(colorPreset, resolved, isAdaptive),
+      mode,
+      colorPreset,
+      setMode,
+      setColorPreset,
+    }),
+    [colorPreset, resolved, isAdaptive, mode, setMode, setColorPreset],
   );
-  const contextValue = useMemo<BloomThemeContextValue>(() => {
-    const theme = buildTheme(appColor, resolved, isAdaptive);
-    return { theme, mode, colorPreset: appColor, setMode, setColorPreset };
-  }, [resolved, appColor, isAdaptive, mode, setMode, setColorPreset]);
+  const shouldAwait = awaitHydration ?? Boolean(persistKey && storage);
+  const isGated = shouldAwait && !hydrated;
   return (
     <BloomThemeContext.Provider value={contextValue}>
       <FontLoader enabled={fonts} fallback={onFontsLoading}>
-        {children}
+        {isGated ? onHydrating ?? null : children}
       </FontLoader>
     </BloomThemeContext.Provider>
   );
 }
 /**
- * Scoped color override for a subtree.
- * Inherits mode/dark from the parent BloomThemeProvider but overrides the color preset.
+ * Scoped color override for a subtree. Inherits the resolved mode from the
+ * parent `BloomThemeProvider` but renders descendants with a different preset.
  */
 export interface BloomColorScopeProps {
   colorPreset: AppColorName;
@@ -220,17 +288,11 @@ export function BloomColorScope({ colorPreset, children }: BloomColorScopeProps)
   }
   const contextValue = useMemo<BloomThemeContextValue>(() => {
-    const theme = buildTheme(colorPreset, parent.theme.mode as 'light' | 'dark');
-    return {
-      ...parent,
-      theme,
-      colorPreset,
-    };
+    const theme = buildTheme(colorPreset, parent.theme.mode);
+    return { ...parent, theme, colorPreset };
   }, [colorPreset, parent]);
   return (
-    <BloomThemeContext.Provider value={contextValue}>
-      {children}
-    </BloomThemeContext.Provider>
+    <BloomThemeContext.Provider value={contextValue}>{children}</BloomThemeContext.Provider>
   );
 }

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

@@ -10,6 +10,11 @@ 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.
+ *
+ * Values are written as raw HSL triples (e.g. `185 100% 20%`), matching the
+ * shadcn/Tailwind convention where stylesheets wrap them themselves with
+ * `hsl(var(--primary))`. Writing pre-resolved `hsl(...)` values here would
+ * produce invalid `hsl(hsl(...))` in consuming stylesheets and break theming.
  */
 export function applyColorPresetVars(preset: AppColorName, resolved: 'light' | 'dark') {
   if (Platform.OS !== 'web' || typeof document === 'undefined') return;
@@ -21,6 +26,6 @@ export function applyColorPresetVars(preset: AppColorName, resolved: 'light' | '
   const root = document.documentElement.style;
   for (const [key, value] of Object.entries(vars)) {
-    root.setProperty(key, `hsl(${value})`);
+    root.setProperty(key, value);
   }
 }

package/src/theme/build-theme.ts ADDED Viewed

@@ -0,0 +1,128 @@
+import { Platform } from 'react-native';
+import { APP_COLOR_PRESETS, type AppColorName, type PresetTokens } from './color-presets';
+import { getAdaptiveColors } from './adaptive-colors';
+import type { Theme, ThemeColors } from './types';
+/**
+ * Status colors used across the design system. Independent of the accent
+ * preset so semantic intent stays stable across themes.
+ */
+export const STATUS_COLORS = {
+  success: '#10B981',
+  error: '#EF4444',
+  warning: '#F59E0B',
+  info: '#3B82F6',
+} as const;
+/**
+ * Convert a shadcn-style HSL CSS variable (`'H S% L%'` or `'H S% L% / A'`)
+ * into a fully-resolved `hsl()` / `hsla()` color string consumable by both
+ * web `style` and React Native.
+ */
+function hslVarToColor(hslVar: string): string {
+  const parts = hslVar.split('/').map((p) => p.trim());
+  const triple = parts[0] ?? '0 0% 0%';
+  const components = triple.replace(/\s+/g, ', ');
+  if (parts.length === 2) {
+    const alpha = parseFloat(parts[1] ?? '100') / 100;
+    return `hsla(${components}, ${alpha})`;
+  }
+  return `hsl(${components})`;
+}
+function extractHue(hslVar: string): number {
+  const first = hslVar.split(/\s+/)[0] ?? '0';
+  const hue = parseInt(first, 10);
+  return Number.isFinite(hue) ? hue : 0;
+}
+function hsl(h: number, s: number, l: number): string {
+  return `hsl(${h}, ${s}%, ${l}%)`;
+}
+function readToken(tokens: PresetTokens, key: string, fallback = '0 0% 0%'): string {
+  return hslVarToColor(tokens[key] ?? fallback);
+}
+function buildColorsFromPreset(
+  preset: AppColorName,
+  resolved: 'light' | 'dark',
+): ThemeColors {
+  const config = APP_COLOR_PRESETS[preset];
+  const tokens = resolved === 'dark' ? config.dark : config.light;
+  const isDark = resolved === 'dark';
+  const primaryHue = extractHue(tokens['--primary'] ?? '0 0% 50%');
+  const destructiveHue = extractHue(tokens['--destructive'] ?? '0 0% 0%');
+  const background = readToken(tokens, '--background');
+  const surface = readToken(tokens, '--surface');
+  const mutedForeground = readToken(tokens, '--muted-foreground', '0 0% 50%');
+  const primaryColor = readToken(tokens, '--primary', '0 0% 50%');
+  const primaryForeground = readToken(tokens, '--primary-foreground', '0 0% 100%');
+  return {
+    background,
+    backgroundSecondary: surface,
+    backgroundTertiary: readToken(tokens, '--muted'),
+    text: readToken(tokens, '--foreground', '0 0% 100%'),
+    textSecondary: mutedForeground,
+    textTertiary: mutedForeground,
+    border: readToken(tokens, '--border', '0 0% 20%'),
+    borderLight: readToken(tokens, '--input', '0 0% 20%'),
+    primary: primaryColor,
+    primaryForeground,
+    // Legacy aliases retained for backwards compatibility with downstream
+    // consumers. `primaryLight` should be a brand tint, not the surface, but
+    // changing this is a breaking change handled in a separate major.
+    primaryLight: surface,
+    primaryDark: background,
+    // `secondary` historically mirrored `primary`. Retained for compatibility.
+    secondary: primaryColor,
+    tint: primaryColor,
+    icon: mutedForeground,
+    iconActive: primaryColor,
+    ...STATUS_COLORS,
+    primarySubtle: isDark ? hsl(primaryHue, 50, 10) : hsl(primaryHue, 70, 93),
+    primarySubtleForeground: isDark ? hsl(primaryHue, 70, 65) : hsl(primaryHue, 90, 25),
+    negative: hsl(destructiveHue, 84, 45),
+    negativeForeground: '#FFFFFF',
+    negativeSubtle: isDark ? hsl(destructiveHue, 50, 10) : hsl(destructiveHue, 90, 95),
+    negativeSubtleForeground: isDark ? hsl(destructiveHue, 70, 65) : hsl(destructiveHue, 80, 40),
+    contrast50: isDark ? hsl(primaryHue, 15, 12) : hsl(primaryHue, 10, 93),
+    card: surface,
+    shadow: isDark ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.1)',
+    overlay: 'rgba(0, 0, 0, 0.5)',
+  };
+}
+/**
+ * Build a `Theme` from a color preset and a resolved light/dark mode.
+ *
+ * When `isAdaptive` is true and the platform exposes adaptive (Material You /
+ * iOS dynamic) colors, those override the preset-derived palette.
+ */
+export function buildTheme(
+  preset: AppColorName,
+  resolved: 'light' | 'dark',
+  isAdaptive: boolean = false,
+): Theme {
+  const adaptive = isAdaptive && Platform.OS !== 'web' ? getAdaptiveColors() : undefined;
+  const colors = adaptive ?? buildColorsFromPreset(preset, resolved);
+  return {
+    mode: resolved,
+    colors,
+    isDark: resolved === 'dark',
+    isLight: resolved === 'light',
+  };
+}

package/src/theme/color-presets.ts CHANGED Viewed

@@ -1,13 +1,29 @@
 export type AppColorName = 'teal' | 'blue' | 'green' | 'amber' | 'yellow' | 'red' | 'purple' | 'pink' | 'sky' | 'orange' | 'mint' | 'oxy' | 'faircoin';
+/**
+ * Palette tokens for a single mode (light or dark) of a color preset.
+ *
+ * Keys carry a leading `--` for historical reasons (shadcn-style CSS variable
+ * 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 `--` prefix is an implementation detail we will drop in a future major.
+ */
+export type PresetTokens = Record<string, string>;
 export interface AppColorPreset {
   name: AppColorName;
   hex: string;
-  light: Record<string, string>;
-  dark: Record<string, string>;
+  light: PresetTokens;
+  dark: PresetTokens;
 }
-export const APP_COLOR_NAMES: AppColorName[] = ['teal', 'blue', 'green', 'amber', 'yellow', 'red', 'purple', 'pink', 'sky', 'orange', 'mint', 'oxy', 'faircoin'];
+export const APP_COLOR_NAMES: readonly AppColorName[] = ['teal', 'blue', 'green', 'amber', 'yellow', 'red', 'purple', 'pink', 'sky', 'orange', 'mint', 'oxy', 'faircoin'];
 export const HEX_TO_APP_COLOR: Record<string, AppColorName> = {
   '#005c67': 'teal',

package/src/theme/index.ts CHANGED Viewed

@@ -1,9 +1,21 @@
-export { BloomThemeProvider, BloomColorScope, buildTheme } from './BloomThemeProvider';
-export type { BloomThemeProviderProps, BloomThemeContextValue, BloomColorScopeProps } from './BloomThemeProvider';
+export { BloomThemeProvider, BloomColorScope } from './BloomThemeProvider';
+export type {
+  BloomThemeProviderProps,
+  BloomThemeContextValue,
+  BloomColorScopeProps,
+} from './BloomThemeProvider';
+export { buildTheme, STATUS_COLORS } from './build-theme';
 export { useTheme, useThemeColor, useBloomTheme } from './use-theme';
 export type { Theme, ThemeColors, ThemeMode } from './types';
-export type { AppColorName, AppColorPreset } from './color-presets';
-export { APP_COLOR_NAMES, APP_COLOR_PRESETS, HEX_TO_APP_COLOR, hexToAppColorName } from './color-presets';
+export type { AppColorName, AppColorPreset, PresetTokens } from './color-presets';
+export {
+  APP_COLOR_NAMES,
+  APP_COLOR_PRESETS,
+  HEX_TO_APP_COLOR,
+  hexToAppColorName,
+} from './color-presets';
 export { applyDarkClass } from './apply-dark-class';
 export { setColorSchemeSafe } from './set-color-scheme-safe';
 export { initCssInteropDarkMode } from './init-css-interop';
+export type { BloomThemeStorage, PersistedThemeState } from './persistence';
+export { webLocalStorage } from './persistence';