@abgov/design-tokens 2.8.1 → 2.9.0

package/.github/workflows/pull-request.yml

@@ -26,23 +26,3 @@ jobs:
         run: npm run test
       - name: Build
         run: npm run build
-      - name: Add auto-generated file
-        run: |
-          echo "Autobuild is currently disabled"
-          # npm run build
-          # git config user.email "build-bot@gov.ab.ca"
-          # git config user.name "Build Bot"
-          # PREVIOUS_MESSAGE="$(git log --format=%B -n 1)"
-          # CURRENT_BRANCH="$(git branch --show-current)"
-          # echo $(git branch)
-          # git add .
-          # git commit --amend -m "$PREVIOUS_MESSAGE"
-          # git push origin $CURRENT_BRANCH -f
-      - name: Semantic Release
-        uses: cycjimmy/semantic-release-action@v4
-        with:
-          dry_run: true
-        env:
-          GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN_GRANULAR }}
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN_GRANULAR }}

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

@@ -101,7 +101,7 @@
     "description": "Modal maximum width"
   },
   "modal-heading-border-bottom": {
-    "value": "{borderWidth.s} solid {color.greyscale.150}",
+    "value": "none",
     "type": "other",
     "description": "Heading section bottom border separator"
   },
@@ -111,12 +111,12 @@
     "description": "Heading section padding"
   },
   "modal-content-padding": {
-    "value": "{space.l} 0 {space.xl} 0",
+    "value": "{space.xl} 0 {space.xl} 0",
     "type": "spacing",
     "description": "Content section padding"
   },
   "modal-actions-padding": {
-    "value": "0 {space.xl} {space.xl} {space.xl}",
+    "value": "{space.xs} {space.xl} {space.xl} {space.xl}",
     "type": "spacing",
     "description": "Actions section padding"
   },
