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

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;

package/lib/build/less/utilities/sizing.less

@@ -25,51 +25,66 @@
 //  ----------------------------------------------------------------------------
 @layer dialtone.utilities {
 .d-h10p { block-size: 10% !important; }
+.d-h15p { block-size: 15% !important; }
 .d-h20p { block-size: 20% !important; }
 .d-h25p { block-size: 25% !important; }
 .d-h30p { block-size: 30% !important; }
+.d-h33p { block-size: 33.333% !important; }
 .d-h40p { block-size: 40% !important; }
 .d-h50p { block-size: 50% !important; }
 .d-h60p { block-size: 60% !important; }
+.d-h66p { block-size: 66.667% !important; }
 .d-h70p { block-size: 70% !important; }
 .d-h75p { block-size: 75% !important; }
 .d-h80p { block-size: 80% !important; }
+.d-h85p { block-size: 85% !important; }
 .d-h90p { block-size: 90% !important; }
 .d-h100p { block-size: 100% !important; }
 
 //  $$  MAX-HEIGHT
 //  ----------------------------------------------------------------------------
 .d-hmx10p { max-block-size: 10% !important; }
+.d-hmx15p { max-block-size: 15% !important; }
 .d-hmx20p { max-block-size: 20% !important; }
 .d-hmx25p { max-block-size: 25% !important; }
 .d-hmx30p { max-block-size: 30% !important; }
+.d-hmx33p { max-block-size: 33.333% !important; }
 .d-hmx40p { max-block-size: 40% !important; }
 .d-hmx50p { max-block-size: 50% !important; }
 .d-hmx60p { max-block-size: 60% !important; }
+.d-hmx66p { max-block-size: 66.667% !important; }
 .d-hmx70p { max-block-size: 70% !important; }
 .d-hmx75p { max-block-size: 75% !important; }
 .d-hmx80p { max-block-size: 80% !important; }
+.d-hmx85p { max-block-size: 85% !important; }
 .d-hmx90p { max-block-size: 90% !important; }
 .d-hmx100p { max-block-size: 100% !important; }
 
 //  $$  MIN-HEIGHT
 //  ----------------------------------------------------------------------------
 .d-hmn10p { min-block-size: 10% !important; }
+.d-hmn15p { min-block-size: 15% !important; }
 .d-hmn20p { min-block-size: 20% !important; }
 .d-hmn25p { min-block-size: 25% !important; }
 .d-hmn30p { min-block-size: 30% !important; }
+.d-hmn33p { min-block-size: 33.333% !important; }
 .d-hmn40p { min-block-size: 40% !important; }
 .d-hmn50p { min-block-size: 50% !important; }
 .d-hmn60p { min-block-size: 60% !important; }
+.d-hmn66p { min-block-size: 66.667% !important; }
 .d-hmn70p { min-block-size: 70% !important; }
 .d-hmn75p { min-block-size: 75% !important; }
 .d-hmn80p { min-block-size: 80% !important; }
+.d-hmn85p { min-block-size: 85% !important; }
 .d-hmn90p { min-block-size: 90% !important; }
 .d-hmn100p { min-block-size: 100% !important; }
 
 //  $$  FIXED
 //  ----------------------------------------------------------------------------
 .d-h100vh { block-size: 100vh !important; }
+.d-h-dvh { block-size: 100dvh !important; }
+.d-h-svh { block-size: 100svh !important; }
+.d-h-lvh { block-size: 100lvh !important; }
 .d-h-auto { block-size: auto !important; }
 .d-h-unset { block-size: unset !important; }
 .d-h-fit-content { block-size: fit-content !important; }
@@ -95,45 +110,57 @@
 //  $$  FLUID
 //  ----------------------------------------------------------------------------
 .d-w10p { inline-size: 10% !important; }
+.d-w15p { inline-size: 15% !important; }
 .d-w20p { inline-size: 20% !important; }
 .d-w25p { inline-size: 25% !important; }
 .d-w30p { inline-size: 30% !important; }
+.d-w33p { inline-size: 33.333% !important; }
 .d-w40p { inline-size: 40% !important; }
 .d-w50p { inline-size: 50% !important; }
 .d-w60p { inline-size: 60% !important; }
+.d-w66p { inline-size: 66.667% !important; }
 .d-w70p { inline-size: 70% !important; }
 .d-w75p { inline-size: 75% !important; }
 .d-w80p { inline-size: 80% !important; }
+.d-w85p { inline-size: 85% !important; }
 .d-w90p { inline-size: 90% !important; }
 .d-w100p { inline-size: 100% !important; }
 
 //  $$  MAX-WIDTH
 //  ----------------------------------------------------------------------------
 .d-wmx10p { max-inline-size: 10% !important; }
+.d-wmx15p { max-inline-size: 15% !important; }
 .d-wmx20p { max-inline-size: 20% !important; }
 .d-wmx25p { max-inline-size: 25% !important; }
 .d-wmx30p { max-inline-size: 30% !important; }
+.d-wmx33p { max-inline-size: 33.333% !important; }
 .d-wmx40p { max-inline-size: 40% !important; }
 .d-wmx50p { max-inline-size: 50% !important; }
 .d-wmx60p { max-inline-size: 60% !important; }
+.d-wmx66p { max-inline-size: 66.667% !important; }
 .d-wmx70p { max-inline-size: 70% !important; }
 .d-wmx75p { max-inline-size: 75% !important; }
 .d-wmx80p { max-inline-size: 80% !important; }
+.d-wmx85p { max-inline-size: 85% !important; }
 .d-wmx90p { max-inline-size: 90% !important; }
 .d-wmx100p { max-inline-size: 100% !important; }
 
 //  $$  MIN-WIDTH
 //  ----------------------------------------------------------------------------
 .d-wmn10p { min-inline-size: 10% !important; }
+.d-wmn15p { min-inline-size: 15% !important; }
 .d-wmn20p { min-inline-size: 20% !important; }
 .d-wmn25p { min-inline-size: 25% !important; }
 .d-wmn30p { min-inline-size: 30% !important; }
+.d-wmn33p { min-inline-size: 33.333% !important; }
 .d-wmn40p { min-inline-size: 40% !important; }
 .d-wmn50p { min-inline-size: 50% !important; }
 .d-wmn60p { min-inline-size: 60% !important; }
+.d-wmn66p { min-inline-size: 66.667% !important; }
 .d-wmn70p { min-inline-size: 70% !important; }
 .d-wmn75p { min-inline-size: 75% !important; }
 .d-wmn80p { min-inline-size: 80% !important; }
+.d-wmn85p { min-inline-size: 85% !important; }
 .d-wmn90p { min-inline-size: 90% !important; }
 .d-wmn100p { min-inline-size: 100% !important; }
 
@@ -144,6 +171,9 @@
 .d-w90ch { inline-size: 90ch !important; }
 
 .d-w100vw { inline-size: 100vw !important; }
+.d-w-dvw { inline-size: 100dvw !important; }
+.d-w-svw { inline-size: 100svw !important; }
+.d-w-lvw { inline-size: 100lvw !important; }
 .d-w-auto { inline-size: auto !important; }
 .d-w-unset { inline-size: unset !important; }
 .d-w-fit-content { inline-size: fit-content !important; }
@@ -169,4 +199,146 @@
 .d-wmx-fit-content { max-inline-size: fit-content !important; }
 .d-wmx-max-content { max-inline-size: max-content !important; }
 .d-wmx-min-content { max-inline-size: min-content !important; }
+
+//  ============================================================================
+//  $   SIZE (both dimensions)
+//  ============================================================================
+//  $$  KEYWORDS & VIEWPORT
+//  ----------------------------------------------------------------------------
+.d-size-auto {
+  inline-size: auto !important;
+  block-size: auto !important;
+}
+
+.d-size-full {
+  inline-size: 100% !important;
+  block-size: 100% !important;
+}
+
+.d-size-fit {
+  inline-size: fit-content !important;
+  block-size: fit-content !important;
+}
+
+.d-size-min {
+  inline-size: min-content !important;
+  block-size: min-content !important;
+}
+
+.d-size-max {
+  inline-size: max-content !important;
+  block-size: max-content !important;
+}
+
+.d-size-dvh {
+  inline-size: 100dvh !important;
+  block-size: 100dvh !important;
+}
+
+.d-size-dvw {
+  inline-size: 100dvw !important;
+  block-size: 100dvw !important;
+}
+
+.d-size-svh {
+  inline-size: 100svh !important;
+  block-size: 100svh !important;
+}
+
+.d-size-svw {
+  inline-size: 100svw !important;
+  block-size: 100svw !important;
+}
+
+.d-size-lvh {
+  inline-size: 100lvh !important;
+  block-size: 100lvh !important;
+}
+
+.d-size-lvw {
+  inline-size: 100lvw !important;
+  block-size: 100lvw !important;
+}
+
+//  $$  PERCENTAGES
+//  ----------------------------------------------------------------------------
+.d-size-10p {
+  inline-size: 10% !important;
+  block-size: 10% !important;
+}
+
+.d-size-15p {
+  inline-size: 15% !important;
+  block-size: 15% !important;
+}
+
+.d-size-20p {
+  inline-size: 20% !important;
+  block-size: 20% !important;
+}
+
+.d-size-25p {
+  inline-size: 25% !important;
+  block-size: 25% !important;
+}
+
+.d-size-30p {
+  inline-size: 30% !important;
+  block-size: 30% !important;
+}
+
+.d-size-33p {
+  inline-size: 33.333% !important;
+  block-size: 33.333% !important;
+}
+
+.d-size-40p {
+  inline-size: 40% !important;
+  block-size: 40% !important;
+}
+
+.d-size-50p {
+  inline-size: 50% !important;
+  block-size: 50% !important;
+}
+
+.d-size-60p {
+  inline-size: 60% !important;
+  block-size: 60% !important;
+}
+
+.d-size-66p {
+  inline-size: 66.667% !important;
+  block-size: 66.667% !important;
+}
+
+.d-size-70p {
+  inline-size: 70% !important;
+  block-size: 70% !important;
+}
+
+.d-size-75p {
+  inline-size: 75% !important;
+  block-size: 75% !important;
+}
+
+.d-size-80p {
+  inline-size: 80% !important;
+  block-size: 80% !important;
+}
+
+.d-size-85p {
+  inline-size: 85% !important;
+  block-size: 85% !important;
+}
+
+.d-size-90p {
+  inline-size: 90% !important;
+  block-size: 90% !important;
+}
+
+.d-size-100p {
+  inline-size: 100% !important;
+  block-size: 100% !important;
+}
 }

