@sage/design-tokens 18.12.2 → 18.14.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,11 @@
   --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-draggable-ghost: 0.5;
   --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/components/focus.css

@@ -17,4 +17,6 @@
   --focus-inverse-label: var(--mode-color-action-focus-inverse-txt);
   --focus-shadow-default: 0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border);
   --focus-shadow-inset: inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt);
+  --focus-shadow-inverse-default: 0 0 0 2px var(--focus-inverse-borderalt), 0 0 0 4px var(--focus-inverse-border);
+  --focus-shadow-inverse-inset: inset 0 0 0 2px var(--focus-inverse-border), inset 0 0 0 4px var(--focus-inverse-borderalt);
 }

package/css/light-all.css

@@ -955,6 +955,8 @@
   --focus-inverse-label: var(--mode-color-action-focus-inverse-txt);
   --focus-shadow-default: 0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border);
   --focus-shadow-inset: inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt);
+  --focus-shadow-inverse-default: 0 0 0 2px var(--focus-inverse-borderalt), 0 0 0 4px var(--focus-inverse-border);
+  --focus-shadow-inverse-inset: inset 0 0 0 2px var(--focus-inverse-border), inset 0 0 0 4px var(--focus-inverse-borderalt);
   --dataviz-chart-bar-fuchsia-bg-alt: var(--mode-color-colorcode-pink-faint);
   --dataviz-chart-bar-fuchsia-bg-default: var(--mode-color-colorcode-pink-intense);
   --dataviz-chart-bar-fuchsia-border: var(--mode-color-colorcode-pink-intense);
@@ -1106,6 +1108,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 +1120,11 @@
   --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-draggable-ghost: 0.5;
   --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,13 +122,17 @@ declare const tokens: {
         "3XL": DesignToken;
         "4XL": DesignToken;
       };
-      dialog: {
+      layout: {
         maxwidth: {
           S: DesignToken;
           M: DesignToken;
           L: DesignToken;
+          XL: DesignToken;
         };
       };
     };
+    draggable: {
+      ghost: 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,8 @@ 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";
+module.exports.containerDraggableGhost = "0.5";

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

@@ -33,6 +33,10 @@ declare const tokens: {
     shadow: {
       default: DesignToken;
       inset: DesignToken;
+      inverse: {
+        default: DesignToken;
+        inset: DesignToken;
+      };
     };
   };
 };

package/js/common/components/focus.js

@@ -12,3 +12,5 @@ module.exports.focusInverseBorder = "var(--mode-color-action-focus-inverse-with-
 module.exports.focusInverseLabel = "var(--mode-color-action-focus-inverse-txt)";
 module.exports.focusShadowDefault = "0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border)";
 module.exports.focusShadowInset = "inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt)";
+module.exports.focusShadowInverseDefault = "0 0 0 2px var(--focus-inverse-borderalt), 0 0 0 4px var(--focus-inverse-border)";
+module.exports.focusShadowInverseInset = "inset 0 0 0 2px var(--focus-inverse-border), inset 0 0 0 4px var(--focus-inverse-borderalt)";

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,13 @@ 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;
+/** ghost state for draggable table row, tile or card */
+export const containerDraggableGhost: 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,8 @@ 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";
+export const containerDraggableGhost = "0.5";

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

@@ -14,19 +14,75 @@ 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;
+  },
+];
+export const focusShadowInverseDefault: [
+  {
+    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 focusShadowInverseInset: [
+  {
+    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/components/focus.js

@@ -12,3 +12,5 @@ export const focusInverseBorder = "var(--mode-color-action-focus-inverse-with-de
 export const focusInverseLabel = "var(--mode-color-action-focus-inverse-txt)";
 export const focusShadowDefault = "0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border)";
 export const focusShadowInset = "inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt)";
+export const focusShadowInverseDefault = "0 0 0 2px var(--focus-inverse-borderalt), 0 0 0 4px var(--focus-inverse-border)";
+export const focusShadowInverseInset = "inset 0 0 0 2px var(--focus-inverse-border), inset 0 0 0 4px var(--focus-inverse-borderalt)";

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,9 @@
   "containerSizeFluidItems2Xl": "320px",
   "containerSizeFluidItems3Xl": "560px",
   "containerSizeFluidItems4Xl": "760px",
-  "containerSizeDialogMaxwidthS": "540px",
-  "containerSizeDialogMaxwidthM": "850px",
-  "containerSizeDialogMaxwidthL": "1080px"
+  "containerSizeLayoutMaxwidthS": "720px",
+  "containerSizeLayoutMaxwidthM": "1200px",
+  "containerSizeLayoutMaxwidthL": "1520px",
+  "containerSizeLayoutMaxwidthXl": "1840px",
+  "containerDraggableGhost": "0.5"
 }

package/json/components/focus.json

@@ -8,5 +8,7 @@
   "focusInverseBorder": "var(--mode-color-action-focus-inverse-with-default)",
   "focusInverseLabel": "var(--mode-color-action-focus-inverse-txt)",
   "focusShadowDefault": "0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border)",
-  "focusShadowInset": "inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt)"
+  "focusShadowInset": "inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt)",
+  "focusShadowInverseDefault": "0 0 0 2px var(--focus-inverse-borderalt), 0 0 0 4px var(--focus-inverse-border)",
+  "focusShadowInverseInset": "inset 0 0 0 2px var(--focus-inverse-border), inset 0 0 0 4px var(--focus-inverse-borderalt)"
 }

package/package.json

@@ -6,7 +6,7 @@
   },
   "description": "Design tokens for the Sage Design System.",
   "author": "The Sage Group plc",
-  "version": "18.12.2",
+  "version": "18.14.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,11 @@ $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-draggable-ghost: 0.5;
 $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/components/focus.scss

@@ -13,3 +13,5 @@ $focus-inverse-border: $mode-color-action-focus-inverse-with-default;
 $focus-inverse-label: $mode-color-action-focus-inverse-txt;
 $focus-shadow-default: 0 0 0 2px $focus-borderalt, 0 0 0 4px $focus-border;
 $focus-shadow-inset: inset 0 0 0 2px $focus-border, inset 0 0 0 4px $focus-borderalt;
+$focus-shadow-inverse-default: 0 0 0 2px $focus-inverse-borderalt, 0 0 0 4px $focus-inverse-border;
+$focus-shadow-inverse-inset: inset 0 0 0 2px $focus-inverse-border, inset 0 0 0 4px $focus-inverse-borderalt;