@loworbitstudio/visor-core 0.5.0 → 0.7.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 (12) hide show
  1. package/dist/index.css +2 -0
  2. package/dist/primitives.css +4 -0
  3. package/dist/semantic.css +8 -0
  4. package/dist/themes/blackout.css +131 -114
  5. package/dist/themes/dark.css +13 -0
  6. package/dist/themes/light.css +8 -0
  7. package/dist/themes/modern-minimal.css +112 -95
  8. package/dist/themes/neutral.css +124 -107
  9. package/dist/themes/space.css +149 -132
  10. package/dist/tokens.css +33 -8
  11. package/dist/utilities.css +23 -0
  12. package/package.json +4 -3
package/dist/themes/modern-minimal.css CHANGED
@@ -14,7 +14,9 @@
14
14
  font-display: swap;
15
15
  }
16
16
 
17
+ @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
17
18
 
19
+ @layer visor-adaptive {
18
20
  /* ── Section 1: Shared tokens (mode-independent) ── */
19
21
 
20
22
  /* --- Primitive: Colors --- */
@@ -28,62 +30,62 @@
28
30
  --color-white: #ffffff;
29
31
  --color-black: #000000;
30
32
  --color-primary-50: #e8faf0;
31
- --color-primary-100: #ddfceb;
32
- --color-primary-200: #ccffe3;
33
- --color-primary-300: #bbffdb;
34
- --color-primary-400: #a0ffcf;
33
+ --color-primary-100: #d7f6e4;
34
+ --color-primary-200: #b8f0d2;
35
+ --color-primary-300: #89e5b7;
36
+ --color-primary-400: #4ed197;
35
37
  --color-primary-500: #04bf81;
36
- --color-primary-600: #016643;
37
- --color-primary-700: #005033;
38
- --color-primary-800: #003823;
39
- --color-primary-900: #002113;
38
+ --color-primary-600: #018e5f;
39
+ --color-primary-700: #016e48;
40
+ --color-primary-800: #004a30;
41
+ --color-primary-900: #002a19;
40
42
  --color-primary-950: #000d05;
41
43
  --color-accent-50: #e8faf0;
42
- --color-accent-100: #ddfceb;
43
- --color-accent-200: #ccffe3;
44
- --color-accent-300: #bbffdb;
45
- --color-accent-400: #a0ffcf;
44
+ --color-accent-100: #d7f6e4;
45
+ --color-accent-200: #b8f0d2;
46
+ --color-accent-300: #89e5b7;
47
+ --color-accent-400: #4ed197;
46
48
  --color-accent-500: #04bf81;
47
- --color-accent-600: #016643;
48
- --color-accent-700: #005033;
49
- --color-accent-800: #003823;
50
- --color-accent-900: #002113;
49
+ --color-accent-600: #018e5f;
50
+ --color-accent-700: #016e48;
51
+ --color-accent-800: #004a30;
52
+ --color-accent-900: #002a19;
51
53
  --color-accent-950: #000d05;
52
54
  --color-neutral-50: #f4f5f7;
53
- --color-neutral-100: #f0f2f6;
54
- --color-neutral-200: #eaeef5;
55
- --color-neutral-300: #e2e8f3;
56
- --color-neutral-400: #d8dfec;
57
- --color-neutral-500: #6c727e;
55
+ --color-neutral-100: #e6e8ec;
56
+ --color-neutral-200: #d1d4db;
57
+ --color-neutral-300: #b2b7c2;
58
+ --color-neutral-400: #898f9c;
59
+ --color-neutral-500: #6b7280;
58
60
  --color-neutral-600: #505561;
59
61
  --color-neutral-700: #3d424d;
60
62
  --color-neutral-800: #292e38;
61
63
  --color-neutral-900: #171b22;
62
64
  --color-neutral-950: #07090e;
63
65
  --color-success-50: #e8fbeb;
64
- --color-success-100: #defde3;
66
+ --color-success-100: #d8f7dc;
65
67
  --color-success-500: #22c55e;
66
- --color-success-600: #00672b;
67
- --color-success-700: #005120;
68
- --color-success-900: #002209;
68
+ --color-success-600: #019341;
69
+ --color-success-700: #017231;
70
+ --color-success-900: #002b0e;
69
71
  --color-warning-50: #fff3e6;
70
- --color-warning-100: #fff1e3;
72
+ --color-warning-100: #ffebd5;
71
73
  --color-warning-500: #f59e0b;
72
- --color-warning-600: #774a01;
73
- --color-warning-700: #5e3900;
74
- --color-warning-900: #281600;
74
+ --color-warning-600: #b77401;
75
+ --color-warning-700: #8d5800;
76
+ --color-warning-900: #361f00;
75
77
  --color-error-50: #fff2f0;
76
- --color-error-100: #ffefed;
78
+ --color-error-100: #ffe3e0;
77
79
  --color-error-500: #ef4444;
78
- --color-error-600: #a30016;
79
- --color-error-700: #81000f;
80
- --color-error-900: #3a0003;
80
+ --color-error-600: #c3041e;
81
+ --color-error-700: #990015;
82
+ --color-error-900: #410004;
81
83
  --color-info-50: #ecf7ff;
82
- --color-info-100: #e8f5ff;
84
+ --color-info-100: #daf0ff;
83
85
  --color-info-500: #0ea5e9;
84
- --color-info-600: #005c85;
85
- --color-info-700: #004869;
86
- --color-info-900: #001d2e;
86
+ --color-info-600: #017baf;
87
+ --color-info-700: #005f88;
88
+ --color-info-900: #002437;
87
89
  }
