@sage/design-tokens 14.0.1 → 14.2.0

package/css/product/large/light.css

@@ -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/product/small/components/progress.css

@@ -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/product/small/components/status.css

@@ -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,12 +26,53 @@
   --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);
   --status-color-pill-error-inverse-bg-default: var(--modes-color-status-negative-inverse-default);
   --status-color-pill-error-inverse-bg-alt-default: var(--modes-color-status-negative-inverse-default-alt); /* outline pill bg */
   --status-color-pill-error-inverse-border-default: var(--modes-color-status-negative-inverse-default);
+  --status-color-pill-important-bg-default: var(--modes-color-status-important-default);
+  --status-color-pill-important-bg-alt-default: var(--modes-color-status-important-default-alt); /* outline pill bg */
+  --status-color-pill-important-border-default: var(--modes-color-status-important-default);
+  --status-color-pill-important-inverse-bg-default: var(--modes-color-status-important-inverse-default);
+  --status-color-pill-important-inverse-bg-alt-default: var(--modes-color-status-important-inverse-default-alt); /* outline pill bg */
+  --status-color-pill-important-inverse-border-default: var(--modes-color-status-important-inverse-default);
   --status-color-pill-info-bg-default: var(--modes-color-status-info-default);
   --status-color-pill-info-bg-alt-default: var(--modes-color-status-info-default-alt); /* outline pill bg */
   --status-color-pill-info-border-default: var(--modes-color-status-info-default);
@@ -79,19 +115,43 @@
   --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-important-bg-alt-hover: var(--modes-color-status-important-hover-alt);
