@runtypelabs/persona 1.47.0 → 2.0.0

package/src/utils/theme.test.ts

@@ -0,0 +1,125 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it } from 'vitest';
+import { createTheme, getActiveTheme, themeToCssVariables } from './theme';
+
+describe('theme utils', () => {
+  afterEach(() => {
+    document.documentElement.classList.remove('dark');
+  });
+
+  it('uses darkTheme overrides when dark mode is active', () => {
+    const lightAndDarkThemeConfig = {
+      colorScheme: 'dark' as const,
+      theme: {
+        primary: '#111111',
+      },
+      darkTheme: {
+        primary: '#22c55e',
+      },
+    };
+
+    const activeTheme = getActiveTheme(lightAndDarkThemeConfig as any);
+    const cssVars = themeToCssVariables(activeTheme);
+
+    expect(cssVars['--persona-palette-colors-primary-500']).toBe('#22c55e');
+  });
+
+  it('uses darkTheme overrides after auto-detecting dark mode', () => {
+    document.documentElement.classList.add('dark');
+
+    const lightAndDarkThemeConfig = {
+      colorScheme: 'auto' as const,
+      theme: {
+        primary: '#111111',
+      },
+      darkTheme: {
+        primary: '#22c55e',
+      },
+    };
+
+    const activeTheme = getActiveTheme(lightAndDarkThemeConfig as any);
+    const cssVars = themeToCssVariables(activeTheme);
+
+    expect(cssVars['--persona-palette-colors-primary-500']).toBe('#22c55e');
+  });
+
+  it('maps radius tokens into the legacy widget radius aliases', () => {
+    const theme = createTheme({
+      palette: {
+        radius: {
+          none: '0px',
+          sm: '2px',
+          md: '6px',
+          lg: '10px',
+          xl: '18px',
+          full: '9999px',
+        },
+      },
+      components: {
+        panel: {
+          borderRadius: 'palette.radius.xl',
+        },
+        input: {
+          borderRadius: 'palette.radius.md',
+        },
+        launcher: {
+          borderRadius: 'palette.radius.full',
+        },
+        button: {
+          primary: {
+            borderRadius: 'palette.radius.md',
+          },
+        },
+        message: {
+          user: {
+            borderRadius: 'palette.radius.sm',
+          },
+          assistant: {
+            borderRadius: 'palette.radius.lg',
+          },
+        },
+      },
+    } as any);
+
+    const cssVars = themeToCssVariables(theme);
+
+    expect(cssVars['--persona-radius-sm']).toBe('2px');
+    expect(cssVars['--persona-radius-md']).toBe('6px');
+    expect(cssVars['--persona-radius-lg']).toBe('10px');
+    expect(cssVars['--persona-panel-radius']).toBe('18px');
+    expect(cssVars['--persona-input-radius']).toBe('6px');
+    expect(cssVars['--persona-message-user-radius']).toBe('2px');
+    expect(cssVars['--persona-message-assistant-radius']).toBe('10px');
+    expect(cssVars['--persona-launcher-radius']).toBe('9999px');
+    expect(cssVars['--persona-button-radius']).toBe('6px');
+  });
+
+  it('maps markdown link and optional heading tokens to consumer CSS vars', () => {
+    const theme = createTheme({
+      components: {
+        markdown: {
+          link: {
+            foreground: '#60a5fa',
+          },
+          prose: {
+            fontFamily: 'Georgia, serif',
+          },
+          heading: {
+            h1: { fontSize: '1.375rem', fontWeight: '650' },
+            h2: { fontSize: '1.125rem', fontWeight: '600' },
+          },
+        },
+      },
+    } as any);
+
+    const cssVars = themeToCssVariables(theme);
+
+    expect(cssVars['--persona-md-link-color']).toBe('#60a5fa');
+    expect(cssVars['--persona-md-h1-size']).toBe('1.375rem');
+    expect(cssVars['--persona-md-h1-weight']).toBe('650');
+    expect(cssVars['--persona-md-h2-size']).toBe('1.125rem');
+    expect(cssVars['--persona-md-h2-weight']).toBe('600');
+    expect(cssVars['--persona-md-prose-font-family']).toBe('Georgia, serif');
+  });
+});

package/src/utils/theme.ts

