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

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);
   }
 }
 }

package/lib/build/less/components/emoji-picker.less

@@ -15,14 +15,14 @@
   flex-direction: column;
   // fixed width to achieve accessibility in keyboard (372px)
   // with this width we have 9 emoji per row
-  inline-size: calc(var(--dt-size-925) + var(--dt-size-600) + var(--dt-size-400));
+  inline-size: var(--dt-layout-550);
   block-size: 100%;
   background-color: var(--dt-color-surface-primary);
   border-radius: var(--dt-size-radius-300);
 
   &--header {
     position: relative;
-    padding: var(--dt-size-300) var(--dt-size-300) 0;
+    padding: var(--dt-spacing-50) var(--dt-spacing-50) 0;
 
     &::after {
       position: absolute;
@@ -38,8 +38,8 @@
     // !important to default value to override popover dialog box-sizing: border-box style
     box-sizing: content-box !important;
     inline-size: auto;
-    max-inline-size: calc(var(--dt-size-925) + var(--dt-size-400));
-    margin: 0 var(--dt-size-500);
+    max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-100));
+    margin: 0 var(--dt-spacing-200);
   }
 
   &--footer {
@@ -47,8 +47,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    block-size: calc(var(--dt-size-650) + var(--dt-size-400) + var(--dt-size-200));
-    padding: 0 var(--dt-size-500);
+    block-size: calc(var(--dt-layout-100) - var(--dt-spacing-75));
+    padding: 0 var(--dt-spacing-200);
     background: var(--dt-color-surface-secondary);
     border-block-start: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
   }
