102 lines
4.2 KiB
Markdown
102 lines
4.2 KiB
Markdown
---
|
|
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
|