npm - @sage/design-tokens - Versions diffs - 14.5.0 → 14.7.0 - Mend

@sage/design-tokens 14.5.0 → 14.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (414) hide show

package/css/frozenproduct/all.css CHANGED Viewed

@@ -133,8 +133,8 @@
   --global-typography-component-placeholdertext-xl: 500 30px/1.5 Sage UI;
   --global-typography-component-placeholdertext-xxl: 500 36px/1.5 Sage UI;
   --global-typography-component-notification-m: 500 13px/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
-  --global-font-size-adaptive-step-2: 12px;
-  --global-font-size-adaptive-step-1: 13px;
+  --global-font-size-adaptive-step-minus2: 12px;
+  --global-font-size-adaptive-step-minus1: 13px;
   --global-font-size-adaptive-step0: 14px;
   --global-font-size-adaptive-step1: 16px;
   --global-font-size-adaptive-step2: 17px;
@@ -882,6 +882,7 @@
   --button-size-toggle-s: var(--global-size-macro-s); /* min-height on S single toggle, and on button within M toggle group */
   --button-size-toggle-m: var(--global-size-macro-m); /* min-height on M single toggle, and on button within L toggle group */
   --button-size-toggle-l: var(--global-size-macro-l); /* min-height on L single toggle */
+  --button-size-icon-s: var(--global-size-icon-s);
   --button-size-icon-m: var(--global-size-icon-m);
   --button-size-video-s: var(--global-size-macro-m);
   --button-size-video-m: var(--global-size-macro-xxl);
@@ -916,9 +917,12 @@
   --button-space-primary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
   --button-space-primary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons  */
   --button-space-primary-y-l: calc(var(--global-space-micro-xl) - 0.5); /* Top and bottom padding on Large buttons  */
-  --button-space-primary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size primary buttons */
-  --button-space-primary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size primary buttons */
-  --button-space-primary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size primary buttons */
+  --button-space-primary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size primary buttons */
+  --button-space-primary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size primary buttons */
+  --button-space-primary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size primary buttons */
+  --button-space-primary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size primary buttons */
+  --button-space-primary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size primary buttons */
+  --button-space-primary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size primary buttons */
   --button-space-secondary-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS table buttons */
   --button-space-secondary-x-s: var(--global-space-micro-xxl); /* Left and right padding on small buttons */
   --button-space-secondary-x-m: var(--global-space-macro-xs); /* Left and right padding on medium buttons */
@@ -927,13 +931,18 @@
   --button-space-secondary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
   --button-space-secondary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons  */
   --button-space-secondary-y-l: calc(var(--global-space-micro-xl) - 0.5); /* Top and bottom padding on Large buttons  */
+  --button-space-secondary-xg-xs: var(--global-space-micro-s); /* Item spacing inside XS buttons */
   --button-space-secondary-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
   --button-space-secondary-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
   --button-space-secondary-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
-  --button-space-secondary-xg-xs: var(--global-space-micro-s); /* Item spacing inside XS buttons */
-  --button-space-secondary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size secondary buttons */
-  --button-space-secondary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size secondary buttons */
-  --button-space-secondary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size secondary buttons */
+  --button-space-secondary-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size secondary buttons */
+  --button-space-secondary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size secondary buttons */
+  --button-space-secondary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size secondary buttons */
+  --button-space-secondary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size secondary buttons */
+  --button-space-secondary-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size secondary buttons */
+  --button-space-secondary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size secondary buttons */
+  --button-space-secondary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size secondary buttons */
+  --button-space-secondary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size secondary buttons */
   --button-space-tertiary-y-xs: calc((var(--global-space-macro-xxxs) / 4) - 0.5); /* top and bottom padding on XS table buttons */
   --button-space-tertiary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
   --button-space-tertiary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons  */
@@ -946,9 +955,14 @@
   --button-space-tertiary-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
   --button-space-tertiary-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
   --button-space-tertiary-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
