Claude UI team working now
This commit is contained in:
19
.claude/settings.local.json
Normal file
19
.claude/settings.local.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(ls -lh *.css)",
|
||||
"Bash(node tests/*)",
|
||||
"Bash(python3 .claude/skills/*)",
|
||||
"Bash(git status*)",
|
||||
"Bash(git add*)",
|
||||
"Bash(git commit*)",
|
||||
"Bash(git log*)",
|
||||
"Bash(git diff*)",
|
||||
"Bash(git branch*)",
|
||||
"Bash(git checkout*)",
|
||||
"Read(//c/Users/JohnOReilly/OneDrive - Silicon Valley Services/Documents/Projects VS CODE/SVS MSP Calculator/**)",
|
||||
"mcp__plugin_playwright_playwright__browser_evaluate",
|
||||
"mcp__plugin_playwright_playwright__browser_run_code"
|
||||
]
|
||||
}
|
||||
}
|
||||
1
.playwright-mcp/console-2026-03-16T20-42-35-139Z.log
Normal file
1
.playwright-mcp/console-2026-03-16T20-42-35-139Z.log
Normal file
@@ -0,0 +1 @@
|
||||
[ 245ms] [ERROR] Failed to load resource: the server responded with a status of 404 (File not found) @ http://localhost:8765/favicon.ico:0
|
||||
386
docs/superpowers/plans/2026-03-16-spacing-token-consolidation.md
Normal file
386
docs/superpowers/plans/2026-03-16-spacing-token-consolidation.md
Normal file
@@ -0,0 +1,386 @@
|
||||
# Spacing Token Consolidation — Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Replace ~183 hardcoded px values across 6 CSS files with design tokens, improving maintainability and theme consistency.
|
||||
|
||||
**Architecture:** Three sequential phases — border widths, spacing token adoption, border-radius scale. Each phase touches all affected files, gets verified via Playwright + tests, and is committed independently.
|
||||
|
||||
**Tech Stack:** Vanilla CSS custom properties (no build tools). Playwright MCP for visual verification.
|
||||
|
||||
**Spec:** `docs/superpowers/specs/2026-03-16-spacing-token-consolidation-design.md`
|
||||
|
||||
---
|
||||
|
||||
## Pre-flight
|
||||
|
||||
- [ ] **Step 0a: Run baseline tests**
|
||||
|
||||
Run: `node tests/test-quote-engine.js`
|
||||
Expected: `254/254 tests passing`
|
||||
|
||||
- [ ] **Step 0b: Capture baseline Playwright screenshots**
|
||||
|
||||
Use Playwright MCP to capture screenshots for pixel-diff comparison after each phase:
|
||||
1. Navigate to `SVS-MSP-Calculator.html` at 1920x1080
|
||||
2. Screenshot Dark theme (default) → save reference
|
||||
3. Toggle to Light theme → screenshot → save reference
|
||||
4. Toggle to Glass theme → screenshot → save reference
|
||||
5. Resize to 375px width → screenshot mobile (Dark) → save reference
|
||||
|
||||
These are your "before" images. After each phase, re-capture and visually compare.
|
||||
|
||||
---
|
||||
|
||||
## Chunk 1: Phase 1 — Border Width Tokens
|
||||
|
||||
### Task 1: Add border width tokens to tokens.css
|
||||
|
||||
**Files:**
|
||||
- Modify: `SVS-MSP-Calculator-tokens.css:66-68` (insert before `--radius-control`)
|
||||
|
||||
- [ ] **Step 1: Add new tokens**
|
||||
|
||||
Insert these 3 lines immediately before `--radius-control: 6px;` (line 67):
|
||||
|
||||
```css
|
||||
--border-thin: 1px;
|
||||
--border-medium: 2px;
|
||||
--border-thick: 3px;
|
||||
```
|
||||
|
||||
The `:root` block at this point should read:
|
||||
```css
|
||||
--space-4xl: 32px;
|
||||
--border-thin: 1px;
|
||||
--border-medium: 2px;
|
||||
--border-thick: 3px;
|
||||
--radius-control: 6px;
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Verify no syntax errors**
|
||||
|
||||
Run: `node tests/test-quote-engine.js`
|
||||
Expected: `254/254 tests passing` (CSS-only change, tests should still pass)
|
||||
|
||||
---
|
||||
|
||||
### Task 2: Tokenize border widths in components.css
|
||||
|
||||
**Files:**
|
||||
- Modify: `SVS-MSP-Calculator-components.css`
|
||||
|
||||
- [ ] **Step 1: Replace all `1px` border values**
|
||||
|
||||
Search for these patterns and replace. Apply ONLY to border properties (`border`, `border-top`, `border-bottom`, `border-left`, `border-right`, `border-width`, `border-*-width`). Include `solid`, `dashed`, and `dotted` styles.
|
||||
|
||||
**DO NOT replace** `1px` in:
|
||||
- `calc()` expressions
|
||||
- `box-shadow` values
|
||||
- `outline` properties
|
||||
- `pre-alpha/` directory
|
||||
|
||||
Replace pattern: `1px solid` → `var(--border-thin) solid`, `1px dashed` → `var(--border-thin) dashed`, `border-width: 1px` → `border-width: var(--border-thin)`, etc.
|
||||
|
||||
- [ ] **Step 2: Replace all `2px` border values**
|
||||
|
||||
Same pattern as Step 1 but for `2px` → `var(--border-medium)`. Only border properties — skip `padding: 2px` or `margin: 2px` (those are spacing).
|
||||
|
||||
- [ ] **Step 3: Replace all `3px` border values**
|
||||
|
||||
Same pattern for `3px` → `var(--border-thick)`. Only border properties.
|
||||
|
||||
- [ ] **Step 4: Verify — run tests**
|
||||
|
||||
Run: `node tests/test-quote-engine.js`
|
||||
Expected: `254/254 tests passing`
|
||||
|
||||
---
|
||||
|
||||
### Task 3: Tokenize border widths in remaining files
|
||||
|
||||
**Files:**
|
||||
- Modify: `SVS-MSP-Calculator-responsive.css`
|
||||
- Modify: `SVS-MSP-Calculator-layout.css`
|
||||
- Modify: `SVS-MSP-Calculator-print.css`
|
||||
- Modify: `SVS-MSP-Calculator-base.css`
|
||||
- Modify: `SVS-MSP-Calculator-glass.css`
|
||||
|
||||
- [ ] **Step 1: Replace border widths in responsive.css**
|
||||
|
||||
Same rules as Task 2. Replace `1px`/`2px`/`3px` in border properties only. Respect all exclusions (calc, box-shadow, outline).
|
||||
|
||||
- [ ] **Step 2: Replace border widths in layout.css**
|
||||
|
||||
Same rules.
|
||||
|
||||
- [ ] **Step 3: Replace border widths in print.css**
|
||||
|
||||
Same rules.
|
||||
|
||||
- [ ] **Step 4: Replace border widths in base.css**
|
||||
|
||||
Known instances:
|
||||
- `border-bottom: 2px solid var(--top-bar-border)` → `border-bottom: var(--border-medium) solid var(--top-bar-border)`
|
||||
- `border: 1px solid var(--theme-chip-border)` → `border: var(--border-thin) solid var(--theme-chip-border)`
|
||||
|
||||
- [ ] **Step 5: Replace border widths in glass.css**
|
||||
|
||||
Known instance:
|
||||
- `border-bottom-width: 1px !important` → `border-bottom-width: var(--border-thin) !important`
|
||||
|
||||
- [ ] **Step 6: Verify — run tests**
|
||||
|
||||
Run: `node tests/test-quote-engine.js`
|
||||
Expected: `254/254 tests passing`
|
||||
|
||||
---
|
||||
|
||||
### Task 4: Phase 1 visual verification
|
||||
|
||||
- [ ] **Step 1: Playwright screenshots — all 3 themes at 1920px**
|
||||
|
||||
Navigate to calculator. Screenshot Dark, Light, Glass at 1920x1080. Compare against baseline from Step 0b. Changes should be zero — this is a pure refactor.
|
||||
|
||||
- [ ] **Step 2: Playwright screenshots — mobile at 375px**
|
||||
|
||||
Resize to 375px. Verify floating MRR pill visible, mobile panel opens, values sync.
|
||||
|
||||
- [ ] **Step 3: Playwright — print emulation**
|
||||
|
||||
Enable print media emulation. Verify all sections expand, interactive controls hidden, no visual regressions.
|
||||
|
||||
- [ ] **Step 4: Commit Phase 1**
|
||||
|
||||
```bash
|
||||
git add SVS-MSP-Calculator-tokens.css SVS-MSP-Calculator-components.css SVS-MSP-Calculator-responsive.css SVS-MSP-Calculator-layout.css SVS-MSP-Calculator-print.css SVS-MSP-Calculator-base.css SVS-MSP-Calculator-glass.css
|
||||
git commit -m "css: tokenize border widths — consolidate 1px/2px/3px to --border-thin/medium/thick"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Chunk 2: Phase 2 — Adopt Existing Spacing Tokens
|
||||
|
||||
### Task 5: Replace hardcoded spacing values in components.css
|
||||
|
||||
**Files:**
|
||||
- Modify: `SVS-MSP-Calculator-components.css`
|
||||
|
||||
- [ ] **Step 1: Replace `4px` spacing → `var(--space-xs)`**
|
||||
|
||||
Search for `margin`, `padding`, and `gap` properties using hardcoded `4px`. Replace with `var(--space-xs)`.
|
||||
|
||||
**DO NOT replace** `4px` when used as:
|
||||
- `border-radius` (Phase 3)
|
||||
- `font-size`, `width`, `height`
|
||||
- Inside `clamp()` or `calc()`
|
||||
- Values that are already `var(--space-xs)`
|
||||
|
||||
- [ ] **Step 2: Replace `8px` spacing → `var(--space-sm)`**
|
||||
|
||||
Same rules — only `margin`, `padding`, `gap`. Skip `border-radius: 8px` (Phase 3).
|
||||
|
||||
- [ ] **Step 3: Replace `10px` spacing → `var(--space-stack-tight)`**
|
||||
|
||||
Same rules. Only spacing properties.
|
||||
|
||||
- [ ] **Step 4: Replace `12px` spacing → `var(--space-md)`**
|
||||
|
||||
Only spacing properties. Skip `border-radius: 12px` (already uses `--radius-card`).
|
||||
|
||||
- [ ] **Step 5: Replace `16px` spacing → `var(--space-stack-roomy)`**
|
||||
|
||||
Only spacing properties. Skip font-size and width/height uses.
|
||||
|
||||
- [ ] **Step 6: Replace `18px` spacing → `var(--space-lg)`**
|
||||
|
||||
Only spacing properties. Skip icon sizing.
|
||||
|
||||
- [ ] **Step 7: Replace `20px` spacing → `var(--space-xl)`**
|
||||
|
||||
Only spacing properties.
|
||||
|
||||
- [ ] **Step 8: Verify — run tests**
|
||||
|
||||
Run: `node tests/test-quote-engine.js`
|
||||
Expected: `254/254 tests passing`
|
||||
|
||||
---
|
||||
|
||||
### Task 6: Replace hardcoded spacing in remaining files
|
||||
|
||||
**Files:**
|
||||
- Modify: `SVS-MSP-Calculator-layout.css`
|
||||
- Modify: `SVS-MSP-Calculator-responsive.css`
|
||||
- Modify: `SVS-MSP-Calculator-print.css`
|
||||
- Modify: `SVS-MSP-Calculator-base.css`
|
||||
|
||||
- [ ] **Step 1: Replace spacing values in layout.css**
|
||||
|
||||
Same rules as Task 5. Only `margin`, `padding`, `gap` properties. Skip values in `clamp()`.
|
||||
|
||||
- [ ] **Step 2: Replace spacing values in responsive.css**
|
||||
|
||||
Same rules.
|
||||
|
||||
- [ ] **Step 3: Replace spacing values in print.css**
|
||||
|
||||
Same rules.
|
||||
|
||||
- [ ] **Step 4: Replace spacing values in base.css**
|
||||
|
||||
Known instance: `gap: 16px` → `gap: var(--space-stack-roomy)`. Same exclusion rules apply.
|
||||
|
||||
- [ ] **Step 5: Verify — run tests**
|
||||
|
||||
Run: `node tests/test-quote-engine.js`
|
||||
Expected: `254/254 tests passing`
|
||||
|
||||
---
|
||||
|
||||
### Task 7: Phase 2 visual verification
|
||||
|
||||
- [ ] **Step 1: Playwright screenshots — all 3 themes at 1920px**
|
||||
|
||||
Compare against Phase 1 screenshots. Changes should be zero.
|
||||
|
||||
- [ ] **Step 2: Playwright screenshots — mobile at 375px**
|
||||
|
||||
Verify pill, panel, sync all working.
|
||||
|
||||
- [ ] **Step 3: Playwright — print emulation**
|
||||
|
||||
Enable print media emulation. Verify no regressions from print.css spacing changes.
|
||||
|
||||
- [ ] **Step 4: Commit Phase 2**
|
||||
|
||||
```bash
|
||||
git add SVS-MSP-Calculator-components.css SVS-MSP-Calculator-layout.css SVS-MSP-Calculator-responsive.css SVS-MSP-Calculator-print.css SVS-MSP-Calculator-base.css
|
||||
git commit -m "css: adopt existing spacing tokens — replace hardcoded 4-20px with var(--space-*)"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Chunk 3: Phase 3 — Border-Radius Scale
|
||||
|
||||
### Task 8: Add border-radius tokens to tokens.css
|
||||
|
||||
**Files:**
|
||||
- Modify: `SVS-MSP-Calculator-tokens.css` (insert after `--border-thick`, before `--radius-control`)
|
||||
|
||||
- [ ] **Step 1: Add new radius tokens**
|
||||
|
||||
Insert into the radius section in **ascending px order**, interleaving with existing `--radius-control` (6px) and `--radius-card` (12px):
|
||||
|
||||
```css
|
||||
--border-thick: 3px;
|
||||
--radius-sm: 4px; /* NEW */
|
||||
--radius-control: 6px; /* existing */
|
||||
--radius-md: 8px; /* NEW */
|
||||
--radius-lg: 10px; /* NEW */
|
||||
--radius-card: 12px; /* existing */
|
||||
--radius-pill: 999px; /* NEW */
|
||||
```
|
||||
|
||||
This requires inserting at 3 positions:
|
||||
1. `--radius-sm: 4px;` before `--radius-control`
|
||||
2. `--radius-md: 8px;` and `--radius-lg: 10px;` between `--radius-control` and `--radius-card`
|
||||
3. `--radius-pill: 999px;` after `--radius-card`
|
||||
|
||||
- [ ] **Step 2: Verify — run tests**
|
||||
|
||||
Run: `node tests/test-quote-engine.js`
|
||||
Expected: `254/254 tests passing`
|
||||
|
||||
---
|
||||
|
||||
### Task 9: Tokenize border-radius in components.css
|
||||
|
||||
**Files:**
|
||||
- Modify: `SVS-MSP-Calculator-components.css`
|
||||
|
||||
- [ ] **Step 1: Replace `border-radius: 4px` → `var(--radius-sm)`**
|
||||
|
||||
Search for all `border-radius` properties using `4px`. Replace with `var(--radius-sm)`. Skip values inside `calc()`.
|
||||
|
||||
- [ ] **Step 2: Replace `border-radius: 8px` → `var(--radius-md)`**
|
||||
|
||||
Same pattern.
|
||||
|
||||
- [ ] **Step 3: Replace `border-radius: 10px` → `var(--radius-lg)`**
|
||||
|
||||
Same pattern.
|
||||
|
||||
- [ ] **Step 4: Replace `border-radius: 999px` → `var(--radius-pill)`**
|
||||
|
||||
Same pattern.
|
||||
|
||||
- [ ] **Step 5: Verify — run tests**
|
||||
|
||||
Run: `node tests/test-quote-engine.js`
|
||||
Expected: `254/254 tests passing`
|
||||
|
||||
---
|
||||
|
||||
### Task 10: Tokenize border-radius in remaining files
|
||||
|
||||
**Files:**
|
||||
- Modify: `SVS-MSP-Calculator-responsive.css`
|
||||
- Modify: `SVS-MSP-Calculator-base.css`
|
||||
|
||||
- [ ] **Step 1: Replace border-radius values in responsive.css**
|
||||
|
||||
Same rules as Task 9.
|
||||
|
||||
- [ ] **Step 2: Replace border-radius values in base.css**
|
||||
|
||||
Known instance: `border-radius: 8px` → `var(--radius-md)`
|
||||
|
||||
- [ ] **Step 3: Verify — run tests**
|
||||
|
||||
Run: `node tests/test-quote-engine.js`
|
||||
Expected: `254/254 tests passing`
|
||||
|
||||
---
|
||||
|
||||
### Task 11: Phase 3 visual verification + final commit
|
||||
|
||||
- [ ] **Step 1: Playwright screenshots — all 3 themes at 1920px**
|
||||
|
||||
Compare against Phase 2 screenshots. Changes should be zero.
|
||||
|
||||
- [ ] **Step 2: Playwright screenshots — mobile at 375px**
|
||||
|
||||
Verify pill, panel, sync.
|
||||
|
||||
- [ ] **Step 3: Playwright — print emulation**
|
||||
|
||||
Final print check.
|
||||
|
||||
- [ ] **Step 4: Commit Phase 3**
|
||||
|
||||
```bash
|
||||
git add SVS-MSP-Calculator-tokens.css SVS-MSP-Calculator-components.css SVS-MSP-Calculator-responsive.css SVS-MSP-Calculator-base.css
|
||||
git commit -m "css: tokenize border-radius — consolidate to --radius-sm/md/lg/pill scale"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Post-flight
|
||||
|
||||
- [ ] **Step final-a: Run full test suite**
|
||||
|
||||
Run: `node tests/test-quote-engine.js`
|
||||
Expected: `254/254 tests passing`
|
||||
|
||||
- [ ] **Step final-b: Final Playwright verification — all themes, all viewports**
|
||||
|
||||
Full sweep: Dark/Light/Glass at 1920px + 375px mobile + print. Compare against original baseline screenshots.
|
||||
|
||||
- [ ] **Step final-c: Update SESSION-HANDOFF.md**
|
||||
|
||||
Record what was done, files modified, test status, and next steps.
|
||||
|
||||
- [ ] **Step final-d: Update KNOWN-ISSUES.md**
|
||||
|
||||
Mark "Spacing token consolidation — 150+ magic px values" as partially resolved (Phases 1-3 complete, Phases 4-6 remain).
|
||||
@@ -0,0 +1,202 @@
|
||||
# Spacing Token Consolidation — Design Spec
|
||||
|
||||
**Date:** 2026-03-16
|
||||
**Status:** Approved
|
||||
**Scope:** Phases 1-3 (~183 instances across 5 CSS files)
|
||||
**Approach:** Phase-by-phase across all files, one commit per phase
|
||||
|
||||
---
|
||||
|
||||
## Context
|
||||
|
||||
The SVS MSP Calculator CSS has ~420 hardcoded px values across 75+ unique values. About half already have tokens defined in `SVS-MSP-Calculator-tokens.css` but aren't being used. This consolidation pass addresses the highest-ROI phases: border widths, existing token adoption, and border-radius scale.
|
||||
|
||||
**Why now:** The project is moving from alpha to beta. Consolidating magic numbers improves maintainability, makes theme adjustments easier, and reduces regression risk from future CSS changes.
|
||||
|
||||
**What's NOT in scope:** Icon/button sizing tokens (Phase 4), typography scale (Phase 5), breakpoint tokens (Phase 6 — CSS vars can't be used in `@media` queries anyway).
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: Border Width Tokens (~124 instances)
|
||||
|
||||
### New tokens (add to `SVS-MSP-Calculator-tokens.css`)
|
||||
|
||||
```css
|
||||
--border-thin: 1px; /* structural borders */
|
||||
--border-medium: 2px; /* accent borders, summary badges */
|
||||
--border-thick: 3px; /* sidebar decorators, group strips */
|
||||
```
|
||||
|
||||
### Replacement rules
|
||||
|
||||
| Pattern | Replacement |
|
||||
|---------|-------------|
|
||||
| `border: 1px solid ...` | `border: var(--border-thin) solid ...` |
|
||||
| `border-top: 1px solid ...` | `border-top: var(--border-thin) solid ...` |
|
||||
| `border-bottom: 1px solid ...` | `border-bottom: var(--border-thin) solid ...` |
|
||||
| `border-left: 1px solid ...` | `border-left: var(--border-thin) solid ...` |
|
||||
| `border-right: 1px solid ...` | `border-right: var(--border-thin) solid ...` |
|
||||
| `border-width: 1px` | `border-width: var(--border-thin)` |
|
||||
| Same patterns for `2px` | Use `var(--border-medium)` |
|
||||
| `border: 1px dashed ...` | `border: var(--border-thin) dashed ...` |
|
||||
| `border: 1px dotted ...` | `border: var(--border-thin) dotted ...` |
|
||||
| `border-*-width: 1px` | `border-*-width: var(--border-thin)` |
|
||||
| Same patterns for `2px` | Use `var(--border-medium)` |
|
||||
| Same patterns for `3px` | Use `var(--border-thick)` |
|
||||
|
||||
### Files affected
|
||||
|
||||
1. `SVS-MSP-Calculator-components.css` (~86 instances)
|
||||
2. `SVS-MSP-Calculator-responsive.css` (~19 instances)
|
||||
3. `SVS-MSP-Calculator-layout.css` (~12 instances)
|
||||
4. `SVS-MSP-Calculator-print.css` (~7 instances)
|
||||
5. `SVS-MSP-Calculator-base.css` (~2 instances)
|
||||
6. `SVS-MSP-Calculator-glass.css` (~1 instance)
|
||||
|
||||
### Global exclusions
|
||||
|
||||
- `pre-alpha/` directory — archived reference, do not modify
|
||||
- `1px` in `calc()` expressions — visual micro-adjustments
|
||||
- `1px` in `box-shadow` offsets — shadow geometry, not borders
|
||||
- `1px` in `outline` — separate concern
|
||||
- `2px` in non-border contexts (e.g., `padding: 2px`) — that's spacing, not border width
|
||||
|
||||
### Commit message
|
||||
|
||||
`css: tokenize border widths — consolidate 1px/2px/3px to --border-thin/medium/thick`
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: Adopt Existing Spacing Tokens (~37 instances)
|
||||
|
||||
### No new tokens — use what already exists
|
||||
|
||||
| Hardcoded | Token | Count |
|
||||
|-----------|-------|-------|
|
||||
| `4px` (spacing) | `var(--space-xs)` | ~12 |
|
||||
| `8px` (spacing) | `var(--space-sm)` | ~11 |
|
||||
| `10px` (spacing) | `var(--space-stack-tight)` | ~5 |
|
||||
| `12px` (spacing) | `var(--space-md)` | ~2 |
|
||||
| `16px` (spacing) | `var(--space-stack-roomy)` | ~2 |
|
||||
| `18px` (spacing) | `var(--space-lg)` | ~2 |
|
||||
| `20px` (spacing) | `var(--space-xl)` | ~3 |
|
||||
|
||||
### Replacement rules
|
||||
|
||||
Only replace `margin`, `padding`, and `gap` properties. Do NOT replace:
|
||||
- `border-radius` values (Phase 3)
|
||||
- `font-size` values (out of scope)
|
||||
- `width`/`height` values (out of scope)
|
||||
- Values in `clamp()` or `calc()` expressions
|
||||
- Intentional off-grid values (`5px`, `9px`, `7px`) — these are deliberate tweaks
|
||||
|
||||
### Files affected
|
||||
|
||||
1. `SVS-MSP-Calculator-components.css` (~30 instances)
|
||||
2. `SVS-MSP-Calculator-layout.css` (~4 instances)
|
||||
3. `SVS-MSP-Calculator-responsive.css` (~2 instances)
|
||||
4. `SVS-MSP-Calculator-print.css` (~1 instance)
|
||||
|
||||
### Commit message
|
||||
|
||||
`css: adopt existing spacing tokens — replace hardcoded 4-20px with var(--space-*)`
|
||||
|
||||
---
|
||||
|
||||
## Phase 3: Border-Radius Scale (~20 instances)
|
||||
|
||||
### New tokens (add to `SVS-MSP-Calculator-tokens.css`)
|
||||
|
||||
```css
|
||||
--radius-sm: 4px; /* small corners: pills, badges, small buttons */
|
||||
--radius-md: 8px; /* medium corners: cards, modals, containers */
|
||||
--radius-lg: 10px; /* large corners: pill buttons, modal dialogs */
|
||||
--radius-pill: 999px; /* perfect pill shape */
|
||||
```
|
||||
|
||||
Existing tokens remain unchanged:
|
||||
- `--radius-control: 6px` — input controls
|
||||
- `--radius-card: 12px` — section cards
|
||||
|
||||
### Replacement rules
|
||||
|
||||
| Hardcoded | Token | Count |
|
||||
|-----------|-------|-------|
|
||||
| `border-radius: 4px` | `var(--radius-sm)` | ~12 |
|
||||
| `border-radius: 8px` | `var(--radius-md)` | ~8 |
|
||||
| `border-radius: 10px` | `var(--radius-lg)` | ~4 |
|
||||
| `border-radius: 999px` | `var(--radius-pill)` | ~1 |
|
||||
|
||||
### Exclusions
|
||||
|
||||
- `border-radius` values inside `clamp()` or `calc()`
|
||||
- Outlier values (`2px`, `3px`, `7px`) — keep as hardcoded, too unique to tokenize
|
||||
|
||||
### Files affected
|
||||
|
||||
1. `SVS-MSP-Calculator-components.css` (~18 instances)
|
||||
2. `SVS-MSP-Calculator-responsive.css` (~2 instances)
|
||||
3. `SVS-MSP-Calculator-base.css` (~1 instance)
|
||||
|
||||
### Commit message
|
||||
|
||||
`css: tokenize border-radius — consolidate to --radius-sm/md/lg/pill scale`
|
||||
|
||||
---
|
||||
|
||||
## Verification (per phase)
|
||||
|
||||
1. **Tests:** `node tests/test-quote-engine.js` — 254/254 must pass
|
||||
2. **Visual:** Playwright screenshots at 1920px — Dark, Light, Glass themes
|
||||
3. **Mobile:** Playwright at 375px — floating MRR pill, bottom sheet, sync
|
||||
4. **Print:** Playwright print media emulation — no regressions
|
||||
5. **Diff:** Pixel-compare screenshots before/after — changes should be zero (pure refactor)
|
||||
|
||||
---
|
||||
|
||||
## Risk Assessment
|
||||
|
||||
| Risk | Mitigation |
|
||||
|------|------------|
|
||||
| Accidental visual change | Playwright pixel-diff before/after each phase |
|
||||
| Theme-specific breakage | Light/Glass only override colors/shadows, not border-widths or spacing — low risk |
|
||||
| Mobile sync breakage | No DOM ID changes — zero risk |
|
||||
| Print regression | Print CSS uses same tokens — verify with print emulation |
|
||||
| Token name collision | Checked: no existing `--border-thin/medium/thick` or `--radius-sm/md/lg/pill` tokens |
|
||||
| `!important` in theme overrides | Tokenizing `1px !important` in glass.css is valid CSS; border widths don't vary by theme so low risk |
|
||||
|
||||
---
|
||||
|
||||
## Token Summary (final state after all 3 phases)
|
||||
|
||||
### New tokens added to `SVS-MSP-Calculator-tokens.css`
|
||||
|
||||
```css
|
||||
/* Border widths */
|
||||
--border-thin: 1px;
|
||||
--border-medium: 2px;
|
||||
--border-thick: 3px;
|
||||
|
||||
/* Border radius (additions to existing scale) */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 10px;
|
||||
--radius-pill: 999px;
|
||||
```
|
||||
|
||||
### Existing tokens (no changes)
|
||||
|
||||
```css
|
||||
/* Spacing (already defined, now actually used) */
|
||||
--space-xs: 4px;
|
||||
--space-sm: 8px;
|
||||
--space-stack-tight: 10px;
|
||||
--space-md: 12px;
|
||||
--space-stack-roomy: 16px;
|
||||
--space-lg: 18px;
|
||||
--space-xl: 20px;
|
||||
|
||||
/* Radius (already defined, unchanged) */
|
||||
--radius-control: 6px;
|
||||
--radius-card: 12px;
|
||||
```
|
||||
Reference in New Issue
Block a user