@loworbitstudio/visor-core 0.6.0 → 0.8.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 (5) hide show
  1. package/dist/themes/blackout.css +137 -135
  2. package/dist/themes/modern-minimal.css +103 -103
  3. package/dist/themes/neutral.css +110 -110
  4. package/dist/themes/space.css +148 -144
  5. package/package.json +2 -2
package/dist/themes/space.css CHANGED
@@ -1,3 +1,7 @@
1
+ @import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,700&display=swap");
2
+
3
+ @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400&display=swap");
4
+
1
5
  @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
2
6
 
3
7
  @layer visor-adaptive {
@@ -14,62 +18,62 @@
14
18
  --color-white: #ffffff;
15
19
  --color-black: #000000;
16
20
  --color-primary-50: #f2f5ff;
17
- --color-primary-100: #eef2ff;
18
- --color-primary-200: #eaeeff;
19
- --color-primary-300: #e2e9ff;
20
- --color-primary-400: #d8e1ff;
21
+ --color-primary-100: #e2e9fe;
22
+ --color-primary-200: #ccd7ff;
23
+ --color-primary-300: #aabcff;
24
+ --color-primary-400: #7b93ff;
21
25
  --color-primary-500: #5b6fff;
22
- --color-primary-600: #353ac8;
23
- --color-primary-700: #281fb0;
24
- --color-primary-800: #1b0b86;
25
- --color-primary-900: #0e005a;
26
+ --color-primary-600: #3f49d7;
27
+ --color-primary-700: #2e2dbc;
28
+ --color-primary-800: #1e168d;
29
+ --color-primary-900: #100061;
26
30
  --color-primary-950: #04002d;
27
31
  --color-accent-50: #f2f5ff;
28
- --color-accent-100: #eef2ff;
29
- --color-accent-200: #eaeeff;
30
- --color-accent-300: #e2e9ff;
31
- --color-accent-400: #d8e1ff;
32
+ --color-accent-100: #e2e9fe;
33
+ --color-accent-200: #ccd7ff;
34
+ --color-accent-300: #aabcff;
35
+ --color-accent-400: #7b93ff;
32
36
  --color-accent-500: #5b6fff;
33
- --color-accent-600: #353ac8;
34
- --color-accent-700: #281fb0;
35
- --color-accent-800: #1b0b86;
36
- --color-accent-900: #0e005a;
37
+ --color-accent-600: #3f49d7;
38
+ --color-accent-700: #2e2dbc;
39
+ --color-accent-800: #1e168d;
40
+ --color-accent-900: #100061;
37
41
  --color-accent-950: #04002d;
38
42
  --color-neutral-50: #f5f5f8;
39
- --color-neutral-100: #f1f1f8;
40
- --color-neutral-200: #ecedf8;
41
- --color-neutral-300: #e5e6f5;
42
- --color-neutral-400: #dcdceb;
43
- --color-neutral-500: #6c6c79;
44
- --color-neutral-600: #545460;
45
- --color-neutral-700: #41414d;
46
- --color-neutral-800: #2d2d38;
47
- --color-neutral-900: #191924;
43
+ --color-neutral-100: #e7e7ed;
44
+ --color-neutral-200: #d2d2dd;
45
+ --color-neutral-300: #b4b4c2;
46
+ --color-neutral-400: #8a8a98;
47
+ --color-neutral-500: #6b6b80;
48
+ --color-neutral-600: #51515d;
49
+ --color-neutral-700: #3f3f4b;
50
+ --color-neutral-800: #2b2b36;
51
+ --color-neutral-900: #191923;
48
52
  --color-neutral-950: #080810;
49
53
  --color-success-50: #e8fbeb;
50
- --color-success-100: #defde3;
54
+ --color-success-100: #d8f7dc;
51
55
  --color-success-500: #22c55e;
52
- --color-success-600: #00672b;
53
- --color-success-700: #005120;
54
- --color-success-900: #002209;
56
+ --color-success-600: #019341;
57
+ --color-success-700: #017231;
58
+ --color-success-900: #002b0e;
55
59
  --color-warning-50: #fff3e6;
56
- --color-warning-100: #fff1e3;
60
+ --color-warning-100: #ffebd5;
57
61
  --color-warning-500: #f59e0b;
58
- --color-warning-600: #774a01;
59
- --color-warning-700: #5e3900;
60
- --color-warning-900: #281600;
62
+ --color-warning-600: #b77401;
63
+ --color-warning-700: #8d5800;
64
+ --color-warning-900: #361f00;
61
65
  --color-error-50: #fff2f0;
62
- --color-error-100: #ffefed;
66
+ --color-error-100: #ffe3e0;
63
67
  --color-error-500: #ef4444;
64
- --color-error-600: #a30016;
65
- --color-error-700: #81000f;
66
- --color-error-900: #3a0003;
68
+ --color-error-600: #c3041e;
69
+ --color-error-700: #990015;
70
+ --color-error-900: #410004;
67
71
  --color-info-50: #ecf7ff;
68
- --color-info-100: #e8f5ff;
72
+ --color-info-100: #daf0ff;
69
73
  --color-info-500: #0ea5e9;
70
- --color-info-600: #005c85;
71
- --color-info-700: #004869;
72
- --color-info-900: #001d2e;
74
+ --color-info-600: #017baf;
75
+ --color-info-700: #005f88;
76
+ --color-info-900: #002437;
73
77
  }
