@loworbitstudio/visor-core 0.9.0 → 0.11.0

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 (9) hide show
  1. package/dist/primitives.css +1 -0
  2. package/dist/semantic.css +6 -0
  3. package/dist/themes/blackout.css +27 -19
  4. package/dist/themes/dark.css +8 -8
  5. package/dist/themes/modern-minimal.css +28 -20
  6. package/dist/themes/neutral.css +20 -12
  7. package/dist/themes/space.css +20 -12
  8. package/dist/tokens.css +15 -8
  9. package/package.json +2 -2
package/dist/primitives.css CHANGED
@@ -206,6 +206,7 @@
206
206
  --motion-duration-300: 300ms;
207
207
  --motion-duration-500: 500ms;
208
208
  --motion-duration-800: 800ms;
209
+ --motion-duration-1500: 1500ms;
209
210
  }
210
211
 
211
212
 
package/dist/semantic.css CHANGED
@@ -176,4 +176,10 @@
176
176
  --sidebar-ring: var(--color-primary-500);
177
177
  --sidebar-text-muted: var(--color-neutral-500);
178
178
  }
179
+
180
+
181
+ /* --- Semantic: Field --- */
182
+ :root {
183
+ --field-menu-bg: var(--surface-popover);
184
+ }
179
185
  }
package/dist/themes/blackout.css CHANGED
@@ -37,7 +37,7 @@
37
37
  /* --- Intent aliases (light) --- */
