npm - @sage/design-tokens - Versions diffs - 13.1.0 → 14.0.0 - Mend

@sage/design-tokens 13.1.0 → 14.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (896) hide show

package/scss/frozenproduct/small/components/button.scss CHANGED Viewed

@@ -21,14 +21,25 @@ $button-color-ai-border-active: $modes-color-interactive-ai-default;
 $button-color-ai-border-enabled: $modes-color-interactive-ai-default;
 $button-color-ai-border-hover: $modes-color-interactive-ai-default;
 $button-color-destructive-primary-bg-enabled: $modes-color-interactive-danger-default;
+$button-color-destructive-primary-label-enabled: $modes-color-interactive-danger-with-default;
+$button-color-destructive-primary-label-hover: $modes-color-interactive-danger-with-default;
 $button-color-destructive-secondary-border-enabled: $modes-color-interactive-danger-default;
 $button-color-destructive-secondary-label-enabled: $modes-color-interactive-danger-default;
+$button-color-typical-primary-bg-default: $modes-color-interactive-primary-with-default; // For spacer in Split button
+$button-color-typical-primary-label-active: $modes-color-interactive-primary-with-active;
+$button-color-typical-primary-label-enabled: $modes-color-interactive-primary-with-default;
+$button-color-typical-primary-label-hover: $modes-color-interactive-primary-with-default;
+$button-color-typical-primary-inverse-bg-default: $modes-color-interactive-primary-inverse-with-default; // For spacer in Split button
+$button-color-typical-primary-inverse-bg-disabled: $modes-color-interactive-inactive-inverse-default;
+$button-color-typical-primary-inverse-label-active: $modes-color-interactive-primary-inverse-with-active;
+$button-color-typical-primary-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content-alt;
+$button-color-typical-primary-inverse-label-enabled: $modes-color-interactive-primary-inverse-with-default;
+$button-color-typical-primary-inverse-label-hover: $modes-color-interactive-primary-inverse-with-default;
 $button-color-typical-secondary-inverse-border-disabled: $modes-color-interactive-inactive-inverse-default;
 $button-color-typical-secondary-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
 $button-color-typical-tertiary-inverse-border-disabled: $modes-color-interactive-inactive-inverse-default;
 $button-color-typical-tertiary-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
 $button-color-typical-subtle-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
-$button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-active;
 $button-typography-adaptive-primary-s: $global-typography-adaptive-component-firm-s;
 $button-typography-adaptive-primary-m: $global-typography-adaptive-component-firm-m;
 $button-typography-adaptive-primary-l: $global-typography-adaptive-component-firm-l;
@@ -60,32 +71,26 @@ $button-typography-responsive-tertiary-s: $global-typography-responsive-componen
 $button-typography-responsive-tertiary-m: $global-typography-responsive-component-firm-m;
 $button-typography-responsive-tertiary-l: $global-typography-responsive-component-firm-l;
 $button-color-ai-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-ai-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-ai-label-hover: $modes-color-interactive-monochrome-with-hover;
 $button-color-destructive-primary-bg-hover: $modes-color-interactive-danger-hover;
+$button-color-destructive-secondary-bg-hover: $modes-color-interactive-danger-hover-alt;
 $button-color-destructive-secondary-border-hover: $modes-color-interactive-danger-hover;
 $button-color-destructive-secondary-label-hover: $modes-color-interactive-danger-hover;
 $button-color-typical-primary-bg-enabled: $modes-color-interactive-primary-default;
+$button-color-typical-primary-inverse-bg-enabled: $modes-color-interactive-primary-inverse-default;
 $button-color-typical-secondary-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-secondary-label-hover: $modes-color-interactive-monochrome-with-hover;
 $button-color-typical-tertiary-bg-enabled: $button-color-none;
 $button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-tertiary-label-hover: $modes-color-interactive-monochrome-with-hover;
 $button-color-typical-tertiary-inverse-bg-enabled: $button-color-none;
 $button-color-typical-subtle-bg-hover: $modes-color-interactive-monochrome-hover-alt;
 $button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-subtle-label-hover: $modes-color-interactive-monochrome-with-hover;
+$button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-active;
 $button-color-typical-toggle-bg-hover: $modes-color-interactive-monochrome-hover-alt;
-$button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-default;
-$button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-default-alt;
 $button-color-typical-toggle-label-hover: $modes-color-interactive-monochrome-with-hover;
 $button-color-video-bg-blur: $modes-color-interactive-monochrome-hover-alt;
-$button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-default;
-$button-color-video-primary-label-hover: $modes-color-interactive-monochrome-default;
-$button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-default;
 $button-size-split: $global-size-micro-xxs; // Split button (divider width)
 $button-size-xs: $global-size-macro-xs; // min-height on XS Buttons
 $button-size-s: $global-size-macro-s; // min-height on S Buttons
