@dialpad/dialtone-css 8.78.0-next.1 → 8.78.0-next.2

package/lib/build/less/recipes/feed_item_row.less

@@ -2,8 +2,8 @@
 .d-recipe-feed-item-row {
   position: relative;
   box-sizing: border-box;
-  inline-size: var(--dt-size-100-percent);
-  padding: var(--dt-size-300) var(--dt-size-500);
+  inline-size: var(--dt-layout-100-percent);
+  padding: var(--dt-spacing-50) var(--dt-spacing-200);
 
   &:focus-visible {
     box-shadow: var(--dt-shadow-focus-inset);
@@ -12,7 +12,7 @@
   .d-list-item__left {
     display: block;
     align-content: flex-start;
-    min-inline-size: var(--dt-size-600);
+    min-inline-size: var(--dt-layout-50);
     text-align: end;
   }
 
@@ -44,11 +44,11 @@
 }
 
 .d-recipe-feed-item-row__avatar-container {
-  padding-block: var(--dt-size-300) var(--dt-size-300);
+  padding-block: var(--dt-spacing-50) var(--dt-spacing-50);
 }
 
 .d-recipe-feed-item-row__attachment {
-  padding-block: var(--dt-size-200) var(--dt-size-300);
+  padding-block: var(--dt-spacing-25) var(--dt-spacing-50);
 }
 
 .d-recipe-feed-item-row__image {
@@ -69,7 +69,7 @@
 .d-recipe-feed-item-row__header {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--dt-size-300);
+  gap: var(--dt-spacing-50);
   align-items: baseline;
   font-size: var(--dt-font-size-200);
   line-height: var(--dt-font-line-height-300);
@@ -88,11 +88,11 @@
 .d-recipe-feed-item-row__reactions {
   display: flex;
   flex-wrap: wrap;
-  padding-block: var(--dt-size-200) var(--dt-size-200);
+  padding-block: var(--dt-spacing-25) var(--dt-spacing-25);
 }
 
 .d-recipe-feed-item-row__threading {
-  padding-block: var(--dt-size-200) var(--dt-size-200);
+  padding-block: var(--dt-spacing-25) var(--dt-spacing-25);
 }
 
 .d-recipe-feed-item-row__left-time {
@@ -105,7 +105,7 @@
 
 .d-recipe-feed-item-row__menu {
   position: absolute;
-  inset-block-start: var(--dt-size-550-negative);
-  inset-inline-end: var(--dt-size-450);
+  inset-block-start: var(--dt-spacing-300-negative);
+  inset-inline-end: var(--dt-spacing-150);
 }
 }

package/lib/build/less/recipes/grouped_chip.less

@@ -15,14 +15,14 @@
 }
 
 .d-recipe-grouped-chip__content-left {
-  max-inline-size: var(--dt-size-730);
+  max-inline-size: calc(var(--dt-layout-125) + var(--dt-spacing-25));
   background-color: var(--dt-color-surface-moderate-opaque);
   border-start-start-radius: var(--dt-size-radius-pill);
   border-end-start-radius: var(--dt-size-radius-pill);
 }
 
 .d-recipe-grouped-chip__content-right {
-  max-inline-size: var(--dt-size-730);
+  max-inline-size: calc(var(--dt-layout-125) + var(--dt-spacing-25));
   background-color: var(--dt-color-purple-200);
   border-start-end-radius: var(--dt-size-radius-pill);
   border-end-end-radius: var(--dt-size-radius-pill);

package/lib/build/less/recipes/ivr_node.less

@@ -10,18 +10,18 @@
   cursor: pointer;
 
   .d-card {
-    inline-size: var(--dt-size-100-percent);
+    inline-size: var(--dt-layout-100-percent);
   }
 
   .d-card__header {
-    margin-block-start: var(--dt-size-100-negative);
-    padding: var(--dt-size-0);
+    margin-block-start: var(--dt-spacing-1-negative);
+    padding: var(--dt-spacing-0);
     border-start-start-radius: var(--dt-size-border-300);
     border-start-end-radius: var(--dt-size-border-300);
   }
 
   .d-card__content {
-    padding: var(--dt-size-400) var(--dt-size-450) var(--dt-size-450);
+    padding: var(--dt-spacing-100) var(--dt-spacing-150) var(--dt-spacing-150);
     border-block-start: var(--dt-size-border-100) solid var(--dt-color-black-300);
   }
 }
@@ -88,27 +88,27 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  inline-size: var(--dt-size-400);
-  block-size: var(--dt-size-400);
-  margin-block-end: var(--dt-size-300-negative);
+  inline-size: calc(var(--dt-layout-25) / 2);
+  block-size: calc(var(--dt-layout-25) / 2);
+  margin-block-end: var(--dt-spacing-50-negative);
   background-color: var(--dt-color-purple-950);
   border-color: var(--dt-color-purple-950);
   border-radius: var(--dt-size-radius-circle);
 }
 
 .d-recipe-ivr-node__connector--selected {
-  margin-block-end: var(--dt-size-400-negative);
+  margin-block-end: var(--dt-spacing-100-negative);
 }
 
 .d-recipe-ivr-node__connector-dtmf {
-  inline-size: var(--dt-size-550);
-  block-size: var(--dt-size-550);
-  margin-block-end: var(--dt-size-450-negative);
+  inline-size: calc(var(--dt-layout-25) * 1.5);
+  block-size: calc(var(--dt-layout-25) * 1.5);
+  margin-block-end: var(--dt-spacing-150-negative);
   color: var(--dt-color-foreground-primary-inverted);
   font-size: var(--dt-font-size-200);
 
   .d-recipe-ivr-node__connector--selected {
-    margin-block-end: var(--dt-size-500-negative);
+    margin-block-end: var(--dt-spacing-200-negative);
   }
 }
 
