Commit Graph
42 Commits
Author SHA1 Message Date
Saxon FletcherandClaude Opus 4.8 fb02182e86 Color system (#47288)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES/NO

## What kind of change does this PR introduce?

Bug fix, feature, docs update, ...

## What is the current behavior?

Please link any relevant issues here.

## What is the new behavior?

Feel free to include screenshots if it includes visual changes.

## Additional context

Add any other context or screenshots.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Refreshed theming across the UI to use modern color expressions and
shared theme variables (including OKLCH-based gradients), improving
consistency for charts, code blocks, overlays, icons, and decorative
backgrounds.
* **Bug Fixes**
* Improved light/dark color and gradient consistency across axis/grid
styling, reference lines, buttons/badges, sidebar accents, loaders, and
other visual components.
* **Documentation**
* Updated styling/theming guidance to align with the revised semantic
token system and the updated theme variable usage patterns.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-03 15:00:43 +10:00
Ivan Vasilov 9fbe5152d9 chore: Remove dead code and unused files from the packages/ui (#45169)
# Changes
## Removed unused themes

- Deleted `concept-two.css` (unused) and `dark-combined.css` which was
identical to `dark.css`
- Removed the alias `deep-dark` to `dark` theme since it was unused

## Removed Figma token transform scripts

- Deleted the entire `internals/transform/` directory (~700 lines of JS)
— these scripts transformed Figma tokens into Tailwind variables but are
no longer needed
- Deleted `internals/tokens/cleanse-css-for-tailwind.js` and
`extract-design-tokens.js`
- Removed related dependencies from `package.json`
## Removed other unused files

- Deleted `shadcn.css` (unused)
- Deleted `tailwind-theming.md` (outdated doc),
https://supabase.com/design-system/docs/color-usage is a better resource
## Refactoring

- Extracted the `motion-safe-transition` Tailwind plugin into its own
file (`packages/config/tailwind-plugins/motion-safe-transition.js`)
- Renamed the tailwind class generation script for clarity
- Added stub `tailwind.config.js` files in packages that were missing
them, so VSCode IntelliSense works in those workspaces
- Updated `packages/ui/README.md` to reflect current usage patterns
(imports, styling conventions) instead of outdated Figma tokens workflow

# Testing
- Check all apps whether they have the correct themes with the correct
colors

[Linear
task](https://linear.app/supabase/issue/FE-3059/clean-up-unused-ui-build-artifacts-themes-and-figma-token-scripts)
2026-04-24 10:30:35 +02: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
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-MuirandFrancesco Sansalvadore 6d760a1a99 Feat/deep dark (#27026)
* chore: move to deeper dark

* tidy up boxes on www

* update deep-dark colors

* fix homepage product cards

* toned down pricing page a little

* update

* lots of color changes

* Update grid.scss

* Update EntityListItem.tsx

* Update EntityListItem.tsx

* fix partners page icon

* fix partners page colors

* update theme

* Update global.css

* combined dark theme so classic-dark does not break on other sites

* Update package-lock.json

* updated color tokens pipeline to support combined dark theme

* smol updates

* Update FeaturedThumb.tsx

* Update BlogFilters.tsx

* Update BlogListItem.tsx

* Update BlogListItem.tsx

* Update UserSettingsDropdown.tsx

* Update NavigationBar.tsx

---------

Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
2024-07-30 21:34:28 +08:00
Jonathan Summers-Muir 972773ca87 [Dashboard] Chore: update Modal component to use new components (#26844)
* init

* add more examples

* update modal

* update modals

* more modals updated

* update modal

* Update NewAccessTokenButton.tsx

* Update NewAccessTokenButton.tsx

* fix: issue with scale on dialog opening. chore: added bg-dialog color

* fix modals

* add deprecation notices

* revert bg

* revert

* Update Modal.tsx

* Update PITRSelection.tsx

* update dialog docs

* fix: issue with payment method modal

* update terminal instructions

* update padding defaults
2024-06-05 10:06:55 +00:00
Jonathan Summers-Muir 0acd2afa80 add surface-75 for dark (#26734) 2024-05-24 14:33:25 +08:00
Jonathan Summers-Muir 2581f978eb fix: update dark mode css. update borders for light and dark mode (#22392)
* update dark mode css. update borders for light and dark mode

* Delete concept-two.css

* Update Panel.tsx

* clean up
2024-04-05 07:46:24 +00:00
Jonathan Summers-Muir 05e810e52a Chore/update light mode overlay bg (#21866)
* Delete concept-one.css

* chore: update overlay bg

* left overs
2024-03-08 15:50:36 +08:00
754ee55cd0 chore: update themes and add dark-new theme set (#20865)
* chore: update themes and add dark-new theme set

* chore: update

* add deep dark css theme

* fix issue with wrong class

* chore: add `bg-studio` as a custom remapped color for studio background

* updated surface classes to use a surface-75.

* update backgrounds and borders

* Update CardButton.tsx

* Update NavigationIconButton.tsx

* chore: add theme selection

* Update package.json

* Update index.ts

* Update package.json

* update alias

* Update ThemeSettings.tsx

* chore: split up theme support

* remove old code

* Update index.ts

* add back in

* Update ThemeSettingsOld.tsx

* fix issue with system theme leaking through

* reset themes

* update imports

* packagelock updated

* Update ThemeSettingsWithPreferredTheme.tsx

* Update system.svg

* Update NavigationIconButton.tsx

* Update NavigationBar.tsx

* update

* Update light.css

* updated some colors

* light mode updated

* hacked

* prettier

---------

Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
2024-02-15 16:56:18 +01:00
Francesco SansalvadoreandJonathan Summers-Muir be9590c890 Multiple themes management (#18871)
* 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>
2023-11-16 16:41:53 +00:00
Jonathan Summers-MuirandFrancesco Sansalvadore 171714965e Feat/design tokens upgrade (#18051)
* new packages

* new transforms

* Update package.json

* new internal files

* Update cleanse-css-for-tailwind.js

* updated css files

* remove old code

* update tokens

* Delete global.css

* update themes

* Update tailwind-theming.md

* Update tailwind-theming.md

* Update tailwind-theming.md

* Update tailwind-theming.md

* Update tailwind-theming.md

* Update tailwind-theming.md

---------

Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
2023-10-23 03:28:22 +00:00
Jonathan Summers-Muir 358ff034d9 Merge branch 'master' into feat/branch-management-2--with-project-settings 2023-08-10 11:54:45 +08:00
Jonathan Summers-Muir c37ea37e81 Merge branch 'master' into feat/branch-management-2--with-project-settings 2023-08-02 12:50:34 +08:00
Jonathan Summers-Muir 11cd7e684d started moving all the integration UI stuff around 2023-08-02 05:48:21 +08:00
Jonathan Summers-Muir f875f6747a Merge branch 'chore/update-brand-colors' into feat/ai-sql-editor-styling--with-new-brand-tailwind-tokens 2023-07-30 21:52:22 +08:00
Jonathan Summers-Muir 8292e54447 chore: more AiIcon changes. moved all styling to CSS module 2023-07-30 21:00:52 +08:00
Jonathan Summers-Muir a823512bb5 chore: update colors from figma variables 2023-07-30 17:05:36 +08:00
Jonathan Summers-Muir a08084c839 started migrating components to shadcn. also experimented with loading icon 2023-07-29 21:21:48 +08:00
Jonathan Summers-Muir 561008bdb7 fix: colors. new destructive and warning colors 2023-07-18 00:05:50 +08:00
Jonathan Summers-Muir 276bb1ffd3 update config and colors from figma 2023-07-13 12:45:15 +08:00
Jonathan Summers-Muir d473bf0e80 more color 2023-07-06 01:55:36 +08:00
Jonathan Summers-Muir 3b9f8ccbf5 update colors 2023-07-06 01:35:46 +08:00
Jonathan Summers-Muir 1214557d32 add new CSS 2023-07-05 00:52:38 +08:00
Jonathan Summers-Muir fe74f5656a fix tokens 2023-06-28 12:09:23 +08:00
Jonathan Summers-Muir f88eae1706 update styles 2023-06-26 11:52:26 +08:00
Jonathan Summers-Muir c97802294a updated build CI for tokens for global.json support 2023-06-24 02:45:57 +08:00
Jonathan Summers-Muir ae792643c5 Merge branch 'chore/figma-variables-support' into feat/ui-components-uishadcn 2023-06-23 22:34:06 +08:00
Jonathan Summers-Muir 0c72f255fa chore: update to support new theme 2023-06-23 22:11:07 +08:00
Jonathan Summers-Muir cff1c275ed fix issue with styles 2023-05-23 19:33:46 +08:00
Jonathan Summers-Muir 18d2cc2747 update stories 2023-05-20 17:33:27 +08:00
Jonathan Summers-Muir b88474e9b8 added new colours. moved themes into new directory 2023-05-09 23:35:58 +08:00
Jonathan Summers-Muir 7cf9df8749 add some extra colors 2023-05-09 17:51:03 +08:00
Jonathan Summers-Muir 90d50b390d fix imports 2023-05-09 01:35:08 +08:00
Jonathan Summers-Muir 7d7dc0fb3e remove old files 2023-05-09 01:23:31 +08:00
Jonathan Summers-Muir 0ef9ac46fb move files. add gitignore 2023-05-09 01:20:13 +08:00
Jonathan Summers-Muir faf1208d40 remove old files 2023-05-09 01:18:34 +08:00
Jonathan Summers-Muir 7273b798eb opacity now working 2023-05-09 00:45:52 +08:00
Jonathan Summers-Muir 897c31a1b4 remove old stuff 2023-05-08 22:44:41 +08:00
Jonathan Summers-Muir 109f2c30bc add typography styles 2023-05-08 22:42:51 +08:00
Jonathan Summers-Muir 4742fe15b3 updated theme 2023-05-08 22:18:11 +08:00
Jonathan Summers-Muir 3bc255f1a3 now working again :D 2023-05-06 18:50:39 +08:00