@sage/design-tokens 13.1.0 → 13.2.0

package/scss/product/large/components/table.scss

@@ -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

package/scss/product/large/dark.scss

@@ -69,10 +69,18 @@ $modes-color-interactive-danger-active: #f28486; // active button on dark
 $modes-color-interactive-danger-default: #E13E53;
 $modes-color-interactive-danger-default-alt: #e85b66; // for links in datatables 
 $modes-color-interactive-danger-hover: #eb646c;
-$modes-color-interactive-danger-hover-alt: #3f1a1c; // button hover on dark
+$modes-color-interactive-danger-hover-alt: #e13e5314; // button hover on dark
 $modes-color-interactive-danger-hover-alt2: #ec6a71; // for links in datatables
 $modes-color-interactive-danger-with-active: #000000;
 $modes-color-interactive-danger-with-default: #000000;
+$modes-color-interactive-danger-inverse-active: #882b34; // used on pill hover states
+$modes-color-interactive-danger-inverse-default: #CD384B;
+$modes-color-interactive-danger-inverse-default-alt: #b23342; // For links in datatables
+$modes-color-interactive-danger-inverse-hover: #aa323f; // used on solid-pill and primary-button hover states
+$modes-color-interactive-danger-inverse-hover-alt: #cd384b14; // used on secondary-button hover states
+$modes-color-interactive-danger-inverse-hover-alt2: #a3303d; // used on link hover state
+$modes-color-interactive-danger-inverse-with-active: #FFFFFF;
+$modes-color-interactive-danger-inverse-with-default: #FFFFFF;
 $modes-color-interactive-data-entry-default: #000000; // Input backgrounds.
 $modes-color-interactive-data-entry-with-active: #FFFFFF; // checkbox tick icon or radio handle
 $modes-color-interactive-data-entry-with-active-alt: #000000;
@@ -83,10 +91,14 @@ $modes-color-interactive-data-entry-default-alt: #0e0e0e; // Input footer bgs (e
 $modes-color-interactive-data-entry-content: #fffffff2; // Input Text
 $modes-color-interactive-data-entry-content-alt: #ffffff8c; // Hint text, placeholder text, character count etc
 $modes-color-interactive-data-entry-frozen-with-default: #777; // Input borders.
-$modes-color-interactive-focus-with-default: #000000;
+$modes-color-interactive-focus-default: #FFB500;
 $modes-color-interactive-focus-content: #FFFFFF;
+$modes-color-interactive-focus-with-default: #000000;
 $modes-color-interactive-focus-with-default-alt: #926916;
-$modes-color-interactive-focus-default: #FFB500;
+$modes-color-interactive-focus-inverse-default: #000000;
+$modes-color-interactive-focus-inverse-content: #000000;
+$modes-color-interactive-focus-inverse-with-default: #FFB500;
+$modes-color-interactive-focus-inverse-with-default-alt: #ffd27e;
 $modes-color-interactive-inactive-default: #4b4b4b; // disabled buttons on dark
 $modes-color-interactive-inactive-mask: #FFFFFF; // full screen takeover token for modal dimmer
 $modes-color-interactive-inactive-default-alt: #0e0e0e; // Disabled button backgrounds and borders ON DARK
@@ -97,6 +109,7 @@ $modes-color-interactive-inactive-icon-alt: #ffffff8c; // Readonly icon inside f
 $modes-color-interactive-inactive-frozen-default-alt: #0e0e0e; // Disabled input and button backgrounds, button borders and input backgrounds.
 $modes-color-interactive-inactive-inverse-default: #a6a6a6; // Inversed disabled form secondary, tertiary and input borders borders.
 $modes-color-interactive-inactive-inverse-content: #0000006b; // Inversed disabled text inside buttons and form inputs.
+$modes-color-interactive-inactive-inverse-content-alt: #FFFFFF; //  Disabled labels inside buttons and Switch.
 $modes-color-interactive-monochrome-active: #FFFFFF;
 $modes-color-interactive-monochrome-active-alt: #ffffff29;
 $modes-color-interactive-monochrome-default: #ffffffe6;

package/scss/product/large/light.scss

