@abgov/design-tokens 2.6.0 → 2.8.0

package/data/component-design-tokens/accordion-design-tokens.json

@@ -1,6 +1,7 @@
 {
   "accordion-color-bg-heading": {
     "value": "{color.greyscale.white}",
+    "dark": "var(--goa-color-surface-heading)",
     "type": "color"
   },
   "accordion-color-filled-bg-heading": {
@@ -9,6 +10,7 @@
   },
   "accordion-color-bg-content": {
     "value": "{color.greyscale.white}",
+    "dark": "var(--goa-color-surface-table-data)",
     "type": "color"
   },
   "accordion-color-heading": {
@@ -33,9 +35,16 @@
   },
   "accordion-divider-hover": {
     "value": {
-      "color": "{color.greyscale.black}",
-      "width": "{borderWidth.s}",
-      "style": "solid"
+      "light": {
+        "color": "{color.greyscale.black}",
+        "width": "{borderWidth.s}",
+        "style": "solid"
+      },
+      "dark": {
+        "color": "#555555",
+        "width": "1px",
+        "style": "solid"
+      }
     },
     "type": "border"
   },
@@ -78,6 +87,7 @@
   },
   "accordion-color-bg-heading-hover": {
     "value": "{color.greyscale.50}",
+    "dark": "var(--goa-color-surface-heading-hover)",
     "type": "color"
   },
   "accordion-color-filled-bg-heading-hover": {
@@ -98,9 +108,16 @@
   },
   "accordion-border-hover": {
     "value": {
-      "color": "{color.greyscale.black}",
-      "width": "{borderWidth.s}",
-      "style": "solid"
+      "light": {
+        "color": "{color.greyscale.black}",
+        "width": "{borderWidth.s}",
+        "style": "solid"
+      },
+      "dark": {
+        "color": "#555555",
+        "width": "1px",
+        "style": "solid"
+      }
     },
     "type": "border"
   },
@@ -128,12 +145,22 @@
   },
   "accordion-shadow": {
     "value": {
-      "x": "0",
-      "y": "0",
-      "blur": "0",
-      "spread": "0",
-      "color": "#000000",
-      "type": "dropShadow"
+      "light": {
+        "x": "0",
+        "y": "0",
+        "blur": "0",
+        "spread": "0",
+        "color": "#000000",
+        "type": "dropShadow"
+      },
+      "dark": {
+        "x": "0",
+        "y": "0",
+        "blur": "0",
+        "spread": "0",
+        "color": "transparent",
+        "type": "dropShadow"
+      }
     },
     "type": "boxShadow"
   },

package/data/component-design-tokens/badge-design-tokens.json

@@ -116,6 +116,7 @@
   },
   "badge-important-subtle-color-content": {
     "value": "{color.warning.textDark}",
+    "dark": "var(--goa-color-important-text)",
     "type": "color"
   },
   "badge-important-subtle-border": {
@@ -152,6 +153,7 @@
   },
   "badge-default-subtle-color-bg": {
     "value": "{color.greyscale.100}",
+    "dark": "var(--goa-color-surface-heading)",
     "type": "color"
   },
   "badge-default-subtle-color-content": {
@@ -160,6 +162,7 @@
   },
   "badge-default-subtle-border": {
     "value": "inset 0 0 0 {borderWidth.s} {color.greyscale.200}",
+    "dark": "inset 0 0 0 1px #4a4a4a",
     "type": "dropShadow"
   },
   "badge-archived-color-bg": {

package/data/component-design-tokens/button-design-tokens.json

@@ -90,6 +90,7 @@
   },
   "button-primary-hover-color-bg": {
     "value": "{color.interactive.hover}",
+    "dark": "#4a7a9a",
     "type": "color"
   },
   "button-primary-hover-color-text": {
@@ -126,6 +127,7 @@
   },
   "button-primary-destructive-hover-color-bg": {
     "value": "{color.emergency.dark}",
+    "dark": "#a06060",
     "type": "color"
   },
   "button-primary-destructive-hover-color-text": {
@@ -170,6 +172,7 @@
   },
   "button-secondary-color-text": {
     "value": "{color.interactive.hover}",
+    "dark": "#85b5d8",
     "type": "color"
   },
   "button-secondary-border": {
@@ -182,10 +185,12 @@
   },
   "button-secondary-hover-color-bg": {
     "value": "{color.interactive.secondary-hover}",
+    "dark": "#293d50",
     "type": "color"
   },
   "button-secondary-hover-color-text": {
     "value": "{color.interactive.hover}",
+    "dark": "#85b5d8",
     "type": "color"
   },
   "button-secondary-hover-border": {
@@ -202,6 +207,7 @@
   },
   "button-secondary-focus-color-text": {
     "value": "{color.interactive.hover}",
+    "dark": "#85b5d8",
     "type": "color"
   },
   "button-secondary-focus-border": {
@@ -254,6 +260,7 @@
   },
   "button-secondary-disabled-color-text": {
     "value": "{color.greyscale.400}",
+    "dark": "#888888",
     "type": "color"
   },
   "button-secondary-inverse-color-text": {
@@ -306,6 +313,7 @@
   },
   "button-tertiary-color-bg": {
     "value": "transparent",
+    "dark": "var(--goa-color-surface-100)",
     "type": "color"
   },
   "button-tertiary-color-bg-mobile": {
@@ -326,6 +334,7 @@
   },
   "button-tertiary-hover-color-bg": {
     "value": "transparent",
+    "dark": "var(--goa-color-surface-250)",
     "type": "color"
   },
   "button-tertiary-hover-color-text": {
@@ -342,9 +351,16 @@
   },
   "button-tertiary-hover-border": {
     "value": {
-      "color": "{color.greyscale.black}",
-      "width": "{borderWidth.s}",
-      "style": "solid"
+      "light": {
+        "color": "{color.greyscale.black}",
+        "width": "{borderWidth.s}",
+        "style": "solid"
+      },
+      "dark": {
+        "color": "#666666",
+        "width": "1px",
+        "style": "solid"
+      }
     },
     "type": "border"
   },