38
38
  html:not(.dark) .blackout-theme {
39
39
  --primary: #666666;
40
- --primary-text: #ffffff;
40
+ --primary-text: var(--interactive-primary-text);
41
41
  --accent: #666666;
42
42
  --success: #22c55e;
43
43
  --warning: #f59e0b;
@@ -56,7 +56,7 @@ html:not(.dark) .blackout-theme {
56
56
  /* --- Intent aliases (dark) — manual toggle --- */
57
57
  .dark .blackout-theme {
58
58
  --primary: #666666;
59
- --primary-text: #ffffff;
59
+ --primary-text: var(--interactive-primary-text);
60
60
  --accent: #666666;
61
61
  --success: #22c55e;
62
62
  --warning: #f59e0b;
@@ -74,9 +74,9 @@ html:not(.dark) .blackout-theme {
74
74
 
75
75
  /* --- Intent aliases (dark) — prefers-color-scheme --- */
76
76
  @media (prefers-color-scheme: dark) {
77
- .blackout-theme:not(.light) {
77
+ .blackout-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
78
78
  --primary: #666666;
79
- --primary-text: #ffffff;
79
+ --primary-text: var(--interactive-primary-text);
80
80
  --accent: #666666;
81
81
  --success: #22c55e;
82
82
  --warning: #f59e0b;
@@ -88,7 +88,7 @@ html:not(.dark) .blackout-theme {
88
88
 
89
89
  /* --- Hairline aliases (dark) — prefers-color-scheme --- */
90
90
  @media (prefers-color-scheme: dark) {
91
- .blackout-theme:not(.light) {
91
+ .blackout-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
92
92
  --hairline: rgba(255, 255, 255, 0.06);
93
93
  --hairline-strong: rgba(255, 255, 255, 0.10);
94
94
  }
@@ -278,7 +278,14 @@ html:not(.dark) .blackout-theme {
278
278
  --line-height-normal: 1.5;
279
279
  --line-height-relaxed: 1.625;
280
280
  --line-height-loose: 2;
281
+ --letter-spacing-xl: 0.16em;
282
+ --letter-spacing-lg: 0.1em;
283
+ --letter-spacing-md: 0.05em;
284
+ --letter-spacing-sm: 0.025em;
285
+ --letter-spacing-xs: 0.01em;
286
+ --letter-spacing-tight: -0.01em;
281
287
  --letter-spacing-normal: 0.05em;
288
+ --letter-spacing-wide: 0.1em;
282
289
  }
283
290
 
284
291
 
@@ -300,6 +307,7 @@ html:not(.dark) .blackout-theme {
300
307
  --motion-duration-300: 300ms;
301
308
  --motion-duration-500: 300ms;
302
309
  --motion-duration-800: 800ms;
310
+ --motion-duration-1500: 1500ms;
303
311
  --motion-easing-linear: linear;
304
312
  --motion-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
305
313
  --motion-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
@@ -403,7 +411,7 @@ html:not(.dark) .blackout-theme {
403
411
  --interactive-primary-bg: #666666;
404
412
  --interactive-primary-bg-hover: #868686;
405
413
  --interactive-primary-bg-active: #b2b2b2;
406
- --interactive-primary-text: #ffffff;
414
+ --interactive-primary-text: #FFFFFF;
407
415
  --interactive-primary-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
408
416
  --interactive-primary-glow: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
409
417
  --interactive-primary-strong: #868686;
@@ -414,7 +422,7 @@ html:not(.dark) .blackout-theme {
414
422
  --interactive-secondary-border: #282828;
415
423
  --interactive-destructive-bg: #ef4444;
416
424
  --interactive-destructive-bg-hover: #c3041e;
417
- --interactive-destructive-text: #ffffff;
425
+ --interactive-destructive-text: #FFFFFF;
418
426
  --interactive-ghost-bg: #181818;
419
427
  --interactive-ghost-bg-hover: #212121;
420
428
  }
@@ -422,7 +430,7 @@ html:not(.dark) .blackout-theme {
422
430
 
423
431
  /* --- Adaptive: Text (dark) — prefers-color-scheme --- */
424
432
  @media (prefers-color-scheme: dark) {
425
- .blackout-theme:not(.light) {
433
+ .blackout-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
426
434
  --text-primary: rgba(255, 255, 255, 0.7);
427
435
  --text-secondary: rgba(255, 255, 255, 0.70);
428
436
  --text-tertiary: rgba(255, 255, 255, 0.55);
@@ -442,7 +450,7 @@ html:not(.dark) .blackout-theme {
442
450
 
443
451
  /* --- Adaptive: Surface (dark) — prefers-color-scheme --- */
444
452
  @media (prefers-color-scheme: dark) {
445
- .blackout-theme:not(.light) {
453
+ .blackout-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
446
454
  --surface-page: #000000;
447
455
  --surface-card: rgba(255, 255, 255, 0.04);
448
456
  --surface-popover: #141414;
@@ -481,7 +489,7 @@ html:not(.dark) .blackout-theme {
481
489
 
482
490
  /* --- Adaptive: Border (dark) — prefers-color-scheme --- */
483
491
  @media (prefers-color-scheme: dark) {
484
- .blackout-theme:not(.light) {
492
+ .blackout-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
485
493
  --border-default: rgba(255, 255, 255, 0.06);
486
494
  --border-muted: rgba(255, 255, 255, 0.03);
487
495
  --border-strong: rgba(255, 255, 255, 0.1);
@@ -497,11 +505,11 @@ html:not(.dark) .blackout-theme {
497
505
 
498
506
  /* --- Adaptive: Interactive (dark) — prefers-color-scheme --- */
499
507
  @media (prefers-color-scheme: dark) {
500
- .blackout-theme:not(.light) {
508
+ .blackout-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
501
509
  --interactive-primary-bg: #666666;
502
510
  --interactive-primary-bg-hover: #868686;
503
511
  --interactive-primary-bg-active: #b2b2b2;
504
- --interactive-primary-text: #ffffff;
512
+ --interactive-primary-text: #FFFFFF;
505
513
  --interactive-primary-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
506
514
  --interactive-primary-glow: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
507
515
  --interactive-primary-strong: #868686;
@@ -512,7 +520,7 @@ html:not(.dark) .blackout-theme {
512
520
  --interactive-secondary-border: #282828;
513
521
  --interactive-destructive-bg: #ef4444;
514
522
  --interactive-destructive-bg-hover: #c3041e;
515
- --interactive-destructive-text: #ffffff;
523
+ --interactive-destructive-text: #FFFFFF;
516
524
  --interactive-ghost-bg: #181818;
517
525
  --interactive-ghost-bg-hover: #212121;
518
526
  }
@@ -595,7 +603,7 @@ html:not(.dark) .blackout-theme {
595
603
  --interactive-primary-bg: #4d4d4d;
596
604
  --interactive-primary-bg-hover: #3c3c3c;
597
605
  --interactive-primary-bg-active: #2a2a2a;
598
- --interactive-primary-text: #ffffff;
606
+ --interactive-primary-text: #FFFFFF;
599
607
  --interactive-primary-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
600
608
  --interactive-primary-glow: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
601
609
  --interactive-primary-strong: #4d4d4d;
@@ -606,7 +614,7 @@ html:not(.dark) .blackout-theme {
606
614
  --interactive-secondary-border: #303030;
607
615
  --interactive-destructive-bg: #c3041e;
608
616
  --interactive-destructive-bg-hover: #990015;
609
- --interactive-destructive-text: #ffffff;
617
+ --interactive-destructive-text: #FFFFFF;
610
618
  --interactive-ghost-bg: #212121;
611
619
  --interactive-ghost-bg-hover: #282828;
612
620
  }
@@ -622,9 +630,9 @@ html:not(.dark) .blackout-theme {
622
630
  --color-fd-muted: rgba(255, 255, 255, 0.04);
623
631
  --color-fd-muted-foreground: rgba(255, 255, 255, 0.70);
624
632
  --color-fd-accent: #666666;
625
- --color-fd-accent-foreground: #ffffff;
633
+ --color-fd-accent-foreground: #FFFFFF;
626
634
  --color-fd-primary: #666666;
627
- --color-fd-primary-foreground: #ffffff;
635
+ --color-fd-primary-foreground: #FFFFFF;
628
636
  --color-fd-secondary: rgba(255, 255, 255, 0.04);
629
637
  --color-fd-secondary-foreground: rgba(255, 255, 255, 0.7);
630
638
  --color-fd-popover: #141414;
@@ -643,9 +651,9 @@ html:not(.dark) .blackout-theme {
643
651
  --color-fd-muted: rgba(255, 255, 255, 0.05);
644
652
  --color-fd-muted-foreground: rgba(255, 255, 255, 0.5);
645
653
  --color-fd-accent: #666666;
646
- --color-fd-accent-foreground: #ffffff;
654
+ --color-fd-accent-foreground: #FFFFFF;
647
655
  --color-fd-primary: #666666;
648
- --color-fd-primary-foreground: #ffffff;
656
+ --color-fd-primary-foreground: #FFFFFF;
649
657
  --color-fd-secondary: rgba(255, 255, 255, 0.05);
650
658
  --color-fd-secondary-foreground: rgba(255, 255, 255, 0.75);
651
659
  --color-fd-popover: #141414;
package/dist/themes/dark.css CHANGED
@@ -43,13 +43,13 @@
43
43
  --surface-accent-subtle: var(--color-primary-900);
44
44
  --surface-accent-default: var(--color-primary-500);
45
45
  --surface-accent-strong: var(--color-primary-400);
46
- --surface-success-subtle: var(--color-success-900);
46
+ --surface-success-subtle: color-mix(in srgb, var(--color-success-900) 12%, var(--surface-card));
47
47
  --surface-success-default: var(--color-success-500);
48
- --surface-warning-subtle: var(--color-warning-900);
48
+ --surface-warning-subtle: color-mix(in srgb, var(--color-warning-900) 12%, var(--surface-card));
49
49
  --surface-warning-default: var(--color-warning-500);
50
- --surface-error-subtle: var(--color-error-900);
50
+ --surface-error-subtle: color-mix(in srgb, var(--color-error-900) 12%, var(--surface-card));
51
51
  --surface-error-default: var(--color-error-500);
52
- --surface-info-subtle: var(--color-info-900);
52
+ --surface-info-subtle: color-mix(in srgb, var(--color-info-900) 12%, var(--surface-card));
53
53
  --surface-info-default: var(--color-info-500);
54
54
  --surface-elev-0: var(--color-neutral-950);
55
55
  --surface-elev-1: var(--color-neutral-900);
@@ -182,13 +182,13 @@
182
182
  --surface-accent-subtle: var(--color-primary-900);
183
183
  --surface-accent-default: var(--color-primary-500);
184
184
  --surface-accent-strong: var(--color-primary-400);
185
- --surface-success-subtle: var(--color-success-900);
185
+ --surface-success-subtle: color-mix(in srgb, var(--color-success-900) 12%, var(--surface-card));
186
186
  --surface-success-default: var(--color-success-500);
187
- --surface-warning-subtle: var(--color-warning-900);
187
+ --surface-warning-subtle: color-mix(in srgb, var(--color-warning-900) 12%, var(--surface-card));
188
188
  --surface-warning-default: var(--color-warning-500);
189
- --surface-error-subtle: var(--color-error-900);
189
+ --surface-error-subtle: color-mix(in srgb, var(--color-error-900) 12%, var(--surface-card));
190
190
  --surface-error-default: var(--color-error-500);
191
- --surface-info-subtle: var(--color-info-900);
191
+ --surface-info-subtle: color-mix(in srgb, var(--color-info-900) 12%, var(--surface-card));
192
192
  --surface-info-default: var(--color-info-500);
193
193
  --surface-elev-0: var(--color-neutral-950);
194
194
  --surface-elev-1: var(--color-neutral-900);
package/dist/themes/modern-minimal.css CHANGED
@@ -51,7 +51,7 @@
51
51
  /* --- Intent aliases (light) --- */
52
52
  html:not(.dark) .modern-minimal-theme {
53
53
  --primary: #04bf81;
54
- --primary-text: #ffffff;
54
+ --primary-text: var(--interactive-primary-text);
55
55
  --accent: #04bf81;
56
56
  --success: #22c55e;
57
57
  --warning: #f59e0b;
@@ -70,7 +70,7 @@ html:not(.dark) .modern-minimal-theme {
70
70
  /* --- Intent aliases (dark) — manual toggle --- */
71
71
  .dark .modern-minimal-theme {
72
72
  --primary: #02cd8d;
73
- --primary-text: #ffffff;
73
+ --primary-text: var(--interactive-primary-text);
74
74
  --accent: #04bf81;
75
75
  --success: #22c55e;
76
76
  --warning: #f59e0b;
@@ -88,9 +88,9 @@ html:not(.dark) .modern-minimal-theme {
88
88
 
89
89
  /* --- Intent aliases (dark) — prefers-color-scheme --- */
90
90
  @media (prefers-color-scheme: dark) {
91
- .modern-minimal-theme:not(.light) {
91
+ .modern-minimal-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
92
92
  --primary: #02cd8d;
93
- --primary-text: #ffffff;
93
+ --primary-text: var(--interactive-primary-text);
94
94
  --accent: #04bf81;
95
95
  --success: #22c55e;
96
96
  --warning: #f59e0b;
@@ -102,7 +102,7 @@ html:not(.dark) .modern-minimal-theme {
102
102
 
103
103
  /* --- Hairline aliases (dark) — prefers-color-scheme --- */
104
104
  @media (prefers-color-scheme: dark) {
105
- .modern-minimal-theme:not(.light) {
105
+ .modern-minimal-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
106
106
  --hairline: rgba(255, 255, 255, 0.06);
107
107
  --hairline-strong: rgba(255, 255, 255, 0.10);
108
108
  }
@@ -292,7 +292,14 @@ html:not(.dark) .modern-minimal-theme {
292
292
  --line-height-normal: 1.5;
293
293
  --line-height-relaxed: 1.625;
294
294
  --line-height-loose: 2;
295
+ --letter-spacing-xl: 0.16em;
296
+ --letter-spacing-lg: 0.1em;
297
+ --letter-spacing-md: 0.05em;
298
+ --letter-spacing-sm: 0.025em;
299
+ --letter-spacing-xs: 0.01em;
300
+ --letter-spacing-tight: -0.01em;
295
301
  --letter-spacing-normal: 0.05em;
302
+ --letter-spacing-wide: 0.1em;
296
303
  }
297
304
 
298
305
 
@@ -314,6 +321,7 @@ html:not(.dark) .modern-minimal-theme {
314
321
  --motion-duration-300: 300ms;
315
322
  --motion-duration-500: 400ms;
316
323
  --motion-duration-800: 800ms;
324
+ --motion-duration-1500: 1500ms;
317
325
  --motion-easing-linear: linear;
318
326
  --motion-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
319
327
  --motion-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
@@ -433,7 +441,7 @@ html:not(.dark) .modern-minimal-theme {
433
441
  --interactive-primary-bg: #04bf81;
434
442
  --interactive-primary-bg-hover: #a0ffcf;
435
443
  --interactive-primary-bg-active: #bbffdb;
436
- --interactive-primary-text: #ffffff;
444
+ --interactive-primary-text: #FFFFFF;
437
445
  --interactive-primary-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
438
446
  --interactive-primary-glow: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
439
447
  --interactive-primary-strong: #4fdca1;
@@ -444,7 +452,7 @@ html:not(.dark) .modern-minimal-theme {
444
452
  --interactive-secondary-border: #505561;
445
453
  --interactive-destructive-bg: #ef4444;
446
454
  --interactive-destructive-bg-hover: #c3041e;
447
- --interactive-destructive-text: #ffffff;
455
+ --interactive-destructive-text: #FFFFFF;
448
456
  --interactive-ghost-bg: #292e38;
449
457
  --interactive-ghost-bg-hover: #3d424d;
450
458
  }
@@ -452,7 +460,7 @@ html:not(.dark) .modern-minimal-theme {
452
460
 
453
461
  /* --- Adaptive: Text (dark) — prefers-color-scheme --- */
454
462
  @media (prefers-color-scheme: dark) {
455
- .modern-minimal-theme:not(.light) {
463
+ .modern-minimal-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
456
464
  --text-primary: rgba(255, 255, 255, 0.7);
457
465
  --text-secondary: rgba(255, 255, 255, 0.70);
458
466
  --text-tertiary: rgba(255, 255, 255, 0.55);
@@ -472,7 +480,7 @@ html:not(.dark) .modern-minimal-theme {
472
480
 
473
481
  /* --- Adaptive: Surface (dark) — prefers-color-scheme --- */
474
482
  @media (prefers-color-scheme: dark) {
475
- .modern-minimal-theme:not(.light) {
483
+ .modern-minimal-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
476
484
  --surface-page: #000000;
477
485
  --surface-card: rgba(255, 255, 255, 0.04);
478
486
  --surface-popover: #141414;
@@ -511,7 +519,7 @@ html:not(.dark) .modern-minimal-theme {
511
519
 
512
520
  /* --- Adaptive: Border (dark) — prefers-color-scheme --- */
513
521
  @media (prefers-color-scheme: dark) {
514
- .modern-minimal-theme:not(.light) {
522
+ .modern-minimal-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
515
523
  --border-default: rgba(255, 255, 255, 0.06);
516
524
  --border-muted: rgba(255, 255, 255, 0.03);
517
525
  --border-strong: rgba(255, 255, 255, 0.1);
@@ -527,11 +535,11 @@ html:not(.dark) .modern-minimal-theme {
527
535
 
528
536
  /* --- Adaptive: Interactive (dark) — prefers-color-scheme --- */
529
537
  @media (prefers-color-scheme: dark) {
530
- .modern-minimal-theme:not(.light) {
538
+ .modern-minimal-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
531
539
  --interactive-primary-bg: #04bf81;
532
540
  --interactive-primary-bg-hover: #a0ffcf;
533
541
  --interactive-primary-bg-active: #bbffdb;
534
- --interactive-primary-text: #ffffff;
542
+ --interactive-primary-text: #FFFFFF;
535
543
  --interactive-primary-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
536
544
  --interactive-primary-glow: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
537
545
  --interactive-primary-strong: #4fdca1;
@@ -542,7 +550,7 @@ html:not(.dark) .modern-minimal-theme {
542
550
  --interactive-secondary-border: #505561;
543
551
  --interactive-destructive-bg: #ef4444;
544
552
  --interactive-destructive-bg-hover: #c3041e;
545
- --interactive-destructive-text: #ffffff;
553
+ --interactive-destructive-text: #FFFFFF;
546
554
  --interactive-ghost-bg: #292e38;
547
555
  --interactive-ghost-bg-hover: #3d424d;
548
556
  }
@@ -551,7 +559,7 @@ html:not(.dark) .modern-minimal-theme {
551
559
 
552
560
  /* --- Primitive overrides (dark) — prefers-color-scheme --- */
553
561
  @media (prefers-color-scheme: dark) {
554
- .modern-minimal-theme:not(.light) {
562
+ .modern-minimal-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
555
563
  --color-primary-50: #e7fbf0;
556
564
  --color-primary-100: #d7f7e6;
557
565
  --color-primary-200: #b8f4d5;
@@ -643,7 +651,7 @@ html:not(.dark) .modern-minimal-theme {
643
651
  --interactive-primary-bg: #018e5f;
644
652
  --interactive-primary-bg-hover: #016e48;
645
653
  --interactive-primary-bg-active: #004a30;
646
- --interactive-primary-text: #ffffff;
654
+ --interactive-primary-text: #FFFFFF;
647
655
  --interactive-primary-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
648
656
  --interactive-primary-glow: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
649
657
  --interactive-primary-strong: #018e5f;
@@ -654,7 +662,7 @@ html:not(.dark) .modern-minimal-theme {
654
662
  --interactive-secondary-border: #b2b7c2;
655
663
  --interactive-destructive-bg: #c3041e;
656
664
  --interactive-destructive-bg-hover: #990015;
657
- --interactive-destructive-text: #ffffff;
665
+ --interactive-destructive-text: #FFFFFF;
658
666
  --interactive-ghost-bg: #ffffff;
659
667
  --interactive-ghost-bg-hover: #e6e8ec;
660
668
  }
@@ -670,9 +678,9 @@ html:not(.dark) .modern-minimal-theme {
670
678
  --color-fd-muted: rgba(255, 255, 255, 0.04);
671
679
  --color-fd-muted-foreground: rgba(255, 255, 255, 0.70);
672
680
  --color-fd-accent: #04bf81;
673
- --color-fd-accent-foreground: #ffffff;
681
+ --color-fd-accent-foreground: #FFFFFF;
674
682
  --color-fd-primary: #04bf81;
675
- --color-fd-primary-foreground: #ffffff;
683
+ --color-fd-primary-foreground: #FFFFFF;
676
684
  --color-fd-secondary: rgba(255, 255, 255, 0.04);
677
685
  --color-fd-secondary-foreground: rgba(255, 255, 255, 0.7);
678
686
  --color-fd-popover: #141414;
@@ -691,9 +699,9 @@ html:not(.dark) .modern-minimal-theme {
691
699
  --color-fd-muted: #e6e8ec;
692
700
  --color-fd-muted-foreground: rgba(0, 0, 0, 0.55);
693
701
  --color-fd-accent: #04bf81;
694
- --color-fd-accent-foreground: #ffffff;
702
+ --color-fd-accent-foreground: #FFFFFF;
695
703
  --color-fd-primary: #04bf81;
696
- --color-fd-primary-foreground: #ffffff;
704
+ --color-fd-primary-foreground: #FFFFFF;
697
705
  --color-fd-secondary: #e6e8ec;
698
706
  --color-fd-secondary-foreground: rgba(0, 0, 0, 0.9);
699
707
  --color-fd-popover: #FFFFFF;
package/dist/themes/neutral.css CHANGED
@@ -35,7 +35,7 @@
35
35
  /* --- Intent aliases (light) --- */
36
36
  html:not(.dark) .neutral-theme {
37
37
  --primary: #1798ad;
38
- --primary-text: #ffffff;
38
+ --primary-text: var(--interactive-primary-text);
39
39
  --accent: #1798ad;
40
40
  --success: #22c55e;
41
41
  --warning: #f59e0b;
@@ -54,7 +54,7 @@ html:not(.dark) .neutral-theme {
54
54
  /* --- Intent aliases (dark) — manual toggle --- */
55
55
  .dark .neutral-theme {
56
56
  --primary: #1798ad;
57
- --primary-text: #ffffff;
57
+ --primary-text: var(--interactive-primary-text);
58
58
  --accent: #1798ad;
59
59
  --success: #22c55e;
60
60
  --warning: #f59e0b;
@@ -72,9 +72,9 @@ html:not(.dark) .neutral-theme {
72
72
 
73
73
  /* --- Intent aliases (dark) — prefers-color-scheme --- */
74
74
  @media (prefers-color-scheme: dark) {
75
- .neutral-theme:not(.light) {
75
+ .neutral-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
76
76
  --primary: #1798ad;
77
- --primary-text: #ffffff;
77
+ --primary-text: var(--interactive-primary-text);
78
78
  --accent: #1798ad;
79
79
  --success: #22c55e;
80
80
  --warning: #f59e0b;
@@ -86,7 +86,7 @@ html:not(.dark) .neutral-theme {
86
86
 
87
87
  /* --- Hairline aliases (dark) — prefers-color-scheme --- */
88
88
  @media (prefers-color-scheme: dark) {
89
- .neutral-theme:not(.light) {
89
+ .neutral-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
90
90
  --hairline: rgba(255, 255, 255, 0.06);
91
91
  --hairline-strong: rgba(255, 255, 255, 0.10);
92
92
  }
@@ -276,7 +276,14 @@ html:not(.dark) .neutral-theme {
276
276
  --line-height-normal: 1.5;
277
277
  --line-height-relaxed: 1.625;
278
278
  --line-height-loose: 2;
279
+ --letter-spacing-xl: 0.16em;
280
+ --letter-spacing-lg: 0.1em;
281
+ --letter-spacing-md: 0.05em;
282
+ --letter-spacing-sm: 0.025em;
283
+ --letter-spacing-xs: 0.01em;
284
+ --letter-spacing-tight: -0.01em;
279
285
  --letter-spacing-normal: 0.05em;
286
+ --letter-spacing-wide: 0.1em;
280
287
  }
281
288
 
282
289
 
@@ -298,6 +305,7 @@ html:not(.dark) .neutral-theme {
298
305
  --motion-duration-300: 300ms;
299
306
  --motion-duration-500: 300ms;
300
307
  --motion-duration-800: 800ms;
308
+ --motion-duration-1500: 1500ms;
301
309
  --motion-easing-linear: linear;
302
310
  --motion-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
303
311
  --motion-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
@@ -412,7 +420,7 @@ html:not(.dark) .neutral-theme {
412
420
  --interactive-secondary-border: #54545d;
413
421
  --interactive-destructive-bg: #ef4444;
414
422
  --interactive-destructive-bg-hover: #c3041e;
415
- --interactive-destructive-text: #ffffff;
423
+ --interactive-destructive-text: #FFFFFF;
416
424
  --interactive-ghost-bg: #2d2d34;
417
425
  --interactive-ghost-bg-hover: #41414a;
418
426
  }
@@ -420,7 +428,7 @@ html:not(.dark) .neutral-theme {
420
428
 
421
429
  /* --- Adaptive: Text (dark) — prefers-color-scheme --- */
422
430
  @media (prefers-color-scheme: dark) {
423
- .neutral-theme:not(.light) {
431
+ .neutral-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
424
432
  --text-primary: #f5f5f6;
425
433
  --text-secondary: #b6b7bd;
426
434
  --text-tertiary: #8e8e97;
@@ -440,7 +448,7 @@ html:not(.dark) .neutral-theme {
440
448
 
441
449
  /* --- Adaptive: Surface (dark) — prefers-color-scheme --- */
442
450
  @media (prefers-color-scheme: dark) {
443
- .neutral-theme:not(.light) {
451
+ .neutral-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
444
452
  --surface-page: #09090b;
445
453
  --surface-card: #18181b;
446
454
  --surface-popover: #18181b;
@@ -479,7 +487,7 @@ html:not(.dark) .neutral-theme {
479
487
 
480
488
  /* --- Adaptive: Border (dark) — prefers-color-scheme --- */
481
489
  @media (prefers-color-scheme: dark) {
482
- .neutral-theme:not(.light) {
490
+ .neutral-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
483
491
  --border-default: #41414a;
484
492
  --border-muted: #2d2d34;
485
493
  --border-strong: #54545d;
@@ -495,7 +503,7 @@ html:not(.dark) .neutral-theme {
495
503
 
496
504
  /* --- Adaptive: Interactive (dark) — prefers-color-scheme --- */
497
505
  @media (prefers-color-scheme: dark) {
498
- .neutral-theme:not(.light) {
506
+ .neutral-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
499
507
  --interactive-primary-bg: #1798ad;
500
508
  --interactive-primary-bg-hover: #4fb0c3;
501
509
  --interactive-primary-bg-active: #89cfde;
@@ -510,7 +518,7 @@ html:not(.dark) .neutral-theme {
510
518
  --interactive-secondary-border: #54545d;
511
519
  --interactive-destructive-bg: #ef4444;
512
520
  --interactive-destructive-bg-hover: #c3041e;
513
- --interactive-destructive-text: #ffffff;
521
+ --interactive-destructive-text: #FFFFFF;
514
522
  --interactive-ghost-bg: #2d2d34;
515
523
  --interactive-ghost-bg-hover: #41414a;
516
524
  }
@@ -604,7 +612,7 @@ html:not(.dark) .neutral-theme {
604
612
  --interactive-secondary-border: #b6b7bd;
605
613
  --interactive-destructive-bg: #c3041e;
606
614
  --interactive-destructive-bg-hover: #990015;
607
- --interactive-destructive-text: #ffffff;
615
+ --interactive-destructive-text: #FFFFFF;
608
616
  --interactive-ghost-bg: #ffffff;
609
617
  --interactive-ghost-bg-hover: #e7e7ea;
610
618
  }
package/dist/themes/space.css CHANGED
@@ -39,7 +39,7 @@
39
39
  /* --- Intent aliases (light) --- */
40
40
  html:not(.dark) .space-theme {
41
41
  --primary: #5b6fff;
42
- --primary-text: #ffffff;
42
+ --primary-text: var(--interactive-primary-text);
43
43
  --accent: #5b6fff;
44
44
  --success: #22c55e;
45
45
  --warning: #f59e0b;
@@ -58,7 +58,7 @@ html:not(.dark) .space-theme {
58
58
  /* --- Intent aliases (dark) — manual toggle --- */
59
59
  .dark .space-theme {
60
60
  --primary: #5b6fff;
61
- --primary-text: #ffffff;
61
+ --primary-text: var(--interactive-primary-text);
62
62
  --accent: #5b6fff;
63
63
  --success: #22c55e;
64
64
  --warning: #f59e0b;
@@ -76,9 +76,9 @@ html:not(.dark) .space-theme {
76
76
 
77
77
  /* --- Intent aliases (dark) — prefers-color-scheme --- */
78
78
  @media (prefers-color-scheme: dark) {
79
- .space-theme:not(.light) {
79
+ .space-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
80
80
  --primary: #5b6fff;
81
- --primary-text: #ffffff;
81
+ --primary-text: var(--interactive-primary-text);
82
82
  --accent: #5b6fff;
83
83
  --success: #22c55e;
84
84
  --warning: #f59e0b;
@@ -90,7 +90,7 @@ html:not(.dark) .space-theme {
90
90
 
91
91
  /* --- Hairline aliases (dark) — prefers-color-scheme --- */
92
92
  @media (prefers-color-scheme: dark) {
93
- .space-theme:not(.light) {
93
+ .space-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
94
94
  --hairline: rgba(255, 255, 255, 0.06);
95
95
  --hairline-strong: rgba(255, 255, 255, 0.10);
96
96
  }
@@ -280,7 +280,14 @@ html:not(.dark) .space-theme {
280
280
  --line-height-normal: 1.5;
281
281
  --line-height-relaxed: 1.625;
282
282
  --line-height-loose: 2;
283
+ --letter-spacing-xl: 0.16em;
284
+ --letter-spacing-lg: 0.1em;
285
+ --letter-spacing-md: 0.05em;
286
+ --letter-spacing-sm: 0.025em;
287
+ --letter-spacing-xs: 0.01em;
288
+ --letter-spacing-tight: -0.01em;
283
289
  --letter-spacing-normal: 0.05em;
290
+ --letter-spacing-wide: 0.1em;
284
291
  }
285
292
 
286
293
 
@@ -302,6 +309,7 @@ html:not(.dark) .space-theme {
302
309
  --motion-duration-300: 300ms;
303
310
  --motion-duration-500: 400ms;
304
311
  --motion-duration-800: 800ms;
312
+ --motion-duration-1500: 1500ms;
305
313
  --motion-easing-linear: linear;
306
314
  --motion-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
307
315
  --motion-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
@@ -416,7 +424,7 @@ html:not(.dark) .space-theme {
416
424
  --interactive-secondary-border: #51515d;
417
425
  --interactive-destructive-bg: #ef4444;
418
426
  --interactive-destructive-bg-hover: #c3041e;
419
- --interactive-destructive-text: #ffffff;
427
+ --interactive-destructive-text: #FFFFFF;
420
428
  --interactive-ghost-bg: #2b2b36;
421
429
  --interactive-ghost-bg-hover: #3f3f4b;
422
430
  }
@@ -424,7 +432,7 @@ html:not(.dark) .space-theme {
424
432
 
425
433
  /* --- Adaptive: Text (dark) — prefers-color-scheme --- */
426
434
  @media (prefers-color-scheme: dark) {
427
- .space-theme:not(.light) {
435
+ .space-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
428
436
  --text-primary: #e8e8f0;
429
437
  --text-secondary: rgba(232, 232, 240, 0.72);
430
438
  --text-tertiary: rgba(232, 232, 240, 0.5);
@@ -444,7 +452,7 @@ html:not(.dark) .space-theme {
444
452
 
445
453
  /* --- Adaptive: Surface (dark) — prefers-color-scheme --- */
446
454
  @media (prefers-color-scheme: dark) {
447
- .space-theme:not(.light) {
455
+ .space-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
448
456
  --surface-page: #080810;
449
457
  --surface-card: #0e0e18;
450
458
  --surface-popover: #0e0e18;
@@ -483,7 +491,7 @@ html:not(.dark) .space-theme {
483
491
 
484
492
  /* --- Adaptive: Border (dark) — prefers-color-scheme --- */
485
493
  @media (prefers-color-scheme: dark) {
486
- .space-theme:not(.light) {
494
+ .space-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
487
495
  --border-default: #3f3f4b;
488
496
  --border-muted: #2b2b36;
489
497
  --border-strong: #51515d;
@@ -499,7 +507,7 @@ html:not(.dark) .space-theme {
499
507
 
500
508
  /* --- Adaptive: Interactive (dark) — prefers-color-scheme --- */
501
509
  @media (prefers-color-scheme: dark) {
502
- .space-theme:not(.light) {
510
+ .space-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
503
511
  --interactive-primary-bg: #5b6fff;
504
512
  --interactive-primary-bg-hover: #7b93ff;
505
513
  --interactive-primary-bg-active: #aabcff;
@@ -514,7 +522,7 @@ html:not(.dark) .space-theme {
514
522
  --interactive-secondary-border: #51515d;
515
523
  --interactive-destructive-bg: #ef4444;
516
524
  --interactive-destructive-bg-hover: #c3041e;
517
- --interactive-destructive-text: #ffffff;
525
+ --interactive-destructive-text: #FFFFFF;
518
526
  --interactive-ghost-bg: #2b2b36;
519
527
  --interactive-ghost-bg-hover: #3f3f4b;
520
528
  }
@@ -608,7 +616,7 @@ html:not(.dark) .space-theme {
608
616
  --interactive-secondary-border: #b4b4c2;
609
617
  --interactive-destructive-bg: #c3041e;
610
618
  --interactive-destructive-bg-hover: #990015;
611
- --interactive-destructive-text: #ffffff;
619
+ --interactive-destructive-text: #FFFFFF;
612
620
  --interactive-ghost-bg: #ffffff;
613
621
  --interactive-ghost-bg-hover: #e7e7ed;
614
622
  }
package/dist/tokens.css CHANGED
@@ -211,6 +211,7 @@
211
211
  --motion-duration-300: 300ms;
212
212
  --motion-duration-500: 500ms;
213
213
  --motion-duration-800: 800ms;
214
+ --motion-duration-1500: 1500ms;
214
215
  }
215
216
 
216
217
 
@@ -398,6 +399,12 @@
398
399
  --sidebar-ring: var(--color-primary-500);
399
400
  --sidebar-text-muted: var(--color-neutral-500);
400
401
  }
402
+
403
+
404
+ /* --- Semantic: Field --- */
405
+ :root {
406
+ --field-menu-bg: var(--surface-popover);
407
+ }
401
408
  }
402
409
 
403
410
  /* ============================================
@@ -566,13 +573,13 @@
566
573
  --surface-accent-subtle: var(--color-primary-900);
567
574
  --surface-accent-default: var(--color-primary-500);
568
575
  --surface-accent-strong: var(--color-primary-400);
569
- --surface-success-subtle: var(--color-success-900);
576
+ --surface-success-subtle: color-mix(in srgb, var(--color-success-900) 12%, var(--surface-card));
570
577
  --surface-success-default: var(--color-success-500);
571
- --surface-warning-subtle: var(--color-warning-900);
578
+ --surface-warning-subtle: color-mix(in srgb, var(--color-warning-900) 12%, var(--surface-card));
572
579
  --surface-warning-default: var(--color-warning-500);
573
- --surface-error-subtle: var(--color-error-900);
580
+ --surface-error-subtle: color-mix(in srgb, var(--color-error-900) 12%, var(--surface-card));
574
581
  --surface-error-default: var(--color-error-500);
575
- --surface-info-subtle: var(--color-info-900);
582
+ --surface-info-subtle: color-mix(in srgb, var(--color-info-900) 12%, var(--surface-card));
576
583
  --surface-info-default: var(--color-info-500);
577
584
  --surface-elev-0: var(--color-neutral-950);
578
585
  --surface-elev-1: var(--color-neutral-900);
@@ -705,13 +712,13 @@
705
712
  --surface-accent-subtle: var(--color-primary-900);
706
713
  --surface-accent-default: var(--color-primary-500);
707
714
  --surface-accent-strong: var(--color-primary-400);
708
- --surface-success-subtle: var(--color-success-900);
715
+ --surface-success-subtle: color-mix(in srgb, var(--color-success-900) 12%, var(--surface-card));
709
716
  --surface-success-default: var(--color-success-500);
710
- --surface-warning-subtle: var(--color-warning-900);
717
+ --surface-warning-subtle: color-mix(in srgb, var(--color-warning-900) 12%, var(--surface-card));
711
718
  --surface-warning-default: var(--color-warning-500);
712
- --surface-error-subtle: var(--color-error-900);
719
+ --surface-error-subtle: color-mix(in srgb, var(--color-error-900) 12%, var(--surface-card));
713
720
  --surface-error-default: var(--color-error-500);
714
- --surface-info-subtle: var(--color-info-900);
721
+ --surface-info-subtle: color-mix(in srgb, var(--color-info-900) 12%, var(--surface-card));
715
722
  --surface-info-default: var(--color-info-500);
716
723
  --surface-elev-0: var(--color-neutral-950);
717
724
  --surface-elev-1: var(--color-neutral-900);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@loworbitstudio/visor-core",
3
- "version": "0.9.0",
3
+ "version": "0.11.0",
4
4
  "description": "Design tokens for the Visor design system — CSS custom properties for theming.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.css",
@@ -48,7 +48,7 @@
48
48
  "access": "public"
49
49
  },
50
50
  "devDependencies": {
51
- "@loworbitstudio/visor-theme-engine": "^0.12.0",
51
+ "@loworbitstudio/visor-theme-engine": "^0.15.0",
52
52
  "@types/node": "^22.0.0",
53
53
  "tsx": "^4.19.2",
54
54
  "typescript": "^5.7.2",