@umituz/web-design-system 6.12.0 → 6.14.0

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

@@ -9,7 +9,11 @@ import {
   registerTheme,
   applyTheme,
   themeToCssVariables,
-  accessiaTheme,
+  createTheme,
+  midnightTheme,
+  editorialTheme,
+  oceanTheme,
+  defaultTheme,
 } from '../infrastructure/themes';
 import type { ThemeConfig } from '../domain/types';
 
@@ -22,13 +26,50 @@ describe('Theme System and Provider', () => {
     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');
+  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',
@@ -59,16 +100,24 @@ describe('Theme System and Provider', () => {
   });
 
   it('converts theme config to CSS variables string', () => {
-    const css = themeToCssVariables(accessiaTheme);
+    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('--bg-0: #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(accessiaTheme);
+    applyTheme(midnightTheme);
     const styleEl = document.getElementById('umituz-theme-vars');
     expect(styleEl).toBeTruthy();
     expect(styleEl?.textContent).toContain('--color-primary: #4e8cff;');
@@ -92,12 +141,12 @@ describe('Theme System and Provider', () => {
     }
 
     render(
-      <DesignSystemProvider theme="accessia" mode="dark">
+      <DesignSystemProvider theme="midnight" mode="dark">
         <Consumer />
       </DesignSystemProvider>
     );
 
-    expect(screen.getByTestId('theme-name').textContent).toBe('accessia');
+    expect(screen.getByTestId('theme-name').textContent).toBe('midnight');
     expect(screen.getByTestId('theme-mode').textContent).toBe('dark');
     expect(document.documentElement.classList.contains('dark')).toBe(true);
 

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/{hangora.theme.ts → editorial.theme.ts}

@@ -1,7 +1,7 @@
 import type { ThemeConfig } from '../../domain/types';
 
-export const hangoraTheme: ThemeConfig = {
-  name: 'hangora',
+export const editorialTheme: ThemeConfig = {
+  name: 'editorial',
   mode: 'light',
   colors: {
     background: '#f4f1e9',

package/src/infrastructure/themes/index.ts

@@ -1,5 +1,8 @@
-export { accessiaTheme } from './accessia.theme';
-export { hangoraTheme } from './hangora.theme';
 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';

package/src/infrastructure/themes/{accessia.theme.ts → midnight.theme.ts}

@@ -1,7 +1,7 @@
 import type { ThemeConfig } from '../../domain/types';
 
-export const accessiaTheme: ThemeConfig = {
-  name: 'accessia',
+export const midnightTheme: ThemeConfig = {
+  name: 'midnight',
   mode: 'dark',
   colors: {
     background: '#060a12',

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

@@ -0,0 +1,71 @@
+import type { ThemeConfig } from '../../domain/types';
+
+export const oceanTheme: ThemeConfig = {
+  name: 'ocean',
+  mode: 'light',
+  colors: {
+    background: '#f8fafc',
+    foreground: '#0f172a',
+    card: '#ffffff',
+    cardForeground: '#0f172a',
+    popover: '#ffffff',
+    popoverForeground: '#0f172a',
+    primary: '#0284c7',
+    primaryForeground: '#ffffff',
+    primarySoft: 'rgba(2, 132, 199, 0.1)',
+    secondary: '#0ea5e9',
+    secondaryForeground: '#ffffff',
+    muted: '#f0f9ff',
+    mutedForeground: '#64748b',
+    accent: '#e0f2fe',
+    accentForeground: '#0369a1',
+    border: '#e2e8f0',
+    input: '#e2e8f0',
+    destructive: '#ef4444',
+    destructiveForeground: '#ffffff',
+    ring: 'rgba(2, 132, 199, 0.45)',
+    success: '#10b981',
+    successForeground: '#ffffff',
+    warning: '#f59e0b',
+    warningForeground: '#ffffff',
+    info: '#0284c7',
+    infoForeground: '#ffffff',
+  },
+  darkColors: {
+    background: '#08111e',
+    foreground: '#f0f9ff',
+    card: '#0c1a2e',
+    cardForeground: '#f0f9ff',
+    popover: '#0c1a2e',
+    popoverForeground: '#f0f9ff',
+    primary: '#38bdf8',
+    primaryForeground: '#08111e',
+    secondary: '#0284c7',
+    secondaryForeground: '#ffffff',
+    muted: '#13233b',
+    mutedForeground: '#94a3b8',
+    accent: '#183052',
+    accentForeground: '#7dd3fc',
+    border: '#1b3252',
+    input: '#1b3252',
+    destructive: '#f87171',
+    destructiveForeground: '#ffffff',
+    ring: 'rgba(56, 189, 248, 0.5)',
+    success: '#34d399',
+    successForeground: '#ffffff',
+    warning: '#fbbf24',
+    warningForeground: '#ffffff',
+    info: '#38bdf8',
+    infoForeground: '#ffffff',
+  },
+  typography: {
+    fontSans: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+    fontMono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+  },
+  radii: {
+    sm: '6px',
+    md: '8px',
+    lg: '12px',
+    xl: '16px',
+  },
+};

package/src/infrastructure/themes/registry.ts

@@ -1,12 +1,14 @@
 import type { ThemeConfig } from '../../domain/types';
-import { accessiaTheme } from './accessia.theme';
-import { hangoraTheme } from './hangora.theme';
 import { defaultTheme } from './default.theme';
+import { oceanTheme } from './ocean.theme';
+import { midnightTheme } from './midnight.theme';
+import { editorialTheme } from './editorial.theme';
 
 const themeRegistry = new Map<string, ThemeConfig>([
   ['default', defaultTheme],
-  ['accessia', accessiaTheme],
-  ['hangora', hangoraTheme],
+  ['ocean', oceanTheme],
+  ['midnight', midnightTheme],
+  ['editorial', editorialTheme],
 ]);
 
 export function registerTheme(theme: ThemeConfig): void {

package/src/styles/compile.css

@@ -3,6 +3,7 @@
 @import "tw-animate-css";
 @import "./theme.css";
 @import "./charts.css";
+@import "./console.css";
 @source "../src";
 
 @media (max-width: 767.98px) {