@@ -151,14 +151,19 @@
     "description": "Callout variant heading padding for mobile (16px all around)"
   },
   "modal-content-padding-mobile": {
-    "value": "{space.l} 0 {space.xl} 0",
+    "value": "{space.xl} {space.m} {space.xl} {space.m}",
+    "type": "spacing",
+    "description": "Content section padding for mobile (32px top, 16px sides, 32px bottom)"
+  },
+  "modal-content-padding-desktop": {
+    "value": "{space.l} {space.l} {space.xl} {space.l}",
     "type": "spacing",
-    "description": "Content section padding for mobile (24px top, 16px sides, 32px bottom)"
+    "description": "Content section padding for desktop (24px top, 24px sides, 32px bottom)"
   },
   "modal-actions-padding-mobile": {
-    "value": "0 {space.m} {space.m} {space.m}",
+    "value": "{space.xs} {space.m} {space.m} {space.m}",
     "type": "spacing",
-    "description": "Actions section padding for mobile (0 top, 16px sides and bottom)"
+    "description": "Actions section padding for mobile (8px top, 16px sides and bottom)"
   },
   "modal-callout-information-bg": {
     "value": "{color.info.light}",

package/data/component-design-tokens/scroll-panel-design-tokens.json

@@ -0,0 +1,61 @@
+{
+  "scroll-panel-color-bg": {
+    "value": "{color.greyscale.white}",
+    "type": "color",
+    "description": "Background color for the scroll-panel host."
+  },
+  "scroll-panel-header-color-bg": {
+    "value": "{color.greyscale.white}",
+    "type": "color",
+    "description": "Background color for the scroll-panel header slot."
+  },
+  "scroll-panel-footer-color-bg": {
+    "value": "{color.greyscale.white}",
+    "type": "color",
+    "description": "Background color for the scroll-panel footer slot."
+  },
+  "scroll-panel-content-shadow-bottom": {
+    "value": {
+      "light": "inset 0px -4px 8px -4px rgba(0,0,0,0.25)",
+      "dark": "inset 0px -4px 8px -4px rgba(0,0,0,0.5)"
+    },
+    "type": "other",
+    "description": "Inset shadow on scroll-panel content when scrolled to the top (more content below the visible edge)."
+  },
+  "scroll-panel-content-shadow-top": {
+    "value": {
+      "light": "inset 0px 4px 8px -4px rgba(0,0,0,0.25)",
+      "dark": "inset 0px 4px 8px -4px rgba(0,0,0,0.5)"
+    },
+    "type": "other",
+    "description": "Inset shadow on scroll-panel content when scrolled to the bottom (more content above the visible edge)."
+  },
+  "scroll-panel-content-shadow-top-bottom": {
+    "value": {
+      "light": "inset 0px 4px 8px -4px rgba(0,0,0,0.175), inset 0px -4px 8px -4px rgba(0,0,0,0.175)",
+      "dark": "inset 0px 4px 8px -4px rgba(0,0,0,0.4), inset 0px -4px 8px -4px rgba(0,0,0,0.4)"
+    },
+    "type": "other",
+    "description": "Inset shadows on both edges of scroll-panel content when scrolled to the middle (more content above and below)."
+  },
+  "scroll-panel-header-scroll-border": {
+    "value": "{color.greyscale.150}",
+    "type": "color",
+    "description": "Border color shown under the header when content is scrolled beneath it."
+  },
+  "scroll-panel-header-scroll-shadow": {
+    "value": "{shadow.shallow-below}",
+    "type": "other",
+    "description": "Drop shadow cast below the header when content is scrolled beneath it."
+  },
+  "scroll-panel-footer-scroll-border": {
+    "value": "{color.greyscale.150}",
+    "type": "color",
+    "description": "Border color shown above the footer when content is scrolled below it."
+  },
+  "scroll-panel-footer-scroll-shadow": {
+    "value": "{shadow.shallow-above}",
+    "type": "other",
+    "description": "Drop shadow cast above the footer when content is scrolled below it."
+  }
+}

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

@@ -17,8 +17,9 @@
   },
   "temporary-notification-color-text": {
     "value": "{color.text.light}",
+    "dark": "#ffffff",
     "type": "color",
-    "description": "Text color for notification messages"
+    "description": "Text color for notification messages. Static white in dark mode because the notification background stays dark in both modes; cascading through {color.text.light} would flip to #1e1e1e (page bg) and become unreadable."
   },
   "temporary-notification-color-border": {
     "value": "{color.greyscale.700}",

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

@@ -55,37 +55,5 @@
   "work-side-menu-transition-duration-medium": {
     "value": "{motionDuration.medium-2}",
     "type": "other"
-  },
-  "work-side-menu-top-section-border": {
-    "value": "{borderWidth.s} solid transparent",
-    "type": "other"
-  },
-  "work-side-menu-top-section-shadow": {
-    "value": "0 4px 6px -4px rgba(0, 0, 0, 0)",
-    "type": "other"
-  },
-  "work-side-menu-top-section-border-scrolled": {
-    "value": "{borderWidth.s} solid {color.greyscale.200}",
-    "type": "other"
-  },
-  "work-side-menu-top-section-shadow-scrolled": {
-    "value": "0 4px 6px -4px rgba(0, 0, 0, 0.1)",
-    "type": "other"
-  },
-  "work-side-menu-bottom-section-border": {
-    "value": "{borderWidth.s} solid transparent",
-    "type": "other"
-  },
-  "work-side-menu-bottom-section-shadow": {
-    "value": "0 -4px 6px -4px rgba(0, 0, 0, 0)",
-    "type": "other"
-  },
-  "work-side-menu-bottom-section-border-scrolled": {
-    "value": "{borderWidth.s} solid {color.greyscale.200}",
-    "type": "other"
-  },
-  "work-side-menu-bottom-section-shadow-scrolled": {
-    "value": "0 -4px 6px -4px rgba(0, 0, 0, 0.1)",
-    "type": "other"
   }
 }

package/data/component-design-tokens/workspace-layout-design-tokens.json

