@thewhileloop/whileui 1.2.2 → 2.0.0

package/dist/lib/theme-contract.js

@@ -0,0 +1,481 @@
+export const WHILEUI_LIGHT_THEME_COLORS = {
+    primary: '#4457ff',
+    primaryForeground: '#fffdf8',
+    foreground: '#271f48',
+    background: '#fff8ef',
+    card: 'rgba(255, 255, 255, 0.82)',
+    cardForeground: '#271f48',
+    popover: 'rgba(255, 252, 248, 0.92)',
+    popoverForeground: '#271f48',
+    secondary: 'rgba(255, 123, 92, 0.10)',
+    secondaryForeground: '#41206e',
+    muted: 'rgba(74, 55, 122, 0.07)',
+    mutedForeground: '#645783',
+    border: 'rgba(68, 87, 255, 0.16)',
+    input: 'rgba(255, 255, 255, 0.84)',
+    ring: 'rgba(61, 139, 255, 0.34)',
+    accent: '#a7f432',
+    accentForeground: '#163218',
+    destructive: '#f66151',
+    destructiveForeground: '#fff8f6',
+    success: '#13a86d',
+    successForeground: '#f5fff9',
+    warning: '#ffb224',
+    warningForeground: '#3d2200',
+    info: '#3d8bff',
+    infoForeground: '#f8fbff',
+    overlay: 'rgba(39, 31, 72, 0.14)',
+    overlayStrong: 'rgba(39, 31, 72, 0.22)',
+    surfaceElevated: 'rgba(255, 255, 255, 0.88)',
+    surfaceTranslucent: 'rgba(255, 255, 255, 0.62)',
+    surfaceTranslucentBorder: 'rgba(255, 255, 255, 0.42)',
+    surfaceBorder: 'rgba(68, 87, 255, 0.16)',
+    surfaceHighlight: 'rgba(255, 255, 255, 0.74)',
+    stateHover: 'rgba(68, 87, 255, 0.06)',
+    statePressed: 'rgba(68, 87, 255, 0.12)',
+    stateDisabled: 'rgba(100, 87, 131, 0.28)',
+    shadow: '#271f48',
+    primaryActive: '#3346e6',
+    secondaryActive: 'rgba(255, 123, 92, 0.18)',
+    destructiveActive: '#e0503f',
+    primarySoft: 'rgba(68, 87, 255, 0.13)',
+    primarySoftSubtle: 'rgba(68, 87, 255, 0.07)',
+    secondarySoft: 'rgba(255, 123, 92, 0.16)',
+    mutedSoft: 'rgba(74, 55, 122, 0.05)',
+    destructiveSoft: 'rgba(246, 97, 81, 0.12)',
+    destructiveSoftBorder: 'rgba(246, 97, 81, 0.30)',
+    successSoft: 'rgba(19, 168, 109, 0.12)',
+    successSoftBorder: 'rgba(19, 168, 109, 0.30)',
+    warningSoft: 'rgba(255, 178, 36, 0.14)',
+    warningSoftBorder: 'rgba(255, 178, 36, 0.34)',
+    infoSoft: 'rgba(61, 139, 255, 0.12)',
+    infoSoftBorder: 'rgba(61, 139, 255, 0.30)',
+    placeholder: '#645783',
+};
+export const WHILEUI_DARK_THEME_COLORS = {
+    primary: '#ff5ca8',
+    primaryForeground: '#2c1032',
+    foreground: '#fff7eb',
+    background: '#170f2d',
+    card: 'rgba(38, 24, 69, 0.78)',
+    cardForeground: '#fff7eb',
+    popover: 'rgba(28, 18, 52, 0.90)',
+    popoverForeground: '#fff7eb',
+    secondary: 'rgba(255, 92, 168, 0.12)',
+    secondaryForeground: '#fff3fa',
+    muted: 'rgba(255, 247, 235, 0.08)',
+    mutedForeground: '#c5bad9',
+    border: 'rgba(255, 255, 255, 0.12)',
+    input: 'rgba(27, 18, 49, 0.86)',
+    ring: 'rgba(127, 240, 197, 0.36)',
+    accent: '#7ff0c5',
+    accentForeground: '#0f2d24',
+    destructive: '#ff6b57',
+    destructiveForeground: '#2c0c0a',
+    success: '#39db9b',
+    successForeground: '#06241a',
+    warning: '#ffbe42',
+    warningForeground: '#2d1700',
+    info: '#78a7ff',
+    infoForeground: '#09162d',
+    overlay: 'rgba(9, 4, 20, 0.50)',
+    overlayStrong: 'rgba(9, 4, 20, 0.68)',
+    surfaceElevated: 'rgba(45, 27, 79, 0.80)',
+    surfaceTranslucent: 'rgba(34, 20, 61, 0.58)',
+    surfaceTranslucentBorder: 'rgba(255, 255, 255, 0.12)',
+    surfaceBorder: 'rgba(255, 255, 255, 0.12)',
+    surfaceHighlight: 'rgba(255, 255, 255, 0.07)',
+    stateHover: 'rgba(255, 92, 168, 0.08)',
+    statePressed: 'rgba(255, 92, 168, 0.16)',
+    stateDisabled: 'rgba(197, 186, 217, 0.22)',
+    shadow: '#000000',
+    primaryActive: '#ff74b6',
+    secondaryActive: 'rgba(255, 92, 168, 0.20)',
+    destructiveActive: '#ff8271',
+    primarySoft: 'rgba(255, 92, 168, 0.16)',
+    primarySoftSubtle: 'rgba(255, 92, 168, 0.10)',
+    secondarySoft: 'rgba(127, 240, 197, 0.08)',
+    mutedSoft: 'rgba(255, 247, 235, 0.05)',
+    destructiveSoft: 'rgba(255, 107, 87, 0.20)',
+    destructiveSoftBorder: 'rgba(255, 107, 87, 0.40)',
+    successSoft: 'rgba(57, 219, 155, 0.20)',
+    successSoftBorder: 'rgba(57, 219, 155, 0.40)',
+    warningSoft: 'rgba(255, 190, 66, 0.20)',
+    warningSoftBorder: 'rgba(255, 190, 66, 0.45)',
+    infoSoft: 'rgba(120, 167, 255, 0.20)',
+    infoSoftBorder: 'rgba(120, 167, 255, 0.40)',
+    placeholder: '#c5bad9',
+};
+/**
+ * App-owned theme contract for WhileUI.
+ * The package owns token names and fallbacks; apps own the actual values.
+ */
+export const THEME_TOKEN_SPECS = [
+    {
+        key: 'primary',
+        cssVar: '--color-primary',
+        appVar: '--app-color-primary',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.primary,
+        group: 'core',
+    },
+    {
+        key: 'primaryForeground',
+        cssVar: '--color-primary-foreground',
+        appVar: '--app-color-primary-foreground',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.primaryForeground,
+        group: 'core',
+    },
+    {
+        key: 'foreground',
+        cssVar: '--color-foreground',
+        appVar: '--app-color-foreground',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.foreground,
+        group: 'core',
+    },
+    {
+        key: 'background',
+        cssVar: '--color-background',
+        appVar: '--app-color-background',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.background,
+        group: 'core',
+    },
+    {
+        key: 'card',
+        cssVar: '--color-card',
+        appVar: '--app-color-card',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.card,
+        group: 'core',
+    },
+    {
+        key: 'cardForeground',
+        cssVar: '--color-card-foreground',
+        appVar: '--app-color-card-foreground',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.cardForeground,
+        group: 'core',
+    },
+    {
+        key: 'popover',
+        cssVar: '--color-popover',
+        appVar: '--app-color-popover',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.popover,
+        group: 'core',
+    },
+    {
+        key: 'popoverForeground',
+        cssVar: '--color-popover-foreground',
+        appVar: '--app-color-popover-foreground',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.popoverForeground,
+        group: 'core',
+    },
+    {
+        key: 'secondary',
+        cssVar: '--color-secondary',
+        appVar: '--app-color-secondary',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.secondary,
+        group: 'core',
+    },
+    {
+        key: 'secondaryForeground',
+        cssVar: '--color-secondary-foreground',
+        appVar: '--app-color-secondary-foreground',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.secondaryForeground,
+        group: 'core',
+    },
+    {
+        key: 'muted',
+        cssVar: '--color-muted',
+        appVar: '--app-color-muted',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.muted,
+        group: 'core',
+    },
+    {
+        key: 'mutedForeground',
+        cssVar: '--color-muted-foreground',
+        appVar: '--app-color-muted-foreground',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.mutedForeground,
+        group: 'core',
+    },
+    {
+        key: 'border',
+        cssVar: '--color-border',
+        appVar: '--app-color-border',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.border,
+        group: 'core',
+    },
+    {
+        key: 'input',
+        cssVar: '--color-input',
+        appVar: '--app-color-input',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.input,
+        group: 'core',
+    },
+    {
+        key: 'ring',
+        cssVar: '--color-ring',
+        appVar: '--app-color-ring',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.ring,
+        group: 'feedback',
+    },
+    {
+        key: 'accent',
+        cssVar: '--color-accent',
+        appVar: '--app-color-accent',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.accent,
+        group: 'core',
+    },
+    {
+        key: 'accentForeground',
+        cssVar: '--color-accent-foreground',
+        appVar: '--app-color-accent-foreground',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.accentForeground,
+        group: 'core',
+    },
+    {
+        key: 'destructive',
+        cssVar: '--color-destructive',
+        appVar: '--app-color-destructive',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.destructive,
+        group: 'status',
+    },
+    {
+        key: 'destructiveForeground',
+        cssVar: '--color-destructive-foreground',
+        appVar: '--app-color-destructive-foreground',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.destructiveForeground,
+        group: 'status',
+    },
+    {
+        key: 'success',
+        cssVar: '--color-success',
+        appVar: '--app-color-success',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.success,
+        group: 'status',
+    },
+    {
+        key: 'successForeground',
+        cssVar: '--color-success-foreground',
+        appVar: '--app-color-success-foreground',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.successForeground,
+        group: 'status',
+    },
+    {
+        key: 'warning',
+        cssVar: '--color-warning',
+        appVar: '--app-color-warning',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.warning,
+        group: 'status',
+    },
+    {
+        key: 'warningForeground',
+        cssVar: '--color-warning-foreground',
+        appVar: '--app-color-warning-foreground',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.warningForeground,
+        group: 'status',
+    },
+    {
+        key: 'info',
+        cssVar: '--color-info',
+        appVar: '--app-color-info',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.info,
+        group: 'status',
+    },
+    {
+        key: 'infoForeground',
+        cssVar: '--color-info-foreground',
+        appVar: '--app-color-info-foreground',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.infoForeground,
+        group: 'status',
+    },
+    {
+        key: 'overlay',
+        cssVar: '--color-overlay',
+        appVar: '--app-color-overlay',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.overlay,
+        group: 'surface',
+    },
+    {
+        key: 'overlayStrong',
+        cssVar: '--color-overlay-strong',
+        appVar: '--app-color-overlay-strong',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.overlayStrong,
+        group: 'surface',
+    },
+    {
+        key: 'surfaceElevated',
+        cssVar: '--color-surface-elevated',
+        appVar: '--app-color-surface-elevated',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.surfaceElevated,
+        group: 'surface',
+    },
+    {
+        key: 'surfaceTranslucent',
+        cssVar: '--color-surface-translucent',
+        appVar: '--app-color-surface-translucent',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.surfaceTranslucent,
+        group: 'surface',
+    },
+    {
+        key: 'surfaceTranslucentBorder',
+        cssVar: '--color-surface-translucent-border',
+        appVar: '--app-color-surface-translucent-border',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.surfaceTranslucentBorder,
+        group: 'surface',
+    },
+    {
+        key: 'surfaceBorder',
+        cssVar: '--color-surface-border',
+        appVar: '--app-color-surface-border',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.surfaceBorder,
+        group: 'surface',
+    },
+    {
+        key: 'surfaceHighlight',
+        cssVar: '--color-surface-highlight',
+        appVar: '--app-color-surface-highlight',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.surfaceHighlight,
+        group: 'surface',
+    },
+    {
+        key: 'stateHover',
+        cssVar: '--color-state-hover',
+        appVar: '--app-color-state-hover',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.stateHover,
+        group: 'feedback',
+    },
+    {
+        key: 'statePressed',
+        cssVar: '--color-state-pressed',
+        appVar: '--app-color-state-pressed',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.statePressed,
+        group: 'feedback',
+    },
+    {
+        key: 'stateDisabled',
+        cssVar: '--color-state-disabled',
+        appVar: '--app-color-state-disabled',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.stateDisabled,
+        group: 'feedback',
+    },
+    {
+        key: 'shadow',
+        cssVar: '--color-shadow',
+        appVar: '--app-color-shadow',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.shadow,
+        group: 'surface',
+    },
+    {
+        key: 'primaryActive',
+        cssVar: '--color-primary-active',
+        appVar: '--app-color-primary-active',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.primaryActive,
+        group: 'feedback',
+    },
+    {
+        key: 'secondaryActive',
+        cssVar: '--color-secondary-active',
+        appVar: '--app-color-secondary-active',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.secondaryActive,
+        group: 'feedback',
+    },
+    {
+        key: 'destructiveActive',
+        cssVar: '--color-destructive-active',
+        appVar: '--app-color-destructive-active',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.destructiveActive,
+        group: 'feedback',
+    },
+    {
+        key: 'primarySoft',
+        cssVar: '--color-primary-soft',
+        appVar: '--app-color-primary-soft',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.primarySoft,
+        group: 'feedback',
+    },
+    {
+        key: 'primarySoftSubtle',
+        cssVar: '--color-primary-soft-subtle',
+        appVar: '--app-color-primary-soft-subtle',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.primarySoftSubtle,
+        group: 'feedback',
+    },
+    {
+        key: 'secondarySoft',
+        cssVar: '--color-secondary-soft',
+        appVar: '--app-color-secondary-soft',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.secondarySoft,
+        group: 'feedback',
+    },
+    {
+        key: 'mutedSoft',
+        cssVar: '--color-muted-soft',
+        appVar: '--app-color-muted-soft',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.mutedSoft,
+        group: 'feedback',
+    },
+    {
+        key: 'destructiveSoft',
+        cssVar: '--color-destructive-soft',
+        appVar: '--app-color-destructive-soft',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.destructiveSoft,
+        group: 'status',
+    },
+    {
+        key: 'destructiveSoftBorder',
+        cssVar: '--color-destructive-soft-border',
+        appVar: '--app-color-destructive-soft-border',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.destructiveSoftBorder,
+        group: 'status',
+    },
+    {
+        key: 'successSoft',
+        cssVar: '--color-success-soft',
+        appVar: '--app-color-success-soft',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.successSoft,
+        group: 'status',
+    },
+    {
+        key: 'successSoftBorder',
+        cssVar: '--color-success-soft-border',
+        appVar: '--app-color-success-soft-border',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.successSoftBorder,
+        group: 'status',
+    },
+    {
+        key: 'warningSoft',
+        cssVar: '--color-warning-soft',
+        appVar: '--app-color-warning-soft',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.warningSoft,
+        group: 'status',
+    },
+    {
+        key: 'warningSoftBorder',
+        cssVar: '--color-warning-soft-border',
+        appVar: '--app-color-warning-soft-border',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.warningSoftBorder,
+        group: 'status',
+    },
+    {
+        key: 'infoSoft',
+        cssVar: '--color-info-soft',
+        appVar: '--app-color-info-soft',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.infoSoft,
+        group: 'status',
+    },
+    {
+        key: 'infoSoftBorder',
+        cssVar: '--color-info-soft-border',
+        appVar: '--app-color-info-soft-border',
+        fallback: WHILEUI_LIGHT_THEME_COLORS.infoSoftBorder,
+        group: 'status',
+    },
+];
+export const THEME_TOKEN_VARIABLES = THEME_TOKEN_SPECS.flatMap(({ cssVar, appVar }) => [
+    cssVar,
+    appVar,
+]);
+export const THEME_TOKEN_GROUPS = {
+    core: THEME_TOKEN_SPECS.filter((token) => token.group === 'core'),
+    status: THEME_TOKEN_SPECS.filter((token) => token.group === 'status'),
+    surface: THEME_TOKEN_SPECS.filter((token) => token.group === 'surface'),
+    feedback: THEME_TOKEN_SPECS.filter((token) => token.group === 'feedback'),
+};

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

