@sage/design-tokens 17.0.1 → 17.1.0

package/js/common/components/pill.js

@@ -3,124 +3,124 @@
  */
 
 module.exports.pillGenericNone = "var(--mode-color-none)";
-module.exports.pillGenericLabelDefault = "var(--mode-color-status-txt-withDefault)";
-module.exports.pillGenericLabelHover = "var(--mode-color-status-txt-withHover)";
-module.exports.pillGenericLabelAltDefault = "var(--mode-color-status-txt-withDefaultAlt)";
-module.exports.pillGenericLabelAltHover = "var(--mode-color-status-txt-withDefaultAlt)";
-module.exports.pillGenericInverseLabelDefault = "var(--mode-color-status-txt-inverse-withDefault)";
-module.exports.pillGenericInverseLabelHover = "var(--mode-color-status-txt-inverse-withHover)";
-module.exports.pillGenericInverseLabelAltDefault = "var(--mode-color-status-txt-inverse-withDefaultAlt)";
-module.exports.pillGenericInverseLabelAltHover = "var(--mode-color-status-txt-inverse-withDefaultAlt)";
+module.exports.pillGenericLabelDefault = "var(--mode-color-status-txt-with-default)";
+module.exports.pillGenericLabelHover = "var(--mode-color-status-txt-with-hover)";
+module.exports.pillGenericLabelAltDefault = "var(--mode-color-status-txt-with-default-alt)";
+module.exports.pillGenericLabelAltHover = "var(--mode-color-status-txt-with-default-alt)";
+module.exports.pillGenericInverseLabelDefault = "var(--mode-color-status-txt-inverse-with-default)";
+module.exports.pillGenericInverseLabelHover = "var(--mode-color-status-txt-inverse-with-hover)";
+module.exports.pillGenericInverseLabelAltDefault = "var(--mode-color-status-txt-inverse-with-default-alt)";
+module.exports.pillGenericInverseLabelAltHover = "var(--mode-color-status-txt-inverse-with-default-alt)";
 module.exports.pillSwatchesTealBgDefault = "var(--mode-color-status-custom-teal-default)";
-module.exports.pillSwatchesTealBgAltDefault = "var(--mode-color-status-custom-teal-defaultAlt)";
-module.exports.pillSwatchesTealBgAltHover = "var(--mode-color-status-custom-teal-hoverAlt)";
+module.exports.pillSwatchesTealBgAltDefault = "var(--mode-color-status-custom-teal-default-alt)";
+module.exports.pillSwatchesTealBgAltHover = "var(--mode-color-status-custom-teal-hover-alt)";
 module.exports.pillSwatchesTealBgHover = "var(--mode-color-status-custom-teal-hover)";
 module.exports.pillSwatchesTealBorderDefault = "var(--mode-color-status-custom-teal-default)";
 module.exports.pillSwatchesLimeBgDefault = "var(--mode-color-status-custom-lime-default)";
-module.exports.pillSwatchesLimeBgAltDefault = "var(--mode-color-status-custom-lime-defaultAlt)";
-module.exports.pillSwatchesLimeBgAltHover = "var(--mode-color-status-custom-lime-hoverAlt)";
+module.exports.pillSwatchesLimeBgAltDefault = "var(--mode-color-status-custom-lime-default-alt)";
+module.exports.pillSwatchesLimeBgAltHover = "var(--mode-color-status-custom-lime-hover-alt)";
 module.exports.pillSwatchesLimeBgHover = "var(--mode-color-status-custom-lime-hover)";
 module.exports.pillSwatchesLimeBorderDefault = "var(--mode-color-status-custom-lime-default)";
 module.exports.pillSwatchesPinkBgDefault = "var(--mode-color-status-custom-pink-default)";
-module.exports.pillSwatchesPinkBgAltDefault = "var(--mode-color-status-custom-pink-defaultAlt)";
-module.exports.pillSwatchesPinkBgAltHover = "var(--mode-color-status-custom-pink-hoverAlt)";
+module.exports.pillSwatchesPinkBgAltDefault = "var(--mode-color-status-custom-pink-default-alt)";
+module.exports.pillSwatchesPinkBgAltHover = "var(--mode-color-status-custom-pink-hover-alt)";
 module.exports.pillSwatchesPinkBgHover = "var(--mode-color-status-custom-pink-hover)";
 module.exports.pillSwatchesPinkBorderDefault = "var(--mode-color-status-custom-pink-default)";
 module.exports.pillSwatchesSlateBgDefault = "var(--mode-color-status-custom-slate-default)";
-module.exports.pillSwatchesSlateBgAltDefault = "var(--mode-color-status-custom-slate-defaultAlt)";
-module.exports.pillSwatchesSlateBgAltHover = "var(--mode-color-status-custom-slate-hoverAlt)";
+module.exports.pillSwatchesSlateBgAltDefault = "var(--mode-color-status-custom-slate-default-alt)";
+module.exports.pillSwatchesSlateBgAltHover = "var(--mode-color-status-custom-slate-hover-alt)";
 module.exports.pillSwatchesSlateBgHover = "var(--mode-color-status-custom-slate-hover)";
 module.exports.pillSwatchesSlateBorderDefault = "var(--mode-color-status-custom-slate-default)";
 module.exports.pillSwatchesOrangeBgDefault = "var(--mode-color-status-warning-default)";
