chore(theme): migrate inline var() to Tailwind utilities (close #4)#75
Merged
Conversation
Swap remaining `text-[var(--paper)]` arbitrary-value classes and
`style={{ color: "var(--whisper)" }}` inline styles for the
auto-generated Tailwind v4 utilities (`text-paper`, `text-whisper`,
`bg-paper`, `bg-ink`, `border-current`, `pb-[2px]`).
`app/globals.css` already exposes the tokens via `@theme inline`, so
each utility resolves to the same CSS variable used today — no visual
change, just style consistency across `Frame.tsx`, `Chrome.tsx`,
`Hero.tsx`, `Comparison.tsx`, `Close.tsx`, and `FaqItem.tsx`.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Deploying website with
|
| Latest commit: |
9be9991
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a8c10bc8.website-70y.pages.dev |
| Branch Preview URL: | https://claude-pedantic-newton-19f1b.website-70y.pages.dev |
thiras
approved these changes
May 11, 2026
There was a problem hiding this comment.
Pull request overview
This PR standardizes theme token usage by replacing inline var(--…) color styles/arbitrary-value classes with the Tailwind v4 utilities generated from @theme inline in app/globals.css, aiming to keep styling consistent while preserving existing visuals.
Changes:
- Migrate
bg-[var(--…)]/text-[var(--…)]usages tobg-ink,bg-paper,text-ink,text-paperin layout/navigation components. - Replace inline
style={{ color: "var(--whisper)" }}accents withclassName="text-whisper"across marketing sections. - Convert Docs/Blog underline from inline border/padding styles to Tailwind utilities (
border-b border-current pb-[2px]).
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| components/ui/Frame.tsx | Swap tone mapping from arbitrary var(--…) classes to generated bg-*/text-* utilities. |
| components/ui/FaqItem.tsx | Replace inline whisper color with text-whisper in brand highlighting. |
| components/site/Hero.tsx | Move whisper accents (period + brand word) from inline style to text-whisper. |
| components/site/Comparison.tsx | Convert brand accent and strikethrough rule background to Tailwind utilities (text-whisper, bg-paper). |
| components/site/Close.tsx | Replace inline whisper brand accent with text-whisper. |
| components/site/Chrome.tsx | Replace tone text arbitrary classes with text-paper/text-ink and migrate link underline styling to Tailwind border/padding utilities. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+14
to
+15
| ink: "bg-ink text-paper", | ||
| paper: "bg-paper text-ink", |
3 tasks
alpergundogdu
added a commit
that referenced
this pull request
May 11, 2026
Follow-up to #75 — the audit refresh on #4 missed `components/site/Footer.tsx`, which still used `bg-[var(--paper)] … text-[var(--ink)]`. Same swap as the rest of the codebase: utilities resolve to identical CSS through `@theme inline`, so no visual change. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
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.
Summary
Closes #4. Replaces the remaining inline
var(--…)theme-color patterns with the equivalent Tailwind v4 utilities thatapp/globals.cssalready exposes via@theme inline.bg-[var(--ink)] text-[var(--paper)]→bg-ink text-paper(and thepapermirror) incomponents/ui/Frame.tsx.components/site/Chrome.tsxmove fromstyle={{ borderBottom, paddingBottom }}toclassName="… border-b border-current pb-[2px]".style={{ color: "var(--whisper)" }}→className="text-whisper"acrossHero.tsx,Comparison.tsx,Close.tsx,FaqItem.tsx.Comparison.tsx→bg-paper.No visual change
--color-ink,--color-paper,--color-whisperin@theme inlineare aliased tovar(--ink)/var(--paper)/var(--whisper)— the same vars the old arbitrary-value classes used — so the generated utilities resolve to identical declarations.FaqItem.tsxalready mixedtext-paper/75andstyle={{ color: var(--whisper) }}today, proof the utilities are wired.Test plan
pnpm lintpnpm exec tsc --noEmitpnpm build(static export, 14/14 pages).text-whisper,.text-paper,.text-ink,.bg-paper,.bg-ink,.border-current, and.pb-\\[2px\\]{padding-bottom:2px}pnpm devspot check: whisper accents, navbar tone flip, §02 strikethrough, Docs/Blog underline (issue chore(theme): migrate remaining inline var()/style theme colors to Tailwind utilities #4 verification list)🤖 Generated with Claude Code