@abgov/design-tokens 2.6.0 → 2.7.0

package/dist/dark-theme.css

@@ -0,0 +1,182 @@
+/**
+ * Do not edit directly
+ * Generated dark theme overrides
+ */
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --goa-accordion-color-bg-heading: var(--goa-color-surface-heading);
+  --goa-accordion-color-bg-content: var(--goa-color-surface-table-data);
+  --goa-accordion-divider-hover: 1px solid #555555;
+  --goa-accordion-color-bg-heading-hover: var(--goa-color-surface-heading-hover);
+  --goa-accordion-border-hover: 1px solid #555555;
+  --goa-accordion-shadow: 0px 0px 0px 0px transparent;
+  --goa-badge-important-subtle-color-content: var(--goa-color-important-text);
+  --goa-badge-default-subtle-color-bg: var(--goa-color-surface-heading);
+  --goa-badge-default-subtle-border: inset 0 0 0 1px #4a4a4a;
+  --goa-button-primary-hover-color-bg: #4a7a9a;
+  --goa-button-primary-destructive-hover-color-bg: #a06060;
+  --goa-button-secondary-color-text: #85b5d8;
+  --goa-button-secondary-hover-color-bg: #293d50;
+  --goa-button-secondary-hover-color-text: #85b5d8;
+  --goa-button-secondary-focus-color-text: #85b5d8;
+  --goa-button-secondary-disabled-color-text: #888888;
+  --goa-button-tertiary-color-bg: var(--goa-color-surface-100);
+  --goa-button-tertiary-hover-color-bg: var(--goa-color-surface-250);
+  --goa-button-tertiary-hover-border: 1px solid #666666;
+  --goa-button-tertiary-disabled-color-text: #888888;
+  --goa-callout-h-info-heading-bg-color: #386590;
+  --goa-callout-h-important-heading-bg-color: #5e4e20;
+  --goa-callout-h-success-heading-bg-color: #386030;
+  --goa-callout-h-emergency-heading-bg-color: #6e4242;
+  --goa-callout-info-content-bg-color: #1e2830;
+  --goa-callout-h-info-content-bg-color: #1e2830;
+  --goa-callout-l-info-content-bg-color: #1e2830;
+  --goa-callout-important-content-bg-color: #28251e;
+  --goa-callout-h-important-content-bg-color: #28251e;
+  --goa-callout-l-important-content-bg-color: #28251e;
+  --goa-callout-success-content-bg-color: #1e2820;
+  --goa-callout-h-success-content-bg-color: #1e2820;
+  --goa-callout-l-success-content-bg-color: #1e2820;
+  --goa-callout-emergency-content-bg-color: #2a1c1c;
+  --goa-callout-h-emergency-content-bg-color: #352020;
+  --goa-callout-l-emergency-content-bg-color: #352020;
+  --goa-checkbox-color-label: var(--goa-color-text-default);
+  --goa-container-interactive-bg-color: var(--goa-color-surface-widget);
+  --goa-container-interactive-heading-bg-color: var(--goa-color-surface-container-heading);
+  --goa-container-non-interactive-bg-color: var(--goa-color-surface-widget);
+  --goa-container-non-interactive-heading-bg-color: var(--goa-color-surface-container-heading);
+  --goa-drawer-overlay-color: rgba(0, 0, 0, 0.6);
+  --goa-drawer-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3), 0 8px 40px 0 rgba(0, 0, 0, 0.4);
+  --goa-dropdown-color-bg: var(--goa-color-surface-input);
+  --goa-file-upload-color-bg-focus: #252d35;
+  --goa-file-upload-color-bg-hover: #252d35;
+  --goa-footer-color-text: #909090;
+  --goa-footer-color-links: #909090;
+  --goa-footer-color-links-hover: #aaaaaa;
+  --goa-footer-color-links-secondary: #808080;
+  --goa-footer-color-links-secondary-hover: #999999;
+  --goa-app-header-color-bg: var(--goa-color-surface-app-header);
+  --goa-app-header-logo-mobile: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC4wMjgzMjAzIiB3aWR0aD0iMzEuNjk1NCIgaGVpZ2h0PSIzMS42ODc2IiByeD0iNCIgZmlsbD0iIzAwQjZFRCIvPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNTg2NTNfMjAzODgwKSI+CjxtYXNrIGlkPSJtYXNrMF81ODY1M18yMDM4ODAiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9Ii0xMSIgeT0iLTIiIHdpZHRoPSI0NyIgaGVpZ2h0PSIzOSI+CjxwYXRoIGQ9Ik0yMi4wMTYxIDMxLjEwMTVDMTkuNTQ1MyAzMC4xOTY5IDE3LjEzMzggMjkuMTQgMTQuNzk1OCAyNy45MzY5QzE2LjkxODMgMjcuMTYzMSAxOC45ODc5IDI2LjI1MzIgMjAuOTkxNSAyNS4yMTMxQzIxLjE5NTkgMjcuMTk3NiAyMS41Mzc3IDI5LjE2NTggMjIuMDE0NiAzMS4xMDM2TTM1LjI4NCA2LjcxMTMyQzM0LjI1MDEgNi41ODE1OCAzNC43ODczIDcuMDU4OTYgMzQuNDk5MiA4LjQxMTU0QzMzLjI1MzcgMTQuMjQzMyAyOC40NDkzIDE4LjQ0NjYgMjMuNjI2MiAyMS4yNjY0QzIzLjEyMDggMTQuNTg4MSAyMy4zMjczIDcuMTczNjQgMjQuNTkzNyAyLjYyOTkyQzI1LjY2MjMgLTEuMjA1NjIgMjYuOTMzMSAtMC41MDE3MjkgMjUuMzU2OSAtMS4zMDc0QzIzLjY5NjIgLTIuMTU1MzYgMjEuOTE2NCAtMS4wMzUwMiAyMC40NzQ2IDEuODIyMUMxOS4wMzI3IDQuNjc5MjIgMTIuMzkyOSAyMC4xODkxIDEuNzc5MTMgMzAuNjYyMUMtMy42NDk3OCAzNi4wMjMgLTguNTYwMjggMzMuMjYxOSAtOS41NDM2OCAzMi40Mzc2Qy0xMC4zNDM3IDMxLjc2NjcgLTEwLjYzOSAzMi44MDI0IC05LjY0NjIxIDMzLjg2MzNDLTUuMjU1NTcgMzguNTYzMyAxLjE1ODkxIDM1Ljg2NjcgMy40OTQ2NyAzMy41NDkzQzkuOTQ5NTggMjcuMTQ0MSAxNy40NTQzIDEzLjM1NTkgMjAuNDkwNCA3LjUwNTUyQzIwLjEzNjkgMTIuNjAxIDIwLjIxODMgMTcuNzE3MSAyMC43MzM4IDIyLjc5ODlDMTguMjg4NSAyMy45OTAxIDE1LjczODIgMjQuOTU1OSAxMy4xMTQ5IDI1LjY4NEMxMS42MTAyIDI2LjA3NTQgMTAuNjc5NiAyNi42ODM5IDEwLjY1MjEgMjcuMzc1NkMxMC42MjI1IDI4LjEzMzMgMTEuNjMyNiAyOC43NzI2IDEzLjA5MzMgMjkuNDYwOEMxNS42OTI2IDMwLjY4NjUgMjMuMzA4NSAzNC4yNTgyIDI1LjE4NTEgMzUuMzM4NEMyNi43OTE2IDM2LjI2MzggMjcuNTc1NyAzNS41NDIgMjguMDUxNSAzNC41NDI4QzI4LjY3MzIgMzMuMjQwNCAyNi45Njg1IDMyLjQ4NzggMjUuMzE2NSAzMS45OTc1QzI0LjU4NzQgMjkuMjQ4NSAyNC4wOTIxIDI2LjQ0MzcgMjMuODM1NiAyMy42MTI1QzI3LjcwNzEgMjEuMjQ3MSAzMS41MTg3IDE4LjA5MzIgMzMuNzE1OCAxNC4xNjAyQzM0LjQyNTIgMTIuNzc3OSAzNC45NTI1IDExLjMxMDggMzUuMjg0OCA5Ljc5NDk0QzM1LjUxNDggOC44NjE0NSAzNS41Nzc2IDcuODk1MDcgMzUuNDcwMyA2LjkzOTk3QzM1LjQ3MDMgNi45Mzk5NyAzNS40NDE0IDYuNzMxMzkgMzUuMjg0OCA2LjcxMTMyIiBmaWxsPSIjQzJDNkNFIi8+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMF81ODY1M18yMDM4ODApIj4KPHJlY3QgeD0iMC4wMjgzMjAzIiB5PSItMC4wMDE5NTMxMiIgd2lkdGg9IjMxLjY5NTQiIGhlaWdodD0iMzEuNjk1NCIgcng9IjMuMDQ3NjIiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF81ODY1M18yMDM4ODAiPgo8cmVjdCB5PSIwLjAwNTg1OTM4IiB3aWR0aD0iMzIiIGhlaWdodD0iMzEuOTkyMiIgcng9IjQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);
+  --goa-app-header-logo-desktop: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTE4IiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMTE4IDMyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNTg0NDdfNDI3MDkpIj4KPHBhdGggZD0iTTExNy45NDYgMTZIMTA2Ljk3NFYyNi45NzE3SDExNy45NDZWMTZaIiBmaWxsPSIjMDBCNkVEIi8+CjxwYXRoIGQ9Ik00OS43OTY2IDI1LjMwMzZDNDguNzAxMSAyNS40MDg4IDQ3LjU1NzIgMjUuNTE0OCA0Ni4zNTQ5IDI1LjU2NjlDNDYuNzkyMiAyMi4yNDggNDguNTk0MyAxNy42NjczIDUwLjgzMzcgMTguMzk4N0M1Mi4xNDQ3IDE4LjgyMDIgNTEuNDM0NCAyMi43MTk4IDQ5Ljc5NTcgMjUuMzAxOEw0OS43OTY2IDI1LjMwMzZaTTQ3LjAwOTUgMjcuNTY3NEM0Ni42ODM4IDI3LjYyMDEgNDYuMzUxOSAyNy42MjAxIDQ2LjAyNjIgMjcuNTY3NEM0Ni4xMTEgMjcuNTA4NCA0Ni4xODAxIDI3LjQyOTYgNDYuMjI3OCAyNy4zMzc5QzQ2LjI3NTUgMjcuMjQ2MSA0Ni4zMDAzIDI3LjE0NDIgNDYuMzAwMSAyNy4wNDA4VjI2LjYxOTNDNDYuOTAwOCAyNi42MTkzIDQ3LjgyOTMgMjYuNTE0MiA0OC45NzY4IDI2LjQwODFDNDguNDcyMSAyNy4wMDczIDQ3Ljc3NzUgMjcuNDE2MyA0Ny4wMDk1IDI3LjU2NzRaTTYwLjY2NTkgMTkuNjY2QzYyLjA4NjQgMTguMzk4NyA2Mi43OTY3IDE4LjUwNjYgNjIuOTU3MyAxOC44MjNDNjMuMzM5OCAxOS41NjA4IDYxLjcwMTEgMjIuMTQyOCA1OC40Nzg1IDIzLjU2NTVDNTguODEwNCAyMi4wNzk3IDU5LjU3IDIwLjcyNCA2MC42NjMyIDE5LjY2Nkg2MC42NjU5Wk0xMTMuMzc0IDIwLjkzMDVDMTEzLjIxIDE4LjM0ODUgMTEwLjg2MiAxNy45MjcgMTEwLjUzNCAxOC42NjQ4QzExMC40MjUgMTguOTI4MSAxMTEuNDA4IDE4LjgyMyAxMTEuNDA4IDIwLjY2NzFDMTExLjQwOCAyMy42NzA3IDEwOC4yNCAyNy42MjIzIDEwNC4xOTYgMjcuNjIyM0MxMDIuNzkzIDI3LjcwNzEgMTAxLjQxMSAyNy4yNDQgMTAwLjM0MSAyNi4zMzAxQzk5LjI3MTkgMjUuNDE2MyA5OC41OTc1IDI0LjEyMjkgOTguNDYwMSAyMi43MjE2Qzk4LjI5NTcgMjEuNjE1MyA5OC41Njk2IDIwLjA4NjYgOTYuNjAzMiAyMC4yOTc4Qzk1LjIzMzggMjAuNDU1OSA5NC4wMzYgMjIuOTg0OSA5Mi4yODc4IDI1LjE0MzZDOTAuODEyNSAyNi45ODc4IDkwLjE1NyAyNi44Mjk2IDkwLjQ4NDcgMjUuMjQ4OEM5MC45MjIgMjMuMjQ2NCA5Mi42MTU1IDE4LjYwOTkgOTQuNTgxOSAxOC4yOTM2Qzk1LjUxMDQgMTguMTM1NCA5NS44MzgxIDE5LjY2NTEgOTYuMjI1MiAxOC43MTUxQzk2LjM2NDIgMTguMzgwNyA5Ni40MTg5IDE4LjAxNzEgOTYuMzg0NSAxNy42NTY1Qzk2LjM1MDEgMTcuMjk1OSA5Ni4yMjc2IDE2Ljk0OTQgOTYuMDI3OSAxNi42NDc0Qzk1LjgyODIgMTYuMzQ1MyA5NS41NTc0IDE2LjA5NzIgOTUuMjM5MyAxNS45MjQ3Qzk0LjkyMTIgMTUuNzUyMyA5NC41NjU3IDE1LjY2MDkgOTQuMjA0IDE1LjY1ODZDOTIuNzgzNSAxNS42NTg2IDkxLjA5IDE3LjEzNDMgODkuNjcwNCAxOC43NjcyQzg4LjQ2OSAyMC4yNDI5IDgyLjI5NTggMjguOTg5MiA3OS42NzM5IDI3LjA5MjlDNzguNDcyNSAyNi4xOTY5IDc4LjU3ODQgMjIuNjEyOCA3OS4zNDYyIDE4LjM5ODdDODAuNDU2IDE3LjkxNzYgODEuNjQ5OCAxNy42NjA2IDgyLjg1OTEgMTcuNjQyNkM4NC4wNjg0IDE3LjYyNDUgODUuMjY5MyAxNy44NDU4IDg2LjM5MyAxOC4yOTM2Qzg3LjEwMzMgMTguNjA5OSA4Ny4yMTQ2IDE4LjU1NjkgODYuODg1MSAxNy44MTkxQzg2LjQ0NzggMTYuNzEyOCA4My45OTAyIDE0Ljk3MzcgODAuMTEyMSAxNS43NjM3QzgwLjAwMjUgMTUuNzYzNyA3OS45NDc4IDE1LjgxNjcgNzkuODM4MiAxNS44MTY3QzgwLjE2NiAxNC40NDUzIDgwLjQ5MzcgMTMuMDI0NCA4MC45MzM3IDExLjY1MzlDODEuMzE2MiAxMC4zODk0IDgyLjM1NDIgOC4yMjg4NyA3OS41NjQzIDcuODYwNEM3OC42OTA3IDcuNzAyMjMgNzkuMDczMiA4LjEyMzcyIDc4Ljc0MjcgOS4yODMwN0M3OC4xOTUgMTEuMzkwNiA3Ny41NDEzIDE0LjEyODkgNzcuMDQ5MiAxNi45MjNDNzQuNTE3NiAxOC4zNjY4IDcyLjQ1MTYgMjAuNTA2MSA3MS4wOTUxIDIzLjA4ODJDNzEuNDEwNSAyMS44OTMyIDcxLjY0NzggMjAuNjc4OSA3MS44MDU0IDE5LjQ1MjlDNzEuODM2IDE5LjE0OTkgNzEuNzUyIDE4Ljg0NjQgNzEuNTY5OSAxOC42MDI0QzcxLjM4NzkgMTguMzU4NSA3MS4xMjEgMTguMTkxOCA3MC44MjIyIDE4LjEzNTRDNzAuMjIxNSAxNy45NzcyIDY5LjQ1MjggMTguMjQwNiA2OC43NDYyIDE5LjI0MTdDNjcuMDUyNyAyMS41NjA0IDY0LjkyMjkgMjUuMTk1NyA2MS42NDU1IDI2LjcyMzVDNTkuMjk2NSAyNy44Mjk5IDU4LjI1ODUgMjYuNzIzNSA1OC4yMDQ2IDI0Ljk4NjRDNTguNjE1NyAyNC44NzgxIDU5LjAxNzQgMjQuNzM3MSA1OS40MDYxIDI0LjU2NDlDNjMuNjY2NyAyMi43NzM3IDY1LjA4NzIgMjAuMDMzNSA2NC4wNDkyIDE4LjM0NzVDNjMuMDExMiAxNi43NjY3IDYwLjExNjMgMTcuMjQxMiA1Ny43Njc0IDE5LjYxMkM1Ni41Mjk5IDIwLjk4MTcgNTUuNzgwNiAyMi43MjM0IDU1LjYzNjYgMjQuNTY0OUM1NC42NTM0IDI0Ljc3NjEgNTMuNTYwNiAyNC45MzA2IDUyLjMwNDQgMjUuMDkxNUM1NC4yNzA5IDIxLjk4MjggNTQuMTA3NCAxNy43NjcgNTEuMjA4OSAxNy4wM0M0Ny44MjIgMTYuMTg3IDQ2LjEyODUgMTkuMzQ4NyA0NS40MTkxIDIxLjk4MjhDNDUuNjkzIDE5LjAzMjQgNDYuMTI5NCAxNi4wODEgNDYuNjc1MyAxMy4xODM1QzQ2Ljk0OTIgMTEuOTE5IDQ3LjgyMiA5Ljc1ODUxIDQ1LjAzMjEgOS4zOTAwNEM0NC4xNTg0IDkuMjMxODcgNDQuMjY3IDkuNjUzMzcgNDQuMzIxOCAxMC44MTI3QzQ0LjQzMTQgMTIuMzkzNiA0Mi42MjgzIDIxLjgyNTYgNDMuNTU2OCAyNS45MzU0QzQyLjM1NTQgMjYuMzAxMSA0MS44NjMzIDI3LjE5OTkgNDMuMzkyNCAyOC4wOTU5QzQ0LjMxNzQgMjguNDgxMiA0NS4zMTU5IDI4LjY1NzQgNDYuMzE2NyAyOC42MTE5QzQ3LjMxNzUgMjguNTY2MyA0OC4yOTU5IDI4LjMwMDMgNDkuMTgyMiAyNy44MzI2QzUwLjAwNjIgMjcuNDI5OCA1MC43NDcyIDI2Ljg3NTYgNTEuMzY2OCAyNi4xOTg3QzUyLjc4NzQgMjYuMDQwNiA1NC4yNjE3IDI1Ljc3NzIgNTUuNjI3NSAyNS41NjZDNTUuODQ1NiAyNy40MTAyIDU3LjEwMjcgMjguNzc5OCA1OS45NDI5IDI4LjUxNjVDNjMuOTg1MyAyOC4xNTA4IDY3LjU5MDQgMjMuMzUyNSA2OC45NTYyIDIxLjAzNDdDNjguNjgyMyAyMy41MTE2IDY3LjA0NDUgMjguOTM4IDY5Ljg4NDYgMjguNjc0N0M3MC45ODAxIDI4LjU2OTUgNzAuNTQwMSAyOC40MTE0IDcwLjU5NDkgMjcuNDYzMkM3MC44Njg3IDI0LjE5NjQgNzMuNjU0MSAyMS40MDQxIDc2LjQzNzYgMTkuNzE3MkM3NS45NDU1IDIzLjcyMTkgNzYuMTA5OCAyNy4zMDYgNzguMDIxNSAyOC40MTE0QzgxLjUxNzEgMzAuNTE4OCA4Ni4zNzkzIDI0Ljk4NjQgODkuMTA5OSAyMS42MTQ0Qzg3Ljc0MDUgMjQuNjE3OSA4Ni45NzkxIDI4LjQxMTQgODkuMDAwMyAyOC45OTFDOTEuNDA0MSAyOS42NzU4IDkzLjMxNTcgMjUuNzc3MiA5NS41NTUxIDIyLjgyNThDOTUuODI5IDI0LjkzMzMgOTcuMzAzNCAyOC42MjE2IDEwMy4yMDMgMjguNjIxNkMxMDkuNTM5IDI4LjU2ODYgMTEzLjUyNyAyNC44ODAzIDExMy4zNjMgMjAuOTI4NkwxMTMuMzc0IDIwLjkzMDVaTTI3LjgyMTYgMjcuNTExN0MyNS42OTI2IDI2Ljc2NTYgMjMuNjEyNyAyNS44ODU1IDIxLjU5NDUgMjQuODc2NkMyMy40MjM0IDI0LjIzMTIgMjUuMjExMSAyMy40NzQ1IDI2Ljk0NzkgMjIuNjExQzI3LjEzNzUgMjQuMjYxMSAyNy40MjkzIDI1Ljg5NzggMjcuODIxNiAyNy41MTE3Wk00My45NTEyIDMwLjQ2NzZDNDMuODk2NCAzMC4zMDk1IDQzLjQ1OTEgMzAuNTIwNyA0My4wNzc1IDMwLjQ2NzZDNDEuOTI5OSAzMC4zMDk1IDQwLjQwMDggMjguNzgxNyAzOS45NjM1IDI2LjMwNDhDMzkuMTQxOSAyMS44MjQ3IDM5LjYzNTggMTcuNDAwMyA0MS4wMDE1IDEwLjgxMzZDNDEuMjc1NCA5LjU0OTE0IDQyLjE0OSA3LjM4ODYyIDM5LjM1ODIgNi45NjcxMkMzOC40ODQ2IDYuODYxOTggMzguOTIwOSA3LjI4MzQ3IDM4LjcwMjcgOC4zODk3OUMzNy42MDcyIDEzLjI5MDUgMzMuNDU4OSAxNi44MjA2IDI5LjMwNzggMTkuMTkxNUMyOC44NzA2IDEzLjYwNTkgMjkuMDM0IDcuMzM1NTkgMzAuMTI5NSAzLjU0MjExQzMxLjA2MDcgMC4zMjgzMTQgMzIuMTUyNSAwLjkwNzk4NyAzMC43ODY4IDAuMjIzMTY4QzI5LjQyMSAtMC40NjE2NSAyNy44MzcxIDAuNDMzNDYgMjYuNTgwOSAyLjg1NTQ3QzI1LjMyNDggNS4yNzc0OCAxOS41OTM0IDE4LjI5NjMgMTAuNDEzIDI3LjA5NTdDNS43MTY5NiAzMS41NzQgMS40NTQ1MiAyOS4yNTYyIDAuNjM0NzEgMjguNTcxNEMtMC4wNzU1NDUzIDI3Ljk5MTcgLTAuMjkzNzM0IDI4Ljg4NzcgMC41MjUxNTkgMjkuNzgyOEM0LjI5NDYyIDMzLjc4NzUgOS44NjYyIDMxLjUyIDExLjg4NjUgMjkuNTcxNkMxNy40NTUzIDI0LjE5NzMgMjMuOTU4MSAxMi42MDQ4IDI2LjU4NDYgNy43MDQ5N0MyNi4yNzQ5IDExLjk4ODYgMjYuMzQ3OSAxNi4yOTE0IDI2LjgwMjggMjAuNTYyQzI0LjY5MTYgMjEuNTU3NCAyMi40OTg1IDIyLjM2ODQgMjAuMjQ4IDIyLjk4NThDMTguOTM3IDIzLjMwMjIgMTguMTE3MiAyMy44Mjg4IDE4LjExNzIgMjQuNDA4NUMxOC4xMTcyIDI0Ljk4ODIgMTguOTkwOSAyNS41Njc5IDIwLjI0OCAyNi4xNDU3QzIyLjQ4NzQgMjcuMTk5OSAyOS4wOTcgMzAuMTUwNCAzMC42ODA5IDMxLjA5ODVDMzIuMDUwMyAzMS44ODg1IDMyLjc1NjkgMzEuMjU2NyAzMy4xMzk0IDMwLjQxMzdDMzMuNjg3MSAyOS4zMDc0IDMyLjIxMDkgMjguNjc2NSAzMC43OTA0IDI4LjMwNjJDMzAuMTY0NyAyNS45OTE5IDI5LjcyNjMgMjMuNjMwOCAyOS40Nzk1IDIxLjI0NTlDMzIuODExNiAxOS4yNDM2IDM2LjE0MzggMTYuNjA5NCAzOC4wMDA3IDEzLjI5MTRDMzcuNTA5NiAxNi4wMzQzIDM2LjMwNzIgMjUuNDYzNiAzOS4zNzAxIDI5LjQxNTNDMzkuNzkzNiAyOS45NjA3IDQwLjM0MDEgMzAuMzk3OCA0MC45NjQ5IDMwLjY5MDdDNDEuNTg5NiAzMC45ODM2IDQyLjI3NDggMzEuMTI0IDQyLjk2NDMgMzEuMTAwM0M0My43MjkzIDMxLjA0NzMgNDQuMDU5OCAzMC41NzM3IDQzLjk0NzUgMzAuNDY3NiIgZmlsbD0iI0MyQzZDRSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzU4NDQ3XzQyNzA5Ij4KPHJlY3Qgd2lkdGg9IjExNy45NDYiIGhlaWdodD0iMzIiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);
+  --goa-app-header-nav-menu-dropdown-shadow: drop-shadow(0px 12px 16px rgba(0, 0, 0, 0.3)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.15));
+  --goa-icon-button-default-hover-color-bg: #3a3a3a;
+  --goa-icon-button-dark-hover-color-bg: #3a3a3a;
+  --goa-text-input-color-icon: #aaaaaa;
+  --goa-link-color-light-visited: #9b8ec9;
+  --goa-microsite-header-alpha-badge-color-text: #4d3700;
+  --goa-microsite-header-beta-badge-color-text: #00527c;
+  --goa-notification-banner-important-high-close-bg-hover: #a88520;
+  --goa-notification-banner-important-low-close-bg-hover: #a88520;
+  --goa-notification-banner-emergency-high-close-bg-hover: #b06060;
+  --goa-notification-banner-emergency-low-close-bg-hover: #b06060;
+  --goa-popover-color-bg: var(--goa-color-surface-popover);
+  --goa-circular-progress-color-background: rgba(30, 30, 30, 0.9);
+  --goa-radio-border-disabled: 1px solid #555555;
+  --goa-radio-color-bg: var(--goa-color-surface-input);
+  --goa-radio-color-bg-error-hover: #3a1818;
+  --goa-radio-label-color-disabled: #6a6a6a;
+  --goa-table-color-bg-heading-hover: var(--goa-color-surface-heading-hover);
+  --goa-table-color-bg-heading: var(--goa-color-surface-heading);
+  --goa-table-color-bg-data: var(--goa-color-surface-table-data);
+  --goa-temporary-notification-color-bg-basic: var(--goa-color-surface-heading);
+  --goa-work-side-menu-account-bg: var(--goa-color-surface-widget);
+  --goa-work-side-menu-logo: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgZmlsbD0nbm9uZSc+PHJlY3Qgd2lkdGg9JzMxLjY5NScgaGVpZ2h0PSczMS42ODgnIHg9Jy4wMjgnIGZpbGw9JyMwMDg0QkInIHJ4PSc0Jy8+PGcgY2xpcC1wYXRoPSd1cmwoI2EpJz48bWFzayBpZD0nYicgd2lkdGg9JzQ3JyBoZWlnaHQ9JzM5JyB4PSctMTEnIHk9Jy0yJyBtYXNrVW5pdHM9J3VzZXJTcGFjZU9uVXNlJyBzdHlsZT0nbWFzay10eXBlOmFscGhhJz48cGF0aCBmaWxsPScjNTQ1ODYwJyBkPSdNMjIuMDE3IDMxLjEwM2E2My40NyA2My40NyAwIDAgMS03LjIyLTMuMTY0IDUyLjQxIDUyLjQxIDAgMCAwIDYuMTk1LTIuNzI0IDQzLjE0OCA0My4xNDggMCAwIDAgMS4wMjMgNS44OW0xMy4yNy0yNC4zOTJjLTEuMDM0LS4xMy0uNDk3LjM0OC0uNzg1IDEuNy0xLjI0NiA1LjgzMi02LjA1IDEwLjAzNS0xMC44NzMgMTIuODU1LS41MDYtNi42NzgtLjMtMTQuMDkzLjk2Ny0xOC42MzYgMS4wNjktMy44MzYgMi4zNC0zLjEzMi43NjMtMy45MzgtMS42Ni0uODQ4LTMuNDQuMjczLTQuODgyIDMuMTNDMTkuMDMzIDQuNjggMTIuMzkzIDIwLjE5IDEuNzggMzAuNjY0Yy01LjQzIDUuMzYtMTAuMzQgMi42LTExLjMyMyAxLjc3NS0uOC0uNjctMS4wOTYuMzY1LS4xMDMgMS40MjYgNC4zOSA0LjcgMTAuODA1IDIuMDAzIDEzLjE0MS0uMzE0IDYuNDU1LTYuNDA1IDEzLjk2LTIwLjE5MyAxNi45OTYtMjYuMDQ0YTg5Ljg5IDg5Ljg5IDAgMCAwIC4yNDMgMTUuMjk0IDQ0LjY5IDQ0LjY5IDAgMCAxLTcuNjE5IDIuODg1Yy0xLjUwNC4zOTEtMi40MzUgMS0yLjQ2MiAxLjY5MS0uMDMuNzU4Ljk4IDEuMzk3IDIuNDQgMi4wODUgMi42IDEuMjI2IDEwLjIxNiA0Ljc5OCAxMi4wOTMgNS44NzggMS42MDYuOTI1IDIuMzkuMjA0IDIuODY2LS43OTYuNjIyLTEuMzAyLTEuMDgzLTIuMDU0LTIuNzM1LTIuNTQ1YTUwLjQ3IDUwLjQ3IDAgMCAxLTEuNDgtOC4zODVjMy44Ny0yLjM2NSA3LjY4Mi01LjUyIDkuODgtOS40NTJhMTguMDA0IDE4LjAwNCAwIDAgMCAxLjU2OC00LjM2NWMuMjMtLjkzNC4yOTMtMS45LjE4Ni0yLjg1NSAwIDAtLjAzLS4yMDktLjE4Ni0uMjI5Jy8+PC9tYXNrPjxnIG1hc2s9J3VybCgjYiknPjxyZWN0IHdpZHRoPSczMS42OTUnIGhlaWdodD0nMzEuNjk1JyB4PScuMDI4JyBmaWxsPScjQzJDNkNFJyByeD0nMy4wNDgnLz48L2c+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0nYSc+PHJlY3Qgd2lkdGg9JzMyJyBoZWlnaHQ9JzMxLjk5MicgeT0nLjAwOCcgZmlsbD0nI2ZmZicgcng9JzQnLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=);
+  --goa-work-side-menu-popover-shadow: 0 4px 6px rgba(0,0,0,0.4);
+  --goa-color-interactive-default: #6b9fc9;
+  --goa-color-interactive-secondary: #1e2d3d;
+  --goa-color-interactive-hover: #85b5d8;
+  --goa-color-interactive-secondary-hover: #243648;
+  --goa-color-interactive-error: #c97b7b;
+  --goa-color-interactive-error-hover: #b06060;
+  --goa-color-interactive-error-disabled: #6a4040;
+  --goa-color-interactive-focus: #6b9fc9;
+  --goa-color-interactive-visited: #9b8ec9;
+  --goa-color-brand-default: #6bc9b8;
+  --goa-color-brand-dark: #90ddd0;
+  --goa-color-brand-light: #1a3030;
+  --goa-color-info-default: #6b9fc9;
+  --goa-color-info-light: #1e2d3d;
+  --goa-color-info-dark: #5080a0;
+  --goa-color-info-background: #1e2830;
+  --goa-color-info-border: #2a4050;
+  --goa-color-info-text: #8ab4d4;
+  --goa-color-info-text-dark: #a0c8e0;
+  --goa-color-info-text-inverse: #1a2530;
+  --goa-color-warning-default: #c9a227;
+  --goa-color-warning-light: #2e2818;
+  --goa-color-warning-dark: #a08020;
+  --goa-color-warning-background: #302a16;
+  --goa-color-warning-border: #403518;
+  --goa-color-warning-text: #d4b040;
+  --goa-color-warning-text-dark: #3a2a00;
+  --goa-color-important-default: #c9a227;
+  --goa-color-important-light: #2e2818;
+  --goa-color-important-dark: #a08020;
+  --goa-color-important-background: #2e2818;
+  --goa-color-important-border: #403518;
+  --goa-color-important-text: #d4b040;
+  --goa-color-important-text-dark: #3a2a00;
+  --goa-color-emergency-default: #c97b7b;
+  --goa-color-emergency-light: #3d2525;
+  --goa-color-emergency-dark: #c08080;
+  --goa-color-emergency-background: #321e1e;
+  --goa-color-emergency-border: #402828;
+  --goa-color-emergency-text: #d49090;
+  --goa-color-emergency-text-dark: #e0a8a8;
+  --goa-color-emergency-text-inverse: #281a1a;
+  --goa-color-success-default: #7eb36a;
+  --goa-color-success-light: #1e2e1a;
+  --goa-color-success-dark: #5a8a48;
+  --goa-color-success-background: #1e3220;
+  --goa-color-success-border: #2a4020;
+  --goa-color-success-text: #90c880;
+  --goa-color-success-text-dark: #a8d8a0;
+  --goa-color-success-text-inverse: #1a2818;
+  --goa-color-critical-default: #d4d4d4;
+  --goa-color-greyscale-50: #262626;
+  --goa-color-greyscale-100: #2a2a2a;
+  --goa-color-greyscale-150: #333333;
+  --goa-color-greyscale-200: #3d3d3d;
+  --goa-color-greyscale-300: #4d4d4d;
+  --goa-color-greyscale-400: #6a6a6a;
+  --goa-color-greyscale-500: #858585;
+  --goa-color-greyscale-600: #999999;
+  --goa-color-greyscale-700: #b0b0b0;
+  --goa-color-greyscale-800: #b8b8b8;
+  --goa-color-greyscale-black: #d4d4d4;
+  --goa-color-greyscale-white: #1e1e1e;
+  --goa-color-surface-0: #1a1a1a;
+  --goa-color-surface-50: #1e1e1e;
+  --goa-color-surface-100: #232323;
+  --goa-color-surface-150: #252525;
+  --goa-color-surface-200: #262626;
+  --goa-color-surface-250: #292929;
+  --goa-color-surface-300: #2e2e2e;
+  --goa-color-surface-350: #333333;
+  --goa-color-surface-400: #383838;
+  --goa-color-surface-table-data: #2c2c2c;
+  --goa-color-surface-container-heading: #353535;
+  --goa-color-surface-popover: #242424;
+  --goa-color-surface-app-header: #222222;
+  --goa-color-surface-card-hover: #2e2e2e;
+  --goa-color-surface-widget-hover: #3a3a3a;
+  --goa-color-surface-heading-hover: #3f3f3f;
+  --goa-color-surface-item-hover: #444444;
+  --goa-opacity-background-modal: 70%;
+  --goa-shadow-100: 0px 1px 0px 0px rgba(255,255,255,0.05);
+  --goa-shadow-150: 0px 1px 0px 0px rgba(255,255,255,0.08);
+  --goa-shadow-200: 0px 3px 1px -1px rgba(255,255,255,0.05);
+  --goa-shadow-300: 0px 4px 6px -2px rgba(0,0,0,0.4);
+  --goa-shadow-400: 0px 8px 16px -4px rgba(0,0,0,0.5);
+  --goa-shadow-500: 0px 12px 20px -8px rgba(0,0,0,0.5);
+  --goa-shadow-600: 0px 20px 20px -8px rgba(0,0,0,0.5);
+  --goa-shadow-modal: 0px 0px 4px 0px rgba(0,0,0,0.3), 0px 8px 40px 0px rgba(0,0,0,0.5);
+  --goa-shadow-raised-light: 0px 12px 16px -4px rgba(0,0,0,0.3), 0px 4px 6px -2px rgba(0,0,0,0.15);
+  --goa-shadow-raised-heavy: 0px 0px 1px 0px rgba(0,0,0,0.4), 0px 16px 32px -20px rgba(0,0,0,0.5);
+  --goa-shadow-shallow-above: 0px -2px 16px 0px rgba(0,0,0,0.3);
+  --goa-shadow-shallow-below: 0px 1px 8px 0px rgba(0,0,0,0.2);
+  --goa-input-color-border-readonly: #3d3d3d;
+  --goa-input-color-background-default: var(--goa-color-surface-input);
+  --goa-input-color-background-error-hover: #3a1818;
+}

