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

@sage/design-tokens 13.1.0 → 13.2.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 (574) hide show

package/css/product/all.css CHANGED Viewed

@@ -216,10 +216,18 @@
   --modes-color-interactive-danger-default-light: #CD384B;
   --modes-color-interactive-danger-default-alt-light: #b23342; /* For links in datatables */
   --modes-color-interactive-danger-hover-light: #aa323f; /* used on solid-pill and primary-button hover states */
-  --modes-color-interactive-danger-hover-alt-light: #f9d1cf; /* used on secondary-button hover states */
+  --modes-color-interactive-danger-hover-alt-light: #cd384b14; /* used on secondary-button hover states */
   --modes-color-interactive-danger-hover-alt2-light: #a3303d; /* used on link hover state */
   --modes-color-interactive-danger-with-active-light: #FFFFFF;
   --modes-color-interactive-danger-with-default-light: #FFFFFF;
+  --modes-color-interactive-danger-inverse-active-light: #f28486; /* used on pill hover states */
+  --modes-color-interactive-danger-inverse-default-light: #E13E53;
+  --modes-color-interactive-danger-inverse-default-alt-light: #e85b66; /* For links in datatables */
+  --modes-color-interactive-danger-inverse-hover-light: #eb646c; /* used on solid-pill and primary-button hover states */
+  --modes-color-interactive-danger-inverse-hover-alt-light: #e13e5314; /* used on secondary-button hover states */
+  --modes-color-interactive-danger-inverse-hover-alt2-light: #ec6a71; /* used on link hover state */
+  --modes-color-interactive-danger-inverse-with-active-light: #000000;
+  --modes-color-interactive-danger-inverse-with-default-light: #000000;
   --modes-color-interactive-data-entry-default-light: #FFFFFF; /* Input backgrounds. */
   --modes-color-interactive-data-entry-with-active-light: #000000; /* checkbox tick icon or radio handle */
   --modes-color-interactive-data-entry-with-active-alt-light: #FFFFFF;
@@ -230,10 +238,14 @@
   --modes-color-interactive-data-entry-content-light: #000000f2; /* Input Text */
   --modes-color-interactive-data-entry-content-alt-light: #0000008c; /* Hint text, placeholder text, character count etc */
   --modes-color-interactive-data-entry-frozen-with-default-light: #698495; /* Input borders. */
-  --modes-color-interactive-focus-with-default-light: #FFB500;
-  --modes-color-interactive-focus-with-default-alt-light: #ffd27e;
   --modes-color-interactive-focus-default-light: #000000;
   --modes-color-interactive-focus-content-light: #000000;
+  --modes-color-interactive-focus-with-default-light: #FFB500;
+  --modes-color-interactive-focus-with-default-alt-light: #ffd27e;
+  --modes-color-interactive-focus-inverse-default-light: #FFB500;
+  --modes-color-interactive-focus-inverse-content-light: #FFFFFF;
+  --modes-color-interactive-focus-inverse-with-default-light: #000000;
+  --modes-color-interactive-focus-inverse-with-default-alt-light: #926916;
   --modes-color-interactive-inactive-default-light: #a6a6a6; /* Disabled form secondary, tertiary and input borders borders. */
   --modes-color-interactive-inactive-mask-light: #000000; /* full screen takeover token for modal dimmer */
   --modes-color-interactive-inactive-default-alt-light: #f3f3f3; /* Disabled input and button backgrounds, button borders and input backgrounds. */
@@ -244,6 +256,7 @@
   --modes-color-interactive-inactive-frozen-default-alt-light: #e5eaed; /* Disabled input and button backgrounds, button borders and input backgrounds. */
   --modes-color-interactive-inactive-inverse-default-light: #4b4b4b; /* Inversed disabled form secondary, tertiary and input borders borders. */
   --modes-color-interactive-inactive-inverse-content-light: #ffffff6b; /* Inversed disabled text inside buttons and form inputs. */
+  --modes-color-interactive-inactive-inverse-content-alt-light: #000000; /*  Disabled labels inside buttons and Switch. */
   --modes-color-interactive-monochrome-active-light: #000000;
   --modes-color-interactive-monochrome-active-alt-light: #00000029;
   --modes-color-interactive-monochrome-default-light: #000000e6;
