refactor(website): Tailwind theme migration and component cleanup#53
Merged
andresilva-cc merged 2 commits intomainfrom Apr 5, 2026
Merged
refactor(website): Tailwind theme migration and component cleanup#53andresilva-cc merged 2 commits intomainfrom
andresilva-cc merged 2 commits intomainfrom
Conversation
…nents - Reset Tailwind's built-in color/font/shadow palettes and define design system tokens - Rename theme tokens to avoid double prefixes (bg-base, text-heading, border-edge) - Migrate all pages from inline styles and var() to Tailwind utility classes - Extract InlineCode, Callout components for repeated patterns - Extend CodeBlock with label and collapsible variants, replace hand-rolled blocks - Add tailwind-merge via cn() helper for clean class overrides - Add typecheck script (astro check) - Fix hover state bugs on feature cards and mobile CTA - Fix h2 headings that rendered at 14px due to InlineCode text-sm override
…tyles - Extract MarketingLayout.astro to share nav, mobile menu, footer, and scroll handler between index.astro and 404.astro - Fix 404 page bug where nav was missing "Why Grafex" and "Examples" links - Clean up hero demo inline styles, keeping only gradient, clamp(), and system-ui font inline - Use aspect-[1200/630] Tailwind class instead of inline aspect-ratio on use-cases cards
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Summary
Large-scale refactor of the Grafex website to properly use Tailwind's
@themetokens, extract reusable components, and eliminate inline style / arbitrary value leakage.Tailwind theme
--color-*: initial) so only design system tokens existbg-base,text-heading,border-edge,text-pink)Component extraction
InlineCode— pink pill for inline code references (replaced 46 occurrences)Callout— tip/warning/info boxes with colored left border (replaced 10 occurrences)CodeBlockextended withlabelandcollapsibleprops (replaced 50+ hand-rolled code blocks)MarketingLayout— shared nav, mobile menu, footer, scroll handler for index + 404 (fixes 404 bug where nav was missing "Why Grafex" and "Examples" links)Infrastructure
tailwind-mergeviacn()helper (src/lib/cn.ts) for clean class overridestypecheckscript (astro check)Bug fixes
hover:border-edge-strong)hover:brightness-110effectInlineCode's hardcodedtext-sm(cli.astro, api.astro, browser-setup.astro)<InlineCode>was wrongly used inside table cells, heading elements, and standalone terminal containersTest plan
cd website && npx astro build— 10 pages builtcd website && npm run typecheck— 0 errors, 0 warnings