package/dist/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 05 May 2026 15:27:11 GMT
+ * Generated on Tue, 05 May 2026 19:11:22 GMT
  */
 
 :root {
@@ -147,6 +147,24 @@
   --goa-color-extended-sky-border: #bff0ee;
   --goa-color-extended-sky-light: #e2f9f8;
   --goa-color-extended-sky-default: #90ebe7;
+  --goa-color-static-white: #ffffff;
+  --goa-color-surface-item-hover: #f2f0f0;
+  --goa-color-surface-heading-hover: #e9e9e9;
+  --goa-color-surface-widget-hover: #f8f8f8;
+  --goa-color-surface-card-hover: #f8f8f8;
+  --goa-color-surface-app-header: #ffffff;
+  --goa-color-surface-popover: #ffffff;
+  --goa-color-surface-container-heading: #f2f0f0;
+  --goa-color-surface-table-data: #ffffff;
+  --goa-color-surface-400: #f8f8f8;
+  --goa-color-surface-350: #f2f0f0;
+  --goa-color-surface-300: #ffffff;
+  --goa-color-surface-250: #f2f0f0;
+  --goa-color-surface-200: #f8f8f8;
+  --goa-color-surface-150: #f8f8f8;
+  --goa-color-surface-100: #ffffff;
+  --goa-color-surface-50: #ffffff;
+  --goa-color-surface-0: #f8f8f8;
   --goa-color-greyscale-white: #ffffff;
   --goa-color-greyscale-black: #000000;
   --goa-color-greyscale-800: #353535;
@@ -219,6 +237,7 @@
   --goa-work-side-menu-bottom-section-shadow: 0 -4px 6px -4px rgba(0, 0, 0, 0);
   --goa-work-side-menu-top-section-shadow-scrolled: 0 4px 6px -4px rgba(0, 0, 0, 0.1);
   --goa-work-side-menu-top-section-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0);
