chore: merge executor worktree (worktree-agent-a0017a3e)

.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

src/components/dashboard/charts/ExpenseDonutChart.tsx

@@ -138,7 +138,7 @@ export function ExpenseDonutChart({
               className="flex items-center gap-2 text-sm"
             >
               <span
-                className="inline-block size-3 shrink-0 rounded-full"
+                className="inline-block size-3 shrink-0"
                 style={{
                   backgroundColor: `var(--color-${entry.type}-fill)`,
                 }}

src/components/dashboard/charts/IncomeBarChart.tsx

@@ -54,9 +54,9 @@ export function IncomeBarChart({
         <Bar
           dataKey="budgeted"
           fill="var(--color-budgeted)"
-          radius={[4, 4, 0, 0]}
+          radius={0}
         />
-        <Bar dataKey="actual" radius={[4, 4, 0, 0]}>
+        <Bar dataKey="actual" radius={0}>
           {data.map((entry, index) => (
             <Cell
               key={index}

src/components/dashboard/charts/SpendBarChart.tsx

@@ -64,9 +64,9 @@ export function SpendBarChart({
         <Bar
           dataKey="budgeted"
           fill="var(--color-budgeted)"
-          radius={4}
+          radius={0}
         />
-        <Bar dataKey="actual" radius={4}>
+        <Bar dataKey="actual" radius={0}>
           {data.map((entry, index) => (
             <Cell
               key={index}

src/index.css

@@ -4,7 +4,7 @@
 
 @theme inline {
   /* Pastel OKLCH Color System */
-  --color-background: oklch(0.98 0.005 260);
+  --color-background: oklch(0.98 0.01 260);
   --color-foreground: oklch(0.25 0.02 260);
 
   --color-card: oklch(1 0 0);
@@ -49,27 +49,20 @@
   --color-saving: oklch(0.55 0.16 220);
   --color-investment: oklch(0.55 0.16 285);
 
-  /* Chart Colors */
-  --color-chart-1: oklch(0.72 0.14 155);
-  --color-chart-2: oklch(0.7 0.14 25);
-  --color-chart-3: oklch(0.72 0.14 50);
-  --color-chart-4: oklch(0.65 0.16 355);
-  --color-chart-5: oklch(0.72 0.14 220);
-
   /* Semantic Status Tokens */
   --color-over-budget: oklch(0.55 0.20 25);
   --color-on-budget: oklch(0.50 0.17 155);
   --color-budget-bar-bg: oklch(0.92 0.01 260);
 
   /* Chart Fill Variants */
-  --color-income-fill: oklch(0.68 0.19 155);
+  --color-income-fill: oklch(0.72 0.22 155);
-  --color-bill-fill: oklch(0.65 0.19 25);
+  --color-bill-fill: oklch(0.70 0.22 25);
-  --color-variable-expense-fill: oklch(0.70 0.18 50);
+  --color-variable-expense-fill: oklch(0.74 0.22 50);
-  --color-debt-fill: oklch(0.60 0.20 355);
+  --color-debt-fill: oklch(0.66 0.23 355);
-  --color-saving-fill: oklch(0.68 0.18 220);
+  --color-saving-fill: oklch(0.72 0.22 220);
-  --color-investment-fill: oklch(0.65 0.18 285);
+  --color-investment-fill: oklch(0.68 0.22 285);
 
-  --radius: 0.625rem;
+  --radius: 0;
 
   /* Collapsible animation */
   --animate-collapsible-open: collapsible-open 200ms ease-out;
@@ -97,3 +90,13 @@
     font-feature-settings: "rlig" 1, "calt" 1;
   }
 }
+
+/* Third-party radius overrides */
+.recharts-rectangle {
+  rx: 0;
+  ry: 0;
+}
+
+[data-sonner-toast] {
+  border-radius: 0 !important;
+}