@@ -127,7 +127,7 @@
 }
 
 .d-recipe-ivr-node__dropdown-list {
-  inline-size: var(--dt-size-825);
+  inline-size: var(--dt-layout-250);
 }
 
 .d-recipe-ivr-node__goto-icon {

package/lib/build/less/recipes/leftbar_row.less

@@ -5,11 +5,11 @@
   //  ----------------------------------------------------------------------------
   --leftbar-row-color-foreground: var(--dt-shell-color-foreground-primary);
   --leftbar-row-color-background: var(--dt-shell-color-surface-default);
-  --leftbar-row-radius: var(--dt-size-radius-pill);
+  --leftbar-row-radius: var(--dt-size-radius-400); // TODO: not a final solution
   --leftbar-row-opacity: 100%;
   --leftbar-row-alpha-color-foreground: var(--dt-shell-color-foreground-primary);
-  --leftbar-row-alpha-width: calc(var(--dt-size-300) * 10);
-  --leftbar-row-alpha-height: calc(var(--dt-size-300) * 9);
+  --leftbar-row-alpha-width: calc(var(--dt-layout-50) + var(--dt-spacing-50));
+  --leftbar-row-alpha-height: calc(var(--dt-layout-50) + var(--dt-spacing-50));
   --leftbar-row-omega-height: var(--leftbar-row-alpha-height);
   --leftbar-row-unread-badge-display: inline-flex;
   --leftbar-row-description-color-foreground: var(--dt-shell-color-foreground-primary);
@@ -19,9 +19,9 @@
   --leftbar-row-status-color-foreground: var(--dt-shell-color-foreground-muted);
   --leftbar-row-status-font-size: var(--dt-font-size-100);
   --leftbar-row-status-line-height: var(--dt-font-line-height-100);
-  --leftbar-row-action-position-right: var(--dt-size-400);
+  --leftbar-row-action-position-right: var(--dt-spacing-100);
   --leftbar-row-action-position-bottom: 50%;
-  --leftbar-row-action-width: var(--dt-size-550);
+  --leftbar-row-action-width: calc(var(--dt-layout-25) * 1.5);
   --leftbar-row-action-height: var(--leftbar-row-action-width);
 
   .d-presence {
@@ -104,7 +104,7 @@
   }
 
   &__status {
-    padding-block-end: var(--dt-size-100);
+    padding-block-end: var(--dt-spacing-1);
     overflow: hidden;
     color: var(--leftbar-row-status-color-foreground);
     font-size: var(--leftbar-row-status-font-size);
@@ -142,11 +142,11 @@
   }
 
   &__is-typing {
-    --is-typing-size-shape: var(--dt-size-550);
+    --is-typing-size-shape: calc(var(--dt-layout-25) * 1.5);
 
     position: absolute;
     display: flex;
-    gap: var(--dt-size-200);
+    gap: var(--dt-spacing-25);
     align-items: center;
     justify-content: center;
     inline-size: var(--is-typing-size-shape);
@@ -156,8 +156,8 @@
 
     & span {
       display: inline-block;
-      inline-size: var(--dt-size-300);
-      block-size: var(--dt-size-300);
+      inline-size: var(--dt-spacing-25);
+      block-size: var(--dt-spacing-25);
       padding: 0;
       background: var(--dt-color-surface-strong);
       border-radius: var(--dt-size-radius-pill);
@@ -256,7 +256,7 @@
     box-sizing: border-box;
     inline-size: var(--leftbar-row-alpha-width);
     block-size: var(--leftbar-row-alpha-height);
-    padding-inline: var(--dt-size-400) var(--dt-size-400);
+    padding-inline: var(--dt-spacing-50);
     color: var(--leftbar-row-alpha-color-foreground);
     border-radius: var(--leftbar-row-radius) 0 0 var(--leftbar-row-radius);
   }
@@ -271,7 +271,7 @@
     inset-block-start: var(--leftbar-row-action-position-bottom);
     inset-inline-end: var(--leftbar-row-action-position-right);
     display: flex;
-    gap: var(--dt-size-300);
+    gap: var(--dt-spacing-50);
     align-items: center;
     justify-content: flex-end;
     box-sizing: border-box;
@@ -310,13 +310,13 @@
 
   &__active-voice {
     display: inline-flex;
-    color: var(--dt-color-purple-600);
+    color: var(--dt-color-link-primary);
     .d-recipe-leftbar-row-opacity-pulsate();
   }
 
   &__dnd {
-    padding-block-start: var(--dt-size-200);
-    padding-inline-end: var(--dt-size-300);
+    padding-block-start: var(--dt-spacing-25);
+    padding-inline-end: var(--dt-spacing-50);
     color: var(--dt-color-foreground-tertiary);
     font-weight: var(--dt-font-weight-medium);
     font-size: var(--dt-font-size-100);
@@ -325,32 +325,32 @@
 
   &__container--off-duty {
     background-color: var(--dt-color-surface-critical);
-    border: var(--dt-size-100) solid var(--dt-color-border-subtle);
+    border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
     border-radius: var(--dt-size-radius-500);
 
     .d-recipe-leftbar-row__primary {
-      margin: calc(var(--dt-size-100) * -1);
+      margin: var(--dt-spacing-1-negative);
     }
   }
 
   &--contact-centers {
     .d-recipe-leftbar-row__alpha {
-      padding-inline: var(--dt-size-450) var(--dt-size-450);
+      padding-inline: var(--dt-spacing-150) var(--dt-spacing-150);
     }
 
     .d-recipe-leftbar-row__action-container {
       display: inline-flex;
       align-items: center;
       justify-content: flex-end;
-      min-inline-size: var(--dt-size-600);
-      block-size: var(--dt-size-500);
+      min-inline-size: var(--dt-layout-50);
+      block-size: var(--dt-layout-25);
     }
   }
 
   &__icon-cc {
-    inline-size: calc(var(--dt-size-300) * 3.5);
-    block-size: calc(var(--dt-size-300) * 3.5);
-    border-radius: var(--dt-size-200);
+    inline-size: calc(var(--dt-layout-25) - var(--dt-spacing-25));
+    block-size: calc(var(--dt-layout-25) - var(--dt-spacing-25));
+    border-radius: var(--dt-size-radius-200);
   }
 }
 

package/lib/build/less/recipes/message_input.less

@@ -14,12 +14,12 @@
 
   &:focus-within {
     border-color: var(--dt-color-border-bold);
-    box-shadow: 0 0 var(--dt-size-300) 0 var(--dt-color-surface-moderate-opaque);
+    box-shadow: 0 0 var(--dt-spacing-50) 0 var(--dt-color-surface-moderate-opaque);
   }
 }
 
 .d-recipe-message-input__button-stack {
-  padding: var(--dt-size-400);
+  padding: var(--dt-spacing-100);
   background-color: var(--dt-color-surface-secondary);
 }
 
@@ -28,7 +28,7 @@
 }
 
 .d-recipe-message-input__editor-wrapper {
-  padding: var(--dt-size-450) var(--dt-size-500) var(--dt-size-300);
+  padding: var(--dt-spacing-150) var(--dt-layout-25) var(--dt-spacing-50);
 }
 
 .d-recipe-message-input__link-popover {
@@ -36,7 +36,7 @@
 }
 
 .d-recipe-message-input__remaining-char {
-  margin-inline-end: var(--dt-size-300);
+  margin-inline-end: var(--dt-spacing-50);
   color: var(--dt-color-foreground-critical);
   font-size: var(--dt-font-size-100);
 }
