@dialpad/dialtone-css 8.46.3 → 8.46.4

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 (25) hide show
  1. package/lib/build/less/components/avatar.less +2 -2
  2. package/lib/build/less/components/presence.less +2 -2
  3. package/lib/build/less/recipes/attachment_carousel.less +106 -106
  4. package/lib/build/less/recipes/callbar_button.less +8 -8
  5. package/lib/build/less/recipes/callbar_button_with_popover.less +6 -7
  6. package/lib/build/less/recipes/callbox.less +17 -17
  7. package/lib/build/less/recipes/combobox_multi_select.less +9 -9
  8. package/lib/build/less/recipes/contact_info.less +3 -3
  9. package/lib/build/less/recipes/editor.less +2 -3
  10. package/lib/build/less/recipes/emoji_row.less +7 -7
  11. package/lib/build/less/recipes/feed_item_pill.less +16 -16
  12. package/lib/build/less/recipes/feed_item_row.less +17 -17
  13. package/lib/build/less/recipes/grouped_chip.less +4 -5
  14. package/lib/build/less/recipes/ivr_node.less +9 -11
  15. package/lib/build/less/recipes/leftbar_row.less +28 -50
  16. package/lib/build/less/recipes/message_input.less +16 -16
  17. package/lib/build/less/recipes/settings_menu_button.less +2 -3
  18. package/lib/build/less/recipes/time_pill.less +2 -2
  19. package/lib/build/less/recipes/top_banner_info.less +6 -6
  20. package/lib/build/less/recipes/unread_pill.less +3 -3
  21. package/lib/dist/dialtone-default-theme.css +233 -251
  22. package/lib/dist/dialtone-default-theme.min.css +1 -1
  23. package/lib/dist/dialtone.css +233 -251
  24. package/lib/dist/dialtone.min.css +1 -1
  25. package/package.json +1 -1
package/lib/build/less/recipes/feed_item_row.less CHANGED
@@ -1,4 +1,4 @@
1
- .dt-recipe-feed-item-row {
1
+ .d-recipe-feed-item-row {
2
2
  position: relative;
3
3
  box-sizing: border-box;
4
4
  width: var(--dt-size-100-percent);
@@ -36,37 +36,37 @@
36
36
  }
37
37
  }
38
38
 
