ui-lab-theme-onyx 0.3.42 → 0.3.44

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 -24
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ui-lab-theme-onyx",
3
- "version": "0.3.42",
3
+ "version": "0.3.44",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "main": "./styles.css",
package/styles.css CHANGED
@@ -1,6 +1,15 @@
1
1
  /* Onyx Theme - Button Styles */
2
2
 
3
3
  @layer components {
4
+ [data-ring="true"] {
5
+ --ring: #0f74c5;
6
+ --ring-width: 2px;
7
+ --ring-border: var(--ring);
8
+ --ring-border-visible: var(--ring-border);
9
+ --ring-shadow: 0 0 0 var(--ring-width) var(--ring);
10
+ --ring-z: 10;
11
+ }
12
+
4
13
  .button {
5
14
  --background: var(--background-800);
6
15
  --foreground: var(--foreground-200);
@@ -71,7 +80,8 @@
71
80
 
72
81
  /* Gallery Styles */
73
82
 
74
- .gallery.item {
83
+ .gallery.item,
84
+ [data-focus-surface="true"] {
75
85
  --background: var(--background-950);
76
86
  --background-border: var(--background-700);
77
87
  --background-hover-border: var(--background-600);
@@ -137,7 +147,6 @@
137
147
  .group {
138
148
  --background: var(--background-950);
139
149
  --background-border: var(--background-700);
140
- --focus-visible: var(--accent-500);
141
150
  }
142
151
 
143
152
  .group.button {
@@ -224,7 +233,7 @@
224
233
  --background-border: var(--background-700);
225
234
  --background-hover: color-mix(in srgb, var(--background-500) 10%, transparent);
226
235
  --background-hover-border: var(--background-600);
227
- --focus-visible: var(--accent-500);
236
+ --ring: var(--accent-500);
228
237
  }
229
238
 
230
239
  .checkbox[data-selected="true"] {
@@ -307,8 +316,9 @@
307
316
  --foreground: var(--foreground-50);
308
317
  --placeholder: var(--foreground-400);
309
318
  --background-border: var(--background-700);
310
- --background-focused-border: var(--accent-500);
311
- --focus-visible: var(--accent-500);
319
+ --ring: var(--accent-500);
320
+ --ring-border: var(--ring);
321
+ --ring-border-visible: var(--ring-border);
312
322
  --disabled-background: var(--background-900);
313
323
  --disabled-foreground: var(--foreground-400);
314
324
  font-size: var(--text-xs);
@@ -316,8 +326,9 @@
316
326
  }
317
327
 
318
328
  .input[data-error] {
319
- --background-focused-border: var(--danger-600);
320
- --focus-visible: var(--danger-600);
329
+ --ring: var(--danger-600);
330
+ --ring-border: var(--ring);
331
+ --ring-border-visible: var(--ring-border);
321
332
  }
322
333
 
323
334
  .input[data-variant="ghost"] {
@@ -440,19 +451,19 @@
440
451
 
441
452
  /* Slider Styles */
442
453
 
443
- .slider.track {
444
- --track-background: var(--background-800);
454
+ .slider .track {
455
+ --background: var(--background-800);
445
456
  }
446
457
 
447
- .slider.range {
448
- --range-background: color-mix(in srgb, var(--accent-500) 60%, transparent);
449
- --range-disabled-background: var(--background-600);
458
+ .slider .range {
459
+ --background: color-mix(in srgb, var(--accent-500) 60%, transparent);
460
+ --background-disabled: var(--background-600);
450
461
  }
451
462
 
452
- .slider.thumb {
453
- --thumb-background: var(--accent-500);
454
- --thumb-focused-background: var(--accent-400);
455
- --thumb-disabled-background: var(--background-500);
463
+ .slider .thumb {
464
+ --background: var(--accent-500);
465
+ --background-focused: var(--accent-400);
466
+ --background-disabled: var(--background-500);
456
467
  --focus-visible: color-mix(in srgb, var(--accent-500) 40%, transparent);
457
468
  }
458
469
 
@@ -479,30 +490,26 @@
479
490
  --foreground: var(--foreground-50);
480
491
  --placeholder: var(--foreground-400);
481
492
  --background-border: var(--background-700);
482
- --background-focused-border: var(--accent-500);
483
- --focus-visible: var(--accent-500);
493
+ --background-hover: var(--background-900);
484
494
  --background-disabled: var(--background-900);
485
495
  --foreground-disabled: var(--foreground-400);
496
+ --disabled-opacity: 0.6;
486
497
  }
487
498
 
488
499
  .textarea[data-error] {
489
500
  --background-error-border: var(--danger-600);
490
- --background-error-focused-border: var(--danger-600);
491
- --focus-visible: var(--danger-600);
492
501
  }
493
502
 
494
503
  .textarea.scroll-wrapper {
495
504
  --background: var(--background-950);
496
505
  --background-border: var(--background-700);
497
- --background-focused-border: var(--accent-500);
498
- --focus-visible: var(--accent-500);
506
+ --background-hover: var(--background-900);
499
507
  --background-disabled: var(--background-900);
508
+ --disabled-opacity: 0.6;
500
509
  }
501
510
 
502
511
  .textarea.scroll-wrapper[data-error] {
503
512
  --background-error-border: var(--danger-600);
504
- --background-error-focused-border: var(--danger-600);
505
- --focus-visible: var(--danger-600);
506
513
  }
507
514
 
508
515
  .textarea.resize-handle {
@@ -804,6 +811,27 @@
804
811
  --foreground-muted: var(--foreground-400);
805
812
  }
806
813
 
814
+ /* Path Styles */
815
+
816
+ .path.link {
817
+ --foreground: var(--foreground-300);
818
+ --foreground-hover: var(--accent-300);
819
+ --foreground-selected: var(--foreground-400);
820
+ --foreground-disabled: var(--foreground-400);
821
+ --background-hover: color-mix(in srgb, var(--background-700) 50%, transparent);
822
+ --background-pressed: color-mix(in srgb, var(--background-700) 70%, transparent);
823
+ --focus-visible: var(--accent-500);
824
+ --disabled-opacity: 0.6;
825
+ }
826
+
827
+ .path.separator {
828
+ --separator-foreground: var(--background-700);
829
+ }
830
+
831
+ .path.item {
832
+ --separator-foreground: var(--background-700);
833
+ }
834
+
807
835
  /* Tabs Styles */
808
836
 
809
837
  .tabs.indicator {