@dialpad/dialtone-css 8.42.3 → 8.44.0-beta.1

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

@@ -24,11 +24,9 @@
   --button-color-background: var(--dt-action-color-background-base-default);
   --button-color-border: transparent;
   --button-gap: calc(var(--button-padding-x) / 2);
-  --button-border-radius: var(--dt-size-400);
-  --button-border-width: var(--dt-size-100);
-  --button-font-size: var(--dt-font-size-200);
-  --button-font-weight: var(--dt-font-weight-medium);
-  --button-line-height: var(--dt-font-line-height-200);
+  --button-border-radius: var(--dt-button-size-radius-md);
+  --button-border-width: var(--dt-size-border-100);
+  --button-typography: var(--dt-typography-button-md);
   --button-padding-y-xs: calc(
     calc(var(--dt-space-400) - var(--dt-space-100)) - var(--button-border-width)
   ); // ((8 - 1) - border-width)
@@ -80,10 +78,7 @@
   box-sizing: border-box;
   padding: var(--button-padding-y) var(--button-padding-x);
   color: var(--button-color-text);
-  font-weight: var(--button-font-weight);
-  font-size: var(--button-font-size);
-  font-family: inherit;
-  line-height: var(--button-line-height);
+  font: var(--button-typography);
   text-transform: inherit;
   text-decoration: none;
   vertical-align: middle;
@@ -92,10 +87,9 @@
   border-style: solid;
   border-width: var(--button-border-width);
   border-radius: var(--button-border-radius);
-  box-shadow: var(--button--bs);
   cursor: pointer;
   transition-timing-function: var(--ttf-out-quint);
-  transition-duration: var(--td200);
+  transition-duration: var(--td100);
   transition-property: background-color, border, box-shadow;
   user-select: none;
   fill: currentColor;
@@ -139,18 +133,19 @@
 //  $$  EXTRA SMALL
 //  ----------------------------------------------------------------------------
 .d-btn--xs {
+  --button-typography: var(--dt-typography-button-xs);
   --button-padding-y: var(--button-padding-y-xs);
   --button-padding-x: var(--button-padding-x-xs);
-  --button-font-size: var(--dt-font-size-100);
-  --button-border-radius: var(--dt-size-300);
+  --button-border-radius: var(--dt-button-size-radius-xs);
 }
 
 //  $$ SMALL
 //  ----------------------------------------------------------------------------
 .d-btn--sm {
+  --button-typography: var(--dt-typography-button-sm);
   --button-padding-y: var(--button-padding-y-sm);
   --button-padding-x: var(--button-padding-x-sm);
-  --button-font-size: var(--dt-font-size-100);
+  --button-border-radius: var(--dt-button-size-radius-sm);
 }
 
 //  $$  MEDIUM
@@ -162,20 +157,19 @@
 //  $$  LARGE
 //  ----------------------------------------------------------------------------
 .d-btn--lg {
+  --button-typography: var(--dt-typography-button-lg);
   --button-padding-y: var(--button-padding-y-lg);
   --button-padding-x: var(--button-padding-x-lg);
-  --button-font-size: var(--dt-font-size-300);
-  --button-border-radius: var(--dt-size-450);
+  --button-border-radius: var(--dt-button-size-radius-lg);
 }
 
 //  $$  EXTRA LARGE
 //  ----------------------------------------------------------------------------
 .d-btn--xl {
+  --button-typography: var(--dt-typography-button-xl);
   --button-padding-y: var(--button-padding-y-xl);
   --button-padding-x: var(--button-padding-x-xl);
-  --button-font-size: var(--dt-font-size-400);
-  --button-font-weight: var(--dt-font-weight-normal);
-  --button-border-radius: var(--dt-size-500);
+  --button-border-radius: var(--dt-button-size-radius-xl);
 }
 
 //  ============================================================================

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

@@ -17,18 +17,18 @@
   width: calc(var(--dt-size-925) + var(--dt-size-600) + var(--dt-size-400));
   height: 100%;
   background-color: var(--dt-color-surface-primary);
