@sage/design-tokens 15.2.1 → 15.3.0

package/css/frozenproduct/all.css

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

package/css/frozenproduct/large/components/table.css

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

package/css/frozenproduct/small/components/table.css

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

package/css/product/all.css

@@ -2483,6 +2483,10 @@
   --tab-borderwidth-navigation-top: var(--global-borderwidth-s);
 
   /* table component tokens */
+  --table-color-row-bg-activated: #f0f; /* TO BE DEPRECATED (was #00811F) */
+  --table-color-row-bg-active: #F6F; /* TO BE DEPRECATED (was #000000) */
+  --table-color-row-label-activated: #FAF; /* TO BE DEPRECATED (was #FFFFFF) */
+  --table-color-row-label-active: #FDF; /* TO BE DEPRECATED (was #FFFFFF) */
   --table-color-header-subtle-bg-default: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
   --table-color-row-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
   --table-color-row-label-hover: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark));
@@ -2495,14 +2499,13 @@
   --table-typography-label-s: var(--global-typography-component-firm-s);
   --table-typography-label-m: var(--global-typography-component-firm-m);
   --table-typography-label-l: var(--global-typography-component-firm-l);
-  --table-color-row-bg-activated: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
-  --table-color-row-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
   --table-color-row-bg-alt: light-dark(var(--modes-color-generic-bg-delicate-light), var(--modes-color-generic-bg-delicate-dark)); /* Zebra stripes */
-  --table-color-row-bg-alt2: light-dark(var(--modes-color-generic-bg-soft-light), var(--modes-color-generic-bg-soft-dark)); /* Zebra stripes combined with child rows. */
+  --table-color-row-bg-alt2: light-dark(var(--modes-color-generic-bg-soft-light), var(--modes-color-generic-bg-soft-dark)); /* Zebra stripes combined with child rows. Highlighted rows. */
   --table-color-row-bg-alt3: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark)); /* Child rows. */
-  --table-color-row-bg-hover: light-dark(var(--modes-color-generic-bg-soft-light), var(--modes-color-generic-bg-soft-dark));
+  --table-color-row-bg-hover: light-dark(var(--modes-color-generic-bg-moderate-light), var(--modes-color-generic-bg-moderate-dark));
+  --table-color-row-bg-selected: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
   --table-color-row-label-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark));
-  --table-color-footer-bg-default: light-dark(var(--modes-color-generic-bg-soft-light), var(--modes-color-generic-bg-soft-dark));
+  --table-color-footer-bg-default: light-dark(var(--modes-color-generic-bg-moderate-light), var(--modes-color-generic-bg-moderate-dark));
   --table-boxshadow-firstchild: var(--global-boxshadow-inner-near);
   --table-boxshadow-column-sticky-left: var(--global-boxshadow-cleanedge-near-right); /* Right shadow on left hand sticky column. */
   --table-boxshadow-column-sticky-right: var(--global-boxshadow-cleanedge-near-left); /* Left shadow on right hand sticky column. */
@@ -2519,8 +2522,7 @@
   --table-color-header-harsh-label-default: light-dark(var(--modes-color-interactive-monochrome-with-default-light), var(--modes-color-interactive-monochrome-with-default-dark));
   --table-color-header-harsh-label-hover: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
   --table-color-row-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
-  --table-color-row-label-activated: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
-  --table-color-row-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
+  --table-color-row-label-selected: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
   --table-color-footer-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark)); /* Header borders */
   --table-color-footer-label-default: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
   --table-radius-container: var(--global-radius-container-m); /* Table (parent container) */

package/css/product/large/components/table.css

