phoenix

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.

Style-Dictionary - Usage

• npm run dev to start development server
• npm run build to generate style related files in dist folder

Relevant info for tailwind-base.js generation

• 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 to colors key in tailwind-base.js.
  • Similarly, Check primitives/spacing.yaml: All the tokens in this file will be copied to spacing key in tailwind-base.js.
• 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