docs(01-01): complete design primitives plan

- Add 01-01-SUMMARY.md with execution results and self-check - Update STATE.md with position, decisions, and metrics - Update ROADMAP.md with plan progress - Log pre-existing lint errors to deferred-items.md Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-16 12:16:36 +01:00
parent 4f74c79fda
commit b756540339
3 changed files with 143 additions and 6 deletions
--- a/.planning/phases/01-design-foundation-and-primitives/01-01-SUMMARY.md
+++ b/.planning/phases/01-design-foundation-and-primitives/01-01-SUMMARY.md
@@ -0,0 +1,107 @@
+---
+phase: 01-design-foundation-and-primitives
+plan: 01
+subsystem: ui
+tags: [shadcn, recharts, oklch, i18n, design-tokens, css-variables]
+
+# Dependency graph
+requires: []
+provides:
+  - "ChartContainer, ChartTooltip, ChartTooltipContent wrappers (chart.tsx)"
+  - "Collapsible, CollapsibleTrigger, CollapsibleContent primitives (collapsible.tsx)"
+  - "Semantic OKLCH status tokens (over-budget, on-budget, budget-bar-bg)"
+  - "Two-tier category colors (dark text + lighter chart fills)"
+  - "Dashboard i18n keys in en.json and de.json (carryover, vsBudget, overBudget, underBudget, onTrack, loading)"
+affects: [01-02, 02-dashboard-components, 03-dashboard-page, 04-polish]
+
+# Tech tracking
+tech-stack:
+  added: [shadcn/chart, shadcn/collapsible]
+  patterns: [oklch-two-tier-colors, semantic-status-tokens, chart-fill-variants]
+
+key-files:
+  created:
+    - src/components/ui/chart.tsx
+    - src/components/ui/collapsible.tsx
+  modified:
+    - src/index.css
+    - src/i18n/en.json
+    - src/i18n/de.json
+
+key-decisions:
+  - "Applied initialDimension patch for Recharts v3 compatibility (shadcn-ui/ui#9892)"
+  - "Category colors darkened to oklch ~0.55 lightness for WCAG 4.5:1 text contrast against white"
+  - "Chart fills kept lighter at oklch ~0.65-0.70 for non-text use (3:1 minimum contrast)"
+  - "Investment hue adjusted from 290 to 285 for better OKLCH gamut fit"
+
+patterns-established:
+  - "Two-tier color system: dark --color-{category} for text, lighter --color-{category}-fill for chart areas"
+  - "Semantic status tokens: --color-over-budget (red), --color-on-budget (green) for budget comparison UI"
+
+requirements-completed: [UI-DESIGN-01, UI-DASH-01]
+
+# Metrics
+duration: 3min
+completed: 2026-03-16
+---
+
+# Phase 1 Plan 1: Design Primitives Summary
+
+**shadcn chart/collapsible primitives with Recharts v3 patch, two-tier OKLCH category colors, semantic budget status tokens, and bilingual dashboard i18n keys**
+
+## Performance
+
+- **Duration:** 3 min
+- **Started:** 2026-03-16T11:12:04Z
+- **Completed:** 2026-03-16T11:14:52Z
+- **Tasks:** 2
+- **Files modified:** 5
+
+## Accomplishments
+- Installed shadcn chart and collapsible UI primitives with Recharts v3 initialDimension compatibility patch
+- Extended OKLCH color token system with two-tier category colors (dark text + lighter fills) and 3 semantic budget status tokens
+- Added 6 new dashboard i18n keys to both en.json and de.json at full parity
+
+## Task Commits
+
+Each task was committed atomically:
+
+1. **Task 1: Install shadcn primitives and patch chart.tsx** - `d89d70f` (feat)
+2. **Task 2: Extend color tokens and add i18n keys** - `4f74c79` (feat)
+
+## Files Created/Modified
+- `src/components/ui/chart.tsx` - ChartContainer, ChartTooltip, ChartTooltipContent wrappers with initialDimension patch
+- `src/components/ui/collapsible.tsx` - Collapsible, CollapsibleTrigger, CollapsibleContent radix primitives
+- `src/index.css` - Extended @theme inline block with semantic status tokens, chart fill variants, darkened category text colors
+- `src/i18n/en.json` - 6 new dashboard keys (carryover, vsBudget, overBudget, underBudget, onTrack, loading)
+- `src/i18n/de.json` - Matching 6 German dashboard keys at parity
+
+## Decisions Made
+- Applied initialDimension={{ width: 320, height: 200 }} patch since shadcn CLI still generates without it (PR #8486 not yet merged)
+- Category text colors darkened to ~0.55 lightness for WCAG 4.5:1 contrast against white card background
+- Chart fill variants kept lighter at ~0.65-0.70 for non-text use with 3:1 minimum contrast
+- Investment hue adjusted from 290 to 285 for better OKLCH gamut representation
+
+## Deviations from Plan
+
+None - plan executed exactly as written.
+
+## Issues Encountered
+- Pre-existing lint errors found in badge.tsx, button.tsx, sidebar.tsx, and useBudgets.ts (5 errors total). These are not caused by this plan's changes and have been logged to deferred-items.md. Build passes; lint failures are in unmodified files only.
+
+## User Setup Required
+
+None - no external service configuration required.
+
+## Next Phase Readiness
+- Chart and collapsible primitives ready for Plan 02 component composition
+- Color tokens and i18n keys available for all subsequent dashboard UI work
+- No blockers for Plan 02 execution
+
+## Self-Check: PASSED
+
+All 5 created/modified files verified present. Both task commits (d89d70f, 4f74c79) verified in git log.
+
+---
+*Phase: 01-design-foundation-and-primitives*
+*Completed: 2026-03-16*
--- a/.planning/phases/01-design-foundation-and-primitives/deferred-items.md
+++ b/.planning/phases/01-design-foundation-and-primitives/deferred-items.md
@@ -0,0 +1,11 @@
+# Deferred Items - Phase 01
+
+## Pre-existing Lint Errors (Out of Scope)
+
+Discovered during 01-01 execution. These exist in the codebase prior to any changes made in this plan.
+
+1. **badge.tsx:48** - `react-refresh/only-export-components` - exports non-component (badgeVariants)
+2. **button.tsx:64** - `react-refresh/only-export-components` - exports non-component (buttonVariants)
+3. **sidebar.tsx:609** - `react-hooks/purity` - Math.random() called in render via useMemo
+4. **sidebar.tsx:723** - `react-refresh/only-export-components` - exports non-components
+5. **useBudgets.ts:80** - `react-hooks/rules-of-hooks` - Hook called in non-hook function