Testsigma's Design System. Here, we can define all the tokens in yaml files and run build command to generate style related files(css, scss, tailwindConfig etc.) which can be used in projects.
-
npm run dev
to start development server -
npm run build
to generate style related files in dist folder
- File path name controls the content of tailwind-base.js. Eg:
- Check
tokens/colors/button/dark.yaml
: All the tokens in this file will be copied tocolors
key in tailwind-base.js. - Similarly, Check
primitives/spacing.yaml
: All the tokens in this file will be copied tospacing
key in tailwind-base.js.
- Check
- Hence, for file naming convention, try to follow what tailwind supports, i.e., the keys which can be used to extend tailwind theme. Eg.: colors, spacing, borderRadius, borderWidth etc.
- It's also important to put dark theme related tokens in a file named dark.yaml. Similarly, put light theme related tokens in a file named light.yaml. Eg:
tokens/colors/text/light.yaml