@@ -69,10 +69,18 @@ $modes-color-interactive-danger-active: #882b34; // used on pill hover states
 $modes-color-interactive-danger-default: #CD384B;
 $modes-color-interactive-danger-default-alt: #b23342; // For links in datatables
 $modes-color-interactive-danger-hover: #aa323f; // used on solid-pill and primary-button hover states
-$modes-color-interactive-danger-hover-alt: #f9d1cf; // used on secondary-button hover states
+$modes-color-interactive-danger-hover-alt: #cd384b14; // used on secondary-button hover states
 $modes-color-interactive-danger-hover-alt2: #a3303d; // used on link hover state
 $modes-color-interactive-danger-with-active: #FFFFFF;
 $modes-color-interactive-danger-with-default: #FFFFFF;
+$modes-color-interactive-danger-inverse-active: #f28486; // used on pill hover states
+$modes-color-interactive-danger-inverse-default: #E13E53;
+$modes-color-interactive-danger-inverse-default-alt: #e85b66; // For links in datatables
+$modes-color-interactive-danger-inverse-hover: #eb646c; // used on solid-pill and primary-button hover states
+$modes-color-interactive-danger-inverse-hover-alt: #e13e5314; // used on secondary-button hover states
+$modes-color-interactive-danger-inverse-hover-alt2: #ec6a71; // used on link hover state
+$modes-color-interactive-danger-inverse-with-active: #000000;
+$modes-color-interactive-danger-inverse-with-default: #000000;
 $modes-color-interactive-data-entry-default: #FFFFFF; // Input backgrounds.
 $modes-color-interactive-data-entry-with-active: #000000; // checkbox tick icon or radio handle
 $modes-color-interactive-data-entry-with-active-alt: #FFFFFF;
@@ -83,10 +91,14 @@ $modes-color-interactive-data-entry-default-alt: #f3f3f3; // Input footer bgs (e
 $modes-color-interactive-data-entry-content: #000000f2; // Input Text
 $modes-color-interactive-data-entry-content-alt: #0000008c; // Hint text, placeholder text, character count etc
 $modes-color-interactive-data-entry-frozen-with-default: #698495; // Input borders.
-$modes-color-interactive-focus-with-default: #FFB500;
-$modes-color-interactive-focus-with-default-alt: #ffd27e;
 $modes-color-interactive-focus-default: #000000;
 $modes-color-interactive-focus-content: #000000;
+$modes-color-interactive-focus-with-default: #FFB500;
+$modes-color-interactive-focus-with-default-alt: #ffd27e;
+$modes-color-interactive-focus-inverse-default: #FFB500;
+$modes-color-interactive-focus-inverse-content: #FFFFFF;
+$modes-color-interactive-focus-inverse-with-default: #000000;
+$modes-color-interactive-focus-inverse-with-default-alt: #926916;
 $modes-color-interactive-inactive-default: #a6a6a6; // Disabled form secondary, tertiary and input borders borders.
 $modes-color-interactive-inactive-mask: #000000; // full screen takeover token for modal dimmer
 $modes-color-interactive-inactive-default-alt: #f3f3f3; // Disabled input and button backgrounds, button borders and input backgrounds.
@@ -97,6 +109,7 @@ $modes-color-interactive-inactive-icon-alt: #0000008c; // Readonly icon inside f
 $modes-color-interactive-inactive-frozen-default-alt: #e5eaed; // Disabled input and button backgrounds, button borders and input backgrounds.
 $modes-color-interactive-inactive-inverse-default: #4b4b4b; // Inversed disabled form secondary, tertiary and input borders borders.
 $modes-color-interactive-inactive-inverse-content: #ffffff6b; // Inversed disabled text inside buttons and form inputs.
+$modes-color-interactive-inactive-inverse-content-alt: #000000; //  Disabled labels inside buttons and Switch.
 $modes-color-interactive-monochrome-active: #000000;
 $modes-color-interactive-monochrome-active-alt: #00000029;
 $modes-color-interactive-monochrome-default: #000000e6;

package/scss/product/small/components/button.scss

@@ -21,8 +21,20 @@ $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;
@@ -63,9 +75,11 @@ $button-color-ai-label-active: $modes-color-interactive-monochrome-with-active-a
 $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;
@@ -205,17 +219,12 @@ $button-space-video-x-m: $global-space-micro-xs; // Left padding on play icon in
 $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-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;

