feat(workflows): add a build-tokens workflow (#3256)

Co-authored-by: Alizé Debray <[email protected]>

.github/workflows/build-tokens.yaml

@@ -0,0 +1,71 @@
+name: Build Tokens
+on:
+  pull_request:
+    types: [opened, synchronize, edited, reopened]
+    paths:
+      - 'packages/tokens/**'
+
+jobs:
+  build:
+    name: Build Tokens
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup
+        uses: ./.github/actions/setup-pnpm
+
+      - name: Install dependencies
+        run: pnpm --filter design-system-tokens... install
+
+      - name: Build tokens & dependencies
+        run: pnpm --filter design-system-tokens... build
+
+      - name: Create Summary
+        id: summary
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const fs = require('fs')
+            const path = require('path')
+
+            const inputFileNames = fs.readdirSync('packages/tokens/tokensstudio-generated')
+            const inputFiles = inputFileNames.map(fileName => ({
+              type: path.extname(fileName),
+              name: fileName,
+              content: fs.readFileSync(`packages/tokens/tokensstudio-generated/${fileName}`, 'utf8')
+            }))
+
+            const outputOrder = [
+              'index.scss',
+              'core.scss',
+              'mode.scss',
+              'device.scss',
+              'channel.scss',
+              'theme.scss',
+              'components.scss',
+            ]
+            const outputFileNames = fs.readdirSync('packages/tokens/dist')
+            const outputFiles = outputFileNames.map(fileName => ({
+              type: path.extname(fileName),
+              name: fileName,
+              content: fs.readFileSync(`packages/tokens/dist/${fileName}`, 'utf8')
+            })).sort((a, b) => (outputOrder.includes(a.name) ? outputOrder.indexOf(a.name) : 1000) - (outputOrder.includes(b.name) ? outputOrder.indexOf(b.name) : 1000))
+
+            return `# Token Build
+            ## Input
+            ${inputFiles.map(({ type, name, content }) => `<details>
+              <summary><code>${name}</code></summary>
+              <pre lang="${type}">${content}</pre>
+            </details>`).join('\n')}
+
+            ## Output
+            ${outputFiles.map(({ type, name, content }) => `<details>
+              <summary><code>${name}</code></summary>
+              <pre lang="${type}">${content}</pre>
+            </details>`).join('\n')}
+            `
+
+      - name: Output Summary
+        run: echo -e ${{ steps.summary.outputs.result }} >> $GITHUB_STEP_SUMMARY