@loworbitstudio/visor-core 0.10.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.
@@ -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
 
@@ -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
  }
@@ -501,7 +509,7 @@ html:not(.dark) .blackout-theme {
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;
@@ -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);
@@ -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
  }
@@ -531,7 +539,7 @@ html:not(.dark) .modern-minimal-theme {
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
  }
@@ -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;
@@ -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
  }
@@ -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
  }
@@ -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
  }
@@ -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
 
@@ -572,13 +573,13 @@
572
573
  --surface-accent-subtle: var(--color-primary-900);
573
574
  --surface-accent-default: var(--color-primary-500);
574
575
  --surface-accent-strong: var(--color-primary-400);
575
- --surface-success-subtle: var(--color-success-900);
576
+ --surface-success-subtle: color-mix(in srgb, var(--color-success-900) 12%, var(--surface-card));
576
577
  --surface-success-default: var(--color-success-500);
577
- --surface-warning-subtle: var(--color-warning-900);
578
+ --surface-warning-subtle: color-mix(in srgb, var(--color-warning-900) 12%, var(--surface-card));
578
579
  --surface-warning-default: var(--color-warning-500);
579
- --surface-error-subtle: var(--color-error-900);
580
+ --surface-error-subtle: color-mix(in srgb, var(--color-error-900) 12%, var(--surface-card));
580
581
  --surface-error-default: var(--color-error-500);
581
- --surface-info-subtle: var(--color-info-900);
582
+ --surface-info-subtle: color-mix(in srgb, var(--color-info-900) 12%, var(--surface-card));
582
583
  --surface-info-default: var(--color-info-500);
583
584
  --surface-elev-0: var(--color-neutral-950);
584
585
  --surface-elev-1: var(--color-neutral-900);
@@ -711,13 +712,13 @@
711
712
  --surface-accent-subtle: var(--color-primary-900);
712
713
  --surface-accent-default: var(--color-primary-500);
713
714
  --surface-accent-strong: var(--color-primary-400);
714
- --surface-success-subtle: var(--color-success-900);
715
+ --surface-success-subtle: color-mix(in srgb, var(--color-success-900) 12%, var(--surface-card));
715
716
  --surface-success-default: var(--color-success-500);
716
- --surface-warning-subtle: var(--color-warning-900);
717
+ --surface-warning-subtle: color-mix(in srgb, var(--color-warning-900) 12%, var(--surface-card));
717
718
  --surface-warning-default: var(--color-warning-500);
718
- --surface-error-subtle: var(--color-error-900);
719
+ --surface-error-subtle: color-mix(in srgb, var(--color-error-900) 12%, var(--surface-card));
719
720
  --surface-error-default: var(--color-error-500);
720
- --surface-info-subtle: var(--color-info-900);
721
+ --surface-info-subtle: color-mix(in srgb, var(--color-info-900) 12%, var(--surface-card));
721
722
  --surface-info-default: var(--color-info-500);
722
723
  --surface-elev-0: var(--color-neutral-950);
723
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.10.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.14.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",