@umituz/web-design-system 6.17.0 → 6.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "6.17.0",
+  "version": "6.18.0",
   "private": false,
   "type": "module",
   "description": "Web Design System - Tailwind v4 authored, precompiled CSS shipped. Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications.",

package/src/__tests__/styles.util.test.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest';
+import { createStyles } from '../infrastructure/utils/styles.util';
+
+describe('createStyles utility', () => {
+  it('creates scoped class names matching prefix__property pattern', () => {
+    const styles = createStyles('LiveChat');
+    expect(styles.container).toBe('LiveChat__container');
+    expect(styles.message).toBe('LiveChat__message');
+    expect(styles['themeOption--selected']).toBe('LiveChat__themeOption--selected');
+    expect(styles.unknownKey).toBe('LiveChat__unknownKey');
+  });
+
+  it('handles empty property or symbol safely', () => {
+    const styles = createStyles('TestModule');
+    expect(styles['']).toBe('TestModule__');
+  });
+});

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

@@ -16,6 +16,7 @@ import {
   defaultTheme,
   forestTheme,
   fieldTheme,
+  crimsonTheme,
 } from '../infrastructure/themes';
 import type { ThemeConfig } from '../domain/types';
 
@@ -34,6 +35,8 @@ describe('Theme System and Provider', () => {
     expect(getTheme('ocean').name).toBe('ocean');
     expect(getTheme('forest').name).toBe('forest');
     expect(getTheme('field').name).toBe('field');
+    expect(getTheme('crimson').name).toBe('crimson');
+    expect(crimsonTheme.mode).toBe('dark');
     expect(getTheme('default').name).toBe('default');
     expect(getTheme('non-existent').name).toBe('default');
   });

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

@@ -0,0 +1,180 @@
+import type { ThemeConfig } from '../../domain/types';
+
+export const crimsonTheme: ThemeConfig = {
+  name: 'crimson',
+  mode: 'dark',
+  colors: {
+    background: '#0b0b0f',
+    foreground: '#f4f4f7',
+    card: '#16161d',
+    cardForeground: '#f4f4f7',
+    popover: '#1c1c25',
+    popoverForeground: '#f4f4f7',
+    primary: '#f43f6b',
+    primaryForeground: '#ffffff',
+    primarySoft: 'rgba(244, 63, 107, 0.14)',
+    secondary: '#1c1c25',
+    secondaryForeground: '#a6a6b3',
+    muted: '#1c1c25',
+    mutedForeground: '#71717d',
+    accent: '#22222d',
+    accentForeground: '#f4f4f7',
+    border: '#23232d',
+    input: '#23232d',
+    destructive: '#e02a58',
+    destructiveForeground: '#ffffff',
+    ring: 'rgba(244, 63, 107, 0.4)',
+    success: '#34d399',
+    successForeground: '#ffffff',
+    warning: '#fbbf24',
+    warningForeground: '#ffffff',
+    info: '#62aaf6',
+    infoForeground: '#ffffff',
+    violet: '#a78bfa',
+    violetForeground: '#ffffff',
+  },
+  darkColors: {
+    background: '#0b0b0f',
+    foreground: '#f4f4f7',
+    card: '#16161d',
+    cardForeground: '#f4f4f7',
+    popover: '#1c1c25',
+    popoverForeground: '#f4f4f7',
+    primary: '#f43f6b',
+    primaryForeground: '#ffffff',
+    primarySoft: 'rgba(244, 63, 107, 0.14)',
+    secondary: '#1c1c25',
+    secondaryForeground: '#a6a6b3',
+    muted: '#1c1c25',
+    mutedForeground: '#71717d',
+    accent: '#22222d',
+    accentForeground: '#f4f4f7',
+    border: '#23232d',
+    input: '#23232d',
+    destructive: '#e02a58',
+    destructiveForeground: '#ffffff',
+    ring: 'rgba(244, 63, 107, 0.4)',
+    success: '#34d399',
+    successForeground: '#ffffff',
+    warning: '#fbbf24',
+    warningForeground: '#ffffff',
+    info: '#62aaf6',
+    infoForeground: '#ffffff',
+    violet: '#a78bfa',
+    violetForeground: '#ffffff',
+  },
+  typography: {
+    fontSans: "ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif",
+    fontMono: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+  },
+  radii: {
+    xs: '4px',
+    sm: '8px',
+    md: '12px',
+    lg: '16px',
+    xl: '999px',
+  },
+  customVars: {
+    'bg': '#0b0b0f',
+    'bg-elevated': '#101016',
+    'surface': '#16161d',
+    'surface-hover': '#1c1c25',
+    'surface-active': '#22222d',
+    'border': '#23232d',
+    'border-strong': '#33333f',
+    'text': '#f4f4f7',
+    'text-primary': '#f4f4f7',
+    'text-secondary': '#a6a6b3',
+    'text-muted': '#71717d',
+    'accent': '#f43f6b',
+    'accent-strong': '#e02a58',
+    'accent-contrast': '#ffffff',
+    'accent-soft': 'rgba(244, 63, 107, 0.14)',
+    'accent-border': 'rgba(244, 63, 107, 0.4)',
+    'live': '#ff3b5c',
+    'live-soft': 'rgba(255, 59, 92, 0.16)',
+    'success': '#34d399',
+    'success-soft': 'rgba(52, 211, 153, 0.14)',
+    'warning': '#fbbf24',
+    'gold': '#f5b544',
+    'gold-soft': 'rgba(245, 181, 68, 0.12)',
+    'info': '#62aaf6',
+    'info-soft': 'rgba(98, 170, 246, 0.14)',
+    'violet': '#a78bfa',
+    'violet-soft': 'rgba(167, 139, 250, 0.14)',
+    'overlay': 'rgba(5, 5, 8, 0.72)',
+    'scrim': 'linear-gradient(to top, rgba(8, 8, 12, 0.92) 0%, rgba(8, 8, 12, 0.55) 55%, rgba(8, 8, 12, 0) 100%)',
+    'focus': '#ff8aa6',
+    'space-1': '4px',
+    'space-2': '8px',
+    'space-3': '12px',
+    'space-4': '16px',
+    'space-5': '20px',
+    'space-6': '24px',
+    'space-8': '32px',
+    'space-10': '40px',
+    'space-12': '48px',
+    'space-16': '64px',
+    'radius-sm': '8px',
+    'radius-md': '12px',
+    'radius-lg': '16px',
+    'radius-full': '999px',
+    'leading-tight': '1.25',
+    'leading-normal': '1.45',
+    'weight-regular': '400',
+    'weight-medium': '500',
+    'weight-semibold': '600',
+    'weight-bold': '700',
+    'shadow-sm': '0 1px 2px rgba(0, 0, 0, 0.35)',
+    'shadow-md': '0 4px 16px rgba(0, 0, 0, 0.35)',
+    'shadow-lg': '0 12px 40px rgba(0, 0, 0, 0.45)',
+    'sidebar-width': '240px',
+    'header-height': '56px',
+    'bottomnav-height': '60px',
+    'content-max': '1320px',
+    'chat-column': '356px',
+    'speed-fast': '140ms',
+    'speed': '200ms',
+    'speed-slow': '320ms',
+    'ease': 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+    'z-sticky': '30',
+    'z-dropdown': '40',
+    'z-overlay': '50',
+    'z-toast': '60',
+  },
+  darkCustomVars: {
+    'bg': '#0b0b0f',
+    'bg-elevated': '#101016',
+    'surface': '#16161d',
+    'surface-hover': '#1c1c25',
+    'surface-active': '#22222d',
+    'border': '#23232d',
+    'border-strong': '#33333f',
+    'text': '#f4f4f7',
+    'text-primary': '#f4f4f7',
+    'text-secondary': '#a6a6b3',
+    'text-muted': '#71717d',
+    'accent': '#f43f6b',
+    'accent-strong': '#e02a58',
+    'accent-contrast': '#ffffff',
+    'accent-soft': 'rgba(244, 63, 107, 0.14)',
+    'accent-border': 'rgba(244, 63, 107, 0.4)',
+    'live': '#ff3b5c',
+    'live-soft': 'rgba(255, 59, 92, 0.16)',
+    'success': '#34d399',
+    'success-soft': 'rgba(52, 211, 153, 0.14)',
+    'warning': '#fbbf24',
+    'gold': '#f5b544',
+    'gold-soft': 'rgba(245, 181, 68, 0.12)',
+    'info': '#62aaf6',
+    'info-soft': 'rgba(98, 170, 246, 0.14)',
+    'violet': '#a78bfa',
+    'violet-soft': 'rgba(167, 139, 250, 0.14)',
+    'overlay': 'rgba(5, 5, 8, 0.72)',
+    'scrim': 'linear-gradient(to top, rgba(8, 8, 12, 0.92) 0%, rgba(8, 8, 12, 0.55) 55%, rgba(8, 8, 12, 0) 100%)',
+    'focus': '#ff8aa6',
+    'shadow-sm': '0 1px 2px rgba(0, 0, 0, 0.35)',
+    'shadow-md': '0 4px 16px rgba(0, 0, 0, 0.35)',
+    'shadow-lg': '0 12px 40px rgba(0, 0, 0, 0.45)',
+  },
+};

