@sage/design-tokens 15.2.2 → 15.4.0

package/scss/product/small/components/tab.scss

@@ -6,9 +6,6 @@
 // Do not edit directly, this file was auto-generated.
 
 $tab-color-bg-enabled: $modes-color-none;
-$tab-color-border-active: $modes-color-interactive-monochrome-active;
-$tab-color-label-active: $modes-color-interactive-monochrome-active;
-$tab-color-icon-active: $modes-color-interactive-monochrome-active;
 $tab-color-navigation-bg-default: $modes-color-generic-bg-nought; // For previous/next buttons on responsive tabs
 $tab-color-validation-border-warning: $modes-color-status-caution-default;
 $tab-color-validation-border-error: $modes-color-status-negative-default;
@@ -22,12 +19,11 @@ $tab-typography-responsive-label-s: $global-typography-responsive-component-firm
 $tab-typography-responsive-label-m: $global-typography-responsive-component-firm-m;
 $tab-typography-responsive-label-l: $global-typography-responsive-component-firm-l;
 $tab-color-bg-hover: $modes-color-interactive-monochrome-hover-alt; // For anchor nav, not tab.
-$tab-color-icon-enabled: $modes-color-interactive-monochrome-default-alt;
+$tab-color-border-active: $modes-color-interactive-monochrome-active;
 $tab-color-icon-hover: $modes-color-interactive-monochrome-with-hover;
-$tab-color-label-enabled: $modes-color-interactive-monochrome-default;
+$tab-color-label-active: $modes-color-interactive-monochrome-active;
+$tab-color-icon-active: $modes-color-interactive-monochrome-active;
 $tab-color-label-hover: $modes-color-interactive-monochrome-with-hover;
-$tab-color-validation-label-error: $modes-color-interactive-monochrome-default-alt;
-$tab-color-validation-label-warning: $modes-color-interactive-monochrome-default-alt;
 $tab-size-m: $global-size-macro-m; // Anchor nav, M Tab
 $tab-size-l: $global-size-macro-l; // L tab
 $tab-size-shadow-arrow: $global-size-micro-m; // Shadow width for linear gradient shadow on repsonsive tab arrows.
@@ -47,6 +43,10 @@ $tab-color-bg-active: $modes-color-interactive-monochrome-with-active;
 $tab-color-border-activealt: $modes-color-generic-fg-delicate;
 $tab-color-border-enabled: $modes-color-generic-fg-delicate;
 $tab-color-border-hover: $modes-color-generic-fg-moderate;
+$tab-color-icon-enabled: $modes-color-interactive-monochrome-default-alt;
+$tab-color-label-enabled: $modes-color-interactive-monochrome-default;
+$tab-color-validation-label-error: $modes-color-interactive-monochrome-default-alt;
+$tab-color-validation-label-warning: $modes-color-interactive-monochrome-default-alt;
 $tab-radius-m: $global-radius-interactive-m; // Tab horizontal - top corners. Tab vertical - left corners.
 $tab-radius-l: $global-radius-interactive-m; // Tab horizontal - top corners. Tab vertical - left corners.
 $tab-radius-baseline-m: $global-radius-interactive-xxs;

package/scss/product/small/components/table.scss

@@ -5,8 +5,11 @@
 
 // Do not edit directly, this file was auto-generated.
 
+$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: $modes-color-none;
-$table-color-row-bg-active: $modes-color-interactive-monochrome-active;
 $table-color-row-bg-default: $modes-color-generic-bg-nought;
 $table-color-row-label-hover: $modes-color-generic-content-extreme;
 $table-typography-adaptive-heading-s: $global-typography-adaptive-component-firm-s;
@@ -27,33 +30,32 @@ $table-typography-responsive-default-l: $global-typography-responsive-component-
 $table-typography-responsive-label-s: $global-typography-responsive-component-firm-s;
 $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-subtle-bg-alt: $modes-color-interactive-monochrome-subtle-default; // header alt
-$table-color-header-subtle-bg-hover: $modes-color-interactive-monochrome-hover;
-$table-color-header-subtle-label-default: $modes-color-interactive-monochrome-default;
-$table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-default;
-$table-color-header-harsh-bg-alt: $modes-color-interactive-monochrome-default; // header alt
-$table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-default-alt;
-$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-activated: $modes-color-interactive-primary-default;
 $table-color-row-bg-alt: $modes-color-generic-bg-delicate; // Zebra stripes
-$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-hover: $modes-color-generic-bg-soft;
+$table-color-row-bg-hover: $modes-color-generic-bg-moderate;
+$table-color-row-bg-selected: $modes-color-interactive-monochrome-active;
 $table-color-row-label-default: $modes-color-generic-content-harsh;
-$table-color-footer-bg-default: $modes-color-generic-bg-soft;
-$table-color-footer-label-default: $modes-color-interactive-monochrome-default;
+$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.
 $table-boxshadow-row-dragging: $global-boxshadow-interactive-drag; // dragging state for a table row
+$table-color-header-subtle-bg-alt: $modes-color-interactive-monochrome-subtle-default; // header alt
+$table-color-header-subtle-bg-hover: $modes-color-interactive-monochrome-hover;
 $table-color-header-subtle-border-default: $modes-color-generic-fg-delicate; // Header borders
+$table-color-header-subtle-label-default: $modes-color-interactive-monochrome-default;
+$table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-default;
+$table-color-header-harsh-bg-alt: $modes-color-interactive-monochrome-default; // header alt
+$table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-default-alt;
+$table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-hover;
 $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-header-harsh-label-hover: $modes-color-interactive-monochrome-default;
 $table-color-row-border-default: $modes-color-generic-fg-delicate;
-$table-color-row-label-activated: $modes-color-interactive-monochrome-with-active;
-$table-color-row-label-active: $modes-color-interactive-monochrome-with-active;
+$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)
 $table-borderwidth-thin: $global-borderwidth-xs; // Table border. Optional choice of cell border width.
 $table-borderwidth-medium: $global-borderwidth-s; // Header border for subtle. Optional choice of cell border width.