@@ -475,10 +488,18 @@
   --modes-color-interactive-danger-default-dark: #E13E53;
   --modes-color-interactive-danger-default-alt-dark: #e85b66; /* for links in datatables  */
   --modes-color-interactive-danger-hover-dark: #eb646c;
-  --modes-color-interactive-danger-hover-alt-dark: #3f1a1c; /* button hover on dark */
+  --modes-color-interactive-danger-hover-alt-dark: #e13e5314; /* button hover on dark */
   --modes-color-interactive-danger-hover-alt2-dark: #ec6a71; /* for links in datatables */
   --modes-color-interactive-danger-with-active-dark: #000000;
   --modes-color-interactive-danger-with-default-dark: #000000;
+  --modes-color-interactive-danger-inverse-active-dark: #882b34; /* used on pill hover states */
+  --modes-color-interactive-danger-inverse-default-dark: #CD384B;
+  --modes-color-interactive-danger-inverse-default-alt-dark: #b23342; /* For links in datatables */
+  --modes-color-interactive-danger-inverse-hover-dark: #aa323f; /* used on solid-pill and primary-button hover states */
+  --modes-color-interactive-danger-inverse-hover-alt-dark: #cd384b14; /* used on secondary-button hover states */
+  --modes-color-interactive-danger-inverse-hover-alt2-dark: #a3303d; /* used on link hover state */
+  --modes-color-interactive-danger-inverse-with-active-dark: #FFFFFF;
+  --modes-color-interactive-danger-inverse-with-default-dark: #FFFFFF;
   --modes-color-interactive-data-entry-default-dark: #000000; /* Input backgrounds. */
   --modes-color-interactive-data-entry-with-active-dark: #FFFFFF; /* checkbox tick icon or radio handle */
   --modes-color-interactive-data-entry-with-active-alt-dark: #000000;
@@ -489,10 +510,14 @@
   --modes-color-interactive-data-entry-content-dark: #fffffff2; /* Input Text */
   --modes-color-interactive-data-entry-content-alt-dark: #ffffff8c; /* Hint text, placeholder text, character count etc */
   --modes-color-interactive-data-entry-frozen-with-default-dark: #777; /* Input borders. */
-  --modes-color-interactive-focus-with-default-dark: #000000;
+  --modes-color-interactive-focus-default-dark: #FFB500;
   --modes-color-interactive-focus-content-dark: #FFFFFF;
+  --modes-color-interactive-focus-with-default-dark: #000000;
   --modes-color-interactive-focus-with-default-alt-dark: #926916;
-  --modes-color-interactive-focus-default-dark: #FFB500;
+  --modes-color-interactive-focus-inverse-default-dark: #000000;
+  --modes-color-interactive-focus-inverse-content-dark: #000000;
+  --modes-color-interactive-focus-inverse-with-default-dark: #FFB500;
+  --modes-color-interactive-focus-inverse-with-default-alt-dark: #ffd27e;
   --modes-color-interactive-inactive-default-dark: #4b4b4b; /* disabled buttons on dark */
   --modes-color-interactive-inactive-mask-dark: #FFFFFF; /* full screen takeover token for modal dimmer */
   --modes-color-interactive-inactive-default-alt-dark: #0e0e0e; /* Disabled button backgrounds and borders ON DARK */
@@ -503,6 +528,7 @@
   --modes-color-interactive-inactive-frozen-default-alt-dark: #0e0e0e; /* Disabled input and button backgrounds, button borders and input backgrounds. */
   --modes-color-interactive-inactive-inverse-default-dark: #a6a6a6; /* Inversed disabled form secondary, tertiary and input borders borders. */
   --modes-color-interactive-inactive-inverse-content-dark: #0000006b; /* Inversed disabled text inside buttons and form inputs. */
+  --modes-color-interactive-inactive-inverse-content-alt-dark: #FFFFFF; /*  Disabled labels inside buttons and Switch. */
   --modes-color-interactive-monochrome-active-dark: #FFFFFF;
   --modes-color-interactive-monochrome-active-alt-dark: #ffffff29;
   --modes-color-interactive-monochrome-default-dark: #ffffffe6;
@@ -705,8 +731,20 @@
   --button-color-ai-border-enabled: light-dark(var(--modes-color-interactive-ai-default-light), var(--modes-color-interactive-ai-default-dark));
   --button-color-ai-border-hover: light-dark(var(--modes-color-interactive-ai-default-light), var(--modes-color-interactive-ai-default-dark));
   --button-color-destructive-primary-bg-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
