@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/blackout.css CHANGED
@@ -1,3 +1,5 @@
1
+ @import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,700&display=swap");
2
+
1
3
  @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
2
4
 
3
5
  @layer visor-adaptive {
@@ -14,62 +16,62 @@
14
16
  --color-white: #ffffff;
15
17
  --color-black: #000000;
16
18
  --color-primary-50: #f5f5f5;
17
- --color-primary-100: #f2f2f2;
18
- --color-primary-200: #ededed;
19
- --color-primary-300: #e6e6e6;
20
- --color-primary-400: #dcdcdc;
19
+ --color-primary-100: #e6e6e6;
20
+ --color-primary-200: #d1d1d1;
21
+ --color-primary-300: #b2b2b2;
22
+ --color-primary-400: #868686;
21
23
  --color-primary-500: #666666;
22
- --color-primary-600: #555555;
23
- --color-primary-700: #424242;
24
- --color-primary-800: #2e2e2e;
25
- --color-primary-900: #1b1b1b;
24
+ --color-primary-600: #4d4d4d;
25
+ --color-primary-700: #3c3c3c;
26
+ --color-primary-800: #2a2a2a;
27
+ --color-primary-900: #191919;
26
28
  --color-primary-950: #090909;
27
29
  --color-accent-50: #f5f5f5;
28
- --color-accent-100: #f2f2f2;
29
- --color-accent-200: #ededed;
30
- --color-accent-300: #e6e6e6;
31
- --color-accent-400: #dcdcdc;
30
+ --color-accent-100: #e6e6e6;
31
+ --color-accent-200: #d1d1d1;
32
+ --color-accent-300: #b2b2b2;
33
+ --color-accent-400: #868686;
32
34
  --color-accent-500: #666666;
33
- --color-accent-600: #555555;
34
- --color-accent-700: #424242;
35
- --color-accent-800: #2e2e2e;
36
- --color-accent-900: #1b1b1b;
35
+ --color-accent-600: #4d4d4d;
36
+ --color-accent-700: #3c3c3c;
37
+ --color-accent-800: #2a2a2a;
38
+ --color-accent-900: #191919;
37
39
  --color-accent-950: #090909;
38
40
  --color-neutral-50: #f5f5f5;
39
- --color-neutral-100: #f1f1f1;
40
- --color-neutral-200: #eaeaea;
41
- --color-neutral-300: #e0e0e0;
42
- --color-neutral-400: #d2d2d2;
41
+ --color-neutral-100: #e0e0e0;
42
+ --color-neutral-200: #c2c2c2;
43
+ --color-neutral-300: #979797;
44
+ --color-neutral-400: #5c5c5c;
43
45
  --color-neutral-500: #333333;
44
- --color-neutral-600: #555555;
45
- --color-neutral-700: #424242;
46
- --color-neutral-800: #2e2e2e;
47
- --color-neutral-900: #1b1b1b;
46
+ --color-neutral-600: #282828;
47
+ --color-neutral-700: #212121;
48
+ --color-neutral-800: #181818;
49
+ --color-neutral-900: #101011;
48
50
  --color-neutral-950: #090909;
49
51
  --color-success-50: #e8fbeb;
50
- --color-success-100: #defde3;
52
+ --color-success-100: #d8f7dc;
51
53
  --color-success-500: #22c55e;
52
- --color-success-600: #00672b;
53
- --color-success-700: #005120;
54
- --color-success-900: #002209;
54
+ --color-success-600: #019341;
55
+ --color-success-700: #017231;
56
+ --color-success-900: #002b0e;
55
57
  --color-warning-50: #fff3e6;
56
- --color-warning-100: #fff1e3;
58
+ --color-warning-100: #ffebd5;
57
59
  --color-warning-500: #f59e0b;
58
- --color-warning-600: #774a01;
59
- --color-warning-700: #5e3900;
60
- --color-warning-900: #281600;
60
+ --color-warning-600: #b77401;
61
+ --color-warning-700: #8d5800;
62
+ --color-warning-900: #361f00;
61
63
  --color-error-50: #fff2f0;
62
- --color-error-100: #ffefed;
64
+ --color-error-100: #ffe3e0;
63
65
  --color-error-500: #ef4444;
64
- --color-error-600: #a30016;
65
- --color-error-700: #81000f;
66
- --color-error-900: #3a0003;
66
+ --color-error-600: #c3041e;
67
+ --color-error-700: #990015;
68
+ --color-error-900: #410004;
67
69
  --color-info-50: #ecf7ff;
68
- --color-info-100: #e8f5ff;
70
+ --color-info-100: #daf0ff;
69
71
  --color-info-500: #0ea5e9;
70
- --color-info-600: #005c85;
71
- --color-info-700: #004869;
72
- --color-info-900: #001d2e;
72
+ --color-info-600: #017baf;
73
+ --color-info-700: #005f88;
74
+ --color-info-900: #002437;
73
75
  }