@@ -0,0 +1,85 @@
+{
+  "workspace-layout-bg-color": {
+    "value": "{color.greyscale.50}",
+    "type": "color",
+    "description": "Background color of the workspace layout shell (visible around the main card)."
+  },
+  "workspace-layout-card-bg-color": {
+    "value": "{color.greyscale.white}",
+    "type": "color",
+    "description": "Background color of the workspace layout's main scrollable card."
+  },
+  "workspace-layout-header-bg-color": {
+    "value": "{color.greyscale.white}",
+    "type": "color",
+    "description": "Background color of the sticky page header inside the workspace layout card."
+  },
+  "workspace-layout-header-border-bottom": {
+    "value": {
+      "width": "{borderWidth.s}",
+      "style": "solid",
+      "color": "{color.greyscale.200}"
+    },
+    "type": "border",
+    "description": "Divider line under the sticky page header."
+  },
+  "workspace-layout-header-scroll-border-color": {
+    "value": "{color.greyscale.200}",
+    "type": "color",
+    "description": "Border color under the sticky page header when content is scrolled past it."
+  },
+  "workspace-layout-header-scroll-shadow": {
+    "value": "{shadow.shallow-below}",
+    "type": "other",
+    "description": "Soft drop shadow cast below the sticky page header when content is scrolled past it."
+  },
+  "workspace-layout-footer-bg-color": {
+    "value": "{color.greyscale.white}",
+    "type": "color",
+    "description": "Background color of the sticky page footer inside the workspace layout card."
+  },
+  "workspace-layout-footer-border-top": {
+    "value": {
+      "width": "{borderWidth.s}",
+      "style": "solid",
+      "color": "{color.greyscale.200}"
+    },
+    "type": "border",
+    "description": "Divider line above the sticky page footer."
+  },
+  "workspace-layout-footer-scroll-border-color": {
+    "value": "{color.greyscale.200}",
+    "type": "color",
+    "description": "Border color above the sticky page footer when content is scrolled past it."
+  },
+  "workspace-layout-footer-scroll-shadow": {
+    "value": "{shadow.shallow-above}",
+    "type": "other",
+    "description": "Soft drop shadow cast above the sticky page footer when content is scrolled past it."
+  },
+  "workspace-layout-mobile-toggle-top": {
+    "value": "{space.l}",
+    "type": "spacing",
+    "description": "Vertical offset of the auto-rendered mobile hamburger button from the top of the layout."
+  },
+  "workspace-layout-mobile-toggle-left": {
+    "value": "{space.s}",
+    "type": "spacing",
+    "description": "Horizontal offset of the auto-rendered mobile hamburger button from the left of the layout."
+  },
+  "workspace-layout-mobile-toggle-size": {
+    "value": "{iconSize.xl}",
+    "type": "sizing",
+    "description": "Width and height of the auto-rendered mobile hamburger button."
+  },
+  "workspace-layout-mobile-toggle-color": {
+    "value": "{color.text.default}",
+    "type": "color",
+    "description": "Color of the auto-rendered mobile hamburger button icon."
+  },
+  "workspace-layout-mobile-header-padding-left": {
+    "value": "{space.2xl}",
+    "type": "spacing",
+    "description": "Left padding of the sticky page header on mobile, reserving space so the header content clears the auto-rendered hamburger button."
+  }
+}

package/data/goa-global-design-tokens.json

