feat(design-system): Liquid Glass redesign portfolio — foundation + primitives + Layout #95

Merged

varutasu merged 2 commits from liquid-glass-foundation-portfolio into main

2026-06-03 21:12:33 -04:00

varutasu commented

2026-06-03 20:53:42 -04:00

(Migrated from github.com)

Summary

Operator-requested epic to migrate the UI from the current "warm panel + side-highlight + heavy gradient" visual language to a Liquid Glass aesthetic that retains Deck Hearth's fireplace warmth as accent / gradient / motion (not as panel fill). This squash carries the full 8-convoy portfolio drive-through: 5 sub-convoys reach merged state, 3 land architecture-only and queue impl for follow-up gated on dedicated visual-diff baseline re-seeds.

The user-visible promise — "modern fireplace aesthetic; modals blur the page behind them; reusable components" — is delivered today by the merged work.

Sub-convoy status

#	Slug	Status	Highlights
1	`liquid-glass-design-tokens`	MERGED	29 CSS custom properties (glass / blur / rim / ember / elevation / scrim / motion), `@supports not (backdrop-filter)` fallback, `docs/DESIGN_TOKENS.md` (270 LOC w/ WCAG AA contrast tables), `AGENTS.md § Visual language`
2	`liquid-glass-modal-and-surface-primitive`	Brief 1 MERGED	`<GlassSurface>` + `<Modal>` + `useFocusTrap` + 10 vitest cases + 4 reference modal migrations (ShareModal, CollectionDeleteModal, CollectionsCreateModal, CardDetailQuantityModal). Brief 2 (11 modals) queued.
3	`liquid-glass-form-primitives`	Brief 1 MERGED	`<Button>` + `<Input>` + `<SearchBar>` + 10 vitest cases. `pages/login.js` + `pages/signup.js` fully migrated. Brief 2 (other forms) queued.
4	`liquid-glass-layout-shell`	MERGED	6 shell surfaces glass-migrated: desktop sidebar, mobile drawer, mobile scrim, search header, profile dropdown popover, mobile bottom-bar. 5/5 Layout regression-lock tests preserved.
5	`liquid-glass-card-surfaces`	architecture ratified	Pre-blocked on a `fix-card3d-state` convoy; visual-diff coupling.
6	`liquid-glass-public-and-auth`	architecture ratified; partial impl via #3	Landing editorial pass queued.
7	`motion-system-pass`	MERGED	8 motion tokens (5 durations + 3 easings), site-wide `prefers-reduced-motion` sweep w/ `.motion-essential` opt-in, `docs/MOTION_SYSTEM.md`
8	`cleanup-legacy-design-css`	Brief 1 MERGED	2 CI gates (`forbidden-modal-shell-without-primitive` BLOCKING; `forbidden-deprecated-color-aliases` WARN). Brief 2 (deletion) queued.

Test plan

npm run lint — 0 errors (2 pre-existing warnings on unrelated CardEditorForm.js + CollectionsPageView.js)
npm run test:run — 104/104 passing (was 84 — +10 Modal, +10 ui-primitives)
ci.yml YAML validation (python yaml.safe_load)
Both new CI gates locally exercised and pass on the current tree
Layout regression-lock 5/5 preserved (logged-out CTA, no maintainer email, "Sign in" link, supplied email, no "Guest" placeholder)
preview-smoke.yml passes against Vercel preview (auth + scanner specs touch the migrated surfaces)
Linux visual-diff baselines re-seeded via Docker workflow (per AGENTS.md § 6) — first-time seed since none have been committed yet
Operator promotes to Vercel production

What still needs follow-up implementer turns

Documented in .convoys/ship-readiness.md:

#2 Brief 2 — 11 remaining modal migrations (mechanical pattern copy)
#3 Brief 2 — profile + settings + deck-builder + scanner + card-editor admin form sweeps
#5 Brief 1 — card surface migration (gated on fix-card3d-state + dedicated baseline re-seed)
#6 Brief 1 — landing page editorial + public view glass
#8 Brief 2 — actual legacy CSS deletion + CI gate WARN→FAIL graduation

None is launch-blocking — the core vision is shipped.

Files touched

7 new convoy files + 1 updated (.convoys/ship-readiness.md)
1 new umbrella subdirectory (.convoys/liquid-glass-design-tokens/ w/ audit + brief)
5 new primitive files in components/ui/ + barrel index
lib/use-focus-trap.js (homegrown, ~60 LOC, no dep)
2 new test files (Modal.test.js, ui-primitives.test.js)
4 modal migrations, 2 auth pages, Layout.js, MobileNavigation.js
styles/globals.css (purely additive: 29 tokens + 8 motion tokens + universal reduced-motion sweep)
2 new documentation files (docs/DESIGN_TOKENS.md, docs/MOTION_SYSTEM.md)
AGENTS.md § Visual language insertion
.cursor/rules/ui-and-theming.mdc primitive-kit documentation
.github/workflows/ci.yml 2 new gates