@@ -1,105 +1,261 @@
-import { AgentWidgetConfig, AgentWidgetTheme } from "../types";
+import type { PersonaTheme } from '../types/theme';
+import type { AgentWidgetConfig, AgentWidgetTheme } from '../types';
+import { createTheme, resolveTokens, themeToCssVariables } from './tokens';
+import { migrateV1Theme } from './migration';
+
+export type ColorScheme = 'light' | 'dark' | 'auto';
+
+export interface PersonaWidgetConfig {
+  theme?: Partial<PersonaTheme>;
+  darkTheme?: Partial<PersonaTheme>;
+  colorScheme?: ColorScheme;
+}
+
+type WidgetConfig = PersonaWidgetConfig | AgentWidgetConfig;
+
+const DARK_PALETTE = {
+  colors: {
+    primary: {
+      50: '#eff6ff',
+      100: '#dbeafe',
+      200: '#bfdbfe',
+      300: '#93c5fd',
+      400: '#60a5fa',
+      500: '#3b82f6',
+      600: '#2563eb',
+      700: '#1d4ed8',
+      800: '#1e40af',
+      900: '#1e3a8a',
+      950: '#172554',
+    },
+    secondary: {
+      50: '#f5f3ff',
+      100: '#ede9fe',
+      200: '#ddd6fe',
+      300: '#c4b5fd',
+      400: '#a78bfa',
+      500: '#8b5cf6',
+      600: '#7c3aed',
+      700: '#6d28d9',
+      800: '#5b21b6',
+      900: '#4c1d95',
+      950: '#2e1065',
+    },
+    accent: {
+      50: '#ecfeff',
+      100: '#cffafe',
+      200: '#a5f3fc',
+      300: '#67e8f9',
+      400: '#22d3ee',
+      500: '#06b6d4',
+      600: '#0891b2',
+      700: '#0e7490',
+      800: '#155e75',
+      900: '#164e63',
+      950: '#083344',
+    },
+    gray: {
+      50: '#f9fafb',
+      100: '#f3f4f6',
+      200: '#e5e7eb',
+      300: '#d1d5db',
+      400: '#9ca3af',
+      500: '#6b7280',
+      600: '#4b5563',
+      700: '#374151',
+      800: '#1f2937',
+      900: '#111827',
+      950: '#030712',
+    },
+    success: {
+      50: '#f0fdf4',
+      100: '#dcfce7',
+      200: '#bbf7d0',
+      300: '#86efac',
+      400: '#4ade80',
+      500: '#22c55e',
+      600: '#16a34a',
+      700: '#15803d',
+      800: '#166534',
+      900: '#14532d',
+    },
+    warning: {
+      50: '#fefce8',
+      100: '#fef9c3',
+      200: '#fef08a',
+      300: '#fde047',
+      400: '#facc15',
+      500: '#eab308',
+      600: '#ca8a04',
+      700: '#a16207',
+      800: '#854d0e',
+      900: '#713f12',
+    },
+    error: {
+      50: '#fef2f2',
+      100: '#fee2e2',
+      200: '#fecaca',
+      300: '#fca5a5',
+      400: '#f87171',
+      500: '#ef4444',
+      600: '#dc2626',
+      700: '#b91c1c',
+      800: '#991b1b',
+      900: '#7f1d1d',
+    },
+  },
+};
+
+const isObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null && !Array.isArray(value);
+
+const deepMerge = <T extends Record<string, unknown>>(
+  base: T | undefined,
+  override: Record<string, unknown> | undefined
+): T | Record<string, unknown> | undefined => {
+  if (!base) return override;
+  if (!override) return base;
+
+  const merged: Record<string, unknown> = { ...base };
+
+  for (const [key, value] of Object.entries(override)) {
+    const existing = merged[key];
+    if (isObject(existing) && isObject(value)) {
+      merged[key] = deepMerge(existing, value);
+    } else {
+      merged[key] = value;
+    }
+  }
+
+  return merged;
+};
+
+const isTokenTheme = (theme: unknown): theme is Partial<PersonaTheme> => {
+  return isObject(theme) && ('palette' in theme || 'semantic' in theme || 'components' in theme);
+};
+
+const normalizeThemeConfig = (
+  theme: Partial<PersonaTheme> | AgentWidgetTheme | undefined
+): Partial<PersonaTheme> | undefined => {
+  if (!theme) return undefined;
+  const migratedTheme = migrateV1Theme(theme as AgentWidgetTheme, { warn: false });
+  if (isTokenTheme(theme)) {
+    return deepMerge(migratedTheme, theme) as Partial<PersonaTheme>;
+  }
+  return migratedTheme;
+};
 
-/**
- * Detects the current color scheme from the page.
- * 1. Checks if <html> element has 'dark' class
- * 2. Falls back to prefers-color-scheme media query
- */
 export const detectColorScheme = (): 'light' | 'dark' => {
-  // Check for 'dark' class on <html> element
   if (typeof document !== 'undefined' && document.documentElement.classList.contains('dark')) {
     return 'dark';
   }
-  
-  // Fall back to media query
+
   if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches) {
     return 'dark';
   }
-  
+
   return 'light';
 };
 
