@keepkit/ui 0.14.0 → 0.15.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/README.md +15 -7
- package/dist/index.d.ts +9 -7
- package/dist/index.js +1250 -831
- package/dist/index.js.map +1 -1
- package/dist/styles/base.css +248 -17
- package/dist/styles/button.css +19 -2
- package/dist/styles/collection.css +244 -2
- package/dist/styles/sync.css +103 -11
- package/dist/tailwind.css +2 -0
- package/dist/tailwind.d.ts +4 -0
- package/dist/tailwind.js +5 -1
- package/dist/tailwind.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="collection"] {
|
|
2
2
|
display: grid;
|
|
3
|
-
gap: var(--keep-card-gap);
|
|
3
|
+
gap: calc(var(--keep-card-gap) * 1.5);
|
|
4
4
|
color: var(--keep-foreground);
|
|
5
5
|
}
|
|
6
6
|
|
|
@@ -9,6 +9,15 @@
|
|
|
9
9
|
flex-wrap: wrap;
|
|
10
10
|
gap: var(--keep-card-gap);
|
|
11
11
|
align-items: center;
|
|
12
|
+
border: 1px solid var(--keep-border);
|
|
13
|
+
border-radius: calc(var(--keep-radius) + 0.25rem);
|
|
14
|
+
padding: var(--keep-card-padding);
|
|
15
|
+
background: color-mix(in srgb, var(--keep-muted) 64%, var(--keep-card));
|
|
16
|
+
box-shadow: 0 1px 2px color-mix(in srgb, var(--keep-foreground) 4%, transparent);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="collection"] > :first-child > :is(input, select) {
|
|
20
|
+
flex: 1 1 12rem;
|
|
12
21
|
}
|
|
13
22
|
|
|
14
23
|
:where(.keep-theme, [data-keep-theme])
|
|
@@ -53,6 +62,7 @@
|
|
|
53
62
|
padding: var(--keep-card-padding);
|
|
54
63
|
background: var(--keep-card);
|
|
55
64
|
color: var(--keep-card-foreground);
|
|
65
|
+
box-shadow: var(--keep-shadow);
|
|
56
66
|
transition:
|
|
57
67
|
opacity 160ms ease,
|
|
58
68
|
box-shadow 160ms ease,
|
|
@@ -60,7 +70,15 @@
|
|
|
60
70
|
}
|
|
61
71
|
|
|
62
72
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"]:hover {
|
|
63
|
-
|
|
73
|
+
border-color: color-mix(in srgb, var(--keep-primary) 32%, var(--keep-border));
|
|
74
|
+
box-shadow:
|
|
75
|
+
0 2px 4px color-mix(in srgb, var(--keep-foreground) 8%, transparent),
|
|
76
|
+
0 12px 28px color-mix(in srgb, var(--keep-foreground) 9%, transparent);
|
|
77
|
+
transform: translateY(-1px);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"]:has(> img) {
|
|
81
|
+
grid-template-columns: var(--keep-thumbnail-size) minmax(0, 1fr);
|
|
64
82
|
}
|
|
65
83
|
|
|
66
84
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"] img {
|
|
@@ -68,11 +86,29 @@
|
|
|
68
86
|
height: var(--keep-thumbnail-size);
|
|
69
87
|
border-radius: calc(var(--keep-radius) - 2px);
|
|
70
88
|
object-fit: cover;
|
|
89
|
+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--keep-foreground) 8%, transparent);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"]:has(> img) > :not(img) {
|
|
93
|
+
grid-column: 2;
|
|
71
94
|
}
|
|
72
95
|
|
|
73
96
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"] h3 {
|
|
74
97
|
margin: 0;
|
|
98
|
+
padding-inline-end: calc(var(--keep-button-size) + var(--keep-card-gap));
|
|
75
99
|
font-size: var(--keep-title-size);
|
|
100
|
+
line-height: 1.35;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"] h3 a {
|
|
104
|
+
color: inherit;
|
|
105
|
+
text-decoration-color: color-mix(in srgb, currentColor 25%, transparent);
|
|
106
|
+
text-underline-offset: 0.2em;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"] h3 a:hover {
|
|
110
|
+
color: var(--keep-primary);
|
|
111
|
+
text-decoration-color: currentColor;
|
|
76
112
|
}
|
|
77
113
|
|
|
78
114
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"] > [data-keepkit="button"] {
|
|
@@ -86,6 +122,19 @@
|
|
|
86
122
|
font-size: 0.8125rem;
|
|
87
123
|
}
|
|
88
124
|
|
|
125
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"] > [data-keep-action="remove-item"] {
|
|
126
|
+
justify-self: start;
|
|
127
|
+
border-color: color-mix(in srgb, var(--keep-destructive) 28%, var(--keep-border));
|
|
128
|
+
background: transparent;
|
|
129
|
+
color: var(--keep-destructive);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
:where(.keep-theme, [data-keep-theme])
|
|
133
|
+
[data-keepkit="card"]:has(> [data-keepkit="button"])
|
|
134
|
+
> [data-keep-action="remove-item"] {
|
|
135
|
+
display: none;
|
|
136
|
+
}
|
|
137
|
+
|
|
89
138
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-item-status="expired"],
|
|
90
139
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-item-status="removed"],
|
|
91
140
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-item-status="restricted"] {
|
|
@@ -125,6 +174,192 @@
|
|
|
125
174
|
padding: 0.125rem 0.5rem;
|
|
126
175
|
background: var(--keep-muted);
|
|
127
176
|
color: var(--keep-muted-foreground);
|
|
177
|
+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--keep-border) 70%, transparent);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="pagination"] {
|
|
181
|
+
display: flex;
|
|
182
|
+
flex-wrap: wrap;
|
|
183
|
+
justify-content: center;
|
|
184
|
+
gap: var(--keep-control-gap);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="pagination"] button {
|
|
188
|
+
min-width: var(--keep-button-size);
|
|
189
|
+
padding-inline: 0.75rem;
|
|
190
|
+
background: var(--keep-card);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="pagination"] button[aria-current="page"] {
|
|
194
|
+
border-color: var(--keep-primary);
|
|
195
|
+
background: var(--keep-primary);
|
|
196
|
+
color: var(--keep-primary-foreground);
|
|
197
|
+
box-shadow: 0 2px 8px color-mix(in srgb, var(--keep-primary) 22%, transparent);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
:where(.keep-theme, [data-keep-theme]) :is([data-keepkit="tag-filter"], [data-keepkit="bulk-actions"]) fieldset {
|
|
201
|
+
display: flex;
|
|
202
|
+
flex-wrap: wrap;
|
|
203
|
+
gap: var(--keep-control-gap);
|
|
204
|
+
min-width: 0;
|
|
205
|
+
margin: 0;
|
|
206
|
+
border: 0;
|
|
207
|
+
padding: 0;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="tag-filter"] legend {
|
|
211
|
+
width: 100%;
|
|
212
|
+
margin-block-end: 0.25rem;
|
|
213
|
+
color: var(--keep-muted-foreground);
|
|
214
|
+
font-size: var(--keep-tag-size);
|
|
215
|
+
font-weight: 650;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="tag-filter"] button {
|
|
219
|
+
min-height: 2.25rem;
|
|
220
|
+
border-radius: 999px;
|
|
221
|
+
padding: 0.375rem 0.75rem;
|
|
222
|
+
background: var(--keep-card);
|
|
223
|
+
font-size: var(--keep-tag-size);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="tag-filter"] button[aria-pressed="true"] {
|
|
227
|
+
border-color: color-mix(in srgb, var(--keep-primary) 55%, var(--keep-border));
|
|
228
|
+
background: color-mix(in srgb, var(--keep-primary) 11%, var(--keep-card));
|
|
229
|
+
color: var(--keep-primary);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
:where(.keep-theme, [data-keep-theme])
|
|
233
|
+
:is([data-keepkit="note-editor"], [data-keepkit="tag-editor"], [data-keepkit="bulk-actions"]) {
|
|
234
|
+
display: grid;
|
|
235
|
+
gap: var(--keep-card-gap);
|
|
236
|
+
border: 1px solid var(--keep-border);
|
|
237
|
+
border-radius: var(--keep-radius);
|
|
238
|
+
padding: var(--keep-card-padding);
|
|
239
|
+
background: var(--keep-card);
|
|
240
|
+
box-shadow: 0 1px 3px color-mix(in srgb, var(--keep-foreground) 5%, transparent);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
:where(.keep-theme, [data-keep-theme])
|
|
244
|
+
:is([data-keepkit="note-editor"], [data-keepkit="tag-editor"], [data-keepkit="bulk-actions"])
|
|
245
|
+
label {
|
|
246
|
+
display: grid;
|
|
247
|
+
gap: 0.375rem;
|
|
248
|
+
color: var(--keep-muted-foreground);
|
|
249
|
+
font-size: var(--keep-tag-size);
|
|
250
|
+
font-weight: 600;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
:where(.keep-theme, [data-keep-theme])
|
|
254
|
+
:is([data-keepkit="note-editor"], [data-keepkit="tag-editor"], [data-keepkit="bulk-actions"])
|
|
255
|
+
:is(input:not([type="checkbox"]), select, textarea) {
|
|
256
|
+
width: 100%;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="note-editor"] textarea {
|
|
260
|
+
min-height: 6rem;
|
|
261
|
+
resize: vertical;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="tag-editor"] ul {
|
|
265
|
+
display: flex;
|
|
266
|
+
flex-wrap: wrap;
|
|
267
|
+
gap: var(--keep-control-gap);
|
|
268
|
+
margin: 0;
|
|
269
|
+
padding: 0;
|
|
270
|
+
list-style: none;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="tag-editor"][data-state] ul li {
|
|
274
|
+
display: inline-flex;
|
|
275
|
+
align-items: center;
|
|
276
|
+
gap: 0.25rem;
|
|
277
|
+
border-radius: 999px;
|
|
278
|
+
padding-inline-start: 0.625rem;
|
|
279
|
+
background: var(--keep-muted);
|
|
280
|
+
color: var(--keep-muted-foreground);
|
|
281
|
+
font-size: var(--keep-tag-size);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="tag-editor"] [data-keep-action="remove-tag"] {
|
|
285
|
+
min-width: 2rem;
|
|
286
|
+
min-height: 2rem;
|
|
287
|
+
border: 0;
|
|
288
|
+
border-radius: 999px;
|
|
289
|
+
padding: 0.45rem;
|
|
290
|
+
background: transparent;
|
|
291
|
+
font-size: 0;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="tag-editor"] [data-keep-action="remove-tag"]::before {
|
|
295
|
+
width: 0.875rem;
|
|
296
|
+
height: 0.875rem;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="bulk-actions"] {
|
|
300
|
+
background: color-mix(in srgb, var(--keep-muted) 42%, var(--keep-card));
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="bulk-actions"] fieldset > span {
|
|
304
|
+
display: inline-flex;
|
|
305
|
+
align-items: center;
|
|
306
|
+
gap: 0.375rem;
|
|
307
|
+
border: 1px solid var(--keep-border);
|
|
308
|
+
border-radius: var(--keep-radius);
|
|
309
|
+
padding: 0.375rem 0.625rem;
|
|
310
|
+
background: var(--keep-card);
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
:where(.keep-theme, [data-keep-theme]) :is([data-keepkit="item-checkbox"], [data-keep-action="select-all"]) {
|
|
314
|
+
width: 1rem;
|
|
315
|
+
min-width: 1rem;
|
|
316
|
+
height: 1rem;
|
|
317
|
+
min-height: 1rem;
|
|
318
|
+
margin: 0;
|
|
319
|
+
padding: 0;
|
|
320
|
+
accent-color: var(--keep-primary);
|
|
321
|
+
box-shadow: none;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
:where(.keep-theme, [data-keep-theme])
|
|
325
|
+
:is([data-keepkit="empty-state"], [data-keepkit="status"]):not([data-state="idle"]) {
|
|
326
|
+
display: grid;
|
|
327
|
+
place-items: center;
|
|
328
|
+
gap: var(--keep-control-gap);
|
|
329
|
+
min-height: 8rem;
|
|
330
|
+
border: 1px dashed var(--keep-border);
|
|
331
|
+
border-radius: var(--keep-radius);
|
|
332
|
+
padding: calc(var(--keep-card-padding) * 1.5);
|
|
333
|
+
background: color-mix(in srgb, var(--keep-muted) 42%, var(--keep-card));
|
|
334
|
+
color: var(--keep-muted-foreground);
|
|
335
|
+
text-align: center;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="empty-state"] :is(h2, p) {
|
|
339
|
+
margin: 0;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
:where(.keep-theme, [data-keep-theme])
|
|
343
|
+
:is([data-keep-action="delete-selected"], [data-keep-action="remove-item"], [data-keep-action="prune-stale"]) {
|
|
344
|
+
border-color: color-mix(in srgb, var(--keep-destructive) 30%, var(--keep-border));
|
|
345
|
+
color: var(--keep-destructive);
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="list"] > ul[data-layout="grid"] [data-keepkit="card"]:has(> img) {
|
|
349
|
+
grid-template-columns: 1fr;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
:where(.keep-theme, [data-keep-theme])
|
|
353
|
+
[data-keepkit="list"]
|
|
354
|
+
> ul[data-layout="grid"]
|
|
355
|
+
[data-keepkit="card"]:has(> img)
|
|
356
|
+
> * {
|
|
357
|
+
grid-column: 1;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="list"] > ul[data-layout="grid"] [data-keepkit="card"] > img {
|
|
361
|
+
width: 100%;
|
|
362
|
+
height: 10rem;
|
|
128
363
|
}
|
|
129
364
|
|
|
130
365
|
@media (max-width: 48rem) {
|
|
@@ -157,4 +392,11 @@
|
|
|
157
392
|
) {
|
|
158
393
|
--keep-list-columns: var(--keep-mobile-columns);
|
|
159
394
|
}
|
|
395
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="collection"] > :first-child {
|
|
396
|
+
align-items: stretch;
|
|
397
|
+
flex-direction: column;
|
|
398
|
+
}
|
|
399
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="collection"] > :first-child > :is(input, select) {
|
|
400
|
+
width: 100%;
|
|
401
|
+
}
|
|
160
402
|
}
|
package/dist/styles/sync.css
CHANGED
|
@@ -9,10 +9,15 @@
|
|
|
9
9
|
padding: var(--keep-card-padding);
|
|
10
10
|
background: var(--keep-card);
|
|
11
11
|
color: var(--keep-card-foreground);
|
|
12
|
+
box-shadow: var(--keep-shadow);
|
|
12
13
|
}
|
|
13
14
|
|
|
14
15
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"] {
|
|
16
|
+
--keep-status-icon: var(--keep-icon-warning);
|
|
15
17
|
display: inline-flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
gap: 0.25rem;
|
|
20
|
+
border: 1px solid color-mix(in srgb, var(--keep-border) 72%, transparent);
|
|
16
21
|
border-radius: 999px;
|
|
17
22
|
padding: 0.125rem 0.5rem;
|
|
18
23
|
background: var(--keep-muted);
|
|
@@ -20,8 +25,22 @@
|
|
|
20
25
|
font-weight: 600;
|
|
21
26
|
}
|
|
22
27
|
|
|
28
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"]::before,
|
|
29
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-status"]::before,
|
|
30
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"]::before {
|
|
31
|
+
content: "";
|
|
32
|
+
display: inline-block;
|
|
33
|
+
flex: 0 0 auto;
|
|
34
|
+
width: var(--keep-icon-size);
|
|
35
|
+
height: var(--keep-icon-size);
|
|
36
|
+
background: currentColor;
|
|
37
|
+
mask: var(--keep-status-icon) center / contain no-repeat;
|
|
38
|
+
-webkit-mask: var(--keep-status-icon) center / contain no-repeat;
|
|
39
|
+
}
|
|
40
|
+
|
|
23
41
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-status="available"] {
|
|
24
|
-
|
|
42
|
+
--keep-status-icon: var(--keep-icon-check);
|
|
43
|
+
color: var(--keep-success);
|
|
25
44
|
}
|
|
26
45
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-status="expired"],
|
|
27
46
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-status="removed"],
|
|
@@ -29,23 +48,42 @@
|
|
|
29
48
|
border-color: var(--keep-destructive);
|
|
30
49
|
color: var(--keep-destructive);
|
|
31
50
|
}
|
|
32
|
-
:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="expired"]::before {
|
|
33
|
-
content: "⚠";
|
|
34
|
-
margin-inline-end: 0.25rem;
|
|
35
|
-
}
|
|
36
51
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="expired"],
|
|
37
52
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="removed"],
|
|
38
53
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="restricted"] {
|
|
39
54
|
border-color: var(--keep-destructive);
|
|
40
55
|
color: var(--keep-destructive);
|
|
56
|
+
--keep-status-icon: var(--keep-icon-warning);
|
|
41
57
|
}
|
|
42
58
|
|
|
43
59
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="stale-notice"],
|
|
44
60
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-status"] {
|
|
45
|
-
display:
|
|
61
|
+
display: flex;
|
|
62
|
+
flex-wrap: wrap;
|
|
63
|
+
align-items: center;
|
|
46
64
|
gap: var(--keep-card-gap);
|
|
47
65
|
}
|
|
48
66
|
|
|
67
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="stale-notice"] > p,
|
|
68
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-status"] > p {
|
|
69
|
+
flex: 1 1 16rem;
|
|
70
|
+
margin: 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="stale-notice"] > div {
|
|
74
|
+
display: flex;
|
|
75
|
+
flex-wrap: wrap;
|
|
76
|
+
gap: var(--keep-control-gap);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-status"] {
|
|
80
|
+
--keep-status-icon: var(--keep-icon-check);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] {
|
|
84
|
+
--keep-status-icon: var(--keep-icon-warning);
|
|
85
|
+
}
|
|
86
|
+
|
|
49
87
|
@keyframes keepkit-sync-spin {
|
|
50
88
|
to {
|
|
51
89
|
transform: rotate(360deg);
|
|
@@ -53,19 +91,37 @@
|
|
|
53
91
|
}
|
|
54
92
|
|
|
55
93
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-status"][data-state="syncing"]::before {
|
|
56
|
-
|
|
57
|
-
display: inline-block;
|
|
58
|
-
width: 1.25rem;
|
|
94
|
+
--keep-status-icon: var(--keep-icon-refresh);
|
|
59
95
|
animation: keepkit-sync-spin 900ms linear infinite;
|
|
60
96
|
}
|
|
61
97
|
|
|
62
98
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-status"][data-state="error"]::before,
|
|
63
99
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"][data-state="error"]::before {
|
|
64
|
-
|
|
65
|
-
|
|
100
|
+
--keep-status-icon: var(--keep-icon-warning);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-status"][data-state="pending"]::before {
|
|
104
|
+
--keep-status-icon: var(--keep-icon-refresh);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-status"][data-state="pending"] {
|
|
108
|
+
border-color: color-mix(in srgb, var(--keep-warning) 45%, var(--keep-border));
|
|
109
|
+
color: var(--keep-warning);
|
|
110
|
+
background: color-mix(in srgb, var(--keep-warning) 6%, var(--keep-card));
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-status"][data-state="conflict"]::before {
|
|
114
|
+
--keep-status-icon: var(--keep-icon-warning);
|
|
66
115
|
}
|
|
67
116
|
|
|
68
117
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="undo"] {
|
|
118
|
+
display: flex;
|
|
119
|
+
flex-wrap: wrap;
|
|
120
|
+
align-items: center;
|
|
121
|
+
justify-content: space-between;
|
|
122
|
+
gap: var(--keep-control-gap);
|
|
123
|
+
border-color: color-mix(in srgb, var(--keep-primary) 35%, var(--keep-border));
|
|
124
|
+
background: color-mix(in srgb, var(--keep-primary) 7%, var(--keep-card));
|
|
69
125
|
animation: keepkit-undo-in 160ms ease-out;
|
|
70
126
|
}
|
|
71
127
|
|
|
@@ -85,11 +141,13 @@
|
|
|
85
141
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"][data-state="error"] {
|
|
86
142
|
border-color: var(--keep-destructive);
|
|
87
143
|
color: var(--keep-destructive);
|
|
144
|
+
background: color-mix(in srgb, var(--keep-destructive) 6%, var(--keep-card));
|
|
88
145
|
}
|
|
89
146
|
|
|
90
147
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] {
|
|
91
148
|
max-width: 40rem;
|
|
92
149
|
margin: 1rem auto;
|
|
150
|
+
border-color: color-mix(in srgb, var(--keep-destructive) 42%, var(--keep-border));
|
|
93
151
|
}
|
|
94
152
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] header,
|
|
95
153
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] article,
|
|
@@ -127,6 +185,40 @@
|
|
|
127
185
|
grid-template-columns: 1fr auto;
|
|
128
186
|
align-items: start;
|
|
129
187
|
}
|
|
188
|
+
|
|
189
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] header h2,
|
|
190
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] article h3,
|
|
191
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] article h4,
|
|
192
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="backup"] p {
|
|
193
|
+
margin: 0;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
:where(.keep-theme, [data-keep-theme]) [data-keep-action="close-dialog"] {
|
|
197
|
+
min-width: var(--keep-button-size);
|
|
198
|
+
padding: 0.5rem;
|
|
199
|
+
font-size: 0;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
:where(.keep-theme, [data-keep-theme]) [data-keep-action="close-dialog"]::before {
|
|
203
|
+
width: calc(var(--keep-icon-size) * 1.125);
|
|
204
|
+
height: calc(var(--keep-icon-size) * 1.125);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="backup"] {
|
|
208
|
+
display: flex;
|
|
209
|
+
flex-wrap: wrap;
|
|
210
|
+
align-items: end;
|
|
211
|
+
gap: var(--keep-control-gap);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
:where(.keep-theme, [data-keep-theme]) [data-keepkit="backup"] label {
|
|
215
|
+
display: grid;
|
|
216
|
+
flex: 1 1 10rem;
|
|
217
|
+
gap: 0.375rem;
|
|
218
|
+
color: var(--keep-muted-foreground);
|
|
219
|
+
font-size: var(--keep-tag-size);
|
|
220
|
+
font-weight: 600;
|
|
221
|
+
}
|
|
130
222
|
:where(.keep-theme, [data-keep-theme]) [data-keepkit="backup"] input[type="file"] {
|
|
131
223
|
position: absolute;
|
|
132
224
|
width: 1px;
|
package/dist/tailwind.css
CHANGED
|
@@ -15,6 +15,8 @@
|
|
|
15
15
|
--color-primary-foreground: var(--keep-primary-foreground);
|
|
16
16
|
--color-destructive: var(--keep-destructive);
|
|
17
17
|
--color-destructive-foreground: var(--keep-destructive-foreground);
|
|
18
|
+
--color-success: var(--keep-success);
|
|
19
|
+
--color-warning: var(--keep-warning);
|
|
18
20
|
--color-ring: var(--keep-ring);
|
|
19
21
|
--radius-sm: calc(var(--keep-radius) - 4px);
|
|
20
22
|
--radius-md: calc(var(--keep-radius) - 2px);
|
package/dist/tailwind.d.ts
CHANGED
|
@@ -16,6 +16,8 @@ declare const keepKitTheme: {
|
|
|
16
16
|
readonly "primary-foreground": "var(--keep-primary-foreground)";
|
|
17
17
|
readonly destructive: "var(--keep-destructive)";
|
|
18
18
|
readonly "destructive-foreground": "var(--keep-destructive-foreground)";
|
|
19
|
+
readonly success: "var(--keep-success)";
|
|
20
|
+
readonly warning: "var(--keep-warning)";
|
|
19
21
|
readonly ring: "var(--keep-ring)";
|
|
20
22
|
};
|
|
21
23
|
readonly borderRadius: {
|
|
@@ -26,6 +28,8 @@ declare const keepKitTheme: {
|
|
|
26
28
|
readonly spacing: {
|
|
27
29
|
readonly card: "var(--keep-card-padding)";
|
|
28
30
|
readonly gap: "var(--keep-card-gap)";
|
|
31
|
+
readonly control: "var(--keep-control-gap)";
|
|
32
|
+
readonly icon: "var(--keep-icon-size)";
|
|
29
33
|
};
|
|
30
34
|
};
|
|
31
35
|
type KeepKitTheme = typeof keepKitTheme;
|
package/dist/tailwind.js
CHANGED
|
@@ -13,6 +13,8 @@ var keepKitTheme = {
|
|
|
13
13
|
"primary-foreground": "var(--keep-primary-foreground)",
|
|
14
14
|
destructive: "var(--keep-destructive)",
|
|
15
15
|
"destructive-foreground": "var(--keep-destructive-foreground)",
|
|
16
|
+
success: "var(--keep-success)",
|
|
17
|
+
warning: "var(--keep-warning)",
|
|
16
18
|
ring: "var(--keep-ring)"
|
|
17
19
|
},
|
|
18
20
|
borderRadius: {
|
|
@@ -22,7 +24,9 @@ var keepKitTheme = {
|
|
|
22
24
|
},
|
|
23
25
|
spacing: {
|
|
24
26
|
card: "var(--keep-card-padding)",
|
|
25
|
-
gap: "var(--keep-card-gap)"
|
|
27
|
+
gap: "var(--keep-card-gap)",
|
|
28
|
+
control: "var(--keep-control-gap)",
|
|
29
|
+
icon: "var(--keep-icon-size)"
|
|
26
30
|
}
|
|
27
31
|
};
|
|
28
32
|
export {
|
package/dist/tailwind.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/tailwind.ts"],"sourcesContent":["/**\n * Tailwind v4 theme aliases. Import `@keepkit/ui/tailwind.css` in the CSS entry\n * point, then use these names when a JavaScript theme map is more convenient.\n */\nexport const keepKitTheme = {\n colors: {\n background: \"var(--keep-background)\",\n foreground: \"var(--keep-foreground)\",\n card: \"var(--keep-card)\",\n \"card-foreground\": \"var(--keep-card-foreground)\",\n muted: \"var(--keep-muted)\",\n \"muted-foreground\": \"var(--keep-muted-foreground)\",\n border: \"var(--keep-border)\",\n input: \"var(--keep-input)\",\n primary: \"var(--keep-primary)\",\n \"primary-foreground\": \"var(--keep-primary-foreground)\",\n destructive: \"var(--keep-destructive)\",\n \"destructive-foreground\": \"var(--keep-destructive-foreground)\",\n ring: \"var(--keep-ring)\",\n },\n borderRadius: {\n sm: \"calc(var(--keep-radius) - 4px)\",\n md: \"calc(var(--keep-radius) - 2px)\",\n lg: \"var(--keep-radius)\",\n },\n spacing: {\n card: \"var(--keep-card-padding)\",\n gap: \"var(--keep-card-gap)\",\n },\n} as const;\n\nexport type KeepKitTheme = typeof keepKitTheme;\n"],"mappings":";AAIO,IAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,IACN,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,mBAAmB;AAAA,IACnB,OAAO;AAAA,IACP,oBAAoB;AAAA,IACpB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,sBAAsB;AAAA,IACtB,aAAa;AAAA,IACb,0BAA0B;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA,EACA,cAAc;AAAA,IACZ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/tailwind.ts"],"sourcesContent":["/**\n * Tailwind v4 theme aliases. Import `@keepkit/ui/tailwind.css` in the CSS entry\n * point, then use these names when a JavaScript theme map is more convenient.\n */\nexport const keepKitTheme = {\n colors: {\n background: \"var(--keep-background)\",\n foreground: \"var(--keep-foreground)\",\n card: \"var(--keep-card)\",\n \"card-foreground\": \"var(--keep-card-foreground)\",\n muted: \"var(--keep-muted)\",\n \"muted-foreground\": \"var(--keep-muted-foreground)\",\n border: \"var(--keep-border)\",\n input: \"var(--keep-input)\",\n primary: \"var(--keep-primary)\",\n \"primary-foreground\": \"var(--keep-primary-foreground)\",\n destructive: \"var(--keep-destructive)\",\n \"destructive-foreground\": \"var(--keep-destructive-foreground)\",\n success: \"var(--keep-success)\",\n warning: \"var(--keep-warning)\",\n ring: \"var(--keep-ring)\",\n },\n borderRadius: {\n sm: \"calc(var(--keep-radius) - 4px)\",\n md: \"calc(var(--keep-radius) - 2px)\",\n lg: \"var(--keep-radius)\",\n },\n spacing: {\n card: \"var(--keep-card-padding)\",\n gap: \"var(--keep-card-gap)\",\n control: \"var(--keep-control-gap)\",\n icon: \"var(--keep-icon-size)\",\n },\n} as const;\n\nexport type KeepKitTheme = typeof keepKitTheme;\n"],"mappings":";AAIO,IAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,IACN,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,mBAAmB;AAAA,IACnB,OAAO;AAAA,IACP,oBAAoB;AAAA,IACpB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,sBAAsB;AAAA,IACtB,aAAa;AAAA,IACb,0BAA0B;AAAA,IAC1B,SAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAAA,EACA,cAAc;AAAA,IACZ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACF;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@keepkit/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.0",
|
|
4
4
|
"description": "Headless, accessible React UI components for KeepKit.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"react": ">=18"
|
|
55
55
|
},
|
|
56
56
|
"dependencies": {
|
|
57
|
-
"@keepkit/core": "0.
|
|
57
|
+
"@keepkit/core": "0.15.0"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
60
|
"@testing-library/react": "^16.3.3",
|