@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/neutral.css CHANGED
@@ -1,4 +1,6 @@
1
+ @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
1
2
 
3
+ @layer visor-adaptive {
2
4
  /* ── Section 1: Shared tokens (mode-independent) ── */
3
5
 
4
6
  /* --- Primitive: Colors --- */
@@ -12,32 +14,32 @@
12
14
  --color-white: #ffffff;
13
15
  --color-black: #000000;
14
16
  --color-primary-50: #eaf8fb;
15
- --color-primary-100: #e0f8fd;
16
- --color-primary-200: #d2f7ff;
17
- --color-primary-300: #c3f4ff;
18
- --color-primary-400: #abf0ff;
17
+ --color-primary-100: #d7eff5;
18
+ --color-primary-200: #b7e3ed;
19
+ --color-primary-300: #89cfde;
20
+ --color-primary-400: #4fb0c3;
19
21
  --color-primary-500: #1798ad;
20
- --color-primary-600: #02606f;
21
- --color-primary-700: #024b57;
22
- --color-primary-800: #00343d;
23
- --color-primary-900: #001f25;
22
+ --color-primary-600: #037283;
23
+ --color-primary-700: #015866;
24
+ --color-primary-800: #013d46;
25
+ --color-primary-900: #002329;
24
26
  --color-primary-950: #000c0f;
25
27
  --color-accent-50: #eaf8fb;
26
- --color-accent-100: #e0f8fd;
27
- --color-accent-200: #d2f7ff;
28
- --color-accent-300: #c3f4ff;
29
- --color-accent-400: #abf0ff;
28
+ --color-accent-100: #d7eff5;
29
+ --color-accent-200: #b7e3ed;
30
+ --color-accent-300: #89cfde;
31
+ --color-accent-400: #4fb0c3;
30
32
  --color-accent-500: #1798ad;
31
- --color-accent-600: #02606f;
32
- --color-accent-700: #024b57;
33
- --color-accent-800: #00343d;
34
- --color-accent-900: #001f25;
33
+ --color-accent-600: #037283;
34
+ --color-accent-700: #015866;
35
+ --color-accent-800: #013d46;
36
+ --color-accent-900: #002329;
35
37
  --color-accent-950: #000c0f;
36
38
  --color-neutral-50: #f5f5f6;
37
- --color-neutral-100: #f2f2f4;
38
- --color-neutral-200: #ededf2;
39
- --color-neutral-300: #e7e7ee;
40
- --color-neutral-400: #dedee7;
39
+ --color-neutral-100: #e7e7ea;
40
+ --color-neutral-200: #d4d4d8;
41
+ --color-neutral-300: #b6b7bd;
42
+ --color-neutral-400: #8e8e97;
41
43
  --color-neutral-500: #71717a;
42
44
  --color-neutral-600: #54545d;
43
45
  --color-neutral-700: #41414a;
@@ -45,29 +47,29 @@
45
47
  --color-neutral-900: #1a1a1f;
46
48
  --color-neutral-950: #09090c;
47
49
  --color-success-50: #e8fbeb;
48
- --color-success-100: #defde3;
50
+ --color-success-100: #d8f7dc;
49
51
  --color-success-500: #22c55e;
50
- --color-success-600: #00672b;
51
- --color-success-700: #005120;
52
- --color-success-900: #002209;
52
+ --color-success-600: #019341;
53
+ --color-success-700: #017231;
54
+ --color-success-900: #002b0e;
53
55
  --color-warning-50: #fff3e6;
54
- --color-warning-100: #fff1e3;
56
+ --color-warning-100: #ffebd5;
55
57
  --color-warning-500: #f59e0b;
56
- --color-warning-600: #774a01;
57
- --color-warning-700: #5e3900;
58
- --color-warning-900: #281600;
58
+ --color-warning-600: #b77401;
59
+ --color-warning-700: #8d5800;
60
+ --color-warning-900: #361f00;
59
61
  --color-error-50: #fff2f0;
60
- --color-error-100: #ffefed;
62
+ --color-error-100: #ffe3e0;
61
63
  --color-error-500: #ef4444;
62
- --color-error-600: #a30016;
63
- --color-error-700: #81000f;
64
- --color-error-900: #3a0003;
64
+ --color-error-600: #c3041e;
65
+ --color-error-700: #990015;
66
+ --color-error-900: #410004;
65
67
  --color-info-50: #ecf7ff;
66
- --color-info-100: #e8f5ff;
68
+ --color-info-100: #daf0ff;
67
69
  --color-info-500: #0ea5e9;
68
- --color-info-600: #005c85;
69
- --color-info-700: #004869;
70
- --color-info-900: #001d2e;
70
+ --color-info-600: #017baf;
71
+ --color-info-700: #005f88;
72
+ --color-info-900: #002437;
71
73
  }
