@dialpad/dialtone 8.22.0 → 9.0.0

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

@@ -1,222 +0,0 @@
-//
-//  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-color-text: var(--dt-color-foreground-primary);
-  --chip-color-background: var(--dt-color-surface-moderate-opaque);
-  --chip-border-radius: var(--dt-size-radius-pill);
-
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-
-.d-chip__label {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  padding: var(--dt-space-300) var(--dt-space-400);
-  color: var(--chip-color-text);
-  font-size: var(--dt-font-size-200);
-  font-family: inherit;
-  line-height: var(--lh4);
-  background-color: var(--chip-color-background);
-  border: none;
-  border-radius: var(--chip-border-radius);
-  transition-timing-function: var(--ttf-in-out);
-  transition-duration: var(--td200);
-  transition-property: background-color;
-
-  // Reserves space within the chip for the close button, since the close button is
-  // not nested within the chip. Only apply if close button exists (more than one child).
-  &:not(:only-child)::after {
-    flex-shrink: 0;
-    width: calc(var(--dt-size-500) + var(--dt-size-200));
-    height: calc(var(--dt-size-500) + var(--dt-size-200));
-    content: '';
-  }
-
-  // These properties are only set if d-chip is interactive (ex: a button).
-  &:is(a),
-  &:is(button),
-  &:is([role='button']),
-  &:is([role='link']) {
-    text-decoration: none;
-    cursor: pointer;
-
-    &:hover {
-      --chip-color-background: var(--dt-color-black-300);
-
-      text-decoration: none;
-    }
-
-    &:active {
-      --chip-color-background: var(--dt-color-black-400);
-    }
-
-    &:focus-visible {
-      outline: none;
-      box-shadow: var(--dt-shadow-focus);
-    }
-  }
-
-  .d-avatar {
-    --avatar-size-shape: var(--dt-size-550);
-
-    margin: var(--dt-space-200-negative) var(--dt-space-300) var(--dt-space-200-negative) var(--dt-space-350-negative);
-  }
-
-  .d-svg {
-    width: var(--dt-icon-size-300);
-    height: var(--dt-icon-size-300);
-  }
-}
-
-.d-chip__close {
-  .d-btn();
-  .d-btn--circle();
-
-  position: absolute;
-  right: var(--dt-space-200);
-  padding: calc(var(--dt-space-200) + var(--dt-space-100));
-  border-width: 0;
-
-  &::before {
-    position: absolute;
-    width: 2.6rem; // magic number
-    height: 2.8rem; // magic number
-    content: '';
-  }
-
-  &:hover:not([disabled]) {
-    --button-color-background: hsla(var(--dt-color-black-800-hsl) ~' / ' 15%);
-  }
-
-  &:active:not([disabled]),
-  &.d-btn--active:not([disabled]),
-  &.d-btn--active:active:not([disabled]) {
-    --button-color-background: hsla(var(--dt-color-black-800-hsl) ~' / ' 25%);
-  }
-
-  .d-btn__icon .d-svg {
-    width: var(--dt-icon-size-300);
-    height: var(--dt-icon-size-300);
-  }
-}
-
-.d-chip__icon {
-  padding-right: var(--dt-space-300);
-  line-height: 0;
-}
-
-.d-chip__label--active {
-  background-color: var(--dt-color-black-400);
-}
-
-.d-chip__text {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-//  ============================================================================
-//  $   SIZES
-//  ----------------------------------------------------------------------------
-//  $$  EXTRA SMALL
-//  ----------------------------------------------------------------------------
-.d-chip__label--xs {
-  padding: var(--dt-space-200) var(--dt-space-350);
-  font-size: var(--dt-font-size-100);
-
-  .d-svg {
-    width: var(--dt-icon-size-200);
-    height: var(--dt-icon-size-200);
-  }
-
-  // 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;
-    width: var(--dt-size-450);
-    height: var(--dt-size-450);
-    content: '';
-  }
-
-  .d-avatar {
-    --avatar-size-shape: var(--dt-size-500);
-
-    margin-right: var(--dt-space-300);
-    margin-left: var(--dt-space-300-negative);
-  }
-}
-
-.d-chip__close--xs {
-  padding: var(--dt-space-100);
-
-  // Clickable area for the close button.
-  &::before {
-    width: var(--dt-size-550);
-    height: var(--dt-size-550);
-  }
-
-  .d-btn__icon .d-svg {
-    width: var(--dt-icon-size-200);
-    height: var(--dt-icon-size-200);
-  }
-}
-
-//  $$ SMALL
-//  ----------------------------------------------------------------------------
-.d-chip__label--sm {
-  padding: var(--dt-space-200) var(--dt-space-400);
-  font-size: var(--dt-font-size-200);
-
-  .d-svg {
-    width: var(--dt-size-500);
-    height: var(--dt-size-500);
-  }
-
-  // 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;
-    width: calc(var(--dt-size-500) - var(--dt-size-200)); // 14
-    height: calc(var(--dt-size-500) - var(--dt-size-200)); // 14
-    content: '';
-  }
-
-  .d-avatar {
-    --avatar-size-shape: calc(var(--dt-size-500) + var(--dt-size-300)); // 20
-
-    margin-right: var(--dt-space-300);
-  }
-}
-
-.d-chip__close--sm {
-  padding: var(--dt-space-200);
-
-  &::before {
-    width: var(--dt-size-550);
-    height: var(--dt-size-550);
-  }
-
-  .d-btn__icon .d-svg {
-    width: var(--dt-size-500);
-    height: var(--dt-size-500);
-  }
-}

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