+  --button-color-destructive-primary-label-enabled: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
+  --button-color-destructive-primary-label-hover: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
   --button-color-destructive-secondary-border-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
   --button-color-destructive-secondary-label-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
+  --button-color-typical-primary-bg-default: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark)); /* For spacer in Split button */
+  --button-color-typical-primary-label-active: light-dark(var(--modes-color-interactive-primary-with-active-light), var(--modes-color-interactive-primary-with-active-dark));
+  --button-color-typical-primary-label-enabled: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
+  --button-color-typical-primary-label-hover: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
+  --button-color-typical-primary-inverse-bg-default: light-dark(var(--modes-color-interactive-primary-inverse-with-default-light), var(--modes-color-interactive-primary-inverse-with-default-dark)); /* For spacer in Split button */
+  --button-color-typical-primary-inverse-bg-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-default-light), var(--modes-color-interactive-inactive-inverse-default-dark));
+  --button-color-typical-primary-inverse-label-active: light-dark(var(--modes-color-interactive-primary-inverse-with-active-light), var(--modes-color-interactive-primary-inverse-with-active-dark));
+  --button-color-typical-primary-inverse-label-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-content-alt-light), var(--modes-color-interactive-inactive-inverse-content-alt-dark));
+  --button-color-typical-primary-inverse-label-enabled: light-dark(var(--modes-color-interactive-primary-inverse-with-default-light), var(--modes-color-interactive-primary-inverse-with-default-dark));
+  --button-color-typical-primary-inverse-label-hover: light-dark(var(--modes-color-interactive-primary-inverse-with-default-light), var(--modes-color-interactive-primary-inverse-with-default-dark));
   --button-color-typical-secondary-inverse-border-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-default-light), var(--modes-color-interactive-inactive-inverse-default-dark));
   --button-color-typical-secondary-inverse-label-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-content-light), var(--modes-color-interactive-inactive-inverse-content-dark));
   --button-color-typical-tertiary-inverse-border-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-default-light), var(--modes-color-interactive-inactive-inverse-default-dark));
@@ -730,9 +768,11 @@
   --button-color-ai-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-alt-light), var(--modes-color-interactive-monochrome-with-active-alt-dark));
   --button-color-ai-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
   --button-color-destructive-primary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
+  --button-color-destructive-secondary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-alt-light), var(--modes-color-interactive-danger-hover-alt-dark));
   --button-color-destructive-secondary-border-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
   --button-color-destructive-secondary-label-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
   --button-color-typical-primary-bg-enabled: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
+  --button-color-typical-primary-inverse-bg-enabled: light-dark(var(--modes-color-interactive-primary-inverse-default-light), var(--modes-color-interactive-primary-inverse-default-dark));
   --button-color-typical-secondary-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-alt-light), var(--modes-color-interactive-monochrome-with-active-alt-dark));
   --button-color-typical-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
   --button-color-typical-tertiary-bg-enabled: var(--button-color-none);
@@ -866,17 +906,12 @@
   --button-color-ai-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
   --button-color-ai-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
   --button-color-destructive-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
-  --button-color-destructive-primary-label-enabled: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
-  --button-color-destructive-primary-label-hover: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
-  --button-color-destructive-secondary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-alt-light), var(--modes-color-interactive-danger-hover-alt-dark));
   --button-color-destructive-secondary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
   --button-color-typical-primary-bg-active: light-dark(var(--modes-color-interactive-primary-active-light), var(--modes-color-interactive-primary-active-dark));
-  --button-color-typical-primary-bg-default: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark)); /* For spacer in Split button */
   --button-color-typical-primary-bg-hover: light-dark(var(--modes-color-interactive-primary-hover-light), var(--modes-color-interactive-primary-hover-dark));
-  --button-color-typical-primary-label-active: light-dark(var(--modes-color-interactive-primary-with-active-light), var(--modes-color-interactive-primary-with-active-dark));
   --button-color-typical-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