@@ -0,0 +1,4 @@
+import type { ThemeColors } from './theme-contract';
+export declare const THEME_BASE_TOKEN_KEYS: readonly ["background", "foreground", "card", "cardForeground", "popover", "popoverForeground", "primary", "primaryForeground", "secondary", "secondaryForeground", "accent", "accentForeground", "muted", "mutedForeground", "border", "input", "ring", "destructive", "destructiveForeground", "success", "successForeground", "warning", "warningForeground", "info", "infoForeground"];
+export type ThemeBaseColors = Pick<ThemeColors, (typeof THEME_BASE_TOKEN_KEYS)[number]>;
+export declare function deriveThemeColors(base: ThemeBaseColors, scheme?: 'light' | 'dark'): ThemeColors;

package/dist/lib/theme-derive.js

@@ -0,0 +1,80 @@
+import { converter, formatRgb, parse } from 'culori';
+// Fills the derived tokens (soft, active, state, surface, overlay) from the base
+// palette an app defines, using the ratios of the default presets. Renderer-free.
+// A brand should never show whileui's default purple because it left out
+// `--color-primary-soft`.
+export const THEME_BASE_TOKEN_KEYS = [
+    'background',
+    'foreground',
+    'card',
+    'cardForeground',
+    'popover',
+    'popoverForeground',
+    'primary',
+    'primaryForeground',
+    'secondary',
+    'secondaryForeground',
+    'accent',
+    'accentForeground',
+    'muted',
+    'mutedForeground',
+    'border',
+    'input',
+    'ring',
+    'destructive',
+    'destructiveForeground',
+    'success',
+    'successForeground',
+    'warning',
+    'warningForeground',
+    'info',
+    'infoForeground',
+];
+const toOklch = converter('oklch');
+function alpha(color, value) {
+    const parsed = parse(color);
+    return parsed ? (formatRgb({ ...parsed, alpha: value }) ?? color) : color;
+}
+function shiftLightness(color, delta) {
+    const parsed = parse(color);
+    if (!parsed)
+        return color;
+    const c = toOklch(parsed);
+    return formatRgb({ ...c, l: Math.min(1, Math.max(0, c.l + delta)) }) ?? color;
+}
+export function deriveThemeColors(base, scheme = 'light') {
+    const dark = scheme === 'dark';
+    const active = (color) => shiftLightness(color, dark ? 0.06 : -0.06);
+    const ink = dark ? '#000000' : base.foreground;
+    const sheen = dark ? '#ffffff' : base.card;
+    return {
+        ...base,
+        primarySoft: alpha(base.primary, 0.13),
+        primarySoftSubtle: alpha(base.primary, 0.07),
+        secondarySoft: alpha(base.secondary, 0.16),
+        secondaryActive: alpha(base.secondary, 0.18),
+        mutedSoft: alpha(base.muted, 0.05),
+        destructiveSoft: alpha(base.destructive, 0.12),
+        destructiveSoftBorder: alpha(base.destructive, 0.3),
+        successSoft: alpha(base.success, 0.12),
+        successSoftBorder: alpha(base.success, 0.3),
+        warningSoft: alpha(base.warning, 0.14),
+        warningSoftBorder: alpha(base.warning, 0.34),
+        infoSoft: alpha(base.info, 0.12),
+        infoSoftBorder: alpha(base.info, 0.3),
+        stateHover: alpha(base.primary, 0.06),
+        statePressed: alpha(base.primary, 0.12),
+        stateDisabled: alpha(base.mutedForeground, 0.28),
+        overlay: alpha(ink, dark ? 0.5 : 0.14),
+        overlayStrong: alpha(ink, dark ? 0.68 : 0.22),
+        surfaceElevated: alpha(base.card, dark ? 0.8 : 0.88),
+        surfaceTranslucent: alpha(base.card, dark ? 0.58 : 0.62),
+        surfaceTranslucentBorder: alpha(sheen, dark ? 0.12 : 0.42),
+        surfaceBorder: base.border,
+        surfaceHighlight: alpha(sheen, dark ? 0.07 : 0.74),
+        shadow: ink,
+        primaryActive: active(base.primary),
+        destructiveActive: active(base.destructive),
+        placeholder: base.mutedForeground,
+    };
+}

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

