builtbykev/vyndr
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

Session 33: Design system Phase A+B — tokens, fonts, glitch CSS, shared components (1792 tests)

Browse Source 
VYNDR 2.0 design-system conversion, foundation only (pages/mobile/systems are
Sessions 34+). Frontend-only; zero backend changes.

Phase A: §2 token set + token-wired typography + Inter/JetBrains Mono fonts +
§4 glitch keyframes (ported verbatim from the prototype's vyndr.css) + scanline
texture + §10 a11y data-* layer in globals.css. Legacy alias block kept.

Phase B: web/src/lib/vyndrTokens.js (CommonJS helpers) + 9 shared components
under web/src/components/vyndr/ (Wordmark, GradeBadge, SportBadge, TerminalInput,
SectionHead, VBtn, Card, Sparkline, Ticker).

74 new design-system tests. Backend 1718 -> 1792, 141 suites, zero regressions.
Web build clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kev
2026-06-15 22:58:57 -04:00
parent f0c8b4f29b
commit a74b5dd1ed
16 changed files with 1234 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CLAUDE.md
+30
View File
@@ -135,6 +135,36 @@ Tank01 betting-odds real shape: sportsbooks are TOP-LEVEL keys on each
game object (`{ awayTeam, homeTeam, bet365:{...} }`), not a `sportsBooks`
array. Filter `NON_BOOK_KEYS` to extract books (see `gameLines.js`).
## VYNDR 2.0 Design System (Session 33 — Phase A+B)
Multi-session frontend conversion of the claude.ai/design "VYNDR 2.0" handoff
(NOT a backend change). Foundation shipped; pages/mobile/systems are Sessions
34+. Source of truth = the prototype's `vyndr.css` + `VYNDR_HANDOFF.md`.
- **Tokens** live in `web/src/app/globals.css` `:root`. The NEW canonical set
is the short names: grades `--g-ap/--g-a/--g-b/--g-c/--g-d`, sports
`--s-nba/--s-mlb/--s-wnba/--s-soccer`, `--amber`, `--live/--hit/--miss`,
`--scan-op` (0.04), `--glitch` (1), `--sans` (Inter), `--mono` (JetBrains
Mono). The legacy alias block (`--grade-a`, `--nba`, `--accent`, …) is KEPT —
do not delete it until every consumer is migrated.
- **Two hard brand rules:** (1) JetBrains Mono (`var(--mono)` / `.mono`) for ALL
data — odds, %, timestamps, book names, stat lines, grades; Inter
(`var(--sans)`) for everything else. (2) Glitch animations apply ONLY to
chrome (wordmark, headers-on-hover, dividers, loaders, living layer). DATA
NEVER GLITCHES.
- **Glitch keyframes** (§4) are appended to globals.css after the legacy block —
later-wins where names collide, so the appended VYNDR-2.0 definitions are
authoritative. Entrance keyframes floor at the visible state (`fade-in` from
opacity .6) so a paused frame is never invisible.
- **Shared components**: `@/components/vyndr/*` (Wordmark, GradeBadge,
SportBadge, TerminalInput, SectionHead, VBtn, Card, Sparkline, Ticker), helpers
in `web/src/lib/vyndrTokens.js`. The NEW Wordmark is `.wm` markup at
`@/components/vyndr/Wordmark`; the legacy `@/components/Wordmark` (`.wordmark`)
is still used by Nav until pages convert. `vyndrTokens.js` is CommonJS so it's
importable by `.tsx` (allowJs) AND requireable by the plain-JS Jest suite —
keep helper logic there so it stays genuinely unit-testable.
- **a11y layer** (§10): `<html data-contrast|data-text|data-cb|data-font|
data-motion>` overrides in globals.css. Wiring the toggles to these attrs is
Phase G (Session 38).
## Active Skills
- vyndr-voice (all user-facing output)
- prop-analysis (grading methodology)