-module.exports.pillSwatchesOrangeBgAltDefault = "var(--mode-color-status-warning-defaultAlt)";
-module.exports.pillSwatchesOrangeBgAltHover = "var(--mode-color-status-warning-hoverAlt)";
+module.exports.pillSwatchesOrangeBgAltDefault = "var(--mode-color-status-warning-default-alt)";
+module.exports.pillSwatchesOrangeBgAltHover = "var(--mode-color-status-warning-hover-alt)";
 module.exports.pillSwatchesOrangeBgHover = "var(--mode-color-status-warning-hover)";
 module.exports.pillSwatchesOrangeBorderDefault = "var(--mode-color-status-warning-default)";
 module.exports.pillSwatchesRedBgDefault = "var(--mode-color-status-negative-default)";
-module.exports.pillSwatchesRedBgAltDefault = "var(--mode-color-status-negative-defaultAlt)";
-module.exports.pillSwatchesRedBgAltHover = "var(--mode-color-status-negative-hoverAlt)";
+module.exports.pillSwatchesRedBgAltDefault = "var(--mode-color-status-negative-default-alt)";
+module.exports.pillSwatchesRedBgAltHover = "var(--mode-color-status-negative-hover-alt)";
 module.exports.pillSwatchesRedBgHover = "var(--mode-color-status-negative-hover)";
 module.exports.pillSwatchesRedBorderDefault = "var(--mode-color-status-negative-default)";
 module.exports.pillSwatchesGrayBgDefault = "var(--mode-color-status-neutral-default)";
-module.exports.pillSwatchesGrayBgAltDefault = "var(--mode-color-status-neutral-defaultAlt)";
-module.exports.pillSwatchesGrayBgAltHover = "var(--mode-color-status-neutral-hoverAlt)";
+module.exports.pillSwatchesGrayBgAltDefault = "var(--mode-color-status-neutral-default-alt)";
+module.exports.pillSwatchesGrayBgAltHover = "var(--mode-color-status-neutral-hover-alt)";
 module.exports.pillSwatchesGrayBgHover = "var(--mode-color-status-neutral-hover)";
 module.exports.pillSwatchesGrayBorderDefault = "var(--mode-color-status-neutral-default)";
 module.exports.pillSwatchesPurpleBgDefault = "var(--mode-color-status-priority-default)";
-module.exports.pillSwatchesPurpleBgAltDefault = "var(--mode-color-status-priority-defaultAlt)";
-module.exports.pillSwatchesPurpleBgAltHover = "var(--mode-color-status-priority-hoverAlt)";
+module.exports.pillSwatchesPurpleBgAltDefault = "var(--mode-color-status-priority-default-alt)";
+module.exports.pillSwatchesPurpleBgAltHover = "var(--mode-color-status-priority-hover-alt)";
 module.exports.pillSwatchesPurpleBgHover = "var(--mode-color-status-priority-hover)";
 module.exports.pillSwatchesPurpleBorderDefault = "var(--mode-color-status-priority-default)";
 module.exports.pillSwatchesGreenBgDefault = "var(--mode-color-status-positive-default)";
-module.exports.pillSwatchesGreenBgAltHover = "var(--mode-color-status-positive-hoverAlt)";
-module.exports.pillSwatchesGreenBgAltDefault = "var(--mode-color-status-positive-defaultAlt)";
+module.exports.pillSwatchesGreenBgAltHover = "var(--mode-color-status-positive-hover-alt)";
+module.exports.pillSwatchesGreenBgAltDefault = "var(--mode-color-status-positive-default-alt)";
 module.exports.pillSwatchesGreenBgHover = "var(--mode-color-status-positive-hover)";
 module.exports.pillSwatchesGreenBorderDefault = "var(--mode-color-status-positive-default)";
 module.exports.pillSwatchesBlueBgDefault = "var(--mode-color-status-info-default)";
-module.exports.pillSwatchesBlueBgAltDefault = "var(--mode-color-status-info-defaultAlt)";
-module.exports.pillSwatchesBlueBgAltHover = "var(--mode-color-status-info-hoverAlt)";
+module.exports.pillSwatchesBlueBgAltDefault = "var(--mode-color-status-info-default-alt)";
+module.exports.pillSwatchesBlueBgAltHover = "var(--mode-color-status-info-hover-alt)";
 module.exports.pillSwatchesBlueBgHover = "var(--mode-color-status-info-hover)";
 module.exports.pillSwatchesBlueBorderDefault = "var(--mode-color-status-info-default)";
 module.exports.pillErrorBgDefault = "var(--mode-color-status-negative-default)";
-module.exports.pillErrorBgAltDefault = "var(--mode-color-status-negative-defaultAlt)";
-module.exports.pillErrorBgAltHover = "var(--mode-color-status-negative-hoverAlt)";
+module.exports.pillErrorBgAltDefault = "var(--mode-color-status-negative-default-alt)";
+module.exports.pillErrorBgAltHover = "var(--mode-color-status-negative-hover-alt)";
 module.exports.pillErrorBgHover = "var(--mode-color-status-negative-hover)";
 module.exports.pillErrorBorderDefault = "var(--mode-color-status-negative-default)";
 module.exports.pillErrorInverseBgDefault = "var(--mode-color-status-negative-inverse-default)";