@@ -1,26 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: Codeblock
-//
-//  These are the styles for codeblock component.
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-
-.d-codeblock {
-    display: block;
-    padding: var(--dt-space-400);
-    color: var(--dt-color-foreground-secondary);
-    font-size: var(--dt-font-size-200);
-    font-family: var(--dt-font-family-mono);
-    line-height: var(--dt-font-line-height-400);
-    white-space: pre-wrap;
-    background-color: var(--dt-color-surface-secondary);
-    border: var(--dt-size-100) solid;
-    border-color: var(--dt-color-border-subtle);
-    border-radius: var(--dt-size-radius-400);
-}

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

@@ -1,33 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: COLLAPSIBLE
-//
-//  These are collapsible classes for Dialpad's design system Dialtone.
-//  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/collapsible
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-.d-collapsible__icon {
-  --icon-base-scale: var(--dt-size-400);
-  --icon-size-300: calc(var(--icon-base-scale) * 2.25);
-  --icon-size: var(--icon-size-300);
-
-  flex: none;
-  flex-shrink: 0;
-  width: var(--icon-size);
-  height: var(--icon-size);
-  margin-right: var(--dt-space-400);
-  fill: currentColor;
-}
-
-.d-collapsible__anchor-text {
-  margin-right: auto;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}

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

@@ -1,28 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: COMBOBOX
-//
-//  These are combobox classes for Dialpad's design system Dialtone.
-//  For further documentation of these and other classes,
-//  visit https://dialpad.design/components/combobox
-//
-//  TABLE OF CONTENTS
-//  • EMPTY LIST
-//  • LOADING LIST LIST
-//
-//  ============================================================================
-//  $   EMPTY LIST
-//  ----------------------------------------------------------------------------
-.d-combobox__empty-list {
-  padding: var(--dt-space-0);
-}
-
-//  ============================================================================
-//  $   LOADING LIST
-//  ----------------------------------------------------------------------------
-.d-combobox__loading-list {
-  max-height: var(--dt-size-925);
-  margin-top: var(--dt-space-400);
-  padding: var(--dt-space-0);
-  overflow-y: auto;
-}

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

