Structure for design token data

theme-tokens.yml

# Design Tokens
# Define basic design variables here.
theme:
  # Basic elevations levels
  box-shadow:
    0: none
    1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)
    2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
    3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)
    4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)
    5: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)
  # Breakpoint values for media queries
  # Key names base on Bootstrap Variables
  # https://getbootstrap.com/docs/5.0/layout/breakpoints/
  breakpoints:
    xs: 0
    sm: 576px
    md: 768px
    lg: 992px
    xl: 1200px
    xxl: 1400px
  # Palette object for color values
  palette:
    brand:
      blue:
        l-39: hsl(223.5, 51%, 39%)
        l-34: hsl(223.8, 51.4%, 34%)
        l-25: hsl(223.7, 51.4%, 25.1%)
        l-15: hsl(223.5, 51%, 15.3%)
      yellow:
        l-72: hsl(35.9, 74.7%, 72%)
        l-59: hsl(36, 74.9%, 59.4%)
        l-44: hsl(36.1, 75%, 44%)
      red:
        l-63: hsl(2.4, 42.4%, 63.9%)
        l-42: hsl(2, 42.3%, 42.2%)
        l-27: hsl(2.1, 42%, 27.1%)
      green:
        l-90: hsl(177, 45%, 90%)
        l-72: hsl(178, 45%, 72%)
        l-35: hsl(178, 89%, 35%)
        l-27: hsl(178, 88%, 27%)
    grayscale:
      white: hsl(0, 0%, 100%)
      gray-99: hsl(60, 20%, 99%)
      gray-95: hsl(60, 4.1%, 95.1%)
      gray-71: hsl(50, 4.1%, 71%)
      gray-52: hsl(53.1, 3.7%, 52.4%)
      gray-32: hsl(49.6, 3.6%, 32.2%)
      black: hsl(43.6, 4.6%, 12%)
  # Page constrains for max-width values
  constrains:
    sm: 800px
    md: 1440px
    lg: 2200px
  # Color Tokens for user interface
  ui-palette:
    core:
      black: grayscale.black
      white: grayscale.white
    primary: 
      light: brand.blue.l-39
      main: brand.blue.l-34
      dark: brand.blue.l-15
      constrastText: grayscale.white
    secondary: 
      light: brand.yellow.l-72
      main: brand.yellow.l-59
      dark: brand.yellow.l-44
      constrastText: grayscale.white
  # Typography Tokens
  typography:
    base-font-size: 16px
    font-family:
      primary:
        name: Primary
        stack: '"Work Sans", Arial, sans-serif'
      system:
        name: System
        stack: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif'
      monospace:
        name: Monospace
        stack: 'Menlo, Consolas, "Lucida Console", "Liberation Mono", "Courier New", monospace, sans-serif'
    line-height:
      tight: 1.1
      base: 1.5
      loose: 1.75
    font-size:
      10: 12px
      20: 16px
      30: 20px
      40: 24px
      50: 32px
      60: 40px
      70: 48px
      80: 54px
      90: 64px
      100: 80px
    font-weight:
      light: 300
      regular: 400
      semibold: 600
      bold: 700
  # Transtion and animation tokens
  transitions:
    ease:
      ease-in-out: 'cubic-bezier(0.4, 0, 0.2, 1)'
      ease-out: 'cubic-bezier(0.0, 0, 0.2, 1)'
      ease-in: 'cubic-bezier(0.4, 0, 1, 1)'
      sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
    duration:
      shortest: 150ms
      short: 200ms
      standard: 375ms
      long: 400ms
  # Z index token
  z-index:
    nav: 800
    drawer: 1200
    modal: 1300
  # Spacing tokens
  space:
    25: 2px
    50: 4px
    100: 8px
    150: 2px
    200: 40px
    300: 48px
    400: 56px
    500: 64px
    600: 72px
    700: 80px
    800: 96px
    1000: 96px
    1200: 96px