-  --button-color-typical-primary-label-enabled: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
-  --button-color-typical-primary-label-hover: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
+  --button-color-typical-primary-inverse-bg-active: light-dark(var(--modes-color-interactive-primary-inverse-active-light), var(--modes-color-interactive-primary-inverse-active-dark));
+  --button-color-typical-primary-inverse-bg-hover: light-dark(var(--modes-color-interactive-primary-inverse-hover-light), var(--modes-color-interactive-primary-inverse-hover-dark));
   --button-color-typical-secondary-bg-active: light-dark(var(--modes-color-interactive-primary-active-alt-light), var(--modes-color-interactive-primary-active-alt-dark));
   --button-color-typical-secondary-border-active: light-dark(var(--modes-color-interactive-primary-active-light), var(--modes-color-interactive-primary-active-dark));
   --button-color-typical-secondary-border-enabled: light-dark(var(--modes-color-interactive-primary-default-alt-light), var(--modes-color-interactive-primary-default-alt-dark));
@@ -1295,6 +1330,10 @@
   --focus-color-borderalt: light-dark(var(--modes-color-interactive-focus-default-light), var(--modes-color-interactive-focus-default-dark));
   --focus-color-border: light-dark(var(--modes-color-interactive-focus-with-default-light), var(--modes-color-interactive-focus-with-default-dark));
   --focus-color-label: light-dark(var(--modes-color-interactive-focus-content-light), var(--modes-color-interactive-focus-content-dark));
+  --focus-color-inverse-bg: light-dark(var(--modes-color-interactive-focus-inverse-with-default-alt-light), var(--modes-color-interactive-focus-inverse-with-default-alt-dark));
+  --focus-color-inverse-borderalt: light-dark(var(--modes-color-interactive-focus-inverse-default-light), var(--modes-color-interactive-focus-inverse-default-dark));
+  --focus-color-inverse-border: light-dark(var(--modes-color-interactive-focus-inverse-with-default-light), var(--modes-color-interactive-focus-inverse-with-default-dark));
+  --focus-color-inverse-label: light-dark(var(--modes-color-interactive-focus-inverse-content-light), var(--modes-color-interactive-focus-inverse-content-dark));
   --focus-size-underline: var(--global-size-micro-xs); /* focus black underline on links and skiplink */
   --focus-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary focus (dropdown item) */
   --focus-borderwidth-inner: var(--global-borderwidth-s); /* Focus border (inner) */
@@ -1598,10 +1637,12 @@
   --link-typography-heading-m: var(--global-typography-component-underlined-firm-m);
   --link-typography-heading-l: var(--global-typography-component-underlined-firm-l);
   --link-color-destructive-label-default: light-dark(var(--modes-color-interactive-danger-default-alt-light), var(--modes-color-interactive-danger-default-alt-dark)); /* . */
+  --link-color-destructive-inverse-label-default: light-dark(var(--modes-color-interactive-danger-inverse-default-alt-light), var(--modes-color-interactive-danger-inverse-default-alt-dark)); /* . */
   --link-color-subtle-label-hover: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
   --link-color-subtle-inverse-label-hover: light-dark(var(--modes-color-interactive-monochrome-inverse-active-light), var(--modes-color-interactive-monochrome-inverse-active-dark));
   --link-boxshadow-skiplink: var(--global-boxshadow-container-near);
   --link-color-destructive-label-hover: light-dark(var(--modes-color-interactive-danger-hover-alt2-light), var(--modes-color-interactive-danger-hover-alt2-dark));
+  --link-color-destructive-inverse-label-hover: light-dark(var(--modes-color-interactive-danger-inverse-hover-alt2-light), var(--modes-color-interactive-danger-inverse-hover-alt2-dark));
   --link-color-typical-label-default: light-dark(var(--modes-color-interactive-primary-default-alt3-light), var(--modes-color-interactive-primary-default-alt3-dark));
   --link-color-typical-inverse-label-default: light-dark(var(--modes-color-interactive-primary-inverse-default-alt3-light), var(--modes-color-interactive-primary-inverse-default-alt3-dark));
   --link-color-subtle-label-default: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
@@ -2303,6 +2344,7 @@
   --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border */
   --table-borderwidth-thick: var(--global-borderwidth-s); /* header border for subtle */
   --table-space-none: var(--global-space-none);
+  --table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
   --table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */
   --table-space-row-x-s: var(--global-space-macro-xs); /* Left and right padding inside S row cells */
   --table-space-row-x-m: var(--global-space-macro-xs); /* Left and right padding inside M row cells */

