@umituz/web-design-system 6.11.0 → 6.13.0

package/src/__tests__/theme-provider.test.tsx

@@ -0,0 +1,167 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import {
+  DesignSystemProvider,
+  useDesignSystem,
+} from '../presentation/providers/DesignSystemProvider';
+import {
+  getTheme,
+  registerTheme,
+  applyTheme,
+  themeToCssVariables,
+  createTheme,
+  midnightTheme,
+  editorialTheme,
+  oceanTheme,
+  defaultTheme,
+} from '../infrastructure/themes';
+import type { ThemeConfig } from '../domain/types';
+
+describe('Theme System and Provider', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    document.documentElement.className = '';
+    document.documentElement.removeAttribute('data-theme');
+    const existing = document.getElementById('umituz-theme-vars');
+    if (existing) existing.remove();
+  });
+
+  it('retrieves default and built-in themes by generic archetype name', () => {
+    expect(getTheme('midnight').name).toBe('midnight');
+    expect(getTheme('editorial').name).toBe('editorial');
+    expect(getTheme('ocean').name).toBe('ocean');
+    expect(getTheme('default').name).toBe('default');
+    expect(getTheme('non-existent').name).toBe('default');
+  });
+
+  it('allows createTheme to customize an existing preset or define from scratch', () => {
+    const customized = createTheme('midnight', {
+      name: 'midnight-custom',
+      colors: { primary: '#10b981' },
+    });
+
+    expect(customized.name).toBe('midnight-custom');
+    expect(customized.colors.primary).toBe('#10b981');
+    expect(customized.colors.background).toBe(midnightTheme.colors.background);
+
+    const fromScratch = createTheme({
+      name: 'standalone',
+      colors: {
+        background: '#000',
+        foreground: '#fff',
+        card: '#111',
+        cardForeground: '#fff',
+        popover: '#111',
+        popoverForeground: '#fff',
+        primary: '#f00',
+        primaryForeground: '#fff',
+        secondary: '#222',
+        secondaryForeground: '#fff',
+        muted: '#222',
+        mutedForeground: '#888',
+        accent: '#333',
+        accentForeground: '#fff',
+        border: '#444',
+        input: '#444',
+        destructive: '#f00',
+        destructiveForeground: '#fff',
+      },
+    });
+    expect(fromScratch.name).toBe('standalone');
+  });
+
+  it('registers and retrieves custom themes', () => {
+    const custom: ThemeConfig = {
+      name: 'custom-corp',
+      colors: {
+        background: '#111111',
+        foreground: '#eeeeee',
+        card: '#222222',
+        cardForeground: '#eeeeee',
+        popover: '#222222',
+        popoverForeground: '#eeeeee',
+        primary: '#ff0055',
+        primaryForeground: '#ffffff',
+        secondary: '#333333',
+        secondaryForeground: '#ffffff',
+        muted: '#333333',
+        mutedForeground: '#888888',
+        accent: '#444444',
+        accentForeground: '#ffffff',
+        border: '#555555',
+        input: '#555555',
+        destructive: '#ff0000',
+        destructiveForeground: '#ffffff',
+      },
+    };
+
+    registerTheme(custom);
+    expect(getTheme('custom-corp').colors.primary).toBe('#ff0055');
+  });
+
+  it('converts theme config to CSS variables string', () => {
+    const css = themeToCssVariables(midnightTheme);
+    expect(css).toContain('--color-primary: #4e8cff;');
+    expect(css).toContain('--app-primary: #4e8cff;');
+    expect(css).toContain('--color-background: #060a12;');
+    expect(css).toContain('--font-sans:');
+
+    const editorialCss = themeToCssVariables(editorialTheme);
+    expect(editorialCss).toContain('--color-primary: #33406b;');
+
+    const oceanCss = themeToCssVariables(oceanTheme);
+    expect(oceanCss).toContain('--color-primary: #0284c7;');
+
+    const defaultCss = themeToCssVariables(defaultTheme);
+    expect(defaultCss).toContain('--color-primary: #2563eb;');
+  });
+
+  it('applies theme variables to document head', () => {
+    applyTheme(midnightTheme);
+    const styleEl = document.getElementById('umituz-theme-vars');
+    expect(styleEl).toBeTruthy();
+    expect(styleEl?.textContent).toContain('--color-primary: #4e8cff;');
+  });
+
+  it('DesignSystemProvider provides theme and allows mode toggle', () => {
+    function Consumer() {
+      const { theme, mode, toggleMode, setMode } = useDesignSystem();
+      return (
+        <div>
+          <span data-testid="theme-name">{theme.name}</span>
+          <span data-testid="theme-mode">{mode}</span>
+          <button data-testid="toggle-btn" onClick={toggleMode}>
+            Toggle
+          </button>
+          <button data-testid="set-dark" onClick={() => setMode('dark')}>
+            Dark
+          </button>
+        </div>
+      );
+    }
+
+    render(
+      <DesignSystemProvider theme="midnight" mode="dark">
+        <Consumer />
+      </DesignSystemProvider>
+    );
+
+    expect(screen.getByTestId('theme-name').textContent).toBe('midnight');
+    expect(screen.getByTestId('theme-mode').textContent).toBe('dark');
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+
+    act(() => {
+      screen.getByTestId('toggle-btn').click();
+    });
+
+    expect(screen.getByTestId('theme-mode').textContent).toBe('light');
+    expect(document.documentElement.classList.contains('dark')).toBe(false);
+
+    act(() => {
+      screen.getByTestId('set-dark').click();
+    });
+
+    expect(screen.getByTestId('theme-mode').textContent).toBe('dark');
+    expect(document.documentElement.classList.contains('dark')).toBe(true);
+  });
+});

