Add @octopusdeploy/design-system-tokens as CSS custom properties

.prettierignore

@@ -0,0 +1,3 @@
+# Generated by `npm run tokens` from @octopusdeploy/design-system-tokens.
+# Excluded so prettier and the generator don't rewrite each other on every dev run.
+public/docs/css/design-tokens.css

package.json

@@ -9,13 +9,16 @@
         "pnpm": ">=9.10.0"
     },
     "scripts": {
-        "dev": "npm-run-all --parallel dev:img dev:dictionary dev:astro dev:watch",
+        "dev": "npm-run-all dev:tokens --parallel dev:img dev:dictionary dev:astro dev:watch",
         "dev:dictionary": "node ./dictionary-sorter.mjs",
         "dev:img": "node ./src/themes/octopus/utilities/img.mjs",
+        "dev:tokens": "npm run tokens",
         "dev:astro": "astro dev --mode staging",
+        "tokens": "node ./src/themes/octopus/utilities/design-tokens.mjs",
         "dev:watch": "onchange 'src/**/*.{js,mjs,ts,astro,css}' 'public/docs/js/**/*.js' 'public/docs/css/**/*.css' -- prettier --write --plugin=prettier-plugin-astro {{changed}}",
         "astro": "astro",
         "snapshot": "node --env-file=.env.production ./scripts/snapshot-shared.mjs",
+        "prebuild": "npm run tokens",
         "build": "astro build",
         "crawl": "linkinator ./dist --skip \"^(?!http://localhost)\" --recurse  --verbosity error",
         "format": "prettier --write --plugin=prettier-plugin-astro 'src/**/*.{js,mjs,ts,astro,css}' 'public/docs/js/**/*.js' 'public/docs/css/**/*.css'",
@@ -30,6 +33,7 @@
     "dependencies": {
         "@astrojs/markdown-remark": "7.2.1",
         "@astrojs/mdx": "^7.0.3",
+        "@octopusdeploy/design-system-tokens": "^2026.3.7935",
         "astro": "^7.0.9",
         "astro-accelerator-utils": "^0.3.84",
         "glob": "^13.0.6",