@umituz/web-design-system 6.15.0 → 6.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "6.15.0",
+  "version": "6.16.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__/condition-pips.test.tsx

@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { ConditionPips } from '../presentation/molecules/ConditionPips';
+
+describe('ConditionPips', () => {
+  it('renders score pips with default max of 5', () => {
+    const { container } = render(<ConditionPips score={3} />);
+    const root = container.querySelector('.cond-pips');
+    expect(root).toBeDefined();
+    expect(root?.getAttribute('aria-label')).toBe('3/5');
+
+    const pips = container.querySelectorAll('.pip');
+    expect(pips.length).toBe(5);
+
+    const onPips = container.querySelectorAll('.pip.on');
+    expect(onPips.length).toBe(3);
+  });
+
+  it('handles custom max and zero or null scores', () => {
+    const { container: c1 } = render(<ConditionPips score={null} max={4} />);
+    const root1 = c1.querySelector('.cond-pips');
+    expect(root1?.getAttribute('aria-label')).toBe('0/4');
+    expect(c1.querySelectorAll('.pip').length).toBe(4);
+    expect(c1.querySelectorAll('.pip.on').length).toBe(0);
+
+    const { container: c2 } = render(<ConditionPips score={7} max={5} ariaLabel="Excellent (5/5)" />);
+    const root2 = c2.querySelector('.cond-pips');
+    expect(root2?.getAttribute('aria-label')).toBe('Excellent (5/5)');
+    expect(c2.querySelectorAll('.pip.on').length).toBe(5);
+  });
+});

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

@@ -15,6 +15,7 @@ import {
   oceanTheme,
   defaultTheme,
   forestTheme,
+  fieldTheme,
 } from '../infrastructure/themes';
 import type { ThemeConfig } from '../domain/types';
 
@@ -32,6 +33,7 @@ describe('Theme System and Provider', () => {
     expect(getTheme('editorial').name).toBe('editorial');
     expect(getTheme('ocean').name).toBe('ocean');
     expect(getTheme('forest').name).toBe('forest');
+    expect(getTheme('field').name).toBe('field');
     expect(getTheme('default').name).toBe('default');
     expect(getTheme('non-existent').name).toBe('default');
   });
@@ -171,4 +173,14 @@ describe('Theme System and Provider', () => {
     expect(screen.getByTestId('theme-mode').textContent).toBe('dark');
     expect(document.documentElement.classList.contains('dark')).toBe(true);
   });
+
+  it('generates field theme CSS custom variables and dark mode overrides', () => {
+    const css = themeToCssVariables(fieldTheme);
+    expect(css).toContain('--paper: #f4f3ee;');
+    expect(css).toContain('--primary-500: #357344;');
+    expect(css).toContain('--font-display: \'Fraunces\', Georgia, serif;');
+    expect(css).toContain('.dark, [data-theme="dark"]');
+    expect(css).toContain('--paper: #10140f;');
+    expect(css).toContain('--primary-500: #6aa878;');
+  });
 });

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

@@ -53,4 +53,5 @@ export interface ThemeConfig {
   typography?: ThemeTypography;
   radii?: ThemeRadii;
   customVars?: Record<string, string>;
+  darkCustomVars?: Record<string, string>;
 }

package/src/index.ts

@@ -151,4 +151,6 @@ export { EntityRow } from './presentation/molecules/EntityRow';
 export type { EntityRowProps } from './presentation/molecules/EntityRow';
 export { PlaceholderPanel } from './presentation/molecules/PlaceholderPanel';
 export type { PlaceholderPanelProps } from './presentation/molecules/PlaceholderPanel';
+export { ConditionPips } from './presentation/molecules/ConditionPips';
+export type { ConditionPipsProps } from './presentation/molecules/ConditionPips';
 

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

