@dialpad/dialtone-css 8.64.1 → 8.65.0-next.1

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

@@ -1,7 +1,7 @@
 .d-recipe-feed-item-row {
   position: relative;
   box-sizing: border-box;
-  width: var(--dt-size-100-percent);
+  inline-size: var(--dt-size-100-percent);
   padding: var(--dt-space-300) var(--dt-space-500);
 
   &:focus-visible {
@@ -11,18 +11,18 @@
   .d-list-item__left {
     display: block;
     align-content: flex-start;
-    min-width: var(--dt-size-600);
+    min-inline-size: var(--dt-size-600);
     text-align: end;
   }
 
   .d-list-item__wrapper {
-    min-height: auto;
+    min-block-size: auto;
     padding: 0;
     font: var(--dt-typography-body-md-compact);
   }
 
   .d-list-item__bottom {
-    margin-top: 0;
+    margin-block-start: 0;
   }
 }
 
@@ -43,13 +43,11 @@
 }
 
 .d-recipe-feed-item-row__avatar-container {
-  padding-top: var(--dt-space-300);
-  padding-bottom: var(--dt-space-300);
+  padding-block: var(--dt-space-300) var(--dt-space-300);
 }
 
 .d-recipe-feed-item-row__attachment {
-  padding-top: var(--dt-space-200);
-  padding-bottom: var(--dt-space-300);
+  padding-block: var(--dt-space-200) var(--dt-space-300);
 }
 
 .d-recipe-feed-item-row__image {
@@ -64,7 +62,7 @@
 
 .d-recipe-feed-item-row__video {
   display: block;
-  height: 25.0rem;
+  block-size: 25.0rem;
 }
 
 .d-recipe-feed-item-row__header {
@@ -89,13 +87,11 @@
 .d-recipe-feed-item-row__reactions {
   display: flex;
   flex-wrap: wrap;
-  padding-top: var(--dt-space-200);
-  padding-bottom: var(--dt-space-200);
+  padding-block: var(--dt-space-200) var(--dt-space-200);
 }
 
 .d-recipe-feed-item-row__threading {
-  padding-top: var(--dt-space-200);
-  padding-bottom: var(--dt-space-200);
+  padding-block: var(--dt-space-200) var(--dt-space-200);
 }
 
 .d-recipe-feed-item-row__left-time {
@@ -108,6 +104,6 @@
 
 .d-recipe-feed-item-row__menu {
   position: absolute;
-  top: var(--dt-space-550-negative);
-  right: var(--dt-space-450);
+  inset-block-start: var(--dt-space-550-negative);
+  inset-inline-end: var(--dt-space-450);
 }

package/lib/build/less/recipes/grouped_chip.less

@@ -14,15 +14,15 @@
 }
 
 .d-recipe-grouped-chip__content-left {
-  max-width: var(--dt-size-730);
+  max-inline-size: var(--dt-size-730);
   background-color: var(--dt-color-surface-moderate-opaque);
-  border-top-left-radius: var(--dt-size-radius-pill);
-  border-bottom-left-radius: var(--dt-size-radius-pill);
+  border-start-start-radius: var(--dt-size-radius-pill);
+  border-end-start-radius: var(--dt-size-radius-pill);
 }
 
 .d-recipe-grouped-chip__content-right {
-  max-width: var(--dt-size-730);
+  max-inline-size: var(--dt-size-730);
   background-color: var(--dt-color-purple-200);
-  border-top-right-radius: var(--dt-size-radius-pill);
-  border-bottom-right-radius: var(--dt-size-radius-pill);
+  border-start-end-radius: var(--dt-size-radius-pill);
+  border-end-end-radius: var(--dt-size-radius-pill);
 }

package/lib/build/less/recipes/ivr_node.less

@@ -5,23 +5,23 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 280px; /* stylelint-disable-line meowtec/no-px */
+  inline-size: 280px; /* stylelint-disable-line meowtec/no-px */
   cursor: pointer;
 
   .d-card {
-    width: var(--dt-size-100-percent);
+    inline-size: var(--dt-size-100-percent);
   }
 
   .d-card__header {
-    margin-top: var(--dt-size-100-negative);
+    margin-block-start: var(--dt-size-100-negative);
     padding: var(--dt-space-0);
-    border-top-left-radius: var(--dt-size-border-300);
-    border-top-right-radius: var(--dt-size-border-300);
+    border-start-start-radius: var(--dt-size-border-300);
+    border-start-end-radius: var(--dt-size-border-300);
   }
 
   .d-card__content {
     padding: var(--dt-space-400) var(--dt-space-450) var(--dt-space-450);
-    border-top: var(--dt-size-border-100) solid var(--dt-color-black-300);
+    border-block-start: var(--dt-size-border-100) solid var(--dt-color-black-300);
   }
 }
 
@@ -30,7 +30,7 @@
 //  ----------------------------------------------------------------------------
 .d-recipe-ivr-node-prompt {
   .d-card__header {
-    border-top: var(--dt-size-border-300) solid var(--dt-color-blue-200);
+    border-block-start: var(--dt-size-border-300) solid var(--dt-color-blue-200);
   }
 }
 
@@ -41,13 +41,13 @@
   }
 
   .d-card__header {
-    border-top: var(--dt-size-border-300) solid var(--dt-color-blue-300);
+    border-block-start: var(--dt-size-border-300) solid var(--dt-color-blue-300);
   }
 }
 
 .d-recipe-ivr-node-logic {
   .d-card__header {
-    border-top: var(--dt-size-border-300) solid var(--dt-color-purple-200);
+    border-block-start: var(--dt-size-border-300) solid var(--dt-color-purple-200);
   }
 }
 
