@dialpad/dialtone-css 8.63.0 → 8.64.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/lib/build/less/components/avatar.less +2 -2
  2. package/lib/build/less/components/loader.less +5 -1
  3. package/lib/build/less/components/modal.less +2 -2
  4. package/lib/build/less/components/presence.less +7 -7
  5. package/lib/build/less/recipes/callbar_button.less +1 -1
  6. package/lib/build/less/recipes/callbox.less +4 -4
  7. package/lib/build/less/recipes/leftbar_row.less +44 -26
  8. package/lib/build/less/recipes/settings_menu_button.less +6 -6
  9. package/lib/build/less/recipes/unread_pill.less +2 -2
  10. package/lib/dist/dialtone-default-theme.css +64 -49
  11. package/lib/dist/dialtone-default-theme.min.css +1 -1
  12. package/lib/dist/dialtone.css +64 -49
  13. package/lib/dist/dialtone.min.css +1 -1
  14. package/lib/dist/tokens-docs.json +1 -1
  15. package/package.json +1 -1
package/lib/build/less/components/avatar.less CHANGED
@@ -26,7 +26,7 @@
26
26
  --avatar-size-text: var(--dt-font-size-200);
27
27
  --avatar-presence-position-right: var(--dt-space-200-negative);
28
28
  --avatar-presence-position-bottom: var(--dt-space-200-negative);
29
- --avatar-count-color-shadow: var(--dt-theme-sidebar-color-background);
29
+ --avatar-count-color-shadow: var(--dt-shell-color-surface-default);
30
30
 
31
31
  position: relative;
32
32
  display: flex;
@@ -124,7 +124,7 @@
124
124
 
125
125
  .d-recipe-leftbar-row--selected &,
126
126
  .d-recipe-leftbar-row__primary:hover & {
127
- --avatar-count-color-shadow: var(--dt-theme-sidebar-row-color-background-hover);
127
+ --avatar-count-color-shadow: var(--dt-shell-action-color-background-primary-hover);
128
128
  }
129
129
  }
130
130
 
package/lib/build/less/components/loader.less CHANGED
@@ -12,6 +12,10 @@
12
12
  // ============================================================================
13
13
  // $ DEFAULT LOADER
14
14
  // ----------------------------------------------------------------------------
