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

package/lib/build/less/components/button.less

@@ -27,43 +27,43 @@
   --button-border-width: var(--dt-size-border-100);
   --button-typography: var(--dt-typography-button-md);
   --button-padding-y-xs: calc(
-    calc(var(--dt-size-350) - var(--dt-size-100)) - var(--button-border-width)
+    calc(var(--dt-spacing-75) - var(--dt-spacing-1)) - var(--button-border-width)
   ); // ((8 - 1) - border-width)
 
   --button-padding-x-xs: calc(
-    var(--dt-size-400) - var(--button-border-width)
+    var(--dt-spacing-100) - var(--button-border-width)
   ); // 8 minus border-width
 
   --button-padding-y-sm: calc(
-    var(--dt-size-350) - var(--button-border-width)
+    var(--dt-spacing-75) - var(--button-border-width)
   ); // 8 minus border-width
 
   --button-padding-x-sm: calc(
-    var(--dt-size-450) - var(--button-border-width)
+    var(--dt-spacing-150) - var(--button-border-width)
   ); // 12 minus border-width
 
   --button-padding-y-md: calc(
-    var(--dt-size-400) - var(--button-border-width)
+    var(--dt-spacing-100) - var(--button-border-width)
   ); // 8 minus border-width
 
   --button-padding-x-md: calc(
-    var(--dt-size-450) - var(--button-border-width)
+    var(--dt-spacing-150) - var(--button-border-width)
   ); // 12 minus border-width
 
   --button-padding-y-lg: calc(
-    (var(--dt-size-400) + var(--dt-size-200)) - var(--button-border-width)
+    (var(--dt-spacing-100) + var(--dt-spacing-25)) - var(--button-border-width)
   ); // 10 minus border-width
 
   --button-padding-x-lg: calc(
-    var(--dt-size-500) - var(--button-border-width)
+    var(--dt-spacing-200) - var(--button-border-width)
   ); // 16 minus border-width
 
   --button-padding-y-xl: calc(
-    var(--dt-size-450) - var(--button-border-width)
+    var(--dt-spacing-150) - var(--button-border-width)
   ); // 12 minus border-width
 
   --button-padding-x-xl: calc(
-    var(--dt-size-500) - var(--button-border-width)
+    var(--dt-spacing-200) - var(--button-border-width)
   ); // 16 minus border-width
 
   --button-padding-y: var(--button-padding-y-md);
@@ -187,13 +187,13 @@
   }
 
   &.d-btn--lg {
-    --button-padding-x: calc(var(--button-padding-y-lg) + var(--dt-size-100));
-    --button-padding-y: calc(var(--button-padding-y-lg) + var(--dt-size-100));
+    --button-padding-x: calc(var(--button-padding-y-lg) + var(--dt-spacing-1));
+    --button-padding-y: calc(var(--button-padding-y-lg) + var(--dt-spacing-1));
   }
 
   &.d-btn--xl {
-    --button-padding-x: calc(var(--button-padding-y-xl) + var(--dt-size-300));
-    --button-padding-y: calc(var(--button-padding-y-xl) + var(--dt-size-300));
+    --button-padding-x: calc(var(--button-padding-y-xl) + var(--dt-spacing-50));
+    --button-padding-y: calc(var(--button-padding-y-xl) + var(--dt-spacing-50));
   }
 }
 
@@ -287,13 +287,13 @@
 
 .d-btn__leading {
   order: -1;
-  margin-inline: calc(-1 * var(--button-padding-x)) var(--dt-size-200);
+  margin-inline: calc(-1 * var(--button-padding-x)) var(--dt-spacing-25);
   border-start-start-radius: calc(var(--button-border-radius) - 1px);
   border-end-start-radius: calc(var(--button-border-radius) - 1px);
 }
 
 .d-btn__trailing {
-  margin-inline: var(--dt-size-200) calc(-1 * var(--button-padding-x));
+  margin-inline: var(--dt-spacing-25) calc(-1 * var(--button-padding-x));
   border-start-end-radius: calc(var(--button-border-radius) - 1px);
   border-end-end-radius: calc(var(--button-border-radius) - 1px);
   order: 2;
@@ -337,11 +337,11 @@
 }
 
 .d-btn__icon--left:not(:only-child) {
-  margin-inline-start: var(--dt-size-200-negative);
+  margin-inline-start: var(--dt-spacing-25-negative);
 }
 
 .d-btn__icon--right:not(:only-child) {
-  margin-inline-end: var(--dt-size-200-negative);
+  margin-inline-end: var(--dt-spacing-25-negative);
 }
 
 //  ============================================================================