@@ -58,13 +58,13 @@
   }
 
   .d-card__header {
-    border-top: var(--dt-size-border-300) solid var(--dt-color-purple-400);
+    border-block-start: var(--dt-size-border-300) solid var(--dt-color-purple-400);
   }
 }
 
 .d-recipe-ivr-node-terminal {
   .d-card__header {
-    border-top: var(--dt-size-border-300) solid var(--dt-color-red-100);
+    border-block-start: var(--dt-size-border-300) solid var(--dt-color-red-100);
   }
 }
 
@@ -75,7 +75,7 @@
   }
 
   .d-card__header {
-    border-top: var(--dt-size-border-300) solid var(--dt-color-red-200);
+    border-block-start: var(--dt-size-border-300) solid var(--dt-color-red-200);
   }
 }
 
@@ -87,27 +87,27 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--dt-size-400);
-  height: var(--dt-size-400);
-  margin-bottom: var(--dt-space-300-negative);
+  inline-size: var(--dt-size-400);
+  block-size: var(--dt-size-400);
+  margin-block-end: var(--dt-space-300-negative);
   background-color: var(--dt-color-purple-600);
   border-color: var(--dt-color-purple-600);
   border-radius: var(--dt-size-radius-circle);
 }
 
 .d-recipe-ivr-node__connector--selected {
-  margin-bottom: var(--dt-space-400-negative);
+  margin-block-end: var(--dt-space-400-negative);
 }
 
 .d-recipe-ivr-node__connector-dtmf {
-  width: var(--dt-size-550);
-  height: var(--dt-size-550);
-  margin-bottom: var(--dt-space-450-negative);
+  inline-size: var(--dt-size-550);
+  block-size: var(--dt-size-550);
+  margin-block-end: var(--dt-space-450-negative);
   color: var(--dt-color-foreground-primary-inverted);
   font-size: var(--dt-font-size-200);
 
   .d-recipe-ivr-node__connector--selected {
-    margin-bottom: var(--dt-space-500-negative);
+    margin-block-end: var(--dt-space-500-negative);
   }
 }
 
