## What kind of change does this PR introduce?
Refactor. Follow-up to #49871.
## What is the current behavior?
Branded (green) text still uses the `text-brand` classname while the
colour comes from `--primary`.
## What is the new behavior?
**Rename-only:** `text-brand` → `text-primary` across callsites and
docs. Leftover `bg-brand` / `border-brand` alias to `brand-default`. No
intentional colour changes in this PR.
This better matches how we treat our green in other components and
props, like `variant="primary"` for green buttons.
## To test
On light mode: smoke-test that branded text still looks like #49871
(readable green, not the bright fill).
-
[Homepage](https://zone-www-dot-com-git-dnywh-depr-316-text-brand-de2380-supabase.vercel.app/):
“Scale to millions” uses `text-primary`
- [Docs
homepage](https://docs-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/docs):
branded links like “More on self-hosting” are still readable
- [Typography
docs](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/typography):
documents `text-primary`
- [Colour
usage](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/color-usage):
`text-primary` is visibly darker than `bg-brand-default` _on light mode_
- [Studio auth
providers](https://studio-staging-git-dnywh-depr-316-text-brand-to-60fa6c-supabase.vercel.app/dashboard/project/_/auth/providers):
enabled provider badge text readable; status dot stays bright green
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Updated branded text, link hover states, icons, badges, indicators,
and highlighted content across the Design System, Docs, Studio, Learn,
UI Library, and marketing experiences to use the primary theme color.
* Updated syntax highlighting and table-of-contents styling for
consistent primary-color presentation.
* Refined brand color fallback behavior for bright fills and borders.
* **Documentation**
* Updated color-usage and typography guidance to recommend the primary
text utility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Migrates the repo off `clsx` + `tailwind-merge` to
[shadcn-ui/cn](https://github.com/shadcn-ui/cn). Every app and package
already gets `cn` from `packages/ui`, so the swap happens in that one
helper and flows through to Studio, docs, www, and the rest.
**Changed:**
- `packages/ui` `cn` helper now uses `createCn` from `cn/config`,
keeping the custom `card`/`content` spacing scale so `p-card` still
overrides `p-4`. It has an explicit signature and re-exports
`ClassValue`.
- The four www Launch Week files that imported the `ClassValue` type
from `clsx` now import it from `ui`.
- `blocks/vue` local `lib/utils.ts` re-exports `cn` from the package.
- Comments/README that referenced tailwind-merge.
**Removed:**
- Direct `clsx` and `tailwind-merge` deps from `ui`, `ui-patterns`,
`www`, and `blocks/vue`. `ui-patterns` and `www` declared them without
importing.
**Added:**
- `packages/ui/src/lib/utils/cn.test.ts` covering clsx-style joining,
conflict resolution, the custom spacing scale, and variant handling.
Not migrated: the standalone apps under `examples/`. They're outside the
workspace and mostly on Tailwind v3, which `cn` doesn't support.
Lockfile note: after merging master, the lockfile diff is only the
intended swap (`clsx` and `tailwind-merge` out, `cn@0.2.5` in).
`tailwind-merge` stays in the lockfile as a transitive dep of a
third-party package.
Release-age note: this sat in draft with a temporary
`minimumReleaseAgeExclude` entry for `cn` while `cn` was inside the
workspace's 3-day `minimumReleaseAge` window. That window has closed, so
the exclusion is gone and nothing bypasses the release-age gate.
## To test
- `pnpm install --frozen-lockfile` succeeds with no
`minimumReleaseAgeExclude` entry for `cn`.
- `pnpm --filter ui test` – new `cn.test.ts` passes, including
`cn('p-4', 'p-card')` → `p-card`.
- Typecheck passes for studio, ui, ui-patterns, vue-blocks. www
typecheck panics under tsgo on master already (pre-existing, unrelated);
it passes with the JS `tsc` binary.
- Spot-check Studio locally: class overrides still win in the usual
places (e.g. `CodeEditor` height, `Button` variants with a custom
`className`).
https://claude.ai/code/session_01MkAt16tsPRDTm9oB5Jr8Ub
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Standardized Tailwind class merging across shared UI utilities while
preserving conditional classes, custom spacing classes, and variant
behavior.
* Updated related components and examples to use the standardized
class-merging utility.
* **Tests**
* Added coverage for conditional class handling, conflicting utility
resolution, custom spacing classes, and variant separation.
* **Documentation**
* Updated usage guidance to reflect the standardized Tailwind
class-merging approach.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Closes
[FE-4096](https://linear.app/supabase/issue/FE-4096/launch-week-summary-lists-ol-inside-ul-link-where-li-belongs-6-copies)
## 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?
Accessibility bug fix.
## What is the current behavior?
The launch week summary card renders at the bottom of launch week blog
posts. Its two lists are invalid HTML in six copies of the component.
- Each entry is an `<ol>` nested directly inside a `<ul>`. Only `<li>`
is a valid child of `<ul>`.
- The `<Link>` sits inside the `<ol>` rather than inside an `<li>`, so
there are no list items at all.
Screen readers announce a list of empty items wrapping nested lists
instead of a flat list of links.
## What is the new behavior?
- Swap every `<ol>` for an `<li>` in the six summary components: LW X,
11, 12, 13, 14, and 15.
- Class names and keys carry over unchanged. No visual change.
## Additional context
The blog posts stay published. This is a markup fix only.
## Manual testing
1. Open [the Launch Week 15 top 10
post](https://zone-www-dot-com-git-www-fix-lw-summary-lists-supabase.vercel.app/blog/launch-week-15-top-10)
on the deploy preview.
2. Scroll to the Launch Week 15 summary card below the article. It shows
a Main Stage list and a Build Stage list.
3. Inspect either list. Every direct child of the `<ul>` is an `<li>`,
and no `<ol>` appears inside.
4. Repeat on [the Launch Week 12 Wasm FDW
post](https://zone-www-dot-com-git-www-fix-lw-summary-lists-supabase.vercel.app/blog/postgres-foreign-data-wrappers-with-wasm)
for the Launch Week 12 card.
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
## What kind of change does this PR introduce?
Accessibility / lint hardening (Safari keyboard focus).
## What is the current behavior?
`supabase/require-explicit-tabindex` is `'warn'`. Studio’s ratchet was
at 0 but the rule was still ratcheted; www / docs / design-system still
had raw `<button>` / `role="button"` call sites without an explicit
`tabIndex`.
[DEPR-627](https://linear.app/supabase/issue/DEPR-627) · follow-up to
#47984 / #48040
## What is the new behavior?
- Shared config: `'supabase/require-explicit-tabindex': 'error'`
- Swept www / docs / design-system (+ Studio test fixtures the ratchet
skipped)
- Removed the rule from the Studio ratchet + baselines
## To test
Prefer **Safari**. This PR only adds explicit `tabIndex` to raw
`<button>` / `role="button"` call sites — not links, and not controls
that already go through `Button` from `ui`.
### Marketing (`www`) ([staging
link](https://zone-www-dot-com-git-danny-depr-627-promote-req-7ae43c-supabase.vercel.app/))
- [x] Homepage frameworks / dashboard feature tabs — Tab through each
tab button
- [x] Product pages (e.g. `/auth`, `/database`) — section tab switchers
- [x] Narrow viewport — open the hamburger; Tab through menu buttons
- [x] `/partners/catalog` — filter / view controls
- [x] Blog view toggle (list ↔ grid)
### Docs ([staging
link](https://docs-git-danny-depr-627-promote-require-explici-25e46d-supabase.vercel.app/))
- [x] **Desktop (≥ lg):** top-right **⋯ menu** (hamburger icon) — opens
a dropdown that includes Theme. Not a separate theme button.
- [x] **Mobile (< lg):** top-right **hamburger** opens the sheet; close
(X) is the raw button we tagged. Theme inside the sheet uses
`ThemeToggle` / `DropdownMenuTrigger` from `ui` (already supposed to set
`tabIndex`).
- [x] **Code blocks** — copy / language controls
- [x] **Is this helpful?** — X / check are `Button` from `ui` (should
already Tab). After voting **while signed in**, the follow-up “What went
well?” / “How can we improve?” text button is the raw one we tagged.
- [x] **AI Tools → Copy as Markdown** (right rail on a guide) — this is
the only GuidesSidebar control this PR changed. “On this page” TOC items
are **links**, not covered by this lint.
- [x] **Reference docs** (e.g. JS client reference) — section headers
that expand/collapse in the left nav (`Collapsible.Trigger`)
- [x] **Troubleshooting index** — type in the search field, then Tab to
the **clear (X)** control
### Dashboard (`studio`)
No production UI changes in this PR (tests + lint config only). Quick
Safari smoke that prior tabindex work still holds:
- [x] Project sidebar — Tab through primary nav links
- [x] Settings → General — Tab through inputs / buttons
- [x] Storage → Files — Tab a bucket row / file actions
## 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>
## Problem
We now export components under a subpath in ui-patterns to avoid barrel
files as they slow down every tools (from IDE to linters, etc.) and may
also affect bundles our users have to download.
## Solution
- Remove the UI patterns index file
- Fix invalid impors
## Problem
The `alternative` variant for `<Button>` has been deprecated but is
still used in a few places.
## Solution
- Migrate usages to the recommended `primary` variant
- Delete the `alternative` variant
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Updated several buttons across forms, logs, recent queries, and
release headers to use the primary visual style.
* Button styling is now more consistent throughout the app, with a
cleaner default emphasis for key actions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.
## Solution
- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code
## How to test
As this is just prop renaming, if it builds it's ok
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
- Most changes are related to either types or `useRef` usages (it now
requires an initial value).
- also updated `vaul` to its latest version and haven't noticed any
change ([design-system
demo](https://design-system-git-react-19-supabase.vercel.app/design-system/docs/components/drawer))
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Upgraded workspace to React 19.
* **Bug Fixes**
* Improved null-safety and ref handling across editors, UI components,
shortcuts, and markdown/image rendering to reduce runtime errors.
* Safer event/timeout/interval cleanup and more robust command/context
handling.
* **Chores**
* Bumped vaul dependency versions.
* **Documentation**
* Type and TypeScript accuracy improvements for clearer developer
feedback.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45886)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Render blog posts on server so they are available in initial HTML
response.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* New collapsible sections for blog content
* Server-side MDX compilation for blog posts
* Improved TOC extraction producing both structured JSON and markdown
* **Refactor**
* Blog rendering converted to a server-rendered flow with unified MDX
components
* Tag handling normalized for related-post matching
* **Bug Fixes**
* Consistent image/self-closing tag normalization and corrected TOC
indentation
* Errors are now surfaced instead of being swallowed
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
This PR moves several components which rely on `next` out of the `ui`
package to the `ui-patterns` package.
`ui-patterns` package is intented to be imported with specific imports
so it's ok if there are components reliant on `next` in there.
The `SonnerToaster` component has removed its dependency by requiring a
prop for `theme`.
This PR fixes some prettier issues:
- Bump and unify all prettier versions to 3.7.3 across teh whole repo
- Bump the SQL prettier plugin
- When running `test:prettier`, check `mdx` files also
- Run the new prettier format on all files
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* show cms blog posts in www
* remove contentlayer from www
* outputFileTracingExcludes
* update remotePatterns
* fetch cms posts server-side with revalidation
* add cms env vars to turbo.json
* add www env vars to turbo.json
* include cms posts in www sitemap
* add migration to remove image from cms post
* update cms meta image mapping in www
* feat: lw15 d4b - Algolia Connector for Supabase
* og and thumb
* clean up rss
---------
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
* d4 init
* blog post
* og and thumb
* revert typo
* blog updates
* update authors
* update images
* update text
* update position
---------
Co-authored-by: Inian <inian1234@gmail.com>
* chore: blog post
* add author, og and thumb
* chore: update screenshots
* fix: crop and authors
* rss
* updates
---------
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Co-authored-by: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com>
* d3 init
* Branching blog post (#37189)
* add branching blog post
* update copy and add images
* video id, blog og and thumb
* update video ID
* fix typo
---------
Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
* d2 init
* LW15 Analytics Buckets Blog Post (#37131)
* lw-15 analytics bucket blog post
* polish
* og and thumb
---------
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
* add nav to mobile main stage slider
* d2 data
* fix nit
* add video id
* add author
* rss
---------
Co-authored-by: Oliver Rice <github@oliverrice.com>
* lw15 d1 layout
* add some motion
* main stage card interaction
* fix overflow
* remove badge bg image
* fetch meetups from Luma
* fetch correct meetups
* add main stage card links and interactions
* remove placeholders
* cleanup
* fix hover effect
* add playsInline to banner video
* add blog post
* add links to feature docs
* sync announcement banners
* add blog images and lw15 summary
* add blog screenshot
* Update LW15 heading and meetups section content
Simplified and reworded the heading in LW15Heading, removing redundant text and improving clarity. Refactored LW15Meetups to use a concise title and description, replacing the previous grid layout with a more straightforward presentation.
* Revert "Update LW15 heading and meetups section content"
This reverts commit 21b45d2787.
* add video id
* Chore/lw page cleanup (#37104)
* Update LW15 heading and meetups section content
Simplified and reworded the heading in LW15Heading, removing redundant text and improving clarity. Refactored LW15Meetups to use a concise title and description, replacing the previous grid layout with a more straightforward presentation.
* Update LW15 day card styles and date labels
Adjusted font sizes and colors for day cards in LW15MainStage for improved readability. Simplified date labels in lw15_data.tsx by removing ordinal suffixes.
* Update LW15 Hackathon section content and styling
Revised the layout and text for the LW15 Hackathon component to improve clarity and visual hierarchy. Updated headings, event start information, and description formatting for better readability and emphasis.
* Add lighter foreground color to meetup separator
Updated the separator between meetup cities to use the 'text-foreground-lighter' class for improved visual distinction.
* Update apps/www/components/LaunchWeek/15/LW15Hackathon.tsx
* Update apps/www/components/LaunchWeek/15/LW15Hackathon.tsx
---------
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
* add build blog post
* add build blost post images
---------
Co-authored-by: Stojan Dimitrovski <sdimitrovski@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
When translation tools go over prices, they wrongfully convert USD into other currencies without changing the price. $25 becomes Rp25 (Rupiah).
By using `translate='no'` we avoid the translation of pricing info. There are some tooltips left that are not covered yet, but this should be the majority already.
Kept the docs Pricing component as simple as possible, just wrapping in a span to avoid translation, not modifying any formatting.
* lw14 d5 init
* feat: mcp server blog post
* add d5 data
* add video to blog post
* og and thumb images
* geo aware routing blog
* updates
* updates
* build layout
* updates
---------
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
Co-authored-by: Wen Bo Xie <wenbo.xie3@gmail.com>
Co-authored-by: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com>
* chore: lw14 d2 init
* chore: lw14 d2 update banners
* Update apps/www/components/Hero/Hero.tsx
* Update packages/ui-patterns/PromoToast/PromoToast.tsx
* add d2 images
* feat: add LW 14 day 2 blog post (#34607)
* feat: add LW 14 day 2 blog post
* remove video callout at bottom of blog post
* add launch-week category
* fix categories and imgs
* add blog post og and thumbnail
* updates
* updates
---------
Co-authored-by: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com>
Co-authored-by: Wen Bo Xie <wenbo.xie3@gmail.com>
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
* update og
---------
Co-authored-by: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com>
Co-authored-by: Lakshan Perera <lakshan@supabase.io>
Co-authored-by: Wen Bo Xie <wenbo.xie3@gmail.com>
Danny White