15
- .d-loader-icon {
15
+ .d-loader {
16
+ display: inline-flex;
17
+ }
18
+
19
+ .d-loader__icon {
16
20
  animation: d-loading-circle 900ms infinite linear;
17
21
  }
package/lib/build/less/components/modal.less CHANGED
@@ -148,8 +148,8 @@
148
148
  // ----------------------------------------------------------------------------
149
149
  .d-modal__close {
150
150
  position: absolute;
151
- top: var(--dt-space-500); // 16
152
- right: var(--dt-space-500); // 16
151
+ inset-block-start: var(--dt-space-400);
152
+ inset-inline-end: var(--dt-space-400);
153
153
  margin: 0 !important;
154
154
  }
155
155
 
package/lib/build/less/components/presence.less CHANGED
@@ -7,12 +7,12 @@
7
7
  // visit https://dialtone.dialpad.com/components/presence
8
8
 
9
9
  .d-presence {
10
- --presence-color-border-base: var(--dt-theme-sidebar-color-background);
10
+ --presence-color-border-base: var(--dt-shell-color-surface-default);
11
11
  --presence-color-border-offline: var(--dt-color-border-bold);
12
- --presence-color-background-active: var(--dt-theme-presence-color-background-available);
13
- --presence-color-background-busy: var(--dt-theme-presence-color-background-busy-unavailable);
14
- --presence-color-background-away: var(--dt-theme-presence-color-background-busy);
15
- --presence-color-background-offline: var(--dt-theme-sidebar-color-background);
12
+ --presence-color-background-active: var(--dt-shell-presence-color-available);
13
+ --presence-color-background-busy: var(--dt-shell-presence-color-unavailable);
14
+ --presence-color-background-away: var(--dt-shell-presence-color-busy);
15
+ --presence-color-background-offline: var(--dt-shell-presence-color-offline);
16
16
  --presence-border-size: var(--dt-size-200);
17
17
  --presence-size: var(--dt-size-400);
18
18
 
@@ -24,11 +24,11 @@
24
24
  border-radius: var(--dt-size-radius-circle);
25
25
 
26
26
  .d-recipe-leftbar-row--selected & {
27
- --presence-color-border-base: var(--dt-theme-sidebar-selected-row-color-background);
27
+ --presence-color-border-base: var(--dt-shell-color-surface-default);
28
28
  }
29
29
 
30
30
  .d-recipe-leftbar-row__primary:hover & {
31
- --presence-color-border-base: var(--dt-theme-sidebar-row-color-background-hover);
31
+ --presence-color-border-base: var(--dt-shell-action-color-background-primary-hover);
32
32
  }
33
33
 
34
34
  &__inner {
package/lib/build/less/recipes/callbar_button.less CHANGED
@@ -39,7 +39,7 @@
39
39
  .d-recipe-callbar-button--active,
40
40
  .d-recipe-callbar-button--active:hover {
41
41
  .base-button__icon {
42
- color: var(--dt-theme-mention-color-background); // best replacement for --primary-color we have at the moment
42
+ color: var(--dt-shell-mention-color-surface-primary); // best replacement for --primary-color we have at the moment
43
43
  }
44
44
  }
45
45
 
package/lib/build/less/recipes/callbox.less CHANGED
@@ -1,6 +1,6 @@
1
1
  .d-recipe-callbox {
2
2
  padding: 0;
3
- color: var(--dt-color-foreground-primary);
3
+ color: var(--dt-shell-color-foreground-primary);
4
4
  background-color: var(--dt-color-surface-primary);
5
5
  border-radius: var(--dt-size-radius-400);
6
6
  }
@@ -24,7 +24,7 @@
24
24
  }
25
25
 
26
26
  &.d-recipe-callbox__border-default {
27
- border-color: var(--dt-color-border-default);
27
+ border-color: var(--dt-shell-color-border-default);
28
28
  }
29
29
 
30
30
  &.d-recipe-callbox__border-ai {
@@ -67,7 +67,7 @@
67
67
  min-width: 100%;
68
68
  padding: 0;
69
69
  overflow: clip;
70
- color: var(--dt-color-foreground-primary);
70
+ color: var(--dt-shell-color-foreground-strong);
71
71
  font: var(--dt-typography-headline-md);
72
72
  line-height: var(--dt-font-line-height-100);
73
73
  white-space: nowrap;
@@ -86,7 +86,7 @@
86
86
  min-width: 100%;
87
87
  padding: 0;
88
88
  overflow: hidden;
89
- color: var(--dt-color-foreground-tertiary);
89
+ color: var(--dt-shell-color-foreground-tertiary);
90
90
  font: var(--dt-typography-body-sm-compact);
91
91
  }
92
92
 
package/lib/build/less/recipes/leftbar_row.less CHANGED
@@ -2,20 +2,20 @@
2
2
  // ============================================================================
3
3
  // $ CSS CUSTOM PROPERTIES
4
4
  // ----------------------------------------------------------------------------
5
- --leftbar-row-color-foreground: var(--dt-theme-sidebar-color-foreground);
6
- --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background);
5
+ --leftbar-row-color-foreground: var(--dt-shell-color-foreground-primary);
6
+ --leftbar-row-color-background: var(--dt-shell-color-surface-default);
7
7
  --leftbar-row-radius: var(--dt-size-radius-pill);
8
8
  --leftbar-row-opacity: 100%;
9
- --leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-icon-color-foreground);
9
+ --leftbar-row-alpha-color-foreground: var(--dt-shell-color-foreground-primary);
10
10
  --leftbar-row-alpha-width: calc(var(--dt-size-300) * 10);
11
11
  --leftbar-row-alpha-height: calc(var(--dt-size-300) * 9);
12
12
  --leftbar-row-omega-height: var(--leftbar-row-alpha-height);
13
13
  --leftbar-row-unread-badge-display: inline-flex;
14
- --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground);
14
+ --leftbar-row-description-color-foreground: var(--dt-shell-color-foreground-primary);
15
15
  --leftbar-row-description-font-weight: var(--dt-font-weight-normal);
16
16
  --leftbar-row-description-font-size: var(--dt-font-size-200);
17
17
  --leftbar-row-description-line-height: var(--dt-font-line-height-200);
18
- --leftbar-row-status-color-foreground: var(--dt-theme-sidebar-status-color-foreground);
18
+ --leftbar-row-status-color-foreground: var(--dt-shell-color-foreground-muted);
19
19
  --leftbar-row-status-font-size: var(--dt-font-size-100);
20
20
  --leftbar-row-status-line-height: var(--dt-font-line-height-100);
21
21
  --leftbar-row-action-position-right: var(--dt-size-400);
@@ -28,7 +28,7 @@
28
28
  // ----------------------------------------------------------------------------
29
29
  position: relative;
30
30
  display: flex;
31
- background-color: var(--dt-theme-sidebar-row-color-background);
31
+ background-color: var(--dt-shell-color-surface-default);
32
32
  border-radius: var(--leftbar-row-radius);
