add new design tokens

src/_data/designTokens/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
+    }
+  ]
+}

src/_data/designTokens/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": 800
+    }
+  ]
+}

src/_data/designTokens/viewports.json

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

src/assets/css/blocks/button.css

@@ -6,7 +6,7 @@
   display: inline-block;
   font: inherit;
   padding: 0.3rem var(--space-s);
-  font-weight: 700;
+  font-weight: var(--font-bold);
   text-decoration: none;
   text-align: center;
 }

src/assets/css/blocks/code.css

@@ -39,7 +39,6 @@ pre[class*='language-'] {
   word-wrap: normal;
   color: var(--color-text-accent);
   background: var(--color-bg);
-  line-height: 1.5;
   border-radius: var(--border-radius);
   hyphens: none;
 }
@@ -165,12 +164,12 @@ pre[class*='language-'] {
 
 .token.id {
   color: var(--color-code-pink);
-  font-weight: bold;
+  font-weight: var(--font-bold);
 }
 
 .token.important {
   color: var(--color-code-pink);
-  font-weight: bold;
+  font-weight: var(--font-bold);
 }
 
 .token.inserted {

src/assets/css/blocks/details.css

@@ -24,7 +24,7 @@ summary {
   gap: 0 1ch;
   cursor: pointer;
   list-style: none;
-  font-weight: bold;
+  font-weight: var(--font-bold);
   font-size: var(--size-step-1);
 }
 
@@ -40,7 +40,7 @@ summary::before {
   color: var(--color-primary);
   font-family: var(--font-mono);
   font-size: var(--size-step-0);
-  font-weight: normal;
+  font-weight: var(--font-regular);
   line-height: 0.5;
   transform: scale(1.4);
   transform-origin: right bottom;

src/assets/css/blocks/section.css

@@ -8,7 +8,7 @@
 }
 
 .section blockquote {
-  font-weight: 700;
+  font-weight: var(--font-bold);
   line-height: 1;
   font-size: var(--size-step-4);
   letter-spacing: var(--tracking-s);

src/assets/css/blocks/site-logo.css

@@ -2,7 +2,7 @@
   --gutter: var(--space-xs);
   padding: var(--space-s) 0;
   font-size: var(--size-step-0);
-  font-weight: bold;
+  font-weight: var(--font-bold);
   text-transform: uppercase;
   text-decoration: none;
 }

src/assets/css/blocks/site-nav-drawer.css

@@ -86,7 +86,7 @@
 
 .site-nav-drawer span {
   font-size: var(--size-step-min-1);
-  font-weight: bold;
+  font-weight: var(--font-bold);
   text-transform: uppercase;
   padding-inline-end: var(--space-2xs);
 }

src/assets/css/blocks/table.css

@@ -37,7 +37,7 @@ td {
 td::before {
   content: attr(data-label);
   float: start;
-  font-weight: bold;
+  font-weight: var(--font-bold);
 }
 td:last-child {
   border-block-end: 0;

src/assets/css/blocks/tag.css

@@ -11,7 +11,7 @@
   font-size: var(--size-step-min-2);
   text-transform: uppercase;
   padding: 0.1rem 0.625rem;
-  font-weight: 700;
+  font-weight: var(--font-bold);
 }
 
 .card .post-tag {

src/assets/css/blocks/theme-switch.css

@@ -8,7 +8,7 @@
   border-radius: var(--border-radius);
   font-size: var(--size-step-min-2);
   padding: 0.1rem 0.625rem;
-  font-weight: 700;
+  font-weight: var(--font-bold);
   min-block-size: 1.5em;
   text-transform: uppercase;
 }

src/assets/css/global/fonts.css

@@ -5,15 +5,19 @@
     font-style: normal;
     font-display: swap;
     font-weight: 800;
-    src: local(''), url('/assets/fonts/figtree/figtree-extrabold.woff2') format('woff2');
+    src:
+      local(''),
+      url('/assets/fonts/figtree/figtree-extrabold.woff2') format('woff2');
   }
 
   @font-face {
     font-family: Figtree;
     font-style: normal;
     font-display: swap;
-    font-weight: 600;
+    font-weight: 700;
-    src: local(''), url('/assets/fonts/figtree/figtree-semibold.woff2') format('woff2');
+    src:
+      local(''),
+      url('/assets/fonts/figtree/figtree-bold.woff2') format('woff2');
   }
 
   @font-face {
@@ -21,7 +25,9 @@
     font-style: normal;
     font-display: swap;
     font-weight: 500;
-    src: local(''), url('/assets/fonts/figtree/figtree-medium.woff2') format('woff2');
+    src:
+      local(''),
+      url('/assets/fonts/figtree/figtree-medium.woff2') format('woff2');
   }
 
   @font-face {
@@ -29,7 +35,8 @@
     font-style: italic;
     font-display: swap;
     font-weight: 500;
-    src: local(''),
+    src:
+      local(''),
       url('/assets/fonts/figtree/figtree-mediumitalic.woff2') format('woff2');
   }
 }
@@ -38,7 +45,8 @@
 @supports (font-variation-settings: normal) {
   @font-face {
     font-family: 'Figtree';
-    src: url('/assets/fonts/figtree/figtree-variable[wght].woff2')
+    src:
+      url('/assets/fonts/figtree/figtree-variable[wght].woff2')
         format('woff2 supports variations'),
       url('/assets/fonts/figtree/figtree-variable[wght].woff2') format('woff2-variations');
     font-weight: 300 900;
@@ -48,7 +56,8 @@
 
   @font-face {
     font-family: 'Figtree';
-    src: url('/assets/fonts/figtree/figtree-variable-italic[wght].woff2')
+    src:
+      url('/assets/fonts/figtree/figtree-variable-italic[wght].woff2')
         format('woff2 supports variations'),
       url('/assets/fonts/figtree/figtree-variable-italic[wght].woff2')
         format('woff2-variations');
@@ -64,7 +73,8 @@
   font-style: normal;
   font-display: swap;
   font-weight: 700;
-  src: local(''),
+  src:
+    local(''),
     url(/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2) format('woff2');
 }
 
@@ -73,5 +83,7 @@
   font-style: normal;
   font-display: swap;
   font-weight: normal;
-  src: local(''), url(/assets/fonts/robotomono/robotomono-regular.woff2) format('woff2');
+  src:
+    local(''),
+    url(/assets/fonts/robotomono/robotomono-regular.woff2) format('woff2');
 }

src/assets/css/global/global-styles.css

@@ -14,7 +14,7 @@ body {
   letter-spacing: var(--tracking);
   display: flex;
   flex-direction: column;
-  font-weight: 500;
+  font-weight: var(--font-medium);
   accent-color: var(--color-primary);
 }
 
@@ -28,7 +28,7 @@ h2,
 h3 {
   line-height: 1.2;
   letter-spacing: var(--tracking-s);
-  font-weight: 700;
+  font-weight: var(--font-bold);
   font-family: var(--font-display);
 }
 
@@ -74,7 +74,7 @@ svg {
 }
 
 strong {
-  font-weight: 800;
+  font-weight: var(--font-extra-bold);
 }
 
 hr {

tailwind.config.js

@@ -11,12 +11,17 @@ const tokensToTailwind = require('./src/utilities/tokens-to-tailwind.js');
 const colorTokens = require('./src/_data/designTokens/colors.json');
 const fontTokens = require('./src/_data/designTokens/fonts.json');
 const spacingTokens = require('./src/_data/designTokens/spacing.json');
-const textSizeTokens = require('./src/_data/designTokens/sizes.json');
+const textSizeTokens = require('./src/_data/designTokens/textSizes.json');
+const textLeadingTokens = require('./src/_data/designTokens/textLeading.json');
+const textWeightTokens = require('./src/_data/designTokens/textWeights.json');
+const viewportTokens = require('./src/_data/designTokens/viewports.json');
 
 // Process design tokens
 const colors = tokensToTailwind(colorTokens.items);
 const fontFamily = tokensToTailwind(fontTokens.items);
 const fontSize = tokensToTailwind(clampGenerator(textSizeTokens.items));
+const fontWeight = tokensToTailwind(textWeightTokens.items);
+const fontLeading = tokensToTailwind(textLeadingTokens.items);
 const spacing = tokensToTailwind(clampGenerator(spacingTokens.items));
 
 module.exports = {
@@ -24,19 +29,16 @@ module.exports = {
   presets: [],
   theme: {
     screens: {
-      ltsm: {max: '39em'},
+      ltsm: {max: `${viewportTokens.sm}px`},
-      sm: '40em',
+      sm: `${viewportTokens.sm}px`,
-      md: '63em'
+      md: `${viewportTokens.md}px`
     },
     colors,
     spacing,
-    fontSize,
     fontFamily,
-    fontWeight: {
+    fontSize,
-      normal: 500,
+    fontWeight,
-      semi: 600,
+    fontLeading,
-      bold: 800
-    },
     backgroundColor: ({theme}) => theme('colors'),
     textColor: ({theme}) => theme('colors'),
     margin: ({theme}) => ({
@@ -91,7 +93,9 @@ module.exports = {
         {key: 'colors', prefix: 'color'},
         {key: 'spacing', prefix: 'space'},
         {key: 'fontSize', prefix: 'size'},
-        {key: 'fontFamily', prefix: 'font'}
+        {key: 'fontLeading', prefix: 'leading'},
+        {key: 'fontFamily', prefix: 'font'},
+        {key: 'fontWeight', prefix: 'font'}
       ];
 
       groups.forEach(({key, prefix}) => {