@dialpad/dialtone-css 8.49.0 → 8.49.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 (17) hide show
  1. package/lib/build/less/components/item-layout.less +11 -46
  2. package/lib/build/less/components/list-item.less +28 -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 +94 -85
  10. package/lib/dist/dialtone-default-theme.min.css +1 -1
  11. package/lib/dist/dialtone.css +94 -85
  12. package/lib/dist/dialtone.min.css +1 -1
  13. package/lib/dist/tokens/tokens-base-deca-dark.css +293 -391
  14. package/lib/dist/tokens/tokens-base-deca-light.css +284 -382
  15. package/lib/dist/tokens/tokens-deca-dark.css +1001 -966
  16. package/lib/dist/tokens/tokens-deca-light.css +731 -696
  17. package/package.json +3 -3
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,31 @@
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
+ line-height: var(--dt-font-line-height-300);
41
+ }
42
+
43
+ .d-list-item__left,
44
+ .d-list-item__right,
45
+ .d-list-item__selected {
46
+ display: grid;
47
+ place-content: center;
48
+ }
49
+
50
+ .d-list-item__content {
51
+ align-content: center;
52
+ }
53
+
54
+ .d-list-item__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-list-item__bottom {
61
+ margin-top: var(--dt-space-200);
62
+ }
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,29 @@ 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
+ line-height: var(--dt-font-line-height-300);
3031
+ }
3032
+ .d-list-item__left,
3033
+ .d-list-item__right,
3034
+ .d-list-item__selected {
3035
+ display: grid;
3036
+ place-content: center;
3037
+ }
3038
+ .d-list-item__content {
3039
+ align-content: center;
3040
+ }
3041
+ .d-list-item__subtitle {
3042
+ margin-top: var(--dt-space-200-negative);
3043
+ color: var(--dt-color-foreground-tertiary);
3044
+ font-size: var(--dt-font-size-100);
3045
+ }
3046
+ .d-list-item__bottom {
3047
+ margin-top: var(--dt-space-200);
3048
+ }
3052
3049
  .d-modal {
3053
3050
  --modal-backdrop-color-background: var(--dt-color-surface-backdrop);
3054
3051
  --modal-dialog-padding: var(--dt-space-600);
@@ -8366,46 +8363,53 @@ ul {
8366
8363
  position: relative;
8367
8364
  display: block;
8368
8365
  }
8366
+ .d-recipe-combobox-multi-select__list .d-list-item__content {
8367
+ min-height: calc(var(--dt-size-550) + var(--dt-size-300));
8368
+ }
8369
8369
  .d-recipe-combobox-multi-select__list--loading {
8370
8370
  padding-top: var(--dt-space-500);
8371
8371
  padding-bottom: var(--dt-space-500);
8372
8372
  text-align: center;
8373
8373
  }
8374
+ .d-recipe-combobox-with-popover__list .d-list-item__content {
8375
+ min-height: calc(var(--dt-size-550) + var(--dt-size-300));
8376
+ }
8374
8377
  .d-recipe-contact-info {
8375
8378
  --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);
8379
+ padding: var(--dt-space-300) var(--dt-space-400);
8380
+ -webkit-column-gap: var(--dt-space-400);
8381
+ -moz-column-gap: var(--dt-space-400);
8382
+ column-gap: var(--dt-space-400);
8386
8383
  }