package/scss/product/small/components/focus.scss

@@ -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/product/small/components/link.scss

@@ -19,10 +19,12 @@ $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-destructive-inverse-label-default: $modes-color-interactive-danger-inverse-default-alt; // .
 $link-color-subtle-label-default: $modes-color-interactive-monochrome-default;
 $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-inverse-label-default: $modes-color-interactive-monochrome-inverse-default;

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

@@ -58,6 +58,7 @@ $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

package/scss/product/small/dark.scss

@@ -69,10 +69,18 @@ $modes-color-interactive-danger-active: #f28486; // active button on dark
 $modes-color-interactive-danger-default: #E13E53;
 $modes-color-interactive-danger-default-alt: #e85b66; // for links in datatables 
 $modes-color-interactive-danger-hover: #eb646c;
-$modes-color-interactive-danger-hover-alt: #3f1a1c; // button hover on dark
+$modes-color-interactive-danger-hover-alt: #e13e5314; // button hover on dark
 $modes-color-interactive-danger-hover-alt2: #ec6a71; // for links in datatables
 $modes-color-interactive-danger-with-active: #000000;
 $modes-color-interactive-danger-with-default: #000000;
+$modes-color-interactive-danger-inverse-active: #882b34; // used on pill hover states
+$modes-color-interactive-danger-inverse-default: #CD384B;
+$modes-color-interactive-danger-inverse-default-alt: #b23342; // For links in datatables
+$modes-color-interactive-danger-inverse-hover: #aa323f; // used on solid-pill and primary-button hover states
+$modes-color-interactive-danger-inverse-hover-alt: #cd384b14; // used on secondary-button hover states
+$modes-color-interactive-danger-inverse-hover-alt2: #a3303d; // used on link hover state
+$modes-color-interactive-danger-inverse-with-active: #FFFFFF;
+$modes-color-interactive-danger-inverse-with-default: #FFFFFF;
 $modes-color-interactive-data-entry-default: #000000; // Input backgrounds.
 $modes-color-interactive-data-entry-with-active: #FFFFFF; // checkbox tick icon or radio handle
 $modes-color-interactive-data-entry-with-active-alt: #000000;
@@ -83,10 +91,14 @@ $modes-color-interactive-data-entry-default-alt: #0e0e0e; // Input footer bgs (e
 $modes-color-interactive-data-entry-content: #fffffff2; // Input Text
 $modes-color-interactive-data-entry-content-alt: #ffffff8c; // Hint text, placeholder text, character count etc
 $modes-color-interactive-data-entry-frozen-with-default: #777; // Input borders.
-$modes-color-interactive-focus-with-default: #000000;
+$modes-color-interactive-focus-default: #FFB500;
 $modes-color-interactive-focus-content: #FFFFFF;
+$modes-color-interactive-focus-with-default: #000000;
 $modes-color-interactive-focus-with-default-alt: #926916;
-$modes-color-interactive-focus-default: #FFB500;
+$modes-color-interactive-focus-inverse-default: #000000;
+$modes-color-interactive-focus-inverse-content: #000000;
+$modes-color-interactive-focus-inverse-with-default: #FFB500;
+$modes-color-interactive-focus-inverse-with-default-alt: #ffd27e;
 $modes-color-interactive-inactive-default: #4b4b4b; // disabled buttons on dark
 $modes-color-interactive-inactive-mask: #FFFFFF; // full screen takeover token for modal dimmer
 $modes-color-interactive-inactive-default-alt: #0e0e0e; // Disabled button backgrounds and borders ON DARK
@@ -97,6 +109,7 @@ $modes-color-interactive-inactive-icon-alt: #ffffff8c; // Readonly icon inside f
 $modes-color-interactive-inactive-frozen-default-alt: #0e0e0e; // Disabled input and button backgrounds, button borders and input backgrounds.
 $modes-color-interactive-inactive-inverse-default: #a6a6a6; // Inversed disabled form secondary, tertiary and input borders borders.
 $modes-color-interactive-inactive-inverse-content: #0000006b; // Inversed disabled text inside buttons and form inputs.
