@sage/design-tokens 15.2.2 → 15.3.0

package/js/umd/product/small/light/components/table.js

@@ -191,12 +191,15 @@
         row: {
           "bg-activated": {
             $type: "color",
-            $value: "#00811F",
+            $value: "#f0f",
+            $description: "TO BE DEPRECATED (was #00811F)",
             filePath: "data/tokens/components/table.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.primary.default}",
+              $value: "#f0f",
+              $description:
+                "TO BE DEPRECATED (was {modes.color.interactive.primary.default})",
             },
             name: "tableColorRowBgActivated",
             attributes: {},
@@ -204,12 +207,15 @@
           },
           "bg-active": {
             $type: "color",
-            $value: "#000000",
+            $value: "#F6F",
+            $description: "TO BE DEPRECATED (was #000000)",
             filePath: "data/tokens/components/table.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.active}",
+              $value: "#F6F",
+              $description:
+                "TO BE DEPRECATED (was {modes.color.interactive.monochrome.active})",
             },
             name: "tableColorRowBgActive",
             attributes: {},
@@ -246,13 +252,15 @@
           "bg-alt2": {
             $type: "color",
             $value: "#dedede",
-            $description: "Zebra stripes combined with child rows.",
+            $description:
+              "Zebra stripes combined with child rows. Highlighted rows.",
             filePath: "data/tokens/components/table.json",
             isSource: true,
             original: {
               $type: "color",
               $value: "{modes.color.generic.bg.soft}",
-              $description: "Zebra stripes combined with child rows.",
+              $description:
+                "Zebra stripes combined with child rows. Highlighted rows.",
             },
             name: "tableColorRowBgAlt2",
             attributes: {},
@@ -275,17 +283,30 @@
           },
           "bg-hover": {
             $type: "color",
-            $value: "#dedede",
+            $value: "#d1d1d1",
             filePath: "data/tokens/components/table.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.generic.bg.soft}",
+              $value: "{modes.color.generic.bg.moderate}",
             },
             name: "tableColorRowBgHover",
             attributes: {},
             path: ["table", "color", "row", "bg-hover"],
           },
+          "bg-selected": {
+            $type: "color",
+            $value: "#000000",
+            filePath: "data/tokens/components/table.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.interactive.monochrome.active}",
+            },
+            name: "tableColorRowBgSelected",
+            attributes: {},
+            path: ["table", "color", "row", "bg-selected"],
+          },
           "border-default": {
             $type: "color",
             $value: "#d1d1d1",
@@ -301,12 +322,15 @@
           },
           "label-activated": {
             $type: "color",
-            $value: "#FFFFFF",
+            $value: "#FAF",
+            $description: "TO BE DEPRECATED (was #FFFFFF)",
             filePath: "data/tokens/components/table.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.withActive}",
+              $value: "#FAF",
+              $description:
+                "TO BE DEPRECATED (was {modes.color.interactive.monochrome.withActive})",
             },
             name: "tableColorRowLabelActivated",
             attributes: {},
@@ -314,12 +338,15 @@
           },
           "label-active": {
             $type: "color",
-            $value: "#FFFFFF",
+            $value: "#FDF",
+            $description: "TO BE DEPRECATED (was #FFFFFF)",
             filePath: "data/tokens/components/table.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.withActive}",
+              $value: "#FDF",
+              $description:
+                "TO BE DEPRECATED (was {modes.color.interactive.monochrome.withActive})",
             },
             name: "tableColorRowLabelActive",
             attributes: {},
@@ -351,16 +378,29 @@
             attributes: {},
             path: ["table", "color", "row", "label-hover"],
           },
