refactor(tokens): move less variables to css props (#2163)

dist/alert-dialog/alert-dialog.css

@@ -32,20 +32,20 @@
   max-height: 90%;
   max-width: calc(100% - 32px);
   min-width: 208px;
-  margin-left: 16px;
-  margin-right: 16px;
-  padding: 16px;
+  margin-left: var(--spacing-200);
+  margin-right: var(--spacing-200);
+  padding: var(--spacing-200);
   text-align: center;
 }
 .alert-dialog__title {
-  font-size: 1.25rem;
-  font-weight: 700;
+  font-size: var(--font-size-large-1);
+  font-weight: var(--font-weight-bold);
   line-height: 28px;
   margin: 0;
 }
 .alert-dialog__main {
-  margin: 16px 0;
-  min-height: 16px;
+  margin: var(--spacing-200) 0;
+  min-height: var(--spacing-200);
 }
 .alert-dialog__main > :first-child {
   margin-top: 0;
@@ -99,7 +99,7 @@
 }
 @media (min-width: 768px) {
   .alert-dialog__window {
-    max-width: calc(88% - 32px);
+    max-width: calc(88% - var(--spacing-400));
   }
 }
 @media (min-width: 1024px) {

dist/avatar/avatar.css

@@ -4,8 +4,8 @@
   border-radius: 50%;
   color: var(--color-marketing-teal-foreground-5);
   display: inline-flex;
-  font-size: 1.5rem;
-  font-weight: 700;
+  font-size: var(--font-size-large-2);
+  font-weight: var(--font-weight-bold);
   height: 48px;
   justify-content: center;
   line-height: 48px;
@@ -51,49 +51,49 @@
 }
 .avatar--32,
 .avatar--32 > img {
-  font-size: 1rem;
+  font-size: var(--font-size-medium);
   height: 32px;
   line-height: 32px;
   width: 32px;
 }
 .avatar--40,
 .avatar--40 > img {
-  font-size: 1.25rem;
+  font-size: var(--font-size-large-1);
   height: 40px;
   line-height: 40px;
   width: 40px;
 }
 .avatar--48,
 .avatar--48 > img {
-  font-size: 1.5rem;
+  font-size: var(--font-size-large-2);
   height: 48px;
   line-height: 48px;
   width: 48px;
 }
 .avatar--56,
 .avatar--56 > img {
-  font-size: 1.875rem;
+  font-size: var(--font-size-giant-1);
   height: 56px;
   line-height: 56px;
   width: 56px;
 }
 .avatar--64,
 .avatar--64 > img {
-  font-size: 2.25rem;
+  font-size: var(--font-size-giant-2);
   height: 64px;
   line-height: 64px;
   width: 64px;
 }
 .avatar--96,
 .avatar--96 > img {
-  font-size: 2.875rem;
+  font-size: var(--font-size-giant-3);
   height: 96px;
   line-height: 96px;
   width: 96px;
 }
 .avatar--128,
 .avatar--128 > img {
-  font-size: 4rem;
+  font-size: var(--font-size-giant-4);
   height: 128px;
   line-height: 128px;
   width: 128px;

dist/breadcrumbs/breadcrumbs.css

@@ -1,6 +1,6 @@
 nav.breadcrumbs {
   color: var(--breadcrumbs-item-foreground-color, var(--color-foreground-secondary));
-  font-size: 0.75rem;
+  font-size: var(--font-size-small);
   height: -webkit-fit-content;
   height: fit-content;
   margin: 8px 0;
@@ -73,19 +73,19 @@ nav.breadcrumbs.breadcrumb--overflow {
 nav.breadcrumbs .fake-menu-button__button,
 nav.breadcrumbs .menu-button__button {
   background-color: var(--icon-button-background-color, var(--color-background-secondary));
-  height: 24px;
-  min-height: 24px;
-  min-width: 24px;
+  height: var(--spacing-300);
+  min-height: var(--spacing-300);
+  min-width: var(--spacing-300);
   outline-offset: 1px;
-  width: 24px;
+  width: var(--spacing-300);
 }
 nav.breadcrumbs .fake-menu-button__button svg.icon,
 nav.breadcrumbs .menu-button__button svg.icon {
   fill: var(--breadcrumbs-overflow-foreground-color, var(--color-foreground-secondary));
 }
 nav.breadcrumbs .fake-menu-button__menu,
 nav.breadcrumbs .menu-button__menu {
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
 }
 [dir="rtl"] nav.breadcrumbs svg.icon--chevron-right-12 {
   transform: rotate(180deg);

dist/button/button.css

@@ -11,7 +11,7 @@ a.fake-btn {
   border-radius: var(--btn-border-radius, calc(40px / 2));
   color: inherit;
   display: inline-block;
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   min-height: 40px;
   min-width: 88px;
   padding: 9.5px 20px;
@@ -71,8 +71,8 @@ button.btn--slim,
 a.fake-btn--slim {
   height: 40px;
   min-width: auto;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding-left: var(--spacing-100);
+  padding-right: var(--spacing-100);
 }
 a.fake-btn:visited {
   color: inherit;
@@ -336,14 +336,14 @@ button.btn--tertiary.btn--destructive .progress-spinner {
 button.btn--large,
 a.fake-btn--large {
   border-radius: var(--btn-border-radius, calc(48px / 2));
-  font-size: 1rem;
+  font-size: var(--font-size-medium);
   min-height: 48px;
   padding: 13px 20px;
 }
 button.btn--small,
 a.fake-btn--small {
   border-radius: var(--btn-border-radius, calc(32px / 2));
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   min-height: 32px;
   padding: 6px 16px;
 }
@@ -400,7 +400,7 @@ a.fake-btn--truncated span {
 }
 button.btn--large-truncated,
 a.fake-btn--large-truncated {
-  font-size: 1rem;
+  font-size: var(--font-size-medium);
   height: 48px;
   min-height: 48px;
   padding: 13px 20px;

dist/calendar/calendar.css

@@ -29,7 +29,7 @@
   margin: 0;
 }
 .calendar__header .icon-btn svg {
-  width: 16px;
+  width: var(--spacing-200);
 }
 /************
  *** BODY ***
@@ -43,7 +43,7 @@
   width: var(--calendar-month-width, 100vw);
 }
 .calendar__month + .calendar__month {
-  padding-left: 16px;
+  padding-left: var(--spacing-200);
 }
 /************
  ** MONTHS **
@@ -55,13 +55,13 @@
   display: none;
 }
 .calendar__month > table {
-  border-spacing: 0 12px;
+  border-spacing: 0 var(--spacing-150);
   width: 100%;
 }
 .calendar__month th {
   color: var(--calendar-day-label-color, var(--color-foreground-secondary));
   font-weight: normal;
-  line-height: 10px;
+  line-height: var(--spacing-125);
 }
 .calendar__month td {
   padding: 0;
@@ -71,15 +71,15 @@
   align-items: center;
   background: none;
   border: 1px solid transparent;
-  border-radius: 16px;
+  border-radius: var(--spacing-200);
   border-style: none;
   box-sizing: border-box;
   color: inherit;
   display: inline-flex;
   font: inherit;
-  height: 32px;
+  height: var(--spacing-400);
   justify-content: center;
-  width: 32px;
+  width: var(--spacing-400);
 }
 /************
  *** DAYS ***

dist/carousel/carousel.css

@@ -119,10 +119,10 @@ div.carousel {
   z-index: 1;
 }
 .carousel__control--prev {
-  left: -16px;
+  left: calc(var(--spacing-200) * -1);
 }
 .carousel__control--next {
-  right: -16px;
+  right: calc(var(--spacing-200) * -1);
 }
 .carousel__control .icon--chevron-right-12 {
   -webkit-margin-start: 1px;
@@ -185,10 +185,10 @@ span.carousel__container {
 }
 [dir="rtl"] .carousel__control--prev {
   left: unset;
-  right: -16px;
+  right: calc(var(--spacing-200) * -1);
 }
 [dir="rtl"] .carousel__control--next {
-  left: -16px;
+  left: calc(var(--spacing-200) * -1);
   right: unset;
 }
 [dir="rtl"] .carousel__control .icon--chevron-left-12,

dist/chip/chip.css

@@ -1,20 +1,20 @@
 .chip {
   align-items: center;
   background-color: var(--color-background-tertiary);
-  border-radius: 32px;
+  border-radius: var(--spacing-400);
   color: var(--color-foreground-primary);
   display: inline-flex;
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   gap: 2px;
   justify-content: space-between;
   max-width: 296px;
-  min-height: 20px;
+  min-height: var(--spacing-250);
   min-width: 32px;
-  padding: 0 12px;
+  padding: 0 var(--spacing-150);
 }
 .chip__text {
   overflow: hidden;
-  padding: 6px 0;
+  padding: var(--spacing-75) 0;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -24,12 +24,12 @@ button.chip__button {
   border-radius: 50px;
   box-sizing: border-box;
   flex-shrink: 0;
-  height: 24px;
+  height: var(--spacing-300);
   line-height: 0;
   -webkit-margin-end: -8px;
           margin-inline-end: -8px;
   padding: 0;
-  width: 24px;
+  width: var(--spacing-300);
 }
 button.chip__button:focus-visible {
   background-color: var(--state-layer-focus);

dist/combobox/combobox.css

@@ -210,7 +210,7 @@ span.combobox {
   width: 100%;
 }
 .combobox--large .combobox__control > input {
-  font-size: 1.125rem;
+  font-size: var(--font-size-18);
   height: 48px;
 }
 .combobox__control > input[disabled] {

dist/confirm-dialog/confirm-dialog.css

@@ -32,20 +32,20 @@
   max-height: 90%;
   max-width: calc(100% - 32px);
   min-width: 208px;
-  margin-left: 16px;
-  margin-right: 16px;
-  padding: 16px;
+  margin-left: var(--spacing-200);
+  margin-right: var(--spacing-200);
+  padding: var(--spacing-200);
   text-align: center;
 }
 .confirm-dialog__title {
-  font-size: 1.25rem;
-  font-weight: 700;
+  font-size: var(--font-size-large-1);
+  font-weight: var(--font-weight-bold);
   line-height: 28px;
   margin: 0;
 }
 .confirm-dialog__main {
-  margin: 16px 0;
-  min-height: 16px;
+  margin: var(--spacing-200) 0;
+  min-height: var(--spacing-200);
 }
 .confirm-dialog__main > :first-child {
   margin-top: 0;
@@ -55,7 +55,7 @@
 }
 a.confirm-dialog__confirm,
 button.confirm-dialog__confirm {
-  margin-left: 8px;
+  margin-left: var(--spacing-100);
 }
 .confirm-dialog--show.confirm-dialog--mask-fade,
 .confirm-dialog--hide.confirm-dialog--mask-fade {
@@ -103,7 +103,7 @@ button.confirm-dialog__confirm {
 }
 @media (min-width: 768px) {
   .confirm-dialog__window {
-    max-width: calc(88% - 32px);
+    max-width: calc(88% - var(--spacing-400));
   }
 }
 @media (min-width: 1024px) {

dist/cta-button/cta-button.css

@@ -11,7 +11,7 @@ a.cta-btn {
   border-radius: var(--cta-btn-border-radius, calc(40px / 2));
   color: var(--cta-btn-foreground-color, var(--color-foreground-primary));
   display: inline-block;
-  font-size: 0.875rem;
+  font-size: var(--font-size-default);
   max-width: 100%;
   padding: 9.5px 20px;
 }
@@ -102,13 +102,13 @@ a.cta-btn--truncated span {
 a.cta-btn--large {
   border-radius: 24px;
   display: inline-flex;
-  font-size: 1rem;
+  font-size: var(--font-size-medium);
   min-height: 48px;
 }
 a.cta-btn--large-truncated {
   border-radius: 24px;
   display: inline-flex;
-  font-size: 1rem;
+  font-size: var(--font-size-medium);
   height: 48px;
 }
 a.cta-btn--large-truncated,
@@ -121,7 +121,7 @@ a.cta-btn--large-truncated span {
 a.cta-btn--large-fixed-height {
   border-radius: 24px;
   display: inline-flex;
-  font-size: 1rem;
+  font-size: var(--font-size-medium);
   height: 48px;
 }
 [dir="rtl"] a.cta-btn svg.icon--arrow-right-24 {