@@ -770,66 +770,27 @@
   "shadow": {
     "100": {
       "value": {
-        "light": {
-          "x": "0",
-          "y": "1",
-          "blur": "0",
-          "spread": "0",
-          "color": "#1a1a1a12",
-          "type": "dropShadow"
-        },
-        "dark": {
-          "x": "0",
-          "y": "1",
-          "blur": "0",
-          "spread": "0",
-          "color": "rgba(255,255,255,0.05)",
-          "type": "dropShadow"
-        }
+        "light": "0px 1px 0px 0px #1a1a1a12",
+        "dark": "inset 0px 1px 0px 0px rgba(255,255,255,0.08)"
       },
-      "type": "boxShadow"
+      "type": "other",
+      "description": "Subtle 1px elevation. Light: bottom-edge line. Dark: top-edge inner rim (1px-line shadows don't read on dark, inverted to a thin highlight at the top edge instead)."
     },
     "150": {
       "value": {
-        "light": {
-          "x": "0",
-          "y": "1",
-          "blur": "0",
-          "spread": "0",
-          "color": "#1a1a1a40",
-          "type": "dropShadow"
-        },
-        "dark": {
-          "x": "0",
-          "y": "1",
-          "blur": "0",
-          "spread": "0",
-          "color": "rgba(255,255,255,0.08)",
-          "type": "dropShadow"
-        }
+        "light": "0px 1px 0px 0px #1a1a1a40",
+        "dark": "inset 0px 1px 0px 0px rgba(255,255,255,0.14)"
       },
-      "type": "boxShadow"
+      "type": "other",
+      "description": "Stronger 1px elevation divider. Same rim pattern as 100 but more visible."
     },
     "200": {
       "value": {
-        "light": {
-          "x": "0",
-          "y": "3",
-          "blur": "1",
-          "spread": "-1",
-          "color": "#1a1a1a12",
-          "type": "dropShadow"
-        },
-        "dark": {
-          "x": "0",
-          "y": "3",
-          "blur": "1",
-          "spread": "-1",
-          "color": "rgba(255,255,255,0.05)",
-          "type": "dropShadow"
-        }
+        "light": "0px 3px 1px -1px #1a1a1a12",
+        "dark": "inset 0px 1px 0px 0px rgba(255,255,255,0.08), 0px 3px 4px -1px rgba(0,0,0,0.4)"
       },
-      "type": "boxShadow"
+      "type": "other",
+      "description": "Stat card / subtle lift. Light: small drop. Dark: top-edge inner rim + small drop shadow underneath."
     },
     "300": {
       "value": {

package/dist/dark-theme.css

@@ -76,10 +76,14 @@
   --goa-radio-color-bg: var(--goa-color-surface-input);
   --goa-radio-color-bg-error-hover: #3a1818;
   --goa-radio-label-color-disabled: #6a6a6a;
+  --goa-scroll-panel-content-shadow-bottom: inset 0px -4px 8px -4px rgba(0,0,0,0.5);
+  --goa-scroll-panel-content-shadow-top: inset 0px 4px 8px -4px rgba(0,0,0,0.5);
+  --goa-scroll-panel-content-shadow-top-bottom: inset 0px 4px 8px -4px rgba(0,0,0,0.4), inset 0px -4px 8px -4px rgba(0,0,0,0.4);
   --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-temporary-notification-color-text: #ffffff;
   --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);
@@ -188,9 +192,9 @@
   --goa-color-extended-prairie-border: #5e4825;
   --goa-color-extended-prairie-text: #e8d8a0;
   --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-100: inset 0px 1px 0px 0px rgba(255,255,255,0.08);
+  --goa-shadow-150: inset 0px 1px 0px 0px rgba(255,255,255,0.14);
+  --goa-shadow-200: inset 0px 1px 0px 0px rgba(255,255,255,0.08), 0px 3px 4px -1px rgba(0,0,0,0.4);
   --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);

package/dist/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 12 May 2026 20:39:31 GMT
+ * Generated on Wed, 24 Jun 2026 16:58:34 GMT
  */
 
 :root {
@@ -239,10 +239,6 @@
   --goa-work-side-menu-item-icon-display: flex;
   --goa-work-side-menu-group-item-min-height: 1.75rem;
   --goa-work-side-menu-group-padding: 0 0 0 0.75rem;
-  --goa-work-side-menu-bottom-section-shadow-scrolled: 0 -4px 6px -4px rgba(0, 0, 0, 0.1);
-  --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;
@@ -274,6 +270,9 @@
   --goa-side-menu-item-focus-outline-offset: -3px;
   --goa-scrollable-padding-mobile: 1.5rem;
   --goa-scrollable-padding-desktop: 2rem;
+  --goa-scroll-panel-content-shadow-top-bottom: inset 0px 4px 8px -4px rgba(0,0,0,0.175), inset 0px -4px 8px -4px rgba(0,0,0,0.175);
+  --goa-scroll-panel-content-shadow-top: inset 0px 4px 8px -4px rgba(0,0,0,0.25);
+  --goa-scroll-panel-content-shadow-bottom: inset 0px -4px 8px -4px rgba(0,0,0,0.25);
   --goa-radio-label-color-disabled: #bab7b7;
   --goa-radio-inner-size: 16px;
   --goa-radio-inner-color-error-hover: #ba0000;
@@ -284,6 +283,7 @@
   --goa-notification-banner-padding-tb-compact: 0.9375rem;
   --goa-notification-banner-padding-tb: 1.4375rem;
   --goa-modal-content-wrapper-padding: 0;
+  --goa-modal-heading-border-bottom: none;
   --goa-modal-max-width: 480px;
   --goa-modal-content-margin-mobile: 0;
   --goa-modal-content-margin: 0;
@@ -440,6 +440,20 @@
   --goa-color-text-secondary: var(--goa-color-greyscale-600);
   --goa-color-text-default: var(--goa-color-greyscale-black);
   --goa-color-interactive-disabled: var(--goa-color-greyscale-300);
+  --goa-workspace-layout-mobile-header-padding-left: var(--goa-space-2xl);
+  --goa-workspace-layout-mobile-toggle-size: var(--goa-icon-size-xl);
+  --goa-workspace-layout-mobile-toggle-left: var(--goa-space-s);
+  --goa-workspace-layout-mobile-toggle-top: var(--goa-space-l);
+  --goa-workspace-layout-footer-scroll-shadow: var(--goa-shadow-shallow-above);
+  --goa-workspace-layout-footer-scroll-border-color: var(--goa-color-greyscale-200);
+  --goa-workspace-layout-footer-border-top: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
+  --goa-workspace-layout-footer-bg-color: var(--goa-color-greyscale-white);
+  --goa-workspace-layout-header-scroll-shadow: var(--goa-shadow-shallow-below);
+  --goa-workspace-layout-header-scroll-border-color: var(--goa-color-greyscale-200);
+  --goa-workspace-layout-header-border-bottom: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
+  --goa-workspace-layout-header-bg-color: var(--goa-color-greyscale-white);
+  --goa-workspace-layout-card-bg-color: var(--goa-color-greyscale-white);
+  --goa-workspace-layout-bg-color: var(--goa-color-greyscale-50);
   --goa-work-side-menu-item-text-color: var(--goa-color-greyscale-600);
   --goa-work-side-menu-item-padding: var(--goa-space-xs) var(--goa-space-xs) var(--goa-space-xs) 0.625rem;
   --goa-work-side-menu-item-color-bg-hover: var(--goa-color-greyscale-100);
@@ -452,10 +466,6 @@
   --goa-work-side-menu-group-item-padding: var(--goa-space-2xs) var(--goa-space-xs);
   --goa-work-side-menu-group-margin: var(--goa-space-xs) 0 0.375rem 1.125rem;
   --goa-work-side-menu-group-border: var(--goa-border-width-xl) solid var(--goa-color-greyscale-100);
-  --goa-work-side-menu-bottom-section-border-scrolled: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
-  --goa-work-side-menu-bottom-section-border: var(--goa-border-width-s) solid transparent;
-  --goa-work-side-menu-top-section-border-scrolled: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
-  --goa-work-side-menu-top-section-border: var(--goa-border-width-s) solid transparent;
   --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);
@@ -557,6 +567,13 @@
   --goa-side-menu-color-bg-menu-item-hover: var(--goa-color-greyscale-100);
   --goa-side-menu-color-bg: var(--goa-color-greyscale-white);
   --goa-side-menu-border-right: var(--goa-border-width-s) solid var(--goa-color-greyscale-150);
+  --goa-scroll-panel-footer-scroll-shadow: var(--goa-shadow-shallow-above);
+  --goa-scroll-panel-footer-scroll-border: var(--goa-color-greyscale-150);
+  --goa-scroll-panel-header-scroll-shadow: var(--goa-shadow-shallow-below);
+  --goa-scroll-panel-header-scroll-border: var(--goa-color-greyscale-150);
+  --goa-scroll-panel-footer-color-bg: var(--goa-color-greyscale-white);
+  --goa-scroll-panel-header-color-bg: var(--goa-color-greyscale-white);
+  --goa-scroll-panel-color-bg: var(--goa-color-greyscale-white);
   --goa-radio-reveal-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
   --goa-radio-reveal-padding: var(--goa-space-m) var(--goa-space-l);
   --goa-radio-reveal-margin: var(--goa-space-2xs) 0 0 calc(var(--goa-space-s) - 1px);
@@ -672,17 +689,17 @@
   --goa-modal-callout-information-icon: var(--goa-color-info-default);
   --goa-modal-callout-information-border: var(--goa-color-info-border);
   --goa-modal-callout-information-bg: var(--goa-color-info-light);
-  --goa-modal-actions-padding-mobile: 0 var(--goa-space-m) var(--goa-space-m) var(--goa-space-m);
-  --goa-modal-content-padding-mobile: var(--goa-space-l) 0 var(--goa-space-xl) 0;
+  --goa-modal-actions-padding-mobile: var(--goa-space-xs) var(--goa-space-m) var(--goa-space-m) var(--goa-space-m);
+  --goa-modal-content-padding-desktop: var(--goa-space-l) var(--goa-space-l) var(--goa-space-xl) var(--goa-space-l);
+  --goa-modal-content-padding-mobile: var(--goa-space-xl) var(--goa-space-m) var(--goa-space-xl) var(--goa-space-m);
   --goa-modal-callout-heading-padding-mobile: var(--goa-space-m);
   --goa-modal-heading-padding-mobile: var(--goa-space-m);
   --goa-modal-callout-heading-padding: var(--goa-space-m) var(--goa-space-l);
   --goa-modal-scrollable-padding-mobile: var(--goa-space-m);
   --goa-modal-scrollable-padding-desktop: var(--goa-space-l);
-  --goa-modal-actions-padding: 0 var(--goa-space-xl) var(--goa-space-xl) var(--goa-space-xl);
-  --goa-modal-content-padding: var(--goa-space-l) 0 var(--goa-space-xl) 0;
+  --goa-modal-actions-padding: var(--goa-space-xs) var(--goa-space-xl) var(--goa-space-xl) var(--goa-space-xl);
+  --goa-modal-content-padding: var(--goa-space-xl) 0 var(--goa-space-xl) 0;
   --goa-modal-heading-padding: 20px var(--goa-space-l);
-  --goa-modal-heading-border-bottom: var(--goa-border-width-s) solid var(--goa-color-greyscale-150);
   --goa-modal-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-150);
   --goa-modal-color-bg: var(--goa-color-greyscale-white);
   --goa-modal-overlay-opacity: var(--goa-opacity-background-modal);
