@dialpad/dialtone-css 8.64.0 → 8.64.2

package/lib/build/less/components/loader.less

@@ -12,6 +12,10 @@
 //  ============================================================================
 //  $   DEFAULT LOADER
 //  ----------------------------------------------------------------------------
-.d-loader-icon {
+.d-loader {
+  display: inline-flex;
+}
+
+.d-loader__icon {
   animation: d-loading-circle 900ms infinite linear;
 }

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

@@ -7,13 +7,13 @@
 //  visit https://dialtone.dialpad.com/components/presence
 
 .d-presence {
-  --presence-color-border-base: var(--dt-shell-color-surface-default);
-  --presence-color-border-offline: var(--dt-color-border-bold);
-  --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);
-  --presence-color-background-offline: var(--dt-shell-presence-color-offline);
-  --presence-border-size: var(--dt-size-200);
+  --presence-color-border-base: var(--dt-color-surface-secondary); // Probably won't be necessary after @jeverhart-dialpad's DLT-2665 PR
+  --presence-color-border-offline: var(--dt-presence-color-offline);
+  --presence-color-background-active: var(--dt-presence-color-available);
+  --presence-color-background-busy: var(--dt-presence-color-unavailable);
+  --presence-color-background-away: var(--dt-presence-color-busy);
+  --presence-color-background-offline: var(--dt-color-surface-primary);
+  --presence-border-size: var(--dt-size-border-200);
   --presence-size: var(--dt-size-400);
 
   display: inline-block;
@@ -24,7 +24,7 @@
   border-radius: var(--dt-size-radius-circle);
 
   .d-recipe-leftbar-row--selected & {
-    --presence-color-border-base: var(--dt-shell-color-surface-default);
+    --presence-color-border-base: var(--dt-color-surface-secondary);
   }
 
   .d-recipe-leftbar-row__primary:hover & {
@@ -33,8 +33,8 @@
 
   &__inner {
     box-sizing: border-box;
-    width: var(--presence-size);
-    height: var(--presence-size);
+    inline-size: var(--presence-size);
+    block-size: var(--presence-size);
     border: none;
     border-radius: 50%;
 
@@ -54,7 +54,7 @@
       background-color: var(--presence-color-background-offline);
       border-color: var(--presence-color-border-offline);
       border-style: solid;
-      border-width: var(--dt-size-200);
+      border-width: var(--dt-size-border-200);
     }
   }
 }

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);
     }
   }
@@ -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);
   }
@@ -256,8 +266,6 @@
     min-width: 0;
   }
 
-
-
   &__omega {
     position: absolute;
     top: var(--leftbar-row-action-position-bottom);

package/lib/dist/dialtone-default-theme.css

@@ -3268,7 +3268,10 @@ legend .d-label--md {
 .d-list-item__bottom {
   margin-top: var(--dt-space-200);
 }
-.d-loader-icon {
+.d-loader {
+  display: inline-flex;
+}
+.d-loader__icon {
   -webkit-animation: d-loading-circle 900ms infinite linear;
           animation: d-loading-circle 900ms infinite linear;
 }
@@ -5137,13 +5140,13 @@ legend .d-label--md {
   align-items: center;
 }
 .d-presence {
-  --presence-color-border-base: var(--dt-shell-color-surface-default);
-  --presence-color-border-offline: var(--dt-color-border-bold);
-  --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);
-  --presence-color-background-offline: var(--dt-shell-presence-color-offline);
-  --presence-border-size: var(--dt-size-200);
+  --presence-color-border-base: var(--dt-color-surface-secondary);
+  --presence-color-border-offline: var(--dt-presence-color-offline);
+  --presence-color-background-active: var(--dt-presence-color-available);
+  --presence-color-background-busy: var(--dt-presence-color-unavailable);
+  --presence-color-background-away: var(--dt-presence-color-busy);
+  --presence-color-background-offline: var(--dt-color-surface-primary);
+  --presence-border-size: var(--dt-size-border-200);
   --presence-size: var(--dt-size-400);
   display: inline-block;
   box-sizing: border-box;
@@ -5153,15 +5156,15 @@ legend .d-label--md {
   border-radius: var(--dt-size-radius-circle);
 }
 .d-recipe-leftbar-row--selected .d-presence {
-  --presence-color-border-base: var(--dt-shell-color-surface-default);
+  --presence-color-border-base: var(--dt-color-surface-secondary);
 }
 .d-recipe-leftbar-row__primary:hover .d-presence {
   --presence-color-border-base: var(--dt-shell-action-color-background-primary-hover);
 }
 .d-presence__inner {
   box-sizing: border-box;
-  width: var(--presence-size);
-  height: var(--presence-size);
+  inline-size: var(--presence-size);
+  block-size: var(--presence-size);
   border: none;
   border-radius: 50%;
 }
@@ -5178,7 +5181,7 @@ legend .d-label--md {
   background-color: var(--presence-color-background-offline);
   border-color: var(--presence-color-border-offline);
   border-style: solid;
-  border-width: var(--dt-size-200);
+  border-width: var(--dt-size-border-200);
 }
 .d-icon {
   --icon-size-100: var(--dt-icon-size-100);
@@ -9366,6 +9369,12 @@ ul {
   transition-duration: var(--td200);
   transition-property: background-color, border, box-shadow;
 }
+.d-recipe-leftbar-row .d-presence {
+  --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);
+}
 .d-recipe-leftbar-row:not(.d-recipe-leftbar-row--no-action):hover,
 .d-recipe-leftbar-row:not(.d-recipe-leftbar-row--no-action):focus-within {
   --leftbar-row-unread-badge-display: none;