package/css/product/large/components/button.css CHANGED Viewed

@@ -19,8 +19,20 @@
   --button-color-ai-border-enabled: var(--modes-color-interactive-ai-default);
   --button-color-ai-border-hover: var(--modes-color-interactive-ai-default);
   --button-color-destructive-primary-bg-enabled: var(--modes-color-interactive-danger-default);
+  --button-color-destructive-primary-label-enabled: var(--modes-color-interactive-danger-with-default);
+  --button-color-destructive-primary-label-hover: var(--modes-color-interactive-danger-with-default);
   --button-color-destructive-secondary-border-enabled: var(--modes-color-interactive-danger-default);
   --button-color-destructive-secondary-label-enabled: var(--modes-color-interactive-danger-default);
+  --button-color-typical-primary-bg-default: var(--modes-color-interactive-primary-with-default); /* For spacer in Split button */
+  --button-color-typical-primary-label-active: var(--modes-color-interactive-primary-with-active);
+  --button-color-typical-primary-label-enabled: var(--modes-color-interactive-primary-with-default);
+  --button-color-typical-primary-label-hover: var(--modes-color-interactive-primary-with-default);
+  --button-color-typical-primary-inverse-bg-default: var(--modes-color-interactive-primary-inverse-with-default); /* For spacer in Split button */
+  --button-color-typical-primary-inverse-bg-disabled: var(--modes-color-interactive-inactive-inverse-default);
+  --button-color-typical-primary-inverse-label-active: var(--modes-color-interactive-primary-inverse-with-active);
+  --button-color-typical-primary-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content-alt);
+  --button-color-typical-primary-inverse-label-enabled: var(--modes-color-interactive-primary-inverse-with-default);
+  --button-color-typical-primary-inverse-label-hover: var(--modes-color-interactive-primary-inverse-with-default);
   --button-color-typical-secondary-inverse-border-disabled: var(--modes-color-interactive-inactive-inverse-default);
   --button-color-typical-secondary-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content);
   --button-color-typical-tertiary-inverse-border-disabled: var(--modes-color-interactive-inactive-inverse-default);
@@ -59,9 +71,11 @@
   --button-color-ai-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
   --button-color-ai-label-hover: var(--modes-color-interactive-monochrome-with-hover);
   --button-color-destructive-primary-bg-hover: var(--modes-color-interactive-danger-hover);
+  --button-color-destructive-secondary-bg-hover: var(--modes-color-interactive-danger-hover-alt);
   --button-color-destructive-secondary-border-hover: var(--modes-color-interactive-danger-hover);
   --button-color-destructive-secondary-label-hover: var(--modes-color-interactive-danger-hover);
   --button-color-typical-primary-bg-enabled: var(--modes-color-interactive-primary-default);
+  --button-color-typical-primary-inverse-bg-enabled: var(--modes-color-interactive-primary-inverse-default);
   --button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
   --button-color-typical-secondary-label-hover: var(--modes-color-interactive-monochrome-with-hover);
   --button-color-typical-tertiary-bg-enabled: var(--button-color-none);
@@ -195,17 +209,12 @@
   --button-color-ai-label-disabled: var(--modes-color-interactive-inactive-content);
   --button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-default);
   --button-color-destructive-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
-  --button-color-destructive-primary-label-enabled: var(--modes-color-interactive-danger-with-default);
-  --button-color-destructive-primary-label-hover: var(--modes-color-interactive-danger-with-default);
-  --button-color-destructive-secondary-bg-hover: var(--modes-color-interactive-danger-hover-alt);
   --button-color-destructive-secondary-label-disabled: var(--modes-color-interactive-inactive-content);
   --button-color-typical-primary-bg-active: var(--modes-color-interactive-primary-active);
-  --button-color-typical-primary-bg-default: var(--modes-color-interactive-primary-with-default); /* For spacer in Split button */
   --button-color-typical-primary-bg-hover: var(--modes-color-interactive-primary-hover);
-  --button-color-typical-primary-label-active: var(--modes-color-interactive-primary-with-active);
   --button-color-typical-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