74
76
 
75
77
 
@@ -108,7 +110,7 @@
108
110
  .blackout-theme {
109
111
  --font-display: Satoshi;
110
112
  --font-sans: Satoshi;
111
- --font-heading: var(--font-sans);
113
+ --font-heading: Satoshi;
112
114
  --font-body: Satoshi;
113
115
  --font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
114
116
  --font-size-xs: 0.75rem; /* 12px */
@@ -186,10 +188,10 @@
186
188
  --text-secondary: rgba(255, 255, 255, 0.70);
187
189
  --text-tertiary: rgba(255, 255, 255, 0.55);
188
190
  --text-disabled: rgba(255, 255, 255, 0.1);
189
- --text-inverse: #1b1b1b;
190
- --text-inverse-secondary: #424242;
191
- --text-link: #dcdcdc;
192
- --text-link-hover: #e6e6e6;
191
+ --text-inverse: #101011;
192
+ --text-inverse-secondary: #212121;
193
+ --text-link: #868686;
194
+ --text-link-hover: #b2b2b2;
193
195
  --text-success: #22c55e;
194
196
  --text-warning: #f59e0b;
195
197
  --text-error: #ef4444;
@@ -205,27 +207,27 @@
205
207
  --surface-subtle: rgba(255, 255, 255, 0.02);
206
208
  --surface-muted: rgba(255, 255, 255, 0.04);
207
209
  --surface-overlay: #090909;
208
- --surface-interactive-default: #2e2e2e;
209
- --surface-interactive-hover: #424242;
210
- --surface-interactive-active: #555555;
211
- --surface-interactive-disabled: #2e2e2e;
212
- --surface-selected: #2e2e2e;
213
- --surface-accent-subtle: #1b1b1b;
210
+ --surface-interactive-default: #181818;
211
+ --surface-interactive-hover: #212121;
212
+ --surface-interactive-active: #282828;
213
+ --surface-interactive-disabled: #181818;
214
+ --surface-selected: #2a2a2a;
215
+ --surface-accent-subtle: #191919;
214
216
  --surface-accent-default: #666666;
215
- --surface-accent-strong: #dcdcdc;
216
- --surface-success-subtle: #002209;
217
+ --surface-accent-strong: #868686;
218
+ --surface-success-subtle: #002b0e;
217
219
  --surface-success-default: #22c55e;
218
- --surface-warning-subtle: #281600;
220
+ --surface-warning-subtle: #361f00;
219
221
  --surface-warning-default: #f59e0b;
220
- --surface-error-subtle: #3a0003;
222
+ --surface-error-subtle: #410004;
221
223
  --surface-error-default: #ef4444;
222
- --surface-info-subtle: #001d2e;
224
+ --surface-info-subtle: #002437;
223
225
  --surface-info-default: #0ea5e9;
224
226
  --surface-elev-0: #090909;
225
- --surface-elev-1: #1b1b1b;
226
- --surface-elev-2: #2e2e2e;
227
- --surface-elev-3: #424242;
228
- --surface-elev-4: #555555;
227
+ --surface-elev-1: #101011;
228
+ --surface-elev-2: #181818;
229
+ --surface-elev-3: #212121;
230
+ --surface-elev-4: #282828;
229
231
  }
230
232
 
231
233
 
@@ -234,8 +236,8 @@
234
236
  --border-default: rgba(255, 255, 255, 0.06);
235
237
  --border-muted: rgba(255, 255, 255, 0.03);
236
238
  --border-strong: rgba(255, 255, 255, 0.1);