@@ -204,23 +209,20 @@ $button-space-video-x-s: $global-space-micro-xs; // Left padding on play icon in
 $button-space-video-x-m: $global-space-micro-xs; // Left padding on play icon in video button
 $button-space-video-x-l: $global-space-micro-xs; // Left padding on play icon in video button
 $button-color-ai-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-ai-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-destructive-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
-$button-color-destructive-primary-label-enabled: $modes-color-interactive-danger-with-default;
-$button-color-destructive-primary-label-hover: $modes-color-interactive-danger-with-default;
-$button-color-destructive-secondary-bg-hover: $modes-color-interactive-danger-hover-alt;
 $button-color-destructive-secondary-label-disabled: $modes-color-interactive-inactive-content;
 $button-color-typical-primary-bg-active: $modes-color-interactive-primary-active;
-$button-color-typical-primary-bg-default: $modes-color-interactive-primary-with-default; // For spacer in Split button
 $button-color-typical-primary-bg-hover: $modes-color-interactive-primary-hover;
-$button-color-typical-primary-label-active: $modes-color-interactive-primary-with-active;
 $button-color-typical-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
-$button-color-typical-primary-label-enabled: $modes-color-interactive-primary-with-default;
-$button-color-typical-primary-label-hover: $modes-color-interactive-primary-with-default;
+$button-color-typical-primary-inverse-bg-active: $modes-color-interactive-primary-inverse-active;
+$button-color-typical-primary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover;
 $button-color-typical-secondary-bg-active: $modes-color-interactive-primary-active-alt;
 $button-color-typical-secondary-border-active: $modes-color-interactive-primary-active;
 $button-color-typical-secondary-border-enabled: $modes-color-interactive-primary-default-alt;
 $button-color-typical-secondary-border-hover: $modes-color-interactive-primary-hover;
 $button-color-typical-secondary-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-secondary-inverse-bg-active: $modes-color-interactive-primary-inverse-active-alt;
 $button-color-typical-secondary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
 $button-color-typical-secondary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
@@ -233,6 +235,7 @@ $button-color-typical-tertiary-border-active: $modes-color-interactive-primary-a
 $button-color-typical-tertiary-border-enabled: $modes-color-interactive-primary-default-alt2;
 $button-color-typical-tertiary-border-hover: $modes-color-interactive-primary-hover;
 $button-color-typical-tertiary-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-tertiary-inverse-bg-active: $modes-color-interactive-primary-inverse-active-alt;
 $button-color-typical-tertiary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
 $button-color-typical-tertiary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt2;
@@ -240,21 +243,26 @@ $button-color-typical-tertiary-inverse-border-hover: $modes-color-interactive-pr
 $button-color-typical-tertiary-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
 $button-color-typical-tertiary-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
 $button-color-typical-tertiary-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
-$button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-active-alt;
 $button-color-typical-subtle-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-subtle-inverse-bg-hover: $modes-color-interactive-monochrome-inverse-hover-alt;
 $button-color-typical-subtle-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
 $button-color-typical-subtle-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
 $button-color-typical-subtle-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
 $button-color-typical-toggle-label-active-disabled: $modes-color-interactive-inactive-content-alt;
+$button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-toggle-label-active: $modes-color-interactive-monochrome-with-active;
 $button-color-typical-toggle-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-default-alt;
 $button-color-video-primary-bg-enabled: $modes-color-interactive-monochrome-with-default;
 $button-color-video-primary-bg-hover: $modes-color-interactive-monochrome-with-default;
+$button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-default;
+$button-color-video-primary-label-hover: $modes-color-interactive-monochrome-default;
 $button-color-video-secondary-bg-hover: $modes-color-interactive-monochrome-with-default;
 $button-color-video-secondary-border-enabled: $modes-color-interactive-monochrome-with-default;
 $button-color-video-secondary-border-hover: $modes-color-interactive-monochrome-with-default;
 $button-color-video-secondary-label-enabled: $modes-color-interactive-monochrome-with-default;
+$button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-default;
 $button-radius-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi),  Button toggle M (parent container)
 $button-radius-m: $global-radius-interactive-xl; // Buttons  M (typical and destructive, and inc bar, split and multi),  Button toggle L (parent container), Button toggle M (parent container)
 $button-radius-l: $global-radius-interactive-xxl; // Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container)
@@ -295,6 +303,7 @@ $button-color-typical-secondary-inverse-bg-hover: $modes-color-interactive-prima
 $button-color-typical-tertiary-bg-hover: $modes-color-interactive-primary-hover-alt;
 $button-color-typical-tertiary-border-disabled: $modes-color-interactive-inactive-default;
 $button-color-typical-tertiary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