-  --button-color-typical-primary-label-enabled: var(--modes-color-interactive-primary-with-default);
-  --button-color-typical-primary-label-hover: var(--modes-color-interactive-primary-with-default);
+  --button-color-typical-primary-inverse-bg-active: var(--modes-color-interactive-primary-inverse-active);
+  --button-color-typical-primary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover);
   --button-color-typical-secondary-bg-active: var(--modes-color-interactive-primary-active-alt);
   --button-color-typical-secondary-border-active: var(--modes-color-interactive-primary-active);
   --button-color-typical-secondary-border-enabled: var(--modes-color-interactive-primary-default-alt);

package/css/product/large/components/focus.css CHANGED Viewed

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

package/css/product/large/components/link.css CHANGED Viewed

@@ -16,10 +16,12 @@
   --link-typography-adaptive-heading-m: var(--global-typography-adaptive-component-underlined-firm-m);
   --link-typography-adaptive-heading-l: var(--global-typography-adaptive-component-underlined-firm-l);
   --link-color-destructive-label-default: var(--modes-color-interactive-danger-default-alt); /* . */
+  --link-color-destructive-inverse-label-default: var(--modes-color-interactive-danger-inverse-default-alt); /* . */
   --link-color-subtle-label-hover: var(--modes-color-interactive-monochrome-active);
   --link-color-subtle-inverse-label-hover: var(--modes-color-interactive-monochrome-inverse-active);
   --link-boxshadow-skiplink: var(--global-boxshadow-container-near);
   --link-color-destructive-label-hover: var(--modes-color-interactive-danger-hover-alt2);
+  --link-color-destructive-inverse-label-hover: var(--modes-color-interactive-danger-inverse-hover-alt2);
   --link-color-typical-label-default: var(--modes-color-interactive-primary-default-alt3);
   --link-color-typical-inverse-label-default: var(--modes-color-interactive-primary-inverse-default-alt3);
   --link-color-subtle-label-default: var(--modes-color-interactive-monochrome-default);

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

@@ -56,6 +56,7 @@
   --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border */
   --table-borderwidth-thick: var(--global-borderwidth-s); /* header border for subtle */
   --table-space-none: var(--global-space-none);
+  --table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
   --table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */
   --table-space-row-x-s: var(--global-space-macro-xs); /* Left and right padding inside S row cells */
   --table-space-row-x-m: var(--global-space-macro-xs); /* Left and right padding inside M row cells */

package/css/product/large/dark.css CHANGED Viewed

@@ -67,10 +67,18 @@
   --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;
@@ -81,10 +89,14 @@
   --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 */
@@ -95,6 +107,7 @@
   --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/css/product/large/light.css CHANGED Viewed

@@ -67,10 +67,18 @@
   --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;
@@ -81,10 +89,14 @@
   --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. */
@@ -95,6 +107,7 @@
   --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/css/product/small/components/button.css CHANGED Viewed

@@ -19,8 +19,20 @@
   --button-color-ai-border-enabled: var(--modes-color-interactive-ai-default);
   --button-color-ai-border-hover: var(--modes-color-interactive-ai-default);
   --button-color-destructive-primary-bg-enabled: var(--modes-color-interactive-danger-default);
+  --button-color-destructive-primary-label-enabled: var(--modes-color-interactive-danger-with-default);
+  --button-color-destructive-primary-label-hover: var(--modes-color-interactive-danger-with-default);
   --button-color-destructive-secondary-border-enabled: var(--modes-color-interactive-danger-default);
   --button-color-destructive-secondary-label-enabled: var(--modes-color-interactive-danger-default);
+  --button-color-typical-primary-bg-default: var(--modes-color-interactive-primary-with-default); /* For spacer in Split button */
+  --button-color-typical-primary-label-active: var(--modes-color-interactive-primary-with-active);
+  --button-color-typical-primary-label-enabled: var(--modes-color-interactive-primary-with-default);
+  --button-color-typical-primary-label-hover: var(--modes-color-interactive-primary-with-default);
+  --button-color-typical-primary-inverse-bg-default: var(--modes-color-interactive-primary-inverse-with-default); /* For spacer in Split button */
+  --button-color-typical-primary-inverse-bg-disabled: var(--modes-color-interactive-inactive-inverse-default);
+  --button-color-typical-primary-inverse-label-active: var(--modes-color-interactive-primary-inverse-with-active);
+  --button-color-typical-primary-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content-alt);
+  --button-color-typical-primary-inverse-label-enabled: var(--modes-color-interactive-primary-inverse-with-default);
+  --button-color-typical-primary-inverse-label-hover: var(--modes-color-interactive-primary-inverse-with-default);
   --button-color-typical-secondary-inverse-border-disabled: var(--modes-color-interactive-inactive-inverse-default);
   --button-color-typical-secondary-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content);
   --button-color-typical-tertiary-inverse-border-disabled: var(--modes-color-interactive-inactive-inverse-default);
