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

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;

package/lib/build/less/components/forms.less

@@ -37,7 +37,7 @@ fieldset {
   align-items: baseline;
   justify-content: space-between;
   box-sizing: border-box;
-  margin-block-end: var(--dt-size-300);
+  margin-block-end: var(--dt-spacing-50);
   color: var(--dt-color-foreground-secondary);
   font: var(--dt-typography-label-md);
   overflow-wrap: break-word;
@@ -92,7 +92,7 @@ fieldset {
 }
 
 .d-label + .d-description {
-  margin-block: var(--dt-size-300-negative) var(--dt-size-300);
+  margin-block: var(--dt-spacing-50-negative) var(--dt-spacing-50);
 }
 
 .d-input__label-text,
@@ -103,14 +103,14 @@ fieldset {
   align-items: baseline;
   justify-content: space-between;
   box-sizing: border-box;
-  margin-block-end: var(--dt-size-300);
+  margin-block-end: var(--dt-spacing-50);
   overflow-wrap: break-word;
 }
 
 .d-input__label-text + .d-description,
 .d-select__label-text + .d-description,
 .d-input-group__legend-text + .d-description {
-  margin-block: var(--dt-size-300-negative) var(--dt-size-300);
+  margin-block: var(--dt-spacing-50-negative) var(--dt-spacing-50);
 }
 
 //  ============================================================================
@@ -120,9 +120,9 @@ fieldset {
   --validation-color-text: var(--dt-color-foreground-tertiary);
 
   display: flex;
-  gap: var(--dt-size-300);
+  gap: var(--dt-spacing-50);
   align-items: flex-start;
-  margin-block-start: var(--dt-size-350);
+  margin-block-start: var(--dt-spacing-50);
   color: var(--validation-color-text);
   font-weight: var(--dt-font-weight-medium);
   font-size: var(--dt-font-size-125);
@@ -132,10 +132,10 @@ fieldset {
   // Icon Slot
   &::before {
     display: block;
-    margin-block-start: var(--dt-size-200);
-    inline-size: var(--dt-size-500); // 16
-    min-inline-size: var(--dt-size-500); // 16
-    block-size: var(--dt-size-500); // 16
+    margin-block-start: var(--dt-spacing-25);
+    inline-size: var(--dt-layout-25); // 16
+    min-inline-size: var(--dt-layout-25); // 16
+    block-size: var(--dt-layout-25); // 16
     background-color: var(--validation-color-text);
     content: '';
   }

package/lib/build/less/components/image-viewer.less

@@ -12,7 +12,7 @@
 //  ----------------------------------------------------------------------------
 @layer dialtone.components {
 .d-image-viewer__preview-button {
-  padding: var(--dt-size-0);
+  padding: var(--dt-spacing-0);
   cursor: -webkit-zoom-in;
   cursor: zoom-in;
 }
@@ -20,7 +20,7 @@
 .d-image-viewer__full {
   max-inline-size: 80%;
   max-block-size: 80%;
-  padding: var(--dt-size-0);
+  padding: var(--dt-spacing-0);
   border-radius: var(--dt-size-radius-0);
 
   &__image {

package/lib/build/less/components/input.less

@@ -29,8 +29,8 @@
     --input-color-text: var(--dt-inputs-color-foreground-default);
     --input-border-width: var(--dt-size-border-100);
     --input-border-radius: var(--dt-inputs-size-radius-md);
-    --input-padding-y: calc(var(--dt-size-400) - var(--input-border-width));
-    --input-padding-x: calc((var(--dt-size-500) - var(--dt-size-300)) - var(--input-border-width));
+    --input-padding-y: calc(var(--dt-spacing-100) - var(--input-border-width));
+    --input-padding-x: calc(var(--dt-spacing-150) - var(--input-border-width));
     --input-typography: var(--dt-typography-inputs-md);
 
     position: relative;
@@ -160,7 +160,7 @@
 }
 
 .d-input__length-description {
-    margin-block-end: var(--dt-size-200);
+    margin-block-end: var(--dt-spacing-25);
 }
 
 .d-input--hidden {
@@ -175,7 +175,7 @@
 
     .d-textarea + .d-input-icon--right {
       position: absolute;
-      inset-inline-end: var(--dt-size-450);
+      inset-inline-end: var(--dt-spacing-150);
     }
 
     .d-input-icon--left:has(+ .d-textarea) {
@@ -184,35 +184,35 @@
 
     .d-input-icon:has(+ .d-textarea),
     .d-textarea+.d-input-icon {
-        padding-block-start: calc(var(--input-padding-y) + var(--dt-size-200));
+        padding-block-start: calc(var(--input-padding-y) + var(--dt-spacing-25));
     }
 
     .d-input-icon:has(+ .d-textarea--xs),
     .d-textarea--xs + .d-input-icon {
         #d-internal__input-and-select-xs();
 
-        padding-block-start: calc(var(--input-padding-y) + var(--dt-size-100));
+        padding-block-start: calc(var(--input-padding-y) + var(--dt-spacing-1));
     }
 
     .d-input-icon:has(+ .d-textarea--sm),
     .d-textarea--sm+.d-input-icon {
         #d-internal__input-and-select-sm();
 
-        padding-block-start: calc(var(--input-padding-y) + var(--dt-size-100));
+        padding-block-start: calc(var(--input-padding-y) + var(--dt-spacing-1));
     }
 
     .d-input-icon:has(+ .d-textarea--lg),
     .d-textarea--lg+.d-input-icon {
         #d-internal__input-and-select-lg();
 
-        padding-block-start: calc(var(--input-padding-y) + var(--dt-size-100));
+        padding-block-start: calc(var(--input-padding-y) + var(--dt-spacing-1));
     }
 
     .d-input-icon:has(+ .d-textarea--xl),
     .d-textarea--xl+.d-input-icon {
         #d-internal__input-and-select-xl();
 
-        padding-block-start: calc(var(--input-padding-y) + (var(--dt-size-350) - var(--dt-size-100)));
+        padding-block-start: calc(var(--input-padding-y) + (var(--dt-spacing-75) - var(--dt-spacing-1)));
     }
 
     .d-input,
@@ -252,7 +252,7 @@
 //  $  TEXTAREAS
 //  ----------------------------------------------------------------------------
 .d-textarea {
-    min-block-size: calc(var(--dt-size-300) * 20); // 80
+    min-block-size: var(--dt-layout-125); // 80
     vertical-align: top;
     resize: block;
     scroll-padding-block: var(--input-padding-y);
@@ -263,25 +263,25 @@
 .d-textarea--xs {
     #d-internal__input-and-select-xs();
 
-    min-block-size: calc(var(--dt-size-300) * 10); // 40
+    min-block-size: calc(var(--dt-layout-75) - var(--dt-spacing-100)); // 40
 }
 
 .d-textarea--sm {
     #d-internal__input-and-select-sm();
 
-    min-block-size: var(--dt-size-650); // 48
+    min-block-size: var(--dt-layout-75); // 48
 }
 
 .d-textarea--lg {
     #d-internal__input-and-select-lg();
 
-    min-block-size: calc(var(--dt-size-300) * 23); // 92
+    min-block-size: var(--dt-spacing-150); // 96
 }
 
 .d-textarea--xl {
     #d-internal__input-and-select-xl();
 
-    min-block-size: calc(var(--dt-size-300) * 25); // 100
+    min-block-size: var(--dt-spacing-175); // 112
 }
 
 //  $$  VALIDATION STATES
@@ -309,21 +309,16 @@
         align-items: center;
     }
 
-    :where(.d-input__root:has(.d-input:disabled)) & {
-        opacity: var(--dt-opacity-700);
-        pointer-events: none;
-    }
-
     &--right:not(:empty) {
-        margin-inline-end: var(--dt-size-400);
+        margin-inline-end: var(--dt-spacing-100);
 
         .d-btn {
-            margin-inline-end: var(--dt-size-350-negative);
+            margin-inline-end: var(--dt-spacing-75-negative);
         }
     }
 
     &--left:not(:empty) {
-        margin-inline-start: var(--dt-size-400);
+        margin-inline-start: var(--dt-spacing-100);
     }
 }
 }

package/lib/build/less/components/item-layout.less

@@ -16,8 +16,8 @@
 .d-item-layout {
   display: flex;
   align-items: stretch;
-  min-block-size: calc(var(--dt-size-550) + var(--dt-size-300));
-  padding: var(--dt-size-300) var(--dt-size-400);
+  min-block-size: var(--dt-spacing-350);
+  padding: var(--dt-spacing-50) var(--dt-spacing-100);
   font-size: var(--dt-font-size-200);
   line-height: var(--dt-font-line-height-300);
 
@@ -26,7 +26,7 @@
     flex-direction: column;
     flex-grow: 1;
     justify-content: center;
-    min-inline-size: var(--dt-size-0);
+    min-inline-size: 0;
 
     > .d-item-layout__subtitle {
       color: var(--dt-color-foreground-tertiary);
@@ -34,11 +34,11 @@
     }
 
     > .d-item-layout__subtitle-with-title {
-      margin-block-start: var(--dt-size-200-negative);
+      margin-block-start: var(--dt-spacing-25-negative);
     }
 
     > .d-item-layout__bottom {
-      margin-block-start: var(--dt-size-200);
+      margin-block-start: var(--dt-spacing-25);
     }
   }
 
@@ -46,18 +46,18 @@
   > .d-item-layout__left {
     display: flex;
     align-items: center;
-    min-inline-size: var(--dt-size-600);
+    min-inline-size: var(--dt-layout-50);
     min-block-size: inherit;
   }
 
   > .d-item-layout__right {
     flex-shrink: 0;
-    padding-inline-start: var(--dt-size-400);
+    padding-inline-start: var(--dt-spacing-100);
   }
 
   > .d-item-layout__left {
     justify-content: flex-end;
-    padding-inline-end: var(--dt-size-400);
+    padding-inline-end: var(--dt-spacing-100);
   }
 
   > .d-item-layout__selected {

package/lib/build/less/components/keyboard-shortcut.less

@@ -13,15 +13,15 @@
 @layer dialtone.components {
 .d-keyboard-shortcut {
   display: inline-flex;
-  gap: var(--dt-size-200);
+  gap: var(--dt-spacing-25);
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  padding-inline: var(--dt-size-350);
+  padding-inline: var(--dt-spacing-75);
   font: var(--dt-typography-body-sm);
   font-variant-numeric: tabular-nums;
   min-inline-size: 1lh;
-  border: var(--dt-size-100) solid;
+  border: var(--dt-size-border-100) solid;
   border-color: var(--dt-color-border-default);
   border-radius: var(--dt-size-radius-300);
 

package/lib/build/less/components/link.less

@@ -23,7 +23,7 @@
 
     position: relative;
     display: inline-flex;
-    gap: var(--dt-size-300);
+    gap: var(--dt-spacing-50);
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
@@ -32,7 +32,7 @@
     color: var(--link-color-default);
     font: inherit;
     text-decoration: var(--link-text-decoration);
-    text-underline-offset: var(--dt-size-200);
+    text-underline-offset: var(--dt-spacing-25);
     text-decoration-thickness: var(--dt-size-border-100);
     background-color: var(--link-background-color);
     border: 0;
@@ -174,7 +174,7 @@
         --link-color-default: var(--dt-color-link-primary-inverted);
         --link-color-default-hover: var(--dt-color-link-primary-inverted-hover);
         --link-text-decoration: none;
-        --link-padding: 0 var(--dt-size-200);
+        --link-padding: 0 var(--dt-spacing-25);
         --link-background-color: oklch(from var(--dt-color-surface-brand-strong) l c h /0.3);
 
         line-height: var(--dt-font-line-height-200);
@@ -187,7 +187,7 @@
     // is reversed compared to a regular link, and it has a light background.
     &--mention {
         --link-text-decoration: none;
-        --link-padding: 0 var(--dt-size-200);
+        --link-padding: 0 var(--dt-spacing-25);
         --link-background-color: oklch(from var(--dt-color-surface-brand-strong) l c h /0.1);
 
         line-height: var(--dt-font-line-height-200);
@@ -197,7 +197,7 @@
             --link-text-decoration: underline;
             --link-background-color: oklch(from var(--dt-color-surface-brand-strong) l c h /0.25);
 
-            text-underline-offset: var(--dt-size-200);
+            text-underline-offset: var(--dt-spacing-25);
             text-decoration-thickness: var(--dt-size-border-100);
         }
 

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

@@ -18,7 +18,7 @@
 .d-list-group--header,
 .d-list-group--link {
     display: block;
-    padding: var(--dt-size-300) var(--dt-size-550); // 4 24
+    padding: var(--dt-spacing-50) var(--dt-spacing-300); // 4 24
 }
 
 .d-list-group--header {

package/lib/build/less/components/list-item-group.less

@@ -13,6 +13,6 @@
 @layer dialtone.components {
 .d-list-item-group {
   position: relative;
-  padding-inline: var(--dt-size-0) var(--dt-size-0);
+  padding-inline: var(--dt-spacing-0) var(--dt-spacing-0);
 }
 }

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

@@ -19,13 +19,13 @@
   }
 
   &[role="menuitem"] {
-    border-radius: var(--dt-size-300);
+    border-radius: var(--dt-size-radius-300);
   }
 
   &-separator {
-    margin: var(--dt-size-300) var(--dt-size-300-negative);
+    margin: var(--dt-spacing-50) var(--dt-spacing-50-negative);
     list-style: none;
-    border-block-start: var(--dt-size-100) solid var(--dt-color-border-default);
+    border-block-start: var(--dt-size-border-100) solid var(--dt-color-border-default);
   }
 
   &:focus-visible {
@@ -35,9 +35,9 @@
 }
 
 .d-list-item__wrapper {
-  gap: var(--dt-size-400);
-  min-block-size: calc(var(--dt-size-550) + var(--dt-size-300));
-  padding: var(--dt-size-300) var(--dt-size-400);
+  gap: var(--dt-spacing-100);
+  min-block-size: var(--dt-layout-50);
+  padding: var(--dt-spacing-50) var(--dt-spacing-100);
   font-size: var(--dt-font-size-200);
   line-height: var(--dt-font-line-height-300);
 }
@@ -54,16 +54,16 @@
 }
 
 .d-list-item__title {
-  min-inline-size: var(--dt-size-0);
+  min-inline-size: var(--dt-layout-0);
 }
 
 .d-list-item__subtitle {
-  margin-block-start: var(--dt-size-200-negative);
+  margin-block-start: var(--dt-spacing-25-negative);
   color: var(--dt-color-foreground-tertiary);
   font-size: var(--dt-font-size-100);
 }
 
 .d-list-item__bottom {
-  margin-block-start: var(--dt-size-200);
+  margin-block-start: var(--dt-spacing-25);
 }
 }