ECHOES-1295 Adapt build system to the new brand/mode structure

[jeremy-davis-sonarsource]

Only three breaking changes (token renames):

• echoes-color-support-black => echoes-color-roles-support-black
• echoes-color-support-white => echoes-color-roles-support-white
• echoes-color-support-transparent => echoes-color-roles-support-transparent

First commit is a squash of marcio/token-consistency.
Second is the script changes.

[netlify]

✅ Deploy Preview for echoes-react ready!

Name	Link
🔨 Latest commit	9ff9338
🔍 Latest deploy log	https://app.netlify.com/projects/echoes-react/deploys/69fb444cf1fb130007d0f164
😎 Deploy Preview	https://deploy-preview-678--echoes-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonar-review-alpha]

Summary

Architecture change: Migrate from layer-based to brand/mode-based token structure

This PR restructures the design token system to support multiple brands and better separation of concerns:

• Token organization: Replaces layer1/ and layer2/ with brand/{brand-name}/ and modes/ directories
• Build process: Introduces a required --brand parameter (or DESIGN_TOKEN_BRAND env var) to build tokens for a specific brand
• Breaking token renames: Three support color tokens moved under a new roles category:
  • echoes.color.support.black → echoes.color.roles.support.black
  • echoes.color.support.white → echoes.color.roles.support.white
  • echoes.color.support.transparent → echoes.color.roles.support.transparent
• Output: Generated CSS and JSON files now consistently use design-tokens-base.css (instead of brand-specific names) plus theme-specific variants
• CI configuration: GitHub Actions workflow now passes brand-a as the default brand for token builds

All token files under design-tokens/tokens/ have been reorganized and snapshots updated.

What reviewers should know

Where to start:

1. Read design-tokens/build.js to understand the new brand selection logic and token file structure (lines 41-71)
2. Check design-tokens/tokens/$metadata.json to see the new token set ordering
3. Review design-tokens/tokens/$themes.json to see how themes reference the new brand/mode structure

Key decisions:

• Brand is required and must be specified via --brand=<name> or DESIGN_TOKEN_BRAND env variable
• Multiple brands (brand-A, brand-B) are now supported, with selection happening at build time
• The theme mapping dynamically rewrites brand/ paths to point to the selected brand
• Support colors now live under a semantic roles category rather than top-level support

Testing notes:

• The build validation script now requires the brand parameter (see config/scripts/validate-tokens.sh)
• Generated files are committed, so verify their contents match expectations for your brand choice
• Token consumers should update references for the three renamed support color tokens

---

• Generate Walkthrough
• Generate Diagram

🗣️ Give feedback

[sonarqube-next]

Quality Gate passed

Issues
0 New issues
0 Fixed issues
0 Accepted issues

Measures
0 Security Hotspots
0 Dependency risks
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarQube

[sonar-review-alpha]

Two of the previously flagged issues remain unresolved — the case-sensitivity mismatch and the logic duplication in the brand name normalization. The error message example has been corrected.

🗣️ Give feedback