@@ -1131,6 +1148,7 @@
   --goa-accordion-color-filled-bg-heading: var(--goa-color-greyscale-100);
   --goa-accordion-color-bg-heading: var(--goa-color-greyscale-white);
   --goa-input-color-text-default: var(--goa-color-text-default);
+  --goa-workspace-layout-mobile-toggle-color: var(--goa-color-text-default);
   --goa-work-side-menu-item-text-size: var(--goa-typography-body-s);
   --goa-work-side-menu-item-text-color-hover: var(--goa-color-text-default);
   --goa-work-side-menu-item-text-color-current: var(--goa-color-text-default);

package/dist/tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 12 May 2026 20:39:30 GMT
+// Generated on Wed, 24 Jun 2026 16:58:34 GMT
 
 $goa-accordion-color-bg-heading: #ffffff;
 $goa-accordion-color-filled-bg-heading: #f2f0f0;
@@ -676,18 +676,19 @@ $goa-modal-border: 1px solid #e9e9e9;
 $goa-modal-content-margin: 0;
 $goa-modal-content-margin-mobile: 0;
 $goa-modal-max-width: 480px;
-$goa-modal-heading-border-bottom: 1px solid #e9e9e9;
+$goa-modal-heading-border-bottom: none;
 $goa-modal-heading-padding: 20px 1.5rem;
