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/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/badge.css CHANGED Viewed

@@ -6,11 +6,16 @@
   --badge-radius-badge: var(--global-radius-circle); /* Badge */
   --badge-color-notification-bg-default: var(--modes-color-status-negative-default); /* Used in global nav notification badges */
   --badge-color-notification-bg-alt: var(--modes-color-status-info-default);
+  --badge-color-notification-inverse-border-default: var(--modes-color-generic-content-extreme);
+  --badge-color-notification-inverse-bg-default: var(--modes-color-status-negative-inverse-default); /* Used in global nav notification badges */
+  --badge-color-notification-inverse-bg-alt: var(--modes-color-status-info-inverse-default);
+  --badge-color-notification-inverse-label-default: var(--modes-color-generic-content-extreme);
+  --badge-color-notification-inverse-label-alt: var(--modes-color-generic-content-extreme);
   --badge-typography-responsive-m: var(--global-typography-responsive-component-notification-m);
   --badge-typography-adaptive-m: var(--global-typography-adaptive-component-notification-m);
-  --badge-color-notification-border-default: var(--modes-color-generic-fg-nought);
-  --badge-color-notification-label-default: var(--modes-color-generic-fg-nought);
-  --badge-color-notification-label-alt: var(--modes-color-generic-fg-nought);
+  --badge-color-notification-border-default: var(--modes-color-generic-content-nought);
+  --badge-color-notification-label-default: var(--modes-color-generic-content-nought);
+  --badge-color-notification-label-alt: var(--modes-color-generic-content-nought);
   --badge-size-micro-dot: var(--global-size-micro-m); /* Micro dot badge size */
   --badge-size-micro-numbered-min: var(--global-size-macro-xxs); /* Micro dot badge size with numbering */
   --badge-size-micro-numbered-max: var(--global-size-macro-s); /* Micro dot badge size max width */

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/logo.css CHANGED Viewed

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

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

@@ -67,9 +67,10 @@
   --progress-size-carouselselector-activedot-m: var(--global-size-macro-xxs);
   --progress-size-carouselselector-hitarea-m: var(--global-size-macro-xs);
   --progress-size-carouselslide-x-m: var(--global-size-macro-xl); /* Inactive slide */
-  --progress-size-ring-s: var(--global-size-macro-s); /* Loader ring */
-  --progress-size-ring-m: calc(var(--global-size-macro-s) * 2); /* Loader ring */
-  --progress-size-ring-l: calc(var(--global-size-macro-xs) * 4); /* Loader ring */
+  --progress-size-spinner-xs: calc(var(--global-size-macro-xs) - var(--global-size-micro-xs)); /* Loader ring for XS size loader spinners */
+  --progress-size-spinner-s: var(--global-size-macro-s); /* Loader ring */
+  --progress-size-spinner-m: calc(var(--global-size-macro-s) * 2); /* Loader ring */
+  --progress-size-spinner-l: calc(var(--global-size-macro-xs) * 4); /* Loader ring */
   --progress-size-stepflow-m: var(--global-size-micro-m); /* Step height */
   --progress-size-stepindicator-bar: var(--global-size-micro-xxs); /* step indicator bar */
   --progress-size-stepindicator-stepcircle-s: var(--global-size-macro-xs); /* M size step indicator */

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/badge.h CHANGED Viewed

@@ -14,6 +14,11 @@
 #define badgeColorNotificationBgAlt #007ED9
 #define badgeColorNotificationLabelDefault #000000
 #define badgeColorNotificationLabelAlt #000000
+#define badgeColorNotificationInverseBorderDefault #FFFFFF
+#define badgeColorNotificationInverseBgDefault #CD384B
+#define badgeColorNotificationInverseBgAlt #0060A7
+#define badgeColorNotificationInverseLabelDefault #FFFFFF
+#define badgeColorNotificationInverseLabelAlt #FFFFFF
 #define badgeSizeMicroDot 8
 #define badgeSizeMicroNumberedMin 16
 #define badgeSizeMicroNumberedMax 32

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/logo.h CHANGED Viewed

