Closes DOCS-1283
https://github.com/user-attachments/assets/6e55a27f-6f73-453b-b98f-e91d3c14a9e4
## Problem
Three defects in the docs code block:
- The scroll container has no `tabindex`. On `/guides/database/tables`,
18 blocks, none focusable, 2 overflowing at 1280px. Tab skips the scroll
region, so a keyboard-only user cannot scroll code that runs off the
edge.
- The container has `role="group"` with no accessible name, so it
announces as bare "group".
- The line-number gutter has no `aria-hidden`, so digits are read inline
with the code. A block linearizes as `1import { createClient } from
'@supabase/supabase-js'23const supabase = ...`, with lines 2 and 3
collapsing into "23".
Four more surfaced while testing the fix:
- The wrap and copy buttons were absolutely positioned inside the
element that scrolls, so `right-2` measured against the scrollable
content box. Scrolling dragged them out of the corner into the middle of
the code. This one predates the PR.
- The buttons preceded the code in the DOM, so a screen reader read two
actions before naming what they act on.
- `focus-within` only fired for the buttons, so focusing the block left
the controls invisible.
- Both buttons set an `aria-label` identical to their tooltip text, and
Radix points `aria-describedby` at the tooltip on focus, producing "Copy
code, button, Copy code".
## Solution
Keyboard:
- Split the scroll region out of the positioning container, so the
controls stay pinned.
- Give the scroll region a `tabIndex` and a focus ring.
- Reveal the controls on `group-focus-within`.
Screen reader:
- Name the region `<language>, <n> lines`. Code content stays readable;
the summary goes in the name so the group can be skipped or stepped
into.
- Map fence aliases to spoken names, so `ts` announces as TypeScript.
Only the ambiguous ones; `bash`, `python`, `kotlin`, `dart`, `swift`
already read fine.
- `aria-hidden` the gutter. The numbers are already `select-none`, and
copy takes its content from the source string rather than the DOM, so
copy behavior is unchanged.
- Order the controls after the code.
- Announce the word wrap toggle through a live region, matching the copy
button.
- Opt both buttons out of Radix's generated description.
Also moved the `data-wrapped` side effect out of the `setIsWrapped`
updater, since React calls updaters twice under StrictMode.
## Manual testing
1. Open `/docs/guides/database/tables`.
2. Run `document.querySelectorAll('.code-scroll[tabindex="0"]').length`
in the console. Expect `18`.
3. Run `[...document.querySelectorAll('.code-scroll')].map(b =>
b.getAttribute('aria-label'))`. Expect entries like `SQL, 11 lines` and
`bash, 2 lines`, plus one bare `2 lines` for the fence with no language.
4. Tab to a code block. Expect a visible focus ring, and the wrap and
copy buttons to appear.
5. Press ArrowRight on the block under "Basic data loading", which
overflows. Expect it to scroll, and the buttons to stay in the top-right
corner.
6. Press Enter on the wrap button. Expect the code to wrap and a screen
reader to announce "Word wrap enabled".
7. With VoiceOver on, focus a code block. Expect "SQL, 11 lines, code
block", then the code read without line numbers interleaved. Focus each
button and expect its name once, not twice.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Accessibility**
- Improved code block labels for screen readers, including programming
language and line count.
- Added announcements when word wrap is enabled or disabled.
- Enhanced keyboard focus behavior for code block controls.
- **Usability**
- Kept code block controls visible while scrolling through code.
- Improved wrapped-code overflow handling.
- Removed redundant tooltip descriptions for copy and word-wrap
controls.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
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 <noreply@anthropic.com>
Co-authored-by: Miranda Limonczenko <miranda.limonczenko@supabase.io>
## 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 <noreply@anthropic.com>
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 <cursoragent@cursor.com>
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 <nik@validmind.ai>
Co-authored-by: Chris Chinchilla <chris.ward@supabase.io>
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 <noreply@anthropic.com>
Miranda Limonczenko