@@ -55,7 +55,7 @@
 .d-recipe-message-input__send-button.d-recipe-message-input__button:not(.d-btn--icon-only),
 .d-recipe-message-input__cancel-button {
   max-inline-size: unset;
-  padding: var(--dt-size-350);
+  padding: var(--dt-spacing-75);
 }
 
 .d-recipe-message-input__send-button--disabled {
@@ -68,7 +68,7 @@
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
-  padding: var(--dt-size-300) var(--dt-size-400) var(--dt-size-400);
+  padding: var(--dt-spacing-50) var(--dt-spacing-100) var(--dt-spacing-100);
 }
 
 .d-recipe-message-input__bottom-section-left,
@@ -93,10 +93,10 @@
 .d-recipe-message-input-meeting-pill__layout {
   grid-template-areas: 'start content end';
   grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
-  gap: var(--dt-size-400);
+  gap: var(--dt-spacing-100);
   align-items: center;
-  max-inline-size: var(--dt-size-905);
-  padding: var(--dt-size-200) var(--dt-size-400);
+  max-inline-size: var(--dt-layout-400);
+  padding: var(--dt-spacing-25) var(--dt-spacing-100);
   font: var(--dt-typography-headline-md);
   border: var(--dt-size-border-100) solid var(--dt-color-border-default);
   border-radius: var(--dt-size-radius-300);
@@ -105,7 +105,7 @@
 .d-recipe-message-input-meeting-pill__icon {
   display: flex;
   align-items: center;
-  padding: var(--dt-size-350);
+  padding: var(--dt-spacing-75);
 }
 
 .d-recipe-message-input-meeting-pill__close {
@@ -119,9 +119,9 @@
 }
 
 .d-recipe-message-input--button-group-divider {
-  inline-size: var(--dt-size-100);
-  block-size: calc(var(--dt-size-550) + var(--dt-size-300));
-  margin-inline: var(--dt-size-300);
+  inline-size: var(--dt-spacing-1);
+  block-size: var(--dt-spacing-350);
+  margin-inline: var(--dt-spacing-50);
   background: var(--dt-color-border-subtle);
 }
 
@@ -134,10 +134,10 @@
 }
 
 .d-recipe-message-input__link-input {
-  margin-block-start: var(--dt-size-350);
-  padding-block: var(--dt-size-200);
+  margin-block-start: var(--dt-spacing-75);
+  padding-block: var(--dt-spacing-25);
   background-color: var(--dt-color-surface-secondary);
-  border: var(--dt-size-100) solid;
+  border: var(--dt-size-border-100) solid;
   border-color: var(--dt-color-border-default);
 }
 }