+  --goa-work-side-menu-logo: initial;
   --goa-work-side-menu-color-bg: transparent;
   --goa-work-side-menu-width-closed: 4.5rem;
   --goa-work-side-menu-width-open: 17.5rem;
@@ -280,6 +299,8 @@
   --goa-app-header-service-phase-gap-vertical: 6px;
   --goa-app-header-min-width-service-name: 13rem;
   --goa-app-header-max-width-service-name: 40rem;
+  --goa-app-header-logo-desktop: initial;
+  --goa-app-header-logo-mobile: initial;
   --goa-stepper-line-thickness: 4px;
   --goa-step-size: 2.5rem;
   --goa-step-gap-small-screen: 0px;
@@ -399,6 +420,15 @@
   --goa-typography-heading-xs: var(--goa-font-weight-semi-bold) var(--goa-font-size-5)/var(--goa-line-height-3) var(--goa-font-family-sans);
   --goa-typography-heading-2xs-letter-spacing: var(--goa-letter-spacing-2xs);
   --goa-typography-heading-2xs: var(--goa-font-weight-semi-bold) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
+  --goa-color-surface-item: var(--goa-color-surface-400);
+  --goa-color-surface-heading: var(--goa-color-surface-350);
+  --goa-color-surface-widget: var(--goa-color-surface-300);
+  --goa-color-surface-content-body: var(--goa-color-surface-250);
+  --goa-color-surface-input: var(--goa-color-surface-200);
+  --goa-color-surface-section: var(--goa-color-surface-150);
+  --goa-color-surface-card: var(--goa-color-surface-100);
+  --goa-color-surface-default: var(--goa-color-surface-50);
+  --goa-color-surface-page: var(--goa-color-surface-0);
   --goa-color-text-disabled: var(--goa-color-greyscale-700);
   --goa-color-text-light: var(--goa-color-greyscale-white);
   --goa-color-text-secondary: var(--goa-color-greyscale-600);