-$goa-modal-content-padding: 1.5rem 0 2rem 0;
-$goa-modal-actions-padding: 0 2rem 2rem 2rem;
+$goa-modal-content-padding: 2rem 0 2rem 0;
+$goa-modal-actions-padding: 0.5rem 2rem 2rem 2rem;
 $goa-modal-content-wrapper-padding: 0;
 $goa-modal-scrollable-padding-desktop: 1.5rem;
 $goa-modal-scrollable-padding-mobile: 1rem;
 $goa-modal-callout-heading-padding: 1rem 1.5rem;
 $goa-modal-heading-padding-mobile: 1rem;
 $goa-modal-callout-heading-padding-mobile: 1rem;
-$goa-modal-content-padding-mobile: 1.5rem 0 2rem 0;
-$goa-modal-actions-padding-mobile: 0 1rem 1rem 1rem;
+$goa-modal-content-padding-mobile: 2rem 1rem 2rem 1rem;
+$goa-modal-content-padding-desktop: 1.5rem 1.5rem 2rem 1.5rem;
+$goa-modal-actions-padding-mobile: 0.5rem 1rem 1rem 1rem;
 $goa-modal-callout-information-bg: #ebf8ff;
 $goa-modal-callout-information-border: #cbeaf7;
 $goa-modal-callout-information-icon: #0077ad;
@@ -827,6 +828,16 @@ $goa-radio-size: 1.5rem;
 $goa-radio-reveal-margin: 0.25rem 0 0 calc(0.75rem - 1px);
 $goa-radio-reveal-padding: 1rem 1.5rem;
 $goa-radio-reveal-border: 1px solid #cdcdcd;
