@sage/design-tokens 5.1.0 → 5.2.0

package/scss/product/small/components/progress.scss

@@ -25,13 +25,19 @@ $progress-radius-skeleton-circle: $global-radius-circle; // Used to represent ci
 $progress-color-fg-ai: $modes-color-interactive-ai-default; // For progress ring in ai buttons
 $progress-color-fg-alt: $modes-color-status-positive-default;
 $progress-color-fg-caution: $modes-color-status-caution-default;
+$progress-color-fg-default: $modes-color-interactive-monochrome-generic-active;
 $progress-color-fg-error: $modes-color-status-negative-default;
 $progress-color-fg-info: $modes-color-status-info-default;
 $progress-color-datavis-fg-default: $modes-color-status-generic-default;
+$progress-color-loader-fg-default: $modes-color-interactive-monochrome-generic-active; // used for loader standard loader spinner
 $progress-color-loader-fg-error: $modes-color-status-negative-default;
 $progress-color-loader-fg-complete: $modes-color-status-positive-default;
+$progress-color-stepflow-bg-active: $modes-color-interactive-monochrome-generic-active;
 $progress-color-stepflow-bg-complete: $modes-color-status-positive-default;
+$progress-color-stepflow-border-active-outer: $modes-color-interactive-monochrome-generic-active;
+$progress-color-stepindicator-bg-active: $modes-color-interactive-monochrome-generic-active;
 $progress-color-stepindicator-bg-complete: $modes-color-status-positive-default;
+$progress-color-stepindicator-border-active-outer: $modes-color-interactive-monochrome-generic-active;
 $progress-color-stepindicator-border-success: $modes-color-status-positive-default;
 $progress-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
 $progress-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
@@ -47,20 +53,14 @@ $progress-typography-responsive-default-m: $global-typography-responsive-compone
 $progress-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
 $progress-color-bg-default: $modes-color-interactive-progress-bg;
 $progress-color-fg-alt2: $modes-color-generic-content-firm;
-$progress-color-fg-default: $modes-color-interactive-monochrome-generic-active;
 $progress-color-label-alt: $modes-color-generic-content-firm;
 $progress-color-label-default: $modes-color-generic-content-harsh;
 $progress-color-loader-bg-default: $modes-color-interactive-progress-bg;
 $progress-color-loader-bg-alt: $modes-color-interactive-progress-bg-alt; // used for inverse loader bgs
-$progress-color-loader-fg-default: $modes-color-interactive-monochrome-generic-active; // used for loader standard loader spinner
-$progress-color-stepflow-bg-active: $modes-color-interactive-monochrome-generic-active;
 $progress-color-stepflow-bg-default: $modes-color-generic-fg-nought;
 $progress-color-stepflow-border-active-inner: $modes-color-generic-fg-nought;
-$progress-color-stepflow-border-active-outer: $modes-color-interactive-monochrome-generic-active;
 $progress-color-stepflow-label-alt: $modes-color-generic-content-firm;
 $progress-color-stepflow-label-default: $modes-color-generic-content-harsh;
-$progress-color-stepindicator-bg-active: $modes-color-interactive-monochrome-generic-active;
-$progress-color-stepindicator-border-active-outer: $modes-color-interactive-monochrome-generic-active;
 $progress-color-stepindicator-label-default: $modes-color-generic-content-harsh;
 $progress-size-bar-s: $global-size-micro-xs; // S loader bar
 $progress-size-bar-m: $global-size-micro-m; // M progress tracker bar, M loader bar

package/scss/product/small/components/status.scss

@@ -8,8 +8,6 @@
 $status-radius-none: $global-radius-none; // Pill (embedded element inner corners)
 $status-color-none: $modes-color-none; // transparent override used for hiding colors when needed.
 $status-color-bg-default: $modes-color-generic-bg-nought;
-$status-color-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
-$status-color-callout-bg-alt-default: $modes-color-status-callout-default-alt; // Global message bg
 $status-color-error-bg-default: $modes-color-status-negative-default;
 $status-color-error-bg-alt: $modes-color-status-negative-default-alt; // Subtle message bg
 $status-color-error-border-default: $modes-color-status-negative-default;
@@ -55,7 +53,8 @@ $status-color-label-alt-hover: $modes-color-status-content-with-hover-alt;
 $status-color-text: $modes-color-status-content-with-hover-alt; // Message text.
 $status-color-ai-bg-default: $modes-color-status-ai-default-alt;
 $status-color-ai-border-default: $modes-color-status-ai-default-alt;
-$status-color-callout-bg-alt-hover: $modes-color-status-callout-hover-alt; // Subtle message bg
+$status-color-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
+$status-color-callout-bg-alt-default: $modes-color-status-callout-default-alt; // Global message bg
 $status-color-error-bg-alt-hover: $modes-color-status-negative-hover-alt;
 $status-color-error-bg-hover: $modes-color-status-negative-hover;
 $status-color-info-bg-alt-hover: $modes-color-status-info-hover-alt;
