@keepkit/ui 0.14.0 → 0.16.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.
Files changed (13) hide show
  1. package/README.md +59 -7
  2. package/dist/index.d.ts +390 -42
  3. package/dist/index.js +1606 -866
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles/base.css +248 -17
  6. package/dist/styles/button.css +19 -2
  7. package/dist/styles/collection.css +420 -6
  8. package/dist/styles/sync.css +103 -11
  9. package/dist/tailwind.css +2 -0
  10. package/dist/tailwind.d.ts +4 -0
  11. package/dist/tailwind.js +5 -1
  12. package/dist/tailwind.js.map +1 -1
  13. package/package.json +2 -2
package/dist/styles/base.css CHANGED
@@ -5,13 +5,15 @@
5
5
  --keep-card-foreground: var(--card-foreground, var(--keep-foreground));
6
6
  --keep-muted: var(--muted, #f1f5f9);
7
7
  --keep-muted-foreground: var(--muted-foreground, #64748b);
8
- --keep-border: var(--border, #cbd5e1);
8
+ --keep-border: var(--border, #d7dee8);
9
9
  --keep-input: var(--input, var(--keep-border));
10
10
  --keep-primary: var(--keep-accent, var(--primary, #2563eb));
11
11
  --keep-primary-foreground: var(--primary-foreground, #ffffff);
12
12
  --keep-destructive: var(--destructive, #b91c1c);
13
13
  --keep-destructive-foreground: var(--destructive-foreground, #ffffff);
14
14
  --keep-ring: var(--ring, var(--keep-primary));
15
+ --keep-success: #15803d;
16
+ --keep-warning: #b45309;
15
17
  --keep-accent: var(--primary, #2563eb);
16
18
  --keep-radius: var(--radius, 0.5rem);
17
19
  --keep-card-padding: 1rem;
@@ -19,12 +21,32 @@
19
21
  --keep-thumbnail-size: 5rem;
20
22
  --keep-title-size: 1rem;
21
23
  --keep-button-size: 2.75rem;
24
+ --keep-icon-size: 1rem;
25
+ --keep-control-gap: 0.5rem;
26
+ --keep-shadow:
27
+ 0 1px 2px color-mix(in srgb, var(--keep-foreground) 7%, transparent),
28
+ 0 8px 24px color-mix(in srgb, var(--keep-foreground) 5%, transparent);
22
29
  --keep-tag-size: 0.8125rem;
23
30
  --keep-list-columns: 1;
24
31
  --keep-grid-columns: 3;
25
32
  --keep-compact-columns: 4;
26
33
  --keep-mobile-columns: 1;
27
34
  --keep-list-gap: var(--keep-card-gap);
35
+ --keep-icon-bookmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
36
+ --keep-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
37
+ --keep-icon-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 6 4-4 4 4M12 2v14M16 18l-4 4-4-4'/%3E%3C/svg%3E");
38
+ --keep-icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
39
+ --keep-icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
40
+ --keep-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
41
+ --keep-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
42
+ --keep-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 14h10l1-14M10 11v6M14 11v6'/%3E%3C/svg%3E");
43
+ --keep-icon-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13 11 22l-9-9V4a2 2 0 0 1 2-2h9Z'/%3E%3Ccircle cx='8' cy='8' r='1'/%3E%3C/svg%3E");
44
+ --keep-icon-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E");
45
+ --keep-icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6v5h-5M4 18v-5h5M6.1 9a7 7 0 0 1 11.5-2.6L20 11M4 13l2.4 4.6A7 7 0 0 0 17.9 15'/%3E%3C/svg%3E");
46
+ --keep-icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0 4-4m-4 4-4-4M5 21h14'/%3E%3C/svg%3E");
47
+ --keep-icon-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17V5m0 0 4 4m-4-4L8 9M5 21h14'/%3E%3C/svg%3E");
48
+ --keep-icon-undo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 14-5-5 5-5M4 9h9a7 7 0 0 1 7 7v4'/%3E%3C/svg%3E");
49
+ --keep-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.6 2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0ZM12 9v4M12 17h.01'/%3E%3C/svg%3E");
28
50
  }
29
51
 
30
52
  :where(.keep-theme, [data-keep-theme]) {
@@ -48,18 +70,28 @@
48
70
  min-height: var(--keep-button-size);
49
71
  }
50
72
 
51
- :where(.keep-theme, [data-keep-theme]) :is(input, select, textarea) {
73
+ :where(.keep-theme, [data-keep-theme])
74
+ :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
52
75
  min-height: var(--keep-button-size);
53
76
  border: 1px solid var(--keep-input);
54
77
  border-radius: var(--keep-radius);
55
78
  padding: 0.5rem 0.75rem;
56
- background: var(--keep-background);
79
+ background-color: var(--keep-background);
57
80
  color: var(--keep-foreground);
58
81
  font: inherit;
82
+ box-shadow: 0 1px 2px color-mix(in srgb, var(--keep-foreground) 5%, transparent);
83
+ transition:
84
+ border-color 120ms ease,
85
+ box-shadow 120ms ease,
86
+ background-color 120ms ease;
59
87
  }
60
88
 
61
89
  :where(.keep-theme, [data-keep-theme]) [data-keepkit] button:not([data-keepkit="button"]) {
90
+ display: inline-flex;
62
91
  min-height: var(--keep-button-size);
92
+ align-items: center;
93
+ justify-content: center;
94
+ gap: var(--keep-control-gap);
63
95
  border: 1px solid var(--keep-border);
64
96
  border-radius: var(--keep-radius);
65
97
  padding: 0.5rem 0.75rem;
@@ -67,9 +99,25 @@
67
99
  color: var(--keep-foreground);
68
100
  cursor: pointer;
69
101
  font: inherit;
102
+ font-weight: 600;
103
+ transition:
104
+ border-color 120ms ease,
105
+ background-color 120ms ease,
106
+ box-shadow 120ms ease,
107
+ color 120ms ease,
108
+ transform 120ms ease;
109
+ }
110
+
111
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit] button:not([data-keepkit="button"]):hover:not(:disabled) {
112
+ border-color: color-mix(in srgb, var(--keep-primary) 45%, var(--keep-border));
113
+ background: color-mix(in srgb, var(--keep-primary) 8%, var(--keep-card));
70
114
  }
71
115
 
72
- :where(.keep-theme, [data-keep-theme]) :is(button, input, select, textarea)[data-keepkit] {
116
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit] button:not([data-keepkit="button"]):active:not(:disabled) {
117
+ transform: translateY(1px);
118
+ }
119
+
120
+ :where(.keep-theme, [data-keep-theme]) :where(button, input, select, textarea)[data-keepkit] {
73
121
  min-height: var(--keep-button-size);
74
122
  border: 1px solid var(--keep-border);
75
123
  border-radius: var(--keep-radius);
@@ -79,40 +127,124 @@
79
127
  font: inherit;
80
128
  }
81
129
 
130
+ :where(.keep-theme, [data-keep-theme]).keep-theme--ocean {
131
+ --keep-background: #f5fbff;
132
+ --keep-foreground: #082f49;
133
+ --keep-card: #ffffff;
134
+ --keep-card-foreground: #082f49;
135
+ --keep-muted: #e0f2fe;
136
+ --keep-muted-foreground: #0c4a6e;
137
+ --keep-border: #bae6fd;
138
+ --keep-input: #7dd3fc;
139
+ --keep-accent: #0369a1;
140
+ --keep-primary: var(--keep-accent);
141
+ --keep-primary-foreground: #ffffff;
142
+ --keep-destructive: #be123c;
143
+ --keep-success: #047857;
144
+ --keep-warning: #b45309;
145
+ --keep-ring: var(--keep-accent);
146
+ --keep-shadow: 0 10px 28px color-mix(in srgb, var(--keep-accent) 12%, transparent);
147
+ }
148
+
149
+ :where(.keep-theme, [data-keep-theme]).keep-theme--forest {
150
+ --keep-background: #f7faf7;
151
+ --keep-foreground: #173126;
152
+ --keep-card: #ffffff;
153
+ --keep-card-foreground: #173126;
154
+ --keep-muted: #e7f2e9;
155
+ --keep-muted-foreground: #466557;
156
+ --keep-border: #bfd7c7;
157
+ --keep-input: #91b9a0;
158
+ --keep-accent: #2f6f4e;
159
+ --keep-primary: var(--keep-accent);
160
+ --keep-primary-foreground: #ffffff;
161
+ --keep-destructive: #b42318;
162
+ --keep-success: #18794e;
163
+ --keep-warning: #a15c07;
164
+ --keep-ring: var(--keep-accent);
165
+ --keep-shadow: 0 10px 28px color-mix(in srgb, var(--keep-accent) 12%, transparent);
166
+ }
167
+
168
+ :where(.keep-theme, [data-keep-theme]).keep-theme--sunset {
169
+ --keep-background: #fffaf5;
170
+ --keep-foreground: #431407;
171
+ --keep-card: #ffffff;
172
+ --keep-card-foreground: #431407;
173
+ --keep-muted: #ffedd5;
174
+ --keep-muted-foreground: #9a3412;
175
+ --keep-border: #fed7aa;
176
+ --keep-input: #fdba74;
177
+ --keep-accent: #c2410c;
178
+ --keep-primary: var(--keep-accent);
179
+ --keep-primary-foreground: #ffffff;
180
+ --keep-destructive: #be123c;
181
+ --keep-success: #15803d;
182
+ --keep-warning: #c2410c;
183
+ --keep-ring: var(--keep-accent);
184
+ --keep-shadow: 0 10px 28px color-mix(in srgb, var(--keep-accent) 13%, transparent);
185
+ }
186
+
187
+ :where(.keep-theme, [data-keep-theme]).keep-theme--lavender {
188
+ --keep-background: #fbfaff;
189
+ --keep-foreground: #2e1065;
190
+ --keep-card: #ffffff;
191
+ --keep-card-foreground: #2e1065;
192
+ --keep-muted: #ede9fe;
193
+ --keep-muted-foreground: #6d28d9;
194
+ --keep-border: #ddd6fe;
195
+ --keep-input: #c4b5fd;
196
+ --keep-accent: #7c3aed;
197
+ --keep-primary: var(--keep-accent);
198
+ --keep-primary-foreground: #ffffff;
199
+ --keep-destructive: #be123c;
200
+ --keep-success: #15803d;
201
+ --keep-warning: #b45309;
202
+ --keep-ring: var(--keep-accent);
203
+ --keep-shadow: 0 10px 28px color-mix(in srgb, var(--keep-accent) 12%, transparent);
204
+ }
205
+
82
206
  :where(.keep-theme, [data-keep-theme])[data-mode="dark"],
83
207
  :where(.keep-theme, [data-keep-theme]).keep-theme--dark,
84
208
  :where(.keep-theme, [data-keep-theme]).dark,
85
209
  .dark :where(.keep-theme, [data-keep-theme]) {
86
- --keep-background: var(--background, #0f172a);
210
+ --keep-background: var(--background, color-mix(in srgb, var(--keep-accent) 4%, #0f172a));
87
211
  --keep-foreground: var(--foreground, #e2e8f0);
88
- --keep-card: var(--card, #1e293b);
212
+ --keep-card: var(--card, color-mix(in srgb, var(--keep-accent) 8%, #172033));
89
213
  --keep-card-foreground: var(--card-foreground, var(--keep-foreground));
90
- --keep-muted: var(--muted, #1e293b);
214
+ --keep-muted: var(--muted, color-mix(in srgb, var(--keep-accent) 12%, #172033));
91
215
  --keep-muted-foreground: var(--muted-foreground, #94a3b8);
92
- --keep-border: var(--border, #475569);
216
+ --keep-border: var(--border, color-mix(in srgb, var(--keep-accent) 18%, #475569));
93
217
  --keep-input: var(--input, var(--keep-border));
94
218
  --keep-primary: var(--keep-accent, var(--primary, #93c5fd));
95
- --keep-primary-foreground: var(--primary-foreground, #172554);
219
+ --keep-primary-foreground: var(--primary-foreground, #ffffff);
96
220
  --keep-destructive: var(--destructive, #fca5a5);
97
221
  --keep-destructive-foreground: var(--destructive-foreground, #450a0a);
222
+ --keep-success: #86efac;
223
+ --keep-warning: #fdba74;
98
224
  --keep-ring: var(--ring, var(--keep-primary));
225
+ --keep-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
226
+ --keep-icon-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 6 4-4 4 4M12 2v14M16 18l-4 4-4-4'/%3E%3C/svg%3E");
99
227
  }
100
228
 
101
229
  @media (prefers-color-scheme: dark) {
102
230
  :where(.keep-theme, [data-keep-theme])[data-mode="system"] {
103
- --keep-background: var(--background, #0f172a);
231
+ --keep-background: var(--background, color-mix(in srgb, var(--keep-accent) 4%, #0f172a));
104
232
  --keep-foreground: var(--foreground, #e2e8f0);
105
- --keep-card: var(--card, #1e293b);
233
+ --keep-card: var(--card, color-mix(in srgb, var(--keep-accent) 8%, #172033));
106
234
  --keep-card-foreground: var(--card-foreground, var(--keep-foreground));
107
- --keep-muted: var(--muted, #1e293b);
235
+ --keep-muted: var(--muted, color-mix(in srgb, var(--keep-accent) 12%, #172033));
108
236
  --keep-muted-foreground: var(--muted-foreground, #94a3b8);
109
- --keep-border: var(--border, #475569);
237
+ --keep-border: var(--border, color-mix(in srgb, var(--keep-accent) 18%, #475569));
110
238
  --keep-input: var(--input, var(--keep-border));
111
239
  --keep-primary: var(--keep-accent, var(--primary, #93c5fd));
112
- --keep-primary-foreground: var(--primary-foreground, #172554);
240
+ --keep-primary-foreground: var(--primary-foreground, #ffffff);
113
241
  --keep-destructive: var(--destructive, #fca5a5);
114
242
  --keep-destructive-foreground: var(--destructive-foreground, #450a0a);
243
+ --keep-success: #86efac;
244
+ --keep-warning: #fdba74;
115
245
  --keep-ring: var(--ring, var(--keep-primary));
246
+ --keep-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
247
+ --keep-icon-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 6 4-4 4 4M12 2v14M16 18l-4 4-4-4'/%3E%3C/svg%3E");
116
248
  }
117
249
  }
118
250
 
@@ -135,6 +267,7 @@
135
267
  --keep-card-gap: 0.5rem;
136
268
  --keep-border: transparent;
137
269
  --keep-radius: 0.25rem;
270
+ --keep-shadow: none;
138
271
  }
139
272
 
140
273
  :where(.keep-theme, [data-keep-theme]).keep-theme--rounded,
@@ -164,6 +297,8 @@
164
297
  --keep-primary: #0037b3;
165
298
  --keep-primary-foreground: #ffffff;
166
299
  --keep-destructive: #a40000;
300
+ --keep-success: #006b2d;
301
+ --keep-warning: #7a3e00;
167
302
  --keep-ring: #000000;
168
303
  }
169
304
 
@@ -185,9 +320,6 @@
185
320
  }
186
321
  }
187
322
 
188
- :where(.keep-theme, [data-keep-theme]) [data-state="saved"]::after {
189
- content: "✓";
190
- }
191
323
  :where(.keep-theme, [data-keep-theme]) [data-keepkit="button"][data-state="saved"],
192
324
  :where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-state="saved"] {
193
325
  animation: keepkit-save-pop 180ms ease-out;
@@ -233,6 +365,105 @@
233
365
  background: var(--keep-muted);
234
366
  }
235
367
 
368
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit][data-keep-action="search"] {
369
+ min-width: min(100%, 16rem);
370
+ padding-inline-start: calc(var(--keep-icon-size) + 1.25rem);
371
+ background-image: var(--keep-icon-search);
372
+ background-repeat: no-repeat;
373
+ background-position: 0.75rem center;
374
+ background-size: var(--keep-icon-size);
375
+ }
376
+
377
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit][data-keep-action="sort"] {
378
+ appearance: none;
379
+ padding-inline-end: calc(var(--keep-icon-size) + 1.5rem);
380
+ background-image: var(--keep-icon-sort);
381
+ background-repeat: no-repeat;
382
+ background-position: right 0.75rem center;
383
+ background-size: var(--keep-icon-size);
384
+ }
385
+
386
+ :where(.keep-theme, [data-keep-theme])
387
+ :is(
388
+ [data-keep-action="toggle-save"],
389
+ [data-keep-action="previous-page"],
390
+ [data-keep-action="next-page"],
391
+ [data-keep-action="remove-item"],
392
+ [data-keep-action="delete-selected"],
393
+ [data-keep-action="remove-tag"],
394
+ [data-keep-action="prune-stale"],
395
+ [data-keep-action="filter-all-tags"],
396
+ [data-keep-action="filter-tag"],
397
+ [data-keep-action="apply-tags"],
398
+ [data-keep-action="save-note"],
399
+ [data-keep-action="retry-item"],
400
+ [data-keep-action="retry-sync"],
401
+ [data-keep-action="resolve-conflicts"],
402
+ [data-keep-action="export-backup"],
403
+ [data-keep-action="import-backup"],
404
+ [data-keep-action="undo"],
405
+ [data-keep-action="close-dialog"],
406
+ [data-keep-action="keep-local"],
407
+ [data-keep-action="use-server"],
408
+ [data-keep-action="manual-merge"]
409
+ )::before {
410
+ content: "";
411
+ display: inline-block;
412
+ flex: 0 0 auto;
413
+ width: var(--keep-icon-size);
414
+ height: var(--keep-icon-size);
415
+ background: currentColor;
416
+ mask: var(--keep-action-icon) center / contain no-repeat;
417
+ -webkit-mask: var(--keep-action-icon) center / contain no-repeat;
418
+ }
419
+
420
+ :where(.keep-theme, [data-keep-theme]) [data-keep-action="toggle-save"] {
421
+ --keep-action-icon: var(--keep-icon-bookmark);
422
+ }
423
+ :where(.keep-theme, [data-keep-theme]) :is([data-keep-action="previous-page"], [data-keep-action="close-dialog"]) {
424
+ --keep-action-icon: var(--keep-icon-chevron-left);
425
+ }
426
+ :where(.keep-theme, [data-keep-theme]) [data-keep-action="close-dialog"] {
427
+ --keep-action-icon: var(--keep-icon-close);
428
+ }
429
+ :where(.keep-theme, [data-keep-theme]) [data-keep-action="next-page"] {
430
+ --keep-action-icon: var(--keep-icon-chevron-right);
431
+ }
432
+ :where(.keep-theme, [data-keep-theme])
433
+ :is([data-keep-action="remove-item"], [data-keep-action="delete-selected"], [data-keep-action="prune-stale"]) {
434
+ --keep-action-icon: var(--keep-icon-trash);
435
+ }
436
+ :where(.keep-theme, [data-keep-theme]) [data-keep-action="remove-tag"] {
437
+ --keep-action-icon: var(--keep-icon-close);
438
+ }
439
+ :where(.keep-theme, [data-keep-theme]) :is([data-keep-action="filter-all-tags"], [data-keep-action="filter-tag"]) {
440
+ --keep-action-icon: var(--keep-icon-tag);
441
+ }
442
+ :where(.keep-theme, [data-keep-theme])
443
+ :is([data-keep-action="apply-tags"], [data-keep-action="keep-local"], [data-keep-action="use-server"]) {
444
+ --keep-action-icon: var(--keep-icon-check);
445
+ }
446
+ :where(.keep-theme, [data-keep-theme]) :is([data-keep-action="save-note"], [data-keep-action="manual-merge"]) {
447
+ --keep-action-icon: var(--keep-icon-edit);
448
+ }
449
+ :where(.keep-theme, [data-keep-theme])
450
+ :is([data-keep-action="retry-item"], [data-keep-action="retry-sync"], [data-keep-action="resolve-conflicts"]) {
451
+ --keep-action-icon: var(--keep-icon-refresh);
452
+ }
453
+ :where(.keep-theme, [data-keep-theme]) [data-keep-action="export-backup"] {
454
+ --keep-action-icon: var(--keep-icon-download);
455
+ }
456
+ :where(.keep-theme, [data-keep-theme]) [data-keep-action="import-backup"] {
457
+ --keep-action-icon: var(--keep-icon-upload);
458
+ }
459
+ :where(.keep-theme, [data-keep-theme]) [data-keep-action="undo"] {
460
+ --keep-action-icon: var(--keep-icon-undo);
461
+ }
462
+
463
+ :where(.keep-theme, [data-keep-theme]) [data-has-custom-icon="true"]::before {
464
+ content: none;
465
+ }
466
+
236
467
  @keyframes keepkit-save-pop {
237
468
  50% {
238
469
  transform: scale(1.025);
package/dist/styles/button.css CHANGED
@@ -12,6 +12,8 @@
12
12
  color: var(--keep-primary-foreground);
13
13
  cursor: pointer;
14
14
  font: inherit;
15
+ font-weight: 650;
16
+ box-shadow: 0 1px 2px color-mix(in srgb, var(--keep-primary) 24%, transparent);
15
17
  transition:
16
18
  background-color 120ms ease,
17
19
  border-color 120ms ease,
@@ -40,8 +42,20 @@
40
42
  padding: 0.5rem;
41
43
  }
42
44
 
45
+ :where(.keep-theme, [data-keep-theme])
46
+ [data-keepkit="button"][data-icon-only="true"]:not([data-has-custom-icon="true"]) {
47
+ font-size: 0;
48
+ }
49
+
50
+ :where(.keep-theme, [data-keep-theme])
51
+ [data-keepkit="button"][data-icon-only="true"]:not([data-has-custom-icon="true"])::before {
52
+ width: calc(var(--keep-icon-size) * 1.125);
53
+ height: calc(var(--keep-icon-size) * 1.125);
54
+ }
55
+
43
56
  :where(.keep-theme, [data-keep-theme]) [data-keepkit="button"]:hover:not(:disabled):not([aria-disabled="true"]) {
44
57
  filter: brightness(0.94);
58
+ box-shadow: 0 4px 12px color-mix(in srgb, var(--keep-primary) 20%, transparent);
45
59
  }
46
60
 
47
61
  :where(.keep-theme, [data-keep-theme]) [data-keepkit="button"]:active:not(:disabled):not([aria-disabled="true"]) {
@@ -49,8 +63,11 @@
49
63
  }
50
64
 
51
65
  :where(.keep-theme, [data-keep-theme]) [data-keepkit="button"][data-state="saved"] {
52
- background: var(--keep-card);
53
- color: var(--keep-primary);
66
+ --keep-action-icon: var(--keep-icon-check);
67
+ border-color: color-mix(in srgb, var(--keep-success) 52%, var(--keep-border));
68
+ background: color-mix(in srgb, var(--keep-success) 8%, var(--keep-card));
69
+ color: var(--keep-success);
70
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--keep-success) 12%, transparent);
54
71
  }
55
72
 
56
73
  :where(.keep-theme, [data-keep-theme]) [data-keepkit="button"][data-state="error"] {