ui-lab-theme-onyx 0.3.4 → 0.3.411

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 (2) hide show
  1. package/package.json +1 -1
  2. package/styles.css +52 -41
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ui-lab-theme-onyx",
3
- "version": "0.3.4",
3
+ "version": "0.3.411",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "main": "./styles.css",
package/styles.css CHANGED
@@ -13,10 +13,21 @@
13
13
  font-size: var(--text-sm);
14
14
  }
15
15
 
16
- .button.icon { @apply aspect-square }
17
- .button.sm { @apply px-2 py-1.5 text-xs font-semibold }
18
- .button.md { @apply px-3 py-1.5 }
19
- .button.lg { @apply px-5 py-2.5 }
16
+ .button.icon {
17
+ @apply aspect-square
18
+ }
19
+
20
+ .button.sm {
21
+ @apply px-2 py-1.5 text-xs font-semibold
22
+ }
23
+
24
+ .button.md {
25
+ @apply px-3 py-1.5
26
+ }
27
+
28
+ .button.lg {
29
+ @apply px-5 py-2.5
30
+ }
20
31
 
21
32
  .button.primary {
22
33
  --background: var(--foreground-200);
@@ -381,30 +392,26 @@
381
392
 
382
393
  .select.content,
383
394
  .select.sub-content {
384
- --content-background: var(--background-900);
385
- --content-border: var(--background-700);
395
+ --background: var(--background-900);
396
+ --border-color: var(--background-700);
386
397
  }
387
398
 
388
- .select.item {
389
- --item-foreground: var(--foreground-300);
390
- --item-description-color: var(--foreground-400);
391
- --item-icon-color: var(--foreground-300);
392
- --item-indicator-color: var(--accent-300);
393
- --item-background-hover: color-mix(in srgb, var(--background-700) 50%, transparent);
399
+ .select.item,
400
+ .select.sub-trigger {
401
+ --foreground: var(--foreground-300);
402
+ --muted-foreground: var(--foreground-400);
403
+ --icon-color: var(--foreground-300);
404
+ --indicator-color: var(--accent-300);
405
+ --highlight-background: color-mix(in srgb, var(--background-700) 50%, transparent);
394
406
  }
395
407
 
396
408
  .select.placeholder {
397
- --placeholder-color: var(--foreground-400);
409
+ --muted-foreground: var(--foreground-400);
398
410
  }
399
411
 
400
412
  .select.search-trigger {
401
413
  --search-divider-color: color-mix(in srgb, var(--border-color) 75%, transparent);
402
- --search-focus-ring: var(--accent-500);
403
- }
404
-
405
- .select.sub-trigger {
406
- --subtrigger-foreground: var(--foreground-300);
407
- --subtrigger-background-hover: color-mix(in srgb, var(--background-700) 30%, transparent);
414
+ --focus-ring-color: var(--accent-500);
408
415
  }
409
416
 
410
417
  /* Slider Styles */
@@ -542,7 +549,8 @@
542
549
  .badge.secondary {
543
550
  --background: color-mix(in srgb, var(--background-600) 40%, transparent);
544
551
  --foreground: var(--foreground-300);
545
- --background-border: color-mix(in srgb, var(--background-600) 40%, transparent);;
552
+ --background-border: color-mix(in srgb, var(--background-600) 40%, transparent);
553
+ ;
546
554
  }
547
555
 
548
556
  .badge.success {
@@ -604,10 +612,21 @@
604
612
  --foreground: var(--foreground-400);
605
613
  }
606
614
 
607
- .progress.fill.default { --fill-background: var(--accent-500); }
608
- .progress.fill.success { --fill-background: var(--success-500); }
609
- .progress.fill.warning { --fill-background: var(--warning-500); }
610
- .progress.fill.error { --fill-background: var(--danger-500); }
615
+ .progress.fill.default {
616
+ --fill-background: var(--accent-500);
617
+ }
618
+
619
+ .progress.fill.success {
620
+ --fill-background: var(--success-500);
621
+ }
622
+
623
+ .progress.fill.warning {
624
+ --fill-background: var(--warning-500);
625
+ }
626
+
627
+ .progress.fill.error {
628
+ --fill-background: var(--danger-500);
629
+ }
611
630
 
612
631
  /* Toast Styles */
613
632
 
@@ -669,43 +688,36 @@
669
688
 
670
689
  .menu.content,
671
690
  .menu.sub-content {
672
- --content-background: var(--background-900);
673
- --content-border: var(--background-700);
691
+ --background: var(--background-900);
692
+ --border-color: var(--background-700);
674
693
  font-size: var(--text-xs)
675
694
  }
676
695
 
677
696
  .menu.trigger {
678
- --trigger-active-background: var(--background-700);
697
+ --active-background: var(--background-700);
679
698
  }
680
699
 
681
700
  .menu.item,
682
701
  .menu.checkbox-item,
683
702
  .menu.radio-item,
684
703
  .menu.sub-trigger {
685
- --item-foreground: var(--foreground-300);
686
- --item-highlighted-background: color-mix(in srgb, var(--background-700) 50%, transparent);
704
+ --foreground: var(--foreground-300);
705
+ --highlight-background: color-mix(in srgb, var(--background-700) 50%, transparent);
687
706
  }
688
707
 
689
708
  .menu.item-indicator {
690
- --item-indicator-color: var(--accent-300);
691
- }
692
-
693
- .menu.label {
694
- --label-foreground: var(--foreground-400);
695
- }
696
-
697
- .menu.separator {
698
- --separator-background: var(--background-700);
709
+ --indicator-color: var(--accent-300);
699
710
  }
700
711
 
712
+ .menu.label,
701
713
  .menu.shortcut {
702
- --shortcut-foreground: var(--foreground-400);
714
+ --muted-foreground: var(--foreground-400);
703
715
  }
704
716
 
705
717
  /* Tabs Styles */
706
718
 
707
719
  .tabs.indicator {
708
- --indicator-background: color-mix(in srgb, var(--background-700) 50%, transparent);;
720
+ --indicator-background: color-mix(in srgb, var(--background-700) 50%, transparent);
709
721
  }
710
722
 
711
723
  .tabs.indicator.underline {
@@ -765,4 +777,3 @@
765
777
  --thumb-hover-background: var(--background-600);
766
778
  --thumb-dragging-background: color-mix(in srgb, var(--background-500) 60%, var(--background-950));
767
779
  }
768
-