@sage/design-tokens 17.5.1 → 17.7.0

package/css/components/table.css

@@ -10,6 +10,8 @@
   --table-header-subtle-bg-alt: var(--mode-color-generic-bg-faint);
   --table-header-subtle-bg-default: var(--mode-color-none);
   --table-header-subtle-border-default: var(--mode-color-generic-fg-soft);
+  --table-header-harsh-bg-alt: var(--mode-color-generic-surface-severe);
+  --table-header-harsh-bg-default: var(--mode-color-generic-surface-harsh);
   --table-header-harsh-border-default: var(--mode-color-generic-fg-soft);
   --table-row-bg-default: var(--mode-color-generic-bg-nought);
   --table-row-bg-alt: var(--mode-color-generic-bg-delicate);
@@ -21,8 +23,6 @@
   --table-footer-bg-default: var(--mode-color-generic-bg-soft);
   --table-footer-border-default: var(--mode-color-generic-fg-soft);
   --table-header-subtle-label-default: var(--mode-color-generic-txt-severe);
-  --table-header-harsh-bg-alt: var(--mode-color-action-grayscale-default);
-  --table-header-harsh-bg-default: var(--mode-color-action-grayscale-default-alt);
   --table-header-harsh-label-default: var(--mode-color-generic-txt-inverse-severe);
   --table-row-label-default: var(--mode-color-generic-txt-severe);
   --table-footer-label-default: var(--mode-color-generic-txt-severe);

package/css/dark.css

@@ -93,6 +93,8 @@
   --mode-color-generic-fg-inverse-extreme: #000000;
   --mode-color-generic-surface-nought: #000000;
   --mode-color-generic-surface-faint: #253b4e;
