@dialpad/dialtone-css 8.49.0 → 8.49.2

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 (17) hide show
  1. package/lib/build/less/components/item-layout.less +11 -46
  2. package/lib/build/less/components/list-item.less +33 -4
  3. package/lib/build/less/dialtone.less +1 -0
  4. package/lib/build/less/recipes/combobox_multi_select.less +5 -0
  5. package/lib/build/less/recipes/combobox_with_popover.less +3 -0
  6. package/lib/build/less/recipes/contact_info.less +28 -31
  7. package/lib/build/less/recipes/feed_item_pill.less +25 -6
  8. package/lib/build/less/recipes/feed_item_row.less +7 -22
  9. package/lib/dist/dialtone-default-theme.css +98 -85
  10. package/lib/dist/dialtone-default-theme.min.css +1 -1
  11. package/lib/dist/dialtone.css +98 -85
  12. package/lib/dist/dialtone.min.css +1 -1
  13. package/lib/dist/tokens/tokens-base-deca-dark.css +392 -385
  14. package/lib/dist/tokens/tokens-base-deca-light.css +374 -367
  15. package/lib/dist/tokens/tokens-deca-dark.css +1256 -927
  16. package/lib/dist/tokens/tokens-deca-light.css +1175 -846
  17. package/package.json +2 -2
package/lib/build/less/components/item-layout.less CHANGED
@@ -20,46 +20,46 @@
20
20
  font-size: var(--dt-font-size-200);
21
21
  line-height: var(--dt-font-line-height-300);
22
22
 