package/lib/build/less/recipes/settings_menu_button.less

@@ -1,11 +1,10 @@
 @layer dialtone.components {
 .d-recipe-settings-menu-button {
-  inline-size: var(--dt-size-550);
-  block-size: var(--dt-size-600);
-  padding: var(--dt-size-0);
+  inline-size: calc(var(--dt-layout-25) * 1.5);
+  block-size: var(--dt-layout-50);
+  padding: var(--dt-spacing-0);
   color: var(--dt-shell-action-color-foreground-primary-default);
   background-color: var(--dt-shell-action-color-background-primary-default);
-  border-radius: var(--dt-size-550);
 
   &:hover {
     color: var(--dt-shell-action-color-foreground-primary-hover);
@@ -18,15 +17,16 @@
 }
 
 .d-recipe-settings-menu-button-update {
-  block-size: var(--dt-size-600);
-  color: var(--dt-color-blue-800);
-  background-color: oklch(from var(--dt-color-blue-200) l c h / 0.25);
-  border-color: oklch(from var(--dt-color-blue-200) l c h / 0.25);
+  block-size: var(--dt-layout-50);
+  padding-inline-start: var(--dt-spacing-150);
+  color: var(--dt-color-blue-800); // TODO
+  background-color: var(--dt-color-surface-info);
+  border-color: var(--dt-color-border-default);
   border-radius: var(--dt-size-radius-pill);
 
   &:hover {
-    color: var(--dt-shell-action-color-foreground-primary-hover);
-    background-color: oklch(from var(--dt-color-blue-200) l c h / 0.5);
+    color: var(--dt-shell-action-color-foreground-secondary-hover);
+    background-color: oklch(from var(--dt-color-surface-info) calc(l - 0.01) c h);
   }
 }
 }

package/lib/build/less/recipes/time_pill.less

@@ -1,6 +1,6 @@
 @layer dialtone.components {
 .d-recipe-time-pill {
-  padding: var(--dt-size-300) var(--dt-size-500);
+  padding: var(--dt-spacing-50) var(--dt-spacing-200);
   color: var(--dt-color-foreground-primary);
   font-size: var(--dt-font-size-100);
   line-height: var(--dt-font-line-height-300);

package/lib/build/less/recipes/top_banner_info.less

@@ -8,24 +8,24 @@
 }
 
 .d-recipe-top-banner-info__left {
-  min-inline-size: var(--dt-size-20-percent);
-  margin: var(--dt-size-300) 0 var(--dt-size-300) var(--dt-size-400);
+  min-inline-size: var(--dt-layout-20-percent);
+  margin: var(--dt-spacing-50) 0 var(--dt-spacing-50) var(--dt-spacing-100);
 }
 
 .d-recipe-top-banner-info__middle {
   display: flex;
-  gap: var(--dt-size-300);
+  gap: var(--dt-spacing-50);
   align-items: center;
-  margin-block: var(--dt-size-300) var(--dt-size-300);
+  margin-block: var(--dt-spacing-50) var(--dt-spacing-50);
 }
 
 .d-recipe-top-banner-info__right {
   display: flex;
-  gap: var(--dt-size-300);
+  gap: var(--dt-spacing-50);
   align-items: baseline;
   justify-content: flex-end;
-  min-inline-size: var(--dt-size-20-percent);
-  margin: var(--dt-size-300) var(--dt-size-500) var(--dt-size-300) 0;
+  min-inline-size: var(--dt-layout-20-percent);
+  margin: var(--dt-spacing-50) var(--dt-spacing-100) var(--dt-spacing-50) 0;
   text-align: end;
 }
 
@@ -48,4 +48,4 @@
 .d-recipe-top-banner-info--primary {
   background-color: var(--dt-color-surface-primary);
 }
-}
+}