+$button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-active-alt;
 $button-color-typical-subtle-inverse-bg-active: $modes-color-interactive-monochrome-inverse-active-alt;
 $button-color-typical-toggle-bg-active-disabled: $modes-color-interactive-inactive-default;
 $button-color-typical-toggle-border-disabled: $modes-color-interactive-inactive-default;

package/scss/frozenproduct/small/components/container.scss CHANGED Viewed

@@ -17,17 +17,12 @@ $container-color-ai-nudge-border-ai-horizontal: $modes-color-status-ai-default-h
 $container-color-ai-nudge-border-ai-vertical: $modes-color-status-ai-default-vertical; // left and right border for AI nudge message component
 $container-color-ai-tile-bordervertical: $modes-color-status-ai-default-vertical; // left border for AI tiles and bubbles.
 $container-color-interactive-bg-footer-activated: $modes-color-status-positive-default; //
-$container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-active;
 $container-color-interactive-border-activated: $modes-color-status-positive-default;
 $container-color-interactive-bg-footer-default: $modes-color-generic-bg-nought; // tile footer bg color
 $container-color-interactive-bg-enabled: $modes-color-generic-bg-nought;
-$container-color-interactive-border-active: $modes-color-interactive-monochrome-active;
-$container-color-interactive-icon-active: $modes-color-interactive-monochrome-active; // Active chevron for any accordion.
-$container-color-interactive-text-active: $modes-color-interactive-monochrome-active; // Active label for any accordion.
 $container-color-interactive-detailedicon-bg: $modes-color-custom-default; //
 $container-color-interactive-droptarget-bg-default: $modes-color-status-info-default; // draggable drop target background color
 $container-color-standard-bg-default: $modes-color-generic-bg-nought;
-$container-color-standard-border-active: $modes-color-interactive-monochrome-active;
 $container-color-standard-statusborder-bg-caution: $modes-color-status-caution-default;
 $container-color-standard-statusborder-bg-negative: $modes-color-status-negative-default;
 $container-color-standard-statusborder-bg-important: $modes-color-status-important-default;
@@ -54,16 +49,17 @@ $container-typography-responsive-paragraph-s: $global-typography-responsive-comp
 $container-typography-responsive-paragraph-m: $global-typography-responsive-component-moderate-m;
 $container-typography-responsive-paragraph-l: $global-typography-responsive-component-moderate-l;
 $container-color-blockquote-border: $modes-color-interactive-primary-default;
+$container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-active;
 $container-color-interactive-bg-hover: $modes-color-interactive-monochrome-hover-alt; // Used for accordion hover backgrounds
-$container-color-interactive-icon-enabled: $modes-color-interactive-monochrome-default; // Enabled chevron for any accordion.
-$container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-default-alt; // Enabled label for subtle accordion.
-$container-color-interactive-icon-hover: $modes-color-interactive-monochrome-default; // Hover chevron for any accordion.
+$container-color-interactive-border-active: $modes-color-interactive-monochrome-active;
+$container-color-interactive-icon-active: $modes-color-interactive-monochrome-active; // Active chevron for any accordion.
+$container-color-interactive-text-active: $modes-color-interactive-monochrome-active; // Active label for any accordion.
 $container-color-interactive-text-enabled: $modes-color-generic-content-harsh; // Enabled label for standard accordion.
 $container-color-interactive-text-alt-enabled: $modes-color-generic-content-moderate; // Enabled label for subtle accordion.
-$container-color-interactive-text-hover: $modes-color-interactive-monochrome-default; // Hover label for any accordion.
 $container-color-scrollbar-bg-default: $modes-color-generic-bg-faint;
 $container-color-standard-bg-alt: $modes-color-generic-bg-faint;
 $container-color-standard-bg-footer-default: $modes-color-generic-bg-faint; // tile footer bg color
+$container-color-standard-border-active: $modes-color-interactive-monochrome-active;
 $container-color-standard-dimmer: $modes-color-interactive-inactive-mask; // dimmed mask for dialogs
 $container-color-standard-text-alt: $modes-color-generic-content-moderate; // for subheadings etc
 $container-color-standard-text-default: $modes-color-generic-content-harsh; // for headings, paragraph text etc
@@ -82,9 +78,13 @@ $container-color-interactive-bg-disabled: $modes-color-interactive-inactive-defa
 $container-color-interactive-border-alt: $modes-color-generic-fg-delicate; // Link preview.
 $container-color-interactive-border-inactive: $modes-color-generic-fg-soft;
 $container-color-interactive-border-enabled: $modes-color-generic-fg-moderate;