@@ -59,9 +71,11 @@
   --button-color-ai-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
   --button-color-ai-label-hover: var(--modes-color-interactive-monochrome-with-hover);
   --button-color-destructive-primary-bg-hover: var(--modes-color-interactive-danger-hover);
+  --button-color-destructive-secondary-bg-hover: var(--modes-color-interactive-danger-hover-alt);
   --button-color-destructive-secondary-border-hover: var(--modes-color-interactive-danger-hover);
   --button-color-destructive-secondary-label-hover: var(--modes-color-interactive-danger-hover);
   --button-color-typical-primary-bg-enabled: var(--modes-color-interactive-primary-default);
+  --button-color-typical-primary-inverse-bg-enabled: var(--modes-color-interactive-primary-inverse-default);
   --button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
   --button-color-typical-secondary-label-hover: var(--modes-color-interactive-monochrome-with-hover);
   --button-color-typical-tertiary-bg-enabled: var(--button-color-none);
@@ -195,17 +209,12 @@
   --button-color-ai-label-disabled: var(--modes-color-interactive-inactive-content);
   --button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-default);
   --button-color-destructive-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
-  --button-color-destructive-primary-label-enabled: var(--modes-color-interactive-danger-with-default);
-  --button-color-destructive-primary-label-hover: var(--modes-color-interactive-danger-with-default);
-  --button-color-destructive-secondary-bg-hover: var(--modes-color-interactive-danger-hover-alt);
   --button-color-destructive-secondary-label-disabled: var(--modes-color-interactive-inactive-content);
   --button-color-typical-primary-bg-active: var(--modes-color-interactive-primary-active);
-  --button-color-typical-primary-bg-default: var(--modes-color-interactive-primary-with-default); /* For spacer in Split button */
   --button-color-typical-primary-bg-hover: var(--modes-color-interactive-primary-hover);
-  --button-color-typical-primary-label-active: var(--modes-color-interactive-primary-with-active);
   --button-color-typical-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
-  --button-color-typical-primary-label-enabled: var(--modes-color-interactive-primary-with-default);
-  --button-color-typical-primary-label-hover: var(--modes-color-interactive-primary-with-default);
+  --button-color-typical-primary-inverse-bg-active: var(--modes-color-interactive-primary-inverse-active);
+  --button-color-typical-primary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover);
   --button-color-typical-secondary-bg-active: var(--modes-color-interactive-primary-active-alt);
   --button-color-typical-secondary-border-active: var(--modes-color-interactive-primary-active);
   --button-color-typical-secondary-border-enabled: var(--modes-color-interactive-primary-default-alt);

package/css/product/small/components/focus.css CHANGED Viewed

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

package/css/product/small/components/link.css CHANGED Viewed

@@ -16,10 +16,12 @@
   --link-typography-adaptive-heading-m: var(--global-typography-adaptive-component-underlined-firm-m);
   --link-typography-adaptive-heading-l: var(--global-typography-adaptive-component-underlined-firm-l);
   --link-color-destructive-label-default: var(--modes-color-interactive-danger-default-alt); /* . */
+  --link-color-destructive-inverse-label-default: var(--modes-color-interactive-danger-inverse-default-alt); /* . */
   --link-color-subtle-label-hover: var(--modes-color-interactive-monochrome-active);
   --link-color-subtle-inverse-label-hover: var(--modes-color-interactive-monochrome-inverse-active);
   --link-boxshadow-skiplink: var(--global-boxshadow-container-near);
   --link-color-destructive-label-hover: var(--modes-color-interactive-danger-hover-alt2);
+  --link-color-destructive-inverse-label-hover: var(--modes-color-interactive-danger-inverse-hover-alt2);
   --link-color-typical-label-default: var(--modes-color-interactive-primary-default-alt3);
   --link-color-typical-inverse-label-default: var(--modes-color-interactive-primary-inverse-default-alt3);
   --link-color-subtle-label-default: var(--modes-color-interactive-monochrome-default);

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

