Commit Graph
120 Commits
Author SHA1 Message Date
Saxon FletcherandDanny White cd77bebafd chore(ui): refresh shared button styles (#50197)
## 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>
2026-09-23 03:43:00 +00:00
Danny White ec53175b8a refactor(ui): rename text-brand to text-primary (#50564)
## 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 -->
2026-09-22 16:19:03 +10:00
Danny WhiteandJoshen Lim a31ca2bad0 fix(ui): make brand text readable across themes (#49871)
## What kind of change does this PR introduce?

Bug fix and design-system update. Resolves DEPR-316.

Follow-up rename (`text-brand` → `text-primary`) is in a dedicated PR
(https://github.com/supabase/supabase/pull/50564) stacked on this one.

## What is the current behavior?

`text-brand` resolves to the canonical bright brand green in places that
need readable text, which fails WCAG AA on light surfaces. A separate
`text-brand-display` token adds another green for large type.

## What is the new behavior?

- `text-brand` maps to accessible `--primary` (light mode darkened to
meet ~4.5:1 AA)
- `--hue` / `--primary-hue` aligned to 157.5
- `text-brand-display` removed; former display callsites use
`text-brand`
- Bright fills/borders stay on `brand-default`
- Design-system colour and typography docs updated

| Before | After |
| --- | --- |
| <img width="514" height="112" alt="CleanShot 2026-09-02 at 11 13
09@2x"
src="https://github.com/user-attachments/assets/4e0138a9-a32d-4e4c-a426-90736706e1e7"
/> | <img width="512" height="138" alt="CleanShot 2026-09-21 at 11 42
05@2x"
src="https://github.com/user-attachments/assets/164cc5b1-a0c5-4e93-95f1-80016641a114"
/> |
| <img width="864" height="266" alt="CleanShot 2026-09-02 at 11 13
53@2x"
src="https://github.com/user-attachments/assets/3c1ca53f-bf9e-431e-bc15-816b4a275b8e"
/> | <img width="882" height="248" alt="CleanShot 2026-09-21 at 11 41
37@2x"
src="https://github.com/user-attachments/assets/24828e7b-ed6b-44cb-b9dc-becc3398bdfc"
/> |
| <img width="782" height="692" alt="CleanShot 2026-09-02 at 11 16
30@2x"
src="https://github.com/user-attachments/assets/fc871977-77bc-47fb-9e0e-9284e0ecd5cc"
/> | <img width="730" height="690" alt="CleanShot 2026-09-21 at 11 42
52@2x"
src="https://github.com/user-attachments/assets/bf479515-d5f9-471e-b82d-f097c0f4b56c"
/> |
| <img width="480" height="306" alt="CleanShot 2026-09-02 at 11 18
53@2x"
src="https://github.com/user-attachments/assets/03f341f4-f02e-44f8-a2b2-8c31670d0427"
/> | <img width="470" height="300" alt="CleanShot 2026-09-21 at 11 43
19@2x"
src="https://github.com/user-attachments/assets/9df18217-d5e6-48b8-ba0b-579d2664b94b"
/> |
| <img width="960" height="300" alt="CleanShot 2026-09-02 at 11 32
04@2x"
src="https://github.com/user-attachments/assets/6b1d9373-7a71-4247-81ff-26441604b09d"
/> | <img width="980" height="306" alt="CleanShot 2026-09-21 at 11 44
13@2x"
src="https://github.com/user-attachments/assets/41ad4784-02ec-4b29-b860-32af9fa79aa8"
/> |
| <img width="924" height="214" alt="CleanShot 2026-09-02 at 11 34
44@2x"
src="https://github.com/user-attachments/assets/1de661fe-c7b6-499b-a94f-e4737436ec79"
/> | <img width="752" height="162" alt="CleanShot 2026-09-21 at 11 44
56@2x"
src="https://github.com/user-attachments/assets/1811890f-0660-4445-84e9-447720954fa1"
/> |

## To test

Test each callsite **in light mode** (dark mode is largely unchanged).

### WWW

-
[Homepage](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/):
“Scale to millions” uses readable brand text (display token is gone)
-
[Careers](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/careers):
small “Careers” eyebrow readable; green dividers stay bright
`brand-default`
-
[Contact](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/contact-us):
email / policy links use readable brand text
-
[Regions](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/regions):
“Ask about early access to BYOC” readable

### Docs

- [Docs
homepage](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs):
“DOCS” wordmark and resource links readable
- [Database
overview](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/guides/database/overview):
nav / footer brand links readable
- [JavaScript
reference](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/reference/javascript/introduction):
active sidebar treatment readable

### Design system

-
[Typography](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/typography):
documents `text-brand` only (no display)
- [Colour
usage](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/color-usage):
`text-brand` vs `bg-brand-default`
- [Design-system
homepage](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/):
brand text examples across themes

### Studio

- [Auth
providers](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/auth/providers):
enabled provider badge text readable; status dot stays bright
- [Database
policies](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/database/policies?new=true):
template hover text more legible
- [Database
connections](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/observability/connections):
“Live” status readable; animated dot stays bright green

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-09-22 10:07:28 +10:00
Danny White 512201dcd0 chore(ui): remove the Classic Dark theme (#50387)
## 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 -->
2026-09-21 10:53:14 +10:00
claude[bot]andClaude 86854671e9 feat(www): add Open Authorization Integration Addendum (#48804)
<!-- ccr-slack-attribution -->
_Requested by **Nicole Kramer** · [Slack
thread](https://supabase.slack.com/archives/C0161K73J1J/p1786027145751449)_

## 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?

Feature — a new legal page on the marketing site (`apps/www`).

## What is the current behavior?

**Before:** the Program Addenda page at
`/legal/partner-resources/program-addenda` lists exactly one addendum,
the Integration Partner Addendum. There is no published Open
Authorization (OAuth) addendum anywhere on the site.

## What is the new behavior?

**After:** the Program Addenda page also lists the **Open Authorization
Integration Addendum**, linking to a new page at
`/legal/partner-resources/program-addenda/oauth-partner-addendum`.
Formatting, breadcrumbs, version selector, and listing badge all match
the existing Integration Partner Addendum.

**How:** three files.

-
`apps/www/data/legal/partner-resources/oauth-partner-addendum/20260806-v1.mdx`
— the addendum text, formatted to match
`integration-partner-addendum/20260615-v1.1.mdx` (escaped section-number
periods, `####` run-in headings for the lettered subsections, italic
`_Label_` run-in labels for the enumerated data-protection clauses,
explicit `[url](url)` links).
-
`apps/www/pages/legal/partner-resources/program-addenda/oauth-partner-addendum.tsx`
— the page, mirroring `integration-partner-addendum.tsx` with a
single-version `versions` array.
- `apps/www/lib/addenda.ts` — adds a small `TITLE_OVERRIDES` map. The
listing derives titles by capitalizing slug words, which turns
`oauth-partner-addendum` into "Oauth Partner Addendum"; the override
makes the listing link read the same as the page's `h1`.

No other wiring was needed: the addenda listing is generated from the
directory, so there is no hub entry, redirect, rewrite, sitemap entry,
or `noindex` rule to add.

## Additional context

Two things for the requester to confirm:

- **The effective date is an assumption.** The addendum document itself
contains no date. The listing and version label derive the effective
date from the `YYYYMMDD` filename prefix, so this file is dated **August
6, 2026**, taken from the source document's own filename (`2026.08.06 -
Supabase-OAuthAddendum-ONLINE.docx`). To change it, rename the file — no
code change required.
- **The legal text is a verbatim transcription.** Source wording,
capitalization, and punctuation are preserved exactly as drafted,
including anything that reads like a typo. Only markup was added; the
plain text was diffed against the transcription and is
character-identical. Please review the wording itself rather than
assuming it was copy-edited.

One wording choice that was not in the source document: the page
subheader, "An addendum to the Master Partner Program Agreement
governing OAuth integrations." It mirrors the one-line subheader style
of the existing addendum page and is easy to reword.

## Also fixed here: a literal `(c)` rendered as `©` in legal headings

While formatting the new addendum we hit a rendering bug that turned out
to be **already live on supabase.com**, not new to this branch.

The heading font, **Manrope**, ships a default-on standard `liga`
feature that maps the glyph sequence `parenleft c parenright` to the
copyright glyph. So a literal `(c)` anywhere inside an `h2`–`h6` on the
marketing site paints as `©`. Body copy is unaffected because it uses
Inter, whose subset has no such ligature — which is why this only ever
shows up in headings.

This branch adds a `legal-prose` utility (`font-variant-ligatures:
no-common-ligatures`) in `apps/www/styles/globals.css` and applies it to
two pages:

- the new **Open Authorization Integration Addendum** page (heading
`#### (c) Security.`), and
- the **Master Partner Program Agreement** page, where the `#### (b)
Such indemnity …` heading in section 17.1 contains `… ; or (c) replace
the Covered Materials …` about 600 characters into the line. That page
was **already published**, and rendered "or © replace the Covered
Materials" in production.

The MPPA change is one word — `className="prose"` → `className="prose
legal-prose"`. **No legal text was modified**: no HTML entities, no
zero-width characters, no rewording, no re-hyphenation. The DOM still
holds `U+0028 U+0063 U+0029`; only the font's shaping is suppressed.
Verified in Chromium against the real heading text and the same two font
subsets `next/font` serves: the `(c)` run measures **15.36px** before
the fix (a single `©` glyph) and **22.05px** after (three literal
glyphs), against a 23.30px control for the `(b)` in the same heading.

All 17 `.mdx` files under `apps/www/data/legal/` were swept for `(c)`
and the other Manrope `liga` input sequences (`--`, `->`, `<-`, `(>)`,
`<3`) on heading lines. The only two hits are the two pages fixed above;
nothing else needs the utility today. (Headings do contain
`ff`/`fi`/`fl`/`tt` — those ligatures are ordinary typography and are
intentionally left alone.)

**For future legal pages:** because the cause is the heading font's
default ligature rather than anything about these documents, any new
legal page whose source has `(c)` in a heading will need `legal-prose`
on its prose container too.

**One side effect worth flagging:** `no-common-ligatures` is blunt, so
on those two pages it also suppresses the ordinary `fi`, `ff` and `tt`
ligatures — a sweep of the legal `.mdx` files counts 107 such
occurrences in headings (`fi` 83, `ff` 21, `tt` 3, `fl` 0), so the note
above about leaving them alone holds for the rest of the site rather
than for these two pages. That is a deliberate trade-off: correctness of
the legal text beats typographic polish on two addendum pages. A
narrower alternative exists — `font-feature-settings: "liga" 0` scoped
to just the offending ligature, or overriding only the
`parenleft_c_parenright` substitution — but it is more fragile and more
subset-specific, so push back here if you would rather have that
instead.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

https://claude.ai/code/session_01VtcJJGqw5jL1ESwhs8DGCu

---------

Co-authored-by: Claude <noreply@anthropic.com>
2026-08-07 15:54:37 +02:00
Saxon FletcherandClaude Opus 4.8 fb02182e86 Color system (#47288)
## 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>
2026-07-03 15:00:43 +10:00
Francesco Sansalvadore aa764e4013 chore(www): refine www styling (#47499)
### 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 -->
2026-07-03 03:14:43 +10:00
Francesco Sansalvadore acbb19a69a feat: www & docs fonts (#47227)
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
2026-07-01 12:59:00 +02:00
Gildas Garcia 70c3bafe63 chore: CSS cleanup (#47443)
## Problem

- We have unused CSS from previous design system (`.sbui-*` classes)
- We use Tailwind `@apply` when we could set the tailwind classes on the
components directly

## Solution

- Delete all `.sbui-*` classes as we don't use them anymore
- Move classes directly on components when that make sense

## Notes

I did not migrate all `sbgrid` classes as they are applied in multiple
components

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Updated grid editors, placeholders, headers, and dropdowns for cleaner
spacing, truncation, and alignment.
* Improved layout consistency across text, number, time, JSON, and
foreign-key cells.
  * Adjusted search and impersonation inputs for better fit and padding.

* **Chores**
* Simplified and removed outdated styling overrides across the Studio
and web app.
* Reduced unused UI package surface by removing an unused input icon
container export.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-30 18:06:38 +02:00
Francesco Sansalvadore ba133afc4c www: blog (#47236)
Update blog layout.

PR breakdown of #43455 
Related: #47226 #47227 #47228
2026-06-30 10:28:17 +02:00
Francesco Sansalvadore cd62b0b9d4 www: product pages (#47271)
Update product pages in marketing website.

PR breakdown of #43455 
Related: #47226 #47227 #47228 #47236
2026-06-26 15:47:52 +02:00
Francesco Sansalvadore 90ef7ea874 www: standardize container width (#47226)
Define and clean up standard container width definition for marketing
website.

PR breakdown of #43455 
Related: #47227 #47228 #47236
2026-06-24 10:26:38 +00:00
Ivan Vasilov 0abe792889 chore: Migrate the main Tailwind JS config to CSS (#45686)
This PR migrates the JS config for Tailwind into a CSS config. As such,
all variables have been defined as CSS variables and they're using the
specialized Tailwind syntax for generating utility classes.

Beside the migration, these changes were also added:
- Added `tailwind.config.css` to few packages to make the Tailwind
Intellisense work.
- Migrated away from Radix style color classes to our defined classes,
the values will remain the same.
- Most of the CSS is generated by scripts, they'll be removed in next
PRs.
* Removed redundant `border-light` classes from several components since
it was undefined.
* Removed redundant `text-strong` classes from several components since
it was undefined.

How to test:
- Open all apps, compare the UI (mainly colors) to builds from #45417
and try to find a difference.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Harmonized color variable usages and updated UI color references
(affects palettes, charts, gradients, hero illustrations, and
scrollbars).
  * Tweaked border, tab, and selection visuals across components.

* **New Features**
* Added a suite of theme animations and refined typography presets used
by site prose and docs.

* **Refactor**
* Overhauled Tailwind/theme configuration and color token generation for
more consistent theming.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-13 13:14:58 +02:00
Ivan VasilovandClaude Sonnet 4.6 afd690ada5 chore: Migrate all apps to use Tailwind CSS configs (#45530)
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>
2026-05-07 17:18:15 +02:00
Ivan Vasilov 97a8df0a23 feat: Handle the classic-dark theme in www and docs apps (#45214)
This PR fixes a bug where a user might choose `classic-dark` as a theme
in `studio` but then `docs` and `marketing` apps will look weird.

To test:
- Change the localStorage value of `theme` to `classic-dark`
- Open `www` and `docs` apps, they should look ok

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a new "classic-dark" theme option for enhanced visual
customization.

* **Improvements**
* Unified and simplified theme handling across apps for more consistent
behavior.
* Improved system-theme detection and smoother transitions when
switching themes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-05 16:18:46 +02:00
Ivan VasilovandJordi Enric 56de26fe22 chore: Migrate the monorepo to use Tailwind v4 (#45318)
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>
2026-04-30 10:53:24 +00:00
Ivan Vasilov 308cd791a2 chore: Prep work for migrating to Tailwind v4 (#45285)
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.
2026-04-28 11:33:53 +02:00
Ivan Vasilov 9fbe5152d9 chore: Remove dead code and unused files from the packages/ui (#45169)
# Changes
## Removed unused themes

- Deleted `concept-two.css` (unused) and `dark-combined.css` which was
identical to `dark.css`
- Removed the alias `deep-dark` to `dark` theme since it was unused

## Removed Figma token transform scripts

- Deleted the entire `internals/transform/` directory (~700 lines of JS)
— these scripts transformed Figma tokens into Tailwind variables but are
no longer needed
- Deleted `internals/tokens/cleanse-css-for-tailwind.js` and
`extract-design-tokens.js`
- Removed related dependencies from `package.json`
## Removed other unused files

- Deleted `shadcn.css` (unused)
- Deleted `tailwind-theming.md` (outdated doc),
https://supabase.com/design-system/docs/color-usage is a better resource
## Refactoring

- Extracted the `motion-safe-transition` Tailwind plugin into its own
file (`packages/config/tailwind-plugins/motion-safe-transition.js`)
- Renamed the tailwind class generation script for clarity
- Added stub `tailwind.config.js` files in packages that were missing
them, so VSCode IntelliSense works in those workspaces
- Updated `packages/ui/README.md` to reflect current usage patterns
(imports, styling conventions) instead of outdated Figma tokens workflow

# Testing
- Check all apps whether they have the correct themes with the correct
colors

[Linear
task](https://linear.app/supabase/issue/FE-3059/clean-up-unused-ui-build-artifacts-themes-and-figma-token-scripts)
2026-04-24 10:30:35 +02:00
Ivan VasilovandJoshen Lim 9fa96977be chore: Minor prettier fixes (#43849)
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>
2026-03-17 11:17:42 +01:00
Francesco Sansalvadore 4f2b09b61f neon page (#35759)
* switch from neon page init

* postgres platform section

* dx section visuals

* neon page graphics

* last touches

* disable crawl to page

* fixes

* polish

* copy change
2025-05-27 15:05:05 +02:00
741993cc93 feat: ai builders landing page (#34616)
* chore: init ai builders paage

* add content

* ai builders wip

* feat: ai builders features section

* feat: videos section

* feat: fix types

* chore: add video urls

* updated Quotes

* ai builders form

* submit

* fix type error

* add solutions to nav dropdown

* fix pagename

* add ai builders logos

* docs link

* update ai builders page

* update quotes

* reduce padding

* update author role

* update quote

* React

* add env in turbo.json

* fix og image

* connect your app

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Co-authored-by: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com>
2025-04-04 14:46:40 +00:00
Francesco Sansalvadore 6f622f3603 tiger d5 follow (#30975)
* hackathon link

* fix wide blog imgs mobile

* mobile sticky nav

* escape # in toc
2024-12-06 16:12:55 +00:00
93df22db8d feat: lw13 tiger d5 (#30963)
* d5

* feat: database.build v2 blog post

* light mode images

* change hero to database.build v2

* add back Redesign section to blog post

* fix(blog): special characters

* feat(blog): add youtube video

* feat(blog): update post title

* wide blog images

* sets up the wrap up post

* fix attribute

* feat(blog): mention wasm pg_dump

* edits

* images

* Adds OG and thumb

* grammar

* blog assets

* mobile fix

* add video to launch week page

* prettify

* is

* hackathon link

---------

Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
Co-authored-by: Copple <10214025+kiwicopple@users.noreply.github.com>
Co-authored-by: Julien Goux <hi@jgoux.dev>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
2024-12-06 15:05:18 +00:00
Francesco SansalvadoreandJonathan Summers-Muir f05a7c60c1 tiger init (#30620)
* lw13 interactive realtime grid

* 3d metal ticket

* add dynamic text to ticket

* reset ticket tilt on mouseout

* improve canvas sizing and ticket positioning and originate tilt from ticket

* test lw layout

* test lw layout

* fix imports

* .

* fix .length bug

* usual ticketing flow

* reduce ticket padding

* reduce fade delay

* add name from db

* text size

* use multiplayer.dev cursor logic

* lodash samplesize

* good state

* working users cursors

* single partyMode off

* clean up

* refactor ticket layout and positioning logic

* regular and platinum tickets

* regular theme based og

* add mono font to ticket, finish textures and ogs

* ticket cleanup

* restore countdown with ticket

* update og

* update og

* remote year add hour

* drag ticket to flip

* remove

* add presence

* remove cursor on own touch device

* test hidden mobile cursor

* fix mobile dragging

* scale ticket on interaction

* code logic

* secret ticket logic

* cleanup

* persist won game

* enable game on mobile

* fix mobile game

* add announcement banners

* update text layout

* hide game from share page and if game won

* fix mobile flip 🎉

* fix meetups time formatting

* faster flip

* tiger init styling (#30649)

* update

* mobile fix

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>

* use multilanguage font

* lineheight

* only published meetups

* comment on timezone column

* better mobile input positioning

* fix sudden lighting change

* increase cell size for better performance

* increase cell size for better performance

* last touches

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
2024-11-25 13:45:21 -04:00
Francesco Sansalvadore e74ea22dff feat: enterprise page (#29555)
* init enterprise page

* security section

* cta form

* support and quote sections

* heading

* add company email validation in request demo form

* add performance section

* remove og atm

* enterprise og

* enterprise og

* enterprise og

* remove full stops on headings

* fix nav

* max w

* update values
2024-09-30 14:31:33 +00:00
Francesco Sansalvadore e76aa11508 homepage cleanup (#29295)
* new homepage logos marquee

* add products claim

* logos spacing

* dashboard table editor demo

* dashboard table editor demo

* dashboard recordings

* rls policies

* update hp frameworks

* add dataAPIs to homepage bento

* tweet section update

* padding

* hp products update

* new customer stories hp section

* height

* finish homepage details

* update logos

* fix database visual

* improve functions visual ux

* animate data-apis visual

* realtime visual update

* reduce-motion and update chatbase logo

* lighter heading paragraph

* improve video tabs components

* add priority to offsetted images

* video plays inline

* fix mobile tweets spacing

* smoll

* load video slightly before the component enters the viewport

* fix product pointer-events

* theme based and light weight dashboard video

* testimonials margin

* remove yellow tint from light mode recordings

* fix vitest window-matchMedia error

* fix vitest window-matchMedia error

* fix url type

* remove tweet
2024-09-17 11:07:38 +02:00
Francesco Sansalvadore 5c8a885bf5 fix www sitemap generator (#28938)
* fix www sitemap generator

* remove 404 from sitemap

* include nested routes
2024-08-28 15:06:40 +02:00
Jonathan Summers-MuirandFrancesco Sansalvadore 6d760a1a99 Feat/deep dark (#27026)
* chore: move to deeper dark

* tidy up boxes on www

* update deep-dark colors

* fix homepage product cards

* toned down pricing page a little

* update

* lots of color changes

* Update grid.scss

* Update EntityListItem.tsx

* Update EntityListItem.tsx

* fix partners page icon

* fix partners page colors

* update theme

* Update global.css

* combined dark theme so classic-dark does not break on other sites

* Update package-lock.json

* updated color tokens pipeline to support combined dark theme

* smol updates

* Update FeaturedThumb.tsx

* Update BlogFilters.tsx

* Update BlogListItem.tsx

* Update BlogListItem.tsx

* Update UserSettingsDropdown.tsx

* Update NavigationBar.tsx

---------

Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
2024-07-30 21:34:28 +08:00
Francesco SansalvadoreandJonathan Summers-Muir 9cf0708aa5 Product pages improvements (#21322)
* remove default border from ThemeImage

* fix empty links in product pages

* fix database product page errors

* smol product page fixes

* Update apps/www/components/AuthWidget/AuthWidgetSection.tsx

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>

* Update apps/www/styles/index.css

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>

* Update packages/ui-patterns/ThemeImage/index.tsx

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>

* fix prettier

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
2024-02-20 11:58:00 +00:00
754ee55cd0 chore: update themes and add dark-new theme set (#20865)
* chore: update themes and add dark-new theme set

* chore: update

* add deep dark css theme

* fix issue with wrong class

* chore: add `bg-studio` as a custom remapped color for studio background

* updated surface classes to use a surface-75.

* update backgrounds and borders

* Update CardButton.tsx

* Update NavigationIconButton.tsx

* chore: add theme selection

* Update package.json

* Update index.ts

* Update package.json

* update alias

* Update ThemeSettings.tsx

* chore: split up theme support

* remove old code

* Update index.ts

* add back in

* Update ThemeSettingsOld.tsx

* fix issue with system theme leaking through

* reset themes

* update imports

* packagelock updated

* Update ThemeSettingsWithPreferredTheme.tsx

* Update system.svg

* Update NavigationIconButton.tsx

* Update NavigationBar.tsx

* update

* Update light.css

* updated some colors

* light mode updated

* hacked

* prettier

---------

Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
2024-02-15 16:56:18 +01:00
Kevin Grüneberg f7e60bf324 chore: upgrade prettier/eslint + autofix (#20785) 2024-01-30 10:54:02 +08:00
Francesco SansalvadoreandJonathan Summers-Muir be9590c890 Multiple themes management (#18871)
* set up multiple themes in studio

* set up multiple themes in studio

* set up multiple themes in docs and www

* update all resolvedTheme to also include deep-dark

* update all resolvedTheme checks to also include deep-dark

* update tailwind.config.js tokens

* update tailwind.config.js tokens

* update leftover scale12 token

* update if resolvedTheme _doesn't_ include 'dark'

* update more styling tokens

* add dynamic themes to CmdK

* fix nav and footer for multi theme

* add data-theme selector output to transformTokens.js

* update code-hike.css to target data-theme css

* update tailwindcss to ^3.3.5

* ThemeImage with light and dark src for www and docs

* add brand-button styling token

* update old dark theme boolean

* update old dark theme boolean

* make homepage product visuals themeable

* update product page themed images

* update badge green with brand

* fix roles list appearance

* fix auth widget in auth page

* update more dark logic

* update more dark logic

* add button default bg and border

* update pricing page theme styling

* clean up Themeimage

* remove forceDark in homepage

* update dark:border-dark occurrences

* update dark:border-dark occurrences

* fix dark mode base colors

* remove foreground-strong

* fix notification badge bg

* remove some dark: selectors

* update dark: selectors

* update code-hike deep dark bg color

* fix comment typo

* update border-button-hover token

* fix customer story logo

* remove some more dark: selectors

* restore forceDark in www homepage

* fix auth react icon

* fix homepage product visuals

* remove theme

* add brand-link token

* fix checkbox bg

* npm install

* more visible EntityListItem active bg

* fix --background-alternative-default css vars

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
2023-11-16 16:41:53 +00:00
b91532f6c7 Migrate to styling tokens (#18314)
* migrate some www components to tokens

* consolidate InteractiveShimmerCard to Panel component

* update tokens in blog

* update tokens in careers page

* update tokens in customers section

* update tokens in open-source section

* update tokens in Realtime page

* update tokens in Storage and Vector

* update tokens in SplitCodeBlockCarousel

* update tokens in PGCharts

* remove unused css files

* update tokens in Card

* update tokens in Pricing page

* clean up priving page imports

* remove hardcoded theme vars

* migrate first half of defaultTheme.ts to tokens

* migrate second half of defaultTheme.ts to tokens

* improve inputs

* add foreground to text-light and text-lighter

* add foreground to text-light and text-lighter

* migrate docs components with styling tokens

* migrate docs components with styling tokens

* fix broken Repos component

* fix broken classes in blog

* update tokens on Button and other components

* update tokens on IconPanel

* update studio main layout base styling tokens

* update tokens across studio, docs and www

* update tokens across studio, docs and www

* update ui/Panel to styling tokens

* update ExampleProject and TableEditorMenu tokens

* www vector page tokens

* update studio UI tokens

* update other studio UI tokens

* update more studio UI tokens

* change tokens here, change tokens there

* finish updating colors with tokens variables

* add gui sandbox for theme experimentation

* use common package for www, docs and studio and fix Command K tokens

* provide light mode default tokens options

* fix conflict leftover

* update loading line

* fix className typo

* fix prettier

* update themeSandbox preset default values

* fix text-background0

* prettier

* update warningBanner with warning color

* switch all border-border with border-default

* improve border-secondary and foreground-muted in light mode

* force ring color on toggle

* fix button bg color and border-muted light token

* fix input bg color

* fix dark button hover

* fix homepage product card

* fix code-hike table header colors

* button dark border

* remove tabIndex leftover from homepage main ctas

---------

Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
2023-11-07 03:40:53 +00:00
Francesco Sansalvadore c2c1bda297 Update some styling tokens www (#18234)
* update www styling with new tokens
2023-10-17 16:31:50 +02:00
Francesco Sansalvadore f106580ce1 animate storage card 2023-08-25 17:43:14 +03:00
Francesco Sansalvadore cafe478e3d Sync zoomable modal bg color 2023-08-11 20:15:39 +02:00
Francesco Sansalvadore 982858ebc2 Add zoomable image to vercel blog post and restore borders 2023-08-11 20:09:31 +02:00
Francesco Sansalvadore 6241b56d4b add zoomable image in blog posts 2023-08-11 16:49:55 +02:00
Francesco Sansalvadore 8200741ba6 lw8: expandable video in accordion header 2023-08-07 16:25:19 +02:00
Francesco Sansalvadore 0620bd3cfe lw8: initial info 2023-08-03 12:19:20 +02:00
Greg Richardson 7204ac26fe Merge branch 'master' into chore/update-brand-colors 2023-08-01 16:10:52 -05:00
Jonathan Summers-Muir 568e76dcdf update var(--*) values 2023-07-30 17:50:33 +08:00
Jonathan Summers-Muir 40b16b0a89 chore: update old brand-1000 to new brand-600 2023-07-30 17:02:40 +08:00
Jonathan Summers-Muir dec542a85a chore: update old brand-500 to new brand-300 2023-07-30 17:01:49 +08:00
Jonathan Summers-Muir e92931390c chore: update old brand-800 to new brand-500 2023-07-30 17:00:56 +08:00
Jonathan Summers-Muir ab46d23d58 chore: update brand-900 to brand 2023-07-30 16:58:54 +08:00
Francesco Sansalvadore 59c2f02f98 Add Supabase logo and animation to Partners page 2023-07-28 19:05:47 +02:00
Francesco Sansalvadore 7f237910ad LW8: Pre Launch ticketing system 2023-07-25 13:07:05 +02:00
Jonathan Summers-Muir 0039abdd8d add style imports 2023-07-13 14:31:41 +08:00
Isaiah Hamilton 6d79cb8623 fix: selection color on selected code 2023-06-08 12:32:08 -04:00