move to ESM, update tokens

_resources/design-tokens/colors.json

@@ -1,34 +1,26 @@
 {
-	"title": "Colors",
-	"description": "Hex color codes that can be shared, cross-platform. They can be converted at point of usage, such as HSL for web or CMYK for print.",
-	"items": [
-		{
-			"name": "Dark",
-			"value": "#000"
-		},
-		{
-			"name": "Light",
-			"value": "#F5F5F4"
-		},
-		{
-			"name": "Light Glare",
-			"value": "#FFFFFF"
-		},
-		{
-			"name": "Primary",
-			"value": "#F6BF2A"
-		},
-		{
-			"name": "Primary Glare",
-			"value": "#FBE5AA"
-		},
-		{
-			"name": "Secondary",
-			"value": "#ca0057"
-		},
-		{
-			"name": "Secondary Glare",
-			"value": "ea99bc"
-		}
-	]
+  "title": "Colors",
+  "description": "Hex color codes that can be shared, cross-platform. They can be converted at point of usage, such as HSL for web or CMYK for print.",
+  "items": [
+    {
+      "name": "Base Dark",
+      "value": "#343434"
+    },
+    {
+      "name": "Base Light",
+      "value": "#FBFBFB"
+    },
+    {
+      "name": "Primary Highlight",
+      "value": "#dd4462"
+    },
+    {
+      "name": "Secondary Highlight",
+      "value": "#4467dd"
+    },
+    {
+      "name": "Tertiary Highlight",
+      "value": "#fbbe25"
+    }
+  ]
 }

_resources/design-tokens/fonts.json

@@ -1,16 +1,44 @@
 {
-  "title": "Fonts",
-  "description": "Each array of fonts creates a priority-based order. The first font in the array should be the ideal font, followed by sensible, web-safe fallbacks",
-  "items": [
-    {
-      "name": "Base",
-      "description": "System fonts for body copy and globally set text.",
-      "value": ["Inter", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"]
-    },
-    {
-      "name": "Serif",
-      "description": "Expressive sections, like quotes",
-      "value": ["Georgia", "sans-serif"]
-    }
-  ]
+	"title": "Fonts",
+	"description": "Each array of fonts creates a priority-based order. The first font in the array should be the ideal font, followed by sensible, web-safe fallbacks",
+	"items": [
+		{
+			"name": "Display",
+			"description": "Display font stack for headings and large text.",
+			"value": [
+				"Inter",
+				"Segoe UI",
+				"Roboto",
+				"Helvetica Neue",
+				"Arial",
+				"sans-serif"
+			]
+		},
+		{
+			"name": "Base",
+			"description": "Base font stack for body text.",
+			"value": [
+				"Inter",
+				"Segoe UI",
+				"Roboto",
+				"Helvetica Neue",
+				"Arial",
+				"sans-serif"
+			]
+		},
+		{
+			"name": "Mono",
+			"description": "Monospace font for code and preformatted text.",
+			"value": [
+				"RobotoMono",
+				"ui-monospace",
+				"Cascadia Code",
+				"Source Code Pro",
+				"Menlo",
+				"Consolas",
+				"DejaVu Sans Mono",
+				"monospace"
+			]
+		}
+	]
 }

_resources/design-tokens/spacing.json

@@ -2,78 +2,79 @@
   "title": "Spacing",
   "description": "Consistent spacing sizes, based on a ratio, with min and max sizes. This allows you to set spacing based on the context size. For example, min for mobile and max for desktop browsers.",
   "meta": {
-    "scaleGenerator": "https://utopia.fyi/space/calculator?c=320,16,1.2,1350,20,1.414,8,1,&s=0.75|0.5|0.25,2|3|5|8|13,s-l"
+    "scaleGenerator": "https://utopia.fyi/space/calculator?c=320,19,1.2,1350,26,1.414,8,2,&s=0.75|0.5|0.25,2|3|5|8|13,s-l&g=s,l,xl,12",
+    "note": "I'm shifing the the scale so spaces don't get too big. XS is euual to 3XS."
   },
   "items": [
     {
       "name": "XS",
-      "min": 12,
-      "max": 15
+      "min": 5,
+      "max": 7
     },
     {
       "name": "S",
-      "min": 16,
-      "max": 20
+      "min": 10,
+      "max": 14
     },
     {
       "name": "M",
-      "min": 24,
-      "max": 30
+      "min": 14,
+      "max": 21
     },
     {
       "name": "L",
-      "min": 32,
-      "max": 40
+      "min": 19,
+      "max": 28
     },
     {
       "name": "XL",
-      "min": 48,
-      "max": 60
+      "min": 38,
+      "max": 56
     },
     {
       "name": "2XL",
-      "min": 64,
-      "max": 80
+      "min": 57,
+      "max": 84
     },
     {
       "name": "3XL",
-      "min": 96,
-      "max": 120
+      "min": 95,
+      "max": 140
     },
     {
       "name": "XS - S",
-      "min": 12,
-      "max": 20
+      "min": 5,
+      "max": 14
     },
     {
       "name": "S - M",
-      "min": 16,
-      "max": 30
+      "min": 10,
+      "max": 21
     },
     {
       "name": "M - L",
-      "min": 24,
-      "max": 40
+      "min": 14,
+      "max": 28
     },
     {
       "name": "L - XL",
-      "min": 32,
-      "max": 60
+      "min": 19,
+      "max": 56
     },
     {
       "name": "L - 2xl",
-      "min": 32,
-      "max": 80
+      "min": 38,
+      "max": 84
     },
     {
       "name": "XL - 2XL",
-      "min": 48,
-      "max": 80
+      "min": 57,
+      "max": 140
     },
     {
-      "name": "2XL - 3XL",
-      "min": 64,
-      "max": 120
+      "name": "2XL - 3xl",
+      "min": 95,
+      "max": 224
     }
   ]
 }

