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

@sage/design-tokens 14.0.1 → 14.1.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 (454) hide show

package/css/frozenproduct/large/light.css CHANGED Viewed

@@ -189,7 +189,8 @@
   --modes-color-status-ai-default-alt: #000000; /* bg for contextual message comp */
   --modes-color-status-ai-default-horizontal: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
   --modes-color-status-ai-default-vertical: linear-gradient(180deg, #13A038 0%, #149197 40%, #A87CFB 90%);
-  --modes-color-status-generic-default: #007c7b; /* used in progress bar  */
+  --modes-color-status-callout-default-alt: #e5fae2; /* used for marketing banners */
+  --modes-color-status-callout-hover-alt: #d8ecd5; /* used for marketing banners */
   --modes-color-status-caution-default: #D64309; /* For pills and messages. Not accessible with white TEXT. */
   --modes-color-status-caution-default-alt: #ffede5; /* Subtle message bg */
   --modes-color-status-caution-hover: #b33b0d; /* used on pill hover states */
@@ -211,11 +212,59 @@
   --modes-color-status-content-inverse-with-default-alt: #fffffff2;
   --modes-color-status-content-inverse-with-hover: #000000; /* for pill hover X */
   --modes-color-status-content-inverse-with-hover-alt: #FFFFFF; /* for message text */
+  --modes-color-status-custom-blue-default: #0071C3; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-blue-default-alt: #ebf0f9; /* Pill bg */
+  --modes-color-status-custom-blue-hover: #135fa3; /* used on pill hover states */
+  --modes-color-status-custom-blue-hover-alt: #ced9ed; /* used on pill hover states */
+  --modes-color-status-custom-teal-default: #007C7B; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-teal-default-alt: #e9f1f1; /* Pill bg */
+  --modes-color-status-custom-teal-hover: #0e6968; /* used on pill hover states */
+  --modes-color-status-custom-teal-hover-alt: #c4dde0; /* used on pill hover states */
+  --modes-color-status-custom-green-default: #00811F; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-green-default-alt: #e9f2e8; /* Pill bg */
+  --modes-color-status-custom-green-hover: #0e6d1d; /* used on pill hover states */
+  --modes-color-status-custom-green-hover-alt: #c4decf; /* used on pill hover states */
+  --modes-color-status-custom-lime-default: #637700; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-lime-default-alt: #eff1e6; /* Pill bg */
+  --modes-color-status-custom-lime-hover: #546408; /* used on pill hover states */
+  --modes-color-status-custom-lime-hover-alt: #cdddc9; /* used on pill hover states */
+  --modes-color-status-custom-orange-default: #C54300; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-orange-default-alt: #feece5; /* Pill bg */
+  --modes-color-status-custom-orange-hover: #a53a06; /* used on pill hover states */
+  --modes-color-status-custom-orange-hover-alt: #f2d0ce; /* used on pill hover states */
+  --modes-color-status-custom-red-default: #DC004E; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-red-default-alt: #ffebec; /* Pill bg */
+  --modes-color-status-custom-red-hover: #b81242; /* used on pill hover states */
+  --modes-color-status-custom-red-hover-alt: #f1cfd9; /* used on pill hover states */
+  --modes-color-status-custom-pink-default: #C8269A; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-pink-default-alt: #fcecf5; /* Pill bg */
+  --modes-color-status-custom-pink-hover: #a82581; /* used on pill hover states */
+  --modes-color-status-custom-pink-hover-alt: #ead2e5; /* used on pill hover states */
+  --modes-color-status-custom-purple-default: #8F4CD7; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-purple-default-alt: #f5edfc; /* Pill bg */
+  --modes-color-status-custom-purple-hover: #7941b4; /* used on pill hover states */
+  --modes-color-status-custom-purple-hover-alt: #ded4ee; /* used on pill hover states */
+  --modes-color-status-custom-gray-default: #6F6F6F; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-gray-default-alt: #f0f0f0; /* Pill bg */
+  --modes-color-status-custom-gray-hover: #5e5e5e; /* used on pill hover states */
+  --modes-color-status-custom-gray-hover-alt: #d3d9e5; /* used on pill hover states */
+  --modes-color-status-custom-slate-default: #527386; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-slate-default-alt: #edf0f2; /* Pill bg */
+  --modes-color-status-custom-slate-hover: #466171; /* used on pill hover states */
+  --modes-color-status-custom-slate-hover-alt: #cbdae6; /* used on pill hover states */
+  --modes-color-status-generic-default: #F0F; /* TO BE DETLETED: Was #007c7b and used in Progress bar, dataVis colour. */
+  --modes-color-status-important-default: #8F4CD7; /* For tile status keylines to show if something is of high importance. */
+  --modes-color-status-important-default-alt: #f5edfc; /* Subtle message bg */
+  --modes-color-status-important-hover: #7941b4; /* used on pill hover states */
+  --modes-color-status-important-hover-alt: #ded4ee; /* used on pill hover states and message bg */
+  --modes-color-status-important-inverse-default: #985FDC;
+  --modes-color-status-important-inverse-default-alt: #1b1422; /* Subtle message bg */
+  --modes-color-status-important-inverse-hover: #a977e2; /* used on pill hover states */
+  --modes-color-status-important-inverse-hover-alt: #282039; /* used on pill hover states and message bg */
   --modes-color-status-inactive-default: #a6a6a6; /* For readonly pill bg and border */
   --modes-color-status-inactive-with-default: #000000ab; /* For readonly filled pill text */
   --modes-color-status-inactive-inverse-default: #4b4b4b; /* For readonly pill bg and border */
   --modes-color-status-inactive-inverse-with-default: #ffffffab; /* For readonly filled pill text */
-  --modes-color-status-important-default: #8F4CD7; /* For tile status keylines to show if something is of high importance. */
   --modes-color-status-info-default: #0060A7; /* For pills and messages. Not accessible with white TEXT. */
   --modes-color-status-info-default-alt: #eaeef6; /* Subtle message bg */
   --modes-color-status-info-hover: #10518c; /* used on pill hover states */
@@ -256,8 +305,6 @@
   --modes-color-status-positive-inverse-default-alt: #0e1a0b; /* Subtle message bg */
   --modes-color-status-positive-inverse-hover: #328e37; /* used on pill hover states */
   --modes-color-status-positive-inverse-hover-alt: #132912; /* used on pill hover states and message bg */
-  --modes-color-status-callout-default-alt: #e5fae2; /* used for marketing banners */
-  --modes-color-status-callout-hover-alt: #d8ecd5; /* used for marketing banners */
   --modes-color-status-reviews-default: #00811F;
   --modes-color-status-reviews-default-alt: linear-gradient(90deg, #00811F 0%, #00811F 50%, #d1d1d1 50%, #d1d1d1 100%); /* half fill */
   --modes-color-status-reviews-hover: #0e6d1d;

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

@@ -25,7 +25,7 @@
   --progress-color-fg-caution: var(--modes-color-status-caution-default);
   --progress-color-fg-error: var(--modes-color-status-negative-default);
   --progress-color-fg-info: var(--modes-color-status-info-default);
-  --progress-color-datavis-fg-default: var(--modes-color-status-generic-default);
+  --progress-color-datavis-fg-default: var(--modes-color-status-custom-teal-default);
   --progress-color-loader-fg-error: var(--modes-color-status-negative-default);
   --progress-color-loader-fg-complete: var(--modes-color-status-positive-default);
   --progress-color-stepflow-bg-complete: var(--modes-color-status-positive-default);

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

@@ -5,11 +5,6 @@
 :root {
   --status-radius-none: var(--global-radius-none); /* Pill (embedded element inner corners) */
   --status-color-none: var(--modes-color-none); /* transparent override used for hiding colors when needed. */
-  --status-color-message-global-callout-bg-default: var(--modes-color-status-callout-default-alt); /* Global message bg */
-  --status-color-message-global-info-bg-default: var(--modes-color-status-info-default-alt); /* Global message bg */
-  --status-color-message-global-info-icon: var(--modes-color-status-info-default); /* Icon on tinted bgs */
-  --status-color-message-global-warning-bg-default: var(--modes-color-status-caution-default-alt); /* Global message bg */
-  --status-color-message-global-warning-icon: var(--modes-color-status-caution-default); /* Icon on tinted bgs */
   --status-color-message-contextual-bg: var(--modes-color-generic-bg-nought);
   --status-color-message-contextual-icon: var(--modes-color-generic-bg-nought); /* decorative icon on standard contextual messages */
   --status-color-message-contextual-icon-alt: var(--modes-color-status-neutral-default); /* icon on neutral status dialogs */
@@ -31,6 +26,41 @@
   --status-color-message-contextual-warning-bg-alt: var(--modes-color-status-caution-default-alt); /* Subtle message bg */
   --status-color-message-contextual-warning-border-default: var(--modes-color-status-caution-default);
   --status-color-message-contextual-warning-icon: var(--modes-color-status-caution-default); /* Icon on tinted bgs */
+  --status-color-message-global-callout-bg-default: var(--modes-color-status-callout-default-alt); /* Global message bg */
+  --status-color-message-global-info-bg-default: var(--modes-color-status-info-default-alt); /* Global message bg */
+  --status-color-message-global-info-icon: var(--modes-color-status-info-default); /* Icon on tinted bgs */
+  --status-color-message-global-warning-bg-default: var(--modes-color-status-caution-default-alt); /* Global message bg */
+  --status-color-message-global-warning-icon: var(--modes-color-status-caution-default); /* Icon on tinted bgs */
+  --status-color-pill-custom-blue-bg-default: var(--modes-color-status-custom-blue-default);
+  --status-color-pill-custom-blue-bg-alt-default: var(--modes-color-status-custom-blue-default-alt); /* outline pill bg */
+  --status-color-pill-custom-blue-border-default: var(--modes-color-status-custom-blue-default);
+  --status-color-pill-custom-teal-bg-default: var(--modes-color-status-custom-teal-default);
+  --status-color-pill-custom-teal-bg-alt-default: var(--modes-color-status-custom-teal-default-alt); /* outline pill bg */
+  --status-color-pill-custom-teal-border-default: var(--modes-color-status-custom-teal-default);
+  --status-color-pill-custom-green-bg-default: var(--modes-color-status-custom-green-default);
+  --status-color-pill-custom-green-bg-alt-default: var(--modes-color-status-custom-green-default-alt); /* outline pill bg */
+  --status-color-pill-custom-green-border-default: var(--modes-color-status-custom-green-default);
+  --status-color-pill-custom-lime-bg-default: var(--modes-color-status-custom-lime-default);
+  --status-color-pill-custom-lime-bg-alt-default: var(--modes-color-status-custom-lime-default-alt); /* outline pill bg */
+  --status-color-pill-custom-lime-border-default: var(--modes-color-status-custom-lime-default);
+  --status-color-pill-custom-orange-bg-default: var(--modes-color-status-custom-orange-default);
+  --status-color-pill-custom-orange-bg-alt-default: var(--modes-color-status-custom-orange-default-alt); /* outline pill bg */
+  --status-color-pill-custom-orange-border-default: var(--modes-color-status-custom-orange-default);
+  --status-color-pill-custom-red-bg-default: var(--modes-color-status-custom-red-default);
+  --status-color-pill-custom-red-bg-alt-default: var(--modes-color-status-custom-red-default-alt); /* outline pill bg */
+  --status-color-pill-custom-red-border-default: var(--modes-color-status-custom-red-default);
+  --status-color-pill-custom-pink-bg-default: var(--modes-color-status-custom-pink-default);
+  --status-color-pill-custom-pink-bg-alt-default: var(--modes-color-status-custom-pink-default-alt); /* outline pill bg */
+  --status-color-pill-custom-pink-border-default: var(--modes-color-status-custom-pink-default);
+  --status-color-pill-custom-purple-bg-default: var(--modes-color-status-custom-purple-default);
+  --status-color-pill-custom-purple-bg-alt-default: var(--modes-color-status-custom-purple-default-alt); /* outline pill bg */
+  --status-color-pill-custom-purple-border-default: var(--modes-color-status-custom-purple-default);
+  --status-color-pill-custom-gray-bg-default: var(--modes-color-status-custom-gray-default);
+  --status-color-pill-custom-gray-bg-alt-default: var(--modes-color-status-custom-gray-default-alt); /* outline pill bg */
+  --status-color-pill-custom-gray-border-default: var(--modes-color-status-custom-gray-default);
+  --status-color-pill-custom-slate-bg-default: var(--modes-color-status-custom-slate-default);
+  --status-color-pill-custom-slate-bg-alt-default: var(--modes-color-status-custom-slate-default-alt); /* outline pill bg */
+  --status-color-pill-custom-slate-border-default: var(--modes-color-status-custom-slate-default);
   --status-color-pill-error-bg-default: var(--modes-color-status-negative-default);
   --status-color-pill-error-bg-alt-default: var(--modes-color-status-negative-default-alt); /* outline pill bg */
   --status-color-pill-error-border-default: var(--modes-color-status-negative-default);
@@ -79,19 +109,39 @@
   --status-typography-responsive-heading-s: var(--global-typography-responsive-component-firm-s);
   --status-typography-responsive-heading-m: var(--global-typography-responsive-component-firm-m);
   --status-typography-responsive-heading-l: var(--global-typography-responsive-component-firm-l);
+  --status-color-message-contextual-text: var(--modes-color-status-content-with-hover-alt); /* Message text. */
+  --status-color-message-contextual-ai-bg-default: var(--modes-color-status-ai-default-alt);
+  --status-color-message-contextual-ai-border-default: var(--modes-color-status-ai-default-alt);
   --status-color-message-global-label-hover: var(--modes-color-interactive-monochrome-with-hover);
   --status-color-message-global-callout-bg-hover: var(--modes-color-status-callout-hover-alt); /* global message bg hover */
   --status-color-message-global-info-bg-hover: var(--modes-color-status-info-hover-alt);
   --status-color-message-global-warning-bg-hover: var(--modes-color-status-caution-hover-alt);
-  --status-color-message-contextual-text: var(--modes-color-status-content-with-hover-alt); /* Message text. */
-  --status-color-message-contextual-ai-bg-default: var(--modes-color-status-ai-default-alt);
-  --status-color-message-contextual-ai-border-default: var(--modes-color-status-ai-default-alt);
-  --status-color-pill-generic-inverse-label-default: var(--modes-color-status-content-inverse-with-default);
-  --status-color-pill-generic-inverse-label-hover: var(--modes-color-status-content-inverse-with-hover);
+  --status-color-pill-custom-blue-bg-alt-hover: var(--modes-color-status-custom-blue-hover-alt);
+  --status-color-pill-custom-blue-bg-hover: var(--modes-color-status-custom-blue-hover);
+  --status-color-pill-custom-teal-bg-alt-hover: var(--modes-color-status-custom-teal-hover-alt);
+  --status-color-pill-custom-teal-bg-hover: var(--modes-color-status-custom-teal-hover);
+  --status-color-pill-custom-green-bg-alt-hover: var(--modes-color-status-custom-green-hover-alt);
+  --status-color-pill-custom-green-bg-hover: var(--modes-color-status-custom-green-hover);
+  --status-color-pill-custom-lime-bg-alt-hover: var(--modes-color-status-custom-lime-hover-alt);
+  --status-color-pill-custom-lime-bg-hover: var(--modes-color-status-custom-lime-hover);
+  --status-color-pill-custom-orange-bg-alt-hover: var(--modes-color-status-custom-orange-hover-alt);
+  --status-color-pill-custom-orange-bg-hover: var(--modes-color-status-custom-orange-hover);
+  --status-color-pill-custom-red-bg-alt-hover: var(--modes-color-status-custom-red-hover-alt);
+  --status-color-pill-custom-red-bg-hover: var(--modes-color-status-custom-red-hover);
+  --status-color-pill-custom-pink-bg-alt-hover: var(--modes-color-status-custom-pink-hover-alt);
+  --status-color-pill-custom-pink-bg-hover: var(--modes-color-status-custom-pink-hover);
+  --status-color-pill-custom-purple-bg-alt-hover: var(--modes-color-status-custom-purple-hover-alt);
+  --status-color-pill-custom-purple-bg-hover: var(--modes-color-status-custom-purple-hover);
+  --status-color-pill-custom-gray-bg-alt-hover: var(--modes-color-status-custom-gray-hover-alt);
+  --status-color-pill-custom-gray-bg-hover: var(--modes-color-status-custom-gray-hover);
+  --status-color-pill-custom-slate-bg-alt-hover: var(--modes-color-status-custom-slate-hover-alt);
+  --status-color-pill-custom-slate-bg-hover: var(--modes-color-status-custom-slate-hover);
   --status-color-pill-error-bg-alt-hover: var(--modes-color-status-negative-hover-alt);
   --status-color-pill-error-bg-hover: var(--modes-color-status-negative-hover);
   --status-color-pill-error-inverse-bg-alt-hover: var(--modes-color-status-negative-inverse-hover-alt);
   --status-color-pill-error-inverse-bg-hover: var(--modes-color-status-negative-inverse-hover);
+  --status-color-pill-generic-inverse-label-default: var(--modes-color-status-content-inverse-with-default);
+  --status-color-pill-generic-inverse-label-hover: var(--modes-color-status-content-inverse-with-hover);
   --status-color-pill-info-bg-alt-hover: var(--modes-color-status-info-hover-alt);
   --status-color-pill-info-bg-hover: var(--modes-color-status-info-hover);
   --status-color-pill-info-inverse-bg-alt-hover: var(--modes-color-status-info-inverse-hover-alt);
@@ -100,6 +150,7 @@
   --status-color-pill-neutral-bg-hover: var(--modes-color-status-neutral-hover);
   --status-color-pill-neutral-inverse-bg-alt-hover: var(--modes-color-status-neutral-inverse-hover-alt);
   --status-color-pill-neutral-inverse-bg-hover: var(--modes-color-status-neutral-inverse-hover);
+  --status-color-pill-readonly-label: var(--modes-color-generic-content-firm); /* Pill (all types, readonly, when nested in disabled parent components) */
   --status-color-pill-success-bg-alt-hover: var(--modes-color-status-positive-hover-alt);
   --status-color-pill-success-bg-hover: var(--modes-color-status-positive-hover);
   --status-color-pill-success-inverse-bg-alt-hover: var(--modes-color-status-positive-inverse-hover-alt);
@@ -108,14 +159,13 @@
   --status-color-pill-warning-bg-hover: var(--modes-color-status-caution-hover);
   --status-color-pill-warning-inverse-bg-alt-hover: var(--modes-color-status-caution-inverse-hover-alt);
   --status-color-pill-warning-inverse-bg-hover: var(--modes-color-status-caution-inverse-hover);
-  --status-color-pill-readonly-label: var(--modes-color-generic-content-firm); /* Pill (all types, readonly, when nested in disabled parent components) */
   --status-color-rating-bg-default: var(--modes-color-status-reviews-default);
   --status-color-rating-bg-default-alt: var(--modes-color-status-reviews-default-alt);
   --status-color-rating-bg-hover: var(--modes-color-status-reviews-hover);
   --status-color-rating-border-default: var(--modes-color-status-reviews-default);
+  --status-color-message-contextual-callout-icon: var(--modes-color-status-content-with-default-alt);
   --status-color-message-global-label-default: var(--modes-color-status-content-with-default-alt);
   --status-color-message-global-callout-icon: var(--modes-color-status-content-with-default-alt); /* Icon on tinted bgs */
-  --status-color-message-contextual-callout-icon: var(--modes-color-status-content-with-default-alt);
   --status-color-pill-generic-label-default: var(--modes-color-status-content-with-default);
   --status-color-pill-generic-label-hover: var(--modes-color-status-content-with-hover);
   --status-color-pill-generic-label-alt-default: var(--modes-color-status-content-with-default-alt);

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

@@ -78,7 +78,7 @@
   --table-size-row-standard-l: var(--global-size-macro-l);
   --table-size-row-standard-xl: calc(var(--global-size-macro-xl) + var(--global-size-micro-m));
   --table-size-icon-xs: var(--global-size-icon-s);
-  --table-size-icon-s: var(--global-size-icon-s);
+  --table-size-icon-s: var(--global-size-icon-m);
   --table-size-icon-m: var(--global-size-icon-m);
   --table-size-icon-l: var(--global-size-icon-l);
   --table-size-icon-xl: var(--global-size-icon-xl);

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

@@ -189,7 +189,8 @@
   --modes-color-status-ai-default-alt: #FFFFFF; /* bg for contextual message comp */
   --modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
   --modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
-  --modes-color-status-generic-default: #008a89;
+  --modes-color-status-callout-default-alt: #122211; /* used for marketing banners */
+  --modes-color-status-callout-hover-alt: #263525; /* marketing banner hover */
   --modes-color-status-caution-default: #E04500;
   --modes-color-status-caution-default-alt: #251206; /* Subtle message bg */
   --modes-color-status-caution-hover: #eb6530; /* used on pill hover states */
@@ -211,11 +212,59 @@
   --modes-color-status-content-inverse-with-default-alt: #000000f2;
   --modes-color-status-content-inverse-with-hover: #FFFFFF;
   --modes-color-status-content-inverse-with-hover-alt: #000000;
+  --modes-color-status-custom-blue-default: #007FD9; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-blue-default-alt: #0d1219; /* Pill bg */
+  --modes-color-status-custom-blue-hover: #4f91df; /* used on pill hover states */
+  --modes-color-status-custom-blue-hover-alt: #142131; /* used on pill hover states */
+  --modes-color-status-custom-teal-default: #008A89; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-teal-default-alt: #0a1313; /* Pill bg */
+  --modes-color-status-custom-teal-hover: #449b9a; /* used on pill hover states */
+  --modes-color-status-custom-teal-hover-alt: #082427; /* used on pill hover states */
+  --modes-color-status-custom-green-default: #009023; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-green-default-alt: #0a1408; /* Pill bg */
+  --modes-color-status-custom-green-hover: #44a146; /* used on pill hover states */
+  --modes-color-status-custom-green-hover-alt: #0b2418; /* used on pill hover states */
+  --modes-color-status-custom-lime-default: #6E8500; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-lime-default-alt: #111205; /* Pill bg */
+  --modes-color-status-custom-lime-hover: #859635; /* used on pill hover states */
+  --modes-color-status-custom-lime-hover-alt: #162311; /* used on pill hover states */
+  --modes-color-status-custom-orange-default: #DB4B00; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-orange-default-alt: #1c0e04; /* Pill bg */
+  --modes-color-status-custom-orange-hover: #e66930; /* used on pill hover states */
+  --modes-color-status-custom-orange-hover-alt: #331816; /* used on pill hover states */
+  --modes-color-status-custom-red-default: #F50058; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-red-default-alt: #1e0d0d; /* Pill bg */
+  --modes-color-status-custom-red-hover: #fc4e6e; /* used on pill hover states */
+  --modes-color-status-custom-red-hover-alt: #331720; /* used on pill hover states */
+  --modes-color-status-custom-pink-default: #DD2BAB; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-pink-default-alt: #1b0d16; /* Pill bg */
+  --modes-color-status-custom-pink-hover: #e558b7; /* used on pill hover states */
+  --modes-color-status-custom-pink-hover-alt: #2d192b; /* used on pill hover states */
+  --modes-color-status-custom-purple-default: #985FDC; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-purple-default-alt: #150f19; /* Pill bg */
+  --modes-color-status-custom-purple-hover: #a977e2; /* used on pill hover states */
+  --modes-color-status-custom-purple-hover-alt: #231c30; /* used on pill hover states */
+  --modes-color-status-custom-gray-default: #7C7C7C; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-gray-default-alt: #111; /* Pill bg */
+  --modes-color-status-custom-gray-hover: #8e8e8e; /* used on pill hover states */
+  --modes-color-status-custom-gray-hover-alt: #1a202b; /* used on pill hover states */
+  --modes-color-status-custom-slate-default: #5C8196; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-slate-default-alt: #0f1214; /* Pill bg */
+  --modes-color-status-custom-slate-hover: #7493a5; /* used on pill hover states */
+  --modes-color-status-custom-slate-hover-alt: #13222c; /* used on pill hover states */
+  --modes-color-status-generic-default: #F0F;
+  --modes-color-status-important-default: #8F4CD7; /* For tile status keylines to show if something is of high importance. */
+  --modes-color-status-important-default-alt: #150d19; /* Subtle message bg */
+  --modes-color-status-important-hover: #a267de; /* used on pill hover states */
+  --modes-color-status-important-hover-alt: #231b30; /* used on pill hover states and message bg */
+  --modes-color-status-important-inverse-default: #985FDC;
+  --modes-color-status-important-inverse-default-alt: #f1e6fa; /* Subtle message bg */
+  --modes-color-status-important-inverse-hover: #8051b8; /* used on pill hover states */
+  --modes-color-status-important-inverse-hover-alt: #daceed; /* used on pill hover states and message bg */
   --modes-color-status-inactive-default: #4b4b4b; /* For readonly pill bg and border */
   --modes-color-status-inactive-with-default: #ffffffab; /* For readonly filled pill text */
   --modes-color-status-inactive-inverse-default: #a6a6a6; /* For readonly pill bg and border */
   --modes-color-status-inactive-inverse-with-default: #000000ab; /* For readonly filled pill text */
-  --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: #4f90df; /* used on pill hover states */
@@ -256,8 +305,6 @@
   --modes-color-status-positive-inverse-default-alt: #e9f2e8; /* Subtle 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: #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: #17b333; /* used on pill hover states */

package/css/frozenproduct/small/light.css CHANGED Viewed

@@ -189,7 +189,8 @@
   --modes-color-status-ai-default-alt: #000000; /* bg for contextual message comp */
   --modes-color-status-ai-default-horizontal: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
   --modes-color-status-ai-default-vertical: linear-gradient(180deg, #13A038 0%, #149197 40%, #A87CFB 90%);
-  --modes-color-status-generic-default: #007c7b; /* used in progress bar  */
+  --modes-color-status-callout-default-alt: #e5fae2; /* used for marketing banners */
+  --modes-color-status-callout-hover-alt: #d8ecd5; /* used for marketing banners */
   --modes-color-status-caution-default: #D64309; /* For pills and messages. Not accessible with white TEXT. */
   --modes-color-status-caution-default-alt: #ffede5; /* Subtle message bg */
   --modes-color-status-caution-hover: #b33b0d; /* used on pill hover states */
@@ -211,11 +212,59 @@
   --modes-color-status-content-inverse-with-default-alt: #fffffff2;
   --modes-color-status-content-inverse-with-hover: #000000; /* for pill hover X */
   --modes-color-status-content-inverse-with-hover-alt: #FFFFFF; /* for message text */
+  --modes-color-status-custom-blue-default: #0071C3; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-blue-default-alt: #ebf0f9; /* Pill bg */
+  --modes-color-status-custom-blue-hover: #135fa3; /* used on pill hover states */
+  --modes-color-status-custom-blue-hover-alt: #ced9ed; /* used on pill hover states */
+  --modes-color-status-custom-teal-default: #007C7B; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-teal-default-alt: #e9f1f1; /* Pill bg */
+  --modes-color-status-custom-teal-hover: #0e6968; /* used on pill hover states */
+  --modes-color-status-custom-teal-hover-alt: #c4dde0; /* used on pill hover states */
+  --modes-color-status-custom-green-default: #00811F; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-green-default-alt: #e9f2e8; /* Pill bg */
+  --modes-color-status-custom-green-hover: #0e6d1d; /* used on pill hover states */
+  --modes-color-status-custom-green-hover-alt: #c4decf; /* used on pill hover states */
+  --modes-color-status-custom-lime-default: #637700; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-lime-default-alt: #eff1e6; /* Pill bg */
+  --modes-color-status-custom-lime-hover: #546408; /* used on pill hover states */
+  --modes-color-status-custom-lime-hover-alt: #cdddc9; /* used on pill hover states */
+  --modes-color-status-custom-orange-default: #C54300; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-orange-default-alt: #feece5; /* Pill bg */
+  --modes-color-status-custom-orange-hover: #a53a06; /* used on pill hover states */
+  --modes-color-status-custom-orange-hover-alt: #f2d0ce; /* used on pill hover states */
+  --modes-color-status-custom-red-default: #DC004E; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-red-default-alt: #ffebec; /* Pill bg */
+  --modes-color-status-custom-red-hover: #b81242; /* used on pill hover states */
+  --modes-color-status-custom-red-hover-alt: #f1cfd9; /* used on pill hover states */
+  --modes-color-status-custom-pink-default: #C8269A; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-pink-default-alt: #fcecf5; /* Pill bg */
+  --modes-color-status-custom-pink-hover: #a82581; /* used on pill hover states */
+  --modes-color-status-custom-pink-hover-alt: #ead2e5; /* used on pill hover states */
+  --modes-color-status-custom-purple-default: #8F4CD7; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-purple-default-alt: #f5edfc; /* Pill bg */
+  --modes-color-status-custom-purple-hover: #7941b4; /* used on pill hover states */
+  --modes-color-status-custom-purple-hover-alt: #ded4ee; /* used on pill hover states */
+  --modes-color-status-custom-gray-default: #6F6F6F; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-gray-default-alt: #f0f0f0; /* Pill bg */
+  --modes-color-status-custom-gray-hover: #5e5e5e; /* used on pill hover states */
+  --modes-color-status-custom-gray-hover-alt: #d3d9e5; /* used on pill hover states */
+  --modes-color-status-custom-slate-default: #527386; /* For pills. Not accessible with white TEXT. */
+  --modes-color-status-custom-slate-default-alt: #edf0f2; /* Pill bg */
+  --modes-color-status-custom-slate-hover: #466171; /* used on pill hover states */
+  --modes-color-status-custom-slate-hover-alt: #cbdae6; /* used on pill hover states */
+  --modes-color-status-generic-default: #F0F; /* TO BE DETLETED: Was #007c7b and used in Progress bar, dataVis colour. */
+  --modes-color-status-important-default: #8F4CD7; /* For tile status keylines to show if something is of high importance. */
+  --modes-color-status-important-default-alt: #f5edfc; /* Subtle message bg */
+  --modes-color-status-important-hover: #7941b4; /* used on pill hover states */
+  --modes-color-status-important-hover-alt: #ded4ee; /* used on pill hover states and message bg */
+  --modes-color-status-important-inverse-default: #985FDC;
+  --modes-color-status-important-inverse-default-alt: #1b1422; /* Subtle message bg */
+  --modes-color-status-important-inverse-hover: #a977e2; /* used on pill hover states */
+  --modes-color-status-important-inverse-hover-alt: #282039; /* used on pill hover states and message bg */
   --modes-color-status-inactive-default: #a6a6a6; /* For readonly pill bg and border */
   --modes-color-status-inactive-with-default: #000000ab; /* For readonly filled pill text */
   --modes-color-status-inactive-inverse-default: #4b4b4b; /* For readonly pill bg and border */
   --modes-color-status-inactive-inverse-with-default: #ffffffab; /* For readonly filled pill text */
-  --modes-color-status-important-default: #8F4CD7; /* For tile status keylines to show if something is of high importance. */
   --modes-color-status-info-default: #0060A7; /* For pills and messages. Not accessible with white TEXT. */
   --modes-color-status-info-default-alt: #eaeef6; /* Subtle message bg */
   --modes-color-status-info-hover: #10518c; /* used on pill hover states */
@@ -256,8 +305,6 @@
   --modes-color-status-positive-inverse-default-alt: #0e1a0b; /* Subtle message bg */
   --modes-color-status-positive-inverse-hover: #328e37; /* used on pill hover states */
   --modes-color-status-positive-inverse-hover-alt: #132912; /* used on pill hover states and message bg */
-  --modes-color-status-callout-default-alt: #e5fae2; /* used for marketing banners */
-  --modes-color-status-callout-hover-alt: #d8ecd5; /* used for marketing banners */
   --modes-color-status-reviews-default: #00811F;
   --modes-color-status-reviews-default-alt: linear-gradient(90deg, #00811F 0%, #00811F 50%, #d1d1d1 50%, #d1d1d1 100%); /* half fill */
   --modes-color-status-reviews-hover: #0e6d1d;