@@ -3,6 +3,10 @@
  */
 
 :root {
+  --table-color-row-bg-activated: #f0f; /* TO BE DEPRECATED (was #00811F) */
+  --table-color-row-bg-active: #F6F; /* TO BE DEPRECATED (was #000000) */
+  --table-color-row-label-activated: #FAF; /* TO BE DEPRECATED (was #FFFFFF) */
+  --table-color-row-label-active: #FDF; /* TO BE DEPRECATED (was #FFFFFF) */
   --table-color-header-subtle-bg-default: var(--modes-color-none);
   --table-color-row-bg-default: var(--modes-color-generic-bg-nought);
   --table-color-row-label-hover: var(--modes-color-generic-content-extreme);
@@ -24,14 +28,13 @@
   --table-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
   --table-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
   --table-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
-  --table-color-row-bg-activated: var(--modes-color-interactive-primary-default);
-  --table-color-row-bg-active: var(--modes-color-interactive-monochrome-active);
   --table-color-row-bg-alt: var(--modes-color-generic-bg-delicate); /* Zebra stripes */
-  --table-color-row-bg-alt2: var(--modes-color-generic-bg-soft); /* Zebra stripes combined with child rows. */
+  --table-color-row-bg-alt2: var(--modes-color-generic-bg-soft); /* Zebra stripes combined with child rows. Highlighted rows. */
   --table-color-row-bg-alt3: var(--modes-color-generic-bg-faint); /* Child rows. */
-  --table-color-row-bg-hover: var(--modes-color-generic-bg-soft);
+  --table-color-row-bg-hover: var(--modes-color-generic-bg-moderate);
+  --table-color-row-bg-selected: var(--modes-color-interactive-monochrome-active);
   --table-color-row-label-default: var(--modes-color-generic-content-harsh);
-  --table-color-footer-bg-default: var(--modes-color-generic-bg-soft);
+  --table-color-footer-bg-default: var(--modes-color-generic-bg-moderate);
   --table-boxshadow-firstchild: var(--global-boxshadow-inner-near);
   --table-boxshadow-column-sticky-left: var(--global-boxshadow-cleanedge-near-right); /* Right shadow on left hand sticky column. */
   --table-boxshadow-column-sticky-right: var(--global-boxshadow-cleanedge-near-left); /* Left shadow on right hand sticky column. */
@@ -48,8 +51,7 @@
   --table-color-header-harsh-label-default: var(--modes-color-interactive-monochrome-with-default);
   --table-color-header-harsh-label-hover: var(--modes-color-interactive-monochrome-default);
   --table-color-row-border-default: var(--modes-color-generic-fg-delicate);
-  --table-color-row-label-activated: var(--modes-color-interactive-monochrome-with-active);
-  --table-color-row-label-active: var(--modes-color-interactive-monochrome-with-active);
+  --table-color-row-label-selected: var(--modes-color-interactive-monochrome-with-active);
   --table-color-footer-border-default: var(--modes-color-generic-fg-delicate); /* Header borders */
   --table-color-footer-label-default: var(--modes-color-interactive-monochrome-default);
   --table-radius-container: var(--global-radius-container-m); /* Table (parent container) */

package/css/product/small/components/table.css

@@ -3,6 +3,10 @@
  */
 
 :root {
+  --table-color-row-bg-activated: #f0f; /* TO BE DEPRECATED (was #00811F) */
+  --table-color-row-bg-active: #F6F; /* TO BE DEPRECATED (was #000000) */
+  --table-color-row-label-activated: #FAF; /* TO BE DEPRECATED (was #FFFFFF) */
+  --table-color-row-label-active: #FDF; /* TO BE DEPRECATED (was #FFFFFF) */
   --table-color-header-subtle-bg-default: var(--modes-color-none);
   --table-color-row-bg-default: var(--modes-color-generic-bg-nought);
   --table-color-row-label-hover: var(--modes-color-generic-content-extreme);
@@ -24,14 +28,13 @@
   --table-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
   --table-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
   --table-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
-  --table-color-row-bg-activated: var(--modes-color-interactive-primary-default);
-  --table-color-row-bg-active: var(--modes-color-interactive-monochrome-active);
   --table-color-row-bg-alt: var(--modes-color-generic-bg-delicate); /* Zebra stripes */
-  --table-color-row-bg-alt2: var(--modes-color-generic-bg-soft); /* Zebra stripes combined with child rows. */
+  --table-color-row-bg-alt2: var(--modes-color-generic-bg-soft); /* Zebra stripes combined with child rows. Highlighted rows. */
   --table-color-row-bg-alt3: var(--modes-color-generic-bg-faint); /* Child rows. */
-  --table-color-row-bg-hover: var(--modes-color-generic-bg-soft);
+  --table-color-row-bg-hover: var(--modes-color-generic-bg-moderate);
+  --table-color-row-bg-selected: var(--modes-color-interactive-monochrome-active);
   --table-color-row-label-default: var(--modes-color-generic-content-harsh);
-  --table-color-footer-bg-default: var(--modes-color-generic-bg-soft);
+  --table-color-footer-bg-default: var(--modes-color-generic-bg-moderate);
   --table-boxshadow-firstchild: var(--global-boxshadow-inner-near);
   --table-boxshadow-column-sticky-left: var(--global-boxshadow-cleanedge-near-right); /* Right shadow on left hand sticky column. */
   --table-boxshadow-column-sticky-right: var(--global-boxshadow-cleanedge-near-left); /* Left shadow on right hand sticky column. */
@@ -48,8 +51,7 @@
   --table-color-header-harsh-label-default: var(--modes-color-interactive-monochrome-with-default);
   --table-color-header-harsh-label-hover: var(--modes-color-interactive-monochrome-default);
   --table-color-row-border-default: var(--modes-color-generic-fg-delicate);
-  --table-color-row-label-activated: var(--modes-color-interactive-monochrome-with-active);
-  --table-color-row-label-active: var(--modes-color-interactive-monochrome-with-active);
+  --table-color-row-label-selected: var(--modes-color-interactive-monochrome-with-active);
   --table-color-footer-border-default: var(--modes-color-generic-fg-delicate); /* Header borders */
   --table-color-footer-label-default: var(--modes-color-interactive-monochrome-default);
   --table-radius-container: var(--global-radius-container-m); /* Table (parent container) */

package/ios/frozenproduct/large/dark/components/table.h

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

package/ios/frozenproduct/large/light/components/table.h

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

package/ios/frozenproduct/small/dark/components/table.h

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

package/ios/frozenproduct/small/light/components/table.h

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

package/ios/product/large/dark/components/table.h

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

package/ios/product/large/light/components/table.h

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

package/ios/product/small/dark/components/table.h

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

package/ios/product/small/light/components/table.h

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

package/js/common/frozenproduct/large/dark/components/table.d.ts

@@ -47,11 +47,13 @@ declare const tokens: {
         "bg-alt2": DesignToken;
         "bg-alt3": DesignToken;
         "bg-hover": DesignToken;
+        "bg-selected": DesignToken;
         "border-default": DesignToken;
         "label-activated": DesignToken;
         "label-active": DesignToken;
         "label-default": DesignToken;
         "label-hover": DesignToken;
+        "label-selected": DesignToken;
       };
       footer: {
         "bg-default": DesignToken;

package/js/common/frozenproduct/large/dark/components/table.js

@@ -231,13 +231,15 @@ module.exports = {
         "bg-alt2": {
           $type: "color",
           $value: "#1f1f1f",
-          $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: {},
@@ -271,6 +273,19 @@ module.exports = {
           attributes: {},
           path: ["table", "color", "row", "bg-hover"],
         },
+        "bg-selected": {
+          $type: "color",
+          $value: "#FFFFFF",
+          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: "#282828",
@@ -336,16 +351,29 @@ module.exports = {
           attributes: {},
           path: ["table", "color", "row", "label-hover"],
         },
+        "label-selected": {
+          $type: "color",
+          $value: "#000000",
+          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: "#1f1f1f",
+          $value: "#282828",
           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/js/common/frozenproduct/large/light/components/table.d.ts

@@ -47,11 +47,13 @@ declare const tokens: {
         "bg-alt2": DesignToken;
         "bg-alt3": DesignToken;
         "bg-hover": DesignToken;
+        "bg-selected": DesignToken;
         "border-default": DesignToken;
         "label-activated": DesignToken;
         "label-active": DesignToken;
         "label-default": DesignToken;
         "label-hover": DesignToken;
+        "label-selected": DesignToken;
       };
       footer: {
         "bg-default": DesignToken;

package/js/common/frozenproduct/large/light/components/table.js

@@ -231,13 +231,15 @@ module.exports = {
         "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: {},
@@ -271,6 +273,19 @@ module.exports = {
           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",
@@ -336,16 +351,29 @@ module.exports = {
           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/js/common/frozenproduct/small/dark/components/table.d.ts

@@ -47,11 +47,13 @@ declare const tokens: {
         "bg-alt2": DesignToken;
         "bg-alt3": DesignToken;
         "bg-hover": DesignToken;
+        "bg-selected": DesignToken;
         "border-default": DesignToken;
         "label-activated": DesignToken;
         "label-active": DesignToken;
         "label-default": DesignToken;
         "label-hover": DesignToken;
+        "label-selected": DesignToken;
       };
       footer: {
         "bg-default": DesignToken;

package/js/common/frozenproduct/small/dark/components/table.js

@@ -231,13 +231,15 @@ module.exports = {
         "bg-alt2": {
           $type: "color",
           $value: "#1f1f1f",
-          $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: {},
@@ -271,6 +273,19 @@ module.exports = {
           attributes: {},
           path: ["table", "color", "row", "bg-hover"],
         },
+        "bg-selected": {
+          $type: "color",
+          $value: "#FFFFFF",
+          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: "#282828",
@@ -336,16 +351,29 @@ module.exports = {
           attributes: {},
           path: ["table", "color", "row", "label-hover"],
         },
+        "label-selected": {
+          $type: "color",
+          $value: "#000000",
+          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: "#1f1f1f",
+          $value: "#282828",
           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: {},