@sabrenski/spire-ui-vue 0.3.2 → 0.3.3

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 (37) hide show
  1. package/README.md +72 -1
  2. package/dist/components/Autocomplete/Autocomplete.vue.d.ts +12 -1
  3. package/dist/components/Badge/types.d.ts +1 -1
  4. package/dist/components/DatePicker/DatePicker.vue.d.ts +6 -2
  5. package/dist/components/DatePicker/types.d.ts +5 -1
  6. package/dist/components/Dropdown/DropdownMenu.vue.d.ts +15 -2
  7. package/dist/components/IconPicker/IconPicker.vue.d.ts +15 -4
  8. package/dist/components/Input/Input.vue.d.ts +2 -1
  9. package/dist/components/Input/types.d.ts +3 -1
  10. package/dist/components/LineChart/LineChart.vue.d.ts +0 -1
  11. package/dist/components/LineChart/constants.d.ts +1 -8
  12. package/dist/components/LineChart/types.d.ts +0 -2
  13. package/dist/components/LineChart/utils.d.ts +0 -8
  14. package/dist/components/PhoneInput/PhoneInput.vue.d.ts +6 -3
  15. package/dist/components/Popover/Popover.vue.d.ts +11 -2
  16. package/dist/components/Select/Select.vue.d.ts +208 -7
  17. package/dist/components/Select/types.d.ts +5 -1
  18. package/dist/components/Sidebar/Sidebar.vue.d.ts +1 -1
  19. package/dist/components/Tabs/Tabs.vue.d.ts +0 -1
  20. package/dist/components/Tabs/types.d.ts +1 -5
  21. package/dist/components/TimeInput/TimeInput.vue.d.ts +1 -1
  22. package/dist/components/TimeInput/types.d.ts +1 -1
  23. package/dist/composables/index.d.ts +3 -0
  24. package/dist/composables/useDarkMode/index.d.ts +1 -0
  25. package/dist/composables/useDarkMode/useDarkMode.d.ts +42 -0
  26. package/dist/composables/useMobilePopover/index.d.ts +1 -0
  27. package/dist/composables/useMobilePopover/useMobilePopover.d.ts +8 -0
  28. package/dist/composables/useTheme/index.d.ts +1 -0
  29. package/dist/composables/useTheme/useTheme.d.ts +43 -0
  30. package/dist/spire-ui.cjs +39 -39
  31. package/dist/spire-ui.css +1 -1
  32. package/dist/spire-ui.js +20127 -19581
  33. package/dist/theme/anchor-positioning.css +35 -0
  34. package/dist/theme/base.css +54 -54
  35. package/dist/theme/components.css +48 -0
  36. package/dist/theme/semantic.css +407 -17
  37. package/package.json +1 -1
package/dist/theme/semantic.css CHANGED
@@ -116,22 +116,28 @@
116
116
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
117
117
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
118
118
 
119
- --animate-fade-in: fade-in 0.2s var(--ease-smooth);
120
- --animate-fade-out: fade-out 0.2s var(--ease-smooth);
121
- --animate-scale-in: scale-in 0.2s var(--ease-spring);
122
- --animate-scale-out: scale-out 0.15s var(--ease-smooth);
123
- --animate-slide-up: slide-up 0.3s var(--ease-smooth);
124
- --animate-slide-down: slide-down 0.3s var(--ease-smooth);
119
+ --duration-instant: 0ms;
120
+ --duration-fast: 150ms;
121
+ --duration-normal: 200ms;
122
+ --duration-slow: 300ms;
123
+ --duration-slower: 500ms;
124
+
125
+ --animate-fade-in: fade-in var(--duration-normal) var(--ease-smooth);
126
+ --animate-fade-out: fade-out var(--duration-normal) var(--ease-smooth);
127
+ --animate-scale-in: scale-in var(--duration-normal) var(--ease-spring);
128
+ --animate-scale-out: scale-out var(--duration-fast) var(--ease-smooth);
129
+ --animate-slide-up: slide-up var(--duration-slow) var(--ease-smooth);
130
+ --animate-slide-down: slide-down var(--duration-slow) var(--ease-smooth);
125
131
  --animate-pulse-soft: pulse-soft 2s var(--ease-smooth) infinite;
126
132
 
127
- --animate-toast-slide-in-right: toast-slide-in-right 0.3s var(--ease-spring);
128
- --animate-toast-slide-in-left: toast-slide-in-left 0.3s var(--ease-spring);
129
- --animate-toast-slide-in-top: toast-slide-in-top 0.3s var(--ease-spring);
130
- --animate-toast-slide-in-bottom: toast-slide-in-bottom 0.3s var(--ease-spring);
131
- --animate-toast-slide-out-right: toast-slide-out-right 0.2s var(--ease-smooth);
132
- --animate-toast-slide-out-left: toast-slide-out-left 0.2s var(--ease-smooth);
133
- --animate-toast-slide-out-top: toast-slide-out-top 0.2s var(--ease-smooth);
134
- --animate-toast-slide-out-bottom: toast-slide-out-bottom 0.2s var(--ease-smooth);
133
+ --animate-toast-slide-in-right: toast-slide-in-right var(--duration-slow) var(--ease-spring);
134
+ --animate-toast-slide-in-left: toast-slide-in-left var(--duration-slow) var(--ease-spring);
135
+ --animate-toast-slide-in-top: toast-slide-in-top var(--duration-slow) var(--ease-spring);
136
+ --animate-toast-slide-in-bottom: toast-slide-in-bottom var(--duration-slow) var(--ease-spring);
137
+ --animate-toast-slide-out-right: toast-slide-out-right var(--duration-normal) var(--ease-smooth);
138
+ --animate-toast-slide-out-left: toast-slide-out-left var(--duration-normal) var(--ease-smooth);
139
+ --animate-toast-slide-out-top: toast-slide-out-top var(--duration-normal) var(--ease-smooth);
140
+ --animate-toast-slide-out-bottom: toast-slide-out-bottom var(--duration-normal) var(--ease-smooth);
135
141
  }