@@ -609,13 +609,13 @@
   }
 
   &.d-btn--lg {
-    --button-padding-x: calc(var(--button-padding-y-lg) + var(--dt-size-100));
-    --button-padding-y: calc(var(--button-padding-y-lg) + var(--dt-size-100));
+    --button-padding-x: calc(var(--button-padding-y-lg) + var(--dt-spacing-1));
+    --button-padding-y: calc(var(--button-padding-y-lg) + var(--dt-spacing-1));
   }
 
   &.d-btn--xl {
-    --button-padding-x: calc(var(--button-padding-y-xl) + var(--dt-size-300));
-    --button-padding-y: calc(var(--button-padding-y-xl) + var(--dt-size-300));
+    --button-padding-x: calc(var(--button-padding-y-xl) + var(--dt-spacing-50));
+    --button-padding-y: calc(var(--button-padding-y-xl) + var(--dt-spacing-50));
   }
 }
 
@@ -635,9 +635,9 @@
   //  Pseudo-element spinner (fallback for raw HTML consumers)
   &::before {
     position: absolute;
-    inline-size: var(--dt-size-500);
-    block-size: var(--dt-size-500);
-    border: var(--dt-size-200) solid currentColor;
+    inline-size: var(--dt-layout-25);
+    block-size: var(--dt-layout-25);
+    border: var(--dt-size-border-200) solid currentColor;
     border-inline-start-color: transparent !important;
     border-radius: var(--dt-size-radius-circle);
     animation: d-loading-circle 900ms infinite linear;
@@ -671,7 +671,7 @@
 
   &:focus-visible {
     box-shadow:
-      0 0 0 var(--dt-size-100) var(--dt-color-neutral-white),
+      0 0 0 var(--dt-spacing-1) var(--dt-color-neutral-white),
       0 0 0 0.25em oklch(from var(--brand-color) l c h / 0.9);
   }
 
@@ -684,7 +684,7 @@
     justify-content: center;
     inline-size: 2em;
     block-size: 2em;
-    margin-inline: var(--dt-size-300-negative) var(--dt-size-400);
+    margin-inline: var(--dt-spacing-50-negative) var(--dt-spacing-100);
     background-color: var(--dt-color-neutral-white);
     border-radius: var(--dt-size-radius-200);
   }