package/src/infrastructure/themes/index.ts

@@ -4,6 +4,7 @@ export { midnightTheme } from './midnight.theme';
 export { editorialTheme } from './editorial.theme';
 export { forestTheme } from './forest.theme';
 export { fieldTheme } from './field.theme';
+export { crimsonTheme } from './crimson.theme';
 export { createTheme } from './create-theme';
 export type { ThemeOverrides } from './create-theme';
 export { registerTheme, getTheme, hasTheme, listThemes } from './registry';

package/src/infrastructure/themes/registry.ts

@@ -5,6 +5,7 @@ import { midnightTheme } from './midnight.theme';
 import { editorialTheme } from './editorial.theme';
 import { forestTheme } from './forest.theme';
 import { fieldTheme } from './field.theme';
+import { crimsonTheme } from './crimson.theme';
 
 const themeRegistry = new Map<string, ThemeConfig>([
   ['default', defaultTheme],
@@ -13,6 +14,7 @@ const themeRegistry = new Map<string, ThemeConfig>([
   ['editorial', editorialTheme],
   ['forest', forestTheme],
   ['field', fieldTheme],
+  ['crimson', crimsonTheme],
 ]);
 
 export function registerTheme(theme: ThemeConfig): void {

package/src/infrastructure/utils/index.ts

@@ -4,6 +4,8 @@ export {
 } from './cn.util';
 export type { ClassValue } from './cn.util';
 
+export { createStyles } from './styles.util';
+
 export {
   getSpacing,
   getIconSize,

package/src/infrastructure/utils/styles.util.ts

@@ -0,0 +1,5 @@
+export function createStyles(prefix: string): Record<string, string> {
+  return new Proxy({} as Record<string, string>, {
+    get: (_, prop: string | symbol) => (typeof prop === 'string' ? `${prefix}__${prop}` : ''),
+  });
+}