+          "label-selected": {
+            $type: "color",
+            $value: "#FFFFFF",
+            filePath: "data/tokens/components/table.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.interactive.monochrome.withActive}",
+            },
+            name: "tableColorRowLabelSelected",
+            attributes: {},
+            path: ["table", "color", "row", "label-selected"],
+          },
         },
         footer: {
           "bg-default": {
             $type: "color",
-            $value: "#dedede",
+            $value: "#d1d1d1",
             filePath: "data/tokens/components/table.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.generic.bg.soft}",
+              $value: "{modes.color.generic.bg.moderate}",
             },
             name: "tableColorFooterBgDefault",
             attributes: {},

package/json/flat/frozenproduct/large/dark/components/table.json

@@ -18,12 +18,14 @@
   "tableColorRowBgAlt2": "#1f1f1f",
   "tableColorRowBgAlt3": "#0e0e0e",
   "tableColorRowBgHover": "#040607",
+  "tableColorRowBgSelected": "#FFFFFF",
   "tableColorRowBorderDefault": "#282828",
   "tableColorRowLabelActivated": "#FFFFFF",
   "tableColorRowLabelActive": "#FFFFFF",
   "tableColorRowLabelDefault": "#fffffff2",
   "tableColorRowLabelHover": "#FFFFFF",
-  "tableColorFooterBgDefault": "#1f1f1f",
+  "tableColorRowLabelSelected": "#000000",
+  "tableColorFooterBgDefault": "#282828",
   "tableColorFooterBorderDefault": "#282828",
   "tableColorFooterLabelDefault": "#ffffffe6",
   "tableRadiusContainer": 8,

package/json/flat/frozenproduct/large/light/components/table.json

@@ -18,12 +18,14 @@
   "tableColorRowBgAlt2": "#dedede",
   "tableColorRowBgAlt3": "#f3f3f3",
   "tableColorRowBgHover": "#f2f4f6",
+  "tableColorRowBgSelected": "#000000",
   "tableColorRowBorderDefault": "#d1d1d1",
   "tableColorRowLabelActivated": "#000000",
   "tableColorRowLabelActive": "#000000",
   "tableColorRowLabelDefault": "#000000f2",
   "tableColorRowLabelHover": "#000000",
-  "tableColorFooterBgDefault": "#dedede",
+  "tableColorRowLabelSelected": "#FFFFFF",
+  "tableColorFooterBgDefault": "#d1d1d1",
   "tableColorFooterBorderDefault": "#d1d1d1",
   "tableColorFooterLabelDefault": "#000000e6",
   "tableRadiusContainer": 8,

package/json/flat/frozenproduct/small/dark/components/table.json

@@ -18,12 +18,14 @@
   "tableColorRowBgAlt2": "#1f1f1f",
   "tableColorRowBgAlt3": "#0e0e0e",
   "tableColorRowBgHover": "#040607",
+  "tableColorRowBgSelected": "#FFFFFF",
   "tableColorRowBorderDefault": "#282828",
   "tableColorRowLabelActivated": "#FFFFFF",
   "tableColorRowLabelActive": "#FFFFFF",
   "tableColorRowLabelDefault": "#fffffff2",
   "tableColorRowLabelHover": "#FFFFFF",
-  "tableColorFooterBgDefault": "#1f1f1f",
+  "tableColorRowLabelSelected": "#000000",
+  "tableColorFooterBgDefault": "#282828",
   "tableColorFooterBorderDefault": "#282828",
   "tableColorFooterLabelDefault": "#ffffffe6",
   "tableRadiusContainer": 8,

package/json/flat/frozenproduct/small/light/components/table.json

@@ -18,12 +18,14 @@
   "tableColorRowBgAlt2": "#dedede",
   "tableColorRowBgAlt3": "#f3f3f3",
   "tableColorRowBgHover": "#f2f4f6",
+  "tableColorRowBgSelected": "#000000",
   "tableColorRowBorderDefault": "#d1d1d1",
   "tableColorRowLabelActivated": "#000000",
   "tableColorRowLabelActive": "#000000",
   "tableColorRowLabelDefault": "#000000f2",
   "tableColorRowLabelHover": "#000000",
-  "tableColorFooterBgDefault": "#dedede",
+  "tableColorRowLabelSelected": "#FFFFFF",
+  "tableColorFooterBgDefault": "#d1d1d1",
   "tableColorFooterBorderDefault": "#d1d1d1",
   "tableColorFooterLabelDefault": "#000000e6",
   "tableRadiusContainer": 8,

package/json/flat/product/large/dark/components/table.json

@@ -11,19 +11,21 @@
   "tableColorHeaderHarshBorderDefault": "#4b4b4b",
   "tableColorHeaderHarshLabelDefault": "#000000",
   "tableColorHeaderHarshLabelHover": "#ffffffe6",
-  "tableColorRowBgActivated": "#00D639",
-  "tableColorRowBgActive": "#FFFFFF",
+  "tableColorRowBgActivated": "#f0f",
+  "tableColorRowBgActive": "#F6F",
   "tableColorRowBgDefault": "#000000",
   "tableColorRowBgAlt": "#181818",
   "tableColorRowBgAlt2": "#1f1f1f",
   "tableColorRowBgAlt3": "#0e0e0e",
-  "tableColorRowBgHover": "#1f1f1f",
+  "tableColorRowBgHover": "#282828",
+  "tableColorRowBgSelected": "#FFFFFF",
   "tableColorRowBorderDefault": "#282828",
-  "tableColorRowLabelActivated": "#000000",
-  "tableColorRowLabelActive": "#000000",
+  "tableColorRowLabelActivated": "#FAF",
+  "tableColorRowLabelActive": "#FDF",
   "tableColorRowLabelDefault": "#fffffff2",
   "tableColorRowLabelHover": "#FFFFFF",
-  "tableColorFooterBgDefault": "#1f1f1f",
+  "tableColorRowLabelSelected": "#000000",
+  "tableColorFooterBgDefault": "#282828",
   "tableColorFooterBorderDefault": "#282828",
   "tableColorFooterLabelDefault": "#ffffffe6",
   "tableRadiusContainer": 8,

package/json/flat/product/large/light/components/table.json

@@ -11,19 +11,21 @@
   "tableColorHeaderHarshBorderDefault": "#a6a6a6",
   "tableColorHeaderHarshLabelDefault": "#FFFFFF",
   "tableColorHeaderHarshLabelHover": "#000000e6",
-  "tableColorRowBgActivated": "#00811F",
-  "tableColorRowBgActive": "#000000",
+  "tableColorRowBgActivated": "#f0f",
+  "tableColorRowBgActive": "#F6F",
   "tableColorRowBgDefault": "#FFFFFF",
   "tableColorRowBgAlt": "#e8e8e8",
   "tableColorRowBgAlt2": "#dedede",
   "tableColorRowBgAlt3": "#f3f3f3",
-  "tableColorRowBgHover": "#dedede",
+  "tableColorRowBgHover": "#d1d1d1",
+  "tableColorRowBgSelected": "#000000",
   "tableColorRowBorderDefault": "#d1d1d1",
-  "tableColorRowLabelActivated": "#FFFFFF",
-  "tableColorRowLabelActive": "#FFFFFF",
+  "tableColorRowLabelActivated": "#FAF",
+  "tableColorRowLabelActive": "#FDF",
   "tableColorRowLabelDefault": "#000000f2",
   "tableColorRowLabelHover": "#000000",
-  "tableColorFooterBgDefault": "#dedede",
+  "tableColorRowLabelSelected": "#FFFFFF",
+  "tableColorFooterBgDefault": "#d1d1d1",
   "tableColorFooterBorderDefault": "#d1d1d1",
   "tableColorFooterLabelDefault": "#000000e6",
   "tableRadiusContainer": 8,

package/json/flat/product/small/dark/components/table.json

@@ -11,19 +11,21 @@
   "tableColorHeaderHarshBorderDefault": "#4b4b4b",
   "tableColorHeaderHarshLabelDefault": "#000000",
   "tableColorHeaderHarshLabelHover": "#ffffffe6",
-  "tableColorRowBgActivated": "#00D639",
-  "tableColorRowBgActive": "#FFFFFF",
+  "tableColorRowBgActivated": "#f0f",
+  "tableColorRowBgActive": "#F6F",
   "tableColorRowBgDefault": "#000000",
   "tableColorRowBgAlt": "#181818",
   "tableColorRowBgAlt2": "#1f1f1f",
   "tableColorRowBgAlt3": "#0e0e0e",
-  "tableColorRowBgHover": "#1f1f1f",
+  "tableColorRowBgHover": "#282828",
+  "tableColorRowBgSelected": "#FFFFFF",
   "tableColorRowBorderDefault": "#282828",
-  "tableColorRowLabelActivated": "#000000",
-  "tableColorRowLabelActive": "#000000",
+  "tableColorRowLabelActivated": "#FAF",
+  "tableColorRowLabelActive": "#FDF",
   "tableColorRowLabelDefault": "#fffffff2",
   "tableColorRowLabelHover": "#FFFFFF",
-  "tableColorFooterBgDefault": "#1f1f1f",
+  "tableColorRowLabelSelected": "#000000",
+  "tableColorFooterBgDefault": "#282828",
   "tableColorFooterBorderDefault": "#282828",
   "tableColorFooterLabelDefault": "#ffffffe6",
   "tableRadiusContainer": 8,

package/json/flat/product/small/light/components/table.json

@@ -11,19 +11,21 @@
   "tableColorHeaderHarshBorderDefault": "#a6a6a6",
   "tableColorHeaderHarshLabelDefault": "#FFFFFF",
   "tableColorHeaderHarshLabelHover": "#000000e6",
-  "tableColorRowBgActivated": "#00811F",
-  "tableColorRowBgActive": "#000000",
+  "tableColorRowBgActivated": "#f0f",
+  "tableColorRowBgActive": "#F6F",
   "tableColorRowBgDefault": "#FFFFFF",
   "tableColorRowBgAlt": "#e8e8e8",
   "tableColorRowBgAlt2": "#dedede",
   "tableColorRowBgAlt3": "#f3f3f3",
-  "tableColorRowBgHover": "#dedede",
+  "tableColorRowBgHover": "#d1d1d1",
+  "tableColorRowBgSelected": "#000000",
   "tableColorRowBorderDefault": "#d1d1d1",
-  "tableColorRowLabelActivated": "#FFFFFF",
-  "tableColorRowLabelActive": "#FFFFFF",
+  "tableColorRowLabelActivated": "#FAF",
+  "tableColorRowLabelActive": "#FDF",
   "tableColorRowLabelDefault": "#000000f2",
   "tableColorRowLabelHover": "#000000",
-  "tableColorFooterBgDefault": "#dedede",
+  "tableColorRowLabelSelected": "#FFFFFF",
+  "tableColorFooterBgDefault": "#d1d1d1",
   "tableColorFooterBorderDefault": "#d1d1d1",
   "tableColorFooterLabelDefault": "#000000e6",
   "tableRadiusContainer": 8,

package/json/nested/frozenproduct/large/dark/components/table.json

@@ -27,14 +27,16 @@
         "bg-alt2": "#1f1f1f",
         "bg-alt3": "#0e0e0e",
         "bg-hover": "#040607",
+        "bg-selected": "#FFFFFF",
         "border-default": "#282828",
         "label-activated": "#FFFFFF",
         "label-active": "#FFFFFF",
         "label-default": "#fffffff2",
-        "label-hover": "#FFFFFF"
+        "label-hover": "#FFFFFF",
+        "label-selected": "#000000"
       },
       "footer": {
-        "bg-default": "#1f1f1f",
+        "bg-default": "#282828",
         "border-default": "#282828",
         "label-default": "#ffffffe6"
       }

