@farming-labs/svelte-theme 0.2.37 → 0.2.39

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/styles/omni.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* ═══════════════════════════════════════════════════════════════════
2
- * Omni Command Palette — pixel-perfect sync with website/components/ui/omni-command-palette.tsx
3
- * Uses same CSS variables as docs so it auto-adapts to every theme.
2
+ * Omni Command Palette — core styles
3
+ * Uses fumadocs CSS variables so it auto-adapts to every theme.
4
4
  * ═══════════════════════════════════════════════════════════════════ */
5
5
 
6
6
  @keyframes omni-fade-in {
@@ -22,7 +22,7 @@
22
22
  @keyframes omni-scale-in {
23
23
  from {
24
24
  opacity: 0;
25
- transform: translateX(-50%) scale(0.96) translateY(-4px);
25
+ transform: translateX(-50%) scale(0.98) translateY(-6px);
26
26
  }
27
27
  to {
28
28
  opacity: 1;
@@ -36,7 +36,7 @@
36
36
  }
37
37
  to {
38
38
  opacity: 0;
39
- transform: translateX(-50%) scale(0.96) translateY(-4px);
39
+ transform: translateX(-50%) scale(0.98) translateY(-6px);
40
40
  }
41
41
  }
42
42
 
@@ -49,150 +49,172 @@
49
49
  }
50
50
  }
51
51
 
52
- #nd-docs-layout .omni-spin {
52
+ .omni-spin {
53
53
  animation: omni-spin 1s linear infinite;
54
54
  }
55
55
 
56
- #nd-docs-layout .omni-overlay {
56
+ .omni-overlay {
57
57
  position: fixed;
58
58
  inset: 0;
59
- z-index: 100;
60
- background: rgba(0, 0, 0, 0.55);
61
- backdrop-filter: blur(4px);
59
+ z-index: 50;
60
+ background: rgba(0, 0, 0, 0.2);
61
+ backdrop-filter: blur(2px);
62
62
  animation: omni-fade-in 150ms ease-out;
63
63
  }
64
64
 
