@sage/design-tokens 18.7.6 → 18.9.0

package/css/components/page.css

@@ -7,8 +7,24 @@
  */
 
 :root {
-  --page-bg-default: var(--mode-color-generic-surface-nought);
   --page-bg-alt: var(--mode-color-generic-surface-trace);
-  --page-txt-alt: var(--mode-color-generic-txt-moderate);
+  --page-bg-default: var(--mode-color-generic-surface-nought);
+  --page-content-caution-icon: var(--mode-color-status-warning-default);
+  --page-content-caution-txt: var(--mode-color-status-warning-txt);
+  --page-content-info-icon: var(--mode-color-status-info-default);
+  --page-content-info-txt: var(--mode-color-status-info-default);
+  --page-content-negative-icon: var(--mode-color-status-negative-default);
+  --page-content-negative-txt: var(--mode-color-status-negative-default);
+  --page-content-positive-icon: var(--mode-color-status-positive-default);
+  --page-content-positive-txt: var(--mode-color-status-positive-default);
+  --page-icon-default: var(--mode-color-generic-txt-severe);
   --page-txt-default: var(--mode-color-generic-txt-severe);
+  --page-content-icon-alt: var(--mode-color-generic-txt-moderate);
+  --page-content-icon-default: var(--mode-color-generic-txt-severe);
+  --page-content-txt-alt: var(--mode-color-generic-txt-moderate);
+  --page-content-txt-default: var(--mode-color-generic-txt-severe);
+  --page-content-inverse-icon-alt: var(--mode-color-generic-txt-inverse-moderate);
+  --page-content-inverse-icon-default: var(--mode-color-generic-txt-inverse-severe);
+  --page-content-inverse-txt-alt: var(--mode-color-generic-txt-inverse-moderate);
+  --page-content-inverse-txt-default: var(--mode-color-generic-txt-inverse-severe);
 }

package/css/dark.css

@@ -78,6 +78,9 @@
   --mode-color-generic-bg-inverse-faint: #f4f5f6;
   --mode-color-generic-bg-inverse-delicate: #e8eaec;
   --mode-color-generic-bg-inverse-soft: #dde0e3;
+  --mode-color-generic-depth-faint: #ffffff1a;
+  --mode-color-generic-depth-delicate: #ffffff26;
+  --mode-color-generic-depth-soft: #fff3;
   --mode-color-generic-txt-extreme: #FFFFFF;
   --mode-color-generic-txt-severe: #fffffff2;
   --mode-color-generic-txt-moderate: #ffffffab;

package/css/global.css

