@dialpad/dialtone-css 8.48.0 → 8.49.1

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

@@ -23,4 +23,4 @@
     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/item-layout.less

@@ -20,46 +20,46 @@
   font-size: var(--dt-font-size-200);
   line-height: var(--dt-font-line-height-300);
 
-  > .d-item-layout--content {
+  > .d-item-layout__content {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     justify-content: center;
     min-width: var(--dt-size-0);
 
-    > .d-item-layout--subtitle {
+    > .d-item-layout__subtitle {
       color: var(--dt-color-foreground-tertiary);
       font-size: var(--dt-font-size-100);
     }
 
-    > .d-item-layout--subtitle--with-title {
+    > .d-item-layout__subtitle-with-title {
       margin-top: var(--dt-space-200-negative);
     }
 
-    > .d-item-layout--bottom {
+    > .d-item-layout__bottom {
       margin-top: var(--dt-space-200);
     }
   }
 
-  > .d-item-layout--right,
-  > .d-item-layout--left {
+  > .d-item-layout__right,
+  > .d-item-layout__left {
     display: flex;
     align-items: center;
     min-width: var(--dt-size-600);
     min-height: inherit;
   }
 
-  > .d-item-layout--right {
+  > .d-item-layout__right {
     flex-shrink: 0;
     padding-left: var(--dt-space-400);
   }
 
-  > .d-item-layout--left {
+  > .d-item-layout__left {
     justify-content: flex-end;
     padding-right: var(--dt-space-400);
   }
 
-  > .d-item-layout--selected {
+  > .d-item-layout__selected {
     display: flex;
     align-items: center;
   }
@@ -67,44 +67,9 @@
 
 .d-item-layout--custom {
   display: grid;
-  grid-template-areas: 'left content right selected';
-  grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content) minmax(0, max-content);
 
-  > .d-item-layout--left {
-    grid-area: left;
-  }
-
-  > .d-item-layout--right {
-    grid-area: right;
-  }
-
-  > .d-item-layout--content {
+  .d-item-layout__content {
     display: grid;
-    grid-area: content;
-    grid-template-areas:
-      'title'
-      'subtitle'
-      'bottom';
-    grid-template-rows: repeat(auto-fit, minmax(0, auto));
-
-    > .d-item-layout--title {
-      grid-area: title;
-    }
-
-    > .d-item-layout--subtitle {
-      grid-area: subtitle;
-    }
-
-    > .d-item-layout--subtitle--with-title {
-      //
-    }
-
-    > .d-item-layout--bottom {
-      grid-area: bottom;
-    }
-  }
-
-  > .d-item-layout--selected {
-    grid-area: selected;
+    grid-auto-rows: auto;
   }
 }

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

@@ -17,10 +17,6 @@
     background-color: var(--dt-action-color-background-muted-active);
   }
 
-  &--selected-icon {
-    margin-left: var(--dt-space-400);
-  }
-
   &[role="menuitem"] {
     border-radius: var(--dt-size-300);
   }
@@ -36,3 +32,31 @@
     box-shadow: var(--dt-shadow-focus);
   }
 }
+
+.d-list-item__wrapper {
+  gap: var(--dt-space-400);
+  min-height: calc(var(--dt-size-550) + var(--dt-size-300));
+  padding: var(--dt-space-300) var(--dt-space-400);
+  line-height: var(--dt-font-line-height-300);
+}
+
+.d-list-item__left,
+.d-list-item__right,
+.d-list-item__selected {
+  display: grid;
+  place-content: center;
+}
+
+.d-list-item__content {
+  align-content: center;
+}
+
+.d-list-item__subtitle {
+  margin-top: var(--dt-space-200-negative);
+  color: var(--dt-color-foreground-tertiary);
+  font-size: var(--dt-font-size-100);
+}
+
+.d-list-item__bottom {
+  margin-top: var(--dt-space-200);
+}

package/lib/build/less/components/rich-text-editor.less

@@ -1,9 +1,19 @@
 .d-rich-text-editor {
   &__code-block {
     padding: var(--dt-space-400);
+    font: var(--dt-typography-code-md);
     background: var(--dt-color-surface-secondary);
   }
 
+  code:not(.d-rich-text-editor__code-block > code) {
+    padding: var(--dt-space-200);
+    color: var(--dt-color-foreground-warning);
+    font: var(--dt-typography-code-md);
+    background-color: var(--dt-color-surface-secondary-opaque);
+    border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
+    border-radius: var(--dt-size-radius-200);
+  }
+
   > .ProseMirror {
     box-shadow: none;
 
@@ -30,11 +40,15 @@
     blockquote {
       margin-left: 0;
       padding-left: var(--dt-space-400);
-      border-left: var(--dt-size-border-300) solid var(--dt-color-foreground-muted-inverted);
+      border-left: var(--dt-size-border-300) solid var(--dt-color-border-subtle);
     }
   }
 }
 
+.d-rich-text-editor-bubble-menu__button-stack {
+  padding: var(--dt-space-300);
+}
+
 .d-suggestion-list__container {
   max-height: var(--dt-size-875);
 }

package/lib/build/less/dialtone.less

@@ -78,6 +78,7 @@
 @import 'recipes/callbar_button_with_popover';
 @import 'recipes/callbox';
 @import 'recipes/combobox_multi_select';
+@import 'recipes/combobox_with_popover';
 @import 'recipes/contact_info';
 @import 'recipes/editor';
 @import 'recipes/emoji_row';

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

@@ -45,6 +45,11 @@
   display: block;
 }
 
+.d-recipe-combobox-multi-select__list .d-list-item__content {
+  min-height: calc(var(--dt-size-550) + var(--dt-size-300));
+}
+
+
 .d-recipe-combobox-multi-select__list--loading {
   padding-top: var(--dt-space-500);
   padding-bottom: var(--dt-space-500);

package/lib/build/less/recipes/combobox_with_popover.less

@@ -0,0 +1,3 @@
+.d-recipe-combobox-with-popover__list .d-list-item__content {
+  min-height: calc(var(--dt-size-550) + var(--dt-size-300));
+}

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

@@ -1,47 +1,44 @@
 .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;
-  }
+  padding: var(--dt-space-300) var(--dt-space-400);
+  column-gap: var(--dt-space-400);
 }
 
 .d-recipe-contact-info__left {
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-width: var(--dt-space-650);
+  height: var(--dt-size-100-percent);
   background-color: transparent;
   background-image: none;
   border-width: 0;
   cursor: pointer;
 }
 
+.d-recipe-contact-info__content {
+  align-content: center;
+  line-height: var(--dt-font-line-height-300);
+}
+
+.d-recipe-contact-info__subtitle {
+  margin-top: var(--dt-space-200-negative);
+  color: var(--dt-color-foreground-tertiary);
+  font-size: var(--dt-font-size-100);
+}
+
+.d-recipe-contact-info__bottom {
+  margin-top: var(--dt-space-200);
+}
+
+.d-recipe-contact-info__right {
+  display: grid;
+  align-content: center;
+  min-width: 0;
+}
+
 .d-recipe-contact-info__avatars {
   display: flex;
   flex-direction: row;

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

@@ -25,15 +25,14 @@
   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);
-  }
+  line-height: var(--dt-font-line-height-300)
 }
 
 .d-recipe-feed-item-pill__icon {
-  display: flex;
+  display: grid;
+  place-content: center;
+  min-width: var(--dt-size-600);
+  height: var(--dt-size-100-percent);
 
   & svg {
     animation: d-recipe-feed-item-pill-fade 0.15s ease-in;
@@ -46,9 +45,29 @@
 }
 
 .d-recipe-feed-item-pill__title {
+  display: grid;
+  align-content: center;
+  height: var(--dt-size-100-percent);
   font-weight: var(--dt-font-weight-bold);
 }
 
+.d-recipe-feed-item-pill__subtitle {
+  margin-top: var(--dt-space-200-negative);
+  color: var(--dt-color-foreground-tertiary);
+  font-size: var(--dt-font-size-100);
+}
+
+.d-recipe-feed-item-pill__bottom {
+  margin-top: var(--dt-space-200);
+}
+
+.d-recipe-feed-item-pill__right {
+  display: grid;
+  place-content: center;
+  min-width: var(--dt-size-600);
+  height: var(--dt-size-100-percent);
+}
+
 // Gradient radius solution taken from https://stackoverflow.com/a/53037637
 .d-recipe-feed-item-pill__border {
   overflow: hidden;

package/lib/build/less/recipes/feed_item_row.less

@@ -8,30 +8,20 @@
     box-shadow: var(--dt-shadow-focus-inset);
   }
 
-  & > .d-item-layout {
-    min-height: initial;
-    padding: 0;
-    font: var(--dt-typography-body-md-compact);
-  }
-
-  & > .d-item-layout > .d-item-layout--left {
+  .d-list-item__left {
     display: block;
-    align-self: flex-start;
-    // min-width = avatar width + padding
-    min-width: calc(var(--dt-space-600) + var(--dt-space-300));
-    padding-right: var(--dt-space-300);
-    padding-left: var(--dt-space-0);
+    align-content: flex-start;
+    min-width: var(--dt-size-600);
     text-align: end;
   }
 
-  & > .d-item-layout > .d-item-layout--right {
-    min-width: initial;
+  .d-list-item__wrapper {
+    min-height: auto;
     padding: 0;
+    font: var(--dt-typography-body-md-compact);
   }
 
-  & > .d-item-layout > .d-item-layout--content > .d-item-layout--bottom {
-    display: flex;
-    flex-direction: column;
+  .d-list-item__bottom {
     margin-top: 0;
   }
 }
@@ -57,10 +47,6 @@
   padding-bottom: var(--dt-space-300);
 }
 
-.d-recipe-feed-item-row__content {
-  padding-left: var(--dt-space-300);
-}
-
 .d-recipe-feed-item-row__attachment {
   padding-top: var(--dt-space-200);
   padding-bottom: var(--dt-space-300);
@@ -105,7 +91,6 @@
   flex-wrap: wrap;
   padding-top: var(--dt-space-200);
   padding-bottom: var(--dt-space-200);
-  padding-left: var(--dt-space-300);
 }
 
 .d-recipe-feed-item-row__threading {

package/lib/build/less/recipes/message_input.less

@@ -1,6 +1,7 @@
 .d-recipe-message-input {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
   line-height: var(--dt-font-line-height-400);
   border: var(--dt-size-border-100) solid;
   border-color: var(--dt-color-border-default);
@@ -16,10 +17,23 @@
   }
 }
 
+.d-recipe-message-input__button-stack {
+  padding: var(--dt-space-400);
+  background-color: var(--dt-color-surface-secondary);
+}
+
+.d-recipe-message-input__button-stack-icon {
+  font-weight: var(--dt-font-weight-bold);
+}
+
 .d-recipe-message-input__editor-wrapper {
   padding: var(--dt-space-450) var(--dt-space-500) var(--dt-space-300);
 }
 
+.d-recipe-message-input__link-popover {
+  width: 36.0rem;
+}
+
 .d-recipe-message-input__remaining-char {
   margin-right: var(--dt-space-300);
   color: var(--dt-color-foreground-critical);
@@ -95,3 +109,28 @@
   display: flex;
   align-items: center;
 }
+
+.d-recipe-message-input--button-group-divider {
+  width: var(--dt-size-100);
+  height: calc(var(--dt-size-550) + var(--dt-size-300));
+  margin-right: var(--dt-space-300);
+  margin-left: var(--dt-space-300);
+  background: var(--dt-color-border-subtle);
+}
+
+.d-recipe-message-input__link-dialog-title {
+  font: var(--dt-typography-headline-md-compact);
+}
+
+.d-recipe-message-input__link-dialog-buttons {
+  justify-content: space-between;
+}
+
+.d-recipe-message-input__link-input {
+  margin-top: var(--dt-space-350);
+  padding-top: var(--dt-space-200);
+  padding-bottom: var(--dt-space-200);
+  background-color: var(--dt-color-surface-secondary);
+  border: var(--dt-space-100) solid;
+  border-color: var(--dt-color-border-default);
+}