+$modes-color-interactive-inactive-inverse-content-alt: #FFFFFF; //  Disabled labels inside buttons and Switch.
 $modes-color-interactive-monochrome-active: #FFFFFF;
 $modes-color-interactive-monochrome-active-alt: #ffffff29;
 $modes-color-interactive-monochrome-default: #ffffffe6;

package/scss/product/small/light.scss

@@ -69,10 +69,18 @@ $modes-color-interactive-danger-active: #882b34; // used on pill hover states
 $modes-color-interactive-danger-default: #CD384B;
 $modes-color-interactive-danger-default-alt: #b23342; // For links in datatables
 $modes-color-interactive-danger-hover: #aa323f; // used on solid-pill and primary-button hover states
-$modes-color-interactive-danger-hover-alt: #f9d1cf; // used on secondary-button hover states
+$modes-color-interactive-danger-hover-alt: #cd384b14; // used on secondary-button hover states
 $modes-color-interactive-danger-hover-alt2: #a3303d; // used on link hover state
 $modes-color-interactive-danger-with-active: #FFFFFF;
 $modes-color-interactive-danger-with-default: #FFFFFF;
+$modes-color-interactive-danger-inverse-active: #f28486; // used on pill hover states
+$modes-color-interactive-danger-inverse-default: #E13E53;
+$modes-color-interactive-danger-inverse-default-alt: #e85b66; // For links in datatables
+$modes-color-interactive-danger-inverse-hover: #eb646c; // used on solid-pill and primary-button hover states
+$modes-color-interactive-danger-inverse-hover-alt: #e13e5314; // used on secondary-button hover states
+$modes-color-interactive-danger-inverse-hover-alt2: #ec6a71; // used on link hover state
+$modes-color-interactive-danger-inverse-with-active: #000000;
+$modes-color-interactive-danger-inverse-with-default: #000000;
 $modes-color-interactive-data-entry-default: #FFFFFF; // Input backgrounds.
 $modes-color-interactive-data-entry-with-active: #000000; // checkbox tick icon or radio handle
 $modes-color-interactive-data-entry-with-active-alt: #FFFFFF;
@@ -83,10 +91,14 @@ $modes-color-interactive-data-entry-default-alt: #f3f3f3; // Input footer bgs (e
 $modes-color-interactive-data-entry-content: #000000f2; // Input Text
 $modes-color-interactive-data-entry-content-alt: #0000008c; // Hint text, placeholder text, character count etc
 $modes-color-interactive-data-entry-frozen-with-default: #698495; // Input borders.
-$modes-color-interactive-focus-with-default: #FFB500;
-$modes-color-interactive-focus-with-default-alt: #ffd27e;
 $modes-color-interactive-focus-default: #000000;
 $modes-color-interactive-focus-content: #000000;
+$modes-color-interactive-focus-with-default: #FFB500;
+$modes-color-interactive-focus-with-default-alt: #ffd27e;
+$modes-color-interactive-focus-inverse-default: #FFB500;
+$modes-color-interactive-focus-inverse-content: #FFFFFF;
+$modes-color-interactive-focus-inverse-with-default: #000000;
+$modes-color-interactive-focus-inverse-with-default-alt: #926916;
 $modes-color-interactive-inactive-default: #a6a6a6; // Disabled form secondary, tertiary and input borders borders.
 $modes-color-interactive-inactive-mask: #000000; // full screen takeover token for modal dimmer
 $modes-color-interactive-inactive-default-alt: #f3f3f3; // Disabled input and button backgrounds, button borders and input backgrounds.
@@ -97,6 +109,7 @@ $modes-color-interactive-inactive-icon-alt: #0000008c; // Readonly icon inside f
 $modes-color-interactive-inactive-frozen-default-alt: #e5eaed; // Disabled input and button backgrounds, button borders and input backgrounds.
 $modes-color-interactive-inactive-inverse-default: #4b4b4b; // Inversed disabled form secondary, tertiary and input borders borders.
 $modes-color-interactive-inactive-inverse-content: #ffffff6b; // Inversed disabled text inside buttons and form inputs.
+$modes-color-interactive-inactive-inverse-content-alt: #000000; //  Disabled labels inside buttons and Switch.
 $modes-color-interactive-monochrome-active: #000000;
 $modes-color-interactive-monochrome-active-alt: #00000029;
 $modes-color-interactive-monochrome-default: #000000e6;