@dialpad/dialtone-css 8.63.0 → 8.64.0

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

@@ -26,7 +26,7 @@
   --avatar-size-text: var(--dt-font-size-200);
   --avatar-presence-position-right: var(--dt-space-200-negative);
   --avatar-presence-position-bottom: var(--dt-space-200-negative);
-  --avatar-count-color-shadow: var(--dt-theme-sidebar-color-background);
+  --avatar-count-color-shadow: var(--dt-shell-color-surface-default);
 
   position: relative;
   display: flex;
@@ -124,7 +124,7 @@
 
     .d-recipe-leftbar-row--selected &,
     .d-recipe-leftbar-row__primary:hover & {
-      --avatar-count-color-shadow: var(--dt-theme-sidebar-row-color-background-hover);
+      --avatar-count-color-shadow: var(--dt-shell-action-color-background-primary-hover);
     }
   }
 

package/lib/build/less/components/modal.less

@@ -148,8 +148,8 @@
 //  ----------------------------------------------------------------------------
 .d-modal__close {
   position: absolute;
-  top: var(--dt-space-500); // 16
-  right: var(--dt-space-500); // 16
+  inset-block-start: var(--dt-space-400);
+  inset-inline-end: var(--dt-space-400);
   margin: 0 !important;
 }
 

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

@@ -7,12 +7,12 @@
 //  visit https://dialtone.dialpad.com/components/presence
 
 .d-presence {
-  --presence-color-border-base: var(--dt-theme-sidebar-color-background);
+  --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-theme-presence-color-background-available);
-  --presence-color-background-busy: var(--dt-theme-presence-color-background-busy-unavailable);
-  --presence-color-background-away: var(--dt-theme-presence-color-background-busy);
-  --presence-color-background-offline: var(--dt-theme-sidebar-color-background);
+  --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-size: var(--dt-size-400);
 
@@ -24,11 +24,11 @@
   border-radius: var(--dt-size-radius-circle);
 
   .d-recipe-leftbar-row--selected & {
-    --presence-color-border-base: var(--dt-theme-sidebar-selected-row-color-background);
+    --presence-color-border-base: var(--dt-shell-color-surface-default);
   }
 
   .d-recipe-leftbar-row__primary:hover & {
-    --presence-color-border-base: var(--dt-theme-sidebar-row-color-background-hover);
+    --presence-color-border-base: var(--dt-shell-action-color-background-primary-hover);
   }
 
   &__inner {

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

@@ -39,7 +39,7 @@
 .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
+    color: var(--dt-shell-mention-color-surface-primary); // best replacement for --primary-color we have at the moment
   }
 }
 

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

@@ -1,6 +1,6 @@
 .d-recipe-callbox {
   padding: 0;
-  color: var(--dt-color-foreground-primary);
+  color: var(--dt-shell-color-foreground-primary);
   background-color: var(--dt-color-surface-primary);
   border-radius: var(--dt-size-radius-400);
 }
@@ -24,7 +24,7 @@
   }
 
   &.d-recipe-callbox__border-default {
-    border-color: var(--dt-color-border-default);
+    border-color: var(--dt-shell-color-border-default);
   }
 
   &.d-recipe-callbox__border-ai {
@@ -67,7 +67,7 @@
   min-width: 100%;
   padding: 0;
   overflow: clip;
-  color: var(--dt-color-foreground-primary);
+  color: var(--dt-shell-color-foreground-strong);
   font: var(--dt-typography-headline-md);
   line-height: var(--dt-font-line-height-100);
   white-space: nowrap;
@@ -86,7 +86,7 @@
   min-width: 100%;
   padding: 0;
   overflow: hidden;
-  color: var(--dt-color-foreground-tertiary);
+  color: var(--dt-shell-color-foreground-tertiary);
   font: var(--dt-typography-body-sm-compact);
 }
 

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);
     }
   }
 
@@ -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);
     }
   }
 
@@ -179,6 +179,24 @@
   //   <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;
@@ -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 {
@@ -238,6 +256,8 @@
     min-width: 0;
   }
 