237
- --border-focus: #dcdcdc;
238
- --border-disabled: #2e2e2e;
239
+ --border-focus: #868686;
240
+ --border-disabled: #181818;
239
241
  --border-success: #22c55e;
240
242
  --border-warning: #f59e0b;
241
243
  --border-error: #ef4444;
@@ -246,19 +248,19 @@
246
248
  /* --- Adaptive: Interactive (dark) — manual toggle --- */
247
249
  .dark .blackout-theme {
248
250
  --interactive-primary-bg: #666666;
249
- --interactive-primary-bg-hover: #dcdcdc;
250
- --interactive-primary-bg-active: #e6e6e6;
251
+ --interactive-primary-bg-hover: #868686;
252
+ --interactive-primary-bg-active: #b2b2b2;
251
253
  --interactive-primary-text: #ffffff;
252
- --interactive-secondary-bg: #2e2e2e;
253
- --interactive-secondary-bg-hover: #424242;
254
- --interactive-secondary-bg-active: #555555;
254
+ --interactive-secondary-bg: #181818;
255
+ --interactive-secondary-bg-hover: #212121;
256
+ --interactive-secondary-bg-active: #282828;
255
257
  --interactive-secondary-text: #f5f5f5;
256
- --interactive-secondary-border: #555555;
258
+ --interactive-secondary-border: #282828;
257
259
  --interactive-destructive-bg: #ef4444;
258
- --interactive-destructive-bg-hover: #a30016;
260
+ --interactive-destructive-bg-hover: #c3041e;
259
261
  --interactive-destructive-text: #ffffff;
260
- --interactive-ghost-bg: #2e2e2e;
261
- --interactive-ghost-bg-hover: #424242;
262
+ --interactive-ghost-bg: #181818;
263
+ --interactive-ghost-bg-hover: #212121;
262
264
  }
263
265
 
264
266
 
@@ -269,10 +271,10 @@
269
271
  --text-secondary: rgba(255, 255, 255, 0.70);
270
272
  --text-tertiary: rgba(255, 255, 255, 0.55);
271
273
  --text-disabled: rgba(255, 255, 255, 0.1);
272
- --text-inverse: #1b1b1b;
273
- --text-inverse-secondary: #424242;
274
- --text-link: #dcdcdc;
275
- --text-link-hover: #e6e6e6;
274
+ --text-inverse: #101011;
275
+ --text-inverse-secondary: #212121;
276
+ --text-link: #868686;
277
+ --text-link-hover: #b2b2b2;
276
278
  --text-success: #22c55e;
277
279
  --text-warning: #f59e0b;
278
280
  --text-error: #ef4444;
@@ -290,27 +292,27 @@
290
292
  --surface-subtle: rgba(255, 255, 255, 0.02);
291
293
  --surface-muted: rgba(255, 255, 255, 0.04);
292
294
  --surface-overlay: #090909;
293
- --surface-interactive-default: #2e2e2e;
294
- --surface-interactive-hover: #424242;
295
- --surface-interactive-active: #555555;
296
- --surface-interactive-disabled: #2e2e2e;
297
- --surface-selected: #2e2e2e;
298
- --surface-accent-subtle: #1b1b1b;
295
+ --surface-interactive-default: #181818;
296
+ --surface-interactive-hover: #212121;
297
+ --surface-interactive-active: #282828;
298
+ --surface-interactive-disabled: #181818;
299
+ --surface-selected: #2a2a2a;
300
+ --surface-accent-subtle: #191919;
299
301
  --surface-accent-default: #666666;
300
- --surface-accent-strong: #dcdcdc;
301
- --surface-success-subtle: #002209;
302
+ --surface-accent-strong: #868686;
303
+ --surface-success-subtle: #002b0e;
302
304
  --surface-success-default: #22c55e;
303
- --surface-warning-subtle: #281600;
305
+ --surface-warning-subtle: #361f00;
304
306
  --surface-warning-default: #f59e0b;
305
- --surface-error-subtle: #3a0003;
307
+ --surface-error-subtle: #410004;
306
308
  --surface-error-default: #ef4444;
307
- --surface-info-subtle: #001d2e;
309
+ --surface-info-subtle: #002437;
308
310
  --surface-info-default: #0ea5e9;
