@dialpad/dialtone 6.27.0 → 6.29.0

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

@@ -0,0 +1,181 @@
+//
+//  DIALTONE
+//  COMPONENTS: CHIP
+//
+//  These are chip classes for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/components/chip
+//
+//  TABLE OF CONTENTS
+//  • BASE STYLE
+//  • INTERACTIVITY
+//  • SIZES
+//
+//  ============================================================================
+//  $   BASE STYLE
+//  ----------------------------------------------------------------------------
+.d-chip {
+  //  Component CSS Vars
+  --chip--fc: var(--fc-dark);
+  --chip--bgc: var(--black-050);
+  --chip--br: var(--su102);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: var(--su4) var(--su8);
+  color: var(--chip--fc);
+  font-size: var(--fs16);
+  font-family: inherit;
+  line-height: var(--lh4);
+  background-color: var(--chip--bgc);
+  border-radius: var(--chip--br);
+  transition-timing-function: var(--ttf-in-out);
+  transition-duration: 75ms;
+  transition-property: background-color;
+
+  .d-chip-btn-holder {
+    flex-shrink: 0;
+    width: calc(var(--su16) + var(--su2));
+    height: calc(var(--su16) + var(--su2));
+  }
+
+  .d-chip-btn-container {
+    position: absolute;
+    top: var(--su0);
+    right: var(--su0);
+    padding: var(--su2) var(--su2) var(--su2) var(--su0);
+    cursor: pointer;
+
+    .d-btn {
+      padding: calc(var(--su2) + var(--su1));
+      border-width: var(--su0);
+    }
+
+    &:hover {
+      .d-btn {
+        --button--bgc: hsla(var(--black-800-hsl) ~' / ' 15%);
+      }
+    }
+
+    &:active {
+      .d-btn {
+        --button--bgc: hsla(var(--black-800-hsl) ~' / ' 25%);
+      }
+    }
+  }
+
+  .d-avatar {
+    --avatar--size: var(--su24);
+
+    margin: var(--sun2) var(--su4) var(--sun2) var(--sun6);
+  }
+
+  .d-svg,
+  .d-btn .d-btn__icon .d-svg {
+    width: @icon18;
+    height: @icon18;
+  }
+}
+
+.d-chip__icon {
+  padding-right: var(--su4);
+  line-height: 0;
+}
+
+.d-chip--active {
+  background-color: var(--black-100);
+}
+
+//  ============================================================================
+//  $   INTERACTIVITY
+//  ----------------------------------------------------------------------------
+//  $$  INTERACTIVE (DEFAULT)
+//  ----------------------------------------------------------------------------
+.d-chip--interactive {
+  cursor: pointer;
+
+  &:hover {
+    --chip--bgc: var(--black-075);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--bs-focus-ring-muted);
+  }
+}
+
+//  ============================================================================
+//  $   SIZES
+//  ----------------------------------------------------------------------------
+//  $$  EXTRA SMALL
+//  ----------------------------------------------------------------------------
+.d-chip--xs {
+  padding: var(--su2) var(--su6);
+  font-size: var(--fs12);
+
+  .d-btn .d-btn__icon .d-svg,
+  .d-svg {
+    width: @icon14;
+    height: @icon14;
+  }
+
+  .d-chip-btn-holder {
+    width: var(--su12);
+    height: var(--su12);
+  }
+
+  .d-chip-btn-container {
+    top: calc(var(--sun1) + var(--sun2));
+    right: var(--sun2);
+    padding: var(--su4);
+
+    .d-btn {
+      padding: var(--su1);
+    }
+  }
+
+  .d-avatar {
+    --avatar--size: var(--su16);
+
+    margin-right: var(--su4);
+    margin-left: var(--sun4);
+  }
+}
+
+//  $$ SMALL
+//  ----------------------------------------------------------------------------
+.d-chip--sm {
+  padding: var(--su2) var(--su8);
+  font-size: var(--fs16);
+
+  .d-btn .d-btn__icon .d-svg,
+  .d-svg {
+    width: @icon16;
+    height: @icon16;
+  }
+
+  .d-chip-btn-holder {
+    width: calc(var(--su12) + var(--su2));
+    height: calc(var(--su12) + var(--su2));
+  }
+
+  .d-chip-btn-container {
+    top: var(--sun1);
+    right: var(--su0);
+    padding: var(--su2);
+
+    .d-btn {
+      padding: var(--su2);
+    }
+  }
+
+  .d-avatar {
+    --avatar--size: calc(var(--su24) - var(--su4));
+
+    margin-right: var(--su4);
+    margin-left: var(--sun6);
+  }
+}