-  --button-space-tertiary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size tertiary buttons */
-  --button-space-tertiary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size tertiary buttons */
-  --button-space-tertiary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size tertiary buttons */
+  --button-space-tertiary-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size tertiary buttons */
+  --button-space-tertiary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size tertiary buttons */
+  --button-space-tertiary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size tertiary buttons */
+  --button-space-tertiary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size tertiary buttons */
+  --button-space-tertiary-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size tertiary buttons */
+  --button-space-tertiary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size tertiary buttons */
+  --button-space-tertiary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size tertiary buttons */
+  --button-space-tertiary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size tertiary buttons */
   --button-space-subtle-y-xs: calc((var(--global-space-macro-xxxs) / 4) - 0.5); /* top and bottom padding on XS table buttons */
   --button-space-subtle-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
   --button-space-subtle-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons  */
@@ -961,9 +975,14 @@
   --button-space-subtle-xg-s: var(--global-space-micro-s); /* Item spacing inside buttons */
   --button-space-subtle-xg-m: var(--global-space-micro-s); /* Item spacing inside buttons */
   --button-space-subtle-xg-l: var(--global-space-micro-s); /* Item spacing inside buttons */
-  --button-space-subtle-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size subtle buttons */
-  --button-space-subtle-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size subtle buttons */
-  --button-space-subtle-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size subtle buttons */
+  --button-space-subtle-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size subtle buttons */
+  --button-space-subtle-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size subtle buttons */
+  --button-space-subtle-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size subtle buttons */
+  --button-space-subtle-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size subtle buttons */
+  --button-space-subtle-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size subtle buttons */
+  --button-space-subtle-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size subtle buttons */
+  --button-space-subtle-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size subtle buttons */
+  --button-space-subtle-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size subtle buttons */
   --button-space-toggle-button-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS asset used within S toggle group */
   --button-space-toggle-button-x-s: var(--global-space-macro-xxs); /* Left and right padding on S toggle buttons */
   --button-space-toggle-button-x-m: var(--global-space-macro-xs); /* Left and right padding on medium toggle buttons */
@@ -1094,6 +1113,13 @@
   /* container component tokens */
   --container-size-carousel-mediaslide-minheight: 300; /* max height for media visual */
+  --container-size-dialog-max-width-xxs: 300;
+  --container-size-dialog-max-width-xs: 380;
+  --container-size-dialog-max-width-s: 540;
+  --container-size-dialog-max-width-m: 750;
+  --container-size-dialog-max-width-l: 850;
+  --container-size-dialog-max-width-xl: 960;
+  --container-size-dialog-max-width-xxl: 1080;
   --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
   --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
   --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
@@ -1177,13 +1203,13 @@
   --container-size-copilot-emptystate-content-maxwidth: calc(var(--global-size-macro-xxxxl) * 5); /* max-width of the insight empty state content area */
   --container-size-copilot-overlay-maxheight: calc(var(--global-size-macro-xxxxl) * 8); /* max-height of the copilot container overlay  */
   --container-size-drag-droptarget: var(--global-size-micro-xxs); /* drop target width or height */
+  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
+  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
+  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-generic-emptystate-illustration-primary-s: calc(var(--global-size-macro-m) * 5); /* Illustration size for small error and empty states */
   --container-size-generic-emptystate-illustration-primary-m: calc(var(--global-size-macro-m) * 6); /* Illustration size for medium error and empty states */
   --container-size-generic-emptystate-illustration-primary-l: calc(var(--global-size-macro-m) * 8); /* Illustration size for large error and empty states */
   --container-size-generic-emptystate-illustration-secondary: calc(var(--global-size-macro-m) + var(--button-size-icon-m)); /* Illustration size for secondary empty states */
-  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
-  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
-  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-icon-s: var(--global-size-icon-m);
   --container-size-icon-m: var(--global-size-icon-m);
   --container-size-icon-l: var(--global-size-icon-m); /* Deliberately referencing global M (20px). Accordion chevron. */
