@umituz/web-design-system 6.11.0 → 6.12.0

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

@@ -0,0 +1,118 @@
+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,
+  accessiaTheme,
+} 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 name', () => {
+    expect(getTheme('accessia').name).toBe('accessia');
+    expect(getTheme('hangora').name).toBe('hangora');
+    expect(getTheme('default').name).toBe('default');
+    expect(getTheme('non-existent').name).toBe('default');
+  });
+
+  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(accessiaTheme);
+    expect(css).toContain('--color-primary: #4e8cff;');
+    expect(css).toContain('--app-primary: #4e8cff;');
+    expect(css).toContain('--color-background: #060a12;');
+    expect(css).toContain('--bg-0: #060a12;');
+    expect(css).toContain('--font-sans:');
+  });
+
+  it('applies theme variables to document head', () => {
+    applyTheme(accessiaTheme);
+    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="accessia" mode="dark">
+        <Consumer />
+      </DesignSystemProvider>
+    );
+
+    expect(screen.getByTestId('theme-name').textContent).toBe('accessia');
+    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/accessia.theme.ts

@@ -0,0 +1,79 @@
+import type { ThemeConfig } from '../../domain/types';
+
+export const accessiaTheme: ThemeConfig = {
+  name: 'accessia',
+  mode: 'dark',
+  colors: {
+    background: '#060a12',
+    foreground: '#e8edf8',
+    card: '#0d1422',
+    cardForeground: '#e8edf8',
+    popover: '#121b2c',
+    popoverForeground: '#e8edf8',
+    primary: '#4e8cff',
+    primaryForeground: '#ffffff',
+    primarySoft: 'rgba(78, 140, 255, 0.13)',
+    secondary: '#121b2c',
+    secondaryForeground: '#e8edf8',
+    muted: '#121b2c',
+    mutedForeground: '#9aa7c0',
+    accent: '#182338',
+    accentForeground: '#e8edf8',
+    border: '#27334a',
+    input: '#27334a',
+    destructive: '#f4585f',
+    destructiveForeground: '#ffffff',
+    ring: 'rgba(78, 140, 255, 0.45)',
+    success: '#3ddc97',
+    successForeground: '#ffffff',
+    warning: '#f5b04a',
+    warningForeground: '#060a12',
+    info: '#4e8cff',
+    infoForeground: '#ffffff',
+  },
+  typography: {
+    fontSans: "'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif",
+    fontMono: "'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace",
+  },
+  radii: {
+    xs: '3px',
+    sm: '5px',
+    md: '8px',
+    lg: '12px',
+    xl: '16px',
+  },
+  customVars: {
+    'bg-0': '#060a12',
+    'bg-1': '#090f1a',
+    'bg-2': '#0d1422',
+    'bg-3': '#121b2c',
+    'bg-4': '#182338',
+    'bg-inset': '#070c15',
+    'line-1': '#1b2536',
+    'line-2': '#27334a',
+    'line-3': '#35435f',
+    'ink-1': '#e8edf8',
+    'ink-2': '#9aa7c0',
+    'ink-3': '#5e6c88',
+    'ink-4': '#3d4a63',
+    'blue': '#4e8cff',
+    'blue-soft': 'rgba(78, 140, 255, 0.13)',
+    'blue-line': 'rgba(78, 140, 255, 0.35)',
+    'green': '#3ddc97',
+    'green-soft': 'rgba(61, 220, 151, 0.12)',
+    'green-line': 'rgba(61, 220, 151, 0.35)',
+    'amber': '#f5b04a',
+    'amber-soft': 'rgba(245, 176, 74, 0.13)',
+    'amber-line': 'rgba(245, 176, 74, 0.35)',
+    'red': '#f4585f',
+    'red-soft': 'rgba(244, 88, 95, 0.12)',
+    'red-line': 'rgba(244, 88, 95, 0.4)',
+    'idle': '#7683a0',
+    'idle-soft': 'rgba(118, 131, 160, 0.14)',
+    'shadow-1': '0 1px 2px rgba(2, 6, 14, 0.5)',
+    'shadow-2': '0 8px 28px rgba(2, 6, 14, 0.55)',
+    'shadow-3': '0 18px 60px rgba(1, 4, 10, 0.7)',
+    'sidebar-w': '250px',
+    'topbar-h': '56px',
+  },
+};

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/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/hangora.theme.ts

@@ -0,0 +1,65 @@
+import type { ThemeConfig } from '../../domain/types';
+
+export const hangoraTheme: ThemeConfig = {
+  name: 'hangora',
+  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,5 @@
+export { accessiaTheme } from './accessia.theme';
+export { hangoraTheme } from './hangora.theme';
+export { defaultTheme } from './default.theme';
+export { registerTheme, getTheme, hasTheme, listThemes } from './registry';
+export { themeToCssVariables, applyTheme } from './apply-theme';

package/src/infrastructure/themes/registry.ts

@@ -0,0 +1,26 @@
+import type { ThemeConfig } from '../../domain/types';
+import { accessiaTheme } from './accessia.theme';
+import { hangoraTheme } from './hangora.theme';
+import { defaultTheme } from './default.theme';
+
+const themeRegistry = new Map<string, ThemeConfig>([
+  ['default', defaultTheme],
+  ['accessia', accessiaTheme],
+  ['hangora', hangoraTheme],
+]);
+
+export function registerTheme(theme: ThemeConfig): void {
+  themeRegistry.set(theme.name, theme);
+}
+
+export function getTheme(name: string): ThemeConfig {
+  return themeRegistry.get(name) ?? defaultTheme;
+}
+
+export function hasTheme(name: string): boolean {
+  return themeRegistry.has(name);
+}
+
+export function listThemes(): string[] {
+  return Array.from(themeRegistry.keys());
+}