@dialpad/dialtone-css 8.46.3 → 8.46.5

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 (31) 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 +21 -9
  5. package/lib/build/less/recipes/callbar_button_with_popover.less +14 -7
  6. package/lib/build/less/recipes/callbox.less +17 -17
  7. package/lib/build/less/recipes/combobox_multi_select.less +13 -9
  8. package/lib/build/less/recipes/contact_info.less +11 -3
  9. package/lib/build/less/recipes/editor.less +43 -2
  10. package/lib/build/less/recipes/emoji_row.less +11 -7
  11. package/lib/build/less/recipes/feed_item_pill.less +20 -16
  12. package/lib/build/less/recipes/feed_item_row.less +17 -17
  13. package/lib/build/less/recipes/grouped_chip.less +8 -5
  14. package/lib/build/less/recipes/ivr_node.less +93 -15
  15. package/lib/build/less/recipes/leftbar_row.less +103 -51
  16. package/lib/build/less/recipes/message_input.less +21 -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 +26 -6
  20. package/lib/build/less/recipes/unread_pill.less +3 -3
  21. package/lib/dist/dialtone-default-theme.css +431 -267
  22. package/lib/dist/dialtone-default-theme.min.css +1 -1
  23. package/lib/dist/dialtone.css +431 -267
  24. package/lib/dist/dialtone.min.css +1 -1
  25. package/lib/dist/tokens/tokens-base-deca-dark.css +1325 -0
  26. package/lib/dist/tokens/tokens-base-deca-light.css +1085 -0
  27. package/lib/dist/tokens/tokens-deca-dark.css +2131 -0
  28. package/lib/dist/tokens/tokens-deca-light.css +2131 -0
  29. package/lib/dist/tokens/tokens-tmo-dark.css +62 -17
  30. package/lib/dist/tokens/tokens-tmo-light.css +45 -0
  31. package/package.json +3 -3
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,35 +10,47 @@
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
+ padding-right: var(--dt-space-0);
15
+ padding-left: var(--dt-space-0);
16
+ color: var(--dt-color-foreground-primary);
17
+
18
+ &:not(.d-recipe-callbar-button--circle) {
15
19
  line-height: var(--dt-font-line-height-300);
16
20
  }
17
21
 
18
- .dt-recipe-callbar-button.d-btn[disabled] {
22
+ &.d-btn--disabled {
19
23
  background-color: unset;
20
- opacity: .5;
24
+ opacity: var(--dt-opacity-700);
25
+ }
26
+ }
27
+
28
+ .d-recipe-callbar-button__text {
29
+ font-size: var(--dt-font-size-100);
30
+
31
+ @media (max-width: 980px) {
32
+ display: none;
21
33
  }
22
34
  }
23
35
 
24
36
  // ============================================================================
25
37
  // $ STATUS
26
38
  // ----------------------------------------------------------------------------
27
- .dt-recipe-callbar-button--active,
28
- .dt-recipe-callbar-button--active:hover {
39
+ .d-recipe-callbar-button--active,
40
+ .d-recipe-callbar-button--active:hover {
29
41
  .base-button__icon {
30
- color: var(--primary-color);
42
+ color: var(--dt-theme-mention-color-background); // best replacement for --primary-color we have at the moment
31
43
  }
32
44
  }
33
45
 
34
- .dt-recipe-callbar-button--disabled {
46
+ .d-recipe-callbar-button--disabled {
35
47
  cursor: not-allowed;
36
48
  }
37
49
 
38
50
  // ============================================================================
39
51
  // $ VARIANTS
40
52
  // ----------------------------------------------------------------------------
41
- .dt-recipe-callbar-button--circle {
53
+ .d-recipe-callbar-button--circle {
42
54
  border-radius: var(--dt-size-radius-circle);
43
55
 
44
56
  &.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);
@@ -33,9 +33,17 @@
33
33
  color: var(--dt-color-foreground-primary-inverted);
34
34
  }
35
35
  }
36
+
37
+ .d-popover__header__content {
38
+ display: flex;
39
+ align-items: center;
40
+ padding-right: var(--dt-space-450);
41
+ padding-left: var(--dt-space-450);
42
+ font-weight: normal;
43
+ }
36
44
  }
37
45
 
38
- .dt-recipe-callbar-button-with-popover__button {
46
+ .d-recipe-callbar-button-with-popover__button {
39
47
  &.d-tab--selected::after,
40
48
  &.d-tab--selected:hover::after {
41
49
  --tab--bgc: var(--dt-color-surface-contrast);
@@ -52,4 +60,3 @@
52
60
  overflow-y: auto;
53
61
  }
54
62
  }
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,36 @@
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--hidden {
40
+ color: transparent;
41
+ }
42
+
43
+ .d-recipe-combobox-multi-select__input-wrapper {
40
44
  position: relative;
41
45
  display: block;
42
46
  }
43
47
 
44
- .dt-recipe-combobox-multi-select__list--loading {
48
+ .d-recipe-combobox-multi-select__list--loading {
45
49
  padding-top: var(--dt-space-500);
46
50
  padding-bottom: var(--dt-space-500);
47
51
  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);
@@ -51,5 +51,13 @@
51
51
  box-sizing: unset;
52
52
  border: var(--dt-size-300) solid var(--contact-info-avatar-border-color);
53
53
  border-radius: var(--dt-size-radius-pill);
54
+
55
+ &.d-recipe-contact-info__avatar-stacked {
56
+ margin-left: var(--dt-space-550-negative);
57
+ }
58
+
59
+ &.d-recipe-contact-info__avatar-halo {
60
+ border-color: var(--dt-color-border-brand);
61
+ }
54
62
  }
55
63
  }
