Skip to content

feat(website): unify all fonts onto the next/font variables #876

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
blove merged 1 commit into from
Aug 30, 2026
Merged

feat(website): unify all fonts onto the next/font variables #876

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
30 changes: 13 additions & 17 deletions apps/website/src/styles/chrome.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,7 @@
* these in @layer would let utilities win and change rendering.
*
* Migration: docs/superpowers/plans/2026-08-29-inline-style-substrate-migration.md
*
* Font-family exception: see the top of ui.css for the next/font
* shadowing rationale. Verbatim raw-stack literals below
* ('Inter, sans-serif', 'var(--font-mono,"JetBrains Mono",monospace)',
* 'var(--font-garamond,"EB Garamond",Georgia,serif)') are intentional.
* Fonts: unified onto the next/font vars — see the font note atop ui.css.
*/

/* One nav height. The fixed nav measures 58px (px-6 py-4) and 81px at the md
Expand Down Expand Up @@ -175,7 +171,7 @@
padding: 10px 0;
font-size: 15px;
font-weight: 500;
font-family: Inter, sans-serif;
font-family: var(--font-inter);
background: transparent;
color: var(--color-text-muted);
border: none;
Expand Down Expand Up @@ -210,7 +206,7 @@
line-height: 24px;
min-height: 44px;
text-decoration: none;
font-family: Inter, sans-serif;
font-family: var(--font-inter);
color: var(--color-text-secondary);
background: transparent;
}
Expand All @@ -232,7 +228,7 @@
flex: 1;
text-align: center;
padding: 8px 0;
font-family: var(--font-mono,"JetBrains Mono",monospace);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 600;
background: transparent;
Expand All @@ -256,7 +252,7 @@
color: var(--color-accent);
background: var(--color-accent-surface);
text-decoration: none;
font-family: Inter, sans-serif;
font-family: var(--font-inter);
font-weight: 600;
}
.nav-mobile-section-toggle {
Expand All @@ -271,7 +267,7 @@
padding: 12px 14px;
min-height: 48px;
border-radius: 8px;
font-family: Inter, sans-serif;
font-family: var(--font-inter);
font-size: 16px;
line-height: 24px;
color: var(--color-text-primary);
Expand All @@ -293,7 +289,7 @@
min-height: 48px;
color: var(--color-text-secondary);
text-decoration: none;
font-family: Inter, sans-serif;
font-family: var(--font-inter);
}
.nav-mobile-github-link {
display: flex;
Expand All @@ -304,7 +300,7 @@
min-height: 48px;
color: var(--color-text-secondary);
text-decoration: none;
font-family: Inter, sans-serif;
font-family: var(--font-inter);
font-size: 16px;
}
.nav-mobile-cta-wrap {
Expand Down Expand Up @@ -352,7 +348,7 @@
padding: 4px;
}
.toast-eyebrow {
font-family: var(--font-mono,"JetBrains Mono",monospace);
font-family: var(--font-mono);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.1em;
Expand All @@ -361,7 +357,7 @@
margin-bottom: 8px;
}
.toast-title {
font-family: var(--font-garamond,"EB Garamond",Georgia,serif);
font-family: var(--font-garamond);
font-size: 1.05rem;
font-weight: 700;
color: var(--color-text-primary);
Expand All @@ -383,7 +379,7 @@
background: none;
border: none;
cursor: pointer;
font-family: var(--font-mono,"JetBrains Mono",monospace);
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--color-text-muted);
text-decoration: underline;
Expand All @@ -400,7 +396,7 @@
padding: 8px 12px;
font-size: 0.82rem;
color: var(--color-text-primary);
font-family: Inter, sans-serif;
font-family: var(--font-inter);
outline: none;
margin-bottom: 10px;
}
Expand All @@ -413,7 +409,7 @@
font-size: 0.7rem;
color: var(--color-text-muted);
text-decoration: underline;
font-family: Inter, sans-serif;
font-family: var(--font-inter);
}
.toast-success-text {
font-size: 0.85rem;
Expand Down
48 changes: 21 additions & 27 deletions apps/website/src/styles/docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
}

.docs-prose [data-rehype-pretty-code-figure] code {
font-family: var(--font-mono), monospace;
font-family: var(--font-mono);
font-size: inherit;
background: none !important;
padding: 0 !important;
Expand All @@ -90,7 +90,7 @@
* table columns squeeze below the chip width and wrap `agent` as agen/t. */
word-break: normal;
overflow-wrap: break-word;
font-family: var(--font-mono), monospace;
font-family: var(--font-mono);
font-size: 0.85em;
background: var(--color-accent-surface);
color: var(--color-accent);
Expand Down Expand Up @@ -255,7 +255,7 @@
color: var(--color-accent);
}
.ag-ui-arch-box-title {
font-family: "JetBrains Mono", monospace;
font-family: var(--font-mono);
font-size: 0.95rem;
font-weight: 600;
color: var(--color-text-primary);
Expand Down Expand Up @@ -360,13 +360,7 @@
/*
* mdx components (components/docs/mdx/*.tsx) — presentation for the MDX
* content components authored inside docs pages.
*
* Font-family exception: see the top of ui.css for the next/font shadowing
* rationale. `tokens.typography.fontSans/fontMono/fontSerif` are raw stacks
* and are copied through verbatim below ('Inter, system-ui, sans-serif',
* '"JetBrains Mono", monospace', '"EB Garamond", Georgia, serif');
* `tokens.typography.body.family` is already `var(--font-inter)` and is
* copied through as the var.
* Fonts: unified onto the next/font vars — see the font note atop ui.css.
*/

/* mdx — Callout */
Expand Down Expand Up @@ -408,7 +402,7 @@
height: 20px;
border-radius: var(--radius-full);
color: var(--color-text-inverted);
font-family: "JetBrains Mono", monospace;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
Expand All @@ -426,7 +420,7 @@
background: var(--color-angular-red);
}
.mdx-callout-title {
font-family: Inter, system-ui, sans-serif;
font-family: var(--font-inter);
font-size: 15px;
color: var(--color-text-primary);
font-weight: 600;
Expand Down Expand Up @@ -460,7 +454,7 @@
border-radius: var(--radius-full);
background: var(--color-accent);
color: var(--color-text-inverted);
font-family: "JetBrains Mono", monospace;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
display: inline-flex;
Expand Down Expand Up @@ -490,7 +484,7 @@
padding-bottom: 8px;
}
.mdx-step-title {
font-family: Inter, system-ui, sans-serif;
font-family: var(--font-inter);
font-size: 17px;
font-weight: 600;
color: var(--color-text-primary);
Expand Down Expand Up @@ -539,7 +533,7 @@
margin-bottom: 6px;
}
.mdx-card-title {
font-family: "EB Garamond", Georgia, serif;
font-family: var(--font-garamond);
font-weight: 700;
font-size: 0.95rem;
color: var(--color-text-primary);
Expand Down Expand Up @@ -570,7 +564,7 @@
}
.mdx-tab-button {
padding: 10px 18px;
font-family: "JetBrains Mono", monospace;
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 400;
color: var(--color-text-secondary);
Expand Down Expand Up @@ -637,7 +631,7 @@
}
.mdx-codegroup-tab {
padding: 8px 14px;
font-family: "JetBrains Mono", monospace;
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 400;
color: var(--color-text-secondary);
Expand Down Expand Up @@ -698,14 +692,14 @@
margin-bottom: 8px;
}
.mdx-chip-title {
font-family: Inter, system-ui, sans-serif;
font-family: var(--font-inter);
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 4px;
}
.mdx-chip-signal {
font-family: "JetBrains Mono", monospace;
font-family: var(--font-mono);
font-size: 10px;
color: var(--color-accent);
}
Expand Down Expand Up @@ -760,7 +754,7 @@
min-width: 0;
}
.docs-sidebar-lib-trigger-label {
font-family: "JetBrains Mono", monospace;
font-family: var(--font-mono);
font-size: 0.8rem;
}
.docs-sidebar-lib-caret {
Expand Down Expand Up @@ -792,7 +786,7 @@
min-width: 0;
}
.docs-sidebar-lib-item-title {
font-family: "JetBrains Mono", monospace;
font-family: var(--font-mono);
font-weight: 600;
color: var(--color-text-primary);
font-size: 0.8rem;
Expand Down Expand Up @@ -853,7 +847,7 @@
font-size: 0.8rem;
}
.docs-sidebar-search-kbd {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-family: var(--font-mono);
font-size: 0.65rem;
color: var(--color-text-muted);
background: var(--color-surface-dim);
Expand Down Expand Up @@ -1008,7 +1002,7 @@
/* Typography on the LIST, not the links: the separators are siblings of the
* links inside each li, and when only the links carried 13px the first two
* separators inherited body's 16px/24px and floated 3px high (findings §3). */
font-family: Inter, system-ui, sans-serif;
font-family: var(--font-inter);
font-size: 13px;
line-height: 1.5;
}
Expand Down Expand Up @@ -1042,7 +1036,7 @@
min-width: 0;
}
.docs-page-header-label {
font-family: "JetBrains Mono", monospace;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
Expand Down Expand Up @@ -1077,7 +1071,7 @@
align-items: center;
gap: 7px;
padding: 7px 12px;
font-family: Inter, system-ui, sans-serif;
font-family: var(--font-inter);
font-size: 13px;
font-weight: 500;
color: var(--color-text-secondary);
Expand Down Expand Up @@ -1149,7 +1143,7 @@
width: 100%;
text-align: left;
padding: 8px 12px;
font-family: Inter, system-ui, sans-serif;
font-family: var(--font-inter);
font-size: 13px;
color: var(--color-text-primary);
background: transparent;
Expand Down Expand Up @@ -1591,7 +1585,7 @@
margin-bottom: 8px;
}
.docs-prevnext-title {
font-family: Inter, system-ui, sans-serif;
font-family: var(--font-inter);
font-size: 16px;
font-weight: 600;
color: var(--color-accent);
Expand Down
Loading
Loading