@sage/design-tokens 17.5.1 → 17.6.0

package/css/components/button.css

@@ -50,6 +50,7 @@
   --button-typical-secondary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);
   --button-typical-secondary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);
   --button-typical-secondary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);
+  --button-typical-secondary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
   --button-typical-secondary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);
   --button-typical-tertiary-border-active: var(--mode-color-action-main-active);
   --button-typical-tertiary-border-disabled: var(--mode-color-action-inactive-default);
@@ -60,10 +61,12 @@
   --button-typical-tertiary-inverse-border-disabled: var(--mode-color-action-inactive-inverse-default);
   --button-typical-tertiary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);
   --button-typical-tertiary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);
+  --button-typical-tertiary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
   --button-typical-tertiary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);
   --button-typical-subtle-label-active: var(--mode-color-action-grayscale-with-active-alt);
   --button-typical-subtle-label-hover: var(--mode-color-action-grayscale-with-hover);
   --button-typical-subtle-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);
+  --button-typical-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
   --button-typical-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);
   --button-typical-toggle-bg-active-disabled: var(--mode-color-action-inactive-default);
   --button-typical-toggle-bg-active: var(--mode-color-action-grayscale-active);
@@ -89,7 +92,6 @@
   --button-typical-secondary-inverse-bg-default: var(--mode-color-action-main-inverse-default-alt3);
   --button-typical-secondary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);
   --button-typical-secondary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);
-  --button-typical-secondary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
   --button-typical-tertiary-bg-active: var(--mode-color-action-main-active-alt);
   --button-typical-tertiary-bg-default: var(--button-none);
   --button-typical-tertiary-bg-hover: var(--mode-color-action-main-hover-alt);
@@ -99,13 +101,11 @@
   --button-typical-tertiary-inverse-bg-default: var(--button-none);
   --button-typical-tertiary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover-alt);
   --button-typical-tertiary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);
-  --button-typical-tertiary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
   --button-typical-subtle-bg-active: var(--mode-color-action-grayscale-active-alt);
   --button-typical-subtle-bg-hover: var(--mode-color-action-grayscale-hover-alt);
   --button-typical-subtle-label-default: var(--mode-color-action-grayscale-default);
   --button-typical-subtle-inverse-bg-active: var(--mode-color-action-grayscale-inverse-active-alt);
   --button-typical-subtle-inverse-bg-hover: var(--mode-color-action-grayscale-inverse-hover-alt);