74
78
 
75
79
 
@@ -108,9 +112,9 @@
108
112
  .space-theme {
109
113
  --font-display: Satoshi;
110
114
  --font-sans: Satoshi;
111
- --font-heading: var(--font-sans);
115
+ --font-heading: Satoshi;
112
116
  --font-body: Satoshi;
113
- --font-mono: Monaspace Neon;
117
+ --font-mono: Source Code Pro;
114
118
  --font-size-xs: 0.75rem; /* 12px */
115
119
  --font-size-sm: 0.875rem; /* 14px */
116
120
  --font-size-base: 1rem; /* 16px */
@@ -185,11 +189,11 @@
185
189
  --text-primary: #e8e8f0;
186
190
  --text-secondary: rgba(232, 232, 240, 0.72);
187
191
  --text-tertiary: rgba(232, 232, 240, 0.5);
188
- --text-disabled: #545460;
189
- --text-inverse: #191924;
190
- --text-inverse-secondary: #41414d;
192
+ --text-disabled: #51515d;
193
+ --text-inverse: #191923;
194
+ --text-inverse-secondary: #3f3f4b;
191
195
  --text-link: #8b9fff;
192
- --text-link-hover: #e2e9ff;
196
+ --text-link-hover: #aabcff;
193
197
  --text-success: #22c55e;
194
198
  --text-warning: #f59e0b;
195
199
  --text-error: #ef4444;
@@ -202,40 +206,40 @@
202
206
  --surface-page: #080810;
203
207
  --surface-card: #0e0e18;
204
208
  --surface-popover: #0e0e18;
205
- --surface-subtle: #2d2d38;
206
- --surface-muted: #41414d;
209
+ --surface-subtle: #2b2b36;
210
+ --surface-muted: #0b0b14;
207
211
  --surface-overlay: #080810;
208
- --surface-interactive-default: #2d2d38;
209
- --surface-interactive-hover: #41414d;
210
- --surface-interactive-active: #545460;
211
- --surface-interactive-disabled: #2d2d38;
212
- --surface-selected: #1b0b86;
213
- --surface-accent-subtle: #0e005a;
212
+ --surface-interactive-default: #2b2b36;
213
+ --surface-interactive-hover: #3f3f4b;
214
+ --surface-interactive-active: #51515d;
215
+ --surface-interactive-disabled: #2b2b36;
216
+ --surface-selected: #1e168d;
217
+ --surface-accent-subtle: #100061;
214
218
  --surface-accent-default: #5b6fff;
215
- --surface-accent-strong: #d8e1ff;
216
- --surface-success-subtle: #002209;
219
+ --surface-accent-strong: #7b93ff;
220
+ --surface-success-subtle: #002b0e;
217
221
  --surface-success-default: #22c55e;
218
- --surface-warning-subtle: #281600;
222
+ --surface-warning-subtle: #361f00;
219
223
  --surface-warning-default: #f59e0b;
220
- --surface-error-subtle: #3a0003;
224
+ --surface-error-subtle: #410004;
221
225
  --surface-error-default: #ef4444;
222
- --surface-info-subtle: #001d2e;
226
+ --surface-info-subtle: #002437;
223
227
  --surface-info-default: #0ea5e9;
224
228
  --surface-elev-0: #080810;
225
- --surface-elev-1: #191924;
226
- --surface-elev-2: #2d2d38;
227
- --surface-elev-3: #41414d;
228
- --surface-elev-4: #545460;
229
+ --surface-elev-1: #191923;
230
+ --surface-elev-2: #2b2b36;
231
+ --surface-elev-3: #3f3f4b;
232
+ --surface-elev-4: #51515d;
229
233
  }
