Skip to main content

Automated Token Change Analysis

· 2 min read

Reviewing design token changes in pull requests just got easier! We've added an automated token analyser that provides a clear summary of what's changed, making the review process faster and more transparent.

The Problem​

When design tokens are updated, the generated files can contain thousands of lines of changes. Reviewing these files individually is time-consuming and makes it easy to miss important changes or potential breaking changes.

The Solution​

The new token analyser script automatically runs on PRs that modify tokens and generates a summary report with:

  • Categorised changes — Changes are grouped by type (colors, sizing, spacing, borders, shadows, typography, opacity)
  • Status indicators — Each token is marked as 🆕 created, ✏️ edited, or ⚠️ removed (potential breaking change)
  • Before/after values — See exactly what changed for each token
  • Brand/theme grouping — Changes are organised by brand and theme for easy navigation

Example Output​

The analysis appears as a comment on your PR:

## 🎨 Token Changes

Found **15** token change(s) across **3** theme(s)

### Betfair - Sports Dark

#### 🌈 Color Changes

| Token                        | Before | After     |
| ---------------------------- | ------ | --------- |
| 🆕 created `--new-token`     | _new_  | `#ff0000` |
| ✏️ edited `--existing-token` | `#000` | `#111`    |
| ⚠️ removed `--old-token`     | `#fff` | _removed_ |

Technical Details​

The analyser:

  • Iterates over CSS files in the generated/ folder
  • Parses git diffs to detect added, modified, and removed tokens
  • Categorises tokens based on naming patterns
  • Generates a markdown report posted as a PR comment

For more details, see PR #4552.