+
+
   &__omega {
     position: absolute;
     top: var(--leftbar-row-action-position-bottom);
@@ -253,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 {
@@ -269,15 +289,15 @@
   }
 
   &__unread-mention-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);
     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 {
@@ -370,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);
 }
 
 //  ============================================================================
@@ -437,5 +457,3 @@
     }
   }
 }
-
-

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

@@ -2,17 +2,17 @@
   width: var(--dt-size-550);
   height: var(--dt-size-600);
   padding: var(--dt-space-0);
-  color: var(--dt-theme-topbar-button-color-foreground);
-  background-color: var(--dt-theme-topbar-button-color-background);
+  color: var(--dt-shell-action-color-foreground-primary-default);
+  background-color: var(--dt-shell-action-color-background-primary-default);
   border-radius: var(--dt-size-550);
 
   &:hover {
-    color: var(--dt-theme-topbar-button-color-foreground-hover);
-    background-color: var(--dt-theme-topbar-button-color-background-hover);
+    color: var(--dt-shell-action-color-foreground-primary-hover);
+    background-color: var(--dt-shell-action-color-background-primary-hover);
   }
 
   &:active {
-    background-color: var(--dt-theme-topbar-button-color-background-active);
+    background-color: var(--dt-shell-action-color-background-primary-active);
   }
 }
 
@@ -24,7 +24,7 @@
   border-radius: var(--dt-size-radius-pill);
 
   &:hover {
-    color: var(--dt-theme-topbar-button-color-foreground-hover);
+    color: var(--dt-shell-action-color-foreground-primary-hover);
     background-color: hsla(var(--dt-color-blue-200-hsl) / 0.5);
   }
 }

package/lib/build/less/recipes/unread_pill.less