-module.exports.pillErrorInverseBgAltDefault = "var(--mode-color-status-negative-inverse-defaultAlt)";
-module.exports.pillErrorInverseBgAltHover = "var(--mode-color-status-negative-inverse-hoverAlt)";
+module.exports.pillErrorInverseBgAltDefault = "var(--mode-color-status-negative-inverse-default-alt)";
+module.exports.pillErrorInverseBgAltHover = "var(--mode-color-status-negative-inverse-hover-alt)";
 module.exports.pillErrorInverseBgHover = "var(--mode-color-status-negative-inverse-hover)";
 module.exports.pillErrorInverseBorderDefault = "var(--mode-color-status-negative-inverse-default)";
 module.exports.pillPriorityBgDefault = "var(--mode-color-status-priority-default)";
-module.exports.pillPriorityBgAltDefault = "var(--mode-color-status-priority-defaultAlt)";
-module.exports.pillPriorityBgAltHover = "var(--mode-color-status-priority-hoverAlt)";
+module.exports.pillPriorityBgAltDefault = "var(--mode-color-status-priority-default-alt)";
+module.exports.pillPriorityBgAltHover = "var(--mode-color-status-priority-hover-alt)";
 module.exports.pillPriorityBgHover = "var(--mode-color-status-priority-hover)";
 module.exports.pillPriorityBorderDefault = "var(--mode-color-status-priority-default)";
 module.exports.pillPriorityInverseBgDefault = "var(--mode-color-status-priority-default)";
-module.exports.pillPriorityInverseBgAltDefault = "var(--mode-color-status-priority-inverse-defaultAlt)";
-module.exports.pillPriorityInverseBgAltHover = "var(--mode-color-status-priority-inverse-hoverAlt)";
+module.exports.pillPriorityInverseBgAltDefault = "var(--mode-color-status-priority-inverse-default-alt)";
+module.exports.pillPriorityInverseBgAltHover = "var(--mode-color-status-priority-inverse-hover-alt)";
 module.exports.pillPriorityInverseBgHover = "var(--mode-color-status-priority-hover)";
 module.exports.pillPriorityInverseBorderDefault = "var(--mode-color-status-priority-default)";
 module.exports.pillInfoBgDefault = "var(--mode-color-status-info-default)";
-module.exports.pillInfoBgAltDefault = "var(--mode-color-status-info-defaultAlt)";
-module.exports.pillInfoBgAltHover = "var(--mode-color-status-info-hoverAlt)";
+module.exports.pillInfoBgAltDefault = "var(--mode-color-status-info-default-alt)";
+module.exports.pillInfoBgAltHover = "var(--mode-color-status-info-hover-alt)";
 module.exports.pillInfoBgHover = "var(--mode-color-status-info-hover)";
 module.exports.pillInfoBorderDefault = "var(--mode-color-status-info-default)";
 module.exports.pillInfoInverseBgDefault = "var(--mode-color-status-info-inverse-default)";
-module.exports.pillInfoInverseBgAltDefault = "var(--mode-color-status-info-inverse-defaultAlt)";
-module.exports.pillInfoInverseBgAltHover = "var(--mode-color-status-info-inverse-hoverAlt)";
+module.exports.pillInfoInverseBgAltDefault = "var(--mode-color-status-info-inverse-default-alt)";
+module.exports.pillInfoInverseBgAltHover = "var(--mode-color-status-info-inverse-hover-alt)";
 module.exports.pillInfoInverseBgHover = "var(--mode-color-status-info-inverse-hover)";
 module.exports.pillInfoInverseBorderDefault = "var(--mode-color-status-info-inverse-default)";
 module.exports.pillNeutralBgDefault = "var(--mode-color-status-neutral-default)";
-module.exports.pillNeutralBgAltDefault = "var(--mode-color-status-neutral-defaultAlt)";
-module.exports.pillNeutralBgAltHover = "var(--mode-color-status-neutral-hoverAlt)";
+module.exports.pillNeutralBgAltDefault = "var(--mode-color-status-neutral-default-alt)";
+module.exports.pillNeutralBgAltHover = "var(--mode-color-status-neutral-hover-alt)";
 module.exports.pillNeutralBgHover = "var(--mode-color-status-neutral-hover)";
 module.exports.pillNeutralBorderDefault = "var(--mode-color-status-neutral-default)";
 module.exports.pillNeutralInverseBgDefault = "var(--mode-color-status-neutral-inverse-default)";