309
311
  --surface-elev-0: #090909;
310
- --surface-elev-1: #1b1b1b;
311
- --surface-elev-2: #2e2e2e;
312
- --surface-elev-3: #424242;
313
- --surface-elev-4: #555555;
312
+ --surface-elev-1: #101011;
313
+ --surface-elev-2: #181818;
314
+ --surface-elev-3: #212121;
315
+ --surface-elev-4: #282828;
314
316
  }
315
317
  }
316
318
 
@@ -321,8 +323,8 @@
321
323
  --border-default: rgba(255, 255, 255, 0.06);
322
324
  --border-muted: rgba(255, 255, 255, 0.03);
323
325
  --border-strong: rgba(255, 255, 255, 0.1);
324
- --border-focus: #dcdcdc;
325
- --border-disabled: #2e2e2e;
326
+ --border-focus: #868686;
327
+ --border-disabled: #181818;
326
328
  --border-success: #22c55e;
327
329
  --border-warning: #f59e0b;
328
330
  --border-error: #ef4444;
@@ -335,19 +337,19 @@
335
337
  @media (prefers-color-scheme: dark) {
336
338
  .blackout-theme:not(.light) {
337
339
  --interactive-primary-bg: #666666;
338
- --interactive-primary-bg-hover: #dcdcdc;
339
- --interactive-primary-bg-active: #e6e6e6;
340
+ --interactive-primary-bg-hover: #868686;
341
+ --interactive-primary-bg-active: #b2b2b2;
340
342
  --interactive-primary-text: #ffffff;
341
- --interactive-secondary-bg: #2e2e2e;
342
- --interactive-secondary-bg-hover: #424242;
343
- --interactive-secondary-bg-active: #555555;
343
+ --interactive-secondary-bg: #181818;
344
+ --interactive-secondary-bg-hover: #212121;
345
+ --interactive-secondary-bg-active: #282828;
344
346
  --interactive-secondary-text: #f5f5f5;
345
- --interactive-secondary-border: #555555;
347
+ --interactive-secondary-border: #282828;
346
348
  --interactive-destructive-bg: #ef4444;
347
- --interactive-destructive-bg-hover: #a30016;
349
+ --interactive-destructive-bg-hover: #c3041e;
348
350
  --interactive-destructive-text: #ffffff;
349
- --interactive-ghost-bg: #2e2e2e;
350
- --interactive-ghost-bg-hover: #424242;
351
+ --interactive-ghost-bg: #181818;
352
+ --interactive-ghost-bg-hover: #212121;
351
353
  }
352
354
  }
353
355
 
@@ -361,13 +363,13 @@ html:not(.dark) .blackout-theme {
361
363
  --text-tertiary: rgba(255, 255, 255, 0.55);
362
364
  --text-disabled: rgba(255, 255, 255, 0.12);
363
365
  --text-inverse: #ffffff;
364
- --text-inverse-secondary: #eaeaea;
365
- --text-link: #555555;
366
- --text-link-hover: #424242;
367
- --text-success: #005120;
368
- --text-warning: #5e3900;
369
- --text-error: #81000f;
370
- --text-info: #004869;
366
+ --text-inverse-secondary: #c2c2c2;
367
+ --text-link: #4d4d4d;
368
+ --text-link-hover: #3c3c3c;
369
+ --text-success: #017231;
370
+ --text-warning: #8d5800;
371
+ --text-error: #990015;
372
+ --text-info: #005f88;
371
373
  }
372
374
 
373
375
 
