Add tokne-cli for generating design token from Figma variables #15
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Generate CSS variables | |
| on: | |
| workflow_dispatch: | |
| pull_request: | |
| branches: | |
| - main | |
| jobs: | |
| token: | |
| runs-on: ubuntu-latest | |
| defaults: | |
| run: | |
| working-directory: packages/token-cli | |
| steps: | |
| - uses: actions/checkout@v3 | |
| - uses: actions/setup-node@v3 | |
| with: | |
| node-version-file: '.node-version' | |
| cache: yarn | |
| - name: Prepare deps | |
| working-directory: ./ | |
| run: | | |
| yarn install --immutable --inline-builds | |
| yarn workspaces foreach -vptR --from @charcoal-ui/token-cli run build | |
| - name: Fetch primitive variables | |
| env: | |
| FIGMA_TOKEN: ${{ secrets.FIGMA_PAT_FOR_VARIABLES}} | |
| FIGMA_FILE_ID: ${{ secrets.FIGMA_NODE_ID_PRIMITIVES }} | |
| run: yarn token-cli fetch -o out/raw_primitives.json | |
| - name: Fetch Applied variables | |
| env: | |
| FIGMA_TOKEN: ${{ secrets.FIGMA_PAT_FOR_VARIABLES }} | |
| FIGMA_FILE_ID: ${{ secrets.FIGMA_NODE_ID_APPLIEDS }} | |
| run: yarn token-cli fetch -o out/raw_applieds.json | |
| - name: Transform primitive token | |
| run: yarn token-cli transform --source ./out/raw_primitives.json --output ./tokens/base.json | |
| - name: Transform applied token | |
| run: | | |
| yarn token-cli transform --source ./out/raw_applieds.json --output ./tokens/pixiv-light.json --variable-collection-names Color Space "Border radius" --mode-name "pixiv/light" | |
| yarn token-cli transform --source ./out/raw_applieds.json --output ./tokens/pixiv-dark.json --variable-collection-names Color Space "Border radius" --mode-name "pixiv/dark" | |
| - name: Generate CSS variables | |
| run: | | |
| yarn style-dictionary build -c pixiv-light.config.js | |
| yarn style-dictionary build -c pixiv-dark.config.js | |
| - name: Upload artifacts | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: generated css | |
| path: packages/token-cli/build/css | |
| - name: Upload artifacts | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: generated tokens json | |
| path: packages/token-cli/tokens |