72
74
 
73
75
 
@@ -180,14 +182,14 @@
180
182
 
181
183
  /* --- Adaptive: Text (dark) — manual toggle --- */
182
184
  .dark .neutral-theme {
183
- --text-primary: #fafafa;
184
- --text-secondary: #a1a1aa;
185
- --text-tertiary: #808080;
185
+ --text-primary: #f5f5f6;
186
+ --text-secondary: #b6b7bd;
187
+ --text-tertiary: #8e8e97;
186
188
  --text-disabled: #54545d;
187
189
  --text-inverse: #1a1a1f;
188
190
  --text-inverse-secondary: #41414a;
189
191
  --text-link: #67e8f9;
190
- --text-link-hover: #c3f4ff;
192
+ --text-link-hover: #89cfde;
191
193
  --text-success: #22c55e;
192
194
  --text-warning: #f59e0b;
193
195
  --text-error: #ef4444;
@@ -201,24 +203,29 @@
201
203
  --surface-card: #18181b;
202
204
  --surface-popover: #18181b;
203
205
  --surface-subtle: #2d2d34;
204
- --surface-muted: #41414a;
206
+ --surface-muted: #1f1f23;
205
207
  --surface-overlay: #09090c;
206
208
  --surface-interactive-default: #2d2d34;
207
209
  --surface-interactive-hover: #41414a;
208
210
  --surface-interactive-active: #54545d;
209
211
  --surface-interactive-disabled: #2d2d34;
210
- --surface-selected: #00343d;
211
- --surface-accent-subtle: #001f25;
212
+ --surface-selected: #013d46;
213
+ --surface-accent-subtle: #002329;
212
214
  --surface-accent-default: #1798ad;
213
- --surface-accent-strong: #abf0ff;
214
- --surface-success-subtle: #002209;
215
+ --surface-accent-strong: #4fb0c3;
216
+ --surface-success-subtle: #002b0e;
215
217
  --surface-success-default: #22c55e;
216
- --surface-warning-subtle: #281600;
218
+ --surface-warning-subtle: #361f00;
217
219
  --surface-warning-default: #f59e0b;
218
- --surface-error-subtle: #3a0003;
220
+ --surface-error-subtle: #410004;
219
221
  --surface-error-default: #ef4444;
220
- --surface-info-subtle: #001d2e;
222
+ --surface-info-subtle: #002437;
221
223
  --surface-info-default: #0ea5e9;
224
+ --surface-elev-0: #09090c;
225
+ --surface-elev-1: #1a1a1f;
226
+ --surface-elev-2: #2d2d34;
227
+ --surface-elev-3: #41414a;
228
+ --surface-elev-4: #54545d;
222
229
  }
223
230
 
224
231
 
@@ -239,8 +246,8 @@
239
246
  /* --- Adaptive: Interactive (dark) — manual toggle --- */