230
234
 
231
235
 
232
236
  /* --- Adaptive: Border (dark) — manual toggle --- */
233
237
  .dark .space-theme {
234
- --border-default: #41414d;
235
- --border-muted: #2d2d38;
236
- --border-strong: #545460;
238
+ --border-default: #3f3f4b;
239
+ --border-muted: #2b2b36;
240
+ --border-strong: #51515d;
237
241
  --border-focus: #5b6fff;
238
- --border-disabled: #2d2d38;
242
+ --border-disabled: #2b2b36;
239
243
  --border-success: #22c55e;
240
244
  --border-warning: #f59e0b;
241
245
  --border-error: #ef4444;
@@ -246,19 +250,19 @@
246
250
  /* --- Adaptive: Interactive (dark) — manual toggle --- */
247
251
  .dark .space-theme {
248
252
  --interactive-primary-bg: #5b6fff;
249
- --interactive-primary-bg-hover: #d8e1ff;
250
- --interactive-primary-bg-active: #e2e9ff;
253
+ --interactive-primary-bg-hover: #7b93ff;
254
+ --interactive-primary-bg-active: #aabcff;
251
255
  --interactive-primary-text: #ffffff;
252
- --interactive-secondary-bg: #2d2d38;
253
- --interactive-secondary-bg-hover: #41414d;
254
- --interactive-secondary-bg-active: #545460;
256
+ --interactive-secondary-bg: #2b2b36;
257
+ --interactive-secondary-bg-hover: #3f3f4b;
258
+ --interactive-secondary-bg-active: #51515d;
255
259
  --interactive-secondary-text: #f5f5f8;
256
- --interactive-secondary-border: #545460;
260
+ --interactive-secondary-border: #51515d;
257
261
  --interactive-destructive-bg: #ef4444;
258
- --interactive-destructive-bg-hover: #a30016;
262
+ --interactive-destructive-bg-hover: #c3041e;
259
263
  --interactive-destructive-text: #ffffff;
260
- --interactive-ghost-bg: #2d2d38;
261
- --interactive-ghost-bg-hover: #41414d;
264
+ --interactive-ghost-bg: #2b2b36;
265
+ --interactive-ghost-bg-hover: #3f3f4b;
262
266
  }
263
267
 
264
268
 
@@ -268,11 +272,11 @@
268
272
  --text-primary: #e8e8f0;
269
273
  --text-secondary: rgba(232, 232, 240, 0.72);
270
274
  --text-tertiary: rgba(232, 232, 240, 0.5);
271
- --text-disabled: #545460;
272
- --text-inverse: #191924;
273
- --text-inverse-secondary: #41414d;
275
+ --text-disabled: #51515d;
276
+ --text-inverse: #191923;
277
+ --text-inverse-secondary: #3f3f4b;
274
278
  --text-link: #8b9fff;
275
- --text-link-hover: #e2e9ff;
279
+ --text-link-hover: #aabcff;
276
280
  --text-success: #22c55e;
277
281
  --text-warning: #f59e0b;
278
282
  --text-error: #ef4444;
@@ -287,30 +291,30 @@
287
291
  --surface-page: #080810;
288
292
  --surface-card: #0e0e18;
289
293
  --surface-popover: #0e0e18;
290
- --surface-subtle: #2d2d38;
291
- --surface-muted: #41414d;
294
+ --surface-subtle: #2b2b36;
295
+ --surface-muted: #0b0b14;
292
296
  --surface-overlay: #080810;
293
- --surface-interactive-default: #2d2d38;
294
- --surface-interactive-hover: #41414d;
295
- --surface-interactive-active: #545460;
296
- --surface-interactive-disabled: #2d2d38;
297
- --surface-selected: #1b0b86;
298
- --surface-accent-subtle: #0e005a;
297
+ --surface-interactive-default: #2b2b36;
298
+ --surface-interactive-hover: #3f3f4b;
299
+ --surface-interactive-active: #51515d;
300
+ --surface-interactive-disabled: #2b2b36;
301
+ --surface-selected: #1e168d;
302
+ --surface-accent-subtle: #100061;
299
303
  --surface-accent-default: #5b6fff;
300
- --surface-accent-strong: #d8e1ff;
301
- --surface-success-subtle: #002209;
304
+ --surface-accent-strong: #7b93ff;
305
+ --surface-success-subtle: #002b0e;
302
306
  --surface-success-default: #22c55e;
303
- --surface-warning-subtle: #281600;
307
+ --surface-warning-subtle: #361f00;
304
308
  --surface-warning-default: #f59e0b;
305
- --surface-error-subtle: #3a0003;
309
+ --surface-error-subtle: #410004;
306
310
  --surface-error-default: #ef4444;
307
- --surface-info-subtle: #001d2e;
311
+ --surface-info-subtle: #002437;
308
312
  --surface-info-default: #0ea5e9;
309
313
  --surface-elev-0: #080810;
310
- --surface-elev-1: #191924;
311
- --surface-elev-2: #2d2d38;
312
- --surface-elev-3: #41414d;
313
- --surface-elev-4: #545460;
314
+ --surface-elev-1: #191923;
315
+ --surface-elev-2: #2b2b36;
316
+ --surface-elev-3: #3f3f4b;
317
+ --surface-elev-4: #51515d;
314
318
  }