33
33
  cursor: pointer;
34
34
  opacity: var(--leftbar-row-opacity);
@@ -59,14 +59,14 @@
59
59
 
60
60
  &:hover,
61
61
  &:focus-within {
62
- --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-hover);
62
+ --leftbar-row-color-background: var(--dt-shell-action-color-background-primary-hover);
63
63
 
64
64
  .d-presence {
65
65
  --presence-color-border-base: var(--dt-color-black-200);
66
66
  }
67
67
 
68
68
  .d-avatar__count {
69
- --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
69
+ --avatar-count-color-shadow: var(--dt-shell-action-color-background-primary-selected);
70
70
  }
71
71
  }
72
72
 
@@ -103,14 +103,14 @@
103
103
  }
104
104
 
105
105
  &__meta-context ~ &__meta-custom:not(:empty)::before {
106
- color: var(--dt-theme-sidebar-status-color-foreground);
106
+ color: var(--dt-shell-color-foreground-muted);
107
107
  content: " • ";
108
108
  }
109
109
 
110
110
  &--has-unread {
111
111
  --leftbar-row-description-font-weight: var(--dt-font-weight-bold);
112
- --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
113
- --leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
112
+ --leftbar-row-description-color-foreground: var(--dt-shell-color-foreground-strong);
113
+ --leftbar-row-alpha-color-foreground: var(--dt-shell-color-foreground-strong);
114
114
  }
115
115
 
116
116
  &--muted {
@@ -118,15 +118,15 @@
118
118
  }
119
119
 
120
120
  &--selected {
121
- --leftbar-row-color-background: var(--dt-theme-sidebar-selected-row-color-background);
122
- --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-selected-row-color-foreground);
121
+ --leftbar-row-color-background: var(--dt-shell-action-color-background-primary-selected);
122
+ --leftbar-row-description-color-foreground: var(--dt-shell-action-color-foreground-primary-selected);
123
123
 
124
124
  .d-presence {
125
125
  --presence-color-border-base: var(--dt-color-black-200);
126
126
  }
127
127
 
128
128
  .d-avatar__count {
129
- --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
129
+ --avatar-count-color-shadow: var(--dt-shell-action-color-background-primary-selected);
130
130
  }
131
131
  }
132
132
 
@@ -179,6 +179,24 @@
179
179
  // <button class="d-recipe-leftbar-row__action-button d-btn ..." ...>...</button>
180
180
  // </div>
181
181
  //
182
+
183
+ // Style overrides for leftbar button icon and background, using the shell tokens for theming
184
+ .d-btn--inverted.d-btn--primary {
185
+ --button-color-text: var(--dt-shell-mention-color-surface-primary);
186
+ }
187
+
188
+ .d-btn--inverted.d-btn--primary:hover:not([disabled]) {
189
+ --button-color-background: color-mix(in srgb, var(--dt-shell-mention-color-surface-primary) 10%, white 100%);
190
+ }
191
+
192
+ .d-btn--inverted.d-btn--primary:active:not([disabled]) {
193
+ --button-color-background: color-mix(in srgb, var(--dt-shell-mention-color-surface-primary) 30%, white 100%);
194
+ }
195
+
196
+ .d-fc-success {
197
+ color:var(--dt-shell-color-foreground-positive)!important;
198
+ }
199
+
182
200
  &__primary {
183
201
  // contains extra style properties to support both <button> and <a>
184
202
  display: flex;
@@ -198,7 +216,7 @@
198
216
  appearance: none;
199
217
 
200
218
  &:active {
201
- --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-active);
219
+ --leftbar-row-color-background: var(--dt-shell-action-color-background-primary-active);
202
220
  }
203
221
 
204
222
  &:focus-visible {
@@ -238,6 +256,8 @@
238
256
  min-width: 0;
239
257
  }
240
258
 
