Daniel Bedeleanu faf1482796 fix(design): complete DESIGN.md compliance - fix primary color and remove legacy colors ...

Phase 8 DESIGN.md Compliance Remediation:

1. Fixed Primary Color Mismatch (Phase 8.1)
   - Changed primary from #F58618 (darker) to #ffb781 (correct per DESIGN.md)
   - Updated tailwind.config.ts: primary DEFAULT, fixed-dim, warning, border.strong
   - Updated globals.css: --primary CSS variable
   - primary-container remains #f58618 (correct)

2. Removed Hardcoded Legacy Colors (Phase 8.2)
   - Toast.tsx: bg-blue-500 → bg-info
   - CreateUserModal.tsx: hover:bg-blue-600 → hover:opacity-80, ring-offset-slate-900 → ring-offset-surface-container-high, focus:ring-blue → focus:ring-primary
   - ItemComparisonModal.tsx: Same color replacements
   - CategoryCreationModal.tsx: Same color replacements
   - AIOnboarding.tsx: 4 instances of blue colors replaced with design system equivalents

3. Enforced Background Color Consistency (Phase 8.3)
   - Verified layout.tsx uses bg-background ✓
   - Fixed page.tsx: bg-black → bg-surface-container-lowest
   - No hardcoded dark colors in app pages

4. Verified Typography & Spacing (Phase 8.4)
   - All typography classes defined and correct (headline-*, body-*, label-*, mono-data)
   - All spacing tokens configured (unit, stack-sm/md, gutter, margin)
   - Font sizes match DESIGN.md exactly
   - Build successful with zero CSS/TypeScript errors

DESIGN.md compliance now 100% complete across:
- Color system (primary, secondary, tertiary, surfaces, error states)
- Typography (all 7 semantic styles with correct letter-spacing)
- Spacing (4px baseline grid with semantic tokens)
- Component styling (buttons, inputs, modals, cards - all using design system)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

2026-04-25 17:08:26 +03:00

6.1 KiB

Raw Blame History

View Raw