@thewhileloop/whileui 1.2.2 → 2.0.0

package/dist/lib/theme-colors.js

@@ -1,5 +1,9 @@
 import { useCSSVariable } from 'uniwind';
+import { useUniwind } from 'uniwind';
 import { formatHex, formatRgb, parse } from 'culori';
+import { WHILEUI_DARK_THEME_COLORS, WHILEUI_LIGHT_THEME_COLORS, THEME_TOKEN_SPECS, THEME_TOKEN_VARIABLES, } from './theme-contract';
+import { deriveThemeColors, THEME_BASE_TOKEN_KEYS } from './theme-derive';
+import { Platform } from 'react-native';
 function parseThemeColor(value) {
     if (value === undefined || value === null)
         return undefined;
@@ -31,233 +35,31 @@ function parseThemeColor(value) {
     }
     return undefined;
 }
-function resolveThemeToken(cssValue, appValue, fallback) {
-    return parseThemeColor(cssValue) ?? parseThemeColor(appValue) ?? fallback;
+function resolveThemeToken(cssValue, appValue) {
+    if (Platform.OS === 'android') {
+        return parseThemeColor(appValue) ?? parseThemeColor(cssValue);
+    }
+    return parseThemeColor(cssValue) ?? parseThemeColor(appValue);
 }
-const THEME_COLOR_SPECS = [
-    {
-        key: 'primary',
-        cssVar: '--color-primary',
-        appVar: '--app-color-primary',
-        fallback: '#000000',
-    },
-    {
-        key: 'primaryForeground',
-        cssVar: '--color-primary-foreground',
-        appVar: '--app-color-primary-foreground',
-        fallback: '#ffffff',
-    },
-    {
-        key: 'foreground',
-        cssVar: '--color-foreground',
-        appVar: '--app-color-foreground',
-        fallback: '#000000',
-    },
-    {
-        key: 'background',
-        cssVar: '--color-background',
-        appVar: '--app-color-background',
-        fallback: '#ffffff',
-    },
-    {
-        key: 'card',
-        cssVar: '--color-card',
-        appVar: '--app-color-card',
-        fallback: '#ffffff',
-    },
-    {
-        key: 'cardForeground',
-        cssVar: '--color-card-foreground',
-        appVar: '--app-color-card-foreground',
-        fallback: '#000000',
-    },
-    {
-        key: 'popover',
-        cssVar: '--color-popover',
-        appVar: '--app-color-popover',
-        fallback: '#ffffff',
-    },
-    {
-        key: 'popoverForeground',
-        cssVar: '--color-popover-foreground',
-        appVar: '--app-color-popover-foreground',
-        fallback: '#000000',
-    },
-    {
-        key: 'secondary',
-        cssVar: '--color-secondary',
-        appVar: '--app-color-secondary',
-        fallback: '#f5f5f5',
-    },
-    {
-        key: 'secondaryForeground',
-        cssVar: '--color-secondary-foreground',
-        appVar: '--app-color-secondary-foreground',
-        fallback: '#171717',
-    },
-    {
-        key: 'muted',
-        cssVar: '--color-muted',
-        appVar: '--app-color-muted',
-        fallback: '#f5f5f5',
-    },
-    {
-        key: 'mutedForeground',
-        cssVar: '--color-muted-foreground',
-        appVar: '--app-color-muted-foreground',
-        fallback: '#737373',
-    },
-    {
-        key: 'border',
-        cssVar: '--color-border',
-        appVar: '--app-color-border',
-        fallback: '#e5e5e5',
-    },
-    {
-        key: 'input',
-        cssVar: '--color-input',
-        appVar: '--app-color-input',
-        fallback: '#e5e5e5',
-    },
-    {
-        key: 'ring',
-        cssVar: '--color-ring',
-        appVar: '--app-color-ring',
-        fallback: '#94a3b8',
-    },
-    {
-        key: 'accent',
-        cssVar: '--color-accent',
-        appVar: '--app-color-accent',
-        fallback: '#22c55e',
-    },
-    {
-        key: 'accentForeground',
-        cssVar: '--color-accent-foreground',
-        appVar: '--app-color-accent-foreground',
-        fallback: '#0a0a0a',
-    },
-    {
-        key: 'destructive',
-        cssVar: '--color-destructive',
-        appVar: '--app-color-destructive',
-        fallback: '#dc2626',
-    },
-    {
-        key: 'destructiveForeground',
-        cssVar: '--color-destructive-foreground',
-        appVar: '--app-color-destructive-foreground',
-        fallback: '#ffffff',
-    },
-    {
-        key: 'success',
-        cssVar: '--color-success',
-        appVar: '--app-color-success',
-        fallback: '#16a34a',
-    },
-    {
-        key: 'successForeground',
-        cssVar: '--color-success-foreground',
-        appVar: '--app-color-success-foreground',
-        fallback: '#ffffff',
-    },
-    {
-        key: 'warning',
-        cssVar: '--color-warning',
-        appVar: '--app-color-warning',
-        fallback: '#f59e0b',
-    },
-    {
-        key: 'warningForeground',
-        cssVar: '--color-warning-foreground',
-        appVar: '--app-color-warning-foreground',
-        fallback: '#111827',
-    },
-    {
-        key: 'info',
-        cssVar: '--color-info',
-        appVar: '--app-color-info',
-        fallback: '#3b82f6',
-    },
-    {
-        key: 'infoForeground',
-        cssVar: '--color-info-foreground',
-        appVar: '--app-color-info-foreground',
-        fallback: '#ffffff',
-    },
-    {
-        key: 'overlay',
-        cssVar: '--color-overlay',
-        appVar: '--app-color-overlay',
-        fallback: 'rgba(0, 0, 0, 0.4)',
-    },
-    {
-        key: 'overlayStrong',
-        cssVar: '--color-overlay-strong',
-        appVar: '--app-color-overlay-strong',
-        fallback: 'rgba(0, 0, 0, 0.55)',
-    },
-    {
-        key: 'surfaceElevated',
-        cssVar: '--color-surface-elevated',
-        appVar: '--app-color-surface-elevated',
-        fallback: '#ffffff',
-    },
-    {
-        key: 'surfaceTranslucent',
-        cssVar: '--color-surface-translucent',
-        appVar: '--app-color-surface-translucent',
-        fallback: 'rgba(255, 255, 255, 0.5)',
-    },
-    {
-        key: 'surfaceTranslucentBorder',
-        cssVar: '--color-surface-translucent-border',
-        appVar: '--app-color-surface-translucent-border',
-        fallback: 'rgba(255, 255, 255, 0.18)',
-    },
-    {
-        key: 'surfaceBorder',
-        cssVar: '--color-surface-border',
-        appVar: '--app-color-surface-border',
-        fallback: 'rgba(255, 255, 255, 0.3)',
-    },
-    {
-        key: 'surfaceHighlight',
-        cssVar: '--color-surface-highlight',
-        appVar: '--app-color-surface-highlight',
-        fallback: 'rgba(255, 255, 255, 0.3)',
-    },
-    {
-        key: 'stateHover',
-        cssVar: '--color-state-hover',
-        appVar: '--app-color-state-hover',
-        fallback: 'rgba(0, 0, 0, 0.05)',
-    },
-    {
-        key: 'statePressed',
-        cssVar: '--color-state-pressed',
-        appVar: '--app-color-state-pressed',
-        fallback: 'rgba(0, 0, 0, 0.12)',
-    },
-    {
-        key: 'stateDisabled',
-        cssVar: '--color-state-disabled',
-        appVar: '--app-color-state-disabled',
-        fallback: 'rgba(0, 0, 0, 0.4)',
-    },
-];
-const THEME_COLOR_VARIABLES = THEME_COLOR_SPECS.flatMap(({ cssVar, appVar }) => [cssVar, appVar]);
 export function useThemeColors() {
-    const values = useCSSVariable(THEME_COLOR_VARIABLES);
-    const resolved = {};
+    const { theme } = useUniwind();
+    const values = useCSSVariable(THEME_TOKEN_VARIABLES);
+    const scheme = theme === 'dark' ? 'dark' : 'light';
+    const fallbackPalette = scheme === 'dark' ? WHILEUI_DARK_THEME_COLORS : WHILEUI_LIGHT_THEME_COLORS;
+    const defined = {};
     let index = 0;
-    for (const token of THEME_COLOR_SPECS) {
-        const cssValue = values[index++];
-        const appValue = values[index++];
-        resolved[token.key] = resolveThemeToken(cssValue, appValue, token.fallback);
+    for (const token of THEME_TOKEN_SPECS) {
+        const value = resolveThemeToken(values[index++], values[index++]);
+        if (value)
+            defined[token.key] = value;
     }
-    resolved.placeholder = resolved.mutedForeground ?? '#737373';
-    return resolved;
+    // Tokens the app left out are derived from its own base palette, not taken
+    // from the default one — a missing soft tint must not turn the brand purple.
+    const base = {};
+    for (const key of THEME_BASE_TOKEN_KEYS)
+        base[key] = defined[key] ?? fallbackPalette[key];
+    const derived = deriveThemeColors(base, scheme);
+    return { ...derived, ...defined, placeholder: derived.placeholder };
 }
 /** Icon colors derived from theme. For @expo/vector-icons which need hex values. */
 export function useIconColors() {
@@ -276,6 +78,3 @@ export function useIconColors() {
 }
 /** Alias for useThemeColors. Returns RN-safe color strings (hex/rgb/rgba) for RefreshControl, LinearGradient, charts. */
 export const useThemeTokens = useThemeColors;
-/** @deprecated Use useThemeTokens or useThemeColors. */
-export const useResolvedThemeColors = useThemeColors;
-//# sourceMappingURL=theme-colors.js.map

package/dist/lib/theme-contract.d.ts

@@ -0,0 +1,78 @@
+export interface ThemeColors {
+    primary: string;
+    primaryForeground: string;
+    foreground: string;
+    background: string;
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    muted: string;
+    mutedForeground: string;
+    border: string;
+    input: string;
+    ring: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    success: string;
+    successForeground: string;
+    warning: string;
+    warningForeground: string;
+    info: string;
+    infoForeground: string;
+    overlay: string;
+    overlayStrong: string;
+    surfaceElevated: string;
+    surfaceTranslucent: string;
+    surfaceTranslucentBorder: string;
+    surfaceBorder: string;
+    surfaceHighlight: string;
+    stateHover: string;
+    statePressed: string;
+    stateDisabled: string;
+    shadow: string;
+    primaryActive: string;
+    secondaryActive: string;
+    destructiveActive: string;
+    primarySoft: string;
+    primarySoftSubtle: string;
+    secondarySoft: string;
+    mutedSoft: string;
+    destructiveSoft: string;
+    destructiveSoftBorder: string;
+    successSoft: string;
+    successSoftBorder: string;
+    warningSoft: string;
+    warningSoftBorder: string;
+    infoSoft: string;
+    infoSoftBorder: string;
+    /** For placeholder text (aliases mutedForeground; override via placeholderTextColor when needed) */
+    placeholder: string;
+}
+export type ThemeTokenKey = keyof Omit<ThemeColors, 'placeholder'>;
+export type ThemeTokenGroup = 'core' | 'status' | 'surface' | 'feedback';
+export interface ThemeTokenSpec {
+    key: ThemeTokenKey;
+    cssVar: string;
+    appVar: string;
+    fallback: string;
+    group: ThemeTokenGroup;
+}
+export declare const WHILEUI_LIGHT_THEME_COLORS: ThemeColors;
+export declare const WHILEUI_DARK_THEME_COLORS: ThemeColors;
+/**
+ * App-owned theme contract for WhileUI.
+ * The package owns token names and fallbacks; apps own the actual values.
+ */
+export declare const THEME_TOKEN_SPECS: readonly ThemeTokenSpec[];
+export declare const THEME_TOKEN_VARIABLES: string[];
+export declare const THEME_TOKEN_GROUPS: {
+    readonly core: ThemeTokenSpec[];
+    readonly status: ThemeTokenSpec[];
+    readonly surface: ThemeTokenSpec[];
+    readonly feedback: ThemeTokenSpec[];
+};