package/json/nested/frozenproduct/large/light/components/table.json

@@ -27,14 +27,16 @@
         "bg-alt2": "#dedede",
         "bg-alt3": "#f3f3f3",
         "bg-hover": "#f2f4f6",
+        "bg-selected": "#000000",
         "border-default": "#d1d1d1",
         "label-activated": "#000000",
         "label-active": "#000000",
         "label-default": "#000000f2",
-        "label-hover": "#000000"
+        "label-hover": "#000000",
+        "label-selected": "#FFFFFF"
       },
       "footer": {
-        "bg-default": "#dedede",
+        "bg-default": "#d1d1d1",
         "border-default": "#d1d1d1",
         "label-default": "#000000e6"
       }

package/json/nested/frozenproduct/small/dark/components/table.json

@@ -27,14 +27,16 @@
         "bg-alt2": "#1f1f1f",
         "bg-alt3": "#0e0e0e",
         "bg-hover": "#040607",
+        "bg-selected": "#FFFFFF",
         "border-default": "#282828",
         "label-activated": "#FFFFFF",
         "label-active": "#FFFFFF",
         "label-default": "#fffffff2",
-        "label-hover": "#FFFFFF"
+        "label-hover": "#FFFFFF",
+        "label-selected": "#000000"
       },
       "footer": {
-        "bg-default": "#1f1f1f",
+        "bg-default": "#282828",
         "border-default": "#282828",
         "label-default": "#ffffffe6"
       }