240
247
  .dark .neutral-theme {
241
248
  --interactive-primary-bg: #1798ad;
242
- --interactive-primary-bg-hover: #abf0ff;
243
- --interactive-primary-bg-active: #c3f4ff;
249
+ --interactive-primary-bg-hover: #4fb0c3;
250
+ --interactive-primary-bg-active: #89cfde;
244
251
  --interactive-primary-text: #ffffff;
245
252
  --interactive-secondary-bg: #2d2d34;
246
253
  --interactive-secondary-bg-hover: #41414a;
@@ -248,7 +255,7 @@
248
255
  --interactive-secondary-text: #f5f5f6;
249
256
  --interactive-secondary-border: #54545d;
250
257
  --interactive-destructive-bg: #ef4444;
251
- --interactive-destructive-bg-hover: #a30016;
258
+ --interactive-destructive-bg-hover: #c3041e;
252
259
  --interactive-destructive-text: #ffffff;
253
260
  --interactive-ghost-bg: #2d2d34;
254
261
  --interactive-ghost-bg-hover: #41414a;
@@ -258,14 +265,14 @@
258
265
  /* --- Adaptive: Text (dark) — prefers-color-scheme --- */
259
266
  @media (prefers-color-scheme: dark) {
260
267
  .neutral-theme:not(.light) {
261
- --text-primary: #fafafa;
262
- --text-secondary: #a1a1aa;
263
- --text-tertiary: #808080;
268
+ --text-primary: #f5f5f6;
269
+ --text-secondary: #b6b7bd;
270
+ --text-tertiary: #8e8e97;
264
271
  --text-disabled: #54545d;
265
272
  --text-inverse: #1a1a1f;
266
273
  --text-inverse-secondary: #41414a;
267
274
  --text-link: #67e8f9;
268
- --text-link-hover: #c3f4ff;
275
+ --text-link-hover: #89cfde;
269
276
  --text-success: #22c55e;
270
277
  --text-warning: #f59e0b;
271
278
  --text-error: #ef4444;
@@ -281,24 +288,29 @@
281
288
  --surface-card: #18181b;
282
289
  --surface-popover: #18181b;
283
290
  --surface-subtle: #2d2d34;
284
- --surface-muted: #41414a;
291
+ --surface-muted: #1f1f23;
285
292
  --surface-overlay: #09090c;
286
293
  --surface-interactive-default: #2d2d34;
287
294
  --surface-interactive-hover: #41414a;
288
295
  --surface-interactive-active: #54545d;
289
296
  --surface-interactive-disabled: #2d2d34;
290
- --surface-selected: #00343d;
291
- --surface-accent-subtle: #001f25;
297
+ --surface-selected: #013d46;
298
+ --surface-accent-subtle: #002329;
292
299
  --surface-accent-default: #1798ad;
293
- --surface-accent-strong: #abf0ff;
294
- --surface-success-subtle: #002209;
300
+ --surface-accent-strong: #4fb0c3;
301
+ --surface-success-subtle: #002b0e;
295
302
  --surface-success-default: #22c55e;
296
- --surface-warning-subtle: #281600;
303
+ --surface-warning-subtle: #361f00;
297
304
  --surface-warning-default: #f59e0b;
298
- --surface-error-subtle: #3a0003;
305
+ --surface-error-subtle: #410004;
299
306
  --surface-error-default: #ef4444;
300
- --surface-info-subtle: #001d2e;
307
+ --surface-info-subtle: #002437;
301
308
  --surface-info-default: #0ea5e9;
309
+ --surface-elev-0: #09090c;
310
+ --surface-elev-1: #1a1a1f;
311
+ --surface-elev-2: #2d2d34;
312
+ --surface-elev-3: #41414a;
313
+ --surface-elev-4: #54545d;
302
314
  }
303
315
  }
304
316
 
@@ -323,8 +335,8 @@
323
335
  @media (prefers-color-scheme: dark) {
324
336
  .neutral-theme:not(.light) {
325
337
  --interactive-primary-bg: #1798ad;
326
- --interactive-primary-bg-hover: #abf0ff;
327
- --interactive-primary-bg-active: #c3f4ff;
338
+ --interactive-primary-bg-hover: #4fb0c3;
339
+ --interactive-primary-bg-active: #89cfde;
328
340
  --interactive-primary-text: #ffffff;
329
341
  --interactive-secondary-bg: #2d2d34;
330
342
  --interactive-secondary-bg-hover: #41414a;
@@ -332,7 +344,7 @@
332
344
  --interactive-secondary-text: #f5f5f6;
333
345
  --interactive-secondary-border: #54545d;
334
346
  --interactive-destructive-bg: #ef4444;
335
- --interactive-destructive-bg-hover: #a30016;
347
+ --interactive-destructive-bg-hover: #c3041e;
336
348
  --interactive-destructive-text: #ffffff;
337
349
  --interactive-ghost-bg: #2d2d34;
338
350
  --interactive-ghost-bg-hover: #41414a;
@@ -344,18 +356,18 @@
344
356
 
345
357
  /* --- Adaptive: Text (light) --- */
346
358
  html:not(.dark) .neutral-theme {
347
- --text-primary: #18181b;
348
- --text-secondary: #52525b;
349
- --text-tertiary: #737373;
350
- --text-disabled: #e7e7ee;
359
+ --text-primary: #1a1a1f;
360
+ --text-secondary: #41414a;
361
+ --text-tertiary: #54545d;
362
+ --text-disabled: #b6b7bd;
351
363
  --text-inverse: #ffffff;
352
- --text-inverse-secondary: #ededf2;
364
+ --text-inverse-secondary: #d4d4d8;
353
365
  --text-link: #0891b2;
354
- --text-link-hover: #024b57;
355
- --text-success: #005120;
356
- --text-warning: #5e3900;
357
- --text-error: #81000f;
358
- --text-info: #004869;
366
+ --text-link-hover: #015866;
367
+ --text-success: #017231;
368
+ --text-warning: #8d5800;
369
+ --text-error: #990015;
370
+ --text-info: #005f88;
359
371
  }
360
372
 
361
373
 
@@ -365,16 +377,16 @@ html:not(.dark) .neutral-theme {
365
377
  --surface-card: #ffffff;
366
378
  --surface-popover: #ffffff;
367
379
  --surface-subtle: #f5f5f6;
368
- --surface-muted: #f2f2f4;
380
+ --surface-muted: #e7e7ea;
369
381
  --surface-overlay: #1a1a1f;
370
382
  --surface-interactive-default: #ffffff;
371
383
  --surface-interactive-hover: #f5f5f6;
372
- --surface-interactive-active: #f2f2f4;
384
+ --surface-interactive-active: #e7e7ea;
373
385
  --surface-interactive-disabled: #f5f5f6;
374
- --surface-selected: #e0f8fd;
386
+ --surface-selected: #d7eff5;
375
387
  --surface-accent-subtle: #eaf8fb;
376
388
  --surface-accent-default: #1798ad;
377
- --surface-accent-strong: #02606f;
389
+ --surface-accent-strong: #037283;
378
390
  --surface-success-subtle: #e8fbeb;
379
391
  --surface-success-default: #22c55e;
380
392
  --surface-warning-subtle: #fff3e6;
@@ -383,16 +395,21 @@ html:not(.dark) .neutral-theme {
383
395
  --surface-error-default: #ef4444;
384
396
  --surface-info-subtle: #ecf7ff;
385
397
  --surface-info-default: #0ea5e9;
398
+ --surface-elev-0: #ffffff;
399
+ --surface-elev-1: #f5f5f6;
400
+ --surface-elev-2: #e7e7ea;
401
+ --surface-elev-3: #d4d4d8;
402
+ --surface-elev-4: #b6b7bd;
386
403
  }
387
404
 
388
405
 
389
406
  /* --- Adaptive: Border (light) --- */
390
407
  html:not(.dark) .neutral-theme {
391
- --border-default: #ededf2;
392
- --border-muted: #f2f2f4;
393
- --border-strong: #e7e7ee;
408
+ --border-default: #d4d4d8;
409
+ --border-muted: #e7e7ea;
410
+ --border-strong: #b6b7bd;
394
411
  --border-focus: #1798ad;
395
- --border-disabled: #f2f2f4;
412
+ --border-disabled: #e7e7ea;
396
413
  --border-success: #22c55e;
397
414
  --border-warning: #f59e0b;
398
415
  --border-error: #ef4444;
@@ -403,39 +420,39 @@ html:not(.dark) .neutral-theme {
403
420
  /* --- Adaptive: Interactive (light) --- */
404
421
  html:not(.dark) .neutral-theme {
405
422
  --interactive-primary-bg: #1798ad;
406
- --interactive-primary-bg-hover: #024b57;
407
- --interactive-primary-bg-active: #00343d;
423
+ --interactive-primary-bg-hover: #015866;
424
+ --interactive-primary-bg-active: #013d46;
408
425
  --interactive-primary-text: #ffffff;
409
426
  --interactive-secondary-bg: #ffffff;
410
427
  --interactive-secondary-bg-hover: #f5f5f6;
411
- --interactive-secondary-bg-active: #f2f2f4;
428
+ --interactive-secondary-bg-active: #e7e7ea;
412
429
  --interactive-secondary-text: #1a1a1f;
413
- --interactive-secondary-border: #e7e7ee;
414
- --interactive-destructive-bg: #a30016;
415
- --interactive-destructive-bg-hover: #81000f;
430
+ --interactive-secondary-border: #b6b7bd;
431
+ --interactive-destructive-bg: #c3041e;
432
+ --interactive-destructive-bg-hover: #990015;
416
433
  --interactive-destructive-text: #ffffff;
417
434
  --interactive-ghost-bg: #ffffff;
418
- --interactive-ghost-bg-hover: #f2f2f4;
435
+ --interactive-ghost-bg-hover: #e7e7ea;
419
436
  }
420
437
 
421
438
 
422
439
  /* --- Fumadocs bridge: dark --- */
423
440
  .dark .neutral-theme {
424
441
  --color-fd-background: #09090b;
425
- --color-fd-foreground: #fafafa;
442
+ --color-fd-foreground: #f5f5f6;
426
443
  --color-fd-card: #18181b;
427
- --color-fd-card-foreground: #fafafa;
444
+ --color-fd-card-foreground: #f5f5f6;
428
445
  --color-fd-border: #41414a;
429
- --color-fd-muted: #41414a;
430
- --color-fd-muted-foreground: #a1a1aa;
446
+ --color-fd-muted: #1f1f23;
447
+ --color-fd-muted-foreground: #b6b7bd;
431
448
  --color-fd-accent: #1798ad;
432
449
  --color-fd-accent-foreground: #ffffff;
433
450
  --color-fd-primary: #1798ad;
434
451
  --color-fd-primary-foreground: #ffffff;
435
- --color-fd-secondary: #41414a;
436
- --color-fd-secondary-foreground: #fafafa;
452
+ --color-fd-secondary: #1f1f23;
453
+ --color-fd-secondary-foreground: #f5f5f6;
437
454
  --color-fd-popover: #18181b;
438
- --color-fd-popover-foreground: #fafafa;
455
+ --color-fd-popover-foreground: #f5f5f6;
439
456
  --color-fd-ring: #1798ad;
440
457
  }
441
458
 
@@ -443,20 +460,20 @@ html:not(.dark) .neutral-theme {
443
460
  /* --- Fumadocs bridge: light --- */
444
461
  html:not(.dark) .neutral-theme {
445
462
  --color-fd-background: #ffffff;
446
- --color-fd-foreground: #18181b;
463
+ --color-fd-foreground: #1a1a1f;
447
464
  --color-fd-card: #ffffff;
448
- --color-fd-card-foreground: #18181b;
449
- --color-fd-border: #ededf2;
450
- --color-fd-muted: #f2f2f4;
451
- --color-fd-muted-foreground: #52525b;
465
+ --color-fd-card-foreground: #1a1a1f;
466
+ --color-fd-border: #d4d4d8;
467
+ --color-fd-muted: #e7e7ea;
468
+ --color-fd-muted-foreground: #41414a;
452
469
  --color-fd-accent: #1798ad;
453
470
  --color-fd-accent-foreground: #ffffff;
454
471
  --color-fd-primary: #1798ad;
455
472
  --color-fd-primary-foreground: #ffffff;
456
- --color-fd-secondary: #f2f2f4;
457
- --color-fd-secondary-foreground: #18181b;
473
+ --color-fd-secondary: #e7e7ea;
474
+ --color-fd-secondary-foreground: #1a1a1f;
458
475
  --color-fd-popover: #ffffff;
459
- --color-fd-popover-foreground: #18181b;
476
+ --color-fd-popover-foreground: #1a1a1f;
460
477
  --color-fd-ring: #1798ad;
461
478
  }
462
-
479
+ }