@dialpad/dialtone-css 8.46.2 → 8.46.4

package/lib/build/less/components/avatar.less

@@ -122,8 +122,8 @@
     border-radius: var(--dt-size-radius-pill);
     box-shadow: 0 0 0 var(--dt-size-200) var(--avatar-count-color-shadow);
 
-    .dt-leftbar-row--selected &,
-    .dt-leftbar-row__primary:hover & {
+    .d-recipe-leftbar-row--selected &,
+    .d-recipe-leftbar-row__primary:hover & {
       --avatar-count-color-shadow: var(--dt-theme-sidebar-row-color-background-hover);
     }
   }

package/lib/build/less/components/presence.less

@@ -23,11 +23,11 @@
   border-width: var(--presence-border-size);
   border-radius: var(--dt-size-radius-circle);
 
-  .dt-leftbar-row--selected & {
+  .d-recipe-leftbar-row--selected & {
     --presence-color-border-base: var(--dt-theme-sidebar-selected-row-color-background);
   }
 
-  .dt-leftbar-row__primary:hover & {
+  .d-recipe-leftbar-row__primary:hover & {
     --presence-color-border-base: var(--dt-theme-sidebar-row-color-background-hover);
   }
 

package/lib/build/less/dialtone.less

@@ -72,6 +72,26 @@
 @import 'utilities/spacing';
 @import 'utilities/typography';
 
+//  --  RECIPES
+@import 'recipes/attachment_carousel';
+@import 'recipes/callbar_button';
+@import 'recipes/callbar_button_with_popover';
+@import 'recipes/callbox';
+@import 'recipes/combobox_multi_select';
+@import 'recipes/contact_info';
+@import 'recipes/editor';
+@import 'recipes/emoji_row';
+@import 'recipes/feed_item_pill';
+@import 'recipes/feed_item_row';
+@import 'recipes/grouped_chip';
+@import 'recipes/ivr_node';
+@import 'recipes/leftbar_row';
+@import 'recipes/message_input';
+@import 'recipes/settings_menu_button';
+@import 'recipes/time_pill';
+@import 'recipes/top_banner_info';
+@import 'recipes/unread_pill';
+
 //  --  THEMES & GLOBAL SETTINGS
 @import 'dialtone-globals';
 @import 'themes/default';

package/lib/build/less/recipes/attachment_carousel.less

@@ -0,0 +1,109 @@
+.d-recipe-attachment-carousel {
+  position: relative;
+  width: var(--dt-space-1000);
+  max-height: 100px; /* stylelint-disable-line meowtec/no-px */
+}
+
+.d-recipe-attachment-carousel__media-list {
+  display: flex;
+  flex-direction: row;
+  padding-left: 0;
+  overflow-x: scroll;
+}
+
+.d-recipe-attachment-carousel__media-list::-webkit-scrollbar {
+  display: none;
+}
+
+.d-recipe-attachment-carousel__arrow {
+  position: absolute;
+  top: var(--dt-space-30-percent);
+  background-color: var(--dt-color-neutral-white);
+  border: var(--dt-space-100) solid;
+  border-color: var(--bc-default);
+  border-width: var(--dt-size-100);
+  opacity: 0;
+}
+
+.d-recipe-attachment-carousel:hover .d-recipe-attachment-carousel__arrow {
+  opacity: 1;
+}
+
+.d-recipe-attachment-carousel__arrow--left {
+  left: var(--dt-space-300);
+}
+
+.d-recipe-attachment-carousel__arrow--right {
+  right: var(--dt-space-300);
+}
+
+.d-recipe-attachment-carousel__image {
+  position: relative;
+}
+
+.d-recipe-attachment-carousel__image-close-button {
+  position: absolute;
+  top: inherit;
+  right: inherit;
+  color: var(--dt-color-neutral-white);
+  background-color: var(--dt-color-black-400);
+  border: var(--dt-space-100) solid;
+  border-color: var(--dt-color-neutral-white);
+  border-width: var(--dt-size-200);
+  opacity: 0;
+}
+
+.d-recipe-attachment-carousel__image:focus-within .d-recipe-attachment-carousel__image-close-button, .d-recipe-attachment-carousel__image:hover .d-recipe-attachment-carousel__image-close-button {
+  opacity: 1;
+}
+
+.d-recipe-attachment-carousel__image-viewer {
+  width: var(--dt-size-700);
+  height: var(--dt-size-700);
+  object-fit: cover;
+  border: var(--dt-space-100) solid;
+  border-color: var(--dt-color-border-subtle);
+  border-width: var(--dt-size-350);
+  border-radius: var(--br4);
+}
+
+.d-recipe-attachment-carousel__image-top-right {
+  position: absolute;
+  top: var(--dt-size-100);
+  right: var(--dt-size-100);
+}
+
+.d-recipe-attachment-carousel__image-progress-bar {
+  position: absolute;
+  top: inherit;
+  right: inherit;
+  display: flex;
+  background-color: var(--dt-color-neutral-white);
+  border: var(--dt-space-100) solid;
+  border-color: var(--dt-color-border-subtle);
+  border-width: var(--dt-size-200);
+  border-radius: 50%;
+  transform: rotate(-90deg);
+}
+
+.d-recipe-attachment-carousel__progress-bar {
+  width: var(--dt-size-550);
+  height: var(--dt-size-550);
+}
+
+.d-recipe-attachment-carousel__progress-bar-circle {
+  fill: none;
+  stroke-width: 2;
+  stroke-dasharray: var(--stroke-dasharray);
+}
+
+.d-recipe-attachment-carousel__progress-bar-circle:nth-child(1) {
+  stroke: var(--dt-color-black-100);
+  stroke-dashoffset: 0;
+}
+
+.d-recipe-attachment-carousel__progress-bar-circle:nth-child(2) {
+  transition: stroke-dashoffset 500ms linear;
+  stroke: var(--dt-color-purple-500);
+  stroke-dashoffset: var(--stroke-dashoffset);
+}

package/lib/build/less/recipes/callbar_button.less

@@ -0,0 +1,47 @@
+//
+//  DIALTONE
+//  RECIPES: CALLBAR BUTTON
+//
+//  TABLE OF CONTENTS
+//  • BASE STYLE
+//  • STATUS
+//  • VARIANTS
+//
+//  ============================================================================
+//  $   BASE STYLE
+//  ----------------------------------------------------------------------------
+.d-recipe-callbar-button {
+  &:not(.d-recipe-callbar-button--circle) {
+    line-height: var(--dt-font-line-height-300);
+  }
+
+  &.d-btn[disabled] {
+    background-color: unset;
+    opacity: .5;
+  }
+}
+
+//  ============================================================================
+//  $   STATUS
+//  ----------------------------------------------------------------------------
+.d-recipe-callbar-button--active,
+.d-recipe-callbar-button--active:hover {
+  .base-button__icon {
+    color: var(--dt-theme-mention-color-background); // best replacement for --primary-color we have at the moment
+  }
+}
+
+.d-recipe-callbar-button--disabled {
+  cursor: not-allowed;
+}
+
+//  ============================================================================
+//  $   VARIANTS
+//  ----------------------------------------------------------------------------
+.d-recipe-callbar-button--circle {
+  border-radius: var(--dt-size-radius-circle);
+
+  &.d-btn[disabled] {
+    border-color: unset;
+  }
+}

package/lib/build/less/recipes/callbar_button_with_popover.less

@@ -0,0 +1,54 @@
+.d-recipe-callbar-button-with-popover {
+  display: flex;
+  align-items: flex-start;
+}
+
+.d-recipe-callbar-button-with-popover__arrow {
+  width: var(--dt-size-500);
+  height: var(--dt-size-500);
+  margin-top: var(--dt-space-450);
+  margin-left: calc(var(--dt-space-300-negative) * 5);
+  padding: var(--dt-space-400);
+  border-radius: var(--dt-size-300);
+
+  .d-btn--active {
+    background: var(--dt-color-surface-moderate-opaque);
+  }
+}
+
+.d-recipe-callbar-button-with-popover__arrow--large {
+  margin-left: var(--dt-space-550-negative);
+}
+
+.d-recipe-callbar-button-with-popover__arrow-icon {
+  color: var(--dt-color-black-800);
+}
+
+.d-recipe-callbar-button-with-popover__popover {
+  .d-popover__header {
+    color: var(--dt-color-foreground-primary-inverted);
+    background: var(--dt-color-surface-contrast);
+
+    .d-btn {
+      color: var(--dt-color-foreground-primary-inverted);
+    }
+  }
+}
+
+.d-recipe-callbar-button-with-popover__button {
+  &.d-tab--selected::after,
+  &.d-tab--selected:hover::after {
+    --tab--bgc: var(--dt-color-surface-contrast);
+  }
+
+  &.tab-group {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  &.tab-content {
+    flex: 1 1 100%;
+    overflow-y: auto;
+  }
+}

package/lib/build/less/recipes/callbox.less

@@ -0,0 +1,111 @@
+.d-recipe-callbox {
+  padding: 0;
+  color: var(--dt-color-foreground-primary);
+  background-color: var(--dt-color-surface-primary);
+  border-radius: var(--dt-size-radius-300);
+}
+
+.d-recipe-callbox__video {
+  display: flex;
+  margin-bottom: var(--dt-space-300-negative);
+  overflow: clip;
+  border-radius: var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;
+}
+
+.d-recipe-callbox__main-content {
+  align-items: stretch;
+  padding: 0;
+  border: var(--dt-size-border-100) solid transparent;
+  border-radius: var(--dt-size-radius-300);
+
+  &.d-recipe-callbox__border-default {
+    border-color: var(--dt-color-border-default);
+  }
+
+  &.d-recipe-callbox__border-ai {
+    background: linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,
+    linear-gradient(135deg, var(--dt-color-border-accent), var(--dt-color-border-brand)) border-box;
+  }
+
+  &.d-recipe-callbox__border-critical {
+    background: radial-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,
+    radial-gradient(circle, #E7301D, #F78B23) border-box;
+  }
+}
+
+.d-recipe-callbox__main-content-top {
+  display: flex;
+  align-items: center;
+  padding: var(--dt-space-350) var(--dt-space-400);
+}
+
+.d-recipe-callbox__main-content-bottom {
+  border-top: 1px solid var(--dt-color-border-subtle);
+}
+
+.d-recipe-callbox__avatar {
+  margin-right: var(--dt-space-400);
+}
+
+.d-recipe-callbox__content {
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.d-recipe-callbox__content-title {
+  width: 0;
+  min-width: 100%;
+  padding: 0;
+  overflow: clip;
+  color: var(--dt-color-foreground-primary);
+  font-weight: var(--dt-font-weight-bold);
+  line-height: normal;
+  white-space: nowrap;
+  text-align: left;
+  text-overflow: ellipsis;
+  background-color: var(--dt-color-surface-primary);
+  border: none;
+  user-select: text;
+}
+
+.d-recipe-callbox__content-badge {
+  line-height: normal;
+}
+
+.d-recipe-callbox__content-subtitle {
+  width: 0;
+  min-width: 100%;
+  padding: 0;
+  overflow: hidden;
+  color: var(--dt-color-foreground-tertiary);
+  font-size: var(--dt-font-size-100);
+  line-height: normal;
+}
+
+.d-recipe-callbox__right {
+  display: flex;
+  justify-content: right;
+}
+
+.d-recipe-callbox--clickable {
+  .d-recipe-callbox__content-title {
+    border-radius: var(--dt-size-100);
+    cursor: pointer;
+    user-select: none;
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: var(--dt-shadow-focus);
+    }
+
+    &:hover, &:active {
+      text-decoration: underline;
+    }
+  }
+}
+
+.d-recipe-callbox__badge--warning {
+  background-color: var(--dt-color-surface-warning);
+}

package/lib/build/less/recipes/combobox_multi_select.less

@@ -0,0 +1,48 @@
+.d-recipe-combobox-multi-select__chip {
+  z-index: var(--zi-base1);
+  max-width: var(--dt-size-100-percent);
+  margin-top: var(--dt-space-300);
+  margin-right: var(--dt-space-200);
+  margin-left: var(--dt-space-200);
+}
+
+.d-recipe-combobox-multi-select__chip-wrapper {
+  position: absolute;
+  max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));
+  max-height: initial;
+  margin-right: var(--dt-space-200);
+  margin-left: var(--dt-space-200);
+  padding-left: var(--dt-space-100);
+  overflow-y: visible;
+}
+
+.d-recipe-combobox-multi-select__chip-wrapper-md--collapsed {
+  max-height: 2.8rem;
+  overflow-y: hidden;
+}
+
+.d-recipe-combobox-multi-select__chip-wrapper-sm--collapsed,
+.d-recipe-combobox-multi-select__chip-wrapper-xs--collapsed {
+  max-height: 2.5rem;
+  overflow-y: hidden;
+}
+
+.d-recipe-combobox-multi-select__chip--truncate {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.d-recipe-combobox-multi-select__input {
+  flex-grow: 1;
+}
+
+.d-recipe-combobox-multi-select__input-wrapper {
+  position: relative;
+  display: block;
+}
+
+.d-recipe-combobox-multi-select__list--loading {
+  padding-top: var(--dt-space-500);
+  padding-bottom: var(--dt-space-500);
+  text-align: center;
+}

package/lib/build/less/recipes/contact_info.less

@@ -0,0 +1,55 @@
+.d-recipe-contact-info {
+  --contact-info-avatar-border-color: var(--dt-color-surface-primary);
+
+  display: flex;
+
+  .d-item-layout {
+    flex: 1 1 0;
+  }
+
+  .d-item-layout--content {
+    /*
+    DP-74536: Add `min-width` to make the width of "contact info" adjustable.
+    */
+    min-width: var(--dt-space-825);
+  }
+
+  .d-item-layout--left {
+    align-items: center;
+    justify-content: flex-start;
+
+    /*
+    DP-74536: To make 'Avatar' in fixed position when resizing the window.
+    */
+    min-width: var(--dt-space-650);
+  }
+
+  .d-item-layout--right {
+    align-items: center;
+
+    /*
+    DP-74536: Remove `min-width` which cause extra unused empty space on the right of "contact info".
+    */
+    min-width: 0;
+  }
+}
+
+.d-recipe-contact-info__left {
+  position: relative;
+  background-color: transparent;
+  background-image: none;
+  border-width: 0;
+  cursor: pointer;
+}
+
+.d-recipe-contact-info__avatars {
+  display: flex;
+  flex-direction: row;
+  margin-right: var(--dt-space-300-negative);
+
+  .d-avatar {
+    box-sizing: unset;
+    border: var(--dt-size-300) solid var(--contact-info-avatar-border-color);
+    border-radius: var(--dt-size-radius-pill);
+  }
+}

package/lib/build/less/recipes/editor.less

@@ -0,0 +1,10 @@
+.d-recipe-editor__top-bar-background {
+  background-color: var(--dt-color-surface-secondary);
+}
+
+.d-recipe-editor__button-group-divider {
+  width: var(--dt-size-100);
+  height: calc(var(--dt-size-550) + var(--dt-size-300));
+  margin-left: var(--dt-space-400);
+  background: var(--dt-color-border-subtle);
+}

package/lib/build/less/recipes/emoji_row.less

@@ -0,0 +1,73 @@
+.d-recipe-emoji-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dt-space-300);
+}
+
+.d-recipe-emoji-row__tooltip {
+  display: inline-block;
+}
+
+.d-recipe-emoji-row__reaction {
+  --emoji-item-color-inset-shadow: transparent;
+  --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-default);
+  --emoji-item-color-background: var(--dt-action-color-background-muted-hover);
+
+  height: var(--dt-size-550);
+  padding: var(--dt-space-300) var(--dt-space-400);
+  color: var(--emoji-item-color-foreground);
+  background-color: var(--emoji-item-color-background);
+  border: 0;
+  border-radius: var(--dt-size-radius-pill);
+  box-shadow: inset 0 0 0 var(--dt-size-border-100) var(--emoji-item-color-inset-shadow);
+
+  &.d-recipe-emoji-row__picker {
+    padding: var(--dt-space-200) var(--dt-space-350);
+  }
+
+  &:hover {
+    --emoji-item-color-inset-shadow: var(--dt-color-border-subtle);
+    --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-hover);
+  }
+
+  &:active {
+    --emoji-item-color-background: var(--dt-action-color-background-muted-active);
+    --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-active);
+
+    transform: scale(.98);
+  }
+
+  &--selected {
+    --emoji-item-color-inset-shadow: var(--dt-color-border-brand);
+    --emoji-item-color-foreground: var(--dt-color-link-primary);
+    --emoji-item-color-background: var(--dt-action-color-background-base-hover);
+
+    .d-recipe-emoji-row__reaction-number {
+      font-weight: var(--dt-font-weight-bold);
+    }
+
+    &:hover {
+      --emoji-item-color-inset-shadow: var(--dt-color-border-brand-strong);
+      --emoji-item-color-foreground: var(--dt-color-link-primary-hover);
+    }
+
+    &:active {
+      --emoji-item-color-background: var(--dt-action-color-background-base-active);
+    }
+  }
+}
+
+.d-recipe-emoji-row__reaction-number {
+  // set font properties individually to change line height,
+  // as font shorthand property will override line-height.
+  font-weight: var(--dt-typography-body-sm-font-weight);
+  font-size: var(--dt-typography-body-sm-font-size);
+  font-family: var(--dt-typography-body-sm-font-family);
+  font-variant: tabular-nums;
+  line-height: var(--dt-font-line-height-100);
+}
+
+.d-recipe-emoji-row__emoji {
+  display: inline-flex;
+  margin-right: var(--dt-space-300);
+}