136
142
 
137
143
  @keyframes fade-in {
@@ -203,7 +209,7 @@
203
209
  --color-subtle: var(--color-neutral-800);
204
210
  --color-muted: var(--color-neutral-700);
205
211
  --color-elevated: var(--color-neutral-800);
206
- --color-overlay: var(--color-neutral-900);
212
+ --color-overlay: oklch(10% 0 0 / 50%);
207
213
  --color-popover: var(--color-neutral-900);
208
214
  --color-inset: var(--color-neutral-950);
209
215
 
@@ -304,47 +310,402 @@
304
310
 
305
311
  .ocean {
306
312
  --color-primary-base: oklch(55% 0.15 195);
313
+ --color-primary-50: oklch(from var(--color-primary-base) 97% calc(c * 0.15) h);
314
+ --color-primary-100: oklch(from var(--color-primary-base) 95% calc(c * 0.25) h);
315
+ --color-primary-200: oklch(from var(--color-primary-base) 90% calc(c * 0.40) h);
316
+ --color-primary-300: oklch(from var(--color-primary-base) 82% calc(c * 0.60) h);
317
+ --color-primary-400: oklch(from var(--color-primary-base) 72% calc(c * 0.85) h);
318
+ --color-primary-500: oklch(from var(--color-primary-base) 60% c h);
319
+ --color-primary-600: oklch(from var(--color-primary-base) 48% calc(c * 0.95) h);
320
+ --color-primary-700: oklch(from var(--color-primary-base) 38% calc(c * 0.85) h);
321
+ --color-primary-800: oklch(from var(--color-primary-base) 28% calc(c * 0.70) h);
322
+ --color-primary-900: oklch(from var(--color-primary-base) 20% calc(c * 0.55) h);
323
+ --color-primary-950: oklch(from var(--color-primary-base) 12% calc(c * 0.40) h);
324
+
307
325
  --color-secondary-base: oklch(55% 0.12 230);
326
+ --color-secondary-50: oklch(from var(--color-secondary-base) 97% calc(c * 0.15) h);
327
+ --color-secondary-100: oklch(from var(--color-secondary-base) 95% calc(c * 0.25) h);
328
+ --color-secondary-200: oklch(from var(--color-secondary-base) 90% calc(c * 0.40) h);
329
+ --color-secondary-300: oklch(from var(--color-secondary-base) 82% calc(c * 0.60) h);
330
+ --color-secondary-400: oklch(from var(--color-secondary-base) 72% calc(c * 0.85) h);
331
+ --color-secondary-500: oklch(from var(--color-secondary-base) 60% c h);
332
+ --color-secondary-600: oklch(from var(--color-secondary-base) 48% calc(c * 0.95) h);
333
+ --color-secondary-700: oklch(from var(--color-secondary-base) 38% calc(c * 0.85) h);
334
+ --color-secondary-800: oklch(from var(--color-secondary-base) 28% calc(c * 0.70) h);
335
+ --color-secondary-900: oklch(from var(--color-secondary-base) 20% calc(c * 0.55) h);
336
+ --color-secondary-950: oklch(from var(--color-secondary-base) 12% calc(c * 0.40) h);
337
+
308
338
  --color-success-base: oklch(55% 0.15 170);
339
+ --color-success-50: oklch(from var(--color-success-base) 97% calc(c * 0.15) h);
340
+ --color-success-100: oklch(from var(--color-success-base) 95% calc(c * 0.25) h);
341
+ --color-success-200: oklch(from var(--color-success-base) 90% calc(c * 0.40) h);
342
+ --color-success-300: oklch(from var(--color-success-base) 82% calc(c * 0.60) h);
343
+ --color-success-400: oklch(from var(--color-success-base) 72% calc(c * 0.85) h);
344
+ --color-success-500: oklch(from var(--color-success-base) 60% c h);
345
+ --color-success-600: oklch(from var(--color-success-base) 48% calc(c * 0.95) h);
346
+ --color-success-700: oklch(from var(--color-success-base) 38% calc(c * 0.85) h);
347
+ --color-success-800: oklch(from var(--color-success-base) 28% calc(c * 0.70) h);
348
+ --color-success-900: oklch(from var(--color-success-base) 20% calc(c * 0.55) h);
349
+ --color-success-950: oklch(from var(--color-success-base) 12% calc(c * 0.40) h);
350
+
309
351
  --color-danger-base: oklch(55% 0.18 15);
352
+ --color-danger-50: oklch(from var(--color-danger-base) 97% calc(c * 0.15) h);
353
+ --color-danger-100: oklch(from var(--color-danger-base) 95% calc(c * 0.25) h);
354
+ --color-danger-200: oklch(from var(--color-danger-base) 90% calc(c * 0.40) h);
355
+ --color-danger-300: oklch(from var(--color-danger-base) 82% calc(c * 0.60) h);
356
+ --color-danger-400: oklch(from var(--color-danger-base) 72% calc(c * 0.85) h);
357
+ --color-danger-500: oklch(from var(--color-danger-base) 60% c h);
358
+ --color-danger-600: oklch(from var(--color-danger-base) 48% calc(c * 0.95) h);
359
+ --color-danger-700: oklch(from var(--color-danger-base) 38% calc(c * 0.85) h);
360
+ --color-danger-800: oklch(from var(--color-danger-base) 28% calc(c * 0.70) h);
361
+ --color-danger-900: oklch(from var(--color-danger-base) 20% calc(c * 0.55) h);
362
+ --color-danger-950: oklch(from var(--color-danger-base) 12% calc(c * 0.40) h);
363
+
310
364
  --color-warning-base: oklch(70% 0.14 85);
365
+ --color-warning-50: oklch(from var(--color-warning-base) 97% calc(c * 0.15) h);
366
+ --color-warning-100: oklch(from var(--color-warning-base) 95% calc(c * 0.25) h);
367
+ --color-warning-200: oklch(from var(--color-warning-base) 90% calc(c * 0.40) h);
368
+ --color-warning-300: oklch(from var(--color-warning-base) 82% calc(c * 0.60) h);
369
+ --color-warning-400: oklch(from var(--color-warning-base) 72% calc(c * 0.85) h);
370
+ --color-warning-500: oklch(from var(--color-warning-base) 60% c h);
371
+ --color-warning-600: oklch(from var(--color-warning-base) 48% calc(c * 0.95) h);
372
+ --color-warning-700: oklch(from var(--color-warning-base) 38% calc(c * 0.85) h);
373
+ --color-warning-800: oklch(from var(--color-warning-base) 28% calc(c * 0.70) h);
374
+ --color-warning-900: oklch(from var(--color-warning-base) 20% calc(c * 0.55) h);
375
+ --color-warning-950: oklch(from var(--color-warning-base) 12% calc(c * 0.40) h);
376
+
311
377
  --color-neutral-base: oklch(50% 0.02 210);
378
+ --color-neutral-50: oklch(from var(--color-neutral-base) 97% calc(c * 0.15) h);
379
+ --color-neutral-100: oklch(from var(--color-neutral-base) 95% calc(c * 0.25) h);
380
+ --color-neutral-200: oklch(from var(--color-neutral-base) 90% calc(c * 0.40) h);
381
+ --color-neutral-300: oklch(from var(--color-neutral-base) 82% calc(c * 0.60) h);
382
+ --color-neutral-400: oklch(from var(--color-neutral-base) 72% calc(c * 0.85) h);
383
+ --color-neutral-500: oklch(from var(--color-neutral-base) 60% c h);
384
+ --color-neutral-600: oklch(from var(--color-neutral-base) 48% calc(c * 0.95) h);
385
+ --color-neutral-700: oklch(from var(--color-neutral-base) 38% calc(c * 0.85) h);
386
+ --color-neutral-800: oklch(from var(--color-neutral-base) 28% calc(c * 0.70) h);
387
+ --color-neutral-900: oklch(from var(--color-neutral-base) 20% calc(c * 0.55) h);
388
+ --color-neutral-950: oklch(from var(--color-neutral-base) 12% calc(c * 0.40) h);
312
389
  }
313
390
 
314
391
  .forest {
315
392
  --color-primary-base: oklch(45% 0.12 145);
393
+ --color-primary-50: oklch(from var(--color-primary-base) 97% calc(c * 0.15) h);
394
+ --color-primary-100: oklch(from var(--color-primary-base) 95% calc(c * 0.25) h);
395
+ --color-primary-200: oklch(from var(--color-primary-base) 90% calc(c * 0.40) h);
396
+ --color-primary-300: oklch(from var(--color-primary-base) 82% calc(c * 0.60) h);
397
+ --color-primary-400: oklch(from var(--color-primary-base) 72% calc(c * 0.85) h);
398
+ --color-primary-500: oklch(from var(--color-primary-base) 60% c h);
399
+ --color-primary-600: oklch(from var(--color-primary-base) 48% calc(c * 0.95) h);
400
+ --color-primary-700: oklch(from var(--color-primary-base) 38% calc(c * 0.85) h);
401
+ --color-primary-800: oklch(from var(--color-primary-base) 28% calc(c * 0.70) h);
402
+ --color-primary-900: oklch(from var(--color-primary-base) 20% calc(c * 0.55) h);
403
+ --color-primary-950: oklch(from var(--color-primary-base) 12% calc(c * 0.40) h);
404
+
316
405
  --color-secondary-base: oklch(50% 0.08 80);
406
+ --color-secondary-50: oklch(from var(--color-secondary-base) 97% calc(c * 0.15) h);
407
+ --color-secondary-100: oklch(from var(--color-secondary-base) 95% calc(c * 0.25) h);
408
+ --color-secondary-200: oklch(from var(--color-secondary-base) 90% calc(c * 0.40) h);
409
+ --color-secondary-300: oklch(from var(--color-secondary-base) 82% calc(c * 0.60) h);
410
+ --color-secondary-400: oklch(from var(--color-secondary-base) 72% calc(c * 0.85) h);
411
+ --color-secondary-500: oklch(from var(--color-secondary-base) 60% c h);
412
+ --color-secondary-600: oklch(from var(--color-secondary-base) 48% calc(c * 0.95) h);
413
+ --color-secondary-700: oklch(from var(--color-secondary-base) 38% calc(c * 0.85) h);
414
+ --color-secondary-800: oklch(from var(--color-secondary-base) 28% calc(c * 0.70) h);
415
+ --color-secondary-900: oklch(from var(--color-secondary-base) 20% calc(c * 0.55) h);
416
+ --color-secondary-950: oklch(from var(--color-secondary-base) 12% calc(c * 0.40) h);
417
+
317
418
  --color-success-base: oklch(50% 0.14 145);
419
+ --color-success-50: oklch(from var(--color-success-base) 97% calc(c * 0.15) h);
420
+ --color-success-100: oklch(from var(--color-success-base) 95% calc(c * 0.25) h);
421
+ --color-success-200: oklch(from var(--color-success-base) 90% calc(c * 0.40) h);
422
+ --color-success-300: oklch(from var(--color-success-base) 82% calc(c * 0.60) h);
423
+ --color-success-400: oklch(from var(--color-success-base) 72% calc(c * 0.85) h);
424
+ --color-success-500: oklch(from var(--color-success-base) 60% c h);
425
+ --color-success-600: oklch(from var(--color-success-base) 48% calc(c * 0.95) h);
426
+ --color-success-700: oklch(from var(--color-success-base) 38% calc(c * 0.85) h);
427
+ --color-success-800: oklch(from var(--color-success-base) 28% calc(c * 0.70) h);
428
+ --color-success-900: oklch(from var(--color-success-base) 20% calc(c * 0.55) h);
429
+ --color-success-950: oklch(from var(--color-success-base) 12% calc(c * 0.40) h);
430
+
318
431
  --color-danger-base: oklch(50% 0.16 25);
432
+ --color-danger-50: oklch(from var(--color-danger-base) 97% calc(c * 0.15) h);
433
+ --color-danger-100: oklch(from var(--color-danger-base) 95% calc(c * 0.25) h);
434
+ --color-danger-200: oklch(from var(--color-danger-base) 90% calc(c * 0.40) h);
435
+ --color-danger-300: oklch(from var(--color-danger-base) 82% calc(c * 0.60) h);
436
+ --color-danger-400: oklch(from var(--color-danger-base) 72% calc(c * 0.85) h);
437
+ --color-danger-500: oklch(from var(--color-danger-base) 60% c h);
438
+ --color-danger-600: oklch(from var(--color-danger-base) 48% calc(c * 0.95) h);
439
+ --color-danger-700: oklch(from var(--color-danger-base) 38% calc(c * 0.85) h);
440
+ --color-danger-800: oklch(from var(--color-danger-base) 28% calc(c * 0.70) h);
441
+ --color-danger-900: oklch(from var(--color-danger-base) 20% calc(c * 0.55) h);
442
+ --color-danger-950: oklch(from var(--color-danger-base) 12% calc(c * 0.40) h);
443
+
319
444
  --color-warning-base: oklch(65% 0.14 70);
445
+ --color-warning-50: oklch(from var(--color-warning-base) 97% calc(c * 0.15) h);
446
+ --color-warning-100: oklch(from var(--color-warning-base) 95% calc(c * 0.25) h);
447
+ --color-warning-200: oklch(from var(--color-warning-base) 90% calc(c * 0.40) h);
448
+ --color-warning-300: oklch(from var(--color-warning-base) 82% calc(c * 0.60) h);
449
+ --color-warning-400: oklch(from var(--color-warning-base) 72% calc(c * 0.85) h);
450
+ --color-warning-500: oklch(from var(--color-warning-base) 60% c h);
451
+ --color-warning-600: oklch(from var(--color-warning-base) 48% calc(c * 0.95) h);
452
+ --color-warning-700: oklch(from var(--color-warning-base) 38% calc(c * 0.85) h);
453
+ --color-warning-800: oklch(from var(--color-warning-base) 28% calc(c * 0.70) h);
454
+ --color-warning-900: oklch(from var(--color-warning-base) 20% calc(c * 0.55) h);
455
+ --color-warning-950: oklch(from var(--color-warning-base) 12% calc(c * 0.40) h);
456
+
320
457
  --color-neutral-base: oklch(45% 0.03 90);
458
+ --color-neutral-50: oklch(from var(--color-neutral-base) 97% calc(c * 0.15) h);
459
+ --color-neutral-100: oklch(from var(--color-neutral-base) 95% calc(c * 0.25) h);
460
+ --color-neutral-200: oklch(from var(--color-neutral-base) 90% calc(c * 0.40) h);
461
+ --color-neutral-300: oklch(from var(--color-neutral-base) 82% calc(c * 0.60) h);
462
+ --color-neutral-400: oklch(from var(--color-neutral-base) 72% calc(c * 0.85) h);
463
+ --color-neutral-500: oklch(from var(--color-neutral-base) 60% c h);
464
+ --color-neutral-600: oklch(from var(--color-neutral-base) 48% calc(c * 0.95) h);
465
+ --color-neutral-700: oklch(from var(--color-neutral-base) 38% calc(c * 0.85) h);
466
+ --color-neutral-800: oklch(from var(--color-neutral-base) 28% calc(c * 0.70) h);
467
+ --color-neutral-900: oklch(from var(--color-neutral-base) 20% calc(c * 0.55) h);
468
+ --color-neutral-950: oklch(from var(--color-neutral-base) 12% calc(c * 0.40) h);
321
469
  }
322
470
 
323
471
  .sunset {
324
472
  --color-primary-base: oklch(60% 0.18 35);
473
+ --color-primary-50: oklch(from var(--color-primary-base) 97% calc(c * 0.15) h);
474
+ --color-primary-100: oklch(from var(--color-primary-base) 95% calc(c * 0.25) h);
475
+ --color-primary-200: oklch(from var(--color-primary-base) 90% calc(c * 0.40) h);
476
+ --color-primary-300: oklch(from var(--color-primary-base) 82% calc(c * 0.60) h);
477
+ --color-primary-400: oklch(from var(--color-primary-base) 72% calc(c * 0.85) h);
478
+ --color-primary-500: oklch(from var(--color-primary-base) 60% c h);
479
+ --color-primary-600: oklch(from var(--color-primary-base) 48% calc(c * 0.95) h);
480
+ --color-primary-700: oklch(from var(--color-primary-base) 38% calc(c * 0.85) h);
481
+ --color-primary-800: oklch(from var(--color-primary-base) 28% calc(c * 0.70) h);
482
+ --color-primary-900: oklch(from var(--color-primary-base) 20% calc(c * 0.55) h);
483
+ --color-primary-950: oklch(from var(--color-primary-base) 12% calc(c * 0.40) h);
484
+
325
485
  --color-secondary-base: oklch(55% 0.15 55);
486
+ --color-secondary-50: oklch(from var(--color-secondary-base) 97% calc(c * 0.15) h);
487
+ --color-secondary-100: oklch(from var(--color-secondary-base) 95% calc(c * 0.25) h);
488
+ --color-secondary-200: oklch(from var(--color-secondary-base) 90% calc(c * 0.40) h);
489
+ --color-secondary-300: oklch(from var(--color-secondary-base) 82% calc(c * 0.60) h);
490
+ --color-secondary-400: oklch(from var(--color-secondary-base) 72% calc(c * 0.85) h);
491
+ --color-secondary-500: oklch(from var(--color-secondary-base) 60% c h);
492
+ --color-secondary-600: oklch(from var(--color-secondary-base) 48% calc(c * 0.95) h);
493
+ --color-secondary-700: oklch(from var(--color-secondary-base) 38% calc(c * 0.85) h);
494
+ --color-secondary-800: oklch(from var(--color-secondary-base) 28% calc(c * 0.70) h);
495
+ --color-secondary-900: oklch(from var(--color-secondary-base) 20% calc(c * 0.55) h);
496
+ --color-secondary-950: oklch(from var(--color-secondary-base) 12% calc(c * 0.40) h);
497
+
326
498
  --color-success-base: oklch(55% 0.14 160);
499
+ --color-success-50: oklch(from var(--color-success-base) 97% calc(c * 0.15) h);
500
+ --color-success-100: oklch(from var(--color-success-base) 95% calc(c * 0.25) h);
501
+ --color-success-200: oklch(from var(--color-success-base) 90% calc(c * 0.40) h);
502
+ --color-success-300: oklch(from var(--color-success-base) 82% calc(c * 0.60) h);
503
+ --color-success-400: oklch(from var(--color-success-base) 72% calc(c * 0.85) h);
504
+ --color-success-500: oklch(from var(--color-success-base) 60% c h);
505
+ --color-success-600: oklch(from var(--color-success-base) 48% calc(c * 0.95) h);
506
+ --color-success-700: oklch(from var(--color-success-base) 38% calc(c * 0.85) h);
507
+ --color-success-800: oklch(from var(--color-success-base) 28% calc(c * 0.70) h);
508
+ --color-success-900: oklch(from var(--color-success-base) 20% calc(c * 0.55) h);
509
+ --color-success-950: oklch(from var(--color-success-base) 12% calc(c * 0.40) h);
510
+
327
511
  --color-danger-base: oklch(55% 0.20 15);
512
+ --color-danger-50: oklch(from var(--color-danger-base) 97% calc(c * 0.15) h);
513
+ --color-danger-100: oklch(from var(--color-danger-base) 95% calc(c * 0.25) h);
514
+ --color-danger-200: oklch(from var(--color-danger-base) 90% calc(c * 0.40) h);
515
+ --color-danger-300: oklch(from var(--color-danger-base) 82% calc(c * 0.60) h);
516
+ --color-danger-400: oklch(from var(--color-danger-base) 72% calc(c * 0.85) h);
517
+ --color-danger-500: oklch(from var(--color-danger-base) 60% c h);
518
+ --color-danger-600: oklch(from var(--color-danger-base) 48% calc(c * 0.95) h);
519
+ --color-danger-700: oklch(from var(--color-danger-base) 38% calc(c * 0.85) h);
520
+ --color-danger-800: oklch(from var(--color-danger-base) 28% calc(c * 0.70) h);
521
+ --color-danger-900: oklch(from var(--color-danger-base) 20% calc(c * 0.55) h);
522
+ --color-danger-950: oklch(from var(--color-danger-base) 12% calc(c * 0.40) h);
523
+
328
524
  --color-warning-base: oklch(70% 0.16 80);
525
+ --color-warning-50: oklch(from var(--color-warning-base) 97% calc(c * 0.15) h);
526
+ --color-warning-100: oklch(from var(--color-warning-base) 95% calc(c * 0.25) h);
527
+ --color-warning-200: oklch(from var(--color-warning-base) 90% calc(c * 0.40) h);
528
+ --color-warning-300: oklch(from var(--color-warning-base) 82% calc(c * 0.60) h);
529
+ --color-warning-400: oklch(from var(--color-warning-base) 72% calc(c * 0.85) h);
530
+ --color-warning-500: oklch(from var(--color-warning-base) 60% c h);
531
+ --color-warning-600: oklch(from var(--color-warning-base) 48% calc(c * 0.95) h);
532
+ --color-warning-700: oklch(from var(--color-warning-base) 38% calc(c * 0.85) h);
533
+ --color-warning-800: oklch(from var(--color-warning-base) 28% calc(c * 0.70) h);
534
+ --color-warning-900: oklch(from var(--color-warning-base) 20% calc(c * 0.55) h);
535
+ --color-warning-950: oklch(from var(--color-warning-base) 12% calc(c * 0.40) h);
536
+
329
537
  --color-neutral-base: oklch(50% 0.03 50);
538
+ --color-neutral-50: oklch(from var(--color-neutral-base) 97% calc(c * 0.15) h);
539
+ --color-neutral-100: oklch(from var(--color-neutral-base) 95% calc(c * 0.25) h);
540
+ --color-neutral-200: oklch(from var(--color-neutral-base) 90% calc(c * 0.40) h);
541
+ --color-neutral-300: oklch(from var(--color-neutral-base) 82% calc(c * 0.60) h);
542
+ --color-neutral-400: oklch(from var(--color-neutral-base) 72% calc(c * 0.85) h);
543
+ --color-neutral-500: oklch(from var(--color-neutral-base) 60% c h);
544
+ --color-neutral-600: oklch(from var(--color-neutral-base) 48% calc(c * 0.95) h);
545
+ --color-neutral-700: oklch(from var(--color-neutral-base) 38% calc(c * 0.85) h);
546
+ --color-neutral-800: oklch(from var(--color-neutral-base) 28% calc(c * 0.70) h);
547
+ --color-neutral-900: oklch(from var(--color-neutral-base) 20% calc(c * 0.55) h);
548
+ --color-neutral-950: oklch(from var(--color-neutral-base) 12% calc(c * 0.40) h);
330
549
  }
331
550
 
332
551
  .rose {
333
552
  --color-primary-base: oklch(60% 0.17 350);
553
+ --color-primary-50: oklch(from var(--color-primary-base) 97% calc(c * 0.15) h);
554
+ --color-primary-100: oklch(from var(--color-primary-base) 95% calc(c * 0.25) h);
555
+ --color-primary-200: oklch(from var(--color-primary-base) 90% calc(c * 0.40) h);
556
+ --color-primary-300: oklch(from var(--color-primary-base) 82% calc(c * 0.60) h);
557
+ --color-primary-400: oklch(from var(--color-primary-base) 72% calc(c * 0.92) h);
558
+ --color-primary-500: oklch(from var(--color-primary-base) 60% c h);
559
+ --color-primary-600: oklch(from var(--color-primary-base) 48% calc(c * 0.98) h);
560
+ --color-primary-700: oklch(from var(--color-primary-base) 38% calc(c * 0.85) h);
561
+ --color-primary-800: oklch(from var(--color-primary-base) 28% calc(c * 0.70) h);
562
+ --color-primary-900: oklch(from var(--color-primary-base) 20% calc(c * 0.55) h);
563
+ --color-primary-950: oklch(from var(--color-primary-base) 12% calc(c * 0.40) h);
564
+
334
565
  --color-secondary-base: oklch(55% 0.14 320);
566
+ --color-secondary-50: oklch(from var(--color-secondary-base) 97% calc(c * 0.15) h);
567
+ --color-secondary-100: oklch(from var(--color-secondary-base) 95% calc(c * 0.25) h);
568
+ --color-secondary-200: oklch(from var(--color-secondary-base) 90% calc(c * 0.40) h);
569
+ --color-secondary-300: oklch(from var(--color-secondary-base) 82% calc(c * 0.60) h);
570
+ --color-secondary-400: oklch(from var(--color-secondary-base) 72% calc(c * 0.92) h);
571
+ --color-secondary-500: oklch(from var(--color-secondary-base) 60% c h);
572
+ --color-secondary-600: oklch(from var(--color-secondary-base) 48% calc(c * 0.98) h);
573
+ --color-secondary-700: oklch(from var(--color-secondary-base) 38% calc(c * 0.85) h);
574
+ --color-secondary-800: oklch(from var(--color-secondary-base) 28% calc(c * 0.70) h);
575
+ --color-secondary-900: oklch(from var(--color-secondary-base) 20% calc(c * 0.55) h);
576
+ --color-secondary-950: oklch(from var(--color-secondary-base) 12% calc(c * 0.40) h);
577
+
335
578
  --color-success-base: oklch(55% 0.15 160);
579
+ --color-success-50: oklch(from var(--color-success-base) 97% calc(c * 0.15) h);
580
+ --color-success-100: oklch(from var(--color-success-base) 95% calc(c * 0.25) h);
581
+ --color-success-200: oklch(from var(--color-success-base) 90% calc(c * 0.40) h);
582
+ --color-success-300: oklch(from var(--color-success-base) 82% calc(c * 0.60) h);
583
+ --color-success-400: oklch(from var(--color-success-base) 72% calc(c * 0.92) h);
584
+ --color-success-500: oklch(from var(--color-success-base) 60% c h);
585
+ --color-success-600: oklch(from var(--color-success-base) 48% calc(c * 0.98) h);
586
+ --color-success-700: oklch(from var(--color-success-base) 38% calc(c * 0.85) h);
587
+ --color-success-800: oklch(from var(--color-success-base) 28% calc(c * 0.70) h);
588
+ --color-success-900: oklch(from var(--color-success-base) 20% calc(c * 0.55) h);
589
+ --color-success-950: oklch(from var(--color-success-base) 12% calc(c * 0.40) h);
590
+
336
591
  --color-danger-base: oklch(55% 0.18 20);
592
+ --color-danger-50: oklch(from var(--color-danger-base) 97% calc(c * 0.15) h);
593
+ --color-danger-100: oklch(from var(--color-danger-base) 95% calc(c * 0.25) h);
594
+ --color-danger-200: oklch(from var(--color-danger-base) 90% calc(c * 0.40) h);
595
+ --color-danger-300: oklch(from var(--color-danger-base) 82% calc(c * 0.60) h);
596
+ --color-danger-400: oklch(from var(--color-danger-base) 72% calc(c * 0.92) h);
597
+ --color-danger-500: oklch(from var(--color-danger-base) 60% c h);
598
+ --color-danger-600: oklch(from var(--color-danger-base) 48% calc(c * 0.98) h);
599
+ --color-danger-700: oklch(from var(--color-danger-base) 38% calc(c * 0.85) h);
600
+ --color-danger-800: oklch(from var(--color-danger-base) 28% calc(c * 0.70) h);
601
+ --color-danger-900: oklch(from var(--color-danger-base) 20% calc(c * 0.55) h);
602
+ --color-danger-950: oklch(from var(--color-danger-base) 12% calc(c * 0.40) h);
603
+
337
604
  --color-warning-base: oklch(68% 0.15 65);
605
+ --color-warning-50: oklch(from var(--color-warning-base) 97% calc(c * 0.15) h);
606
+ --color-warning-100: oklch(from var(--color-warning-base) 95% calc(c * 0.25) h);
607
+ --color-warning-200: oklch(from var(--color-warning-base) 90% calc(c * 0.40) h);
608
+ --color-warning-300: oklch(from var(--color-warning-base) 82% calc(c * 0.60) h);
609
+ --color-warning-400: oklch(from var(--color-warning-base) 72% calc(c * 0.92) h);
610
+ --color-warning-500: oklch(from var(--color-warning-base) 60% c h);
611
+ --color-warning-600: oklch(from var(--color-warning-base) 48% calc(c * 0.98) h);
612
+ --color-warning-700: oklch(from var(--color-warning-base) 38% calc(c * 0.85) h);
613
+ --color-warning-800: oklch(from var(--color-warning-base) 28% calc(c * 0.70) h);
614
+ --color-warning-900: oklch(from var(--color-warning-base) 20% calc(c * 0.55) h);
615
+ --color-warning-950: oklch(from var(--color-warning-base) 12% calc(c * 0.40) h);
616
+
338
617
  --color-neutral-base: oklch(50% 0.02 350);
618
+ --color-neutral-50: oklch(from var(--color-neutral-base) 97% calc(c * 0.15) h);
619
+ --color-neutral-100: oklch(from var(--color-neutral-base) 95% calc(c * 0.25) h);
620
+ --color-neutral-200: oklch(from var(--color-neutral-base) 90% calc(c * 0.40) h);
621
+ --color-neutral-300: oklch(from var(--color-neutral-base) 82% calc(c * 0.60) h);
622
+ --color-neutral-400: oklch(from var(--color-neutral-base) 72% calc(c * 0.92) h);
623
+ --color-neutral-500: oklch(from var(--color-neutral-base) 60% c h);
624
+ --color-neutral-600: oklch(from var(--color-neutral-base) 48% calc(c * 0.98) h);
625
+ --color-neutral-700: oklch(from var(--color-neutral-base) 38% calc(c * 0.85) h);
626
+ --color-neutral-800: oklch(from var(--color-neutral-base) 28% calc(c * 0.70) h);
627
+ --color-neutral-900: oklch(from var(--color-neutral-base) 20% calc(c * 0.55) h);
628
+ --color-neutral-950: oklch(from var(--color-neutral-base) 12% calc(c * 0.40) h);
339
629
  }
340
630
 
341
631
  .midnight {
342
632
  --color-primary-base: oklch(50% 0.16 270);
633
+ --color-primary-50: oklch(from var(--color-primary-base) 97% calc(c * 0.15) h);
634
+ --color-primary-100: oklch(from var(--color-primary-base) 95% calc(c * 0.25) h);
635
+ --color-primary-200: oklch(from var(--color-primary-base) 90% calc(c * 0.40) h);
636
+ --color-primary-300: oklch(from var(--color-primary-base) 82% calc(c * 0.60) h);
637
+ --color-primary-400: oklch(from var(--color-primary-base) 72% calc(c * 0.92) h);
638
+ --color-primary-500: oklch(from var(--color-primary-base) 60% c h);
639
+ --color-primary-600: oklch(from var(--color-primary-base) 48% calc(c * 0.98) h);
640
+ --color-primary-700: oklch(from var(--color-primary-base) 38% calc(c * 0.85) h);
641
+ --color-primary-800: oklch(from var(--color-primary-base) 28% calc(c * 0.70) h);
642
+ --color-primary-900: oklch(from var(--color-primary-base) 20% calc(c * 0.55) h);
643
+ --color-primary-950: oklch(from var(--color-primary-base) 12% calc(c * 0.40) h);
644
+
343
645
  --color-secondary-base: oklch(55% 0.14 290);
646
+ --color-secondary-50: oklch(from var(--color-secondary-base) 97% calc(c * 0.15) h);
647
+ --color-secondary-100: oklch(from var(--color-secondary-base) 95% calc(c * 0.25) h);
648
+ --color-secondary-200: oklch(from var(--color-secondary-base) 90% calc(c * 0.40) h);
649
+ --color-secondary-300: oklch(from var(--color-secondary-base) 82% calc(c * 0.60) h);
650
+ --color-secondary-400: oklch(from var(--color-secondary-base) 72% calc(c * 0.92) h);
651
+ --color-secondary-500: oklch(from var(--color-secondary-base) 60% c h);
652
+ --color-secondary-600: oklch(from var(--color-secondary-base) 48% calc(c * 0.98) h);
653
+ --color-secondary-700: oklch(from var(--color-secondary-base) 38% calc(c * 0.85) h);
654
+ --color-secondary-800: oklch(from var(--color-secondary-base) 28% calc(c * 0.70) h);
655
+ --color-secondary-900: oklch(from var(--color-secondary-base) 20% calc(c * 0.55) h);
656
+ --color-secondary-950: oklch(from var(--color-secondary-base) 12% calc(c * 0.40) h);
657
+
344
658
  --color-success-base: oklch(55% 0.15 180);
659
+ --color-success-50: oklch(from var(--color-success-base) 97% calc(c * 0.15) h);
660
+ --color-success-100: oklch(from var(--color-success-base) 95% calc(c * 0.25) h);
661
+ --color-success-200: oklch(from var(--color-success-base) 90% calc(c * 0.40) h);
662
+ --color-success-300: oklch(from var(--color-success-base) 82% calc(c * 0.60) h);
663
+ --color-success-400: oklch(from var(--color-success-base) 72% calc(c * 0.92) h);
664
+ --color-success-500: oklch(from var(--color-success-base) 60% c h);
665
+ --color-success-600: oklch(from var(--color-success-base) 48% calc(c * 0.98) h);
666
+ --color-success-700: oklch(from var(--color-success-base) 38% calc(c * 0.85) h);
667
+ --color-success-800: oklch(from var(--color-success-base) 28% calc(c * 0.70) h);
668
+ --color-success-900: oklch(from var(--color-success-base) 20% calc(c * 0.55) h);
669
+ --color-success-950: oklch(from var(--color-success-base) 12% calc(c * 0.40) h);
670
+
345
671
  --color-danger-base: oklch(55% 0.18 10);
672
+ --color-danger-50: oklch(from var(--color-danger-base) 97% calc(c * 0.15) h);
673
+ --color-danger-100: oklch(from var(--color-danger-base) 95% calc(c * 0.25) h);
674
+ --color-danger-200: oklch(from var(--color-danger-base) 90% calc(c * 0.40) h);
675
+ --color-danger-300: oklch(from var(--color-danger-base) 82% calc(c * 0.60) h);
676
+ --color-danger-400: oklch(from var(--color-danger-base) 72% calc(c * 0.92) h);
677
+ --color-danger-500: oklch(from var(--color-danger-base) 60% c h);
678
+ --color-danger-600: oklch(from var(--color-danger-base) 48% calc(c * 0.98) h);
679
+ --color-danger-700: oklch(from var(--color-danger-base) 38% calc(c * 0.85) h);
680
+ --color-danger-800: oklch(from var(--color-danger-base) 28% calc(c * 0.70) h);
681
+ --color-danger-900: oklch(from var(--color-danger-base) 20% calc(c * 0.55) h);
682
+ --color-danger-950: oklch(from var(--color-danger-base) 12% calc(c * 0.40) h);
683
+
346
684
  --color-warning-base: oklch(68% 0.14 80);
685
+ --color-warning-50: oklch(from var(--color-warning-base) 97% calc(c * 0.15) h);
686
+ --color-warning-100: oklch(from var(--color-warning-base) 95% calc(c * 0.25) h);
687
+ --color-warning-200: oklch(from var(--color-warning-base) 90% calc(c * 0.40) h);
688
+ --color-warning-300: oklch(from var(--color-warning-base) 82% calc(c * 0.60) h);
689
+ --color-warning-400: oklch(from var(--color-warning-base) 72% calc(c * 0.92) h);
690
+ --color-warning-500: oklch(from var(--color-warning-base) 60% c h);
691
+ --color-warning-600: oklch(from var(--color-warning-base) 48% calc(c * 0.98) h);
692
+ --color-warning-700: oklch(from var(--color-warning-base) 38% calc(c * 0.85) h);
693
+ --color-warning-800: oklch(from var(--color-warning-base) 28% calc(c * 0.70) h);
694
+ --color-warning-900: oklch(from var(--color-warning-base) 20% calc(c * 0.55) h);
695
+ --color-warning-950: oklch(from var(--color-warning-base) 12% calc(c * 0.40) h);
696
+
347
697
  --color-neutral-base: oklch(45% 0.03 270);
698
+ --color-neutral-50: oklch(from var(--color-neutral-base) 97% calc(c * 0.15) h);
699
+ --color-neutral-100: oklch(from var(--color-neutral-base) 95% calc(c * 0.25) h);
700
+ --color-neutral-200: oklch(from var(--color-neutral-base) 90% calc(c * 0.40) h);
701
+ --color-neutral-300: oklch(from var(--color-neutral-base) 82% calc(c * 0.60) h);
702
+ --color-neutral-400: oklch(from var(--color-neutral-base) 72% calc(c * 0.92) h);
703
+ --color-neutral-500: oklch(from var(--color-neutral-base) 60% c h);
704
+ --color-neutral-600: oklch(from var(--color-neutral-base) 48% calc(c * 0.98) h);
705
+ --color-neutral-700: oklch(from var(--color-neutral-base) 38% calc(c * 0.85) h);
706
+ --color-neutral-800: oklch(from var(--color-neutral-base) 28% calc(c * 0.70) h);
707
+ --color-neutral-900: oklch(from var(--color-neutral-base) 20% calc(c * 0.55) h);
708
+ --color-neutral-950: oklch(from var(--color-neutral-base) 12% calc(c * 0.40) h);
348
709
  }
349
710
 
350
711
  @utility h-control-xs {
@@ -406,6 +767,35 @@
406
767
  transition: none;
407
768
  }
408
769
 
409
- *:focus {
410
- outline: none;
770
+ @media (prefers-reduced-motion: reduce) {
771
+ :root {
772
+ --duration-instant: 0ms;
773
+ --duration-fast: 0ms;
774
+ --duration-normal: 0ms;
775
+ --duration-slow: 0ms;
776
+ --duration-slower: 0ms;
777
+ }
778
+
779
+ [data-spire-accordion-item]::details-content {
780
+ transition: none;
781
+ }
782
+ }
783
+
784
+ @media (forced-colors: active) {
785
+ :root {
786
+ --color-primary: LinkText;
787
+ --color-primary-hover: LinkText;
788
+ --color-primary-foreground: LinkText;
789
+ --color-border: CanvasText;
790
+ --color-border-hover: CanvasText;
791
+ --color-foreground: CanvasText;
792
+ --color-foreground-muted: CanvasText;
793
+ --color-surface: Canvas;
794
+ --color-canvas: Canvas;
795
+ --color-elevated: Canvas;
796
+ --color-on-emphasis: Canvas;
797
+ --color-input: Canvas;
798
+ --color-input-border: CanvasText;
799
+ --color-ring: Highlight;
800
+ }
411
801
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sabrenski/spire-ui-vue",
3
- "version": "0.3.2",
3
+ "version": "0.3.3",
4
4
  "description": "A modern, themeable Vue 3 component library with 57+ components, TypeScript support, and Tailwind CSS v4",
5
5
  "type": "module",
6
6
  "author": "Spire UI Contributors",