Adjusts light theme for better contrast on foreground, muted-foreground
and tertiary-foreground text
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Retuned the light theme’s surface chroma and updated light, muted, and
tertiary foreground levels for improved readability.
* Updated the brand link color saturation to better align with the
revised theme.
* Refreshed code block token colors for both light and dark themes.
* **Documentation**
* Updated the “Edit this page on GitHub” link styling to use updated
token-based text colors for default and hover states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Adjusts surface value for light theme
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Refined the light theme’s color tuning (including a small adjustment
to chroma) and retuned the canvas surface tone.
* Updated code block light-theme styling so string literal token colors
are now `#c46a0a` (applied consistently across the design system, docs,
learning, and UI library).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Bug fix.
## What is the current behavior?
In the docs site, **bold** text inside `.prose` content no longer
renders as bold — it is indistinguishable from normal body text in light
mode, and only a faint step heavier in dark mode.
Root cause: the recent font work added a docs-only rule in
`apps/docs/styles/globals.css`:
```css
.prose :where(p, a, code, pre):not(...),
.prose :where(ol > li):not(...)::marker {
font-weight: inherit;
}
```
This makes prose body text inherit the page base weight set on `html`
(`font-weight: 500` in light, `450` in dark). But the shared typography
config (`packages/config/typography.config.js`) defines `strong: {
fontWeight: '500' }`. So:
- **Light mode:** body copy is now `500` and `<strong>` is also `500` →
bold is visually identical to normal text.
- **Dark mode:** body copy is `450` vs `<strong>` `500` → barely
perceptible.
This is docs-specific: the other apps (`www`, etc.) never added the
`font-weight: inherit` override, so their prose body stays at `400` and
`strong: 500` still reads as bold. Changing the shared config would
over-bolden those apps, so the fix is scoped to the docs stylesheet.
## What is the new behavior?
Adds a docs-scoped override keeping bold text clearly heavier than the
inherited body weight:
```css
.prose :where(strong, b):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
font-weight: 600;
}
```
`<strong>`/`<b>` now render at `600`, giving clear contrast against the
`500`/`450` body weight in both light and dark modes, and matching the
semibold weight used by prose headings. The other apps are untouched.
## Additional context
- Single-file change in `apps/docs/styles/globals.css`.
- Uses the same `:where(... :not(.not-prose) ...)` pattern as the
surrounding prose rules to preserve `not-prose` opt-outs and keep
zero-specificity behavior.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
https://claude.ai/code/session_01RaT19RpEWwDFtzmVwmsPHo
---
_Generated by [Claude
Code](https://claude.ai/code/session_01RaT19RpEWwDFtzmVwmsPHo)_
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved documentation typography so emphasized (bold) text is more
clearly distinguishable from regular body copy.
* Added a targeted prose styling override for `strong`/`b` to ensure
consistent bold weight, while preserving sections that opt out of prose
styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude <[email protected]>
Co-authored-by: Miranda Limonczenko <[email protected]>
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES/NO
## What kind of change does this PR introduce?
Bug fix, feature, docs update, ...
## What is the current behavior?
Please link any relevant issues here.
## What is the new behavior?
Feel free to include screenshots if it includes visual changes.
## Additional context
Add any other context or screenshots.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Refreshed theming across the UI to use modern color expressions and
shared theme variables (including OKLCH-based gradients), improving
consistency for charts, code blocks, overlays, icons, and decorative
backgrounds.
* **Bug Fixes**
* Improved light/dark color and gradient consistency across axis/grid
styling, reference lines, buttons/badges, sidebar accents, loaders, and
other visual components.
* **Documentation**
* Updated styling/theming guidance to align with the revised semantic
token system and the updated theme variable usage patterns.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 4.8 <[email protected]>
https://github.com/user-attachments/assets/30438e3c-b9aa-411b-be38-3fdcd50f7dc6
Closes DOCS-92
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## Problem
Screenreaders have to navigate our main menu on every page.
This comes from a very old request. 2024. 😱
## Solution
A 'Skip to Content' button is standard a11y practice.
This PR improves keyboard navigation by letting users bypass the top nav
and sidebar to jump directly to main content.
## Tophatting
1. Go to any page in our docs. Try a sample of different layouts.
2. Use TAB to navigate. See 'Skip to Content' appear.
**Note:** You may need to SHIFT + TAB if your keyboard focus is past the
main navigation. Mouse clicks can shift focus.
3. Press ENTER.
4. Continue to TAB and see the next links focused are in the main body.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a “skip to content” button in the docs to improve keyboard
navigation.
* **Accessibility / UX**
* Made the main content area programmatically focusable and adjusted
scroll positioning for smoother jumps.
* **Style**
* Removed the prior global skip-link styles in favor of component-based
skip-to-content behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Cursor <[email protected]>
Update marketing website and docs with new sans-serif fonts:
- `Inter` - sans-serif for all body text
- `Manrope` - sans-serif for headings
PR breakdown of #43455
Related: #47226#47228#47236
## I have read the CONTRIBUTING.md file.
YES
## What kind of change does this PR introduce?
Bug fix, docs update, Studio UX improvement.
Closes DOCS-400.
## What is the current behavior?
- Linear item: Docs: can't read Terminology table name column
- `break-all` on all `.prose td code` breaks `{{ .ConfirmationURL }}`
mid-token
- Studio template editor only linked to local-development
customizing-email-templates
## What is the new behavior?
- First-column code uses `break-words`; other columns keep `break-all`
- First column `min-width: 12rem` / `width: 30%`
- Studio TemplateEditor: **Terminology** + **Local development** links
- Template detail page: **Terminology** InlineLink beside Docs button
- `Table.tsx` MDX wiring deferred
On desktop:
<img width="864" height="1086" alt="image"
src="https://github.com/user-attachments/assets/f8439d1a-f607-4925-a250-ff142a357a2a"
/>
On mobile:
<img width="400" height="1383" alt="image"
src="https://github.com/user-attachments/assets/334769e8-3821-4bf4-8256-f4fae9ce45ea"
/>
Correct link:
<img width="1502" height="710" alt="Capto_Capture
2026-06-22_03-34-48_PM"
src="https://github.com/user-attachments/assets/87506751-d72b-4892-a8fb-63ef298a8260"
/>
## Additional context
- Verification (author): CSS diff only; table fixture screenshots
captured
- Frontend note: docs-only CSS in `apps/docs/styles/globals.css`; Studio
shadcn tables unchanged
### Test plan
- [ ] Check out worktree branch and run docs app locally (`cd apps/docs
&& pnpm dev`)
- [ ] Open `/docs/guides/auth/auth-email-templates#terminology` at
desktop width — Name column readable
- [ ] Same page at mobile/narrow width — first column has adequate
min-width
- [ ] Spot-check 1–2 other docs pages with code in table first column —
no regression
- [ ] Open Studio → Auth → Email Templates → edit any template
- [ ] Confirm new link to
`/guides/auth/auth-email-templates#terminology` opens correct anchor
- [ ] Confirm existing link to `customizing-email-templates` still works
- [ ] Confirm `apps/docs/components/Table.tsx` was **not** wired into
MDX
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Improved table cell code wrapping behavior in documentation to prevent
width expansion
* **Documentation & UI**
* Updated email templates editor with enhanced documentation links for
Terminology and Local development
* Added Terminology documentation link to email templates page header
for convenient access to reference materials
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Nik Richers <[email protected]>
Co-authored-by: Chris Chinchilla <[email protected]>
This PR migrates all tailwind configs in the apps to be CSS configs.
They import a shared CSS Tailwind config from the `config` package
(which in turns imports the old JS config).
The shared JS config will be migrated to CSS in a followup PR.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Centralized Tailwind into a config-driven entrypoint and updated the
app build flow to use the new build step; many apps now import unified
global styles.
* **Style**
* Migrated global styles to a Tailwind v4-style setup, added
project-wide content scanning, consolidated theme imports, standardized
theme tokens (including new --container-site max-width), and added a
small prose utility to remove paragraph margins.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 4.6 <[email protected]>