@@ -1429,6 +1455,9 @@
   --focus-borderwidth-outer: var(--global-borderwidth-l); /* Focus border (outer) */
   /* form component tokens */
+  --form-space-datepicker-pr-s: 0; /* right padding on small date picker input */
+  --form-space-datepicker-pr-m: 0; /* right padding on medium date picker input */
+  --form-space-datepicker-pr-l: 0; /* right padding on large date picker input */
   --form-color-switch-border-active: transparent;
   --form-color-switch-border-activedisabled: transparent;
   --form-radius-none: var(--global-radius-none); /* Text editor (internal corners) */
@@ -1475,9 +1504,6 @@
   --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
-  --form-space-datepicker-pr-s: var(--global-space-micro-xs); /* right padding on small date picker input */
-  --form-space-datepicker-pr-m: var(--global-space-micro-m); /* right padding on medium date picker input */
-  --form-space-datepicker-pr-l: var(--global-space-micro-xl); /* right padding on large date picker input */
   --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
@@ -1508,6 +1534,9 @@
   --form-space-dropdown-pill-xg-s: var(--global-space-micro-s); /* space between pills inside pill wrapper */
   --form-space-dropdown-pill-xg-m: var(--global-space-micro-s); /* space between pills inside pill wrapper */
   --form-space-dropdown-pill-xg-l: var(--global-space-micro-s); /* space between pills inside pill wrapper */
+  --form-space-dropdown-trigger-subtle-s: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
+  --form-space-dropdown-trigger-subtle-m: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
+  --form-space-dropdown-trigger-subtle-l: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
   --form-space-fileinput-status-xl-m: var(--global-space-macro-ml); /* Left padding in File input (no-thumbnail variant), status text. */
   --form-space-fileinput-status-y-m: var(--global-space-micro-s); /* Vertical padding in status text. */
   --form-space-fileinput-thumbnail-m: var(--global-space-micro-s); /* All padding in File input (thumbnail container). */
@@ -2556,8 +2585,8 @@
     --global-typography-component-placeholdertext-xl: 500 40px/1.5 Sage UI;
     --global-typography-component-placeholdertext-xxl: 500 52px/1.5 Sage UI;
     --global-typography-component-notification-m: 500 12px/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
-    --global-font-size-adaptive-step-2: 11px;
-    --global-font-size-adaptive-step-1: 12px;
+    --global-font-size-adaptive-step-minus2: 11px;
+    --global-font-size-adaptive-step-minus1: 12px;
     --global-font-size-adaptive-step2: 18px;
     --global-font-size-adaptive-step3: 21px;
     --global-font-size-adaptive-step4: 24px;

package/css/frozenproduct/large/components/button.css CHANGED Viewed

@@ -98,6 +98,7 @@
   --button-size-toggle-s: var(--global-size-macro-s); /* min-height on S single toggle, and on button within M toggle group */
   --button-size-toggle-m: var(--global-size-macro-m); /* min-height on M single toggle, and on button within L toggle group */
   --button-size-toggle-l: var(--global-size-macro-l); /* min-height on L single toggle */
+  --button-size-icon-s: var(--global-size-icon-s);
   --button-size-icon-m: var(--global-size-icon-m);
   --button-size-video-s: var(--global-size-macro-m);
   --button-size-video-m: var(--global-size-macro-xxl);
@@ -132,9 +133,12 @@
   --button-space-primary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
   --button-space-primary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons  */
   --button-space-primary-y-l: calc(var(--global-space-micro-xl) - 0.5); /* Top and bottom padding on Large buttons  */
