Skip to content

Restore teal accent, flatten sidebar background, drop body letter-spacing #273

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

Open
dcrawbuck wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Restore teal accent, flatten sidebar background, drop body letter-spacing #273

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
46 changes: 29 additions & 17 deletions src/styles/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
Ports superwall.com's brand system (superwall.com/design.md) onto Fumadocs.
Docs sit in the "Application" register: sidebar/topbar chrome, dense type,
long-form prose, Roboto Mono as the sole mono face. Paper-flat by intent —
no shadows, square corners (only circles round), one fixed orange accent,
no shadows, square corners (only circles round), one fixed teal accent,
hairline borders, editorial Manrope type. Light (warm cream) and dark (true
warm ink) both ship with a header toggle; the palette matches superwall.com so
the two sites read as one brand. Theme rides a `.dark`/`.light` class
Expand Down Expand Up @@ -94,7 +94,7 @@
Semantic Fumadocs tokens — the only colors that swap by mode.
Three-tier depth (design.md Application register): canvas → surface →
elevated, read through hue contrast + a single hairline border, never a
shadow. `primary` carries the fixed orange accent (links, active nav/TOC,
shadow. `primary` carries the fixed teal accent (links, active nav/TOC,
tab underline, focus ring); `accent` is the low-alpha hover wash.
--------------------------------------------------------------------------- */

Expand All @@ -115,15 +115,20 @@
--color-fd-card-foreground: var(--color-black-500);
--color-fd-border: var(--color-cream-400); /* #e2e4d0 hairline */
--color-fd-input: var(--color-cream-400);
/* Accent as TEXT (links, active nav/TOC labels) — a darker burnt-orange that
clears WCAG AA on cream/white/callout fills. Dark mode keeps orange-300
(already AA on ink). The ring below stays bright orange-300 (a 2px non-text
indicator, 3:1 suffices) so focus keeps its punch. */
--color-fd-primary: #a8421a; /* accent text, AA (~6:1) on light */
/* Accent as TEXT (links, active nav/TOC labels) — the deep teal step, which
clears WCAG AA on cream/white/callout fills. Dark mode uses teal-300
(already AA on ink).
The ring takes teal-400 too, unlike the old orange scheme where the ring
stayed bright (orange-300) for punch while text used a darker step. Teal's
bright step is a LIGHT cyan: teal-300 on this white canvas is only 1.76:1,
under the 3:1 minimum for a non-text indicator, and this token is the sole
`focus-visible:ring-2` marker across the app. teal-400 is 6.75:1. Dark mode
keeps teal-300 (11.2:1 on ink). Do not "brighten" this back to teal-300. */
--color-fd-primary: var(--color-teal-400); /* #216564 — accent text, AA (~6.8:1) on light */
--color-fd-primary-foreground: var(--color-cream-100);
--color-fd-accent: color-mix(in srgb, var(--color-black-500) 5%, transparent);
--color-fd-accent-foreground: var(--color-black-500);
--color-fd-ring: var(--color-orange-300);
--color-fd-ring: var(--color-teal-400); /* 6.75:1 on white; teal-300 would be 1.76:1 */
color-scheme: light;
}

Expand All @@ -146,11 +151,11 @@
--color-fd-card-foreground: var(--color-cream-100);
--color-fd-border: var(--color-black-300); /* #211f1d hairline */
--color-fd-input: var(--color-black-300);
--color-fd-primary: var(--color-orange-300); /* accent — fixed */
--color-fd-primary: var(--color-teal-300); /* accent — fixed */
--color-fd-primary-foreground: var(--color-black-500);
--color-fd-accent: color-mix(in srgb, var(--color-cream-100) 6%, transparent);
--color-fd-accent-foreground: var(--color-cream-100);
--color-fd-ring: var(--color-orange-300);
--color-fd-ring: var(--color-teal-300);
color-scheme: dark;
}

Expand All @@ -168,11 +173,11 @@
--color-fd-card-foreground: var(--color-cream-100);
--color-fd-border: var(--color-black-300);
--color-fd-input: var(--color-black-300);
--color-fd-primary: var(--color-orange-300);
--color-fd-primary: var(--color-teal-300);
--color-fd-primary-foreground: var(--color-black-500);
--color-fd-accent: color-mix(in srgb, var(--color-cream-100) 6%, transparent);
--color-fd-accent-foreground: var(--color-cream-100);
--color-fd-ring: var(--color-orange-300);
--color-fd-ring: var(--color-teal-300);
color-scheme: dark;
}
}
Expand All @@ -186,6 +191,14 @@
--color-fd-muted-foreground: #aaaaaa;
}

/* The sidebar aside paints `bg-fd-card`, which sat a tier above the canvas and
read as a differently-colored panel. Pin card to the canvas inside the
sidebar (both modes) so the nav shares the page background and the hairline
border alone separates them. */
#nd-sidebar {
--color-fd-card: var(--color-fd-background);
}

/* ---------------------------------------------------------------------------
Superwall wordmark — two-tone, theme-swapped (replicates superwall.com's own
SuperwallLogo). All glyph paths take `--logo-primary`; the first four take
Expand Down Expand Up @@ -227,12 +240,11 @@

/* ---------------------------------------------------------------------------
Type — editorial Manrope. Headings are weight 500 (never 700) with negative
tracking that tightens as size grows; body is 400 with a gentle -0.01em.
tracking that tightens as size grows; body keeps the face's natural tracking.
--------------------------------------------------------------------------- */
@layer base {
body {
font-family: var(--font-sans);
letter-spacing: -0.01em;
}

/* Docked agent mode publishes this desktop push width; it stays 0px
Expand Down Expand Up @@ -284,10 +296,10 @@

/* ---------------------------------------------------------------------------
Prose — brighten long-form body toward fg (design.md: fg/85 for body, not a
heavy gray). Links carry the orange accent; hover strengthens with an
heavy gray). Links carry the teal accent; hover strengthens with an
underline rather than a color shift (design rule 14).
--------------------------------------------------------------------------- */
/* Inline markdown links carry the orange accent via the prose link token — set
/* Inline markdown links carry the teal accent via the prose link token — set
here (not a raw `.prose a` rule) so it stays scoped by Fumadocs' typography
`:where()` selectors: heading permalink anchors keep the heading color, and
component links that set their own `text-*` utility (e.g. changelog rows) win
Expand Down Expand Up @@ -434,7 +446,7 @@ svg.lucide-external-link > * {
}

/* ---------------------------------------------------------------------------
"Ask AI" search-trigger shimmer — retinted from teal to the orange accent.
"Ask AI" search-trigger shimmer — tinted with the teal accent.
--------------------------------------------------------------------------- */
@keyframes ask-ai-empty-shimmer {
0% {
Expand Down
Loading