@@ -423,6 +453,7 @@
   --goa-work-side-menu-transition-duration-medium: var(--goa-motion-duration-medium-2);
   --goa-work-side-menu-mobile-bg: var(--goa-color-greyscale-50);
   --goa-work-side-menu-text-color: var(--goa-color-greyscale-600);
+  --goa-work-side-menu-popover-shadow: var(--goa-shadow-raised-light);
   --goa-work-side-menu-account-bg: var(--goa-color-greyscale-white);
   --goa-work-side-menu-account-shadow: var(--goa-shadow-500);
   --goa-work-side-menu-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
@@ -1193,6 +1224,7 @@
   --goa-form-item-help-message-color: var(--goa-input-color-text-helper);
   --goa-form-item-error-message-color: var(--goa-input-color-text-error);
   --goa-footer-color-links-secondary: var(--goa-color-text-secondary);
+  --goa-footer-color-text: var(--goa-color-text-default);
   --goa-filter-chip-typography: var(--goa-typography-body-s);
   --goa-filter-chip-secondary-text-color-error: var(--goa-input-color-text-error);
   --goa-filter-chip-icon-color-error: var(--goa-input-color-text-error);

package/dist/tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 05 May 2026 15:27:11 GMT
+// Generated on Tue, 05 May 2026 19:11:22 GMT
 
 $goa-accordion-color-bg-heading: #ffffff;
 $goa-accordion-color-filled-bg-heading: #f2f0f0;