@@ -1,146 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: DATEPICKER
-//
-//  These are the styles for datepicker component.
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-.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-day-size: calc(var(--dt-size-600) - var(--dt-size-200)); // Emulates SM button since Vue component in lieu of Vue component using DT button
-
-  display: flex;
-  flex-direction: column;
-  gap: var(--dt-space-400);
-  width: var(--datepicker-width);
-  padding: var(--dt-space-500);
-
-  p {
-    display: flex;
-    color: var(--dt-color-foreground-secondary);
-    font-size: var(--dt-font-size-100);
-    text-transform: uppercase;
-  }
-
-  &--body {
-    padding: 0;
-  }
-
-  // TODO: update VUE component to be use a raw <table>
-  &__month-year-picker {
-    display: flex;
-    gap: var(--dt-space-500);
-    align-items: center;
-    justify-content: space-between;
-
-    > div {
-      display: flex;
-      gap: var(--dt-space-200);
-    }
-
-    button {
-      // TODO: all of this should be replaced with the Vue DT button
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--datepicker-day-size);
-      height: var(--datepicker-day-size);
-      padding: 0;
-      color: var(--dt-action-color-foreground-base-default);
-      background-color: var(--dt-action-color-background-base-default);
-      border: none;
-      border-radius: var(--dt-size-radius-circle);
-      cursor: pointer;
-
-      &:hover {
-        color: var(--dt-action-color-foreground-base-hover);
-        background-color: var(--dt-action-color-background-base-hover);
-      }
-
-      &:active {
-        color: var(--dt-action-color-foreground-base-active);
-        background-color: var(--dt-action-color-background-base-active);
-      }
-    }
-  }
-
-  &__calendar {
-    display: flex;
-    flex-direction: column;
-    gap: var(--dt-space-200);
-  }
-
-  &__week-day {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    > div {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--datepicker-day-size);
-      height: var(--datepicker-day-size);
-
-      p {
-        margin: 0;
-        color: var(--dt-color-foreground-tertiary);
-        font-weight: var(--dt-font-weight-medium);
-      }
-    }
-  }
-
-  &__week {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  &__day {
-    // TODO: all of this should be replaced with the Vue DT button
-    width: var(--datepicker-day-size);
-    height: var(--datepicker-day-size);
-    padding: 0;
-    color: var(--dt-action-color-foreground-muted-default);
-    font-size: var(--dt-font-size-100);
-    font-variant-numeric: tabular-nums;
-    line-height: 1;
-    background-color: transparent;
-    border: none;
-    border-radius: var(--dt-size-radius-circle);
-    cursor: pointer;
-
-    &--disabled {
-      color: var(--dt-color-foreground-muted);
-      cursor: default;
-    }
-
-    &--selected {
-     color: var(--dt-color-neutral-white);
-     background: var(--dt-color-brand-purple);
-    }
-
-    &:hover:not(.d-datepicker__day--selected, .d-datepicker__day--disabled) {
-      color: var(--dt-action-color-foreground-muted-hover);
-      background-color: var(--dt-action-color-background-muted-hover);
-    }
-
-    &:active:not(.d-datepicker__day--selected, .d-datepicker__day--disabled) {
-      color: var(--dt-action-color-foreground-muted-active);
-      background-color: var(--dt-action-color-background-muted-active);
-    }
-
-    &:focus-visible {
-      box-shadow: var(--dt-shadow-focus);
-    }
-
-    &:focus-visible:not(.d-datepicker__day--selected) {
-      background-color: var(--dt-color-surface-moderate);
-    }
-  }
-}

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