package/src/domain/types/index.ts

@@ -18,3 +18,12 @@ export type {
   BreakpointState,
   UseBreakpointReturn,
 } from './breakpoint.types';
+
+export type {
+  ThemeMode,
+  ThemeColors,
+  ThemeTypography,
+  ThemeRadii,
+  ThemeConfig,
+} from './theme.types';
+

package/src/domain/types/theme.types.ts

@@ -0,0 +1,56 @@
+export type ThemeMode = 'light' | 'dark' | 'system';
+
+export interface ThemeColors {
+  background: string;
+  foreground: string;
+  card: string;
+  cardForeground: string;
+  popover: string;
+  popoverForeground: string;
+  primary: string;
+  primaryForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  muted: string;
+  mutedForeground: string;
+  accent: string;
+  accentForeground: string;
+  border: string;
+  input: string;
+  destructive: string;
+  destructiveForeground: string;
+  ring?: string;
+  success?: string;
+  successForeground?: string;
+  warning?: string;
+  warningForeground?: string;
+  info?: string;
+  infoForeground?: string;
+  violet?: string;
+  violetForeground?: string;
+  primarySoft?: string;
+}
+
+export interface ThemeTypography {
+  fontSans?: string;
+  fontMono?: string;
+  fontDisplay?: string;
+}
+
+export interface ThemeRadii {
+  xs?: string;
+  sm?: string;
+  md?: string;
+  lg?: string;
+  xl?: string;
+}
+
+export interface ThemeConfig {
+  name: string;
+  mode?: 'light' | 'dark';
+  colors: ThemeColors;
+  darkColors?: Partial<ThemeColors>;
+  typography?: ThemeTypography;
+  radii?: ThemeRadii;
+  customVars?: Record<string, string>;
+}

package/src/index.ts

@@ -1,19 +1,23 @@
-// Core Tokens, Types, Constants, Hooks & Utils
 export * from './domain/tokens';
 export * from './domain/types';
 export * from './infrastructure/utils';
 export * from './infrastructure/constants';
+export * from './infrastructure/themes';
 export * from './presentation/hooks';
-
-// Templates
 export * from './presentation/templates';
-
-// Organisms
 export * from './presentation/organisms';
+export * from './presentation/providers';
+
 
-// Atoms
 export type { ButtonProps } from './presentation/atoms/Button';
 export { Button, buttonVariants } from './presentation/atoms/Button';
+export type { StackProps, StackGap, StackAlign, StackJustify } from './presentation/atoms/Stack';
+export { Stack } from './presentation/atoms/Stack';
+export type { RowProps, RowGap, RowAlign, RowJustify } from './presentation/atoms/Row';
+export { Row } from './presentation/atoms/Row';
+export type { GridProps, GridCols, GridColsNumber, ResponsiveGridCols, GridGap } from './presentation/atoms/Grid';
+export { Grid } from './presentation/atoms/Grid';
+
 export type { BadgeProps, BadgeVariant } from './presentation/atoms/Badge';
 export { Badge } from './presentation/atoms/Badge';
 export type { InputProps } from './presentation/atoms/Input';
@@ -74,7 +78,6 @@ export type { CopyButtonProps } from './presentation/atoms/CopyButton';
 export { StatusDot } from './presentation/atoms/StatusDot';
 export type { StatusDotProps, StatusType } from './presentation/atoms/StatusDot';
 
-// Molecules
 export type { FormFieldProps } from './presentation/molecules/FormField';
 export { FormField } from './presentation/molecules/FormField';
 export type { SearchBoxProps } from './presentation/molecules/SearchBox';