@@ -59,15 +59,15 @@
   }
 
   &__tabset-list {
-      gap: var(--dt-size-0);
+      gap: var(--dt-spacing-0);
 
       &::after {
         background-color: var(--dt-color-surface-moderate) !important;
       }
 
       .d-tablist__item {
-        --button-padding-y: var(--dt-size-350);
-        --button-padding-x: var(--dt-size-100);
+        --button-padding-y: var(--dt-spacing-75);
+        --button-padding-x: var(--dt-spacing-1);
 
         &.d-tab--selected {
           &::after {
@@ -80,20 +80,20 @@
   &__skin-list {
     display: inline-flex;
     flex-direction: row;
-    gap: var(--dt-size-300);
+    gap: var(--dt-spacing-50);
     align-items: flex-start;
-    padding: var(--dt-size-300);
+    padding: var(--dt-spacing-50);
     background: var(--dt-color-surface-moderate-opaque);
     border-radius: var(--dt-size-radius-pill);
 
     button {
-      inline-size: var(--dt-size-600);
-      block-size: var(--dt-size-600);
+      inline-size: var(--dt-layout-50);
+      block-size: var(--dt-layout-50);
       margin: 0;
       padding: 0;
       background: none;
       border: var(--dt-size-border-100) solid transparent;
-      border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
+      border-radius: var(--dt-size-radius-350);
       outline: none;
       cursor: pointer;
 
@@ -111,10 +111,10 @@
   &__skin-selected {
     button {
       display: inline-block;
-      inline-size: var(--dt-size-625);
-      block-size: var(--dt-size-625);
+      inline-size: calc(var(--dt-layout-75) - var(--dt-spacing-25));
+      block-size: calc(var(--dt-layout-75) - var(--dt-spacing-25));
       margin: 0;
-      padding: calc(var(--dt-size-350) + var(--dt-size-100));
+      padding: calc(var(--dt-spacing-75) + var(--dt-spacing-1));
       background: var(--dt-color-surface-moderate-opaque);
       border: none;
       border-radius: var(--dt-size-radius-circle);
@@ -128,10 +128,10 @@
   }
 
   &__selector {
-    min-block-size: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
+    min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
 
     p {
-      padding-block-end: var(--dt-size-300);
+      padding-block-end: var(--dt-spacing-50);
       color: var(--dt-color-foreground-secondary);
       font: var(--dt-typography-headline-eyebrow);
       text-transform: var(--dt-typography-headline-eyebrow-text-case);
@@ -143,48 +143,48 @@
     inset-block-start: 0;
     inline-size: 100%;
     margin: 0;
-    padding: var(--dt-size-500) var(--dt-size-500) 0 var(--dt-size-500);
+    padding: var(--dt-spacing-200) var(--dt-spacing-200) 0 var(--dt-spacing-200);
     background: var(--dt-color-surface-primary);
   }
 
   &__list {
     position: relative;
     block-size: 100%;
-    max-block-size: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
-    padding-block-end: calc(var(--dt-size-300) + var(--dt-size-100));
+    max-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
+    padding-block-end: calc(var(--dt-spacing-50) + var(--dt-spacing-1));
     overflow: hidden auto;
 
     div:not(:first-child) {
       p {
-        margin-block-start: var(--dt-size-500);
+        margin-block-start: var(--dt-spacing-200);
       }
     }
   }
 
   &__search-label {
-    padding-block-start: var(--dt-size-500);
+    padding-block-start: var(--dt-spacing-200);
   }
 
   &__search-x-button {
-    margin-inline-end: var(--dt-size-300-negative);
+    margin-inline-end: var(--dt-spacing-50-negative);
   }
 
   &__tab {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--dt-size-200);
-    inline-size: calc(100% + calc(var(--dt-size-500) - var(--dt-size-100)));
-    max-inline-size: calc(var(--dt-size-925) + var(--dt-size-400));
+    gap: var(--dt-spacing-25);
+    inline-size: calc(100% + calc(var(--dt-layout-25) - var(--dt-spacing-1)));
+    max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-100));
     // We use this margin left to align the emoji list with the tabset label
-    margin-inline-start: var(--dt-size-350-negative);
-    padding-block-start: var(--dt-size-300);
+    margin-inline-start: var(--dt-spacing-75-negative);
+    padding-block-start: var(--dt-spacing-50);
 
     button {
       display: flex;
       align-items: center;
       justify-content: center;
-      inline-size: calc(var(--dt-size-600) + var(--dt-size-300));
-      block-size: calc(var(--dt-size-600) + var(--dt-size-300));
+      inline-size: calc(var(--dt-layout-50) + var(--dt-spacing-50));
+      block-size: calc(var(--dt-layout-50) + var(--dt-spacing-50));
       margin: 0;
       padding: 0;
       background: none;
@@ -211,7 +211,7 @@
   &__search {
     position: relative;
     z-index: 1;
-    padding: var(--dt-size-500) 0 0 0;
+    padding: var(--dt-spacing-200) 0 0 0;
   }
 
   &__search-button {
@@ -226,10 +226,10 @@
 
   &__data {
     display: flex;
-    gap: var(--dt-size-400);
+    gap: var(--dt-spacing-100);
     align-items: center;
     inline-size: 100%;
-    max-inline-size: calc(var(--dt-size-905) + var(--dt-size-550) + var(--dt-size-200));
+    max-inline-size: calc(var(--dt-layout-450) - var(--dt-spacing-75));
     color: var(--dt-color-foreground-tertiary);
     font: var(--dt-typography-body-md);
   }

package/lib/build/less/components/empty-state.less

@@ -16,7 +16,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--dt-size-600);
+  padding: var(--dt-spacing-400);
   text-align: center;
   inline-size: 100%;
   margin-inline: auto;
@@ -31,11 +31,11 @@
   }
 
   &__content {
-    padding: var(--dt-size-600) 0;
+    padding: var(--dt-spacing-400) 0;
   }
 
   &__content--sm {
-    padding: var(--dt-size-500) 0;
+    padding: var(--dt-spacing-200) 0;
   }
 
   &__header-text {
@@ -51,11 +51,11 @@
   }
 
   &--size-sm {
-    padding: var(--dt-size-500);
+    padding: var(--dt-spacing-200);
   }
 
   &--size-md {
-    padding: var(--dt-size-500);
+    padding: var(--dt-spacing-200);
   }
 }
 }

package/lib/build/less/components/filter-pill.less

@@ -57,7 +57,7 @@
 
   &__label {
     display: flex;
-    gap: var(--dt-size-300);
+    gap: var(--dt-spacing-50);
     align-items: baseline;
     font-weight: var(--dt-font-weight-normal);
   }
@@ -80,7 +80,7 @@
 
     &::before {
       content: "=";
-      margin-inline-end: var(--dt-size-300);
+      margin-inline-end: var(--dt-spacing-50);
     }
   }
 
@@ -88,13 +88,13 @@
     align-items: center;
     overflow: hidden;
     font-weight: var(--dt-font-weight-bold);
-    letter-spacing: var(--dt-size-100);
+    letter-spacing: var(--dt-spacing-1);
     font-variant-numeric: tabular-nums;
   }
 
   &__clear {
-    --button-padding-x: var(--dt-size-350) !important;
-    --button-padding-y: var(--dt-size-0) !important;
+    --button-padding-x: var(--dt-spacing-75) !important;
+    --button-padding-y: var(--dt-spacing-0) !important;
 
     border-inline-start-width: 0;
     border-start-start-radius: 0;