package/lib/build/less/recipes/editor.less CHANGED
@@ -1,11 +1,52 @@
1
- .dt-recipe-editor__top-bar-background {
1
+ .d-recipe-editor {
2
+ display: flex;
3
+ flex-direction: column;
4
+ }
5
+
6
+ .d-recipe-editor__top-bar {
7
+ padding: var(--dt-space-400);
2
8
  background-color: var(--dt-color-surface-secondary);
3
9
  }
4
10
 
5
- .dt-recipe-editor__button-group-divider {
11
+ .d-recipe-editor__button-group-divider {
6
12
  width: var(--dt-size-100);
7
13
  height: calc(var(--dt-size-550) + var(--dt-size-300));
8
14
  margin-left: var(--dt-space-400);
9
15
  background: var(--dt-color-border-subtle);
10
16
  }
11
17
 
18
+ .d-recipe-editor-link__input-wrapper {
19
+ margin-top: var(--dt-space-350);
20
+ padding-top: var(--dt-space-200);
21
+ padding-bottom: var(--dt-space-200);
22
+ background-color: var(--dt-color-surface-secondary);
23
+ border: var(--dt-size-border-100) solid var(--dt-color-border-default);
24
+ outline: none;
25
+ box-shadow: none !important; // This doesn't work if !important is removed
26
+ }
27
+
28
+ .d-recipe-editor__popover-content {
29
+ padding: var(--dt-space-500);
30
+ }
31
+
32
+ .d-recipe-editor__popover-footer {
33
+ padding-right: var(--dt-space-450);
34
+ padding-left: var(--dt-space-550);
35
+ }
36
+
37
+ .d-recipe-editor__content {
38
+ margin: var(--dt-space-400) var(--dt-space-500) var(--dt-space-500);
39
+ overflow: auto;
40
+ cursor: text;
41
+ }
42
+
43
+ .d-recipe-editor__content-input {
44
+ margin-top: var(--dt-space-350);
45
+ margin-bottom: var(--dt-space-350);
46
+ margin-left: var(--dt-space-500);
47
+ }
48
+
49
+ .d-recipe-editor__link {
50
+ display: inline-block;
51
+ cursor: text;
52
+ }
package/lib/build/less/recipes/emoji_row.less CHANGED
@@ -1,14 +1,18 @@
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__tooltip-content {
12
+ max-width: var(--dt-size-975);
13
+ }
14
+
15
+ .d-recipe-emoji-row__reaction {
12
16
  --emoji-item-color-inset-shadow: transparent;
13
17
  --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-default);
14
18
  --emoji-item-color-background: var(--dt-action-color-background-muted-hover);
@@ -21,7 +25,7 @@
21
25
  border-radius: var(--dt-size-radius-pill);
22
26
  box-shadow: inset 0 0 0 var(--dt-size-border-100) var(--emoji-item-color-inset-shadow);
23
27
 
24
- &.dt-recipe-emoji-row__picker {
28
+ &.d-recipe-emoji-row__picker {
25
29
  padding: var(--dt-space-200) var(--dt-space-350);
26
30
  }
27
31
 
@@ -42,7 +46,7 @@
42
46
  --emoji-item-color-foreground: var(--dt-color-link-primary);
43
47
  --emoji-item-color-background: var(--dt-action-color-background-base-hover);
44
48
 
45
- .dt-recipe-emoji-row__reaction-number {
49
+ .d-recipe-emoji-row__reaction-number {
46
50
  font-weight: var(--dt-font-weight-bold);
47
51
  }
48
52
 
@@ -57,7 +61,7 @@
57
61
  }
58
62
  }
59
63
 
60
- .dt-recipe-emoji-row__reaction-number {
64
+ .d-recipe-emoji-row__reaction-number {
61
65
  // set font properties individually to change line height,
62
66
  // as font shorthand property will override line-height.
63
67
  font-weight: var(--dt-typography-body-sm-font-weight);
@@ -67,7 +71,7 @@
67
71
  line-height: var(--dt-font-line-height-100);
68
72
  }
69
73
 
70
- .dt-recipe-emoji-row__emoji {
74
+ .d-recipe-emoji-row__emoji {
71
75
  display: inline-flex;
72
76
  margin-right: var(--dt-space-300);
73
77
  }