+$goa-scroll-panel-color-bg: #ffffff;
+$goa-scroll-panel-header-color-bg: #ffffff;
+$goa-scroll-panel-footer-color-bg: #ffffff;
+$goa-scroll-panel-content-shadow-bottom: inset 0px -4px 8px -4px rgba(0,0,0,0.25);
+$goa-scroll-panel-content-shadow-top: inset 0px 4px 8px -4px rgba(0,0,0,0.25);
+$goa-scroll-panel-content-shadow-top-bottom: inset 0px 4px 8px -4px rgba(0,0,0,0.175), inset 0px -4px 8px -4px rgba(0,0,0,0.175);
+$goa-scroll-panel-header-scroll-border: #e9e9e9;
+$goa-scroll-panel-header-scroll-shadow: 0px 1px 8px 0px rgba(0,0,0,0.07);
+$goa-scroll-panel-footer-scroll-border: #e9e9e9;
+$goa-scroll-panel-footer-scroll-shadow: 0px -2px 16px 0px rgba(0,0,0,0.1);
 $goa-scrollable-padding-desktop: 2rem;
 $goa-scrollable-padding-mobile: 1.5rem;
 $goa-side-menu-border-right: 1px solid #e9e9e9;
@@ -988,14 +999,6 @@ $goa-work-side-menu-popover-shadow: 0px 12px 16px -4px rgba(16,29,40,0.08), 0px
 $goa-work-side-menu-text-color: #6f6f6f;
 $goa-work-side-menu-mobile-bg: #f8f8f8;
 $goa-work-side-menu-transition-duration-medium: 300ms;
-$goa-work-side-menu-top-section-border: 1px solid transparent;
-$goa-work-side-menu-top-section-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0);
-$goa-work-side-menu-top-section-border-scrolled: 1px solid #cdcdcd;
-$goa-work-side-menu-top-section-shadow-scrolled: 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-$goa-work-side-menu-bottom-section-border: 1px solid transparent;
-$goa-work-side-menu-bottom-section-shadow: 0 -4px 6px -4px rgba(0, 0, 0, 0);
-$goa-work-side-menu-bottom-section-border-scrolled: 1px solid #cdcdcd;
-$goa-work-side-menu-bottom-section-shadow-scrolled: 0 -4px 6px -4px rgba(0, 0, 0, 0.1);
 $goa-work-side-menu-group-border: 3px solid #f2f0f0;
 $goa-work-side-menu-group-margin: 0.5rem 0 0.375rem 1.125rem;
 $goa-work-side-menu-group-padding: 0 0 0 0.75rem;
@@ -1016,6 +1019,21 @@ $goa-work-side-menu-item-text-color: #6f6f6f;
 $goa-work-side-menu-item-text-color-current: #000000;
 $goa-work-side-menu-item-text-color-hover: #000000;
 $goa-work-side-menu-item-text-size: 400 1rem/1.375rem acumin-variable, helvetica-neue, arial, sans-serif;
+$goa-workspace-layout-bg-color: #f8f8f8;
+$goa-workspace-layout-card-bg-color: #ffffff;
+$goa-workspace-layout-header-bg-color: #ffffff;
+$goa-workspace-layout-header-border-bottom: 1px solid #cdcdcd;
+$goa-workspace-layout-header-scroll-border-color: #cdcdcd;
+$goa-workspace-layout-header-scroll-shadow: 0px 1px 8px 0px rgba(0,0,0,0.07);
+$goa-workspace-layout-footer-bg-color: #ffffff;
+$goa-workspace-layout-footer-border-top: 1px solid #cdcdcd;
+$goa-workspace-layout-footer-scroll-border-color: #cdcdcd;
+$goa-workspace-layout-footer-scroll-shadow: 0px -2px 16px 0px rgba(0,0,0,0.1);
+$goa-workspace-layout-mobile-toggle-top: 1.5rem;
+$goa-workspace-layout-mobile-toggle-left: 0.75rem;
+$goa-workspace-layout-mobile-toggle-size: 2rem;
+$goa-workspace-layout-mobile-toggle-color: #000000;
+$goa-workspace-layout-mobile-header-padding-left: 3rem;
 $goa-color-interactive-default: #006dcc;
 $goa-color-interactive-secondary: #e0f1ff;
 $goa-color-interactive-hover: #045092;

package/package.json

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