feat: Add design tokens

Author: studioromeo

.gitignore

@@ -1,2 +1,5 @@
 node_modules
 _site
+src/css/tokens.css
+src/_data/tokens.js
+src/_data/tokens.d.ts

eleventy.config.js

@@ -5,6 +5,24 @@ import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 import site from "./src/_data/site.js";
 
 export default async function (eleventyConfig) {
+    eleventyConfig.addShortcode("getToken", function (tokenId, mode) {
+        const { resolver } = this.ctx.environments.tokens;
+
+        const tokenSet = resolver.apply(mode ? { mode } : {});
+        const token = tokenSet?.[tokenId];
+
+        if (!token) {
+            console.warn(`Token not found: ${tokenId}`);
+            return "";
+        }
+
+        if (token.$type === "color") {
+            return `oklch(${token.$value.components.join(" ")})`;
+        }
+
+        return token.$value;
+    });
+
     eleventyConfig.setFrontMatterParsingOptions({
         excerpt: true,
         excerpt_separator: "---",

package-lock.json

@@ -3,8 +3,8 @@
     "version": "1.0.0",
     "description": "My personal blog",
     "scripts": {
-        "start": "eleventy --serve",
-        "build": "eleventy",
+        "start": "tz build --watch & eleventy --serve",
+        "build": "tz build && eleventy",
         "new:post": "node scripts/new-post.js"
     },
     "author": "Robert Rhoades",
@@ -13,7 +13,10 @@
         "@11ty/eleventy": "^3.1.5",
         "@11ty/eleventy-img": "^6.0.4",
         "@11ty/eleventy-plugin-rss": "^3.0.0",
-        "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2"
+        "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
+        "@terrazzo/cli": "^2.1.0",
+        "@terrazzo/plugin-css": "^2.1.0",
+        "@terrazzo/plugin-js": "^2.1.0"
     },
     "devDependencies": {
         "@shopify/prettier-plugin-liquid": "^1.10.2",

package.json

@@ -6,7 +6,8 @@
     <meta name="description" content="{{ site.description }}">
     <meta property="og:description" content="{{ site.description }}">
 {% endif %}
-<meta name="theme-color" content="#359567">
+
+<meta name="theme-color" content="{% getToken 'color.bg.accent' %}">
 
 <meta property="og:site_name" content="{{ site.title }}">
 {% if title %}

src/_includes/meta.html

@@ -1,5 +1,6 @@
 import * as sass from "sass";
 import path from "path";
+import fs from "node:fs/promises";
 
 export default class {
     async data() {
@@ -21,7 +22,13 @@ export default class {
 
     async render({ entryFile }) {
         try {
-            return await this.compileSass(entryFile);
+            // Read the tokens.css
+            const tokensPath = path.join(import.meta.dirname, "tokens.css");
+            const tokensCss = await fs.readFile(tokensPath, "utf-8");
+
+            const sassCss = await this.compileSass(entryFile);
+
+            return tokensCss + "\n" + sassCss;
         } catch (error) {
             throw error;
         }

src/css/index.11ty.js

@@ -4,22 +4,21 @@ html {
 }
 
 body {
-    background: rgb(248, 246, 241);
-    // background: $colour-grey;
-    color: $colour-space-grey;
-    font-family: $font-family;
+    background: var(--color-bg-page);
+    color: var(--color-text-primary);
+    font-family: var(--font-family);
     font-optical-sizing: auto;
     font-size: var(--step-0);
-    line-height: $line-height;
+    line-height: var(--font-line-height);
     font-optical-sizing: auto;
     // font-variation-settings: "wdth" 100;
     margin: 0 auto;
-    max-width: $container-width;
+    max-width: var(--size-container);
     text-rendering: optimizeLegibility;
     word-wrap: break-word;
 
     &::before {
-        background: $colour-green;
+        background: var(--color-bg-accent);
         content: "";
         height: 12.5rem;
         left: 0;
@@ -31,7 +30,7 @@ body {
 }
 
 ::selection {
-    background: $colour-grey;
-    color: $colour-space-grey-dark;
+    background: var(--color-bg-page);
+    color: var(--color-text-heading);
     text-shadow: none;
 }

src/scss/base.body.scss

@@ -5,8 +5,8 @@ h4,
 h5 {
     text-wrap: balance;
     line-height: 1.15;
-    margin-top: 3rem;
-    margin-bottom: 1rem;
+    margin-top: var(--spacing-xl);
+    margin-bottom: var(--spacing-md);
     word-break: break-word;
     hyphens: auto;
 }

src/scss/base.heading.scss

@@ -1,9 +1,9 @@
 a {
-    color: $colour-space-grey-dark;
+    color: var(--color-text-heading);
     text-decoration: none;
 
     &:hover,
     &:focus {
-        color: $colour-space-grey-light;
+        color: var(--color-text-secondary);
     }
 }

src/scss/base.link.scss

@@ -1,8 +1,8 @@
 blockquote {
-    border-left: 3px solid $colour-space-grey-light;
-    padding-left: 1rem;
+    border-left: 3px solid var(--color-border-subtle);
+    padding-left: var(--spacing-md);
 
     cite {
-        color: $colour-space-grey-light;
+        color: var(--color-text-secondary);
     }
 }