package/src/infrastructure/themes/apply-theme.ts

@@ -0,0 +1,149 @@
+import type { ThemeConfig, ThemeColors } from '../../domain/types';
+import { getTheme } from './registry';
+
+function colorPropsToCss(colors: ThemeColors): string {
+  const lines: string[] = [];
+  const entries: [keyof ThemeColors, string][] = [
+    ['background', '--color-background'],
+    ['foreground', '--color-foreground'],
+    ['card', '--color-card'],
+    ['cardForeground', '--color-card-foreground'],
+    ['popover', '--color-popover'],
+    ['popoverForeground', '--color-popover-foreground'],
+    ['primary', '--color-primary'],
+    ['primaryForeground', '--color-primary-foreground'],
+    ['secondary', '--color-secondary'],
+    ['secondaryForeground', '--color-secondary-foreground'],
+    ['muted', '--color-muted'],
+    ['mutedForeground', '--color-muted-foreground'],
+    ['accent', '--color-accent'],
+    ['accentForeground', '--color-accent-foreground'],
+    ['border', '--color-border'],
+    ['input', '--color-input'],
+    ['destructive', '--color-destructive'],
+    ['destructiveForeground', '--color-destructive-foreground'],
+  ];
+
+  for (const [key, cssVar] of entries) {
+    const val = colors[key];
+    if (val) {
+      lines.push(`${cssVar}: ${val};`);
+      const appVar = cssVar.replace('--color-', '--app-');
+      lines.push(`${appVar}: ${val};`);
+    }
+  }
+
+  if (colors.ring) {
+    lines.push(`--color-ring: ${colors.ring};`);
+    lines.push(`--app-ring: ${colors.ring};`);
+  }
+  if (colors.success) {
+    lines.push(`--color-success: ${colors.success};`);
+    lines.push(`--app-success: ${colors.success};`);
+  }
+  if (colors.successForeground) {
+    lines.push(`--color-success-foreground: ${colors.successForeground};`);
+    lines.push(`--app-success-foreground: ${colors.successForeground};`);
+  }
+  if (colors.warning) {
+    lines.push(`--color-warning: ${colors.warning};`);
+    lines.push(`--app-warning: ${colors.warning};`);
+  }
+  if (colors.warningForeground) {
+    lines.push(`--color-warning-foreground: ${colors.warningForeground};`);
+    lines.push(`--app-warning-foreground: ${colors.warningForeground};`);
+  }
+  if (colors.info) {
+    lines.push(`--color-info: ${colors.info};`);
+    lines.push(`--app-info: ${colors.info};`);
+  }
+  if (colors.infoForeground) {
+    lines.push(`--color-info-foreground: ${colors.infoForeground};`);
+    lines.push(`--app-info-foreground: ${colors.infoForeground};`);
+  }
+  if (colors.violet) {
+    lines.push(`--color-violet: ${colors.violet};`);
+    lines.push(`--app-violet: ${colors.violet};`);
+  }
+  if (colors.violetForeground) {
+    lines.push(`--color-violet-foreground: ${colors.violetForeground};`);
+    lines.push(`--app-violet-foreground: ${colors.violetForeground};`);
+  }
+  if (colors.primarySoft) {
+    lines.push(`--color-primary-soft: ${colors.primarySoft};`);
+    lines.push(`--app-primary-soft: ${colors.primarySoft};`);
+  }
+
+  return lines.join('\n  ');
+}
+
+export function themeToCssVariables(theme: ThemeConfig): string {
+  const rootLines: string[] = [colorPropsToCss(theme.colors)];
+
+  if (theme.typography?.fontSans) {
+    rootLines.push(`--font-sans: ${theme.typography.fontSans};`);
+    rootLines.push(`--app-font-sans: ${theme.typography.fontSans};`);
+  }
+  if (theme.typography?.fontMono) {
+    rootLines.push(`--font-mono: ${theme.typography.fontMono};`);
+    rootLines.push(`--app-font-mono: ${theme.typography.fontMono};`);
+  }
+  if (theme.typography?.fontDisplay) {
+    rootLines.push(`--font-display: ${theme.typography.fontDisplay};`);
+  }
+
+  if (theme.radii) {
+    if (theme.radii.xs) rootLines.push(`--radius-xs: ${theme.radii.xs};`);
+    if (theme.radii.sm) rootLines.push(`--radius-sm: ${theme.radii.sm};`);
+    if (theme.radii.md) rootLines.push(`--radius-md: ${theme.radii.md};`);
+    if (theme.radii.lg) rootLines.push(`--radius-lg: ${theme.radii.lg};`);
+    if (theme.radii.xl) rootLines.push(`--radius-xl: ${theme.radii.xl};`);
+  }
+
+  if (theme.customVars) {
+    for (const [k, v] of Object.entries(theme.customVars)) {
+      rootLines.push(`--${k}: ${v};`);
+    }
+  }
+
+  let css = `:root {\n  ${rootLines.join('\n  ')}\n}\n`;
+
+  if (theme.darkColors && Object.keys(theme.darkColors).length > 0) {
+    const darkMerged: ThemeColors = {
+      ...theme.colors,
+      ...theme.darkColors,
+    };
+    css += `\n.dark, [data-theme="dark"] {\n  ${colorPropsToCss(darkMerged)}\n}\n`;
+  }
+
+  return css;
+}
+
+export function applyTheme(
+  themeOrName: string | ThemeConfig,
+  targetDoc?: Document
+): ThemeConfig {
+  const theme = typeof themeOrName === 'string' ? getTheme(themeOrName) : themeOrName;
+  const doc = targetDoc ?? (typeof document !== 'undefined' ? document : undefined);
+  if (!doc) return theme;
+
+  const styleId = 'umituz-theme-vars';
+  let styleEl = doc.getElementById(styleId) as HTMLStyleElement | null;
+  if (!styleEl) {
+    styleEl = doc.createElement('style');
+    styleEl.id = styleId;
+    doc.head.appendChild(styleEl);
+  }
+
+  styleEl.textContent = themeToCssVariables(theme);
+
+  if (theme.mode === 'dark') {
+    doc.documentElement.classList.add('dark');
+    doc.documentElement.setAttribute('data-theme', 'dark');
+  } else if (theme.mode === 'light') {
+    doc.documentElement.classList.remove('dark');
+    doc.documentElement.setAttribute('data-theme', 'light');
+  }
+
+  return theme;
+}