@@ -56,6 +56,7 @@
   --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border */
   --table-borderwidth-thick: var(--global-borderwidth-s); /* header border for subtle */
   --table-space-none: var(--global-space-none);
+  --table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
   --table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */
   --table-space-row-x-s: var(--global-space-macro-xs); /* Left and right padding inside S row cells */
   --table-space-row-x-m: var(--global-space-macro-xs); /* Left and right padding inside M row cells */

package/css/product/small/dark.css CHANGED Viewed

@@ -67,10 +67,18 @@
   --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;
@@ -81,10 +89,14 @@
   --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 */
@@ -95,6 +107,7 @@
   --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/css/product/small/light.css CHANGED Viewed

@@ -67,10 +67,18 @@
   --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;
@@ -81,10 +89,14 @@
   --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. */
@@ -95,6 +107,7 @@
   --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/ios/frozenproduct/large/dark/components/button.h CHANGED Viewed

@@ -146,7 +146,7 @@
 #define buttonColorDestructivePrimaryLabelDisabled #000000
 #define buttonColorDestructivePrimaryLabelEnabled #000000
 #define buttonColorDestructivePrimaryLabelHover #000000
-#define buttonColorDestructiveSecondaryBgHover #3f1a1c
+#define buttonColorDestructiveSecondaryBgHover #e13e5314
 #define buttonColorDestructiveSecondaryBorderDisabled #4b4b4b
 #define buttonColorDestructiveSecondaryBorderEnabled #E13E53
 #define buttonColorDestructiveSecondaryBorderHover #eb646c
@@ -162,6 +162,15 @@
 #define buttonColorTypicalPrimaryLabelDisabled #000000
 #define buttonColorTypicalPrimaryLabelEnabled #000000
 #define buttonColorTypicalPrimaryLabelHover #000000
+#define buttonColorTypicalPrimaryInverseBgActive #14571a
+#define buttonColorTypicalPrimaryInverseBgDefault #FFFFFF
+#define buttonColorTypicalPrimaryInverseBgDisabled #a6a6a6
+#define buttonColorTypicalPrimaryInverseBgEnabled #00811F
+#define buttonColorTypicalPrimaryInverseBgHover #0e6b1d
+#define buttonColorTypicalPrimaryInverseLabelActive #FFFFFF
+#define buttonColorTypicalPrimaryInverseLabelDisabled #FFFFFF
+#define buttonColorTypicalPrimaryInverseLabelEnabled #FFFFFF
+#define buttonColorTypicalPrimaryInverseLabelHover #FFFFFF
 #define buttonColorTypicalSecondaryBgActive #00d63952
 #define buttonColorTypicalSecondaryBgHover #00d63914
 #define buttonColorTypicalSecondaryBorderActive #81e57d

package/ios/frozenproduct/large/dark/components/focus.h CHANGED Viewed

@@ -13,6 +13,10 @@
 #define focusColorBorderalt #FFB500
 #define focusColorBorder #000000
 #define focusColorLabel #FFFFFF
+#define focusColorInverseBg #ffd27e
+#define focusColorInverseBorderalt #000000
+#define focusColorInverseBorder #FFB500
+#define focusColorInverseLabel #000000
 #define focusSizeUnderline 4
 #define focusBorderwidthSecondary 2
 #define focusBorderwidthInner 2

package/ios/frozenproduct/large/dark/components/link.h CHANGED Viewed

@@ -11,6 +11,8 @@
 #define linkColorDestructiveLabelDefault #e85b66
 #define linkColorDestructiveLabelHover #ec6a71
+#define linkColorDestructiveInverseLabelDefault #b23342
+#define linkColorDestructiveInverseLabelHover #a3303d
 #define linkColorTypicalLabelDefault #4cdc55
 #define linkColorTypicalLabelHover #73e372
 #define linkColorTypicalInverseLabelDefault #0c711d

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

@@ -44,6 +44,7 @@
 #define tableBorderwidthThin 1
 #define tableBorderwidthThick 2
 #define tableSpaceNone 0
+#define tableSpaceYg 4
 #define tableSpaceRowXXs 8
 #define tableSpaceRowXS 16
 #define tableSpaceRowXM 16