chore(theme): migrate footer to Tailwind theme utilities#76
Conversation
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>
Deploying website with
|
| Latest commit: |
180fb72
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://8f15f954.website-70y.pages.dev |
| Branch Preview URL: | https://claude-footer-theme-utils.website-70y.pages.dev |
There was a problem hiding this comment.
Pull request overview
Migrates the Footer component’s theme-color usage from arbitrary var(--…) Tailwind classes to the project’s Tailwind v4 theme utilities (bg-paper, text-ink), aligning with the ongoing theme-token cleanup from #75 / issue #4 while preserving identical rendered CSS.
Changes:
- Replace
bg-[var(--paper)]withbg-paperincomponents/site/Footer.tsx. - Replace
text-[var(--ink)]withtext-inkincomponents/site/Footer.tsx.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the Footer component to use Tailwind theme utilities for background and text colors instead of arbitrary values. The reviewer suggested further consolidating the styles by moving the inline paddingInline style into the className attribute using a Tailwind arbitrary value utility for better consistency.
Summary
Follow-up to #75. Copilot's review on that PR (discussion) caught one site that the audit refresh on #4 missed:
components/site/Footer.tsx:4—bg-[var(--paper)] pt-16 pb-10 text-[var(--ink)]→bg-paper pt-16 pb-10 text-ink.Other
var(--…)uses inFooter.tsx(lines 5, 9, 14) target--frame-gutter,--frame-max, and--fs-micro— layout/typography vars, not theme colors, so they're out of scope for #4.No visual change
Same reasoning as #75:
--color-paper/--color-inkin@theme inlineare aliased tovar(--paper)/var(--ink). Old and new classes resolve to identical CSS.Test plan
pnpm lintpnpm exec tsc --noEmitpnpm build(static export)🤖 Generated with Claude Code