-module.exports.pillNeutralInverseBgAltDefault = "var(--mode-color-status-neutral-inverse-defaultAlt)";
-module.exports.pillNeutralInverseBgAltHover = "var(--mode-color-status-neutral-inverse-hoverAlt)";
+module.exports.pillNeutralInverseBgAltDefault = "var(--mode-color-status-neutral-inverse-default-alt)";
+module.exports.pillNeutralInverseBgAltHover = "var(--mode-color-status-neutral-inverse-hover-alt)";
 module.exports.pillNeutralInverseBgHover = "var(--mode-color-status-neutral-inverse-hover)";
 module.exports.pillNeutralInverseBorderDefault = "var(--mode-color-status-neutral-inverse-default)";
 module.exports.pillReadonlyBgDefault = "var(--mode-color-status-inactive-default)";
 module.exports.pillReadonlyBorderDefault = "var(--mode-color-status-inactive-default)";
 module.exports.pillReadonlyLabel = "var(--mode-color-generic-txt-soft)";
 module.exports.pillPositiveBgDefault = "var(--mode-color-status-positive-default)";
-module.exports.pillPositiveBgAltDefault = "var(--mode-color-status-positive-defaultAlt)";
-module.exports.pillPositiveBgAltHover = "var(--mode-color-status-positive-hoverAlt)";
+module.exports.pillPositiveBgAltDefault = "var(--mode-color-status-positive-default-alt)";
+module.exports.pillPositiveBgAltHover = "var(--mode-color-status-positive-hover-alt)";
 module.exports.pillPositiveBgHover = "var(--mode-color-status-positive-hover)";
 module.exports.pillPositiveBorderDefault = "var(--mode-color-status-positive-default)";
 module.exports.pillPositiveInverseBgDefault = "var(--mode-color-status-positive-inverse-default)";
-module.exports.pillPositiveInverseBgAltDefault = "var(--mode-color-status-positive-inverse-defaultAlt)";
-module.exports.pillPositiveInverseBgAltHover = "var(--mode-color-status-positive-inverse-hoverAlt)";
+module.exports.pillPositiveInverseBgAltDefault = "var(--mode-color-status-positive-inverse-default-alt)";
+module.exports.pillPositiveInverseBgAltHover = "var(--mode-color-status-positive-inverse-hover-alt)";
 module.exports.pillPositiveInverseBgHover = "var(--mode-color-status-positive-inverse-hover)";
 module.exports.pillPositiveInverseBorderDefault = "var(--mode-color-status-positive-inverse-default)";
 module.exports.pillWarnBgDefault = "var(--mode-color-status-warning-default)";
-module.exports.pillWarnBgAltDefault = "var(--mode-color-status-warning-defaultAlt)";
-module.exports.pillWarnBgAltHover = "var(--mode-color-status-warning-hoverAlt)";
+module.exports.pillWarnBgAltDefault = "var(--mode-color-status-warning-default-alt)";
+module.exports.pillWarnBgAltHover = "var(--mode-color-status-warning-hover-alt)";
 module.exports.pillWarnBgHover = "var(--mode-color-status-warning-hover)";
 module.exports.pillWarnBorderDefault = "var(--mode-color-status-warning-default)";
 module.exports.pillWarnInverseBgDefault = "var(--mode-color-status-warning-inverse-default)";
-module.exports.pillWarnInverseBgAltDefault = "var(--mode-color-status-warning-inverse-defaultAlt)";
-module.exports.pillWarnInverseBgAltHover = "var(--mode-color-status-warning-inverse-hoverAlt)";
+module.exports.pillWarnInverseBgAltDefault = "var(--mode-color-status-warning-inverse-default-alt)";
+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)";

package/js/common/components/popover.js

@@ -2,19 +2,19 @@
  * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
  */
 
-module.exports.popoverSizeMenuMinwidthS = "var(--container-size-fluidItems-M} / )";
-module.exports.popoverSizeMenuMinwidthM = "var(--container-size-fluidItems-XS)";
-module.exports.popoverSizeMenuMinwidthL = "var(--container-size-fluidItems-S)";
-module.exports.popoverSizeMenuMaxwidthS = "var(--container-size-fluidItems-M)";
-module.exports.popoverSizeMenuMaxwidthM = "var(--container-size-fluidItems-L)";
-module.exports.popoverSizeMenuMaxwidthL = "var(--container-size-fluidItems-XL)";
+module.exports.popoverSizeMenuMinwidthS = "var(--container-size-fluid-items-m} / )";
+module.exports.popoverSizeMenuMinwidthM = "var(--container-size-fluid-items-xs)";
+module.exports.popoverSizeMenuMinwidthL = "var(--container-size-fluid-items-s)";
+module.exports.popoverSizeMenuMaxwidthS = "var(--container-size-fluid-items-m)";
+module.exports.popoverSizeMenuMaxwidthM = "var(--container-size-fluid-items-l)";
+module.exports.popoverSizeMenuMaxwidthL = "var(--container-size-fluid-items-xl)";
 module.exports.popoverBgActive = "var(--mode-color-action-grayscale-active)";
-module.exports.popoverBgActiveAlt = "var(--mode-color-action-grayscale-hoverAlt)";
+module.exports.popoverBgActiveAlt = "var(--mode-color-action-grayscale-hover-alt)";
 module.exports.popoverBgDefault = "var(--mode-color-generic-bg-nought)";
