@dialpad/dialtone-css 8.63.0-next.1 → 8.64.0

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

@@ -8,8 +8,8 @@
 }
 
 .d-recipe-feed-item-pill__button {
-  inline-size: var(--dt-size-100-percent);
-  text-align: start;
+  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);
@@ -23,7 +23,7 @@
 
 .d-recipe-feed-item-pill__layout {
   gap: var(--dt-space-300);
-  inline-size: var(--dt-size-100-percent);
+  width: var(--dt-size-100-percent);
   padding: var(--dt-space-400);
   line-height: var(--dt-font-line-height-300)
 }
@@ -31,8 +31,8 @@
 .d-recipe-feed-item-pill__icon {
   display: grid;
   place-content: center;
-  min-inline-size: var(--dt-size-600);
-  block-size: var(--dt-size-100-percent);
+  min-width: var(--dt-size-600);
+  height: var(--dt-size-100-percent);
 
   & svg {
     animation: d-recipe-feed-item-pill-fade 0.15s ease-in;
@@ -47,25 +47,25 @@
 .d-recipe-feed-item-pill__title {
   display: grid;
   align-content: center;
-  block-size: var(--dt-size-100-percent);
+  height: var(--dt-size-100-percent);
   font-weight: var(--dt-font-weight-bold);
 }
 
 .d-recipe-feed-item-pill__subtitle {
-  margin-block-start: var(--dt-space-200-negative);
+  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-block-start: var(--dt-space-200);
+  margin-top: var(--dt-space-200);
 }
 
 .d-recipe-feed-item-pill__right {
   display: grid;
   place-content: center;
-  min-inline-size: var(--dt-size-600);
-  block-size: var(--dt-size-100-percent);
+  min-width: var(--dt-size-600);
+  height: var(--dt-size-100-percent);
 }
 
 // Gradient radius solution taken from https://stackoverflow.com/a/53037637

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

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

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

@@ -14,15 +14,15 @@
 }
 
 .d-recipe-grouped-chip__content-left {
-  max-inline-size: var(--dt-size-730);
+  max-width: var(--dt-size-730);
   background-color: var(--dt-color-surface-moderate-opaque);
-  border-start-start-radius: var(--dt-size-radius-pill);
-  border-end-start-radius: var(--dt-size-radius-pill);
+  border-top-left-radius: var(--dt-size-radius-pill);
+  border-bottom-left-radius: var(--dt-size-radius-pill);
 }
 
 .d-recipe-grouped-chip__content-right {
-  max-inline-size: var(--dt-size-730);
+  max-width: var(--dt-size-730);
   background-color: var(--dt-color-purple-200);
-  border-start-end-radius: var(--dt-size-radius-pill);
-  border-end-end-radius: var(--dt-size-radius-pill);
+  border-top-right-radius: var(--dt-size-radius-pill);
+  border-bottom-right-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;
-  inline-size: 280px; /* stylelint-disable-line meowtec/no-px */
+  width: 280px; /* stylelint-disable-line meowtec/no-px */
   cursor: pointer;
 
   .d-card {
-    inline-size: var(--dt-size-100-percent);
+    width: var(--dt-size-100-percent);
   }
 
   .d-card__header {
-    margin-block-start: var(--dt-size-100-negative);
+    margin-top: var(--dt-size-100-negative);
     padding: var(--dt-space-0);
-    border-start-start-radius: var(--dt-size-border-300);
-    border-start-end-radius: var(--dt-size-border-300);
+    border-top-left-radius: var(--dt-size-border-300);
+    border-top-right-radius: var(--dt-size-border-300);
   }
 
   .d-card__content {
     padding: var(--dt-space-400) var(--dt-space-450) var(--dt-space-450);
-    border-block-start: var(--dt-size-border-100) solid var(--dt-color-black-300);
+    border-top: var(--dt-size-border-100) solid var(--dt-color-black-300);
   }
 }
 
@@ -30,7 +30,7 @@
 //  ----------------------------------------------------------------------------
 .d-recipe-ivr-node-prompt {
   .d-card__header {
-    border-block-start: var(--dt-size-border-300) solid var(--dt-color-blue-200);
+    border-top: var(--dt-size-border-300) solid var(--dt-color-blue-200);
   }
 }
 
@@ -41,13 +41,13 @@
   }
 
   .d-card__header {
-    border-block-start: var(--dt-size-border-300) solid var(--dt-color-blue-300);
+    border-top: var(--dt-size-border-300) solid var(--dt-color-blue-300);
   }
 }
 
 .d-recipe-ivr-node-logic {
   .d-card__header {
-    border-block-start: var(--dt-size-border-300) solid var(--dt-color-purple-200);
+    border-top: var(--dt-size-border-300) solid var(--dt-color-purple-200);
   }
 }
 
