refactor(glass): migrate Button.secondary + Input + MobileNav off bespoke glass-surface #131

Merged

varutasu merged 1 commit from migrate-button-input-mobilenav-to-glass-primitive into main

2026-06-05 07:23:55 -04:00

varutasu commented

2026-06-05 07:23:35 -04:00

(Migrated from github.com)

Summary

Closes the migrate-button-input-mobilenav-to-glass-primitive convoy (seeded by PR #127). All 3 residual handrolled var(--glass-surface-*) inline-style usages migrated. CI allowlist reduced from 6 entries to 3 (chrome only).

This also closes the parent convoy unify-glass-panel-surfaces for-real-this-time — no residual handrolled glass-surface usage anywhere outside the 3 chrome blocks (Layout, TopSearchBar, GlassSurface primitive).

Architect decisions

ID	File	Decision	Why not the seed's first-rec
D1	`Button.js` secondary	New `.btn-glass-secondary` utility class	`<GlassSurface>` sets `background` inline; CSS `:hover` can't override without `!important`. Pure-CSS hover swap is cleaner.
D2	`Input.js`	New `.glass-input` utility class	`<GlassSurface>`'s gradient-border trick requires `border: 1px solid transparent`, which conflicts with `<Input>`'s conditional `1px solid #dc2626` error border swap.
D3	`MobileNavigation.js`	`<GlassSurface tint="mid" blur="mid" rim="subtle" cornerLights="chrome">`	Seed recommended `.page-header-glass` but that's wrong tint (high vs mid) and adds a misplaced bottom-border separator. `<GlassSurface>` is the better fit AND brings chrome-tier corner-light bleed for free.

Why a single PR (not 3 parallel briefs)

The seed suggested 3 small parallel-safe briefs. On execution, D1 and D2 both add new utility classes to styles/globals.css — they can't run truly in parallel without merge conflicts. With the CI billing block still active, each PR also costs an admin-merge cycle. Single PR is faster, easier end-to-end review, and the natural shape for a 2-3 hour convoy with tightly-coupled artifacts.

Files changed

File	Diff	Change
`styles/globals.css`	+50 / -1	Adds `.btn-glass-secondary` (with `:hover` variant) + `.glass-input`. Both classes documented inline.
`components/ui/Button.js`	+2 / -10	`variant === 'secondary'` block: inline style + Tailwind hover arbitrary class → `variantClass = 'btn-glass-secondary font-medium'`. Other variants untouched.
`components/ui/Input.js`	+1 / -7	Adds `glass-input` className; removes inline `background` + `backdropFilter`. Conditional error border stays in JSX.
`components/MobileNavigation.js`	+11 / -8	Imports `<GlassSurface>` from `./ui`; backdrop `<div>` swapped for `<GlassSurface as="div" ...>`.
`.github/workflows/ci.yml`	+8 / -22	`GLASS_ALLOWLIST` shrunk 6 → 3 entries (the 3 pending-migration entries removed, TODO comments deleted).
`.convoys/migrate-button-input-mobilenav-to-glass-primitive.md`	+74 / -3	Convoy file closeout: status closed, architect decisions D1-D3 documented, PR #131 recorded.

Net diff: +157 / -44.

Verification

Positive test: post-migration grep with the reduced 3-entry allowlist → 0 violations.
Raw grep: grep -lE "var\$--glass-surface-(low|mid|high)\$" pages components -r --include='*.js' returns only components/Layout.js + components/ui/TopSearchBar.js. GlassSurface.js doesn't match because its \var(--glass-surface-${tint})`template literal doesn't match the static(low|mid|high)` regex — intentional; the allowlist entry is forward-compat.
YAML parses.
npm run lint passes (1 pre-existing unrelated warning).
npm run test:run: 118/118 tests pass.

Test plan (manual — both themes critical)

Button.secondary: visit any page with a secondary button (e.g. modals' Cancel actions). Verify default rendering has corner-light bleed + rim halo; hover swaps the fill from high → mid with no flash. Confirm in BOTH themes.
Input default: any form input (login, signup, settings). Confirm tint + blur + var(--border) 1px border in BOTH themes.
Input error state: trigger a validation error (e.g. empty required field). Confirm the border flips to red (#dc2626); confirm the focus ring is red too.
MobileNavigation backdrop: open the app on a mobile viewport (or DevTools mobile preview). Confirm the bottom-nav now shows corner-light bleed at the top corners, matching the sidebar + TopSearchBar chrome treatment. Confirm in BOTH themes.

Convoy closeout

This PR closes the migrate-button-input-mobilenav-to-glass-primitive convoy AND closes the gap in unify-glass-panel-surfaces. The full glass-surface unification is now end-to-end:

Every panel-shape composes .glass-panel* / <GlassSurface> / .page-header-glass.
Every chrome block uses <GlassSurface cornerLights="chrome"> or the inline gradient-border pattern (3 documented sites only).
CI gate (forbidden-patterns Check 7/7) enforces "no new bespoke var(--glass-surface-*) inline styles" with a 3-entry allowlist.

Convoy: .convoys/migrate-button-input-mobilenav-to-glass-primitive.md
Parent convoy: .convoys/unify-glass-panel-surfaces.md (already closed).
Brief 1 (cornerLights prop): PR #123 (merged).
Brief 7 (the gate): PR #127 (merged).

Made with Cursor

## Summary Closes the `migrate-button-input-mobilenav-to-glass-primitive` convoy (seeded by PR #127). All 3 residual handrolled `var(--glass-surface-*)` inline-style usages migrated. CI allowlist reduced from 6 entries to 3 (chrome only). This also closes the parent convoy `unify-glass-panel-surfaces` for-real-this-time — no residual handrolled glass-surface usage anywhere outside the 3 chrome blocks (Layout, TopSearchBar, GlassSurface primitive). ## Architect decisions | ID | File | Decision | Why not the seed's first-rec | | - | - | - | - | | **D1** | `Button.js` secondary | New `.btn-glass-secondary` utility class | `<GlassSurface>` sets `background` inline; CSS `:hover` can't override without `!important`. Pure-CSS hover swap is cleaner. | | **D2** | `Input.js` | New `.glass-input` utility class | `<GlassSurface>`'s gradient-border trick requires `border: 1px solid transparent`, which conflicts with `<Input>`'s conditional `1px solid #dc2626` error border swap. | | **D3** | `MobileNavigation.js` | `<GlassSurface tint="mid" blur="mid" rim="subtle" cornerLights="chrome">` | Seed recommended `.page-header-glass` but that's wrong tint (high vs mid) and adds a misplaced bottom-border separator. `<GlassSurface>` is the better fit AND brings chrome-tier corner-light bleed for free. | ## Why a single PR (not 3 parallel briefs) The seed suggested 3 small parallel-safe briefs. On execution, D1 and D2 both add new utility classes to `styles/globals.css` — they can't run truly in parallel without merge conflicts. With the CI billing block still active, each PR also costs an admin-merge cycle. Single PR is faster, easier end-to-end review, and the natural shape for a 2-3 hour convoy with tightly-coupled artifacts. ## Files changed | File | Diff | Change | | - | - | - | | `styles/globals.css` | +50 / -1 | Adds `.btn-glass-secondary` (with `:hover` variant) + `.glass-input`. Both classes documented inline. | | `components/ui/Button.js` | +2 / -10 | `variant === 'secondary'` block: inline style + Tailwind hover arbitrary class → `variantClass = 'btn-glass-secondary font-medium'`. Other variants untouched. | | `components/ui/Input.js` | +1 / -7 | Adds `glass-input` className; removes inline `background` + `backdropFilter`. Conditional error border stays in JSX. | | `components/MobileNavigation.js` | +11 / -8 | Imports `<GlassSurface>` from `./ui`; backdrop `<div>` swapped for `<GlassSurface as="div" ...>`. | | `.github/workflows/ci.yml` | +8 / -22 | `GLASS_ALLOWLIST` shrunk 6 → 3 entries (the 3 pending-migration entries removed, TODO comments deleted). | | `.convoys/migrate-button-input-mobilenav-to-glass-primitive.md` | +74 / -3 | Convoy file closeout: status closed, architect decisions D1-D3 documented, PR #131 recorded. | Net diff: **+157 / -44**. ## Verification - [x] **Positive test**: post-migration grep with the reduced 3-entry allowlist → **0 violations**. - [x] **Raw grep**: `grep -lE "var\$--glass-surface-(low|mid|high)\$" pages components -r --include='*.js'` returns only `components/Layout.js` + `components/ui/TopSearchBar.js`. GlassSurface.js doesn't match because its `\`var(--glass-surface-${tint})\`` template literal doesn't match the static `(low|mid|high)` regex — intentional; the allowlist entry is forward-compat. - [x] YAML parses. - [x] `npm run lint` passes (1 pre-existing unrelated warning). - [x] `npm run test:run`: 118/118 tests pass. ## Test plan (manual — both themes critical) - [ ] **Button.secondary**: visit any page with a secondary button (e.g. modals' Cancel actions). Verify default rendering has corner-light bleed + rim halo; hover swaps the fill from high → mid with no flash. Confirm in BOTH themes. - [ ] **Input default**: any form input (login, signup, settings). Confirm tint + blur + `var(--border)` 1px border in BOTH themes. - [ ] **Input error state**: trigger a validation error (e.g. empty required field). Confirm the border flips to red (#dc2626); confirm the focus ring is red too. - [ ] **MobileNavigation backdrop**: open the app on a mobile viewport (or DevTools mobile preview). Confirm the bottom-nav now shows corner-light bleed at the top corners, matching the sidebar + TopSearchBar chrome treatment. Confirm in BOTH themes. ## Convoy closeout This PR closes the `migrate-button-input-mobilenav-to-glass-primitive` convoy AND closes the gap in `unify-glass-panel-surfaces`. The full glass-surface unification is now end-to-end: - Every panel-shape composes `.glass-panel*` / `<GlassSurface>` / `.page-header-glass`. - Every chrome block uses `<GlassSurface cornerLights="chrome">` or the inline gradient-border pattern (3 documented sites only). - CI gate (`forbidden-patterns` Check 7/7) enforces "no new bespoke `var(--glass-surface-*)` inline styles" with a 3-entry allowlist. ## Related - Convoy: `.convoys/migrate-button-input-mobilenav-to-glass-primitive.md` - Parent convoy: `.convoys/unify-glass-panel-surfaces.md` (already `closed`). - Brief 1 (cornerLights prop): PR #123 (merged). - Brief 7 (the gate): PR #127 (merged). Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-05 07:23:41 -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 5, 2026 11:23am

[vc]: #8aDVR0zWm+GR5165fyDy4XxKWOl+VOwz0VgiYXdJWS8=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0Y2ctdmF1bHQtZ2l0LW1pZ3JhdGUtYnV0dG9uLWQ1ZDhlNy1yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMudmVyY2VsLmFwcCJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vcmFuZGFsbC1zdGlsbHdlbGxzLXByb2plY3RzL3RjZy12YXVsdC8yaUZHZlhOZVhURmZraXJQQlpnelpkaGlESjZyIiwicHJldmlld1VybCI6InRjZy12YXVsdC1naXQtbWlncmF0ZS1idXR0b24tZDVkOGU3LXJhbmRhbGwtc3RpbGx3ZWxscy1wcm9qZWN0cy52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIn1dLCJyZXF1ZXN0UmV2aWV3VXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3ZlcmNlbC1hZ2VudC9yZXF1ZXN0LXJldmlldz9vd25lcj12YXJ1dGFzdSZyZXBvPXRjZy12YXVsdCZwcj0xMzEifQ== 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/2iFGfXNeXTFfkirPBZgzZdhiDJ6r) | [Preview](https://tcg-vault-git-migrate-button-d5d8e7-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-migrate-button-d5d8e7-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 5, 2026 11:23am | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=131" 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>