## 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?
UI polish for the Connect sheet: clearer mode selection, wider sheet
layout, and step/content chrome across Direct, Server, MCP, and shadcn
flows.
## What is the current behavior?
- Connect modes use a weak selected state and an awkward grid layout.
- The sheet can jump width below the `lg` breakpoint when switching
modes.
- Direct connection chrome is noisy (reset in a footer, Title Case /
mono pooler labels, mismatched copy-button sizes).
- Several steps use admonitions or extra tips that repeat footer
guidance.
- Case-sensitive import of `InlineLink` breaks Linux/Vercel builds.
## What is the new behavior?
### Mode selector and sheet
- Stronger selected/hover treatment; comfortable single row that wraps
via `@container`.
- Empty odd slots use a sunk placeholder cell.
- Sheet uses `size="lg"` with `max-w-4xl` and `w-full min-w-0` so width
stays stable when switching modes.
### Steps chrome
- “Follow these steps” header with a copy-prompt action for coding
agents.
- Optional steps labelled `(optional)`.
- Shared `CodeBlock` for install snippets; MCP feature groups preselect
all except Storage.
- Server / shadcn tips folded into footers; IPv4 add-on admonition is
responsive with an inline Learn more link and a single Enable action.
### Direct connection
- Connection string and connection parameters stay one step (same
credentials, two formats).
- Reset database password lives in the string card title row beside
Shared/Dedicated pooler.
- Card titles use sans + sentence case (`Shared pooler`, `Connection
parameters`); `.env` stays mono.
- Icon-only copy buttons match CodeBlock square sizing; row actions sit
slightly closer to the right edge (`pr-2`).
- Shared pooler toggle copy clarified.
| Before | After |
| --- | --- |
| <img width="390" height="763" alt="API Keys Settings Chisel Toolshed
Supabase"
src="https://github.com/user-attachments/assets/adca3cc5-94f8-47e5-a4a2-2831790f430a"
/> | <img width="390" height="763" alt="API Keys Settings Chisel
Toolshed Supabase"
src="https://github.com/user-attachments/assets/f03afe58-e654-435e-a821-835f6243ca95"
/> |
| <img width="1718" height="1323" alt="API Keys Settings Chisel Toolshed
Supabase"
src="https://github.com/user-attachments/assets/79f08620-7e1e-4246-a70f-801606c0f499"
/> | <img width="1718" height="1323" alt="API Keys Settings Chisel
Toolshed Supabase"
src="https://github.com/user-attachments/assets/fb45e851-955e-46c2-90f1-afecb93d6ac4"
/> |
| <img width="1718" height="1323" alt="API Keys Settings Chisel Toolshed
Supabase"
src="https://github.com/user-attachments/assets/eda36d21-bba7-46ab-ad48-134acf93b471"
/> | <img width="1718" height="1323" alt="API Keys Settings Chisel
Toolshed Supabase"
src="https://github.com/user-attachments/assets/b7b728c6-fc92-46a7-8e3f-2f182c56ece7"
/> |
### Test plan
- [ ] Open **Connect** and confirm mode cells select/hover clearly;
narrow the sheet and confirm wrap + stable width.
- [ ] Direct: switch Direct / Transaction / Session; confirm pooler
title, reset in title row, parameters table, and percent-encode note.
- [ ] Toggle IPv4 shared pooler on Transaction; confirm string updates
and admonition/Learn more behaviour when on IPv4-only paths.
- [ ] Server: `.env` Copy all / row copy sizing; install command copy.
- [ ] MCP / shadcn / Framework: steps still resolve and copy prompt
still builds a useful agent prompt.
- [ ] Spot-check light/dark and a Linux/Vercel build (InlineLink import
casing).
## 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>
## What kind of change does this PR introduce?
Feature / UI refactor
## What is the current behaviour?
The CLI browser login route still uses the older API authorisation
layout and redirects missing or failed sign-in session states to generic
404/500 pages.
## What is the new behaviour?
Moves `/cli/login` onto the shared connect interstitial layout as the
next small stacked slice after the organisation invite work.
This keeps the real CLI login contract intact while updating the
surface:
- creates the CLI login session from `session_id`, `public_key`, and
optional `token_name`
- redirects to the generated `device_code`
- renders missing-parameter and session-creation failures in-card
instead of redirecting away
- keeps the 8-character verification code selectable and copyable as a
single string
- uses a full-width primary `Copy code` action
This also adds the small shared interstitial helpers needed by this
surface and adjusts `CopyButton` so the copied check icon inherits the
primary button colour instead of turning green.
This also removes the CLI version admonition:
> Browser login flow requires Supabase CLI version 1.219.0 and above.
I checked with our stats and the CLI team. The vast majority of users
are on a newer version.
| Before | After |
| --- | --- |
| <img width="1024" height="759" alt="Authorize API access
Supabase-D1E3CF26-BD59-4BB2-B457-B552EE47E3DA"
src="https://github.com/user-attachments/assets/c89b8b13-fa98-41b7-8093-e59d15b2aa9e"
/> | <img width="1024" height="759" alt="Authorize CLI
Supabase-C9977F21-88B8-441B-8A2C-09A9515935B0"
src="https://github.com/user-attachments/assets/ca13b65a-3875-425c-b73b-8f2101c1e406"
/> |
| <img width="1024" height="759"
alt="Supabase-F42FBEAF-F74D-4920-8A51-7C25004F66D5"
src="https://github.com/user-attachments/assets/51adb1e6-a2fb-41fb-b36f-0ae466fe60e2"
/> | <img width="1024" height="759" alt="Authorize CLI
Supabase-8159A1B1-2594-4183-AC35-FEF1EFD4EA37"
src="https://github.com/user-attachments/assets/6f143218-795d-41c9-a8e1-52e529a6b988"
/>
| <img width="1024" height="759"
alt="Supabase-2506E468-9F42-44B9-A5B7-BC4D3777F552"
src="https://github.com/user-attachments/assets/a304fca5-cf26-4ae7-abe9-77cdbc21fba5"
/> | <img width="1024" height="759" alt="Authorize CLI
Supabase-A0EE1239-A345-427C-9CF7-997037A8FC0E"
src="https://github.com/user-attachments/assets/33118777-35f3-49d6-bc1e-30e7124b3677"
/> |
| <img width="1024" height="759" alt="Authorize API access
Supabase-A7B84CA6-D230-4C3E-9227-DE21CE35375C"
src="https://github.com/user-attachments/assets/78eb6296-035a-4201-b254-b97eda44443c"
/> | <img width="1024" height="759" alt="Authorize CLI
Supabase-F55E26B2-609B-449C-9C64-08AA90AE3D1E"
src="https://github.com/user-attachments/assets/ff7b3b4e-729c-4681-844d-2d5d94bfc084"
/> |
## Testing instructions
Use the Vercel preview URL for this PR once it is available. The
examples below use `<preview-origin>` as a placeholder, for example
`https://studio-git-dnywh-feat-cli-login-interstitial-supabase.vercel.app`.
You need to be signed in to Studio to see these states because
`/cli/login` is still behind `withAuth`.
Ready state:
- Open `<preview-origin>/cli/login?device_code=ABCD1234`
- Check the page title is `Authorize CLI | Supabase`
- Check the card title is `Authorize Supabase CLI`
- Check the code fills the width, uses the normal sans font, and can be
selected
- Drag-select the code and copy it; the clipboard should contain
`ABCD1234`, not one character per line
- Click `Copy code`; the button should show the usual copied success
state without a green check icon on the primary button
Missing parameters state:
- Open `<preview-origin>/cli/login`
- Check the card says `Missing sign-in parameters` and names the missing
`session_id` and `public_key` parameters
- Open `<preview-origin>/cli/login?session_id=session-test`
- Check it still stays in-card and names the missing `public_key`
parameter instead of redirecting to `/404`
Creation error state:
- Open
`<preview-origin>/cli/login?session_id=not-real&public_key=not-real&token_name=local-dev`
- Check it stays in-card with `Unable to create CLI sign-in` instead of
redirecting to `/500`
- The exact error detail can vary by environment; the important bit is
that the failure is shown inside the interstitial card
Loading state:
- This is transient because there are no production mocks in this slice
- To inspect it manually, throttle the browser network before opening a
session-creation URL such as
`<preview-origin>/cli/login?session_id=not-real&public_key=not-real`
Real CLI flow:
- Run the browser login flow from Supabase CLI as usual
- When the CLI opens a Studio URL, keep the path and query string but
replace the origin with the PR preview origin
- The page should create the login session and then route to
`/cli/login?device_code=<8 character code>`
- Enter that 8-character code back in the CLI prompt
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Redesigned CLI login flow with clearer state-driven screens and
improved verification UI.
* Added a small paired-logo component for centered logo pairs with a
connector icon.
* **Improvements**
* Copy button behavior and styling refined for consistent visual
feedback across variants.
* **Tests**
* New unit tests covering copy-button behavior and multiple CLI login UI
flows.
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45814)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
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>
* feat: show upgrade warning if user objects exist in internal schemas
* Clean up warnings into a separate file
* Update API types + fix TS issues
* Update apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Consolidate copy to clipboard
* Fix
* Fix some extra clipboard events.
* Fix the tests. Fix a small issue with the copy button.
* Fix
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* first pass
* init
* updated types
* fix up key reveal
* Update QuickKeyCopy.tsx
* remove quick key copy
* api key pill now only allows reveal and copy if you have perm
* Update LegacyAPIKeys.tsx
* fix up layouts
* fix copy
* Fix action menu dropdown position, few small nudges
* Remove unused files.
* Remove the hardcoded and rename the feature flag for basic API keys.
* add support for name and description, some smaller improvements
* Fix the trims for the description.
---------
Co-authored-by: Terry Sutton <saltcod@gmail.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Stojan Dimitrovski <sdimitrovski@gmail.com>
* feat: add basic api keys ui
* init JWT secrets. rough
* Update JWTSecretKeysTable.tsx
* added some info hover cards.
• found this this is probably the wrong direction
• will create a new page for next iteration.
* init new version
* add illustrations
* Update JWTSecretKeysTablev2.tsx
* chore: delete API key now works
* some style changes
* added better tables
* Update JWTSecretKeysTablev2.tsx
* add public JWT dialog
* moar
* adding sub layout in
* starts adding in a ButtonGroup
* about to make into separate components
* added quick copy to project loading screen
* build state
* basic loading
* confirm dialog and loading states
* switched for better loading experience
* moved styles of Input to InputVariants
* issue with ref type
* loading,error and rest states
* new loading states
* alt l;ayout
* add group
* updated error states for permissions
* copy button behaviour for secret keys
* delete dialog
* Update QuickKeyCopy.tsx
* fix type errors
* Update JWTSecretKeysTablev2.tsx
* update menu to hide pages
* Update SettingsMenu.utils.tsx
* Update resource-query.ts
* remove old file
* moved JWT secrets to use valtio
* Update api-keys-query.ts
* fix typecheck
* rename files
* remove JWT stuff
* revert file
* remove more JWT stuff
* Update package.json
* Update pnpm-lock.yaml
* Update ProjectLayout.tsx
* Update PublishableAPIKeys.tsx
* Update api-keys-query.ts
* refactor api-keys-query
* Update SettingsMenu.utils.tsx
* Some clean up
* more clean up and refactor
* Update APIKeyRow.tsx
* Update LayoutHeader.tsx
* resolve comments
* Update CreateSecretAPIKeyModal.tsx
* Update APIKeyRow.tsx
* Add perms check for delete API keys
* Remove console log
* Delete ConnectDialog.tsx
* use project ref
---------
Co-authored-by: Stojan Dimitrovski <sdimitrovski@gmail.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* add info box to let users know they can send an email to support
* make better
* move projects to tooltip
* truncate longer proj names
* fix things properly
* rm always open
* bit more padding
* add mailto link
* Add font-mono to project reference span
* more padding, fix bg hover
* Midway implementing user management v2 panel
* Do up overview panel less provider information
* Midway provider info
* Wrap up provider information
* Add banned until banner
* Slight adjustment to search input
* Fix
* Fix provider icons in data grid
* Fix
* Moar fixes
* Add loading line
* Address some feedback
* Reorder some elements in the user overview panel
* Fix icons going over cell headers
* Add lucide-react to docs (to make the autocomplete work).
* Migrate the docs app icons.
* Migrate the ui-patterns.
* Remove the old icons from ui package.
* Migrate the www app from react-feather icons.
* Migrate all of studio icons.
* Migrate the only component in design-system.
* Fix an old import in ui package. Revert an import in docs app.
* Fix some pages in www.
* Remove unneeded files used in generation of icons.
* Fix a prettier error.
* Fix more issues in www.
* Fix an issue in Log Date picker.
* Replace all string sizes with number sizes because the icons grew in some cases.
* Fix more imports in security page.
* Fix an extra import.
* Remove the size prop from all icons if they're in a button and they match the button size.
* Minor fixes for docs and www.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Add a new hook for copying URLs.
* Refactor the copyToClipboard function.
* Make the onCopyUrl function awaitable.
* Fix the test.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Init changes for sql fodlers
* Added upsert logic in sql-editor-v2 valtio, hooked up with templates and quickstarts
* Do up logic for creating new snippets by typing in /new or by clicking new query button
* Do up logic for updating and deleting snippets
* Do up logic for favourites and shared snippets
* Do up logic for favourites and shared snippets
* Fix
* Fix saving indicator, add empty states for favorites and shared snippets
* Implement sorting
* Some minor QOL improvements
* Minor fix on empty state for private snippets
* Add delete folder mutation
* Implement create and update folder
* Fix reinstate with AI renaming for new snippets under folder
* Support controlled multi select behaviour in private snippets
* Undo changes to tree-view-multi-select
* Support bulk deletes
* Support moving queries + rendering queries in folders
* Support deleting folders and creating a new folder when moving a query
* Fix bug where renaming query removes content
* Add initial loading state in sql editor nav + handle fallback if cannot retrieve content by id
* Fix some spelling
* Fix TS issue in sql folders mutation keys
* Fix toggling favorite
* Lint
* Revert fallback behaviour in ]id] for now
* Fix favorites and shared snippets not showing
* Fix moving currently opened snippet leads to loading
* Support bulk moving
* Improve multi select logic a little
* Nit lint
* Reinstate AI retitling for untitled snippets when running query
* Remove hardcode in useAFlag
* Support creating new snippet in a folder directly
* Fix sharing snippets that are within a folder
* Fix sharing snippets within a folder
* Fix favorite
* Add loading state when fetching folder contents
* Fix favoriting snippets in folders
* very wip
* add expandable rows
* fix table layout, collapsible row, spacing issues
* use new query with filters everywhere
* rm unused queries
* rm unused fn
* improve loading state
* fix text overflowing in role
* rm padding so that table doesn't always need scroll
* fix icon in search input
* add latency to table row heading to clarify what col youre sorting with
* rm unused imports
* run prettier
* align sql with row content
* add syntax highlighting and sort icons
* rm copy btn
* move tailwind dep to correct package, rm unused syntax highlighting, rm unused component
* Move all studio files from /studio to /apps/studio.
* Move studio specific prettier ignores.
* Fix the ui references from studio.
* Fix the css imports.
* Fix all package.json issues.
* Fix the prettier setup for the studio app.
* Add .turbo folder to prettierignore.
* Fix the github workflows.
Danny White