package/json/nested/frozenproduct/small/light/components/table.json

@@ -27,14 +27,16 @@
         "bg-alt2": "#dedede",
         "bg-alt3": "#f3f3f3",
         "bg-hover": "#f2f4f6",
+        "bg-selected": "#000000",
         "border-default": "#d1d1d1",
         "label-activated": "#000000",
         "label-active": "#000000",
         "label-default": "#000000f2",
-        "label-hover": "#000000"
+        "label-hover": "#000000",
+        "label-selected": "#FFFFFF"
       },
       "footer": {
-        "bg-default": "#dedede",
+        "bg-default": "#d1d1d1",
         "border-default": "#d1d1d1",
         "label-default": "#000000e6"
       }

package/json/nested/product/large/dark/components/table.json

@@ -20,21 +20,23 @@
         }
       },
       "row": {
-        "bg-activated": "#00D639",
-        "bg-active": "#FFFFFF",
+        "bg-activated": "#f0f",
+        "bg-active": "#F6F",
         "bg-default": "#000000",
         "bg-alt": "#181818",
         "bg-alt2": "#1f1f1f",
         "bg-alt3": "#0e0e0e",
-        "bg-hover": "#1f1f1f",
+        "bg-hover": "#282828",
+        "bg-selected": "#FFFFFF",
         "border-default": "#282828",
-        "label-activated": "#000000",
-        "label-active": "#000000",
+        "label-activated": "#FAF",
+        "label-active": "#FDF",
         "label-default": "#fffffff2",
-        "label-hover": "#FFFFFF"
+        "label-hover": "#FFFFFF",
+        "label-selected": "#000000"
       },
       "footer": {
-        "bg-default": "#1f1f1f",
+        "bg-default": "#282828",
         "border-default": "#282828",
         "label-default": "#ffffffe6"
       }