package/lib/build/less/recipes/feed_item_pill.less

@@ -0,0 +1,78 @@
+.d-recipe-feed-item-pill__wrapper {
+  padding: var(--dt-space-400);
+  background-color: var(--dt-color-surface-secondary);
+}
+
+.d-recipe-feed-item-pill__button {
+  width: var(--dt-size-100-percent);
+  text-align: left;
+  background-color: var(--dt-color-surface-moderate);
+  border-width: 0;
+  border-radius: var(--dt-size-radius-600);
+  cursor: pointer;
+
+  --button-padding-x: var(--button-padding-y-md);
+  --button-padding-y: var(--button-padding-y-md);
+  --button-color-text: var(--dt-action-color-foreground-muted-default);
+  --button-border-radius: var(--dt-size-radius-600);
+}
+
+.d-recipe-feed-item-pill__layout {
+  gap: var(--dt-space-300);
+  width: var(--dt-size-100-percent);
+  padding: var(--dt-space-400);
+
+  & > .d-item-layout--left {
+    justify-content: center;
+    padding-right: var(--dt-space-0);
+  }
+}
+
+.d-recipe-feed-item-pill__icon {
+  display: flex;
+
+  & svg {
+    animation: d-recipe-feed-item-pill-fade 0.15s ease-in;
+  }
+}
+
+.d-recipe-feed-item-pill__content {
+  display: flex;
+  justify-content: center;
+}
+
+.d-recipe-feed-item-pill__title {
+  font-weight: var(--dt-font-weight-bold);
+}
+
+// Gradient radius solution taken from https://stackoverflow.com/a/53037637
+.d-recipe-feed-item-pill__border {
+  overflow: hidden;
+  background-clip: content-box, border-box;
+  background-origin: border-box;
+  border: double var(--dt-size-100) transparent;
+  border-radius: var(--dt-size-radius-600);
+}
+
+.d-recipe-feed-item-pill__border--default {
+  background: var(--dt-color-border-default)
+}
+
+.d-recipe-feed-item-pill__border--ai {
+  background-image: linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)),
+  var(--dt-badge-color-background-ai);
+}
+
+.d-recipe-feed-item-pill__border--critical {
+  background: var(--dt-color-foreground-critical);
+}
+
+@keyframes d-recipe-feed-item-pill-fade {
+  0% {
+    transform: scale(0);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}