## What kind of change does this PR introduce?
UI polish / design system: refreshed button styles, related token
tweaks, and a shared floating-button plate.
Resolves DEPR-652.
## What is the current behavior?
Default, primary, and secondary buttons use older fills, borders, and
hover treatments. Primary still leans on brand scale utilities. Default
fills don’t always read as raised chrome across surfaces, and floating
copy / expand / scroll controls can let busy content show through
translucent fills. Call sites hand-roll `rounded-* bg-background`
wrappers for that.
## What is the new behavior?
Refreshes primary, default, and secondary buttons with medium-weight
labels, subtle shadows and inset edges, and smoother transitions.
Light-mode default buttons use a raised fill with an accent hover state,
primary text is brighter, and inline keyboard shortcuts inherit the
button’s colour.
Adds `FloatingPlate`: an opaque `bg-popover` shell for floating default
buttons (and small clusters). Migrates Studio, Docs-related patterns,
www, and `ui-patterns` floaters onto it so busy content no longer shows
through translucent fills. Positioning, z-index, and hover/focus reveal
stay on the plate’s `className`. Use `rounded="full"` for pills.
Also:
- Moves primary onto semantic `--primary` / `--primary-hover` (with a
light-theme override) instead of brand utility fills
- Tokenises button shadows as `--button-shadow-drop` /
`--button-shadow-raised` / `--button-shadow-default` on the Button base
- Aligns hover direction: darken on light mode, lighten on dark mode for
both default and primary
- Default fill stays opaque `bg-card` in light (occlusion) and
translucent `bg-muted` in dark (adapts to the local surface)
- Documents fills and `FloatingPlate` on the design-system Button page
(with a live example)
- Scales shared radius tokens in Studio and www; medium+ Button sizes
use a proportionally softer radius
- Fixes www nav CTA centering (`lg:inline-flex` instead of `lg:block`)
- Query detail Expand/Collapse wires `aria-expanded` / `aria-controls`
| Before | After |
| --- | --- |
| <img width="1074" height="438" alt="CleanShot 2026-09-18 at 15 52
51@2x"
src="https://github.com/user-attachments/assets/ef43da21-b053-4b7e-9ac4-ab8b428228ab"
/> | <img width="1090" height="464" alt="CleanShot 2026-09-18 at 15 50
59@2x"
src="https://github.com/user-attachments/assets/2ddc55fc-4c8d-499c-a280-f3db3d99023c"
/> |
| <img width="1082" height="446" alt="CleanShot 2026-09-18 at 15 52
35@2x"
src="https://github.com/user-attachments/assets/3dd5452d-325a-4e4a-a79d-26c6c6950a31"
/> | <img width="1078" height="446" alt="CleanShot 2026-09-18 at 15 51
13@2x"
src="https://github.com/user-attachments/assets/93666385-3e6e-42e0-9891-9cd6bb935b67"
/> |
## To test
### Design system
- [Button
page](https://design-system-git-chore-button-styles-supabase.vercel.app/design-system/docs/components/button):
default / primary in light and dark; hover should darken on light,
lighten on dark
- Same page: [Floating over
content](https://design-system-git-chore-button-styles-supabase.vercel.app/design-system/docs/components/button#floating-over-content)
/ [Floating
plate](https://design-system-git-chore-button-styles-supabase.vercel.app/design-system/docs/components/button#floating-plate)
example; Copy over SQL should stay opaque
- Spot-check hover on a code preview Copy control
### Docs
[Docs deploy
preview](https://docs-git-chore-button-styles-supabase.vercel.app/docs):
- [Docs
homepage](https://docs-git-chore-button-styles-supabase.vercel.app/docs):
top-right **Sign up** / **Dashboard** primary; menu icon beside it
(default icon button)
- Shrink below `lg` and open the hamburger drawer: bottom **Sign in**
(default) + **Start your project** (primary) medium block buttons
- Tab once for **Skip to content** (FloatingPlate)
- [MCP
guide](https://docs-git-chore-button-styles-supabase.vercel.app/docs/guides/ai-tools/mcp):
project picker
- [Apple
login](https://docs-git-chore-button-styles-supabase.vercel.app/docs/guides/auth/social-login/auth-apple):
**Generate Secret Key** button in the Apple Secret Generator
- Optional opacity check: any guide code block Copy control (e.g. at the
bottom of [Import data into
Supabase](https://docs-git-chore-button-styles-supabase.vercel.app/docs/guides/database/import-data))
### Studio
[Studio deploy
preview](https://studio-staging-git-chore-button-styles-supabase.vercel.app/):
- **Observability → Query Performance**: open a query detail →
Expand/Collapse pill + SQL Copy chip (dark: no bleed-through)
- **Observability → Query Insights**: select a query → Clear query pill
- **Table Editor → any table → Definition** → floating **Open in SQL
Editor**
- **Connect → Framework → Add files**: Copy on the code tabs
(FloatingPlate; light hover follow-up is DEPR-694)
- Tab once for **Skip to content**
### WWW
- [www deploy
preview](https://zone-www-dot-com-git-chore-button-styles-supabase.vercel.app/):
nav Sign in / Start your project vertical centering; hero medium CTAs
radius
---------
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
## 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 -->
## What kind of change does this PR introduce?
Bug fix / design-system alignment for the legacy `Button` from `ui`.
## What is the current behavior?
Omitting `variant` on the legacy `Button` falls back to brand-green
`primary`. That makes accidental greens easy, and it is hard to spot the
real main action on busy pages.
## What is the new behavior?
- Legacy `Button` now defaults to neutral `default`
- Intentional primary CTAs (create, save, submit, marketing CTAs, and
matching `ButtonTooltip` usages) now set `variant="primary"` so their
appearance is unchanged
- Neutral actions that previously relied on the old fallback (cancel,
close, back, dashboard nav, and similar) become grey/white
- Design-system docs updated; regression tests cover the new default
`Button_Shadcn_` is unchanged. It already uses its own CVA default.
This is PR 1 of 2 in a stack. PR 2 drops now-redundant
`variant="default"` props.
## To test
Studio (http://localhost:8082):
- `/sign-in`: Sign in stays green
- Open a project → Database → Tables: New table stays green
- Auth → Users → Invite: Invite user stays green; Cancel / dismiss
controls stay neutral
- Project Settings → General: edit a field so Cancel and Save appear.
Cancel is neutral, Save is green
Design system (http://localhost:3003):
- Components → Button: default demo is neutral; primary demo is green;
featured preview is the default variant
Marketing (optional):
- www header: Start your project stays green; logged-in Dashboard is
neutral
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Style**
- Buttons now default to a neutral style, while primary actions across
Studio, documentation, marketing pages, forms, dialogs, and error states
use prominent primary styling.
- Updated button examples and previews clarify the distinction between
default and primary variants.
- Event registration now includes a directional arrow icon.
- **Tests**
- Added coverage confirming default button styling and explicit primary
styling behave as expected.
- Updated related test fixtures to use primary styling where
appropriate.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### Logo positioning bug on Safari
#### Before
<img width="1538" height="1404" alt="CleanShot 2026-07-01 at 07 11
55@2x_b0d735b7df6470afb861f4e82cfeed554743cec621475197e07ff39a98c5c506"
src="https://github.com/user-attachments/assets/dc8483bd-5a2a-4d89-9b90-d0ab3529b4b5"
/>
#### After
<img width="1177" height="526" alt="Screenshot 2026-07-01 at 15 25 59"
src="https://github.com/user-attachments/assets/e5ab66eb-56eb-4f1b-8a66-783aafad069d"
/>
### Uniform h1 styling
#### Before
Font-weight too heavy
<img width="721" height="504" alt="Screenshot 2026-07-01 at 15 55 53"
src="https://github.com/user-attachments/assets/4dc4e157-f746-4626-9ec7-5e893d7155ba"
/>
#### After
<img width="693" height="410" alt="Screenshot 2026-07-01 at 15 56 04"
src="https://github.com/user-attachments/assets/c012d6e5-0889-4466-b2b2-56d1c9516e27"
/>
### AI Builders platform card
### Before
<img width="675" height="573" alt="Screenshot 2026-07-01 at 16 18 31"
src="https://github.com/user-attachments/assets/a34e2fde-115b-45e8-8d44-9fc32c22c0a1"
/>
### After
<img width="640" height="576" alt="Screenshot 2026-07-01 at 16 18 23"
src="https://github.com/user-attachments/assets/45ebf1c7-6508-40de-a755-dda17824979a"
/>
### Logo theme-awareness on 404 page
#### Before
<img width="1053" height="670" alt="Screenshot 2026-07-02 at 11 22 45"
src="https://github.com/user-attachments/assets/d1f45cc8-00ad-48ad-a21a-3b92bf6097f0"
/>
#### After
<img width="1053" height="666" alt="Screenshot 2026-07-02 at 11 22 28"
src="https://github.com/user-attachments/assets/8b6435aa-da87-46f3-9d5c-750f8222edb1"
/>
---
Plus other minor padding/spacing issues:
- remove customer stories in homepage
- use correct container width and align "Use Supabase with [framework]"
section
- restore default `--font-sm` sizing as it resulted too small for www
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes / UI Improvements**
* Refined spacing, layout, and responsive styling across multiple
homepage sections.
* Improved featured logo positioning and adjusted community/hero copy
sizing.
* Updated site typography for better readability and wrapping.
* Refreshed the 404 experience with a smoother reveal animation and
consistent layout.
* Updated deep dark-mode behavior to apply only during launch weeks.
* **Performance**
* Lazy-loaded multiple homepage sections to improve initial load and
perceived speed.
* **SEO / New Features**
* Added a dedicated 404 page that disables indexing.
<!-- 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>
## 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?
Created a new solution page for Hosted Postgres.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added Hosted Postgres solution with a dedicated landing page (hero,
features, pricing comparison, security, results, CTAs)
* Introduced a reusable pricing comparison table component
* Enhanced feature grids to support optional headers and richer icon
options
* **Updates**
* Updated company stats (databases managed → 44M, daily launches → 200K,
registered developers → 9M)
* Added Hosted Postgres link to Solutions navigation
* **Refactor**
* Consolidated and exported component prop interfaces for cleaner prop
contracts
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Terry Sutton <saltcod@gmail.com>
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.
## Problem
While trying to update `react` to version `19`, I noticed type related
errors that can be fixed in version `18`, mostly usage of `JSX.Element`
instead of `ReactNode`.
## Solution
- Use `ReactNode` instead of `JSX.Element`
- Fix some invalid usage of `rechart`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **Refactor**
* Standardized React component type annotations across the codebase for
improved type consistency and flexibility.
* Updated component prop types to accept a broader range of renderable
content.
* **Bug Fixes**
* Adjusted chart layout positioning to improve visual alignment.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
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>
## 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?
I added four new solution pages for marketing purposes:
- B2B SaaS
- Healthcare
- FinServ
- Agents
I followed the data model and components of all existing solution pages.
I also altered the mega menu to include a new category.
---------
Co-authored-by: Alan Daniel <stylesshjs@gmail.com>
## What kind of change does this PR introduce?
Frontmatter name change.
## What is the current behavior?
We repeatedly mistake `thumb` for `image` and visa versa, meaning the
wrong images are used for Open Graph and in-site thumbnails on blog
posts. Events and case studies use the same naming convention too.
## What is the new behavior?
These two bits of frontmatter are renamed for clarity:
- Blog posts: `imgThumb` + `imgSocial`
That mapping for blog posts:
- `thumb` is now `imgThumb`
- `image` is now `imgSocial`
These related bits remain as-is:
- Events
- Case studies
The
[www/README.md](https://github.com/supabase/supabase/blob/dnywh/chore/blog-image-frontmatter/apps/www/README.md#best-practices)
file has been expanded to clarify all of the above. It now also provides
instructions on image optimisation.
## To test
A lot of files were touched here. Please help make sure:
- [ ] The CMS works as intended. This is the **biggest unknown**.
- [x] All blog posts render the correct image as their on-site thumbnail
and Open Graph image. You can test the latter by firing up a draft
iMessage. Online Open Graph services like Facebook cache images, so
aren’t reliable.
- [x] All events render their correct images
- [x] All case studies render their correct images
- [x] All customer stories render their correct images ([known
issue](https://supabase.slack.com/archives/C072FL5KKKP/p1768888063209359?thread_ts=1768885681.502169&cid=C072FL5KKKP),
predates this work)
* Added agencies page
* Updated agencies solution page with quotes
* Final approval on al quotes secured
* lint
* ts
---------
Co-authored-by: Alan Daniel <stylesshjs@gmail.com>
* Update stats accross components to use same object
* Fix hydration error
* Consolidate users growth chart component
* Fix animated stat position
* Add company-stats legend
* Set stats labels on shared company-stats
* Added new solutions pages and a new case study
* ci: Autofix updates from GitHub workflow
* Fixed solution page navigation
* Updated th e Soshi case study
* improve solutions navigation
* fix prettier
* rebase
* refine single quote
* add firebase hero visuals
* fix z layer for sticky nav
* animate results graph
* animated counter
* prettier
* fix quote on hackathon
* nits
* remove visuals from heros
* gs
* fix
* improve graph label
---------
Co-authored-by: Alan Daniel <stylesshjs@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