package/json/nested/product/large/light/components/table.json

@@ -20,21 +20,23 @@
         }
       },
       "row": {
-        "bg-activated": "#00811F",
-        "bg-active": "#000000",
+        "bg-activated": "#f0f",
+        "bg-active": "#F6F",
         "bg-default": "#FFFFFF",
         "bg-alt": "#e8e8e8",
         "bg-alt2": "#dedede",
         "bg-alt3": "#f3f3f3",
-        "bg-hover": "#dedede",
+        "bg-hover": "#d1d1d1",
+        "bg-selected": "#000000",
         "border-default": "#d1d1d1",
-        "label-activated": "#FFFFFF",
-        "label-active": "#FFFFFF",
+        "label-activated": "#FAF",
+        "label-active": "#FDF",
         "label-default": "#000000f2",
-        "label-hover": "#000000"
+        "label-hover": "#000000",
+        "label-selected": "#FFFFFF"
       },
       "footer": {
-        "bg-default": "#dedede",
+        "bg-default": "#d1d1d1",
         "border-default": "#d1d1d1",
         "label-default": "#000000e6"
       }

package/json/nested/product/small/dark/components/table.json

@@ -20,21 +20,23 @@
         }
       },
       "row": {
-        "bg-activated": "#00D639",
-        "bg-active": "#FFFFFF",
+        "bg-activated": "#f0f",
+        "bg-active": "#F6F",
         "bg-default": "#000000",
         "bg-alt": "#181818",
         "bg-alt2": "#1f1f1f",
         "bg-alt3": "#0e0e0e",
-        "bg-hover": "#1f1f1f",
+        "bg-hover": "#282828",
+        "bg-selected": "#FFFFFF",
         "border-default": "#282828",
-        "label-activated": "#000000",
-        "label-active": "#000000",
+        "label-activated": "#FAF",
+        "label-active": "#FDF",
         "label-default": "#fffffff2",
-        "label-hover": "#FFFFFF"
+        "label-hover": "#FFFFFF",
+        "label-selected": "#000000"
       },
       "footer": {
-        "bg-default": "#1f1f1f",
+        "bg-default": "#282828",
         "border-default": "#282828",
         "label-default": "#ffffffe6"
       }