@@ -75,6 +74,7 @@ $status-color-label-default: $modes-color-status-content-with-default;
 $status-color-label-readonly: $modes-color-interactive-monochrome-generic-with-default; // Pill (all types, readonly, when nested in disabled parent components)
 $status-color-label-hover: $modes-color-status-content-with-hover;
 $status-color-label-alt-default: $modes-color-status-content-with-default-alt;
+$status-color-callout-bg-alt-hover: $modes-color-status-callout-hover-alt; // Subtle message bg
 $status-size-pill-s: $global-size-macro-xs - $global-size-micro-xs; // Min height
 $status-size-pill-m: $global-size-macro-xs; // Min height and removable button.
 $status-size-pill-l: $global-size-macro-xs + $global-size-micro-xs; // Min height and removable button

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

@@ -6,6 +6,9 @@
 // Do not edit directly, this file was auto-generated.
 
 $tab-color-bg-enabled: $modes-color-none;
+$tab-color-border-active: $modes-color-interactive-monochrome-generic-active;
+$tab-color-label-active: $modes-color-interactive-monochrome-generic-active;
+$tab-color-icon-active: $modes-color-interactive-monochrome-generic-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;
@@ -19,11 +22,12 @@ $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-generic-hover-alt; // For anchor nav, not tab.
-$tab-color-border-active: $modes-color-interactive-monochrome-generic-active;
+$tab-color-icon-enabled: $modes-color-interactive-monochrome-generic-default-alt;
 $tab-color-icon-hover: $modes-color-interactive-monochrome-generic-with-hover;
-$tab-color-label-active: $modes-color-interactive-monochrome-generic-active;
-$tab-color-icon-active: $modes-color-interactive-monochrome-generic-active;
+$tab-color-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
 $tab-color-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
+$tab-color-validation-label-error: $modes-color-interactive-monochrome-generic-default-alt;
+$tab-color-validation-label-warning: $modes-color-interactive-monochrome-generic-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.
@@ -42,10 +46,6 @@ $tab-space-y-l: $global-space-micro-xxl; // Top bottom padding in Tab.
 $tab-color-bg-active: $modes-color-interactive-monochrome-generic-with-active;
 $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-generic-default-alt;
-$tab-color-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
-$tab-color-validation-label-error: $modes-color-interactive-monochrome-generic-default-alt;
-$tab-color-validation-label-warning: $modes-color-interactive-monochrome-generic-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

@@ -6,6 +6,7 @@
 // Do not edit directly, this file was auto-generated.
 
 $table-color-header-subtle-bg-default: $modes-color-none;
+$table-color-row-bg-active: $modes-color-interactive-monochrome-generic-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;
@@ -26,31 +27,30 @@ $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-generic-hover;
+$table-color-header-subtle-label-default: $modes-color-interactive-monochrome-generic-default;
+$table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-generic-default;
+$table-color-header-harsh-bg-alt: $modes-color-interactive-monochrome-generic-default-alt; // header alt
+$table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-generic-default;
+$table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-generic-hover;
+$table-color-header-harsh-border-default: $modes-color-interactive-monochrome-subtle-default-alt;
+$table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-generic-default;
 $table-color-row-bg-activated: $modes-color-interactive-primary-default;
-$table-color-row-bg-active: $modes-color-interactive-monochrome-generic-active;
 $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-alt3: $modes-color-generic-bg-faint; // Child rows.
 $table-color-row-bg-hover: $modes-color-generic-bg-soft;
 $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-generic-default;
 $table-boxshadow-parentrow: $global-boxshadow-container-far;
-$table-color-header-subtle-bg-alt: $modes-color-interactive-monochrome-subtle-default; // header alt
-$table-color-header-subtle-bg-hover: $modes-color-interactive-monochrome-generic-hover;
 $table-color-header-subtle-border-default: $modes-color-generic-fg-delicate; // Header borders
-$table-color-header-subtle-label-default: $modes-color-interactive-monochrome-generic-default;
-$table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-generic-default;
-$table-color-header-harsh-bg-alt: $modes-color-interactive-monochrome-generic-default-alt; // header alt
-$table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-generic-default;
-$table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-generic-hover;
-$table-color-header-harsh-border-default: $modes-color-interactive-monochrome-subtle-default-alt;
 $table-color-header-harsh-label-default: $modes-color-interactive-monochrome-generic-with-default;
-$table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-generic-default;
 $table-color-row-border-default: $modes-color-generic-fg-delicate;
 $table-color-row-label-activated: $modes-color-interactive-monochrome-generic-with-active;
 $table-color-row-label-active: $modes-color-interactive-monochrome-generic-with-active;
 $table-color-footer-border-default: $modes-color-generic-fg-delicate; // Header borders
-$table-color-footer-label-default: $modes-color-interactive-monochrome-generic-default;
 $table-radius-container: $global-radius-container-m; // Table (parent container)
 $table-borderwidth-thin: $global-borderwidth-xs; // Table border
 $table-borderwidth-thick: $global-borderwidth-s; // header border for subtle