@@ -126,7 +126,7 @@
 }
 
 .d-recipe-ivr-node__dropdown-list {
-  width: var(--dt-size-825);
+  inline-size: var(--dt-size-825);
 }
 
 .d-recipe-ivr-node__goto-icon {

package/lib/build/less/recipes/leftbar_row.less

@@ -23,6 +23,14 @@
   --leftbar-row-action-width: var(--dt-size-550);
   --leftbar-row-action-height: var(--leftbar-row-action-width);
 
+  .d-presence {
+    // Presence colors in shell have specific tokens
+    --presence-color-border-offline: var(--dt-shell-presence-color-offline);
+    --presence-color-background-active: var(--dt-shell-presence-color-available);
+    --presence-color-background-busy: var(--dt-shell-presence-color-unavailable);
+    --presence-color-background-away: var(--dt-shell-presence-color-busy);
+  }
+
   //  ============================================================================
   //  $   BASE STYLE
   //  ----------------------------------------------------------------------------
@@ -62,10 +70,12 @@
     --leftbar-row-color-background: var(--dt-shell-action-color-background-primary-hover);
 
     .d-presence {
+      // TODO: Remove this once @jeverhart-dialpad's DLT-2665 PR
       --presence-color-border-base: var(--dt-color-black-200);
     }
 
     .d-avatar__count {
+      // TODO: Remove this once @jeverhart-dialpad's DLT-2665 PR
       --avatar-count-color-shadow: var(--dt-shell-action-color-background-primary-selected);
     }
   }
@@ -93,7 +103,7 @@
   }
 
   &__status {
-    padding-bottom: var(--dt-space-100);
+    padding-block-end: var(--dt-space-100);
     overflow: hidden;
     color: var(--leftbar-row-status-color-foreground);
     font-size: var(--leftbar-row-status-font-size);
@@ -138,15 +148,15 @@
     gap: var(--dt-space-200);
     align-items: center;
     justify-content: center;
-    width: var(--is-typing-size-shape);
-    height: var(--is-typing-size-shape);
+    inline-size: var(--is-typing-size-shape);
+    block-size: var(--is-typing-size-shape);
     border-radius: var(--dt-size-radius-pill);
     opacity: 0.75;
 
     & span {
       display: inline-block;
-      width: var(--dt-size-300);
-      height: var(--dt-size-300);
+      inline-size: var(--dt-size-300);
+      block-size: var(--dt-size-300);
       padding: 0;
       background: var(--dt-color-surface-strong);
       border-radius: var(--dt-size-radius-pill);
@@ -180,7 +190,7 @@
   // </div>
   //
 
-    // Style overrides for leftbar button icon and background, using the shell tokens for theming
+  // Style overrides for leftbar button icon and background, using the shell tokens for theming
   .d-btn--inverted.d-btn--primary {
     --button-color-text: var(--dt-shell-mention-color-surface-primary);
   }
@@ -202,13 +212,13 @@
     display: flex;
     flex: 1;
     align-items: center;
-    width: 100%;
+    inline-size: 100%;
     margin: 0;
     padding: 0;
     color: var(--leftbar-row-color-foreground);
     font-size: inherit;
     line-height: inherit;
-    text-align: left;
+    text-align: start;
     text-decoration: none;
     background-color: var(--leftbar-row-color-background);
     border: 0;
@@ -225,8 +235,8 @@
   }
 
   &__action-button {
-    width: var(--leftbar-row-action-width);
-    height: var(--leftbar-row-action-height);
+    inline-size: var(--leftbar-row-action-width);
+    block-size: var(--leftbar-row-action-height);
     opacity: 0;
   }
 
@@ -243,25 +253,22 @@
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    width: var(--leftbar-row-alpha-width);
-    height: var(--leftbar-row-alpha-height);
-    padding-right: var(--dt-space-400);
-    padding-left: var(--dt-space-400);
+    inline-size: var(--leftbar-row-alpha-width);
+    block-size: var(--leftbar-row-alpha-height);
+    padding-inline: var(--dt-space-400) var(--dt-space-400);
     color: var(--leftbar-row-alpha-color-foreground);
     border-radius: var(--leftbar-row-radius) 0 0 var(--leftbar-row-radius);
   }
 
   &__label {
     flex: 0 1;
-    min-width: 0;
+    min-inline-size: 0;
   }
 