@@ -58,13 +58,13 @@
   }
 
   .d-card__header {
-    border-block-start: var(--dt-size-border-300) solid var(--dt-color-purple-400);
+    border-top: var(--dt-size-border-300) solid var(--dt-color-purple-400);
   }
 }
 
 .d-recipe-ivr-node-terminal {
   .d-card__header {
-    border-block-start: var(--dt-size-border-300) solid var(--dt-color-red-100);
+    border-top: var(--dt-size-border-300) solid var(--dt-color-red-100);
   }
 }
 
@@ -75,7 +75,7 @@
   }
 
   .d-card__header {
-    border-block-start: var(--dt-size-border-300) solid var(--dt-color-red-200);
+    border-top: var(--dt-size-border-300) solid var(--dt-color-red-200);
   }
 }
 
@@ -87,27 +87,27 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  inline-size: var(--dt-size-400);
-  block-size: var(--dt-size-400);
-  margin-block-end: var(--dt-space-300-negative);
+  width: var(--dt-size-400);
+  height: var(--dt-size-400);
+  margin-bottom: 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-block-end: var(--dt-space-400-negative);
+  margin-bottom: var(--dt-space-400-negative);
 }
 
 .d-recipe-ivr-node__connector-dtmf {
-  inline-size: var(--dt-size-550);
-  block-size: var(--dt-size-550);
-  margin-block-end: var(--dt-space-450-negative);
+  width: var(--dt-size-550);
+  height: var(--dt-size-550);
+  margin-bottom: 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-block-end: var(--dt-space-500-negative);
+    margin-bottom: var(--dt-space-500-negative);
   }
 }
 
@@ -126,7 +126,7 @@
 }
 
 .d-recipe-ivr-node__dropdown-list {
-  inline-size: var(--dt-size-825);
+  width: var(--dt-size-825);
 }
 
 .d-recipe-ivr-node__goto-icon {

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

@@ -2,20 +2,20 @@
   //  ============================================================================
   //  $   CSS CUSTOM PROPERTIES
   //  ----------------------------------------------------------------------------
-  --leftbar-row-color-foreground: var(--dt-theme-sidebar-color-foreground);
-  --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background);
+  --leftbar-row-color-foreground: var(--dt-shell-color-foreground-primary);
+  --leftbar-row-color-background: var(--dt-shell-color-surface-default);
   --leftbar-row-radius: var(--dt-size-radius-pill);
   --leftbar-row-opacity: 100%;
-  --leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-icon-color-foreground);
+  --leftbar-row-alpha-color-foreground: var(--dt-shell-color-foreground-primary);
   --leftbar-row-alpha-width: calc(var(--dt-size-300) * 10);
   --leftbar-row-alpha-height: calc(var(--dt-size-300) * 9);
   --leftbar-row-omega-height: var(--leftbar-row-alpha-height);
   --leftbar-row-unread-badge-display: inline-flex;
-  --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground);
+  --leftbar-row-description-color-foreground: var(--dt-shell-color-foreground-primary);
   --leftbar-row-description-font-weight: var(--dt-font-weight-normal);
   --leftbar-row-description-font-size: var(--dt-font-size-200);
   --leftbar-row-description-line-height: var(--dt-font-line-height-200);
-  --leftbar-row-status-color-foreground: var(--dt-theme-sidebar-status-color-foreground);
+  --leftbar-row-status-color-foreground: var(--dt-shell-color-foreground-muted);
   --leftbar-row-status-font-size: var(--dt-font-size-100);
   --leftbar-row-status-line-height: var(--dt-font-line-height-100);
   --leftbar-row-action-position-right: var(--dt-size-400);
@@ -28,7 +28,7 @@
   //  ----------------------------------------------------------------------------
   position: relative;
   display: flex;
-  background-color: var(--dt-theme-sidebar-row-color-background);
+  background-color: var(--dt-shell-color-surface-default);
   border-radius: var(--leftbar-row-radius);
   cursor: pointer;
   opacity: var(--leftbar-row-opacity);
@@ -59,14 +59,14 @@
 
   &:hover,
   &:focus-within {
-    --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-hover);
+    --leftbar-row-color-background: var(--dt-shell-action-color-background-primary-hover);
 
     .d-presence {
       --presence-color-border-base: var(--dt-color-black-200);
     }
 
     .d-avatar__count {
-      --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
+      --avatar-count-color-shadow: var(--dt-shell-action-color-background-primary-selected);
     }
   }
 