@@ -386,6 +402,7 @@
   },
   "button-tertiary-disabled-color-text": {
     "value": "{color.interactive.disabled}",
+    "dark": "#888888",
     "type": "color"
   },
     "button-tertiary-inverse-border": {

package/data/component-design-tokens/callout-design-tokens.json

@@ -109,6 +109,7 @@
   },
   "callout-h-info-heading-bg-color": {
     "value": "{color.info.default}",
+    "dark": "#386590",
     "type": "color"
   },
   "callout-important-heading-bg-color": {
@@ -117,6 +118,7 @@
   },
   "callout-h-important-heading-bg-color": {
     "value": "{color.warning.default}",
+    "dark": "#5e4e20",
     "type": "color"
   },
   "callout-success-heading-bg-color": {
@@ -125,6 +127,7 @@
   },
   "callout-h-success-heading-bg-color": {
     "value": "{color.success.default}",
+    "dark": "#386030",
     "type": "color"
   },
   "callout-emergency-heading-bg-color": {
@@ -133,54 +136,67 @@
   },
   "callout-h-emergency-heading-bg-color": {
     "value": "{color.emergency.default}",
+    "dark": "#6e4242",
     "type": "color"
   },
   "callout-info-content-bg-color": {
     "value": "{color.greyscale.white}",
+    "dark": "#1e2830",
     "type": "color"
   },
   "callout-h-info-content-bg-color": {
     "value": "{color.info.background}",
+    "dark": "#1e2830",
     "type": "color"
   },
   "callout-l-info-content-bg-color": {
     "value": "{color.info.background}",
+    "dark": "#1e2830",
     "type": "color"
   },
   "callout-important-content-bg-color": {
     "value": "{color.greyscale.white}",
+    "dark": "#28251e",
     "type": "color"
   },
   "callout-h-important-content-bg-color": {
     "value": "{color.warning.background}",
+    "dark": "#28251e",
     "type": "color"
   },
   "callout-l-important-content-bg-color": {
     "value": "{color.warning.background}",
+    "dark": "#28251e",
     "type": "color"
   },
   "callout-success-content-bg-color": {
     "value": "{color.greyscale.white}",
+    "dark": "#1e2820",
     "type": "color"
   },
   "callout-h-success-content-bg-color": {
     "value": "{color.success.background}",
+    "dark": "#1e2820",
     "type": "color"
   },
   "callout-l-success-content-bg-color": {
     "value": "{color.success.background}",
+    "dark": "#1e2820",
     "type": "color"
   },
   "callout-emergency-content-bg-color": {
     "value": "{color.greyscale.white}",
+    "dark": "#2a1c1c",
     "type": "color"
   },
   "callout-h-emergency-content-bg-color": {
     "value": "{color.emergency.background}",
+    "dark": "#352020",
     "type": "color"
   },
   "callout-l-emergency-content-bg-color": {
     "value": "{color.emergency.background}",
+    "dark": "#352020",
     "type": "color"
   },
   "callout-info-icon-color": {

package/data/component-design-tokens/checkbox-design-tokens.json

@@ -85,6 +85,7 @@
   },
   "checkbox-color-label": {
     "value": "{input.color.text.secondary}",
+    "dark": "var(--goa-color-text-default)",
     "type": "color"
   },
   "checkbox-color-label-disabled": {

package/data/component-design-tokens/container-design-tokens.json

@@ -47,10 +47,12 @@
   },
   "container-interactive-bg-color": {
     "value": "{color.greyscale.white}",
+    "dark": "var(--goa-color-surface-widget)",
     "type": "color"
   },
   "container-interactive-heading-bg-color": {
     "value": "{color.brand.default}",
+    "dark": "var(--goa-color-surface-container-heading)",
     "type": "color"
   },
   "container-interactive-heading-text-color": {
@@ -67,10 +69,12 @@
   },
   "container-non-interactive-bg-color": {
     "value": "{color.greyscale.50}",
+    "dark": "var(--goa-color-surface-widget)",
     "type": "color"
   },
   "container-non-interactive-heading-bg-color": {
     "value": "{color.greyscale.100}",
+    "dark": "var(--goa-color-surface-container-heading)",
     "type": "color"
   },
   "container-non-interactive-heading-text-color": {

package/data/component-design-tokens/drawer-design-tokens.json

@@ -1,6 +1,9 @@
 {
   "drawer-overlay-color": {
-    "value": "rgba(51, 51, 51, 0.5)",
+    "value": {
+      "light": "rgba(51, 51, 51, 0.5)",
+      "dark": "rgba(0, 0, 0, 0.6)"
+    },
     "type": "color",
     "description": "Background overlay color behind drawer"
   },
@@ -40,7 +43,10 @@
     "description": "Typography for drawer heading"
   },
   "drawer-shadow": {
-    "value": "0 0 4px 0 rgba(0, 0, 0, 0.10), 0 8px 40px 0 rgba(0, 0, 0, 0.20)",
+    "value": {
+      "light": "0 0 4px 0 rgba(0, 0, 0, 0.10), 0 8px 40px 0 rgba(0, 0, 0, 0.20)",
+      "dark": "0 0 4px 0 rgba(0, 0, 0, 0.3), 0 8px 40px 0 rgba(0, 0, 0, 0.4)"
+    },
     "type": "other",
     "description": "Drop shadow for drawer"
   },

package/data/component-design-tokens/dropdown-design-tokens.json

@@ -29,6 +29,7 @@
   },
   "dropdown-color-bg": {
     "value": "{input.color.background.default}",
+    "dark": "var(--goa-color-surface-input)",
     "type": "color"
   },
   "dropdown-color-bg-disabled": {

package/data/component-design-tokens/file-uploader-design-tokens.json

@@ -53,10 +53,12 @@
   },
   "file-upload-color-bg-focus": {
     "value": "{color.greyscale.100}",
+    "dark": "#252d35",
     "type": "color"
   },
   "file-upload-color-bg-hover": {
     "value": "{color.greyscale.100}",
+    "dark": "#252d35",
     "type": "color"
   },
   "file-upload-help-text": {

package/data/component-design-tokens/footer-design-tokens.json

@@ -19,20 +19,29 @@
     "value": "{color.greyscale.100}",
     "type": "color"
   },