+$container-color-interactive-icon-enabled: $modes-color-interactive-monochrome-default; // Enabled chevron for any accordion.
+$container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-default-alt; // Enabled label for subtle accordion.
+$container-color-interactive-icon-hover: $modes-color-interactive-monochrome-default; // Hover chevron for any accordion.
 $container-color-interactive-label-footer-active: $modes-color-interactive-monochrome-with-active;
 $container-color-interactive-label-footer-activated: $modes-color-interactive-monochrome-with-active;
 $container-color-interactive-text-disabled: $modes-color-interactive-inactive-content;
+$container-color-interactive-text-hover: $modes-color-interactive-monochrome-default; // Hover label for any accordion.
 $container-color-scrollbar-fg-default: $modes-color-generic-fg-moderate;
 $container-color-standard-border-alt: $modes-color-generic-fg-soft;
 $container-color-standard-border-default: $modes-color-generic-fg-faint;

package/scss/frozenproduct/small/components/focus.scss CHANGED Viewed

@@ -9,6 +9,10 @@ $focus-color-bg: $modes-color-interactive-focus-with-default-alt;
 $focus-color-borderalt: $modes-color-interactive-focus-default;
 $focus-color-border: $modes-color-interactive-focus-with-default;
 $focus-color-label: $modes-color-interactive-focus-content;
+$focus-color-inverse-bg: $modes-color-interactive-focus-inverse-with-default-alt;
+$focus-color-inverse-borderalt: $modes-color-interactive-focus-inverse-default;
+$focus-color-inverse-border: $modes-color-interactive-focus-inverse-with-default;
+$focus-color-inverse-label: $modes-color-interactive-focus-inverse-content;
 $focus-size-underline: $global-size-micro-xs; // focus black underline on links and skiplink
 $focus-borderwidth-secondary: $global-borderwidth-s; // Secondary focus (dropdown item)
 $focus-borderwidth-inner: $global-borderwidth-s; // Focus border (inner)

package/scss/frozenproduct/small/components/form.scss CHANGED Viewed

@@ -13,10 +13,7 @@ $form-radius-radio: $global-radius-circle; // Radio button
 $form-radius-switch: $global-radius-circle; // Switch container and handle
 $form-radius-calendar-none: $global-radius-none; // Calendar (start and end duration)
 $form-radius-calendar-date: $global-radius-circle; // Calendar date (hover & selected),
-$form-color-calendar-bg-active: $modes-color-interactive-monochrome-active;
-$form-color-calendar-border-duration: $modes-color-interactive-monochrome-active;
 $form-color-labelset-label-required: $modes-color-interactive-danger-default;
-$form-color-switch-bg-active: $modes-color-interactive-monochrome-active;
 $form-color-validation-border-error: $modes-color-status-negative-default;
 $form-color-validation-bar-error: $modes-color-status-negative-default; // error bar to left of inputs
 $form-color-validation-bar-warning: $modes-color-status-caution-default; // warning bar to left of inputs
@@ -35,10 +32,10 @@ $form-typography-responsive-label-l: $global-typography-responsive-component-fir
 $form-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
 $form-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
 $form-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
+$form-color-calendar-bg-active: $modes-color-interactive-monochrome-active;
 $form-color-calendar-bg-hover: $modes-color-interactive-monochrome-hover-alt;
+$form-color-calendar-border-duration: $modes-color-interactive-monochrome-active;
 $form-color-calendar-text-hover: $modes-color-interactive-monochrome-with-hover;
-$form-color-dropdown-label-alt: $modes-color-interactive-monochrome-default;
-$form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-default-alt;
 $form-color-dropdown-label-hover: $modes-color-interactive-monochrome-with-hover;
 $form-color-typical-bg-default: $modes-color-interactive-data-entry-default;
 $form-color-typical-bg-enabled: $modes-color-interactive-data-entry-default;
@@ -47,9 +44,8 @@ $form-color-typical-icon-active: $modes-color-interactive-data-entry-with-active
 $form-color-typical-icon-hover: $modes-color-interactive-data-entry-with-hover;
 $form-color-typical-text-hover: $modes-color-interactive-data-entry-with-hover; // text hover state when dragging a file over file input
 $form-color-typical-text-read-only: $modes-color-generic-content-harsh;
+$form-color-switch-bg-active: $modes-color-interactive-monochrome-active;
 $form-color-switch-bg-enabled: $modes-color-interactive-data-entry-default; // for switch
-$form-color-switch-border-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
-$form-color-switch-fg-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
 $form-space-none: $global-space-none;
 $form-space-calendar-x-m: $global-space-macro-m;
 $form-space-calendar-y-m: $global-space-macro-m;