-/**
- * Gets the active theme based on colorScheme setting and current detection.
- */
-export const getActiveTheme = (config?: AgentWidgetConfig): AgentWidgetTheme => {
+const getColorSchemeFromConfig = (config?: WidgetConfig): 'light' | 'dark' => {
   const colorScheme = config?.colorScheme ?? 'light';
-  const lightTheme = config?.theme ?? {};
-  const darkTheme = config?.darkTheme ?? lightTheme;
+
+  if (colorScheme === 'light') return 'light';
+  if (colorScheme === 'dark') return 'dark';
+
+  return detectColorScheme();
+};
+
+export const getColorScheme = (config?: WidgetConfig): 'light' | 'dark' => {
+  return getColorSchemeFromConfig(config);
+};
+
+export const createLightTheme = (userConfig?: Partial<PersonaTheme>): PersonaTheme => {
+  return createTheme(userConfig);
+};
+
+export const createDarkTheme = (userConfig?: Partial<PersonaTheme>): PersonaTheme => {
+  const baseTheme = createTheme(undefined, { validate: false });
   
-  if (colorScheme === 'light') {
-    return lightTheme;
+  return createTheme(
+    {
+      ...userConfig,
+      palette: {
+        ...baseTheme.palette,
+        colors: {
+          ...DARK_PALETTE.colors,
+          ...userConfig?.palette?.colors,
+        },
+      },
+    },
+    { validate: false }
+  );
+};
+
+export const getActiveTheme = (config?: WidgetConfig): PersonaTheme => {
+  const scheme = getColorScheme(config);
+  const lightThemeConfig = normalizeThemeConfig(config?.theme as Partial<PersonaTheme> | AgentWidgetTheme | undefined);
+  const darkThemeConfig = normalizeThemeConfig(config?.darkTheme as Partial<PersonaTheme> | AgentWidgetTheme | undefined);
+
+  if (scheme === 'dark') {
+    return createDarkTheme(
+      deepMerge(lightThemeConfig, darkThemeConfig) as Partial<PersonaTheme> | undefined
+    );
   }
-  
-  if (colorScheme === 'dark') {
-    return darkTheme;
+
+  return createLightTheme(lightThemeConfig);
+};
+
+export const getCssVariables = (theme: PersonaTheme): Record<string, string> => {
+  return themeToCssVariables(theme);
+};
+
+export const applyThemeVariables = (
+  element: HTMLElement,
+  config?: WidgetConfig
+): void => {
+  const theme = getActiveTheme(config);
+  const cssVars = getCssVariables(theme);
+
+  for (const [name, value] of Object.entries(cssVars)) {
+    element.style.setProperty(name, value);
   }
-  
-  // colorScheme === 'auto'
-  const detectedScheme = detectColorScheme();
-  return detectedScheme === 'dark' ? darkTheme : lightTheme;
 };
 
-/**
- * Creates observers for theme changes (HTML class and media query).
- * Returns a cleanup function.
- */
 export const createThemeObserver = (
   callback: (scheme: 'light' | 'dark') => void
 ): (() => void) => {
   const cleanupFns: Array<() => void> = [];
-  
-  // Observe HTML class changes
+
   if (typeof document !== 'undefined' && typeof MutationObserver !== 'undefined') {
     const observer = new MutationObserver(() => {
       callback(detectColorScheme());
     });
-    
+
     observer.observe(document.documentElement, {
       attributes: true,
-      attributeFilter: ['class']
+      attributeFilter: ['class'],
     });
-    
+
     cleanupFns.push(() => observer.disconnect());
   }
-  
-  // Observe media query changes
+
   if (typeof window !== 'undefined' && window.matchMedia) {
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     const handleChange = () => callback(detectColorScheme());
-    
-    // Use addEventListener if available (modern browsers), otherwise addListener
+
     if (mediaQuery.addEventListener) {
       mediaQuery.addEventListener('change', handleChange);
       cleanupFns.push(() => mediaQuery.removeEventListener('change', handleChange));
     } else if (mediaQuery.addListener) {
-      // Legacy Safari
       mediaQuery.addListener(handleChange);
       cleanupFns.push(() => mediaQuery.removeListener(handleChange));
     }
   }
-  
+
   return () => {
-    cleanupFns.forEach(fn => fn());
+    cleanupFns.forEach((fn) => fn());
   };
 };
 
-export const applyThemeVariables = (
-  element: HTMLElement,
-  config?: AgentWidgetConfig
-) => {
-  const theme = getActiveTheme(config);
-  Object.entries(theme).forEach(([key, value]) => {
-    // Skip undefined or empty values
-    if (value === undefined || value === null || value === "") {
-      return;
-    }
-    // Convert camelCase to kebab-case (e.g., radiusSm → radius-sm)
-    const kebabKey = key.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
-    element.style.setProperty(`--cw-${kebabKey}`, String(value));
-  });
-};
-
-
-
-
+export { createTheme, resolveTokens, themeToCssVariables };