jhonsore · December 9, 2021 14:16
diff --git a/tokens-breakpoints.js b/tokens-breakpoints.js
 {
  breakpoints: {
  }
 }
diff --git a/tokens-colors.js b/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 },
  }
 }
diff --git a/tokens-depth.js b/tokens-depth.js
 {
  depth: {
  }
 }
diff --git a/tokens-duration.js b/tokens-duration.js
 {
  duration: {
  }
 }
diff --git a/tokens-font.js b/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 }
    }
  }
 }
diff --git a/tokens-line-height.js b/tokens-line-height.js
 {
  lineHeight: {
    heading: { value: 1.25},
    reset: { value: 1},
    text: { value: 1.5},
  }
 }
diff --git a/tokens-opacit.js b/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 },
  }
 }
diff --git a/tokens-radius.js b/tokens-radius.js
 {
  radius: {
  }
 }
diff --git a/tokens-shadow.js b/tokens-shadow.js
 {
  shadow: {
  }
 }
diff --git a/tokens-sizing.js b/tokens-sizing.js
 {
  sizing: {
  }
 }
diff --git a/tokens-spacing.js b/tokens-spacing.js
 {
  spacing: {
    extraSmall: { value: 1},
    small: { value: 1.2},
    medium: { value: 1.5},
    large: { value: 2},
    reset: { value: 3 }
  }
 }
	// 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 },
	}
	}
	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 }
	}
	}
	}
	{
	lineHeight: {
	heading: { value: 1.25},
	reset: { value: 1},
	text: { value: 1.5},
	}
	}
	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 },
	}
	}
	{
	spacing: {
	extraSmall: { value: 1},
	small: { value: 1.2},
	medium: { value: 1.5},
	large: { value: 2},
	reset: { value: 3 }
	}
	}