@@ -227,7 +223,9 @@ $form-color-calendar-text-enabled: $modes-color-interactive-data-entry-content;
 $form-color-calendar-text-alt-enabled: $modes-color-interactive-data-entry-content-alt;
 $form-color-dropdown-bg-hover: $popover-color-bg-hover; // REF POPOVER
 $form-color-dropdown-label-active: $modes-color-interactive-monochrome-with-active;
+$form-color-dropdown-label-alt: $modes-color-interactive-monochrome-default;
 $form-color-dropdown-label-disabled: $modes-color-interactive-inactive-content;
+$form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-default-alt;
 $form-color-labelset-label-default: $modes-color-interactive-data-entry-content;
 $form-color-labelset-label-alt: $modes-color-interactive-data-entry-content-alt; // used for '(optional)' text and hint text.
 $form-color-labelset-label-disabled: $modes-color-interactive-inactive-content;
@@ -247,8 +245,10 @@ $form-color-typical-text-default: $modes-color-interactive-data-entry-content;
 $form-color-typical-text-disabled: $modes-color-interactive-inactive-content;
 $form-color-typical-text-enabled: $modes-color-interactive-data-entry-content; // Dropdown text (subtle dropdown).
 $form-color-switch-bg-disabled: $modes-color-interactive-inactive-default-alt; // for switch
+$form-color-switch-border-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
 $form-color-switch-fg-active: $modes-color-interactive-monochrome-with-active;
 $form-color-switch-fg-activedisabled: $modes-color-interactive-inactive-content-alt;
+$form-color-switch-fg-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
 $form-color-switch-label-active: $modes-color-interactive-data-entry-content;
 $form-color-switch-label-enabled: $modes-color-interactive-data-entry-content-alt;
 $form-color-switch-icon-enabled: $modes-color-interactive-data-entry-content-alt;

package/scss/frozenproduct/small/components/link.scss CHANGED Viewed

@@ -5,7 +5,6 @@
 // Do not edit directly, this file was auto-generated.
-$link-color-subtle-label-hover: $modes-color-interactive-monochrome-active;
 $link-typography-responsive-default-s: $global-typography-responsive-component-underlined-moderate-s; // Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size.
 $link-typography-responsive-default-m: $global-typography-responsive-component-underlined-moderate-m; // Small Viewports: 16, Large Viewports: 16. Match token size to component size.
 $link-typography-responsive-default-l: $global-typography-responsive-component-underlined-moderate-l; // Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size.
@@ -19,12 +18,15 @@ $link-typography-adaptive-heading-s: $global-typography-adaptive-component-under
 $link-typography-adaptive-heading-m: $global-typography-adaptive-component-underlined-firm-m;
 $link-typography-adaptive-heading-l: $global-typography-adaptive-component-underlined-firm-l;
 $link-color-destructive-label-default: $modes-color-interactive-danger-default-alt; // .
-$link-color-subtle-label-default: $modes-color-interactive-monochrome-default;
+$link-color-destructive-inverse-label-default: $modes-color-interactive-danger-inverse-default-alt; // .
+$link-color-subtle-label-hover: $modes-color-interactive-monochrome-active;
 $link-color-subtle-inverse-label-hover: $modes-color-interactive-monochrome-inverse-active;
 $link-boxshadow-skiplink: $global-boxshadow-container-near;
 $link-color-destructive-label-hover: $modes-color-interactive-danger-hover-alt2;
+$link-color-destructive-inverse-label-hover: $modes-color-interactive-danger-inverse-hover-alt2;
 $link-color-typical-label-default: $modes-color-interactive-primary-default-alt3;
 $link-color-typical-inverse-label-default: $modes-color-interactive-primary-inverse-default-alt3;
+$link-color-subtle-label-default: $modes-color-interactive-monochrome-default;
 $link-color-subtle-inverse-label-default: $modes-color-interactive-monochrome-inverse-default;
 $link-size-skiplink-m: $global-size-macro-m;
 $link-size-icon-m: $global-size-icon-m;

package/scss/frozenproduct/small/components/logo.scss CHANGED Viewed

@@ -8,8 +8,6 @@
 $logo-size-ai-m: 14px; // AI star
 $logo-color-sage-bg-default: $modes-color-brand-default; // sage logo
 $logo-color-sage-bg-alt: $modes-color-brand-default-alt;
-$logo-color-trust-bg-default: $modes-color-status-positive-default; // filled
-$logo-color-trust-outline: $modes-color-generic-content-extreme;
 $logo-color-copilot-no-bg-fg-default: $modes-color-brand-copilot-no-bg-monochrome;
 $logo-color-ai-identifier-bg-star: $modes-color-brand-copilot-ai-identifier-default; // star bg color
 $logo-color-ai-identifier-bg-dot: $modes-color-brand-copilot-ai-identifier-with-default;