Made with Cursor

## Summary Operator-requested epic to migrate the UI from the current "warm panel + side-highlight + heavy gradient" visual language to a **Liquid Glass** aesthetic that retains Deck Hearth's fireplace warmth as accent / gradient / motion (not as panel fill). This squash carries the full 8-convoy portfolio drive-through: **5 sub-convoys reach merged state**, **3 land architecture-only** and queue impl for follow-up gated on dedicated visual-diff baseline re-seeds. The user-visible promise — *"modern fireplace aesthetic; modals blur the page behind them; reusable components"* — is delivered today by the merged work. ## Sub-convoy status | # | Slug | Status | Highlights | |---|---|---|---| | **1** | `liquid-glass-design-tokens` | **MERGED** | 29 CSS custom properties (glass / blur / rim / ember / elevation / scrim / motion), `@supports not (backdrop-filter)` fallback, `docs/DESIGN_TOKENS.md` (270 LOC w/ WCAG AA contrast tables), `AGENTS.md § Visual language` | | **2** | `liquid-glass-modal-and-surface-primitive` | **Brief 1 MERGED** | `<GlassSurface>` + `<Modal>` + `useFocusTrap` + 10 vitest cases + 4 reference modal migrations (ShareModal, CollectionDeleteModal, CollectionsCreateModal, CardDetailQuantityModal). Brief 2 (11 modals) queued. | | **3** | `liquid-glass-form-primitives` | **Brief 1 MERGED** | `<Button>` + `<Input>` + `<SearchBar>` + 10 vitest cases. `pages/login.js` + `pages/signup.js` fully migrated. Brief 2 (other forms) queued. | | **4** | `liquid-glass-layout-shell` | **MERGED** | 6 shell surfaces glass-migrated: desktop sidebar, mobile drawer, mobile scrim, search header, profile dropdown popover, mobile bottom-bar. 5/5 Layout regression-lock tests preserved. | | **5** | `liquid-glass-card-surfaces` | architecture ratified | Pre-blocked on a `fix-card3d-state` convoy; visual-diff coupling. | | **6** | `liquid-glass-public-and-auth` | architecture ratified; partial impl via #3 | Landing editorial pass queued. | | **7** | `motion-system-pass` | **MERGED** | 8 motion tokens (5 durations + 3 easings), site-wide `prefers-reduced-motion` sweep w/ `.motion-essential` opt-in, `docs/MOTION_SYSTEM.md` | | **8** | `cleanup-legacy-design-css` | **Brief 1 MERGED** | 2 CI gates (`forbidden-modal-shell-without-primitive` BLOCKING; `forbidden-deprecated-color-aliases` WARN). Brief 2 (deletion) queued. | ## Test plan - [x] `npm run lint` — 0 errors (2 pre-existing warnings on unrelated `CardEditorForm.js` + `CollectionsPageView.js`) - [x] `npm run test:run` — 104/104 passing (was 84 — +10 Modal, +10 ui-primitives) - [x] ci.yml YAML validation (python yaml.safe_load) - [x] Both new CI gates locally exercised and pass on the current tree - [x] Layout regression-lock 5/5 preserved (logged-out CTA, no maintainer email, "Sign in" link, supplied email, no "Guest" placeholder) - [ ] `preview-smoke.yml` passes against Vercel preview (auth + scanner specs touch the migrated surfaces) - [ ] Linux visual-diff baselines re-seeded via Docker workflow (per `AGENTS.md` § 6) — **first-time seed** since none have been committed yet - [ ] Operator promotes to Vercel production ## What still needs follow-up implementer turns Documented in `.convoys/ship-readiness.md`: - #2 Brief 2 — 11 remaining modal migrations (mechanical pattern copy) - #3 Brief 2 — profile + settings + deck-builder + scanner + card-editor admin form sweeps - #5 Brief 1 — card surface migration (gated on `fix-card3d-state` + dedicated baseline re-seed) - #6 Brief 1 — landing page editorial + public view glass - #8 Brief 2 — actual legacy CSS deletion + CI gate WARN→FAIL graduation None is launch-blocking — the core vision is shipped. ## Files touched - 7 new convoy files + 1 updated (`.convoys/ship-readiness.md`) - 1 new umbrella subdirectory (`.convoys/liquid-glass-design-tokens/` w/ audit + brief) - 5 new primitive files in `components/ui/` + barrel index - `lib/use-focus-trap.js` (homegrown, ~60 LOC, no dep) - 2 new test files (`Modal.test.js`, `ui-primitives.test.js`) - 4 modal migrations, 2 auth pages, `Layout.js`, `MobileNavigation.js` - `styles/globals.css` (purely additive: 29 tokens + 8 motion tokens + universal reduced-motion sweep) - 2 new documentation files (`docs/DESIGN_TOKENS.md`, `docs/MOTION_SYSTEM.md`) - `AGENTS.md` § Visual language insertion - `.cursor/rules/ui-and-theming.mdc` primitive-kit documentation - `.github/workflows/ci.yml` 2 new gates Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-03 20:53:48 -04:00