@@ -714,7 +714,7 @@
 
 .d-split-btn {
   display: inline-flex;
-  gap: var(--dt-size-0);
+  gap: var(--dt-spacing-0);
   align-items: stretch;
   justify-content: center;
 
@@ -739,7 +739,7 @@
   &__alpha,
   &__start {
     flex-grow: 1;
-    padding-inline-end: calc(var(--button-padding-x) + var(--dt-size-200));
+    padding-inline-end: calc(var(--button-padding-x) + var(--dt-spacing-25));
 
     &:not(.d-btn--outlined) {
       border-inline-end: 0;
@@ -761,8 +761,8 @@
     &::before {
       position: absolute;
       inset-block: var(--button-border-radius);
-      inset-inline-start: var(--dt-size-100-negative);
-      inline-size: var(--dt-size-100);
+      inset-inline-start: var(--dt-spacing-1-negative);
+      inline-size: var(--dt-spacing-1);
       background-color: var(
         --button-color-text
       ); // use text color for divider line
@@ -799,11 +799,11 @@
     &.d-btn:disabled::before,
     &.d-btn--outlined::before,
     &.d-btn--primary::before {
-      inset-block: var(--dt-size-100-negative);
+      inset-block: var(--dt-spacing-1-negative);
     }
 
     &.d-btn--outlined::before {
-      inset-block: var(--dt-size-50-negative);
+      inset-block: calc(var(--dt-spacing-1-negative) / 2);
     }
 
     &:not(.d-btn--outlined) {
@@ -813,7 +813,7 @@
     &:not(.d-btn--outlined, .d-btn--primary) > * {
       // yes, I'm pushing a half-pixel over just for this variant
       // to ensure icon is centered
-      transform: translateX(var(--dt-size-50));
+      transform: translateX(var(--dt-spacing-1));
     }
 
     &:disabled:not(.d-btn--outlined),
@@ -829,27 +829,27 @@
   // adjust x-padding for icon-only button at each size
   &__omega--xs,
   &__end--xs {
-    &.d-btn--icon-only { --button-padding-x: var(--dt-size-300); }
+    &.d-btn--icon-only { --button-padding-x: var(--dt-spacing-50); }
   }
 
   &__omega--sm,
   &__end--sm {
-    &.d-btn--icon-only { --button-padding-x: var(--dt-size-300); }
+    &.d-btn--icon-only { --button-padding-x: var(--dt-spacing-50); }
   }
 
   &__omega--md,
   &__end--md {
-    &.d-btn--icon-only { --button-padding-x: var(--dt-size-350); }
+    &.d-btn--icon-only { --button-padding-x: var(--dt-spacing-75); }
   }
 
   &__omega--lg,
   &__end--lg {
-    &.d-btn--icon-only { --button-padding-x: var(--dt-size-400); }
+    &.d-btn--icon-only { --button-padding-x: var(--dt-spacing-100); }
   }
 
   &__omega--xl,
   &__end--xl {
-    &.d-btn--icon-only { --button-padding-x: var(--dt-size-450); }
+    &.d-btn--icon-only { --button-padding-x: var(--dt-spacing-150); }
   }
 }
 

package/lib/build/less/components/card.less

@@ -39,13 +39,13 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: var(--dt-size-500) var(--dt-size-500) 0;
+  padding: var(--dt-spacing-200) var(--dt-spacing-200) 0;
 }
 
 //  $$  CONTENT
 //  ----------------------------------------------------------------------------
 .d-card__content {
-  padding: var(--dt-size-500);
+  padding: var(--dt-spacing-200);
   overflow-block: auto;
 }
 
@@ -53,8 +53,8 @@
 //  ----------------------------------------------------------------------------
 .d-card__footer {
   display: flex;
-  gap: var(--dt-size-400);
+  gap: var(--dt-spacing-100);
   align-items: center;
-  padding: 0 var(--dt-size-500) var(--dt-size-500);
+  padding: 0 var(--dt-spacing-200) var(--dt-spacing-200);
 }
 }

package/lib/build/less/components/chip.less

@@ -18,8 +18,11 @@
 .d-chip {
   //  Component CSS Vars
   --chip-color-text: var(--dt-color-foreground-primary);
+  --chip-text-size: var(--dt-font-size-200);
+  --chip-padding: var(--dt-spacing-50) var(--dt-spacing-125);
   --chip-color-background: var(--dt-color-surface-moderate-opaque);
   --chip-border-radius: var(--dt-size-radius-pill);
+  --chip-close-size: calc(var(--dt-layout-25) * 1.5);
 
   position: relative;
   display: inline-flex;
@@ -31,12 +34,12 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  max-inline-size: var(--dt-size-100-percent);
-  padding: var(--dt-size-300) var(--dt-size-400);
+  max-inline-size: var(--dt-layout-100-percent);
+  padding: var(--chip-padding);
   color: var(--chip-color-text);
-  font-size: var(--dt-font-size-200);
+  font-size: var(--chip-text-size);
   font-family: inherit;
-  line-height: var(--lh4);
+  line-height: var(--dt-font-line-height-400);
   background-color: var(--chip-color-background);
   border: none;
   border-radius: var(--chip-border-radius);
@@ -48,8 +51,8 @@
   // not nested within the chip. Only apply if close button exists (more than one child).
   &:not(:only-child)::after {
     flex-shrink: 0;
-    inline-size: calc(var(--dt-size-500) + var(--dt-size-200));
-    block-size: calc(var(--dt-size-500) + var(--dt-size-200));
+    inline-size: var(--chip-close-size);
+    block-size: var(--chip-close-size);
     content: '';
   }
 
@@ -78,9 +81,7 @@
   }
 
   .d-avatar {
-    --avatar-size-shape: var(--dt-size-550);
-
-    margin: var(--dt-size-200-negative) var(--dt-size-350) var(--dt-size-200-negative) var(--dt-size-350-negative);
+    margin-inline: var(--dt-spacing-25) var(--dt-spacing-50);
   }
 }
 
@@ -88,15 +89,18 @@
   ._btn();
   ._btn-circle();
 
+  --chip-close-padding: calc(var(--dt-spacing-25) + var(--dt-spacing-1));
+  --chip-close-inset-end: var(--dt-spacing-75);
+
   position: absolute;
-  inset-inline-end: var(--dt-size-200);
-  padding: calc(var(--dt-size-200) + var(--dt-size-100));
+  inset-inline-end: var(--chip-close-inset-end);
+  padding: var(--chip-close-padding);
   border-width: 0;
 
   &::before {
     position: absolute;
-    inline-size: 2.6rem; // magic number
-    block-size: 2.8rem; // magic number
+    inline-size: var(--chip-close-size);
+    block-size: var(--chip-close-size);
     content: '';
   }
 
@@ -112,7 +116,14 @@
 }
 
 .d-chip__icon {
-  padding-inline-end: var(--dt-size-350);
+  --chip-icon-size: calc(var(--dt-layout-25) * 1.25);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--chip-icon-size);
+  block-size: var(--chip-icon-size);
+  margin-inline: var(--dt-spacing-25-negative) var(--dt-spacing-25);
   line-height: 1;
 }
 