package/scss/frozenproduct/small/components/nav.scss CHANGED Viewed

@@ -7,15 +7,12 @@
 $nav-space-leftnav-grandchilditem-x-indent: 33; // indent on grandchild items
 $nav-color-bg-default: $modes-color-generic-bg-nought; // nav bar bg
-$nav-color-item-bg-active: $modes-color-interactive-monochrome-active;
 $nav-color-item-bg-enabled: $modes-color-none;
 $nav-color-leftnav-container-bg-default: $modes-color-generic-bg-nought; // bg of horizontal nav variant that launches the left nav
-$nav-color-leftnav-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the parent container
 $nav-color-leftnav-item-bg-active: $modes-color-interactive-nav-active;
 $nav-color-leftnav-item-bg-enabled: $modes-color-none;
 $nav-color-leftnav-item-bg-hover: $modes-color-interactive-nav-hover;
 $nav-color-modal-container-bg-default: $modes-color-generic-bg-nought; // bg of container holding stack of items in modal nav
-$nav-color-modal-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the sticky header within modal
 $nav-color-modal-item-bg-active: $modes-color-interactive-nav-active;
 $nav-color-modal-item-bg-enabled: $modes-color-none;
 $nav-color-modal-item-bg-hover: $modes-color-interactive-nav-hover;
@@ -35,17 +32,18 @@ $nav-typography-responsive-label-l: $global-typography-responsive-component-firm
 $nav-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
 $nav-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
 $nav-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
+$nav-color-item-bg-active: $modes-color-interactive-monochrome-active;
 $nav-color-item-bg-activealt: $modes-color-interactive-monochrome-hover-alt;
 $nav-color-item-bg-hover: $modes-color-interactive-monochrome-hover-alt;
 $nav-color-item-label-activealt: $modes-color-interactive-monochrome-with-hover;
-$nav-color-item-label-enabled: $modes-color-interactive-monochrome-default;
 $nav-color-item-label-hover: $modes-color-interactive-monochrome-with-hover;
-$nav-color-item-label-alt: $modes-color-interactive-monochrome-default-alt;
 $nav-color-menu-bg-default: $modes-color-generic-bg-faint; // menu (level 1) nav bg
 $nav-color-menu-bg-alt: $modes-color-generic-bg-delicate; // level 2 nav bg
 $nav-color-menu-bg-alt2: $modes-color-generic-bg-soft; // level 3 nav bg
+$nav-color-leftnav-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the parent container
 $nav-color-leftnav-item-label-active: $modes-color-interactive-nav-with-active;
 $nav-color-leftnav-item-label-hover: $modes-color-interactive-nav-with-hover;
+$nav-color-modal-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the sticky header within modal
 $nav-color-modal-item-label-active: $modes-color-interactive-nav-with-active;
 $nav-color-modal-item-label-hover: $modes-color-interactive-nav-with-hover;
 $nav-color-modal-headeritem-label-default: $modes-color-generic-content-firm; // color for subheaders passed into modal nav
@@ -54,6 +52,8 @@ $nav-color-topnav-item-label-hover: $modes-color-interactive-nav-with-hover;
 $nav-boxshadow-menu: $global-boxshadow-cleanedge-near; // Menu
 $nav-boxshadow-leftnav-childcontainer: $global-boxshadow-container-near; // box shadow on progressively shown child container
 $nav-color-item-label-active: $modes-color-interactive-monochrome-with-active;
+$nav-color-item-label-enabled: $modes-color-interactive-monochrome-default;
+$nav-color-item-label-alt: $modes-color-interactive-monochrome-default-alt;
 $nav-color-menu-border-default: $modes-color-generic-fg-delicate; // level 1 border
 $nav-color-leftnav-container-border-default: $modes-color-generic-fg-soft; // dividing lines within parent container
 $nav-color-leftnav-item-label-enabled: $modes-color-interactive-nav-with-default;

package/scss/frozenproduct/small/components/page.scss CHANGED Viewed

@@ -6,7 +6,6 @@
 // Do not edit directly, this file was auto-generated.
 $page-color-bg-default: $modes-color-generic-backdrop-nought;
-$page-color-bg-alt: $modes-color-generic-backdrop-faint;
 $page-typography-responsive-h1: $global-typography-responsive-heading-l;
 $page-typography-responsive-h2: $global-typography-responsive-heading-m;
 $page-typography-responsive-h3: $global-typography-responsive-heading-s;
@@ -25,6 +24,7 @@ $page-typography-adaptive-p-regular-typical: $global-typography-adaptive-body-re
 $page-typography-adaptive-p-regular-large: $global-typography-adaptive-body-regular-l;
 $page-typography-adaptive-p-medium-typical: $global-typography-adaptive-body-medium-s;
 $page-typography-adaptive-p-medium-large: $global-typography-adaptive-body-medium-l;
