---
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