@@ -446,6 +446,7 @@ $goa-filter-chip-close-button-error-hover-bg-color: #f4c8c5;
 $goa-footer-border-bottom: 0px solid #0081a2;
 $goa-footer-border-top: 1.5px solid #e9e9e9;
 $goa-footer-color-bg: #f2f0f0;
+$goa-footer-color-text: #000000;
 $goa-footer-color-links: #000000;
 $goa-footer-color-links-hover: #4d4d4d;
 $goa-footer-color-links-secondary: #6f6f6f;
@@ -504,6 +505,8 @@ $goa-stepper-color-line: #cdcdcd;
 $goa-stepper-color-line-active: #006dcc;
 $goa-stepper-line-thickness: 4px;
 $goa-app-header-color-bg: #ffffff;
+$goa-app-header-logo-mobile: initial;
+$goa-app-header-logo-desktop: initial;
 $goa-app-header-border-bottom: 1px solid #e9e9e9;
 $goa-app-header-border-focus: 2px solid #006dcc;
 $goa-app-header-padding-h-desktop: 3rem;
@@ -980,6 +983,8 @@ $goa-work-side-menu-border-radius: 0.5rem;
 $goa-work-side-menu-border: 1px solid #cdcdcd;
 $goa-work-side-menu-account-shadow: 0px 12px 20px -8px #1a1a1a3d;
 $goa-work-side-menu-account-bg: #ffffff;