package/lib/build/less/recipes/unread_pill.less

@@ -1,10 +1,10 @@
 @layer dialtone.components {
 .d-recipe-leftbar-unread-pill {
   display: flex;
-  gap: var(--dt-size-300);
+  gap: var(--dt-spacing-50);
   align-items: center;
   justify-content: center;
-  padding: var(--dt-size-200) var(--dt-size-500) var(--dt-size-200) var(--dt-size-400);
+  padding: var(--dt-spacing-25) var(--dt-spacing-200) var(--dt-spacing-25) var(--dt-spacing-100);
   font-size: var(--dt-font-size-100);
   line-height: var(--dt-font-line-height-600);
   border: none;

package/lib/build/less/themes/default.less

@@ -28,7 +28,7 @@
     primary-color-hover:                    oklch(from var(--dt-color-purple-600) calc(l - 0.1) c h);
     nav-background-color:                   var(--dt-color-purple-950);
 
-    topbar-height:                                    var(--dt-size-700);
+    topbar-height:                                    var(--dt-layout-100);
 
     base--font-size:                                  var(--dt-font-size-200);
     base--font-family:                                var(--dt-font-family-body);

package/lib/build/less/utilities/backgrounds.less

@@ -99,12 +99,12 @@
 //  --  BASE CLASS
 .d-bgg-pattern {
     position: relative;
-    padding-inline-start: var(--dt-size-550) !important;
+    padding-inline-start: var(--dt-spacing-300) !important;
 
     &::after {
         position: absolute;
-        inset-block: var(--dt-size-100) var(--dt-size-100);
-        inset-inline-start: var(--dt-size-100);
+        inset-block: var(--dt-spacing-1) var(--dt-spacing-1);
+        inset-inline-start: var(--dt-spacing-1);
         min-inline-size: 2rem;
         min-block-size: 2rem;
         background-image: var(--bgg-pattern);

package/lib/build/less/utilities/effects.less

@@ -37,25 +37,25 @@
 /* stylelint-disable-next-line keyframes-name-pattern */
 @keyframes d-loading-bars__short {
   0% {
-    min-block-size: var(--dt-size-300);
-    transform: translateY(var(--dt-size-500-negative));
+    min-block-size: var(--dt-spacing-25);
+    transform: translateY(var(--dt-layout-25-negative));
     opacity: 0;
   }
 
   5% {
-    min-block-size: var(--dt-size-300);
-    transform: translateY(var(--dt-size-500));
+    min-block-size: var(--dt-spacing-25);
+    transform: translateY(var(--dt-layout-25));
     opacity: 0.5;
   }
 
   10% {
     min-block-size: 1rem;
-    transform: translateY(var(--dt-size-200-negative));
+    transform: translateY(var(--dt-spacing-25-negative));
     opacity: 1;
   }
 
   15% {
-    transform: translateY(var(--dt-size-100));
+    transform: translateY(var(--dt-spacing-1));
     opacity: 1;
   }
 
@@ -73,15 +73,15 @@
   }
 
   80% {
-    min-block-size: var(--dt-size-300);
-    transform: translateY(var(--dt-size-300-negative));
+    min-block-size: var(--dt-spacing-50);
+    transform: translateY(var(--dt-spacing-50-negative));
     opacity: 0.5;
   }
 
   85%,
  100% {
-    min-block-size: var(--dt-size-300);
-    transform: translateY(var(--dt-size-500));
+    min-block-size: var(--dt-spacing-50);
+    transform: translateY(var(--dt-layout-25));
     opacity: 0;
   }
 }
@@ -89,26 +89,26 @@
 /* stylelint-disable-next-line keyframes-name-pattern */
 @keyframes d-loading-bars__tall {
   0% {
-    min-block-size: var(--dt-size-300);
-    transform: translateY(var(--dt-size-500-negative));
+    min-block-size: var(--dt-spacing-50);
+    transform: translateY(var(--dt-layout-25-negative));
     opacity: 0;
   }
 
   5% {
-    min-block-size: var(--dt-size-300);
-    transform: translateY(var(--dt-size-500));
+    min-block-size: var(--dt-spacing-50);
+    transform: translateY(var(--dt-layout-25));
     opacity: 0.5;
   }
 
   10% {
     min-block-size: 1rem;
-    transform: translateY(var(--dt-size-200-negative));
+    transform: translateY(var(--dt-spacing-25-negative));
     opacity: 1;
   }
 
   15% {
     min-block-size: 2.2rem;
-    transform: translateY(var(--dt-size-100));
+    transform: translateY(var(--dt-spacing-1));
     opacity: 1;
   }
 
@@ -120,21 +120,21 @@
   }
 
   75% {
-    min-block-size: var(--dt-size-500);
+    min-block-size: var(--dt-layout-25);
     transform: translateY(1rem);
     opacity: 1;
   }
 
   80% {
     min-block-size: 1rem;
-    transform: translateY(var(--dt-size-300-negative));
+    transform: translateY(var(--dt-spacing-50-negative));
     opacity: 1;
   }
 
   85%,
  100% {
-    min-block-size: var(--dt-size-300);
-    transform: translateY(var(--dt-size-500));
+    min-block-size: var(--dt-spacing-50);
+    transform: translateY(var(--dt-layout-25));
     opacity: 0;
   }
 }

package/lib/build/less/utilities/flex.less

@@ -72,17 +72,17 @@
 //  TODO: Deprecated classes, remove on our next migration. https://dialpad.atlassian.net/browse/DLT-1763
 //  ----------------------------------------------------------------------------
 .d-flg0 > * { --fl-gap: 0 !important; }
-.d-flg1 > * { --fl-gap: var(--dt-size-100) !important; }
-.d-flg2 > * { --fl-gap: var(--dt-size-100) !important; }
-.d-flg4 > * { --fl-gap: var(--dt-size-300) !important; }
-.d-flg6 > * { --fl-gap: var(--dt-size-350) !important; }
-.d-flg8 > * { --fl-gap: var(--dt-size-400) !important; }
-.d-flg12 > * { --fl-gap: var(--dt-size-450) !important; }
-.d-flg16 > * { --fl-gap: var(--dt-size-500) !important; }
-.d-flg24 > * { --fl-gap: var(--dt-size-550) !important; }
-.d-flg32 > * { --fl-gap: var(--dt-size-600) !important; }
-.d-flg48 > * { --fl-gap: var(--dt-size-650) !important; }
-.d-flg64 > * { --fl-gap: var(--dt-size-700) !important; }
+.d-flg1 > * { --fl-gap: var(--dt-spacing-1) !important; }
+.d-flg2 > * { --fl-gap: var(--dt-spacing-1) !important; }
+.d-flg4 > * { --fl-gap: var(--dt-spacing-50) !important; }
+.d-flg6 > * { --fl-gap: var(--dt-spacing-75) !important; }
+.d-flg8 > * { --fl-gap: var(--dt-spacing-100) !important; }
+.d-flg12 > * { --fl-gap: var(--dt-spacing-150) !important; }
+.d-flg16 > * { --fl-gap: var(--dt-spacing-200) !important; }
+.d-flg24 > * { --fl-gap: var(--dt-spacing-300) !important; }
+.d-flg32 > * { --fl-gap: var(--dt-spacing-400) !important; }
+.d-flg48 > * { --fl-gap: var(--dt-spacing-600) !important; }
+.d-flg64 > * { --fl-gap: var(--dt-spacing-800) !important; }
 
 
 

package/lib/build/less/utilities/layout.less

@@ -117,10 +117,10 @@
 .sr-only,
 .d-vi-visible-sr {
   position: absolute;
-  inline-size: var(--dt-size-100);
-  block-size: var(--dt-size-100);
-  margin: var(--dt-size-100-negative);
-  padding: var(--dt-size-0);
+  inline-size: var(--dt-spacing-1);
+  block-size: var(--dt-spacing-1);
+  margin: var(--dt-spacing-1-negative);
+  padding: var(--dt-spacing-0);
   overflow: hidden;
   overflow-wrap: normal;
   border: none;