## 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 -->
## what is the current behavior?
admonition icon <> text not optically aligned + rendered differently in
docs and the design system _ docs showed admonition text at 15px/28px
because the page's prose styles reached inside the component, while the
same callout was 13px in the design system _ lists
## what is the new behavior?
- the title offset is now conditional. a title and body copy have
different line heights, so they need different nudges to sit level with
the icon.
- fixes list markers and the ordered-list chip alignment inside
callouts.
- removes `.admonition-content` css that nothing referenced
- fixes 5 admonition titles that were not capitalized.
| state | preview |
| -------|------|
| before | <img width="902" height="279" alt="image"
src="https://github.com/user-attachments/assets/2fffb183-81e2-4eff-8f0d-8a07649390e8"
/> |
| after | <img width="902" height="279" alt="image"
src="https://github.com/user-attachments/assets/22abe3ed-fd6d-49ac-aa37-4292bca5850a"
/> |
## follow ups
- better composition: title, description and actions are still props _ a
compound api (`Admonition.Title`, `Admonition.Actions`) would remove the
`childProps` escape hatch
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Documentation**
* Improved capitalization of note and warning titles in the Metabase and
Prisma guides for consistency.
* Updated the contributing guide’s table of contents to exclude feedback
headings.
* Improved heading structure for the documentation feedback section.
* **UI Improvements**
* Refined admonition and alert typography, spacing, list formatting, and
ordered-list alignment.
* Improved content spacing when titles, descriptions, or icons are
present.
* Updated action links and buttons for more consistent sizing.
* Adjusted alert content styling for a clearer presentation.
<!-- 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
https://github.com/user-attachments/assets/0b9e4bd1-e2b6-4a58-b47e-803e2b34a32e
## 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?
Bug fix.
## What is the current behavior?
Every page in `apps/docs` crashes at runtime with `Error: supabaseUrl is
required.`
Regression from #46757, which flipped `NEXT_PUBLIC_IS_PLATFORM` to
`"true"` in `apps/docs/.env.development` and, in the same diff,
duplicated a
`NEXT_PUBLIC_MARKETPLACE_API_URL`/`NEXT_PUBLIC_MARKETPLACE_PUBLISHABLE_KEY`
block where `NEXT_PUBLIC_SUPABASE_URL`/`NEXT_PUBLIC_SUPABASE_ANON_KEY`
should have been. With `IS_PLATFORM` now `true`, `Feedback.tsx`
(rendered on every docs page) unconditionally calls `createClient()`
with an undefined URL/key, throwing synchronously on every page load.
Closes DOCS-1208 / FE-3980.
## What is the new behavior?
- `apps/docs/.env.development`: renamed the mislabeled duplicate block
back to `NEXT_PUBLIC_SUPABASE_URL`/`NEXT_PUBLIC_SUPABASE_ANON_KEY`.
- `apps/docs/components/Feedback/Feedback.tsx`: widened the guard to
`IS_PLATFORM && supabaseUrl && supabaseAnonKey`, mirroring the existing
pattern in `app/api/ai/docs/route.ts`, so a future env misconfiguration
degrades gracefully (feedback votes silently skipped) instead of
crashing every page.
Verified locally by running `pnpm dev:docs` with no GitHub credentials
set:
- No more `"supabaseUrl is required."` anywhere; the Feedback widget
renders and fires its vote request instead of throwing.
- A normal guide page renders fine.
- `/guides/database/database-advisors` still shows its existing graceful
fallback admonition.
- `/guides/graphql` (federated content, absent on a clean checkout)
returns a clean 404 rather than crashing — confirming the related goal
of running docs dev locally without federated content already works (via
#48205 + existing `notFound()` handling), no extra changes needed there.
## Additional context
A related but separate gap was found in
`apps/docs/app/guides/database/extensions/wrappers/[[...slug]]/page.tsx`.
A new Linear issue is created:
https://linear.app/supabase/issue/DOCS-1209/wrappers-guide-page-crashes-on-unhandled-github-fetch-failure-without
## Manual testing
1. Checkout branch locally and run `pnpm run dev:docs` with no GitHub
credentials set. Confirm it starts without errors.
2. Open any guide page on docs locally and confirm no `supabaseUrl is
required` error, and the Feedback widget renders and responds to clicks.
3. Open `/docs/guides/database/database-advisors`. Confirm it renders
and does not crash.
4. Open `/docs/guides/graphql`. Confirm a clean 404, not a server error.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved feedback functionality by safely handling missing
configuration.
* Feedback votes and comments are skipped when the required service
configuration is unavailable, preventing errors.
* **Chores**
* Updated documentation-site configuration to use the appropriate
content service settings.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
## Details of change
Re-lands DATAENG-1468 (docs page feedback to Postgres) with an
**insert-only** design that avoids the cross-project auth issue that
caused the prior revert.
- New insert-only `feedback_comments` table: anon `insert` policy only
(no select/update/delete). Columns: `page`, `vote`, `title`, `comment`,
`user_id`, `metadata`.
- The docs widget writes the free-text comment to `feedback_comments`
via the **anon key**. The votes `feedback` table is untouched (one row
per vote).
- No user token is sent to the content project anymore (that was the
cause of the previous failure): the feedback client uses the anon key
only.
- The commenter's account user id (gotrue UUID) is read client-side from
the session and stored as a plain `user_id` column for attribution
(comments are logged-in-only). Org/project association is derived
downstream in BigQuery via that id; docs pages aren't project-scoped, so
there's no project_ref/org to capture here.
- Removed the previous update-by-id approach, the per-user RLS policies,
and the obsolete unit test.
## Why the previous version was reverted
It authenticated feedback writes with the supabase.com account session
token, but the requests target the docs content project
(`xguihxuzqibwxjnimxev`), which cannot verify that token. Logged-in
users got `PGRST301 / JWSInvalidSignature`. This version removes the
user token entirely, so writes succeed for everyone.
## Verification
Insert-only RLS means a row can be written but not read/updated/deleted
by `anon`. Comments retrievable with `where comment is not null` is not
needed (separate table); just query `feedback_comments`.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* The feedback form now captures a vote rating along with an optional
title and detailed comments, saving richer context for review.
* **Refactor**
* Feedback submission has been streamlined to write directly to the
database for both vote and comment submissions.
* **Maintenance**
* Updated the feedback data typings to support the new title, comment,
user, page, and vote fields via the new feedback comments storage.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Reverts supabase/supabase#46941
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **New Features**
* Feedback is now automatically routed to the appropriate documentation
team based on the section being viewed.
* **Improvements**
* Streamlined feedback submission process—votes and comments are now
collected more efficiently in a single submission.
* Enhanced feedback data handling and organization for better team
collaboration.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What
- Route docs page feedback **comments** to Postgres instead of `POST
/platform/feedback/docs` (which created duplicate Linear issues); the
👍/👎 vote is unchanged
- Store the comment on the **existing `feedback` row**: add `user_id` /
`title` / `comment`; submitting a comment updates the vote row the user
just created
- Capture the real `user_id` (`default auth.uid()`) so feedback is tied
to the user
- Owner-scoped RLS — `select`/`update` for authenticated users where
`user_id = auth.uid()`; anonymous votes stay insert-only
- Linear issues still get created, now via the data pipeline instead of
directly from the UI
## Linear
[DATAENG-1468](https://linear.app/supabase/issue/DATAENG-1468)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Feedback follow-ups now support saving a detailed title and comment,
tied to the signed-in user.
* **Bug Fixes**
* Follow-up submissions are now persisted in Supabase, ensuring the vote
and later details stay consistent for logged-in users.
* **Tests**
* Added coverage for updating a feedback entry’s title and comment.
* **Chores**
* Removed the previous feedback submission endpoint/mutation flow in
favor of a Supabase update-based approach.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
## 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>
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
We used to have a `_Shadcn_` suffix for all the shadcn form components
because we also had `formik` form components.
This is not needed anymore.
## Solution
- Remove the suffix
- Update all usages
## Problem
The Docs feedback modal still uses the old `Form` component with
`formik`
## Solution
Migrate it to `react-hook-form`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Enhanced feedback form with schema-driven validation requiring title
and comment before submission.
* Submission buttons disable while submitting; cancel now also resets
the form state.
* **Chores**
* Added form handling and validation libraries to support the improved
feedback experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
The close button on the top right of the feedback modal was not properly
closing on button press because the `onCancel` wasn't being passed
through. The close button now works.
* Refactor Drawer component and add date-fns dependency
Refactored the Drawer component for improved slot-based structure, updated styles, and added 'use client' directive. Added 'date-fns' as a dependency in design-system, updated tsconfig paths for icons, and marked ToggleGroup as a client component.
* nit: add env for svg path
* fix: instructions
* accent color docs and basic tidy
* copy value feature
* improve color contrast
* increase contrast on text-warning in light mode
* update changelog
* replace outdated text-warning utility classes
* remove redundant warning-600
* minor design-system docs updates
* docs updates
* remove unused brand-button class
* update docs
* fix: restore brand default
* update docs brand text color
* low hanging branded text fruit
* Nit refactor and clean up
* re-add Kemal’s README instructions for hot reload
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
We've noticed some support-like requests being submitted through the feedback
form, so adding a note that that feedback form is not for technical
support.
strictNullChecks was off for docs, which lets errors slip through and
leads to incorrect required/optional typing on Zod-inferred types. This
PR enables strictNullChecks and fixes all the existing violations.
Scripts currently use CJS, which is causing a bit of a mess when trying
to use shared utilities from the app. Converting everything to ESM so
there are fewer conflicts when adding new scripts going forward.
* chore: remove auth-helpers (deprecated)
* type supabase client in feedback
* small adjustments to error and loading state handling for docs search
---------
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
With the new docs IA and some recent team restructuring, the docs
section-to-Notion team mapping needs to be updated.
Do not merge before the new IA is merged.
* feat(docs): main troubleshooting page
* feat(docs): global troubleshooting page layout
* feat(docs): global troubleshooting page filter logic
* enhance(docs): troubleshooting page ui & filters
Improve UX and accessibility of global troubleshooting search page.
- Implement TroubleshootingFilterStateProvider for managing filter state
- Add TroubleshootingFilterEmptyState component
- Improve TroubleshootingFilter UI with applied filters display
- Update TroubleshootingPreview component with better layout and accessibility
- Add TroubleshootingEntryAssociatedErrors component for displaying related errors
- Refactor Troubleshooting utils and schemas
- Update troubleshooting content template
* feat(docs): individual troubleshooting pages
Add individual pages for detailed information on troubleshooting
entries. Small fixes to UI for troubleshooting displays.
- Wrap GlobalTroubleshootingPage with SidebarSkeleton
- Add TroubleshootingErrorListDetailed component for detailed error display
- Implement TroubleshootingBackLink component for navigation
- Update TroubleshootingPreview to use Next.js Link and include parent page
- Refactor Footer component to accept className prop
- Add hideFooter option to SidebarSkeleton
- Minor updates to TopNavBar and other utility functions
* fix: minor styling issues
* tweak(troubleshooting docs): use breadcrumbs
* tweak(troubleshooting docs): use sidebar for filter
* enhance(troubleshooting docs): navigation, keywords
Better navigation for individual troubleshooting entries, using a
version of the sidebar + keywords handling via search params for good
linking behavior
Details:
- Add TroubleshootingSidebar to TroubleshootingPage
- Implement query state management for keywords using nuqs
- Improve accessibility and styling of troubleshooting components
- Update empty state handling and related keywords display
- Upgrade nuqs package to version 1.19.1
* fix(docs): wrap useSearchParams in Suspense
* seo(docs): add canonical link to troubleshooting
* enhance(docs,troubleshooting): auto-reveal errors
On troubleshooting search pages, if the searched term matches a hidden
error, auto-reveal it when searching. When the search term is cleared,
hide programmatically-opened errors while preserving user-opened ones.
* enhance(docs,troubleshooting): search bar
Add search bar to individual troubleshooting pages
* fix(docs): breadcrumb links
Fix breadcrumb linking so it uses next/link instead of reloading entire
app on navigation.
* fix(docs): typo
* enh(docs): new troubleshooting design
* enh(docs): use new multi-select
* enh(docs): troubleshooting responsive styles
* Update apps/docs/content/troubleshooting/monitor-supavisor-postgres-connections.mdx
Add a docs feedback widget to allow upvoting and downvoting pages.
Votes (completely anonymized, barely more than a counter) go to a database in the main supabase-com project. If the user has accepted telemetry, the votes also go to Logflare with a bit more info. Post-vote, logged-in users can leave a comment, which goes to the `platform/feedback/send` endpoint. There is a warning in the feedback modal that the feedback is not anonymous.
Danny White