@@ -11,8 +11,6 @@
 #define logoColorSageBgDefault #00D639
 #define logoColorSageBgAlt #FFFFFF
-#define logoColorTrustBgDefault #009023
-#define logoColorTrustOutline #FFFFFF
 #define logoColorCopilotNoBgFgDefault #FFFFFF
 #define logoColorAiIdentifierBgStar #FFFFFF
 #define logoColorAiIdentifierBgDot #00D639

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

@@ -16,9 +16,10 @@
 #define progressSizeCarouselselectorActivedotM 16
 #define progressSizeCarouselselectorHitareaM 24
 #define progressSizeCarouselslideXM 56
-#define progressSizeRingS 32
-#define progressSizeRingM 64
-#define progressSizeRingL 96
+#define progressSizeSpinnerXs 20
+#define progressSizeSpinnerS 32
+#define progressSizeSpinnerM 64
+#define progressSizeSpinnerL 96
 #define progressSizeSkeletonResponsiveTextXs clamp(0.875rem, 0.875rem + 0vw, 0.875rem)
 #define progressSizeSkeletonResponsiveTextS clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)
 #define progressSizeSkeletonResponsiveTextM clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)

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

package/ios/frozenproduct/large/dark/mode.h CHANGED Viewed

@@ -73,10 +73,18 @@
 #define modesColorInteractiveDangerDefault #E13E53
 #define modesColorInteractiveDangerDefaultAlt #e85b66
 #define modesColorInteractiveDangerHover #eb646c
-#define modesColorInteractiveDangerHoverAlt #3f1a1c
+#define modesColorInteractiveDangerHoverAlt #e13e5314
 #define modesColorInteractiveDangerHoverAlt2 #ec6a71
 #define modesColorInteractiveDangerWithActive #000000
 #define modesColorInteractiveDangerWithDefault #000000
+#define modesColorInteractiveDangerInverseActive #882b34
+#define modesColorInteractiveDangerInverseDefault #CD384B
+#define modesColorInteractiveDangerInverseDefaultAlt #b23342
+#define modesColorInteractiveDangerInverseHover #aa323f
+#define modesColorInteractiveDangerInverseHoverAlt #cd384b14
+#define modesColorInteractiveDangerInverseHoverAlt2 #a3303d
+#define modesColorInteractiveDangerInverseWithActive #FFFFFF
+#define modesColorInteractiveDangerInverseWithDefault #FFFFFF
 #define modesColorInteractiveDataEntryDefault #000000
 #define modesColorInteractiveDataEntryWithActive #FFFFFF
 #define modesColorInteractiveDataEntryWithActiveAlt #000000
@@ -87,10 +95,14 @@
 #define modesColorInteractiveDataEntryContent #fffffff2
 #define modesColorInteractiveDataEntryContentAlt #ffffff8c
 #define modesColorInteractiveDataEntryFrozenWithDefault #777
-#define modesColorInteractiveFocusWithDefault #000000
+#define modesColorInteractiveFocusDefault #FFB500
 #define modesColorInteractiveFocusContent #FFFFFF
+#define modesColorInteractiveFocusWithDefault #000000
 #define modesColorInteractiveFocusWithDefaultAlt #926916
-#define modesColorInteractiveFocusDefault #FFB500
+#define modesColorInteractiveFocusInverseDefault #000000
+#define modesColorInteractiveFocusInverseContent #000000
+#define modesColorInteractiveFocusInverseWithDefault #FFB500
+#define modesColorInteractiveFocusInverseWithDefaultAlt #ffd27e
 #define modesColorInteractiveInactiveDefault #4b4b4b
 #define modesColorInteractiveInactiveMask #FFFFFF
 #define modesColorInteractiveInactiveDefaultAlt #0e0e0e
@@ -101,6 +113,7 @@
 #define modesColorInteractiveInactiveFrozenDefaultAlt #0e0e0e
 #define modesColorInteractiveInactiveInverseDefault #a6a6a6
 #define modesColorInteractiveInactiveInverseContent #0000006b
