Token categorization for Design System

tokens-breakpoints.js

{
  breakpoints: {
  }
}

tokens-colors.js

// primitive variables
const RED = "red";
const WHITE = "white";
const GRAY = "#333333";
const GRADIENT = "yellow to orange";
const BLACK = "#000000";
const BLUE = "blue";

// context variables
const COLOR_BRAND = RED;
const COLOR_BACKGROUND = WHITE;
const COLOR_BORDER = GRAY;
const COLOR_GRADIENT = GRADIENT;
const COLOR_TEXT = BLACK;
const COLOR_TEXTLINK = BLUE;

{
  color:
  {
    brand: { value: COLOR_BRAND },
    background: { value: COLOR_BACKGROUND },
    border: { value: COLOR_BORDER },
    gradient: { value: COLOR_GRADIENT },
    text: { value: COLOR_TEXT },
    textLink: { value: COLOR_TEXTLINK },
  }
}

tokens-depth.js

{
  depth: {
  }
}

tokens-duration.js

{
  duration: {
  }
}

tokens-font.js

const PTSANS = "PT Sans', sans-serif";
const IBMPLEX = "IBM Plex Serif', serifd";
const ITALIC = "italic";
const NORMAL = "normal";
const INHERIT = "inherit";
const SIZE10 = "10px";
const SIZE12 = "12px";
const SIZE16 = "16px";
const SIZE20 = "20px";
const WEIGHTLIGHT = "20px";
const WEIGHTREGULAR = "20px";
const WEIGHTBOLD = "20px";
const WEIGHTBLACK = "20px";

{
  font:
  {
    family: {
      primary: { value: PTSANS },
      secundary: { value: IBMPLEX }
    },
    style: {
      italic: { value: ITALIC },
      normal: { value: NORMAL},
      inherit: { value: INHERIT }
    },
    size: { 
      extraSmall: { px: { value: SIZE10 }, em: {value: "1em" }, rem: { value:  "1rem" }},
      small: { px: { value: SIZE12 }, em: {value: "1.2em" }, rem: { value:  "1.2rem" }},
      medium: { px: { value: SIZE16 }, em: {value: "1.6em" }, rem: { value:  "1.6rem" }},
      large: { px: { value: SIZE20 }, em: {value: "2em" }, rem: { value:  "2rem" }}
    },
    weight: {
      light: { value: WEIGHTLIGHT },
      regular: {value: WEIGHTREGULAR }
      bold: {value: WEIGHTBOLD }
      black: { value: WEIGHTBLACK }
    }
  }
}

tokens-line-height.js

{
  lineHeight: {
    heading: { value: 1.25},
    reset: { value: 1},
    text: { value: 1.5},
  }
}

tokens-opacit.js

const OPACITY0 = 0;
const OPACITY10 = 10;
const OPACITY20 = 20;
const OPACITY30 = 30;
const OPACITY40 = 40;
const OPACITY50 = 50;
const OPACITY60 = 60;
const OPACITY70 = 70;
const OPACITY80 = 80;
const OPACITY90 = 90;
const OPACITY100 = 100;

{
  opacity:
  {
    level0: { value: OPACITY0 },
    level1: { value: OPACITY10 },
    level2: { value: OPACITY20 },
    level3: { value: OPACITY30 },
    level4: { value: OPACITY40 },
    level5: { value: OPACITY50 },
    level6: { value: OPACITY60 },
    level7: { value: OPACITY70 },
    level8: { value: OPACITY80 },
    level9: { value: OPACITY90 },
    level10: { value: OPACITY100 },
  }
}

tokens-radius.js

{
  radius: {
  }
}

tokens-shadow.js

{
  shadow: {
  }
}

tokens-sizing.js

{
  sizing: {
  }
}

tokens-spacing.js

{
  spacing: {
    extraSmall: { value: 1},
    small: { value: 1.2},
    medium: { value: 1.5},
    large: { value: 2},
    reset: { value: 3 }
  }
}