-  --button-space-primary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size primary buttons */
-  --button-space-primary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size primary buttons */
-  --button-space-primary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size primary buttons */
+  --button-space-primary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size primary buttons */
+  --button-space-primary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size primary buttons */
+  --button-space-primary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size primary buttons */
+  --button-space-primary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size primary buttons */
+  --button-space-primary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size primary buttons */
+  --button-space-primary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size primary buttons */
   --button-space-secondary-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS table buttons */
   --button-space-secondary-x-s: var(--global-space-micro-xxl); /* Left and right padding on small buttons */
   --button-space-secondary-x-m: var(--global-space-macro-xs); /* Left and right padding on medium buttons */
@@ -143,13 +147,18 @@
   --button-space-secondary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
   --button-space-secondary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons  */
   --button-space-secondary-y-l: calc(var(--global-space-micro-xl) - 0.5); /* Top and bottom padding on Large buttons  */
+  --button-space-secondary-xg-xs: var(--global-space-micro-s); /* Item spacing inside XS buttons */
   --button-space-secondary-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
   --button-space-secondary-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
   --button-space-secondary-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
-  --button-space-secondary-xg-xs: var(--global-space-micro-s); /* Item spacing inside XS buttons */
-  --button-space-secondary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size secondary buttons */
-  --button-space-secondary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size secondary buttons */
-  --button-space-secondary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size secondary buttons */
+  --button-space-secondary-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size secondary buttons */
+  --button-space-secondary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size secondary buttons */
+  --button-space-secondary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size secondary buttons */
+  --button-space-secondary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size secondary buttons */
+  --button-space-secondary-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size secondary buttons */
+  --button-space-secondary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size secondary buttons */
+  --button-space-secondary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size secondary buttons */
+  --button-space-secondary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size secondary buttons */
   --button-space-tertiary-y-xs: calc((var(--global-space-macro-xxxs) / 4) - 0.5); /* top and bottom padding on XS table buttons */
   --button-space-tertiary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
   --button-space-tertiary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons  */
@@ -162,9 +171,14 @@
   --button-space-tertiary-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
   --button-space-tertiary-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
   --button-space-tertiary-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
-  --button-space-tertiary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size tertiary buttons */
-  --button-space-tertiary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size tertiary buttons */
-  --button-space-tertiary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size tertiary buttons */
+  --button-space-tertiary-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size tertiary buttons */
+  --button-space-tertiary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size tertiary buttons */
+  --button-space-tertiary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size tertiary buttons */
+  --button-space-tertiary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size tertiary buttons */
+  --button-space-tertiary-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size tertiary buttons */
+  --button-space-tertiary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size tertiary buttons */
+  --button-space-tertiary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size tertiary buttons */
+  --button-space-tertiary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size tertiary buttons */
   --button-space-subtle-y-xs: calc((var(--global-space-macro-xxxs) / 4) - 0.5); /* top and bottom padding on XS table buttons */
   --button-space-subtle-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
   --button-space-subtle-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons  */
@@ -177,9 +191,14 @@
   --button-space-subtle-xg-s: var(--global-space-micro-s); /* Item spacing inside buttons */
   --button-space-subtle-xg-m: var(--global-space-micro-s); /* Item spacing inside buttons */
   --button-space-subtle-xg-l: var(--global-space-micro-s); /* Item spacing inside buttons */
-  --button-space-subtle-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size subtle buttons */
-  --button-space-subtle-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size subtle buttons */
-  --button-space-subtle-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size subtle buttons */
+  --button-space-subtle-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size subtle buttons */
+  --button-space-subtle-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size subtle buttons */
+  --button-space-subtle-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size subtle buttons */
+  --button-space-subtle-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size subtle buttons */
+  --button-space-subtle-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size subtle buttons */
+  --button-space-subtle-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size subtle buttons */
+  --button-space-subtle-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size subtle buttons */
+  --button-space-subtle-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size subtle buttons */
   --button-space-toggle-button-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS asset used within S toggle group */
   --button-space-toggle-button-x-s: var(--global-space-macro-xxs); /* Left and right padding on S toggle buttons */
   --button-space-toggle-button-x-m: var(--global-space-macro-xs); /* Left and right padding on medium toggle buttons */