package/src/infrastructure/themes/create-theme.ts

@@ -0,0 +1,49 @@
+import type { ThemeConfig, ThemeColors, ThemeTypography, ThemeRadii } from '../../domain/types';
+import { getTheme } from './registry';
+
+export interface ThemeOverrides {
+  name?: string;
+  mode?: 'light' | 'dark';
+  colors?: Partial<ThemeColors>;
+  darkColors?: Partial<ThemeColors>;
+  typography?: Partial<ThemeTypography>;
+  radii?: Partial<ThemeRadii>;
+  customVars?: Record<string, string>;
+}
+
+export function createTheme(
+  baseOrConfig: string | ThemeConfig,
+  overrides?: ThemeOverrides
+): ThemeConfig {
+  if (typeof baseOrConfig === 'object' && !overrides) {
+    return baseOrConfig;
+  }
+
+  const base = typeof baseOrConfig === 'string' ? getTheme(baseOrConfig) : baseOrConfig;
+  if (!overrides) return base;
+
+  return {
+    name: overrides.name ?? base.name,
+    mode: overrides.mode ?? base.mode,
+    colors: {
+      ...base.colors,
+      ...(overrides.colors ?? {}),
+    },
+    darkColors: {
+      ...(base.darkColors ?? {}),
+      ...(overrides.darkColors ?? {}),
+    },
+    typography: {
+      ...(base.typography ?? {}),
+      ...(overrides.typography ?? {}),
+    },
+    radii: {
+      ...(base.radii ?? {}),
+      ...(overrides.radii ?? {}),
+    },
+    customVars: {
+      ...(base.customVars ?? {}),
+      ...(overrides.customVars ?? {}),
+    },
+  };
+}

package/src/infrastructure/themes/default.theme.ts