+$goa-work-side-menu-logo: initial;
+$goa-work-side-menu-popover-shadow: 0px 12px 16px -4px rgba(16,29,40,0.08), 0px 4px 6px -2px rgba(16,29,40,0.03);
 $goa-work-side-menu-text-color: #6f6f6f;
 $goa-work-side-menu-mobile-bg: #f8f8f8;
 $goa-work-side-menu-transition-duration-medium: 300ms;
@@ -1080,6 +1085,33 @@ $goa-color-greyscale-700: #4d4d4d;
 $goa-color-greyscale-800: #353535;
 $goa-color-greyscale-black: #000000;
 $goa-color-greyscale-white: #ffffff;
+$goa-color-surface-0: #f8f8f8;
+$goa-color-surface-50: #ffffff;
+$goa-color-surface-100: #ffffff;
+$goa-color-surface-150: #f8f8f8;
+$goa-color-surface-200: #f8f8f8;
+$goa-color-surface-250: #f2f0f0;
+$goa-color-surface-300: #ffffff;
+$goa-color-surface-350: #f2f0f0;
+$goa-color-surface-400: #f8f8f8;
+$goa-color-surface-page: #f8f8f8;
+$goa-color-surface-default: #ffffff;
+$goa-color-surface-card: #ffffff;
+$goa-color-surface-section: #f8f8f8;
+$goa-color-surface-input: #f8f8f8;
+$goa-color-surface-content-body: #f2f0f0;
+$goa-color-surface-widget: #ffffff;
+$goa-color-surface-heading: #f2f0f0;
+$goa-color-surface-item: #f8f8f8;
+$goa-color-surface-table-data: #ffffff;
+$goa-color-surface-container-heading: #f2f0f0;
+$goa-color-surface-popover: #ffffff;
+$goa-color-surface-app-header: #ffffff;
+$goa-color-surface-card-hover: #f8f8f8;
+$goa-color-surface-widget-hover: #f8f8f8;
+$goa-color-surface-heading-hover: #e9e9e9;
+$goa-color-surface-item-hover: #f2f0f0;
+$goa-color-static-white: #ffffff;
 $goa-color-extended-sky-default: #90ebe7;
 $goa-color-extended-sky-light: #e2f9f8;
 $goa-color-extended-sky-border: #bff0ee;

