Files
supabase/packages/ui
Ivan Vasilov 5847ad54cf fix: Test the playwright tests in Github actions (#26799)
* Add an API page for run-lints endpoint.

* Fix the playwright test.

* Make the check mandatory in the github action.

* Fix a console.log.

* Use a more stable way of waiting for buttons before clicking them.

* Add helper method for dismissing toasts.

* Wait for the other toast.

* Try and fix the flakiness of the toasts.

* Minor fix.

* Upload artifacts at the end of the github action run.

* Fix yaml stuff.

* Use the newer action for uploading. Shorten the retention period to 7 days.

* Add waitForResponse for the entity types API call.

* snapshot.

* Wait for the page to be loaded.

* Make the timeout bigger when waiting for response.

* Try to fix the timeouts.

* Minor restructuring of the test.

* Add another test and few minor todo tests.

* Fix the table names.

* Don't render hcaptcha in test mode.

* Expand the test to include sorting and filtering.

* Add a test for checking if the other schemas are can be listed.

* Make the sort popover button more stable.

* Fix a unused forward ref in the NavMenuItem component.

* Don't render the Toaster container when in test mode.

* Simplify starting the dev server when testing.

* Fix all inputs to have proper test ids.

* Fix the command for testing.
2024-06-07 17:44:28 +02:00
..
2024-03-08 06:27:16 +00:00
2023-05-22 01:25:17 +08:00
2023-06-26 01:08:20 +08:00
2023-06-25 13:32:01 +08:00
2024-05-30 11:06:08 -02:30
2022-09-19 14:00:05 +02:00
2023-03-22 12:27:30 +08:00
2023-06-26 00:28:16 +08:00
2024-04-04 13:09:21 +00: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",