@umituz/web-design-system 6.14.0 → 6.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "6.14.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__/entity-row.test.tsx

@@ -0,0 +1,72 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import { EntityRow } from '../presentation/molecules/EntityRow';
+import { PlaceholderPanel } from '../presentation/molecules/PlaceholderPanel';
+
+describe('EntityRow', () => {
+  it('renders title, icon, meta and aside correctly', () => {
+    render(
+      <MemoryRouter>
+        <ul>
+          <EntityRow
+            icon={<span data-testid="icon">ICON</span>}
+            title="Comprehensive Auto"
+            meta={['Renewal date: 2026-12-01', 'Policy #A-9928']}
+            badge={<span data-testid="badge">Active</span>}
+            aside={<span data-testid="aside">$120/mo</span>}
+          />
+        </ul>
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText('Comprehensive Auto')).toBeDefined();
+    expect(screen.getByTestId('icon')).toBeDefined();
+    expect(screen.getByText('Renewal date: 2026-12-01')).toBeDefined();
+    expect(screen.getByText('Policy #A-9928')).toBeDefined();
+    expect(screen.getByTestId('badge')).toBeDefined();
+    expect(screen.getByTestId('aside')).toBeDefined();
+  });
+
+  it('renders as a link when to prop is provided', () => {
+    render(
+      <MemoryRouter>
+        <ul>
+          <EntityRow
+            icon={<span>ICON</span>}
+            title="Homeowners Plus"
+            to="/policies/123"
+            highlight={true}
+          />
+        </ul>
+      </MemoryRouter>
+    );
+
+    const link = screen.getByRole('link');
+    expect(link.getAttribute('href')).toBe('/policies/123');
+    expect(link.className).toContain('highlight');
+    expect(screen.getByRole('img', { name: 'Unread' })).toBeDefined();
+  });
+});
+
+describe('PlaceholderPanel', () => {
+  it('renders step, title, description and capabilities', () => {
+    render(
+      <PlaceholderPanel
+        step="Step 4"
+        title="Automated Claims"
+        description="Submit photos and get instant estimates."
+        capabilities={['Direct damage upload', 'Fast adjuster review']}
+      >
+        <div data-testid="extra-child">Extra content</div>
+      </PlaceholderPanel>
+    );
+
+    expect(screen.getByText('Roadmap · Step 4')).toBeDefined();
+    expect(screen.getByText('Automated Claims')).toBeDefined();
+    expect(screen.getByText('Submit photos and get instant estimates.')).toBeDefined();
+    expect(screen.getByText('Direct damage upload')).toBeDefined();
+    expect(screen.getByText('Fast adjuster review')).toBeDefined();
+    expect(screen.getByTestId('extra-child')).toBeDefined();
+  });
+});

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

@@ -14,6 +14,8 @@ import {
   editorialTheme,
   oceanTheme,
   defaultTheme,
+  forestTheme,
+  fieldTheme,
 } from '../infrastructure/themes';
 import type { ThemeConfig } from '../domain/types';
 
@@ -30,6 +32,8 @@ describe('Theme System and Provider', () => {
     expect(getTheme('midnight').name).toBe('midnight');
     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');
   });
