@ndla/primitives 1.0.11-alpha.0 → 1.0.13-alpha.0
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.
- package/dist/panda.buildinfo.json +8 -6
- package/dist/styles.css +18 -10
- package/es/ListItem/ListItem.js +64 -52
- package/lib/ListItem/ListItem.d.ts +29 -29
- package/lib/ListItem/ListItem.js +64 -52
- package/package.json +3 -3
|
@@ -598,6 +598,7 @@
|
|
|
598
598
|
"--arrow-background]___[value:colors.surface.action",
|
|
599
599
|
"height]___[value:200px",
|
|
600
600
|
"objectFit]___[value:cover",
|
|
601
|
+
"minHeight]___[value:3xlarge",
|
|
601
602
|
"borderBlockWidth]___[value:1px",
|
|
602
603
|
"borderInlineColor]___[value:transparent",
|
|
603
604
|
"transitionProperty]___[value:background-color, border-color, color",
|
|
@@ -605,7 +606,10 @@
|
|
|
605
606
|
"transitionTimingFunction]___[value:ease-in-out",
|
|
606
607
|
"background]___[value:var(--background-hover)]___[cond:_hover",
|
|
607
608
|
"background]___[value:var(--background-hover)]___[cond:_highlighted",
|
|
609
|
+
"borderStyle]___[value:dashed",
|
|
608
610
|
"background]___[value:var(--background-current)]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]",
|
|
611
|
+
"borderBlockStartColor]___[value:transparent]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]",
|
|
612
|
+
"borderBlockEndColor]___[value:transparent]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]",
|
|
609
613
|
"color]___[value:var(--color-current-hover)]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]",
|
|
610
614
|
"background]___[value:var(--background-hover)]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_hover",
|
|
611
615
|
"color]___[value:text.default]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_hover",
|
|
@@ -613,7 +617,6 @@
|
|
|
613
617
|
"color]___[value:text.default]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_highlighted",
|
|
614
618
|
"outlineColor]___[value:var(--color-current-hover)]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>& a:focus-visible<___>_focusVisible",
|
|
615
619
|
"boxShadowColor]___[value:var(--color-current-hover)]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>& button:focus-visible<___>_focusVisible",
|
|
616
|
-
"borderStyle]___[value:dashed",
|
|
617
620
|
"--background-hover]___[value:colors.surface.brand.1.subtle",
|
|
618
621
|
"--background-current]___[value:colors.surface.actionSubtle.selected",
|
|
619
622
|
"--border-hover]___[value:colors.stroke.hover",
|
|
@@ -621,17 +624,16 @@
|
|
|
621
624
|
"--background-hover]___[value:colors.surface.brand.2.moderate",
|
|
622
625
|
"--background-current]___[value:colors.blue.800",
|
|
623
626
|
"--border-hover]___[value:colors.surface.brand.2.strong",
|
|
624
|
-
"
|
|
625
|
-
"borderBlockColor]___[value:var(--border)",
|
|
626
|
-
"borderBlockColor]___[value:var(--border-hover
|
|
627
|
-
"borderBlockColor]___[value:var(--border-hover, var(--border))]___[cond:_highlighted",
|
|
627
|
+
"borderBlockColor]___[value:stroke.subtle",
|
|
628
|
+
"borderBlockColor]___[value:var(--border-hover)]___[cond:_hover",
|
|
629
|
+
"borderBlockColor]___[value:var(--border-hover)]___[cond:_highlighted",
|
|
628
630
|
"borderBlockStartColor]___[value:stroke.subtle",
|
|
629
631
|
"borderBlockEndColor]___[value:transparent",
|
|
630
632
|
"marginBlockStart]___[value:-1px",
|
|
631
633
|
"borderBlockStartColor]___[value:transparent]___[cond:_first",
|
|
634
|
+
"borderBlockEndColor]___[value:stroke.subtle]___[cond:_last",
|
|
632
635
|
"borderBlockStartColor]___[value:var(--border-hover)]___[cond:_first<___>_hover",
|
|
633
636
|
"borderBlockStartColor]___[value:var(--border-hover)]___[cond:_first<___>_highlighted",
|
|
634
|
-
"borderBlockEndColor]___[value:stroke.subtle]___[cond:_last",
|
|
635
637
|
"borderBlockStartColor]___[value:var(--border-hover)]___[cond:&:hover + &",
|
|
636
638
|
"borderBlockStartColor]___[value:var(--border-hover)]___[cond:&[data-highlighted] + &",
|
|
637
639
|
"borderBlockEndColor]___[value:transparent]___[cond:_hover",
|
package/dist/styles.css
CHANGED
|
@@ -877,6 +877,10 @@
|
|
|
877
877
|
object-fit: cover;
|
|
878
878
|
}
|
|
879
879
|
|
|
880
|
+
.min-h_3xlarge {
|
|
881
|
+
min-height: var(--sizes-3xlarge);
|
|
882
|
+
}
|
|
883
|
+
|
|
880
884
|
.bd-y-w_1px {
|
|
881
885
|
border-block-width: 1px;
|
|
882
886
|
}
|
|
@@ -913,12 +917,8 @@
|
|
|
913
917
|
--border-hover: var(--colors-surface-brand-2-strong);
|
|
914
918
|
}
|
|
915
919
|
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
}
|
|
919
|
-
|
|
920
|
-
.bd-y-c_var\(--border\) {
|
|
921
|
-
border-block-color: var(--border);
|
|
920
|
+
.bd-y-c_stroke\.subtle {
|
|
921
|
+
border-block-color: var(--colors-stroke-subtle);
|
|
922
922
|
}
|
|
923
923
|
|
|
924
924
|
.mbs_-1px {
|
|
@@ -1677,8 +1677,8 @@
|
|
|
1677
1677
|
color: var(--color-current-hover);
|
|
1678
1678
|
}
|
|
1679
1679
|
|
|
1680
|
-
.highlighted\:bd-y-c_var\(--border-hover
|
|
1681
|
-
border-block-color: var(--border-hover
|
|
1680
|
+
.highlighted\:bd-y-c_var\(--border-hover\)[data-highlighted] {
|
|
1681
|
+
border-block-color: var(--border-hover);
|
|
1682
1682
|
}
|
|
1683
1683
|
|
|
1684
1684
|
.closed\:trs-prop_background\,_border-color\,_border\,_border-radius:is([closed], [data-closed], [data-state="closed"]) {
|
|
@@ -1829,6 +1829,14 @@
|
|
|
1829
1829
|
outline-color: var(--colors-stroke-hover);
|
|
1830
1830
|
}
|
|
1831
1831
|
|
|
1832
|
+
.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:bd-bs-c_transparent[aria-current="true"],.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:bd-bs-c_transparent[aria-current="page"] {
|
|
1833
|
+
border-block-start-color: transparent;
|
|
1834
|
+
}
|
|
1835
|
+
|
|
1836
|
+
.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:bd-be-c_transparent[aria-current="true"],.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:bd-be-c_transparent[aria-current="page"] {
|
|
1837
|
+
border-block-end-color: transparent;
|
|
1838
|
+
}
|
|
1839
|
+
|
|
1832
1840
|
.first\:bd-bs-c_transparent:first-child {
|
|
1833
1841
|
border-block-start-color: transparent;
|
|
1834
1842
|
}
|
|
@@ -2063,8 +2071,8 @@
|
|
|
2063
2071
|
background: var(--background-hover);
|
|
2064
2072
|
}
|
|
2065
2073
|
|
|
2066
|
-
.hover\:bd-y-c_var\(--border-hover
|
|
2067
|
-
border-block-color: var(--border-hover
|
|
2074
|
+
.hover\:bd-y-c_var\(--border-hover\):is(:hover, [data-hover]) {
|
|
2075
|
+
border-block-color: var(--border-hover);
|
|
2068
2076
|
}
|
|
2069
2077
|
|
|
2070
2078
|
.hover\:bd-c_stroke\.hover:is(:hover, [data-hover]) {
|
package/es/ListItem/ListItem.js
CHANGED
|
@@ -12,13 +12,12 @@ import { sva } from "@ndla/styled-system/css";
|
|
|
12
12
|
import { createStyleContext } from "../createStyleContext";
|
|
13
13
|
import { Image } from "../Image";
|
|
14
14
|
import { Heading } from "../Text";
|
|
15
|
-
|
|
16
|
-
// TODO: Focus ring on current items is not visible
|
|
17
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
18
16
|
export const listItemRecipe = sva({
|
|
19
17
|
slots: ["root", "title", "content", "image"],
|
|
20
18
|
base: {
|
|
21
19
|
root: {
|
|
20
|
+
minHeight: "3xlarge",
|
|
22
21
|
borderBlockWidth: "1px",
|
|
23
22
|
borderInlineColor: "transparent",
|
|
24
23
|
color: "text.default",
|
|
@@ -36,28 +35,6 @@ export const listItemRecipe = sva({
|
|
|
36
35
|
},
|
|
37
36
|
_highlighted: {
|
|
38
37
|
background: "var(--background-hover)"
|
|
39
|
-
},
|
|
40
|
-
'&[aria-current="true"], &[aria-current="page"]': {
|
|
41
|
-
background: "var(--background-current)",
|
|
42
|
-
color: "var(--color-current-hover)",
|
|
43
|
-
_hover: {
|
|
44
|
-
background: "var(--background-hover)",
|
|
45
|
-
color: "text.default"
|
|
46
|
-
},
|
|
47
|
-
_highlighted: {
|
|
48
|
-
background: "var(--background-hover)",
|
|
49
|
-
color: "text.default"
|
|
50
|
-
},
|
|
51
|
-
"& a:focus-visible": {
|
|
52
|
-
_focusVisible: {
|
|
53
|
-
outlineColor: "var(--color-current-hover)"
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
"& button:focus-visible": {
|
|
57
|
-
_focusVisible: {
|
|
58
|
-
boxShadowColor: "var(--color-current-hover)"
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
38
|
}
|
|
62
39
|
},
|
|
63
40
|
content: {
|
|
@@ -96,6 +73,32 @@ export const listItemRecipe = sva({
|
|
|
96
73
|
},
|
|
97
74
|
nonInteractive: {
|
|
98
75
|
false: {
|
|
76
|
+
root: {
|
|
77
|
+
'&[aria-current="true"], &[aria-current="page"]': {
|
|
78
|
+
background: "var(--background-current)",
|
|
79
|
+
borderBlockStartColor: "transparent",
|
|
80
|
+
borderBlockEndColor: "transparent",
|
|
81
|
+
color: "var(--color-current-hover)",
|
|
82
|
+
_hover: {
|
|
83
|
+
background: "var(--background-hover)",
|
|
84
|
+
color: "text.default"
|
|
85
|
+
},
|
|
86
|
+
_highlighted: {
|
|
87
|
+
background: "var(--background-hover)",
|
|
88
|
+
color: "text.default"
|
|
89
|
+
},
|
|
90
|
+
"& a:focus-visible": {
|
|
91
|
+
_focusVisible: {
|
|
92
|
+
outlineColor: "var(--color-current-hover)"
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
"& button:focus-visible": {
|
|
96
|
+
_focusVisible: {
|
|
97
|
+
boxShadowColor: "var(--color-current-hover)"
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
},
|
|
99
102
|
title: {
|
|
100
103
|
textDecoration: "underline",
|
|
101
104
|
_hover: {
|
|
@@ -126,13 +129,12 @@ export const listItemRecipe = sva({
|
|
|
126
129
|
variant: {
|
|
127
130
|
standalone: {
|
|
128
131
|
root: {
|
|
129
|
-
|
|
130
|
-
borderBlockColor: "var(--border)",
|
|
132
|
+
borderBlockColor: "stroke.subtle",
|
|
131
133
|
_hover: {
|
|
132
|
-
borderBlockColor: "var(--border-hover
|
|
134
|
+
borderBlockColor: "var(--border-hover)"
|
|
133
135
|
},
|
|
134
136
|
_highlighted: {
|
|
135
|
-
borderBlockColor: "var(--border-hover
|
|
137
|
+
borderBlockColor: "var(--border-hover)"
|
|
136
138
|
}
|
|
137
139
|
}
|
|
138
140
|
},
|
|
@@ -142,40 +144,50 @@ export const listItemRecipe = sva({
|
|
|
142
144
|
borderBlockEndColor: "transparent",
|
|
143
145
|
marginBlockStart: "-1px",
|
|
144
146
|
_first: {
|
|
145
|
-
borderBlockStartColor: "transparent"
|
|
146
|
-
_hover: {
|
|
147
|
-
borderBlockStartColor: "var(--border-hover)"
|
|
148
|
-
},
|
|
149
|
-
_highlighted: {
|
|
150
|
-
borderBlockStartColor: "var(--border-hover)"
|
|
151
|
-
}
|
|
147
|
+
borderBlockStartColor: "transparent"
|
|
152
148
|
},
|
|
153
149
|
_last: {
|
|
154
150
|
borderBlockEndColor: "stroke.subtle"
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
compoundVariants: [{
|
|
157
|
+
variant: "list",
|
|
158
|
+
nonInteractive: false,
|
|
159
|
+
css: {
|
|
160
|
+
root: {
|
|
161
|
+
_first: {
|
|
162
162
|
_hover: {
|
|
163
|
-
|
|
164
|
-
borderBlockStartColor: "var(--border-hover)",
|
|
165
|
-
_last: {
|
|
166
|
-
borderBlockEndColor: "var(--border-hover)"
|
|
167
|
-
}
|
|
163
|
+
borderBlockStartColor: "var(--border-hover)"
|
|
168
164
|
},
|
|
169
165
|
_highlighted: {
|
|
170
|
-
borderBlockStartColor: "var(--border-hover)"
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
166
|
+
borderBlockStartColor: "var(--border-hover)"
|
|
167
|
+
}
|
|
168
|
+
},
|
|
169
|
+
"&:hover + &": {
|
|
170
|
+
borderBlockStartColor: "var(--border-hover)"
|
|
171
|
+
},
|
|
172
|
+
"&[data-highlighted] + &": {
|
|
173
|
+
borderBlockStartColor: "var(--border-hover)"
|
|
174
|
+
},
|
|
175
|
+
_hover: {
|
|
176
|
+
borderBlockEndColor: "transparent",
|
|
177
|
+
borderBlockStartColor: "var(--border-hover)",
|
|
178
|
+
_last: {
|
|
179
|
+
borderBlockEndColor: "var(--border-hover)"
|
|
180
|
+
}
|
|
181
|
+
},
|
|
182
|
+
_highlighted: {
|
|
183
|
+
borderBlockStartColor: "var(--border-hover)",
|
|
184
|
+
_last: {
|
|
185
|
+
borderBlockEndColor: "var(--border-hover)"
|
|
174
186
|
}
|
|
175
187
|
}
|
|
176
188
|
}
|
|
177
189
|
}
|
|
178
|
-
}
|
|
190
|
+
}]
|
|
179
191
|
});
|
|
180
192
|
const {
|
|
181
193
|
withProvider,
|
|
@@ -24,6 +24,32 @@ export declare const listItemRecipe: import("@ndla/styled-system/types").SlotRec
|
|
|
24
24
|
};
|
|
25
25
|
nonInteractive: {
|
|
26
26
|
false: {
|
|
27
|
+
root: {
|
|
28
|
+
'&[aria-current="true"], &[aria-current="page"]': {
|
|
29
|
+
background: "var(--background-current)";
|
|
30
|
+
borderBlockStartColor: "transparent";
|
|
31
|
+
borderBlockEndColor: "transparent";
|
|
32
|
+
color: "var(--color-current-hover)";
|
|
33
|
+
_hover: {
|
|
34
|
+
background: "var(--background-hover)";
|
|
35
|
+
color: "text.default";
|
|
36
|
+
};
|
|
37
|
+
_highlighted: {
|
|
38
|
+
background: "var(--background-hover)";
|
|
39
|
+
color: "text.default";
|
|
40
|
+
};
|
|
41
|
+
"& a:focus-visible": {
|
|
42
|
+
_focusVisible: {
|
|
43
|
+
outlineColor: "var(--color-current-hover)";
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
"& button:focus-visible": {
|
|
47
|
+
_focusVisible: {
|
|
48
|
+
boxShadowColor: "var(--color-current-hover)";
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
};
|
|
27
53
|
title: {
|
|
28
54
|
textDecoration: "underline";
|
|
29
55
|
_hover: {
|
|
@@ -53,13 +79,12 @@ export declare const listItemRecipe: import("@ndla/styled-system/types").SlotRec
|
|
|
53
79
|
variant: {
|
|
54
80
|
standalone: {
|
|
55
81
|
root: {
|
|
56
|
-
|
|
57
|
-
borderBlockColor: "var(--border)";
|
|
82
|
+
borderBlockColor: "stroke.subtle";
|
|
58
83
|
_hover: {
|
|
59
|
-
borderBlockColor: "var(--border-hover
|
|
84
|
+
borderBlockColor: "var(--border-hover)";
|
|
60
85
|
};
|
|
61
86
|
_highlighted: {
|
|
62
|
-
borderBlockColor: "var(--border-hover
|
|
87
|
+
borderBlockColor: "var(--border-hover)";
|
|
63
88
|
};
|
|
64
89
|
};
|
|
65
90
|
};
|
|
@@ -70,35 +95,10 @@ export declare const listItemRecipe: import("@ndla/styled-system/types").SlotRec
|
|
|
70
95
|
marginBlockStart: "-1px";
|
|
71
96
|
_first: {
|
|
72
97
|
borderBlockStartColor: "transparent";
|
|
73
|
-
_hover: {
|
|
74
|
-
borderBlockStartColor: "var(--border-hover)";
|
|
75
|
-
};
|
|
76
|
-
_highlighted: {
|
|
77
|
-
borderBlockStartColor: "var(--border-hover)";
|
|
78
|
-
};
|
|
79
98
|
};
|
|
80
99
|
_last: {
|
|
81
100
|
borderBlockEndColor: "stroke.subtle";
|
|
82
101
|
};
|
|
83
|
-
"&:hover + &": {
|
|
84
|
-
borderBlockStartColor: "var(--border-hover)";
|
|
85
|
-
};
|
|
86
|
-
"&[data-highlighted] + &": {
|
|
87
|
-
borderBlockStartColor: "var(--border-hover)";
|
|
88
|
-
};
|
|
89
|
-
_hover: {
|
|
90
|
-
borderBlockEndColor: "transparent";
|
|
91
|
-
borderBlockStartColor: "var(--border-hover)";
|
|
92
|
-
_last: {
|
|
93
|
-
borderBlockEndColor: "var(--border-hover)";
|
|
94
|
-
};
|
|
95
|
-
};
|
|
96
|
-
_highlighted: {
|
|
97
|
-
borderBlockStartColor: "var(--border-hover)";
|
|
98
|
-
_last: {
|
|
99
|
-
borderBlockEndColor: "var(--border-hover)";
|
|
100
|
-
};
|
|
101
|
-
};
|
|
102
102
|
};
|
|
103
103
|
};
|
|
104
104
|
};
|
package/lib/ListItem/ListItem.js
CHANGED
|
@@ -19,12 +19,11 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
19
19
|
*
|
|
20
20
|
*/
|
|
21
21
|
|
|
22
|
-
// TODO: Focus ring on current items is not visible
|
|
23
|
-
|
|
24
22
|
const listItemRecipe = exports.listItemRecipe = (0, _css.sva)({
|
|
25
23
|
slots: ["root", "title", "content", "image"],
|
|
26
24
|
base: {
|
|
27
25
|
root: {
|
|
26
|
+
minHeight: "3xlarge",
|
|
28
27
|
borderBlockWidth: "1px",
|
|
29
28
|
borderInlineColor: "transparent",
|
|
30
29
|
color: "text.default",
|
|
@@ -42,28 +41,6 @@ const listItemRecipe = exports.listItemRecipe = (0, _css.sva)({
|
|
|
42
41
|
},
|
|
43
42
|
_highlighted: {
|
|
44
43
|
background: "var(--background-hover)"
|
|
45
|
-
},
|
|
46
|
-
'&[aria-current="true"], &[aria-current="page"]': {
|
|
47
|
-
background: "var(--background-current)",
|
|
48
|
-
color: "var(--color-current-hover)",
|
|
49
|
-
_hover: {
|
|
50
|
-
background: "var(--background-hover)",
|
|
51
|
-
color: "text.default"
|
|
52
|
-
},
|
|
53
|
-
_highlighted: {
|
|
54
|
-
background: "var(--background-hover)",
|
|
55
|
-
color: "text.default"
|
|
56
|
-
},
|
|
57
|
-
"& a:focus-visible": {
|
|
58
|
-
_focusVisible: {
|
|
59
|
-
outlineColor: "var(--color-current-hover)"
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
|
-
"& button:focus-visible": {
|
|
63
|
-
_focusVisible: {
|
|
64
|
-
boxShadowColor: "var(--color-current-hover)"
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
44
|
}
|
|
68
45
|
},
|
|
69
46
|
content: {
|
|
@@ -102,6 +79,32 @@ const listItemRecipe = exports.listItemRecipe = (0, _css.sva)({
|
|
|
102
79
|
},
|
|
103
80
|
nonInteractive: {
|
|
104
81
|
false: {
|
|
82
|
+
root: {
|
|
83
|
+
'&[aria-current="true"], &[aria-current="page"]': {
|
|
84
|
+
background: "var(--background-current)",
|
|
85
|
+
borderBlockStartColor: "transparent",
|
|
86
|
+
borderBlockEndColor: "transparent",
|
|
87
|
+
color: "var(--color-current-hover)",
|
|
88
|
+
_hover: {
|
|
89
|
+
background: "var(--background-hover)",
|
|
90
|
+
color: "text.default"
|
|
91
|
+
},
|
|
92
|
+
_highlighted: {
|
|
93
|
+
background: "var(--background-hover)",
|
|
94
|
+
color: "text.default"
|
|
95
|
+
},
|
|
96
|
+
"& a:focus-visible": {
|
|
97
|
+
_focusVisible: {
|
|
98
|
+
outlineColor: "var(--color-current-hover)"
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
"& button:focus-visible": {
|
|
102
|
+
_focusVisible: {
|
|
103
|
+
boxShadowColor: "var(--color-current-hover)"
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
},
|
|
105
108
|
title: {
|
|
106
109
|
textDecoration: "underline",
|
|
107
110
|
_hover: {
|
|
@@ -132,13 +135,12 @@ const listItemRecipe = exports.listItemRecipe = (0, _css.sva)({
|
|
|
132
135
|
variant: {
|
|
133
136
|
standalone: {
|
|
134
137
|
root: {
|
|
135
|
-
|
|
136
|
-
borderBlockColor: "var(--border)",
|
|
138
|
+
borderBlockColor: "stroke.subtle",
|
|
137
139
|
_hover: {
|
|
138
|
-
borderBlockColor: "var(--border-hover
|
|
140
|
+
borderBlockColor: "var(--border-hover)"
|
|
139
141
|
},
|
|
140
142
|
_highlighted: {
|
|
141
|
-
borderBlockColor: "var(--border-hover
|
|
143
|
+
borderBlockColor: "var(--border-hover)"
|
|
142
144
|
}
|
|
143
145
|
}
|
|
144
146
|
},
|
|
@@ -148,40 +150,50 @@ const listItemRecipe = exports.listItemRecipe = (0, _css.sva)({
|
|
|
148
150
|
borderBlockEndColor: "transparent",
|
|
149
151
|
marginBlockStart: "-1px",
|
|
150
152
|
_first: {
|
|
151
|
-
borderBlockStartColor: "transparent"
|
|
152
|
-
_hover: {
|
|
153
|
-
borderBlockStartColor: "var(--border-hover)"
|
|
154
|
-
},
|
|
155
|
-
_highlighted: {
|
|
156
|
-
borderBlockStartColor: "var(--border-hover)"
|
|
157
|
-
}
|
|
153
|
+
borderBlockStartColor: "transparent"
|
|
158
154
|
},
|
|
159
155
|
_last: {
|
|
160
156
|
borderBlockEndColor: "stroke.subtle"
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
compoundVariants: [{
|
|
163
|
+
variant: "list",
|
|
164
|
+
nonInteractive: false,
|
|
165
|
+
css: {
|
|
166
|
+
root: {
|
|
167
|
+
_first: {
|
|
168
168
|
_hover: {
|
|
169
|
-
|
|
170
|
-
borderBlockStartColor: "var(--border-hover)",
|
|
171
|
-
_last: {
|
|
172
|
-
borderBlockEndColor: "var(--border-hover)"
|
|
173
|
-
}
|
|
169
|
+
borderBlockStartColor: "var(--border-hover)"
|
|
174
170
|
},
|
|
175
171
|
_highlighted: {
|
|
176
|
-
borderBlockStartColor: "var(--border-hover)"
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
172
|
+
borderBlockStartColor: "var(--border-hover)"
|
|
173
|
+
}
|
|
174
|
+
},
|
|
175
|
+
"&:hover + &": {
|
|
176
|
+
borderBlockStartColor: "var(--border-hover)"
|
|
177
|
+
},
|
|
178
|
+
"&[data-highlighted] + &": {
|
|
179
|
+
borderBlockStartColor: "var(--border-hover)"
|
|
180
|
+
},
|
|
181
|
+
_hover: {
|
|
182
|
+
borderBlockEndColor: "transparent",
|
|
183
|
+
borderBlockStartColor: "var(--border-hover)",
|
|
184
|
+
_last: {
|
|
185
|
+
borderBlockEndColor: "var(--border-hover)"
|
|
186
|
+
}
|
|
187
|
+
},
|
|
188
|
+
_highlighted: {
|
|
189
|
+
borderBlockStartColor: "var(--border-hover)",
|
|
190
|
+
_last: {
|
|
191
|
+
borderBlockEndColor: "var(--border-hover)"
|
|
180
192
|
}
|
|
181
193
|
}
|
|
182
194
|
}
|
|
183
195
|
}
|
|
184
|
-
}
|
|
196
|
+
}]
|
|
185
197
|
});
|
|
186
198
|
const {
|
|
187
199
|
withProvider,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/primitives",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.13-alpha.0",
|
|
4
4
|
"description": "Primitive components for NDLA.",
|
|
5
5
|
"license": "GPL-3.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"lib"
|
|
29
29
|
],
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@ark-ui/react": "^3.
|
|
31
|
+
"@ark-ui/react": "^3.8.0",
|
|
32
32
|
"@ndla/styled-system": "^0.0.11",
|
|
33
33
|
"@ndla/util": "^4.1.0"
|
|
34
34
|
},
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"publishConfig": {
|
|
44
44
|
"access": "public"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "d75660d97b97c191869b6b8a4893bb2bbdf132e6"
|
|
47
47
|
}
|