https://github.com/connorwforsyth/stiches-figma-tokens

Testing Tokens Studio with Stichess CSS extensions
https://github.com/connorwforsyth/stiches-figma-tokens

Last synced: about 1 month ago
JSON representation

Testing Tokens Studio with Stichess CSS extensions

• Host: GitHub
• URL: https://github.com/connorwforsyth/stiches-figma-tokens
• Owner: connorwforsyth
• License: mit
• Created: 2023-02-15T10:49:27.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-15T10:49:31.000Z (almost 2 years ago)
• Last Synced: 2024-11-11T04:39:42.554Z (3 months ago)
• Language: JavaScript
• Size: 74.2 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# figma-tokens-example-stitches

This example illustrates how you can transform your tokens stored on Figma Tokens (with GitHub sync enabled) to be automatically transformed with token-transformer and Style Dictionary to a Stitches environment with multiple themes. The theme switcher itself just adds `light-theme` or `dark-theme` to the root class, so in theory you could have not only light or dark theme but many different themes.

Change your tokens in `tokens.json` (either directly or with the Figma Tokens plugin in Figma). The GitHub action will automatically generate tokens to the `tokens/` directory that can then be read by Style Dictionary, which will output tokens to the format you defined in `build.js` - css variables will be generated in the `output` directory which Stitches will pick up.

Note: Ideally generated css/dist files wouldn't be part of the repository but rather live in the build environment. I only included them here for showcase.