## 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 -->
## What kind of change does this PR introduce?
Accessibility cleanup (DEPR-628).
## What is the current behavior?
Leftover call sites still use ad-hoc focus recipes
(`ring-foreground-muted`, `outline-brand`, Dialog/Sheet `focus:` rings,
etc.) instead of the shared utilities from #41575.
## What is the new behavior?
Converts those leftovers across `packages/ui`, Studio, www, docs, and
design-system to `focus-ring`, preferring `focus-visible`. Keeps
documented exceptions (`group-focus-visible`, InputGroup `:has()`).
## To test
Tab through controls (keyboard only). Expect a consistent offset ring on
`:focus-visible`, not a green/brand/custom stack, and no ring animation.
### www (marketing)
Preview:
https://zone-www-dot-com-git-danny-depr-628-focus-ring-fbccf9-supabase.vercel.app
- Global nav on `/`: Product, Developers, Solutions dropdowns; logo;
hamburger + mobile menu
- `/features`: view toggles and feature cards
- `/company`: card links
- `/changelog`: timeline / entry links
- `/partners/catalog`: grid/list toggle and partner cards
- `/pricing`: compute section expand control
- Product / Modules / Solutions sticky navs on product pages (e.g.
`/database`, `/storage`)
- `/state-of-startups`: TwoOptionToggle if present
### docs
Preview:
https://docs-git-danny-depr-628-focus-ring-long-tail-supabase.vercel.app
- Any guide page: top nav dropdowns and items
- Narrow viewport: hamburger, then mobile menu links + close
- Guide with PromptPanel / tabs: tab to prompt actions and tab list
### studio (dashboard)
Preview:
https://studio-staging-git-danny-depr-628-focus-ring-long-tail-supabase.vercel.app
- Project home: Connect section tiles; drag-handle focus on sortable
sections
- Integrations marketplace (`/project/<ref>/integrations`): featured
cards, list/grid toggle, list rows
- Auth (`/project/<ref>/auth/oauth-apps`,
`/project/<ref>/auth/providers`): open create/edit sheet, tab to close
(X)
- Database policies (`/project/<ref>/database/policies`): open policy
editor sheet, tab to close
- Storage policies (`/project/<ref>/storage/files/policies`): bucket
section links; policy modal close
- Query performance (`/project/<ref>/observability/query-performance`):
info icon buttons on metrics
- Replication pipeline detail (if available): slot lag / status info
icons
- Support (`/support/new`): attachment add/remove controls
- Table editor: spreadsheet import preview checkboxes; row text/JSON
editor TwoOptionToggle
- Any Dialog/Sheet/toast close (X): ring on keyboard focus only, not
mouse click
### design-system
Preview:
https://design-system-git-danny-depr-628-focus-ring-long-tail-supabase.vercel.app
- Colour palette swatches (keyboard focus)
- Form patterns sidepanel example: avatar / focusable control in the
example
## Additional context
- Linear: [DEPR-628](https://linear.app/supabase/issue/DEPR-628)
- Follow-ups: form-group CSS (DEPR-629), Storage columns selection
(DEPR-630), ESLint rule (DEPR-632)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Accessibility & Usability**
* Standardized keyboard focus indicators across navigation, dialogs,
forms, buttons, toggles, links, and tooltips using a consolidated focus
style.
* Improved toggle controls to use proper button semantics (instead of
clickable text), including `aria-pressed`/disabled handling and better
keyboard navigation.
* **Visual Updates**
* Harmonized hover/focus ring visuals across the design system, Studio,
documentation, and marketing pages while preserving existing layout and
interaction behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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
## 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>
## Context
As per PR title
<img width="500" alt="image"
src="https://github.com/user-attachments/assets/4cf07471-a0c1-449d-9759-a0ccb3456e09"
/>
Also resolves FE-3565
Closes mobile menu when a link is clicked
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Mobile menu now closes reliably when selecting more navigation items
(Modules, various Developers/Solutions links and footer links).
* Enhanced link focus and interaction behavior in the mobile menu for
clearer keyboard/touch feedback.
* **New Features**
* Navigation links can now accept optional click handlers, enabling
custom onClick behavior.
* **Refactor**
* Internal reorganization of mobile menu styling and link composition to
simplify maintenance.
<!-- 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 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`.
## 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?
Redirect to the signup page for "Start your project" button
## What is the current behavior?
That button redirects to signin page
## What is the new behavior?
Redirects to signup page
## Additional context
Add any other context or screenshots.
* 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
* Consolidate different versions of postcss. Remove @mertasan/tailwindcss-variables from ui package.
* Bump vitest in pg-meta to remove a vulnerable version of vite.
* Bump dompurify.
* Bump all octokit deps to solve 2 vulns.
* Fix warnings about destructuring json imports.
* Remove a console.log in docs.
* Fix the changelog page to use an ESM import.
* Stabilize the generate-sitemap script output.
* Try another fix for the changelog.
* feat: add card click events in other pages
* feat: add location for hero, nav and banner button clicks
* add request demo form event
* add newline for long comment/descriptions
* init features page
* fix filtering
* seo boostg
* add features to sitemap
* update copywriting
* improve features descriptions
* more studio features
* moar featuress
* better back to features
* prev next feature nav
* clean
* improve page footer
* fixes
* stuff
* sync filters with query params on page load
* better mobile layout
* 16px mobile input fontsize
* add cover images or videos to features
* improve a11y
* update sitemap
* last changes
* update schema definitions
* 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>
* 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>
* update deps + image codemod (studio)
* update next links (studio)
* update deps
* update links (ui)
* remove next-transpile-modules
* move next-themes dependency
* chore: update ConfirmDialog
* chore: remove old ConfirmModal js file. migrated to TS
* dependency wrangling
* remove empty page
* update next links (www)
* First run bump react-data-grid-v7 beta 4
* fix package-lock.json
* more deps wrangling
* update recharts
* update sentry options
* fix some broken things in www
* studio fixes
* fix graphiql
* fix studio build
* fix menu hydration
* small build error
* update turbo
* fix www typescript errors
* docs image codemod
* links codemod docs
* fix docs typescript errors
* move useConsent to ui to prevent circular deps
* Fix links
* Fix homepage
* Fix links
* move studio/ to apps/
* Revert "move studio/ to apps/"
This reverts commit 1b0a985fcb.
* disable outputFileTracingRoot
* remove outputFileTracingRoot
* fix homepage product cards
* fix PrivacySettings links
* Fix links
* Fix the build for www.
* Minor fixes for JWTGenerator.
* Fix the docs and ui tests.
* Revert codehike back to 0.8.3
* remove ConfirmAlert()
* reenable babel because mobx hates me
* fix blog image and comparison page avatar
* Fix svg errors
* update image synthax
* Fix code hike
* Move the button in a div so that it doesn't inherit its parent height and make the button look weird.
* When components are defined in a component, they get recreated on each render. This makes them unstable in certain cases and causes infinite rerenders.
* Replace the next/head usage with next/script.
* Chore/upgrade next 13 fix table editor (#18431)
* fix table editor styling and fix row deletion logic
* Fix deleting selected rows from header, and fix checkboxes not clearing up
* Fix deleting all rows when filter applied, and fix deleting all rows
* Fix grid size styling issue
* Fix TS error
* Hydration errors
* studio org pages fixes
* fix more studio links
* audit logs fixes
* dropdown icon styling fixes
* fix some images in www
* upgrade to next 14
* try new sentry wrapper for api
* see if this is even invoked
* Revert "see if this is even invoked"
This reverts commit 86c3973ffa.
* Revert "try new sentry wrapper for api"
This reverts commit f67623ebad.
* Revert "upgrade to next 14"
This reverts commit a24dd6131e.
* chore: allow node version 19/20
* Try to fix the LogTable so that it renders with the newer "react-data-grid" version.
* Fix type errors in the log renderer code.
* Fix the replication screen.
* Add the CSS for the GraphiQL.
* Fix SQL editor results rendering
* Lint
* Fix SQL editor results height issue
* Fix auth RLS not invalidating RQ when toggling RLS
* Fix database tables new/edit column regressed
* Fix migrations page empty state if migrations schema not yet created
* Fix API side panel docs temp remove postgrest text for column description PK and FK
* Fix + improve timeout handling in SQL editor
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Co-authored-by: Terry Sutton <saltcod@gmail.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
Danny White