8387
- .d-recipe-contact-info .d-item-layout--left {
8384
+ .d-recipe-contact-info__left {
8385
+ position: relative;
8386
+ display: flex;
8388
8387
  align-items: center;
8389
8388
  justify-content: flex-start;
8390
- /*
8391
- DP-74536: To make 'Avatar' in fixed position when resizing the window.
8392
- */
8393
8389
  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;
8390
+ height: var(--dt-size-100-percent);
8404
8391
  background-color: transparent;
8405
8392
  background-image: none;
8406
8393
  border-width: 0;
8407
8394
  cursor: pointer;
8408
8395
  }
8396
+ .d-recipe-contact-info__content {
8397
+ align-content: center;
8398
+ line-height: var(--dt-font-line-height-300);
8399
+ }
8400
+ .d-recipe-contact-info__subtitle {
8401
+ margin-top: var(--dt-space-200-negative);
8402
+ color: var(--dt-color-foreground-tertiary);
8403
+ font-size: var(--dt-font-size-100);
8404
+ }
8405
+ .d-recipe-contact-info__bottom {
8406
+ margin-top: var(--dt-space-200);
8407
+ }
8408
+ .d-recipe-contact-info__right {
8409
+ display: grid;
8410
+ align-content: center;
8411
+ min-width: 0;
8412
+ }
8409
8413
  .d-recipe-contact-info__avatars {
8410
8414
  display: flex;
8411
8415
  flex-direction: row;
@@ -8551,13 +8555,13 @@ ul {
8551
8555
  gap: var(--dt-space-300);
8552
8556
  width: var(--dt-size-100-percent);
8553
8557
  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);
8558
+ line-height: var(--dt-font-line-height-300);
8558
8559
  }
8559
8560
  .d-recipe-feed-item-pill__icon {
8560
- display: flex;
8561
+ display: grid;
8562
+ place-content: center;
8563
+ min-width: var(--dt-size-600);
8564
+ height: var(--dt-size-100-percent);
8561
8565
  }
8562
8566
  .d-recipe-feed-item-pill__icon svg {
8563
8567
  -webkit-animation: d-recipe-feed-item-pill-fade 0.15s ease-in;
@@ -8568,8 +8572,25 @@ ul {
8568
8572
  justify-content: center;
8569
8573
  }
8570
8574
  .d-recipe-feed-item-pill__title {
8575
+ display: grid;
8576
+ align-content: center;
8577
+ height: var(--dt-size-100-percent);
8571
8578
  font-weight: var(--dt-font-weight-bold);
8572
8579
  }
8580
+ .d-recipe-feed-item-pill__subtitle {
8581
+ margin-top: var(--dt-space-200-negative);
8582
+ color: var(--dt-color-foreground-tertiary);
8583
+ font-size: var(--dt-font-size-100);
8584
+ }
8585
+ .d-recipe-feed-item-pill__bottom {
8586
+ margin-top: var(--dt-space-200);
8587
+ }
8588
+ .d-recipe-feed-item-pill__right {
8589
+ display: grid;
8590
+ place-content: center;
8591
+ min-width: var(--dt-size-600);
8592
+ height: var(--dt-size-100-percent);
8593
+ }
8573
8594
  .d-recipe-feed-item-pill__border {
8574
8595
  overflow: hidden;
8575
8596
  background-clip: content-box, border-box;
@@ -8615,26 +8636,18 @@ ul {
8615
8636
  .d-recipe-feed-item-row:focus-visible {
8616
8637
  box-shadow: var(--dt-shadow-focus-inset);
8617
8638
  }
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 {
8639
+ .d-recipe-feed-item-row .d-list-item__left {
8624
8640
  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);
8641
+ align-content: flex-start;
8642
+ min-width: var(--dt-size-600);
8629
8643
  text-align: end;
8630
8644
  }
8631
- .d-recipe-feed-item-row > .d-item-layout > .d-item-layout--right {
8632
- min-width: initial;
8645
+ .d-recipe-feed-item-row .d-list-item__wrapper {
8646
+ min-height: auto;
8633
8647
  padding: 0;
8648
+ font: var(--dt-typography-body-md-compact);
8634
8649
  }
8635
- .d-recipe-feed-item-row > .d-item-layout > .d-item-layout--content > .d-item-layout--bottom {
8636
- display: flex;
8637
- flex-direction: column;
8650
+ .d-recipe-feed-item-row .d-list-item__bottom {
8638
8651
  margin-top: 0;
8639
8652
  }
8640
8653
  .d-recipe-feed-item-row__state--searched {
@@ -8653,9 +8666,6 @@ ul {
8653
8666
  padding-top: var(--dt-space-300);
8654
8667
  padding-bottom: var(--dt-space-300);
8655
8668
  }
8656
- .d-recipe-feed-item-row__content {
8657
- padding-left: var(--dt-space-300);
8658
- }
8659
8669
  .d-recipe-feed-item-row__attachment {
8660
8670
  padding-top: var(--dt-space-200);
8661
8671
  padding-bottom: var(--dt-space-300);
@@ -8694,7 +8704,6 @@ ul {
8694
8704
  flex-wrap: wrap;
8695
8705
  padding-top: var(--dt-space-200);
8696
8706
  padding-bottom: var(--dt-space-200);
8697
- padding-left: var(--dt-space-300);
8698
8707
  }
8699
8708
  .d-recipe-feed-item-row__threading {
8700
8709
  padding-top: var(--dt-space-200);