docs(05): create phase 5 design system token rework plans

3 plans across 2 waves covering DS-01, DS-02, DS-03: - Plan 01: Token edits (radius, colors, chart vars) + chart components - Plan 02: Shared component rounded-* removal + spacing upgrades - Plan 03: Per-page sweep (9 pages) + visual verification checkpoint Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-20 16:53:20 +02:00
parent df2c6af8bf
commit e5637511d7
4 changed files with 652 additions and 2 deletions
--- a/.planning/phases/05-design-system-token-rework/05-01-PLAN.md
+++ b/.planning/phases/05-design-system-token-rework/05-01-PLAN.md
@@ -0,0 +1,219 @@
+---
+phase: 05-design-system-token-rework
+plan: 01
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - src/index.css
+  - src/components/dashboard/charts/SpendBarChart.tsx
+  - src/components/dashboard/charts/IncomeBarChart.tsx
+  - src/components/dashboard/charts/ExpenseDonutChart.tsx
+autonomous: true
+requirements:
+  - DS-01
+  - DS-02
+
+must_haves:
+  truths:
+    - "--radius token is 0 in index.css, cascading sharp corners to all shadcn components"
+    - "Category fill colors have chroma >= 0.22 making them visibly colorful"
+    - "--color-chart-* variables are deleted from index.css"
+    - "Chart bars render with 0 radius (no rounded caps)"
+    - "CSS overrides exist for Recharts rectangles and Sonner toasts"
+  artifacts:
+    - path: "src/index.css"
+      provides: "Design token source of truth with --radius: 0, raised fill chromas, removed chart vars, third-party overrides"
+      contains: "--radius: 0"
+    - path: "src/components/dashboard/charts/SpendBarChart.tsx"
+      provides: "Spend bar chart with sharp bars"
+      contains: "radius={0}"
+    - path: "src/components/dashboard/charts/IncomeBarChart.tsx"
+      provides: "Income bar chart with sharp bars"
+      contains: "radius={0}"
+    - path: "src/components/dashboard/charts/ExpenseDonutChart.tsx"
+      provides: "Donut chart legend with square color dots"
+  key_links:
+    - from: "src/index.css"
+      to: "all shadcn components"
+      via: "--radius: 0 token cascade"
+      pattern: "--radius: 0"
+    - from: "src/index.css"
+      to: "chart components"
+      via: "--color-*-fill CSS variables"
+      pattern: "color-.*-fill"
+---
+
+<objective>
+Edit design tokens in src/index.css (radius, colors, chart var removal, third-party overrides) and update chart component Bar radius props to 0.
+
+Purpose: Establish the sharp-cornered, vibrant-pastel visual foundation that cascades to all shadcn components and charts.
+Output: Modified index.css with new token values + CSS overrides; 3 chart component files with radius={0} and no rounded-full.
+</objective>
+
+<execution_context>
+@.planning/phases/05-design-system-token-rework/05-RESEARCH.md
+@.planning/phases/05-design-system-token-rework/05-PATTERNS.md
+@.planning/phases/05-design-system-token-rework/05-UI-SPEC.md
+</execution_context>
+
+<context>
+@.planning/ROADMAP.md
+@.planning/STATE.md
+
+<interfaces>
+<!-- Current src/index.css @theme inline block (lines 5-79) is the single token source of truth -->
+<!-- Chart components reference CSS variables via ChartConfig and Bar fill props -->
+
+From src/components/dashboard/charts/SpendBarChart.tsx:
+```tsx
+const chartConfig = {
+  budgeted: { label: "Budgeted", color: "var(--color-budget-bar-bg)" },
+  actual: { label: "Actual", color: "var(--color-muted-foreground)" },
+} satisfies ChartConfig
+// Bar radius={4} on both Bar elements
+// Cell fill uses var(--color-${entry.type}-fill) -- already correct
+```
+
+From src/components/dashboard/charts/IncomeBarChart.tsx:
+```tsx
+const chartConfig = {
+  budgeted: { label: "Budgeted", color: "var(--color-budget-bar-bg)" },
+  actual: { label: "Actual", color: "var(--color-income-fill)" },
+} satisfies ChartConfig
+// Bar radius={[4, 4, 0, 0]} on both Bar elements
+```
+
+From src/components/dashboard/charts/ExpenseDonutChart.tsx:
+```tsx
+// Line 141: <span className="inline-block size-3 shrink-0 rounded-full" .../>
+// Uses var(--color-${entry.type}-fill) for legend dot colors -- already correct
+```
+</interfaces>
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Edit design tokens and add CSS overrides in index.css</name>
+  <files>src/index.css</files>
+  <read_first>src/index.css</read_first>
+  <action>
+Edit src/index.css with these exact changes:
+
+1. Line 7: Change `--color-background: oklch(0.98 0.005 260)` to `--color-background: oklch(0.98 0.01 260)` (warm background chroma from 0.005 to 0.01).
+
+2. Lines 52-57: DELETE the entire "Chart Colors" section (6 lines):
+   ```
+   /* 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);
+   ```
+
+3. Lines 65-70: Replace the 6 fill token values with raised chroma (0.22+):
+   ```css
+   --color-income-fill: oklch(0.72 0.22 155);
+   --color-bill-fill: oklch(0.70 0.22 25);
+   --color-variable-expense-fill: oklch(0.74 0.22 50);
+   --color-debt-fill: oklch(0.66 0.23 355);
+   --color-saving-fill: oklch(0.72 0.22 220);
+   --color-investment-fill: oklch(0.68 0.22 285);
+   ```
+
+4. Line 72: Change `--radius: 0.625rem` to `--radius: 0`.
+
+5. After the closing `}` of the `@layer base` block (after line 99), add CSS overrides for third-party components:
+   ```css
+   /* Third-party radius overrides */
+   .recharts-rectangle {
+     rx: 0;
+     ry: 0;
+   }
+
+   [data-sonner-toast] {
+     border-radius: 0 !important;
+   }
+   ```
+  </action>
+  <verify>
+    <automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build</automated>
+  </verify>
+  <acceptance_criteria>
+    - src/index.css contains `--radius: 0;`
+    - src/index.css contains `--color-background: oklch(0.98 0.01 260)`
+    - src/index.css contains `--color-income-fill: oklch(0.72 0.22 155)`
+    - src/index.css contains `--color-bill-fill: oklch(0.70 0.22 25)`
+    - src/index.css contains `--color-variable-expense-fill: oklch(0.74 0.22 50)`
+    - src/index.css contains `--color-debt-fill: oklch(0.66 0.23 355)`
+    - src/index.css contains `--color-saving-fill: oklch(0.72 0.22 220)`
+    - src/index.css contains `--color-investment-fill: oklch(0.68 0.22 285)`
+    - src/index.css does NOT contain `--color-chart-1` or `--color-chart-2` or `--color-chart-3` or `--color-chart-4` or `--color-chart-5`
+    - src/index.css contains `.recharts-rectangle`
+    - src/index.css contains `[data-sonner-toast]`
+    - `bun run build` exits 0
+  </acceptance_criteria>
+  <done>index.css has --radius: 0, raised fill chromas (0.22+), deleted chart vars, warmed background, and CSS overrides for Recharts and Sonner</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Update chart component Bar radius props and remove hardcoded rounded-full</name>
+  <files>src/components/dashboard/charts/SpendBarChart.tsx, src/components/dashboard/charts/IncomeBarChart.tsx, src/components/dashboard/charts/ExpenseDonutChart.tsx</files>
+  <read_first>src/components/dashboard/charts/SpendBarChart.tsx, src/components/dashboard/charts/IncomeBarChart.tsx, src/components/dashboard/charts/ExpenseDonutChart.tsx</read_first>
+  <action>
+1. In SpendBarChart.tsx: Find the two `<Bar` elements. Change `radius={4}` to `radius={0}` on both Bar components. Do NOT change ChartConfig colors -- they are already correct (budgeted uses --color-budget-bar-bg, actual Cell uses var(--color-${entry.type}-fill)).
+
+2. In IncomeBarChart.tsx: Find the two `<Bar` elements. Change `radius={[4, 4, 0, 0]}` to `radius={0}` on both Bar components. Do NOT change ChartConfig colors -- they are already correct (actual uses --color-income-fill).
+
+3. In ExpenseDonutChart.tsx: Find line 141 (the legend color dot span). Remove `rounded-full` from the className string. The className should go from `"inline-block size-3 shrink-0 rounded-full"` to `"inline-block size-3 shrink-0"`. No other changes needed in this file.
+  </action>
+  <verify>
+    <automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build</automated>
+  </verify>
+  <acceptance_criteria>
+    - SpendBarChart.tsx contains `radius={0}` (grep returns 2 matches)
+    - SpendBarChart.tsx does NOT contain `radius={4}`
+    - IncomeBarChart.tsx contains `radius={0}` (grep returns 2 matches)
+    - IncomeBarChart.tsx does NOT contain `radius={[4, 4, 0, 0]}`
+    - ExpenseDonutChart.tsx does NOT contain `rounded-full`
+    - ExpenseDonutChart.tsx contains `"inline-block size-3 shrink-0"`
+    - `bun run build` exits 0
+  </acceptance_criteria>
+  <done>All 3 chart components have sharp bars (radius={0}) and the donut legend dot is square (no rounded-full)</done>
+</task>
+
+</tasks>
+
+<threat_model>
+## Trust Boundaries
+
+No trust boundaries affected. This plan modifies CSS tokens and SVG presentation props only. No user input handling, no data access, no authentication changes.
+
+## STRIDE Threat Register
+
+| Threat ID | Category | Component | Disposition | Mitigation Plan |
+|-----------|----------|-----------|-------------|-----------------|
+| — | — | — | — | No applicable threats — pure CSS/visual changes |
+</threat_model>
+
+<verification>
+- `bun run build` passes after both tasks
+- grep confirms --radius: 0 in index.css
+- grep confirms no --color-chart-* references remain in src/
+- grep confirms radius={0} in both bar chart components
+</verification>
+
+<success_criteria>
+- Token cascade makes all shadcn components sharp-cornered (verified by --radius: 0 in index.css)
+- Category fill colors raised to 0.22+ chroma (verified by grep on index.css)
+- Chart color duplication eliminated (--color-chart-* deleted, verified by grep)
+- Chart bars render with sharp ends (radius={0} in both bar chart files)
+- CSS overrides exist for Recharts SVG and Sonner toasts
+- Build passes cleanly
+</success_criteria>
+
+<output>
+After completion, create `.planning/phases/05-design-system-token-rework/05-01-SUMMARY.md`
+</output>