@@ -0,0 +1,31 @@
+import { type ThemeColors } from './theme-contract';
+import { type VisualTokens } from './visual-token-contract';
+/**
+ * Canonical full-package theme presets.
+ * A preset pairs a color palette (light + dark) with visual token overrides
+ * (shape, density, depth, typography). Switching presets should make the
+ * whole package feel like a different product — that is the acceptance test
+ * for the token system.
+ */
+export interface ThemePreset {
+    name: string;
+    description: string;
+    light: ThemeColors;
+    dark: ThemeColors;
+    /** Visual token overrides; unset keys keep contract fallbacks. */
+    visual: Partial<VisualTokens>;
+}
+export declare const WHILEUI_PRESET_SOFT: ThemePreset;
+export declare const WHILEUI_PRESET_ATELIER: ThemePreset;
+export declare const WHILEUI_THEME_PRESETS: readonly ThemePreset[];
+/**
+ * Flatten a preset into CSS variable maps an app can drop into its theme CSS
+ * (e.g. a Uniwind/Tailwind `@theme` block plus light/dark variants).
+ */
+export declare function themePresetToCssVariables(preset: ThemePreset): {
+    light: Record<string, string>;
+    dark: Record<string, string>;
+    visual: Record<string, string>;
+};
+/** Render a preset as ready-to-paste CSS blocks. */
+export declare function themePresetToCss(preset: ThemePreset): string;