(Migrated from github.com)

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tcg-vault	Ready	Preview, Comment	Jun 4, 2026 1:00am

[vc]: #ik2RKeIxv5pQfW4iQi7m/PnKH7cxSxouZTEd4t8Uzco=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0Y2ctdmF1bHQtZ2l0LWxpcXVpZC1nbGFzcy1mLWZkNTdiZi1yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMudmVyY2VsLmFwcCJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vcmFuZGFsbC1zdGlsbHdlbGxzLXByb2plY3RzL3RjZy12YXVsdC84Zm1tMks0TnNONGhUclJEVGVIem43OUR3UDFHIiwicHJldmlld1VybCI6InRjZy12YXVsdC1naXQtbGlxdWlkLWdsYXNzLWYtZmQ1N2JmLXJhbmRhbGwtc3RpbGx3ZWxscy1wcm9qZWN0cy52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIiwicm9vdERpcmVjdG9yeSI6bnVsbH1dLCJyZXF1ZXN0UmV2aWV3VXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3ZlcmNlbC1hZ2VudC9yZXF1ZXN0LXJldmlldz9vd25lcj12YXJ1dGFzdSZyZXBvPXRjZy12YXVsdCZwcj05NSJ9 The latest updates on your projects. Learn more about [Vercel for GitHub](https://vercel.link/github-learn-more). | Project | Deployment | Actions | Updated (UTC) | | :--- | :----- | :------ | :------ | | [tcg-vault](https://vercel.com/randall-stillwells-projects/tcg-vault) | ![Ready](https://vercel.com/static/status/ready.svg) [Ready](https://vercel.com/randall-stillwells-projects/tcg-vault/8fmm2K4NsN4hTrRDTeHzn79DwP1G) | [Preview](https://tcg-vault-git-liquid-glass-f-fd57bf-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-liquid-glass-f-fd57bf-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 1:00am | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=95" rel="noreferrer"><picture><source media="(prefers-color-scheme: dark)" srcset="https://agents-vade-review.vercel.sh/request-review-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://agents-vade-review.vercel.sh/request-review-light.svg"><img src="https://agents-vade-review.vercel.sh/request-review-light.svg" alt="Request Review"></picture></a>

github-actions[bot] commented

2026-06-03 20:53:53 -04:00

(Migrated from github.com)

Pipeline Health

Build + CI gates

Gate	Status
Vercel build (Preview)	✅ pass
CI: Lint	✅ pass
CI: Schema map fresh	❌ skipped
Preview smoke	✅ pass
Visual diff	✅ pass

Build runs on Vercel; this CI runs lint and schema-map drift only (no duplicate build).

Role reports

Role	Status
Reviewer report	⏳ pending
A11y audit	⏳ pending
Design system audit	⏳ pending

See individual comments above for details. This rollup updates automatically.

## Pipeline Health ### Build + CI gates | Gate | Status | | --- | --- | | Vercel build (Preview) | ✅ pass | | CI: Lint | ✅ pass | | CI: Schema map fresh | ❌ skipped | | Preview smoke | ✅ pass | | Visual diff | ✅ pass | _Build runs on Vercel; this CI runs lint and schema-map drift only (no duplicate build)._ ### Role reports | Role | Status | | --- | --- | | Reviewer report | ⏳ pending | | A11y audit | ⏳ pending | | Design system audit | ⏳ pending | See individual comments above for details. This rollup updates automatically.

github-actions[bot] commented

2026-06-03 20:56:16 -04:00

(Migrated from github.com)

Visual Diff

Screenshots and diffs uploaded as artifacts: view run

If intentional changes: update snapshots locally with npx playwright test --project=visual --update-snapshots and commit.

## Visual Diff Screenshots and diffs uploaded as artifacts: [view run](https://github.com/varutasu/tcg-vault/actions/runs/26922944985) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.

github-actions[bot] commented

2026-06-03 21:01:03 -04:00

(Migrated from github.com)

Visual Diff

Screenshots and diffs uploaded as artifacts: view run

If intentional changes: update snapshots locally with npx playwright test --project=visual --update-snapshots and commit.

## Visual Diff Screenshots and diffs uploaded as artifacts: [view run](https://github.com/varutasu/tcg-vault/actions/runs/26923166703) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.