Avala Design
Tokens · DTCG · Style Dictionary 4 · 16 emits

@avala/design-tokens

Single source of truth for every value the kit ships. JSON in, CSS / SCSS / JS / Dart / DTCG-JSON out. 8 brands × 2 tones = 16 emits, lockstep.

Source layout

bash
tokens/
  core/                   # cross-brand: scales, motion, type, radius
    color.json
    motion.json
    radius.json
    spacing.json
    type.json
  themes/
    avala/
      _base.json          # brand-shared aliases (chart series, status)
      g10.json            # role assignments, light tone
      g100.json           # role assignments, dark tone
    pay/, learning/, …    # 7 other brands
  build.config.ts         # Style Dictionary 4 pipeline
  dist/                   # generated, gitignored
    css/<brand>.<tone>.css
    css/<brand>.css       # combined :root + .dark
    json/<brand>.<tone>.json (DTCG)
    dart/<brand>_<tone>_tokens.dart

Build

bash
cd tokens
npm install
npm run build       # emits dist/{css,scss,js,dart,json}/

# Snapshot tests pin generated output in CI.
npm run test
npm run test:update-snapshots   # bless intentional changes

DTCG JSON shape

Tokens follow the W3C DTCG design-tokens-format draft ($type + $value + $description). The dist json/ emit is flat name → value for runtime consumption; the source files in tokens/themes/ are the canonical DTCG shape.

tokens/themes/avala/g100.json (excerpt)json
{
  "background": { "$type": "color", "$value": "#121212" },
  "layer-01":   { "$type": "color", "$value": "#1A1A1A" },
  "support-success": {
    "$type": "color",
    "$value": "#50CC3D",
    "$description": "LOCKED. Avala review-state quartet override."
  }
}

Emits per platform

dist/css/avala.csscss
:root, :root.light, [data-tone="g10"] {
  --background: #ffffff;
  --layer-01: #f4f4f4;
  /* ... */
}
:root.dark, [data-tone="g100"] {
  --background: #121212;
  --layer-01: #1a1a1a;
  /* ... */
}
dist/dart/avala_g100_tokens.dartdart
class AvalaG100Tokens {
  static const Color background = Color(0xFF121212);
  static const Color layer01 = Color(0xFF1A1A1A);
  static const Color supportSuccess = Color(0xFF50CC3D);
  /* ... */
}

What's next