package/lib/build/less/components/modal.less

@@ -84,7 +84,6 @@
   width: 100%;
   max-width: var(--size628);
   max-height: 100%;
-  padding: var(--su24);
   overflow-y: auto;
   color: var(--modal-dialog--fc);
   font-size: var(--fs16);
@@ -121,10 +120,14 @@
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  margin: var(--sun4);
+  padding: 0 var(--su24) var(--su24) var(--su24);
 
-  > * {
-    margin: var(--su4);
+  >:not(:first-child) {
+    margin-right: var(--su4);
+  }
+
+  >:not(:last-child) {
+    margin-left: var(--su4);
   }
 }
 
@@ -136,6 +139,7 @@
 //  ----------------------------------------------------------------------------
 .d-modal__header {
   margin: 0 !important;
+  padding: var(--su24) var(--su24) 0;
   color: var(--modal-header--fc);
   font-weight: var(--fw-bold);
   font-size: var(--fs24);
@@ -146,7 +150,8 @@
 //  ----------------------------------------------------------------------------
 .d-modal__content {
   max-width: 75ch;
-  margin: 0;
+  margin: var(--su12) 0 0 !important;
+  padding: var(--su4) var(--su24);
 }
 
 
@@ -196,15 +201,22 @@
     flex-direction: column;
     max-width: unset;
     height: 100%;
-    padding: var(--su32);
     border-radius: 0;
     transform: unset !important;
   }
 