23
- > .d-item-layout--content {
23
+ > .d-item-layout__content {
24
24
  display: flex;
25
25
  flex-direction: column;
26
26
  flex-grow: 1;
27
27
  justify-content: center;
28
28
  min-width: var(--dt-size-0);
29
29
 
30
- > .d-item-layout--subtitle {
30
+ > .d-item-layout__subtitle {
31
31
  color: var(--dt-color-foreground-tertiary);
32
32
  font-size: var(--dt-font-size-100);
33
33
  }
34
34
 
35
- > .d-item-layout--subtitle--with-title {
35
+ > .d-item-layout__subtitle-with-title {
36
36
  margin-top: var(--dt-space-200-negative);
37
37
  }
38
38
 
39
- > .d-item-layout--bottom {
39
+ > .d-item-layout__bottom {
40
40
  margin-top: var(--dt-space-200);
41
41
  }
42
42
  }
43
43
 
44
- > .d-item-layout--right,
45
- > .d-item-layout--left {
44
+ > .d-item-layout__right,
45
+ > .d-item-layout__left {
46
46
  display: flex;
47
47
  align-items: center;
48
48
  min-width: var(--dt-size-600);
49
49
  min-height: inherit;
50
50
  }
51
51
 
52
- > .d-item-layout--right {
52
+ > .d-item-layout__right {
53
53
  flex-shrink: 0;
54
54
  padding-left: var(--dt-space-400);
55
55
  }
56
56
 
57
- > .d-item-layout--left {
57
+ > .d-item-layout__left {
58
58
  justify-content: flex-end;
59
59
  padding-right: var(--dt-space-400);
60
60
  }
61
61
 
62
- > .d-item-layout--selected {
62
+ > .d-item-layout__selected {
63
63
  display: flex;
64
64
  align-items: center;
65
65
  }
@@ -67,44 +67,9 @@
67
67
 
68
68
  .d-item-layout--custom {
69
69
  display: grid;
70
- grid-template-areas: 'left content right selected';
71
- grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content) minmax(0, max-content);
72
70
 
73
- > .d-item-layout--left {
74
- grid-area: left;
75
- }
76
-
77
- > .d-item-layout--right {
78
- grid-area: right;
79
- }
80
-
81
- > .d-item-layout--content {
71
+ .d-item-layout__content {
82
72
  display: grid;
83
- grid-area: content;
84
- grid-template-areas:
85
- 'title'
86
- 'subtitle'
87
- 'bottom';
88
- grid-template-rows: repeat(auto-fit, minmax(0, auto));
89
-
90
- > .d-item-layout--title {
91
- grid-area: title;
92
- }
93
-
94
- > .d-item-layout--subtitle {
95
- grid-area: subtitle;
96
- }
97
-
98
- > .d-item-layout--subtitle--with-title {
99
- //
100
- }
101
-
102
- > .d-item-layout--bottom {
103
- grid-area: bottom;
104
- }
105
- }
106
-
107
- > .d-item-layout--selected {
108
- grid-area: selected;
73
+ grid-auto-rows: auto;
109
74
  }
110
75
  }
package/lib/build/less/components/list-item.less CHANGED
@@ -17,10 +17,6 @@
17
17
  background-color: var(--dt-action-color-background-muted-active);
18
18
  }
19
19
 
20
- &--selected-icon {
21
- margin-left: var(--dt-space-400);
22
- }
23
-
24
20
  &[role="menuitem"] {
25
21
  border-radius: var(--dt-size-300);
26
22
  }
@@ -36,3 +32,36 @@
36
32
  box-shadow: var(--dt-shadow-focus);
37
33
  }
38
34
  }
35
+
36
+ .d-list-item__wrapper {
37
+ gap: var(--dt-space-400);
38
+ min-height: calc(var(--dt-size-550) + var(--dt-size-300));
39
+ padding: var(--dt-space-300) var(--dt-space-400);
40
+ font-size: var(--dt-font-size-200);
41
+ line-height: var(--dt-font-line-height-300);
42
+ }
43
+
44
+ .d-list-item__left,
45
+ .d-list-item__right,
46
+ .d-list-item__selected {
47
+ display: grid;
48
+ place-content: center;
49
+ }
50
+
51
+ .d-list-item__content {
52
+ align-content: center;
53
+ }
54
+
55
+ .d-list-item__title {
56
+ min-width: var(--dt-size-0);
57
+ }
58
+
59
+ .d-list-item__subtitle {
60
+ margin-top: var(--dt-space-200-negative);
61
+ color: var(--dt-color-foreground-tertiary);
62
+ font-size: var(--dt-font-size-100);
63
+ }
64
+
65
+ .d-list-item__bottom {
66
+ margin-top: var(--dt-space-200);
67
+ }
package/lib/build/less/dialtone.less CHANGED
@@ -78,6 +78,7 @@
78
78
  @import 'recipes/callbar_button_with_popover';
79
79
  @import 'recipes/callbox';
80
80
  @import 'recipes/combobox_multi_select';
81
+ @import 'recipes/combobox_with_popover';
81
82
  @import 'recipes/contact_info';
82
83
  @import 'recipes/editor';
83
84
  @import 'recipes/emoji_row';
package/lib/build/less/recipes/combobox_multi_select.less CHANGED
@@ -45,6 +45,11 @@
45
45
  display: block;
46
46
  }
47
47
 
48
+ .d-recipe-combobox-multi-select__list .d-list-item__content {
49
+ min-height: calc(var(--dt-size-550) + var(--dt-size-300));
50
+ }
51
+
52
+
48
53
  .d-recipe-combobox-multi-select__list--loading {
49
54
  padding-top: var(--dt-space-500);
50
55
  padding-bottom: var(--dt-space-500);
package/lib/build/less/recipes/combobox_with_popover.less ADDED
@@ -0,0 +1,3 @@
1
+ .d-recipe-combobox-with-popover__list .d-list-item__content {
2
+ min-height: calc(var(--dt-size-550) + var(--dt-size-300));
3
+ }
package/lib/build/less/recipes/contact_info.less CHANGED
@@ -1,47 +1,44 @@
1
1
  .d-recipe-contact-info {
2
2
  --contact-info-avatar-border-color: var(--dt-color-surface-primary);
3
3
 
4
- display: flex;
5
-
6
- .d-item-layout {
7
- flex: 1 1 0;
8
- }
9
-
10
- .d-item-layout--content {
11
- /*
12
- DP-74536: Add `min-width` to make the width of "contact info" adjustable.
13
- */
14
- min-width: var(--dt-space-825);
15
- }
16
-
17
- .d-item-layout--left {
18
- align-items: center;
19
- justify-content: flex-start;
20
-
21
- /*
22
- DP-74536: To make 'Avatar' in fixed position when resizing the window.
23
- */
24
- min-width: var(--dt-space-650);
25
- }
26
-
27
- .d-item-layout--right {
28
- align-items: center;
29
-
30
- /*
31
- DP-74536: Remove `min-width` which cause extra unused empty space on the right of "contact info".
32
- */
33
- min-width: 0;
34
- }
4
+ padding: var(--dt-space-300) var(--dt-space-400);
5
+ column-gap: var(--dt-space-400);
35
6
  }
36
7
 
37
8
  .d-recipe-contact-info__left {
38
9
  position: relative;
10
+ display: flex;
11
+ align-items: center;
12
+ justify-content: flex-start;
13
+ min-width: var(--dt-space-650);
14
+ height: var(--dt-size-100-percent);
39
15
  background-color: transparent;
40
16
  background-image: none;
41
17
  border-width: 0;
42
18
  cursor: pointer;
43
19
  }
44
20
 
21
+ .d-recipe-contact-info__content {
22
+ align-content: center;
23
+ line-height: var(--dt-font-line-height-300);
24
+ }
25
+
26
+ .d-recipe-contact-info__subtitle {
27
+ margin-top: var(--dt-space-200-negative);
28
+ color: var(--dt-color-foreground-tertiary);
29
+ font-size: var(--dt-font-size-100);
30
+ }
31
+
32
+ .d-recipe-contact-info__bottom {
33
+ margin-top: var(--dt-space-200);
34
+ }
35
+
36
+ .d-recipe-contact-info__right {
37
+ display: grid;
38
+ align-content: center;
39
+ min-width: 0;
40
+ }
41
+
45
42
  .d-recipe-contact-info__avatars {
46
43
  display: flex;
47
44
  flex-direction: row;
package/lib/build/less/recipes/feed_item_pill.less CHANGED
@@ -25,15 +25,14 @@
25
25
  gap: var(--dt-space-300);
26
26
  width: var(--dt-size-100-percent);
27
27
  padding: var(--dt-space-400);
28
-
29
- & > .d-item-layout--left {
30
- justify-content: center;
31
- padding-right: var(--dt-space-0);
32
- }
28
+ line-height: var(--dt-font-line-height-300)
33
29
  }
34
30
 
35
31
  .d-recipe-feed-item-pill__icon {
36
- display: flex;
32
+ display: grid;
33
+ place-content: center;
34
+ min-width: var(--dt-size-600);
35
+ height: var(--dt-size-100-percent);
37
36
 
38
37
  & svg {
39
38
  animation: d-recipe-feed-item-pill-fade 0.15s ease-in;
@@ -46,9 +45,29 @@
46
45
  }
47
46
 
48
47
  .d-recipe-feed-item-pill__title {
48
+ display: grid;
49
+ align-content: center;
50
+ height: var(--dt-size-100-percent);
49
51
  font-weight: var(--dt-font-weight-bold);
50
52
  }
51
53
 
54
+ .d-recipe-feed-item-pill__subtitle {
55
+ margin-top: var(--dt-space-200-negative);
56
+ color: var(--dt-color-foreground-tertiary);
57
+ font-size: var(--dt-font-size-100);
58
+ }
59
+
60
+ .d-recipe-feed-item-pill__bottom {
61
+ margin-top: var(--dt-space-200);
62
+ }
63
+
64
+ .d-recipe-feed-item-pill__right {
65
+ display: grid;
66
+ place-content: center;
67
+ min-width: var(--dt-size-600);
68
+ height: var(--dt-size-100-percent);
69
+ }
70
+
52
71
  // Gradient radius solution taken from https://stackoverflow.com/a/53037637
53
72
  .d-recipe-feed-item-pill__border {
54
73
  overflow: hidden;
package/lib/build/less/recipes/feed_item_row.less CHANGED
@@ -8,30 +8,20 @@
8
8
  box-shadow: var(--dt-shadow-focus-inset);
9
9
  }
10
10
 
11
- & > .d-item-layout {
12
- min-height: initial;
13
- padding: 0;
14
- font: var(--dt-typography-body-md-compact);
15
- }
16
-
17
- & > .d-item-layout > .d-item-layout--left {
11
+ .d-list-item__left {
18
12
  display: block;
19
- align-self: flex-start;
20
- // min-width = avatar width + padding
21
- min-width: calc(var(--dt-space-600) + var(--dt-space-300));
22
- padding-right: var(--dt-space-300);
23
- padding-left: var(--dt-space-0);
13
+ align-content: flex-start;
14
+ min-width: var(--dt-size-600);
24
15
  text-align: end;
25
16
  }
26
17
 
27
- & > .d-item-layout > .d-item-layout--right {
28
- min-width: initial;
18
+ .d-list-item__wrapper {
19
+ min-height: auto;
29
20
  padding: 0;
21
+ font: var(--dt-typography-body-md-compact);
30
22
  }
31
23
 
32
- & > .d-item-layout > .d-item-layout--content > .d-item-layout--bottom {
33
- display: flex;
34
- flex-direction: column;
24
+ .d-list-item__bottom {
35
25
  margin-top: 0;
36
26
  }
37
27
  }
@@ -57,10 +47,6 @@
57
47
  padding-bottom: var(--dt-space-300);
58
48
  }
59
49
 
60
- .d-recipe-feed-item-row__content {
61
- padding-left: var(--dt-space-300);
62
- }
63
-
64
50
  .d-recipe-feed-item-row__attachment {
65
51
  padding-top: var(--dt-space-200);
66
52
  padding-bottom: var(--dt-space-300);
@@ -105,7 +91,6 @@
105
91
  flex-wrap: wrap;
106
92
  padding-top: var(--dt-space-200);
107
93
  padding-bottom: var(--dt-space-200);
108
- padding-left: var(--dt-space-300);
109
94
  }
110
95
 
111
96
  .d-recipe-feed-item-row__threading {
package/lib/dist/dialtone-default-theme.css CHANGED
@@ -811,71 +811,48 @@ template {
811
811
  font-size: var(--dt-font-size-200);
812
812
  line-height: var(--dt-font-line-height-300);
813
813
  }
814
- .d-item-layout > .d-item-layout--content {
814
+ .d-item-layout > .d-item-layout__content {
815
815
  display: flex;
816
816
  flex-direction: column;
817
817
  flex-grow: 1;
818
818
  justify-content: center;
819
819
  min-width: var(--dt-size-0);
820
820
  }
821
- .d-item-layout > .d-item-layout--content > .d-item-layout--subtitle {
821
+ .d-item-layout > .d-item-layout__content > .d-item-layout__subtitle {
822
822
  color: var(--dt-color-foreground-tertiary);
823
823
  font-size: var(--dt-font-size-100);
824
824
  }
825
- .d-item-layout > .d-item-layout--content > .d-item-layout--subtitle--with-title {
825
+ .d-item-layout > .d-item-layout__content > .d-item-layout__subtitle-with-title {
826
826
  margin-top: var(--dt-space-200-negative);
827
827
  }
828
- .d-item-layout > .d-item-layout--content > .d-item-layout--bottom {
828
+ .d-item-layout > .d-item-layout__content > .d-item-layout__bottom {
829
829
  margin-top: var(--dt-space-200);
830
830
  }
831
- .d-item-layout > .d-item-layout--right,
832
- .d-item-layout > .d-item-layout--left {
831
+ .d-item-layout > .d-item-layout__right,
832
+ .d-item-layout > .d-item-layout__left {
833
833
  display: flex;
834
834
  align-items: center;
835
835
  min-width: var(--dt-size-600);
836
836
  min-height: inherit;
837
837
  }
838
- .d-item-layout > .d-item-layout--right {
838
+ .d-item-layout > .d-item-layout__right {
839
839
  flex-shrink: 0;
840
840
  padding-left: var(--dt-space-400);
841
841
  }
842
- .d-item-layout > .d-item-layout--left {
842
+ .d-item-layout > .d-item-layout__left {
843
843
  justify-content: flex-end;
844
844
  padding-right: var(--dt-space-400);
845
845
  }
846
- .d-item-layout > .d-item-layout--selected {
846
+ .d-item-layout > .d-item-layout__selected {
847
847
  display: flex;
848
848
  align-items: center;
849
849
  }
850
850
  .d-item-layout--custom {
851
851
  display: grid;
852
- grid-template-areas: 'left content right selected';
853
- grid-template-columns: minmax(0, -webkit-max-content) 1fr minmax(0, -webkit-max-content) minmax(0, -webkit-max-content);
854
- grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content) minmax(0, max-content);
855
852
  }
856
- .d-item-layout--custom > .d-item-layout--left {
857
- grid-area: left;
858
- }
859
- .d-item-layout--custom > .d-item-layout--right {
860
- grid-area: right;
861
- }
862
- .d-item-layout--custom > .d-item-layout--content {
853
+ .d-item-layout--custom .d-item-layout__content {
863
854
  display: grid;
864
- grid-area: content;
865
- grid-template-areas: 'title' 'subtitle' 'bottom';
866
- grid-template-rows: repeat(auto-fit, minmax(0, auto));
867
- }
868
- .d-item-layout--custom > .d-item-layout--content > .d-item-layout--title {
869
- grid-area: title;
870
- }
871
- .d-item-layout--custom > .d-item-layout--content > .d-item-layout--subtitle {
872
- grid-area: subtitle;
873
- }
874
- .d-item-layout--custom > .d-item-layout--content > .d-item-layout--bottom {
875
- grid-area: bottom;
876
- }
877
- .d-item-layout--custom > .d-item-layout--selected {
878
- grid-area: selected;
855
+ grid-auto-rows: auto;
879
856
  }
880
857
  .d-avatar {
881
858
  --avatar-color-background: var(--dt-avatar-color-background-000);
@@ -3034,9 +3011,6 @@ legend .d-label--md {
3034
3011
  .d-list-item--highlighted:active {
3035
3012
  background-color: var(--dt-action-color-background-muted-active);
3036
3013
  }
3037
- .d-list-item--selected-icon {
3038
- margin-left: var(--dt-space-400);
3039
- }
3040
3014
  .d-list-item[role="menuitem"] {
3041
3015
  border-radius: var(--dt-size-300);
3042
3016
  }
@@ -3049,6 +3023,33 @@ legend .d-label--md {
3049
3023
  outline: none;
3050
3024
  box-shadow: var(--dt-shadow-focus);
3051
3025
  }
3026
+ .d-list-item__wrapper {
3027
+ gap: var(--dt-space-400);
3028
+ min-height: calc(var(--dt-size-550) + var(--dt-size-300));
3029
+ padding: var(--dt-space-300) var(--dt-space-400);
3030
+ font-size: var(--dt-font-size-200);
3031
+ line-height: var(--dt-font-line-height-300);
3032
+ }
3033
+ .d-list-item__left,
3034
+ .d-list-item__right,
3035
+ .d-list-item__selected {
3036
+ display: grid;
3037
+ place-content: center;
3038
+ }
3039
+ .d-list-item__content {
3040
+ align-content: center;
3041
+ }
3042
+ .d-list-item__title {
3043
+ min-width: var(--dt-size-0);
3044
+ }
3045
+ .d-list-item__subtitle {
3046
+ margin-top: var(--dt-space-200-negative);
3047
+ color: var(--dt-color-foreground-tertiary);
3048
+ font-size: var(--dt-font-size-100);
3049
+ }
3050
+ .d-list-item__bottom {
3051
+ margin-top: var(--dt-space-200);
3052
+ }
3052
3053
  .d-modal {
3053
3054
  --modal-backdrop-color-background: var(--dt-color-surface-backdrop);
3054
3055
  --modal-dialog-padding: var(--dt-space-600);
@@ -8366,46 +8367,53 @@ ul {
8366
8367
  position: relative;
8367
8368
  display: block;
8368
8369
  }
8370
+ .d-recipe-combobox-multi-select__list .d-list-item__content {
8371
+ min-height: calc(var(--dt-size-550) + var(--dt-size-300));
8372
+ }
8369
8373
  .d-recipe-combobox-multi-select__list--loading {
8370
8374
  padding-top: var(--dt-space-500);
8371
8375
  padding-bottom: var(--dt-space-500);
8372
8376
  text-align: center;
8373
8377
  }
8378
+ .d-recipe-combobox-with-popover__list .d-list-item__content {
8379
+ min-height: calc(var(--dt-size-550) + var(--dt-size-300));
8380
+ }
8374
8381
  .d-recipe-contact-info {
8375
8382
  --contact-info-avatar-border-color: var(--dt-color-surface-primary);
8376
- display: flex;
8377
- }
8378
- .d-recipe-contact-info .d-item-layout {
8379
- flex: 1 1 0;
8380
- }
8381
- .d-recipe-contact-info .d-item-layout--content {
8382
- /*
8383
- DP-74536: Add `min-width` to make the width of "contact info" adjustable.
8384
- */
8385
- min-width: var(--dt-space-825);
8383
+ padding: var(--dt-space-300) var(--dt-space-400);
8384
+ -webkit-column-gap: var(--dt-space-400);
8385
+ -moz-column-gap: var(--dt-space-400);
8386
+ column-gap: var(--dt-space-400);
8386
8387
  }
8387
- .d-recipe-contact-info .d-item-layout--left {
8388
+ .d-recipe-contact-info__left {
8389
+ position: relative;
8390
+ display: flex;
8388
8391
  align-items: center;
8389
8392
  justify-content: flex-start;
8390
- /*
8391
- DP-74536: To make 'Avatar' in fixed position when resizing the window.
8392
- */
8393
8393
  min-width: var(--dt-space-650);
8394
- }
8395
- .d-recipe-contact-info .d-item-layout--right {
8396
- align-items: center;
8397
- /*
8398
- DP-74536: Remove `min-width` which cause extra unused empty space on the right of "contact info".
8399
- */
8400
- min-width: 0;
8401
- }
8402
- .d-recipe-contact-info__left {
8403
- position: relative;
8394
+ height: var(--dt-size-100-percent);
8404
8395
  background-color: transparent;
8405
8396
  background-image: none;
8406
8397
  border-width: 0;
8407
8398
  cursor: pointer;
8408
8399
  }
8400
+ .d-recipe-contact-info__content {
8401
+ align-content: center;
8402
+ line-height: var(--dt-font-line-height-300);
8403
+ }
8404
+ .d-recipe-contact-info__subtitle {
8405
+ margin-top: var(--dt-space-200-negative);
8406
+ color: var(--dt-color-foreground-tertiary);
8407
+ font-size: var(--dt-font-size-100);
8408
+ }
8409
+ .d-recipe-contact-info__bottom {
8410
+ margin-top: var(--dt-space-200);
8411
+ }
8412
+ .d-recipe-contact-info__right {
8413
+ display: grid;
8414
+ align-content: center;
8415
+ min-width: 0;
8416
+ }
8409
8417
  .d-recipe-contact-info__avatars {
8410
8418
  display: flex;
8411
8419
  flex-direction: row;
@@ -8551,13 +8559,13 @@ ul {
8551
8559
  gap: var(--dt-space-300);
8552
8560
  width: var(--dt-size-100-percent);
8553
8561
  padding: var(--dt-space-400);
8554
- }
8555
- .d-recipe-feed-item-pill__layout > .d-item-layout--left {
8556
- justify-content: center;
8557
- padding-right: var(--dt-space-0);
8562
+ line-height: var(--dt-font-line-height-300);
8558
8563
  }
8559
8564
  .d-recipe-feed-item-pill__icon {
8560
- display: flex;
8565
+ display: grid;
8566
+ place-content: center;
8567
+ min-width: var(--dt-size-600);
8568
+ height: var(--dt-size-100-percent);
8561
8569
  }
8562
8570
  .d-recipe-feed-item-pill__icon svg {
8563
8571
  -webkit-animation: d-recipe-feed-item-pill-fade 0.15s ease-in;
@@ -8568,8 +8576,25 @@ ul {
8568
8576
  justify-content: center;
8569
8577
  }
8570
8578
  .d-recipe-feed-item-pill__title {
8579
+ display: grid;
8580
+ align-content: center;
8581
+ height: var(--dt-size-100-percent);
8571
8582
  font-weight: var(--dt-font-weight-bold);
8572
8583
  }
8584
+ .d-recipe-feed-item-pill__subtitle {
8585
+ margin-top: var(--dt-space-200-negative);
8586
+ color: var(--dt-color-foreground-tertiary);
8587
+ font-size: var(--dt-font-size-100);
8588
+ }
8589
+ .d-recipe-feed-item-pill__bottom {
8590
+ margin-top: var(--dt-space-200);
8591
+ }
8592
+ .d-recipe-feed-item-pill__right {
8593
+ display: grid;
8594
+ place-content: center;
8595
+ min-width: var(--dt-size-600);
8596
+ height: var(--dt-size-100-percent);
8597
+ }
8573
8598
  .d-recipe-feed-item-pill__border {
8574
8599
  overflow: hidden;
8575
8600
  background-clip: content-box, border-box;
@@ -8615,26 +8640,18 @@ ul {
8615
8640
  .d-recipe-feed-item-row:focus-visible {
8616
8641
  box-shadow: var(--dt-shadow-focus-inset);
8617
8642
  }
8618
- .d-recipe-feed-item-row > .d-item-layout {
8619
- min-height: initial;
8620
- padding: 0;
8621
- font: var(--dt-typography-body-md-compact);
8622
- }
8623
- .d-recipe-feed-item-row > .d-item-layout > .d-item-layout--left {
8643
+ .d-recipe-feed-item-row .d-list-item__left {
8624
8644
  display: block;
8625
- align-self: flex-start;
8626
- min-width: calc(var(--dt-space-600) + var(--dt-space-300));
8627
- padding-right: var(--dt-space-300);
8628
- padding-left: var(--dt-space-0);
8645
+ align-content: flex-start;
8646
+ min-width: var(--dt-size-600);
8629
8647
  text-align: end;
8630
8648
  }
8631
- .d-recipe-feed-item-row > .d-item-layout > .d-item-layout--right {
8632
- min-width: initial;
8649
+ .d-recipe-feed-item-row .d-list-item__wrapper {
8650
+ min-height: auto;
8633
8651
  padding: 0;
8652
+ font: var(--dt-typography-body-md-compact);
8634
8653
  }
8635
- .d-recipe-feed-item-row > .d-item-layout > .d-item-layout--content > .d-item-layout--bottom {
8636
- display: flex;
8637
- flex-direction: column;
8654
+ .d-recipe-feed-item-row .d-list-item__bottom {
8638
8655
  margin-top: 0;
8639
8656
  }
8640
8657
  .d-recipe-feed-item-row__state--searched {
@@ -8653,9 +8670,6 @@ ul {
8653
8670
  padding-top: var(--dt-space-300);
8654
8671
  padding-bottom: var(--dt-space-300);
8655
8672
  }
8656
- .d-recipe-feed-item-row__content {
8657
- padding-left: var(--dt-space-300);
8658
- }
8659
8673
  .d-recipe-feed-item-row__attachment {
8660
8674
  padding-top: var(--dt-space-200);
8661
8675
  padding-bottom: var(--dt-space-300);
@@ -8694,7 +8708,6 @@ ul {
8694
8708
  flex-wrap: wrap;
8695
8709
  padding-top: var(--dt-space-200);
8696
8710
  padding-bottom: var(--dt-space-200);
8697
- padding-left: var(--dt-space-300);
8698
8711
  }
8699
8712
  .d-recipe-feed-item-row__threading {
8700
8713
  padding-top: var(--dt-space-200);