-  --button-typical-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
   --button-typical-toggle-label-active-disabled: var(--mode-color-action-inactive-txt-alt);
   --button-typical-toggle-bg-hover: var(--mode-color-action-grayscale-hover-alt);
   --button-typical-toggle-border-default: var(--mode-color-action-grayscale-default);

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/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/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/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/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.6.0",
   "license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
   "tags": [
     "design tokens",

package/scss/components/button.scss

@@ -46,6 +46,7 @@ $button-typical-secondary-inverse-border-active: $mode-color-action-main-inverse
 $button-typical-secondary-inverse-border-disabled: $mode-color-action-inactive-inverse-default;
 $button-typical-secondary-inverse-border-hover: $mode-color-action-main-inverse-hover;
 $button-typical-secondary-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
+$button-typical-secondary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
 $button-typical-secondary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
 $button-typical-tertiary-border-active: $mode-color-action-main-active;
 $button-typical-tertiary-border-disabled: $mode-color-action-inactive-default;
@@ -56,10 +57,12 @@ $button-typical-tertiary-inverse-border-active: $mode-color-action-main-inverse-
 $button-typical-tertiary-inverse-border-disabled: $mode-color-action-inactive-inverse-default;
 $button-typical-tertiary-inverse-border-hover: $mode-color-action-main-inverse-hover;
 $button-typical-tertiary-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
+$button-typical-tertiary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
 $button-typical-tertiary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
 $button-typical-subtle-label-active: $mode-color-action-grayscale-with-active-alt;
 $button-typical-subtle-label-hover: $mode-color-action-grayscale-with-hover;
 $button-typical-subtle-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
+$button-typical-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
 $button-typical-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
 $button-typical-toggle-bg-active-disabled: $mode-color-action-inactive-default;
 $button-typical-toggle-bg-active: $mode-color-action-grayscale-active;
@@ -85,7 +88,6 @@ $button-typical-secondary-inverse-bg-active: $mode-color-action-main-inverse-act
 $button-typical-secondary-inverse-bg-default: $mode-color-action-main-inverse-default-alt3;
 $button-typical-secondary-inverse-bg-hover: $mode-color-action-main-inverse-hover-alt;
 $button-typical-secondary-inverse-border-default: $mode-color-action-main-inverse-default-alt;
-$button-typical-secondary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
 $button-typical-tertiary-bg-active: $mode-color-action-main-active-alt;
 $button-typical-tertiary-bg-default: $button-none;
 $button-typical-tertiary-bg-hover: $mode-color-action-main-hover-alt;
@@ -95,13 +97,11 @@ $button-typical-tertiary-inverse-bg-active: $mode-color-action-main-inverse-acti
 $button-typical-tertiary-inverse-bg-default: $button-none;
 $button-typical-tertiary-inverse-bg-hover: $mode-color-action-main-inverse-hover-alt;
 $button-typical-tertiary-inverse-border-default: $mode-color-action-main-inverse-default-alt;
-$button-typical-tertiary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
 $button-typical-subtle-bg-active: $mode-color-action-grayscale-active-alt;
 $button-typical-subtle-bg-hover: $mode-color-action-grayscale-hover-alt;
 $button-typical-subtle-label-default: $mode-color-action-grayscale-default;
 $button-typical-subtle-inverse-bg-active: $mode-color-action-grayscale-inverse-active-alt;
 $button-typical-subtle-inverse-bg-hover: $mode-color-action-grayscale-inverse-hover-alt;
-$button-typical-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
 $button-typical-toggle-label-active-disabled: $mode-color-action-inactive-txt-alt;
 $button-typical-toggle-bg-hover: $mode-color-action-grayscale-hover-alt;
 $button-typical-toggle-border-default: $mode-color-action-grayscale-default;

package/scss/components/link.scss

@@ -12,6 +12,6 @@ $link-typical-label-hover: $mode-color-action-main-hover-alt2;
 $link-typical-inverse-label-default: $mode-color-action-main-inverse-default-alt2;
 $link-typical-inverse-label-hover: $mode-color-action-main-inverse-hover-alt2;
 $link-subtle-label-hover: $mode-color-action-grayscale-active;
+$link-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
 $link-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-active;
 $link-subtle-label-default: $mode-color-action-grayscale-default;
-$link-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;

package/scss/components/message.scss

@@ -7,9 +7,7 @@ $message-none: $mode-color-none;
 $message-contextual-bg: $mode-color-generic-bg-nought;
 $message-contextual-icon: $mode-color-generic-bg-nought;
 $message-contextual-icon-alt: $mode-color-status-neutral-default;
-$message-contextual-ai-bg-default: $mode-color-status-ai-default-alt;
 $message-contextual-ai-bg-alt: $mode-color-status-neutral-default-alt;
-$message-contextual-ai-border-default: $mode-color-status-ai-default-alt;
 $message-contextual-callout-bg-alt: $mode-color-status-callout-default-alt;
 $message-contextual-error-bg-default: $mode-color-status-negative-default;
 $message-contextual-error-bg-alt: $mode-color-status-negative-default-alt;
@@ -37,6 +35,8 @@ $message-global-warning-bg-default: $mode-color-status-warning-default-alt;
 $message-global-warning-bg-hover: $mode-color-status-warning-hover-alt;
 $message-global-warning-icon: $mode-color-status-warning-default;
 $message-contextual-txt: $mode-color-status-txt-with-hover-alt;
+$message-contextual-ai-bg-default: $mode-color-status-ai-default-alt;
+$message-contextual-ai-border-default: $mode-color-status-ai-default-alt;
 $message-contextual-callout-icon: $mode-color-status-txt-with-default-alt;
 $message-global-label-default: $mode-color-status-txt-with-default-alt;
 $message-global-callout-icon: $mode-color-status-txt-with-default-alt;

package/scss/components/pill.scss

@@ -198,10 +198,10 @@ $pill-generic-label-default: $mode-color-status-txt-with-default;
 $pill-generic-label-hover: $mode-color-status-txt-with-hover;
 $pill-generic-inverse-label-default: $mode-color-status-txt-inverse-with-default;
 $pill-generic-inverse-label-hover: $mode-color-status-txt-inverse-with-hover;
-$pill-generic-inverse-label-alt-default: $mode-color-status-txt-inverse-with-default-alt;
-$pill-generic-inverse-label-alt-hover: $mode-color-status-txt-inverse-with-default-alt;
 $pill-readonly-bg-default: $mode-color-status-inactive-default;
 $pill-readonly-border-default: $mode-color-status-inactive-default;
 $pill-readonly-label: $mode-color-generic-txt-soft;
 $pill-generic-label-alt-default: $mode-color-status-txt-with-default-alt;
 $pill-generic-label-alt-hover: $mode-color-status-txt-with-default-alt;
+$pill-generic-inverse-label-alt-default: $mode-color-status-txt-inverse-with-default-alt;
+$pill-generic-inverse-label-alt-hover: $mode-color-status-txt-inverse-with-default-alt;

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/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%);