+#define modesColorInteractiveInactiveInverseContentAlt #FFFFFF
 #define modesColorInteractiveMonochromeActive #FFFFFF
 #define modesColorInteractiveMonochromeActiveAlt #ffffff29
 #define modesColorInteractiveMonochromeDefault #ffffffe6

package/ios/frozenproduct/large/light/components/badge.h CHANGED Viewed

@@ -14,6 +14,11 @@
 #define badgeColorNotificationBgAlt #0060A7
 #define badgeColorNotificationLabelDefault #FFFFFF
 #define badgeColorNotificationLabelAlt #FFFFFF
+#define badgeColorNotificationInverseBorderDefault #000000
+#define badgeColorNotificationInverseBgDefault #E13E53
+#define badgeColorNotificationInverseBgAlt #007ED9
+#define badgeColorNotificationInverseLabelDefault #000000
+#define badgeColorNotificationInverseLabelAlt #000000
 #define badgeSizeMicroDot 8
 #define badgeSizeMicroNumberedMin 16
 #define badgeSizeMicroNumberedMax 32

package/ios/frozenproduct/large/light/components/button.h CHANGED Viewed

@@ -146,7 +146,7 @@
 #define buttonColorDestructivePrimaryLabelDisabled #FFFFFF
 #define buttonColorDestructivePrimaryLabelEnabled #FFFFFF
 #define buttonColorDestructivePrimaryLabelHover #FFFFFF
-#define buttonColorDestructiveSecondaryBgHover #f9d1cf
+#define buttonColorDestructiveSecondaryBgHover #cd384b14
 #define buttonColorDestructiveSecondaryBorderDisabled #a6a6a6
 #define buttonColorDestructiveSecondaryBorderEnabled #CD384B
 #define buttonColorDestructiveSecondaryBorderHover #aa323f
@@ -162,6 +162,15 @@
 #define buttonColorTypicalPrimaryLabelDisabled #FFFFFF
 #define buttonColorTypicalPrimaryLabelEnabled #FFFFFF
 #define buttonColorTypicalPrimaryLabelHover #FFFFFF
+#define buttonColorTypicalPrimaryInverseBgActive #81e57d
+#define buttonColorTypicalPrimaryInverseBgDefault #000000
+#define buttonColorTypicalPrimaryInverseBgDisabled #4b4b4b
+#define buttonColorTypicalPrimaryInverseBgEnabled #00D639
+#define buttonColorTypicalPrimaryInverseBgHover #58de5d
+#define buttonColorTypicalPrimaryInverseLabelActive #000000
+#define buttonColorTypicalPrimaryInverseLabelDisabled #000000
+#define buttonColorTypicalPrimaryInverseLabelEnabled #000000
+#define buttonColorTypicalPrimaryInverseLabelHover #000000
 #define buttonColorTypicalSecondaryBgActive #00811f52
 #define buttonColorTypicalSecondaryBgHover #00811f14
 #define buttonColorTypicalSecondaryBorderActive #14571a

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

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

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

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

package/ios/frozenproduct/large/light/components/logo.h CHANGED Viewed

@@ -11,8 +11,6 @@
 #define logoColorSageBgDefault #000000
 #define logoColorSageBgAlt #000000
-#define logoColorTrustBgDefault #00811F
-#define logoColorTrustOutline #000000
 #define logoColorCopilotNoBgFgDefault #000000
 #define logoColorAiIdentifierBgStar #000000
 #define logoColorAiIdentifierBgDot #00D639

package/ios/frozenproduct/large/light/components/progress.h CHANGED Viewed

@@ -16,9 +16,10 @@
 #define progressSizeCarouselselectorActivedotM 16
 #define progressSizeCarouselselectorHitareaM 24
 #define progressSizeCarouselslideXM 56
-#define progressSizeRingS 32
-#define progressSizeRingM 64
-#define progressSizeRingL 96
+#define progressSizeSpinnerXs 20
+#define progressSizeSpinnerS 32
+#define progressSizeSpinnerM 64
+#define progressSizeSpinnerL 96
 #define progressSizeSkeletonResponsiveTextXs clamp(0.875rem, 0.875rem + 0vw, 0.875rem)
 #define progressSizeSkeletonResponsiveTextS clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)
 #define progressSizeSkeletonResponsiveTextM clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)