+  --status-color-pill-important-bg-hover: var(--modes-color-status-important-hover);
+  --status-color-pill-important-inverse-bg-alt-hover: var(--modes-color-status-important-inverse-hover-alt);
+  --status-color-pill-important-inverse-bg-hover: var(--modes-color-status-important-inverse-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 +160,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 +169,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/product/small/components/table.css

@@ -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/product/small/dark.css

@@ -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/product/small/light.css

@@ -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/ios/frozenproduct/large/dark/components/container.h

@@ -54,7 +54,7 @@
 #define containerColorStandardStatusborderBgAi linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)
 #define containerColorStandardStatusborderBgCaution #E04500
 #define containerColorStandardStatusborderBgNegative #E13E53
-#define containerColorStandardStatusborderBgImportant #985FDC
+#define containerColorStandardStatusborderBgImportant #8F4CD7
 #define containerColorStandardStatusborderBgInfo #007ED9
 #define containerColorStandardStatusborderBgNeutral #7C7C7C
 #define containerColorStandardStatusborderBgPositive #009023

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

@@ -47,7 +47,7 @@
 #define progressColorFgInfo #007ED9
 #define progressColorLabelAlt #ffffffab
 #define progressColorLabelDefault #fffffff2
-#define progressColorDatavisFgDefault #008a89
+#define progressColorDatavisFgDefault #008A89
 #define progressColorLoaderBgDefault #ffffff14
 #define progressColorLoaderFgDefault #FFFFFF
 #define progressColorLoaderFgError #E13E53

package/ios/frozenproduct/large/dark/components/status.h

@@ -10,17 +10,6 @@
 #import <UIKit/UIKit.h>
 
 #define statusColorNone #fff0
-#define statusColorMessageGlobalLabelDefault #fffffff2
-#define statusColorMessageGlobalLabelHover #FFFFFF
-#define statusColorMessageGlobalCalloutBgDefault #122211
-#define statusColorMessageGlobalCalloutBgHover #263525
-#define statusColorMessageGlobalCalloutIcon #fffffff2
-#define statusColorMessageGlobalInfoBgDefault #111722
-#define statusColorMessageGlobalInfoBgHover #17253a
-#define statusColorMessageGlobalInfoIcon #007ED9
-#define statusColorMessageGlobalWarningBgDefault #251206
-#define statusColorMessageGlobalWarningBgHover #3e1a0b
-#define statusColorMessageGlobalWarningIcon #E04500
 #define statusColorMessageContextualBg #000000
 #define statusColorMessageContextualIcon #000000
 #define statusColorMessageContextualIconAlt #7C7C7C
@@ -46,14 +35,67 @@
 #define statusColorMessageContextualWarningBgAlt #251206
 #define statusColorMessageContextualWarningBorderDefault #E04500
 #define statusColorMessageContextualWarningIcon #E04500
-#define statusColorPillGenericLabelDefault #000000
-#define statusColorPillGenericLabelHover #000000
-#define statusColorPillGenericLabelAltDefault #fffffff2
-#define statusColorPillGenericLabelAltHover #fffffff2
-#define statusColorPillGenericInverseLabelDefault #FFFFFF
-#define statusColorPillGenericInverseLabelHover #FFFFFF
-#define statusColorPillGenericInverseLabelAltDefault #000000f2
-#define statusColorPillGenericInverseLabelAltHover #000000f2
+#define statusColorMessageGlobalLabelDefault #fffffff2
+#define statusColorMessageGlobalLabelHover #FFFFFF
+#define statusColorMessageGlobalCalloutBgDefault #122211
+#define statusColorMessageGlobalCalloutBgHover #263525
+#define statusColorMessageGlobalCalloutIcon #fffffff2
+#define statusColorMessageGlobalInfoBgDefault #111722
+#define statusColorMessageGlobalInfoBgHover #17253a
+#define statusColorMessageGlobalInfoIcon #007ED9
+#define statusColorMessageGlobalWarningBgDefault #251206
+#define statusColorMessageGlobalWarningBgHover #3e1a0b
+#define statusColorMessageGlobalWarningIcon #E04500
+#define statusColorPillCustomBlueBgDefault #007FD9
+#define statusColorPillCustomBlueBgAltDefault #0d1219
+#define statusColorPillCustomBlueBgAltHover #142131
+#define statusColorPillCustomBlueBgHover #4f91df
+#define statusColorPillCustomBlueBorderDefault #007FD9
+#define statusColorPillCustomTealBgDefault #008A89
+#define statusColorPillCustomTealBgAltDefault #0a1313
+#define statusColorPillCustomTealBgAltHover #082427
+#define statusColorPillCustomTealBgHover #449b9a
+#define statusColorPillCustomTealBorderDefault #008A89
+#define statusColorPillCustomGreenBgDefault #009023
+#define statusColorPillCustomGreenBgAltDefault #0a1408
+#define statusColorPillCustomGreenBgAltHover #0b2418
+#define statusColorPillCustomGreenBgHover #44a146
+#define statusColorPillCustomGreenBorderDefault #009023
+#define statusColorPillCustomLimeBgDefault #6E8500
+#define statusColorPillCustomLimeBgAltDefault #111205
+#define statusColorPillCustomLimeBgAltHover #162311
+#define statusColorPillCustomLimeBgHover #859635
+#define statusColorPillCustomLimeBorderDefault #6E8500
+#define statusColorPillCustomOrangeBgDefault #DB4B00
+#define statusColorPillCustomOrangeBgAltDefault #1c0e04
+#define statusColorPillCustomOrangeBgAltHover #331816
+#define statusColorPillCustomOrangeBgHover #e66930
+#define statusColorPillCustomOrangeBorderDefault #DB4B00
+#define statusColorPillCustomRedBgDefault #F50058
+#define statusColorPillCustomRedBgAltDefault #1e0d0d
+#define statusColorPillCustomRedBgAltHover #331720
+#define statusColorPillCustomRedBgHover #fc4e6e
+#define statusColorPillCustomRedBorderDefault #F50058
+#define statusColorPillCustomPinkBgDefault #DD2BAB
+#define statusColorPillCustomPinkBgAltDefault #1b0d16
+#define statusColorPillCustomPinkBgAltHover #2d192b
+#define statusColorPillCustomPinkBgHover #e558b7
+#define statusColorPillCustomPinkBorderDefault #DD2BAB
+#define statusColorPillCustomPurpleBgDefault #985FDC
+#define statusColorPillCustomPurpleBgAltDefault #150f19
+#define statusColorPillCustomPurpleBgAltHover #231c30
+#define statusColorPillCustomPurpleBgHover #a977e2
+#define statusColorPillCustomPurpleBorderDefault #985FDC
+#define statusColorPillCustomGrayBgDefault #7C7C7C
+#define statusColorPillCustomGrayBgAltDefault #111
+#define statusColorPillCustomGrayBgAltHover #1a202b
+#define statusColorPillCustomGrayBgHover #8e8e8e
+#define statusColorPillCustomGrayBorderDefault #7C7C7C
+#define statusColorPillCustomSlateBgDefault #5C8196
+#define statusColorPillCustomSlateBgAltDefault #0f1214
+#define statusColorPillCustomSlateBgAltHover #13222c
+#define statusColorPillCustomSlateBgHover #7493a5
+#define statusColorPillCustomSlateBorderDefault #5C8196
 #define statusColorPillErrorBgDefault #E13E53
 #define statusColorPillErrorBgAltDefault #241212
 #define statusColorPillErrorBgAltHover #3d1a1c
@@ -64,6 +106,24 @@
 #define statusColorPillErrorInverseBgAltHover #f9d3d1
 #define statusColorPillErrorInverseBgHover #ac3240
 #define statusColorPillErrorInverseBorderDefault #CD384B
+#define statusColorPillGenericLabelDefault #000000
+#define statusColorPillGenericLabelHover #000000
+#define statusColorPillGenericLabelAltDefault #fffffff2
+#define statusColorPillGenericLabelAltHover #fffffff2
+#define statusColorPillGenericInverseLabelDefault #FFFFFF
+#define statusColorPillGenericInverseLabelHover #FFFFFF
+#define statusColorPillGenericInverseLabelAltDefault #000000f2
+#define statusColorPillGenericInverseLabelAltHover #000000f2
+#define statusColorPillImportantBgDefault #8F4CD7
+#define statusColorPillImportantBgAltDefault #150d19
+#define statusColorPillImportantBgAltHover #231b30
+#define statusColorPillImportantBgHover #a267de
+#define statusColorPillImportantBorderDefault #8F4CD7
+#define statusColorPillImportantInverseBgDefault #985FDC
+#define statusColorPillImportantInverseBgAltDefault #f1e6fa
+#define statusColorPillImportantInverseBgAltHover #daceed
+#define statusColorPillImportantInverseBgHover #8051b8
+#define statusColorPillImportantInverseBorderDefault #985FDC
 #define statusColorPillInfoBgDefault #007ED9
 #define statusColorPillInfoBgAltDefault #111722
 #define statusColorPillInfoBgAltHover #17253a
@@ -84,6 +144,9 @@
 #define statusColorPillNeutralInverseBgAltHover #d9d9d9
 #define statusColorPillNeutralInverseBgHover #696969
 #define statusColorPillNeutralInverseBorderDefault #656565
+#define statusColorPillReadonlyBgDefault #4b4b4b
+#define statusColorPillReadonlyBorderDefault #4b4b4b
+#define statusColorPillReadonlyLabel #ffffffab
 #define statusColorPillSuccessBgDefault #009023
 #define statusColorPillSuccessBgAltDefault #0e1a0b
 #define statusColorPillSuccessBgAltHover #132912
@@ -104,9 +167,6 @@
 #define statusColorPillWarningInverseBgAltHover #fed5c3
 #define statusColorPillWarningInverseBgHover #b33b0d
 #define statusColorPillWarningInverseBorderDefault #D64309
-#define statusColorPillReadonlyBgDefault #4b4b4b
-#define statusColorPillReadonlyBorderDefault #4b4b4b
-#define statusColorPillReadonlyLabel #ffffffab
 #define statusColorRatingBgDefault #00D639
 #define statusColorRatingBgDefaultAlt linear-gradient(90deg, #00D639 0%, #00D639 50%, #282828 50%, #282828  100%)
 #define statusColorRatingBgHover #17b333

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

@@ -71,7 +71,7 @@
 #define tableSizeRowDoubleheightL 96
 #define tableSizeRowDoubleheightXl 128
 #define tableSizeIconXs 16
-#define tableSizeIconS 16
+#define tableSizeIconS 20
 #define tableSizeIconM 20
 #define tableSizeIconL 24
 #define tableSizeIconXl 32