259
+
260
+
241
261
  &__omega {
242
262
  position: absolute;
243
263
  top: var(--leftbar-row-action-position-bottom);
@@ -253,8 +273,8 @@
253
273
 
254
274
  &__unread-badge {
255
275
  display: var(--leftbar-row-unread-badge-display);
256
- color: var(--dt-theme-mention-color-foreground);
257
- background-color: var(--dt-theme-mention-color-background);
276
+ color: var(--dt-shell-mention-color-foreground-primary);
277
+ background-color: var(--dt-shell-mention-color-surface-primary);
258
278
  }
259
279
 
260
280
  &__unread-count {
@@ -269,15 +289,15 @@
269
289
  }
270
290
 
271
291
  &__unread-mention-count-badge {
272
- color: var(--dt-theme-mention-color-foreground-strong);
273
- background-color: var(--dt-theme-mention-color-background-strong);
292
+ color: var(--dt-shell-mention-color-foreground-secondary);
293
+ background-color: var(--dt-shell-mention-color-surface-secondary);
274
294
  border-top-left-radius: var(--dt-size-radius-0);
275
295
  border-bottom-left-radius: var(--dt-size-radius-0);
276
296
  }
277
297
 
278
298
  &__unread-mention-only-count-badge {
279
- color: var(--dt-theme-mention-color-foreground-strong);
280
- background-color: var(--dt-theme-mention-color-background-strong);
299
+ color: var(--dt-shell-mention-color-foreground-secondary);
300
+ background-color: var(--dt-shell-mention-color-surface-secondary);
281
301
  }
282
302
 
283
303
  &__active-voice {
@@ -370,15 +390,15 @@
370
390
  // $ Contact Row
371
391
  // ----------------------------------------------------------------------------
372
392
  .d-recipe-contact-row--active {
373
- color: var(--dt-color-foreground-success);
393
+ color: var(--dt-shell-color-foreground-positive);
374
394
  }
375
395
 
376
396
  .d-recipe-contact-row--busy {
377
- color: var(--dt-color-foreground-critical);
397
+ color: var(--dt-shell-color-foreground-critical);
378
398
  }
379
399
 
380
400
  .d-recipe-contact-row--away {
381
- color: var(--dt-color-foreground-warning);
401
+ color: var(--dt-shell-color-foreground-warning);
382
402
  }
383
403
 
384
404
  // ============================================================================
@@ -437,5 +457,3 @@
437
457
  }
438
458
  }
439
459
  }
440
-
441
-
package/lib/build/less/recipes/settings_menu_button.less CHANGED
@@ -2,17 +2,17 @@
2
2
  width: var(--dt-size-550);
3
3
  height: var(--dt-size-600);
4
4
  padding: var(--dt-space-0);
5
- color: var(--dt-theme-topbar-button-color-foreground);
6
- background-color: var(--dt-theme-topbar-button-color-background);
5
+ color: var(--dt-shell-action-color-foreground-primary-default);
6
+ background-color: var(--dt-shell-action-color-background-primary-default);
7
7
  border-radius: var(--dt-size-550);
8
8
 
9
9
  &:hover {
10
- color: var(--dt-theme-topbar-button-color-foreground-hover);
11
- background-color: var(--dt-theme-topbar-button-color-background-hover);
10
+ color: var(--dt-shell-action-color-foreground-primary-hover);
11
+ background-color: var(--dt-shell-action-color-background-primary-hover);
12
12
  }
13
13
 
14
14
  &:active {
15
- background-color: var(--dt-theme-topbar-button-color-background-active);
15
+ background-color: var(--dt-shell-action-color-background-primary-active);
16
16
  }
17
17
  }
18
18
 
@@ -24,7 +24,7 @@
24
24
  border-radius: var(--dt-size-radius-pill);
25
25
 
26
26
  &:hover {
27
- color: var(--dt-theme-topbar-button-color-foreground-hover);
27
+ color: var(--dt-shell-action-color-foreground-primary-hover);
28
28
  background-color: hsla(var(--dt-color-blue-200-hsl) / 0.5);
29
29
  }
30
30
  }
package/lib/build/less/recipes/unread_pill.less CHANGED
@@ -13,9 +13,9 @@
13
13
  }
14
14
 
15
15
  .d-recipe-leftbar-unread-pill-mentions {
16
- color: var(--dt-theme-mention-color-foreground);
16
+ color: var(--dt-shell-mention-color-foreground-primary);
17
17
  font-weight: var(--dt-font-weight-bold);
18
- background-color: var(--dt-theme-mention-color-background);
18
+ background-color: var(--dt-shell-mention-color-surface-primary);
19
19
  }
20
20
 