@@ -1,222 +0,0 @@
-//
-//  DIALTONE
-//  COMPONENTS: EMOJI-PICKER
-//
-//  These are the styles for emoji-picker component.
-//
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-
-//  @@  BASE STYLE
-//  ----------------------------------------------------------------------------
-.d-emoji-picker {
-  flex-direction: column;
-  // fixed width to achieve accessibility in keyboard (372px)
-  // with this width we have 9 emoji per row
-  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);
-
-  &--header {
-    position: relative;
-    padding: var(--dt-space-300) var(--dt-space-300) 0 var(--dt-space-400);
-
-    &::after {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      height: var(--dt-size-100);
-      background-color: var(--dt-color-surface-moderate) !important;
-      content: '';
-    }
-  }
-
-  &__alignment {
-    width: auto;
-    max-width: calc(var(--dt-size-925) + var(--dt-size-400));
-    margin: 0 var(--dt-space-500);
-  }
-
-  &--footer {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    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);
-  }
-
-  &__tabset-list {
-      gap: var(--dt-space-300);
-
-      &::after {
-        background-color: var(--dt-color-surface-moderate) !important;
-      }
-
-      button {
-        padding: var(--dt-space-400);
-
-        &.d-tab--selected {
-          &::after {
-            height: var(--dt-size-200);
-          }
-        }
-    }
-  }
-
-  &__skin-list {
-    display: inline-flex;
-    flex-direction: row;
-    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));
-
-    button {
-      width: var(--dt-size-600);
-      height: var(--dt-size-600);
-      margin: 0;
-      padding: 0;
-      background: none;
-      border: none;
-      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));
-      }
-
-      &.selected {
-        border: var(--dt-size-100) solid rgba(0, 0, 0, 0.25);
-        border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
-      }
-    }
-  }
-
-  &__skin-selected {
-    button {
-      display: inline-block;
-      width: var(--dt-size-625);
-      height: var(--dt-size-625);
-      margin: 0;
-      padding: calc(var(--dt-space-350) + var(--dt-space-100));
-      background: rgba(0, 0, 0, 0.1);
-      border: none;
-      border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
-      outline: none;
-      cursor: pointer;
-
-      &:hover {
-        background: var(--dt-color-surface-bold);
-      }
-    }
-  }
-
-  &__selector {
-    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;
-    }
-  }
-
-  &__category {
-    position: sticky;
-    top: 0;
-    width: 100%;
-    padding-top: var(--dt-space-525);
-    background: var(--dt-color-surface-primary);
-  }
-
-  &__list {
-    position: relative;
-    height: 100%;
-    max-height: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
-    padding-bottom: calc(var(--dt-space-300) + var(--dt-space-100));
-    overflow: hidden auto;
-
-    div:not(:first-child) {
-      p {
-        margin-top: calc(var(--dt-space-525) + var(--dt-space-200));
-      }
-    }
-  }
-
-  &__search-label {
-    margin-top: calc(var(--dt-space-525));
-  }
-
-  &__tab {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--dt-space-200);
-    width: calc(100% + calc(var(--dt-size-500) - var(--dt-size-100)));
-    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);
-
-    button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: calc(var(--dt-size-600) + var(--dt-size-300));
-      height: calc(var(--dt-size-600) + var(--dt-size-300));
-      margin: 0;
-      padding: 0;
-      background: none;
-      border: none;
-      border-radius: 50%;
-      outline: none;
-      cursor: pointer;
-
-      &:hover,
-      &:active {
-        background: rgba(0, 0, 0, 0.1);
-      }
-
-      &.hover-emoji {
-        background: rgba(0, 0, 0, 0.1);
-      }
-
-      &:focus {
-        box-shadow: var(--dt-shadow-focus);
-      }
-    }
-  }
-
-  &__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);
-  }
-
-  &__search-button {
-    margin: 0;
-    padding: 0;
-    line-height: 0;
-    background: none;
-    border: none;
-    outline: none;
-    cursor: pointer;
-  }
-
-  &__data {
-    display: flex;
-    gap: var(--dt-space-100);
-    align-items: center;
-    width: 100%;
-    max-width: calc(var(--dt-size-905) + var(--dt-size-550) + var(--dt-size-200));
-  }
-}