@@ -138,63 +149,42 @@
 //  $$  EXTRA SMALL
 //  ----------------------------------------------------------------------------
 .d-chip__label--xs {
-  padding: var(--dt-size-200) var(--dt-size-350);
-  font-size: var(--dt-font-size-100);
-
-  // reserves space within the chip for the close button, since the close button is
-  // not nested within the chip.
-  &:not(:only-child)::after {
-    flex-shrink: 0;
-    inline-size: var(--dt-size-450);
-    block-size: var(--dt-size-450);
-    content: '';
-  }
+  --chip-text-size: var(--dt-font-size-100);
+  --chip-padding: var(--dt-spacing-0) var(--dt-spacing-75);
 
   .d-avatar {
-    --avatar-size-shape: var(--dt-size-500);
+    --avatar-size-shape: var(--dt-layout-25);
 
-    margin-inline: var(--dt-size-300-negative) var(--dt-size-350);
+    margin-inline: var(--dt-spacing-50-negative) var(--dt-spacing-75);
   }
 }
 
 .d-chip__close--xs {
-  padding: var(--dt-size-100);
-
-  // Clickable area for the close button.
-  &::before {
-    inline-size: var(--dt-size-550);
-    block-size: var(--dt-size-550);
-  }
+  --chip-close-size: var(--dt-layout-25);
+  --chip-close-padding: var(--dt-spacing-1);
+  --chip-close-inset-end: var(--dt-spacing-50);
 }
 
 //  $$ SMALL
 //  ----------------------------------------------------------------------------
 .d-chip__label--sm {
-  padding: var(--dt-size-200) var(--dt-size-400);
-  font-size: var(--dt-font-size-200);
+  --chip-text-size: var(--dt-font-size-150);
+  --chip-padding: var(--dt-spacing-25) var(--dt-spacing-75);
 
-  // reserves space within the chip for the close button, since the close button is
-  // not nested within the chip.
-  &:not(:only-child)::after {
-    flex-shrink: 0;
-    inline-size: calc(var(--dt-size-500) - var(--dt-size-200)); // 14
-    block-size: calc(var(--dt-size-500) - var(--dt-size-200)); // 14
-    content: '';
+  .d-chip__close::before {
+    inline-size: var(--chip-close-size);
+    block-size: var(--chip-close-size);
   }
 
   .d-avatar {
-    --avatar-size-shape: calc(var(--dt-size-500) + var(--dt-size-300)); // 20
+    --avatar-size-shape: calc(var(--dt-layout-25) * 1.125); // 20
 
-    margin-inline-end: var(--dt-size-300);
+    margin-inline-end: var(--dt-spacing-50);
   }
 }
 
 .d-chip__close--sm {
-  padding: var(--dt-size-200);
-
-  &::before {
-    inline-size: var(--dt-size-550);
-    block-size: var(--dt-size-550);
-  }
+  --chip-close-size: calc(var(--dt-layout-25) * 1.125);
+  --chip-close-padding: var(--dt-spacing-25);
 }
 }

