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