Skip to content

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

Open
dcrawbuck wants to merge 1 commit into
mainfrom
dcrawbuck/ui-polish
Open

Restore teal accent, flatten sidebar background, drop body letter-spacing#273
dcrawbuck wants to merge 1 commit into
mainfrom
dcrawbuck/ui-polish

Conversation

@dcrawbuck

@dcrawbuckdcrawbuck commented Aug 19, 2026

Copy link
Copy Markdown
Collaborator

Three theme changes in src/styles/app.css: the primary/ring accent tokens move from orange back to teal, the sidebar background now matches the page canvas, and the -0.01em body letter-spacing is removed so body text uses Manrope's natural tracking (heading tracking is unchanged).

The sidebar aside paints bg-fd-card, which sat a depth tier above the canvas and read as a differently-colored panel, so --color-fd-card is pinned to the background inside #nd-sidebar — scoped there so cards and popovers elsewhere are unaffected, and the hairline border alone separates nav from content.

Dark mode uses teal-300, but light mode uses teal-400 for both accent text and the focus ring: --color-fd-ring is the sole focus-visible:ring-2 indicator across the app, and teal's bright step is a light cyan that measures only 1.76:1 on the white canvas, under the 3:1 minimum for a non-text indicator, where teal-400 measures 6.75:1.

Verified with bun run build:cf and bun test (64 pass, 0 fail).


Note

Low Risk
CSS-only visual and token changes with no logic, auth, or data impact; main risk is contrast or focus-ring visibility regressions in light mode.

Overview
Docs theme in app.css moves the Fumadocs primary / ring accent from orange back to teal (links, active nav/TOC, prose links, focus rings, Ask AI shimmer comments). Light mode uses teal-400 for both accent text and the focus ring so rings meet 3:1 on the white canvas; dark mode and prefers-color-scheme fallbacks use teal-300.

The sidebar no longer reads as a separate panel: inside #nd-sidebar, --color-fd-card is pinned to --color-fd-background so nav shares the page canvas and only the hairline border separates it.

Body text drops the global letter-spacing: -0.01em so Manrope uses its natural tracking; heading tracking is unchanged.

Reviewed by Cursor Bugbot for commit 5c8e6b1. Bugbot is set up for automated code reviews on this repo. Configure here.

- Accent tokens (`primary`, `ring`) move from orange back to teal. Dark
mode uses teal-300; light mode uses teal-400, since teal's bright step
is a light cyan that fails contrast on the white canvas.
- The sidebar aside paints `bg-fd-card`, which sat a depth tier above the
page and read as a differently-colored panel. Pin card to the canvas
inside `#nd-sidebar` so the hairline border alone separates them.
- Drop the -0.01em body letter-spacing; body now uses Manrope's natural
tracking. Heading tracking is unchanged.
`--color-fd-ring` is the sole `focus-visible:ring-2` indicator across the
app, so the light-mode value is contrast-bound: teal-300 measures 1.76:1
on white (under the 3:1 non-text minimum), teal-400 measures 6.75:1.
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying with Cloudflare Workers Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

StatusNameLatest CommitPreview URLUpdated (UTC)
✅ Deployment successful!
View logs
superwall-docs5c8e6b1Commit Preview URL

Branch Preview URL
Aug 19 2026, 05:48 PM

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@dcrawbuck