65
- #nd-docs-layout .omni-content {
65
+ .omni-content {
66
+ --omni-content-top: clamp(5rem, 16vh, 7rem);
66
67
  position: fixed;
67
- z-index: 101;
68
- top: 18%;
68
+ z-index: 51;
69
+ top: var(--omni-content-top);
69
70
  left: 50%;
70
71
  transform: translateX(-50%);
71
- width: min(720px, calc(100% - 32px));
72
- border-radius: var(--radius, 0.75rem);
73
- border: 1px solid var(--color-fd-border, #262626);
74
- background: var(--color-fd-popover, #0c0c0c);
75
- color: var(--color-fd-foreground, #fafafa);
76
- box-shadow:
77
- 0 24px 60px -12px rgba(0, 0, 0, 0.5),
78
- 0 0 0 1px rgba(255, 255, 255, 0.04);
72
+ display: flex;
73
+ flex-direction: column;
74
+ width: min(720px, calc(100% - 1rem));
75
+ border-radius: 0.75rem;
76
+ border: 1px solid color-mix(in srgb, var(--color-fd-border, #d4d4d4) 70%, transparent);
77
+ background: var(--color-fd-popover, #fafafa);
78
+ color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #272727));
79
+ font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
80
+ ui-sans-serif, sans-serif);
81
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
79
82
  outline: none;
80
- overflow: hidden;
83
+ overscroll-behavior: contain;
81
84
  animation: omni-scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
82
85
  }
83
86
 
84
87
  @media (max-width: 639px) {
85
- #nd-docs-layout .omni-content {
86
- top: 10%;
87
- width: calc(100% - 24px);
88
- max-height: 75vh;
89
- }
90
- #nd-docs-layout .omni-kbd {
91
- display: none;
88
+ .omni-content {
89
+ --omni-content-top: 1rem;
90
+ top: var(--omni-content-top);
91
+ width: calc(100% - 1rem);
92
+ max-height: calc(100vh - 2rem);
92
93
  }
93
94
  }
94
95
 
95
96
  /* Header */
96
- #nd-docs-layout .omni-header {
97
+ .omni-header {
97
98
  border-bottom: 1px solid var(--color-fd-border, #262626);
98
99
  }
99
- #nd-docs-layout .omni-search-row {
100
+ .omni-search-row {
100
101
  display: flex;
101
102
  align-items: center;
102
103
  gap: 0.5rem;
103
- padding: 0.625rem 0.875rem;
104
+ padding: 0.75rem;
104
105
  }
105
- #nd-docs-layout .omni-search-icon {
106
+ .omni-search-icon {
106
107
  color: var(--color-fd-muted-foreground, #a3a3a3);
107
108
  flex-shrink: 0;
108
109
  }
109
- #nd-docs-layout .omni-search-input {
110
+ .omni-search-icon svg {
111
+ width: 1.25rem;
112
+ height: 1.25rem;
113
+ }
114
+ .omni-search-input {
115
+ width: 0;
110
116
  flex: 1;
111
117
  background: transparent;
112
118
  outline: none;
113
- font-size: 0.875rem;
114
- line-height: 1.25rem;
115
- color: var(--color-fd-foreground, #fafafa);
119
+ font-size: 1.125rem;
120
+ line-height: 1.75rem;
121
+ color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #272727));
116
122
  border: none;
117
123
  }
118
- #nd-docs-layout .omni-search-input::placeholder {
124
+ .omni-search-input::placeholder {
119
125
  color: var(--color-fd-muted-foreground, #a3a3a3);
120
126
  }
121
- #nd-docs-layout .omni-kbd {
122
- border-radius: 0.25rem;
123
- background: var(--color-fd-muted, #262626);
124
- padding: 0.125rem 0.375rem;
125
- font-size: 10px;
127
+ .omni-kbd {
128
+ border-radius: 0.375rem;
129
+ border: 1px solid var(--color-fd-border, #d4d4d4);
130
+ background: transparent;
131
+ padding: 0.375rem 0.5rem;
132
+ font-size: 0.75rem;
126
133
  color: var(--color-fd-muted-foreground, #a3a3a3);
127
- font-family: inherit;
128
- line-height: 1.4;
134
+ font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
135
+ "Liberation Mono", "Courier New", monospace);
136
+ line-height: 1rem;
129
137
  }
130
- #nd-docs-layout .omni-close-btn {
131
- margin-left: 0.25rem;
132
- border-radius: 0.25rem;
133
- padding: 0.25rem;
138
+ .omni-close-btn {
139
+ display: inline-flex;
140
+ align-items: center;
141
+ justify-content: center;
142
+ gap: 0.25rem;
143
+ min-width: 2.5rem;
144
+ border-radius: 0.375rem;
145
+ border: 1px solid var(--color-fd-border, #d4d4d4);
146
+ padding: 0.375rem 0.5rem;
134
147
  color: var(--color-fd-muted-foreground, #a3a3a3);
135
- transition: background 120ms;
148
+ font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
149
+ "Liberation Mono", "Courier New", monospace);
150
+ font-size: 0.75rem;
151
+ line-height: 1rem;
152
+ font-weight: 500;
153
+ transition:
154
+ background 120ms,
155
+ color 120ms;
136
156
  cursor: pointer;
137
- border: none;
138
157
  background: none;
139
158
  }
140
- #nd-docs-layout .omni-close-btn:hover {
141
- background: var(--color-fd-muted, #262626);
159
+ .omni-close-btn:hover {
160
+ color: var(--color-fd-accent-foreground, var(--color-fd-foreground, #171717));
161
+ background: var(--color-fd-accent, #e5e5e5);
162
+ }
163
+ .omni-close-btn svg {
164
+ display: none;
142
165
  }
143
166
 
144
167
  /* Body / listbox */
145
- #nd-docs-layout .omni-body {
146
- max-height: 60vh;
168
+ .omni-body {
169
+ flex: 1 1 auto;
170
+ min-height: 0;
171
+ max-height: min(540px, calc(100vh - var(--omni-content-top, 7rem) - 8rem));
147
172
  overflow: auto;
148
- padding: 0.25rem;
173
+ overscroll-behavior: contain;
174
+ padding: 0.5rem;
149
175
  }
150
- #nd-docs-layout .omni-body::-webkit-scrollbar {
176
+ .omni-body::-webkit-scrollbar {
151
177
  width: 6px;
152
178
  }
153
- #nd-docs-layout .omni-body::-webkit-scrollbar-track {
179
+ .omni-body::-webkit-scrollbar-track {
154
180
  background: transparent;
155
181
  }
156
- #nd-docs-layout .omni-body::-webkit-scrollbar-thumb {
182
+ .omni-body::-webkit-scrollbar-thumb {
157
183
  background: var(--color-fd-muted, #262626);
158
184
  border-radius: 3px;
159
185
  }
160
186
 
161
187
  /* Loading */
162
- #nd-docs-layout .omni-loading {
188
+ .omni-loading {
163
189
  display: flex;
164
190
  align-items: center;
165
191
  gap: 0.5rem;
166
- padding: 0.5rem 0.75rem;
192
+ padding: 0.75rem 0.625rem;
167
193
  color: var(--color-fd-muted-foreground, #a3a3a3);
168
- font-size: 0.75rem;
194
+ font-size: 0.875rem;
169
195
  }
170
196
 
171
197
  /* Groups */
172
- #nd-docs-layout .omni-group {
173
- padding: 0.25rem 0;
198
+ .omni-group {
199
+ padding: 0;
174
200
  }
175
- #nd-docs-layout .omni-group-label {
176
- padding: 0.25rem 0.75rem;
177
- font-size: 10px;
178
- text-transform: uppercase;
179
- letter-spacing: 0.06em;
180
- color: var(--color-fd-muted-foreground, #a3a3a3);
181
- font-weight: 500;
201
+ .omni-group-label {
202
+ display: none;
182
203
  }
183
- #nd-docs-layout .omni-group-items {
204
+ .omni-group-items {
184
205
  display: flex;
185
206
  flex-direction: column;
207
+ gap: 0.25rem;
186
208
  }
187
209
 
188
210
  /* Items */
189
- #nd-docs-layout .omni-item {
190
- display: flex;
211
+ .omni-item {
212
+ position: relative;
213
+ display: block;
191
214
  width: 100%;
192
- align-items: center;
193
- gap: 0.75rem;
194
- border-radius: calc(var(--radius, 0.75rem) - 4px);
195
- padding: 0.5rem 0.75rem;
215
+ flex-shrink: 0;
216
+ border-radius: 0.5rem;
217
+ padding: 0.75rem 0.875rem;
196
218
  text-align: left;
197
219
  font-size: 0.875rem;
198
220
  line-height: 1.25rem;
@@ -202,73 +224,75 @@
202
224
  color: var(--color-fd-foreground, #fafafa);
203
225
  transition: background 80ms;
204
226
  }
205
- #nd-docs-layout .omni-item:hover,
206
- #nd-docs-layout .omni-item-active {
207
- background: color-mix(in srgb, var(--color-fd-accent, #262626) 60%, transparent);
227
+ .omni-item:hover,
228
+ .omni-item-active {
229
+ background: var(--color-fd-accent, rgba(209, 209, 209, 0.5));
208
230
  }
209
- #nd-docs-layout .omni-item-active {
210
- color: var(--color-fd-accent-foreground, #fafafa);
231
+ .omni-item-active {
232
+ color: var(--color-fd-accent-foreground, #171717);
211
233
  }
212
- #nd-docs-layout .omni-item-disabled {
234
+ .omni-item-disabled {
213
235
  opacity: 0.5;
214
236
  cursor: not-allowed;
215
237
  }
216
238
 
217
- #nd-docs-layout .omni-item-icon {
218
- flex-shrink: 0;
219
- color: var(--color-fd-muted-foreground, #a3a3a3);
239
+ .omni-item-icon {
240
+ display: none;
220
241
  }
221
- #nd-docs-layout .omni-item-active .omni-item-icon {
242
+ .omni-item-active .omni-item-icon {
222
243
  color: var(--color-fd-accent-foreground, #fafafa);
223
244
  }
224
- #nd-docs-layout .omni-item-text {
225
- flex: 1;
245
+ .omni-item-text {
226
246
  min-width: 0;
227
247
  }
228
- #nd-docs-layout .omni-item-label {
248
+ .omni-item-label {
249
+ min-width: 0;
229
250
  overflow: hidden;
230
251
  text-overflow: ellipsis;
231
252
  white-space: nowrap;
253
+ color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #272727));
254
+ font-weight: 500;
255
+ line-height: 1.35;
232
256
  }
233
- #nd-docs-layout .omni-item-subtitle {
257
+ .omni-item-subtitle {
258
+ min-width: 0;
234
259
  overflow: hidden;
235
260
  text-overflow: ellipsis;
236
261
  white-space: nowrap;
237
262
  font-size: 0.75rem;
263
+ line-height: 1rem;
238
264
  color: var(--color-fd-muted-foreground, #a3a3a3);
239
- opacity: 0.8;
265
+ opacity: 1;
240
266
  }
241
- #nd-docs-layout .omni-item-active .omni-item-subtitle {
242
- color: var(--color-fd-accent-foreground, #fafafa);
243
- opacity: 0.7;
267
+ .omni-item-active .omni-item-subtitle {
268
+ color: var(--color-fd-muted-foreground, #737373);
269
+ opacity: 1;
244
270
  }
245
- #nd-docs-layout .omni-item-badge {
246
- color: var(--color-fd-muted-foreground, #a3a3a3);
247
- flex-shrink: 0;
271
+ .omni-item-description {
272
+ min-width: 0;
273
+ overflow: hidden;
274
+ display: -webkit-box;
275
+ -webkit-line-clamp: 3;
276
+ -webkit-box-orient: vertical;
277
+ margin-top: 0.625rem;
278
+ padding-left: 0.75rem;
279
+ border-left: 1px solid color-mix(in srgb, var(--color-fd-border, #d4d4d4) 70%, transparent);
280
+ color: color-mix(in srgb, var(--color-fd-popover-foreground, #272727) 82%, transparent);
281
+ font-size: 0.875rem;
282
+ line-height: 1.5rem;
283
+ font-weight: 400;
248
284
  }
249
- #nd-docs-layout a.omni-item-badge:hover {
250
- color: var(--color-fd-foreground, #fafafa);
285
+ .omni-item-badge {
286
+ display: none;
251
287
  }
252
- #nd-docs-layout .omni-item-ext {
253
- position: relative;
254
- z-index: 2;
255
- display: inline-flex;
256
- align-items: center;
257
- justify-content: center;
258
- padding: 0.25rem;
259
- border-radius: 0.25rem;
260
- color: var(--color-fd-muted-foreground, #a3a3a3);
261
- flex-shrink: 0;
262
- transition:
263
- color 100ms,
264
- background 100ms;
265
- text-decoration: none;
288
+ .omni-item-ext {
289
+ display: none;
266
290
  }
267
- #nd-docs-layout .omni-item-ext:hover {
291
+ .omni-item-ext:hover {
268
292
  color: var(--color-fd-foreground, #fafafa);
269
293
  background: var(--color-fd-muted, #262626);
270
294
  }
271
- #nd-docs-layout .omni-item-shortcuts {
295
+ .omni-item-shortcuts {
272
296
  display: none;
273
297
  align-items: center;
274
298
  gap: 0.25rem;
@@ -276,50 +300,43 @@
276
300
  color: var(--color-fd-muted-foreground, #a3a3a3);
277
301
  }
278
302
  @media (min-width: 640px) {
279
- #nd-docs-layout .omni-item-shortcuts {
303
+ .omni-item-shortcuts {
280
304
  display: flex;
281
305
  }
282
306
  }
283
- #nd-docs-layout .omni-kbd-sm {
307
+ .omni-kbd-sm {
284
308
  border-radius: 0.25rem;
285
309
  background: var(--color-fd-muted, #262626);
286
310
  padding: 0.125rem 0.25rem;
287
- font-family: inherit;
311
+ font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
312
+ "Liberation Mono", "Courier New", monospace);
288
313
  }
289
- #nd-docs-layout .omni-item-chevron {
290
- width: 0.875rem;
291
- height: 0.875rem;
292
- margin-left: 0.25rem;
293
- color: var(--color-fd-muted-foreground, #a3a3a3);
294
- opacity: 0;
295
- transition: opacity 120ms;
296
- flex-shrink: 0;
297
- }
298
- #nd-docs-layout .omni-item:hover .omni-item-chevron {
299
- opacity: 1;
314
+ .omni-item-chevron {
315
+ display: none;
300
316
  }
301
-
302
317
  /* Highlight */
303
- #nd-docs-layout .omni-highlight {
304
- border-radius: 2px;
305
- background: color-mix(in srgb, var(--color-fd-primary, #6366f1) 30%, transparent);
306
- padding: 0 2px;
307
- color: inherit;
318
+ .omni-highlight {
319
+ border-radius: 0;
320
+ background: transparent;
321
+ padding: 0;
322
+ color: var(--color-fd-primary, #ca8a04);
323
+ text-decoration: underline;
324
+ text-underline-offset: 2px;
308
325
  }
309
326
 
310
327
  /* Empty states */
311
- #nd-docs-layout .omni-empty-group {
328
+ .omni-empty-group {
312
329
  padding: 0.5rem 0.75rem;
313
330
  font-size: 0.75rem;
314
331
  color: var(--color-fd-muted-foreground, #a3a3a3);
315
332
  }
316
- #nd-docs-layout .omni-empty {
317
- padding: 2rem 0.75rem;
333
+ .omni-empty {
334
+ padding: 1.5rem 0.75rem;
318
335
  text-align: center;
319
336
  font-size: 0.875rem;
320
337
  color: var(--color-fd-muted-foreground, #a3a3a3);
321
338
  }
322
- #nd-docs-layout .omni-empty-icon {
339
+ .omni-empty-icon {
323
340
  width: 2rem;
324
341
  height: 2rem;
325
342
  margin: 0 auto 0.5rem;
@@ -331,32 +348,107 @@
331
348
  }
332
349
 
333
350
  /* Footer */
334
- #nd-docs-layout .omni-footer {
351
+ .omni-footer {
335
352
  border-top: 1px solid var(--color-fd-border, #262626);
353
+ background: color-mix(in srgb, var(--color-fd-secondary, #f5f5f5) 50%, transparent);
336
354
  }
337
- #nd-docs-layout .omni-footer-inner {
355
+ .omni-footer-inner {
338
356
  display: flex;
339
357
  align-items: center;
340
358
  justify-content: space-between;
341
- padding: 0.5rem 0.75rem;
359
+ gap: 0.75rem;
360
+ padding: 0.625rem 0.75rem;
342
361
  font-size: 0.75rem;
343
362
  color: var(--color-fd-muted-foreground, #a3a3a3);
344
363
  }
345
- #nd-docs-layout .omni-footer-hints {
364
+ .omni-footer-hints {
346
365
  display: flex;
347
366
  align-items: center;
348
- gap: 1rem;
367
+ flex-wrap: wrap;
368
+ gap: 0.75rem;
349
369
  }
350
- #nd-docs-layout .omni-footer-hint {
370
+ .omni-footer-hint {
351
371
  display: flex;
352
372
  align-items: center;
353
373
  gap: 0.25rem;
374
+ white-space: nowrap;
375
+ }
376
+ .omni-footer-hint svg {
377
+ box-sizing: border-box;
378
+ width: 1.375rem;
379
+ height: 1.375rem;
380
+ padding: 0.25rem;
381
+ border-radius: 0.375rem;
382
+ border: 1px solid var(--color-fd-border, #d4d4d4);
383
+ background: color-mix(in srgb, var(--color-fd-muted, #e5e5e5) 70%, transparent);
384
+ color: var(--color-fd-muted-foreground, #737373);
385
+ flex-shrink: 0;
354
386
  }
355
- #nd-docs-layout .omni-footer-hint-desktop {
387
+ .omni-footer-hint-desktop {
356
388
  display: none;
357
389
  }
390
+ .omni-footer-filter {
391
+ position: relative;
392
+ display: inline-flex;
393
+ align-items: center;
394
+ gap: 0.5rem;
395
+ margin-left: auto;
396
+ white-space: nowrap;
397
+ }
358
398
  @media (min-width: 640px) {
359
- #nd-docs-layout .omni-footer-hint-desktop {
399
+ .omni-footer-hint-desktop {
360
400
  display: flex;
361
401
  }
362
402
  }
403
+ .omni-filter-label {
404
+ color: var(--color-fd-muted-foreground, #a3a3a3);
405
+ }
406
+ .omni-filter-value {
407
+ display: inline-flex;
408
+ align-items: center;
409
+ gap: 0.25rem;
410
+ color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #272727));
411
+ }
412
+ .omni-filter-button {
413
+ display: inline-flex;
414
+ align-items: center;
415
+ gap: 0.25rem;
416
+ border: 0;
417
+ background: transparent;
418
+ color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #272727));
419
+ font: inherit;
420
+ cursor: pointer;
421
+ padding: 0;
422
+ }
423
+ .omni-filter-button:hover {
424
+ color: var(--color-fd-accent-foreground, var(--color-fd-foreground, #171717));
425
+ }
426
+ .omni-filter-menu {
427
+ position: absolute;
428
+ right: 0;
429
+ bottom: calc(100% + 0.5rem);
430
+ z-index: 1;
431
+ width: 10rem;
432
+ border: 1px solid var(--color-fd-border, #d4d4d4);
433
+ border-radius: 0.5rem;
434
+ background: var(--color-fd-popover, #fafafa);
435
+ padding: 0.25rem;
436
+ box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.45);
437
+ }
438
+ .omni-filter-option {
439
+ display: flex;
440
+ width: 100%;
441
+ align-items: center;
442
+ border: 0;
443
+ border-radius: 0.375rem;
444
+ background: transparent;
445
+ color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #272727));
446
+ cursor: pointer;
447
+ font: inherit;
448
+ padding: 0.5rem 0.625rem;
449
+ text-align: left;
450
+ }
451
+ .omni-filter-option:hover,
452
+ .omni-filter-option-active {
453
+ background: var(--color-fd-accent, rgba(209, 209, 209, 0.5));
454
+ }
@@ -844,7 +844,7 @@ body:has(#nd-docs-layout),
844
844
  }
845
845
 
846
846
  #nd-docs-layout .omni-search-input {
847
- font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
847
+ font-family: var(--fd-font-sans, system-ui, -apple-system, sans-serif) !important;
848
848
  }
849
849
 
850
850
  #nd-docs-layout .omni-group-label {
@@ -856,6 +856,15 @@ body:has(#nd-docs-layout),
856
856
  font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
857
857
  }
858
858
 
859
+ #nd-docs-layout .omni-footer-hint svg {
860
+ border-radius: 0 !important;
861
+ }
862
+
863
+ #nd-docs-layout .omni-filter-menu,
864
+ #nd-docs-layout .omni-filter-option {
865
+ border-radius: 0 !important;
866
+ }
867
+
859
868
  #nd-docs-layout .omni-highlight {
860
869
  background: color-mix(in srgb, var(--color-fd-primary, #6366f1) 25%, transparent) !important;
861
870
  border-radius: 0 !important;