@bccampus/ui-components 0.8.1 → 0.8.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.
- package/dist/components/ui/horizontal-list.js +1 -1
- package/dist/components/ui/page-section.js +1 -1
- package/dist/components/ui/typography/caption.js +1 -1
- package/package.json +1 -1
- package/src/components/ui/card.tsx +2 -2
- package/src/components/ui/horizontal-list.tsx +3 -3
- package/src/components/ui/page-section.tsx +1 -1
- package/src/components/ui/typography/caption.tsx +1 -1
- package/src/styles/theme.css +2 -2
- package/src/styles/typography.css +102 -206
- package/vite.ladle.config.ts +6 -6
|
@@ -9,7 +9,7 @@ const ChevronLeft = createLucideIcon("chevron-left", __iconNode$1);
|
|
|
9
9
|
const __iconNode = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
|
|
10
10
|
const ChevronRight = createLucideIcon("chevron-right", __iconNode);
|
|
11
11
|
const horizontalListVariants = cva(
|
|
12
|
-
"scrollbar-hidden overscroll-x-contain flex flex-row flex-nowrap py-1 gap-(--gap-card) overflow-x-auto snap-x snap-mandatory
|
|
12
|
+
"scrollbar-hidden overscroll-x-contain flex flex-row flex-nowrap py-1 gap-(--gap-card) overflow-x-auto snap-x snap-mandatory scroll-smooth *:shrink-0 *:grow-0 *:snap-center *:select-none",
|
|
13
13
|
{
|
|
14
14
|
variants: {
|
|
15
15
|
variant: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { c as cn } from "../../_chunks/utils.js";
|
|
3
3
|
import { c as cva } from "../../_chunks/index2.js";
|
|
4
|
-
const pageSectionVariants = cva("group @container/page-section relative w-full", {
|
|
4
|
+
const pageSectionVariants = cva("group @container/page-section relative w-full text-foreground", {
|
|
5
5
|
variants: {
|
|
6
6
|
px: {
|
|
7
7
|
none: "px-0",
|
|
@@ -5,7 +5,7 @@ import { c as cn } from "../../../_chunks/utils.js";
|
|
|
5
5
|
const captionVariants = cva("tracking-tight text-balance", {
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
|
-
default: "scroll-mr-5 text-lg/5 font-bold text-secondary
|
|
8
|
+
default: "scroll-mr-5 text-lg/5 font-bold text-secondary",
|
|
9
9
|
light: "scroll-mr-4 text-sm/4 font-normal text-primary"
|
|
10
10
|
}
|
|
11
11
|
},
|
package/package.json
CHANGED
|
@@ -60,7 +60,7 @@ function CardTitle({ size = "md", className, ...props }: CardTitleProps) {
|
|
|
60
60
|
"heading-2": size === "md",
|
|
61
61
|
"heading-3": size === "sm",
|
|
62
62
|
},
|
|
63
|
-
className
|
|
63
|
+
className,
|
|
64
64
|
)}
|
|
65
65
|
{...props}
|
|
66
66
|
/>
|
|
@@ -76,7 +76,7 @@ function CardSubtitle({ size = "md", className, ...props }: CardTitleProps) {
|
|
|
76
76
|
"heading-3": size === "md",
|
|
77
77
|
"text-base": size === "sm",
|
|
78
78
|
},
|
|
79
|
-
className
|
|
79
|
+
className,
|
|
80
80
|
)}
|
|
81
81
|
{...props}
|
|
82
82
|
/>
|
|
@@ -5,7 +5,7 @@ import { useCallback, useRef } from "react";
|
|
|
5
5
|
import { cva, type VariantProps } from "class-variance-authority";
|
|
6
6
|
|
|
7
7
|
const horizontalListVariants = cva(
|
|
8
|
-
"scrollbar-hidden overscroll-x-contain flex flex-row flex-nowrap py-1 gap-(--gap-card) overflow-x-auto snap-x snap-mandatory
|
|
8
|
+
"scrollbar-hidden overscroll-x-contain flex flex-row flex-nowrap py-1 gap-(--gap-card) overflow-x-auto snap-x snap-mandatory scroll-smooth *:shrink-0 *:grow-0 *:snap-center *:select-none",
|
|
9
9
|
{
|
|
10
10
|
variants: {
|
|
11
11
|
variant: {
|
|
@@ -16,7 +16,7 @@ const horizontalListVariants = cva(
|
|
|
16
16
|
defaultVariants: {
|
|
17
17
|
variant: "contain",
|
|
18
18
|
},
|
|
19
|
-
}
|
|
19
|
+
},
|
|
20
20
|
);
|
|
21
21
|
|
|
22
22
|
export interface HorizontalListProps extends VariantProps<typeof horizontalListVariants>, React.ComponentProps<"div"> {
|
|
@@ -54,7 +54,7 @@ function HorizontalList({
|
|
|
54
54
|
className={cn(
|
|
55
55
|
horizontalListVariants({ variant }),
|
|
56
56
|
|
|
57
|
-
className
|
|
57
|
+
className,
|
|
58
58
|
)}
|
|
59
59
|
{...props}
|
|
60
60
|
>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { cn } from "@/lib/utils";
|
|
2
2
|
import { cva, type VariantProps } from "class-variance-authority";
|
|
3
3
|
|
|
4
|
-
const pageSectionVariants = cva("group @container/page-section relative w-full", {
|
|
4
|
+
const pageSectionVariants = cva("group @container/page-section relative w-full text-foreground", {
|
|
5
5
|
variants: {
|
|
6
6
|
px: {
|
|
7
7
|
none: "px-0",
|
|
@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils";
|
|
|
6
6
|
const captionVariants = cva("tracking-tight text-balance", {
|
|
7
7
|
variants: {
|
|
8
8
|
variant: {
|
|
9
|
-
default: "scroll-mr-5 text-lg/5 font-bold text-secondary
|
|
9
|
+
default: "scroll-mr-5 text-lg/5 font-bold text-secondary",
|
|
10
10
|
light: "scroll-mr-4 text-sm/4 font-normal text-primary",
|
|
11
11
|
},
|
|
12
12
|
},
|
package/src/styles/theme.css
CHANGED
|
@@ -122,11 +122,11 @@
|
|
|
122
122
|
--foreground: oklch(0.985 0 0);
|
|
123
123
|
--card: oklch(0.141 0.005 285.823);
|
|
124
124
|
--card-foreground: oklch(0.985 0 0);
|
|
125
|
-
--popover: oklch(0.
|
|
125
|
+
--popover: oklch(0.141 0.005 285.823);
|
|
126
126
|
--popover-foreground: oklch(0.985 0 0);
|
|
127
127
|
--primary: oklch(0.985 0 0);
|
|
128
128
|
--primary-foreground: oklch(0.3741 0.0774 245.65);
|
|
129
|
-
--secondary: oklch(0.
|
|
129
|
+
--secondary: oklch(0.9156 0.0315 200);
|
|
130
130
|
--secondary-foreground: oklch(0 0 0);
|
|
131
131
|
--muted: oklch(0.274 0.006 286.033);
|
|
132
132
|
--muted-foreground: oklch(0.705 0.015 286.067);
|
|
@@ -9,19 +9,26 @@
|
|
|
9
9
|
.heading-1,
|
|
10
10
|
.heading-2,
|
|
11
11
|
.heading-3 {
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
@apply font-sans-accent text-primary font-normal;
|
|
13
|
+
|
|
14
14
|
text-wrap: balance;
|
|
15
15
|
letter-spacing: var(--tracking-tight);
|
|
16
|
-
font-weight: var(--font-weight-normal);
|
|
17
16
|
--tw-tracking: var(--tracking-tight);
|
|
18
17
|
line-height: 1.125em;
|
|
19
18
|
}
|
|
20
19
|
|
|
21
20
|
h1,
|
|
22
21
|
.heading-1 {
|
|
22
|
+
font-weight: var(--font-weight-semibold);
|
|
23
23
|
font-size: calc(var(--text-base) * 2.5);
|
|
24
24
|
|
|
25
|
+
@variant lg {
|
|
26
|
+
font-size: calc(var(--text-base) * 4);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
h1.big,
|
|
31
|
+
.heading-1.big {
|
|
25
32
|
@variant lg {
|
|
26
33
|
font-size: calc(var(--text-base) * 5);
|
|
27
34
|
}
|
|
@@ -29,17 +36,20 @@
|
|
|
29
36
|
|
|
30
37
|
h2,
|
|
31
38
|
.heading-2 {
|
|
32
|
-
font-size: calc(var(--text-base) * 1.
|
|
39
|
+
font-size: calc(var(--text-base) * 1.5);
|
|
33
40
|
font-weight: var(--font-weight-semibold);
|
|
41
|
+
|
|
42
|
+
@variant lg {
|
|
43
|
+
font-size: calc(var(--text-base) * 1.875);
|
|
44
|
+
}
|
|
34
45
|
}
|
|
35
46
|
|
|
36
47
|
h2.big,
|
|
37
48
|
.heading-2.big {
|
|
38
49
|
font-size: calc(var(--text-base) * 1.875);
|
|
39
|
-
font-weight: var(--font-weight-semibold);
|
|
40
50
|
|
|
41
51
|
@variant lg {
|
|
42
|
-
font-size: calc(var(--text-base) * 4
|
|
52
|
+
font-size: calc(var(--text-base) * 4);
|
|
43
53
|
}
|
|
44
54
|
}
|
|
45
55
|
|
|
@@ -54,82 +64,66 @@
|
|
|
54
64
|
}
|
|
55
65
|
|
|
56
66
|
p {
|
|
57
|
-
|
|
58
|
-
line-height: --spacing(6);
|
|
67
|
+
@apply leading-6 text-foreground;
|
|
59
68
|
}
|
|
60
69
|
|
|
61
70
|
a {
|
|
62
|
-
|
|
63
|
-
text-underline-offset: 4px;
|
|
71
|
+
@apply no-underline underline-offset-4;
|
|
64
72
|
|
|
65
73
|
&:hover {
|
|
66
74
|
@apply text-shadow-lg text-shadow-complement-1-50;
|
|
67
75
|
}
|
|
68
76
|
|
|
69
77
|
&:focus-visible {
|
|
70
|
-
outline-
|
|
71
|
-
outline-style: solid;
|
|
72
|
-
outline-offset: 0;
|
|
73
|
-
outline-width: calc(var(--spacing) * 0.5);
|
|
78
|
+
@apply outline-ring outline-offset-0 outline-solid outline-2;
|
|
74
79
|
}
|
|
75
80
|
|
|
76
81
|
&[data-slot] {
|
|
77
|
-
@apply text-shadow-none;
|
|
78
|
-
text-decoration-line: none;
|
|
82
|
+
@apply text-shadow-none no-underline;
|
|
79
83
|
}
|
|
80
84
|
}
|
|
81
85
|
|
|
82
86
|
.bcc-typography {
|
|
83
87
|
blockquote {
|
|
84
|
-
|
|
85
|
-
font-family: var(--font-sans-accent);
|
|
86
|
-
font-weight: var(--font-weight-medium);
|
|
87
|
-
|
|
88
|
-
margin-inline: --spacing(4);
|
|
89
|
-
margin-block: --spacing(6);
|
|
88
|
+
@apply text-primary font-sans-accent mx-4 my-6;
|
|
90
89
|
|
|
91
90
|
& > cite {
|
|
92
91
|
display: block;
|
|
93
92
|
text-align: end;
|
|
94
93
|
}
|
|
95
94
|
|
|
96
|
-
@
|
|
97
|
-
|
|
95
|
+
@variant sm {
|
|
96
|
+
@apply mx-16;
|
|
98
97
|
}
|
|
99
98
|
}
|
|
100
99
|
|
|
101
100
|
aside {
|
|
101
|
+
@apply w-xs mt-4 mb-2 mx-auto p-4 border-y-4 text-sidebar-accent-foreground bg-sidebar-accent border-sidebar-border;
|
|
102
|
+
|
|
102
103
|
display: block;
|
|
103
104
|
float: none;
|
|
104
|
-
width: var(--container-xs);
|
|
105
|
-
margin-block-start: --spacing(4);
|
|
106
|
-
margin-block-end: --spacing(2);
|
|
107
|
-
margin-inline: auto;
|
|
108
|
-
padding: --spacing(4);
|
|
109
|
-
border-block-width: var(--spacing);
|
|
110
105
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
106
|
+
@variant sm {
|
|
107
|
+
@apply mx-16;
|
|
108
|
+
}
|
|
114
109
|
|
|
115
110
|
@media (width >= 40rem) {
|
|
111
|
+
@apply ml-2 border-y-0 border-s-4;
|
|
112
|
+
|
|
116
113
|
float: inline-end;
|
|
117
|
-
margin-left: --spacing(2);
|
|
118
|
-
border-block-width: 0px;
|
|
119
|
-
border-inline-start-width: var(--spacing);
|
|
120
114
|
}
|
|
121
115
|
}
|
|
122
116
|
|
|
123
117
|
ul,
|
|
124
118
|
ol {
|
|
125
|
-
|
|
119
|
+
@apply ml-4 text-foreground;
|
|
126
120
|
|
|
127
121
|
& > li {
|
|
128
|
-
|
|
122
|
+
@apply mt-2;
|
|
129
123
|
}
|
|
130
124
|
|
|
131
|
-
@
|
|
132
|
-
|
|
125
|
+
@variant sm {
|
|
126
|
+
@apply ml-8;
|
|
133
127
|
}
|
|
134
128
|
}
|
|
135
129
|
ul {
|
|
@@ -153,247 +147,173 @@
|
|
|
153
147
|
}
|
|
154
148
|
|
|
155
149
|
dl {
|
|
156
|
-
|
|
150
|
+
@apply mt-2 text-foreground;
|
|
151
|
+
|
|
157
152
|
& > dt {
|
|
158
|
-
font-
|
|
159
|
-
|
|
160
|
-
font-style: italic;
|
|
161
|
-
margin-top: calc(var(--spacing));
|
|
153
|
+
@apply font-sans-accent font-medium italic mt-1;
|
|
154
|
+
|
|
162
155
|
&::after {
|
|
163
156
|
content: ": ";
|
|
164
157
|
}
|
|
165
158
|
}
|
|
166
159
|
|
|
167
160
|
& > dd {
|
|
168
|
-
|
|
169
|
-
font-size: var(--text-sm);
|
|
161
|
+
@apply ml-4 text-sm;
|
|
170
162
|
}
|
|
171
163
|
}
|
|
172
164
|
|
|
173
165
|
details {
|
|
174
|
-
|
|
175
|
-
border-width: 1px;
|
|
176
|
-
border-radius: var(--radius-container);
|
|
177
|
-
|
|
178
|
-
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
|
|
179
|
-
--tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
|
180
|
-
transition-timing-function: var(--default-transition-timing-function);
|
|
181
|
-
transition-duration: var(--default-transition-duration);
|
|
166
|
+
@apply text-foreground mt-4 border rounded transition ease-in duration-200;
|
|
182
167
|
|
|
183
168
|
&:hover {
|
|
184
|
-
|
|
169
|
+
@apply bg-muted;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
&:focus-within {
|
|
173
|
+
@apply outline-offset-0 outline-ring outline-2 outline-solid;
|
|
185
174
|
}
|
|
186
175
|
|
|
187
176
|
& > summary {
|
|
188
|
-
|
|
189
|
-
padding-inline: --spacing(4);
|
|
190
|
-
padding-block: --spacing(2);
|
|
191
|
-
list-style: none;
|
|
177
|
+
@apply rounded px-4 py-2 list-none;
|
|
192
178
|
|
|
193
179
|
&::-webkit-details-marker {
|
|
194
180
|
display: none;
|
|
195
181
|
}
|
|
196
182
|
|
|
197
183
|
&:focus-visible {
|
|
198
|
-
outline-
|
|
199
|
-
outline-style: solid;
|
|
200
|
-
outline-offset: 0;
|
|
201
|
-
outline-width: var(--spacing);
|
|
184
|
+
@apply outline-none;
|
|
202
185
|
}
|
|
203
186
|
}
|
|
204
187
|
|
|
205
188
|
&[open] {
|
|
206
|
-
|
|
207
|
-
& > summary {
|
|
208
|
-
border-bottom-width: 1px;
|
|
189
|
+
@apply bg-muted;
|
|
209
190
|
|
|
210
|
-
|
|
211
|
-
border-
|
|
191
|
+
& > summary {
|
|
192
|
+
@apply border-b rounded-br-none rounded-bl-none;
|
|
212
193
|
}
|
|
213
194
|
|
|
214
195
|
& > p {
|
|
215
|
-
|
|
216
|
-
padding: --spacing(4);
|
|
196
|
+
@apply m-0 p-4;
|
|
217
197
|
}
|
|
218
198
|
}
|
|
219
199
|
}
|
|
220
200
|
|
|
221
201
|
details + details {
|
|
222
|
-
|
|
202
|
+
@apply mt-1;
|
|
223
203
|
}
|
|
224
204
|
|
|
225
205
|
address {
|
|
226
|
-
|
|
227
|
-
margin-block: --spacing(4);
|
|
206
|
+
@apply text-foreground italic my-4;
|
|
228
207
|
}
|
|
229
208
|
|
|
230
209
|
code,
|
|
231
210
|
kbd,
|
|
232
211
|
samp {
|
|
233
|
-
|
|
234
|
-
color: var(--primary);
|
|
235
|
-
font-family: var(--font-mono);
|
|
236
|
-
font-size: var(--text-sm);
|
|
237
|
-
font-weight: var(--font-weight-medium);
|
|
212
|
+
@apply relative text-sm text-primary font-mono font-medium;
|
|
238
213
|
}
|
|
239
214
|
|
|
240
215
|
code {
|
|
241
|
-
|
|
242
|
-
border-radius: var(--radius-sm);
|
|
243
|
-
|
|
244
|
-
padding-inline: --spacing(2);
|
|
245
|
-
padding-block: var(--spacing);
|
|
216
|
+
@apply bg-muted rounded-sm px-2 py-1;
|
|
246
217
|
}
|
|
247
218
|
|
|
248
219
|
kbd {
|
|
249
|
-
|
|
220
|
+
@apply text-shadow-sm;
|
|
221
|
+
|
|
250
222
|
> kbd {
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
border-radius: var(--radius-sm);
|
|
256
|
-
border-width: 1px;
|
|
257
|
-
box-shadow: 0 1px 1px color-mix(in oklab, var(--color-foreground) 20%, transparent),
|
|
223
|
+
@apply px-2 py-1 bg-muted rounded-sm border whitespace-nowrap;
|
|
224
|
+
|
|
225
|
+
box-shadow:
|
|
226
|
+
0 1px 1px color-mix(in oklab, var(--color-foreground) 20%, transparent),
|
|
258
227
|
0 2px 0 0 color-mix(in oklab, var(--color-background) 20%, transparent) inset;
|
|
259
228
|
}
|
|
260
229
|
}
|
|
261
230
|
|
|
262
231
|
pre {
|
|
263
|
-
|
|
264
|
-
border-radius: var(--radius-sm);
|
|
265
|
-
padding: --spacing(4);
|
|
266
|
-
line-height: var(--text-lg--line-height);
|
|
267
|
-
font-size: var(--text-sm);
|
|
232
|
+
@apply bg-muted text-foreground rounded-sm p-4 leading-6 text-sm;
|
|
268
233
|
|
|
269
234
|
code {
|
|
270
|
-
|
|
235
|
+
@apply p-0;
|
|
271
236
|
}
|
|
272
237
|
}
|
|
273
238
|
|
|
274
239
|
del {
|
|
275
|
-
text-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
&:is(.dark *) {
|
|
280
|
-
background-color: var(--color-red-900);
|
|
240
|
+
@apply no-underline bg-red-200 text-foreground px-1;
|
|
241
|
+
|
|
242
|
+
@variant dark {
|
|
243
|
+
@apply bg-red-900;
|
|
281
244
|
}
|
|
282
245
|
}
|
|
283
246
|
|
|
284
247
|
ins {
|
|
285
|
-
text-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
&:is(.dark *) {
|
|
290
|
-
background-color: var(--color-green-900);
|
|
248
|
+
@apply no-underline bg-green-200 text-foreground px-1;
|
|
249
|
+
|
|
250
|
+
@variant dark {
|
|
251
|
+
@apply bg-green-900;
|
|
291
252
|
}
|
|
292
253
|
}
|
|
293
254
|
|
|
294
255
|
mark {
|
|
295
|
-
text-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
&:is(.dark *) {
|
|
300
|
-
background-color: var(--color-teal-900);
|
|
256
|
+
@apply no-underline bg-amber-100 text-foreground px-1;
|
|
257
|
+
|
|
258
|
+
@variant dark {
|
|
259
|
+
@apply bg-amber-900;
|
|
301
260
|
}
|
|
302
261
|
}
|
|
303
262
|
|
|
304
263
|
abbr {
|
|
305
|
-
|
|
264
|
+
@apply underline-offset-4;
|
|
306
265
|
}
|
|
307
266
|
|
|
308
267
|
small {
|
|
309
|
-
|
|
310
|
-
line-height: --spacing(6);
|
|
268
|
+
@apply text-sm leading-4;
|
|
311
269
|
}
|
|
312
270
|
|
|
313
271
|
/* Table */
|
|
314
272
|
.scroll-enclosure {
|
|
315
|
-
|
|
316
|
-
display: block;
|
|
317
|
-
width: 100%;
|
|
318
|
-
overflow: auto;
|
|
273
|
+
@apply relative block w-full overflow-auto;
|
|
319
274
|
}
|
|
320
275
|
|
|
321
276
|
.bordered-enclosure {
|
|
322
|
-
border
|
|
323
|
-
border-radius: var(--radius-container);
|
|
277
|
+
@apply border rounded;
|
|
324
278
|
}
|
|
325
279
|
|
|
326
280
|
table.no-wrap {
|
|
327
281
|
td {
|
|
328
|
-
|
|
282
|
+
@apply whitespace-nowrap;
|
|
329
283
|
}
|
|
330
284
|
}
|
|
331
285
|
|
|
332
286
|
table {
|
|
333
|
-
table-
|
|
334
|
-
position: relative;
|
|
335
|
-
border-spacing: 0;
|
|
336
|
-
border-collapse: separate;
|
|
337
|
-
caption-side: bottom;
|
|
338
|
-
background-color: var(--background);
|
|
339
|
-
|
|
340
|
-
display: block;
|
|
341
|
-
width: fit-content;
|
|
342
|
-
max-width: 100%;
|
|
343
|
-
overflow-x: auto;
|
|
344
|
-
margin-inline: auto;
|
|
287
|
+
@apply table-auto relative block border-spacing-0 border-separate caption-bottom bg-background text-foreground w-fit max-w-full overflow-x-auto mx-auto;
|
|
345
288
|
|
|
346
289
|
.scroll-enclosure > & {
|
|
347
|
-
|
|
348
|
-
overflow-x: initial;
|
|
349
|
-
width: 100%;
|
|
350
|
-
height: 100%;
|
|
290
|
+
@apply table overflow-x-auto w-full h-full;
|
|
351
291
|
}
|
|
352
292
|
}
|
|
353
293
|
|
|
354
294
|
caption {
|
|
355
|
-
|
|
356
|
-
margin: 0px;
|
|
357
|
-
padding: --spacing(2);
|
|
358
|
-
border-top-width: 1px;
|
|
359
|
-
|
|
360
|
-
text-align: center;
|
|
361
|
-
font-family: var(--font-sans-accent);
|
|
362
|
-
font-size: var(--text-sm);
|
|
363
|
-
font-weight: var(--font-weight-medium);
|
|
364
|
-
line-height: 1.5em;
|
|
295
|
+
@apply text-muted-foreground m-0 p-2 border-t text-center font-sans-accent text-sm font-medium leading-5;
|
|
365
296
|
}
|
|
366
297
|
|
|
367
298
|
tr {
|
|
368
|
-
|
|
369
|
-
margin: 0px;
|
|
299
|
+
@apply p-0 m-0;
|
|
370
300
|
}
|
|
371
301
|
th,
|
|
372
302
|
td {
|
|
373
|
-
|
|
374
|
-
padding-block: --spacing(2);
|
|
375
|
-
text-align: left;
|
|
376
|
-
vertical-align: top;
|
|
377
|
-
white-space: pre-wrap;
|
|
303
|
+
@apply px-4 py-2 text-left align-top whitespace-pre-wrap;
|
|
378
304
|
|
|
379
305
|
&[align="center"] {
|
|
380
|
-
text-
|
|
306
|
+
@apply text-center;
|
|
381
307
|
}
|
|
382
308
|
&[align="right"] {
|
|
383
|
-
text-
|
|
309
|
+
@apply text-right;
|
|
384
310
|
}
|
|
385
311
|
}
|
|
386
312
|
|
|
387
313
|
thead {
|
|
388
|
-
|
|
389
|
-
z-index: 5;
|
|
390
|
-
top: 0px;
|
|
314
|
+
@apply sticky z-5 top-0;
|
|
391
315
|
& th {
|
|
392
|
-
|
|
393
|
-
font-family: var(--font-sans-accent);
|
|
394
|
-
font-weight: var(--font-weight-semibold);
|
|
395
|
-
background-color: var(--color-background);
|
|
396
|
-
vertical-align: bottom;
|
|
316
|
+
@apply bg-background text-foreground align-bottom font-sans-accent font-semibold border-b;
|
|
397
317
|
}
|
|
398
318
|
}
|
|
399
319
|
|
|
@@ -401,78 +321,54 @@
|
|
|
401
321
|
& > tr:not(:last-child) {
|
|
402
322
|
th,
|
|
403
323
|
td {
|
|
404
|
-
border-
|
|
324
|
+
@apply border-b;
|
|
405
325
|
}
|
|
406
326
|
}
|
|
407
327
|
}
|
|
408
328
|
|
|
409
329
|
tfoot {
|
|
410
|
-
|
|
411
|
-
z-index: 5;
|
|
412
|
-
bottom: 0px;
|
|
330
|
+
@apply sticky z-5 bottom-0;
|
|
413
331
|
th,
|
|
414
332
|
td {
|
|
415
|
-
|
|
416
|
-
font-family: var(--font-sans-accent);
|
|
417
|
-
font-weight: var(--font-weight-medium);
|
|
418
|
-
border-top-width: 1px;
|
|
333
|
+
@apply bg-muted text-foreground font-sans-accent font-medium border-t;
|
|
419
334
|
}
|
|
420
335
|
}
|
|
421
336
|
|
|
422
337
|
/* Media */
|
|
423
338
|
:is(img, audio, video, iframe) {
|
|
424
|
-
border-
|
|
425
|
-
border-radius: var(--radius-container);
|
|
426
|
-
overflow: hidden;
|
|
427
|
-
max-width: 100%;
|
|
428
|
-
margin-inline: auto;
|
|
339
|
+
@apply border rounded overflow-hidden max-w-full mx-auto;
|
|
429
340
|
}
|
|
430
341
|
|
|
431
342
|
:is(audio, video, iframe)::-webkit-media-controls-enclosure {
|
|
432
|
-
|
|
343
|
+
@apply rounded-none;
|
|
433
344
|
}
|
|
434
345
|
|
|
435
346
|
video,
|
|
436
347
|
iframe {
|
|
437
|
-
object-
|
|
348
|
+
@apply object-cover;
|
|
438
349
|
}
|
|
439
350
|
|
|
440
351
|
/* Figure */
|
|
441
352
|
figure {
|
|
442
|
-
|
|
443
|
-
border-width: 1px;
|
|
444
|
-
border-radius: var(--radius-container);
|
|
445
|
-
overflow: hidden;
|
|
446
|
-
margin-inline: auto;
|
|
447
|
-
width: fit-content;
|
|
448
|
-
max-width: 100%;
|
|
353
|
+
@apply relative border rounded overflow-hidden mx-auto w-fit max-w-full;
|
|
449
354
|
|
|
450
355
|
& > figcaption {
|
|
451
|
-
|
|
452
|
-
margin: 0px;
|
|
453
|
-
padding: --spacing(2);
|
|
454
|
-
text-align: center;
|
|
455
|
-
font-family: var(--font-sans-accent);
|
|
456
|
-
font-size: var(--text-sm);
|
|
457
|
-
font-weight: var(--font-weight-medium);
|
|
458
|
-
line-height: 1.5em;
|
|
356
|
+
@apply text-muted-foreground m-0 p-2 text-center font-sans-accent text-sm font-medium leading-6;
|
|
459
357
|
|
|
460
358
|
&:first-child {
|
|
461
|
-
font-
|
|
462
|
-
border-bottom-width: 1px;
|
|
359
|
+
@apply font-bold border-b;
|
|
463
360
|
}
|
|
464
361
|
&:last-child {
|
|
465
|
-
border-
|
|
362
|
+
@apply border-t;
|
|
466
363
|
}
|
|
467
364
|
}
|
|
468
365
|
|
|
469
366
|
:is(img, audio, video, iframe, .bordered-enclosure) {
|
|
470
|
-
border-
|
|
471
|
-
border: none;
|
|
367
|
+
@apply border-none rounded-none;
|
|
472
368
|
}
|
|
473
369
|
|
|
474
370
|
:is(img, video, iframe) {
|
|
475
|
-
object-
|
|
371
|
+
@apply object-contain;
|
|
476
372
|
}
|
|
477
373
|
}
|
|
478
374
|
|
|
@@ -486,7 +382,7 @@
|
|
|
486
382
|
pre,
|
|
487
383
|
figure {
|
|
488
384
|
&:not(:first-child) {
|
|
489
|
-
|
|
385
|
+
@apply mt-4;
|
|
490
386
|
}
|
|
491
387
|
}
|
|
492
388
|
}
|
package/vite.ladle.config.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import path from "path"
|
|
2
|
-
import { fileURLToPath } from "url"
|
|
3
|
-
import tailwindcss from "@tailwindcss/vite"
|
|
4
|
-
import { defineConfig } from
|
|
5
|
-
import react from
|
|
1
|
+
import path from "path";
|
|
2
|
+
import { fileURLToPath } from "url";
|
|
3
|
+
import tailwindcss from "@tailwindcss/vite";
|
|
4
|
+
import { defineConfig } from "vite";
|
|
5
|
+
import react from "@vitejs/plugin-react-swc";
|
|
6
6
|
|
|
7
7
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
8
8
|
|
|
@@ -14,4 +14,4 @@ export default defineConfig({
|
|
|
14
14
|
"@": path.resolve(__dirname, "./src"),
|
|
15
15
|
},
|
|
16
16
|
},
|
|
17
|
-
})
|
|
17
|
+
});
|