+  "footer-color-text": {
+    "value": "{color.text.default}",
+    "dark": "#909090",
+    "type": "color"
+  },
   "footer-color-links": {
     "value": "{color.greyscale.black}",
+    "dark": "#909090",
     "type": "color"
   },
   "footer-color-links-hover": {
     "value": "{color.greyscale.700}",
+    "dark": "#aaaaaa",
     "type": "color"
   },
   "footer-color-links-secondary": {
     "value": "{color.text.secondary}",
+    "dark": "#808080",
     "type": "color"
   },
   "footer-color-links-secondary-hover": {
     "value": "{color.greyscale.800}",
+    "dark": "#999999",
     "type": "color"
   },
   "footer-link-focus": {

package/data/component-design-tokens/header-design-tokens.json

@@ -1,8 +1,21 @@
 {
   "app-header-color-bg": {
     "value": "{color.greyscale.white}",
+    "dark": "var(--goa-color-surface-app-header)",
     "type": "color"
   },
+  "app-header-logo-mobile": {
+    "value": "initial",
+    "dark": "url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC4wMjgzMjAzIiB3aWR0aD0iMzEuNjk1NCIgaGVpZ2h0PSIzMS42ODc2IiByeD0iNCIgZmlsbD0iIzAwQjZFRCIvPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNTg2NTNfMjAzODgwKSI+CjxtYXNrIGlkPSJtYXNrMF81ODY1M18yMDM4ODAiIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9Ii0xMSIgeT0iLTIiIHdpZHRoPSI0NyIgaGVpZ2h0PSIzOSI+CjxwYXRoIGQ9Ik0yMi4wMTYxIDMxLjEwMTVDMTkuNTQ1MyAzMC4xOTY5IDE3LjEzMzggMjkuMTQgMTQuNzk1OCAyNy45MzY5QzE2LjkxODMgMjcuMTYzMSAxOC45ODc5IDI2LjI1MzIgMjAuOTkxNSAyNS4yMTMxQzIxLjE5NTkgMjcuMTk3NiAyMS41Mzc3IDI5LjE2NTggMjIuMDE0NiAzMS4xMDM2TTM1LjI4NCA2LjcxMTMyQzM0LjI1MDEgNi41ODE1OCAzNC43ODczIDcuMDU4OTYgMzQuNDk5MiA4LjQxMTU0QzMzLjI1MzcgMTQuMjQzMyAyOC40NDkzIDE4LjQ0NjYgMjMuNjI2MiAyMS4yNjY0QzIzLjEyMDggMTQuNTg4MSAyMy4zMjczIDcuMTczNjQgMjQuNTkzNyAyLjYyOTkyQzI1LjY2MjMgLTEuMjA1NjIgMjYuOTMzMSAtMC41MDE3MjkgMjUuMzU2OSAtMS4zMDc0QzIzLjY5NjIgLTIuMTU1MzYgMjEuOTE2NCAtMS4wMzUwMiAyMC40NzQ2IDEuODIyMUMxOS4wMzI3IDQuNjc5MjIgMTIuMzkyOSAyMC4xODkxIDEuNzc5MTMgMzAuNjYyMUMtMy42NDk3OCAzNi4wMjMgLTguNTYwMjggMzMuMjYxOSAtOS41NDM2OCAzMi40Mzc2Qy0xMC4zNDM3IDMxLjc2NjcgLTEwLjYzOSAzMi44MDI0IC05LjY0NjIxIDMzLjg2MzNDLTUuMjU1NTcgMzguNTYzMyAxLjE1ODkxIDM1Ljg2NjcgMy40OTQ2NyAzMy41NDkzQzkuOTQ5NTggMjcuMTQ0MSAxNy40NTQzIDEzLjM1NTkgMjAuNDkwNCA3LjUwNTUyQzIwLjEzNjkgMTIuNjAxIDIwLjIxODMgMTcuNzE3MSAyMC43MzM4IDIyLjc5ODlDMTguMjg4NSAyMy45OTAxIDE1LjczODIgMjQuOTU1OSAxMy4xMTQ5IDI1LjY4NEMxMS42MTAyIDI2LjA3NTQgMTAuNjc5NiAyNi42ODM5IDEwLjY1MjEgMjcuMzc1NkMxMC42MjI1IDI4LjEzMzMgMTEuNjMyNiAyOC43NzI2IDEzLjA5MzMgMjkuNDYwOEMxNS42OTI2IDMwLjY4NjUgMjMuMzA4NSAzNC4yNTgyIDI1LjE4NTEgMzUuMzM4NEMyNi43OTE2IDM2LjI2MzggMjcuNTc1NyAzNS41NDIgMjguMDUxNSAzNC41NDI4QzI4LjY3MzIgMzMuMjQwNCAyNi45Njg1IDMyLjQ4NzggMjUuMzE2NSAzMS45OTc1QzI0LjU4NzQgMjkuMjQ4NSAyNC4wOTIxIDI2LjQ0MzcgMjMuODM1NiAyMy42MTI1QzI3LjcwNzEgMjEuMjQ3MSAzMS41MTg3IDE4LjA5MzIgMzMuNzE1OCAxNC4xNjAyQzM0LjQyNTIgMTIuNzc3OSAzNC45NTI1IDExLjMxMDggMzUuMjg0OCA5Ljc5NDk0QzM1LjUxNDggOC44NjE0NSAzNS41Nzc2IDcuODk1MDcgMzUuNDcwMyA2LjkzOTk3QzM1LjQ3MDMgNi45Mzk5NyAzNS40NDE0IDYuNzMxMzkgMzUuMjg0OCA2LjcxMTMyIiBmaWxsPSIjQzJDNkNFIi8+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMF81ODY1M18yMDM4ODApIj4KPHJlY3QgeD0iMC4wMjgzMjAzIiB5PSItMC4wMDE5NTMxMiIgd2lkdGg9IjMxLjY5NTQiIGhlaWdodD0iMzEuNjk1NCIgcng9IjMuMDQ3NjIiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF81ODY1M18yMDM4ODAiPgo8cmVjdCB5PSIwLjAwNTg1OTM4IiB3aWR0aD0iMzIiIGhlaWdodD0iMzEuOTkyMiIgcng9IjQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==)",
+    "type": "other",
+    "description": "App header logo for mobile (under 768px). Light mode falls back to component-internal default; dark mode uses an inverted palette tuned for dark backgrounds."
+  },
+  "app-header-logo-desktop": {
+    "value": "initial",
+    "dark": "url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTE4IiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMTE4IDMyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNTg0NDdfNDI3MDkpIj4KPHBhdGggZD0iTTExNy45NDYgMTZIMTA2Ljk3NFYyNi45NzE3SDExNy45NDZWMTZaIiBmaWxsPSIjMDBCNkVEIi8+CjxwYXRoIGQ9Ik00OS43OTY2IDI1LjMwMzZDNDguNzAxMSAyNS40MDg4IDQ3LjU1NzIgMjUuNTE0OCA0Ni4zNTQ5IDI1LjU2NjlDNDYuNzkyMiAyMi4yNDggNDguNTk0MyAxNy42NjczIDUwLjgzMzcgMTguMzk4N0M1Mi4xNDQ3IDE4LjgyMDIgNTEuNDM0NCAyMi43MTk4IDQ5Ljc5NTcgMjUuMzAxOEw0OS43OTY2IDI1LjMwMzZaTTQ3LjAwOTUgMjcuNTY3NEM0Ni42ODM4IDI3LjYyMDEgNDYuMzUxOSAyNy42MjAxIDQ2LjAyNjIgMjcuNTY3NEM0Ni4xMTEgMjcuNTA4NCA0Ni4xODAxIDI3LjQyOTYgNDYuMjI3OCAyNy4zMzc5QzQ2LjI3NTUgMjcuMjQ2MSA0Ni4zMDAzIDI3LjE0NDIgNDYuMzAwMSAyNy4wNDA4VjI2LjYxOTNDNDYuOTAwOCAyNi42MTkzIDQ3LjgyOTMgMjYuNTE0MiA0OC45NzY4IDI2LjQwODFDNDguNDcyMSAyNy4wMDczIDQ3Ljc3NzUgMjcuNDE2MyA0Ny4wMDk1IDI3LjU2NzRaTTYwLjY2NTkgMTkuNjY2QzYyLjA4NjQgMTguMzk4NyA2Mi43OTY3IDE4LjUwNjYgNjIuOTU3MyAxOC44MjNDNjMuMzM5OCAxOS41NjA4IDYxLjcwMTEgMjIuMTQyOCA1OC40Nzg1IDIzLjU2NTVDNTguODEwNCAyMi4wNzk3IDU5LjU3IDIwLjcyNCA2MC42NjMyIDE5LjY2Nkg2MC42NjU5Wk0xMTMuMzc0IDIwLjkzMDVDMTEzLjIxIDE4LjM0ODUgMTEwLjg2MiAxNy45MjcgMTEwLjUzNCAxOC42NjQ4QzExMC40MjUgMTguOTI4MSAxMTEuNDA4IDE4LjgyMyAxMTEuNDA4IDIwLjY2NzFDMTExLjQwOCAyMy42NzA3IDEwOC4yNCAyNy42MjIzIDEwNC4xOTYgMjcuNjIyM0MxMDIuNzkzIDI3LjcwNzEgMTAxLjQxMSAyNy4yNDQgMTAwLjM0MSAyNi4zMzAxQzk5LjI3MTkgMjUuNDE2MyA5OC41OTc1IDI0LjEyMjkgOTguNDYwMSAyMi43MjE2Qzk4LjI5NTcgMjEuNjE1MyA5OC41Njk2IDIwLjA4NjYgOTYuNjAzMiAyMC4yOTc4Qzk1LjIzMzggMjAuNDU1OSA5NC4wMzYgMjIuOTg0OSA5Mi4yODc4IDI1LjE0MzZDOTAuODEyNSAyNi45ODc4IDkwLjE1NyAyNi44Mjk2IDkwLjQ4NDcgMjUuMjQ4OEM5MC45MjIgMjMuMjQ2NCA5Mi42MTU1IDE4LjYwOTkgOTQuNTgxOSAxOC4yOTM2Qzk1LjUxMDQgMTguMTM1NCA5NS44MzgxIDE5LjY2NTEgOTYuMjI1MiAxOC43MTUxQzk2LjM2NDIgMTguMzgwNyA5Ni40MTg5IDE4LjAxNzEgOTYuMzg0NSAxNy42NTY1Qzk2LjM1MDEgMTcuMjk1OSA5Ni4yMjc2IDE2Ljk0OTQgOTYuMDI3OSAxNi42NDc0Qzk1LjgyODIgMTYuMzQ1MyA5NS41NTc0IDE2LjA5NzIgOTUuMjM5MyAxNS45MjQ3Qzk0LjkyMTIgMTUuNzUyMyA5NC41NjU3IDE1LjY2MDkgOTQuMjA0IDE1LjY1ODZDOTIuNzgzNSAxNS42NTg2IDkxLjA5IDE3LjEzNDMgODkuNjcwNCAxOC43NjcyQzg4LjQ2OSAyMC4yNDI5IDgyLjI5NTggMjguOTg5MiA3OS42NzM5IDI3LjA5MjlDNzguNDcyNSAyNi4xOTY5IDc4LjU3ODQgMjIuNjEyOCA3OS4zNDYyIDE4LjM5ODdDODAuNDU2IDE3LjkxNzYgODEuNjQ5OCAxNy42NjA2IDgyLjg1OTEgMTcuNjQyNkM4NC4wNjg0IDE3LjYyNDUgODUuMjY5MyAxNy44NDU4IDg2LjM5MyAxOC4yOTM2Qzg3LjEwMzMgMTguNjA5OSA4Ny4yMTQ2IDE4LjU1NjkgODYuODg1MSAxNy44MTkxQzg2LjQ0NzggMTYuNzEyOCA4My45OTAyIDE0Ljk3MzcgODAuMTEyMSAxNS43NjM3QzgwLjAwMjUgMTUuNzYzNyA3OS45NDc4IDE1LjgxNjcgNzkuODM4MiAxNS44MTY3QzgwLjE2NiAxNC40NDUzIDgwLjQ5MzcgMTMuMDI0NCA4MC45MzM3IDExLjY1MzlDODEuMzE2MiAxMC4zODk0IDgyLjM1NDIgOC4yMjg4NyA3OS41NjQzIDcuODYwNEM3OC42OTA3IDcuNzAyMjMgNzkuMDczMiA4LjEyMzcyIDc4Ljc0MjcgOS4yODMwN0M3OC4xOTUgMTEuMzkwNiA3Ny41NDEzIDE0LjEyODkgNzcuMDQ5MiAxNi45MjNDNzQuNTE3NiAxOC4zNjY4IDcyLjQ1MTYgMjAuNTA2MSA3MS4wOTUxIDIzLjA4ODJDNzEuNDEwNSAyMS44OTMyIDcxLjY0NzggMjAuNjc4OSA3MS44MDU0IDE5LjQ1MjlDNzEuODM2IDE5LjE0OTkgNzEuNzUyIDE4Ljg0NjQgNzEuNTY5OSAxOC42MDI0QzcxLjM4NzkgMTguMzU4NSA3MS4xMjEgMTguMTkxOCA3MC44MjIyIDE4LjEzNTRDNzAuMjIxNSAxNy45NzcyIDY5LjQ1MjggMTguMjQwNiA2OC43NDYyIDE5LjI0MTdDNjcuMDUyNyAyMS41NjA0IDY0LjkyMjkgMjUuMTk1NyA2MS42NDU1IDI2LjcyMzVDNTkuMjk2NSAyNy44Mjk5IDU4LjI1ODUgMjYuNzIzNSA1OC4yMDQ2IDI0Ljk4NjRDNTguNjE1NyAyNC44NzgxIDU5LjAxNzQgMjQuNzM3MSA1OS40MDYxIDI0LjU2NDlDNjMuNjY2NyAyMi43NzM3IDY1LjA4NzIgMjAuMDMzNSA2NC4wNDkyIDE4LjM0NzVDNjMuMDExMiAxNi43NjY3IDYwLjExNjMgMTcuMjQxMiA1Ny43Njc0IDE5LjYxMkM1Ni41Mjk5IDIwLjk4MTcgNTUuNzgwNiAyMi43MjM0IDU1LjYzNjYgMjQuNTY0OUM1NC42NTM0IDI0Ljc3NjEgNTMuNTYwNiAyNC45MzA2IDUyLjMwNDQgMjUuMDkxNUM1NC4yNzA5IDIxLjk4MjggNTQuMTA3NCAxNy43NjcgNTEuMjA4OSAxNy4wM0M0Ny44MjIgMTYuMTg3IDQ2LjEyODUgMTkuMzQ4NyA0NS40MTkxIDIxLjk4MjhDNDUuNjkzIDE5LjAzMjQgNDYuMTI5NCAxNi4wODEgNDYuNjc1MyAxMy4xODM1QzQ2Ljk0OTIgMTEuOTE5IDQ3LjgyMiA5Ljc1ODUxIDQ1LjAzMjEgOS4zOTAwNEM0NC4xNTg0IDkuMjMxODcgNDQuMjY3IDkuNjUzMzcgNDQuMzIxOCAxMC44MTI3QzQ0LjQzMTQgMTIuMzkzNiA0Mi42MjgzIDIxLjgyNTYgNDMuNTU2OCAyNS45MzU0QzQyLjM1NTQgMjYuMzAxMSA0MS44NjMzIDI3LjE5OTkgNDMuMzkyNCAyOC4wOTU5QzQ0LjMxNzQgMjguNDgxMiA0NS4zMTU5IDI4LjY1NzQgNDYuMzE2NyAyOC42MTE5QzQ3LjMxNzUgMjguNTY2MyA0OC4yOTU5IDI4LjMwMDMgNDkuMTgyMiAyNy44MzI2QzUwLjAwNjIgMjcuNDI5OCA1MC43NDcyIDI2Ljg3NTYgNTEuMzY2OCAyNi4xOTg3QzUyLjc4NzQgMjYuMDQwNiA1NC4yNjE3IDI1Ljc3NzIgNTUuNjI3NSAyNS41NjZDNTUuODQ1NiAyNy40MTAyIDU3LjEwMjcgMjguNzc5OCA1OS45NDI5IDI4LjUxNjVDNjMuOTg1MyAyOC4xNTA4IDY3LjU5MDQgMjMuMzUyNSA2OC45NTYyIDIxLjAzNDdDNjguNjgyMyAyMy41MTE2IDY3LjA0NDUgMjguOTM4IDY5Ljg4NDYgMjguNjc0N0M3MC45ODAxIDI4LjU2OTUgNzAuNTQwMSAyOC40MTE0IDcwLjU5NDkgMjcuNDYzMkM3MC44Njg3IDI0LjE5NjQgNzMuNjU0MSAyMS40MDQxIDc2LjQzNzYgMTkuNzE3MkM3NS45NDU1IDIzLjcyMTkgNzYuMTA5OCAyNy4zMDYgNzguMDIxNSAyOC40MTE0QzgxLjUxNzEgMzAuNTE4OCA4Ni4zNzkzIDI0Ljk4NjQgODkuMTA5OSAyMS42MTQ0Qzg3Ljc0MDUgMjQuNjE3OSA4Ni45NzkxIDI4LjQxMTQgODkuMDAwMyAyOC45OTFDOTEuNDA0MSAyOS42NzU4IDkzLjMxNTcgMjUuNzc3MiA5NS41NTUxIDIyLjgyNThDOTUuODI5IDI0LjkzMzMgOTcuMzAzNCAyOC42MjE2IDEwMy4yMDMgMjguNjIxNkMxMDkuNTM5IDI4LjU2ODYgMTEzLjUyNyAyNC44ODAzIDExMy4zNjMgMjAuOTI4NkwxMTMuMzc0IDIwLjkzMDVaTTI3LjgyMTYgMjcuNTExN0MyNS42OTI2IDI2Ljc2NTYgMjMuNjEyNyAyNS44ODU1IDIxLjU5NDUgMjQuODc2NkMyMy40MjM0IDI0LjIzMTIgMjUuMjExMSAyMy40NzQ1IDI2Ljk0NzkgMjIuNjExQzI3LjEzNzUgMjQuMjYxMSAyNy40MjkzIDI1Ljg5NzggMjcuODIxNiAyNy41MTE3Wk00My45NTEyIDMwLjQ2NzZDNDMuODk2NCAzMC4zMDk1IDQzLjQ1OTEgMzAuNTIwNyA0My4wNzc1IDMwLjQ2NzZDNDEuOTI5OSAzMC4zMDk1IDQwLjQwMDggMjguNzgxNyAzOS45NjM1IDI2LjMwNDhDMzkuMTQxOSAyMS44MjQ3IDM5LjYzNTggMTcuNDAwMyA0MS4wMDE1IDEwLjgxMzZDNDEuMjc1NCA5LjU0OTE0IDQyLjE0OSA3LjM4ODYyIDM5LjM1ODIgNi45NjcxMkMzOC40ODQ2IDYuODYxOTggMzguOTIwOSA3LjI4MzQ3IDM4LjcwMjcgOC4zODk3OUMzNy42MDcyIDEzLjI5MDUgMzMuNDU4OSAxNi44MjA2IDI5LjMwNzggMTkuMTkxNUMyOC44NzA2IDEzLjYwNTkgMjkuMDM0IDcuMzM1NTkgMzAuMTI5NSAzLjU0MjExQzMxLjA2MDcgMC4zMjgzMTQgMzIuMTUyNSAwLjkwNzk4NyAzMC43ODY4IDAuMjIzMTY4QzI5LjQyMSAtMC40NjE2NSAyNy44MzcxIDAuNDMzNDYgMjYuNTgwOSAyLjg1NTQ3QzI1LjMyNDggNS4yNzc0OCAxOS41OTM0IDE4LjI5NjMgMTAuNDEzIDI3LjA5NTdDNS43MTY5NiAzMS41NzQgMS40NTQ1MiAyOS4yNTYyIDAuNjM0NzEgMjguNTcxNEMtMC4wNzU1NDUzIDI3Ljk5MTcgLTAuMjkzNzM0IDI4Ljg4NzcgMC41MjUxNTkgMjkuNzgyOEM0LjI5NDYyIDMzLjc4NzUgOS44NjYyIDMxLjUyIDExLjg4NjUgMjkuNTcxNkMxNy40NTUzIDI0LjE5NzMgMjMuOTU4MSAxMi42MDQ4IDI2LjU4NDYgNy43MDQ5N0MyNi4yNzQ5IDExLjk4ODYgMjYuMzQ3OSAxNi4yOTE0IDI2LjgwMjggMjAuNTYyQzI0LjY5MTYgMjEuNTU3NCAyMi40OTg1IDIyLjM2ODQgMjAuMjQ4IDIyLjk4NThDMTguOTM3IDIzLjMwMjIgMTguMTE3MiAyMy44Mjg4IDE4LjExNzIgMjQuNDA4NUMxOC4xMTcyIDI0Ljk4ODIgMTguOTkwOSAyNS41Njc5IDIwLjI0OCAyNi4xNDU3QzIyLjQ4NzQgMjcuMTk5OSAyOS4wOTcgMzAuMTUwNCAzMC42ODA5IDMxLjA5ODVDMzIuMDUwMyAzMS44ODg1IDMyLjc1NjkgMzEuMjU2NyAzMy4xMzk0IDMwLjQxMzdDMzMuNjg3MSAyOS4zMDc0IDMyLjIxMDkgMjguNjc2NSAzMC43OTA0IDI4LjMwNjJDMzAuMTY0NyAyNS45OTE5IDI5LjcyNjMgMjMuNjMwOCAyOS40Nzk1IDIxLjI0NTlDMzIuODExNiAxOS4yNDM2IDM2LjE0MzggMTYuNjA5NCAzOC4wMDA3IDEzLjI5MTRDMzcuNTA5NiAxNi4wMzQzIDM2LjMwNzIgMjUuNDYzNiAzOS4zNzAxIDI5LjQxNTNDMzkuNzkzNiAyOS45NjA3IDQwLjM0MDEgMzAuMzk3OCA0MC45NjQ5IDMwLjY5MDdDNDEuNTg5NiAzMC45ODM2IDQyLjI3NDggMzEuMTI0IDQyLjk2NDMgMzEuMTAwM0M0My43MjkzIDMxLjA0NzMgNDQuMDU5OCAzMC41NzM3IDQzLjk0NzUgMzAuNDY3NiIgZmlsbD0iI0MyQzZDRSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzU4NDQ3XzQyNzA5Ij4KPHJlY3Qgd2lkdGg9IjExNy45NDYiIGhlaWdodD0iMzIiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==)",
+    "type": "other",
+    "description": "App header logo for desktop (768px and up). Light mode falls back to component-internal default; dark mode uses an inverted palette tuned for dark backgrounds."
+  },
   "app-header-border-bottom": {
     "value": {
       "width": "{borderWidth.s}",
@@ -248,6 +261,7 @@
   },
   "app-header-nav-menu-dropdown-shadow": {
     "value": "drop-shadow(0px 12px 16px rgba(16,29,40,0.08)) drop-shadow(0px 4px 6px rgba(16,29,40,0.03))",
+    "dark": "drop-shadow(0px 12px 16px rgba(0, 0, 0, 0.3)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.15))",
     "type": "other",
     "description": "Shadow for navigation dropdown menus (uses filter: drop-shadow)"
   },

package/data/component-design-tokens/icon-button-design-tokens.json

@@ -41,6 +41,7 @@
   },
   "icon-button-default-hover-color-bg": {
     "value": "{color.greyscale.100}",
+    "dark": "#3a3a3a",
     "type": "color"
   },
   "icon-button-default-disabled-color": {
@@ -65,6 +66,7 @@
   },
   "icon-button-dark-hover-color-bg": {
     "value": "{color.greyscale.100}",
+    "dark": "#3a3a3a",
     "type": "color"
   },
   "icon-button-dark-disabled-color": {

package/data/component-design-tokens/input-design-tokens.json

@@ -109,6 +109,7 @@
   },
   "text-input-color-icon": {
     "value": "{color.greyscale.600}",
+    "dark": "#aaaaaa",
     "type": "color"
   }
 }

package/data/component-design-tokens/link-design-tokens.json

@@ -98,6 +98,7 @@
   },
   "link-color-light-visited": {
     "value": "#9D8EBB",
+    "dark": "#9b8ec9",
     "type": "color"
   },
   "link-border-radius-focus": {

package/data/component-design-tokens/microsite-header-design-tokens.json

@@ -5,6 +5,7 @@
   },
   "microsite-header-alpha-badge-color-text": {
     "value": "{color.text.default}",
+    "dark": "#4d3700",
     "type": "color"
   },
   "microsite-header-beta-badge-color": {
@@ -13,6 +14,7 @@
   },
   "microsite-header-beta-badge-color-text": {
     "value": "{color.text.light}",
+    "dark": "#00527c",
     "type": "color"
   },
   "microsite-header-color-bg": {

package/data/component-design-tokens/notification-banner-design-tokens.json

@@ -225,18 +225,22 @@
   },
   "notification-banner-important-high-close-bg-hover": {
     "value": "{color.important.default}",
+    "dark": "#a88520",
     "type": "color"
   },
   "notification-banner-important-low-close-bg-hover": {
     "value": "{color.important.border}",
+    "dark": "#a88520",
     "type": "color"
   },
   "notification-banner-emergency-high-close-bg-hover": {
     "value": "{color.emergency.dark}",
+    "dark": "#b06060",
     "type": "color"
   },
   "notification-banner-emergency-low-close-bg-hover": {
     "value": "{color.emergency.border}",
+    "dark": "#b06060",
     "type": "color"
   }
 }