39
- .dt-recipe-feed-item-row__state--searched {
39
+ .d-recipe-feed-item-row__state--searched {
40
40
  background-color: var(--dt-color-surface-warning-subtle);
41
41
  }
42
42
 
43
- .dt-recipe-feed-item-row__state--error {
43
+ .d-recipe-feed-item-row__state--error {
44
44
  background-color: var(--dt-color-surface-critical-subtle);
45
45
  }
46
46
 
47
- .dt-recipe-feed-item-row__state-transition {
47
+ .d-recipe-feed-item-row__state-transition {
48
48
  transition: background-color 2s var(--ttf-in-out) 0s;
49
49
  }
50
50
 
51
- .dt-recipe-feed-item-row--active {
51
+ .d-recipe-feed-item-row--active {
52
52
  background-color: var(--dt-color-surface-secondary-opaque);
53
53
  }
54
54
 
55
- .dt-recipe-feed-item-row__avatar-container {
55
+ .d-recipe-feed-item-row__avatar-container {
56
56
  padding-top: var(--dt-space-300);
57
57
  padding-bottom: var(--dt-space-300);
58
58
  }
59
59
 
60
- .dt-recipe-feed-item-row__content {
60
+ .d-recipe-feed-item-row__content {
61
61
  padding-left: var(--dt-space-300);
62
62
  }
63
63
 
64
- .dt-recipe-feed-item-row__attachment {
64
+ .d-recipe-feed-item-row__attachment {
65
65
  padding-top: var(--dt-space-200);
66
66
  padding-bottom: var(--dt-space-300);
67
67
  }
68
68
 
69
- .dt-recipe-feed-item-row__image {
69
+ .d-recipe-feed-item-row__image {
70
70
  display: block;
71
71
  min-width: 5.6rem;
72
72
  max-width: 30rem;
@@ -76,12 +76,12 @@
76
76
  border-radius: var(--dt-size-radius-400);
77
77
  }
78
78
 
79
- .dt-recipe-feed-item-row__video {
79
+ .d-recipe-feed-item-row__video {
80
80
  display: block;
81
81
  height: 25.0rem;
82
82
  }
83
83
 
84
- .dt-recipe-feed-item-row__header {
84
+ .d-recipe-feed-item-row__header {
85
85
  display: flex;
86
86
  flex-wrap: wrap;
87
87
  gap: var(--dt-space-300);
@@ -90,17 +90,17 @@
90
90
  line-height: var(--dt-font-line-height-300);
91
91
  }
92
92
 
93
- .dt-recipe-feed-item-row__header-name {
93
+ .d-recipe-feed-item-row__header-name {
94
94
  font-weight: var(--dt-font-weight-bold);
95
95
  }
96
96
 
97
- .dt-recipe-feed-item-row__header-time {
97
+ .d-recipe-feed-item-row__header-time {
98
98
  flex-shrink: 0;
99
99
  color: var(--dt-color-foreground-tertiary);
100
100
  font-size: var(--dt-font-size-100);
101
101
  }
102
102
 
103
- .dt-recipe-feed-item-row__reactions {
103
+ .d-recipe-feed-item-row__reactions {
104
104
  display: flex;
105
105
  flex-wrap: wrap;
106
106
  padding-top: var(--dt-space-200);
@@ -108,12 +108,12 @@
108
108
  padding-left: var(--dt-space-300);
109
109
  }
110
110
 
111
- .dt-recipe-feed-item-row__threading {
111
+ .d-recipe-feed-item-row__threading {
112
112
  padding-top: var(--dt-space-200);
113
113
  padding-bottom: var(--dt-space-200);
114
114
  }
115
115
 
116
- .dt-recipe-feed-item-row__left-time {
116
+ .d-recipe-feed-item-row__left-time {
117
117
  color: var(--dt-color-foreground-tertiary);
118
118
  font-weight: var(--dt-font-weight-normal);
119
119
  font-size: var(--dt-font-size-100);
@@ -121,7 +121,7 @@
121
121
  vertical-align: middle;
122
122
  }
123
123
 
124
- .dt-recipe-feed-item-row__menu {
124
+ .d-recipe-feed-item-row__menu {
125
125
  position: absolute;
126
126
  top: var(--dt-space-550-negative);
127
127
  right: var(--dt-space-450);
package/lib/build/less/recipes/grouped_chip.less CHANGED
@@ -1,25 +1,24 @@
1
- .dt-recipe-grouped-chip {
1
+ .d-recipe-grouped-chip {
2
2
  display: inline-flex;
3
3
  white-space: nowrap;
4
4
  background-color: unset;
5
5
  background-image: unset;
6
6
  }
7
7
 
8
- .dt-recipe-grouped-chip__content {
8
+ .d-recipe-grouped-chip__content {
9
9
  font-variant-numeric: tabular-nums;
10
10
  }
11
11
 
12
- .dt-recipe-grouped-chip__content-left {
12
+ .d-recipe-grouped-chip__content-left {
13
13
  max-width: var(--dt-size-730);
14
14
  background-color: var(--dt-color-surface-moderate-opaque);
15
15
  border-top-left-radius: var(--dt-size-radius-pill);
16
16
  border-bottom-left-radius: var(--dt-size-radius-pill);
17
17
  }
18
18
 
19
- .dt-recipe-grouped-chip__content-right {
19
+ .d-recipe-grouped-chip__content-right {
20
20
  max-width: var(--dt-size-730);
21
21
  background-color: var(--dt-color-purple-200);
22
22
  border-top-right-radius: var(--dt-size-radius-pill);
23
23
  border-bottom-right-radius: var(--dt-size-radius-pill);
24
24
  }
25
-
package/lib/build/less/recipes/ivr_node.less CHANGED
@@ -1,4 +1,4 @@
1
- .dt-recipe-ivr-node {
1
+ .d-recipe-ivr-node {
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  align-items: center;
@@ -6,25 +6,25 @@
6
6
  cursor: pointer;
7
7
  }
8
8
 
9
- .dt-recipe-ivr-node__header-left {
9
+ .d-recipe-ivr-node__header-left {
10
10
  display: flex;
11
11
  align-items: center;
12
12
  }
13
13
 
14
- .dt-recipe-ivr-node__label {
14
+ .d-recipe-ivr-node__label {
15
15
  font-weight: var(--dt-font-weight-bold);
16
16
  font-size: var(--dt-font-size-200);
17
17
  }
18
18
 
19
- .dt-recipe-ivr-node__dropdown-list {
19
+ .d-recipe-ivr-node__dropdown-list {
20
20
  width: var(--dt-size-825);
21
21
  }
22
22
 
23
- .dt-recipe-ivr-node__goto-icon {
23
+ .d-recipe-ivr-node__goto-icon {
24
24
  transform: rotate(90deg);
25
25
  }
26
26
 
27
- .dt-recipe-ivr-node__connector {
27
+ .d-recipe-ivr-node__connector {
28
28
  z-index: var(--zi-base);
29
29
  display: flex;
30
30
  align-items: center;
@@ -37,20 +37,18 @@
37
37
  border-radius: var(--dt-size-radius-circle);
38
38
  }
39
39
 
40
- .dt-recipe-ivr-node__connector--selected {
40
+ .d-recipe-ivr-node__connector--selected {
41
41
  margin-bottom: var(--dt-space-400-negative);
42
42
  }
43
43
 
44
- .dt-recipe-ivr-node__connector-dtmf {
44
+ .d-recipe-ivr-node__connector-dtmf {
45
45
  width: var(--dt-size-550);
46
46
  height: var(--dt-size-550);
47
47
  margin-bottom: var(--dt-space-450-negative);
48
48
  color: var(--dt-color-neutral-white);
49
49
  font-size: var(--dt-font-size-200);
50
50
 
51
- .dt-recipe-ivr-node__connector--selected {
51
+ .d-recipe-ivr-node__connector--selected {
52
52
  margin-bottom: var(--dt-space-500-negative);
53
53
  }
54
54
  }
55
-
56
-
package/lib/build/less/recipes/leftbar_row.less CHANGED
@@ -1,4 +1,4 @@
1
- .dt-recipe-leftbar-row {
1
+ .d-recipe-leftbar-row {
2
2
  // ============================================================================
3
3
  // $ CSS CUSTOM PROPERTIES
4
4
  // ----------------------------------------------------------------------------
@@ -40,19 +40,19 @@
40
40
  // $ VARIANTS
41
41
  // ----------------------------------------------------------------------------
42
42
  //
43
- // <div class="dt-recipe-leftbar-row dt-recipe-leftbar-row--{$VARIANT}">
43
+ // <div class="d-recipe-leftbar-row d-recipe-leftbar-row--{$VARIANT}">
44
44
  // ...
45
45
  // </div>
46
46
  //
47
- &:not(.dt-recipe-leftbar-row--no-action):hover,
48
- &:not(.dt-recipe-leftbar-row--no-action):focus-within {
47
+ &:not(.d-recipe-leftbar-row--no-action):hover,
48
+ &:not(.d-recipe-leftbar-row--no-action):focus-within {
49
49
  --leftbar-row-unread-badge-display: none;
50
50
 
51
- .dt-recipe-leftbar-row__action {
51
+ .d-recipe-leftbar-row__action {
52
52
  display: inline-flex;
53
53
  }
54
54
 
55
- .dt-recipe-leftbar-row__action-button {
55
+ .d-recipe-leftbar-row__action-button {
56
56
  opacity: 1;
57
57
  }
58
58
  }
@@ -74,12 +74,12 @@
74
74
  // $ LABEL'S ELEMENTS
75
75
  // ----------------------------------------------------------------------------
76
76
  //
77
- // <div class="dt-recipe-leftbar-row__description">
77
+ // <div class="d-recipe-leftbar-row__description">
78
78
  // ...
79
79
  // </div>
80
- // <div class="dt-recipe-leftbar-row__status">
81
- // <span class="dt-recipe-leftbar-row__meta-context ...">...</span>
82
- // <span class="dt-recipe-leftbar-row__meta-custom">...</span>
80
+ // <div class="d-recipe-leftbar-row__status">
81
+ // <span class="d-recipe-leftbar-row__meta-context ...">...</span>
82
+ // <span class="d-recipe-leftbar-row__meta-custom">...</span>
83
83
  // </div>
84
84
  //
85
85
  &__description {
@@ -152,7 +152,7 @@
152
152
  border-radius: var(--dt-size-radius-pill);
153
153
  opacity: 0.3;
154
154
  transition: all 500ms ease;
155
- animation: wave 1.5s ease infinite;
155
+ animation: d-recipe-leftbar-row-wave 1.5s ease infinite;
156
156
 
157
157
  &:nth-child(1) {
158
158
  animation-delay: 0ms;
@@ -172,11 +172,11 @@
172
172
  // $ ACTIONABLE ELEMENTS
173
173
  // ----------------------------------------------------------------------------
174
174
  //
175
- // <el class="dt-recipe-leftbar-row__primary" ...>
175
+ // <el class="d-recipe-leftbar-row__primary" ...>
176
176
  // ...
177
177
  // </el>
178
- // <div class="dt-recipe-leftbar-row__action">
179
- // <button class="dt-recipe-leftbar-row__action-button d-btn ..." ...>...</button>
178
+ // <div class="d-recipe-leftbar-row__action">
179
+ // <button class="d-recipe-leftbar-row__action-button d-btn ..." ...>...</button>
180
180
  // </div>
181
181
  //
182
182
  &__primary {
@@ -216,9 +216,9 @@
216
216
  // $ PRIMARY'S MAIN ELEMENTS
217
217
  // ----------------------------------------------------------------------------
218
218
  //
219
- // <div class="dt-recipe-leftbar-row__alpha">...</div>
220
- // <div class="dt-recipe-leftbar-row__label">...</div>
221
- // <div class="dt-recipe-leftbar-row__omega">...</div>
219
+ // <div class="d-recipe-leftbar-row__alpha">...</div>
220
+ // <div class="d-recipe-leftbar-row__label">...</div>
221
+ // <div class="d-recipe-leftbar-row__omega">...</div>
222
222
 
223
223
  &__alpha {
224
224
  display: flex;
@@ -258,7 +258,7 @@
258
258
  }
259
259
 
260
260
  &__unread-count {
261
- .dt-recipe-leftbar-row__action {
261
+ .d-recipe-leftbar-row__action {
262
262
  display: none;
263
263
  }
264
264
  }
@@ -283,7 +283,7 @@
283
283
  &__active-voice {
284
284
  display: inline-flex;
285
285
  color: var(--dt-color-purple-400);
286
- .opacity-pulsate();
286
+ .d-recipe-leftbar-row-opacity-pulsate();
287
287
  }
288
288
 
289
289
  &__dnd {
@@ -300,18 +300,18 @@
300
300
  border: var(--dt-size-100) solid var(--dt-color-border-subtle);
301
301
  border-radius: var(--dt-size-radius-500);
302
302
 
303
- .dt-recipe-leftbar-row__primary {
303
+ .d-recipe-leftbar-row__primary {
304
304
  margin: calc(var(--dt-size-100) * -1);
305
305
  }
306
306
  }
307
307
 
308
308
  &--contact-centers {
309
- .dt-recipe-leftbar-row__alpha {
309
+ .d-recipe-leftbar-row__alpha {
310
310
  padding-right: var(--dt-space-450);
311
311
  padding-left: var(--dt-space-450);
312
312
  }
313
313
 
314
- .dt-recipe-leftbar-row__action-container {
314
+ .d-recipe-leftbar-row__action-container {
315
315
  display: inline-flex;
316
316
  align-items: center;
317
317
  justify-content: flex-end;
@@ -327,10 +327,10 @@
327
327
  }
328
328
  }
329
329
 
330
- .opacity-pulsate {
331
- -webkit-animation-name: opacity-pulsate;
332
- -moz-animation-name: opacity-pulsate;
333
- animation-name: opacity-pulsate;
330
+ .d-recipe-leftbar-row-opacity-pulsate {
331
+ -webkit-animation-name: d-recipe-leftbar-row-opacity-pulsate;
332
+ -moz-animation-name: d-recipe-leftbar-row-opacity-pulsate;
333
+ animation-name: d-recipe-leftbar-row-opacity-pulsate;
334
334
  -webkit-animation-duration: 1s;
335
335
  -moz-animation-duration: 1s;
336
336
  animation-duration: 1s;
@@ -342,7 +342,7 @@
342
342
  animation-fill-mode: both;
343
343
  }
344
344
 
345
- @keyframes opacity-pulsate {
345
+ @keyframes d-recipe-leftbar-row-opacity-pulsate {
346
346
  0%,
347
347
  100% {
348
348
  opacity: 0.2;
@@ -353,29 +353,7 @@
353
353
  }
354
354
  }
355
355
 
356
- @keyframes opacity-pulsate {
357
- 0%,
358
- 100% {
359
- opacity: 0.2;
360
- }
361
-
362
- 50% {
363
- opacity: 1;
364
- }
365
- }
366
-
367
- @keyframes opacity-pulsate {
368
- 0%,
369
- 100% {
370
- opacity: 0.2;
371
- }
372
-
373
- 50% {
374
- opacity: 1;
375
- }
376
- }
377
-
378
- @keyframes wave {
356
+ @keyframes d-recipe-leftbar-row-wave {
379
357
  0%,
380
358
  50%,
381
359
  100% {
package/lib/build/less/recipes/message_input.less CHANGED
@@ -1,4 +1,4 @@
1
- .dt-recipe-message-input {
1
+ .d-recipe-message-input {
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  line-height: var(--dt-font-line-height-400);
@@ -16,59 +16,59 @@
16
16
  }
17
17
  }
18
18
 
19
- .dt-recipe-message-input__editor-wrapper {
19
+ .d-recipe-message-input__editor-wrapper {
20
20
  padding: var(--dt-space-450) var(--dt-space-500) var(--dt-space-300);
21
21
  }
22
22
 
23
- .dt-recipe-message-input__remaining-char {
23
+ .d-recipe-message-input__remaining-char {
24
24
  margin-right: var(--dt-space-300);
25
25
  color: var(--dt-color-foreground-critical);
26
26
  font-size: var(--dt-font-size-100);
27
27
  }
28
28
 
29
- .dt-recipe-message-input__remaining-char__tooltip {
29
+ .d-recipe-message-input__remaining-char-tooltip {
30
30
  margin-top: auto;
31
31
  margin-bottom: auto;
32
32
  }
33
33
 
34
- .dt-recipe-message-input__button {
34
+ .d-recipe-message-input__button {
35
35
  max-width: 2.8rem;
36
36
  max-height: 2.8rem;
37
37
  border-radius: var(--dt-size-radius-300);
38
38
  }
39
39
 
40
- .dt-recipe-message-input__send-button.dt-recipe-message-input__button:not(.d-btn--icon-only),
41
- .dt-recipe-message-input__cancel-button {
40
+ .d-recipe-message-input__send-button.d-recipe-message-input__button:not(.d-btn--icon-only),
41
+ .d-recipe-message-input__cancel-button {
42
42
  max-width: unset;
43
43
  padding: var(--dt-space-350);
44
44
  }
45
45
 
46
- .dt-recipe-message-input__send-button--disabled {
46
+ .d-recipe-message-input__send-button--disabled {
47
47
  color: var(--dt-color-foreground-muted);
48
48
  background-color: unset;
49
49
  cursor: default;
50
50
  }
51
51
 
52
- .dt-recipe-message-input__bottom-section {
52
+ .d-recipe-message-input__bottom-section {
53
53
  display: flex;
54
54
  justify-content: space-between;
55
55
  padding: var(--dt-space-300) var(--dt-space-400) var(--dt-space-400);
56
56
  }
57
57
 
58
- .dt-recipe-message-input__bottom-section-left,
59
- .dt-recipe-message-input__bottom-section-right {
58
+ .d-recipe-message-input__bottom-section-left,
59
+ .d-recipe-message-input__bottom-section-right {
60
60
  display: flex;
61
61
  }
62
62
 
63
- .dt-recipe-message-input__image-input {
63
+ .d-recipe-message-input__image-input {
64
64
  position: absolute;
65
65
  }
66
66
 
67
- .dt-recipe-message-input-meeting-pill {
67
+ .d-recipe-message-input-meeting-pill {
68
68
  display: inline-block;
69
69
  }
70
70
 
71
- .dt-recipe-message-input-meeting-pill__layout {
71
+ .d-recipe-message-input-meeting-pill__layout {
72
72
  grid-template-areas: 'left content right';
73
73
  grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
74
74
  gap: var(--dt-space-400);
@@ -80,13 +80,13 @@
80
80
  border-radius: var(--dt-size-radius-300);
81
81
  }
82
82
 
83
- .dt-recipe-message-input-meeting-pill__icon {
83
+ .d-recipe-message-input-meeting-pill__icon {
84
84
  display: flex;
85
85
  align-items: center;
86
86
  padding: var(--dt-space-350);
87
87
  }
88
88
 
89
- .dt-recipe-message-input-meeting-pill__close {
89
+ .d-recipe-message-input-meeting-pill__close {
90
90
  display: flex;
91
91
  justify-content: flex-end;
92
92
  }
package/lib/build/less/recipes/settings_menu_button.less CHANGED
@@ -1,4 +1,4 @@
1
- .dt-recipe-settings-menu-button {
1
+ .d-recipe-settings-menu-button {
2
2
  width: var(--dt-size-550);
3
3
  height: var(--dt-size-600);
4
4
  padding: var(--dt-space-0);
@@ -16,7 +16,7 @@
16
16
  }
17
17
  }
18
18
 
19
- .dt-recipe-settings-menu-button-update {
19
+ .d-recipe-settings-menu-button-update {
20
20
  height: var(--dt-size-600);
21
21
  color: var(--dt-color-blue-500);
22
22
  background-color: hsla(var(--dt-color-blue-200-hsl) / 0.25);
@@ -28,4 +28,3 @@
28
28
  background-color: hsla(var(--dt-color-blue-200-hsl) / 0.5);
29
29
  }
30
30
  }
31
-
package/lib/build/less/recipes/time_pill.less CHANGED
@@ -1,4 +1,4 @@
1
- .dt-recipe-time-pill {
1
+ .d-recipe-time-pill {
2
2
  padding: var(--dt-space-300) var(--dt-space-500);
3
3
  color: var(--dt-color-foreground-primary);
4
4
  font-size: var(--dt-font-size-100);
@@ -6,4 +6,4 @@
6
6
  background-color: var(--dt-color-surface-primary);
7
7
  border: var(--dt-size-border-100) solid var(--dt-color-border-default);
8
8
  border-radius: var(--dt-size-radius-pill);
9
- }
9
+ }
package/lib/build/less/recipes/top_banner_info.less CHANGED
@@ -1,4 +1,4 @@
1
- .dt-recipe-top-banner-info {
1
+ .d-recipe-top-banner-info {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  justify-content: space-between;
@@ -6,12 +6,12 @@
6
6
  font-size: var(--dt-font-size-100);
7
7
  }
8
8
 
9
- .dt-recipe-top-banner-info__left {
10
- min-width: 20%;
9
+ .d-recipe-top-banner-info__left {
10
+ min-width: var(--dt-size-20-percent);
11
11
  margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);
12
12
  }
13
13
 
14
- .dt-recipe-top-banner-info__middle {
14
+ .d-recipe-top-banner-info__middle {
15
15
  display: flex;
16
16
  gap: var(--dt-size-300);
17
17
  align-items: center;
@@ -19,12 +19,12 @@
19
19
  margin-bottom: var(--dt-space-300);
20
20
  }
21
21
 
22
- .dt-recipe-top-banner-info__right {
22
+ .d-recipe-top-banner-info__right {
23
23
  display: flex;
24
24
  gap: var(--dt-size-300);
25
25
  align-items: baseline;
26
26
  justify-content: flex-end;
27
- min-width: 20%;
27
+ min-width: var(--dt-size-20-percent);
28
28
  margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;
29
29
  text-align: right;
30
30
  }
package/lib/build/less/recipes/unread_pill.less CHANGED
@@ -1,4 +1,4 @@
1
- .dt-recipe-leftbar-unread-pill {
1
+ .d-recipe-leftbar-unread-pill {
2
2
  display: flex;
3
3
  gap: var(--dt-space-300);
4
4
  align-items: center;
@@ -12,13 +12,13 @@
12
12
  cursor: pointer;
13
13
  }
14
14
 
15
- .dt-recipe-leftbar-unread-pill-mentions {
15
+ .d-recipe-leftbar-unread-pill-mentions {
16
16
  color: var(--dt-theme-mention-color-foreground);
17
17
  font-weight: var(--dt-font-weight-bold);
18
18
  background-color: var(--dt-theme-mention-color-background);
19
19
  }
20
20
 
21
- .dt-recipe-leftbar-unread-pill-messages {
21
+ .d-recipe-leftbar-unread-pill-messages {
22
22
  color: var(--dt-color-foreground-secondary-inverted);
23
23
  background-color: var(--dt-color-surface-contrast);
24
24
  }