Tokens.yaml

# Example partially complete token hierarchy (there are 100s of lines)

color :
  white : &color-white "#FFFFFF"
  black : &color-black "#262626"
  neutral :
    20 : &color-neutral-20 "#222222"
    90 : &color-neutral-90 "#EEEEEE"
  blue:
    50: &color-blue-50 "#2196F3"
    60: &color-blue-60 "#1E88E5"
  interactive:
    default: *color-blue-50
    dark: *color-blue-60
    # and many more ...

background-color :
  default : *color-white
  light : *color-neutral-90
  dark : *color-neutral-20
  disabled: *color-neutral-90
  # and many more ...

text-color :
  default : *color-neutral-25
  on-light : *color-neutral-25
  on-dark : *color-white
  light : *color-neutral-55
  disabled : *color-neutral-65
  link :
    default : *color-blue-50
    on-dark : *color-white
  # and many more ...

font :
  size :
    rem-base : 16px
    default : &font-size-default 1.125rem
    s : &font-size-s 1rem
    paragraph : *font-size-default
    list-item : *font-size-default
    form :
      input : *font-size-default
      label : *font-size-default
  line-height :
    default : 1.375em
    tight : 1.25em
    long-form-text : 1.65em
  # and many more ...

# and deepening hierarchy of ...

border : 
space :
size :
layout :
  grid :
shadows :
size :
transition :
timing :
layers :