package/lib/build/less/components/codeblock.less

@@ -18,9 +18,9 @@
     font: inherit;
 
     &--bordered {
-        padding: var(--dt-size-450);
+        padding: var(--dt-spacing-150);
         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-subtle);
         border-radius: var(--dt-size-radius-400);
     }

package/lib/build/less/components/collapsible.less

@@ -14,7 +14,7 @@
 //  ----------------------------------------------------------------------------
 @layer dialtone.components {
 .d-collapsible__icon {
-  --icon-base-scale: var(--dt-size-400);
+  --icon-base-scale: var(--dt-spacing-100);
   --icon-size-300: calc(var(--icon-base-scale) * 2.25);
   --icon-size: var(--icon-size-300);
 
@@ -22,7 +22,7 @@
   flex-shrink: 0;
   inline-size: var(--icon-size);
   block-size: var(--icon-size);
-  margin-inline-end: var(--dt-size-400);
+  margin-inline-end: var(--dt-spacing-100);
   fill: currentColor;
 }
 

package/lib/build/less/components/combobox-multi-select.less

@@ -1,17 +1,17 @@
 @layer dialtone.components {
 .d-recipe-combobox-multi-select__chip {
   z-index: var(--zi-base1);
-  max-inline-size: var(--dt-size-100-percent);
-  margin-block-start: var(--dt-size-300);
-  margin-inline: var(--dt-size-200);
+  max-inline-size: var(--dt-layout-100-percent);
+  margin-block-start: var(--dt-spacing-50);
+  margin-inline: var(--dt-spacing-25);
 }
 
 .d-recipe-combobox-multi-select__chip-wrapper {
   position: absolute;
-  max-inline-size: calc(var(--dt-size-100-percent) - var(--dt-size-400));
+  max-inline-size: calc(var(--dt-layout-100-percent) - var(--dt-spacing-50));
   max-block-size: initial;
-  margin-inline: var(--dt-size-200);
-  padding-inline-start: var(--dt-size-100);
+  margin-inline: var(--dt-spacing-25);
+  padding-inline-start: var(--dt-spacing-1);
   overflow-block: visible;
 }
 
@@ -45,12 +45,12 @@
 }
 
 .d-recipe-combobox-multi-select__list .d-list-item__content {
-  min-block-size: calc(var(--dt-size-550) + var(--dt-size-300));
+  min-block-size: calc(var(--dt-layout-25) * 1.75);
 }
 
 
 .d-recipe-combobox-multi-select__list--loading {
-  padding-block: var(--dt-size-500);
+  padding-block: var(--dt-spacing-200);
   text-align: center;
 }
 }

package/lib/build/less/components/combobox-with-popover.less

@@ -1,5 +1,5 @@
 @layer dialtone.components {
 .d-recipe-combobox-with-popover__list .d-list-item__content {
-  min-block-size: calc(var(--dt-size-550) + var(--dt-size-300));
+  min-block-size: calc(var(--dt-layout-25) * 1.75);
 }
 }

package/lib/build/less/components/combobox.less