@@ -93,7 +93,7 @@
   }
 
   &__status {
-    padding-block-end: var(--dt-space-100);
+    padding-bottom: var(--dt-space-100);
     overflow: hidden;
     color: var(--leftbar-row-status-color-foreground);
     font-size: var(--leftbar-row-status-font-size);
@@ -103,14 +103,14 @@
   }
 
   &__meta-context ~ &__meta-custom:not(:empty)::before {
-    color: var(--dt-theme-sidebar-status-color-foreground);
+    color: var(--dt-shell-color-foreground-muted);
     content: " • ";
   }
 
   &--has-unread {
     --leftbar-row-description-font-weight: var(--dt-font-weight-bold);
-    --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
-    --leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
+    --leftbar-row-description-color-foreground: var(--dt-shell-color-foreground-strong);
+    --leftbar-row-alpha-color-foreground: var(--dt-shell-color-foreground-strong);
   }
 
   &--muted {
@@ -118,15 +118,15 @@
   }
 
   &--selected {
-    --leftbar-row-color-background: var(--dt-theme-sidebar-selected-row-color-background);
-    --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-selected-row-color-foreground);
+    --leftbar-row-color-background: var(--dt-shell-action-color-background-primary-selected);
+    --leftbar-row-description-color-foreground: var(--dt-shell-action-color-foreground-primary-selected);
 
     .d-presence {
       --presence-color-border-base: var(--dt-color-black-200);
     }
 
     .d-avatar__count {
-      --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
+      --avatar-count-color-shadow: var(--dt-shell-action-color-background-primary-selected);
     }
   }
 
@@ -138,15 +138,15 @@
     gap: var(--dt-space-200);
     align-items: center;
     justify-content: center;
-    inline-size: var(--is-typing-size-shape);
-    block-size: var(--is-typing-size-shape);
+    width: var(--is-typing-size-shape);
+    height: var(--is-typing-size-shape);
     border-radius: var(--dt-size-radius-pill);
     opacity: 0.75;
 
     & span {
       display: inline-block;
-      inline-size: var(--dt-size-300);
-      block-size: var(--dt-size-300);
+      width: var(--dt-size-300);
+      height: var(--dt-size-300);
       padding: 0;
       background: var(--dt-color-surface-strong);
       border-radius: var(--dt-size-radius-pill);
@@ -179,18 +179,36 @@
   //   <button class="d-recipe-leftbar-row__action-button d-btn ..." ...>...</button>
   // </div>
   //
+
+    // 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);
+  }
+
+  .d-btn--inverted.d-btn--primary:hover:not([disabled]) {
+    --button-color-background: color-mix(in srgb, var(--dt-shell-mention-color-surface-primary) 10%, white 100%);
+  }
+
+  .d-btn--inverted.d-btn--primary:active:not([disabled]) {
+    --button-color-background: color-mix(in srgb, var(--dt-shell-mention-color-surface-primary) 30%, white 100%);
+  }
+
+  .d-fc-success {
+    color:var(--dt-shell-color-foreground-positive)!important;
+  }
+
   &__primary {
     // contains extra style properties to support both <button> and <a>
     display: flex;
     flex: 1;
     align-items: center;
-    inline-size: 100%;
+    width: 100%;
     margin: 0;
     padding: 0;
     color: var(--leftbar-row-color-foreground);
     font-size: inherit;
     line-height: inherit;
-    text-align: start;
+    text-align: left;
     text-decoration: none;
     background-color: var(--leftbar-row-color-background);
     border: 0;
@@ -198,7 +216,7 @@
     appearance: none;
 
     &:active {
-      --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-active);
+      --leftbar-row-color-background: var(--dt-shell-action-color-background-primary-active);
     }
 
     &:focus-visible {
@@ -207,8 +225,8 @@
   }
 
   &__action-button {
-    inline-size: var(--leftbar-row-action-width);
-    block-size: var(--leftbar-row-action-height);
+    width: var(--leftbar-row-action-width);
+    height: var(--leftbar-row-action-height);
     opacity: 0;
   }
 
@@ -225,22 +243,25 @@
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    inline-size: var(--leftbar-row-alpha-width);
-    block-size: var(--leftbar-row-alpha-height);
-    padding-inline: var(--dt-space-400) var(--dt-space-400);
+    width: var(--leftbar-row-alpha-width);
+    height: var(--leftbar-row-alpha-height);
+    padding-right: var(--dt-space-400);
+    padding-left: 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-inline-size: 0;
+    min-width: 0;
   }
 
