ui-lab-theme-onyx 0.3.3 → 0.3.41

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 +35 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ui-lab-theme-onyx",
3
- "version": "0.3.3",
3
+ "version": "0.3.41",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "main": "./styles.css",
package/styles.css CHANGED
@@ -9,10 +9,14 @@
9
9
  --hover-border: color-mix(in srgb, var(--background-600) 75%, var(--background-950));
10
10
  }
11
11
 
12
- .button.icon { @apply aspect-square px-2 py-1; font-size: var(--text-sm); }
13
- .button.sm { @apply px-2 py-1.5; font-size: var(--text-sm); }
14
- .button.md { @apply px-3 py-2; font-size: var(--text-sm); }
15
- .button.lg { @apply px-7 py-1.5; font-size: var(--text-sm); }
12
+ .button {
13
+ font-size: var(--text-sm);
14
+ }
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
20
 
17
21
  .button.primary {
18
22
  --background: var(--foreground-200);
@@ -48,8 +52,9 @@
48
52
 
49
53
  .button.ghost {
50
54
  --background: transparent;
55
+ --foreground: var(--foreground-300);
51
56
  --background-border: transparent;
52
- --hover-background: transparent;
57
+ --hover-background: var(--background-700);
53
58
  --hover-border: transparent;
54
59
  }
55
60
 
@@ -111,9 +116,11 @@
111
116
 
112
117
  .group {
113
118
  --background: var(--background-950);
119
+ /* --foreground: red; */
114
120
  --border: var(--background-700);
115
121
  --focus-ring-color: var(--accent-500);
116
122
  --active-background: var(--background-800);
123
+ --active-foreground: var(--foreground-100);
117
124
  }
118
125
 
119
126
  .group.ghost {
@@ -121,7 +128,6 @@
121
128
  }
122
129
 
123
130
  /* Command Styles */
124
-
125
131
  .command {
126
132
  --background-default: var(--background-900);
127
133
  --background-input: var(--background-900);
@@ -194,30 +200,34 @@
194
200
  /* Checkbox Styles */
195
201
 
196
202
  .checkbox {
197
- --background: var(--background-700);
198
- --border: var(--background-600);
203
+ --background: var(--background-900);
204
+ --border: var(--background-700);
199
205
  --ring-color: var(--accent-500);
200
- --hover-background: color-mix(in srgb, var(--background-500) 60%, transparent);
201
- --hover-border: transparent;
206
+ --hover-background: color-mix(in srgb, var(--background-500) 10%, transparent);
207
+ --hover-border: var(--background-600);
202
208
  }
203
209
 
204
210
  .checkbox[data-selected="true"] {
205
- --background: var(--background-600);
206
- --border: transparent;
211
+ --background: var(--accent-500);
212
+ --hover-background: var(--accent-600);
213
+ --border: var(--accent-500);
214
+ --hover-border: var(--accent-400);
207
215
  }
208
216
 
209
217
  .checkbox[data-indeterminate="true"] {
210
- --background: var(--background-600);
211
- --border: transparent;
218
+ --background: var(--accent-600);
219
+ --hover-background: var(--accent-500);
220
+ --border: var(--accent-600);
221
+ --hover-border: var(--accent-400);
212
222
  }
213
223
 
214
224
  .checkbox-root.checkbox-checkmark,
215
225
  .checkbox-root.checkbox-indeterminate {
216
- --checkmark-color: var(--foreground-50);
226
+ --checkmark-color: white
217
227
  }
218
228
 
219
229
  .checkbox-root.helper-text-error {
220
- --error-color: var(--danger-600);
230
+ --error-color: white;
221
231
  }
222
232
 
223
233
  /* Color Styles */
@@ -265,6 +275,8 @@
265
275
  --ring-color: var(--accent-500);
266
276
  --disabled-background: var(--background-900);
267
277
  --disabled-foreground: var(--foreground-400);
278
+ font-size: var(--text-xs);
279
+ font-weight: var(--font-weight-medium)
268
280
  }
269
281
 
270
282
  .input[data-error] {
@@ -357,6 +369,7 @@
357
369
  --focus-ring-background: var(--background-950);
358
370
  --hover-background: color-mix(in srgb, var(--background-700) 50%, transparent);
359
371
  --pressed-background: color-mix(in srgb, var(--background-600) 50%, transparent);
372
+ --font-size: var(--text-xs)
360
373
  }
361
374
 
362
375
  .select.ghost {
@@ -516,6 +529,8 @@
516
529
  --dismiss-color: var(--foreground-400);
517
530
  --dismiss-hover-background: color-mix(in srgb, var(--background-700) 80%, var(--background-900));
518
531
  --dismiss-pressed-background: var(--background-700);
532
+ font-weight: var(--font-weight-semibold);
533
+ font-size: var(--text-xs)
519
534
  }
520
535
 
521
536
  .badge.default {
@@ -570,6 +585,8 @@
570
585
  .tooltip.content {
571
586
  --tooltip-fill: var(--background-900);
572
587
  --tooltip-border-color: var(--background-700);
588
+ font-size: var(--text-xs);
589
+ font-weight: var(--font-weight-medium)
573
590
  }
574
591
 
575
592
  .tooltip.frame {
@@ -654,6 +671,7 @@
654
671
  .menu.sub-content {
655
672
  --content-background: var(--background-900);
656
673
  --content-border: var(--background-700);
674
+ font-size: var(--text-xs)
657
675
  }
658
676
 
659
677
  .menu.trigger {
@@ -706,6 +724,7 @@
706
724
  --trigger-selected-background: color-mix(in srgb, var(--background-700) 50%, transparent);
707
725
  --trigger-underline-color: var(--accent-500);
708
726
  --trigger-focus-background: var(--background-800);
727
+ font-size: var(--text-xs);
709
728
  }
710
729
 
711
730
  .tabs.content {