@sage/design-tokens 18.7.6 → 18.9.0

package/js/es6/global.js

@@ -2,16 +2,12 @@
  * Copyright © 2026 The Sage Group plc or its licensors. All Rights reserved
  */
 
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
 export const globalBorderwidthNone = "0";
-export const globalBorderwidthXs = "1px"; // Buttons, Inputs. Dividing lines and container borders.
-export const globalBorderwidthS = "2px"; // Buttons. Step flow, Validation bars
-export const globalBorderwidthM = "3px"; // Focus
-export const globalBorderwidthL = "4px"; // Focus underline. Dividing lines.
-export const globalBorderwidthXl = "6px"; // Double Focus Border
+export const globalBorderwidthXs = "1px";
+export const globalBorderwidthS = "2px";
+export const globalBorderwidthM = "3px";
+export const globalBorderwidthL = "4px";
+export const globalBorderwidthXl = "6px";
 export const globalBorderwidthXxl = "8px";
 export const globalBreakpointXs = "320px";
 export const globalBreakpointS = "600px";
@@ -19,684 +15,114 @@ export const globalBreakpointM = "960px";
 export const globalBreakpointL = "1260px";
 export const globalBreakpointXl = "1600px";
 export const globalBreakpointXxl = "1920px";
-export const globalFontFluidHeadingS = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.25,
-  fontSize: "clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)",
-};
-export const globalFontFluidHeadingM = {
-  fontFamily: "Sage UI",
-  fontWeight: "700",
-  lineHeight: 1.25,
-  fontSize: "clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)",
-};
-export const globalFontFluidHeadingL = {
-  fontFamily: "Sage UI",
-  fontWeight: "700",
-  lineHeight: 1.25,
-  fontSize: "clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)",
-};
-export const globalFontFluidSubheadingM = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.25,
-  fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
-};
-export const globalFontFluidSubheadingL = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.25,
-  fontSize: "clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)",
-};
-export const globalFontFluidSectionHeadingS = {
-  fontFamily: "Sage UI",
-  fontWeight: "700",
-  lineHeight: 1.25,
-  fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
-};
-export const globalFontFluidSectionHeadingM = {
-  fontFamily: "Sage UI",
-  fontWeight: "700",
-  lineHeight: 1.25,
-  fontSize: "clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)",
-};
-export const globalFontFluidBodyRegularS = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.875rem, 0.875rem + 0vw, 0.875rem)",
-  paragraphSpacing: "16px",
-};
-export const globalFontFluidBodyRegularM = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
-  paragraphSpacing: "24px",
-};
-export const globalFontFluidBodyRegularL = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)",
-  paragraphSpacing: "24px",
-};
-export const globalFontFluidBodyMediumS = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.875rem, 0.875rem + 0vw, 0.875rem)",
-  paragraphSpacing: "16px",
-};
-export const globalFontFluidBodyMediumM = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
-  paragraphSpacing: "24px",
-};
-export const globalFontFluidBodyMediumL = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)",
-  paragraphSpacing: "24px",
-};
-export const globalFontFluidCompMediumXs = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
-  paragraphSpacing: "0",
-}; // Small Viewports: 13.72, Large Viewports: 11.89
-export const globalFontFluidCompMediumS = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.875rem, 0.875rem + 0vw, 0.875rem)",
-  paragraphSpacing: "0",
-}; // Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size.
-export const globalFontFluidCompMediumM = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.875rem, 0.875rem + 0vw, 0.875rem)",
-  paragraphSpacing: "0",
-}; // Small Viewports: 16, Large Viewports: 16. Match token size to component size.
-export const globalFontFluidCompMediumL = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
-  paragraphSpacing: "0",
-}; // Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size.
-export const globalFontFluidCompRegularXs = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
-  paragraphSpacing: "0",
-}; // Small Viewports: 13.72, Large Viewports: 11.89
-export const globalFontFluidCompRegularS = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.875rem, 0.875rem + 0vw, 0.875rem)",
-  paragraphSpacing: "0",
-}; // Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size.
-export const globalFontFluidCompRegularM = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.875rem, 0.875rem + 0vw, 0.875rem)",
-  paragraphSpacing: "0",
-}; // Small Viewports: 16, Large Viewports: 16. Match token size to component size.
-export const globalFontFluidCompRegularL = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
-  paragraphSpacing: "0",
-}; // Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size.
-export const globalFontFluidCompIconS = {
-  fontSize: "20px",
-  fontFamily: "sage-icons",
-  paragraphSpacing: "0",
-}; // Small Viewports: 20, Large Viewports: 20.
-export const globalFontFluidCompIconM = {
-  fontSize: "20px",
-  fontFamily: "sage-icons",
-  paragraphSpacing: "0",
-}; // Small Viewports: 20, Large Viewports: 20.
-export const globalFontFluidCompIconL = {
-  fontSize: "20px",
-  fontFamily: "sage-icons",
-  paragraphSpacing: "0",
-}; // Small Viewports: 20, Large Viewports: 20.
-export const globalFontFluidCompLinedRegularS = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.875rem, 0.875rem + 0vw, 0.875rem)",
-  txtDecoration: "underline",
-  paragraphSpacing: "0",
-  textDecoration: "underline",
-};
-export const globalFontFluidCompLinedRegularM = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.875rem, 0.875rem + 0vw, 0.875rem)",
-  txtDecoration: "underline",
-  paragraphSpacing: "0",
-  textDecoration: "underline",
-};
-export const globalFontFluidCompLinedRegularL = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
-  txtDecoration: "underline",
-  paragraphSpacing: "0",
-  textDecoration: "underline",
-};
-export const globalFontFluidCompLinedMediumS = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.875rem, 0.875rem + 0vw, 0.875rem)",
-  txtDecoration: "underline",
-  paragraphSpacing: "0",
-  textDecoration: "underline",
-};
-export const globalFontFluidCompLinedMediumM = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.875rem, 0.875rem + 0vw, 0.875rem)",
-  txtDecoration: "underline",
-  paragraphSpacing: "0",
-  textDecoration: "underline",
-};
-export const globalFontFluidCompLinedMediumL = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
-  txtDecoration: "underline",
-  paragraphSpacing: "0",
-  textDecoration: "underline",
-};
-export const globalFontFluidCompPlaceholderXs = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)",
-  paragraphSpacing: "0",
-};
-export const globalFontFluidCompPlaceholderS = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "clamp(0.875rem, 0.875rem + 0vw, 0.875rem)",
-  paragraphSpacing: "0",
-};
-export const globalFontFluidCompPlaceholderM = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)",
-  paragraphSpacing: "0",
-};
-export const globalFontFluidCompPlaceholderMl = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)",
-  paragraphSpacing: "0",
-};
-export const globalFontFluidCompPlaceholderL = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)",
-  paragraphSpacing: "0",
-};
-export const globalFontFluidCompPlaceholderXl = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)",
-  paragraphSpacing: "0",
-};
-export const globalFontFluidCompPlaceholderXxl = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)",
-  paragraphSpacing: "0",
-};
-export const globalFontStaticHeadingS = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.25,
-  fontSize: "21px",
-};
-export const globalFontStaticHeadingM = {
-  fontFamily: "Sage UI",
-  fontWeight: "700",
-  lineHeight: 1.25,
-  fontSize: "24px",
-};
-export const globalFontStaticHeadingL = {
-  fontFamily: "Sage UI",
-  fontWeight: "700",
-  lineHeight: 1.25,
-  fontSize: "30px",
-};
-export const globalFontStaticSubheadingM = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.25,
-  fontSize: "16px",
-};
-export const globalFontStaticSubheadingL = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.25,
-  fontSize: "18px",
-};
-export const globalFontStaticSectionHeadingS = {
-  fontFamily: "Sage UI",
-  fontWeight: "700",
-  lineHeight: 1.25,
-  fontSize: "16px",
-};
-export const globalFontStaticSectionHeadingM = {
-  fontFamily: "Sage UI",
-  fontWeight: "700",
-  lineHeight: 1.25,
-  fontSize: "21px",
-};
-export const globalFontStaticBodyRegularS = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "14px",
-  paragraphSpacing: "16px",
-};
-export const globalFontStaticBodyRegularM = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "14px",
-  paragraphSpacing: "24px",
-};
-export const globalFontStaticBodyRegularL = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "16px",
-  paragraphSpacing: "24px",
-};
-export const globalFontStaticBodyMediumS = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "14px",
-  paragraphSpacing: "16px",
-};
-export const globalFontStaticBodyMediumM = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "14px",
-  paragraphSpacing: "24px",
-};
-export const globalFontStaticBodyMediumL = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "16px",
-  paragraphSpacing: "24px",
-};
-export const globalFontStaticCompMediumXs = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "13px",
-  paragraphSpacing: "0",
-};
-export const globalFontStaticCompMediumS = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "14px",
-  paragraphSpacing: "0",
-};
-export const globalFontStaticCompMediumM = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "14px",
-  paragraphSpacing: "0",
-};
-export const globalFontStaticCompMediumL = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "16px",
-  paragraphSpacing: "0",
-};
-export const globalFontStaticCompRegularXs = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "13px",
-  paragraphSpacing: "0",
-};
-export const globalFontStaticCompRegularS = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "14px",
-  paragraphSpacing: "0",
-};
-export const globalFontStaticCompRegularM = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "14px",
-  paragraphSpacing: "0",
-};
-export const globalFontStaticCompRegularL = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "16px",
-  paragraphSpacing: "0",
-};
-export const globalFontStaticCompIconS = {
-  fontSize: "20px",
-  fontFamily: "sage-icons",
-  paragraphSpacing: "0",
-};
-export const globalFontStaticCompIconM = {
-  fontSize: "20px",
-  fontFamily: "sage-icons",
-  paragraphSpacing: "0",
-};
-export const globalFontStaticCompIconL = {
-  fontSize: "20px",
-  fontFamily: "sage-icons",
-  paragraphSpacing: "0",
-};
-export const globalFontStaticCompLinedRegularS = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "14px",
-  txtDecoration: "underline",
-  paragraphSpacing: "0",
-  textDecoration: "underline",
-};
-export const globalFontStaticCompLinedRegularM = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "14px",
-  txtDecoration: "underline",
-  paragraphSpacing: "0",
-  textDecoration: "underline",
-};
-export const globalFontStaticCompLinedRegularL = {
-  fontFamily: "Sage UI",
-  fontWeight: "400",
-  lineHeight: 1.5,
-  fontSize: "16px",
-  txtDecoration: "underline",
-  paragraphSpacing: "0",
-  textDecoration: "underline",
-};
-export const globalFontStaticCompLinedMediumS = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "14px",
-  txtDecoration: "underline",
-  paragraphSpacing: "0",
-  textDecoration: "underline",
-};
-export const globalFontStaticCompLinedMediumM = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "14px",
-  txtDecoration: "underline",
-  paragraphSpacing: "0",
-  textDecoration: "underline",
-};
-export const globalFontStaticCompLinedMediumL = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "16px",
-  txtDecoration: "underline",
-  paragraphSpacing: "0",
-  textDecoration: "underline",
-};
-export const globalFontStaticCompPlaceholderXs = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "12px",
-  paragraphSpacing: "0",
-};
-export const globalFontStaticCompPlaceholderS = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "14px",
-  paragraphSpacing: "0",
-};
-export const globalFontStaticCompPlaceholderM = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "18px",
-  paragraphSpacing: "0",
-};
-export const globalFontStaticCompPlaceholderMl = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "24px",
-  paragraphSpacing: "0",
-};
-export const globalFontStaticCompPlaceholderL = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "30px",
-  paragraphSpacing: "0",
-};
-export const globalFontStaticCompPlaceholderXl = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "40px",
-  paragraphSpacing: "0",
-};
-export const globalFontStaticCompPlaceholderXxl = {
-  fontFamily: "Sage UI",
-  fontWeight: "500",
-  lineHeight: 1.5,
-  fontSize: "52px",
-  paragraphSpacing: "0",
-};
-export const globalModifierButtonActive = "0.30"; // Actve modifier used when 15% hover is used
-export const globalModifierButtonActiveAlt = "0.15"; // Actve modifier used when 15% hover is used
-export const globalModifierButtonHover = "0.15"; // Hover used on primary buttons
-export const globalModifierButtonHoverAlt = "0.10"; // Hover used on primary buttons
-export const globalModifierInputDisabledFg = "0.3"; // Disabled alpha for buttons
-export const globalModifierInputDisabledBg = "0.05"; // less contrast
-export const globalRadiusNone = "0"; // Button groups (internal/adjacent corners), Card select group (internal/adjacent corners), File input (integrated base bar top corners).
-export const globalRadiusContainer3Xs = "1px"; // Validation bar on input components
-export const globalRadiusContainer2Xs = "2px"; // Pill
+export const globalFontFluidHeadingS = "500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem) Sage UI";
+export const globalFontFluidHeadingM = "700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem) Sage UI";
+export const globalFontFluidHeadingL = "700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem) Sage UI";
+export const globalFontFluidSubheadingM = "500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI";
+export const globalFontFluidSubheadingL = "500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem) Sage UI";
+export const globalFontFluidSectionHeadingS = "700 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI";
+export const globalFontFluidSectionHeadingM = "700 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem) Sage UI";
+export const globalFontFluidBodyRegularS = "400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
+export const globalFontFluidBodyRegularM = "400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI";
+export const globalFontFluidBodyRegularL = "400 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem) Sage UI";
+export const globalFontFluidBodyMediumS = "500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
+export const globalFontFluidBodyMediumM = "500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI";
+export const globalFontFluidBodyMediumL = "500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem) Sage UI";
+export const globalFontFluidCompMediumXs = "500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem) Sage UI";
+export const globalFontFluidCompMediumS = "500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
+export const globalFontFluidCompMediumM = "500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
+export const globalFontFluidCompMediumL = "500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI";
+export const globalFontFluidCompRegularXs = "400 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem) Sage UI";
+export const globalFontFluidCompRegularS = "400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
+export const globalFontFluidCompRegularM = "400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
+export const globalFontFluidCompRegularL = "400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI";
+export const globalFontFluidCompIconS = "20px sage-icons";
+export const globalFontFluidCompIconM = "20px sage-icons";
+export const globalFontFluidCompIconL = "20px sage-icons";
+export const globalFontFluidCompLinedRegularS = "400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
+export const globalFontFluidCompLinedRegularM = "400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
+export const globalFontFluidCompLinedRegularL = "400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI";
+export const globalFontFluidCompLinedMediumS = "500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
+export const globalFontFluidCompLinedMediumM = "500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
+export const globalFontFluidCompLinedMediumL = "500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI";
+export const globalFontFluidCompPlaceholderXs = "500 clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem) Sage UI";
+export const globalFontFluidCompPlaceholderS = "500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
+export const globalFontFluidCompPlaceholderM = "500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem) Sage UI";
+export const globalFontFluidCompPlaceholderMl = "500 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem) Sage UI";
+export const globalFontFluidCompPlaceholderL = "500 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem) Sage UI";
+export const globalFontFluidCompPlaceholderXl = "500 clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem) Sage UI";
+export const globalFontFluidCompPlaceholderXxl = "500 clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem) Sage UI";
+export const globalFontStaticHeadingS = "500 21px Sage UI";
+export const globalFontStaticHeadingM = "700 24px Sage UI";
+export const globalFontStaticHeadingL = "700 30px Sage UI";
+export const globalFontStaticSubheadingM = "500 16px Sage UI";
+export const globalFontStaticSubheadingL = "500 18px Sage UI";
+export const globalFontStaticSectionHeadingS = "700 16px Sage UI";
+export const globalFontStaticSectionHeadingM = "700 21px Sage UI";
+export const globalFontStaticBodyRegularS = "400 14px Sage UI";
+export const globalFontStaticBodyRegularM = "400 14px Sage UI";
+export const globalFontStaticBodyRegularL = "400 16px Sage UI";
+export const globalFontStaticBodyMediumS = "500 14px Sage UI";
+export const globalFontStaticBodyMediumM = "500 14px Sage UI";
+export const globalFontStaticBodyMediumL = "500 16px Sage UI";
+export const globalFontStaticCompMediumXs = "500 13px Sage UI";
+export const globalFontStaticCompMediumS = "500 14px Sage UI";
+export const globalFontStaticCompMediumM = "500 14px Sage UI";
+export const globalFontStaticCompMediumL = "500 16px Sage UI";
+export const globalFontStaticCompRegularXs = "400 13px Sage UI";
+export const globalFontStaticCompRegularS = "400 14px Sage UI";
+export const globalFontStaticCompRegularM = "400 14px Sage UI";
+export const globalFontStaticCompRegularL = "400 16px Sage UI";
+export const globalFontStaticCompIconS = "20px sage-icons";
+export const globalFontStaticCompIconM = "20px sage-icons";
+export const globalFontStaticCompIconL = "20px sage-icons";
+export const globalFontStaticCompLinedRegularS = "400 14px Sage UI";
+export const globalFontStaticCompLinedRegularM = "400 14px Sage UI";
+export const globalFontStaticCompLinedRegularL = "400 16px Sage UI";
+export const globalFontStaticCompLinedMediumS = "500 14px Sage UI";
+export const globalFontStaticCompLinedMediumM = "500 14px Sage UI";
+export const globalFontStaticCompLinedMediumL = "500 16px Sage UI";
+export const globalFontStaticCompPlaceholderXs = "500 12px Sage UI";
+export const globalFontStaticCompPlaceholderS = "500 14px Sage UI";
+export const globalFontStaticCompPlaceholderM = "500 18px Sage UI";
+export const globalFontStaticCompPlaceholderMl = "500 24px Sage UI";
+export const globalFontStaticCompPlaceholderL = "500 30px Sage UI";
+export const globalFontStaticCompPlaceholderXl = "500 40px Sage UI";
+export const globalFontStaticCompPlaceholderXxl = "500 52px Sage UI";
+export const globalModifierButtonActive = "0.30";
+export const globalModifierButtonActiveAlt = "0.15";
+export const globalModifierButtonHover = "0.15";
+export const globalModifierButtonHoverAlt = "0.10";
+export const globalModifierInputDisabledFg = "0.3";
+export const globalModifierInputDisabledBg = "0.05";
+export const globalRadiusNone = "0";
+export const globalRadiusContainer3Xs = "1px";
+export const globalRadiusContainer2Xs = "2px";
 export const globalRadiusContainerXs = "4px";