+  --mode-color-generic-surface-harsh: #d1d6da;
+  --mode-color-generic-surface-severe: #e8eaec;
   --mode-color-action-ai-grad-active: linear-gradient(90deg, #00d63926 0%, #00d6de26 40%, #9d60ff26 90%);
   --mode-color-action-ai-grad-hover: linear-gradient(90deg, #00d63914 0%, #00d6de14 40%, #9d60ff14 90%);
   --mode-color-action-ai-grad-default: linear-gradient(90deg, #00d639  0%, #00d6de 40%, #9d60ff 90%);

package/css/global.css

@@ -14,6 +14,12 @@
   --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-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;

package/css/light.css

@@ -93,6 +93,8 @@
   --mode-color-generic-fg-inverse-extreme: #FFFFFF;
   --mode-color-generic-surface-nought: #FFFFFF;
   --mode-color-generic-surface-faint: #f4f5f6;
+  --mode-color-generic-surface-harsh: #475a6a;
+  --mode-color-generic-surface-severe: #304658;
   --mode-color-action-ai-grad-active: linear-gradient(90deg, #13a03826 0%, #14919726 40%, #a87cfb26 90%);
   --mode-color-action-ai-grad-hover: linear-gradient(90deg, #13a03814 0%, #14919714 40%, #a87cfb14 90%);
   --mode-color-action-ai-grad-default: linear-gradient(90deg, #13a038  0%, #149197 40%, #a87cfb 90%);

package/js/common/components/table.js

@@ -6,8 +6,8 @@ module.exports.tableHeaderSubtleBgAlt = "var(--mode-color-generic-bg-faint)";
 module.exports.tableHeaderSubtleBgDefault = "var(--mode-color-none)";
 module.exports.tableHeaderSubtleBorderDefault = "var(--mode-color-generic-fg-soft)";
 module.exports.tableHeaderSubtleLabelDefault = "var(--mode-color-generic-txt-severe)";
-module.exports.tableHeaderHarshBgAlt = "var(--mode-color-action-grayscale-default)";
-module.exports.tableHeaderHarshBgDefault = "var(--mode-color-action-grayscale-default-alt)";
+module.exports.tableHeaderHarshBgAlt = "var(--mode-color-generic-surface-severe)";
+module.exports.tableHeaderHarshBgDefault = "var(--mode-color-generic-surface-harsh)";
 module.exports.tableHeaderHarshBorderDefault = "var(--mode-color-generic-fg-soft)";
 module.exports.tableHeaderHarshLabelDefault = "var(--mode-color-generic-txt-inverse-severe)";
 module.exports.tableRowBgDefault = "var(--mode-color-generic-bg-nought)";

package/js/common/dark.d.ts

@@ -155,6 +155,8 @@ declare const tokens: {
         surface: {
           nought: DesignToken;
           faint: DesignToken;
+          harsh: DesignToken;
+          severe: DesignToken;
         };
       };
       action: {

package/js/common/dark.js

@@ -88,6 +88,8 @@ module.exports.modeColorGenericFgInverseFirm = "#75838f";
 module.exports.modeColorGenericFgInverseExtreme = "#000000";
 module.exports.modeColorGenericSurfaceNought = "#000000";
 module.exports.modeColorGenericSurfaceFaint = "#253b4e";
+module.exports.modeColorGenericSurfaceHarsh = "#d1d6da";
+module.exports.modeColorGenericSurfaceSevere = "#e8eaec";
 module.exports.modeColorActionAiGradActive = "linear-gradient(90deg, #00d63926 0%, #00d6de26 40%, #9d60ff26 90%)";
 module.exports.modeColorActionAiGradHover = "linear-gradient(90deg, #00d63914 0%, #00d6de14 40%, #9d60ff14 90%)";
 module.exports.modeColorActionAiGradDefault = "linear-gradient(90deg, #00d639  0%, #00d6de 40%, #9d60ff 90%)";

package/js/common/global.d.ts

@@ -29,6 +29,14 @@ declare const tokens: {
       XL: DesignToken;
       XXL: DesignToken;
     };
+    breakpoint: {
+      XS: DesignToken;
+      S: DesignToken;
+      M: DesignToken;
+      L: DesignToken;
+      XL: DesignToken;
+      XXL: DesignToken;
+    };
     font: {
       fluid: {
         heading: {

package/js/common/global.js

@@ -9,6 +9,12 @@ module.exports.globalBorderwidthM = "3px";
 module.exports.globalBorderwidthL = "4px";
 module.exports.globalBorderwidthXl = "6px";
 module.exports.globalBorderwidthXxl = "8px";
+module.exports.globalBreakpointXs = "320px";
+module.exports.globalBreakpointS = "600px";
+module.exports.globalBreakpointM = "960px";
+module.exports.globalBreakpointL = "1260px";
+module.exports.globalBreakpointXl = "1600px";
+module.exports.globalBreakpointXxl = "1920px";
 module.exports.globalFontFluidHeadingS = "[object Object]";
 module.exports.globalFontFluidHeadingM = "[object Object]";
 module.exports.globalFontFluidHeadingL = "[object Object]";

package/js/common/light.d.ts

@@ -155,6 +155,8 @@ declare const tokens: {
         surface: {
           nought: DesignToken;
           faint: DesignToken;
+          harsh: DesignToken;
+          severe: DesignToken;
         };
       };
       action: {

package/js/common/light.js

@@ -88,6 +88,8 @@ module.exports.modeColorGenericFgInverseFirm = "#6f6f6f";
 module.exports.modeColorGenericFgInverseExtreme = "#FFFFFF";
 module.exports.modeColorGenericSurfaceNought = "#FFFFFF";
 module.exports.modeColorGenericSurfaceFaint = "#f4f5f6";
+module.exports.modeColorGenericSurfaceHarsh = "#475a6a";
+module.exports.modeColorGenericSurfaceSevere = "#304658";
 module.exports.modeColorActionAiGradActive = "linear-gradient(90deg, #13a03826 0%, #14919726 40%, #a87cfb26 90%)";
 module.exports.modeColorActionAiGradHover = "linear-gradient(90deg, #13a03814 0%, #14919714 40%, #a87cfb14 90%)";
 module.exports.modeColorActionAiGradDefault = "linear-gradient(90deg, #13a038  0%, #149197 40%, #a87cfb 90%)";

package/js/es6/components/table.js

@@ -6,8 +6,8 @@ export const tableHeaderSubtleBgAlt = "var(--mode-color-generic-bg-faint)";
 export const tableHeaderSubtleBgDefault = "var(--mode-color-none)";
 export const tableHeaderSubtleBorderDefault = "var(--mode-color-generic-fg-soft)";
 export const tableHeaderSubtleLabelDefault = "var(--mode-color-generic-txt-severe)";
-export const tableHeaderHarshBgAlt = "var(--mode-color-action-grayscale-default)";
-export const tableHeaderHarshBgDefault = "var(--mode-color-action-grayscale-default-alt)";
+export const tableHeaderHarshBgAlt = "var(--mode-color-generic-surface-severe)";
+export const tableHeaderHarshBgDefault = "var(--mode-color-generic-surface-harsh)";
 export const tableHeaderHarshBorderDefault = "var(--mode-color-generic-fg-soft)";
 export const tableHeaderHarshLabelDefault = "var(--mode-color-generic-txt-inverse-severe)";
 export const tableRowBgDefault = "var(--mode-color-generic-bg-nought)";

package/js/es6/dark.d.ts

@@ -119,6 +119,8 @@ export const modeColorGenericFgInverseExtreme: string;
 export const modeColorGenericSurfaceNought: string;
 /** used on full page backgrounds as an alternative option */
 export const modeColorGenericSurfaceFaint: string;
+export const modeColorGenericSurfaceHarsh: string;
+export const modeColorGenericSurfaceSevere: string;
 export const modeColorActionAiGradActive: string;
 export const modeColorActionAiGradHover: string;
 export const modeColorActionAiGradDefault: string;

package/js/es6/dark.js

@@ -92,6 +92,8 @@ export const modeColorGenericFgInverseFirm = "#75838f";
 export const modeColorGenericFgInverseExtreme = "#000000"; // deprecation candidate
 export const modeColorGenericSurfaceNought = "#000000"; // used on full page backgrounds
 export const modeColorGenericSurfaceFaint = "#253b4e"; // used on full page backgrounds as an alternative option
+export const modeColorGenericSurfaceHarsh = "#d1d6da";
+export const modeColorGenericSurfaceSevere = "#e8eaec";
 export const modeColorActionAiGradActive =
   "linear-gradient(90deg, #00d63926 0%, #00d6de26 40%, #9d60ff26 90%)";
 export const modeColorActionAiGradHover =

package/js/es6/global.d.ts

@@ -18,6 +18,12 @@ export const globalBorderwidthL: string;
 /** Double Focus Border */
 export const globalBorderwidthXl: string;
 export const globalBorderwidthXxl: string;
+export const globalBreakpointXs: string;
+export const globalBreakpointS: string;
+export const globalBreakpointM: string;
+export const globalBreakpointL: string;
+export const globalBreakpointXl: string;
+export const globalBreakpointXxl: string;
 export const globalFontFluidHeadingS: {
   fontFamily: string;
   fontWeight: string;

package/js/es6/global.js

@@ -13,6 +13,12 @@ export const globalBorderwidthM = "3px"; // Focus
 export const globalBorderwidthL = "4px"; // Focus underline. Dividing lines.
 export const globalBorderwidthXl = "6px"; // Double Focus Border
 export const globalBorderwidthXxl = "8px";
+export const globalBreakpointXs = "320px";
+export const globalBreakpointS = "600px";
+export const globalBreakpointM = "960px";
+export const globalBreakpointL = "1260px";
+export const globalBreakpointXl = "1600px";
+export const globalBreakpointXxl = "1920px";
 export const globalFontFluidHeadingS = {
   fontFamily: "Sage UI",
   fontWeight: "500",

package/js/es6/light.d.ts

@@ -119,6 +119,8 @@ export const modeColorGenericFgInverseExtreme: string;
 export const modeColorGenericSurfaceNought: string;
 /** used on full page backgrounds as an alternative option */
 export const modeColorGenericSurfaceFaint: string;
+export const modeColorGenericSurfaceHarsh: string;
+export const modeColorGenericSurfaceSevere: string;
 export const modeColorActionAiGradActive: string;
 export const modeColorActionAiGradHover: string;
 export const modeColorActionAiGradDefault: string;

package/js/es6/light.js

@@ -92,6 +92,8 @@ export const modeColorGenericFgInverseFirm = "#6f6f6f";
 export const modeColorGenericFgInverseExtreme = "#FFFFFF"; // deprecation candidate
 export const modeColorGenericSurfaceNought = "#FFFFFF"; // used on full page backgrounds
 export const modeColorGenericSurfaceFaint = "#f4f5f6"; // used on full page backgrounds as an alternative option
+export const modeColorGenericSurfaceHarsh = "#475a6a";
+export const modeColorGenericSurfaceSevere = "#304658";
 export const modeColorActionAiGradActive =
   "linear-gradient(90deg, #13a03826 0%, #14919726 40%, #a87cfb26 90%)";
 export const modeColorActionAiGradHover =

package/json/components/table.json

@@ -3,8 +3,8 @@
   "tableHeaderSubtleBgDefault": "var(--mode-color-none)",
   "tableHeaderSubtleBorderDefault": "var(--mode-color-generic-fg-soft)",
   "tableHeaderSubtleLabelDefault": "var(--mode-color-generic-txt-severe)",
-  "tableHeaderHarshBgAlt": "var(--mode-color-action-grayscale-default)",
-  "tableHeaderHarshBgDefault": "var(--mode-color-action-grayscale-default-alt)",
+  "tableHeaderHarshBgAlt": "var(--mode-color-generic-surface-severe)",
+  "tableHeaderHarshBgDefault": "var(--mode-color-generic-surface-harsh)",
   "tableHeaderHarshBorderDefault": "var(--mode-color-generic-fg-soft)",
   "tableHeaderHarshLabelDefault": "var(--mode-color-generic-txt-inverse-severe)",
   "tableRowBgDefault": "var(--mode-color-generic-bg-nought)",

package/json/dark.json

@@ -85,6 +85,8 @@
   "modeColorGenericFgInverseExtreme": "#000000",
   "modeColorGenericSurfaceNought": "#000000",
   "modeColorGenericSurfaceFaint": "#253b4e",
+  "modeColorGenericSurfaceHarsh": "#d1d6da",
+  "modeColorGenericSurfaceSevere": "#e8eaec",
   "modeColorActionAiGradActive": "linear-gradient(90deg, #00d63926 0%, #00d6de26 40%, #9d60ff26 90%)",
   "modeColorActionAiGradHover": "linear-gradient(90deg, #00d63914 0%, #00d6de14 40%, #9d60ff14 90%)",
   "modeColorActionAiGradDefault": "linear-gradient(90deg, #00d639  0%, #00d6de 40%, #9d60ff 90%)",

package/json/global.json

@@ -6,6 +6,12 @@
   "globalBorderwidthL": "4px",
   "globalBorderwidthXl": "6px",
   "globalBorderwidthXxl": "8px",
+  "globalBreakpointXs": "320px",
+  "globalBreakpointS": "600px",
+  "globalBreakpointM": "960px",
+  "globalBreakpointL": "1260px",
+  "globalBreakpointXl": "1600px",
+  "globalBreakpointXxl": "1920px",
   "globalFontFluidHeadingS": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.25,"fontSize":"clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)"},
   "globalFontFluidHeadingM": {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)"},
   "globalFontFluidHeadingL": {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)"},

package/json/light.json

@@ -85,6 +85,8 @@
   "modeColorGenericFgInverseExtreme": "#FFFFFF",
   "modeColorGenericSurfaceNought": "#FFFFFF",
   "modeColorGenericSurfaceFaint": "#f4f5f6",
+  "modeColorGenericSurfaceHarsh": "#475a6a",
+  "modeColorGenericSurfaceSevere": "#304658",
   "modeColorActionAiGradActive": "linear-gradient(90deg, #13a03826 0%, #14919726 40%, #a87cfb26 90%)",
   "modeColorActionAiGradHover": "linear-gradient(90deg, #13a03814 0%, #14919714 40%, #a87cfb14 90%)",
   "modeColorActionAiGradDefault": "linear-gradient(90deg, #13a038  0%, #149197 40%, #a87cfb 90%)",

package/package.json

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

package/scss/components/table.scss

@@ -6,6 +6,8 @@
 $table-header-subtle-bg-alt: $mode-color-generic-bg-faint;
 $table-header-subtle-bg-default: $mode-color-none;
 $table-header-subtle-border-default: $mode-color-generic-fg-soft;
+$table-header-harsh-bg-alt: $mode-color-generic-surface-severe;
+$table-header-harsh-bg-default: $mode-color-generic-surface-harsh;
 $table-header-harsh-border-default: $mode-color-generic-fg-soft;
 $table-row-bg-default: $mode-color-generic-bg-nought;
 $table-row-bg-alt: $mode-color-generic-bg-delicate;
@@ -17,8 +19,6 @@ $table-row-label-selected: $mode-color-generic-txt-extreme;
 $table-footer-bg-default: $mode-color-generic-bg-soft;
 $table-footer-border-default: $mode-color-generic-fg-soft;
 $table-header-subtle-label-default: $mode-color-generic-txt-severe;
-$table-header-harsh-bg-alt: $mode-color-action-grayscale-default;
-$table-header-harsh-bg-default: $mode-color-action-grayscale-default-alt;
 $table-header-harsh-label-default: $mode-color-generic-txt-inverse-severe;
 $table-row-label-default: $mode-color-generic-txt-severe;
 $table-footer-label-default: $mode-color-generic-txt-severe;

package/scss/dark.scss

@@ -89,6 +89,8 @@ $mode-color-generic-fg-inverse-firm: #75838f;
 $mode-color-generic-fg-inverse-extreme: #000000;
 $mode-color-generic-surface-nought: #000000;
 $mode-color-generic-surface-faint: #253b4e;
+$mode-color-generic-surface-harsh: #d1d6da;
+$mode-color-generic-surface-severe: #e8eaec;
 $mode-color-action-ai-grad-active: linear-gradient(90deg, #00d63926 0%, #00d6de26 40%, #9d60ff26 90%);
 $mode-color-action-ai-grad-hover: linear-gradient(90deg, #00d63914 0%, #00d6de14 40%, #9d60ff14 90%);
 $mode-color-action-ai-grad-default: linear-gradient(90deg, #00d639  0%, #00d6de 40%, #9d60ff 90%);

package/scss/global.scss

@@ -10,6 +10,12 @@ $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-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;

package/scss/light.scss

@@ -89,6 +89,8 @@ $mode-color-generic-fg-inverse-firm: #6f6f6f;
 $mode-color-generic-fg-inverse-extreme: #FFFFFF;
 $mode-color-generic-surface-nought: #FFFFFF;
 $mode-color-generic-surface-faint: #f4f5f6;
+$mode-color-generic-surface-harsh: #475a6a;
+$mode-color-generic-surface-severe: #304658;
 $mode-color-action-ai-grad-active: linear-gradient(90deg, #13a03826 0%, #14919726 40%, #a87cfb26 90%);
 $mode-color-action-ai-grad-hover: linear-gradient(90deg, #13a03814 0%, #14919714 40%, #a87cfb14 90%);
 $mode-color-action-ai-grad-default: linear-gradient(90deg, #13a038  0%, #149197 40%, #a87cfb 90%);