Skip to content

feat(website/design): semantic design-token system, collapse legacy color tokens #714

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ajitpratap0 merged 2 commits into from
Oct 14, 2026
Merged

feat(website/design): semantic design-token system, collapse legacy color tokens #714

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5f2225f
feat(website/design): semantic design-token system, collapse legacy c…
Oct 14, 2026
1a22217
fix(website): scope inline-code bg to non-pre code on post pages
Oct 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions website/src/app/benchmarks/BenchmarksContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ function renderMethodologyItem(item: string) {
return (
<>
{item.slice(0, idx)}
<code className="font-mono text-xs bg-white/[0.06] px-1 py-0.5 rounded">{FLAG}</code>
<code className="font-mono text-xs text-fg bg-fg/[0.06] px-1 py-0.5 rounded">{FLAG}</code>
{item.slice(idx + FLAG.length)}
</>
);
Expand All @@ -49,7 +49,7 @@ export function BenchmarksContent() {
<p className="mt-4 text-lg text-zinc-400 max-w-2xl mx-auto">
Parse-stage performance of the GoSQLX parser, re-measured with the in-repo benchmarks.
</p>
<p className="mt-3 text-xs text-text-muted">
<p className="mt-3 text-xs text-fg-subtle">
Measured 2026-10-13 &middot; Apple M4 &middot; Go 1.27 &middot; parse stage only
</p>
</FadeIn>
Expand Down Expand Up @@ -110,7 +110,7 @@ export function BenchmarksContent() {
</table>
</div>
</GlassCard>
<p className="text-xs text-text-muted mt-2 md:hidden">&larr; Swipe to see all columns &rarr;</p>
<p className="text-xs text-fg-subtle mt-2 md:hidden">&larr; Swipe to see all columns &rarr;</p>
</RawDataToggle>
</FadeIn>
</div>
Expand All @@ -126,7 +126,7 @@ export function BenchmarksContent() {
Head-to-head numbers against other Go SQL parsers are not published yet. They will
return once a reproducible benchmark harness is committed to the repository, so every
figure can be re-run by you. Until then, see the{' '}
<a href="/compare/" className="text-indigo-300 underline underline-offset-2">
<a href="/compare/" className="text-accent underline underline-offset-2">
qualitative feature comparison
</a>
.
Expand Down
8 changes: 4 additions & 4 deletions website/src/app/blog/BlogList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ export function BlogList({ posts }: { posts: BlogPost[] }) {
className="group flex gap-6 py-5 pl-0 relative"
>
{/* Timeline dot */}
<div className="relative z-10 mt-2 w-[15px] h-[15px] shrink-0 rounded-full border-2 border-zinc-700 bg-primary group-hover:border-accent-indigo transition-colors" />
<div className="relative z-10 mt-2 w-[15px] h-[15px] shrink-0 rounded-full border-2 border-zinc-700 bg-bg group-hover:border-accent transition-colors" />

<div className="flex-1 min-w-0">
<div className="flex items-center gap-3 mb-1.5 flex-wrap">
<span className="inline-block bg-accent-indigo/10 border border-accent-indigo/20 rounded-full px-3 py-0.5 text-xs font-medium text-accent-indigo">
<span className="inline-block bg-accent/10 border border-accent/20 rounded-full px-3 py-0.5 text-xs font-medium text-accent">
v{post.version}
</span>
{post.date && (
<span className="text-sm text-text-muted">{formatDate(post.date)}</span>
<span className="text-sm text-fg-subtle">{formatDate(post.date)}</span>
)}
</div>
<h2 className="text-lg font-semibold text-zinc-100 group-hover:text-white transition-colors truncate">
Expand All @@ -40,7 +40,7 @@ export function BlogList({ posts }: { posts: BlogPost[] }) {
</div>

{/* Arrow */}
<div className="mt-2 text-text-muted group-hover:text-zinc-400 transition-colors shrink-0">
<div className="mt-2 text-fg-subtle group-hover:text-zinc-400 transition-colors shrink-0">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
<path d="M6 4l4 4-4 4" />
</svg>
Expand Down
14 changes: 7 additions & 7 deletions website/src/app/blog/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export default async function BlogPostPage({ params }: Props) {
{/* Back link */}
<Link
href="/blog"
className="inline-flex items-center gap-1.5 text-sm text-text-muted hover:text-zinc-300 transition-colors mb-8"
className="inline-flex items-center gap-1.5 text-sm text-fg-subtle hover:text-zinc-300 transition-colors mb-8"
>
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
<path d="M10 4l-4 4 4 4" />
Expand All @@ -115,11 +115,11 @@ export default async function BlogPostPage({ params }: Props) {
{/* Header */}
<header className="mb-10">
<div className="flex items-center gap-3 mb-3">
<span className="inline-block bg-accent-indigo/10 border border-accent-indigo/20 rounded-full px-3.5 py-1 text-xs font-medium text-accent-indigo">
<span className="inline-block bg-accent/10 border border-accent/20 rounded-full px-3.5 py-1 text-xs font-medium text-accent">
v{post.version}
</span>
{post.date && (
<time className="text-sm text-text-muted" dateTime={post.date}>
<time className="text-sm text-fg-subtle" dateTime={post.date}>
{formatDate(post.date)}
</time>
)}
Expand All @@ -128,7 +128,7 @@ export default async function BlogPostPage({ params }: Props) {
</header>

{/* Content */}
<div className="prose prose-invert prose-dark max-w-none prose-headings:font-semibold prose-a:text-accent-indigo prose-a:no-underline hover:prose-a:underline prose-code:bg-surface prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:before:content-none prose-code:after:content-none prose-pre:bg-surface prose-pre:border prose-pre:border-zinc-800 prose-hr:border-zinc-800">
<div className="prose prose-invert prose-dark max-w-none prose-headings:font-semibold prose-a:text-accent prose-a:no-underline hover:prose-a:underline [&_:not(pre)>code]:bg-bg-raised prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:before:content-none prose-code:after:content-none prose-pre:bg-bg-raised prose-pre:border prose-pre:border-zinc-800 prose-hr:border-zinc-800">
{content}
</div>

Expand All @@ -139,7 +139,7 @@ export default async function BlogPostPage({ params }: Props) {
const shareUrl = encodeURIComponent(postUrl);
return (
<div className="mt-12 pt-8 border-t border-zinc-800 flex items-center gap-3">
<span className="text-sm text-text-muted">Share:</span>
<span className="text-sm text-fg-subtle">Share:</span>
<a
href={`https://x.com/intent/tweet?text=${shareText}&url=${shareUrl}`}
target="_blank"
Expand Down Expand Up @@ -178,7 +178,7 @@ export default async function BlogPostPage({ params }: Props) {
href={blogPostHref(prevPost.slug)}
className="group flex flex-col text-sm"
>
<span className="text-text-muted mb-1">Older</span>
<span className="text-fg-subtle mb-1">Older</span>
<span className="text-zinc-300 group-hover:text-white transition-colors">
{prevPost.title}
</span>
Expand All @@ -191,7 +191,7 @@ export default async function BlogPostPage({ params }: Props) {
href={blogPostHref(nextPost.slug)}
className="group flex flex-col text-sm text-right ml-auto"
>
<span className="text-text-muted mb-1">Newer</span>
<span className="text-fg-subtle mb-1">Newer</span>
<span className="text-zinc-300 group-hover:text-white transition-colors">
{nextPost.title}
</span>
Expand Down
2 changes: 1 addition & 1 deletion website/src/app/blog/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function BlogPage() {
<div className="min-h-screen py-20 px-4">
<div className="max-w-3xl mx-auto">
<h1 className="text-4xl font-bold tracking-tight mb-3">Changelog</h1>
<p className="text-text-muted text-lg mb-12">
<p className="text-fg-subtle text-lg mb-12">
Track every feature, fix, and improvement across GoSQLX releases.
</p>

Expand Down
4 changes: 2 additions & 2 deletions website/src/app/compare/CompareContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ export function CompareContent() {
<p className="text-sm text-zinc-400">
Performance comparisons are withheld until a reproducible benchmark harness is published.
For GoSQLX measurements, see the{' '}
<Link href="/benchmarks/" className="text-indigo-300 underline underline-offset-2">
<Link href="/benchmarks/" className="text-accent underline underline-offset-2">
benchmarks page
</Link>
.
Expand All @@ -189,7 +189,7 @@ export function CompareContent() {
</h2>
<p className="mt-3 text-zinc-400 max-w-xl mx-auto">
Get started in under a minute with a single{' '}
<code className="font-mono text-xs bg-white/[0.06] px-1.5 py-0.5 rounded">
<code className="font-mono text-xs text-fg bg-fg/[0.06] px-1.5 py-0.5 rounded">
go get
</code>{' '}
command.
Expand Down
2 changes: 1 addition & 1 deletion website/src/app/docs/[...slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export default async function DocPage({ params }: PageProps) {
</nav>

{/* Reading time */}
<div className="mb-6 flex items-center gap-2 text-sm text-text-muted">
<div className="mb-6 flex items-center gap-2 text-sm text-fg-subtle">
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Expand Down
10 changes: 5 additions & 5 deletions website/src/app/docs/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function DocsPage() {
</p>
<Link
href="/docs/getting-started"
className="mt-8 inline-flex items-center gap-2 rounded-lg bg-accent-indigo px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-accent-indigo/80"
className="mt-8 inline-flex items-center gap-2 rounded-lg bg-accent px-6 py-3 text-sm font-semibold text-accent-fg transition-colors hover:bg-accent/90"
>
Get Started
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
Expand All @@ -52,21 +52,21 @@ export default function DocsPage() {
href={`/docs/${group.items[0].slug}`}
className="glass glass-hover block rounded-xl p-6 transition-colors h-full"
>
<div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-accent-indigo/10">
<svg className="h-5 w-5 text-accent-indigo" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-accent/10">
<svg className="h-5 w-5 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d={CATEGORY_ICONS[group.category] || CATEGORY_ICONS['Core']} />
</svg>
</div>
<h2 className="text-lg font-semibold text-white">{group.category}</h2>
<p className="mt-1 text-sm text-text-muted">
<p className="mt-1 text-sm text-fg-subtle">
{group.items.length} {group.items.length === 1 ? 'article' : 'articles'}
</p>
<ul className="mt-3 space-y-1">
{group.items.slice(0, 3).map((item) => (
<li key={item.slug} className="text-sm text-zinc-400">{item.label}</li>
))}
{group.items.length > 3 && (
<li className="text-sm text-text-muted">+{group.items.length - 3} more</li>
<li className="text-sm text-fg-subtle">+{group.items.length - 3} more</li>
)}
</ul>
</Link>
Expand Down
2 changes: 1 addition & 1 deletion website/src/app/global-error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default function GlobalError({

return (
<html lang="en">
<body className="bg-[#09090b] text-white">
<body className="bg-[#0A0A0F] text-[#F0F0F5]">
<NextError statusCode={0} />
</body>
</html>
Expand Down
Loading
Loading