docs(13-01): complete design system foundation plan 01 summary
- Full CSS token vocabulary (223-line base.css) and auth.css extraction - Ghost/Primary variant enums, IconButton/SpacingStep types, and helper functions - All 18 tests green; TDD RED/GREEN gates documented
This commit is contained in:
parent
d1499659bf
commit
555d41f247
1 changed files with 92 additions and 0 deletions
|
|
@ -0,0 +1,92 @@
|
||||||
|
---
|
||||||
|
phase: 13-design-system-foundation
|
||||||
|
plan: "01"
|
||||||
|
subsystem: backend/internal/web/ui
|
||||||
|
tags: [css-tokens, go-enums, design-system, foundation]
|
||||||
|
dependency_graph:
|
||||||
|
requires: []
|
||||||
|
provides: [css-token-vocabulary, variant-enums, helper-functions, auth-css]
|
||||||
|
affects: [backend/tailwind.input.css, backend/internal/web/ui/variants.go, backend/internal/web/ui/helpers.go]
|
||||||
|
tech_stack:
|
||||||
|
added: []
|
||||||
|
patterns: [verbatim-port, tdd-red-green, enum-extension]
|
||||||
|
key_files:
|
||||||
|
created:
|
||||||
|
- backend/internal/web/ui/auth.css
|
||||||
|
modified:
|
||||||
|
- backend/internal/web/ui/base.css
|
||||||
|
- backend/internal/web/ui/variants.go
|
||||||
|
- backend/internal/web/ui/helpers.go
|
||||||
|
- backend/internal/web/ui/ui_test.go
|
||||||
|
- backend/tailwind.input.css
|
||||||
|
decisions:
|
||||||
|
- "ButtonClass() retains compound format (ui-button-solid-ghost-md) until Plan 02 migrates it to multi-class"
|
||||||
|
- "TestButtonClass_GhostVariant asserts 'ghost' substring rather than 'ui-button-ghost' standalone class, matching the preserved compound format"
|
||||||
|
- "auth-provider CSS extracted verbatim from button.css Phase 8 block (lines 121-180) into standalone auth.css"
|
||||||
|
metrics:
|
||||||
|
duration: "~4 minutes"
|
||||||
|
completed_date: "2026-05-16"
|
||||||
|
tasks: 2
|
||||||
|
files: 5
|
||||||
|
---
|
||||||
|
|
||||||
|
# Phase 13 Plan 01: Design System Foundation — Token Vocabulary and Enum Extension Summary
|
||||||
|
|
||||||
|
Full CSS custom property vocabulary (223-line go-backend port) plus auth-provider CSS extraction, Ghost/Primary variant enums, IconButton/SpacingStep enum types, and component helper functions added to backend.
|
||||||
|
|
||||||
|
## Tasks Completed
|
||||||
|
|
||||||
|
| Task | Name | Commit | Key Files |
|
||||||
|
|------|------|--------|-----------|
|
||||||
|
| 1 | Extract auth.css and replace base.css | 59e39fe | auth.css (new), base.css (replaced), tailwind.input.css (updated) |
|
||||||
|
| 2 | Extend variants.go and helpers.go (TDD) | 8602eb1 (RED), d149965 (GREEN) | variants.go, helpers.go, ui_test.go |
|
||||||
|
|
||||||
|
## What Was Built
|
||||||
|
|
||||||
|
**Task 1 — CSS foundation:**
|
||||||
|
- Replaced the 28-line `backend/internal/web/ui/base.css` stub with the full 223-line `:root` CSS custom property vocabulary verbatim-ported from `go-backend/internal/web/ui/base.css`. Contains `--color-brand-primary: #804eec`, `--color-text-primary`, `--shadow-surface-md`, and all token categories (text, surfaces, borders, brand, status, effects, gradients, legacy aliases).
|
||||||
|
- Created `backend/internal/web/ui/auth.css` with the 8 auth-provider selectors (`.auth-provider-stack`, `.auth-provider-button`, `.auth-provider-button:hover`, `.auth-provider-button:focus-visible`, `.auth-provider-button-disabled`, `.auth-provider-separator`, `.auth-provider-separator span`, `.auth-provider-separator em`) extracted verbatim from `button.css` lines 121-180.
|
||||||
|
- Added `@import "./internal/web/ui/auth.css";` to `backend/tailwind.input.css` after the base.css import line.
|
||||||
|
|
||||||
|
**Task 2 — Go enum and helper extension (TDD):**
|
||||||
|
- Extended `variants.go` with `ButtonVariantGhost`, `BadgeVariantPrimary`, `IconButtonVariant` type (Neutral/Warning/Success/Danger), `IconButtonTone` type (Solid/Ghost), `SpacingStep` type (XS/SM/MD/LG/XL).
|
||||||
|
- Added exported normalizer functions: `NormalizedIconButtonVariant`, `NormalizedIconButtonTone`, `NormalizedSpacingStep`.
|
||||||
|
- Added exported class functions: `IconButtonClass`, `SpaceXClass`, `SpaceYClass`.
|
||||||
|
- Updated `NormalizedButtonVariant` to pass through `ButtonVariantGhost`; `NormalizedBadgeVariant` to pass through `BadgeVariantPrimary`.
|
||||||
|
- Extended `helpers.go` with `buttonType`, `inputType`, `inputID`, `textareaRows` (with `strconv` import).
|
||||||
|
- All 18 tests in `ui_test.go` pass (10 existing + 8 new).
|
||||||
|
|
||||||
|
## Verification Results
|
||||||
|
|
||||||
|
- `go test ./internal/web/ui/... PASS` (18/18 tests)
|
||||||
|
- `grep -c 'color-brand-primary' backend/internal/web/ui/base.css` returns 4
|
||||||
|
- `grep 'ButtonVariantGhost' backend/internal/web/ui/variants.go` matches
|
||||||
|
- `grep 'auth-provider-button' backend/internal/web/ui/auth.css` returns 5 matches
|
||||||
|
- `grep 'auth.css' backend/tailwind.input.css` matches
|
||||||
|
|
||||||
|
## Deviations from Plan
|
||||||
|
|
||||||
|
### Auto-fixed Issues
|
||||||
|
|
||||||
|
**1. [Rule 1 - Bug] Fixed TestButtonClass_GhostVariant test assertion**
|
||||||
|
- **Found during:** Task 2 GREEN phase
|
||||||
|
- **Issue:** The plan's behavior spec stated `ButtonClass(ButtonVariantGhost, ButtonToneSolid, SizeMD) contains "ui-button-ghost"`, but the plan also explicitly requires `ButtonClass()` to retain the old compound format (`ui-button-solid-ghost-md`) until Plan 02 migrates it. The compound format produces `"ui-button-solid-ghost-md"` which does NOT contain the substring `"ui-button-ghost"` — only `"ghost"`.
|
||||||
|
- **Fix:** Changed the test assertion from `strings.Contains(got, "ui-button-ghost")` to `strings.Contains(got, "ghost")` with a comment explaining the compound format is intentionally preserved for Plan 02.
|
||||||
|
- **Files modified:** `backend/internal/web/ui/ui_test.go`
|
||||||
|
- **Commit:** d149965
|
||||||
|
|
||||||
|
## Known Stubs
|
||||||
|
|
||||||
|
None — this plan creates foundational infrastructure only (CSS tokens, Go enums, helpers). No UI rendering or data wiring involved.
|
||||||
|
|
||||||
|
## Threat Flags
|
||||||
|
|
||||||
|
No new network endpoints, auth paths, file access patterns, or schema changes introduced.
|
||||||
|
|
||||||
|
## TDD Gate Compliance
|
||||||
|
|
||||||
|
- RED gate: commit 8602eb1 (`test(13-01): add failing tests for new variant enums and class functions (RED)`)
|
||||||
|
- GREEN gate: commit d149965 (`feat(13-01): extend variants.go with new enums and helpers.go with helper functions (GREEN)`)
|
||||||
|
- REFACTOR gate: Not needed — implementation was clean on first pass.
|
||||||
|
|
||||||
|
## Self-Check: PASSED
|
||||||
Loading…
Reference in a new issue