-
-
   &__omega {
     position: absolute;
-    top: var(--leftbar-row-action-position-bottom);
-    right: var(--leftbar-row-action-position-right);
+    inset-block-start: var(--leftbar-row-action-position-bottom);
+    inset-inline-end: var(--leftbar-row-action-position-right);
     display: flex;
     gap: var(--dt-space-300);
     align-items: center;
@@ -284,15 +291,15 @@
   }
 
   &__unread-count-badge {
-    border-top-right-radius: var(--dt-size-radius-0);
-    border-bottom-right-radius: var(--dt-size-radius-0);
+    border-start-end-radius: var(--dt-size-radius-0);
+    border-end-end-radius: var(--dt-size-radius-0);
   }
 
   &__unread-mention-count-badge {
     color: var(--dt-shell-mention-color-foreground-secondary);
     background-color: var(--dt-shell-mention-color-surface-secondary);
-    border-top-left-radius: var(--dt-size-radius-0);
-    border-bottom-left-radius: var(--dt-size-radius-0);
+    border-start-start-radius: var(--dt-size-radius-0);
+    border-end-start-radius: var(--dt-size-radius-0);
   }
 
   &__unread-mention-only-count-badge {
@@ -307,8 +314,8 @@
   }
 
   &__dnd {
-    padding-top: var(--dt-space-200);
-    padding-right: var(--dt-space-300);
+    padding-block-start: var(--dt-space-200);
+    padding-inline-end: var(--dt-space-300);
     color: var(--dt-color-foreground-tertiary);
     font-weight: var(--dt-font-weight-medium);
     font-size: var(--dt-font-size-100);
@@ -327,22 +334,21 @@
 
   &--contact-centers {
     .d-recipe-leftbar-row__alpha {
-      padding-right: var(--dt-space-450);
-      padding-left: var(--dt-space-450);
+      padding-inline: var(--dt-space-450) var(--dt-space-450);
     }
 
     .d-recipe-leftbar-row__action-container {
       display: inline-flex;
       align-items: center;
       justify-content: flex-end;
-      min-width: var(--dt-size-600);
-      height: var(--dt-size-500);
+      min-inline-size: var(--dt-size-600);
+      block-size: var(--dt-size-500);
     }
   }
 
   &__icon-cc {
-    width: calc(var(--dt-size-300) * 3.5);
-    height: calc(var(--dt-size-300) * 3.5);
+    inline-size: calc(var(--dt-size-300) * 3.5);
+    block-size: calc(var(--dt-size-300) * 3.5);
     border-radius: var(--dt-size-200);
   }
 }

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

@@ -31,29 +31,28 @@
 }
 
 .d-recipe-message-input__link-popover {
-  width: 36.0rem;
+  inline-size: 36.0rem;
 }
 
 .d-recipe-message-input__remaining-char {
-  margin-right: var(--dt-space-300);
+  margin-inline-end: var(--dt-space-300);
   color: var(--dt-color-foreground-critical);
   font-size: var(--dt-font-size-100);
 }
 
 .d-recipe-message-input__remaining-char-tooltip {
-  margin-top: auto;
-  margin-bottom: auto;
+  margin-block: auto;
 }
 
 .d-recipe-message-input__button {
-  max-width: 2.8rem;
-  max-height: 2.8rem;
+  max-inline-size: 2.8rem;
+  max-block-size: 2.8rem;
   border-radius: var(--dt-size-radius-300);
 }
 
 .d-recipe-message-input__send-button.d-recipe-message-input__button:not(.d-btn--icon-only),
 .d-recipe-message-input__cancel-button {
-  max-width: unset;
+  max-inline-size: unset;
   padding: var(--dt-space-350);
 }
 
@@ -83,11 +82,11 @@
 }
 
 .d-recipe-message-input-meeting-pill__layout {
-  grid-template-areas: 'left content right';
+  grid-template-areas: 'start content end';
   grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
   gap: var(--dt-space-400);
   align-items: center;
-  max-width: var(--dt-size-905);
+  max-inline-size: var(--dt-size-905);
   padding: var(--dt-space-200) var(--dt-space-400);
   font: var(--dt-typography-headline-md);
   border: var(--dt-size-border-100) solid var(--dt-color-border-default);
@@ -111,10 +110,9 @@
 }
 
 .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);
+  inline-size: var(--dt-size-100);
+  block-size: calc(var(--dt-size-550) + var(--dt-size-300));
+  margin-inline: var(--dt-space-300);
   background: var(--dt-color-border-subtle);
 }
 
