refactor: spacing tokens from less to css vars

src/less/alert-dialog/alert-dialog.less

@@ -10,9 +10,9 @@
 .alert-dialog__window {
     .lightbox-dialog-window();
 
-    margin-left: @spacing-200;
-    margin-right: @spacing-200;
-    padding: @spacing-200;
+    margin-left: var(--spacing-200);
+    margin-right: var(--spacing-200);
+    padding: var(--spacing-200);
     text-align: center;
 }
 
@@ -23,8 +23,8 @@
 }
 
 .alert-dialog__main {
-    margin: @spacing-200 0;
-    min-height: @spacing-200;
+    margin: var(--spacing-200) 0;
+    min-height: var(--spacing-200);
 
     & > :first-child {
         margin-top: 0;
@@ -84,7 +84,7 @@
 
 @media (min-width: @_screen-size-MD) {
     .alert-dialog__window {
-        max-width: calc(88% - @spacing-400;);
+        max-width: calc(88% - var(--spacing-400));
     }
 }
 

src/less/breadcrumbs/breadcrumbs.less

@@ -92,11 +92,11 @@ nav.breadcrumbs .menu-button__button {
         --icon-button-background-color,
         var(--color-background-secondary)
     );
-    height: @spacing-300;
-    min-height: @spacing-300;
-    min-width: @spacing-300;
+    height: var(--spacing-300);
+    min-height: var(--spacing-300);
+    min-width: var(--spacing-300);
     outline-offset: 1px;
-    width: @spacing-300;
+    width: var(--spacing-300);
 }
 
 nav.breadcrumbs .fake-menu-button__button svg.icon,

src/less/button/button.less

@@ -53,8 +53,8 @@ button.btn--slim,
 a.fake-btn--slim {
     height: @button-height-regular;
     min-width: auto;
-    padding-left: @spacing-100;
-    padding-right: @spacing-100;
+    padding-left: var(--spacing-100);
+    padding-right: var(--spacing-100);
 }
 
 a.fake-btn:visited {

src/less/calendar/calendar.less

@@ -40,7 +40,7 @@
 }
 
 .calendar__header .icon-btn svg {
-    width: @spacing-200;
+    width: var(--spacing-200);
 }
 
 /************
@@ -58,7 +58,7 @@
 }
 
 .calendar__month + .calendar__month {
-    padding-left: @spacing-200;
+    padding-left: var(--spacing-200);
 }
 
 /************
@@ -74,14 +74,14 @@
 }
 
 .calendar__month > table {
-    border-spacing: 0 @spacing-150;
+    border-spacing: 0 var(--spacing-150);
     width: 100%;
 }
 
 .calendar__month th {
     .color-token(calendar-day-label-color, color-foreground-secondary);
     font-weight: normal;
-    line-height: @spacing-125;
+    line-height: var(--spacing-125);
 }
 
 .calendar__month td {
@@ -93,15 +93,15 @@
     align-items: center;
     background: none;
     border: 1px solid transparent;
-    border-radius: @spacing-200;
+    border-radius: var(--spacing-200);
     border-style: none; // Only effects high contrast users
     box-sizing: border-box;
     color: inherit;
     display: inline-flex;
     font: inherit;
-    height: @spacing-400;
+    height: var(--spacing-400);
     justify-content: center;
-    width: @spacing-400;
+    width: var(--spacing-400);
 }
 
 /************

src/less/carousel/carousel.less

@@ -17,11 +17,11 @@
     .background-color-token(carousel-paddle-background-color, color-background-primary);
 
     &--prev {
-        left: -@spacing-200;
+        left: calc(var(--spacing-200) * -1);
     }
 
     &--next {
-        right: -@spacing-200;
+        right: calc(var(--spacing-200) * -1);
     }
 
     .icon--chevron-right-12 {
@@ -195,11 +195,11 @@ span.carousel__container {
 [dir="rtl"] {
     .carousel__control--prev {
         left: unset;
-        right: -@spacing-200;
+        right: calc(var(--spacing-200) * -1);
     }
 
     .carousel__control--next {
-        left: -@spacing-200;
+        left: calc(var(--spacing-200) * -1);
         right: unset;
     }
 

src/less/chip/chip.less

@@ -3,16 +3,16 @@
 .chip {
     align-items: center;
     background-color: var(--color-background-tertiary);
-    border-radius: @spacing-400;
+    border-radius: var(--spacing-400);
     color: var(--color-foreground-primary);
     display: inline-flex;
     font-size: var(--font-size-default);
     gap: 2px;
     justify-content: space-between;
     max-width: 296px;
-    min-height: @spacing-250;
+    min-height: var(--spacing-250);
     min-width: 32px;
-    padding: 0 @spacing-150;
+    padding: 0 var(--spacing-150);
 }
 
 .chip__text {
@@ -28,11 +28,11 @@ button.chip__button {
     border-radius: 50px;
     box-sizing: border-box;
     flex-shrink: 0;
-    height: @spacing-300;
+    height: var(--spacing-300);
     line-height: 0;
     margin-inline-end: -8px;
     padding: 0;
-    width: @spacing-300;
+    width: var(--spacing-300);
 }
 
 button.chip__button:focus-visible {

src/less/confirm-dialog/confirm-dialog.less

@@ -10,9 +10,9 @@
 .confirm-dialog__window {
     .lightbox-dialog-window();
 
-    margin-left: @spacing-200;
-    margin-right: @spacing-200;
-    padding: @spacing-200;
+    margin-left: var(--spacing-200);
+    margin-right: var(--spacing-200);
+    padding: var(--spacing-200);
     text-align: center;
 }
 
@@ -23,8 +23,8 @@
 }
 
 .confirm-dialog__main {
-    margin: @spacing-200 0;
-    min-height: @spacing-200;
+    margin: var(--spacing-200) 0;
+    min-height: var(--spacing-200);
 
     & > :first-child {
         margin-top: 0;
@@ -37,7 +37,7 @@
 
 a.confirm-dialog__confirm,
 button.confirm-dialog__confirm {
-    margin-left: @spacing-100;
+    margin-left: var(--spacing-100);
 }
 
 .confirm-dialog--show,
@@ -89,7 +89,7 @@ button.confirm-dialog__confirm {
 
 @media (min-width: @_screen-size-MD) {
     .confirm-dialog__window {
-        max-width: calc(88% - @spacing-400);
+        max-width: calc(88% - var(--spacing-400));
     }
 }
 

src/less/date-textbox/date-textbox.less

@@ -3,20 +3,20 @@
 @import "../mixins/private/bubble-mixins.less";
 
 .date-textbox {
-    // 343px - (2 * @spacing-200) [not autmatically compiled by LESS]
+    // 343px - (2 * var(--spacing-200)) [not autmatically compiled by LESS]
     --calendar-month-width: 311px;
 }
 
 .date-textbox > .textbox + .textbox {
-    margin-left: @spacing-100;
+    margin-left: var(--spacing-100);
 }
 
 .date-textbox__popover {
     .background-color-token(calendar-background-color, color-background-primary);
-    border-radius: @spacing-200;
+    border-radius: var(--spacing-200);
     filter: var(--bubble-filter);
-    margin-left: -@spacing-100;
-    padding: @spacing-200;
+    margin-left: calc(var(--spacing-100) * -1);
+    padding: var(--spacing-200);
     position: absolute;
     z-index: 1;
 }

src/less/drawer-dialog/drawer-dialog.less

@@ -13,7 +13,7 @@
 }
 
 .drawer-dialog__header {
-    .dialog-header-content(@top-margin: @spacing-250);
+    .dialog-header-content(@top-margin: var(--spacing-250));
 }
 
 .drawer-dialog__header .fake-link {

src/less/field/field.less

@@ -57,8 +57,8 @@ div.field--table {
 .field__description {
     .color-token(field-description-color, color-foreground-secondary);
     font-size: var(--font-size-small);
-    line-height: @spacing-200;
-    margin-top: @spacing-50;
+    line-height: var(--spacing-200);
+    margin-top: var(--spacing-50);
 }
 
 .field__description--confirmation {

src/less/global/global.less

@@ -16,7 +16,7 @@ fieldset {
 }
 
 legend {
-    margin-bottom: @spacing-100;
+    margin-bottom: var(--spacing-100);
 }
 
 a {

src/less/infotip/infotip.less

@@ -16,7 +16,7 @@ span.infotip {
     .color-token(infotip-foreground-color, color-foreground-primary);
     display: none;
     left: 0 - 6px;
-    margin-top: @spacing-200;
+    margin-top: var(--spacing-200);
     position: absolute;
 }
 
@@ -97,7 +97,7 @@ span.infotip__mask {
 .infotip__heading {
     font-size: 1em;
     font-weight: bold;
-    margin: 0 0 @spacing-50;
+    margin: 0 0 var(--spacing-50);
 }
 
 span.infotip__heading {
@@ -121,7 +121,7 @@ span.infotip__heading {
 
 button.infotip__close,
 .infotip__close {
-    margin-left: @spacing-200;
+    margin-left: var(--spacing-200);
 }
 
 @media (min-width: @_screen-size-SM) {

src/less/inline-notice/inline-notice.less

@@ -2,7 +2,7 @@
 @import "../mixins/private/token-mixins.less";
 
 .inline-notice {
-    margin: @spacing-100 0;
+    margin: var(--spacing-100) 0;
 }
 
 div.inline-notice {
@@ -15,8 +15,8 @@ span.inline-notice {
 
 .inline-notice__header {
     display: flex;
-    margin-inline-end: @spacing-100;
-    margin-top: @spacing-50;
+    margin-inline-end: var(--spacing-100);
+    margin-top: var(--spacing-50);
 }
 
 .inline-notice p {

src/less/lightbox-dialog/lightbox-dialog.less

@@ -41,20 +41,20 @@
 }
 
 .lightbox-dialog--expressive .lightbox-dialog__window {
-    padding-bottom: @spacing-100;
+    padding-bottom: var(--spacing-100);
 }
 
 .lightbox-dialog--expressive .lightbox-dialog__header > * {
     margin-top: 218px;
 }
 
 .lightbox-dialog--expressive .lightbox-dialog__header {
-    margin: @spacing-300 @spacing-300 0;
+    margin: var(--spacing-300) var(--spacing-300) 0;
 }
 
 .lightbox-dialog--expressive .lightbox-dialog__main,
 .lightbox-dialog--expressive .lightbox-dialog__footer {
-    padding: @spacing-200 @spacing-300;
+    padding: var(--spacing-200) var(--spacing-300);
 }
 
 // inherits from .icon-btn
@@ -71,7 +71,7 @@ button.icon-btn.lightbox-dialog__close {
 }
 
 button.icon-btn.lightbox-dialog__prev {
-    margin-inline-end: @spacing-200;
+    margin-inline-end: var(--spacing-200);
 }
 
 .lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev,
@@ -86,7 +86,7 @@ button.icon-btn.lightbox-dialog__prev {
 
 .lightbox-dialog__title {
     &:not(:first-child) {
-        margin-left: @spacing-200;
+        margin-left: var(--spacing-200);
     }
 }
 
@@ -194,7 +194,7 @@ button.icon-btn.lightbox-dialog__prev {
     .lightbox-dialog__window {
         .lightbox-dialog-window-large();
 
-        max-width: calc(88% - @spacing-400);
+        max-width: calc(88% - var(--spacing-400));
     }
 
     .lightbox-dialog__handle {

src/less/listbox-button/listbox-button.less

@@ -100,7 +100,7 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 .listbox-button__option svg.icon {
     .listbox-option-status();
 
-    margin-inline-start: @spacing-100;
+    margin-inline-start: var(--spacing-100);
 }
 
 div.listbox-button__option[role="option"][aria-selected="true"] svg.icon {

src/less/listbox/listbox.less

@@ -5,7 +5,7 @@
 @import "../mixins/public/utility-mixins.less";
 
 div.listbox {
-    margin: @spacing-200 0; // margin collapse sensible default
+    margin: var(--spacing-200) 0; // margin collapse sensible default
 }
 
 span.listbox {
@@ -43,7 +43,7 @@ span.listbox__value {
 div.listbox__option svg.icon {
     .listbox-option-status();
 
-    margin-inline-start: @spacing-100;
+    margin-inline-start: var(--spacing-100);
 }
 
 div.listbox__options[role="listbox"]:focus