package/data/component-design-tokens/popover-design-tokens.json

@@ -15,6 +15,7 @@
   },
   "popover-color-bg": {
     "value": "{color.greyscale.white}",
+    "dark": "var(--goa-color-surface-popover)",
     "type": "color",
     "description": "Background color for popover container"
   },

package/data/component-design-tokens/progress-indicator-design-tokens.json

@@ -1,6 +1,9 @@
 {
   "circular-progress-color-background": {
-    "value": "rgba(255, 255, 255, 0.9)",
+    "value": {
+      "light": "rgba(255, 255, 255, 0.9)",
+      "dark": "rgba(30, 30, 30, 0.9)"
+    },
     "type": "color"
   },
   "circular-progress-large-margin-top": {

package/data/component-design-tokens/radio-design-tokens.json

@@ -57,9 +57,16 @@
   },
   "radio-border-disabled": {
     "value": {
-      "width": "{borderWidth.s}",
-      "style": "solid",
-      "color": "#b1b1b1"
+      "light": {
+        "width": "{borderWidth.s}",
+        "style": "solid",
+        "color": "#b1b1b1"
+      },
+      "dark": {
+        "width": "1px",
+        "style": "solid",
+        "color": "#555555"
+      }
     },
     "type": "border"
   },
@@ -109,6 +116,7 @@
   },
   "radio-color-bg": {
     "value": "{color.greyscale.white}",
+    "dark": "var(--goa-color-surface-input)",
     "type": "color"
   },
   "radio-color-bg-disabled": {
@@ -120,7 +128,7 @@
     "type": "color"
   },
   "radio-color-bg-error-hover": {
-    "value": "#f4c8c5",
+    "value": { "light": "#f4c8c5", "dark": "#3a1818" },
     "type": "color"
   },
   "radio-description": {
@@ -185,7 +193,7 @@
     "type": "typography"
   },
   "radio-label-color-disabled": {
-    "value": "#bab7b7",
+    "value": { "light": "#bab7b7", "dark": "#6a6a6a" },
     "type": "color"
   },
   "radio-label-compact": {

package/data/component-design-tokens/table-design-tokens.json

@@ -11,6 +11,7 @@
   },
   "table-color-bg-heading-hover": {
     "value": "{color.greyscale.100}",
+    "dark": "var(--goa-color-surface-heading-hover)",
     "type": "color",
     "description": "Header background color on hover"
   },