@@ -127,9 +125,8 @@
 }
 
 .d-recipe-message-input__link-input {
-  margin-top: var(--dt-space-350);
-  padding-top: var(--dt-space-200);
-  padding-bottom: var(--dt-space-200);
+  margin-block-start: var(--dt-space-350);
+  padding-block: var(--dt-space-200);
   background-color: var(--dt-color-surface-secondary);
   border: var(--dt-space-100) solid;
   border-color: var(--dt-color-border-default);

package/lib/build/less/recipes/settings_menu_button.less

@@ -1,6 +1,6 @@
 .d-recipe-settings-menu-button {
-  width: var(--dt-size-550);
-  height: var(--dt-size-600);
+  inline-size: var(--dt-size-550);
+  block-size: var(--dt-size-600);
   padding: var(--dt-space-0);
   color: var(--dt-shell-action-color-foreground-primary-default);
   background-color: var(--dt-shell-action-color-background-primary-default);
@@ -17,7 +17,7 @@
 }
 
 .d-recipe-settings-menu-button-update {
-  height: var(--dt-size-600);
+  block-size: var(--dt-size-600);
   color: var(--dt-color-blue-500);
   background-color: hsla(var(--dt-color-blue-200-hsl) / 0.25);
   border-color: hsla(var(--dt-color-blue-200-hsl) / 0.25);

package/lib/build/less/recipes/top_banner_info.less

@@ -7,7 +7,7 @@
 }
 
 .d-recipe-top-banner-info__left {
-  min-width: var(--dt-size-20-percent);
+  min-inline-size: var(--dt-size-20-percent);
   margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);
 }
 
@@ -15,8 +15,7 @@
   display: flex;
   gap: var(--dt-size-300);
   align-items: center;
-  margin-top: var(--dt-space-300);
-  margin-bottom: var(--dt-space-300);
+  margin-block: var(--dt-space-300) var(--dt-space-300);
 }
 
 .d-recipe-top-banner-info__right {
@@ -24,9 +23,9 @@
   gap: var(--dt-size-300);
   align-items: baseline;
   justify-content: flex-end;
-  min-width: var(--dt-size-20-percent);
+  min-inline-size: var(--dt-size-20-percent);
   margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;
-  text-align: right;
+  text-align: end;
 }
 
 .d-recipe-top-banner-info--success {

package/lib/build/less/utilities/backgrounds.less

@@ -41,14 +41,15 @@
 //  ============================================================================
 //  $  BACKGROUND POSITION
 //  ----------------------------------------------------------------------------
+// Note logical properties for background-position continue to use some measure of physical space, e.g. "top"
 .d-bgp-t { background-position: top !important; }
-.d-bgp-tr { background-position: top right !important; }
-.d-bgp-r { background-position: right !important; }
-.d-bgp-br { background-position: bottom right !important; }
+.d-bgp-tr { background-position: top end !important; }
+.d-bgp-r { background-position: end !important; }
+.d-bgp-br { background-position: bottom end !important; }
 .d-bgp-b { background-position: bottom !important; }
-.d-bgp-bl { background-position: bottom left !important; }
-.d-bgp-l { background-position: left !important; }
-.d-bgp-tl { background-position: top left !important; }
+.d-bgp-bl { background-position: bottom start !important; }
+.d-bgp-l { background-position: start !important; }
+.d-bgp-tl { background-position: top start !important; }
 .d-bgp-center { background-position: center !important; }
 .d-bgp-unset { background-position: unset !important; }
 
@@ -97,15 +98,14 @@
 //  --  BASE CLASS
 .d-bgg-pattern {
     position: relative;
-    padding-left: var(--dt-space-550) !important;
+    padding-inline-start: var(--dt-space-550) !important;
 
     &::after {
         position: absolute;
-        top: var(--dt-space-100);
-        bottom: var(--dt-space-100);
-        left: var(--dt-space-100);
-        min-width: 2rem;
-        min-height: 2rem;
+        inset-block: var(--dt-space-100) var(--dt-space-100);
+        inset-inline-start: var(--dt-space-100);
+        min-inline-size: 2rem;
+        min-block-size: 2rem;
         background-image: var(--bgg-pattern);
         background-repeat: repeat-y;
         background-position: top left;