From 827fcc0e20833f494b5abd4cca6275cea7ebab42 Mon Sep 17 00:00:00 2001 From: William Laugesen Date: Tue, 28 Jul 2026 17:08:11 +1200 Subject: [PATCH] Add design tokens as CSS custom properties @octopusdeploy/design-system-tokens now publishes its tokens as four stylesheets, so the docs site can consume them directly instead of generating its own copy from the package's TypeScript exports. HtmlHead.astro imports them. Vite resolves the ./css/*.css subpath export and bundles them into one hashed stylesheet, so nothing is vendored and nothing can drift from the installed package version. The theme attribute moves from to . lightTheme.css and darkTheme.css select on an unscoped [data-theme="..."] so that any element can be a theme root. The site's own CSS scopes to html[data-theme='dark'], which made the hardcoded data-theme="dark" on inert - but the token stylesheets do match it, and would force dark tokens on every page regardless of the toggle. also gains data-theme="light" as a no-JS default, since the inline script in HEADER_SCRIPTS is what normally sets it. No visual change: 1,184 custom properties are defined and nothing consumes them yet. Co-Authored-By: Claude Opus 5 (1M context) --- package.json | 1 + pnpm-lock.yaml | 8 ++++++++ src/layouts/Default.astro | 4 ++-- src/themes/octopus/components/HtmlHead.astro | 8 ++++++++ 4 files changed, 19 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 7fb50e08dc..deee76ecec 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "dependencies": { "@astrojs/markdown-remark": "7.2.1", "@astrojs/mdx": "^7.0.3", + "@octopusdeploy/design-system-tokens": "^2026.3.8240", "astro": "^7.0.9", "astro-accelerator-utils": "^0.3.84", "glob": "^13.0.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d90cff0c41..e481c5b788 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,6 +24,9 @@ importers: '@astrojs/mdx': specifier: ^7.0.3 version: 7.0.3(@astrojs/markdown-satteri@0.3.4)(astro@7.0.9(@astrojs/markdown-remark@7.2.1)(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)(@types/node@24.10.1)(rollup@4.60.3)(yaml@2.8.4)) + '@octopusdeploy/design-system-tokens': + specifier: ^2026.3.8240 + version: 2026.3.8240 astro: specifier: ^7.0.9 version: 7.0.9(@astrojs/markdown-remark@7.2.1)(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)(@types/node@24.10.1)(rollup@4.60.3)(yaml@2.8.4) @@ -814,6 +817,9 @@ packages: '@emnapi/core': ^1.7.1 '@emnapi/runtime': ^1.7.1 + '@octopusdeploy/design-system-tokens@2026.3.8240': + resolution: {integrity: sha512-SxabL5Y2bDD0kEEEtVUtTos3tiJ+2FEWTno1a40YVw/Y5eUbRnXUTChf4oVsRzw32GXpjBhxoTxiOBdOceeelA==} + '@oslojs/encoding@1.1.0': resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==} @@ -3929,6 +3935,8 @@ snapshots: '@tybys/wasm-util': 0.10.3 optional: true + '@octopusdeploy/design-system-tokens@2026.3.8240': {} + '@oslojs/encoding@1.1.0': {} '@oxc-project/types@0.139.0': {} diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro index 08789ba364..1e90ab5912 100644 --- a/src/layouts/Default.astro +++ b/src/layouts/Default.astro @@ -70,9 +70,9 @@ const isSearchPage = const showSearch = !isSearchPage; --- - + - +
by the inline theme script in HEADER_SCRIPTS. +import '@octopusdeploy/design-system-tokens/css/globals.css'; +import '@octopusdeploy/design-system-tokens/css/textTheme.css'; +import '@octopusdeploy/design-system-tokens/css/lightTheme.css'; +import '@octopusdeploy/design-system-tokens/css/darkTheme.css'; + const stats = new accelerator.statistics('octopus/components/HtmlHead.astro'); stats.start();