design token ideas

_mixins.scss

// generate a custom element selector with the correct prefix
@mixin custom-element($name) {
  #{$usa-prefix}-#{$name} {
    @content;
  }
}

_utility.scss

// Atomic/utility classes, also generated
@import 'variables';

@each $name, $color in $usa-palette {
  @each $abbr, $prop in (
    fg: 'color',
    bg: 'background-color',
    bc: 'border-color',
    fi: 'fill',
    st: 'stroke'
  ) {
    .usa-#{$abbr}-#{$name} { #{$prop}: $color; }
  }
}

@each $size, $length in $usa-spacing {
  // set all margins with .usa-ma-xs
  .usa-ma-#{$size} { margin: $length; }
  // and direction-specific with .usa-mr-xs, et al
  @each $abbr, $dir in (t: 'top', r: 'right', b: 'bottom', l: 'left') {
    .usa-m#{$abbr}-${size} { margin-#{dir}: $length; }
  }
}

tokens.yml

prefix: 'usa'

palette:
  blue: '#390'
  red: '#fc0'

spacing:
  xs: 2
  sm: 4
  md: 8
  lg: 16
  xl: 32
  xxl: 64

variables.scss

// this is the theoretical result of transforming tokens.yml into SCSS
$usa-prefix: 'usa' !default;

$usa-palette: (
  blue: #390,
  red: #fc0
) !default;

$usa-spacing: (
  xs: 2px,
  sm: 4px,
  md: 8px,
  lg: 16px,
  xl: 32px,
  xxl: 64px
) !default;

Needs CSS variables!