mirror of
https://github.com/supabase/supabase.git
synced 2026-11-06 12:24:31 +08:00
codex/fix-tanstack-e2e
11 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
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 --> |
||
|
Danny White
|
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> |
||
|
Nik Richers
|
08867f94ff |
docs: lead self-hosting overview with what/why/CTA, restructure secondary content (#48415)
## 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? Docs restructure of the self-hosting overview: short fit intro, Get started / community listings above the fold, parallel h2 sections for how self-hosting differs (including local development), responsibilities, and telemetry, plus a streamlined support listing with better card content. Closes DOCS-1251. ## What is the current behavior? - Linear item: Explore two PR approaches for the self-hosting page - The self-hosting overview page (`/guides/self-hosting`) is the top search hit for "supabase self-hosting," but reads as a wall of text: three full prose/bullet sections (differs / responsibilities / telemetry) come before the getting-started CTA, which is buried as one small card partway down the page. ## What is the new behavior? - Short fit intro; `self-hosting-get-started` and `self-hosting-community` listings sit directly under the intro. - Top-level h2s for how self-hosting differs, responsibilities, telemetry, and support (no "More about self-hosting" wrapper). - Under differs: rewritten single-project + platform-gap copy, plus `### Not the same as local development` (CLI stack is not a production self-host; points to Docker / community options). - Telemetry clarifies CLI local-dev telemetry vs Docker Compose (no phone-home). - Merged support into a single `self-hosting-support` listing; Enterprise subsection unchanged. - Minor a11y: `aria-hidden` on GlassPanel decorative icon background. ## Additional context - Worktree: `~/GitHub/supabase/supabase-worktrees/nikrichers/docs-1251-self-hosting-inform` - Review: removed the "More about self-hosting" grouping after feedback that it undersold differs / responsibilities. - Companion prototype PR 48416 is closed; this branch is the direction under review. - Verification: | Check | Result | | ----------------------------------------------- | ------------------------------------------------------------------ | | `pnpm lint:mdx content/guides/self-hosting.mdx` | Pass — no errors/warnings on this file | | Vercel docs preview | Pass — full-page after screenshot captured from the preview deploy | ### Proof: intro and get-started above the fold; parallel h2s for differs, responsibilities, and telemetry **Verified:** `pnpm lint:mdx content/guides/self-hosting.mdx` (pass) · Vercel docs preview (pass) ### Before & After | [Before (production)](https://supabase.com/docs/guides/self-hosting) | [After (PR preview)](https://docs-git-nikrichers-docs-1251-self-hosting-inform-supabase.vercel.app/docs/guides/self-hosting) | | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | |  |  | ### Test plan - [ ] Visit the preview link and confirm the page opens with intro above the Get started listings - [ ] Confirm parallel h2s for differs / responsibilities / telemetry / support (no "More about self-hosting") - [ ] Confirm "Not the same as local development" distinguishes the CLI stack from self-hosting - [ ] Confirm Support and community is one card grid - [ ] Check mobile width — layout should still be usable - [ ] Confirm `/guides/self-hosting/docker` link still works <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Documentation** - Reorganized the self-hosting guide with clearer getting-started resources and community links. - Added dedicated guidance for local development, managed Supabase, telemetry, and self-hosting responsibilities. - Consolidated support resources into one section covering discussions, issues, chat, Reddit, and sharing experiences. - **Accessibility** - Marked decorative icon backgrounds as hidden from assistive technologies. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Nik Richers <nik@validmind.ai> Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Danny White
|
3b06c6c7cc |
fix(docs): unify docs card hover and retire IconPanel (#48379)
## What kind of change does this PR introduce?
Bug fix / docs UI polish.
## What is the current behavior?
- Many docs `GlassPanel`s use `background={false}`, so hover only tweaks
the border and reads as having no hover state
- Compact icon+label grids still use `IconPanel`, which has a broken
`-z-10` hover fill and overlaps with the newer `IconLink` pattern
- Description card grids jump to 3-up too early on medium widths
## What is the new behavior?
**GlassPanel**
- Removes the `background` prop; cards always use the filled surface
with stronger border hover
- Tightens icon→description gap (`gap-6` → `gap-3`)
- Decorative icons/logos use empty `alt` so screen readers don’t hear
the title twice
**Icon tiles**
- Retires `IconPanel` from docs and deletes it from `ui-patterns`
- Uses `IconLink` / `IconLinkList` for compact navigation tiles (auth
providers, social login, etc.)
- Adds `IconLinkButton` for SMS provider pickers (same chrome, opens a
dialog)
- Adds focus styles, list labelling, and dialog-trigger ARIA where
needed
**Layout / content**
- Migrate-to-Supabase description cards on resources use `GlassPanel`
(not slim icon tiles)
- Grid spans use `md:… xl:…` so cards stay 2-up until ~1280px
- Fixes migrate links to `/guides/platform/migrating-to-supabase/…` and
SSR quickstarts to `creating-a-client` with framework query params
- Moves the Extensions list `key` onto the outer `Link`
| Before | After |
| --- | --- |
| <img width="1185" height="1323" alt="Resources Supabase Docs"
src="https://github.com/user-attachments/assets/1677bf65-d3a3-4202-8c70-e758f7c3bcce"
/> | <img width="1185" height="1323" alt="Resources Supabase Docs"
src="https://github.com/user-attachments/assets/51760f0f-62b6-4010-9841-de26039f37b4"
/> |
## Additional context
Homepage compact sections already use `IconLinkList` from #48317; this
PR finishes that pattern for remaining docs `IconPanel` callsites and
cleans up GlassPanel hover.
`www/customers` only drops the removed `background` prop; those cards
already use the filled surface via `logo`.
## Test plan
- [ ] `/guides/getting-started`: GlassPanels show filled surface and
clearer border hover
- [ ] `/guides/resources`: migrate cards are GlassPanels with working
`/platform/…` links; 2-up until xl
- [ ] `/guides/auth/social-login` and auth providers partial: IconLink
tiles hover/focus correctly
- [ ] `/guides/auth/phone-login`: SMS provider buttons open dialogs;
keyboard focus works
- [ ] Docs homepage: migrate / self-host IconLinkLists unchanged in
behaviour
- [ ] `/guides/auth/server-side`: Next.js / SvelteKit cards resolve on
docs preview
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improved Layouts**
* Made “GlassPanel” card grids more responsive and consistent; refined
card and success badge spacing for a cleaner presentation.
* **Updated Documentation**
* Refreshed multiple guide and resource pages (including quickstarts and
migration content) with standardized card layouts and updated link
destinations.
* **Component Updates**
* Standardized “GlassPanel” styling (background toggle removed) and
simplified icon-based panels; added an `IconLinkButton` for action
tiles; updated authentication provider grids to use the shared tile UI.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
|
||
|
Nik Richers
|
6418820b0b |
docs: convert self-hosting overview to ContentListings and restructure the page (#47469)
## 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? This PR converts link sections in the self-hosting overview page to the `ContentListings` component, puts conceptual guidance before deployment options, and adds badge support for the Docker card (minor). Relates to DOCS-1137 ## Current behavior `self-hosting.mdx` uses hand-authored `<GlassPanel>` / `<Link>` JSX for two sections: - **Get started**: Docker card with a JSX title containing a `<Badge>` element (was previously deferred for this reason). - **Community-driven projects**: Two cards with trivial `<span>`-wrapped string titles. Get started and Community cards appear at the top of the page, before the conceptual overview. The Support and community section uses hand-authored bullet lists for GitHub, Discord, and Reddit links. ## New behavior - The self-hosting overview page now uses data-driven `ContentListings` instead of hand-written cards and bullet lists. - Conceptual content (how self-hosting differs, your responsibilities, telemetry) comes first; deployment options and community resources follow. - Section intro text lives in listing data rather than inline MDX. - Brand icons added to all listing cards (Docker, Kubernetes, Traefik, GitHub, Discord, Reddit). - Minor: Added support for badges to content listings, such as "Official" in the Docker tile Data lives in `self-hosting.data.ts` (5 groups, 8 links) and is registered in `content-listings/index.ts`. ## Additional context ### Icon usage rights New brand icons (Kubernetes, Traefik, Reddit) are sourced from [Simple Icons](https://simpleicons.org) (CC0 1.0). Existing icons (Docker, GitHub, Discord) reuse assets already in `apps/docs/public/img/icons/`. Use is non-commercial documentation only — consistent with existing docs icon usage and trademark fair-use for identifying linked third-party services. ### To do: - [ ] Check with @aantti if he's on board with switching the page to content listings we can lint for and the content restructure to match other overview pages ## Verification | Gate | Result | |------|--------| | `pnpm vitest run lib/content-listings.test.ts` | ✅ 12/12 passed | | `pnpm build:guides-markdown` | ✅ 744 files generated | | `pnpm lint:mdx` (self-hosting.mdx) | ✅ No warnings on changed file | ### Proof: restructured self-hosting page with ContentListings and icons | [Before (production)](https://supabase.com/docs/guides/self-hosting) | [After (PR preview)](https://docs-git-nikrichers-docs-1137-self-hosting-supabase.vercel.app/docs/guides/self-hosting) | |---|---| |  |  | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Updated the self-hosting guide to use dynamic content listings for “Get started,” community resources, support options, and sharing experiences. * Added richer listing cards with optional badges and improved icon handling. * Expanded self-hosting resource groups to surface more relevant links in docs navigation. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Nik Richers <nik@validmind.ai> |
||
|
Francesco Sansalvadore
|
ba133afc4c |
www: blog (#47236)
Update blog layout. PR breakdown of #43455 Related: #47226 #47227 #47228 |
||
|
Jeremias Menichelli
|
5288f8bd5f | [DOCS-951] [DOCS-952] Update llms and llms-full text files to match industry standards (#46166) | ||
|
Ivan Vasilov
|
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> |
||
|
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. |
||
|
Danny White
|
65b962e771 |
design system: text color contrast (#38343)
* 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> |
||
|
Ivan Vasilov
|
181f15752c |
chore: Move the files in ui-patterns under src folder (#36032)
* Move all components in ui-patterns into src folder. Add exports field for all files. * Fix all apps to use the new ui-patterns. * Fix the design-system build. * Remove all unused rexports from ui-patterns index. Apps should use direct imports instead. * Change the tailwind content property to include src folder of ui-patterns. * Remove autoprefixer from the tailwind configs. * Remove autoprefixer as a dependency. * Fix the CVA conditions in FormLayout. |