+
+
   &__omega {
     position: absolute;
-    inset-block-start: var(--leftbar-row-action-position-bottom);
-    inset-inline-end: var(--leftbar-row-action-position-right);
+    top: var(--leftbar-row-action-position-bottom);
+    right: var(--leftbar-row-action-position-right);
     display: flex;
     gap: var(--dt-space-300);
     align-items: center;
@@ -252,8 +273,8 @@
 
   &__unread-badge {
     display: var(--leftbar-row-unread-badge-display);
-    color: var(--dt-theme-mention-color-foreground);
-    background-color: var(--dt-theme-mention-color-background);
+    color: var(--dt-shell-mention-color-foreground-primary);
+    background-color: var(--dt-shell-mention-color-surface-primary);
   }
 
   &__unread-count {
@@ -263,20 +284,20 @@
   }
 
   &__unread-count-badge {
-    border-start-end-radius: var(--dt-size-radius-0);
-    border-end-end-radius: var(--dt-size-radius-0);
+    border-top-right-radius: var(--dt-size-radius-0);
+    border-bottom-right-radius: var(--dt-size-radius-0);
   }
 
   &__unread-mention-count-badge {
-    color: var(--dt-theme-mention-color-foreground-strong);
-    background-color: var(--dt-theme-mention-color-background-strong);
-    border-start-start-radius: var(--dt-size-radius-0);
-    border-end-start-radius: var(--dt-size-radius-0);
+    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);
   }
 
   &__unread-mention-only-count-badge {
-    color: var(--dt-theme-mention-color-foreground-strong);
-    background-color: var(--dt-theme-mention-color-background-strong);
+    color: var(--dt-shell-mention-color-foreground-secondary);
+    background-color: var(--dt-shell-mention-color-surface-secondary);
   }
 
   &__active-voice {
@@ -286,8 +307,8 @@
   }
 
   &__dnd {
-    padding-block-start: var(--dt-space-200);
-    padding-inline-end: var(--dt-space-300);
+    padding-top: var(--dt-space-200);
+    padding-right: var(--dt-space-300);
     color: var(--dt-color-foreground-tertiary);
     font-weight: var(--dt-font-weight-medium);
     font-size: var(--dt-font-size-100);
@@ -306,21 +327,22 @@
 
   &--contact-centers {
     .d-recipe-leftbar-row__alpha {
-      padding-inline: var(--dt-space-450) var(--dt-space-450);
+      padding-right: var(--dt-space-450);
+      padding-left: var(--dt-space-450);
     }
 
     .d-recipe-leftbar-row__action-container {
       display: inline-flex;
       align-items: center;
       justify-content: flex-end;
-      min-inline-size: var(--dt-size-600);
-      block-size: var(--dt-size-500);
+      min-width: var(--dt-size-600);
+      height: var(--dt-size-500);
     }
   }
 
   &__icon-cc {
-    inline-size: calc(var(--dt-size-300) * 3.5);
-    block-size: calc(var(--dt-size-300) * 3.5);
+    width: calc(var(--dt-size-300) * 3.5);
+    height: calc(var(--dt-size-300) * 3.5);
     border-radius: var(--dt-size-200);
   }
 }
@@ -368,15 +390,15 @@
 //  $   Contact Row
 //  ----------------------------------------------------------------------------
 .d-recipe-contact-row--active {
-  color: var(--dt-color-foreground-success);
+  color: var(--dt-shell-color-foreground-positive);
 }
 
 .d-recipe-contact-row--busy {
-  color: var(--dt-color-foreground-critical);
+  color: var(--dt-shell-color-foreground-critical);
 }
 
 .d-recipe-contact-row--away {
-  color: var(--dt-color-foreground-warning);
+  color: var(--dt-shell-color-foreground-warning);
 }
 
 //  ============================================================================

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

@@ -31,28 +31,29 @@
 }
 
 .d-recipe-message-input__link-popover {
-  inline-size: 36.0rem;
+  width: 36.0rem;
 }
 
 .d-recipe-message-input__remaining-char {
-  margin-inline-end: var(--dt-space-300);
+  margin-right: 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-block: auto;
+  margin-top: auto;
+  margin-bottom: auto;
 }
 
 .d-recipe-message-input__button {
-  max-inline-size: 2.8rem;
-  max-block-size: 2.8rem;
+  max-width: 2.8rem;
+  max-height: 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-inline-size: unset;
+  max-width: unset;
   padding: var(--dt-space-350);
 }
 
@@ -82,11 +83,11 @@
 }
 
 .d-recipe-message-input-meeting-pill__layout {
-  grid-template-areas: 'start content end';
+  grid-template-areas: 'left content right';
   grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
   gap: var(--dt-space-400);
   align-items: center;
-  max-inline-size: var(--dt-size-905);
+  max-width: 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);
@@ -110,9 +111,10 @@
 }
 
 .d-recipe-message-input--button-group-divider {
-  inline-size: var(--dt-size-100);
-  block-size: calc(var(--dt-size-550) + var(--dt-size-300));
-  margin-inline: var(--dt-space-300);
+  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);
 }
 
@@ -125,8 +127,9 @@
 }
 
 .d-recipe-message-input__link-input {
-  margin-block-start: var(--dt-space-350);
-  padding-block: var(--dt-space-200);
+  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);