package/json/nested/product/small/light/components/table.json

@@ -20,21 +20,23 @@
         }
       },
       "row": {
-        "bg-activated": "#00811F",
-        "bg-active": "#000000",
+        "bg-activated": "#f0f",
+        "bg-active": "#F6F",
         "bg-default": "#FFFFFF",
         "bg-alt": "#e8e8e8",
         "bg-alt2": "#dedede",
         "bg-alt3": "#f3f3f3",
-        "bg-hover": "#dedede",
+        "bg-hover": "#d1d1d1",
+        "bg-selected": "#000000",
         "border-default": "#d1d1d1",
-        "label-activated": "#FFFFFF",
-        "label-active": "#FFFFFF",
+        "label-activated": "#FAF",
+        "label-active": "#FDF",
         "label-default": "#000000f2",
-        "label-hover": "#000000"
+        "label-hover": "#000000",
+        "label-selected": "#FFFFFF"
       },
       "footer": {
-        "bg-default": "#dedede",
+        "bg-default": "#d1d1d1",
         "border-default": "#d1d1d1",
         "label-default": "#000000e6"
       }

package/package.json

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

package/scss/frozenproduct/large/components/table.scss

@@ -10,6 +10,7 @@ $table-color-row-bg-activated: $modes-color-interactive-primary-frozen-table-def
 $table-color-row-bg-default: $modes-color-generic-bg-nought;
 $table-color-row-bg-alt: $modes-color-generic-bg-frozen-delicate;
 $table-color-row-bg-hover: $modes-color-generic-bg-frozen-soft;
+$table-color-row-bg-selected: $modes-color-interactive-monochrome-active;
 $table-color-row-label-hover: $modes-color-generic-content-extreme;
 $table-typography-adaptive-heading-s: $global-typography-adaptive-component-firm-s;
 $table-typography-adaptive-heading-m: $global-typography-adaptive-component-firm-m;
@@ -38,12 +39,12 @@ $table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-frozen
 $table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-hover;
 $table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-default;
 $table-color-row-bg-active: $modes-color-interactive-monochrome-frozen-active-alt;