package/lib/build/less/utilities/spacing.less

@@ -25,47 +25,47 @@
 //  ----------------------------------------------------------------------------
 @layer dialtone.utilities {
 .d-stack0   { > * + * { margin-block-start: 0 !important; } }
-.d-stack1   { > * + * { margin-block-start: var(--dt-size-100) !important; } }
-.d-stack2   { > * + * { margin-block-start: var(--dt-size-200) !important; } }
-.d-stack4   { > * + * { margin-block-start: var(--dt-size-300) !important; } }
-.d-stack6   { > * + * { margin-block-start: var(--dt-size-350) !important; } }
-.d-stack8   { > * + * { margin-block-start: var(--dt-size-400) !important; } }
-.d-stack12  { > * + * { margin-block-start: var(--dt-size-450) !important; } }
-.d-stack16  { > * + * { margin-block-start: var(--dt-size-500) !important; } }
-.d-stack20  { > * + * { margin-block-start: var(--dt-size-525) !important; } }
-.d-stack24  { > * + * { margin-block-start: var(--dt-size-550) !important; } }
-.d-stack32  { > * + * { margin-block-start: var(--dt-size-600) !important; } }
-.d-stack48  { > * + * { margin-block-start: var(--dt-size-650) !important; } }
-.d-stack64  { > * + * { margin-block-start: var(--dt-size-700) !important; } }
-.d-stack72  { > * + * { margin-block-start: var(--dt-size-720) !important; } }
-.d-stack84  { > * + * { margin-block-start: var(--dt-size-730) !important; } }
-.d-stack96  { > * + * { margin-block-start: var(--dt-size-750) !important; } }
-.d-stack102 { > * + * { margin-block-start: var(--dt-size-760) !important; } }
-.d-stack114 { > * + * { margin-block-start: var(--dt-size-775) !important; } }
-.d-stack128 { > * + * { margin-block-start: var(--dt-size-800) !important; } }
+.d-stack1   { > * + * { margin-block-start: var(--dt-spacing-1) !important; } }
+.d-stack2   { > * + * { margin-block-start: var(--dt-spacing-25) !important; } }
+.d-stack4   { > * + * { margin-block-start: var(--dt-spacing-50) !important; } }
+.d-stack6   { > * + * { margin-block-start: var(--dt-spacing-75) !important; } }
+.d-stack8   { > * + * { margin-block-start: var(--dt-spacing-100) !important; } }
+.d-stack12  { > * + * { margin-block-start: var(--dt-spacing-150) !important; } }
+.d-stack16  { > * + * { margin-block-start: var(--dt-spacing-200) !important; } }
+.d-stack20  { > * + * { margin-block-start: var(--dt-spacing-250) !important; } }
+.d-stack24  { > * + * { margin-block-start: var(--dt-spacing-300) !important; } }
+.d-stack32  { > * + * { margin-block-start: var(--dt-spacing-400) !important; } }
+.d-stack48  { > * + * { margin-block-start: var(--dt-spacing-600) !important; } }
+.d-stack64  { > * + * { margin-block-start: var(--dt-spacing-800) !important; } }
+.d-stack72  { > * + * { margin-block-start: calc(var(--dt-spacing-100) * 9) !important; } }
+.d-stack84  { > * + * { margin-block-start: calc(var(--dt-spacing-100) * 10.5) !important; } }
+.d-stack96  { > * + * { margin-block-start: calc(var(--dt-spacing-100) * 12) !important; } }
+.d-stack102 { > * + * { margin-block-start: calc(var(--dt-spacing-100) * 12.75) !important; } }
+.d-stack114 { > * + * { margin-block-start: calc(var(--dt-spacing-100) * 14.25) !important; } }
+.d-stack128 { > * + * { margin-block-start: calc(var(--dt-spacing-100) * 16) !important; } }
 
 //  ============================================================================
 //  $$   HORIZONTALLY
 //  ----------------------------------------------------------------------------
 .d-flow0   { > * + * { margin-inline-start: 0 !important; } }
-.d-flow1   { > * + * { margin-inline-start: var(--dt-size-100) !important; } }
-.d-flow2   { > * + * { margin-inline-start: var(--dt-size-200) !important; } }
-.d-flow4   { > * + * { margin-inline-start: var(--dt-size-300) !important; } }
-.d-flow6   { > * + * { margin-inline-start: var(--dt-size-350) !important; } }
-.d-flow8   { > * + * { margin-inline-start: var(--dt-size-400) !important; } }
-.d-flow12  { > * + * { margin-inline-start: var(--dt-size-450) !important; } }
-.d-flow16  { > * + * { margin-inline-start: var(--dt-size-500) !important; } }
-.d-flow20  { > * + * { margin-inline-start: var(--dt-size-525) !important; } }
-.d-flow24  { > * + * { margin-inline-start: var(--dt-size-550) !important; } }
-.d-flow32  { > * + * { margin-inline-start: var(--dt-size-600) !important; } }
-.d-flow48  { > * + * { margin-inline-start: var(--dt-size-650) !important; } }
-.d-flow64  { > * + * { margin-inline-start: var(--dt-size-700) !important; } }
-.d-flow72  { > * + * { margin-inline-start: var(--dt-size-720) !important; } }
-.d-flow84  { > * + * { margin-inline-start: var(--dt-size-730) !important; } }
-.d-flow96  { > * + * { margin-inline-start: var(--dt-size-750) !important; } }
-.d-flow102 { > * + * { margin-inline-start: var(--dt-size-760) !important; } }
-.d-flow114 { > * + * { margin-inline-start: var(--dt-size-775) !important; } }
-.d-flow128 { > * + * { margin-inline-start: var(--dt-size-800) !important; } }
+.d-flow1   { > * + * { margin-inline-start: var(--dt-spacing-1) !important; } }
+.d-flow2   { > * + * { margin-inline-start: var(--dt-spacing-25) !important; } }
+.d-flow4   { > * + * { margin-inline-start: var(--dt-spacing-50) !important; } }
+.d-flow6   { > * + * { margin-inline-start: var(--dt-spacing-75) !important; } }
+.d-flow8   { > * + * { margin-inline-start: var(--dt-spacing-100) !important; } }
+.d-flow12  { > * + * { margin-inline-start: var(--dt-spacing-150) !important; } }
+.d-flow16  { > * + * { margin-inline-start: var(--dt-spacing-200) !important; } }
+.d-flow20  { > * + * { margin-inline-start: var(--dt-spacing-250) !important; } }
+.d-flow24  { > * + * { margin-inline-start: var(--dt-spacing-300) !important; } }
+.d-flow32  { > * + * { margin-inline-start: var(--dt-spacing-400) !important; } }
+.d-flow48  { > * + * { margin-inline-start: var(--dt-spacing-600) !important; } }
+.d-flow64  { > * + * { margin-inline-start: var(--dt-spacing-800) !important; } }
+.d-flow72  { > * + * { margin-inline-start: calc(var(--dt-spacing-100) * 9) !important; } }
+.d-flow84  { > * + * { margin-inline-start: calc(var(--dt-spacing-100) * 10.5) !important; } }
+.d-flow96  { > * + * { margin-inline-start: calc(var(--dt-spacing-100) * 12) !important; } }
+.d-flow102 { > * + * { margin-inline-start: calc(var(--dt-spacing-100) * 12.75) !important; } }
+.d-flow114 { > * + * { margin-inline-start: calc(var(--dt-spacing-100) * 14.25) !important; } }
+.d-flow128 { > * + * { margin-inline-start: calc(var(--dt-spacing-100) * 16) !important; } }
 
 //  ============================================================================
 //  $   MARGIN
@@ -73,17 +73,17 @@
 .d-m-auto { margin: auto !important; }
 .d-m-unset { margin: unset !important; }
 
-.d-mt-auto { margin-block-start: auto !important; }
-.d-mt-unset { margin-block-start: unset !important; }
+.d-mt-auto, .d-mbs-auto { margin-block-start: auto !important; }
+.d-mt-unset, .d-mbs-unset { margin-block-start: unset !important; }
 
-.d-mr-auto { margin-inline-end: auto !important; }
-.d-mr-unset { margin-inline-end: unset !important; }
+.d-mr-auto, .d-mie-auto { margin-inline-end: auto !important; }
+.d-mr-unset, .d-mie-unset { margin-inline-end: unset !important; }
 
-.d-mb-auto { margin-block-end: auto !important; }
-.d-mb-unset { margin-block-end: unset !important; }
+.d-mb-auto, .d-mbe-auto { margin-block-end: auto !important; }
+.d-mb-unset, .d-mbe-unset { margin-block-end: unset !important; }
 
-.d-ml-auto { margin-inline-start: auto !important; }
-.d-ml-unset { margin-inline-start: unset !important; }
+.d-ml-auto, .d-mis-auto { margin-inline-start: auto !important; }
+.d-ml-unset, .d-mis-unset { margin-inline-start: unset !important; }
 
 .d-mx-auto {
   margin-inline: auto !important;
@@ -96,7 +96,7 @@
 
 .d-my-auto {
   margin-block: auto !important;
- }
+}
 
 .d-my-unset {
   margin-block-start: unset !important;
@@ -109,13 +109,13 @@
 //  ----------------------------------------------------------------------------
 .d-p-unset { padding: unset !important; }
 
-.d-pt-unset { padding-block-start: unset !important; }
+.d-pt-unset, .d-pbs-unset { padding-block-start: unset !important; }
 
-.d-pr-unset { padding-inline-end: unset !important; }
+.d-pr-unset, .d-pie-unset { padding-inline-end: unset !important; }
 
-.d-pb-unset { padding-block-end: unset !important; }
+.d-pb-unset, .d-pbe-unset { padding-block-end: unset !important; }
 
-.d-pl-unset { padding-inline-start: unset !important; }
+.d-pl-unset, .d-pis-unset { padding-inline-start: unset !important; }
 
 .d-px-unset {
   padding-inline-end: unset !important;