+$page-color-bg-alt: $modes-color-generic-backdrop-faint;
 $page-color-text-alt: $modes-color-generic-content-moderate; // for subheadings etc
 $page-color-text-default: $modes-color-generic-content-harsh; // for headings, paragraph text etc
 $page-space-x-l: $global-space-macro-xl;

package/scss/frozenproduct/small/components/popover.scss CHANGED Viewed

@@ -6,7 +6,6 @@
 // Do not edit directly, this file was auto-generated.
 $popover-radius-none: $global-radius-none; // Navigation menu top corners
-$popover-color-bg-active: $modes-color-interactive-monochrome-active; // previously action minor 850
 $popover-color-bg-default: $modes-color-generic-bg-nought; // REF'D IN FORM. Popover container bg
 $popover-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
 $popover-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
@@ -21,11 +20,11 @@ $popover-typography-responsive-default-s: $global-typography-responsive-componen
 $popover-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
 $popover-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
 $popover-boxshadow-container: $global-boxshadow-container-near; // REF'D IN FORM. Popover container for Button popover, Button split, (and Form calendar, color picker, dropdown)
+$popover-color-bg-active: $modes-color-interactive-monochrome-active; // previously action minor 850
 $popover-color-bg-activealt: $modes-color-interactive-monochrome-hover-alt; // REF'D IN FORM.
 $popover-color-bg-hover: $modes-color-interactive-monochrome-hover-alt; // REF'D IN FORM.
 $popover-color-label-activealt: $modes-color-interactive-monochrome-with-hover;
 $popover-color-label-hover: $modes-color-interactive-monochrome-with-hover;
-$popover-color-label-enabled: $modes-color-interactive-monochrome-default-alt;
 $popover-color-submenu-bg-default: $modes-color-generic-bg-faint; // popover small screen submenu container bg
 $popover-size-icon-m: $global-size-icon-m;
 $popover-size-item-s: $global-size-macro-s; // REF'D IN FORM. Menu item min height.
@@ -56,6 +55,7 @@ $popover-space-submenu-x-m: $global-space-macro-xs; // Right left padding on sma
 $popover-space-submenu-x-l: $global-space-macro-xs; // Right left padding on small screen submenu popover container.
 $popover-color-label-active: $modes-color-interactive-monochrome-with-active;
 $popover-color-label-disabled: $modes-color-interactive-inactive-content;
+$popover-color-label-enabled: $modes-color-interactive-monochrome-default-alt;
 $popover-size-menu-minwidth-s: $container-size-responsive-m / 2; // minwidth of small size popover menu container
 $popover-size-menu-minwidth-m: $container-size-responsive-xs; // minwidth of medium size popover menu container
 $popover-size-menu-minwidth-l: $container-size-responsive-s; // minwidth of large size popover menu container

package/scss/frozenproduct/small/components/progress.scss CHANGED Viewed

@@ -25,19 +25,13 @@ $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-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-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-active;
 $progress-color-stepflow-bg-complete: $modes-color-status-positive-default;
-$progress-color-stepflow-border-active-outer: $modes-color-interactive-monochrome-active;
-$progress-color-stepindicator-bg-active: $modes-color-interactive-monochrome-active;
 $progress-color-stepindicator-bg-complete: $modes-color-status-positive-default;
-$progress-color-stepindicator-border-active-outer: $modes-color-interactive-monochrome-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;
@@ -53,14 +47,20 @@ $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-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-fg-default: $modes-color-interactive-monochrome-active; // used for loader standard loader spinner
 $progress-color-loader-inverse-bg-default: $modes-color-interactive-progress-bg-alt; // used for inverse loader bgs
+$progress-color-stepflow-bg-active: $modes-color-interactive-monochrome-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-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-active;
+$progress-color-stepindicator-border-active-outer: $modes-color-interactive-monochrome-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
@@ -69,9 +69,10 @@ $progress-size-carouselselector-dot-m: $global-size-micro-l;
 $progress-size-carouselselector-activedot-m: $global-size-macro-xxs;
 $progress-size-carouselselector-hitarea-m: $global-size-macro-xs;
 $progress-size-carouselslide-x-m: $global-size-macro-xl; // Inactive slide