315
319
  }
316
320
 
@@ -318,11 +322,11 @@
318
322
  /* --- Adaptive: Border (dark) — prefers-color-scheme --- */
319
323
  @media (prefers-color-scheme: dark) {
320
324
  .space-theme:not(.light) {
321
- --border-default: #41414d;
322
- --border-muted: #2d2d38;
323
- --border-strong: #545460;
325
+ --border-default: #3f3f4b;
326
+ --border-muted: #2b2b36;
327
+ --border-strong: #51515d;
324
328
  --border-focus: #5b6fff;
325
- --border-disabled: #2d2d38;
329
+ --border-disabled: #2b2b36;
326
330
  --border-success: #22c55e;
327
331
  --border-warning: #f59e0b;
328
332
  --border-error: #ef4444;
@@ -335,19 +339,19 @@
335
339
  @media (prefers-color-scheme: dark) {
336
340
  .space-theme:not(.light) {
337
341
  --interactive-primary-bg: #5b6fff;
338
- --interactive-primary-bg-hover: #d8e1ff;
339
- --interactive-primary-bg-active: #e2e9ff;
342
+ --interactive-primary-bg-hover: #7b93ff;
343
+ --interactive-primary-bg-active: #aabcff;
340
344
  --interactive-primary-text: #ffffff;
341
- --interactive-secondary-bg: #2d2d38;
342
- --interactive-secondary-bg-hover: #41414d;
343
- --interactive-secondary-bg-active: #545460;
345
+ --interactive-secondary-bg: #2b2b36;
346
+ --interactive-secondary-bg-hover: #3f3f4b;
347
+ --interactive-secondary-bg-active: #51515d;
344
348
  --interactive-secondary-text: #f5f5f8;
345
- --interactive-secondary-border: #545460;
349
+ --interactive-secondary-border: #51515d;
346
350
  --interactive-destructive-bg: #ef4444;
347
- --interactive-destructive-bg-hover: #a30016;
351
+ --interactive-destructive-bg-hover: #c3041e;
348
352
  --interactive-destructive-text: #ffffff;
349
- --interactive-ghost-bg: #2d2d38;
350
- --interactive-ghost-bg-hover: #41414d;
353
+ --interactive-ghost-bg: #2b2b36;
354
+ --interactive-ghost-bg-hover: #3f3f4b;
351
355
  }
352
356
  }
353
357
 
@@ -359,15 +363,15 @@ html:not(.dark) .space-theme {
359
363
  --text-primary: #1a1630;
360
364
  --text-secondary: rgba(26, 22, 48, 0.72);
361
365
  --text-tertiary: rgba(26, 22, 48, 0.65);
362
- --text-disabled: #e5e6f5;
366
+ --text-disabled: #b4b4c2;
363
367
  --text-inverse: #ffffff;
364
- --text-inverse-secondary: #ecedf8;
368
+ --text-inverse-secondary: #d2d2dd;
365
369
  --text-link: #5b6fff;
366
- --text-link-hover: #281fb0;
367
- --text-success: #005120;
368
- --text-warning: #5e3900;
369
- --text-error: #81000f;
370
- --text-info: #004869;
370
+ --text-link-hover: #2e2dbc;
371
+ --text-success: #017231;
372
+ --text-warning: #8d5800;
373
+ --text-error: #990015;
374
+ --text-info: #005f88;
371
375
  }
372
376
 
373
377
 
@@ -377,16 +381,16 @@ html:not(.dark) .space-theme {
377
381
  --surface-card: #f2f0f8;
378
382
  --surface-popover: #f2f0f8;
379
383
  --surface-subtle: #f5f5f8;
380
- --surface-muted: #f1f1f8;
381
- --surface-overlay: #191924;
384
+ --surface-muted: #e7e7ed;
385
+ --surface-overlay: #191923;
382
386
  --surface-interactive-default: #ffffff;
383
387
  --surface-interactive-hover: #f5f5f8;
384
- --surface-interactive-active: #f1f1f8;
388
+ --surface-interactive-active: #e7e7ed;
385
389
  --surface-interactive-disabled: #f5f5f8;
386
- --surface-selected: #eef2ff;
390
+ --surface-selected: #e2e9fe;
387
391
  --surface-accent-subtle: #f2f5ff;
388
392
  --surface-accent-default: #5b6fff;
389
- --surface-accent-strong: #353ac8;
393
+ --surface-accent-strong: #3f49d7;
390
394
  --surface-success-subtle: #e8fbeb;
391
395
  --surface-success-default: #22c55e;
392
396
  --surface-warning-subtle: #fff3e6;
@@ -397,19 +401,19 @@ html:not(.dark) .space-theme {
397
401
  --surface-info-default: #0ea5e9;
398
402
  --surface-elev-0: #ffffff;
399
403
  --surface-elev-1: #f5f5f8;
400
- --surface-elev-2: #f1f1f8;
401
- --surface-elev-3: #ecedf8;
402
- --surface-elev-4: #e5e6f5;
404
+ --surface-elev-2: #e7e7ed;
405
+ --surface-elev-3: #d2d2dd;
406
+ --surface-elev-4: #b4b4c2;
403
407
  }
404
408
 
405
409
 
406
410
  /* --- Adaptive: Border (light) --- */
407
411
  html:not(.dark) .space-theme {
408
- --border-default: #ecedf8;
409
- --border-muted: #f1f1f8;
410
- --border-strong: #e5e6f5;
412
+ --border-default: #d2d2dd;
413
+ --border-muted: #e7e7ed;
414
+ --border-strong: #b4b4c2;
411
415
  --border-focus: #5b6fff;
412
- --border-disabled: #f1f1f8;
416
+ --border-disabled: #e7e7ed;
413
417
  --border-success: #22c55e;
414
418
  --border-warning: #f59e0b;
415
419
  --border-error: #ef4444;
@@ -420,19 +424,19 @@ html:not(.dark) .space-theme {
420
424
  /* --- Adaptive: Interactive (light) --- */
421
425
  html:not(.dark) .space-theme {
422
426
  --interactive-primary-bg: #5b6fff;
423
- --interactive-primary-bg-hover: #281fb0;
424
- --interactive-primary-bg-active: #1b0b86;
427
+ --interactive-primary-bg-hover: #2e2dbc;
428
+ --interactive-primary-bg-active: #1e168d;
425
429
  --interactive-primary-text: #ffffff;
426
430
  --interactive-secondary-bg: #ffffff;
427
431
  --interactive-secondary-bg-hover: #f5f5f8;
428
- --interactive-secondary-bg-active: #f1f1f8;
429
- --interactive-secondary-text: #191924;
430
- --interactive-secondary-border: #e5e6f5;
431
- --interactive-destructive-bg: #a30016;
432
- --interactive-destructive-bg-hover: #81000f;
432
+ --interactive-secondary-bg-active: #e7e7ed;
433
+ --interactive-secondary-text: #191923;
434
+ --interactive-secondary-border: #b4b4c2;
435
+ --interactive-destructive-bg: #c3041e;
436
+ --interactive-destructive-bg-hover: #990015;
433
437
  --interactive-destructive-text: #ffffff;
434
438
  --interactive-ghost-bg: #ffffff;
435
- --interactive-ghost-bg-hover: #f1f1f8;
439
+ --interactive-ghost-bg-hover: #e7e7ed;
436
440
  }
437
441
 
438
442
 
@@ -442,14 +446,14 @@ html:not(.dark) .space-theme {
442
446
  --color-fd-foreground: #e8e8f0;
443
447
  --color-fd-card: #0e0e18;
444
448
  --color-fd-card-foreground: #e8e8f0;
445
- --color-fd-border: #41414d;
446
- --color-fd-muted: #41414d;
449
+ --color-fd-border: #3f3f4b;
450
+ --color-fd-muted: #0b0b14;
447
451
  --color-fd-muted-foreground: rgba(232, 232, 240, 0.72);
448
452
  --color-fd-accent: #5b6fff;
449
453
  --color-fd-accent-foreground: #ffffff;
450
454
  --color-fd-primary: #5b6fff;
451
455
  --color-fd-primary-foreground: #ffffff;
452
- --color-fd-secondary: #41414d;
456
+ --color-fd-secondary: #0b0b14;
453
457
  --color-fd-secondary-foreground: #e8e8f0;
454
458
  --color-fd-popover: #0e0e18;
455
459
  --color-fd-popover-foreground: #e8e8f0;
@@ -463,14 +467,14 @@ html:not(.dark) .space-theme {
463
467
  --color-fd-foreground: #1a1630;
464
468
  --color-fd-card: #f2f0f8;
465
469
  --color-fd-card-foreground: #1a1630;
466
- --color-fd-border: #ecedf8;
467
- --color-fd-muted: #f1f1f8;
470
+ --color-fd-border: #d2d2dd;
471
+ --color-fd-muted: #e7e7ed;
468
472
  --color-fd-muted-foreground: rgba(26, 22, 48, 0.72);
469
473
  --color-fd-accent: #5b6fff;
470
474
  --color-fd-accent-foreground: #ffffff;
471
475
  --color-fd-primary: #5b6fff;
472
476
  --color-fd-primary-foreground: #ffffff;
473
- --color-fd-secondary: #f1f1f8;
477
+ --color-fd-secondary: #e7e7ed;
474
478
  --color-fd-secondary-foreground: #1a1630;
475
479
  --color-fd-popover: #f2f0f8;
476
480
  --color-fd-popover-foreground: #1a1630;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@loworbitstudio/visor-core",
3
- "version": "0.6.0",
3
+ "version": "0.8.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.4.0",
51
+ "@loworbitstudio/visor-theme-engine": "^0.8.0",
52
52
  "@types/node": "^22.0.0",
53
53
  "tsx": "^4.19.2",
54
54
  "typescript": "^5.7.2",