mirror of
https://github.com/supabase/supabase.git
synced 2026-10-13 21:29:08 +03:00
6851d7a5ba
* 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 * chore: new generated llms * Rebuild the pnpm-lock file. * fix: update vaul dep in ui for drawer * chore: update radix dialog deps * fix: clipPath prop on chart tooltip svg * fix: update dialog deps * fix: update hover card deps * fix: remove legacy next link from nav menu docs * fix: radio group dep update * fix: scroll area example key * fix: sheet form readOnly * fix: slider dep update * fix: hide empty toast view * fix: toggle and toggle group dep update * Rebuild the lockfile. * chore: updating branch * fix: remove unused prop in docs Removes unused prop on Drawer component inside docs causing type error * Update apps/design-system/registry/default/example/scroll-area-demo.tsx Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com> * chore: remove commented out menu item * chore: remove types/node in common --------- Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com> Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Supabase UI Package
Figma-tokens setup
Tokens setup is based partly on blogpost on the Mirahi Digital Garden.
Transforms tokens stored on Figma Tokens using token-transformer and Style Dictionary to css-variables with references, and use them in your TailwindCSS environment with multiple themes.
Build all the styles files (css-variables and tailwind config)
npm run build-styles
This creates a directory called styles with the tokens and also CSS required.
Other examples
You can find other examples here by Jan Six
Adding new themes/sets
Add new sets by extending the scripts in package.json. Currently theme sets derive from exported/[set name] but can come from anywhere.
Adding a new set can be done with the following:
// package.json
//..
"build-transform-light": "npx token-transformer tokens.json styles/tokens/02_themes/light.json global,exported/light,theme global",
// add a new line like this:
"build-transform-new": "npx token-transformer tokens.json styles/tokens/02_themes/new.json global,new,theme global",
//..
// append the new theme/set command to end of the build-transform command
"build-transform": "npm run build-transform-global && npm run build-transform-typography && npm run build-transform-dark && npm run build-transform-light && npm run build-transform-new",