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

@sage/design-tokens 13.2.0 → 14.0.1

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 (1186) hide show

package/css/frozenproduct/large/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/frozenproduct/large/components/button.css CHANGED Viewed

@@ -216,12 +216,16 @@
   --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-bg-enabled: var(--modes-color-interactive-primary-default-alt3);
+  --button-color-typical-secondary-bg-hover: var(--modes-color-interactive-primary-hover-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);
   --button-color-typical-secondary-border-hover: var(--modes-color-interactive-primary-hover);
   --button-color-typical-secondary-label-disabled: var(--modes-color-interactive-inactive-content);
   --button-color-typical-secondary-label-enabled: var(--modes-color-interactive-monochrome-default);
   --button-color-typical-secondary-inverse-bg-active: var(--modes-color-interactive-primary-inverse-active-alt);
+  --button-color-typical-secondary-inverse-bg-enabled: var(--modes-color-interactive-primary-inverse-default-alt3);
+  --button-color-typical-secondary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover-alt);
   --button-color-typical-secondary-inverse-border-active: var(--modes-color-interactive-primary-inverse-active);
   --button-color-typical-secondary-inverse-border-enabled: var(--modes-color-interactive-primary-inverse-default-alt);
   --button-color-typical-secondary-inverse-border-hover: var(--modes-color-interactive-primary-inverse-hover);
@@ -229,14 +233,16 @@
   --button-color-typical-secondary-inverse-label-enabled: var(--modes-color-interactive-monochrome-inverse-default);
   --button-color-typical-secondary-inverse-label-hover: var(--modes-color-interactive-monochrome-inverse-with-hover);
   --button-color-typical-tertiary-bg-active: var(--modes-color-interactive-primary-active-alt);
+  --button-color-typical-tertiary-bg-hover: var(--modes-color-interactive-primary-hover-alt);
   --button-color-typical-tertiary-border-active: var(--modes-color-interactive-primary-active);
-  --button-color-typical-tertiary-border-enabled: var(--modes-color-interactive-primary-default-alt2);
+  --button-color-typical-tertiary-border-enabled: var(--modes-color-interactive-primary-default-alt);
   --button-color-typical-tertiary-border-hover: var(--modes-color-interactive-primary-hover);
   --button-color-typical-tertiary-label-disabled: var(--modes-color-interactive-inactive-content);
   --button-color-typical-tertiary-label-enabled: var(--modes-color-interactive-monochrome-default);
   --button-color-typical-tertiary-inverse-bg-active: var(--modes-color-interactive-primary-inverse-active-alt);
+  --button-color-typical-tertiary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover-alt);
   --button-color-typical-tertiary-inverse-border-active: var(--modes-color-interactive-primary-inverse-active);
-  --button-color-typical-tertiary-inverse-border-enabled: var(--modes-color-interactive-primary-inverse-default-alt2);
+  --button-color-typical-tertiary-inverse-border-enabled: var(--modes-color-interactive-primary-inverse-default-alt);
   --button-color-typical-tertiary-inverse-border-hover: var(--modes-color-interactive-primary-inverse-hover);
   --button-color-typical-tertiary-inverse-label-active: var(--modes-color-interactive-monochrome-inverse-with-active-alt);
   --button-color-typical-tertiary-inverse-label-enabled: var(--modes-color-interactive-monochrome-inverse-default);
@@ -295,12 +301,8 @@
   --button-color-destructive-primary-bg-disabled: var(--modes-color-interactive-inactive-default);
   --button-color-destructive-secondary-border-disabled: var(--modes-color-interactive-inactive-default);
   --button-color-typical-primary-bg-disabled: var(--modes-color-interactive-inactive-default);
-  --button-color-typical-secondary-bg-hover: var(--modes-color-interactive-primary-hover-alt);
   --button-color-typical-secondary-border-disabled: var(--modes-color-interactive-inactive-default);
