chore: adopt design tokens

.gitignore

@@ -31,3 +31,6 @@ yarn-error.log*
 # Docs should be pulled from the svg/svgo repository
 /docs/
 /.svgo/
+
+# Generated CSS variables from Design Tokens
+src/css/_variables.css

package.json

@@ -33,13 +33,14 @@
     "svgo:clone": "rimraf .svgo && git clone https://github.com/svg/svgo.git .svgo --depth 1",
     "svgo:copy": "rimraf .svgo && cp -r ../svgo .svgo",
     "optimize-svgs": "npx svgo --pretty --indent 2 ./src/vectors/*",
+    "style-dictionary": "npx style-dictionary build --config style-dictionary.config.mjs",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "lint:types": "tsc",
     "qa": "yarn run lint && yarn run lint:types",
     "docusaurus": "docusaurus",
-    "start": "docusaurus start",
-    "build": "docusaurus build",
+    "start": "yarn run style-dictionary && docusaurus start",
+    "build": "yarn run style-dictionary && docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
@@ -77,6 +78,7 @@
     "eslint-plugin-react": "^7.37.5",
     "globals": "^16.2.0",
     "rimraf": "^6.0.1",
+    "style-dictionary": "^5.0.1",
     "typescript": "^5.8.3"
   },
   "resolutions": {

src/css/custom.css

@@ -1,34 +1,32 @@
+@import url('_variables.css');
+
 :root {
   --svgo-global-width: 1200px;
   --svgo-pill-bg-color: #cbe2f9;
   --svgo-pill-fg-color: #0b5cad;
-  --svgo-pri-bg-color: #fff;
-  --svgo-pri-fg-color: #153243;
   --svgo-search-bg-color: var(--svgo-tir-bg-color);
   --svgo-search-bg-hover: #dbdbdb;
   --svgo-sec-bg-color: #f6f5f4;
   --svgo-tir-bg-color: #e8e8e8;
   --svgo-logo-fg-color: #1d1d1b;
   --svgo-button-hover-background-color: #1b4055;
-  --ifm-background-color: var(--svgo-pri-bg-color) !important;
+  --ifm-background-color: var(--svgo-background) !important;
   --ifm-code-font-size: 95%;
   --ifm-color-primary: #216be2;
   --ifm-container-width-xl: var(--svgo-global-width);
   --ifm-footer-padding-horizontal: 1rem;
-  --ifm-navbar-background-color: var(--svgo-pri-bg-color);
+  --ifm-navbar-background-color: var(--svgo-background);
   --ifm-navbar-shadow: 0 .5rem .5rem 0 #0a1e291a;
   --ifm-spacing-horizontal: 1rem;
   --search-local-hit-background: var(--svgo-sec-bg-color);
 
-  color: var(--svgo-pri-fg-color);
+  color: var(--svgo-foreground);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --svgo-pill-bg-color: #0b5cad;
     --svgo-pill-fg-color: #cbe2f9;
-    --svgo-pri-bg-color: #142631;
-    --svgo-pri-fg-color: #fff;
     --svgo-search-bg-color: #5a6a74;
     --svgo-search-bg-hover: #647682;
     --svgo-sec-bg-color: #1b3241;
@@ -42,8 +40,8 @@
 
 /* Button overrides */
 .button {
-  --ifm-button-color: var(--svgo-pri-bg-color);
-  --ifm-button-background-color: var(--svgo-pri-fg-color);
+  --ifm-button-color: var(--svgo-background);
+  --ifm-button-background-color: var(--svgo-foreground);
 }
 .button:hover, .button:focus {
   --ifm-button-background-color: var(--svgo-button-hover-background-color);
@@ -63,7 +61,7 @@
 
 /* TOC overrides */
 .table-of-contents__link--active {
-  color: var(--svgo-pri-fg-color);
+  color: var(--svgo-foreground);
 }
 
 /* Search overrides */
@@ -75,7 +73,7 @@ nav .navbar__search-input:hover, nav .navbar__search-input:focus {
   background-color: var(--svgo-search-bg-hover);
 }
 nav div kbd {
-  background-color: var(--svgo-pri-bg-color) !important;
+  background-color: var(--svgo-background) !important;
 }
 @media (min-width: 577px) {
   nav .navbar__search-input {

style-dictionary.config.mjs

@@ -0,0 +1,100 @@
+/**
+ * @fileoverview
+ *   Configuration for style-dictionary, to read, transform, and generate CSS
+ *   from our design tokens.
+ */
+
+import StyleDictionary from 'style-dictionary';
+
+/**
+ * Prefix to add to every design token to avoid conflicts with other design
+ * systems or component libraries that are present.
+ */
+const PREFIX = 'svgo';
+
+/**
+ * All supported color schemes. Many design tokens are prefixed with one of
+ * these if they belong to a certain color scheme.
+ */
+const COLOR_SCHEMES = {
+  Light: 'Light',
+  Dark: 'Dark',
+}
+
+StyleDictionary.registerPreprocessor({
+  name: 'prefix',
+  preprocessor: (dict) => {
+    /** @type {Record<string, import('style-dictionary').PreprocessedTokens>} */
+    const result = {};
+
+    for (const key in dict) {
+      result[`${PREFIX}.${key}`] = dict[key];
+    }
+
+    return result;
+  },
+});
+
+StyleDictionary.registerFormat({
+  name: 'css/variables-with-prefers-color-scheme',
+  format: (dictionary) => {
+    const { allTokens } = dictionary.dictionary;
+    const [ defaultThemeTokens, darkThemeTokens ] = allTokens.reduce((acc, val) => {
+      const theme = val.path[1];
+      const arr = theme === COLOR_SCHEMES.Dark ? acc[1] : acc[0];
+
+      if (Object.values(COLOR_SCHEMES).includes(theme)) {
+        val.name = val.name.replace(`${theme.toLowerCase()}-`, '');
+      }
+
+      arr.push(val);
+      return acc;
+    }, /** @type {[import('style-dictionary').TransformedToken[], import('style-dictionary').TransformedToken[]]} */ ([[], []]));
+
+    return `/*
+ * This file was auto-generated with style-dictionary using design tokens.
+ *
+ * ⚠️ Changes will not be persisted!
+ *
+ * See:
+ * - ~/tokens/tokens.json
+ * - ~/style-dictionary.config.mjs
+ *
+ * Learn more:
+ * - https://www.w3.org/community/design-tokens/
+ * - https://penpot.app/collaboration/design-tokens
+ * - https://styledictionary.com
+ */
+
+:root {
+  ${defaultThemeTokens.map(prop => `--${prop.name}: ${prop.$value};`).join('\n  ')}
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    ${darkThemeTokens.map(prop => `--${prop.name}: ${prop.$value};`).join('\n    ')}
+  }
+}`;
+  }
+});
+
+export default {
+  source: [
+    'tokens/*.json',
+  ],
+  preprocessors: [
+    'prefix',
+  ],
+  platforms: {
+    css: {
+      transformGroup: 'css',
+      buildPath: 'src/css/',
+      files: [
+        {
+          destination: '_variables.css',
+          format: 'css/variables-with-prefers-color-scheme',
+        },
+      ],
+    },
+  },
+}

tokens/tokens.json

@@ -0,0 +1,62 @@
+{
+  "Light": {
+    "background": {
+      "$value": "#fff",
+      "$type": "color",
+      "$description": ""
+    },
+    "foreground": {
+      "$value": "#153243",
+      "$type": "color",
+      "$description": ""
+    }
+  },
+  "Dark": {
+    "background": {
+      "$value": "#142631",
+      "$type": "color",
+      "$description": ""
+    },
+    "foreground": {
+      "$value": "#F4F4F9",
+      "$type": "color",
+      "$description": ""
+    }
+  },
+  "$themes": [
+    {
+      "id": "cb0303b0-bab9-80fb-8006-95dfe2bbfa44",
+      "name": "Light",
+      "group": "",
+      "description": "",
+      "is-source": false,
+      "modified-at": "2025-08-02T12:01:50.920+01:00",
+      "selectedTokenSets": {
+        "Light": "enabled"
+      }
+    },
+    {
+      "id": "cb0303b0-bab9-80fb-8006-95dfe721ab14",
+      "name": "Dark",
+      "group": "",
+      "description": "",
+      "is-source": false,
+      "modified-at": "2025-08-02T12:01:50.920+01:00",
+      "selectedTokenSets": {
+        "Dark": "enabled"
+      }
+    }
+  ],
+  "$metadata": {
+    "tokenSetOrder": [
+      "Light",
+      "Dark"
+    ],
+    "activeThemes": [
+      "/Dark"
+    ],
+    "activeSets": [
+      "Dark"
+    ]
+  }
+}