+  .d-modal__header {
+    padding: var(--su32) var(--su32) 0;
+  }
+
+  .d-modal__content {
+    padding-right: 0;
+    padding-left: var(--su32);
+  }
 
   .d-modal__footer {
-    margin: var(--sun16) var(--sun12);
     margin-top: auto !important;
+    padding: 0 var(--su24) var(--su32) var(--su32);
   }
 
   .d-modal__banner {
@@ -219,6 +231,7 @@
 .d-modal__dialog--scrollable {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 
   .d-modal__content {
     overflow-y: auto;

package/lib/build/less/dialtone.less

@@ -16,6 +16,7 @@
 @import 'components/banner';
 @import 'components/breadcrumbs';
 @import 'components/button';
+@import 'components/chip';
 @import 'components/forms';
 @import 'components/input';
 @import 'components/link';

package/lib/build/less/utilities/interactivity.less

@@ -57,3 +57,13 @@
 
 .d-us-auto { user-select: auto !important; }
 .d-us-none { user-select: none !important; }
+
+//============================================================================
+//  $   RESIZE
+//      The resize CSS property sets whether an element is resizable,
+//      and if so, in which directions.
+//  ----------------------------------------------------------------------------
+.d-r-both { resize: both !important; }
+.d-r-horizontal { resize: horizontal !important; }
+.d-r-vertical { resize: vertical !important; }
+.d-r-none { resize: none !important; }

package/lib/build/svg/system/back-to-listen.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 20C13.29 20 13.56 19.94 13.76 19.85C14.47 19.48 14.97 18.97 15.47 17.47C15.98 15.91 16.94 15.18 17.86 14.47C18.65 13.86 19.47 13.23 20.18 11.94C20.71 10.98 21 9.93 21 9C21 6.2 18.8 4 16 4C13.2 4 11 6.2 11 9H9C9 5.07 12.07 2 16 2C19.93 2 23 5.07 23 9C23 10.26 22.62 11.65 21.93 12.9C21.02 14.55 19.95 15.38 19.08 16.05C18.27 16.67 17.69 17.12 17.37 18.1C16.77 19.92 16 20.94 14.64 21.65C14.13 21.88 13.57 22 13 22C10.79 22 9 20.21 9 18H11C11 19.1 11.9 20 13 20Z" fill="#0D0C0F"/>
-<path d="M6.4 9.4L5 8L0 13L5 18L6.4 16.6L3.8 14H12V12H3.8L6.4 9.4Z" fill="black"/>
+<path d="M13 20C13.29 20 13.56 19.94 13.76 19.85C14.47 19.48 14.97 18.97 15.47 17.47C15.98 15.91 16.94 15.18 17.86 14.47C18.65 13.86 19.47 13.23 20.18 11.94C20.71 10.98 21 9.93 21 9C21 6.2 18.8 4 16 4C13.2 4 11 6.2 11 9H9C9 5.07 12.07 2 16 2C19.93 2 23 5.07 23 9C23 10.26 22.62 11.65 21.93 12.9C21.02 14.55 19.95 15.38 19.08 16.05C18.27 16.67 17.69 17.12 17.37 18.1C16.77 19.92 16 20.94 14.64 21.65C14.13 21.88 13.57 22 13 22C10.79 22 9 20.21 9 18H11C11 19.1 11.9 20 13 20Z" />
+<path d="M6.4 9.4L5 8L0 13L5 18L6.4 16.6L3.8 14H12V12H3.8L6.4 9.4Z" />
 </svg>

package/lib/build/svg/system/barge.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="3" y="3" width="18" height="18" rx="2" fill="#0D0C0F"/>
+<rect x="3" y="3" width="18" height="18" rx="2" />
 <path d="M9.01818 7.68L10.5455 6L16 12L10.5455 18L9.01818 16.32L11.8545 13.2H3V10.8H11.8545L9.01818 7.68Z" fill="#E5E5E5"/>
 </svg>

package/lib/build/svg/system/done-all.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 7L16.59 5.59L10.25 11.93L11.66 13.34L18 7ZM22.24 5.59L11.66 16.17L7.48 12L6.07 13.41L11.66 19L23.66 7L22.24 5.59ZM0.410004 13.41L6 19L7.41 17.59L1.83 12L0.410004 13.41Z" fill="#0D0C0F"/>
+<path d="M18 7L16.59 5.59L10.25 11.93L11.66 13.34L18 7ZM22.24 5.59L11.66 16.17L7.48 12L6.07 13.41L11.66 19L23.66 7L22.24 5.59ZM0.410004 13.41L6 19L7.41 17.59L1.83 12L0.410004 13.41Z" />
 </svg>

package/lib/build/svg/system/fire.svg

@@ -1 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 1C13.5 1 14.24 3.65 14.24 5.8C14.24 7.86 12.89 9.53 10.83 9.53C8.76 9.53 7.2 7.86 7.2 5.8L7.23 5.44C5.21 7.84 4 10.95 4 14.33C4 18.75 7.58 22.33 12 22.33C16.42 22.33 20 18.75 20 14.33C20 8.94 17.41 4.13 13.5 1ZM11.71 19.33C9.93 19.33 8.49 17.93 8.49 16.19C8.49 14.57 9.54 13.43 11.3 13.07C13.07 12.71 14.9 11.86 15.92 10.49C16.31 11.78 16.51 13.14 16.51 14.53C16.51 17.18 14.36 19.33 11.71 19.33Z" fill="#0D0C0F"/></svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5 1C13.5 1 14.24 3.65 14.24 5.8C14.24 7.86 12.89 9.53 10.83 9.53C8.76 9.53 7.2 7.86 7.2 5.8L7.23 5.44C5.21 7.84 4 10.95 4 14.33C4 18.75 7.58 22.33 12 22.33C16.42 22.33 20 18.75 20 14.33C20 8.94 17.41 4.13 13.5 1ZM11.71 19.33C9.93 19.33 8.49 17.93 8.49 16.19C8.49 14.57 9.54 13.43 11.3 13.07C13.07 12.71 14.9 11.86 15.92 10.49C16.31 11.78 16.51 13.14 16.51 14.53C16.51 17.18 14.36 19.33 11.71 19.33Z" />
+</svg>

package/lib/build/svg/system/park.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.0272 8.07422V12.0762H11.7432C13.1907 12.0762 13.8969 11.2559 13.8969 10.0664C13.8969 8.87109 13.1907 8.07422 11.7315 8.07422H10.0272Z" fill="#0D0C0F"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5ZM10.0272 18H7.5V6H12.216C14.93 6 16.5 7.68164 16.5 10.0664C16.5 12.4629 14.9008 14.1094 12.1518 14.1094H10.0272V18Z" fill="#0D0C0F"/>
+<path d="M10.0272 8.07422V12.0762H11.7432C13.1907 12.0762 13.8969 11.2559 13.8969 10.0664C13.8969 8.87109 13.1907 8.07422 11.7315 8.07422H10.0272Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5ZM10.0272 18H7.5V6H12.216C14.93 6 16.5 7.68164 16.5 10.0664C16.5 12.4629 14.9008 14.1094 12.1518 14.1094H10.0272V18Z" />
 </svg>

package/lib/build/svg/system/snooze.svg

@@ -1 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.5 17H11V14.6402L17.8549 7.51046H11V5H21.5V7.46025L14.7539 14.4895H21.5V17Z" fill="#0D0C0F"/><path d="M9.5 20H2V18.2301L6.89637 12.8828H2V11H9.5V12.8452L4.68135 18.1172H9.5V20Z" fill="#0D0C0F"/></svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.5 17H11V14.6402L17.8549 7.51046H11V5H21.5V7.46025L14.7539 14.4895H21.5V17Z" />
+<path d="M9.5 20H2V18.2301L6.89637 12.8828H2V11H9.5V12.8452L4.68135 18.1172H9.5V20Z" />
+</svg>

package/lib/build/svg/system/takeover.svg

@@ -1,7 +1,7 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_2848_38)">
 <path d="M6.6 15.6L8 17L13 12L8 7L6.6 8.4L9.2 11L0.999999 11L0.999999 13L9.2 13L6.6 15.6Z" fill="black"/>
-<path d="M17.4011 15.7461C16.5769 13.2317 16.5772 10.5034 17.3852 7.97974L19.9779 7.97444C20.2961 7.97378 20.5845 7.79052 20.7195 7.5133C21.1596 6.6344 21.753 5.80234 22.4822 5.07017C22.8057 4.74541 22.8046 4.21508 22.4798 3.89166L20.4191 1.83937C20.0944 1.51594 19.564 1.51703 19.2406 1.84178C13.7188 7.38621 13.7372 16.3547 19.2816 21.8764C19.6064 22.1999 20.1367 22.1988 20.4601 21.874L22.5183 19.8074C22.8417 19.4827 22.8406 18.9523 22.5159 18.6289C21.7778 17.8938 21.1869 17.0701 20.7431 16.193C20.6011 15.9222 20.3238 15.7401 19.9938 15.7408L17.4011 15.7461Z" fill="#0D0C0F"/>
+<path d="M17.4011 15.7461C16.5769 13.2317 16.5772 10.5034 17.3852 7.97974L19.9779 7.97444C20.2961 7.97378 20.5845 7.79052 20.7195 7.5133C21.1596 6.6344 21.753 5.80234 22.4822 5.07017C22.8057 4.74541 22.8046 4.21508 22.4798 3.89166L20.4191 1.83937C20.0944 1.51594 19.564 1.51703 19.2406 1.84178C13.7188 7.38621 13.7372 16.3547 19.2816 21.8764C19.6064 22.1999 20.1367 22.1988 20.4601 21.874L22.5183 19.8074C22.8417 19.4827 22.8406 18.9523 22.5159 18.6289C21.7778 17.8938 21.1869 17.0701 20.7431 16.193C20.6011 15.9222 20.3238 15.7401 19.9938 15.7408L17.4011 15.7461Z" />
 </g>
 <defs>
 <clipPath id="clip0_2848_38">

package/lib/build/svg/system/thumb-down.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15 3H6C5.17 3 4.46 3.5 4.16 4.22L1.14 11.27C1.05 11.5 1 11.74 1 12V14C1 15.1 1.9 16 3 16H9.31L8.36 20.57L8.33 20.89C8.33 21.3 8.5 21.68 8.77 21.95L9.83 23L16.42 16.41C16.78 16.05 17 15.55 17 15V5C17 3.9 16.1 3 15 3ZM19 3V15H23V3H19Z" fill="#0D0C0F"/>
+<path d="M15 3H6C5.17 3 4.46 3.5 4.16 4.22L1.14 11.27C1.05 11.5 1 11.74 1 12V14C1 15.1 1.9 16 3 16H9.31L8.36 20.57L8.33 20.89C8.33 21.3 8.5 21.68 8.77 21.95L9.83 23L16.42 16.41C16.78 16.05 17 15.55 17 15V5C17 3.9 16.1 3 15 3ZM19 3V15H23V3H19Z" />
 </svg>

package/lib/build/svg/system/thumb-up.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 21H5V9H1V21ZM23 10C23 8.9 22.1 8 21 8H14.69L15.64 3.43L15.67 3.11C15.67 2.7 15.5 2.32 15.23 2.05L14.17 1L7.59 7.59C7.22 7.95 7 8.45 7 9V19C7 20.1 7.9 21 9 21H18C18.83 21 19.54 20.5 19.84 19.78L22.86 12.73C22.95 12.5 23 12.26 23 12V10Z" fill="#0D0C0F"/>
+<path d="M1 21H5V9H1V21ZM23 10C23 8.9 22.1 8 21 8H14.69L15.64 3.43L15.67 3.11C15.67 2.7 15.5 2.32 15.23 2.05L14.17 1L7.59 7.59C7.22 7.95 7 8.45 7 9V19C7 20.1 7.9 21 9 21H18C18.83 21 19.54 20.5 19.84 19.78L22.86 12.73C22.95 12.5 23 12.26 23 12V10Z" />
 </svg>

package/lib/build/svg/system/whisper.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 13C11.2091 13 13 11.2091 13 9C13 6.79086 11.2091 5 9 5C6.79086 5 5 6.79086 5 9C5 11.2091 6.79086 13 9 13Z" fill="#0D0C0F"/>
-<path d="M9 15C6.33 15 1 16.34 1 19V21H17V19C17 16.34 11.67 15 9 15ZM16.76 5.36L15.08 7.05C15.92 8.23 15.92 9.76 15.08 10.94L16.76 12.63C18.78 10.61 18.78 7.56 16.76 5.36ZM20.07 2L18.44 3.63C21.21 6.65 21.21 11.19 18.44 14.37L20.07 16C23.97 12.11 23.98 6.05 20.07 2Z" fill="#0D0C0F"/>
+<path d="M9 13C11.2091 13 13 11.2091 13 9C13 6.79086 11.2091 5 9 5C6.79086 5 5 6.79086 5 9C5 11.2091 6.79086 13 9 13Z" />
+<path d="M9 15C6.33 15 1 16.34 1 19V21H17V19C17 16.34 11.67 15 9 15ZM16.76 5.36L15.08 7.05C15.92 8.23 15.92 9.76 15.08 10.94L16.76 12.63C18.78 10.61 18.78 7.56 16.76 5.36ZM20.07 2L18.44 3.63C21.21 6.65 21.21 11.19 18.44 14.37L20.07 16C23.97 12.11 23.98 6.05 20.07 2Z" />
 </svg>

package/lib/build/svg/system/windows.svg

@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19.9029 12.819V20.3506L10.9358 18.9996V12.8035L19.9029 12.819Z" fill="#0D0C0F"/>
-<path d="M10.9358 5.33399L19.9029 4.08545V11.499H10.9358V5.33399Z" fill="#0D0C0F"/>
-<path d="M9.7445 12.7569V18.8909L3.10205 18.0057V12.7258L9.7445 12.7569Z" fill="#0D0C0F"/>
-<path d="M3.09717 6.32779L9.74444 5.44263V11.5766H3.10039L3.09717 6.32779Z" fill="#0D0C0F"/>
+<path d="M19.9029 12.819V20.3506L10.9358 18.9996V12.8035L19.9029 12.819Z" />
+<path d="M10.9358 5.33399L19.9029 4.08545V11.499H10.9358V5.33399Z" />
+<path d="M9.7445 12.7569V18.8909L3.10205 18.0057V12.7258L9.7445 12.7569Z" />
+<path d="M3.09717 6.32779L9.74444 5.44263V11.5766H3.10039L3.09717 6.32779Z" />
 </svg>