tokens.yml

name: Generate CSS variables

on:
  workflow_dispatch:

jobs:
  token:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: packages/token-cli
    steps:
      - uses: actions/checkout@v4
        with:
          ref: ${{ github.base_ref }}

      - 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
          yarn workspaces foreach -vptR --from @charcoal-ui/pullrequest-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: Copy to theme package
        run: |
          rm -rf ../theme/src/json
          rm -rf ../theme/src/css
          cp -r ./tokens ../theme/src/json
          cp -r ./build/css ../theme/src/css

      - name: Generate github token
        id: generate_token
        uses: tibdex/github-app-token@v1
        with:
          app_id: ${{ secrets.CHARCOAL_BOT_APP_ID }}
          private_key: ${{ secrets.CHARCOAL_BOT_PRIVATE_KEY }}

      - name: Create Pull Request
        working-directory: ./
        env:
          GITHUB_ACCESS_TOKEN: ${{ steps.generate_token.outputs.token }}
          GITHUB_REPO_OWNER: pixiv
          GITHUB_REPO_NAME: charcoal
          GITHUB_DEFAULT_BRANCH: ${{ github.ref_name }}
          TARGET_DIR: packages/theme
        run: yarn pullrequest-cli github:pr -c theme -t 'Update theme'

      - 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