_resources/design-tokens/textLeading.json

@@ -0,0 +1,18 @@
+{
+  "title": "Leading",
+  "description": "Ratio-based leading/line-height values",
+  "items": [
+    {
+      "name": "Flat",
+      "value": 1
+    },
+    {
+      "name": "Fine",
+      "value": 1.2
+    },
+    {
+      "name": "Standard",
+      "value": 1.5
+    }
+  ]
+}

_resources/design-tokens/text-sizes.json → _resources/design-tokens/textSizes.json

@@ -1,44 +1,54 @@
 {
   "title": "Text Sizes",
-  "description": "A minimum and maximum text size size allows you to pick the right size from a ratio, depending on the context size. The min and max sizes are in pixels and should be converted to appropiate sizes, per context. For example, for web, the should be converted to REM units (pixelSize / baseSize)",
+  "description": "A minimum and maximum text size size allows you to pick the right size from a ratio, depending on the context size. The min and max sizes are in pixels and should be converted to appropiate sizes, per context",
   "meta": {
-    "scaleGenerator": "https://utopia.fyi/type/calculator/?c=320,16,1.2,1350,20,1.414,8,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l"
+    "scaleGenerator": "https://utopia.fyi/type/calculator?c=320,19,1.2,1350,28,1.25,6,2,&s=0.75|0.5|0.25,2|3|5|8|13,s-l&g=s,l,xl,12"
   },
   "items": [
     {
-      "name": "Step 0",
+      "name": "Step min 2",
+      "min": 13,
+      "max": 16
+    },
+    {
+      "name": "Step min 1",
       "min": 16,
-      "max": 20
+      "max": 22
     },
     {
-      "name": "Step 1",
+      "name": "Step 0",
       "min": 19,
       "max": 28
     },
     {
-      "name": "Step 2",
+      "name": "Step 1",
       "min": 23,
-      "max": 40
+      "max": 35
+    },
+    {
+      "name": "Step 2",
+      "min": 27,
+      "max": 44
     },
     {
       "name": "Step 3",
-      "min": 28,
-      "max": 57
+      "min": 33,
+      "max": 55
     },
     {
       "name": "Step 4",
-      "min": 33,
-      "max": 80
+      "min": 40,
+      "max": 68
     },
     {
       "name": "Step 5",
-      "min": 40,
-      "max": 113
+      "min": 47,
+      "max": 86
     },
     {
       "name": "Step 6",
-      "min": 48,
-      "max": 159
+      "min": 56,
+      "max": 107
     }
   ]
 }

_resources/design-tokens/textWeights.json

@@ -0,0 +1,23 @@
+{
+	"title": "Text Weights",
+	"description": "Helper classes and custom properties for common font weights",
+	"meta": {},
+	"items": [
+		{
+			"name": "Regular",
+			"value": 400
+		},
+		{
+			"name": "Medium",
+			"value": 500
+		},
+		{
+			"name": "Bold",
+			"value": 700
+		},
+		{
+			"name": "Extra Bold",
+			"value": 900
+		}
+	]
+}

_resources/design-tokens/viewports.json

@@ -2,5 +2,8 @@
   "title": "Viewports",
   "description": "The min and maximum viewports used to generate fluid type and space scales.",
   "min": 320,
-  "max": 1350
+  "sm": 640,
+  "navigation": 730,
+  "md": 1000,
+  "max": 1360
 }