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>
This commit is contained in:
178
.planning/phases/05-design-system-token-rework/05-02-PLAN.md
Normal file
178
.planning/phases/05-design-system-token-rework/05-02-PLAN.md
Normal file
@@ -0,0 +1,178 @@
|
||||
---
|
||||
phase: 05-design-system-token-rework
|
||||
plan: 02
|
||||
type: execute
|
||||
wave: 1
|
||||
depends_on: []
|
||||
files_modified:
|
||||
- src/components/shared/PageShell.tsx
|
||||
- src/components/dashboard/DashboardSkeleton.tsx
|
||||
- src/components/dashboard/CategorySection.tsx
|
||||
- src/components/dashboard/charts/ChartEmptyState.tsx
|
||||
- src/components/QuickAddPicker.tsx
|
||||
autonomous: true
|
||||
requirements:
|
||||
- DS-01
|
||||
- DS-03
|
||||
|
||||
must_haves:
|
||||
truths:
|
||||
- "PageShell gap is gap-8 providing generous header-to-content spacing on all pages"
|
||||
- "All shared component hardcoded rounded-* classes are removed"
|
||||
- "DashboardSkeleton spacing matches the upgraded gap/space-y values"
|
||||
- "No pill-shaped skeleton placeholders remain in shared components"
|
||||
artifacts:
|
||||
- path: "src/components/shared/PageShell.tsx"
|
||||
provides: "Layout shell with gap-8 section spacing"
|
||||
contains: "gap-8"
|
||||
- path: "src/components/dashboard/DashboardSkeleton.tsx"
|
||||
provides: "Dashboard loading skeleton with sharp corners and upgraded spacing"
|
||||
- path: "src/components/dashboard/CategorySection.tsx"
|
||||
provides: "Category section trigger without rounded-md"
|
||||
- path: "src/components/dashboard/charts/ChartEmptyState.tsx"
|
||||
provides: "Chart empty state without rounded-lg"
|
||||
- path: "src/components/QuickAddPicker.tsx"
|
||||
provides: "Quick add picker without rounded-sm or rounded-full"
|
||||
key_links:
|
||||
- from: "src/components/shared/PageShell.tsx"
|
||||
to: "all 9 pages"
|
||||
via: "PageShell wrapper component"
|
||||
pattern: "gap-8"
|
||||
---
|
||||
|
||||
<objective>
|
||||
Remove hardcoded rounded-* classes and upgrade spacing in shared components (PageShell, DashboardSkeleton, CategorySection, ChartEmptyState, QuickAddPicker).
|
||||
|
||||
Purpose: These shared components are used across multiple pages. Fixing them first ensures consistent sharp corners and generous spacing everywhere they appear.
|
||||
Output: 5 modified component files with no hardcoded rounding and upgraded spacing values.
|
||||
</objective>
|
||||
|
||||
<execution_context>
|
||||
@.planning/phases/05-design-system-token-rework/05-RESEARCH.md
|
||||
@.planning/phases/05-design-system-token-rework/05-PATTERNS.md
|
||||
</execution_context>
|
||||
|
||||
<context>
|
||||
@.planning/ROADMAP.md
|
||||
@.planning/STATE.md
|
||||
|
||||
<interfaces>
|
||||
From src/components/shared/PageShell.tsx (line 15):
|
||||
```tsx
|
||||
<div className="flex flex-col gap-6"> <!-- gap-6 --> gap-8 -->
|
||||
```
|
||||
|
||||
From src/components/dashboard/DashboardSkeleton.tsx:
|
||||
```tsx
|
||||
// Line 20: <div className="flex flex-col gap-6"> -- gap-8
|
||||
// Line 22: <div className="grid gap-4 sm:grid-cols-2..."> -- gap-6
|
||||
// Line 29: <div className="grid gap-6 md:grid-cols-2..."> -- gap-8
|
||||
// Line 35,43,51: <Skeleton className="h-[250px] w-full rounded-md" /> -- remove rounded-md
|
||||
// Line 59: <div className="... rounded-md border-l-4 ..."> -- remove rounded-md
|
||||
// Lines 63-64: <Skeleton className="h-5 w-24 rounded-full" /> -- remove rounded-full
|
||||
```
|
||||
|
||||
From src/components/dashboard/CategorySection.tsx (line 73):
|
||||
```tsx
|
||||
<button className="... rounded-md border-l-4 bg-card px-4 py-3 ...">
|
||||
```
|
||||
|
||||
From src/components/dashboard/charts/ChartEmptyState.tsx (line 12):
|
||||
```tsx
|
||||
className={cn("... rounded-lg border border-dashed ...", className)}
|
||||
```
|
||||
|
||||
From src/components/QuickAddPicker.tsx:
|
||||
```tsx
|
||||
// Line 156: className="... rounded-sm px-2 py-1.5 ..."
|
||||
// Line 201: <div className="size-2 rounded-full" .../>
|
||||
```
|
||||
</interfaces>
|
||||
</context>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 1: Upgrade PageShell spacing and remove rounded-* from DashboardSkeleton</name>
|
||||
<files>src/components/shared/PageShell.tsx, src/components/dashboard/DashboardSkeleton.tsx</files>
|
||||
<read_first>src/components/shared/PageShell.tsx, src/components/dashboard/DashboardSkeleton.tsx</read_first>
|
||||
<action>
|
||||
1. In PageShell.tsx line 15: Change `gap-6` to `gap-8` in the className string `"flex flex-col gap-6"`.
|
||||
|
||||
2. In DashboardSkeleton.tsx, make all of the following changes:
|
||||
- Line 20: Change `gap-6` to `gap-8` in `"flex flex-col gap-6"`
|
||||
- Line 22: Change `gap-4` to `gap-6` in `"grid gap-4 sm:grid-cols-2 lg:grid-cols-3"`
|
||||
- Line 29: Change `gap-6` to `gap-8` in `"grid gap-6 md:grid-cols-2 lg:grid-cols-3"`
|
||||
- Lines 35, 43, 51: Remove `rounded-md` from `<Skeleton className="h-[250px] w-full rounded-md" />` (3 occurrences). Result: `className="h-[250px] w-full"`
|
||||
- Line 59: Remove `rounded-md` from the div className `"flex items-center gap-3 rounded-md border-l-4 ..."`. The border-l-4 remains.
|
||||
- Lines 63, 64: Remove `rounded-full` from `<Skeleton className="h-5 w-24 rounded-full" />` (2 occurrences). Result: `className="h-5 w-24"`
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build</automated>
|
||||
</verify>
|
||||
<acceptance_criteria>
|
||||
- PageShell.tsx contains `gap-8` and does NOT contain `gap-6`
|
||||
- DashboardSkeleton.tsx does NOT contain `rounded-md` or `rounded-full`
|
||||
- DashboardSkeleton.tsx contains `gap-8` (2 occurrences) and `gap-6` (1 occurrence for the summary cards grid)
|
||||
- `bun run build` exits 0
|
||||
</acceptance_criteria>
|
||||
<done>PageShell uses gap-8 for header-to-content spacing; DashboardSkeleton has no hardcoded rounding and upgraded spacing</done>
|
||||
</task>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 2: Remove rounded-* from CategorySection, ChartEmptyState, and QuickAddPicker</name>
|
||||
<files>src/components/dashboard/CategorySection.tsx, src/components/dashboard/charts/ChartEmptyState.tsx, src/components/QuickAddPicker.tsx</files>
|
||||
<read_first>src/components/dashboard/CategorySection.tsx, src/components/dashboard/charts/ChartEmptyState.tsx, src/components/QuickAddPicker.tsx</read_first>
|
||||
<action>
|
||||
1. In CategorySection.tsx line 73: Remove `rounded-md` from the button className. The className goes from `"group flex w-full items-center gap-3 rounded-md border-l-4 bg-card px-4 py-3 text-left hover:bg-muted/40 transition-colors"` to `"group flex w-full items-center gap-3 border-l-4 bg-card px-4 py-3 text-left hover:bg-muted/40 transition-colors"`.
|
||||
|
||||
2. In ChartEmptyState.tsx line 12: Remove `rounded-lg` from the cn() className string. The class goes from `"flex min-h-[250px] w-full items-center justify-center rounded-lg border border-dashed ..."` to `"flex min-h-[250px] w-full items-center justify-center border border-dashed ..."`.
|
||||
|
||||
3. In QuickAddPicker.tsx:
|
||||
- Line 156: Remove `rounded-sm` from the picker item className. Goes from `"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 ..."` to `"flex w-full items-center gap-2 px-2 py-1.5 ..."`.
|
||||
- Line 201: Remove `rounded-full` from the category dot className. Goes from `className="size-2 rounded-full"` to `className="size-2"`.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build</automated>
|
||||
</verify>
|
||||
<acceptance_criteria>
|
||||
- CategorySection.tsx does NOT contain `rounded-md`
|
||||
- ChartEmptyState.tsx does NOT contain `rounded-lg`
|
||||
- QuickAddPicker.tsx does NOT contain `rounded-sm` or `rounded-full`
|
||||
- `bun run build` exits 0
|
||||
</acceptance_criteria>
|
||||
<done>All 3 shared components have no hardcoded rounding classes; sharp corners enforced everywhere they appear</done>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<threat_model>
|
||||
## Trust Boundaries
|
||||
|
||||
No trust boundaries affected. This plan modifies CSS class strings in component JSX 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 class changes |
|
||||
</threat_model>
|
||||
|
||||
<verification>
|
||||
- `bun run build` passes after both tasks
|
||||
- grep confirms no `rounded-md`, `rounded-full`, `rounded-lg`, `rounded-sm` remain in the 5 modified files
|
||||
- grep confirms `gap-8` in PageShell.tsx
|
||||
</verification>
|
||||
|
||||
<success_criteria>
|
||||
- PageShell provides gap-8 section spacing to all pages
|
||||
- DashboardSkeleton has sharp skeletons and upgraded spacing
|
||||
- CategorySection trigger button has no rounded corners
|
||||
- ChartEmptyState border has no rounded corners
|
||||
- QuickAddPicker items and dots have no rounded corners
|
||||
- Build passes cleanly
|
||||
</success_criteria>
|
||||
|
||||
<output>
|
||||
After completion, create `.planning/phases/05-design-system-token-rework/05-02-SUMMARY.md`
|
||||
</output>
|
||||
Reference in New Issue
Block a user