docs(05-01): complete design token foundation plan summary

.planning/phases/05-design-system-token-rework/05-01-SUMMARY.md

@@ -0,0 +1,101 @@
+---
+phase: 05-design-system-token-rework
+plan: "01"
+subsystem: frontend/design-system
+tags: [css-tokens, design-system, charts, oklch, recharts]
+dependency_graph:
+  requires: []
+  provides:
+    - "--radius: 0 token cascade to all shadcn components"
+    - "Raised fill chroma (0.22+) for category colors"
+    - "Eliminated --color-chart-* duplication"
+    - "Sharp bar chart rendering via radius={0}"
+    - "Square legend dots in donut chart"
+  affects:
+    - "All shadcn/ui components (border-radius cascade)"
+    - "SpendBarChart, IncomeBarChart, ExpenseDonutChart"
+    - "Recharts SVG rectangles (CSS override)"
+    - "Sonner toasts (CSS override)"
+tech_stack:
+  added: []
+  patterns:
+    - "OKLCH color system with raised chroma (0.22+) for vivid pastels"
+    - "CSS --radius: 0 token for sharp-cornered design cascade"
+    - "Third-party radius overrides via selector targeting"
+key_files:
+  created: []
+  modified:
+    - src/index.css
+    - src/components/dashboard/charts/SpendBarChart.tsx
+    - src/components/dashboard/charts/IncomeBarChart.tsx
+    - src/components/dashboard/charts/ExpenseDonutChart.tsx
+decisions:
+  - "Use rx/ry SVG attributes in .recharts-rectangle rule rather than border-radius (SVG does not support border-radius)"
+  - "Delete --color-chart-* vars entirely — fill vars cover all use cases, no consumers of chart-* remain"
+metrics:
+  duration: "~8 minutes"
+  completed: "2026-04-20"
+  tasks_completed: 2
+  tasks_total: 2
+  files_modified: 4
+---
+
+# Phase 05 Plan 01: Design Token Foundation Summary
+
+**One-liner:** Established sharp-cornered OKLCH pastel design foundation with --radius: 0 cascade, raised fill chroma to 0.22+, deleted redundant chart color vars, and set chart bars to radius={0} with square legend dots.
+
+## Tasks Completed
+
+| Task | Name | Commit | Key Changes |
+|------|------|--------|-------------|
+| 1 | Edit design tokens and add CSS overrides in index.css | 99b5b5f | --radius: 0, chroma 0.22+, deleted chart vars, warmed bg, Recharts/Sonner overrides |
+| 2 | Update chart Bar radius props and remove rounded-full | 4c74dec | SpendBarChart radius={0}x2, IncomeBarChart radius={0}x2, ExpenseDonutChart legend dot square |
+
+## What Was Built
+
+### index.css Changes
+- `--color-background` chroma raised from 0.005 to 0.01 (warmer background)
+- `--color-chart-1` through `--color-chart-5` deleted (6 lines removed — no remaining consumers)
+- All 6 `--color-*-fill` variables raised to chroma 0.22+ for vibrant pastels:
+  - income: 0.19 → 0.22, bill: 0.19 → 0.22, variable-expense: 0.18 → 0.22
+  - debt: 0.20 → 0.23, saving: 0.18 → 0.22, investment: 0.18 → 0.22
+- `--radius` changed from 0.625rem to 0 — cascades sharp corners to all shadcn components
+- `.recharts-rectangle { rx: 0; ry: 0; }` override added (SVG attribute approach)
+- `[data-sonner-toast] { border-radius: 0 !important; }` override added
+
+### Chart Component Changes
+- `SpendBarChart.tsx`: Both `<Bar>` elements changed from `radius={4}` to `radius={0}`
+- `IncomeBarChart.tsx`: Both `<Bar>` elements changed from `radius={[4, 4, 0, 0]}` to `radius={0}`
+- `ExpenseDonutChart.tsx`: Legend color dot span: removed `rounded-full` from className
+
+## Verification
+
+All acceptance criteria confirmed by grep and build:
+- `--radius: 0` present in index.css
+- `--color-chart-1` through `--color-chart-5` absent from src/
+- `radius={0}` present (2 matches each) in SpendBarChart and IncomeBarChart
+- `rounded-full` absent from ExpenseDonutChart
+- `.recharts-rectangle` and `[data-sonner-toast]` present in index.css
+- `bun run build` exits 0 (TypeScript + Vite both pass)
+
+## Deviations from Plan
+
+None — plan executed exactly as written.
+
+## Known Stubs
+
+None — all token values are real OKLCH colors wired to actual chart and UI components.
+
+## Threat Flags
+
+None — pure CSS/visual changes with no trust boundary impact.
+
+## Self-Check: PASSED
+
+- [x] `src/index.css` exists and contains all required tokens
+- [x] `src/components/dashboard/charts/SpendBarChart.tsx` contains `radius={0}`
+- [x] `src/components/dashboard/charts/IncomeBarChart.tsx` contains `radius={0}`
+- [x] `src/components/dashboard/charts/ExpenseDonutChart.tsx` has no `rounded-full`
+- [x] Commit 99b5b5f exists (Task 1)
+- [x] Commit 4c74dec exists (Task 2)
+- [x] Build passes cleanly