@@ -114,6 +118,11 @@ describe('Theme System and Provider', () => {
 
     const defaultCss = themeToCssVariables(defaultTheme);
     expect(defaultCss).toContain('--color-primary: #2563eb;');
+
+    const forestCss = themeToCssVariables(forestTheme);
+    expect(forestCss).toContain('--color-primary: #14705f;');
+    expect(forestCss).toContain('--color-background: #faf9f7;');
+    expect(forestCss).toContain('--color-brand-600: #14705f;');
   });
 
   it('applies theme variables to document head', () => {
@@ -164,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

@@ -147,4 +147,10 @@ export { MarkdownText } from './presentation/molecules/MarkdownText';
 export type { MarkdownTextProps } from './presentation/molecules/MarkdownText';
 export { FilterSelect } from './presentation/molecules/FilterSelect';
 export type { FilterSelectProps, FilterSelectOption } from './presentation/molecules/FilterSelect';
+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/forest.theme.ts

@@ -0,0 +1,145 @@
+import type { ThemeConfig } from '../../domain/types';
+
+export const forestTheme: ThemeConfig = {
+  name: 'forest',
+  mode: 'light',
+  colors: {
+    background: '#faf9f7',
+    foreground: '#101c19',
+    card: '#ffffff',
+    cardForeground: '#1a2723',
+    popover: '#ffffff',
+    popoverForeground: '#1a2723',
+    primary: '#14705f',
+    primaryForeground: '#ffffff',
+    primarySoft: '#eef5f2',
+    secondary: '#f3f2ee',
+    secondaryForeground: '#33413d',
+    muted: '#f3f2ee',
+    mutedForeground: '#5c6b66',
+    accent: '#f4ead4',
+    accentForeground: '#9a7328',
+    border: '#e7e5df',
+    input: '#d5d2ca',
+    destructive: '#a32d22',
+    destructiveForeground: '#ffffff',
+    ring: 'rgba(20, 112, 95, 0.45)',
+    success: '#1d6b46',
+    successForeground: '#ffffff',
+    warning: '#8a5a00',
+    warningForeground: '#ffffff',
+    info: '#1c5a80',
+    infoForeground: '#ffffff',
+  },
+  darkColors: {
+    background: '#0c1916',
+    foreground: '#e6ece9',
+    card: '#10221e',
+    cardForeground: '#e6ece9',
+    popover: '#10221e',
+    popoverForeground: '#e6ece9',
+    primary: '#4f9c86',
+    primaryForeground: '#0c1916',
+    secondary: '#16332d',
+    secondaryForeground: '#a3ada9',
+    muted: '#16332d',
+    mutedForeground: '#a3ada9',
+    accent: '#16332d',
+    accentForeground: '#e6ece9',
+    border: '#1c423a',
+    input: '#245248',
+    destructive: '#c2665c',
+    destructiveForeground: '#2a1210',
+    ring: 'rgba(79, 156, 134, 0.45)',
+    success: '#5ea184',
+    successForeground: '#0e1f17',
+    warning: '#c98f4a',
+    warningForeground: '#221607',
+    info: '#7f92cc',
+    infoForeground: '#0e1424',
+  },
+  typography: {
+    fontSans: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    fontDisplay: "'Fraunces', Georgia, 'Times New Roman', serif",
+  },
+  radii: {
+    sm: '6px',
+    md: '10px',
+    lg: '16px',
+    xl: '999px',
+  },
+  customVars: {
+    'color-brand-50': '#eef5f2',
+    'color-brand-100': '#d9eae3',
+    'color-brand-200': '#b3d5c8',
+    'color-brand-400': '#4f9c86',
+    'color-brand-500': '#2c8268',
+    'color-brand-600': '#14705f',
+    'color-brand-700': '#11574b',
+    'color-brand-800': '#0f463d',
+    'color-brand-900': '#0c3b33',
+    'color-ink-950': '#101c19',
+    'color-ink-900': '#1a2723',
+    'color-ink-700': '#33413d',
+    'color-ink-500': '#5c6b66',
+    'color-ink-400': '#7d8a85',
+    'color-ink-300': '#a3ada9',
+    'color-paper': '#faf9f7',
+    'color-surface': '#ffffff',
+    'color-surface-subtle': '#f3f2ee',
+    'color-line': '#e7e5df',
+    'color-line-strong': '#d5d2ca',
+    'color-inverse': '#0f2e28',
+    'color-scrim': 'rgba(16, 28, 25, 0.4)',
+    'color-hairline-inverse': 'rgba(238, 245, 242, 0.14)',
+    'color-accent-600': '#9a7328',
+    'color-accent-100': '#f4ead4',
+    'color-success-700': '#1d6b46',
+    'color-success-100': '#e0f0e6',
+    'color-warning-700': '#8a5a00',
+    'color-warning-100': '#f9eed3',
+    'color-danger-700': '#a32d22',
+    'color-danger-100': '#f9e3df',
+    'color-info-700': '#1c5a80',
+    'color-info-100': '#e1eef6',
+    'space-1': '0.25rem',
+    'space-2': '0.5rem',
+    'space-3': '0.75rem',
+    'space-4': '1rem',
+    'space-5': '1.5rem',
+    'space-6': '2rem',
+    'space-8': '3rem',
+    'space-10': '4rem',
+    'space-12': '5rem',
+    'space-16': '7rem',
+    'radius-pill': '999px',
+    'shadow-sm': '0 1px 2px rgba(16, 28, 25, 0.05)',
+    'shadow-md': '0 10px 30px rgba(16, 28, 25, 0.08)',
+    'container-max': '72rem',
+    'container-narrow': '48rem',
+    'header-height': '4rem',
+    'duration-fast': '140ms',
+    'duration-slow': '240ms',
+    'ease-out': 'cubic-bezier(0.2, 0.7, 0.3, 1)',
+    'focus-ring': '0 0 0 2px #faf9f7, 0 0 0 4px #2c8268',
+    'text-xs': '0.75rem',
+    'text-sm': '0.875rem',
+    'text-base': '1rem',
+    'text-lg': '1.125rem',
+    'text-xl': '1.375rem',
+    'text-2xl': '1.75rem',
+    'text-3xl': '2.125rem',
+    'text-4xl': '2.75rem',
+    'text-hero': 'clamp(2.625rem, 6vw, 4.25rem)',
+    'leading-tight': '1.15',
+    'leading-snug': '1.35',
+    'leading-normal': '1.55',
+    'leading-relaxed': '1.7',
+    'tracking-tight': '-0.02em',
+    'tracking-display': '-0.025em',
+    'tracking-wide': '0.08em',
+    'weight-regular': '400',
+    'weight-medium': '500',
+    'weight-semibold': '600',
+  },
+};

package/src/infrastructure/themes/index.ts

@@ -2,6 +2,8 @@ export { defaultTheme } from './default.theme';
 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

@@ -3,12 +3,16 @@ import { defaultTheme } from './default.theme';
 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],
   ['ocean', oceanTheme],
   ['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>
+  );
+}