@@ -0,0 +1,73 @@
+import type { ThemeConfig } from '../../domain/types';
+
+export const defaultTheme: ThemeConfig = {
+  name: 'default',
+  mode: 'light',
+  colors: {
+    background: '#f8fafc',
+    foreground: '#0f172a',
+    card: '#ffffff',
+    cardForeground: '#0f172a',
+    popover: '#ffffff',
+    popoverForeground: '#0f172a',
+    primary: '#2563eb',
+    primaryForeground: '#ffffff',
+    primarySoft: 'rgba(37, 99, 235, 0.1)',
+    secondary: '#8b5cf6',
+    secondaryForeground: '#ffffff',
+    muted: '#f1f5f9',
+    mutedForeground: '#64748b',
+    accent: '#f1f5f9',
+    accentForeground: '#0f172a',
+    border: '#e2e8f0',
+    input: '#e2e8f0',
+    destructive: '#dc2626',
+    destructiveForeground: '#ffffff',
+    ring: 'rgba(37, 99, 235, 0.45)',
+    success: '#16a34a',
+    successForeground: '#ffffff',
+    warning: '#d97706',
+    warningForeground: '#ffffff',
+    info: '#2563eb',
+    infoForeground: '#ffffff',
+    violet: '#7c3aed',
+    violetForeground: '#ffffff',
+  },
+  darkColors: {
+    background: '#0b1120',
+    foreground: '#f1f5f9',
+    card: '#111827',
+    cardForeground: '#f1f5f9',
+    popover: '#111827',
+    popoverForeground: '#f1f5f9',
+    primary: '#3b82f6',
+    primaryForeground: '#ffffff',
+    secondary: '#a78bfa',
+    secondaryForeground: '#ffffff',
+    muted: '#1e293b',
+    mutedForeground: '#94a3b8',
+    accent: '#1e293b',
+    accentForeground: '#f1f5f9',
+    border: '#1f2a3c',
+    input: '#1f2a3c',
+    destructive: '#ef4444',
+    destructiveForeground: '#ffffff',
+    ring: 'rgba(59, 130, 246, 0.5)',
+    success: '#22c55e',
+    successForeground: '#ffffff',
+    warning: '#f59e0b',
+    warningForeground: '#ffffff',
+    info: '#3b82f6',
+    infoForeground: '#ffffff',
+  },
+  typography: {
+    fontSans: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    fontMono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  },
+  radii: {
+    sm: '6px',
+    md: '8px',
+    lg: '12px',
+    xl: '16px',
+  },
+};

package/src/infrastructure/themes/editorial.theme.ts

@@ -0,0 +1,65 @@
+import type { ThemeConfig } from '../../domain/types';
+
+export const editorialTheme: ThemeConfig = {
+  name: 'editorial',
+  mode: 'light',
+  colors: {
+    background: '#f4f1e9',
+    foreground: '#23252b',
+    card: '#fdfcf8',
+    cardForeground: '#23252b',
+    popover: '#fdfcf8',
+    popoverForeground: '#23252b',
+    primary: '#33406b',
+    primaryForeground: '#ffffff',
+    primarySoft: 'rgba(51, 64, 107, 0.12)',
+    secondary: '#efeadc',
+    secondaryForeground: '#5a5d66',
+    muted: '#efeadc',
+    mutedForeground: '#5a5d66',
+    accent: '#efeadc',
+    accentForeground: '#23252b',
+    border: '#e5e1d4',
+    input: '#d4cfbf',
+    destructive: '#a6483f',
+    destructiveForeground: '#ffffff',
+    ring: 'rgba(51, 64, 107, 0.4)',
+    success: '#3b7a5e',
+    successForeground: '#ffffff',
+    warning: '#a26b2f',
+    warningForeground: '#ffffff',
+    info: '#46618f',
+    infoForeground: '#ffffff',
+  },
+  darkColors: {
+    background: '#14161f',
+    foreground: '#eceadf',
+    card: '#1b1e2a',
+    cardForeground: '#eceadf',
+    popover: '#1b1e2a',
+    popoverForeground: '#eceadf',
+    primary: '#7f92cc',
+    primaryForeground: '#14161f',
+    secondary: '#212533',
+    secondaryForeground: '#a8abba',
+    muted: '#212533',
+    mutedForeground: '#a8abba',
+    accent: '#212533',
+    accentForeground: '#eceadf',
+    border: '#2e3344',
+    input: '#3d4358',
+    destructive: '#c2665c',
+    destructiveForeground: '#2a1210',
+    ring: 'rgba(143, 160, 214, 0.4)',
+    success: '#5ea184',
+    successForeground: '#0e1f17',
+    warning: '#c98f4a',
+    warningForeground: '#221607',
+    info: '#7f92cc',
+    infoForeground: '#0e1424',
+  },
+  typography: {
+    fontSans: '"Hanken Grotesk", "Noto Sans", -apple-system, "Segoe UI", sans-serif',
+    fontDisplay: '"Newsreader", "Iowan Old Style", Georgia, serif',
+  },
+};

package/src/infrastructure/themes/index.ts

@@ -0,0 +1,8 @@
+export { defaultTheme } from './default.theme';
+export { oceanTheme } from './ocean.theme';
+export { midnightTheme } from './midnight.theme';
+export { editorialTheme } from './editorial.theme';
+export { createTheme } from './create-theme';
+export type { ThemeOverrides } from './create-theme';
+export { registerTheme, getTheme, hasTheme, listThemes } from './registry';
+export { themeToCssVariables, applyTheme } from './apply-theme';