-  border-radius: var(--dt-size-300);
+  border-radius: var(--dt-size-radius-300);
 
   &--header {
     position: relative;
-    padding: var(--dt-space-300) var(--dt-space-300) 0 var(--dt-space-400);
+    padding: var(--dt-space-300) var(--dt-space-300) 0;
 
     &::after {
       position: absolute;
       right: 0;
       bottom: 0;
       left: 0;
-      height: var(--dt-size-100);
+      height: var(--dt-size-border-200);
       background-color: var(--dt-color-surface-moderate) !important;
       content: '';
     }
@@ -50,22 +50,26 @@
     height: calc(var(--dt-size-650) + var(--dt-size-400) + var(--dt-size-200));
     padding: 0 var(--dt-space-500);
     background: var(--dt-color-surface-secondary);
-    border-top: var(--dt-size-100) solid var(--dt-color-border-subtle);
+    border-top: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
   }
 
   &__tabset-list {
-      gap: var(--dt-space-300);
+      gap: var(--dt-space-0);
+      justify-content: space-between;
 
       &::after {
         background-color: var(--dt-color-surface-moderate) !important;
       }
 
-      button {
-        padding: var(--dt-space-400);
+      .d-tab {
+        --tab-padding-y: var(--dt-space-400);
+        --tab-padding-x: var(--dt-space-300);
+
+        flex-grow: 1;
 
         &.d-tab--selected {
           &::after {
-            height: var(--dt-size-200);
+            height: var(--dt-size-border-200);
           }
         }
     }
@@ -77,8 +81,8 @@
     gap: var(--dt-space-300);
     align-items: flex-start;
     padding: var(--dt-space-300);
-    background: rgba(0, 0, 0, 0.05);
-    border-radius: calc(var(--dt-size-600) + var(--dt-size-400));
+    background: var(--dt-color-surface-moderate-opaque);
+    border-radius: var(--dt-size-radius-pill);
 
     button {
       width: var(--dt-size-600);
@@ -86,19 +90,18 @@
       margin: 0;
       padding: 0;
       background: none;
-      border: none;
+      border: var(--dt-size-border-100) solid transparent;
       border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
       outline: none;
       cursor: pointer;
 
       &:hover {
-        background: rgba(0, 0, 0, 0.1);
-        border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
+        background: var(--dt-color-surface-moderate-opaque);
       }
 
+      &:active,
       &.selected {
-        border: var(--dt-size-100) solid rgba(0, 0, 0, 0.25);
-        border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
+        border-color: var(--dt-color-border-bold);
       }
     }
   }
@@ -110,9 +113,9 @@
       height: var(--dt-size-625);
       margin: 0;
       padding: calc(var(--dt-space-350) + var(--dt-space-100));
-      background: rgba(0, 0, 0, 0.1);
+      background: var(--dt-color-surface-moderate-opaque);
       border: none;
-      border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
+      border-radius: var(--dt-size-radius-circle);
       outline: none;
       cursor: pointer;
 
@@ -126,10 +129,10 @@
     min-height: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
 
     p {
-      margin-bottom: var(--dt-space-300);
-      font-weight: 700;
-      font-size: var(--dt-size-450);
-      letter-spacing: -0.01em;
+      padding-bottom: var(--dt-space-300);
+      color: var(--dt-color-foreground-secondary);
+      font: var(--dt-typography-headline-eyebrow);
+      text-transform: var(--dt-typography-headline-eyebrow-text-case);
     }
   }
 
@@ -138,7 +141,7 @@
     top: 0;
     width: 100%;
     margin: 0;
-    padding: var(--dt-space-525) var(--dt-space-500) 0 var(--dt-space-500);
+    padding: var(--dt-space-500) var(--dt-space-500) 0 var(--dt-space-500);
     background: var(--dt-color-surface-primary);
   }
 
