refactor(website): substrate migration batch 5 — marketing components off inline styles - #855
Merged
Merged
Conversation
CompareTable, LeadForm, CompatibilityMatrix, and PricingFAQ move their static presentation (backgrounds, borders, type scale, table cell shapes) from inline style props into src/styles/marketing.css, with zero visual change. - CompareTable's repeated cell/header style objects (shape D) collapse into a handful of `.pricing-compare-*` classes reused across tiers and rows; bounded tier/row states (highlighted tier, active billing cycle, last row) become `data-highlight`/`data-active`/`data-last` modifiers instead of inline ternaries. - LeadForm's 6 focus/blur handler pairs (border-color + box-shadow) are replaced by a single `.lead-form-input:focus` rule; the handlers are deleted. - CompatibilityMatrix's TONE_COLORS lookup becomes a `data-tone` modifier on `.compat-matrix-td-label`. - Values computed from external config (CtaStrip's `gridTemplateColumns` keyed off `TIERS.length`) stay inline per the migration's "unbounded/computed" exception. Migration: docs/superpowers/plans/2026-08-29-inline-style-substrate-migration.md
PostCard, FeaturedPostCard, BlogTagFilter, AuthorByline, and TagChips move their static presentation into src/styles/marketing.css, with zero visual change. - PostCard/FeaturedPostCard keep the existing `data-ui="card" data-hoverable` hooks (ui.css) for the resting/hover treatment from Batch 1, and layer a single component class after it in import order (marketing.css loads after ui.css) to override background/border/ padding/radius, matching the specificity precedence the inline styles previously had. - BlogTagFilter's PILL_BASE/ACTIVE/INACTIVE variant maps (shape B) become one `.blog-tag-pill` class with a `data-active` modifier; the non-link "current tag" span keeps its `cursor: default` override via a `data-static` modifier. - RecentArticles (batch 4) only consumes `<PostCard>` with no wrapping style — confirmed no double-styling. Migration: docs/superpowers/plans/2026-08-29-inline-style-substrate-migration.md
….css
ContactForm, AltChannelRow, SlaCard, GitHubStarsPill, SolutionDemoBlock,
and SolutionCodeBlock move their static presentation into
src/styles/marketing.css, with zero visual change.
- ContactForm has no focus/blur/invalid handling in the source (the
batch brief mentions focus/validation states for the contact+pricing
pair, but only LeadForm, migrated in commit 1, actually implements
it) — moved as plain shape A/D, `'use client'` kept for form state.
- SolutionDemoBlock/SolutionCodeBlock's `<Eyebrow style={{ color:
accent, marginBottom: 12 }}>` stays inline: `accent` is a per-page
prop (unbounded value), the migration's documented exception.
- SolutionCodeBlock's `marginTop: index === 0 ? 0 : 24` ternary becomes
a `data-first` modifier on `.sol-code-block-item`.
- SolutionCodeBlock's code-frame styles merge into the `.solution-code`
class the component already applied via className (unstyled until
now).
Migration: docs/superpowers/plans/2026-08-29-inline-style-substrate-migration.md
blove
enabled auto-merge (squash)
August 29, 2026 22:26
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
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 5 of the substrate migration (plan, Task 5): 15 files across pricing, blog, contact, and solutions move to
src/styles/marketing.css. Three commits, one per area.Highlights:
CompareTable's 31 repeated style sites collapse to a handful of shared classes;LeadForm's sixonFocus/onBlurhandler pairs become one.lead-form-input:focusrule (verified present, targeting--color-accent+--shadow-focus— exactly what the handlers wrote); highlight/first/last ternaries becomedata-*modifiers.Also amends the plan for mid-arc reality: #851 gave the website suite an nx target and repaired the rotted specs, so the "5 tolerated failures" baseline batches 1–4 asserted against is retired — this and all remaining batches hold the suite fully green.
Verified: four pages signature-identical to production
Per-page aggregate signatures (element count + tag-order hash + hash of per-element hashes over 26 computed properties, pinned 1280×900):
/pricing/blog/contact/solutions/customer-supportPlus
nx test websitefully green (347 tests, including the newly-livePostCard/Differentiatorspecs over migrated components), 0 lint errors, prod build green.Notes
PostCard/FeaturedPostCardkeep their batch-1data-ui="card" data-hoverabletreatment and layer one override class after it — source order inglobal.css's import list resolves the equal-specificity cascade the way the inline styles used to.ContactFormturned out to have no focus/validation handlers (the plan's table overstated it) — migrated as plain static styles.SolutionDemoBlock/SolutionCodeBlock's per-pageaccentcolor prop stays inline (unbounded value, the documented escape hatch).🤖 Generated with Claude Code