@sage/design-tokens 18.12.1 → 18.13.0

package/css/components/container.css

@@ -7,6 +7,9 @@
  */
 
 :root {
+  --container-size-dialog-maxwidth-s: 540px;
+  --container-size-dialog-maxwidth-m: 850px;
+  --container-size-dialog-maxwidth-l: 1080px;
   --container-size-fluid-items-2-xs: 80px;
   --container-size-fluid-items-xs: 128px;
   --container-size-fluid-items-s: 160px;
@@ -16,9 +19,10 @@
   --container-size-fluid-items-2-xl: 320px;
   --container-size-fluid-items-3-xl: 560px;
   --container-size-fluid-items-4-xl: 760px;
-  --container-size-dialog-maxwidth-s: 540px;
-  --container-size-dialog-maxwidth-m: 850px;
-  --container-size-dialog-maxwidth-l: 1080px;
+  --container-size-layout-maxwidth-s: 720px;
+  --container-size-layout-maxwidth-m: 1200px;
+  --container-size-layout-maxwidth-l: 1520px;
+  --container-size-layout-maxwidth-xl: 1840px;
   --container-action-bg-footer-activated: var(--mode-color-status-positive-default);
   --container-action-bg-footer-active: var(--mode-color-action-grayscale-active);
   --container-action-border-activated: var(--mode-color-status-positive-default);

package/css/dark.css

@@ -100,8 +100,8 @@
   --mode-color-generic-fg-inverse-moderate: #8c98a2;
   --mode-color-generic-fg-inverse-firm: #75838f;
   --mode-color-generic-surface-nought: #000000;
-  --mode-color-generic-surface-trace: #1e2d3b;
-  --mode-color-generic-surface-faint: #304658;
+  --mode-color-generic-surface-trace: #1b1b1b;
+  --mode-color-generic-surface-faint: #3b3b3b;
   --mode-color-generic-surface-harsh: #d1d6da;
   --mode-color-generic-surface-severe: #e8eaec;
   --mode-color-generic-surface-acute: #f4f5f6;
@@ -199,15 +199,15 @@
   --mode-color-action-nav-inverse-with-active: #FFFFFF;
   --mode-color-action-nav-inverse-with-default: #fffffff2;
   --mode-color-action-nav-inverse-with-hover: #FFFFFF;
-  --mode-color-action-main-active: #8fff98;
-  --mode-color-action-main-active-alt: #00f1424d;
-  --mode-color-action-main-default: #00f142;
-  --mode-color-action-main-default-alt: #00f142cc;
-  --mode-color-action-main-default-alt2: #46fb5e;
-  --mode-color-action-main-default-alt3: #00f14208;
-  --mode-color-action-main-hover: #46fb5e;
-  --mode-color-action-main-hover-alt: #00f14226;
-  --mode-color-action-main-hover-alt2: #8fff98;
+  --mode-color-action-main-active: #42f355;
+  --mode-color-action-main-active-alt: #3dda4c4d;
+  --mode-color-action-main-default: #3dda4c;
+  --mode-color-action-main-default-alt: #3dda4ccc;
+  --mode-color-action-main-default-alt2: #00d639;
+  --mode-color-action-main-default-alt3: #3dda4c08;
+  --mode-color-action-main-hover: #42f355;
+  --mode-color-action-main-hover-alt: #3dda4c26;
+  --mode-color-action-main-hover-alt2: #00f142;
   --mode-color-action-main-with-active: #000000;
   --mode-color-action-main-with-default: #000000;
   --mode-color-action-main-with-hover: #000000;

package/css/light-all.css

@@ -1106,6 +1106,9 @@
   --dataviz-generic-slate-bg-default: var(--mode-color-colorcode-slate-faint);
   --dataviz-generic-slate-border: var(--mode-color-colorcode-slate-harsh);
   --dataviz-generic-slate-pattern: var(--mode-color-colorcode-slate-harsh);
+  --container-size-dialog-maxwidth-s: 540px;
+  --container-size-dialog-maxwidth-m: 850px;
+  --container-size-dialog-maxwidth-l: 1080px;
   --container-size-fluid-items-2-xs: 80px;
   --container-size-fluid-items-xs: 128px;
   --container-size-fluid-items-s: 160px;
@@ -1115,9 +1118,10 @@
   --container-size-fluid-items-2-xl: 320px;
   --container-size-fluid-items-3-xl: 560px;
   --container-size-fluid-items-4-xl: 760px;
-  --container-size-dialog-maxwidth-s: 540px;
-  --container-size-dialog-maxwidth-m: 850px;
-  --container-size-dialog-maxwidth-l: 1080px;
+  --container-size-layout-maxwidth-s: 720px;
+  --container-size-layout-maxwidth-m: 1200px;
+  --container-size-layout-maxwidth-l: 1520px;
+  --container-size-layout-maxwidth-xl: 1840px;
   --container-action-bg-footer-activated: var(--mode-color-status-positive-default);
   --container-action-bg-footer-active: var(--mode-color-action-grayscale-active);
   --container-action-border-activated: var(--mode-color-status-positive-default);

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

@@ -104,6 +104,13 @@ declare const tokens: {
       border: DesignToken;
     };
     size: {
+      dialog: {
+        maxwidth: {
+          S: DesignToken;
+          M: DesignToken;
+          L: DesignToken;
+        };
+      };
       fluidItems: {
         "2XS": DesignToken;
         XS: DesignToken;
@@ -115,11 +122,12 @@ declare const tokens: {
         "3XL": DesignToken;
         "4XL": DesignToken;
       };
-      dialog: {
+      layout: {
         maxwidth: {
           S: DesignToken;
           M: DesignToken;
           L: DesignToken;
+          XL: DesignToken;
         };
       };
     };

package/js/common/components/container.js

@@ -65,6 +65,9 @@ module.exports.containerStandardPriorityInverseBgInfo = "var(--mode-color-status
 module.exports.containerStandardPriorityInverseBgNeutral = "var(--mode-color-status-neutral-inverse-default)";
 module.exports.containerStandardPriorityInverseBgPositive = "var(--mode-color-status-positive-inverse-default)";
 module.exports.containerQuoteBorder = "var(--mode-color-action-main-default)";
+module.exports.containerSizeDialogMaxwidthS = "540px";
+module.exports.containerSizeDialogMaxwidthM = "850px";
+module.exports.containerSizeDialogMaxwidthL = "1080px";
 module.exports.containerSizeFluidItems2Xs = "80px";
 module.exports.containerSizeFluidItemsXs = "128px";
 module.exports.containerSizeFluidItemsS = "160px";
@@ -74,6 +77,7 @@ module.exports.containerSizeFluidItemsXl = "288px";
 module.exports.containerSizeFluidItems2Xl = "320px";
 module.exports.containerSizeFluidItems3Xl = "560px";
 module.exports.containerSizeFluidItems4Xl = "760px";
-module.exports.containerSizeDialogMaxwidthS = "540px";
-module.exports.containerSizeDialogMaxwidthM = "850px";
-module.exports.containerSizeDialogMaxwidthL = "1080px";
+module.exports.containerSizeLayoutMaxwidthS = "720px";
+module.exports.containerSizeLayoutMaxwidthM = "1200px";
+module.exports.containerSizeLayoutMaxwidthL = "1520px";
+module.exports.containerSizeLayoutMaxwidthXl = "1840px";

package/js/common/dark.js

@@ -95,8 +95,8 @@ module.exports.modeColorGenericFgInverseSoft = "#a3adb5";
 module.exports.modeColorGenericFgInverseModerate = "#8c98a2";
 module.exports.modeColorGenericFgInverseFirm = "#75838f";
 module.exports.modeColorGenericSurfaceNought = "#000000";
-module.exports.modeColorGenericSurfaceTrace = "#1e2d3b";
-module.exports.modeColorGenericSurfaceFaint = "#304658";
+module.exports.modeColorGenericSurfaceTrace = "#1b1b1b";
+module.exports.modeColorGenericSurfaceFaint = "#3b3b3b";
 module.exports.modeColorGenericSurfaceHarsh = "#d1d6da";
 module.exports.modeColorGenericSurfaceSevere = "#e8eaec";
 module.exports.modeColorGenericSurfaceAcute = "#f4f5f6";
@@ -194,15 +194,15 @@ module.exports.modeColorActionNavInverseHover = "#007219";
 module.exports.modeColorActionNavInverseWithActive = "#FFFFFF";
 module.exports.modeColorActionNavInverseWithDefault = "#fffffff2";
 module.exports.modeColorActionNavInverseWithHover = "#FFFFFF";
-module.exports.modeColorActionMainActive = "#8fff98";
-module.exports.modeColorActionMainActiveAlt = "#00f1424d";
-module.exports.modeColorActionMainDefault = "#00f142";
-module.exports.modeColorActionMainDefaultAlt = "#00f142cc";
-module.exports.modeColorActionMainDefaultAlt2 = "#46fb5e";
-module.exports.modeColorActionMainDefaultAlt3 = "#00f14208";
-module.exports.modeColorActionMainHover = "#46fb5e";
-module.exports.modeColorActionMainHoverAlt = "#00f14226";
-module.exports.modeColorActionMainHoverAlt2 = "#8fff98";
+module.exports.modeColorActionMainActive = "#42f355";
+module.exports.modeColorActionMainActiveAlt = "#3dda4c4d";
+module.exports.modeColorActionMainDefault = "#3dda4c";
+module.exports.modeColorActionMainDefaultAlt = "#3dda4ccc";
+module.exports.modeColorActionMainDefaultAlt2 = "#00d639";
+module.exports.modeColorActionMainDefaultAlt3 = "#3dda4c08";
+module.exports.modeColorActionMainHover = "#42f355";
+module.exports.modeColorActionMainHoverAlt = "#3dda4c26";
+module.exports.modeColorActionMainHoverAlt2 = "#00f142";
 module.exports.modeColorActionMainWithActive = "#000000";
 module.exports.modeColorActionMainWithDefault = "#000000";
 module.exports.modeColorActionMainWithHover = "#000000";

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

@@ -93,6 +93,12 @@ export const containerStandardPriorityInverseBgInfo: string;
 export const containerStandardPriorityInverseBgNeutral: string;
 export const containerStandardPriorityInverseBgPositive: string;
 export const containerQuoteBorder: string;
+/** max width for small dialog */
+export const containerSizeDialogMaxwidthS: string;
+/** max width for medium dialog */
+export const containerSizeDialogMaxwidthM: string;
+/** max width for large dialog */
+export const containerSizeDialogMaxwidthL: string;
 /** min and max widths for responsive tile items */
 export const containerSizeFluidItems2Xs: string;
 /** min and max widths for responsive tile items */
@@ -111,9 +117,11 @@ export const containerSizeFluidItems2Xl: string;
 export const containerSizeFluidItems3Xl: string;
 /** Max width for single line of txt. */
 export const containerSizeFluidItems4Xl: string;
-/** max width for small dialog */
-export const containerSizeDialogMaxwidthS: string;
-/** max width for medium dialog */
-export const containerSizeDialogMaxwidthM: string;
-/** max width for large dialog */
-export const containerSizeDialogMaxwidthL: string;
+/** Used on Text blocks. Maintains optimal line length for readability. */
+export const containerSizeLayoutMaxwidthS: string;
+/** Used on forms and editorial with supporting elements. Prevents excessive line length, supports comprehension and scanning. */
+export const containerSizeLayoutMaxwidthM: string;
+/** Used on card or tile mixed layouts, dashboards and overview pages. Balances information density with readability on wide application layouts. */
+export const containerSizeLayoutMaxwidthL: string;
+/** Used on data-heavy views such as dense tables or data grids. Enables wide data views without forcing horizontal scrolling. May be exceeded where tables or data‑dense views require additional horizontal space. */
+export const containerSizeLayoutMaxwidthXl: string;

package/js/es6/components/container.js

@@ -65,6 +65,9 @@ export const containerStandardPriorityInverseBgInfo = "var(--mode-color-status-i
 export const containerStandardPriorityInverseBgNeutral = "var(--mode-color-status-neutral-inverse-default)";
 export const containerStandardPriorityInverseBgPositive = "var(--mode-color-status-positive-inverse-default)";
 export const containerQuoteBorder = "var(--mode-color-action-main-default)";
+export const containerSizeDialogMaxwidthS = "540px";
+export const containerSizeDialogMaxwidthM = "850px";
+export const containerSizeDialogMaxwidthL = "1080px";
 export const containerSizeFluidItems2Xs = "80px";
 export const containerSizeFluidItemsXs = "128px";
 export const containerSizeFluidItemsS = "160px";
@@ -74,6 +77,7 @@ export const containerSizeFluidItemsXl = "288px";
 export const containerSizeFluidItems2Xl = "320px";
 export const containerSizeFluidItems3Xl = "560px";
 export const containerSizeFluidItems4Xl = "760px";
-export const containerSizeDialogMaxwidthS = "540px";
-export const containerSizeDialogMaxwidthM = "850px";
-export const containerSizeDialogMaxwidthL = "1080px";
+export const containerSizeLayoutMaxwidthS = "720px";
+export const containerSizeLayoutMaxwidthM = "1200px";
+export const containerSizeLayoutMaxwidthL = "1520px";
+export const containerSizeLayoutMaxwidthXl = "1840px";

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

@@ -14,19 +14,39 @@ export const focusInverseBg: string;
 export const focusInverseBorderalt: string;
 export const focusInverseBorder: string;
 export const focusInverseLabel: string;
-export const focusShadowDefault: {
-  blur: string;
-  spread: string;
-  color: string;
-  type: string;
-  offsetX: string;
-  offsetY: string;
-}[];
-export const focusShadowInset: {
-  blur: string;
-  spread: string;
-  color: string;
-  type: string;
-  offsetX: string;
-  offsetY: string;
-}[];
+export const focusShadowDefault: [
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+];
+export const focusShadowInset: [
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+];

package/js/es6/dark.js

@@ -99,8 +99,8 @@ export const modeColorGenericFgInverseSoft = "#a3adb5"; // table dividers and bo
 export const modeColorGenericFgInverseModerate = "#8c98a2";
 export const modeColorGenericFgInverseFirm = "#75838f";
 export const modeColorGenericSurfaceNought = "#000000"; // used on full page backgrounds
-export const modeColorGenericSurfaceTrace = "#1e2d3b"; // used on full page backgrounds as an alternative option
-export const modeColorGenericSurfaceFaint = "#304658"; // table header hover color
+export const modeColorGenericSurfaceTrace = "#1b1b1b"; // used on full page backgrounds as an alternative option
+export const modeColorGenericSurfaceFaint = "#3b3b3b"; // table header hover color
 export const modeColorGenericSurfaceHarsh = "#d1d6da";
 export const modeColorGenericSurfaceSevere = "#e8eaec";
 export const modeColorGenericSurfaceAcute = "#f4f5f6";
@@ -201,15 +201,15 @@ export const modeColorActionNavInverseHover = "#007219"; // hover bg for nav ite
 export const modeColorActionNavInverseWithActive = "#FFFFFF"; // txt and icons on top of active bgs in nav contxts
 export const modeColorActionNavInverseWithDefault = "#fffffff2"; // hover bg for nav items
 export const modeColorActionNavInverseWithHover = "#FFFFFF"; // hover bg for nav items
-export const modeColorActionMainActive = "#8fff98";
-export const modeColorActionMainActiveAlt = "#00f1424d"; // Active color for inverse secondary and tertiary buttons
-export const modeColorActionMainDefault = "#00f142";
-export const modeColorActionMainDefaultAlt = "#00f142cc"; // border color for secondary and tertiary inverse buttons
-export const modeColorActionMainDefaultAlt2 = "#46fb5e"; // default color for links
-export const modeColorActionMainDefaultAlt3 = "#00f14208"; // default background color of inverse secondary buttons
-export const modeColorActionMainHover = "#46fb5e";
-export const modeColorActionMainHoverAlt = "#00f14226"; // hover for inverse secondary and tertiary buttons
-export const modeColorActionMainHoverAlt2 = "#8fff98"; // hover for links
+export const modeColorActionMainActive = "#42f355";
+export const modeColorActionMainActiveAlt = "#3dda4c4d"; // Active color for inverse secondary and tertiary buttons
+export const modeColorActionMainDefault = "#3dda4c";
+export const modeColorActionMainDefaultAlt = "#3dda4ccc"; // border color for secondary and tertiary inverse buttons
+export const modeColorActionMainDefaultAlt2 = "#00d639"; // default color for links
+export const modeColorActionMainDefaultAlt3 = "#3dda4c08"; // default background color of inverse secondary buttons
+export const modeColorActionMainHover = "#42f355";
+export const modeColorActionMainHoverAlt = "#3dda4c26"; // hover for inverse secondary and tertiary buttons
+export const modeColorActionMainHoverAlt2 = "#00f142"; // hover for links
 export const modeColorActionMainWithActive = "#000000";
 export const modeColorActionMainWithDefault = "#000000";
 export const modeColorActionMainWithHover = "#000000";

package/js/es6/global.d.ts

@@ -610,86 +610,160 @@ export const globalRadiusActionXl: string;
 export const globalRadiusAction2Xl: string;
 /** Icon only buttons */
 export const globalRadiusActionCircle: string;
-export const globalDepthNone: {
-  blur: string;
-  spread: string;
-  color: string;
-  type: string;
-  offsetX: string;
-  offsetY: string;
-}[];
+export const globalDepthNone: [
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+];
 /** Card default state */
-export const globalDepthLvl0: {
-  blur: string;
-  spread: string;
-  color: string;
-  type: string;
-  offsetX: string;
-  offsetY: string;
-}[];
+export const globalDepthLvl0: [
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+];
 /** Card hover state, Popover menus used on split, multiaction, dropdown and action popovers */
-export const globalDepthLvl1: {
-  blur: string;
-  spread: string;
-  color: string;
-  type: string;
-  offsetX: string;
-  offsetY: string;
-}[];
+export const globalDepthLvl1: [
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+];
 /** Nav Menu */
-export const globalDepthLvl2: {
-  blur: string;
-  spread: string;
-  color: string;
-  type: string;
-  offsetX: string;
-  offsetY: string;
-}[];
+export const globalDepthLvl2: [
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+];
 /** Dialog, Menu, Sidebar, Card drag state */
-export const globalDepthLvl3: {
-  blur: string;
-  spread: string;
-  color: string;
-  type: string;
-  offsetX: string;
-  offsetY: string;
-}[];
+export const globalDepthLvl3: [
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+];
 /** Sticky footer on dialogs, drawer and sidebar */
-export const globalDepthStickyB: {
-  blur: string;
-  spread: string;
-  color: string;
-  type: string;
-  offsetX: string;
-  offsetY: string;
-}[];
+export const globalDepthStickyB: [
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+];
 /** Left sticky column in Table. */
-export const globalDepthStickyL: {
-  blur: string;
-  spread: string;
-  color: string;
-  type: string;
-  offsetX: string;
-  offsetY: string;
-}[];
+export const globalDepthStickyL: [
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+];
 /** Right sticky column in Table. */
-export const globalDepthStickyR: {
-  blur: string;
-  spread: string;
-  color: string;
-  type: string;
-  offsetX: string;
-  offsetY: string;
-}[];
+export const globalDepthStickyR: [
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+];
 /** Sticky inset shadow applied to first child cells on expandable table */
-export const globalDepthStickyT: {
-  blur: string;
-  spread: string;
-  color: string;
-  type: string;
-  offsetX: string;
-  offsetY: string;
-}[];
+export const globalDepthStickyT: [
+  {
+    blur: string;
+    spread: string;
+    color: string;
+    type: string;
+    offsetX: string;
+    offsetY: string;
+  },
+];
 export const globalSizeNone: string;
 export const globalSize6Xs: string;
 export const globalSize5Xs: string;

package/json/components/container.json

@@ -62,6 +62,9 @@
   "containerStandardPriorityInverseBgNeutral": "var(--mode-color-status-neutral-inverse-default)",
   "containerStandardPriorityInverseBgPositive": "var(--mode-color-status-positive-inverse-default)",
   "containerQuoteBorder": "var(--mode-color-action-main-default)",
+  "containerSizeDialogMaxwidthS": "540px",
+  "containerSizeDialogMaxwidthM": "850px",
+  "containerSizeDialogMaxwidthL": "1080px",
   "containerSizeFluidItems2Xs": "80px",
   "containerSizeFluidItemsXs": "128px",
   "containerSizeFluidItemsS": "160px",
@@ -71,7 +74,8 @@
   "containerSizeFluidItems2Xl": "320px",
   "containerSizeFluidItems3Xl": "560px",
   "containerSizeFluidItems4Xl": "760px",
-  "containerSizeDialogMaxwidthS": "540px",
-  "containerSizeDialogMaxwidthM": "850px",
-  "containerSizeDialogMaxwidthL": "1080px"
+  "containerSizeLayoutMaxwidthS": "720px",
+  "containerSizeLayoutMaxwidthM": "1200px",
+  "containerSizeLayoutMaxwidthL": "1520px",
+  "containerSizeLayoutMaxwidthXl": "1840px"
 }

package/json/dark.json

@@ -92,8 +92,8 @@
   "modeColorGenericFgInverseModerate": "#8c98a2",
   "modeColorGenericFgInverseFirm": "#75838f",
   "modeColorGenericSurfaceNought": "#000000",
-  "modeColorGenericSurfaceTrace": "#1e2d3b",
-  "modeColorGenericSurfaceFaint": "#304658",
+  "modeColorGenericSurfaceTrace": "#1b1b1b",
+  "modeColorGenericSurfaceFaint": "#3b3b3b",
   "modeColorGenericSurfaceHarsh": "#d1d6da",
   "modeColorGenericSurfaceSevere": "#e8eaec",
   "modeColorGenericSurfaceAcute": "#f4f5f6",
@@ -191,15 +191,15 @@
   "modeColorActionNavInverseWithActive": "#FFFFFF",
   "modeColorActionNavInverseWithDefault": "#fffffff2",
   "modeColorActionNavInverseWithHover": "#FFFFFF",
-  "modeColorActionMainActive": "#8fff98",
-  "modeColorActionMainActiveAlt": "#00f1424d",
-  "modeColorActionMainDefault": "#00f142",
-  "modeColorActionMainDefaultAlt": "#00f142cc",
-  "modeColorActionMainDefaultAlt2": "#46fb5e",
-  "modeColorActionMainDefaultAlt3": "#00f14208",
-  "modeColorActionMainHover": "#46fb5e",
-  "modeColorActionMainHoverAlt": "#00f14226",
-  "modeColorActionMainHoverAlt2": "#8fff98",
+  "modeColorActionMainActive": "#42f355",
+  "modeColorActionMainActiveAlt": "#3dda4c4d",
+  "modeColorActionMainDefault": "#3dda4c",
+  "modeColorActionMainDefaultAlt": "#3dda4ccc",
+  "modeColorActionMainDefaultAlt2": "#00d639",
+  "modeColorActionMainDefaultAlt3": "#3dda4c08",
+  "modeColorActionMainHover": "#42f355",
+  "modeColorActionMainHoverAlt": "#3dda4c26",
+  "modeColorActionMainHoverAlt2": "#00f142",
   "modeColorActionMainWithActive": "#000000",
   "modeColorActionMainWithDefault": "#000000",
   "modeColorActionMainWithHover": "#000000",

package/package.json

@@ -6,7 +6,7 @@
   },
   "description": "Design tokens for the Sage Design System.",
   "author": "The Sage Group plc",
-  "version": "18.12.1",
+  "version": "18.13.0",
   "license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
   "tags": [
     "design tokens",

package/scss/components/container.scss

@@ -3,6 +3,9 @@
 
 // Do not edit directly, this file was auto-generated.
 
+$container-size-dialog-maxwidth-s: 540px;
+$container-size-dialog-maxwidth-m: 850px;
+$container-size-dialog-maxwidth-l: 1080px;
 $container-size-fluid-items-2-xs: 80px;
 $container-size-fluid-items-xs: 128px;
 $container-size-fluid-items-s: 160px;
@@ -12,9 +15,10 @@ $container-size-fluid-items-xl: 288px;
 $container-size-fluid-items-2-xl: 320px;
 $container-size-fluid-items-3-xl: 560px;
 $container-size-fluid-items-4-xl: 760px;
-$container-size-dialog-maxwidth-s: 540px;
-$container-size-dialog-maxwidth-m: 850px;
-$container-size-dialog-maxwidth-l: 1080px;
+$container-size-layout-maxwidth-s: 720px;
+$container-size-layout-maxwidth-m: 1200px;
+$container-size-layout-maxwidth-l: 1520px;
+$container-size-layout-maxwidth-xl: 1840px;
 $container-action-bg-footer-activated: $mode-color-status-positive-default;
 $container-action-bg-footer-active: $mode-color-action-grayscale-active;
 $container-action-border-activated: $mode-color-status-positive-default;

package/scss/dark.scss

@@ -96,8 +96,8 @@ $mode-color-generic-fg-inverse-soft: #a3adb5;
 $mode-color-generic-fg-inverse-moderate: #8c98a2;
 $mode-color-generic-fg-inverse-firm: #75838f;
 $mode-color-generic-surface-nought: #000000;
-$mode-color-generic-surface-trace: #1e2d3b;
-$mode-color-generic-surface-faint: #304658;
+$mode-color-generic-surface-trace: #1b1b1b;
+$mode-color-generic-surface-faint: #3b3b3b;
 $mode-color-generic-surface-harsh: #d1d6da;
 $mode-color-generic-surface-severe: #e8eaec;
 $mode-color-generic-surface-acute: #f4f5f6;
@@ -195,15 +195,15 @@ $mode-color-action-nav-inverse-hover: #007219;
 $mode-color-action-nav-inverse-with-active: #FFFFFF;
 $mode-color-action-nav-inverse-with-default: #fffffff2;
 $mode-color-action-nav-inverse-with-hover: #FFFFFF;
-$mode-color-action-main-active: #8fff98;
-$mode-color-action-main-active-alt: #00f1424d;
-$mode-color-action-main-default: #00f142;
-$mode-color-action-main-default-alt: #00f142cc;
-$mode-color-action-main-default-alt2: #46fb5e;
-$mode-color-action-main-default-alt3: #00f14208;
-$mode-color-action-main-hover: #46fb5e;
-$mode-color-action-main-hover-alt: #00f14226;
-$mode-color-action-main-hover-alt2: #8fff98;
+$mode-color-action-main-active: #42f355;
+$mode-color-action-main-active-alt: #3dda4c4d;
+$mode-color-action-main-default: #3dda4c;
+$mode-color-action-main-default-alt: #3dda4ccc;
+$mode-color-action-main-default-alt2: #00d639;
+$mode-color-action-main-default-alt3: #3dda4c08;
+$mode-color-action-main-hover: #42f355;
+$mode-color-action-main-hover-alt: #3dda4c26;
+$mode-color-action-main-hover-alt2: #00f142;
 $mode-color-action-main-with-active: #000000;
 $mode-color-action-main-with-default: #000000;
 $mode-color-action-main-with-hover: #000000;