88
90
 
89
91
 
@@ -197,15 +199,15 @@
197
199
  /* --- Primitive overrides (dark) — dark brand color anchors at shade 500 --- */
198
200
  .dark .modern-minimal-theme {
199
201
  --color-primary-50: #e7fbf0;
200
- --color-primary-100: #dcfdeb;
201
- --color-primary-200: #ceffe5;
202
- --color-primary-300: #c0ffde;
203
- --color-primary-400: #aaffd5;
202
+ --color-primary-100: #d7f7e6;
203
+ --color-primary-200: #b8f4d5;
204
+ --color-primary-300: #8aecbd;
205
+ --color-primary-400: #4fdca1;
204
206
  --color-primary-500: #02cd8d;
205
- --color-primary-600: #006644;
206
- --color-primary-700: #005034;
207
- --color-primary-800: #003823;
208
- --color-primary-900: #002113;
207
+ --color-primary-600: #029868;
208
+ --color-primary-700: #00754f;
209
+ --color-primary-800: #004f34;
210
+ --color-primary-900: #002c1b;
209
211
  --color-primary-950: #000d06;
210
212
  }
211
213
 
@@ -239,18 +241,23 @@
239
241
  --surface-interactive-hover: #3d424d;
240
242
  --surface-interactive-active: #505561;
241
243
  --surface-interactive-disabled: #292e38;
242
- --surface-selected: #003823;
243
- --surface-accent-subtle: #002113;
244
+ --surface-selected: #004f34;
245
+ --surface-accent-subtle: #002c1b;
244
246
  --surface-accent-default: #04bf81;
245
247
  --surface-accent-strong: #a0ffcf;
246
- --surface-success-subtle: #002209;
248
+ --surface-success-subtle: #002b0e;
247
249
  --surface-success-default: #22c55e;
248
- --surface-warning-subtle: #281600;
250
+ --surface-warning-subtle: #361f00;
249
251
  --surface-warning-default: #f59e0b;
250
- --surface-error-subtle: #3a0003;
252
+ --surface-error-subtle: #410004;
251
253
  --surface-error-default: #ef4444;
252
- --surface-info-subtle: #001d2e;
254
+ --surface-info-subtle: #002437;
253
255
  --surface-info-default: #0ea5e9;
256
+ --surface-elev-0: #07090e;
257
+ --surface-elev-1: #171b22;
258
+ --surface-elev-2: #292e38;
259
+ --surface-elev-3: #3d424d;
260
+ --surface-elev-4: #505561;
254
261
  }
255
262
 
256
263
 
@@ -280,7 +287,7 @@
280
287
  --interactive-secondary-text: #f4f5f7;
281
288
  --interactive-secondary-border: #505561;
282
289
  --interactive-destructive-bg: #ef4444;
283
- --interactive-destructive-bg-hover: #a30016;
290
+ --interactive-destructive-bg-hover: #c3041e;
284
291
  --interactive-destructive-text: #ffffff;
285
292
  --interactive-ghost-bg: #292e38;
286
293
  --interactive-ghost-bg-hover: #3d424d;
@@ -319,18 +326,23 @@
319
326
  --surface-interactive-hover: #3d424d;
320
327
  --surface-interactive-active: #505561;
321
328
  --surface-interactive-disabled: #292e38;
322
- --surface-selected: #003823;
323
- --surface-accent-subtle: #002113;
329
+ --surface-selected: #004f34;
330
+ --surface-accent-subtle: #002c1b;
324
331
  --surface-accent-default: #04bf81;
