Files
supabase/packages/ui
Jordi Enric 6e91494b16 Add coveralls integration (#35424)
* update gh action, update vitest config

* debug

* debug cov

* idk try something different

* test2

* test3

* add base path

* rm debug

* add apiAuthenticate tests

* supabaseClient tests

* apiWrappers tests

* add apiHelpers tests

* add configcat tests

* add formatSql tests

* add github tests

* add cloudprovider utils tests

* add helpers tests

* fix typeerr

* add missing readonly err

* fix typeerrrs

* fix type errors in apiWrapper tests

* fix apiHelpers test

* add packages/ui tests

* add coveralls flags

* try coveralls parallel config

* fix coveralls parallel config

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-05-08 12:23:37 +02:00
..
2025-04-09 16:13:53 +01:00

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",