package/index.spec.js

@@ -12,9 +12,10 @@ describe("GoA Design Tokens", () => {
     SC.generate("./tmp");
 
     const cssfiles = fs.readdirSync("./tmp/dist");
-    expect(cssfiles.length).toBe(2);
-    expect(cssfiles[0]).toBe(`tokens.css`);
-    expect(cssfiles[1]).toBe(`tokens.scss`);
+    expect(cssfiles.length).toBe(3);
+    expect(cssfiles[0]).toBe(`dark-theme.css`);
+    expect(cssfiles[1]).toBe(`tokens.css`);
+    expect(cssfiles[2]).toBe(`tokens.scss`);
   });
 
   it("should create valid css output", async () => {

package/lib/design-tokens.js

@@ -38,7 +38,21 @@ function generate(outputPath) {
         return `${toPx(x)} ${toPx(y)} ${toPx(blur)} ${toPx(spread)} ${color}`;
       };
 
-      const value = token.original.value;
+      // If original is themed { light, dark }, value/themed-* has already
+      // picked the active mode and stored it on token.value. Read from there.
+      let value = token.original.value;
+      if (
+        value &&
+        typeof value === "object" &&
+        Object.prototype.hasOwnProperty.call(value, "light") &&
+        Object.prototype.hasOwnProperty.call(value, "dark")
+      ) {
+        value = token.value;
+      }
+
+      // Already formatted (transitive re-run on a string result).
+      if (typeof value === "string") return value;
+
       if (Array.isArray(value)) {
         return value.map(formatLayer).join(", ");
       }
@@ -56,7 +70,22 @@ function generate(outputPath) {
       return token.type === "border";
     },
     transformer: function (token) {
-      const { color, width, style } = token.original.value;
+      // Mirror box-shadow: if the original value is themed { light, dark },
+      // value/themed-* has already picked the active mode onto token.value.
+      let value = token.original.value;
+      if (
+        value &&
+        typeof value === "object" &&
+        Object.prototype.hasOwnProperty.call(value, "light") &&
+        Object.prototype.hasOwnProperty.call(value, "dark")
+      ) {
+        value = token.value;
+      }
+
+      // Already formatted (transitive re-run on a string result).
+      if (typeof value === "string") return value;
+
+      const { color, width, style } = value;
       return `${width} ${style} ${color}`;
     },
   });