@@ -151,13 +154,13 @@
 
     div:not(:first-child) {
       p {
-        margin-top: calc(var(--dt-space-525) + var(--dt-space-200));
+        margin-top: var(--dt-space-500);
       }
     }
   }
 
   &__search-label {
-    margin-top: calc(var(--dt-space-525));
+    padding-top: var(--dt-space-500);
   }
 
   &__tab {
@@ -168,6 +171,7 @@
     max-width: calc(var(--dt-size-925) + var(--dt-size-400));
     // We use this margin left to align the emoji list with the tabset label
     margin-left: var(--dt-space-350-negative);
+    padding-top: var(--dt-space-300);
 
     button {
       display: flex;
@@ -179,17 +183,17 @@
       padding: 0;
       background: none;
       border: none;
-      border-radius: 50%;
+      border-radius: var(--dt-size-radius-circle);
       outline: none;
       cursor: pointer;
 
       &:hover,
       &:active {
-        background: rgba(0, 0, 0, 0.1);
+        background: var(--dt-color-surface-moderate-opaque);
       }
 
       &.hover-emoji {
-        background: rgba(0, 0, 0, 0.1);
+        background: var(--dt-color-surface-moderate-opaque);
       }
 
       &:focus {
@@ -201,8 +205,7 @@
   &__search {
     position: relative;
     z-index: 1;
-    margin: var(--dt-space-500) var(--dt-space-550) 0 var(--dt-space-500);
-    background-color: var(--dt-color-surface-primary);
+    padding: var(--dt-space-500) 0 0 0;
   }
 
   &__search-button {
@@ -221,5 +224,7 @@
     align-items: center;
     width: 100%;
     max-width: calc(var(--dt-size-905) + var(--dt-size-550) + var(--dt-size-200));
+    color: var(--dt-color-foreground-tertiary);
+    font: var(--dt-typography-body-md);
   }
 }

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

@@ -29,7 +29,8 @@ fieldset {
 //  ============================================================================
 //  $  LABELS
 //  ----------------------------------------------------------------------------
-.d-label {
+.d-label,
+.d-label--md {
   display: flex;
   flex: 1 0%;
   align-items: baseline;
@@ -37,10 +38,7 @@ fieldset {
   box-sizing: border-box;
   margin-bottom: var(--dt-space-300);
   color: var(--dt-color-foreground-secondary);
-  font-weight: var(--dt-font-weight-semi-bold);
-  font-size: var(--dt-font-size-200);
-  font-family: inherit;
-  line-height: var(--dt-font-line-height-300);
+  font: var(--dt-typography-label-md);
   word-break: break-word;
   overflow-wrap: break-word;
 

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

@@ -30,12 +30,11 @@
     --input-color-background: var(--dt-inputs-color-background-default);
     --input-color-background-disabled: var(--dt-inputs-color-background-disabled);
     --input-color-text: var(--dt-inputs-color-foreground-default);
-    --input-border-width: calc(var(--dt-size-100) + var(--dt-size-50)); // 1.5
-    --input-border-radius: var(--dt-size-400);
+    --input-border-width: var(--dt-size-border-150);
+    --input-border-radius: var(--dt-inputs-size-radius-md);
     --input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
     --input-padding-x: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
-    --input-font-size: var(--dt-font-size-200);
-    --input-line-height: var(--dt-font-line-height-200);
+    --input-typography: var(--dt-typography-inputs-md);
 
     position: relative;
     display: inline-flex;
@@ -45,20 +44,44 @@
     min-width: 0;
     padding: var(--input-padding-y) var(--input-padding-x);
     color: var(--input-color-text);
-    font-weight: inherit;
-    font-size: var(--input-font-size);
-    font-family: inherit;
-    line-height: var(--input-line-height);
+    font: var(--input-typography);
     background-color: var(--input-color-background);
     border: var(--input-border-width) solid var(--input-color-border);
     border-radius: var(--input-border-radius);
     outline: none;
     box-shadow: none;
-    transition-timing-function: var(--ttf-in-out);
-    transition-duration: var(--td100);
-    transition-property: box-shadow, background-color;
     appearance: none;
-    caret-color: var(--input-color-text);
+    caret-color: fieldtext;
+
+    &:has(.d-textarea) {
+        border-end-end-radius: var(--dt-inputs-size-radius-xs);
+    }
+
+    &:has(.d-input--xs),
+    &:has(.d-textarea--xs) {
+        --input-border-radius: var(--dt-inputs-size-radius-xs);
+    }
+
+    &:has(.d-input--sm),
+    &:has(.d-textarea--sm) {
+        --input-border-radius: var(--dt-inputs-size-radius-sm);
+    }
+
+    &:has(.d-input--md),
+    &:has(.d-textarea--md) {
+        --input-border-radius: var(--dt-inputs-size-radius-md);
+    }
+
+    &:has(.d-input--lg),
+    &:has(.d-textarea--lg) {
+        --input-border-radius: var(--dt-inputs-size-radius-lg);
+    }
+
+    &:has(.d-input--xl),
+    &:has(.d-textarea--xl) {
+        --input-border-radius: var(--dt-inputs-size-radius-xl);
+    }
+
 
     //  --  Placeholder copy
     &::placeholder {
@@ -74,7 +97,7 @@
         --input-color-background: var(--dt-inputs-color-background-focus);
         --input-color-border: var(--dt-inputs-color-border-focus) !important;
 
-        box-shadow: 0 0 0 var(--dt-size-100) var(--dt-inputs-color-border-focus) inset;
+        box-shadow: 0 0 0 var(--dt-size-border-100) var(--dt-inputs-color-border-focus) inset;
     }
     //  --  DISABLED / READ-ONLY
     &[disabled],
@@ -203,14 +226,12 @@
     #d-internal__input-and-select-xl();
 }
 
-
 //  ============================================================================
 //  $  TEXTAREAS
 //  ----------------------------------------------------------------------------
 .d-textarea {
     min-height: calc(var(--dt-size-300) * 20); // 80
     vertical-align: top;
-    border-bottom-right-radius: var(--dt-size-300);
     resize: vertical;
     scroll-padding-block: var(--input-padding-y);
 }

package/lib/build/less/components/radio-checkbox.less

@@ -30,7 +30,7 @@
     --check-radio-color-background: var(--dt-inputs-color-background-default);
     --check-radio-color-background-checked: var(--dt-checkbox-color-background-checked);
     --check-radio-color-background-disabled: var(--dt-inputs-color-background-disabled);
-    --check-radio-border-width: calc(var(--dt-size-100) + var(--dt-size-50)); // 1.5
+    --check-radio-border-width: var(--dt-size-border-150);
 
     //  [1] Check to see if we can use custom styles, if so reset the defaults
     //  ------------------------------------------------------------------------
@@ -155,9 +155,7 @@
     flex-direction: column;
     align-items: flex-start;
     color: var(--dt-color-foreground-primary);
-    font-weight: var(--dt-font-weight-normal);
-    font-size: var(--dt-font-size-200);
-    line-height: var(--dt-font-line-height-400);
+    font: var(--dt-typography-label-md-plain);
     cursor: pointer;
 }
 
@@ -179,7 +177,7 @@
         background-repeat: no-repeat;
         background-position: center center;
         background-size: contain;
-        border-radius: var(--dt-size-300);
+        border-radius: var(--dt-size-radius-300);
 
         &:focus-visible,
         &:checked:focus-visible {

package/lib/build/less/components/tabs.less

@@ -14,12 +14,20 @@
 //  $   WRAPPERS
 //  ----------------------------------------------------------------------------
 .d-tablist {
+    //  --  COMPONENT CSS VARS
+    //  ------------------------------------------------------------------------
+    --tab-color-background: var(--dt-action-color-background-base-default);
+    --tab-color-text: var(--dt-action-color-foreground-muted-default);
+    --tab-font-style: var(--dt-typography-button-md);
+    --tab-border-radius: var(--dt-button-size-radius-md);
+    --tab-padding-x: calc(var(--dt-space-450) - var(--dt-size-border-100));
+    --tab-padding-y: calc(var(--dt-space-400) - var(--dt-size-border-100));
+
     position: relative;
     display: flex;
     flex-wrap: wrap;
     gap: var(--dt-space-300);
-    color: var(--dt-color-foreground-muted-default);
-    font-size: var(--dt-font-size-200);
+    align-items: baseline;
 
     &:focus {
         outline: 0;
@@ -28,50 +36,19 @@
     // Add a bottom border unless no border is requested
     &:not(.d-tablist--no-border)::after {
         position: absolute;
-        right: 0;
-        bottom: 0;
-        left: 0;
+        inset-inline: 0;
+        inset-block-end: 0;
         z-index: var(--zi-base1);
-        height: var(--dt-size-100);
+        block-size: var(--dt-size-border-100);
         background-color: var(--dt-color-border-default);
         content: '';
     }
-
-    //  ============================================================================
-    //  $   SIZES
-    //  ----------------------------------------------------------------------------
-    &--sm {
-        font-size: var(--dt-font-size-100);
-
-        .d-tab {
-            --tab-padding-x: var(--dt-space-400);
-            --tab-padding-y: var(--dt-space-400);
-            --tab-padding-bottom: calc(var(--tab-padding-y) + var(--dt-space-100));
-            --tab-border-radius-top: var(--dt-size-radius-300);
-
-            .d-tablist--no-border &:not(.d-tab--selected) {
-                border-radius: var(--tab-border-radius-top);
-            }
-        }
-    }
 }
 
-
 //  ============================================================================
 //  $   BASE STYLE
 //  ----------------------------------------------------------------------------
 .d-tab {
-    //  --  COMPONENT CSS VARS
-    //  ------------------------------------------------------------------------
-    --tab-color-background: var(--dt-action-color-background-base-default);
-    --tab-color-text: var(--dt-action-color-foreground-muted-default);
-    --tab-line-height: var(--dt-font-line-height-200);
-    --tab-font-weight: var(--dt-font-weight-medium);
-    --tab-border-radius-top: var(--dt-size-radius-400);
-    --tab-padding-x: var(--dt-space-450);
-    --tab-padding-y: var(--dt-space-400);
-    --tab-padding-bottom: calc(var(--tab-padding-y) + var(--dt-space-100));
-
     position: relative;
     display: inline-flex;
     gap: var(--dt-space-400);
@@ -79,40 +56,36 @@
     justify-content: center;
     box-sizing: border-box;
     padding: var(--tab-padding-y) var(--tab-padding-x);
-    padding-bottom: var(--tab-padding-bottom);
     color: var(--tab-color-text);
-    font: inherit;
-    font-weight: var(--tab-font-weight);
-    line-height: var(--tab-line-height);
+    font: var(--tab-font-style);
     background-color: var(--tab-color-background);
-    border: 0;
-    border-radius: var(--tab-border-radius-top) var(--tab-border-radius-top) 0 0;
+    border: var(--dt-size-border-100) solid transparent;
+    border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0;
     cursor: pointer;
     transition-timing-function: var(--ttf-out-quint);
-    transition-duration: var(--td200);
+    transition-duration: var(--td100);
     transition-property: background-color, border, color, box-shadow;
     fill: currentColor;
 
     .d-tablist--no-border &:not(.d-tab--selected) {
-        border-radius: var(--tab-border-radius-top);
+        border-radius: var(--tab-border-radius);
     }
 
     &:first-of-type {
-        margin-left: 0;
+        margin-inline-start: 0;
     }
 
     &:last-of-type {
-        margin-right: 0;
+        margin-inline-end: 0;
     }
 
     &::after {
         position: absolute;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        height: var(--dt-size-200);
+        block-size: var(--dt-size-border-200);
         background-color: var(--tab-color-background);
         content: '';
+        inset-inline: var(--dt-size-100-negative) var(--dt-size-100-negative);
+        inset-block-end: var(--dt-size-100-negative);
 
         .d-tablist--no-border & {
             background-color: transparent;
@@ -144,6 +117,19 @@
     @media (prefers-reduced-motion) {
         transition: none;
     }
+
+    //  ============================================================================
+    //  $   SIZES
+    //  ----------------------------------------------------------------------------
+    .d-tablist--sm & {
+        --tab-padding-x: calc(var(--dt-space-400) - var(--dt-size-border-100));
+        --tab-border-radius: var(--dt-button-size-radius-xs);
+        --tab-font-style: var(--dt-typography-button-xs);
+
+        .d-tablist--no-border &:not(.d-tab--selected) {
+            border-radius: var(--tab-border-radius);
+        }
+    }
 }
 
 //  ============================================================================
@@ -174,7 +160,6 @@
     }
 }
 
-
 //  ============================================================================
 //  $   INVERTED STYLE
 //  ----------------------------------------------------------------------------

package/lib/build/less/dialtone.less

@@ -25,9 +25,6 @@
 @import 'components/collapsible';
 @import 'components/combobox';
 @import 'components/datepicker';
-@import 'components/emoji';
-@import 'components/emoji-text-wrapper';
-@import 'components/emoji-picker';
 @import 'components/empty-state';
 @import 'components/forms';
 @import 'components/image-viewer';
@@ -53,6 +50,9 @@
 @import 'components/presence';
 @import 'components/icon';
 @import 'components/scrollbar';
+@import 'components/emoji';
+@import 'components/emoji-text-wrapper';
+@import 'components/emoji-picker';
 
 //  --  UTILITIES
 @import 'utilities/backgrounds';

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

@@ -69,6 +69,7 @@
 //  ----------------------------------------------------------------------------
 
 //  $$  FLEX GAPS
+//  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-space-100) !important; }

package/lib/build/less/utilities/grid.less

@@ -38,6 +38,7 @@
 //  ============================================================================
 //      Defines the size of grid 'gaps' (lines). We generate a gap for
 //      each defined spacing unit.
+//      TODO: Deprecated classes, remove on our next migration. https://dialpad.atlassian.net/browse/DLT-1763
 //  ----------------------------------------------------------------------------
 .d-gcg-unset { grid-column-gap: unset !important; }
 .d-grg-unset { grid-row-gap: unset !important; }

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

@@ -105,3 +105,13 @@
 .d-px-unset { padding-right: unset !important; padding-left: unset !important; }
 
 .d-py-unset { padding-top: unset !important; padding-bottom: unset !important; }
+
+//  ============================================================================
+//  $   GAP
+//  ============================================================================
+//      Defines the size of 'gaps' (lines). We generate a gap for
+//      each defined spacing unit.
+//  ----------------------------------------------------------------------------
+.d-cg-unset { column-gap: unset !important; }
+.d-rg-unset { row-gap: unset !important; }
+.d-g-unset { gap: unset !important; }