@sage/design-tokens 17.3.0 → 17.4.0

package/css/components/badge.css

@@ -8,13 +8,13 @@
 
 :root {
   --badge-none: var(--mode-color-none);
-  --badge-border-default: var(--mode-color-generic-txt-nought);
   --badge-bg-default: var(--mode-color-status-negative-default);
+  --badge-border-default: var(--mode-color-generic-bg-nought);
   --badge-bg-alt: var(--mode-color-status-info-default);
-  --badge-label-default: var(--mode-color-generic-txt-nought);
-  --badge-label-alt: var(--mode-color-generic-txt-nought);
-  --badge-inverse-border-default: var(--mode-color-generic-txt-extreme);
+  --badge-label-default: var(--mode-color-generic-txt-inverse-extreme);
+  --badge-label-alt: var(--mode-color-generic-txt-inverse-extreme);
   --badge-inverse-bg-default: var(--mode-color-status-negative-inverse-default);
+  --badge-inverse-border-default: var(--mode-color-generic-bg-inverse-nought);
   --badge-inverse-bg-alt: var(--mode-color-status-info-inverse-default);
   --badge-inverse-label-default: var(--mode-color-generic-txt-extreme);
   --badge-inverse-label-alt: var(--mode-color-generic-txt-extreme);

package/css/components/dataviz.css

@@ -7,7 +7,7 @@
  */
 
 :root {
-  --dataviz-generic-label-alt: var(--mode-color-generic-txt-nought);
+  --dataviz-generic-label-alt: var(--mode-color-generic-txt-inverse-extreme);
   --dataviz-generic-label-default: var(--mode-color-generic-txt-extreme);
   --dataviz-generic-blue-bg-alt: var(--mode-color-colorcode-blue-deep);
   --dataviz-generic-blue-bg-default: var(--mode-color-colorcode-blue-muted);

package/css/components/pill.css

@@ -118,6 +118,86 @@
   --pill-warn-inverse-bg-alt-hover: var(--mode-color-status-warning-inverse-hover-alt);
   --pill-warn-inverse-bg-hover: var(--mode-color-status-warning-inverse-hover);
   --pill-warn-inverse-border-default: var(--mode-color-status-warning-inverse-default);
+  --pill-blue-bg-default: var(--mode-color-status-info-default);
+  --pill-blue-bg-alt-default: var(--mode-color-status-info-default-alt);
+  --pill-blue-bg-alt-hover: var(--mode-color-status-info-hover-alt);
+  --pill-blue-bg-hover: var(--mode-color-status-info-hover);
+  --pill-blue-border-default: var(--mode-color-status-info-default);
+  --pill-blue-inverse-bg-default: var(--mode-color-status-info-inverse-default);
+  --pill-blue-inverse-bg-alt-default: var(--mode-color-status-info-inverse-default-alt);
+  --pill-blue-inverse-bg-alt-hover: var(--mode-color-status-info-inverse-hover-alt);
+  --pill-blue-inverse-bg-hover: var(--mode-color-status-info-inverse-hover);
+  --pill-blue-inverse-border-default: var(--mode-color-status-info-inverse-default);
+  --pill-green-bg-default: var(--mode-color-status-positive-default);
+  --pill-green-bg-alt-default: var(--mode-color-status-positive-default-alt);
+  --pill-green-bg-alt-hover: var(--mode-color-status-positive-hover-alt);
+  --pill-green-bg-hover: var(--mode-color-status-positive-hover);
+  --pill-green-border-default: var(--mode-color-status-positive-default);
+  --pill-green-inverse-bg-default: var(--mode-color-status-positive-inverse-default);
+  --pill-green-inverse-bg-alt-default: var(--mode-color-status-positive-inverse-default-alt);
+  --pill-green-inverse-bg-alt-hover: var(--mode-color-status-positive-inverse-hover-alt);
+  --pill-green-inverse-bg-hover: var(--mode-color-status-positive-inverse-hover);
+  --pill-green-inverse-border-default: var(--mode-color-status-positive-inverse-default);
+  --pill-gray-bg-default: var(--mode-color-status-neutral-default);
+  --pill-gray-bg-alt-default: var(--mode-color-status-neutral-default-alt);
+  --pill-gray-bg-alt-hover: var(--mode-color-status-neutral-hover-alt);
+  --pill-gray-bg-hover: var(--mode-color-status-neutral-hover);
+  --pill-gray-border-default: var(--mode-color-status-neutral-default);
+  --pill-gray-inverse-bg-default: var(--mode-color-status-neutral-inverse-default);
+  --pill-gray-inverse-bg-alt-default: var(--mode-color-status-neutral-inverse-default-alt);
+  --pill-gray-inverse-bg-alt-hover: var(--mode-color-status-neutral-inverse-hover-alt);
+  --pill-gray-inverse-bg-hover: var(--mode-color-status-neutral-inverse-hover);
+  --pill-gray-inverse-border-default: var(--mode-color-status-neutral-inverse-default);
+  --pill-lime-bg-default: var(--mode-color-status-custom-lime-default);
+  --pill-lime-bg-alt-default: var(--mode-color-status-custom-lime-default-alt);
+  --pill-lime-bg-alt-hover: var(--mode-color-status-custom-lime-hover-alt);
+  --pill-lime-bg-hover: var(--mode-color-status-custom-lime-hover);
+  --pill-lime-border-default: var(--mode-color-status-custom-lime-default);
+  --pill-orange-bg-default: var(--mode-color-status-warning-default);
+  --pill-orange-bg-alt-default: var(--mode-color-status-warning-default-alt);
+  --pill-orange-bg-alt-hover: var(--mode-color-status-warning-hover-alt);
+  --pill-orange-bg-hover: var(--mode-color-status-warning-hover);
+  --pill-orange-border-default: var(--mode-color-status-warning-default);
+  --pill-orange-inverse-bg-default: var(--mode-color-status-warning-inverse-default);
+  --pill-orange-inverse-bg-alt-default: var(--mode-color-status-warning-inverse-default-alt);
+  --pill-orange-inverse-bg-alt-hover: var(--mode-color-status-warning-inverse-hover-alt);
+  --pill-orange-inverse-bg-hover: var(--mode-color-status-warning-inverse-hover);
+  --pill-orange-inverse-border-default: var(--mode-color-status-warning-inverse-default);
+  --pill-pink-bg-default: var(--mode-color-status-custom-pink-default);
+  --pill-pink-bg-alt-default: var(--mode-color-status-custom-pink-default-alt);
+  --pill-pink-bg-alt-hover: var(--mode-color-status-custom-pink-hover-alt);
+  --pill-pink-bg-hover: var(--mode-color-status-custom-pink-hover);
+  --pill-pink-border-default: var(--mode-color-status-custom-pink-default);
+  --pill-purple-bg-default: var(--mode-color-status-priority-default);
+  --pill-purple-bg-alt-default: var(--mode-color-status-priority-default-alt);
+  --pill-purple-bg-alt-hover: var(--mode-color-status-priority-hover-alt);
+  --pill-purple-bg-hover: var(--mode-color-status-priority-hover);
+  --pill-purple-border-default: var(--mode-color-status-priority-default);
+  --pill-purple-inverse-bg-default: var(--mode-color-status-priority-default);
+  --pill-purple-inverse-bg-alt-default: var(--mode-color-status-priority-inverse-default-alt);
+  --pill-purple-inverse-bg-alt-hover: var(--mode-color-status-priority-inverse-hover-alt);
+  --pill-purple-inverse-bg-hover: var(--mode-color-status-priority-hover);
+  --pill-purple-inverse-border-default: var(--mode-color-status-priority-default);
+  --pill-red-bg-default: var(--mode-color-status-negative-default);
+  --pill-red-bg-alt-default: var(--mode-color-status-negative-default-alt);
+  --pill-red-bg-alt-hover: var(--mode-color-status-negative-hover-alt);
+  --pill-red-bg-hover: var(--mode-color-status-negative-hover);
+  --pill-red-border-default: var(--mode-color-status-negative-default);
+  --pill-red-inverse-bg-default: var(--mode-color-status-negative-inverse-default);
+  --pill-red-inverse-bg-alt-default: var(--mode-color-status-negative-inverse-default-alt);
+  --pill-red-inverse-bg-alt-hover: var(--mode-color-status-negative-inverse-hover-alt);
+  --pill-red-inverse-bg-hover: var(--mode-color-status-negative-inverse-hover);
+  --pill-red-inverse-border-default: var(--mode-color-status-negative-inverse-default);
+  --pill-slate-bg-default: var(--mode-color-status-custom-slate-default);
+  --pill-slate-bg-alt-default: var(--mode-color-status-custom-slate-default-alt);
+  --pill-slate-bg-alt-hover: var(--mode-color-status-custom-slate-hover-alt);
+  --pill-slate-bg-hover: var(--mode-color-status-custom-slate-hover);
+  --pill-slate-border-default: var(--mode-color-status-custom-slate-default);
+  --pill-teal-bg-default: var(--mode-color-status-custom-teal-default);
+  --pill-teal-bg-alt-default: var(--mode-color-status-custom-teal-default-alt);
+  --pill-teal-bg-alt-hover: var(--mode-color-status-custom-teal-hover-alt);
+  --pill-teal-bg-hover: var(--mode-color-status-custom-teal-hover);
+  --pill-teal-border-default: var(--mode-color-status-custom-teal-default);
   --pill-generic-label-default: var(--mode-color-status-txt-with-default);
   --pill-generic-label-hover: var(--mode-color-status-txt-with-hover);
   --pill-generic-inverse-label-default: var(--mode-color-status-txt-inverse-with-default);

package/css/components/progress.css

@@ -18,7 +18,7 @@
   --progress-dataviz-fg-default: var(--mode-color-status-custom-teal-default);
   --progress-loader-bg-default: var(--mode-color-generic-bg-delicate);
   --progress-loader-bg-skeleton: linear-gradient(135deg, var(--mode-color-status-skeleton-stop-1) 15%, var(--mode-color-status-skeleton-stop-2) 85%);
-  --progress-loader-fg-default: var(--mode-color-generic-fg-extreme);
+  --progress-loader-fg-default: var(--mode-color-generic-fg-inverse-nought);
   --progress-loader-fg-error: var(--mode-color-status-negative-default);
   --progress-loader-fg-complete: var(--mode-color-status-positive-default);
   --progress-loader-inverse-bg-default: var(--mode-color-generic-bg-inverse-delicate);

package/css/dark.css

@@ -272,10 +272,10 @@
   --mode-color-status-custom-gray-default-alt: #0b0b0b;
   --mode-color-status-custom-gray-hover: #8b8b8b;
   --mode-color-status-custom-gray-hover-alt: #181818;
-  --mode-color-status-custom-slate-default: #6b7f8d;
-  --mode-color-status-custom-slate-default-alt: #050a0e;
-  --mode-color-status-custom-slate-hover: #738ea0;
-  --mode-color-status-custom-slate-hover-alt: #101a20;
+  --mode-color-status-custom-slate-default: #6a7986;
+  --mode-color-status-custom-slate-default-alt: #253b4e;
+  --mode-color-status-custom-slate-hover: #75838f;
+  --mode-color-status-custom-slate-hover-alt: #304658;
   --mode-color-status-priority-default: #9463d7;
   --mode-color-status-priority-default-alt: #10041f;
   --mode-color-status-priority-hover: #a375dd;

package/css/light.css

@@ -77,6 +77,7 @@
   --mode-color-generic-txt-inverse-soft: #ffffff8c;
   --mode-color-generic-txt-inverse-delicate: #ffffff6b;
   --mode-color-generic-txt-inverse-faint: #ffffff4d;
+  --mode-color-generic-txt-inverse-faint-copy: #ffffff4d;
   --mode-color-generic-txt-inverse-nought: #000000;
   --mode-color-generic-fg-nought: #FFFFFF;
   --mode-color-generic-fg-delicate: #e8eaec;
@@ -272,10 +273,10 @@
   --mode-color-status-custom-gray-default-alt: #f8f8f8;
   --mode-color-status-custom-gray-hover: #616161;
   --mode-color-status-custom-gray-hover-alt: #eeeeee;
-  --mode-color-status-custom-slate-default: #527386;
-  --mode-color-status-custom-slate-default-alt: #f4f9fc;
-  --mode-color-status-custom-slate-hover: #486576;
-  --mode-color-status-custom-slate-hover-alt: #e4eff5;
+  --mode-color-status-custom-slate-default: #536574;
+  --mode-color-status-custom-slate-default-alt: #f4f5f6;
+  --mode-color-status-custom-slate-hover: #475a6a;
+  --mode-color-status-custom-slate-hover-alt: #e8eaec;
   --mode-color-status-priority-default: #8f4bd7;
   --mode-color-status-priority-default-alt: #f9f6ff;
   --mode-color-status-priority-hover: #803ec5;

package/js/common/components/badge.d.ts

@@ -21,14 +21,14 @@ declare interface DesignToken {
 declare const tokens: {
   badge: {
     none: DesignToken;
-    "border-default": DesignToken;
     "bg-default": DesignToken;
+    "border-default": DesignToken;
     "bg-alt": DesignToken;
     "label-default": DesignToken;
     "label-alt": DesignToken;
     inverse: {
-      "border-default": DesignToken;
       "bg-default": DesignToken;
+      "border-default": DesignToken;
       "bg-alt": DesignToken;
       "label-default": DesignToken;
       "label-alt": DesignToken;

package/js/common/components/badge.js

@@ -3,13 +3,13 @@
  */
 
 module.exports.badgeNone = "var(--mode-color-none)";
-module.exports.badgeBorderDefault = "var(--mode-color-generic-txt-nought)";
 module.exports.badgeBgDefault = "var(--mode-color-status-negative-default)";
+module.exports.badgeBorderDefault = "var(--mode-color-generic-bg-nought)";
 module.exports.badgeBgAlt = "var(--mode-color-status-info-default)";
-module.exports.badgeLabelDefault = "var(--mode-color-generic-txt-nought)";
-module.exports.badgeLabelAlt = "var(--mode-color-generic-txt-nought)";
-module.exports.badgeInverseBorderDefault = "var(--mode-color-generic-txt-extreme)";
+module.exports.badgeLabelDefault = "var(--mode-color-generic-txt-inverse-extreme)";
+module.exports.badgeLabelAlt = "var(--mode-color-generic-txt-inverse-extreme)";
 module.exports.badgeInverseBgDefault = "var(--mode-color-status-negative-inverse-default)";
+module.exports.badgeInverseBorderDefault = "var(--mode-color-generic-bg-inverse-nought)";
 module.exports.badgeInverseBgAlt = "var(--mode-color-status-info-inverse-default)";
 module.exports.badgeInverseLabelDefault = "var(--mode-color-generic-txt-extreme)";
 module.exports.badgeInverseLabelAlt = "var(--mode-color-generic-txt-extreme)";

package/js/common/components/dataviz.js

@@ -2,7 +2,7 @@
  * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
  */
 
-module.exports.datavizGenericLabelAlt = "var(--mode-color-generic-txt-nought)";
+module.exports.datavizGenericLabelAlt = "var(--mode-color-generic-txt-inverse-extreme)";
 module.exports.datavizGenericLabelDefault = "var(--mode-color-generic-txt-extreme)";
 module.exports.datavizGenericBlueBgAlt = "var(--mode-color-colorcode-blue-deep)";
 module.exports.datavizGenericBlueBgDefault = "var(--mode-color-colorcode-blue-muted)";

package/js/common/components/pill.d.ts

@@ -194,5 +194,117 @@ declare const tokens: {
         "border-default": DesignToken;
       };
     };
+    blue: {
+      "bg-default": DesignToken;
+      "bgAlt-default": DesignToken;
+      "bgAlt-hover": DesignToken;
+      "bg-hover": DesignToken;
+      "border-default": DesignToken;
+      inverse: {
+        "bg-default": DesignToken;
+        "bgAlt-default": DesignToken;
+        "bgAlt-hover": DesignToken;
+        "bg-hover": DesignToken;
+        "border-default": DesignToken;
+      };
+    };
+    green: {
+      "bg-default": DesignToken;
+      "bgAlt-default": DesignToken;
+      "bgAlt-hover": DesignToken;
+      "bg-hover": DesignToken;
+      "border-default": DesignToken;
+      inverse: {
+        "bg-default": DesignToken;
+        "bgAlt-default": DesignToken;
+        "bgAlt-hover": DesignToken;
+        "bg-hover": DesignToken;
+        "border-default": DesignToken;
+      };
+    };
+    gray: {
+      "bg-default": DesignToken;
+      "bgAlt-default": DesignToken;
+      "bgAlt-hover": DesignToken;
+      "bg-hover": DesignToken;
+      "border-default": DesignToken;
+      inverse: {
+        "bg-default": DesignToken;
+        "bgAlt-default": DesignToken;
+        "bgAlt-hover": DesignToken;
+        "bg-hover": DesignToken;
+        "border-default": DesignToken;
+      };
+    };
+    lime: {
+      "bg-default": DesignToken;
+      "bgAlt-default": DesignToken;
+      "bgAlt-hover": DesignToken;
+      "bg-hover": DesignToken;
+      "border-default": DesignToken;
+    };
+    orange: {
+      "bg-default": DesignToken;
+      "bgAlt-default": DesignToken;
+      "bgAlt-hover": DesignToken;
+      "bg-hover": DesignToken;
+      "border-default": DesignToken;
+      inverse: {
+        "bg-default": DesignToken;
+        "bgAlt-default": DesignToken;
+        "bgAlt-hover": DesignToken;
+        "bg-hover": DesignToken;
+        "border-default": DesignToken;
+      };
+    };
+    pink: {
+      "bg-default": DesignToken;
+      "bgAlt-default": DesignToken;
+      "bgAlt-hover": DesignToken;
+      "bg-hover": DesignToken;
+      "border-default": DesignToken;
+    };
+    purple: {
+      "bg-default": DesignToken;
+      "bgAlt-default": DesignToken;
+      "bgAlt-hover": DesignToken;
+      "bg-hover": DesignToken;
+      "border-default": DesignToken;
+      inverse: {
+        "bg-default": DesignToken;
+        "bgAlt-default": DesignToken;
+        "bgAlt-hover": DesignToken;
+        "bg-hover": DesignToken;
+        "border-default": DesignToken;
+      };
+    };
+    red: {
+      "bg-default": DesignToken;
+      "bgAlt-default": DesignToken;
+      "bgAlt-hover": DesignToken;
+      "bg-hover": DesignToken;
+      "border-default": DesignToken;
+      inverse: {
+        "bg-default": DesignToken;
+        "bgAlt-default": DesignToken;
+        "bgAlt-hover": DesignToken;
+        "bg-hover": DesignToken;
+        "border-default": DesignToken;
+      };
+    };
+    slate: {
+      "bg-default": DesignToken;
+      "bgAlt-default": DesignToken;
+      "bgAlt-hover": DesignToken;
+      "bg-hover": DesignToken;
+      "border-default": DesignToken;
+    };
+    teal: {
+      "bg-default": DesignToken;
+      "bgAlt-default": DesignToken;
+      "bgAlt-hover": DesignToken;
+      "bg-hover": DesignToken;
+      "border-default": DesignToken;
+    };
   };
 };

package/js/common/components/pill.js

@@ -124,3 +124,83 @@ module.exports.pillWarnInverseBgAltDefault = "var(--mode-color-status-warning-in
 module.exports.pillWarnInverseBgAltHover = "var(--mode-color-status-warning-inverse-hover-alt)";
 module.exports.pillWarnInverseBgHover = "var(--mode-color-status-warning-inverse-hover)";
 module.exports.pillWarnInverseBorderDefault = "var(--mode-color-status-warning-inverse-default)";
+module.exports.pillBlueBgDefault = "var(--mode-color-status-info-default)";
+module.exports.pillBlueBgAltDefault = "var(--mode-color-status-info-default-alt)";
+module.exports.pillBlueBgAltHover = "var(--mode-color-status-info-hover-alt)";
+module.exports.pillBlueBgHover = "var(--mode-color-status-info-hover)";
+module.exports.pillBlueBorderDefault = "var(--mode-color-status-info-default)";
+module.exports.pillBlueInverseBgDefault = "var(--mode-color-status-info-inverse-default)";
+module.exports.pillBlueInverseBgAltDefault = "var(--mode-color-status-info-inverse-default-alt)";
+module.exports.pillBlueInverseBgAltHover = "var(--mode-color-status-info-inverse-hover-alt)";
+module.exports.pillBlueInverseBgHover = "var(--mode-color-status-info-inverse-hover)";
+module.exports.pillBlueInverseBorderDefault = "var(--mode-color-status-info-inverse-default)";
+module.exports.pillGreenBgDefault = "var(--mode-color-status-positive-default)";
+module.exports.pillGreenBgAltDefault = "var(--mode-color-status-positive-default-alt)";
+module.exports.pillGreenBgAltHover = "var(--mode-color-status-positive-hover-alt)";
+module.exports.pillGreenBgHover = "var(--mode-color-status-positive-hover)";
+module.exports.pillGreenBorderDefault = "var(--mode-color-status-positive-default)";
+module.exports.pillGreenInverseBgDefault = "var(--mode-color-status-positive-inverse-default)";
+module.exports.pillGreenInverseBgAltDefault = "var(--mode-color-status-positive-inverse-default-alt)";
+module.exports.pillGreenInverseBgAltHover = "var(--mode-color-status-positive-inverse-hover-alt)";
+module.exports.pillGreenInverseBgHover = "var(--mode-color-status-positive-inverse-hover)";
+module.exports.pillGreenInverseBorderDefault = "var(--mode-color-status-positive-inverse-default)";
+module.exports.pillGrayBgDefault = "var(--mode-color-status-neutral-default)";
+module.exports.pillGrayBgAltDefault = "var(--mode-color-status-neutral-default-alt)";
+module.exports.pillGrayBgAltHover = "var(--mode-color-status-neutral-hover-alt)";
+module.exports.pillGrayBgHover = "var(--mode-color-status-neutral-hover)";
+module.exports.pillGrayBorderDefault = "var(--mode-color-status-neutral-default)";
+module.exports.pillGrayInverseBgDefault = "var(--mode-color-status-neutral-inverse-default)";
+module.exports.pillGrayInverseBgAltDefault = "var(--mode-color-status-neutral-inverse-default-alt)";
+module.exports.pillGrayInverseBgAltHover = "var(--mode-color-status-neutral-inverse-hover-alt)";
+module.exports.pillGrayInverseBgHover = "var(--mode-color-status-neutral-inverse-hover)";
+module.exports.pillGrayInverseBorderDefault = "var(--mode-color-status-neutral-inverse-default)";
+module.exports.pillLimeBgDefault = "var(--mode-color-status-custom-lime-default)";
+module.exports.pillLimeBgAltDefault = "var(--mode-color-status-custom-lime-default-alt)";
+module.exports.pillLimeBgAltHover = "var(--mode-color-status-custom-lime-hover-alt)";
+module.exports.pillLimeBgHover = "var(--mode-color-status-custom-lime-hover)";
+module.exports.pillLimeBorderDefault = "var(--mode-color-status-custom-lime-default)";
+module.exports.pillOrangeBgDefault = "var(--mode-color-status-warning-default)";
+module.exports.pillOrangeBgAltDefault = "var(--mode-color-status-warning-default-alt)";
+module.exports.pillOrangeBgAltHover = "var(--mode-color-status-warning-hover-alt)";
+module.exports.pillOrangeBgHover = "var(--mode-color-status-warning-hover)";
+module.exports.pillOrangeBorderDefault = "var(--mode-color-status-warning-default)";
+module.exports.pillOrangeInverseBgDefault = "var(--mode-color-status-warning-inverse-default)";
+module.exports.pillOrangeInverseBgAltDefault = "var(--mode-color-status-warning-inverse-default-alt)";
+module.exports.pillOrangeInverseBgAltHover = "var(--mode-color-status-warning-inverse-hover-alt)";
+module.exports.pillOrangeInverseBgHover = "var(--mode-color-status-warning-inverse-hover)";
+module.exports.pillOrangeInverseBorderDefault = "var(--mode-color-status-warning-inverse-default)";
+module.exports.pillPinkBgDefault = "var(--mode-color-status-custom-pink-default)";
+module.exports.pillPinkBgAltDefault = "var(--mode-color-status-custom-pink-default-alt)";
+module.exports.pillPinkBgAltHover = "var(--mode-color-status-custom-pink-hover-alt)";
+module.exports.pillPinkBgHover = "var(--mode-color-status-custom-pink-hover)";
+module.exports.pillPinkBorderDefault = "var(--mode-color-status-custom-pink-default)";
+module.exports.pillPurpleBgDefault = "var(--mode-color-status-priority-default)";
+module.exports.pillPurpleBgAltDefault = "var(--mode-color-status-priority-default-alt)";
+module.exports.pillPurpleBgAltHover = "var(--mode-color-status-priority-hover-alt)";
+module.exports.pillPurpleBgHover = "var(--mode-color-status-priority-hover)";
+module.exports.pillPurpleBorderDefault = "var(--mode-color-status-priority-default)";
+module.exports.pillPurpleInverseBgDefault = "var(--mode-color-status-priority-default)";
+module.exports.pillPurpleInverseBgAltDefault = "var(--mode-color-status-priority-inverse-default-alt)";
+module.exports.pillPurpleInverseBgAltHover = "var(--mode-color-status-priority-inverse-hover-alt)";
+module.exports.pillPurpleInverseBgHover = "var(--mode-color-status-priority-hover)";
+module.exports.pillPurpleInverseBorderDefault = "var(--mode-color-status-priority-default)";
+module.exports.pillRedBgDefault = "var(--mode-color-status-negative-default)";
+module.exports.pillRedBgAltDefault = "var(--mode-color-status-negative-default-alt)";
+module.exports.pillRedBgAltHover = "var(--mode-color-status-negative-hover-alt)";
+module.exports.pillRedBgHover = "var(--mode-color-status-negative-hover)";
+module.exports.pillRedBorderDefault = "var(--mode-color-status-negative-default)";
+module.exports.pillRedInverseBgDefault = "var(--mode-color-status-negative-inverse-default)";
+module.exports.pillRedInverseBgAltDefault = "var(--mode-color-status-negative-inverse-default-alt)";
+module.exports.pillRedInverseBgAltHover = "var(--mode-color-status-negative-inverse-hover-alt)";
+module.exports.pillRedInverseBgHover = "var(--mode-color-status-negative-inverse-hover)";
+module.exports.pillRedInverseBorderDefault = "var(--mode-color-status-negative-inverse-default)";
+module.exports.pillSlateBgDefault = "var(--mode-color-status-custom-slate-default)";
+module.exports.pillSlateBgAltDefault = "var(--mode-color-status-custom-slate-default-alt)";
+module.exports.pillSlateBgAltHover = "var(--mode-color-status-custom-slate-hover-alt)";
+module.exports.pillSlateBgHover = "var(--mode-color-status-custom-slate-hover)";
+module.exports.pillSlateBorderDefault = "var(--mode-color-status-custom-slate-default)";
+module.exports.pillTealBgDefault = "var(--mode-color-status-custom-teal-default)";
+module.exports.pillTealBgAltDefault = "var(--mode-color-status-custom-teal-default-alt)";
+module.exports.pillTealBgAltHover = "var(--mode-color-status-custom-teal-hover-alt)";
+module.exports.pillTealBgHover = "var(--mode-color-status-custom-teal-hover)";
+module.exports.pillTealBorderDefault = "var(--mode-color-status-custom-teal-default)";

package/js/common/components/progress.js

@@ -17,7 +17,7 @@ module.exports.progressDatavizFgDefault = "var(--mode-color-status-custom-teal-d
 module.exports.progressInverseLabelAlt = "var(--mode-color-generic-txt-inverse-soft)";
 module.exports.progressLoaderBgDefault = "var(--mode-color-generic-bg-delicate)";
 module.exports.progressLoaderBgSkeleton = "linear-gradient(135deg, var(--mode-color-status-skeleton-stop-1) 15%, var(--mode-color-status-skeleton-stop-2) 85%)";
-module.exports.progressLoaderFgDefault = "var(--mode-color-generic-fg-extreme)";
+module.exports.progressLoaderFgDefault = "var(--mode-color-generic-fg-inverse-nought)";
 module.exports.progressLoaderFgAi = "var(--mode-color-status-ai-default-horizontal)";
 module.exports.progressLoaderFgError = "var(--mode-color-status-negative-default)";
 module.exports.progressLoaderFgComplete = "var(--mode-color-status-positive-default)";

package/js/common/dark.js

@@ -267,10 +267,10 @@ module.exports.modeColorStatusCustomGrayDefault = "#7c7c7c";
 module.exports.modeColorStatusCustomGrayDefaultAlt = "#0b0b0b";
 module.exports.modeColorStatusCustomGrayHover = "#8b8b8b";
 module.exports.modeColorStatusCustomGrayHoverAlt = "#181818";
-module.exports.modeColorStatusCustomSlateDefault = "#6b7f8d";
-module.exports.modeColorStatusCustomSlateDefaultAlt = "#050a0e";
-module.exports.modeColorStatusCustomSlateHover = "#738ea0";
-module.exports.modeColorStatusCustomSlateHoverAlt = "#101a20";
+module.exports.modeColorStatusCustomSlateDefault = "#6a7986";
+module.exports.modeColorStatusCustomSlateDefaultAlt = "#253b4e";
+module.exports.modeColorStatusCustomSlateHover = "#75838f";
+module.exports.modeColorStatusCustomSlateHoverAlt = "#304658";
 module.exports.modeColorStatusPriorityDefault = "#9463d7";
 module.exports.modeColorStatusPriorityDefaultAlt = "#10041f";
 module.exports.modeColorStatusPriorityHover = "#a375dd";

package/js/common/light.d.ts

@@ -132,6 +132,7 @@ declare const tokens: {
             soft: DesignToken;
             delicate: DesignToken;
             faint: DesignToken;
+            "faint-copy": DesignToken;
             nought: DesignToken;
           };
         };

package/js/common/light.js

@@ -72,6 +72,7 @@ module.exports.modeColorGenericTxtInverseModerate = "#ffffffab";
 module.exports.modeColorGenericTxtInverseSoft = "#ffffff8c";
 module.exports.modeColorGenericTxtInverseDelicate = "#ffffff6b";
 module.exports.modeColorGenericTxtInverseFaint = "#ffffff4d";
+module.exports.modeColorGenericTxtInverseFaintCopy = "#ffffff4d";
 module.exports.modeColorGenericTxtInverseNought = "#000000";
 module.exports.modeColorGenericFgNought = "#FFFFFF";
 module.exports.modeColorGenericFgDelicate = "#e8eaec";
@@ -267,10 +268,10 @@ module.exports.modeColorStatusCustomGrayDefault = "#6f6f6f";
 module.exports.modeColorStatusCustomGrayDefaultAlt = "#f8f8f8";
 module.exports.modeColorStatusCustomGrayHover = "#616161";
 module.exports.modeColorStatusCustomGrayHoverAlt = "#eeeeee";
-module.exports.modeColorStatusCustomSlateDefault = "#527386";
-module.exports.modeColorStatusCustomSlateDefaultAlt = "#f4f9fc";
-module.exports.modeColorStatusCustomSlateHover = "#486576";
-module.exports.modeColorStatusCustomSlateHoverAlt = "#e4eff5";
+module.exports.modeColorStatusCustomSlateDefault = "#536574";
+module.exports.modeColorStatusCustomSlateDefaultAlt = "#f4f5f6";
+module.exports.modeColorStatusCustomSlateHover = "#475a6a";
+module.exports.modeColorStatusCustomSlateHoverAlt = "#e8eaec";
 module.exports.modeColorStatusPriorityDefault = "#8f4bd7";
 module.exports.modeColorStatusPriorityDefaultAlt = "#f9f6ff";
 module.exports.modeColorStatusPriorityHover = "#803ec5";

package/js/es6/components/badge.d.ts

@@ -8,15 +8,15 @@
 
 /** transparent override used for hiding colors when needed. */
 export const badgeNone: string;
-export const badgeBorderDefault: string;
 /** Used in global nav notification badges */
 export const badgeBgDefault: string;
+export const badgeBorderDefault: string;
 export const badgeBgAlt: string;
 export const badgeLabelDefault: string;
 export const badgeLabelAlt: string;
-export const badgeInverseBorderDefault: string;
 /** Used in global nav notification badges */
 export const badgeInverseBgDefault: string;
+export const badgeInverseBorderDefault: string;
 export const badgeInverseBgAlt: string;
 export const badgeInverseLabelDefault: string;
 export const badgeInverseLabelAlt: string;

package/js/es6/components/badge.js

@@ -3,13 +3,13 @@
  */
 
 export const badgeNone = "var(--mode-color-none)";
-export const badgeBorderDefault = "var(--mode-color-generic-txt-nought)";
 export const badgeBgDefault = "var(--mode-color-status-negative-default)";
+export const badgeBorderDefault = "var(--mode-color-generic-bg-nought)";
 export const badgeBgAlt = "var(--mode-color-status-info-default)";
-export const badgeLabelDefault = "var(--mode-color-generic-txt-nought)";
-export const badgeLabelAlt = "var(--mode-color-generic-txt-nought)";
-export const badgeInverseBorderDefault = "var(--mode-color-generic-txt-extreme)";
+export const badgeLabelDefault = "var(--mode-color-generic-txt-inverse-extreme)";
+export const badgeLabelAlt = "var(--mode-color-generic-txt-inverse-extreme)";
 export const badgeInverseBgDefault = "var(--mode-color-status-negative-inverse-default)";
+export const badgeInverseBorderDefault = "var(--mode-color-generic-bg-inverse-nought)";
 export const badgeInverseBgAlt = "var(--mode-color-status-info-inverse-default)";
 export const badgeInverseLabelDefault = "var(--mode-color-generic-txt-extreme)";
 export const badgeInverseLabelAlt = "var(--mode-color-generic-txt-extreme)";

package/js/es6/components/dataviz.js

@@ -2,7 +2,7 @@
  * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
  */
 
-export const datavizGenericLabelAlt = "var(--mode-color-generic-txt-nought)";
+export const datavizGenericLabelAlt = "var(--mode-color-generic-txt-inverse-extreme)";
 export const datavizGenericLabelDefault = "var(--mode-color-generic-txt-extreme)";
 export const datavizGenericBlueBgAlt = "var(--mode-color-colorcode-blue-deep)";
 export const datavizGenericBlueBgDefault = "var(--mode-color-colorcode-blue-muted)";