-module.exports.popoverBgHover = "var(--mode-color-action-grayscale-hoverAlt)";
-module.exports.popoverLabelActive = "var(--mode-color-action-grayscale-withActive)";
-module.exports.popoverLabelActiveAlt = "var(--mode-color-action-grayscale-withHover)";
+module.exports.popoverBgHover = "var(--mode-color-action-grayscale-hover-alt)";
+module.exports.popoverLabelActive = "var(--mode-color-action-grayscale-with-active)";
+module.exports.popoverLabelActiveAlt = "var(--mode-color-action-grayscale-with-hover)";
 module.exports.popoverLabelDisabled = "var(--mode-color-action-inactive-txt)";
-module.exports.popoverLabelHover = "var(--mode-color-action-grayscale-withHover)";
-module.exports.popoverLabelDefault = "var(--mode-color-action-grayscale-defaultAlt)";
+module.exports.popoverLabelHover = "var(--mode-color-action-grayscale-with-hover)";
+module.exports.popoverLabelDefault = "var(--mode-color-action-grayscale-default-alt)";
 module.exports.popoverSubmenuBgDefault = "var(--mode-color-generic-bg-faint)";

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

@@ -44,6 +44,48 @@ declare const tokens: {
     "bg-def": DesignToken;
     "border-default": DesignToken;
     "label-default": DesignToken;
+    swatches: {
+      blue: {
+        "bg-default": DesignToken;
+        "label-default": DesignToken;
+      };
+      teal: {
+        "bg-default": DesignToken;
+        "label-default": DesignToken;
+      };
+      green: {
+        "bg-default": DesignToken;
+        "label-default": DesignToken;
+      };
+      lime: {
+        "bg-default": DesignToken;
+        "label-default": DesignToken;
+      };
+      orange: {
+        "bg-default": DesignToken;
+        "label-default": DesignToken;
+      };
+      red: {
+        "bg-default": DesignToken;
+        "label-default": DesignToken;
+      };
+      pink: {
+        "bg-default": DesignToken;
+        "label-default": DesignToken;
+      };
+      purple: {
+        "bg-default": DesignToken;
+        "label-default": DesignToken;
+      };
+      slate: {
+        "bg-default": DesignToken;
+        "label-default": DesignToken;
+      };
+      gray: {
+        "bg-default": DesignToken;
+        "label-default": DesignToken;
+      };
+    };
     font: {
       initials: {
         XS: DesignToken;

package/js/common/components/profile.js

@@ -2,63 +2,83 @@
  * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
  */
 
-module.exports.profileSizeOutsideXs = "var(--global-size-XS)";
-module.exports.profileSizeOutsideS = "var(--global-size-S)";
-module.exports.profileSizeOutsideM = "var(--global-size-M)";
+module.exports.profileSizeOutsideXs = "var(--global-size-xs)";
+module.exports.profileSizeOutsideS = "var(--global-size-s)";
+module.exports.profileSizeOutsideM = "var(--global-size-m)";
 module.exports.profileSizeOutsideMl = "56px";
-module.exports.profileSizeOutsideL = "var(--global-size-4XL)";
+module.exports.profileSizeOutsideL = "var(--global-size-4-xl)";
 module.exports.profileSizeOutsideXl = "104px";
 module.exports.profileSizeOutsideXxl = "128px";
-module.exports.profileSizeInsideXs = "var(--global-size-3XS)";
-module.exports.profileSizeInsideS = "var(--global-size-2XS)";
-module.exports.profileSizeInsideM = "var(--global-size-XS)";
-module.exports.profileSizeInsideMl = "var(--global-size-S)";
-module.exports.profileSizeInsideL = "var(--global-size-L)";
-module.exports.profileSizeInsideXl = "var(--global-size-2XL)";
-module.exports.profileSizeInsideXxl = "var(--global-size-4XL)";
+module.exports.profileSizeInsideXs = "var(--global-size-3-xs)";
+module.exports.profileSizeInsideS = "var(--global-size-2-xs)";
+module.exports.profileSizeInsideM = "var(--global-size-xs)";
+module.exports.profileSizeInsideMl = "var(--global-size-s)";
+module.exports.profileSizeInsideL = "var(--global-size-l)";
+module.exports.profileSizeInsideXl = "var(--global-size-2-xl)";
+module.exports.profileSizeInsideXxl = "var(--global-size-4-xl)";
 module.exports.profileBgAlt = "var(--mode-color-generic-txt-severe)";
 module.exports.profileBgDef = "var(--mode-color-generic-bg-nought)";
 module.exports.profileBorderDefault = "var(--mode-color-generic-fg-moderate)";
 module.exports.profileLabelDefault = "var(--mode-color-generic-txt-severe)";
-module.exports.profileFontInitialsXs = "var(--global-font-static-comp-placeholder-XS)";
-module.exports.profileFontInitialsS = "var(--global-font-static-comp-placeholder-S)";
-module.exports.profileFontInitialsM = "var(--global-font-static-comp-placeholder-M)";
-module.exports.profileFontInitialsMl = "var(--global-font-static-comp-placeholder-ML)";
-module.exports.profileFontInitialsL = "var(--global-font-static-comp-placeholder-L)";
-module.exports.profileFontInitialsXl = "var(--global-font-static-comp-placeholder-XL)";
-module.exports.profileFontInitialsXxl = "var(--global-font-static-comp-placeholder-XXL)";
-module.exports.profileFontDefXs = "var(--global-font-static-comp-regular-S)";
-module.exports.profileFontDefS = "var(--global-font-static-comp-regular-M)";
-module.exports.profileFontDefM = "var(--global-font-static-comp-regular-M)";
-module.exports.profileFontDefMl = "var(--global-font-static-comp-regular-M)";
-module.exports.profileFontDefL = "var(--global-font-static-comp-regular-L)";
-module.exports.profileFontDefXl = "var(--global-font-static-comp-regular-L)";
-module.exports.profileFontDefXxl = "var(--global-font-static-comp-regular-L)";
-module.exports.profileFontHeadingXs = "var(--global-font-static-comp-medium-S)";
-module.exports.profileFontHeadingS = "var(--global-font-static-comp-medium-M)";
-module.exports.profileFontHeadingM = "var(--global-font-static-subheading-L)";
-module.exports.profileFontHeadingMl = "var(--global-font-static-subheading-L)";
-module.exports.profileFontHeadingL = "var(--global-font-static-subheading-L)";
-module.exports.profileFontHeadingXl = "var(--global-font-static-heading-M)";
-module.exports.profileFontHeadingXxl = "var(--global-font-static-heading-L)";
-module.exports.profileFontFluidInitialsXs = "var(--global-font-fluid-comp-placeholder-XS)";
-module.exports.profileFontFluidInitialsS = "var(--global-font-fluid-comp-placeholder-S)";
-module.exports.profileFontFluidInitialsM = "var(--global-font-fluid-comp-placeholder-M)";
-module.exports.profileFontFluidInitialsMl = "var(--global-font-fluid-comp-placeholder-ML)";
-module.exports.profileFontFluidInitialsL = "var(--global-font-fluid-comp-placeholder-L)";
-module.exports.profileFontFluidInitialsXl = "var(--global-font-fluid-comp-placeholder-XL)";
-module.exports.profileFontFluidInitialsXxl = "var(--global-font-fluid-comp-placeholder-XXL)";
-module.exports.profileFontFluidDefXs = "var(--global-font-fluid-comp-regular-S)";
-module.exports.profileFontFluidDefS = "var(--global-font-fluid-comp-regular-M)";
-module.exports.profileFontFluidDefM = "var(--global-font-fluid-comp-regular-M)";
-module.exports.profileFontFluidDefMl = "var(--global-font-fluid-comp-regular-M)";
-module.exports.profileFontFluidDefL = "var(--global-font-fluid-comp-regular-L)";
-module.exports.profileFontFluidDefXl = "var(--global-font-fluid-comp-regular-L)";
-module.exports.profileFontFluidDefXxl = "var(--global-font-fluid-comp-regular-L)";
-module.exports.profileFontFluidHeadingXs = "var(--global-font-fluid-comp-medium-S)";
-module.exports.profileFontFluidHeadingS = "var(--global-font-fluid-comp-medium-M)";
-module.exports.profileFontFluidHeadingM = "var(--global-font-fluid-subheading-L)";
-module.exports.profileFontFluidHeadingMl = "var(--global-font-fluid-subheading-L)";
-module.exports.profileFontFluidHeadingL = "var(--global-font-fluid-subheading-L)";
-module.exports.profileFontFluidHeadingXl = "var(--global-font-fluid-heading-M)";
-module.exports.profileFontFluidHeadingXxl = "var(--global-font-fluid-heading-L)";
+module.exports.profileSwatchesBlueBgDefault = "var(--mode-color-status-custom-blue-default-alt)";
+module.exports.profileSwatchesBlueLabelDefault = "var(--mode-color-status-custom-blue-default)";
+module.exports.profileSwatchesTealBgDefault = "var(--mode-color-status-custom-teal-default-alt)";
+module.exports.profileSwatchesTealLabelDefault = "var(--mode-color-status-custom-teal-default)";
+module.exports.profileSwatchesGreenBgDefault = "var(--mode-color-status-custom-green-default-alt)";
+module.exports.profileSwatchesGreenLabelDefault = "var(--mode-color-status-custom-green-default)";
+module.exports.profileSwatchesLimeBgDefault = "var(--mode-color-status-custom-lime-default-alt)";
+module.exports.profileSwatchesLimeLabelDefault = "var(--mode-color-status-custom-lime-default)";
+module.exports.profileSwatchesOrangeBgDefault = "var(--mode-color-status-custom-orange-default-alt)";
+module.exports.profileSwatchesOrangeLabelDefault = "var(--mode-color-status-custom-orange-txt)";
+module.exports.profileSwatchesRedBgDefault = "var(--mode-color-status-custom-red-default-alt)";
+module.exports.profileSwatchesRedLabelDefault = "var(--mode-color-status-custom-red-default)";
+module.exports.profileSwatchesPinkBgDefault = "var(--mode-color-status-custom-pink-default-alt)";
+module.exports.profileSwatchesPinkLabelDefault = "var(--mode-color-status-custom-pink-default)";
+module.exports.profileSwatchesPurpleBgDefault = "var(--mode-color-status-custom-purple-default-alt)";
+module.exports.profileSwatchesPurpleLabelDefault = "var(--mode-color-status-custom-purple-default)";
+module.exports.profileSwatchesSlateBgDefault = "var(--mode-color-status-custom-slate-default-alt)";
+module.exports.profileSwatchesSlateLabelDefault = "var(--mode-color-status-custom-slate-default)";
+module.exports.profileSwatchesGrayBgDefault = "var(--mode-color-status-custom-gray-default-alt)";
+module.exports.profileSwatchesGrayLabelDefault = "var(--mode-color-status-custom-gray-default)";
+module.exports.profileFontInitialsXs = "var(--global-font-static-comp-placeholder-xs)";
+module.exports.profileFontInitialsS = "var(--global-font-static-comp-placeholder-s)";
+module.exports.profileFontInitialsM = "var(--global-font-static-comp-placeholder-m)";
+module.exports.profileFontInitialsMl = "var(--global-font-static-comp-placeholder-ml)";
+module.exports.profileFontInitialsL = "var(--global-font-static-comp-placeholder-l)";
+module.exports.profileFontInitialsXl = "var(--global-font-static-comp-placeholder-xl)";
+module.exports.profileFontInitialsXxl = "var(--global-font-static-comp-placeholder-xxl)";
+module.exports.profileFontDefXs = "var(--global-font-static-comp-regular-s)";
+module.exports.profileFontDefS = "var(--global-font-static-comp-regular-m)";
+module.exports.profileFontDefM = "var(--global-font-static-comp-regular-m)";
+module.exports.profileFontDefMl = "var(--global-font-static-comp-regular-m)";
+module.exports.profileFontDefL = "var(--global-font-static-comp-regular-l)";
+module.exports.profileFontDefXl = "var(--global-font-static-comp-regular-l)";
+module.exports.profileFontDefXxl = "var(--global-font-static-comp-regular-l)";
+module.exports.profileFontHeadingXs = "var(--global-font-static-comp-medium-s)";
+module.exports.profileFontHeadingS = "var(--global-font-static-comp-medium-m)";
+module.exports.profileFontHeadingM = "var(--global-font-static-subheading-l)";
+module.exports.profileFontHeadingMl = "var(--global-font-static-subheading-l)";
+module.exports.profileFontHeadingL = "var(--global-font-static-subheading-l)";
+module.exports.profileFontHeadingXl = "var(--global-font-static-heading-m)";
+module.exports.profileFontHeadingXxl = "var(--global-font-static-heading-l)";
+module.exports.profileFontFluidInitialsXs = "var(--global-font-fluid-comp-placeholder-xs)";
+module.exports.profileFontFluidInitialsS = "var(--global-font-fluid-comp-placeholder-s)";
+module.exports.profileFontFluidInitialsM = "var(--global-font-fluid-comp-placeholder-m)";
+module.exports.profileFontFluidInitialsMl = "var(--global-font-fluid-comp-placeholder-ml)";
+module.exports.profileFontFluidInitialsL = "var(--global-font-fluid-comp-placeholder-l)";
+module.exports.profileFontFluidInitialsXl = "var(--global-font-fluid-comp-placeholder-xl)";
+module.exports.profileFontFluidInitialsXxl = "var(--global-font-fluid-comp-placeholder-xxl)";
+module.exports.profileFontFluidDefXs = "var(--global-font-fluid-comp-regular-s)";
+module.exports.profileFontFluidDefS = "var(--global-font-fluid-comp-regular-m)";
+module.exports.profileFontFluidDefM = "var(--global-font-fluid-comp-regular-m)";
+module.exports.profileFontFluidDefMl = "var(--global-font-fluid-comp-regular-m)";
+module.exports.profileFontFluidDefL = "var(--global-font-fluid-comp-regular-l)";
+module.exports.profileFontFluidDefXl = "var(--global-font-fluid-comp-regular-l)";
+module.exports.profileFontFluidDefXxl = "var(--global-font-fluid-comp-regular-l)";
+module.exports.profileFontFluidHeadingXs = "var(--global-font-fluid-comp-medium-s)";
+module.exports.profileFontFluidHeadingS = "var(--global-font-fluid-comp-medium-m)";
+module.exports.profileFontFluidHeadingM = "var(--global-font-fluid-subheading-l)";
+module.exports.profileFontFluidHeadingMl = "var(--global-font-fluid-subheading-l)";
+module.exports.profileFontFluidHeadingL = "var(--global-font-fluid-subheading-l)";
+module.exports.profileFontFluidHeadingXl = "var(--global-font-fluid-heading-m)";
+module.exports.profileFontFluidHeadingXxl = "var(--global-font-fluid-heading-l)";

package/js/common/components/progress.js

@@ -37,6 +37,6 @@ module.exports.progressStepindicatorBgComplete = "var(--mode-color-status-positi
 module.exports.progressStepindicatorBorderActiveOuter = "var(--mode-color-action-grayscale-active)";
 module.exports.progressStepindicatorBorderDefault = "var(--mode-color-generic-fg-firm)";
 module.exports.progressStepindicatorBorderSuccess = "var(--mode-color-status-positive-default)";
-module.exports.progressStepindicatorLabelActive = "var(--mode-color-action-grayscale-withActive)";
-module.exports.progressStepindicatorLabelComplete = "var(--mode-color-action-grayscale-withActive)";
+module.exports.progressStepindicatorLabelActive = "var(--mode-color-action-grayscale-with-active)";
+module.exports.progressStepindicatorLabelComplete = "var(--mode-color-action-grayscale-with-active)";
 module.exports.progressStepindicatorLabelDefault = "var(--mode-color-generic-txt-severe)";

package/js/common/components/tab.js

@@ -2,19 +2,19 @@
  * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
  */
 
-module.exports.tabBgActive = "var(--mode-color-action-grayscale-withActive)";
+module.exports.tabBgActive = "var(--mode-color-action-grayscale-with-active)";
 module.exports.tabBgDefault = "var(--mode-color-none)";
-module.exports.tabBgHover = "var(--mode-color-action-grayscale-hoverAlt)";
+module.exports.tabBgHover = "var(--mode-color-action-grayscale-hover-alt)";
 module.exports.tabBorderActiveAlt = "var(--mode-color-generic-fg-moderate)";
 module.exports.tabBorderActive = "var(--mode-color-action-grayscale-active)";
 module.exports.tabBorderDefault = "var(--mode-color-generic-fg-moderate)";
 module.exports.tabBorderHover = "var(--mode-color-generic-fg-firm)";
-module.exports.tabIconDefault = "var(--mode-color-action-grayscale-defaultAlt)";
-module.exports.tabIconHover = "var(--mode-color-action-grayscale-withHover)";
+module.exports.tabIconDefault = "var(--mode-color-action-grayscale-default-alt)";
+module.exports.tabIconHover = "var(--mode-color-action-grayscale-with-hover)";
 module.exports.tabLabelActive = "var(--mode-color-action-grayscale-active)";
 module.exports.tabIconActive = "var(--mode-color-action-grayscale-active)";
 module.exports.tabLabelDefault = "var(--mode-color-action-grayscale-default)";
-module.exports.tabLabelHover = "var(--mode-color-action-grayscale-withHover)";
+module.exports.tabLabelHover = "var(--mode-color-action-grayscale-with-hover)";
 module.exports.tabNavBgDefault = "var(--mode-color-generic-bg-nought)";
 module.exports.tabValidationBorderWarning = "var(--mode-color-status-warning-default)";
 module.exports.tabValidationBorderError = "var(--mode-color-status-negative-default)";

package/js/common/components/table.js

@@ -7,7 +7,7 @@ module.exports.tableHeaderSubtleBgDefault = "var(--mode-color-none)";
 module.exports.tableHeaderSubtleBorderDefault = "var(--mode-color-generic-fg-soft)";
 module.exports.tableHeaderSubtleLabelDefault = "var(--mode-color-generic-txt-severe)";
 module.exports.tableHeaderHarshBgAlt = "var(--mode-color-action-grayscale-default)";
-module.exports.tableHeaderHarshBgDefault = "var(--mode-color-action-grayscale-defaultAlt)";
+module.exports.tableHeaderHarshBgDefault = "var(--mode-color-action-grayscale-default-alt)";
 module.exports.tableHeaderHarshBorderDefault = "var(--mode-color-generic-fg-soft)";
 module.exports.tableHeaderHarshLabelDefault = "var(--mode-color-generic-txt-inverse-severe)";
 module.exports.tableRowBgDefault = "var(--mode-color-generic-bg-nought)";

package/js/common/dark.d.ts

@@ -384,6 +384,7 @@ declare const tokens: {
             defaultAlt: DesignToken;
             hover: DesignToken;
             hoverAlt: DesignToken;
+            txt: DesignToken;
           };
           red: {
             default: DesignToken;

package/js/common/dark.js

@@ -250,6 +250,7 @@ module.exports.modeColorStatusCustomOrangeDefault = "#e24300";
 module.exports.modeColorStatusCustomOrangeDefaultAlt = "#1d0300";
 module.exports.modeColorStatusCustomOrangeHover = "#e5631c";
 module.exports.modeColorStatusCustomOrangeHoverAlt = "#360900";
+module.exports.modeColorStatusCustomOrangeTxt = "#e24300";
 module.exports.modeColorStatusCustomRedDefault = "#f50059";
 module.exports.modeColorStatusCustomRedDefaultAlt = "#1e0005";
 module.exports.modeColorStatusCustomRedHover = "#ff3e6a";

package/js/common/light.d.ts

@@ -384,6 +384,7 @@ declare const tokens: {
             defaultAlt: DesignToken;
             hover: DesignToken;
             hoverAlt: DesignToken;
+            txt: DesignToken;
           };
           red: {
             default: DesignToken;

package/js/common/light.js

@@ -250,6 +250,7 @@ module.exports.modeColorStatusCustomOrangeDefault = "#d64309";
 module.exports.modeColorStatusCustomOrangeDefaultAlt = "#fff7eb";
 module.exports.modeColorStatusCustomOrangeHover = "#b33400";
 module.exports.modeColorStatusCustomOrangeHoverAlt = "#ffeaca";
+module.exports.modeColorStatusCustomOrangeTxt = "#b33400";
 module.exports.modeColorStatusCustomRedDefault = "#db004e";
 module.exports.modeColorStatusCustomRedDefaultAlt = "#fff5f6";
 module.exports.modeColorStatusCustomRedHover = "#c40044";