package/css/frozenproduct/large/components/container.css CHANGED Viewed

@@ -4,6 +4,13 @@
 :root {
   --container-size-carousel-mediaslide-minheight: 300; /* max height for media visual */
+  --container-size-dialog-max-width-xxs: 300;
+  --container-size-dialog-max-width-xs: 380;
+  --container-size-dialog-max-width-s: 540;
+  --container-size-dialog-max-width-m: 750;
+  --container-size-dialog-max-width-l: 850;
+  --container-size-dialog-max-width-xl: 960;
+  --container-size-dialog-max-width-xxl: 1080;
   --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
   --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
   --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
@@ -96,13 +103,13 @@
   --container-size-copilot-emptystate-content-maxwidth: calc(var(--global-size-macro-xxxxl) * 5); /* max-width of the insight empty state content area */
   --container-size-copilot-overlay-maxheight: calc(var(--global-size-macro-xxxxl) * 8); /* max-height of the copilot container overlay  */
   --container-size-drag-droptarget: var(--global-size-micro-xxs); /* drop target width or height */
+  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
+  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
+  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-generic-emptystate-illustration-primary-s: calc(var(--global-size-macro-m) * 5); /* Illustration size for small error and empty states */
   --container-size-generic-emptystate-illustration-primary-m: calc(var(--global-size-macro-m) * 6); /* Illustration size for medium error and empty states */
   --container-size-generic-emptystate-illustration-primary-l: calc(var(--global-size-macro-m) * 8); /* Illustration size for large error and empty states */
   --container-size-generic-emptystate-illustration-secondary: calc(var(--global-size-macro-m) + var(--button-size-icon-m)); /* Illustration size for secondary empty states */
-  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
-  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
-  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-icon-s: var(--global-size-icon-m);
   --container-size-icon-m: var(--global-size-icon-m);
   --container-size-icon-l: var(--global-size-icon-m); /* Deliberately referencing global M (20px). Accordion chevron. */

package/css/frozenproduct/large/components/form.css CHANGED Viewed

@@ -3,6 +3,9 @@
  */
 :root {
+  --form-space-datepicker-pr-s: 0; /* right padding on small date picker input */
+  --form-space-datepicker-pr-m: 0; /* right padding on medium date picker input */
+  --form-space-datepicker-pr-l: 0; /* right padding on large date picker input */
   --form-color-switch-border-active: transparent;
   --form-color-switch-border-activedisabled: transparent;
   --form-radius-none: var(--global-radius-none); /* Text editor (internal corners) */
@@ -55,9 +58,6 @@
   --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
-  --form-space-datepicker-pr-s: var(--global-space-micro-xs); /* right padding on small date picker input */
-  --form-space-datepicker-pr-m: var(--global-space-micro-m); /* right padding on medium date picker input */
-  --form-space-datepicker-pr-l: var(--global-space-micro-xl); /* right padding on large date picker input */
   --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
@@ -88,6 +88,9 @@
   --form-space-dropdown-pill-xg-s: var(--global-space-micro-s); /* space between pills inside pill wrapper */
   --form-space-dropdown-pill-xg-m: var(--global-space-micro-s); /* space between pills inside pill wrapper */
   --form-space-dropdown-pill-xg-l: var(--global-space-micro-s); /* space between pills inside pill wrapper */
+  --form-space-dropdown-trigger-subtle-s: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
+  --form-space-dropdown-trigger-subtle-m: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
+  --form-space-dropdown-trigger-subtle-l: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
   --form-space-fileinput-status-xl-m: var(--global-space-macro-ml); /* Left padding in File input (no-thumbnail variant), status text. */
   --form-space-fileinput-status-y-m: var(--global-space-micro-s); /* Vertical padding in status text. */
   --form-space-fileinput-thumbnail-m: var(--global-space-micro-s); /* All padding in File input (thumbnail container). */

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

@@ -169,8 +169,8 @@
   --global-typography-adaptive-component-placeholdertext-xl: 500 40px/1.5 Sage UI;
   --global-typography-adaptive-component-placeholdertext-xxl: 500 52px/1.5 Sage UI;
   --global-typography-adaptive-component-notification-m: 500 12px/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
-  --global-font-size-adaptive-step-2: 11px;
-  --global-font-size-adaptive-step-1: 12px;
+  --global-font-size-adaptive-step-minus2: 11px;
+  --global-font-size-adaptive-step-minus1: 12px;
   --global-font-size-adaptive-step0: 14px;
   --global-font-size-adaptive-step1: 16px;
   --global-font-size-adaptive-step2: 18px;

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

@@ -98,6 +98,7 @@
   --button-size-toggle-s: var(--global-size-macro-s); /* min-height on S single toggle, and on button within M toggle group */
   --button-size-toggle-m: var(--global-size-macro-m); /* min-height on M single toggle, and on button within L toggle group */
   --button-size-toggle-l: var(--global-size-macro-l); /* min-height on L single toggle */
+  --button-size-icon-s: var(--global-size-icon-s);
   --button-size-icon-m: var(--global-size-icon-m);
   --button-size-video-s: var(--global-size-macro-m);
   --button-size-video-m: var(--global-size-macro-xxl);
@@ -132,9 +133,12 @@
   --button-space-primary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
   --button-space-primary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons  */
   --button-space-primary-y-l: calc(var(--global-space-micro-xl) - 0.5); /* Top and bottom padding on Large buttons  */
-  --button-space-primary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size primary buttons */
-  --button-space-primary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size primary buttons */
-  --button-space-primary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size primary buttons */
+  --button-space-primary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size primary buttons */
+  --button-space-primary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size primary buttons */
+  --button-space-primary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size primary buttons */
+  --button-space-primary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size primary buttons */
+  --button-space-primary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size primary buttons */
+  --button-space-primary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size primary buttons */
   --button-space-secondary-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS table buttons */
   --button-space-secondary-x-s: var(--global-space-micro-xxl); /* Left and right padding on small buttons */
   --button-space-secondary-x-m: var(--global-space-macro-xs); /* Left and right padding on medium buttons */
@@ -143,13 +147,18 @@
   --button-space-secondary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
   --button-space-secondary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons  */
   --button-space-secondary-y-l: calc(var(--global-space-micro-xl) - 0.5); /* Top and bottom padding on Large buttons  */
+  --button-space-secondary-xg-xs: var(--global-space-micro-s); /* Item spacing inside XS buttons */
   --button-space-secondary-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
   --button-space-secondary-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
   --button-space-secondary-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
-  --button-space-secondary-xg-xs: var(--global-space-micro-s); /* Item spacing inside XS buttons */
-  --button-space-secondary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size secondary buttons */
-  --button-space-secondary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size secondary buttons */
-  --button-space-secondary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size secondary buttons */
+  --button-space-secondary-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size secondary buttons */
+  --button-space-secondary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size secondary buttons */
+  --button-space-secondary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size secondary buttons */
+  --button-space-secondary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size secondary buttons */
+  --button-space-secondary-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size secondary buttons */
+  --button-space-secondary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size secondary buttons */
+  --button-space-secondary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size secondary buttons */
+  --button-space-secondary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size secondary buttons */
   --button-space-tertiary-y-xs: calc((var(--global-space-macro-xxxs) / 4) - 0.5); /* top and bottom padding on XS table buttons */
   --button-space-tertiary-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
   --button-space-tertiary-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons  */
@@ -162,9 +171,14 @@
   --button-space-tertiary-xg-s: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
   --button-space-tertiary-xg-m: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
   --button-space-tertiary-xg-l: var(--global-space-macro-xxxs); /* Item spacing inside buttons */
-  --button-space-tertiary-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size tertiary buttons */
-  --button-space-tertiary-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size tertiary buttons */
-  --button-space-tertiary-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size tertiary buttons */
+  --button-space-tertiary-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size tertiary buttons */
+  --button-space-tertiary-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size tertiary buttons */
+  --button-space-tertiary-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size tertiary buttons */
+  --button-space-tertiary-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size tertiary buttons */
+  --button-space-tertiary-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size tertiary buttons */
+  --button-space-tertiary-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size tertiary buttons */
+  --button-space-tertiary-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size tertiary buttons */
+  --button-space-tertiary-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size tertiary buttons */
   --button-space-subtle-y-xs: calc((var(--global-space-macro-xxxs) / 4) - 0.5); /* top and bottom padding on XS table buttons */
   --button-space-subtle-y-s: var(--global-space-micro-s); /* Bottom and top padding on small buttons. */
   --button-space-subtle-y-m: var(--global-space-micro-l); /* Top and bottom padding on medium buttons  */
@@ -177,9 +191,14 @@
   --button-space-subtle-xg-s: var(--global-space-micro-s); /* Item spacing inside buttons */
   --button-space-subtle-xg-m: var(--global-space-micro-s); /* Item spacing inside buttons */
   --button-space-subtle-xg-l: var(--global-space-micro-s); /* Item spacing inside buttons */
-  --button-space-subtle-icononly-x-s: var(--global-space-micro-s); /* Left and right padding on icon-only S size subtle buttons */
-  --button-space-subtle-icononly-x-m: var(--global-space-micro-s); /* Left and right padding on icon-only M size subtle buttons */
-  --button-space-subtle-icononly-x-l: var(--global-space-micro-s); /* Left and right padding on icon-only L size subtle buttons */
+  --button-space-subtle-icononly-x-xs: var(--global-space-micro-s); /* Left and right padding on icon-only XS size subtle buttons */
+  --button-space-subtle-icononly-x-s: var(--global-space-micro-m); /* Left and right padding on icon-only S size subtle buttons */
+  --button-space-subtle-icononly-x-m: var(--global-space-micro-xl); /* Left and right padding on icon-only M size subtle buttons */
+  --button-space-subtle-icononly-x-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Left and right padding on icon-only L size subtle buttons */
+  --button-space-subtle-icononly-y-xs: var(--global-space-micro-s); /* Top and bottom padding on icon-only XS size subtle buttons */
+  --button-space-subtle-icononly-y-s: var(--global-space-micro-m); /* Top and bottom padding on icon-only S size subtle buttons */
+  --button-space-subtle-icononly-y-m: var(--global-space-micro-xl); /* Top and bottom padding on icon-only M size subtle buttons */
+  --button-space-subtle-icononly-y-l: calc(var(--global-space-micro-xxl) + var(--global-space-micro-xs)); /* Top and bottom padding on icon-only L size subtle buttons */
   --button-space-toggle-button-x-xs: var(--global-space-macro-xxxs); /* Left and right padding on XS asset used within S toggle group */
   --button-space-toggle-button-x-s: var(--global-space-macro-xxs); /* Left and right padding on S toggle buttons */
   --button-space-toggle-button-x-m: var(--global-space-macro-xs); /* Left and right padding on medium toggle buttons */

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

@@ -4,6 +4,13 @@
 :root {
   --container-size-carousel-mediaslide-minheight: 300; /* max height for media visual */
+  --container-size-dialog-max-width-xxs: 300;
+  --container-size-dialog-max-width-xs: 380;
+  --container-size-dialog-max-width-s: 540;
+  --container-size-dialog-max-width-m: 750;
+  --container-size-dialog-max-width-l: 850;
+  --container-size-dialog-max-width-xl: 960;
+  --container-size-dialog-max-width-xxl: 1080;
   --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
   --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
   --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
@@ -96,13 +103,13 @@
   --container-size-copilot-emptystate-content-maxwidth: calc(var(--global-size-macro-xxxxl) * 5); /* max-width of the insight empty state content area */
   --container-size-copilot-overlay-maxheight: calc(var(--global-size-macro-xxxxl) * 8); /* max-height of the copilot container overlay  */
   --container-size-drag-droptarget: var(--global-size-micro-xxs); /* drop target width or height */
+  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
+  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
+  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-generic-emptystate-illustration-primary-s: calc(var(--global-size-macro-m) * 5); /* Illustration size for small error and empty states */
   --container-size-generic-emptystate-illustration-primary-m: calc(var(--global-size-macro-m) * 6); /* Illustration size for medium error and empty states */
   --container-size-generic-emptystate-illustration-primary-l: calc(var(--global-size-macro-m) * 8); /* Illustration size for large error and empty states */
   --container-size-generic-emptystate-illustration-secondary: calc(var(--global-size-macro-m) + var(--button-size-icon-m)); /* Illustration size for secondary empty states */
-  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
-  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
-  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-icon-s: var(--global-size-icon-m);
   --container-size-icon-m: var(--global-size-icon-m);
   --container-size-icon-l: var(--global-size-icon-m); /* Deliberately referencing global M (20px). Accordion chevron. */

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

@@ -3,6 +3,9 @@
  */
 :root {
+  --form-space-datepicker-pr-s: 0; /* right padding on small date picker input */
+  --form-space-datepicker-pr-m: 0; /* right padding on medium date picker input */
+  --form-space-datepicker-pr-l: 0; /* right padding on large date picker input */
   --form-color-switch-border-active: transparent;
   --form-color-switch-border-activedisabled: transparent;
   --form-radius-none: var(--global-radius-none); /* Text editor (internal corners) */
@@ -55,9 +58,6 @@
   --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
-  --form-space-datepicker-pr-s: var(--global-space-micro-xs); /* right padding on small date picker input */
-  --form-space-datepicker-pr-m: var(--global-space-micro-m); /* right padding on medium date picker input */
-  --form-space-datepicker-pr-l: var(--global-space-micro-xl); /* right padding on large date picker input */
   --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
@@ -88,6 +88,9 @@
   --form-space-dropdown-pill-xg-s: var(--global-space-micro-s); /* space between pills inside pill wrapper */
   --form-space-dropdown-pill-xg-m: var(--global-space-micro-s); /* space between pills inside pill wrapper */
   --form-space-dropdown-pill-xg-l: var(--global-space-micro-s); /* space between pills inside pill wrapper */
+  --form-space-dropdown-trigger-subtle-s: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
+  --form-space-dropdown-trigger-subtle-m: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
+  --form-space-dropdown-trigger-subtle-l: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
   --form-space-fileinput-status-xl-m: var(--global-space-macro-ml); /* Left padding in File input (no-thumbnail variant), status text. */
   --form-space-fileinput-status-y-m: var(--global-space-micro-s); /* Vertical padding in status text. */
   --form-space-fileinput-thumbnail-m: var(--global-space-micro-s); /* All padding in File input (thumbnail container). */

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

@@ -169,8 +169,8 @@
   --global-typography-adaptive-component-placeholdertext-xl: 500 30px/1.5 Sage UI;
   --global-typography-adaptive-component-placeholdertext-xxl: 500 36px/1.5 Sage UI;
   --global-typography-adaptive-component-notification-m: 500 13px/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
-  --global-font-size-adaptive-step-2: 12px;
-  --global-font-size-adaptive-step-1: 13px;
+  --global-font-size-adaptive-step-minus2: 12px;
+  --global-font-size-adaptive-step-minus1: 13px;
   --global-font-size-adaptive-step0: 14px;
   --global-font-size-adaptive-step1: 16px;
   --global-font-size-adaptive-step2: 17px;