@@ -77,6 +106,78 @@ function generate(outputPath) {
     },
   });
 
+  // Themed value: tokens with shape { light, dark } resolve to one mode per build.
+  // Two transforms (one per mode) avoids passing mode through SD's platformConfig.
+  const isThemed = (token) => {
+    const v = token.original.value;
+    return (
+      v &&
+      typeof v === "object" &&
+      Object.prototype.hasOwnProperty.call(v, "light") &&
+      Object.prototype.hasOwnProperty.call(v, "dark")
+    );
+  };
+
+  StyleDictionary.registerTransform({
+    name: "value/themed-light",
+    type: "value",
+    transitive: true,
+    matcher: isThemed,
+    transformer: function (token) {
+      return token.original.value.light;
+    },
+  });
+
+  StyleDictionary.registerTransform({
+    name: "value/themed-dark",
+    type: "value",
+    transitive: true,
+    matcher: isThemed,
+    transformer: function (token) {
+      return token.original.value.dark;
+    },
+  });
+
+  StyleDictionary.registerFormat({
+    name: "css/variables-dark",
+    formatter: function ({ dictionary }) {
+      const lines = [];
+      dictionary.allTokens.forEach(function (token) {
+        const v = token.original.value;
+        const isThemed =
+          v &&
+          typeof v === "object" &&
+          Object.prototype.hasOwnProperty.call(v, "light") &&
+          Object.prototype.hasOwnProperty.call(v, "dark");
+
+        if (isThemed && v.light !== v.dark) {
+          lines.push(`  --${token.name}: ${token.value};`);
+          return;
+        }
+
+        if (Object.prototype.hasOwnProperty.call(token.original, "dark")) {
+          // dark field is emitted verbatim; use literal hex or raw CSS
+          // (e.g. "var(--goa-color-surface-input)") since SD's reference
+          // resolver does not walk custom fields.
+          lines.push(`  --${token.name}: ${token.original.dark};`);
+        }
+      });
+
+      return [
+        "/**",
+        " * Do not edit directly",
+        " * Generated dark theme overrides",
+        " */",
+        "",
+        ':root[data-theme="dark"] {',
+        "  color-scheme: dark;",
+        ...lines,
+        "}",
+        "",
+      ].join("\n");
+    },
+  });
+
   try {
     StyleDictionary.extend({
       source: [`./data/**/*.json`],
@@ -84,6 +185,7 @@ function generate(outputPath) {
         scss: {
           prefix: "goa",
           transforms: [
+            "value/themed-light",
             ...StyleDictionary.transformGroup.scss,
             "typography/shorthand",
             "box-shadow",
@@ -101,6 +203,7 @@ function generate(outputPath) {
         css: {
           prefix: "goa",
           transforms: [
+            "value/themed-light",
             ...StyleDictionary.transformGroup.css,
             "typography/shorthand",
             "box-shadow",
@@ -118,6 +221,24 @@ function generate(outputPath) {
             },
           ],
         },
+        "css-dark": {
+          prefix: "goa",
+          transforms: [
+            "value/themed-dark",
+            ...StyleDictionary.transformGroup.css,
+            "typography/shorthand",
+            "box-shadow",
+            "border",
+            "fontVariationSettings",
+          ],
+          buildPath: `${outputPath}/dist/`,
+          files: [
+            {
+              destination: "dark-theme.css",
+              format: "css/variables-dark",
+            },
+          ],
+        },
       },
     }).buildAllPlatforms();
   } catch (e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/design-tokens",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "main": "./index.js",
   "repository": {
     "type": "git",