@@ -15,13 +15,13 @@
 //  ----------------------------------------------------------------------------
 @layer dialtone.components {
 .d-combobox__empty-list {
-  padding: var(--dt-size-0);
+  padding: var(--dt-spacing-0);
 
   &-item {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--dt-size-300) var(--dt-size-450);
+    padding: var(--dt-spacing-50) var(--dt-spacing-150);
     font-size: var(--dt-font-size-200);
     line-height: var(--lh4);
   }
@@ -31,9 +31,9 @@
 //  $   LOADING LIST
 //  ----------------------------------------------------------------------------
 .d-combobox__loading-list {
-  max-block-size: var(--dt-size-925);
-  margin-block-start: var(--dt-size-400);
-  padding: var(--dt-size-0);
+  max-block-size: var(--dt-layout-500);
+  margin-block-start: var(--dt-spacing-100);
+  padding: var(--dt-spacing-0);
   overflow-block: auto;
 }
 }

package/lib/build/less/components/datepicker.less

@@ -12,15 +12,15 @@
 //  ----------------------------------------------------------------------------
 @layer dialtone.components {
 .d-datepicker {
-  --datepicker-width: calc(var(--dt-size-300) * 75); // A bit of a magic number as default fixed size, may use CSS utilities to override
-  --datepicker-button-size: calc(var(--dt-size-600) - var(--dt-size-200)); // Emulates SM button since Vue component in lieu of Vue component using DT button
+  --datepicker-width: var(--dt-layout-450);
+  --datepicker-button-size: calc(var(--dt-layout-50) - var(--dt-spacing-25)); // Emulates SM button since Vue component in lieu of Vue component using DT button
 
   box-sizing: border-box;
   inline-size: var(--datepicker-width);
-  padding: var(--dt-size-500);
+  padding: var(--dt-spacing-200);
 
   &__hd {
-    padding: 0 var(--dt-size-300);
+    padding: 0 var(--dt-spacing-50);
   }
 
   &__month-year {
@@ -56,11 +56,11 @@
 
   &__cell {
     padding: 0;
-    padding-block-start: var(--dt-size-200);
+    padding-block-start: var(--dt-spacing-25);
     text-align: center;
 
     &--header {
-      padding-block: 0 var(--dt-size-400);
+      padding-block: 0 var(--dt-spacing-100);
     }
   }
 

package/lib/build/less/components/description-list.less

@@ -6,10 +6,21 @@
   align-items: flex-start;
   font: var(--dt-typography-body-sm);
 
-  --description-list-gap: var(--dt-size-400);
-  each(range(0, 600, 100), {
+  --description-list-gap: var(--dt-spacing-100);
+
+  // Stops outside both range() sequences: 1 (not a multiple of 25), 525 (not a multiple of 50)
+  &--gap-1 { --description-list-gap: var(--dt-spacing-1); }
+  &--gap-525 { --description-list-gap: var(--dt-spacing-525); }
+
+  each(range(0, 200, 25), {
+    &--gap-@{value} {
+     --description-list-gap: ~"var(--dt-spacing-@{value})";
+    }
+  });
+
+  each(range(250, 800, 50), {
     &--gap-@{value} {
-     --description-list-gap: ~"var(--dt-size-@{value})";
+     --description-list-gap: ~"var(--dt-spacing-@{value})";
     }
   });
 

package/lib/build/less/components/dropdown.less

@@ -1,15 +1,15 @@
 @layer dialtone.components {
 .d-context-menu-list {
-  inline-size: var(--dt-size-850);
+  inline-size: var(--dt-layout-300);
 }
 
 .d-dropdown-list {
   position: relative;
-  margin: var(--dt-size-300);
-  padding-inline: var(--dt-size-0) var(--dt-size-0);
+  margin: var(--dt-spacing-50);
+  padding-inline: var(--dt-spacing-0) var(--dt-spacing-0);
 
   >.d-list-item {
-    margin-block-start: var(--dt-size-200);
+    margin-block-start: var(--dt-spacing-25);
   }
 }
 }