@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/components/avatar.less CHANGED
@@ -122,8 +122,8 @@
122
122
  border-radius: var(--dt-size-radius-pill);
123
123
  box-shadow: 0 0 0 var(--dt-size-200) var(--avatar-count-color-shadow);
124
124
 
125
- .dt-recipe-leftbar-row--selected &,
126
- .dt-recipe-leftbar-row__primary:hover & {
125
+ .d-recipe-leftbar-row--selected &,
126
+ .d-recipe-leftbar-row__primary:hover & {
127
127
  --avatar-count-color-shadow: var(--dt-theme-sidebar-row-color-background-hover);
128
128
  }
129
129
  }
package/lib/build/less/components/presence.less CHANGED
@@ -23,11 +23,11 @@
23
23
  border-width: var(--presence-border-size);
24
24
  border-radius: var(--dt-size-radius-circle);
25
25
 
26
- .dt-recipe-leftbar-row--selected & {
26
+ .d-recipe-leftbar-row--selected & {
27
27
  --presence-color-border-base: var(--dt-theme-sidebar-selected-row-color-background);
28
28
  }
29
29
 
30
- .dt-recipe-leftbar-row__primary:hover & {
30
+ .d-recipe-leftbar-row__primary:hover & {
31
31
  --presence-color-border-base: var(--dt-theme-sidebar-row-color-background-hover);
32
32
  }
33
33
 
package/lib/build/less/recipes/attachment_carousel.less CHANGED
@@ -1,109 +1,109 @@
1
- .dt-recipe-attachment-carousel {
1
+ .d-recipe-attachment-carousel {
2
2
  position: relative;
3
3
  width: var(--dt-space-1000);
4
4
  max-height: 100px; /* stylelint-disable-line meowtec/no-px */
5
-
6
- .dt-recipe-attachment-carousel__media-list {
7
- display: flex;
8
- flex-direction: row;
9
- padding-left: 0;
10
- overflow-x: scroll;
11
-
12
- &::-webkit-scrollbar {
13
- display: none;
14
- }
15
- }
16
-
17
- .dt-recipe-attachment-carousel__arrow {
18
- position: absolute;
19
- top: var(--dt-space-30-percent);
20
- background-color: var(--dt-color-neutral-white);
21
- border: var(--dt-space-100) solid;
22
- border-color: var(--bc-default);
23
- border-width: var(--dt-size-100);
24
- opacity: 0;
25
-
26
- .dt-recipe-attachment-carousel:hover & {
27
- opacity: 1;
28
- }
29
-
30
- .dt-recipe-attachment-carousel__arrow--left {
31
- left: var(--dt-space-300);
32
- }
33
-
34
- .dt-recipe-attachment-carousel__arrow--right {
35
- right: var(--dt-space-300);
36
- }
37
- }
38
-
39
- .dt-recipe-attachment-carousel__image {
40
- position: relative;
41
-
42
- .dt-recipe-attachment-carousel__image__close-button {
43
- position: absolute;
44
- top: inherit;
45
- right: inherit;
46
- color: var(--dt-color-neutral-white);
47
- background-color: var(--dt-color-black-400);
48
- border: var(--dt-space-100) solid;
49
- border-color: var(--dt-color-neutral-white);
50
- border-width: var(--dt-size-200);
51
- opacity: 0;
52
-
53
- .dt-recipe-attachment-carousel__image:focus-within &, .dt-recipe-attachment-carousel__image:hover & {
54
- opacity: 1;
55
- }
56
- }
57
-
58
- .dt-recipe-attachment-carousel__image__viewer {
59
- width: var(--dt-size-700);
60
- height: var(--dt-size-700);
61
- object-fit: cover;
62
- border: var(--dt-space-100) solid;
63
- border-color: var(--dt-color-border-subtle);
64
- border-width: var(--dt-size-350);
65
- border-radius: var(--br4);
66
- }
67
-
68
- .dt-recipe-attachment-carousel__image__top-right {
69
- position: absolute;
70
- top: var(--dt-size-100);
71
- right: var(--dt-size-100);
72
- }
73
-
74
- .dt-recipe-attachment-carousel__image__progress-bar {
75
- position: absolute;
76
- top: inherit;
77
- right: inherit;
78
- display: flex;
79
- background-color: var(--dt-color-neutral-white);
80
- border: var(--dt-space-100) solid;
81
- border-color: var(--dt-color-border-subtle);
82
- border-width: var(--dt-size-200);
83
- border-radius: 50%;
84
- transform: rotate(-90deg);
85
- }
86
- }
87
-
88
- .dt-recipe-attachment-carousel__progress-bar {
89
- width: var(--dt-size-550);
90
- height: var(--dt-size-550);
91
-
92
- .dt-recipe-attachment-carousel__progress-bar__circle {
93
- fill: none;
94
- stroke-width: 2;
95
- stroke-dasharray: var(--stroke-dasharray);
96
- }
97
-
98
- .dt-recipe-attachment-carousel__progress-bar__circle:nth-child(1) {
99
- stroke: var(--dt-color-black-100);
100
- stroke-dashoffset: 0;
101
- }
102
-
103
- .dt-recipe-attachment-carousel__progress-bar__circle:nth-child(2) {
104
- transition: stroke-dashoffset 500ms linear;
105
- stroke: var(--dt-color-purple-500);
106
- stroke-dashoffset: var(--stroke-dashoffset);
107
- }
108
- }
109
- }
5
+ }
6
+
7
+ .d-recipe-attachment-carousel__media-list {
8
+ display: flex;
9
+ flex-direction: row;
10
+ padding-left: 0;
11
+ overflow-x: scroll;
12
+ }
13
+
14
+ .d-recipe-attachment-carousel__media-list::-webkit-scrollbar {
15
+ display: none;
16
+ }
17
+
18
+ .d-recipe-attachment-carousel__arrow {
19
+ position: absolute;
20
+ top: var(--dt-space-30-percent);
21
+ background-color: var(--dt-color-neutral-white);
22
+ border: var(--dt-space-100) solid;
23
+ border-color: var(--bc-default);
24
+ border-width: var(--dt-size-100);
25
+ opacity: 0;
26
+ }
27
+
28
+ .d-recipe-attachment-carousel:hover .d-recipe-attachment-carousel__arrow {
29
+ opacity: 1;
30
+ }
31
+
32
+ .d-recipe-attachment-carousel__arrow--left {
33
+ left: var(--dt-space-300);
34
+ }
35
+
36
+ .d-recipe-attachment-carousel__arrow--right {
37
+ right: var(--dt-space-300);
38
+ }
39
+
40
+ .d-recipe-attachment-carousel__image {
41
+ position: relative;
42
+ }
43
+
44
+ .d-recipe-attachment-carousel__image-close-button {
45
+ position: absolute;
46
+ top: inherit;
47
+ right: inherit;
48
+ color: var(--dt-color-neutral-white);
49
+ background-color: var(--dt-color-black-400);
50
+ border: var(--dt-space-100) solid;
51
+ border-color: var(--dt-color-neutral-white);
52
+ border-width: var(--dt-size-200);
53
+ opacity: 0;
54
+ }
55
+
56
+ .d-recipe-attachment-carousel__image:focus-within .d-recipe-attachment-carousel__image-close-button, .d-recipe-attachment-carousel__image:hover .d-recipe-attachment-carousel__image-close-button {
57
+ opacity: 1;
58
+ }
59
+
60
+ .d-recipe-attachment-carousel__image-viewer {
61
+ width: var(--dt-size-700);
62
+ height: var(--dt-size-700);
63
+ object-fit: cover;
64
+ border: var(--dt-space-100) solid;
65
+ border-color: var(--dt-color-border-subtle);
66
+ border-width: var(--dt-size-350);
67
+ border-radius: var(--br4);
68
+ }
69
+
70
+ .d-recipe-attachment-carousel__image-top-right {
71
+ position: absolute;
72
+ top: var(--dt-size-100);
73
+ right: var(--dt-size-100);
74
+ }
75
+
76
+ .d-recipe-attachment-carousel__image-progress-bar {
77
+ position: absolute;
78
+ top: inherit;
79
+ right: inherit;
80
+ display: flex;
81
+ background-color: var(--dt-color-neutral-white);
82
+ border: var(--dt-space-100) solid;
83
+ border-color: var(--dt-color-border-subtle);
84
+ border-width: var(--dt-size-200);
85
+ border-radius: 50%;
86
+ transform: rotate(-90deg);
87
+ }
88
+
89
+ .d-recipe-attachment-carousel__progress-bar {
90
+ width: var(--dt-size-550);
91
+ height: var(--dt-size-550);
92
+ }
93
+
94
+ .d-recipe-attachment-carousel__progress-bar-circle {
95
+ fill: none;
96
+ stroke-width: 2;
97
+ stroke-dasharray: var(--stroke-dasharray);
98
+ }
99
+
100
+ .d-recipe-attachment-carousel__progress-bar-circle:nth-child(1) {
101
+ stroke: var(--dt-color-black-100);
102
+ stroke-dashoffset: 0;
103
+ }
104
+
105
+ .d-recipe-attachment-carousel__progress-bar-circle:nth-child(2) {
106
+ transition: stroke-dashoffset 500ms linear;
107
+ stroke: var(--dt-color-purple-500);
108
+ stroke-dashoffset: var(--stroke-dashoffset);
109
+ }
package/lib/build/less/recipes/callbar_button.less CHANGED
@@ -10,12 +10,12 @@
10
10
  // ============================================================================
11
11
  // $ BASE STYLE
12
12
  // ----------------------------------------------------------------------------
13
- .dt-recipe-callbar-button {
14
- &:not(.dt-recipe-callbar-button--circle) {
13
+ .d-recipe-callbar-button {
14
+ &:not(.d-recipe-callbar-button--circle) {
15
15
  line-height: var(--dt-font-line-height-300);
16
16
  }
17
17
 
18
- .dt-recipe-callbar-button.d-btn[disabled] {
18
+ &.d-btn[disabled] {
19
19
  background-color: unset;
20
20
  opacity: .5;
21
21
  }
@@ -24,21 +24,21 @@
24
24
  // ============================================================================
25
25
  // $ STATUS
26
26
  // ----------------------------------------------------------------------------
27
- .dt-recipe-callbar-button--active,
28
- .dt-recipe-callbar-button--active:hover {
27
+ .d-recipe-callbar-button--active,
28
+ .d-recipe-callbar-button--active:hover {
29
29
  .base-button__icon {
30
- color: var(--primary-color);
30
+ color: var(--dt-theme-mention-color-background); // best replacement for --primary-color we have at the moment
31
31
  }
32
32
  }
33
33
 
34
- .dt-recipe-callbar-button--disabled {
34
+ .d-recipe-callbar-button--disabled {
35
35
  cursor: not-allowed;
36
36
  }
37
37
 
38
38
  // ============================================================================
39
39
  // $ VARIANTS
40
40
  // ----------------------------------------------------------------------------
41
- .dt-recipe-callbar-button--circle {
41
+ .d-recipe-callbar-button--circle {
42
42
  border-radius: var(--dt-size-radius-circle);
43
43
 
44
44
  &.d-btn[disabled] {
package/lib/build/less/recipes/callbar_button_with_popover.less CHANGED
@@ -1,9 +1,9 @@
1
- .dt-recipe-callbar-button-with-popover {
1
+ .d-recipe-callbar-button-with-popover {
2
2
  display: flex;
3
3
  align-items: flex-start;
4
4
  }
5
5
 
6
- .dt-recipe-callbar-button-with-popover__arrow {
6
+ .d-recipe-callbar-button-with-popover__arrow {
7
7
  width: var(--dt-size-500);
8
8
  height: var(--dt-size-500);
9
9
  margin-top: var(--dt-space-450);
@@ -16,15 +16,15 @@
16
16
  }
17
17
  }
18
18
 
19
- .dt-recipe-callbar-button-with-popover__arrow--large {
19
+ .d-recipe-callbar-button-with-popover__arrow--large {
20
20
  margin-left: var(--dt-space-550-negative);
21
21
  }
22
22
 
23
- .dt-recipe-callbar-button-with-popover__arrow-icon {
23
+ .d-recipe-callbar-button-with-popover__arrow-icon {
24
24
  color: var(--dt-color-black-800);
25
25
  }
26
26
 
27
- .dt-recipe-callbar-button-with-popover__popover {
27
+ .d-recipe-callbar-button-with-popover__popover {
28
28
  .d-popover__header {
29
29
  color: var(--dt-color-foreground-primary-inverted);
30
30
  background: var(--dt-color-surface-contrast);
@@ -35,7 +35,7 @@
35
35
  }
36
36
  }
37
37
 
38
- .dt-recipe-callbar-button-with-popover__button {
38
+ .d-recipe-callbar-button-with-popover__button {
39
39
  &.d-tab--selected::after,
40
40
  &.d-tab--selected:hover::after {
41
41
  --tab--bgc: var(--dt-color-surface-contrast);
@@ -52,4 +52,3 @@
52
52
  overflow-y: auto;
53
53
  }
54
54
  }
55
-
package/lib/build/less/recipes/callbox.less CHANGED
@@ -1,60 +1,60 @@
1
- .dt-recipe-callbox {
1
+ .d-recipe-callbox {
2
2
  padding: 0;
3
3
  color: var(--dt-color-foreground-primary);
4
4
  background-color: var(--dt-color-surface-primary);
5
5
  border-radius: var(--dt-size-radius-300);
6
6
  }
7
7
 
8
- .dt-recipe-callbox__video {
8
+ .d-recipe-callbox__video {
9
9
  display: flex;
10
10
  margin-bottom: var(--dt-space-300-negative);
11
11
  overflow: clip;
12
12
  border-radius: var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;
13
13
  }
14
14
 
15
- .dt-recipe-callbox__main-content {
15
+ .d-recipe-callbox__main-content {
16
16
  align-items: stretch;
17
17
  padding: 0;
18
18
  border: var(--dt-size-border-100) solid transparent;
19
19
  border-radius: var(--dt-size-radius-300);
20
20
 
21
- &.dt-recipe-callbox__border-default {
21
+ &.d-recipe-callbox__border-default {
22
22
  border-color: var(--dt-color-border-default);
23
23
  }
24
24
 
25
- &.dt-recipe-callbox__border-ai {
25
+ &.d-recipe-callbox__border-ai {
26
26
  background: linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,
27
27
  linear-gradient(135deg, var(--dt-color-border-accent), var(--dt-color-border-brand)) border-box;
28
28
  }
29
29
 
30
- &.dt-recipe-callbox__border-critical {
30
+ &.d-recipe-callbox__border-critical {
31
31
  background: radial-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,
32
32
  radial-gradient(circle, #E7301D, #F78B23) border-box;
33
33
  }
34
34
  }
35
35
 
36
- .dt-recipe-callbox__main-content-top {
36
+ .d-recipe-callbox__main-content-top {
37
37
  display: flex;
38
38
  align-items: center;
39
39
  padding: var(--dt-space-350) var(--dt-space-400);
40
40
  }
41
41
 
42
- .dt-recipe-callbox__main-content-bottom {
42
+ .d-recipe-callbox__main-content-bottom {
43
43
  border-top: 1px solid var(--dt-color-border-subtle);
44
44
  }
45
45
 
46
- .dt-recipe-callbox__avatar {
46
+ .d-recipe-callbox__avatar {
47
47
  margin-right: var(--dt-space-400);
48
48
  }
49
49
 
50
- .dt-recipe-callbox__content {
50
+ .d-recipe-callbox__content {
51
51
  display: flex;
52
52
  flex: 1 0 auto;
53
53
  flex-direction: column;
54
54
  min-width: 0;
55
55
  }
56
56
 
57
- .dt-recipe-callbox__content-title {
57
+ .d-recipe-callbox__content-title {
58
58
  width: 0;
59
59
  min-width: 100%;
60
60
  padding: 0;
@@ -70,11 +70,11 @@
70
70
  user-select: text;
71
71
  }
72
72
 
73
- .dt-recipe-callbox__content-badge {
73
+ .d-recipe-callbox__content-badge {
74
74
  line-height: normal;
75
75
  }
76
76
 
77
- .dt-recipe-callbox__content-subtitle {
77
+ .d-recipe-callbox__content-subtitle {
78
78
  width: 0;
79
79
  min-width: 100%;
80
80
  padding: 0;
@@ -84,13 +84,13 @@
84
84
  line-height: normal;
85
85
  }
86
86
 
87
- .dt-recipe-callbox__right {
87
+ .d-recipe-callbox__right {
88
88
  display: flex;
89
89
  justify-content: right;
90
90
  }
91
91
 
92
- .dt-recipe-callbox--clickable {
93
- .dt-recipe-callbox__content-title {
92
+ .d-recipe-callbox--clickable {
93
+ .d-recipe-callbox__content-title {
94
94
  border-radius: var(--dt-size-100);
95
95
  cursor: pointer;
96
96
  user-select: none;
@@ -106,6 +106,6 @@
106
106
  }
107
107
  }
108
108
 
109
- .dt-recipe-callbox__badge--warning {
109
+ .d-recipe-callbox__badge--warning {
110
110
  background-color: var(--dt-color-surface-warning);
111
111
  }
package/lib/build/less/recipes/combobox_multi_select.less CHANGED
@@ -1,4 +1,4 @@
1
- .dt-recipe-combobox-multi-select__chip {
1
+ .d-recipe-combobox-multi-select__chip {
2
2
  z-index: var(--zi-base1);
3
3
  max-width: var(--dt-size-100-percent);
4
4
  margin-top: var(--dt-space-300);
@@ -6,7 +6,7 @@
6
6
  margin-left: var(--dt-space-200);
7
7
  }
8
8
 
9
- .dt-recipe-combobox-multi-select__chip-wrapper {
9
+ .d-recipe-combobox-multi-select__chip-wrapper {
10
10
  position: absolute;
11
11
  max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));
12
12
  max-height: initial;
@@ -16,32 +16,32 @@
16
16
  overflow-y: visible;
17
17
  }
18
18
 
19
- .dt-recipe-combobox-multi-select__chip-wrapper-md--collapsed {
19
+ .d-recipe-combobox-multi-select__chip-wrapper-md--collapsed {
20
20
  max-height: 2.8rem;
21
21
  overflow-y: hidden;
22
22
  }
23
23
 
24
- .dt-recipe-combobox-multi-select__chip-wrapper-sm--collapsed,
25
- .dt-recipe-combobox-multi-select__chip-wrapper-xs--collapsed {
24
+ .d-recipe-combobox-multi-select__chip-wrapper-sm--collapsed,
25
+ .d-recipe-combobox-multi-select__chip-wrapper-xs--collapsed {
26
26
  max-height: 2.5rem;
27
27
  overflow-y: hidden;
28
28
  }
29
29
 
30
- .dt-recipe-combobox-multi-select__chip--truncate {
30
+ .d-recipe-combobox-multi-select__chip--truncate {
31
31
  white-space: nowrap;
32
32
  text-overflow: ellipsis;
33
33
  }
34
34
 
35
- .dt-recipe-combobox-multi-select__input {
35
+ .d-recipe-combobox-multi-select__input {
36
36
  flex-grow: 1;
37
37
  }
38
38
 
39
- .dt-recipe-combobox-multi-select__input-wrapper {
39
+ .d-recipe-combobox-multi-select__input-wrapper {
40
40
  position: relative;
41
41
  display: block;
42
42
  }
43
43
 
44
- .dt-recipe-combobox-multi-select__list--loading {
44
+ .d-recipe-combobox-multi-select__list--loading {
45
45
  padding-top: var(--dt-space-500);
46
46
  padding-bottom: var(--dt-space-500);
47
47
  text-align: center;
package/lib/build/less/recipes/contact_info.less CHANGED
@@ -1,4 +1,4 @@
1
- .dt-recipe-contact-info {
1
+ .d-recipe-contact-info {
2
2
  --contact-info-avatar-border-color: var(--dt-color-surface-primary);
3
3
 
4
4
  display: flex;
@@ -34,7 +34,7 @@
34
34
  }
35
35
  }
36
36
 
37
- .dt-recipe-contact-info__left {
37
+ .d-recipe-contact-info__left {
38
38
  position: relative;
39
39
  background-color: transparent;
40
40
  background-image: none;
@@ -42,7 +42,7 @@
42
42
  cursor: pointer;
43
43
  }
44
44
 
45
- .dt-recipe-contact-info__avatars {
45
+ .d-recipe-contact-info__avatars {
46
46
  display: flex;
47
47
  flex-direction: row;
48
48
  margin-right: var(--dt-space-300-negative);
package/lib/build/less/recipes/editor.less CHANGED
@@ -1,11 +1,10 @@
1
- .dt-recipe-editor__top-bar-background {
1
+ .d-recipe-editor__top-bar-background {
2
2
  background-color: var(--dt-color-surface-secondary);
3
3
  }
4
4
 
5
- .dt-recipe-editor__button-group-divider {
5
+ .d-recipe-editor__button-group-divider {
6
6
  width: var(--dt-size-100);
7
7
  height: calc(var(--dt-size-550) + var(--dt-size-300));
8
8
  margin-left: var(--dt-space-400);
9
9
  background: var(--dt-color-border-subtle);
10
10
  }
11
-
package/lib/build/less/recipes/emoji_row.less CHANGED
@@ -1,14 +1,14 @@
1
- .dt-recipe-emoji-row {
1
+ .d-recipe-emoji-row {
2
2
  display: flex;
3
3
  flex-wrap: wrap;
4
4
  gap: var(--dt-space-300);
5
5
  }
6
6
 
7
- .dt-recipe-emoji-row__tooltip {
7
+ .d-recipe-emoji-row__tooltip {
8
8
  display: inline-block;
9
9
  }
10
10
 
11
- .dt-recipe-emoji-row__reaction {
11
+ .d-recipe-emoji-row__reaction {
12
12
  --emoji-item-color-inset-shadow: transparent;
13
13
  --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-default);
14
14
  --emoji-item-color-background: var(--dt-action-color-background-muted-hover);
@@ -21,7 +21,7 @@
21
21
  border-radius: var(--dt-size-radius-pill);
22
22
  box-shadow: inset 0 0 0 var(--dt-size-border-100) var(--emoji-item-color-inset-shadow);
23
23
 
24
- &.dt-recipe-emoji-row__picker {
24
+ &.d-recipe-emoji-row__picker {
25
25
  padding: var(--dt-space-200) var(--dt-space-350);
26
26
  }
27
27
 
@@ -42,7 +42,7 @@
42
42
  --emoji-item-color-foreground: var(--dt-color-link-primary);
43
43
  --emoji-item-color-background: var(--dt-action-color-background-base-hover);
44
44
 
45
- .dt-recipe-emoji-row__reaction-number {
45
+ .d-recipe-emoji-row__reaction-number {
46
46
  font-weight: var(--dt-font-weight-bold);
47
47
  }
48
48
 
@@ -57,7 +57,7 @@
57
57
  }
58
58
  }
59
59
 
60
- .dt-recipe-emoji-row__reaction-number {
60
+ .d-recipe-emoji-row__reaction-number {
61
61
  // set font properties individually to change line height,
62
62
  // as font shorthand property will override line-height.
63
63
  font-weight: var(--dt-typography-body-sm-font-weight);
@@ -67,7 +67,7 @@
67
67
  line-height: var(--dt-font-line-height-100);
68
68
  }
69
69
 
70
- .dt-recipe-emoji-row__emoji {
70
+ .d-recipe-emoji-row__emoji {
71
71
  display: inline-flex;
72
72
  margin-right: var(--dt-space-300);
73
73
  }
package/lib/build/less/recipes/feed_item_pill.less CHANGED
@@ -1,10 +1,10 @@
1
- .dt-recipe-feed-item-pill__wrapper {
1
+ .d-recipe-feed-item-pill__wrapper {
2
2
  padding: var(--dt-space-400);
3
3
  background-color: var(--dt-color-surface-secondary);
4
4
  }
5
5
 
6
- .dt-recipe-feed-item-pill__button {
7
- width: 100%;
6
+ .d-recipe-feed-item-pill__button {
7
+ width: var(--dt-size-100-percent);
8
8
  text-align: left;
9
9
  background-color: var(--dt-color-surface-moderate);
10
10
  border-width: 0;
@@ -17,9 +17,9 @@
17
17
  --button-border-radius: var(--dt-size-radius-600);
18
18
  }
19
19
 
20
- .dt-recipe-feed-item-pill__layout {
20
+ .d-recipe-feed-item-pill__layout {
21
21
  gap: var(--dt-space-300);
22
- width: 100%;
22
+ width: var(--dt-size-100-percent);
23
23
  padding: var(--dt-space-400);
24
24
 
25
25
  & > .d-item-layout--left {
@@ -28,46 +28,46 @@
28
28
  }
29
29
  }
30
30
 
31
- .dt-recipe-feed-item-pill__icon {
31
+ .d-recipe-feed-item-pill__icon {
32
32
  display: flex;
33
33
 
34
34
  & svg {
35
- animation: fade 0.15s ease-in;
35
+ animation: d-recipe-feed-item-pill-fade 0.15s ease-in;
36
36
  }
37
37
  }
38
38
 
39
- .dt-recipe-feed-item-pill__content {
39
+ .d-recipe-feed-item-pill__content {
40
40
  display: flex;
41
41
  justify-content: center;
42
42
  }
43
43
 
44
- .dt-recipe-feed-item-pill__title {
44
+ .d-recipe-feed-item-pill__title {
45
45
  font-weight: var(--dt-font-weight-bold);
46
46
  }
47
47
 
48
48
  // Gradient radius solution taken from https://stackoverflow.com/a/53037637
49
- .dt-recipe-feed-item-pill__border {
49
+ .d-recipe-feed-item-pill__border {
50
50
  overflow: hidden;
51
51
  background-clip: content-box, border-box;
52
52
  background-origin: border-box;
53
- border: double 1px transparent;
53
+ border: double var(--dt-size-100) transparent;
54
54
  border-radius: var(--dt-size-radius-600);
55
55
  }
56
56
 
57
- .dt-recipe-feed-item-pill__border--default {
57
+ .d-recipe-feed-item-pill__border--default {
58
58
  background: var(--dt-color-border-default)
59
59
  }
60
60
 
61
- .dt-recipe-feed-item-pill__border--ai {
61
+ .d-recipe-feed-item-pill__border--ai {
62
62
  background-image: linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)),
63
63
  var(--dt-badge-color-background-ai);
64
64
  }
65
65
 
66
- .dt-recipe-feed-item-pill__border--critical {
66
+ .d-recipe-feed-item-pill__border--critical {
67
67
  background: var(--dt-color-foreground-critical);
68
68
  }
69
69
 
70
- @keyframes fade {
70
+ @keyframes d-recipe-feed-item-pill-fade {
71
71
  0% {
72
72
  transform: scale(0);
73
73
  }
@@ -75,4 +75,4 @@
75
75
  100% {
76
76
  transform: scale(1);
77
77
  }
78
- }
78
+ }