## 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 -->
## 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 -->
## 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>
Towards [FE-3428](https://linear.app/supabase/issue/FE-3428).
## Summary
Cheap render-cost fixes so the Schema Visualizer stays responsive at
400+ tables. No data-layer or API changes — pure render-side work,
isolated to the Schema Visualizer.
- Enable `onlyRenderVisibleElements` on `<ReactFlow>` so xyflow skips
mounting nodes and edges outside the viewport.
- Memoize `TableNode` (custom comparator) and `DefaultEdge` so they
don't re-render on unrelated state changes (pan/zoom, theme toggle,
parent re-renders).
- Drop `resolvedTheme` from the layout effect deps — theme is purely
visual; toggling it no longer re-runs Dagre and replaces every
node/edge.
- `handleSelectionChange` now (a) skips `setEdges` entirely when no
edge's `animated` flipped, and (b) preserves the object reference for
untouched edges so memoized edges don't re-render.
- Precompute a `Map<tableName, …>` lookup in `getGraphDataFromTables` so
FK handle resolution is O(1) per relationship instead of scanning every
table+column.
A follow-up PR will add a `useInfiniteTablesQuery` and switch both the
Schema Visualizer and Database > Tables list onto it for progressive
loading and infinite scroll.
## Caveats
- `TableNode` reads `selectedEdge` from context, so selecting an edge
still re-renders all visible `TableNode`s via context propagation. The
memo guards against props-driven re-renders (pan/zoom/theme).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Optimized database schema graph rendering with improved component
caching and efficient relationship lookups.
* Enhanced visual element rendering to reduce unnecessary re-renders for
large schemas.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46235?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)
<!-- review_stack_entry_end -->
<!-- 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 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
When using LLMs, it's useful to describe your tables in markdown format.
## Solution
- Add an _Copy as SQL_ and _Copy as Markdown_ in the schema visualiser
table menu
<img width="320" height="235" alt="image"
src="https://github.com/user-attachments/assets/b465d6aa-a011-4308-86de-78725328630b"
/>
- Refactor the _Copy as SQL_ and _Download current view_ buttons in a
single button/dropdown combo and add _Copy as markdown_:
<img width="333" height="143" alt="image"
src="https://github.com/user-attachments/assets/a823988b-abff-4840-b5a5-53a5830065b4"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* "Copy as Markdown" for schemas and individual tables.
* "Copy as SQL" for individual tables.
* Per-column descriptions included in schema/table exports.
* **Style**
* Export actions consolidated into a compact, grouped dropdown with
adjacent copy action for streamlined header controls.
* **Tests**
* Unit tests for markdown export helpers.
* E2E tests updated to use the new export UI and adjusted dialog timing.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
## Problem
When you have many tables, it's hard to follow the relations between
them in the Schema Visualiser
## Solution
When selecting an edge (the line between tables), highlight it along
with the related tables and columns to make it easier.
Also, if there is enough space, display a popover showing the relation
details
## Screencasts
https://github.com/user-attachments/assets/11d35fa7-3674-4f13-b77f-8ebe25c66b04
## Problem
- The schema visualiser lacks editing capabilities which leads to a lot
of navigation (ediing tables, columns)
- ReactFlow prevents users from selecting table and column names (to
copy them). Diasbling drag and pan on those texts would make moving
items cumbersome
- Long table and column names are hidden and even hide other elements
## Solution
- Add menus for both tables and columns
- Truncate long names with ellipsis and add a tooltip
- Hide menus when exporting to png/svg
[Screen Recording 2026-03-12 at
10.10.08.webm](https://github.com/user-attachments/assets/b2780266-e874-41d1-ac82-7c2c4ba5abf2)
## Problem
Editing a column from the schema visualiser requires many clicks
## Solution
When hovering over a column in the schema visualiser, an edit button
should appear on the right side. Clicking this button should open the
column edit pane on the right side of the screen. This would reduce the
number of clicks required and allow users to make edits directly from
the visualiser instead of using it only as a visual aid.
* Possible solution with building the URL from local storage.
* Refactor the local storage for tabs to use table ids.
* Fix the saving table state to local storage.
* Minor fixes.
* Open the correct schema when following the link.
* Minor fixes from CodeRabbit.
* Address charis' feedbacks
* Clean
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Improve stability and explicitness of table editor tab cache <-> url syncing
* fix: maintain filter state when using nav bar to switch back to Table Editor
---------
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
* some early ideas
* better approach
* fix globe stuff
* add initial step
* reset and submit button for chat
* cleanup
* remove www
* more clean up
* mobile and more cleanup
* fixes
* update advanced and security
* fix project checks
* connect form
* fix reset and tidied up other things
* add layout options
* a/b test
* add offset
* add ab test
* remove www packages
* remove www
* package
* update coordinates
* feat: create ProjectCreationInitialStepSubmittedEvent
* feat: add event for capturing intention of prompting
* fix: bring pnpm-lock up to date
* fix ts errors
* fix globe
* fix globe animation
* fix ts
* remove imports and tools
* update module resolution
* global redirect
* delay rendering
* Update apps/studio/pages/new/[slug].tsx
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* take directly to v2 via project create dropdown
* move redirect to useEffect
* feat: distinguish events between initial and second step
* feat: emit an event when create project is clicked on new/v2
* fix: correct event type defs
* remove unused imports
* Various clean ups
* improvements
* Minor refactors
* clean up
* ts fixes
---------
Co-authored-by: Long Hoang <1732217+loong@users.noreply.github.com>
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Danny White
