## What kind of change does this PR introduce?
Chore.
## What is the current behaviour?
Classic Dark remains available across the shared theme library and
several apps. Studio now supports System, Dark, and Light as its theme
modes, but still carries compatibility paths for Classic Dark.
## What is the new behaviour?
- Removes Classic Dark from shared theme options, application commands,
stylesheets, previews, examples, and replay handling.
- Deletes the Classic Dark and faux Classic Dark stylesheets.
- Removes the now-unused Classic Dark branches from Studio theme colour
controls.
- Migrates `classic-dark` to `dark` so first rendered frame renders Dark
(not Light)
| After |
| --- |
| <img width="1458" height="1778" alt="CleanShot 2026-09-18 at 11 07
40@2x"
src="https://github.com/user-attachments/assets/679bf87f-a3c1-4599-ad2f-292d98d0b856"
/> |
## To test
1. In Studio, open Account Preferences → Appearance. Confirm the
available themes are System, Dark, and Light, and that theme colour
controls still work in each resolved mode.
2. Set the `theme` local storage value to `classic-dark`, then reload
Studio. Confirm it renders as Dark immediately and the stored value
becomes `dark`.
3. Open the theme switcher in Design System, Learn, and UI Library.
Confirm Classic Dark is no longer available and Light, Dark, and System
still apply correctly.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Changes**
* Removed the Classic Dark theme option from theme menus and settings
across the application.
* Classic Dark selections are automatically migrated to the standard
Dark theme.
* Updated theme documentation and demonstrations to list only System,
Light, and Dark.
* Removed Classic Dark styling and preview support; existing Dark,
Light, and System themes remain available.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
follow-up to #50235 to reduce reference page payloads and cold rendering
overhead
## What is the current behavior?
reference pages ship a large rsc payload inside the html _ most of it is
duplication rather than content along with shiki that writes ~30
character css variable name for every syntax token making the page heavy
in some cases
## What is the new behavior?
- moves repeated styles into shared css and uses compact, namespaced
token classes
- renders details icons inside the client trigger
- follows shiki’s guidance to [reuse one
highlighter](https://shiki.style/guide/best-performance#cache-the-highlighter-instance)
and [load languages on
demand](https://shiki.style/guide/best-performance#use-shorthands)
`page size`
page | before | after | change
-- | -- | -- | --
javascript | 10.61 mb | 8.28 mb | -21.9%
dart | 4.59 mb | 4.13 mb | -10.1%
python | 4.38 mb | 3.73 mb | -14.9%
swift | 2.87 mb | 2.56 mb | -10.9%
server | 1.59 mb | 1.35 mb | -15.2%
kotlin | 3.42 mb | 3.17 mb | -7.2%
`cold initialization`
language | before | after | reduction
-- | -- | -- | --
bash | 2,180 ms | 23 ms | 98.95%
javascript | 2,245 ms | 38 ms | 98.29%
## Additional context
measured on a local production build which uses the checked in generated
content _ production has larger sdk data, so absolute sizes there will
be higher
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added reusable expand/collapse controls for API reference details,
with updated icons, labels, and styling.
* Improved code block rendering with class-based syntax highlighting,
wrapped-code support, responsive layouts, and lazy language loading.
* **Style**
* Added theme-aware syntax-token colors, line-number styling, and
configurable code-block shadows.
* Consolidated expandable reference panel and item styling.
* **Tests**
* Added coverage for syntax highlighting, code block rendering, language
support, token stability, and reference details.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## what is the current behavior?
admonition icon <> text not optically aligned + rendered differently in
docs and the design system _ docs showed admonition text at 15px/28px
because the page's prose styles reached inside the component, while the
same callout was 13px in the design system _ lists
## what is the new behavior?
- the title offset is now conditional. a title and body copy have
different line heights, so they need different nudges to sit level with
the icon.
- fixes list markers and the ordered-list chip alignment inside
callouts.
- removes `.admonition-content` css that nothing referenced
- fixes 5 admonition titles that were not capitalized.
| state | preview |
| -------|------|
| before | <img width="902" height="279" alt="image"
src="https://github.com/user-attachments/assets/2fffb183-81e2-4eff-8f0d-8a07649390e8"
/> |
| after | <img width="902" height="279" alt="image"
src="https://github.com/user-attachments/assets/22abe3ed-fd6d-49ac-aa37-4292bca5850a"
/> |
## follow ups
- better composition: title, description and actions are still props _ a
compound api (`Admonition.Title`, `Admonition.Actions`) would remove the
`childProps` escape hatch
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Documentation**
* Improved capitalization of note and warning titles in the Metabase and
Prisma guides for consistency.
* Updated the contributing guide’s table of contents to exclude feedback
headings.
* Improved heading structure for the documentation feedback section.
* **UI Improvements**
* Refined admonition and alert typography, spacing, list formatting, and
ordered-list alignment.
* Improved content spacing when titles, descriptions, or icons are
present.
* Updated action links and buttons for more consistent sizing.
* Adjusted alert content styling for a clearer presentation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
bug fix + some ui polish on the docs code block
## What is the current behavior?
line numbers scroll away with the code _ so you lose your place in any
block wide enough to scroll _ the gutter is also see-through so scrolled
code renders interleaved with the numbers
## What is the new behavior?
- makes gutter sticky and stays pinned while the code scrolls (no
rubber)
- fixes gutter, row hover, and button backgrounds as opaque so nothing
bleeds through
- adds gutter right edge fades vs bg
- adds right padding so line endings clear the buttons
- adds press feedback on the shared in-house `Button` gated behind
`motion-safe`
| state | preview |
| -------|------|
| before | <img width="566" height="263" alt="image"
src="https://github.com/user-attachments/assets/81778815-1f15-4ea5-a647-ed48418210e8"
/> |
| after | <img width="566" height="259" alt="image"
src="https://github.com/user-attachments/assets/b7d770c5-4156-491f-93c8-b0d900b7dc85"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **UI Improvements**
* Refined code block controls with consistent styling, active states,
animated icons, and automatic copy-status reset.
* Improved code block line-number presentation with hover effects,
sticky gutters, spacing, shadows, and smoother horizontal scrolling.
* Added smoother button transitions and a subtle pressed-state
animation.
* Respect reduced-motion preferences by disabling icon animations when
requested.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
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>
Anthony Lio