@@ -378,28 +380,28 @@ html:not(.dark) .blackout-theme {
378
380
  --surface-popover: #141414;
379
381
  --surface-subtle: rgba(255, 255, 255, 0.02);
380
382
  --surface-muted: rgba(255, 255, 255, 0.05);
381
- --surface-overlay: #1b1b1b;
383
+ --surface-overlay: #101011;
382
384
  --surface-interactive-default: transparent;
383
385
  --surface-interactive-hover: rgba(255, 255, 255, 0.08);
384
386
  --surface-interactive-active: rgba(255, 255, 255, 0.12);
385
387
  --surface-interactive-disabled: rgba(255, 255, 255, 0.04);
386
- --surface-selected: #f2f2f2;
387
- --surface-accent-subtle: #f5f5f5;
388
+ --surface-selected: #303030;
389
+ --surface-accent-subtle: #1f1f1f;
388
390
  --surface-accent-default: #666666;
389
- --surface-accent-strong: #555555;
390
- --surface-success-subtle: #e8fbeb;
391
+ --surface-accent-strong: #4d4d4d;
392
+ --surface-success-subtle: #003814;
391
393
  --surface-success-default: #22c55e;
392
- --surface-warning-subtle: #fff3e6;
394
+ --surface-warning-subtle: #432600;
393
395
  --surface-warning-default: #f59e0b;
394
- --surface-error-subtle: #fff2f0;
396
+ --surface-error-subtle: #4e0006;
395
397
  --surface-error-default: #ef4444;
396
- --surface-info-subtle: #ecf7ff;
398
+ --surface-info-subtle: #002e44;
397
399
  --surface-info-default: #0ea5e9;
398
- --surface-elev-0: #ffffff;
399
- --surface-elev-1: #f5f5f5;
400
- --surface-elev-2: #f1f1f1;
401
- --surface-elev-3: #eaeaea;
402
- --surface-elev-4: #e0e0e0;
400
+ --surface-elev-0: #101011;
401
+ --surface-elev-1: #181818;
402
+ --surface-elev-2: #212121;
403
+ --surface-elev-3: #282828;
404
+ --surface-elev-4: #303030;
403
405
  }
404
406
 
405
407
 
@@ -409,7 +411,7 @@ html:not(.dark) .blackout-theme {
409
411
  --border-muted: rgba(255, 255, 255, 0.04);
410
412
  --border-strong: rgba(255, 255, 255, 0.12);
411
413
  --border-focus: #666666;
412
- --border-disabled: #f1f1f1;
414
+ --border-disabled: #212121;
413
415
  --border-success: #22c55e;
414
416
  --border-warning: #f59e0b;
415
417
  --border-error: #ef4444;
@@ -419,20 +421,20 @@ html:not(.dark) .blackout-theme {
419
421
 
420
422
  /* --- Adaptive: Interactive (light) --- */
421
423
  html:not(.dark) .blackout-theme {
422
- --interactive-primary-bg: #555555;
423
- --interactive-primary-bg-hover: #424242;
424
- --interactive-primary-bg-active: #2e2e2e;
424
+ --interactive-primary-bg: #4d4d4d;
425
+ --interactive-primary-bg-hover: #3c3c3c;
426
+ --interactive-primary-bg-active: #2a2a2a;
425
427
  --interactive-primary-text: #ffffff;
426
- --interactive-secondary-bg: #ffffff;
427
- --interactive-secondary-bg-hover: #f5f5f5;
428
- --interactive-secondary-bg-active: #f1f1f1;
429
- --interactive-secondary-text: #1b1b1b;
430
- --interactive-secondary-border: #e0e0e0;
431
- --interactive-destructive-bg: #a30016;
432
- --interactive-destructive-bg-hover: #81000f;
428
+ --interactive-secondary-bg: #212121;
429
+ --interactive-secondary-bg-hover: #282828;
430
+ --interactive-secondary-bg-active: #303030;
431
+ --interactive-secondary-text: #ffffff;
432
+ --interactive-secondary-border: #303030;
433
+ --interactive-destructive-bg: #c3041e;
434
+ --interactive-destructive-bg-hover: #990015;
433
435
  --interactive-destructive-text: #ffffff;
434
- --interactive-ghost-bg: #ffffff;
435
- --interactive-ghost-bg-hover: #f1f1f1;
436
+ --interactive-ghost-bg: #212121;
437
+ --interactive-ghost-bg-hover: #282828;
436
438
  }
437
439
 
438
440
 
@@ -453,7 +455,7 @@ html:not(.dark) .blackout-theme {
453
455
  --color-fd-secondary-foreground: rgba(255, 255, 255, 0.7);
454
456
  --color-fd-popover: #141414;
455
457
  --color-fd-popover-foreground: rgba(255, 255, 255, 0.7);
456
- --color-fd-ring: #dcdcdc;
458
+ --color-fd-ring: #868686;
457
459
  }
458
460
 
459
461