-$progress-size-ring-s: $global-size-macro-s; // Loader ring
-$progress-size-ring-m: $global-size-macro-s * 2; // Loader ring
-$progress-size-ring-l: $global-size-macro-xs * 4; // Loader ring
+$progress-size-spinner-xs: $global-size-macro-xs - $global-size-micro-xs; // Loader ring for XS size loader spinners
+$progress-size-spinner-s: $global-size-macro-s; // Loader ring
+$progress-size-spinner-m: $global-size-macro-s * 2; // Loader ring
+$progress-size-spinner-l: $global-size-macro-xs * 4; // Loader ring
 $progress-size-stepflow-m: $global-size-micro-m; // Step height
 $progress-size-stepindicator-bar: $global-size-micro-xxs; // step indicator bar
 $progress-size-stepindicator-stepcircle-s: $global-size-macro-xs; // M size step indicator

package/scss/frozenproduct/small/components/status.scss CHANGED Viewed

@@ -7,6 +7,7 @@
 $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-message-global-callout-bg-default: $modes-color-status-callout-default-alt; // Global message bg
 $status-color-message-global-info-bg-default: $modes-color-status-info-default-alt; // Global message bg
 $status-color-message-global-info-icon: $modes-color-status-info-default; // Icon on tinted bgs
 $status-color-message-global-warning-bg-default: $modes-color-status-caution-default-alt; // Global message bg
@@ -15,6 +16,7 @@ $status-color-message-contextual-bg: $modes-color-generic-bg-nought;
 $status-color-message-contextual-icon: $modes-color-generic-bg-nought; // decorative icon on standard contextual messages
 $status-color-message-contextual-icon-alt: $modes-color-status-neutral-default; // icon on neutral status dialogs
 $status-color-message-contextual-ai-bg-alt: $modes-color-status-neutral-default-alt;
+$status-color-message-contextual-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
 $status-color-message-contextual-error-bg-default: $modes-color-status-negative-default;
 $status-color-message-contextual-error-bg-alt: $modes-color-status-negative-default-alt; // Subtle message bg
 $status-color-message-contextual-error-border-default: $modes-color-status-negative-default;
@@ -80,13 +82,12 @@ $status-typography-responsive-heading-s: $global-typography-responsive-component
 $status-typography-responsive-heading-m: $global-typography-responsive-component-firm-m;
 $status-typography-responsive-heading-l: $global-typography-responsive-component-firm-l;
 $status-color-message-global-label-hover: $modes-color-interactive-monochrome-with-hover;
-$status-color-message-global-callout-bg-default: $modes-color-status-callout-default-alt; // Global message bg
+$status-color-message-global-callout-bg-hover: $modes-color-status-callout-hover-alt; // global message bg hover
 $status-color-message-global-info-bg-hover: $modes-color-status-info-hover-alt;
 $status-color-message-global-warning-bg-hover: $modes-color-status-caution-hover-alt;
 $status-color-message-contextual-text: $modes-color-status-content-with-hover-alt; // Message text.
 $status-color-message-contextual-ai-bg-default: $modes-color-status-ai-default-alt;
 $status-color-message-contextual-ai-border-default: $modes-color-status-ai-default-alt;
-$status-color-message-contextual-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
 $status-color-pill-generic-inverse-label-default: $modes-color-status-content-inverse-with-default;
 $status-color-pill-generic-inverse-label-hover: $modes-color-status-content-inverse-with-hover;
 $status-color-pill-error-bg-alt-hover: $modes-color-status-negative-hover-alt;
@@ -115,7 +116,6 @@ $status-color-rating-bg-default-alt: $modes-color-status-reviews-default-alt;
 $status-color-rating-bg-hover: $modes-color-status-reviews-hover;
 $status-color-rating-border-default: $modes-color-status-reviews-default;
 $status-color-message-global-label-default: $modes-color-status-content-with-default-alt;
-$status-color-message-global-callout-bg-hover: $modes-color-status-callout-hover-alt; // global message bg hover
 $status-color-message-global-callout-icon: $modes-color-status-content-with-default-alt; // Icon on tinted bgs
 $status-color-message-contextual-callout-icon: $modes-color-status-content-with-default-alt;
 $status-color-pill-generic-label-default: $modes-color-status-content-with-default;

package/scss/frozenproduct/small/components/tab.scss CHANGED Viewed

@@ -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/frozenproduct/small/components/table.scss CHANGED Viewed

@@ -6,7 +6,6 @@
 // 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-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,37 +26,39 @@ $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-active: $modes-color-interactive-monochrome-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-default;
 $table-boxshadow-parentrow: $global-boxshadow-container-far;
 $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-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
 $table-borderwidth-thick: $global-borderwidth-s; // header border for subtle
 $table-space-none: $global-space-none;
+$table-space-yg: $global-space-micro-s; // space between table and pagination
 $table-space-row-x-xs: $global-space-micro-l; // Left and right padding inside XS row cells
 $table-space-row-x-s: $global-space-macro-xs; // Left and right padding inside S row cells
 $table-space-row-x-m: $global-space-macro-xs; // Left and right padding inside M row cells