-  --button-color-typical-secondary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover-alt);
-  --button-color-typical-tertiary-bg-hover: var(--modes-color-interactive-primary-hover-alt);
   --button-color-typical-tertiary-border-disabled: var(--modes-color-interactive-inactive-default);
-  --button-color-typical-tertiary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover-alt);
   --button-color-typical-subtle-bg-active: var(--modes-color-interactive-monochrome-active-alt);
   --button-color-typical-subtle-inverse-bg-active: var(--modes-color-interactive-monochrome-inverse-active-alt);
   --button-color-typical-toggle-bg-active-disabled: var(--modes-color-interactive-inactive-default);

package/css/frozenproduct/large/components/container.css CHANGED Viewed

@@ -4,12 +4,12 @@
 :root {
   --container-size-carousel-mediaslide-minheight: 300; /* max height for media visual */
+  --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
   --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
   --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
   --container-radius-none: var(--global-radius-none); /* Card select (inner adjacent corners), Subscription tile footer top corners */
   --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
   --container-radius-blockquote-bar: var(--global-radius-circle); /* radius for blockquote bar */
-  --container-opacity-carousel-hidden: var(--modes-color-modifiers-input-disabled-fg); /* opacity applied to next and previous carousel slides */
   --container-color-ai-dialog-borderhorizontal: var(--modes-color-generic-fg-ai-default); /* top border for AI dialog component */
   --container-color-ai-nudge-border-ai-horizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI nudge message component */
   --container-color-ai-nudge-border-ai-vertical: var(--modes-color-status-ai-default-vertical); /* left and right border for AI nudge message component */
@@ -74,6 +74,7 @@
   --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
   --container-color-interactive-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
   --container-color-interactive-border-alt: var(--modes-color-generic-fg-delicate); /* Link preview.  */
+  --container-color-interactive-borderalt-hover: var(--modes-color-interactive-monochrome-default); /* For hover border on Link preview. */
   --container-color-interactive-border-inactive: var(--modes-color-generic-fg-soft);
   --container-color-interactive-border-enabled: var(--modes-color-generic-fg-moderate);
   --container-color-interactive-icon-enabled: var(--modes-color-interactive-monochrome-default); /* Enabled chevron for any accordion. */
@@ -285,7 +286,6 @@
   --container-borderwidth-tileselect-selected: var(--global-borderwidth-s); /* Tile select (selected tile) */
   --container-borderwidth-tileselect-unavailable: var(--global-borderwidth-xs); /* Subscription tile (unavailable product) */
   --container-borderwidth-tileselect-enabled: var(--global-borderwidth-xs); /* Tile select (enabled tile) */
-  --container-color-interactive-borderalt-hover: var(--container-color-interactive-border-alt); /* For hover border on Link preview. */
   --container-size-drawer-minwidth: var(--container-size-responsive-xl); /* min-width for drawer component */
   --container-size-drawer-maxwidth: var(--container-size-responsive-xxxxl); /* max-width for drawer component */
 }

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

@@ -22,8 +22,8 @@
   --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-typical-label-default: var(--modes-color-interactive-primary-default-alt2);
+  --link-color-typical-inverse-label-default: var(--modes-color-interactive-primary-inverse-default-alt2);
   --link-color-subtle-label-default: var(--modes-color-interactive-monochrome-default);
   --link-color-subtle-inverse-label-default: var(--modes-color-interactive-monochrome-inverse-default);
   --link-size-skiplink-m: var(--global-size-macro-m);

package/css/frozenproduct/large/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/frozenproduct/large/components/progress.css CHANGED Viewed

@@ -67,9 +67,11 @@
   --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-xxs: var(--global-size-macro-xxs); /* Loader ring for XXS size loader spinners */
+  --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/frozenproduct/large/dark.css CHANGED Viewed