-$table-color-row-bg-alt2: $modes-color-generic-bg-soft; // Zebra stripes combined with child rows.
+$table-color-row-bg-alt2: $modes-color-generic-bg-soft; // Zebra stripes combined with child rows. Highlighted rows.
 $table-color-row-bg-alt3: $modes-color-generic-bg-faint; // Child rows.
 $table-color-row-label-activated: $modes-color-interactive-monochrome-with-active-alt;
 $table-color-row-label-active: $modes-color-interactive-monochrome-with-active-alt;
 $table-color-row-label-default: $modes-color-generic-content-harsh;
-$table-color-footer-bg-default: $modes-color-generic-bg-soft;
+$table-color-footer-bg-default: $modes-color-generic-bg-moderate;
 $table-color-footer-label-default: $modes-color-interactive-monochrome-default;
 $table-boxshadow-firstchild: $global-boxshadow-inner-near;
 $table-boxshadow-column-sticky-left: $global-boxshadow-cleanedge-near-right; // Right shadow on left hand sticky column.
@@ -53,6 +54,7 @@ $table-color-header-subtle-border-default: $modes-color-generic-fg-delicate; //
 $table-color-header-harsh-border-default: $modes-color-generic-fg-soft;
 $table-color-header-harsh-label-default: $modes-color-interactive-monochrome-with-default;
 $table-color-row-border-default: $modes-color-generic-fg-delicate;
+$table-color-row-label-selected: $modes-color-interactive-monochrome-with-active;
 $table-color-footer-border-default: $modes-color-generic-fg-delicate; // Header borders
 $table-radius-container: $global-radius-container-m; // Table (parent container)
 $table-borderwidth-thin: $global-borderwidth-xs; // Table border. Optional choice of cell border width.

package/scss/frozenproduct/small/components/table.scss

@@ -31,12 +31,13 @@ $table-typography-responsive-label-s: $global-typography-responsive-component-fi
 $table-typography-responsive-label-m: $global-typography-responsive-component-firm-m;
 $table-typography-responsive-label-l: $global-typography-responsive-component-firm-l;
 $table-color-header-harsh-bg-alt: $modes-color-interactive-monochrome-frozen-default-alt;
-$table-color-row-bg-alt2: $modes-color-generic-bg-soft; // Zebra stripes combined with child rows.
+$table-color-row-bg-alt2: $modes-color-generic-bg-soft; // Zebra stripes combined with child rows. Highlighted rows.
 $table-color-row-bg-alt3: $modes-color-generic-bg-faint; // Child rows.
+$table-color-row-bg-selected: $modes-color-interactive-monochrome-active;
 $table-color-row-label-activated: $modes-color-interactive-monochrome-with-active-alt;
 $table-color-row-label-active: $modes-color-interactive-monochrome-with-active-alt;
 $table-color-row-label-default: $modes-color-generic-content-harsh;
-$table-color-footer-bg-default: $modes-color-generic-bg-soft;
+$table-color-footer-bg-default: $modes-color-generic-bg-moderate;
 $table-boxshadow-firstchild: $global-boxshadow-inner-near;
 $table-boxshadow-column-sticky-left: $global-boxshadow-cleanedge-near-right; // Right shadow on left hand sticky column.
 $table-boxshadow-column-sticky-right: $global-boxshadow-cleanedge-near-left; // Left shadow on right hand sticky column.
@@ -52,6 +53,7 @@ $table-color-header-harsh-label-default: $modes-color-interactive-monochrome-wit
 $table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-default;
 $table-color-row-bg-active: $modes-color-interactive-monochrome-frozen-active-alt;
 $table-color-row-border-default: $modes-color-generic-fg-delicate;
+$table-color-row-label-selected: $modes-color-interactive-monochrome-with-active;
 $table-color-footer-border-default: $modes-color-generic-fg-delicate; // Header borders
 $table-color-footer-label-default: $modes-color-interactive-monochrome-default;
 $table-radius-container: $global-radius-container-m; // Table (parent container)