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

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
05-design-system-token-rework	01	execute	1		src/index.css src/components/dashboard/charts/SpendBarChart.tsx src/components/dashboard/charts/IncomeBarChart.tsx src/components/dashboard/charts/ExpenseDonutChart.tsx	true	DS-01 DS-02	truths artifacts key_links --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 path provides contains src/index.css Design token source of truth with --radius: 0, raised fill chromas, removed chart vars, third-party overrides --radius: 0 path provides contains src/components/dashboard/charts/SpendBarChart.tsx Spend bar chart with sharp bars radius={0} path provides contains src/components/dashboard/charts/IncomeBarChart.tsx Income bar chart with sharp bars radius={0} path provides src/components/dashboard/charts/ExpenseDonutChart.tsx Donut chart legend with square color dots from to via pattern src/index.css all shadcn components --radius: 0 token cascade --radius: 0 from to via pattern src/index.css chart components --color-*-fill CSS variables color-.*-fill

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.

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

@.planning/ROADMAP.md @.planning/STATE.md

From src/components/dashboard/charts/SpendBarChart.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:

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:

// Line 141: <span className="inline-block size-3 shrink-0 rounded-full" .../>
// Uses var(--color-${entry.type}-fill) for legend dot colors -- already correct

Task 1: Edit design tokens and add CSS overrides in index.css src/index.css src/index.css 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+):

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

   /* Third-party radius overrides */
   .recharts-rectangle {
     rx: 0;
     ry: 0;
   }
   
   [data-sonner-toast] {
     border-radius: 0 !important;
   }
   

cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build - 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 index.css has --radius: 0, raised fill chromas (0.22+), deleted chart vars, warmed background, and CSS overrides for Recharts and Sonner Task 2: Update chart component Bar radius props and remove hardcoded rounded-full src/components/dashboard/charts/SpendBarChart.tsx, src/components/dashboard/charts/IncomeBarChart.tsx, src/components/dashboard/charts/ExpenseDonutChart.tsx src/components/dashboard/charts/SpendBarChart.tsx, src/components/dashboard/charts/IncomeBarChart.tsx, src/components/dashboard/charts/ExpenseDonutChart.tsx 1. In SpendBarChart.tsx: Find the two `

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

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. cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build <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> All 3 chart components have sharp bars (radius={0}) and the donut legend dot is square (no rounded-full)

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

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

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

After completion, create `.planning/phases/05-design-system-token-rework/05-01-SUMMARY.md`