87 lines
3.6 KiB
Markdown
87 lines
3.6 KiB
Markdown
# Session Handoff — SVS MSP CALC
|
|
|
|
**Last updated:** 2026-03-18
|
|
**Session:** Sidebar UX Polish + Readability Pass
|
|
**Status:** Sidebar dividers unified, letter-spacing improved, contrast & font floor applied. Committed.
|
|
**Tests:** 254/254 passing
|
|
|
|
## Current State
|
|
|
|
### What's Committed
|
|
- **Sidebar divider unification** — one `--sidebar-rule` token + `dashed` style everywhere. Old tokens removed: `--sidebar-line-rule`, `--sidebar-line-rule-style`, `--sidebar-total-rule`, `--sidebar-total-rule-style`
|
|
- **Total line scoped** — border-top only on `.sidebar-group--monthly .sidebar-line-total`, removed from invoice/value/summary
|
|
- **Letter-spacing token** — `--text-spacing-money: 0.05em` (was hardcoded 0.02em), applied to `.val`, `.sl-sub`, `.suffix-mo`
|
|
- **Font size floor** — 6 locations bumped from 8px/10px/0.625rem → 0.6875rem (11px min)
|
|
- **Muted contrast improved** — Dark `#9e9588`→`#b0a99f` (6.6:1), Light `#6a6157`→`#554e46` (6.5:1)
|
|
- **Opacity cleanup** — removed opacity from 9 text elements that were double-muting with `--muted`
|
|
- **Sidebar fine-print line-height** — `.vs-footnote` 1.75, `.sidebar-note-mono` 1.65, responsive 1.7
|
|
|
|
### What's NOT Committed (still modified)
|
|
- `CLAUDE.md` — updated from beta
|
|
- `CLAUDE-nextsteps.md` — resume guide
|
|
- `docs/SESSION-HANDOFF.md` — this file
|
|
- `.claude/` config files, `.mcp.json`
|
|
- Various screenshot PNGs (can be cleaned up)
|
|
- Deleted docs: `CHECKPOINT.md`, `MASTER-SESSION-PROMPT.md`, `regression-checklist.md`
|
|
|
|
### Accesslint Contrast Audit Results
|
|
All sidebar text passes WCAG AA across all 3 themes:
|
|
| Theme | Weakest Pair | Ratio |
|
|
|-------|-------------|-------|
|
|
| Dark | muted on card | 6.64:1 |
|
|
| Light | muted on sidebar-body | 6.54:1 |
|
|
| Glass | muted on card | 8.73:1 |
|
|
|
|
## What's Next
|
|
|
|
### Priority 1: Google Fonts (approved, max 3)
|
|
- Google Fonts are on the table — user approved up to 3 (prefer), 4 hard cap
|
|
- Currently using: Poppins (hero numbers), DM Mono (values/mono), system sans-serif (body)
|
|
- Explore: clean sans-serif for body/labels to improve readability at small sizes
|
|
- Consider: Inter, IBM Plex Sans, Source Sans 3, or similar
|
|
|
|
### Priority 2: GUI Polish List A
|
|
- Contract Term pills — more vertical padding on unselected
|
|
- Section card collapsed headers — slightly tight vertically
|
|
- "MANAGED IT SERVICES (SECTIONS I, II, III)" label — low contrast
|
|
- Insight carousel text — more line-height
|
|
- "QUOTE NOTES" label spacing — inconsistent with other section labels
|
|
|
|
### Priority 3: Typography Token Pass
|
|
- Tokenize remaining hardcoded letter-spacing values (~20 locations)
|
|
- Tokenize hardcoded font-sizes not yet on tokens
|
|
- Move sidebar typography tokens from components.css to tokens.css
|
|
- Phase 4: icon/button sizing (~12 hardcoded values)
|
|
- Phase 6: responsive breakpoint font-sizes (optional)
|
|
|
|
### Priority 4: Sections IV-VI Activation
|
|
### Priority 5: Mobile Panel UX Enhancements
|
|
|
|
## Key References
|
|
- Token file: `SVS-MSP-Calculator-tokens.css`
|
|
- Sidebar styles: `SVS-MSP-Calculator-components.css`
|
|
- Theme overrides: `SVS-MSP-Calculator-light.css`, `SVS-MSP-Calculator-glass.css`
|
|
- Tests: `node tests/test-quote-engine.js` — 254/254
|
|
|
|
## Test Status
|
|
```
|
|
254/254 tests passing
|
|
node tests/test-quote-engine.js
|
|
```
|
|
|
|
## Continuation Prompt
|
|
|
|
```
|
|
Read docs/SESSION-HANDOFF.md and CLAUDE-nextsteps.md.
|
|
3 themes: Dark, Light, Glass.
|
|
254 tests must pass: node tests/test-quote-engine.js
|
|
|
|
## Resume Point: Google Fonts + GUI Polish
|
|
|
|
Google Fonts approved (max 3). Currently: Poppins, DM Mono, system sans-serif.
|
|
Pick a body/label font, then continue with polish list A items.
|
|
|
|
Use Playwright MCP for visual verification across all 3 themes.
|
|
Use accesslint for contrast checking on any color changes.
|
|
```
|