@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.
@@ -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
- box-shadow: 0 2px 12px color-mix(in srgb, var(--keep-foreground) 12%, transparent);
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
  }
@@ -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
- color: var(--keep-primary);
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: grid;
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
- content: "↻";
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
- content: "!";
65
- font-weight: 800;
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);
@@ -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 {
@@ -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,EACP;AACF;","names":[]}
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.14.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.14.0"
57
+ "@keepkit/core": "0.15.0"
58
58
  },
59
59
  "devDependencies": {
60
60
  "@testing-library/react": "^16.3.3",