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:
Arthur Belleville 2026-05-16 13:48:44 +02:00
parent d1499659bf
commit 555d41f247
No known key found for this signature in database

View file

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