@@ -108,12 +108,24 @@ export function themeToCssVariables(theme: ThemeConfig): string {
 
   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`;
+  const hasDarkColors = Boolean(theme.darkColors && Object.keys(theme.darkColors).length > 0);
+  const hasDarkVars = Boolean(theme.darkCustomVars && Object.keys(theme.darkCustomVars).length > 0);
+
+  if (hasDarkColors || hasDarkVars) {
+    const darkLines: string[] = [];
+    if (hasDarkColors) {
+      const darkMerged: ThemeColors = {
+        ...theme.colors,
+        ...theme.darkColors,
+      };
+      darkLines.push(colorPropsToCss(darkMerged));
+    }
+    if (hasDarkVars && theme.darkCustomVars) {
+      for (const [k, v] of Object.entries(theme.darkCustomVars)) {
+        darkLines.push(`--${k}: ${v};`);
+      }
+    }
+    css += `\n.dark, [data-theme="dark"] {\n  ${darkLines.join('\n  ')}\n}\n`;
   }
 
   return css;

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

@@ -0,0 +1,230 @@
+import type { ThemeConfig } from '../../domain/types';
+
+export const fieldTheme: ThemeConfig = {
+  name: 'field',
+  mode: 'light',
+  colors: {
+    background: '#f4f3ee',
+    foreground: '#1a231c',
+    card: '#ffffff',
+    cardForeground: '#212c23',
+    popover: '#ffffff',
+    popoverForeground: '#212c23',
+    primary: '#357344',
+    primaryForeground: '#ffffff',
+    primarySoft: '#dcead9',
+    secondary: '#f1f4ef',
+    secondaryForeground: '#2b382d',
+    muted: '#edebe3',
+    mutedForeground: '#5a655b',
+    accent: '#f5e8d3',
+    accentForeground: '#c9862f',
+    border: '#e2dfd3',
+    input: '#cfcaba',
+    destructive: '#a53f2a',
+    destructiveForeground: '#ffffff',
+    ring: 'rgba(53, 115, 68, 0.45)',
+    success: '#2f6b40',
+    successForeground: '#ffffff',
+    warning: '#96690f',
+    warningForeground: '#ffffff',
+    info: '#3e5f80',
+    infoForeground: '#ffffff',
+  },
+  darkColors: {
+    background: '#10140f',
+    foreground: '#edf0e7',
+    card: '#191f18',
+    cardForeground: '#dce1d2',
+    popover: '#191f18',
+    popoverForeground: '#dce1d2',
+    primary: '#6aa878',
+    primaryForeground: '#10140f',
+    secondary: '#1f261e',
+    secondaryForeground: '#c3c9b6',
+    muted: '#151a14',
+    mutedForeground: '#828b79',
+    accent: 'rgba(217, 165, 79, 0.15)',
+    accentForeground: '#cf9a48',
+    border: '#262e24',
+    input: '#333d30',
+    destructive: '#d07a63',
+    destructiveForeground: '#10140f',
+    ring: 'rgba(122, 183, 136, 0.45)',
+    success: '#7cb989',
+    successForeground: '#10140f',
+    warning: '#d3a04e',
+    warningForeground: '#10140f',
+    info: '#8fb0d4',
+    infoForeground: '#10140f',
+  },
+  typography: {
+    fontSans: "'Archivo', 'Segoe UI', system-ui, sans-serif",
+    fontDisplay: "'Fraunces', Georgia, serif",
+    fontMono: "'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace",
+  },
+  radii: {
+    xs: '2px',
+    sm: '4px',
+    md: '6px',
+    lg: '9px',
+    xl: '999px',
+  },
+  customVars: {
+    paper: '#f4f3ee',
+    'paper-deep': '#edebe3',
+    surface: '#ffffff',
+    'surface-sunken': '#faf9f5',
+    'surface-tint': '#f1f4ef',
+    'ink-900': '#1a231c',
+    'ink-800': '#212c23',
+    'ink-700': '#2b382d',
+    'ink-600': '#414d42',
+    'ink-500': '#5a655b',
+    'ink-400': '#79827a',
+    'ink-300': '#9aa29a',
+    'ink-200': '#c3c8bd',
+    'ink-100': '#dfe2d8',
+    'chrome-900': '#131f17',
+    'chrome-800': '#16251b',
+    'chrome-700': '#1c2e21',
+    'chrome-600': '#233a2a',
+    'chrome-500': '#2c4734',
+    'chrome-line': '#2a3f30',
+    'chrome-text': '#c5cfc4',
+    'chrome-text-dim': '#7f9484',
+    'chrome-active': '#d8e6d4',
+    'primary-700': '#24502f',
+    'primary-600': '#2c6139',
+    'primary-500': '#357344',
+    'primary-100': '#dcead9',
+    'primary-050': '#edf4ea',
+    'accent-600': '#b06e22',
+    'accent-500': '#c9862f',
+    'accent-100': '#f5e8d3',
+    'status-success': '#2f6b40',
+    'status-success-bg': '#e2efdf',
+    'status-warning': '#96690f',
+    'status-warning-bg': '#f6ecd4',
+    'status-danger': '#a53f2a',
+    'status-danger-bg': '#f7e2db',
+    'status-info': '#3e5f80',
+    'status-info-bg': '#e0eaf2',
+    'status-neutral': '#55605a',
+    'status-neutral-bg': '#e8eae4',
+    'status-critical': '#8f1f14',
+    'danger-600': '#a53f2a',
+    'warning-600': '#96690f',
+    line: '#e2dfd3',
+    'line-strong': '#cfcaba',
+    'line-chrome': '#2a3f30',
+    'font-ui': "'Archivo', 'Segoe UI', system-ui, sans-serif",
+    'font-display': "'Fraunces', Georgia, serif",
+    'font-mono': "'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace",
+    'text-xs': '11px',
+    'text-sm': '12.5px',
+    'text-base': '13.5px',
+    'text-md': '15px',
+    'text-lg': '17px',
+    'text-xl': '21px',
+    'text-2xl': '26px',
+    'sp-1': '4px',
+    'sp-2': '8px',
+    'sp-3': '12px',
+    'sp-4': '16px',
+    'sp-5': '20px',
+    'sp-6': '24px',
+    'sp-7': '32px',
+    'sp-8': '40px',
+    'sp-9': '56px',
+    'r-sm': '4px',
+    'r-md': '6px',
+    'r-lg': '9px',
+    'r-pill': '999px',
+    'shadow-1': '0 1px 2px rgba(26, 35, 28, 0.05)',
+    'shadow-2': '0 2px 6px rgba(26, 35, 28, 0.07), 0 1px 2px rgba(26, 35, 28, 0.05)',
+    'shadow-3': '0 12px 32px -8px rgba(26, 35, 28, 0.18), 0 2px 6px rgba(26, 35, 28, 0.06)',
+    'shadow-overlay': '0 24px 64px -16px rgba(19, 31, 23, 0.35)',
+    'sidebar-w': '244px',
+    'sidebar-w-collapsed': '64px',
+    'topbar-h': '54px',
+    'page-max': '1560px',
+    'chart-1': '#357344',
+    'chart-2': '#b06e22',
+    'chart-3': '#3e5f80',
+    'chart-4': '#7a6ba8',
+    'chart-5': '#8a5a3b',
+    'chart-6': '#5e7d5a',
+    'chart-faint': '#e5e9df',
+    'tint-hover': 'rgba(26, 35, 28, 0.06)',
+    'tint-press': 'rgba(26, 35, 28, 0.09)',
+    'topbar-glass': 'rgba(244, 243, 238, 0.86)',
+    'dur-1': '110ms',
+    'dur-2': '180ms',
+    'dur-3': '280ms',
+    ease: 'cubic-bezier(0.32, 0.72, 0, 1)',
+  },
+  darkCustomVars: {
+    paper: '#10140f',
+    'paper-deep': '#151a14',
+    surface: '#191f18',
+    'surface-sunken': '#141a13',
+    'surface-tint': '#1f261e',
+    'ink-900': '#edf0e7',
+    'ink-800': '#dce1d2',
+    'ink-700': '#c3c9b6',
+    'ink-600': '#a2aa96',
+    'ink-500': '#828b79',
+    'ink-400': '#646d5d',
+    'ink-300': '#4b5346',
+    'ink-200': '#333c30',
+    'ink-100': '#232b21',
+    'chrome-900': '#0c130d',
+    'chrome-800': '#0f1810',
+    'chrome-700': '#132016',
+    'chrome-600': '#182718',
+    'chrome-500': '#1d2f1e',
+    'chrome-line': '#1c2a1d',
+    'chrome-text': '#b9c6b6',
+    'chrome-text-dim': '#71836f',
+    'chrome-active': '#cfe2ca',
+    'primary-700': '#8fc79c',
+    'primary-600': '#79b788',
+    'primary-500': '#6aa878',
+    'primary-100': 'rgba(121, 183, 136, 0.16)',
+    'primary-050': 'rgba(121, 183, 136, 0.09)',
+    'accent-600': '#d9a54f',
+    'accent-500': '#cf9a48',
+    'accent-100': 'rgba(217, 165, 79, 0.15)',
+    'status-success': '#7cb989',
+    'status-success-bg': 'rgba(124, 185, 137, 0.14)',
+    'status-warning': '#d3a04e',
+    'status-warning-bg': 'rgba(211, 160, 78, 0.14)',
+    'status-danger': '#d07a63',
+    'status-danger-bg': 'rgba(208, 122, 99, 0.15)',
+    'status-info': '#8fb0d4',
+    'status-info-bg': 'rgba(143, 176, 212, 0.14)',
+    'status-neutral': '#a3a898',
+    'status-neutral-bg': 'rgba(163, 168, 152, 0.13)',
+    'status-critical': '#e08a73',
+    'danger-600': '#d07a63',
+    'warning-600': '#d3a04e',
+    line: '#262e24',
+    'line-strong': '#333d30',
+    'line-chrome': '#1c2a1d',
+    'shadow-1': '0 1px 2px rgba(0, 0, 0, 0.35)',
+    'shadow-2': '0 2px 6px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3)',
+    'shadow-3': '0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35)',
+    'shadow-overlay': '0 24px 64px -16px rgba(0, 0, 0, 0.7)',
+    'chart-1': '#79b788',
+    'chart-2': '#d9a54f',
+    'chart-3': '#8fb0d4',
+    'chart-4': '#a79bd4',
+    'chart-5': '#c78e6b',
+    'chart-6': '#93b389',
+    'chart-faint': '#232b21',
+    'tint-hover': 'rgba(237, 240, 231, 0.06)',
+    'tint-press': 'rgba(237, 240, 231, 0.09)',
+    'topbar-glass': 'rgba(16, 20, 15, 0.86)',
+  },
+};

package/src/infrastructure/themes/index.ts

@@ -3,6 +3,7 @@ export { oceanTheme } from './ocean.theme';
 export { midnightTheme } from './midnight.theme';
 export { editorialTheme } from './editorial.theme';
 export { forestTheme } from './forest.theme';
+export { fieldTheme } from './field.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

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

package/src/presentation/molecules/ConditionPips.tsx

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+
+export interface ConditionPipsProps extends HTMLAttributes<HTMLSpanElement> {
+  score: number | null | undefined;
+  max?: number;
+  className?: string;
+  ariaLabel?: string;
+}
+
+export function ConditionPips({
+  score,
+  max = 5,
+  className,
+  ariaLabel,
+  ...props
+}: ConditionPipsProps) {
+  const value = Math.max(0, Math.min(score ?? 0, max));
+  const label = ariaLabel ?? `${value}/${max}`;
+
+  return (
+    <span
+      className={cn('cond-pips', className)}
+      role="img"
+      aria-label={label}
+      {...props}
+    >
+      {Array.from({ length: max }, (_, i) => (
+        <span
+          key={i}
+          className={cn('pip', i < value && 'on')}
+          aria-hidden="true"
+        />
+      ))}
+    </span>
+  );
+}

package/src/presentation/molecules/index.ts

@@ -99,3 +99,6 @@ export type { EntityRowProps } from './EntityRow';
 
 export { PlaceholderPanel } from './PlaceholderPanel';
 export type { PlaceholderPanelProps } from './PlaceholderPanel';
+
+export { ConditionPips } from './ConditionPips';
+export type { ConditionPipsProps } from './ConditionPips';