refactor(website): substrate migration batch 2 — shared chrome off inline styles - #849
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
blove
enabled auto-merge (squash)
August 29, 2026 20:13
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
…ecome :hover Move Footer.tsx's static presentation (root background/border, tagline, newsletter success/input, column eyebrows, social icons, link colors, bottom bar) into chrome.css as .footer-* classes. Replace all 23 onMouseEnter/onMouseLeave color-toggle pairs with :hover rules; one .footer-link class covers the 19 identical column-link styles and one .footer-social-link covers the two icon links. Footer keeps 'use client' (NewsletterForm has real submit state).
Move Nav.tsx's static presentation into chrome.css as .nav-* classes: desktop links/GitHub icon (.nav-link), the demo dropdown (.nav-demo-dropdown/-trigger/-caret/-menu/-item), the nav bar and hamburger hit-area (comment preserved), the mobile overlay and its tab bars (tabStyle/subTabStyle become .nav-mtab/.nav-msubtab with [data-active]), and the mobile link lists (.nav-mobile-item/-site-link/ -github-link/-demo-link/-section-toggle/-chevron). Replace the 5 onMouseEnter/onMouseLeave color-toggle pairs with :hover rules; bounded active-state ternaries become data-active/data-open attributes. The mobile overlay's `top: 57` offset and the hamburger's negative-margin hit-area trick move verbatim. Nav keeps 'use client' (menu/dropdown state).
Move AnnouncementToast.tsx's static box/text presentation into chrome.css as .toast-* classes. Root keeps only opacity/transform inline (interpolated from the entrance-animation `mounted` state); all other root styling (position, sizing, background/border/shadow, padding, transition) moves. The one hardcoded hex success color (#1a7a40) moves verbatim, unmapped to a token as in the source. Also converts the email input's onFocus/onBlur border-color toggle (the same presentation-only DOM-mutation pattern as the batch's hover handlers, just focus-triggered) into a :focus rule — :focus rather than :focus-visible so any focus method reproduces the original behavior exactly.
Late @import is invalid CSS. The production pipeline forgives it by hoisting, but turbopack dev silently DROPS the imported files - no error, the rules never load, intermittently across recompiles. Found when the batch-2 verification baseline captured the nav with ui.css dropped (the logo measured Inter 400 where ui.css says Garamond 700). Production was never affected - verified the deployed CSS contains every batch-1 rule. Also updates the plan's Task 0 caution, which wrongly assumed the failure mode would be a build error. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
blove
force-pushed
the
blove/style-substrate-batch-2
branch
from
August 29, 2026 20:44
93b7db1 to
de15bc1
Compare
Contributor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Batch 2 of the substrate migration (plan, Task 2): Nav, Footer, and AnnouncementToast move to
src/styles/chrome.css. 33 presentation-only mouse-handler pairs are deleted (23 in Footer, 5 in Nav, plus the Toast input's focus/blur pair) and replaced by:hover/:focusrules — 66+ handler props gone from the chrome.Also carries a critical infrastructure fix, below.
The infrastructure fix: late
@importis silently dropped in devBatch 1 placed the six scope-file
@imports afterglobal.css's:rootblock. Late@importis invalid CSS — the production pipeline (Lightning CSS) forgives it by hoisting, but turbopack dev silently drops the imported files, intermittently across recompiles: no error, the rules just never load. It surfaced when a verification baseline captured the nav logo as Inter 400 whereui.csssays Garamond 700.Production was never affected — verified the deployed CSS contains every batch-1 rule (
[data-ui=button]×6,[data-ui=card]×10, …). The imports now sit at the top where they're spec-valid everywhere, and the plan's Task 0 caution (which wrongly assumed the failure would be a build error) is corrected.Verification — measured against production
Since main == production == the pre-batch-2 truth, the baseline for this batch is the live site, hashed per element at pinned viewports:
.footer-link:hover/.nav-link:hover--color-accent— exactly what the deleted handlers wrotePlus: vitest at the pre-existing baseline (
5 failed | 341 passed), 0 lint errors, prod build green withnav-barconfirmed in the emitted bundle.Notes for review
top: 57migrated verbatim astop: 57px— the polish arc owns changing it.onFocus/onBlurborder toggle →.toast-input:focuswas a judgment call (same presentation-only pattern as hover); flagged by the implementer, accepted.'use client'— its NewsletterForm has real submit state.#1a7a40success greens kept as literals (match no token) — restyling is out of scope.🤖 Generated with Claude Code