@@ -8,18 +8,22 @@
 
 :root {
   --global-borderwidth-none: 0;
-  --global-borderwidth-xs: 1px;
-  --global-borderwidth-s: 2px;
-  --global-borderwidth-m: 3px;
-  --global-borderwidth-l: 4px;
-  --global-borderwidth-xl: 6px;
-  --global-borderwidth-xxl: 8px;
   --global-breakpoint-xs: 320px;
   --global-breakpoint-s: 600px;
   --global-breakpoint-m: 960px;
   --global-breakpoint-l: 1260px;
   --global-breakpoint-xl: 1600px;
   --global-breakpoint-xxl: 1920px;
+  --global-modifier-button-active: 0.30;
+  --global-modifier-button-active-alt: 0.15;
+  --global-modifier-button-hover: 0.15;
+  --global-modifier-button-hover-alt: 0.10;
+  --global-modifier-input-disabled-fg: 0.3;
+  --global-modifier-input-disabled-bg: 0.05;
+  --global-radius-none: 0;
+  --global-radius-container-circle: 999px;
+  --global-radius-action-circle: 999px;
+  --global-depth-none: 0 0 0 0 rgba(0,0,0,0);
   --global-font-fluid-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;
   --global-font-fluid-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI;
   --global-font-fluid-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI;
@@ -94,13 +98,19 @@
   --global-font-static-comp-placeholder-l: 500 30px/1.5 Sage UI;
   --global-font-static-comp-placeholder-xl: 500 40px/1.5 Sage UI;
   --global-font-static-comp-placeholder-xxl: 500 52px/1.5 Sage UI;
-  --global-modifier-button-active: 0.30;
-  --global-modifier-button-active-alt: 0.15;
-  --global-modifier-button-hover: 0.15;
-  --global-modifier-button-hover-alt: 0.10;
-  --global-modifier-input-disabled-fg: 0.3;
-  --global-modifier-input-disabled-bg: 0.05;
-  --global-radius-none: 0;
+  --global-depth-lvl0: 0 0 1px 1px var(--mode-color-generic-depth-faint), 1px 2px 2px 0 var(--mode-color-generic-depth-soft);
+  --global-depth-lvl1: 0 1px 2px 0 var(--mode-color-generic-depth-faint), 2px 2px 10px 0 var(--mode-color-generic-depth-soft);
+  --global-depth-lvl2: 0 2px 3px 0 var(--mode-color-generic-depth-faint), 6px 6px 30px 0 var(--mode-color-generic-depth-delicate);
+  --global-depth-lvl3: 0 3px 4px 0 var(--mode-color-generic-depth-faint), 10px 10px 60px 0 var(--mode-color-generic-depth-faint);
+  --global-depth-sticky-b: 0 -1px 2px 0 var(--mode-color-generic-depth-faint), 2px -2px 10px 0 var(--mode-color-generic-depth-soft);
+  --global-depth-sticky-l: -2px 0 2px 0 var(--mode-color-generic-depth-faint), -5px 0 5px 0 var(--mode-color-generic-depth-faint);
+  --global-depth-sticky-r: 2px 0 2px 0 var(--mode-color-generic-depth-faint), 5px 0 5px 0 var(--mode-color-generic-depth-faint);
+  --global-borderwidth-xs: 1px;
+  --global-borderwidth-s: 2px;
+  --global-borderwidth-m: 3px;
+  --global-borderwidth-l: 4px;
+  --global-borderwidth-xl: 6px;
+  --global-borderwidth-xxl: 8px;
   --global-radius-container-3-xs: 1px;
   --global-radius-container-2-xs: 2px;
   --global-radius-container-xs: 4px;
@@ -111,7 +121,6 @@
   --global-radius-container-2-xl: 32px;
   --global-radius-container-3-xl: 40px;
   --global-radius-container-4-xl: 80px;
-  --global-radius-container-circle: 999px;
   --global-radius-action-2-xs: 1px;
   --global-radius-action-xs: 2px;
   --global-radius-action-s: 4px;
@@ -119,15 +128,6 @@
   --global-radius-action-l: 16px;
   --global-radius-action-xl: 20px;
   --global-radius-action-2-xl: 24px;
-  --global-radius-action-circle: 999px;
-  --global-depth-none: 0 0 0 0 rgba(0,0,0,0);
-  --global-depth-lvl0: 0 0 1px 1px #0000001A, 1px 2px 2px 0 #00000033;
-  --global-depth-lvl1: 0 1px 2px 0 #0000001A, 2px 2px 10px 0 #00000033;
-  --global-depth-lvl2: 0 2px 3px 0 #0000001A, 6px 6px 30px 0 #00000026;
-  --global-depth-lvl3: 0 3px 4px 0 #0000001A, 10px 10px 60px 0 #0000001A;
-  --global-depth-sticky-b: 0 -1px 2px 0 #0000001A, 2px -2px 10px 0 #00000033;
-  --global-depth-sticky-l: -2px 0 2px 0 #0000001A, -5px 0 5px 0 #0000001A;
-  --global-depth-sticky-r: 2px 0 2px 0 #0000001A, 5px 0 5px 0 #0000001A;
   --global-size-none: 0px;
   --global-size-6-xs: 2px;
   --global-size-5-xs: 4px;

package/css/light-all.css

@@ -4,18 +4,22 @@
 
 :root {
   --global-borderwidth-none: 0;
-  --global-borderwidth-xs: 1px;
-  --global-borderwidth-s: 2px;
-  --global-borderwidth-m: 3px;
-  --global-borderwidth-l: 4px;
-  --global-borderwidth-xl: 6px;
-  --global-borderwidth-xxl: 8px;
   --global-breakpoint-xs: 320px;
   --global-breakpoint-s: 600px;
   --global-breakpoint-m: 960px;
   --global-breakpoint-l: 1260px;
   --global-breakpoint-xl: 1600px;
   --global-breakpoint-xxl: 1920px;
+  --global-modifier-button-active: 0.30;
+  --global-modifier-button-active-alt: 0.15;
+  --global-modifier-button-hover: 0.15;
+  --global-modifier-button-hover-alt: 0.10;
+  --global-modifier-input-disabled-fg: 0.3;
+  --global-modifier-input-disabled-bg: 0.05;
+  --global-radius-none: 0;
+  --global-radius-container-circle: 999px;
+  --global-radius-action-circle: 999px;
+  --global-depth-none: 0 0 0 0 rgba(0,0,0,0);
   --global-font-fluid-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;
   --global-font-fluid-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI;
   --global-font-fluid-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI;
@@ -90,13 +94,19 @@
   --global-font-static-comp-placeholder-l: 500 30px/1.5 Sage UI;
   --global-font-static-comp-placeholder-xl: 500 40px/1.5 Sage UI;
   --global-font-static-comp-placeholder-xxl: 500 52px/1.5 Sage UI;
-  --global-modifier-button-active: 0.30;
-  --global-modifier-button-active-alt: 0.15;
-  --global-modifier-button-hover: 0.15;
-  --global-modifier-button-hover-alt: 0.10;
-  --global-modifier-input-disabled-fg: 0.3;
-  --global-modifier-input-disabled-bg: 0.05;
-  --global-radius-none: 0;
+  --global-depth-lvl0: 0 0 1px 1px var(--mode-color-generic-depth-faint), 1px 2px 2px 0 var(--mode-color-generic-depth-soft);
+  --global-depth-lvl1: 0 1px 2px 0 var(--mode-color-generic-depth-faint), 2px 2px 10px 0 var(--mode-color-generic-depth-soft);
+  --global-depth-lvl2: 0 2px 3px 0 var(--mode-color-generic-depth-faint), 6px 6px 30px 0 var(--mode-color-generic-depth-delicate);
+  --global-depth-lvl3: 0 3px 4px 0 var(--mode-color-generic-depth-faint), 10px 10px 60px 0 var(--mode-color-generic-depth-faint);
+  --global-depth-sticky-b: 0 -1px 2px 0 var(--mode-color-generic-depth-faint), 2px -2px 10px 0 var(--mode-color-generic-depth-soft);
+  --global-depth-sticky-l: -2px 0 2px 0 var(--mode-color-generic-depth-faint), -5px 0 5px 0 var(--mode-color-generic-depth-faint);
+  --global-depth-sticky-r: 2px 0 2px 0 var(--mode-color-generic-depth-faint), 5px 0 5px 0 var(--mode-color-generic-depth-faint);
+  --global-borderwidth-xs: 1px;
+  --global-borderwidth-s: 2px;
+  --global-borderwidth-m: 3px;
+  --global-borderwidth-l: 4px;
+  --global-borderwidth-xl: 6px;
+  --global-borderwidth-xxl: 8px;
   --global-radius-container-3-xs: 1px;
   --global-radius-container-2-xs: 2px;
   --global-radius-container-xs: 4px;
@@ -107,7 +117,6 @@
   --global-radius-container-2-xl: 32px;
   --global-radius-container-3-xl: 40px;
   --global-radius-container-4-xl: 80px;
-  --global-radius-container-circle: 999px;
   --global-radius-action-2-xs: 1px;
   --global-radius-action-xs: 2px;
   --global-radius-action-s: 4px;
@@ -115,15 +124,6 @@
   --global-radius-action-l: 16px;
   --global-radius-action-xl: 20px;
   --global-radius-action-2-xl: 24px;
-  --global-radius-action-circle: 999px;
-  --global-depth-none: 0 0 0 0 rgba(0,0,0,0);
-  --global-depth-lvl0: 0 0 1px 1px #0000001A, 1px 2px 2px 0 #00000033;
-  --global-depth-lvl1: 0 1px 2px 0 #0000001A, 2px 2px 10px 0 #00000033;
-  --global-depth-lvl2: 0 2px 3px 0 #0000001A, 6px 6px 30px 0 #00000026;
-  --global-depth-lvl3: 0 3px 4px 0 #0000001A, 10px 10px 60px 0 #0000001A;
-  --global-depth-sticky-b: 0 -1px 2px 0 #0000001A, 2px -2px 10px 0 #00000033;
-  --global-depth-sticky-l: -2px 0 2px 0 #0000001A, -5px 0 5px 0 #0000001A;
-  --global-depth-sticky-r: 2px 0 2px 0 #0000001A, 5px 0 5px 0 #0000001A;
   --global-size-none: 0px;
   --global-size-6-xs: 2px;
   --global-size-5-xs: 4px;
@@ -227,6 +227,9 @@
   --mode-color-generic-bg-inverse-faint: #ffffff0d;
   --mode-color-generic-bg-inverse-delicate: #ffffff1a;
   --mode-color-generic-bg-inverse-soft: #ffffff26;
+  --mode-color-generic-depth-faint: #0000001a;
+  --mode-color-generic-depth-delicate: #00000026;
+  --mode-color-generic-depth-soft: #0003;
   --mode-color-generic-txt-extreme: #000000;
   --mode-color-generic-txt-severe: #000000f2;
   --mode-color-generic-txt-moderate: #000000a6;
@@ -730,10 +733,26 @@
   --pill-generic-inverse-label-alt-hover: var(--mode-color-status-txt-inverse-with-default-alt);
   --pill-generic-label-alt-default: var(--mode-color-status-txt-with-default-alt);
   --pill-generic-label-alt-hover: var(--mode-color-status-txt-with-default-alt);
-  --page-bg-default: var(--mode-color-generic-surface-nought);
   --page-bg-alt: var(--mode-color-generic-surface-trace);
-  --page-txt-alt: var(--mode-color-generic-txt-moderate);
+  --page-bg-default: var(--mode-color-generic-surface-nought);
+  --page-content-caution-icon: var(--mode-color-status-warning-default);
+  --page-content-caution-txt: var(--mode-color-status-warning-txt);
+  --page-content-info-icon: var(--mode-color-status-info-default);
+  --page-content-info-txt: var(--mode-color-status-info-default);
+  --page-content-negative-icon: var(--mode-color-status-negative-default);
+  --page-content-negative-txt: var(--mode-color-status-negative-default);
+  --page-content-positive-icon: var(--mode-color-status-positive-default);
+  --page-content-positive-txt: var(--mode-color-status-positive-default);
+  --page-icon-default: var(--mode-color-generic-txt-severe);
   --page-txt-default: var(--mode-color-generic-txt-severe);
+  --page-content-icon-alt: var(--mode-color-generic-txt-moderate);
+  --page-content-icon-default: var(--mode-color-generic-txt-severe);
+  --page-content-txt-alt: var(--mode-color-generic-txt-moderate);
+  --page-content-txt-default: var(--mode-color-generic-txt-severe);
+  --page-content-inverse-icon-alt: var(--mode-color-generic-txt-inverse-moderate);
+  --page-content-inverse-icon-default: var(--mode-color-generic-txt-inverse-severe);
+  --page-content-inverse-txt-alt: var(--mode-color-generic-txt-inverse-moderate);
+  --page-content-inverse-txt-default: var(--mode-color-generic-txt-inverse-severe);
   --nav-primary-bg-active: var(--mode-color-action-nav-active);
   --nav-primary-bg-default: var(--mode-color-generic-bg-inverse-nought);
   --nav-primary-bg-hover: var(--mode-color-action-nav-hover);

package/css/light.css

@@ -78,6 +78,9 @@
   --mode-color-generic-bg-inverse-faint: #ffffff0d;
   --mode-color-generic-bg-inverse-delicate: #ffffff1a;
   --mode-color-generic-bg-inverse-soft: #ffffff26;
+  --mode-color-generic-depth-faint: #0000001a;
+  --mode-color-generic-depth-delicate: #00000026;
+  --mode-color-generic-depth-soft: #0003;
   --mode-color-generic-txt-extreme: #000000;
   --mode-color-generic-txt-severe: #000000f2;
   --mode-color-generic-txt-moderate: #000000a6;

package/js/common/components/page.d.ts

@@ -20,9 +20,37 @@ declare interface DesignToken {
 
 declare const tokens: {
   page: {
-    "bg-default": DesignToken;
     "bg-alt": DesignToken;
-    "txt-alt": DesignToken;
+    "bg-default": DesignToken;
+    "icon-default": DesignToken;
     "txt-default": DesignToken;
+    content: {
+      "icon-alt": DesignToken;
+      "icon-default": DesignToken;
+      "txt-alt": DesignToken;
+      "txt-default": DesignToken;
+      inverse: {
+        "icon-alt": DesignToken;
+        "icon-default": DesignToken;
+        "txt-alt": DesignToken;
+        "txt-default": DesignToken;
+      };
+      caution: {
+        icon: DesignToken;
+        txt: DesignToken;
+      };
+      info: {
+        icon: DesignToken;
+        txt: DesignToken;
+      };
+      negative: {
+        icon: DesignToken;
+        txt: DesignToken;
+      };
+      positive: {
+        icon: DesignToken;
+        txt: DesignToken;
+      };
+    };
   };
 };

package/js/common/components/page.js

@@ -2,7 +2,23 @@
  * Copyright © 2026 The Sage Group plc or its licensors. All Rights reserved
  */
 
-module.exports.pageBgDefault = "var(--mode-color-generic-surface-nought)";
 module.exports.pageBgAlt = "var(--mode-color-generic-surface-trace)";
-module.exports.pageTxtAlt = "var(--mode-color-generic-txt-moderate)";
+module.exports.pageBgDefault = "var(--mode-color-generic-surface-nought)";
+module.exports.pageIconDefault = "var(--mode-color-generic-txt-severe)";
 module.exports.pageTxtDefault = "var(--mode-color-generic-txt-severe)";
+module.exports.pageContentIconAlt = "var(--mode-color-generic-txt-moderate)";
+module.exports.pageContentIconDefault = "var(--mode-color-generic-txt-severe)";
+module.exports.pageContentTxtAlt = "var(--mode-color-generic-txt-moderate)";
+module.exports.pageContentTxtDefault = "var(--mode-color-generic-txt-severe)";
+module.exports.pageContentInverseIconAlt = "var(--mode-color-generic-txt-inverse-moderate)";
+module.exports.pageContentInverseIconDefault = "var(--mode-color-generic-txt-inverse-severe)";
+module.exports.pageContentInverseTxtAlt = "var(--mode-color-generic-txt-inverse-moderate)";
+module.exports.pageContentInverseTxtDefault = "var(--mode-color-generic-txt-inverse-severe)";
+module.exports.pageContentCautionIcon = "var(--mode-color-status-warning-default)";
+module.exports.pageContentCautionTxt = "var(--mode-color-status-warning-txt)";
+module.exports.pageContentInfoIcon = "var(--mode-color-status-info-default)";
+module.exports.pageContentInfoTxt = "var(--mode-color-status-info-default)";
+module.exports.pageContentNegativeIcon = "var(--mode-color-status-negative-default)";
+module.exports.pageContentNegativeTxt = "var(--mode-color-status-negative-default)";
+module.exports.pageContentPositiveIcon = "var(--mode-color-status-positive-default)";
+module.exports.pageContentPositiveTxt = "var(--mode-color-status-positive-default)";

package/js/common/dark.d.ts

@@ -133,6 +133,11 @@ declare const tokens: {
             soft: DesignToken;
           };
         };
+        depth: {
+          faint: DesignToken;
+          delicate: DesignToken;
+          soft: DesignToken;
+        };
         txt: {
           extreme: DesignToken;
           severe: DesignToken;

package/js/common/dark.js

@@ -73,6 +73,9 @@ module.exports.modeColorGenericBgInverseNought = "#FFFFFF";
 module.exports.modeColorGenericBgInverseFaint = "#f4f5f6";
 module.exports.modeColorGenericBgInverseDelicate = "#e8eaec";
 module.exports.modeColorGenericBgInverseSoft = "#dde0e3";
+module.exports.modeColorGenericDepthFaint = "#ffffff1a";
+module.exports.modeColorGenericDepthDelicate = "#ffffff26";
+module.exports.modeColorGenericDepthSoft = "#fff3";
 module.exports.modeColorGenericTxtExtreme = "#FFFFFF";
 module.exports.modeColorGenericTxtSevere = "#fffffff2";
 module.exports.modeColorGenericTxtModerate = "#ffffffab";

package/js/common/global.js

@@ -115,14 +115,14 @@ module.exports.globalRadiusActionL = "16px";
 module.exports.globalRadiusActionXl = "20px";
 module.exports.globalRadiusAction2Xl = "24px";
 module.exports.globalRadiusActionCircle = "999px";
-module.exports.globalDepthNone = [{"blur":"0","spread":"0","color":"rgba(0,0,0,0)","type":"dropShadow","offsetX":"0","offsetY":"0"}];
-module.exports.globalDepthLvl0 = [{"blur":"1px","spread":"1px","color":"#0000001A","type":"dropShadow","offsetX":"0","offsetY":"0"},{"blur":"2px","spread":"0","color":"#00000033","type":"dropShadow","offsetX":"1px","offsetY":"2px"}];
-module.exports.globalDepthLvl1 = [{"blur":"2px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"0","offsetY":"1px"},{"blur":"10px","spread":"0","color":"#00000033","type":"dropShadow","offsetX":"2px","offsetY":"2px"}];
-module.exports.globalDepthLvl2 = [{"blur":"3px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"0","offsetY":"2px"},{"blur":"30px","spread":"0","color":"#00000026","type":"dropShadow","offsetX":"6px","offsetY":"6px"}];
-module.exports.globalDepthLvl3 = [{"blur":"4px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"0","offsetY":"3px"},{"blur":"60px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"10px","offsetY":"10px"}];
-module.exports.globalDepthStickyB = [{"blur":"2px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"0","offsetY":"-1px"},{"blur":"10px","spread":"0","color":"#00000033","type":"dropShadow","offsetX":"2px","offsetY":"-2px"}];
-module.exports.globalDepthStickyL = [{"blur":"2px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"-2px","offsetY":"0"},{"blur":"5px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"-5px","offsetY":"0"}];
-module.exports.globalDepthStickyR = [{"blur":"2px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"2px","offsetY":"0"},{"blur":"5px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"5px","offsetY":"0"}];
+module.exports.globalDepthNone = "0 0 0 0 rgba(0,0,0,0)";
+module.exports.globalDepthLvl0 = "0 0 1px 1px var(--mode-color-generic-depth-faint), 1px 2px 2px 0 var(--mode-color-generic-depth-soft)";
+module.exports.globalDepthLvl1 = "0 1px 2px 0 var(--mode-color-generic-depth-faint), 2px 2px 10px 0 var(--mode-color-generic-depth-soft)";
+module.exports.globalDepthLvl2 = "0 2px 3px 0 var(--mode-color-generic-depth-faint), 6px 6px 30px 0 var(--mode-color-generic-depth-delicate)";
+module.exports.globalDepthLvl3 = "0 3px 4px 0 var(--mode-color-generic-depth-faint), 10px 10px 60px 0 var(--mode-color-generic-depth-faint)";
+module.exports.globalDepthStickyB = "0 -1px 2px 0 var(--mode-color-generic-depth-faint), 2px -2px 10px 0 var(--mode-color-generic-depth-soft)";
+module.exports.globalDepthStickyL = "-2px 0 2px 0 var(--mode-color-generic-depth-faint), -5px 0 5px 0 var(--mode-color-generic-depth-faint)";
+module.exports.globalDepthStickyR = "2px 0 2px 0 var(--mode-color-generic-depth-faint), 5px 0 5px 0 var(--mode-color-generic-depth-faint)";
 module.exports.globalSizeNone = "0px";
 module.exports.globalSize6Xs = "2px";
 module.exports.globalSize5Xs = "4px";

package/js/common/light.d.ts

@@ -133,6 +133,11 @@ declare const tokens: {
             soft: DesignToken;
           };
         };
+        depth: {
+          faint: DesignToken;
+          delicate: DesignToken;
+          soft: DesignToken;
+        };
         txt: {
           extreme: DesignToken;
           severe: DesignToken;

package/js/common/light.js

@@ -73,6 +73,9 @@ module.exports.modeColorGenericBgInverseNought = "#000000";
 module.exports.modeColorGenericBgInverseFaint = "#ffffff0d";
 module.exports.modeColorGenericBgInverseDelicate = "#ffffff1a";
 module.exports.modeColorGenericBgInverseSoft = "#ffffff26";
+module.exports.modeColorGenericDepthFaint = "#0000001a";
+module.exports.modeColorGenericDepthDelicate = "#00000026";
+module.exports.modeColorGenericDepthSoft = "#0003";
 module.exports.modeColorGenericTxtExtreme = "#000000";
 module.exports.modeColorGenericTxtSevere = "#000000f2";
 module.exports.modeColorGenericTxtModerate = "#000000a6";

package/js/es6/components/page.d.ts

@@ -6,9 +6,30 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const pageBgDefault: string;
 export const pageBgAlt: string;
-/** for subheadings etc */
-export const pageTxtAlt: string;
+export const pageBgDefault: string;
+/** default color for standard icons */
+export const pageIconDefault: string;
 /** for headings, paragraph txt etc  */
 export const pageTxtDefault: string;
+export const pageContentIconAlt: string;
+/** default color for standard icons */
+export const pageContentIconDefault: string;
+/** for subheadings etc */
+export const pageContentTxtAlt: string;
+/** for headings, paragraph txt etc  */
+export const pageContentTxtDefault: string;
+export const pageContentInverseIconAlt: string;
+export const pageContentInverseIconDefault: string;
+/** for subheadings etc */
+export const pageContentInverseTxtAlt: string;
+/** for headings, paragraph txt etc  */
+export const pageContentInverseTxtDefault: string;
+export const pageContentCautionIcon: string;
+export const pageContentCautionTxt: string;
+export const pageContentInfoIcon: string;
+export const pageContentInfoTxt: string;
+export const pageContentNegativeIcon: string;
+export const pageContentNegativeTxt: string;
+export const pageContentPositiveIcon: string;
+export const pageContentPositiveTxt: string;

package/js/es6/components/page.js

@@ -2,7 +2,23 @@
  * Copyright © 2026 The Sage Group plc or its licensors. All Rights reserved
  */
 
-export const pageBgDefault = "var(--mode-color-generic-surface-nought)";
 export const pageBgAlt = "var(--mode-color-generic-surface-trace)";
-export const pageTxtAlt = "var(--mode-color-generic-txt-moderate)";
+export const pageBgDefault = "var(--mode-color-generic-surface-nought)";
+export const pageIconDefault = "var(--mode-color-generic-txt-severe)";
 export const pageTxtDefault = "var(--mode-color-generic-txt-severe)";
+export const pageContentIconAlt = "var(--mode-color-generic-txt-moderate)";
+export const pageContentIconDefault = "var(--mode-color-generic-txt-severe)";
+export const pageContentTxtAlt = "var(--mode-color-generic-txt-moderate)";
+export const pageContentTxtDefault = "var(--mode-color-generic-txt-severe)";
+export const pageContentInverseIconAlt = "var(--mode-color-generic-txt-inverse-moderate)";
+export const pageContentInverseIconDefault = "var(--mode-color-generic-txt-inverse-severe)";
+export const pageContentInverseTxtAlt = "var(--mode-color-generic-txt-inverse-moderate)";
+export const pageContentInverseTxtDefault = "var(--mode-color-generic-txt-inverse-severe)";
+export const pageContentCautionIcon = "var(--mode-color-status-warning-default)";
+export const pageContentCautionTxt = "var(--mode-color-status-warning-txt)";
+export const pageContentInfoIcon = "var(--mode-color-status-info-default)";
+export const pageContentInfoTxt = "var(--mode-color-status-info-default)";
+export const pageContentNegativeIcon = "var(--mode-color-status-negative-default)";
+export const pageContentNegativeTxt = "var(--mode-color-status-negative-default)";
+export const pageContentPositiveIcon = "var(--mode-color-status-positive-default)";
+export const pageContentPositiveTxt = "var(--mode-color-status-positive-default)";

package/js/es6/dark.d.ts

@@ -78,6 +78,9 @@ export const modeColorGenericBgInverseNought: string;
 export const modeColorGenericBgInverseFaint: string;
 export const modeColorGenericBgInverseDelicate: string;
 export const modeColorGenericBgInverseSoft: string;
+export const modeColorGenericDepthFaint: string;
+export const modeColorGenericDepthDelicate: string;
+export const modeColorGenericDepthSoft: string;
 export const modeColorGenericTxtExtreme: string;
 export const modeColorGenericTxtSevere: string;
 export const modeColorGenericTxtModerate: string;

package/js/es6/dark.js

@@ -77,6 +77,9 @@ export const modeColorGenericBgInverseNought = "#FFFFFF";
 export const modeColorGenericBgInverseFaint = "#f4f5f6";
 export const modeColorGenericBgInverseDelicate = "#e8eaec";
 export const modeColorGenericBgInverseSoft = "#dde0e3";
+export const modeColorGenericDepthFaint = "#ffffff1a";
+export const modeColorGenericDepthDelicate = "#ffffff26";
+export const modeColorGenericDepthSoft = "#fff3";
 export const modeColorGenericTxtExtreme = "#FFFFFF";
 export const modeColorGenericTxtSevere = "#fffffff2";
 export const modeColorGenericTxtModerate = "#ffffffab";