Commit Graph
26 Commits
Author SHA1 Message Date
Danny White ed8ac5bb90 chore(design-system): preserve icon fill or stroke (#43417)
## What kind of change does this PR introduce?

Bug fix: custom icons now respect their source SVG’s stroke/fill and
stroke-width instead of always getting a global stroke.

## What is the current behavior?

Every custom icon gets `stroke="currentColor"` and `strokeWidth={2}`
from `createSupabaseIcon`, so fill-only logos get an extra stroke and
icons designed at `stroke-width="1"` (e.g. postgres, auth) render too
thick. Call sites and the design-system grid needed workarounds
(`strokeWidth={0}`, `FILL_ONLY_ICONS`, `STROKE_WIDTH_FROM_SOURCE`).

## What is the new behavior?

The icon build reads root SVG attributes (`fill`, `stroke`,
`stroke-width`, etc.) and passes them as per-icon defaults. Fill-only
icons (chatgpt, claude, axiom, last9) have `stroke="none"` in source and
render with no stroke; stroke icons keep their source stroke-width (e.g.
postgres at 1). No `strokeWidth={0}` or allowlists needed at call sites
or in the icon grid.

| Before | After |
| --- | --- |
| <img width="1826" height="552" alt="CleanShot 2026-03-05 at 10 53
31@2x-3D63CEF0-1132-44F5-A382-730346432F1E"
src="https://github.com/user-attachments/assets/9caf73fa-351b-4ea2-a420-b3339f934742"
/> | <img width="1814" height="552" alt="CleanShot 2026-03-05 at 10 53
40@2x-514FC8BD-D30F-4D23-B209-0ECD6D13A184"
src="https://github.com/user-attachments/assets/936ea5a5-dae0-413f-8545-b90a502cea69"
/> |

## Additional context

- Added `stroke="none"` to the four fill-only source SVGs;
sentry/grafana/otlp/datadog already had `stroke-width="0"`.
- `createSupabaseIcon` only applies `color`/`strokeWidth` when the
consumer passes them, so `svgDefaults` from the build are used
otherwise.
- Removed workarounds from `icons.tsx` and GuidesSidebar; updated
icons.mdx (defaults + fill-only guidance).
2026-03-09 10:26:59 +11:00
Danny White 57dde08672 chore(design-system): better breadcrumbs (#42310)
## What kind of change does this PR introduce?

Minor update

## What is the current behavior?

Our design system’s breadcrumbs:

1. Are not interactive
2. ~~Repeat the page title, which is directly below~~

## What is the new behavior?

These breadcrumbs:

- Are hyperlinked
- Show all parents, if nested
- ~~Don’t repeat the page title~~

| Before | After |
| --- | --- |
| <img width="1024" height="756"
alt="Forms-FBDF180F-F101-407C-A8EB-A06BBDB3509A"
src="https://github.com/user-attachments/assets/f2592b8b-b5d4-415f-af2e-28b99d5de0a0"
/> | <img width="1024" height="794"
alt="Forms-95348190-C8B2-4A3A-AE55-A4A5A16CD4B4"
src="https://github.com/user-attachments/assets/7b296c20-b12a-48ff-9479-6547cda73cd5"
/> |

## Additional context

I wonder if we should either drop the `/docs/` subdirectory or rename
it. The latter would make sense if we split, say, `/product/` from
`/icons/` and/or `/brand`.
[Primer](https://primer.style/octicons/design-guidelines/) does this
well.
2026-03-03 09:40:35 +11:00
Ivan Vasilov 1cd1ebfc7f chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)
Sorted all imports in all packages, `cms`, `design-system` and
`ui-library` apps by running `pnpm format` on them.

All changes in this PR are done by the script.
2026-02-05 13:54:10 +01:00
Danny Whiteandcoderabbitai[bot] f6e8207e6d docs(design-system) add dialog pattern documentation (#41296)
* docs

* naming

* docs

* mini fix

* update policies component

* use destructured prop

* rls policies dialogs

* custom domain dialogs

* restart server dialog

* remove ConfirmDialog (aka ConfirmModal)

* docs updates

* remove unrelated work

* remove unrelated work

* remove unrelated work

* confirmation-modal demo

* use indicative components

* links

* tiny docs updates

* examples

* sheets and alert dialog examples

* docs and examples

* docs

* docs

* text confirm modal

* docs

* docs

* revert cursor rules

* fixes

* fix links

* Update apps/design-system/registry/examples.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* rabbit

* rabbit

* use variants

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2025-12-17 11:24:36 +00:00
kemal.earth bfe3ea06df feat(design-system): add initial copy writing guide (#41307)
* feat: create entry points for copy writing docs

* feat: basic page generated using the supabase writing style guide

* chore: editing page

* feat: more components

* feat: remaining example components

* chore: remove duplicate registry entry

* chore: add aria label to example

* chore: run prettier

* fix: alphabetise getting started section

* chore: rename copy writing to copywriting
2025-12-15 10:44:08 +00:00
kemal.earth b97e41e20b chore(design-system): tidy up mobile styling (#41267)
* feat: tidy up header on mobile

* fix: graceful searchbar header

* fix: header classes and unused elements

* feat: trim down logo on header

* fix: logos again

* chore: remove dead code

* fix: classic dark logo header

* fix: page padding tidy ups

* fix: some font sizing

* feat: updated homepage cards

* fix: toc layout

* fix: toc again

* feat: homepage cards all the same size

* fix: footer paddings

* fix: pager if only 1 directional item

* fix: sidebar padding issues

* chore: killing all the defaults

* fix: import for side nav

* fix: sidebar complaining about dialog title

* fix: homepage paddings

* fix: killing one more default export

* feat: update colours icon to francescos

* fix: loose repeated copy
2025-12-12 10:08:48 +00:00
kemal.earth ec6f55c00b feat(design-system): charts defrag (#41026)
* feat: remove unused chart files

* chore: regenerate registry

* fix: logs bar chart positioning

* feat: add charts page to ui patterns

* chore: alphabetise ui patterns nav

* feat: base composable chart components

* chore: prettier for charts.mdx

* chore: slowly putting example together

* feat: add chart header components

* feat: add chart content wrapper

* feat: add recharts to source

* feat: add empty state handling

* feat: add loading state for content area as well

* feat: starting on actual recharts pieces

* feat: add basic api to documentation

* feat: add disabled state too

* feat: couple of basic chart types

* chore: tidy up for now

* feat: modify eslint rules for our demo files

* fix: recharts logo colour on light mode

* feat: absorb metric card into chart

* feat: align prop for chart header

* feat: refactor chart content

* feat: example with table

* chore: format for prettier

* fix: pkg lock merge conflict

* fix: small bits from danny

* feat: add link in ui pattern intro to charts

* chore: remove charts link from atoms

* chore: update metric padding to saxon suggestion

* feat: table footer overrides by default

* feat: update api props in table

* chore: formating
2025-12-10 13:10:18 +00:00
Danny WhiteandJoshen Lim 11dc1324aa chore(studio): improve alert composition and usage (#41147)
* finesse optical alignment

* improvements

* actions styling

* improvements

* margins

* improvements

* fix docs

* fix

* improve schema warning admonition

* misc fixes

* tweaks

* docs and improvements

* alphabetical sidebar navigation

* remove alert-error

* fix build error

* Tiny fixes

* tiny docs update

* semantic description

* handle intro pages

* note NoPermission component

* docs sidebar ordering

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-12-10 08:05:30 +00:00
Ivan Vasilov 8110c060f8 chore: Bump vulnerable dependencies (#41184)
* Bump nodemailer.

* Bump body-parser.

* Bump node-forge.

* Remove unused dep remark-html.

* Bump some deps for mdast-util-to-hast.

* Bump glob.

* Bump valibot.

* Bump @modelcontextprotocol/sdk and dedupe @supabase/mcp-utils.

* Bump @vitejs/plugin-rsc.

* Bump contentlayer2.

* Revert "Bump contentlayer2."

This reverts commit cb53f32a6a.

* Remove react-docgen since it's unused.
2025-12-09 19:07:32 +01:00
Danny WhiteandJoshen Lim 031b227165 studio(chore): badge component defrag (#40118)
* component clean up

* optically center

* docs and type size

* code badge variant

* sensible defaults

* fix product menu flex

* badge sweep

* new project badges

* logs

* compute badge

* studio badge sweep

* www sweep

* docs sweep

* clean up

* fixes

* cleanup

* fixes

* better docs

* fixes

* misc fixes

* consistency

* Minor fixes for issues i found

* simplify mt-0

* mt simplification

* remaining optical alignment

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-12-02 11:15:50 +11:00
kemal.earthandIvan Vasilov af98191cc0 fix(design-system): chart rendering (#40306)
* chore: exploring possible breaking charts

* chore: still exploring why chart container content wont load

* chore: clean up and pin recharts to catalog

* chore: remove comments from comment preview file

* chore: remove react override

* Remove React 19.2 as a dependency.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-11-11 12:57:11 +00:00
ff599edf14 Page components (#40289)
* change database to pagelayout

* page components

* design system documentation

* reduce preview width

* revert studio

* functions apply page

* layout

* interfaces

* remove demos

* pckage

* format

* format

* Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* build registry

* pckg

* build script to allow index files

* switch exports

* fixes

* gen exports

* remove invalid prop

* fix typecheck

* fix prettier

* Revert "remove invalid prop"

This reverts commit 118ecd40c5.

* Revert "fix typecheck"

This reverts commit 0e1ec8fb61.

* Revert "fix prettier"

This reverts commit 2f25ed695c.

* pretter

* fresh pnpm i

* Update pnpm lock

* fix import

* revert

* Update packages/ui-patterns/src/PageContainer/index.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update packages/ui-patterns/src/PageHeader/index.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update packages/ui-patterns/src/PageSection/index.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* ts fix

* Update apps/design-system/content/docs/ui-patterns/page.mdx

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>

* change to layouts and examples

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>
2025-11-11 04:02:30 +00:00
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>
2025-09-09 11:45:08 +10:00
Kevin Grüneberg 2b94dd7430 feat: Dedicated Pooler rollout (#34240) 2025-03-21 14:46:58 +01:00
Ivan Vasilov cb1e3a8170 chore: Prep work for pnpm (#29610)
* Add all missing libraries in the packages/apps.

* Add all missing Vitest imports to the tests.

* Add some missing exports to ui.

* Fix the admonition export.

* Fix various minor bugs.

* Migrate the ui package to use vitest.
2024-10-01 11:29:37 +02:00
Ivan VasilovandJoshen Lim 05a542ccea chore: Migrate all feather icons to lucide icons (#29038)
* 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>
2024-09-04 19:46:21 +08:00
Jonathan Summers-Muir cff565ceda fix/ deep-dark theme name issue (#28282)
* init fix

* more

* more

* change storageKey

* added deep-dark css selectors as a workaround

* update css
2024-07-30 16:50:13 +00:00
Jonathan Summers-MuirandIvan Vasilov f912536db8 [Design system] Feat/sonner (#27382)
* fix toast examples

* add sonner stuff

* new sonner examples added

* updated

* add upload POC

* add

* Update sonner-upload.tsx

* move statusicons

* Minor fix.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2024-07-19 12:38:42 +02:00
Ivan Vasilov 1b1d748ed6 fix: Fix missing images in the design-system app (#27953)
Add images for all themes. Fix the links to the images.
2024-07-12 12:53:29 +02:00
Jonathan Summers-Muir 0f4da3e669 [Design system] update side menu text size (#27351)
update side menu
2024-06-19 09:56:48 +08:00
Jonathan Summers-Muir fa25402482 Fix/cmdk color issues (#27236)
* init

* tidy

* spelling
2024-06-14 13:27:57 +08:00
Jonathan Summers-Muir 5e6a3438eb [Design System] chore: add scroll example of Navigation Menu (#26974)
* init

* Update navigation-menu.mdx

* Update navigation-menu.tsx
2024-06-03 16:40:32 +02:00
Jonathan Summers-Muir 73ff6c1085 [Design System] Chore: add tree-view documentation (#26821)
* chore: init docs

* remove old stories

* update source panels
2024-05-28 17:22:37 +08:00
Jonathan Summers-Muir ec760d4e97 add Admonition to Design System (#26710)
* add Admonition to Design System

* added notices about FormLabel

* Update label.mdx
2024-05-24 09:21:41 +00:00
8643c2549e Feat [atom component] stacked radio group / card radio group (#26612)
* init site

* add nav menu

* add props table component

* init all the examples

• also includes moving a bunch of ./ui files to ./ui-patterns

* update package

• might need to remove some of these

* Update rehype-component.ts

* move nav

* more changes

* add new source information to contentlayer

* fix copy buttons

* add text-confirm. start new concept of "fragments"

* move base path. add homepage. add theme selection

* added colors

* add form-item-layout

* temporary fix code blocks in light mode. they currently don't switch theme to theme

* start adding code themes

* Update dark.json

* update code block themes

* fix animations

* add cdmk search

* export registry of icons in ./icons package

* add comments

* add icon copy stuff

* Update icons.tsx

* more docs

* more docs. cleaned up colors and icons docs

* Update theming.mdx

* add more docs

* update

* add package

* Update tailwind.config.js

* update content

* Update drawer-demo.tsx

* Update aspect-ratio-demo.tsx

* add new blocks

* Update source-panel.tsx

* Update source-panel.tsx

* Update source-panel.tsx

* add new source block

* Update source-panel.tsx

* Update _app.tsx

* Update page.tsx

* Delete layout-old.tsx

* remove old themes

* remove old ui registry

* comment out nav items

* Update package-lock.json

* Update AssistantChatForm.tsx

* move back

* move again

* update

* Update index.tsx

* Update package-lock.json

* Update package-lock.json

* Update package-lock.json

* update package

* udpate prettier

* fix tag issues

* Update package-lock.json

* update to contentlayer2

* update package-lock.json

* fix type errors

* ignore spelling

* feat: add RadioGroupStacked

* feat: add `slot` behaviour to `<FormItem/>`

* sneaky add in better line highlighting

* add RadioGroupCard

* update colors

* Update package-lock.json

* Update avoid-typos.yml

* Update navigation-menu-demo.tsx

* Add a redirect from / to the base path.

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2024-05-23 17:44:45 +02:00
b8243e06d8 Feat/design system site (#26586)
* init site

* add nav menu

* add props table component

* init all the examples

• also includes moving a bunch of ./ui files to ./ui-patterns

* update package

• might need to remove some of these

* Update rehype-component.ts

* move nav

* more changes

* add new source information to contentlayer

* fix copy buttons

* add text-confirm. start new concept of "fragments"

* move base path. add homepage. add theme selection

* added colors

* add form-item-layout

* temporary fix code blocks in light mode. they currently don't switch theme to theme

* start adding code themes

* Update dark.json

* update code block themes

* fix animations

* add cdmk search

* export registry of icons in ./icons package

* add comments

* add icon copy stuff

* Update icons.tsx

* more docs

* more docs. cleaned up colors and icons docs

* Update theming.mdx

* add more docs

* update

* add package

* Update tailwind.config.js

* update content

* Update drawer-demo.tsx

* Update aspect-ratio-demo.tsx

* add new blocks

* Update source-panel.tsx

* Update source-panel.tsx

* Update source-panel.tsx

* add new source block

* Update source-panel.tsx

* Update _app.tsx

* Update page.tsx

* Delete layout-old.tsx

* remove old themes

* remove old ui registry

* comment out nav items

* Update package-lock.json

* Update AssistantChatForm.tsx

* move back

* move again

* update

* Update index.tsx

* Update package-lock.json

* Update package-lock.json

* Update package-lock.json

* update package

* udpate prettier

* fix tag issues

* Update package-lock.json

* update to contentlayer2

* update package-lock.json

* fix type errors

* ignore spelling

* Update avoid-typos.yml

* Update avoid-typos.yml

* Update package-lock.json

* Use ui type definitions.

* move tsconfig base stuff. fix content layer issue

* Update package-lock.json

* Update package-lock.json

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2024-05-23 17:39:56 +08:00