@@ -21,11 +22,13 @@
   },
   "table-color-bg-heading": {
     "value": "{color.greyscale.50}",
+    "dark": "var(--goa-color-surface-heading)",
     "type": "color",
     "description": "Header cell background color"
   },
   "table-color-bg-data": {
     "value": "{color.greyscale.white}",
+    "dark": "var(--goa-color-surface-table-data)",
     "type": "color",
     "description": "Data cell background color"
   },

package/data/component-design-tokens/temporary-notification-design-tokens.json

@@ -1,6 +1,7 @@
 {
   "temporary-notification-color-bg-basic": {
     "value": "#333333",
+    "dark": "var(--goa-color-surface-heading)",
     "type": "color",
     "description": "Background color for basic, indeterminate, and progress notifications"
   },

package/data/component-design-tokens/work-side-menu-design-tokens.json

@@ -29,8 +29,21 @@
   },
   "work-side-menu-account-bg": {
     "value": "{color.greyscale.white}",
+    "dark": "var(--goa-color-surface-widget)",
     "type": "color"
   },
+  "work-side-menu-logo": {
+    "value": "initial",
+    "dark": "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgZmlsbD0nbm9uZSc+PHJlY3Qgd2lkdGg9JzMxLjY5NScgaGVpZ2h0PSczMS42ODgnIHg9Jy4wMjgnIGZpbGw9JyMwMDg0QkInIHJ4PSc0Jy8+PGcgY2xpcC1wYXRoPSd1cmwoI2EpJz48bWFzayBpZD0nYicgd2lkdGg9JzQ3JyBoZWlnaHQ9JzM5JyB4PSctMTEnIHk9Jy0yJyBtYXNrVW5pdHM9J3VzZXJTcGFjZU9uVXNlJyBzdHlsZT0nbWFzay10eXBlOmFscGhhJz48cGF0aCBmaWxsPScjNTQ1ODYwJyBkPSdNMjIuMDE3IDMxLjEwM2E2My40NyA2My40NyAwIDAgMS03LjIyLTMuMTY0IDUyLjQxIDUyLjQxIDAgMCAwIDYuMTk1LTIuNzI0IDQzLjE0OCA0My4xNDggMCAwIDAgMS4wMjMgNS44OW0xMy4yNy0yNC4zOTJjLTEuMDM0LS4xMy0uNDk3LjM0OC0uNzg1IDEuNy0xLjI0NiA1LjgzMi02LjA1IDEwLjAzNS0xMC44NzMgMTIuODU1LS41MDYtNi42NzgtLjMtMTQuMDkzLjk2Ny0xOC42MzYgMS4wNjktMy44MzYgMi4zNC0zLjEzMi43NjMtMy45MzgtMS42Ni0uODQ4LTMuNDQuMjczLTQuODgyIDMuMTNDMTkuMDMzIDQuNjggMTIuMzkzIDIwLjE5IDEuNzggMzAuNjY0Yy01LjQzIDUuMzYtMTAuMzQgMi42LTExLjMyMyAxLjc3NS0uOC0uNjctMS4wOTYuMzY1LS4xMDMgMS40MjYgNC4zOSA0LjcgMTAuODA1IDIuMDAzIDEzLjE0MS0uMzE0IDYuNDU1LTYuNDA1IDEzLjk2LTIwLjE5MyAxNi45OTYtMjYuMDQ0YTg5Ljg5IDg5Ljg5IDAgMCAwIC4yNDMgMTUuMjk0IDQ0LjY5IDQ0LjY5IDAgMCAxLTcuNjE5IDIuODg1Yy0xLjUwNC4zOTEtMi40MzUgMS0yLjQ2MiAxLjY5MS0uMDMuNzU4Ljk4IDEuMzk3IDIuNDQgMi4wODUgMi42IDEuMjI2IDEwLjIxNiA0Ljc5OCAxMi4wOTMgNS44NzggMS42MDYuOTI1IDIuMzkuMjA0IDIuODY2LS43OTYuNjIyLTEuMzAyLTEuMDgzLTIuMDU0LTIuNzM1LTIuNTQ1YTUwLjQ3IDUwLjQ3IDAgMCAxLTEuNDgtOC4zODVjMy44Ny0yLjM2NSA3LjY4Mi01LjUyIDkuODgtOS40NTJhMTguMDA0IDE4LjAwNCAwIDAgMCAxLjU2OC00LjM2NWMuMjMtLjkzNC4yOTMtMS45LjE4Ni0yLjg1NSAwIDAtLjAzLS4yMDktLjE4Ni0uMjI5Jy8+PC9tYXNrPjxnIG1hc2s9J3VybCgjYiknPjxyZWN0IHdpZHRoPSczMS42OTUnIGhlaWdodD0nMzEuNjk1JyB4PScuMDI4JyBmaWxsPScjQzJDNkNFJyByeD0nMy4wNDgnLz48L2c+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0nYSc+PHJlY3Qgd2lkdGg9JzMyJyBoZWlnaHQ9JzMxLjk5MicgeT0nLjAwOCcgZmlsbD0nI2ZmZicgcng9JzQnLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=)",
+    "type": "other",
+    "description": "Work side menu logo. Light mode falls back to component-internal default; dark mode uses #0084BB blue + #C2C6CE 'A' shape tuned for dark backgrounds."
+  },
+  "work-side-menu-popover-shadow": {
+    "value": "{shadow.raised-light}",
+    "dark": "0 4px 6px rgba(0,0,0,0.4)",
+    "type": "other",
+    "description": "Box shadow applied to popovers (account, item) inside the work side menu"
+  },
   "work-side-menu-text-color": {
     "value": "{color.greyscale.600}",
     "type": "color"