@@ -13,9 +13,9 @@
 }
 
 .d-recipe-leftbar-unread-pill-mentions {
-  color: var(--dt-theme-mention-color-foreground);
+  color: var(--dt-shell-mention-color-foreground-primary);
   font-weight: var(--dt-font-weight-bold);
-  background-color: var(--dt-theme-mention-color-background);
+  background-color: var(--dt-shell-mention-color-surface-primary);
 }
 
 .d-recipe-leftbar-unread-pill-messages {

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

@@ -1018,7 +1018,7 @@ template {
   --avatar-size-text: var(--dt-font-size-200);
   --avatar-presence-position-right: var(--dt-space-200-negative);
   --avatar-presence-position-bottom: var(--dt-space-200-negative);
-  --avatar-count-color-shadow: var(--dt-theme-sidebar-color-background);
+  --avatar-count-color-shadow: var(--dt-shell-color-surface-default);
   position: relative;
   display: flex;
   color: var(--avatar-color-text);
@@ -1144,7 +1144,7 @@ template {
 }
 .d-recipe-leftbar-row--selected .d-avatar__count,
 .d-recipe-leftbar-row__primary:hover .d-avatar__count {
-  --avatar-count-color-shadow: var(--dt-theme-sidebar-row-color-background-hover);
+  --avatar-count-color-shadow: var(--dt-shell-action-color-background-primary-hover);
 }
 .d-avatar--clickable {
   --avatar-color-border: transparent;
@@ -3366,8 +3366,8 @@ legend .d-label--md {
 }
 .d-modal__close {
   position: absolute;
-  top: var(--dt-space-500);
-  right: var(--dt-space-500);
+  inset-block-start: var(--dt-space-400);
+  inset-inline-end: var(--dt-space-400);
   margin: 0 !important;
 }
 .d-modal__banner {
@@ -5137,12 +5137,12 @@ legend .d-label--md {
   align-items: center;
 }
 .d-presence {
-  --presence-color-border-base: var(--dt-theme-sidebar-color-background);
+  --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-theme-presence-color-background-available);
-  --presence-color-background-busy: var(--dt-theme-presence-color-background-busy-unavailable);
-  --presence-color-background-away: var(--dt-theme-presence-color-background-busy);
-  --presence-color-background-offline: var(--dt-theme-sidebar-color-background);
+  --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-size: var(--dt-size-400);
   display: inline-block;
@@ -5153,10 +5153,10 @@ legend .d-label--md {
   border-radius: var(--dt-size-radius-circle);
 }
 .d-recipe-leftbar-row--selected .d-presence {
-  --presence-color-border-base: var(--dt-theme-sidebar-selected-row-color-background);
+  --presence-color-border-base: var(--dt-shell-color-surface-default);
 }
 .d-recipe-leftbar-row__primary:hover .d-presence {
-  --presence-color-border-base: var(--dt-theme-sidebar-row-color-background-hover);
+  --presence-color-border-base: var(--dt-shell-action-color-background-primary-hover);
 }
 .d-presence__inner {
   box-sizing: border-box;
@@ -8596,7 +8596,7 @@ ul {
 }
 .d-recipe-callbar-button--active .base-button__icon,
 .d-recipe-callbar-button--active:hover .base-button__icon {
-  color: var(--dt-theme-mention-color-background);
+  color: var(--dt-shell-mention-color-surface-primary);
 }
 .d-recipe-callbar-button--disabled {
   cursor: not-allowed;
@@ -8698,7 +8698,7 @@ ul {
 }
 .d-recipe-callbox {
   padding: 0;
-  color: var(--dt-color-foreground-primary);
+  color: var(--dt-shell-color-foreground-primary);
   background-color: var(--dt-color-surface-primary);
   border-radius: var(--dt-size-radius-400);
 }
@@ -8719,7 +8719,7 @@ ul {
   border-block-start-width: 0;
 }
 .d-recipe-callbox__main-content.d-recipe-callbox__border-default {
-  border-color: var(--dt-color-border-default);
+  border-color: var(--dt-shell-color-border-default);
 }
 .d-recipe-callbox__main-content.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;
@@ -8754,7 +8754,7 @@ ul {
   min-width: 100%;
   padding: 0;
   overflow: clip;
-  color: var(--dt-color-foreground-primary);
+  color: var(--dt-shell-color-foreground-strong);
   font: var(--dt-typography-headline-md);
   line-height: var(--dt-font-line-height-100);
   white-space: nowrap;
@@ -8771,7 +8771,7 @@ ul {
   min-width: 100%;
   padding: 0;
   overflow: hidden;
-  color: var(--dt-color-foreground-tertiary);
+  color: var(--dt-shell-color-foreground-tertiary);
   font: var(--dt-typography-body-sm-compact);
 }
 .d-recipe-callbox__right {
@@ -9336,20 +9336,20 @@ ul {
           transform: rotate(90deg);
 }
 .d-recipe-leftbar-row {
-  --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);
@@ -9358,7 +9358,7 @@ ul {
   --leftbar-row-action-height: var(--leftbar-row-action-width);
   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);
@@ -9380,7 +9380,7 @@ ul {
 }
 .d-recipe-leftbar-row:hover,
 .d-recipe-leftbar-row: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-recipe-leftbar-row:hover .d-presence,
 .d-recipe-leftbar-row:focus-within .d-presence {
@@ -9388,7 +9388,7 @@ ul {
 }
 .d-recipe-leftbar-row:hover .d-avatar__count,
 .d-recipe-leftbar-row:focus-within .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);
 }
 .d-recipe-leftbar-row__description {
   overflow: hidden;
@@ -9409,26 +9409,26 @@ ul {
   text-overflow: ellipsis;
 }
 .d-recipe-leftbar-row__meta-context ~ .d-recipe-leftbar-row__meta-custom:not(:empty)::before {
-  color: var(--dt-theme-sidebar-status-color-foreground);
+  color: var(--dt-shell-color-foreground-muted);
   content: " • ";
 }
 .d-recipe-leftbar-row--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);
 }
 .d-recipe-leftbar-row--muted {
   --leftbar-row-opacity: 60%;
 }
 .d-recipe-leftbar-row--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-recipe-leftbar-row--selected .d-presence {
   --presence-color-border-base: var(--dt-color-black-200);
 }
 .d-recipe-leftbar-row--selected .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);
 }
 .d-recipe-leftbar-row__is-typing {
   --is-typing-size-shape: var(--dt-size-550);
@@ -9466,6 +9466,18 @@ ul {
   -webkit-animation-delay: var(--td200);
           animation-delay: var(--td200);
 }
+.d-recipe-leftbar-row .d-btn--inverted.d-btn--primary {
+  --button-color-text: var(--dt-shell-mention-color-surface-primary);
+}
+.d-recipe-leftbar-row .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-recipe-leftbar-row .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-recipe-leftbar-row .d-fc-success {
+  color: var(--dt-shell-color-foreground-positive) !important;
+}
 .d-recipe-leftbar-row__primary {
   display: flex;
   flex: 1;
@@ -9485,7 +9497,7 @@ ul {
           appearance: none;
 }
 .d-recipe-leftbar-row__primary: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);
 }
 .d-recipe-leftbar-row__primary:focus-visible {
   box-shadow: var(--dt-shadow-focus-inset);
@@ -9526,8 +9538,8 @@ ul {
 }
 .d-recipe-leftbar-row__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);
 }
 .d-recipe-leftbar-row__unread-count .d-recipe-leftbar-row__action {
   display: none;
@@ -9537,14 +9549,14 @@ ul {
   border-bottom-right-radius: var(--dt-size-radius-0);
 }
 .d-recipe-leftbar-row__unread-mention-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);
   border-top-left-radius: var(--dt-size-radius-0);
   border-bottom-left-radius: var(--dt-size-radius-0);
 }
 .d-recipe-leftbar-row__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);
 }
 .d-recipe-leftbar-row__active-voice {
   display: inline-flex;
@@ -9645,13 +9657,13 @@ ul {
   }
 }
 .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);
 }
 .d-recipe-leftbar-general-row__icon {
   display: flex;
@@ -9810,16 +9822,16 @@ ul {
   width: var(--dt-size-550);
   height: var(--dt-size-600);
   padding: var(--dt-space-0);
-  color: var(--dt-theme-topbar-button-color-foreground);
-  background-color: var(--dt-theme-topbar-button-color-background);
+  color: var(--dt-shell-action-color-foreground-primary-default);
+  background-color: var(--dt-shell-action-color-background-primary-default);
   border-radius: var(--dt-size-550);
 }
 .d-recipe-settings-menu-button:hover {
-  color: var(--dt-theme-topbar-button-color-foreground-hover);
-  background-color: var(--dt-theme-topbar-button-color-background-hover);
+  color: var(--dt-shell-action-color-foreground-primary-hover);
+  background-color: var(--dt-shell-action-color-background-primary-hover);
 }
 .d-recipe-settings-menu-button:active {
-  background-color: var(--dt-theme-topbar-button-color-background-active);
+  background-color: var(--dt-shell-action-color-background-primary-active);
 }
 .d-recipe-settings-menu-button-update {
   height: var(--dt-size-600);
@@ -9829,7 +9841,7 @@ ul {
   border-radius: var(--dt-size-radius-pill);
 }
 .d-recipe-settings-menu-button-update:hover {
-  color: var(--dt-theme-topbar-button-color-foreground-hover);
+  color: var(--dt-shell-action-color-foreground-primary-hover);
   background-color: hsla(var(--dt-color-blue-200-hsl) / 0.5);
 }
 .d-recipe-time-pill {
@@ -9897,9 +9909,9 @@ ul {
   cursor: pointer;
 }
 .d-recipe-leftbar-unread-pill-mentions {
-  color: var(--dt-theme-mention-color-foreground);
+  color: var(--dt-shell-mention-color-foreground-primary);
   font-weight: var(--dt-font-weight-bold);
-  background-color: var(--dt-theme-mention-color-background);
+  background-color: var(--dt-shell-mention-color-surface-primary);
 }
 .d-recipe-leftbar-unread-pill-messages {
   color: var(--dt-color-foreground-secondary-inverted);