21
21
  .d-recipe-leftbar-unread-pill-messages {
package/lib/dist/dialtone-default-theme.css CHANGED
@@ -1018,7 +1018,7 @@ template {
1018
1018
  --avatar-size-text: var(--dt-font-size-200);
1019
1019
  --avatar-presence-position-right: var(--dt-space-200-negative);
1020
1020
  --avatar-presence-position-bottom: var(--dt-space-200-negative);
1021
- --avatar-count-color-shadow: var(--dt-theme-sidebar-color-background);
1021
+ --avatar-count-color-shadow: var(--dt-shell-color-surface-default);
1022
1022
  position: relative;
1023
1023
  display: flex;
1024
1024
  color: var(--avatar-color-text);
@@ -1144,7 +1144,7 @@ template {
1144
1144
  }
1145
1145
  .d-recipe-leftbar-row--selected .d-avatar__count,
1146
1146
  .d-recipe-leftbar-row__primary:hover .d-avatar__count {
1147
- --avatar-count-color-shadow: var(--dt-theme-sidebar-row-color-background-hover);
1147
+ --avatar-count-color-shadow: var(--dt-shell-action-color-background-primary-hover);
1148
1148
  }
1149
1149
  .d-avatar--clickable {
1150
1150
  --avatar-color-border: transparent;
@@ -3268,7 +3268,10 @@ legend .d-label--md {
3268
3268
  .d-list-item__bottom {
3269
3269
  margin-top: var(--dt-space-200);
3270
3270
  }
3271
- .d-loader-icon {
3271
+ .d-loader {
3272
+ display: inline-flex;
3273
+ }
3274
+ .d-loader__icon {
3272
3275
  -webkit-animation: d-loading-circle 900ms infinite linear;
3273
3276
  animation: d-loading-circle 900ms infinite linear;
3274
3277
  }
@@ -3366,8 +3369,8 @@ legend .d-label--md {
3366
3369
  }
3367
3370
  .d-modal__close {
3368
3371
  position: absolute;
3369
- top: var(--dt-space-500);
3370
- right: var(--dt-space-500);
3372
+ inset-block-start: var(--dt-space-400);
3373
+ inset-inline-end: var(--dt-space-400);
3371
3374
  margin: 0 !important;
3372
3375
  }
3373
3376
  .d-modal__banner {
@@ -5137,12 +5140,12 @@ legend .d-label--md {
5137
5140
  align-items: center;
5138
5141
  }
5139
5142
  .d-presence {
5140
- --presence-color-border-base: var(--dt-theme-sidebar-color-background);
5143
+ --presence-color-border-base: var(--dt-shell-color-surface-default);
5141
5144
  --presence-color-border-offline: var(--dt-color-border-bold);
5142
- --presence-color-background-active: var(--dt-theme-presence-color-background-available);
5143
- --presence-color-background-busy: var(--dt-theme-presence-color-background-busy-unavailable);
5144
- --presence-color-background-away: var(--dt-theme-presence-color-background-busy);
5145
- --presence-color-background-offline: var(--dt-theme-sidebar-color-background);
5145
+ --presence-color-background-active: var(--dt-shell-presence-color-available);
5146
+ --presence-color-background-busy: var(--dt-shell-presence-color-unavailable);
5147
+ --presence-color-background-away: var(--dt-shell-presence-color-busy);
5148
+ --presence-color-background-offline: var(--dt-shell-presence-color-offline);
5146
5149
  --presence-border-size: var(--dt-size-200);
5147
5150
  --presence-size: var(--dt-size-400);
5148
5151
  display: inline-block;
@@ -5153,10 +5156,10 @@ legend .d-label--md {
5153
5156
  border-radius: var(--dt-size-radius-circle);
5154
5157
  }
5155
5158
  .d-recipe-leftbar-row--selected .d-presence {
5156
- --presence-color-border-base: var(--dt-theme-sidebar-selected-row-color-background);
5159
+ --presence-color-border-base: var(--dt-shell-color-surface-default);
5157
5160
  }
5158
5161
  .d-recipe-leftbar-row__primary:hover .d-presence {
5159
- --presence-color-border-base: var(--dt-theme-sidebar-row-color-background-hover);
5162
+ --presence-color-border-base: var(--dt-shell-action-color-background-primary-hover);
5160
5163
  }
5161
5164
  .d-presence__inner {
5162
5165
  box-sizing: border-box;
@@ -8596,7 +8599,7 @@ ul {
8596
8599
  }
8597
8600
  .d-recipe-callbar-button--active .base-button__icon,
8598
8601
  .d-recipe-callbar-button--active:hover .base-button__icon {
8599
- color: var(--dt-theme-mention-color-background);
8602
+ color: var(--dt-shell-mention-color-surface-primary);
8600
8603
  }
8601
8604
  .d-recipe-callbar-button--disabled {
8602
8605
  cursor: not-allowed;
@@ -8698,7 +8701,7 @@ ul {
8698
8701
  }
8699
8702
  .d-recipe-callbox {
8700
8703
  padding: 0;
8701
- color: var(--dt-color-foreground-primary);
8704
+ color: var(--dt-shell-color-foreground-primary);
8702
8705
  background-color: var(--dt-color-surface-primary);
8703
8706
  border-radius: var(--dt-size-radius-400);
8704
8707
  }
@@ -8719,7 +8722,7 @@ ul {
8719
8722
  border-block-start-width: 0;
8720
8723
  }
8721
8724
  .d-recipe-callbox__main-content.d-recipe-callbox__border-default {
8722
- border-color: var(--dt-color-border-default);
8725
+ border-color: var(--dt-shell-color-border-default);
8723
8726
  }
8724
8727
  .d-recipe-callbox__main-content.d-recipe-callbox__border-ai {
8725
8728
  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 +8757,7 @@ ul {
8754
8757
  min-width: 100%;
8755
8758
  padding: 0;
8756
8759
  overflow: clip;
8757
- color: var(--dt-color-foreground-primary);
8760
+ color: var(--dt-shell-color-foreground-strong);
8758
8761
  font: var(--dt-typography-headline-md);
8759
8762
  line-height: var(--dt-font-line-height-100);
8760
8763
  white-space: nowrap;
@@ -8771,7 +8774,7 @@ ul {
8771
8774
  min-width: 100%;
8772
8775
  padding: 0;
8773
8776
  overflow: hidden;
8774
- color: var(--dt-color-foreground-tertiary);
8777
+ color: var(--dt-shell-color-foreground-tertiary);
8775
8778
  font: var(--dt-typography-body-sm-compact);
8776
8779
  }
8777
8780
  .d-recipe-callbox__right {
@@ -9336,20 +9339,20 @@ ul {
9336
9339
  transform: rotate(90deg);
9337
9340
  }
9338
9341
  .d-recipe-leftbar-row {
9339
- --leftbar-row-color-foreground: var(--dt-theme-sidebar-color-foreground);
9340
- --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background);
9342
+ --leftbar-row-color-foreground: var(--dt-shell-color-foreground-primary);
9343
+ --leftbar-row-color-background: var(--dt-shell-color-surface-default);
9341
9344
  --leftbar-row-radius: var(--dt-size-radius-pill);
9342
9345
  --leftbar-row-opacity: 100%;
9343
- --leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-icon-color-foreground);
9346
+ --leftbar-row-alpha-color-foreground: var(--dt-shell-color-foreground-primary);
9344
9347
  --leftbar-row-alpha-width: calc(var(--dt-size-300) * 10);
9345
9348
  --leftbar-row-alpha-height: calc(var(--dt-size-300) * 9);
9346
9349
  --leftbar-row-omega-height: var(--leftbar-row-alpha-height);
9347
9350
  --leftbar-row-unread-badge-display: inline-flex;
9348
- --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground);
9351
+ --leftbar-row-description-color-foreground: var(--dt-shell-color-foreground-primary);
9349
9352
  --leftbar-row-description-font-weight: var(--dt-font-weight-normal);
9350
9353
  --leftbar-row-description-font-size: var(--dt-font-size-200);
9351
9354
  --leftbar-row-description-line-height: var(--dt-font-line-height-200);
9352
- --leftbar-row-status-color-foreground: var(--dt-theme-sidebar-status-color-foreground);
9355
+ --leftbar-row-status-color-foreground: var(--dt-shell-color-foreground-muted);
9353
9356
  --leftbar-row-status-font-size: var(--dt-font-size-100);
9354
9357
  --leftbar-row-status-line-height: var(--dt-font-line-height-100);
9355
9358
  --leftbar-row-action-position-right: var(--dt-size-400);
@@ -9358,7 +9361,7 @@ ul {
9358
9361
  --leftbar-row-action-height: var(--leftbar-row-action-width);
9359
9362
  position: relative;
9360
9363
  display: flex;
9361
- background-color: var(--dt-theme-sidebar-row-color-background);
9364
+ background-color: var(--dt-shell-color-surface-default);
9362
9365
  border-radius: var(--leftbar-row-radius);
9363
9366
  cursor: pointer;
9364
9367
  opacity: var(--leftbar-row-opacity);
@@ -9380,7 +9383,7 @@ ul {
9380
9383
  }
9381
9384
  .d-recipe-leftbar-row:hover,
9382
9385
  .d-recipe-leftbar-row:focus-within {
9383
- --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-hover);
9386
+ --leftbar-row-color-background: var(--dt-shell-action-color-background-primary-hover);
9384
9387
  }
9385
9388
  .d-recipe-leftbar-row:hover .d-presence,
9386
9389
  .d-recipe-leftbar-row:focus-within .d-presence {
@@ -9388,7 +9391,7 @@ ul {
9388
9391
  }
9389
9392
  .d-recipe-leftbar-row:hover .d-avatar__count,
9390
9393
  .d-recipe-leftbar-row:focus-within .d-avatar__count {
9391
- --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
9394
+ --avatar-count-color-shadow: var(--dt-shell-action-color-background-primary-selected);
9392
9395
  }
9393
9396
  .d-recipe-leftbar-row__description {
9394
9397
  overflow: hidden;
@@ -9409,26 +9412,26 @@ ul {
9409
9412
  text-overflow: ellipsis;
9410
9413
  }
9411
9414
  .d-recipe-leftbar-row__meta-context ~ .d-recipe-leftbar-row__meta-custom:not(:empty)::before {
9412
- color: var(--dt-theme-sidebar-status-color-foreground);
9415
+ color: var(--dt-shell-color-foreground-muted);
9413
9416
  content: " • ";
9414
9417
  }
9415
9418
  .d-recipe-leftbar-row--has-unread {
9416
9419
  --leftbar-row-description-font-weight: var(--dt-font-weight-bold);
9417
- --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
9418
- --leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
9420
+ --leftbar-row-description-color-foreground: var(--dt-shell-color-foreground-strong);
9421
+ --leftbar-row-alpha-color-foreground: var(--dt-shell-color-foreground-strong);
9419
9422
  }
9420
9423
  .d-recipe-leftbar-row--muted {
9421
9424
  --leftbar-row-opacity: 60%;
9422
9425
  }
9423
9426
  .d-recipe-leftbar-row--selected {
9424
- --leftbar-row-color-background: var(--dt-theme-sidebar-selected-row-color-background);
9425
- --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-selected-row-color-foreground);
9427
+ --leftbar-row-color-background: var(--dt-shell-action-color-background-primary-selected);
9428
+ --leftbar-row-description-color-foreground: var(--dt-shell-action-color-foreground-primary-selected);
9426
9429
  }
9427
9430
  .d-recipe-leftbar-row--selected .d-presence {
9428
9431
  --presence-color-border-base: var(--dt-color-black-200);
9429
9432
  }
9430
9433
  .d-recipe-leftbar-row--selected .d-avatar__count {
9431
- --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
9434
+ --avatar-count-color-shadow: var(--dt-shell-action-color-background-primary-selected);
9432
9435
  }
9433
9436
  .d-recipe-leftbar-row__is-typing {
9434
9437
  --is-typing-size-shape: var(--dt-size-550);
@@ -9466,6 +9469,18 @@ ul {
9466
9469
  -webkit-animation-delay: var(--td200);
9467
9470
  animation-delay: var(--td200);
9468
9471
  }
9472
+ .d-recipe-leftbar-row .d-btn--inverted.d-btn--primary {
9473
+ --button-color-text: var(--dt-shell-mention-color-surface-primary);
9474
+ }
9475
+ .d-recipe-leftbar-row .d-btn--inverted.d-btn--primary:hover:not([disabled]) {
9476
+ --button-color-background: color-mix(in srgb, var(--dt-shell-mention-color-surface-primary) 10%, white 100%);
9477
+ }
9478
+ .d-recipe-leftbar-row .d-btn--inverted.d-btn--primary:active:not([disabled]) {
9479
+ --button-color-background: color-mix(in srgb, var(--dt-shell-mention-color-surface-primary) 30%, white 100%);
9480
+ }
9481
+ .d-recipe-leftbar-row .d-fc-success {
9482
+ color: var(--dt-shell-color-foreground-positive) !important;
9483
+ }
9469
9484
  .d-recipe-leftbar-row__primary {
9470
9485
  display: flex;
9471
9486
  flex: 1;
@@ -9485,7 +9500,7 @@ ul {
9485
9500
  appearance: none;
9486
9501
  }
9487
9502
  .d-recipe-leftbar-row__primary:active {
9488
- --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-active);
9503
+ --leftbar-row-color-background: var(--dt-shell-action-color-background-primary-active);
9489
9504
  }
9490
9505
  .d-recipe-leftbar-row__primary:focus-visible {
9491
9506
  box-shadow: var(--dt-shadow-focus-inset);
@@ -9526,8 +9541,8 @@ ul {
9526
9541
  }
9527
9542
  .d-recipe-leftbar-row__unread-badge {
9528
9543
  display: var(--leftbar-row-unread-badge-display);
9529
- color: var(--dt-theme-mention-color-foreground);
9530
- background-color: var(--dt-theme-mention-color-background);
9544
+ color: var(--dt-shell-mention-color-foreground-primary);
9545
+ background-color: var(--dt-shell-mention-color-surface-primary);
9531
9546
  }
9532
9547
  .d-recipe-leftbar-row__unread-count .d-recipe-leftbar-row__action {
9533
9548
  display: none;
@@ -9537,14 +9552,14 @@ ul {
9537
9552
  border-bottom-right-radius: var(--dt-size-radius-0);
9538
9553
  }
9539
9554
  .d-recipe-leftbar-row__unread-mention-count-badge {
9540
- color: var(--dt-theme-mention-color-foreground-strong);
9541
- background-color: var(--dt-theme-mention-color-background-strong);
9555
+ color: var(--dt-shell-mention-color-foreground-secondary);
9556
+ background-color: var(--dt-shell-mention-color-surface-secondary);
9542
9557
  border-top-left-radius: var(--dt-size-radius-0);
9543
9558
  border-bottom-left-radius: var(--dt-size-radius-0);
9544
9559
  }
9545
9560
  .d-recipe-leftbar-row__unread-mention-only-count-badge {
9546
- color: var(--dt-theme-mention-color-foreground-strong);
9547
- background-color: var(--dt-theme-mention-color-background-strong);
9561
+ color: var(--dt-shell-mention-color-foreground-secondary);
9562
+ background-color: var(--dt-shell-mention-color-surface-secondary);
9548
9563
  }
9549
9564
  .d-recipe-leftbar-row__active-voice {
9550
9565
  display: inline-flex;
@@ -9645,13 +9660,13 @@ ul {
9645
9660
  }
9646
9661
  }
9647
9662
  .d-recipe-contact-row--active {
9648
- color: var(--dt-color-foreground-success);
9663
+ color: var(--dt-shell-color-foreground-positive);
9649
9664
  }
9650
9665
  .d-recipe-contact-row--busy {
9651
- color: var(--dt-color-foreground-critical);
9666
+ color: var(--dt-shell-color-foreground-critical);
9652
9667
  }
9653
9668
  .d-recipe-contact-row--away {
9654
- color: var(--dt-color-foreground-warning);
9669
+ color: var(--dt-shell-color-foreground-warning);
9655
9670
  }
9656
9671
  .d-recipe-leftbar-general-row__icon {
9657
9672
  display: flex;
@@ -9810,16 +9825,16 @@ ul {
9810
9825
  width: var(--dt-size-550);
9811
9826
  height: var(--dt-size-600);
9812
9827
  padding: var(--dt-space-0);
9813
- color: var(--dt-theme-topbar-button-color-foreground);
9814
- background-color: var(--dt-theme-topbar-button-color-background);
9828
+ color: var(--dt-shell-action-color-foreground-primary-default);
9829
+ background-color: var(--dt-shell-action-color-background-primary-default);
9815
9830
  border-radius: var(--dt-size-550);
9816
9831
  }
9817
9832
  .d-recipe-settings-menu-button:hover {
9818
- color: var(--dt-theme-topbar-button-color-foreground-hover);
9819
- background-color: var(--dt-theme-topbar-button-color-background-hover);
9833
+ color: var(--dt-shell-action-color-foreground-primary-hover);
9834
+ background-color: var(--dt-shell-action-color-background-primary-hover);
9820
9835
  }
9821
9836
  .d-recipe-settings-menu-button:active {
9822
- background-color: var(--dt-theme-topbar-button-color-background-active);
9837
+ background-color: var(--dt-shell-action-color-background-primary-active);
9823
9838
  }
9824
9839
  .d-recipe-settings-menu-button-update {
9825
9840
  height: var(--dt-size-600);
@@ -9829,7 +9844,7 @@ ul {
9829
9844
  border-radius: var(--dt-size-radius-pill);
9830
9845
  }
9831
9846
  .d-recipe-settings-menu-button-update:hover {
9832
- color: var(--dt-theme-topbar-button-color-foreground-hover);
9847
+ color: var(--dt-shell-action-color-foreground-primary-hover);
9833
9848
  background-color: hsla(var(--dt-color-blue-200-hsl) / 0.5);
9834
9849
  }
9835
9850
  .d-recipe-time-pill {
@@ -9897,9 +9912,9 @@ ul {
9897
9912
  cursor: pointer;
9898
9913
  }
9899
9914
  .d-recipe-leftbar-unread-pill-mentions {
9900
- color: var(--dt-theme-mention-color-foreground);
9915
+ color: var(--dt-shell-mention-color-foreground-primary);
9901
9916
  font-weight: var(--dt-font-weight-bold);
9902
- background-color: var(--dt-theme-mention-color-background);
9917
+ background-color: var(--dt-shell-mention-color-surface-primary);
9903
9918
  }
9904
9919
  .d-recipe-leftbar-unread-pill-messages {
9905
9920
  color: var(--dt-color-foreground-secondary-inverted);