package/ios/frozenproduct/large/light/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

package/ios/frozenproduct/large/light/mode.h CHANGED Viewed

@@ -73,10 +73,18 @@
 #define modesColorInteractiveDangerDefault #CD384B
 #define modesColorInteractiveDangerDefaultAlt #b23342
 #define modesColorInteractiveDangerHover #aa323f
-#define modesColorInteractiveDangerHoverAlt #f9d1cf
+#define modesColorInteractiveDangerHoverAlt #cd384b14
 #define modesColorInteractiveDangerHoverAlt2 #a3303d
 #define modesColorInteractiveDangerWithActive #FFFFFF
 #define modesColorInteractiveDangerWithDefault #FFFFFF
+#define modesColorInteractiveDangerInverseActive #f28486
+#define modesColorInteractiveDangerInverseDefault #E13E53
+#define modesColorInteractiveDangerInverseDefaultAlt #e85b66
+#define modesColorInteractiveDangerInverseHover #eb646c
+#define modesColorInteractiveDangerInverseHoverAlt #e13e5314
+#define modesColorInteractiveDangerInverseHoverAlt2 #ec6a71
+#define modesColorInteractiveDangerInverseWithActive #000000
+#define modesColorInteractiveDangerInverseWithDefault #000000
 #define modesColorInteractiveDataEntryDefault #FFFFFF
 #define modesColorInteractiveDataEntryWithActive #000000
 #define modesColorInteractiveDataEntryWithActiveAlt #FFFFFF
@@ -87,10 +95,14 @@
 #define modesColorInteractiveDataEntryContent #000000f2
 #define modesColorInteractiveDataEntryContentAlt #0000008c
 #define modesColorInteractiveDataEntryFrozenWithDefault #698495
-#define modesColorInteractiveFocusWithDefault #FFB500
-#define modesColorInteractiveFocusWithDefaultAlt #ffd27e
 #define modesColorInteractiveFocusDefault #000000
 #define modesColorInteractiveFocusContent #000000
+#define modesColorInteractiveFocusWithDefault #FFB500
+#define modesColorInteractiveFocusWithDefaultAlt #ffd27e
+#define modesColorInteractiveFocusInverseDefault #FFB500
+#define modesColorInteractiveFocusInverseContent #FFFFFF
+#define modesColorInteractiveFocusInverseWithDefault #000000
+#define modesColorInteractiveFocusInverseWithDefaultAlt #926916
 #define modesColorInteractiveInactiveDefault #a6a6a6
 #define modesColorInteractiveInactiveMask #000000
 #define modesColorInteractiveInactiveDefaultAlt #f3f3f3
@@ -101,6 +113,7 @@
 #define modesColorInteractiveInactiveFrozenDefaultAlt #e5eaed
 #define modesColorInteractiveInactiveInverseDefault #4b4b4b
 #define modesColorInteractiveInactiveInverseContent #ffffff6b
+#define modesColorInteractiveInactiveInverseContentAlt #000000
 #define modesColorInteractiveMonochromeActive #000000
 #define modesColorInteractiveMonochromeActiveAlt #00000029
 #define modesColorInteractiveMonochromeDefault #000000e6

package/ios/frozenproduct/small/dark/components/badge.h CHANGED Viewed

@@ -14,6 +14,11 @@
 #define badgeColorNotificationBgAlt #007ED9
 #define badgeColorNotificationLabelDefault #000000
 #define badgeColorNotificationLabelAlt #000000
+#define badgeColorNotificationInverseBorderDefault #FFFFFF
+#define badgeColorNotificationInverseBgDefault #CD384B
+#define badgeColorNotificationInverseBgAlt #0060A7
+#define badgeColorNotificationInverseLabelDefault #FFFFFF
+#define badgeColorNotificationInverseLabelAlt #FFFFFF
 #define badgeSizeMicroDot 8
 #define badgeSizeMicroNumberedMin 16
 #define badgeSizeMicroNumberedMax 32