-export const globalRadiusContainerS = "6px"; // L size loader and tracker corners
-export const globalRadiusContainerM = "8px"; // Card select group (outer corners), Card select (single), Color picker advanced (inner swatch container), File input (file uploads & integrated progress bar (bottom corners),  File preview (File selector assets on left), Link preview, Message, Note, Popover (menu container in Action popover, Button-split, Button-multi-action, Calendar, Dropdown), Subscription tile (currently a pattern), Table (parent container), Tile & Tile flexbox (less rounded), Toast, Tooltip
-export const globalRadiusContainerL = "16px"; // Card (less rounded), Carousel (slides), Color picker advanced (parent container), File preview (parent container), Medium Tile & Tile flexbox, Medium Card.
-export const globalRadiusContainerXl = "24px"; // Card (more  rounded), Copilot Container, Carousel (parent container), Dialog (not full screen), Large Tile & Tile flexbox, Large cards
+export const globalRadiusContainerS = "6px";
+export const globalRadiusContainerM = "8px";
+export const globalRadiusContainerL = "16px";
+export const globalRadiusContainerXl = "24px";
 export const globalRadiusContainer2Xl = "32px";
-export const globalRadiusContainer3Xl = "40px"; // marketing cards and tiles
-export const globalRadiusContainer4Xl = "80px"; // marketing images
-export const globalRadiusContainerCircle = "999px"; // CIRCLE. Badge, Calendar date (today indicator and selected), Carousel selector dots, Loader bar, Portrait, Progress tracker, Radio button, Step flow (step indicators), Switch,
-export const globalRadiusAction2Xs = "1px"; // Tab baseline.
-export const globalRadiusActionXs = "2px"; // Link (focus background and underline)
-export const globalRadiusActionS = "4px"; // S & M Checkboxes
-export const globalRadiusActionM = "8px"; // Button subtle, L Checkboxes, Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area),  Menu (bottom corners), Navigation: left (state bg shape), Skip focus, Tab, Text area, Text input,
-export const globalRadiusActionL = "16px"; // Buttons S (typical and destructive, and inc bar, split and multi), Navigation left (collapsible Assets/Menu select top-right and bottom-right corners),
-export const globalRadiusActionXl = "20px"; // Buttons M (typical and destructive and inc bar split and multi), Button toggle M (parent container)
-export const globalRadiusAction2Xl = "24px"; // Buttons L (typical and destructive and inc bar split and multi), Button toggle L (parent container)
-export const globalRadiusActionCircle = "999px"; // Icon only buttons
-export const globalDepthNone = [
-  {
-    blur: "0",
-    spread: "0",
-    color: "rgba(0,0,0,0)",
-    type: "dropShadow",
-    offsetX: "0",
-    offsetY: "0",
-  },
-];
-export const globalDepthLvl0 = [
-  {
-    blur: "1px",
-    spread: "1px",
-    color: "#0000001A",
-    type: "dropShadow",
-    offsetX: "0",
-    offsetY: "0",
-  },
-  {
-    blur: "2px",
-    spread: "0",
-    color: "#00000033",
-    type: "dropShadow",
-    offsetX: "1px",
-    offsetY: "2px",
-  },
-]; // Card default state
-export const globalDepthLvl1 = [
-  {
-    blur: "2px",
-    spread: "0",
-    color: "#0000001A",
-    type: "dropShadow",
-    offsetX: "0",
-    offsetY: "1px",
-  },
-  {
-    blur: "10px",
-    spread: "0",
-    color: "#00000033",
-    type: "dropShadow",
-    offsetX: "2px",
-    offsetY: "2px",
-  },
-]; // Card hover state, Popover menus used on split, multiaction, dropdown and action popovers
-export const globalDepthLvl2 = [
-  {
-    blur: "3px",
-    spread: "0",
-    color: "#0000001A",
-    type: "dropShadow",
-    offsetX: "0",
-    offsetY: "2px",
-  },
-  {
-    blur: "30px",
-    spread: "0",
-    color: "#00000026",
-    type: "dropShadow",
-    offsetX: "6px",
-    offsetY: "6px",
-  },
-]; // Nav Menu
-export const globalDepthLvl3 = [
-  {
-    blur: "4px",
-    spread: "0",
-    color: "#0000001A",
-    type: "dropShadow",
-    offsetX: "0",
-    offsetY: "3px",
-  },
-  {
-    blur: "60px",
-    spread: "0",
-    color: "#0000001A",
-    type: "dropShadow",
-    offsetX: "10px",
-    offsetY: "10px",
-  },
-]; // Dialog, Menu, Sidebar, Card drag state
-export const globalDepthStickyB = [
-  {
-    blur: "2px",
-    spread: "0",
-    color: "#0000001A",
-    type: "dropShadow",
-    offsetX: "0",
-    offsetY: "-1px",
-  },
-  {
-    blur: "10px",
-    spread: "0",
-    color: "#00000033",
-    type: "dropShadow",
-    offsetX: "2px",
-    offsetY: "-2px",
-  },
-]; // Sticky footer on dialogs, drawer and sidebar
-export const globalDepthStickyL = [
-  {
-    blur: "2px",
-    spread: "0",
-    color: "#0000001A",
-    type: "dropShadow",
-    offsetX: "-2px",
-    offsetY: "0",
-  },
-  {
-    blur: "5px",
-    spread: "0",
-    color: "#0000001A",
-    type: "dropShadow",
-    offsetX: "-5px",
-    offsetY: "0",
-  },
-]; // Right sticky column in Table.
-export const globalDepthStickyR = [
-  {
-    blur: "2px",
-    spread: "0",
-    color: "#0000001A",
-    type: "dropShadow",
-    offsetX: "2px",
-    offsetY: "0",
-  },
-  {
-    blur: "5px",
-    spread: "0",
-    color: "#0000001A",
-    type: "dropShadow",
-    offsetX: "5px",
-    offsetY: "0",
-  },
-]; // Left sticky column in Table.
+export const globalRadiusContainer3Xl = "40px";
+export const globalRadiusContainer4Xl = "80px";
+export const globalRadiusContainerCircle = "999px";
+export const globalRadiusAction2Xs = "1px";
+export const globalRadiusActionXs = "2px";
+export const globalRadiusActionS = "4px";
+export const globalRadiusActionM = "8px";
+export const globalRadiusActionL = "16px";
+export const globalRadiusActionXl = "20px";
+export const globalRadiusAction2Xl = "24px";
+export const globalRadiusActionCircle = "999px";
+export const globalDepthNone = "0 0 0 0 rgba(0,0,0,0)";
+export const globalDepthLvl0 = "0 0 1px 1px var(--mode-color-generic-depth-faint), 1px 2px 2px 0 var(--mode-color-generic-depth-soft)";
+export const globalDepthLvl1 = "0 1px 2px 0 var(--mode-color-generic-depth-faint), 2px 2px 10px 0 var(--mode-color-generic-depth-soft)";
+export const globalDepthLvl2 = "0 2px 3px 0 var(--mode-color-generic-depth-faint), 6px 6px 30px 0 var(--mode-color-generic-depth-delicate)";
+export const globalDepthLvl3 = "0 3px 4px 0 var(--mode-color-generic-depth-faint), 10px 10px 60px 0 var(--mode-color-generic-depth-faint)";
+export const globalDepthStickyB = "0 -1px 2px 0 var(--mode-color-generic-depth-faint), 2px -2px 10px 0 var(--mode-color-generic-depth-soft)";
+export const globalDepthStickyL = "-2px 0 2px 0 var(--mode-color-generic-depth-faint), -5px 0 5px 0 var(--mode-color-generic-depth-faint)";
+export const globalDepthStickyR = "2px 0 2px 0 var(--mode-color-generic-depth-faint), 5px 0 5px 0 var(--mode-color-generic-depth-faint)";
 export const globalSizeNone = "0px";
 export const globalSize6Xs = "2px";
 export const globalSize5Xs = "4px";
@@ -725,7 +151,7 @@ export const globalSpaceLayout4Xl = "80px";
 export const globalSpaceComp2Xs = "2px";
 export const globalSpaceCompXs = "4px";
 export const globalSpaceCompS = "8px";
-export const globalSpaceCompM = "12px"; // Padding inside Medium Inputs
+export const globalSpaceCompM = "12px";
 export const globalSpaceCompL = "16px";
 export const globalSpaceCompXl = "24px";
 export const globalSpaceComp2Xl = "32px";