325
332
  --surface-accent-strong: #a0ffcf;
326
- --surface-success-subtle: #002209;
333
+ --surface-success-subtle: #002b0e;
327
334
  --surface-success-default: #22c55e;
328
- --surface-warning-subtle: #281600;
335
+ --surface-warning-subtle: #361f00;
329
336
  --surface-warning-default: #f59e0b;
330
- --surface-error-subtle: #3a0003;
337
+ --surface-error-subtle: #410004;
331
338
  --surface-error-default: #ef4444;
332
- --surface-info-subtle: #001d2e;
339
+ --surface-info-subtle: #002437;
333
340
  --surface-info-default: #0ea5e9;
341
+ --surface-elev-0: #07090e;
342
+ --surface-elev-1: #171b22;
343
+ --surface-elev-2: #292e38;
344
+ --surface-elev-3: #3d424d;
345
+ --surface-elev-4: #505561;
334
346
  }
335
347
  }
336
348
 
@@ -364,7 +376,7 @@
364
376
  --interactive-secondary-text: #f4f5f7;
365
377
  --interactive-secondary-border: #505561;
366
378
  --interactive-destructive-bg: #ef4444;
367
- --interactive-destructive-bg-hover: #a30016;
379
+ --interactive-destructive-bg-hover: #c3041e;
368
380
  --interactive-destructive-text: #ffffff;
369
381
  --interactive-ghost-bg: #292e38;
370
382
  --interactive-ghost-bg-hover: #3d424d;
@@ -376,15 +388,15 @@
376
388
  @media (prefers-color-scheme: dark) {
377
389
  .modern-minimal-theme:not(.light) {
378
390
  --color-primary-50: #e7fbf0;
379
- --color-primary-100: #dcfdeb;
380
- --color-primary-200: #ceffe5;
381
- --color-primary-300: #c0ffde;
382
- --color-primary-400: #aaffd5;
391
+ --color-primary-100: #d7f7e6;
392
+ --color-primary-200: #b8f4d5;
393
+ --color-primary-300: #8aecbd;
394
+ --color-primary-400: #4fdca1;
383
395
  --color-primary-500: #02cd8d;
384
- --color-primary-600: #006644;
385
- --color-primary-700: #005034;
386
- --color-primary-800: #003823;
387
- --color-primary-900: #002113;
396
+ --color-primary-600: #029868;
397
+ --color-primary-700: #00754f;
398
+ --color-primary-800: #004f34;
399
+ --color-primary-900: #002c1b;
388
400
  --color-primary-950: #000d06;
389
401
  }
390
402
  }
@@ -397,15 +409,15 @@ html:not(.dark) .modern-minimal-theme {
397
409
  --text-primary: rgba(0, 0, 0, 0.9);
398
410
  --text-secondary: rgba(0, 0, 0, 0.55);
399
411
  --text-tertiary: rgba(0, 0, 0, 0.55);
400
- --text-disabled: #e2e8f3;
412
+ --text-disabled: #b2b7c2;
401
413
  --text-inverse: #ffffff;
402
- --text-inverse-secondary: #eaeef5;
403
- --text-link: #016643;
404
- --text-link-hover: #005033;
405
- --text-success: #005120;
406
- --text-warning: #5e3900;
407
- --text-error: #81000f;
408
- --text-info: #004869;
414
+ --text-inverse-secondary: #d1d4db;
415
+ --text-link: #018e5f;
416
+ --text-link-hover: #016e48;
417
+ --text-success: #017231;
418
+ --text-warning: #8d5800;
419
+ --text-error: #990015;
420
+ --text-info: #005f88;
409
421
  }
410
422
 
411
423
 
