@snowcone-app/ui 0.1.43 → 0.2.0

package/src/themes/apply-theme.ts

@@ -0,0 +1,449 @@
+/**
+ * Apply Theme
+ *
+ * This is the single source of truth for theme application logic.
+ * All apps (next-ecommerce, docs, canvas) use these same functions.
+ *
+ * COLOR STRATEGY (Build-Time OKLCH):
+ * ----------------------------------
+ * All color variables are defined in ne-themes.css using OKLCH color space.
+ * This function ONLY sets the data-theme attribute to activate those CSS rules.
+ * No runtime color calculation is needed!
+ *
+ * RUNTIME VARIABLES (Fonts, Radius, Icons):
+ * -----------------------------------------
+ * These are set at runtime because CSS selector-based approach doesn't reliably
+ * override Tailwind's utilities. The runtime applies:
+ * - Font family and weight variables
+ * - Semantic radius variables
+ * - Icon stroke width
+ *
+ * ## Semantic Font Roles
+ *
+ * The theme system supports granular font customization through semantic roles:
+ * - **heading**: h1-h6, titles
+ * - **body**: paragraphs, default text
+ * - **label**: form labels, field names
+ * - **button**: button text, CTAs
+ * - **caption**: small text, descriptions
+ * - **display**: hero text, prices
+ * - **accent**: emphasis, blockquotes
+ *
+ * ## Semantic Radius Roles
+ *
+ * The theme system supports granular border-radius customization:
+ * - **button**: buttons, chips, toggles
+ * - **input**: text inputs, selects, textareas
+ * - **card**: cards, panels, surfaces
+ * - **modal**: modals, dialogs, sheets
+ * - **badge**: badges, tags, indicators
+ * - **avatar**: avatars, profile images
+ * - **tooltip**: tooltips, popovers, dropdowns
+ * - **image**: product images, thumbnails
+ */
+
+import type { ThemeConfig, FontPairing, RadiusConfig, RadiusPresetId, RadiusSize } from './types';
+import { RADIUS_PRESETS } from './types';
+import { findOklchTheme } from './presets';
+
+/**
+ * Create a safe CSS identifier from theme name
+ * Must match the pattern used in scripts/generate-theme-css.ts
+ */
+export function toThemeId(name: string): string {
+  return `ne-${name.toLowerCase().replace(/[^a-z0-9]/g, '-')}`;
+}
+
+/**
+ * Get the current theme ID from the document
+ */
+export function getCurrentThemeId(): string | null {
+  if (typeof document === 'undefined') return null;
+  return document.documentElement.getAttribute('data-theme');
+}
+
+/**
+ * Font family presets mapping
+ * Inter is loaded from rsms.me in layout.tsx for docs site
+ */
+const fontFamilyMap: Record<string, string> = {
+  sans: '"Inter", "InterVariable", ui-sans-serif, system-ui, sans-serif',
+  serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+  mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+  display: '"Inter", "InterVariable", ui-sans-serif, system-ui, sans-serif',
+  mixed: '"Inter", "InterVariable", ui-sans-serif, system-ui, sans-serif',
+  'montserrat-combo': '"Inter", "InterVariable", ui-sans-serif, system-ui, sans-serif',
+  'playfair-combo': '"Inter", "InterVariable", ui-sans-serif, system-ui, sans-serif',
+  'helvetica-combo':
+    '"Inter", "InterVariable", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif',
+};
+
+/**
+ * Get heading font for a font family preset
+ */
+function getHeadingFont(fontFamily: string | undefined, bodyFont: string): string {
+  switch (fontFamily) {
+    case 'mixed':
+    case 'playfair-combo':
+      return 'ui-serif, Georgia, Cambria, serif';
+    case 'serif':
+      return 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif';
+    default:
+      return bodyFont;
+  }
+}
+
+/**
+ * Default font weights
+ */
+const DEFAULT_WEIGHTS = {
+  body: '400',
+  heading: '600',
+  button: '500',
+  label: '500',
+  caption: '400',
+  display: '700',
+};
+
+/**
+ * Apply semantic font variables to the document root
+ */
+function applySemanticFonts(root: HTMLElement, fontPairing: FontPairing): void {
+  const { headingFont, bodyFont, weights } = fontPairing;
+
+  // Core fonts (required)
+  root.style.setProperty('--font-heading', headingFont);
+  root.style.setProperty('--font-body', bodyFont);
+
+  // Semantic font roles - use explicit override or cascade from core fonts
+  root.style.setProperty('--font-label', fontPairing.labelFont || bodyFont);
+  root.style.setProperty('--font-button', fontPairing.buttonFont || bodyFont);
+  root.style.setProperty('--font-caption', fontPairing.captionFont || bodyFont);
+  root.style.setProperty('--font-display', fontPairing.displayFont || headingFont);
+  root.style.setProperty('--font-accent', fontPairing.accentFont || headingFont);
+
+  // Font weights
+  root.style.setProperty('--font-weight-body', weights?.bodyWeight || DEFAULT_WEIGHTS.body);
+  root.style.setProperty('--font-weight-heading', weights?.headingWeight || DEFAULT_WEIGHTS.heading);
+  root.style.setProperty('--font-weight-button', weights?.buttonWeight || DEFAULT_WEIGHTS.button);
+  root.style.setProperty('--font-weight-label', weights?.labelWeight || DEFAULT_WEIGHTS.label);
+  root.style.setProperty('--font-weight-caption', weights?.captionWeight || DEFAULT_WEIGHTS.caption);
+  root.style.setProperty('--font-weight-display', weights?.displayWeight || DEFAULT_WEIGHTS.display);
+}
+
+/**
+ * Apply default fonts derived from fontFamily preset
+ */
+function applyDefaultFonts(root: HTMLElement, bodyFont: string, headingFont: string): void {
+  root.style.setProperty('--font-heading', headingFont);
+  root.style.setProperty('--font-body', bodyFont);
+  root.style.setProperty('--font-label', bodyFont);
+  root.style.setProperty('--font-button', bodyFont);
+  root.style.setProperty('--font-caption', bodyFont);
+  root.style.setProperty('--font-display', headingFont);
+  root.style.setProperty('--font-accent', headingFont);
+  root.style.setProperty('--font-weight-body', DEFAULT_WEIGHTS.body);
+  root.style.setProperty('--font-weight-heading', DEFAULT_WEIGHTS.heading);
+  root.style.setProperty('--font-weight-button', DEFAULT_WEIGHTS.button);
+  root.style.setProperty('--font-weight-label', DEFAULT_WEIGHTS.label);
+  root.style.setProperty('--font-weight-caption', DEFAULT_WEIGHTS.caption);
+  root.style.setProperty('--font-weight-display', DEFAULT_WEIGHTS.display);
+}
+
+/* =============================================================================
+ * SEMANTIC RADIUS SYSTEM
+ * =============================================================================
+ */
+
+/**
+ * Map RadiusSize to CSS value
+ */
+function radiusSizeToCss(size: RadiusSize): string {
+  switch (size) {
+    case 'none':
+      return '0';
+    case 'sm':
+      return 'var(--radius-sm)';
+    case 'md':
+      return 'var(--radius-md)';
+    case 'lg':
+      return 'var(--radius-lg)';
+    case 'xl':
+      return 'var(--radius-xl)';
+    case '2xl':
+      return 'var(--radius-2xl)';
+    case '3xl':
+      return 'var(--radius-3xl)';
+    case '4xl':
+      return 'var(--radius-4xl)';
+    case 'full':
+      return 'var(--radius-full)';
+    default:
+      return 'var(--radius-md)';
+  }
+}
+
+/**
+ * Resolve radius preset - handles both preset IDs and custom configs
+ */
+function resolveRadiusConfig(preset: RadiusPresetId | RadiusConfig | undefined): Required<RadiusConfig> {
+  if (!preset) {
+    return RADIUS_PRESETS.default;
+  }
+
+  if (typeof preset === 'string') {
+    return RADIUS_PRESETS[preset] || RADIUS_PRESETS.default;
+  }
+
+  return {
+    ...RADIUS_PRESETS.default,
+    ...preset,
+  };
+}
+
+/**
+ * Map legacy borderRadius to a radius preset
+ */
+function legacyBorderRadiusToPreset(borderRadius: string | undefined): RadiusPresetId {
+  switch (borderRadius) {
+    case 'none':
+      return 'brutalist';
+    case 'sm':
+      return 'sharp';
+    case 'full':
+      return 'soft';
+    case 'xl':
+      return 'playful';
+    case 'md':
+    case 'lg':
+    default:
+      return 'default';
+  }
+}
+
+/**
+ * Apply semantic radius variables to the document root
+ */
+function applySemanticRadius(root: HTMLElement, config: Required<RadiusConfig>): void {
+  root.style.setProperty('--radius-button', radiusSizeToCss(config.button));
+  root.style.setProperty('--radius-input', radiusSizeToCss(config.input));
+  root.style.setProperty('--radius-card', radiusSizeToCss(config.card));
+  root.style.setProperty('--radius-modal', radiusSizeToCss(config.modal));
+  root.style.setProperty('--radius-badge', radiusSizeToCss(config.badge));
+  root.style.setProperty('--radius-avatar', radiusSizeToCss(config.avatar));
+  root.style.setProperty('--radius-tooltip', radiusSizeToCss(config.tooltip));
+  root.style.setProperty('--radius-image', radiusSizeToCss(config.image));
+}
+
+/**
+ * Apply icon stroke width variable
+ */
+function applyIconStrokeWidth(root: HTMLElement, strokeWidth: string | undefined): void {
+  const strokeWidthMap: Record<string, string> = {
+    thin: '1',
+    normal: '1.5',
+    thick: '2',
+    'extra-thick': '2.5',
+  };
+  root.style.setProperty('--icon-stroke-width', strokeWidthMap[strokeWidth || 'normal']);
+}
+
+/**
+ * Clear inline color styles that were set during SSR
+ *
+ * These inline styles are set by getThemeInlineStyles() to prevent FOIT,
+ * but they need to be cleared when switching themes so the CSS selector-based
+ * styles from ne-themes.css can take effect.
+ */
+function clearInlineColorStyles(root: HTMLElement): void {
+  const colorVars = [
+    // Core semantic colors
+    '--background',
+    '--foreground',
+    '--primary',
+    '--primary-foreground',
+    '--secondary',
+    '--secondary-foreground',
+    '--accent',
+    '--accent-foreground',
+    '--muted',
+    '--muted-foreground',
+    '--border',
+    '--surface',
+    // Prefixed versions
+    '--color-background',
+    '--color-foreground',
+    '--color-primary',
+    '--color-primary-foreground',
+    '--color-secondary',
+    '--color-secondary-foreground',
+    '--color-accent',
+    '--color-accent-foreground',
+    '--color-muted',
+    '--color-muted-foreground',
+    '--color-border',
+    '--color-card',
+    '--color-card-foreground',
+    '--color-popover',
+    '--color-popover-foreground',
+    '--color-surface',
+    '--color-surface-raised',
+    '--color-ring',
+    '--color-field',
+    '--color-field-on-surface',
+    '--color-divider',
+    '--color-heading',
+    '--color-icon',
+    '--color-accent-text-overlay',
+    '--color-accent-text-page',
+    // Code block colors
+    '--color-code-bg',
+    '--color-code-bg-solid',
+    '--color-code-fg',
+    // Legacy aliases
+    '--divider',
+    '--focus',
+  ];
+
+  for (const v of colorVars) {
+    root.style.removeProperty(v);
+  }
+}
+
+/**
+ * Apply a theme to the document
+ *
+ * Sets data-theme attribute to activate CSS color variables from ne-themes.css.
+ * Then applies runtime-only variables: fonts, radius, icon stroke width.
+ *
+ * NOTE: Colors are NOT set at runtime - they come from the CSS.
+ * This eliminates hydration mismatches and runtime overhead.
+ */
+export function applyTheme(config: ThemeConfig): void {
+  const root = document.documentElement;
+  const themeId = toThemeId(config.name || 'minimal');
+
+  // Clear any inline color styles that were set during SSR
+  // This allows the CSS selector-based styles from ne-themes.css to take effect
+  clearInlineColorStyles(root);
+
+  // Set the data-theme attribute - this activates colors from ne-themes.css
+  root.setAttribute('data-theme', themeId);
+
+  // Find the OKLCH config for additional theme properties
+  const oklchConfig = config.name ? findOklchTheme(config.name) : undefined;
+
+  // Determine dark mode: explicit config takes precedence, then OKLCH config
+  const isDark = config.isDark ?? oklchConfig?.isDark ?? false;
+
+  // Toggle dark mode class and color scheme
+  // This activates the correct CSS selectors in ne-themes.css:
+  // - Light themes: [data-theme='ne-xxx']
+  // - Dark themes: .dark[data-theme='ne-xxx'], [data-theme='ne-xxx'] .dark
+  if (isDark) {
+    root.classList.add('dark');
+    root.classList.remove('light');
+    root.style.colorScheme = 'dark';
+  } else {
+    root.classList.remove('dark');
+    root.classList.add('light');
+    root.style.colorScheme = 'light';
+  }
+  // Clean up any stale .dark class on body from previous code
+  document.body.classList.remove('dark');
+
+  // Set code block background colors based on dark/light mode
+  // These must be set at runtime because they're not in ne-themes.css
+  const codeBg = isDark ? 'rgba(255, 255, 255, 0.13)' : 'rgba(0, 0, 0, 0.03)';
+  const codeBgSolid = isDark ? 'rgb(26, 26, 26)' : 'rgb(255, 255, 255)';
+  const codeFg = isDark ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.8)';
+  const codeBorder = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.08)';
+  root.style.setProperty('--color-code-bg', codeBg);
+  root.style.setProperty('--color-code-bg-solid', codeBgSolid);
+  root.style.setProperty('--color-code-fg', codeFg);
+  root.style.setProperty('--color-code-border', codeBorder);
+
+  // Apply font variables (runtime - CSS selectors don't work well with Tailwind)
+  const fontPairing = oklchConfig?.fontPairing || config.fontPairing;
+  if (fontPairing) {
+    applySemanticFonts(root, fontPairing);
+  } else {
+    const fontFamily = oklchConfig?.fontFamily || config.fontFamily;
+    const bodyFont = fontFamilyMap[fontFamily || 'sans'] || fontFamilyMap.sans;
+    const headingFont = getHeadingFont(fontFamily, bodyFont);
+    applyDefaultFonts(root, bodyFont, headingFont);
+  }
+
+  // Apply radius variables (runtime - CSS selectors don't work well with Tailwind)
+  let radiusConfig: Required<RadiusConfig>;
+  const radiusPreset = oklchConfig?.radiusPreset || config.radiusPreset;
+
+  if (radiusPreset) {
+    radiusConfig = resolveRadiusConfig(radiusPreset);
+  } else if (config.borderRadius) {
+    const presetId = legacyBorderRadiusToPreset(config.borderRadius);
+    radiusConfig = RADIUS_PRESETS[presetId];
+  } else {
+    radiusConfig = RADIUS_PRESETS.default;
+  }
+
+  applySemanticRadius(root, radiusConfig);
+
+  // Apply icon stroke width
+  const iconStrokeWidth = oklchConfig?.iconStrokeWidth || config.iconStrokeWidth;
+  applyIconStrokeWidth(root, iconStrokeWidth);
+}
+
+/**
+ * Clear theme
+ * Removes the data-theme attribute and all theme-related CSS variables
+ */
+export function clearTheme(): void {
+  const root = document.documentElement;
+
+  // Only clear if it's a NE theme (starts with "ne-")
+  const currentTheme = root.getAttribute('data-theme');
+  if (currentTheme?.startsWith('ne-')) {
+    root.removeAttribute('data-theme');
+
+    // Clear font variables (runtime-applied)
+    const fontVars = [
+      '--font-heading',
+      '--font-body',
+      '--font-label',
+      '--font-button',
+      '--font-caption',
+      '--font-display',
+      '--font-accent',
+      '--font-weight-body',
+      '--font-weight-heading',
+      '--font-weight-button',
+      '--font-weight-label',
+      '--font-weight-caption',
+      '--font-weight-display',
+    ];
+
+    for (const v of fontVars) {
+      root.style.removeProperty(v);
+    }
+
+    // Clear radius variables (runtime-applied)
+    const radiusVars = [
+      '--radius-button',
+      '--radius-input',
+      '--radius-card',
+      '--radius-modal',
+      '--radius-badge',
+      '--radius-avatar',
+      '--radius-tooltip',
+      '--radius-image',
+    ];
+
+    for (const v of radiusVars) {
+      root.style.removeProperty(v);
+    }
+
+    // Clear icon stroke width
+    root.style.removeProperty('--icon-stroke-width');
+  }
+}