@@ -63,27 +63,27 @@
   --modes-color-interactive-ai-active: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
   --modes-color-interactive-ai-hover: linear-gradient(90deg, #00D63914 0%, #00d6de14 40%, #9d60ff14 90%);
   --modes-color-interactive-ai-default: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
-  --modes-color-interactive-danger-active: #f28486; /* active button on dark */
+  --modes-color-interactive-danger-active: #f28083; /* active button on dark */
   --modes-color-interactive-danger-default: #E13E53;
   --modes-color-interactive-danger-default-alt: #e85b66; /* for links in datatables  */
-  --modes-color-interactive-danger-hover: #eb646c;
-  --modes-color-interactive-danger-hover-alt: #e13e5314; /* button hover on dark */
-  --modes-color-interactive-danger-hover-alt2: #ec6a71; /* for links in datatables */
+  --modes-color-interactive-danger-hover: #ea626a;
+  --modes-color-interactive-danger-hover-alt: #e13e531a; /* button hover on dark */
+  --modes-color-interactive-danger-hover-alt2: #ed6e74; /* 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-active: #8c2c35; /* 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-hover: #ac3240; /* used on solid-pill and primary-button hover states */
+  --modes-color-interactive-danger-inverse-hover-alt: #cd384b1a; /* used on secondary-button hover states */
+  --modes-color-interactive-danger-inverse-hover-alt2: #9f303c; /* 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;
   --modes-color-interactive-data-entry-with-hover: #FFFFFF; /* text for draggable area on file input */
-  --modes-color-interactive-data-entry-hover-alt: #181818; /* bg hover for draggable area on file input */
+  --modes-color-interactive-data-entry-hover-alt: #1b1b1b; /* bg hover for draggable area on file input */
   --modes-color-interactive-data-entry-with-default: #777; /* Input borders. */
   --modes-color-interactive-data-entry-default-alt: #0e0e0e; /* Input footer bgs (e.g text editor) */
   --modes-color-interactive-data-entry-content: #fffffff2; /* Input Text */
@@ -109,31 +109,31 @@
   --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-active-alt: #ffffff26;
   --modes-color-interactive-monochrome-default: #ffffffe6;
   --modes-color-interactive-monochrome-default-alt: #ffffffab; /* subtle and toggle button text */
   --modes-color-interactive-monochrome-default-alt2: #ffffff6b; /* Tertiary border color */
-  --modes-color-interactive-monochrome-hover-alt: #ffffff14; /* Accordion, secondary, tertiary, menu bg on hover */
-  --modes-color-interactive-monochrome-hover: #ffffff29; /* subtle table header hover */
+  --modes-color-interactive-monochrome-hover-alt: #ffffff1a; /* Accordion, secondary, tertiary, menu bg on hover */
+  --modes-color-interactive-monochrome-hover: #ffffff26; /* subtle table header hover */
   --modes-color-interactive-monochrome-with-active: #000000;
   --modes-color-interactive-monochrome-with-active-alt: #FFFFFF;
   --modes-color-interactive-monochrome-with-default: #000000;
   --modes-color-interactive-monochrome-with-hover: #FFFFFF;
   --modes-color-interactive-monochrome-frozen-active: #FFFFFF;
-  --modes-color-interactive-monochrome-frozen-active-alt: #ffffff29;
+  --modes-color-interactive-monochrome-frozen-active-alt: #ffffff26;
   --modes-color-interactive-monochrome-frozen-default: #ffffffe6;
   --modes-color-interactive-monochrome-frozen-default-alt: #ffffffab;
-  --modes-color-interactive-monochrome-frozen-hover-alt: #ffffff14;
+  --modes-color-interactive-monochrome-frozen-hover-alt: #ffffff1a;
   --modes-color-interactive-monochrome-frozen-with-active: #000000;
   --modes-color-interactive-monochrome-frozen-with-hover: #FFFFFF;
   --modes-color-interactive-monochrome-frozen-with-hover-alt: #000000;
   --modes-color-interactive-monochrome-inverse-active: #000000;
-  --modes-color-interactive-monochrome-inverse-active-alt: #00000029;
+  --modes-color-interactive-monochrome-inverse-active-alt: #00000026;
   --modes-color-interactive-monochrome-inverse-default: #000000e6;
   --modes-color-interactive-monochrome-inverse-default-alt: #000000ab; /* subtle and toggle button text */
   --modes-color-interactive-monochrome-inverse-default-alt2: #0000006b; /* Tertiary border color */
-  --modes-color-interactive-monochrome-inverse-hover-alt: #00000014; /* Accordion, secondary, tertiary, menu bg on hover */
-  --modes-color-interactive-monochrome-inverse-hover: #00000029; /* subtle table header hover */
+  --modes-color-interactive-monochrome-inverse-hover-alt: #0000001a; /* Accordion, secondary, tertiary, menu bg on hover */
+  --modes-color-interactive-monochrome-inverse-hover: #00000026; /* subtle table header hover */
   --modes-color-interactive-monochrome-inverse-with-active: #FFFFFF;
   --modes-color-interactive-monochrome-inverse-with-active-alt: #000000;
   --modes-color-interactive-monochrome-inverse-with-default: #FFFFFF;
@@ -145,39 +145,39 @@
   --modes-color-interactive-nav-active: #ffffff59; /* active bg for nav items */
   --modes-color-interactive-nav-default: #000000; /* default bg for global nav */
   --modes-color-interactive-nav-default-alt: #282828; /* default bg for left nav container */
-  --modes-color-interactive-nav-hover: #ffffff29; /* hover bg for nav items */
+  --modes-color-interactive-nav-hover: #ffffff26; /* hover bg for nav items */
   --modes-color-interactive-nav-with-active: #FFFFFF; /* text and icons on top of active bgs in nav contexts */
   --modes-color-interactive-nav-with-default: #fffffff2; /* hover bg for nav items */
   --modes-color-interactive-nav-with-hover: #FFFFFF; /* hover bg for nav items */
-  --modes-color-interactive-primary-active: #81e57d;
-  --modes-color-interactive-primary-active-alt: #00d63952; /* Active color for secondary and tertiary buttons */
+  --modes-color-interactive-primary-active: #7ce47a;
+  --modes-color-interactive-primary-active-alt: #00d6394d; /* Active color for secondary and tertiary buttons */
   --modes-color-interactive-primary-default: #00D639;
-  --modes-color-interactive-primary-default-alt: #00d639cc; /* Border color for secondary buttons */
-  --modes-color-interactive-primary-default-alt2: #00d63980; /* Border color for tertiary buttons */
-  --modes-color-interactive-primary-default-alt3: #4cdc55; /* default value for links */
-  --modes-color-interactive-primary-hover: #58de5d;
-  --modes-color-interactive-primary-hover-alt: #00d63914; /* Secondary and tertiary button hover */
-  --modes-color-interactive-primary-hover-alt2: #73e372; /* hover for links */
+  --modes-color-interactive-primary-default-alt: #00d639cc; /* Border color for secondary and tertiary buttons */
+  --modes-color-interactive-primary-default-alt2: #4cdc55; /* default value for links */
+  --modes-color-interactive-primary-default-alt3: #00d63908; /* Default background color of secondary buttons */
+  --modes-color-interactive-primary-hover: #55dd5b;
+  --modes-color-interactive-primary-hover-alt: #00d6391a; /* Secondary and tertiary button hover */
+  --modes-color-interactive-primary-hover-alt2: #71e270; /* hover for links */
   --modes-color-interactive-primary-with-active: #000000;
   --modes-color-interactive-primary-with-default: #000000;
   --modes-color-interactive-primary-with-hover: #000000;
-  --modes-color-interactive-primary-frozen-active: #81e57d;
+  --modes-color-interactive-primary-frozen-active: #7ce47a;
   --modes-color-interactive-primary-frozen-default: #00D639;
   --modes-color-interactive-primary-frozen-default-alt: #4cdc55;
-  --modes-color-interactive-primary-frozen-hover: #58de5d;
-  --modes-color-interactive-primary-frozen-hover-alt: #73e372; /* for link hover */
+  --modes-color-interactive-primary-frozen-hover: #55dd5b;
+  --modes-color-interactive-primary-frozen-hover-alt: #71e270; /* for link hover */
   --modes-color-interactive-primary-frozen-nav-hover: #008046;
   --modes-color-interactive-primary-frozen-nav-label-hover: #FFFFFF;
   --modes-color-interactive-primary-frozen-table-default: #18232a;
-  --modes-color-interactive-primary-inverse-active: #14571a;
-  --modes-color-interactive-primary-inverse-active-alt: #00811f52; /* Active color for inverse secondary and tertiary buttons */
+  --modes-color-interactive-primary-inverse-active: #13591a;
+  --modes-color-interactive-primary-inverse-active-alt: #00811f4d; /* Active color for inverse secondary and tertiary buttons */
   --modes-color-interactive-primary-inverse-default: #00811F;
-  --modes-color-interactive-primary-inverse-default-alt: #00811fcc; /* Borders on secondary inverse buttons */
-  --modes-color-interactive-primary-inverse-default-alt2: #00811f80; /* Borders on tertiary inverse buttons */
-  --modes-color-interactive-primary-inverse-default-alt3: #0c711d; /* Default color for links */
-  --modes-color-interactive-primary-inverse-hover: #0e6b1d;
-  --modes-color-interactive-primary-inverse-hover-alt: #00811f14; /* Secondary and tertiary inverse button hover */
-  --modes-color-interactive-primary-inverse-hover-alt2: #10681c; /* hover for links */
+  --modes-color-interactive-primary-inverse-default-alt: #00811fcc; /* Borders on secondary and tertiary inverse buttons */
+  --modes-color-interactive-primary-inverse-default-alt2: #0c711d; /* Default color for links */
+  --modes-color-interactive-primary-inverse-default-alt3: #00811f08; /* Default background color of inverse secondary buttons */
+  --modes-color-interactive-primary-inverse-hover: #0e6d1d;
+  --modes-color-interactive-primary-inverse-hover-alt: #0c711d1a; /* Secondary and tertiary inverse button hover */
+  --modes-color-interactive-primary-inverse-hover-alt2: #11651c; /* hover for links */
   --modes-color-interactive-primary-inverse-with-active: #FFFFFF;
   --modes-color-interactive-primary-inverse-with-default: #FFFFFF;
   --modes-color-interactive-primary-inverse-with-hover: #FFFFFF;
@@ -192,15 +192,15 @@
   --modes-color-status-generic-default: #008a89;
   --modes-color-status-caution-default: #E04500;
   --modes-color-status-caution-default-alt: #251206; /* Subtle message bg */
-  --modes-color-status-caution-hover: #eb6732; /* used on pill hover states */
-  --modes-color-status-caution-hover-alt: #3f1b0b; /* used on pill hover states and message bg */
+  --modes-color-status-caution-hover: #eb6530; /* used on pill hover states */
+  --modes-color-status-caution-hover-alt: #3e1a0b; /* used on pill hover states and message bg */
   --modes-color-status-caution-text: #e75b23;
   --modes-color-status-caution-frozenglobal-default: #E04500; /* Global message bg */
-  --modes-color-status-caution-frozenglobal-hover: #eb6732; /* used on global message bg */
+  --modes-color-status-caution-frozenglobal-hover: #eb6530; /* used on global message bg */
   --modes-color-status-caution-inverse-default: #D64309; /* For pills and messages. Not accessible with white TEXT. */
   --modes-color-status-caution-inverse-default-alt: #ffede5; /* Subtle message bg */
-  --modes-color-status-caution-inverse-hover: #b13a0d; /* used on pill hover states */
-  --modes-color-status-caution-inverse-hover-alt: #fdd3c0; /* used on pill hover states and message bg */
+  --modes-color-status-caution-inverse-hover: #b33b0d; /* used on pill hover states */
+  --modes-color-status-caution-inverse-hover-alt: #fed5c3; /* used on pill hover states and message bg */
   --modes-color-status-caution-inverse-text: #bf3e0c;
   --modes-color-status-content-with-default: #000000;
   --modes-color-status-content-with-default-alt: #fffffff2;
@@ -218,59 +218,52 @@
   --modes-color-status-important-default: #985FDC; /* For tile status keylines to show if something is of high importance. */
   --modes-color-status-info-default: #007ED9;
   --modes-color-status-info-default-alt: #111722; /* Subtle message bg */
-  --modes-color-status-info-hover: #5291e0; /* used on pill hover states */
-  --modes-color-status-info-hover-alt: #17253b; /* used on pill hover states and message bg */
+  --modes-color-status-info-hover: #4f90df; /* used on pill hover states */
+  --modes-color-status-info-hover-alt: #17253a; /* used on pill hover states and message bg */
   --modes-color-status-info-frozenglobal-default: #007ED9; /* Global message bg */
-  --modes-color-status-info-frozenglobal-hover: #5291e0; /* used on global message bg */
+  --modes-color-status-info-frozenglobal-hover: #4f90df; /* used on global message bg */
   --modes-color-status-info-inverse-default: #0060A7; /* For pills and messages. Not accessible with white TEXT. */
   --modes-color-status-info-inverse-default-alt: #eaeef6; /* Subtle message bg */
-  --modes-color-status-info-inverse-hover: #10508a; /* used on pill hover states */
-  --modes-color-status-info-inverse-hover-alt: #cbd6e9; /* used on pill hover states and message bg */
+  --modes-color-status-info-inverse-hover: #10518c; /* used on pill hover states */
+  --modes-color-status-info-inverse-hover-alt: #cdd7ea; /* used on pill hover states and message bg */
   --modes-color-status-negative-default: #E13E53;
   --modes-color-status-negative-default-alt: #241212; /* Subtle message bg */
-  --modes-color-status-negative-hover: #eb646c; /* used on pill hover states */
-  --modes-color-status-negative-hover-alt: #3f1a1c; /* used on pill hover states and message bg */
+  --modes-color-status-negative-hover: #ea626a; /* used on pill hover states */
+  --modes-color-status-negative-hover-alt: #3d1a1c; /* used on pill hover states and message bg */
   --modes-color-status-negative-text: #E13E53;
   --modes-color-status-negative-inverse-default: #CD384B; /* For pills and messages. Not accessible with white TEXT. */
   --modes-color-status-negative-inverse-default-alt: #fdeceb; /* Subtle message bg */
-  --modes-color-status-negative-inverse-hover: #aa323f; /* used on pill hover states */
-  --modes-color-status-negative-inverse-hover-alt: #f9d1cf; /* used on pill hover states and message bg */
+  --modes-color-status-negative-inverse-hover: #ac3240; /* used on pill hover states */
+  --modes-color-status-negative-inverse-hover-alt: #f9d3d1; /* used on pill hover states and message bg */
   --modes-color-status-negative-inverse-text: #CD384B;
   --modes-color-status-neutral-default: #7C7C7C;
   --modes-color-status-neutral-default-alt: #171717; /* Subtle message bg */
-  --modes-color-status-neutral-hover: #909090; /* used on pill hover states */
-  --modes-color-status-neutral-hover-alt: #252525; /* used on pill hover states and message bg */
+  --modes-color-status-neutral-hover: #8e8e8e; /* used on pill hover states */
+  --modes-color-status-neutral-hover-alt: #242424; /* used on pill hover states and message bg */
   --modes-color-status-neutral-frozen-default: #9e9e9e;
   --modes-color-status-neutral-frozen-default-alt: #171717; /* Subtle message bg */
-  --modes-color-status-neutral-frozen-hover: #909090;
-  --modes-color-status-neutral-frozen-hover-alt: #262626; /* used on pill hover states and message bg */
+  --modes-color-status-neutral-frozen-hover: #8e8e8e;
+  --modes-color-status-neutral-frozen-hover-alt: #2a2a2a; /* used on pill hover states and message bg */
   --modes-color-status-neutral-inverse-default: #656565;
   --modes-color-status-neutral-inverse-default-alt: #efefef; /* Subtle message bg */
-  --modes-color-status-neutral-inverse-hover: #676767; /* used on pill hover states */
-  --modes-color-status-neutral-inverse-hover-alt: #d8d8d8; /* used on pill hover states and message bg */
+  --modes-color-status-neutral-inverse-hover: #696969; /* used on pill hover states */
+  --modes-color-status-neutral-inverse-hover-alt: #d9d9d9; /* used on pill hover states and message bg */
   --modes-color-status-positive-default: #009023;
   --modes-color-status-positive-default-alt: #0e1a0b; /* Subtle message bg */
-  --modes-color-status-positive-hover: #2e9936; /* used on pill hover states */
-  --modes-color-status-positive-hover-alt: #132b12; /* used on pill hover states and message bg */
+  --modes-color-status-positive-hover: #359b3b; /* used on pill hover states */
+  --modes-color-status-positive-hover-alt: #132912; /* used on pill hover states and message bg */
   --modes-color-status-positive-inverse-default: #00811F; /* For pills and messages. Not accessible with white TEXT. */
   --modes-color-status-positive-inverse-default-alt: #e9f2e8; /* Subtle message bg */
-  --modes-color-status-positive-inverse-hover: #0e6b1d; /* used on pill hover states  */
-  --modes-color-status-positive-inverse-hover-alt: #c9e0c7; /* used on pill hover states and message bg */
+  --modes-color-status-positive-inverse-hover: #0e6d1d; /* used on pill hover states  */
+  --modes-color-status-positive-inverse-hover-alt: #cbe1c9; /* used on pill hover states and message bg */
   --modes-color-status-callout-default-alt: #122211; /* used for marketing banners */
-  --modes-color-status-callout-hover-alt: #223121; /* marketing banner hover */
+  --modes-color-status-callout-hover-alt: #263525; /* marketing banner hover */
   --modes-color-status-reviews-default: #00D639;
   --modes-color-status-reviews-default-alt: linear-gradient(90deg, #00D639 0%, #00D639 50%, #282828 50%, #282828  100%);
-  --modes-color-status-reviews-hover: #18b032; /* used on pill hover states */
+  --modes-color-status-reviews-hover: #17b333; /* used on pill hover states */
   --modes-color-status-reviews-frozen-default: #00D639;
   --modes-color-status-reviews-frozen-default-alt: linear-gradient(90deg, #00D639 0%, #00D639 50%, #282828 50%, #282828  100%);
-  --modes-color-status-reviews-frozen-hover: #18b032; /* used on pill hover states */
+  --modes-color-status-reviews-frozen-hover: #17b333; /* used on pill hover states */
   --modes-color-modifier-contrast-less: #000000;
   --modes-color-modifier-contrast-more: #FFFFFF;
-  --modes-color-modifiers-button-active: 0.32; /* Active modifier used when 16% hover is used */
-  --modes-color-modifiers-button-active-alt: 0.16; /* Active appled when 8% hover is used */
-  --modes-color-modifiers-button-hover: 0.16; /* Hover used on primary buttons */
-  --modes-color-modifiers-button-hover-alt: 0.08; /* Hover used on secondary and tertiary buttons */
-  --modes-color-modifiers-input-disabled-bg: 0.04; /* less contrast */
-  --modes-color-modifiers-input-disabled-fg: 0.30; /* less contrast */
-  --modes-color-modifiers-shadow-standard: 0.5; /* standard mixer for shadow */
 }