@@ -415,16 +427,16 @@ html:not(.dark) .modern-minimal-theme {
415
427
  --surface-card: #FFFFFF;
416
428
  --surface-popover: #FFFFFF;
417
429
  --surface-subtle: #f4f5f7;
418
- --surface-muted: #f0f2f6;
430
+ --surface-muted: #e6e8ec;
419
431
  --surface-overlay: #171b22;
420
432
  --surface-interactive-default: #ffffff;
421
433
  --surface-interactive-hover: #f4f5f7;
422
- --surface-interactive-active: #f0f2f6;
434
+ --surface-interactive-active: #e6e8ec;
423
435
  --surface-interactive-disabled: #f4f5f7;
424
- --surface-selected: #ddfceb;
436
+ --surface-selected: #d7f6e4;
425
437
  --surface-accent-subtle: #e8faf0;
426
438
  --surface-accent-default: #04bf81;
427
- --surface-accent-strong: #016643;
439
+ --surface-accent-strong: #018e5f;
428
440
  --surface-success-subtle: #e8fbeb;
429
441
  --surface-success-default: #22c55e;
430
442
  --surface-warning-subtle: #fff3e6;
@@ -433,16 +445,21 @@ html:not(.dark) .modern-minimal-theme {
433
445
  --surface-error-default: #ef4444;
434
446
  --surface-info-subtle: #ecf7ff;
435
447
  --surface-info-default: #0ea5e9;
448
+ --surface-elev-0: #ffffff;
449
+ --surface-elev-1: #f4f5f7;
450
+ --surface-elev-2: #e6e8ec;
451
+ --surface-elev-3: #d1d4db;
452
+ --surface-elev-4: #b2b7c2;
436
453
  }
437
454
 
438
455
 
439
456
  /* --- Adaptive: Border (light) --- */
440
457
  html:not(.dark) .modern-minimal-theme {
441
- --border-default: #eaeef5;
442
- --border-muted: #f0f2f6;
443
- --border-strong: #e2e8f3;
458
+ --border-default: #d1d4db;
459
+ --border-muted: #e6e8ec;
460
+ --border-strong: #b2b7c2;
444
461
  --border-focus: #04bf81;
445
- --border-disabled: #f0f2f6;
462
+ --border-disabled: #e6e8ec;
446
463
  --border-success: #22c55e;
447
464
  --border-warning: #f59e0b;
448
465
  --border-error: #ef4444;
@@ -452,20 +469,20 @@ html:not(.dark) .modern-minimal-theme {
452
469
 
453
470
  /* --- Adaptive: Interactive (light) --- */
454
471
  html:not(.dark) .modern-minimal-theme {
455
- --interactive-primary-bg: #016643;
456
- --interactive-primary-bg-hover: #005033;
457
- --interactive-primary-bg-active: #003823;
472
+ --interactive-primary-bg: #018e5f;
473
+ --interactive-primary-bg-hover: #016e48;
474
+ --interactive-primary-bg-active: #004a30;
458
475
  --interactive-primary-text: #ffffff;
459
476
  --interactive-secondary-bg: #ffffff;
460
477
  --interactive-secondary-bg-hover: #f4f5f7;
461
- --interactive-secondary-bg-active: #f0f2f6;
478
+ --interactive-secondary-bg-active: #e6e8ec;
462
479
  --interactive-secondary-text: #171b22;
463
- --interactive-secondary-border: #e2e8f3;
464
- --interactive-destructive-bg: #a30016;
465
- --interactive-destructive-bg-hover: #81000f;
480
+ --interactive-secondary-border: #b2b7c2;
481
+ --interactive-destructive-bg: #c3041e;
482
+ --interactive-destructive-bg-hover: #990015;
466
483
  --interactive-destructive-text: #ffffff;
467
484
  --interactive-ghost-bg: #ffffff;
468
- --interactive-ghost-bg-hover: #f0f2f6;
485
+ --interactive-ghost-bg-hover: #e6e8ec;
469
486
  }
470
487
 
471
488
 
@@ -496,17 +513,17 @@ html:not(.dark) .modern-minimal-theme {
496
513
  --color-fd-foreground: rgba(0, 0, 0, 0.9);
497
514
  --color-fd-card: #FFFFFF;
498
515
  --color-fd-card-foreground: rgba(0, 0, 0, 0.9);
499
- --color-fd-border: #eaeef5;
500
- --color-fd-muted: #f0f2f6;
516
+ --color-fd-border: #d1d4db;
517
+ --color-fd-muted: #e6e8ec;
501
518
  --color-fd-muted-foreground: rgba(0, 0, 0, 0.55);
502
519
  --color-fd-accent: #04bf81;
503
520
  --color-fd-accent-foreground: #ffffff;
504
521
  --color-fd-primary: #04bf81;
505
522
  --color-fd-primary-foreground: #ffffff;
506
- --color-fd-secondary: #f0f2f6;
523
+ --color-fd-secondary: #e6e8ec;
507
524
  --color-fd-secondary-foreground: rgba(0, 0, 0, 0.9);
508
525
  --color-fd-popover: #FFFFFF;
509
526
  --color-fd-popover-foreground: rgba(0, 0, 0, 0.9);
510
527
  --color-fd-ring: #04bf81;
511
528
  }
512
-
529
+ }