@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/space.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,62 +14,62 @@
12
14
  --color-white: #ffffff;
13
15
  --color-black: #000000;
14
16
  --color-primary-50: #f2f5ff;
15
- --color-primary-100: #eef2ff;
16
- --color-primary-200: #eaeeff;
17
- --color-primary-300: #e2e9ff;
18
- --color-primary-400: #d8e1ff;
17
+ --color-primary-100: #e2e9fe;
18
+ --color-primary-200: #ccd7ff;
19
+ --color-primary-300: #aabcff;
20
+ --color-primary-400: #7b93ff;
19
21
  --color-primary-500: #5b6fff;
20
- --color-primary-600: #353ac8;
21
- --color-primary-700: #281fb0;
22
- --color-primary-800: #1b0b86;
23
- --color-primary-900: #0e005a;
22
+ --color-primary-600: #3f49d7;
23
+ --color-primary-700: #2e2dbc;
24
+ --color-primary-800: #1e168d;
25
+ --color-primary-900: #100061;
24
26
  --color-primary-950: #04002d;
25
27
  --color-accent-50: #f2f5ff;
26
- --color-accent-100: #eef2ff;
27
- --color-accent-200: #eaeeff;
28
- --color-accent-300: #e2e9ff;
29
- --color-accent-400: #d8e1ff;
28
+ --color-accent-100: #e2e9fe;
29
+ --color-accent-200: #ccd7ff;
30
+ --color-accent-300: #aabcff;
31
+ --color-accent-400: #7b93ff;
30
32
  --color-accent-500: #5b6fff;
31
- --color-accent-600: #353ac8;
32
- --color-accent-700: #281fb0;
33
- --color-accent-800: #1b0b86;
34
- --color-accent-900: #0e005a;
33
+ --color-accent-600: #3f49d7;
34
+ --color-accent-700: #2e2dbc;
35
+ --color-accent-800: #1e168d;
36
+ --color-accent-900: #100061;
35
37
  --color-accent-950: #04002d;
36
38
  --color-neutral-50: #f5f5f8;
37
- --color-neutral-100: #f1f1f8;
38
- --color-neutral-200: #ecedf8;
39
- --color-neutral-300: #e5e6f5;
40
- --color-neutral-400: #dcdceb;
41
- --color-neutral-500: #6c6c79;
42
- --color-neutral-600: #545460;
43
- --color-neutral-700: #41414d;
44
- --color-neutral-800: #2d2d38;
45
- --color-neutral-900: #191924;
39
+ --color-neutral-100: #e7e7ed;
40
+ --color-neutral-200: #d2d2dd;
41
+ --color-neutral-300: #b4b4c2;
42
+ --color-neutral-400: #8a8a98;
43
+ --color-neutral-500: #6b6b80;
44
+ --color-neutral-600: #51515d;
45
+ --color-neutral-700: #3f3f4b;
46
+ --color-neutral-800: #2b2b36;
47
+ --color-neutral-900: #191923;
46
48
  --color-neutral-950: #080810;
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
 
@@ -183,11 +185,11 @@
183
185
  --text-primary: #e8e8f0;
184
186
  --text-secondary: rgba(232, 232, 240, 0.72);
185
187
  --text-tertiary: rgba(232, 232, 240, 0.5);
186
- --text-disabled: #545460;
187
- --text-inverse: #191924;
188
- --text-inverse-secondary: #41414d;
188
+ --text-disabled: #51515d;
189
+ --text-inverse: #191923;
190
+ --text-inverse-secondary: #3f3f4b;
189
191
  --text-link: #8b9fff;
190
- --text-link-hover: #e2e9ff;
192
+ --text-link-hover: #aabcff;
191
193
  --text-success: #22c55e;
192
194
  --text-warning: #f59e0b;
193
195
  --text-error: #ef4444;
@@ -200,35 +202,40 @@
200
202
  --surface-page: #080810;
201
203
  --surface-card: #0e0e18;
202
204
  --surface-popover: #0e0e18;
203
- --surface-subtle: #2d2d38;
204
- --surface-muted: #41414d;
205
+ --surface-subtle: #2b2b36;
206
+ --surface-muted: #0b0b14;
205
207
  --surface-overlay: #080810;
206
- --surface-interactive-default: #2d2d38;
207
- --surface-interactive-hover: #41414d;
208
- --surface-interactive-active: #545460;
209
- --surface-interactive-disabled: #2d2d38;
210
- --surface-selected: #1b0b86;
211
- --surface-accent-subtle: #0e005a;
208
+ --surface-interactive-default: #2b2b36;
209
+ --surface-interactive-hover: #3f3f4b;
210
+ --surface-interactive-active: #51515d;
211
+ --surface-interactive-disabled: #2b2b36;
212
+ --surface-selected: #1e168d;
213
+ --surface-accent-subtle: #100061;
212
214
  --surface-accent-default: #5b6fff;
213
- --surface-accent-strong: #d8e1ff;
214
- --surface-success-subtle: #002209;
215
+ --surface-accent-strong: #7b93ff;
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: #080810;
225
+ --surface-elev-1: #191923;
226
+ --surface-elev-2: #2b2b36;
227
+ --surface-elev-3: #3f3f4b;
228
+ --surface-elev-4: #51515d;
222
229
  }
223
230
 
224
231
 
225
232
  /* --- Adaptive: Border (dark) — manual toggle --- */
226
233
  .dark .space-theme {
227
- --border-default: #41414d;
228
- --border-muted: #2d2d38;
229
- --border-strong: #545460;
234
+ --border-default: #3f3f4b;
235
+ --border-muted: #2b2b36;
236
+ --border-strong: #51515d;
230
237
  --border-focus: #5b6fff;
231
- --border-disabled: #2d2d38;
238
+ --border-disabled: #2b2b36;
232
239
  --border-success: #22c55e;
233
240
  --border-warning: #f59e0b;
234
241
  --border-error: #ef4444;
@@ -239,19 +246,19 @@
239
246
  /* --- Adaptive: Interactive (dark) — manual toggle --- */
240
247
  .dark .space-theme {
241
248
  --interactive-primary-bg: #5b6fff;
242
- --interactive-primary-bg-hover: #d8e1ff;
243
- --interactive-primary-bg-active: #e2e9ff;
249
+ --interactive-primary-bg-hover: #7b93ff;
250
+ --interactive-primary-bg-active: #aabcff;
244
251
  --interactive-primary-text: #ffffff;
245
- --interactive-secondary-bg: #2d2d38;
246
- --interactive-secondary-bg-hover: #41414d;
247
- --interactive-secondary-bg-active: #545460;
252
+ --interactive-secondary-bg: #2b2b36;
253
+ --interactive-secondary-bg-hover: #3f3f4b;
254
+ --interactive-secondary-bg-active: #51515d;
248
255
  --interactive-secondary-text: #f5f5f8;
249
- --interactive-secondary-border: #545460;
256
+ --interactive-secondary-border: #51515d;
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
- --interactive-ghost-bg: #2d2d38;
254
- --interactive-ghost-bg-hover: #41414d;
260
+ --interactive-ghost-bg: #2b2b36;
261
+ --interactive-ghost-bg-hover: #3f3f4b;
255
262
  }
256
263
 
257
264
 
@@ -261,11 +268,11 @@
261
268
  --text-primary: #e8e8f0;
262
269
  --text-secondary: rgba(232, 232, 240, 0.72);
263
270
  --text-tertiary: rgba(232, 232, 240, 0.5);
264
- --text-disabled: #545460;
265
- --text-inverse: #191924;
266
- --text-inverse-secondary: #41414d;
271
+ --text-disabled: #51515d;
272
+ --text-inverse: #191923;
273
+ --text-inverse-secondary: #3f3f4b;
267
274
  --text-link: #8b9fff;
268
- --text-link-hover: #e2e9ff;
275
+ --text-link-hover: #aabcff;
269
276
  --text-success: #22c55e;
270
277
  --text-warning: #f59e0b;
271
278
  --text-error: #ef4444;
@@ -280,25 +287,30 @@
280
287
  --surface-page: #080810;
281
288
  --surface-card: #0e0e18;
282
289
  --surface-popover: #0e0e18;
283
- --surface-subtle: #2d2d38;
284
- --surface-muted: #41414d;
290
+ --surface-subtle: #2b2b36;
291
+ --surface-muted: #0b0b14;
285
292
  --surface-overlay: #080810;
286
- --surface-interactive-default: #2d2d38;
287
- --surface-interactive-hover: #41414d;
288
- --surface-interactive-active: #545460;
289
- --surface-interactive-disabled: #2d2d38;
290
- --surface-selected: #1b0b86;
291
- --surface-accent-subtle: #0e005a;
293
+ --surface-interactive-default: #2b2b36;
294
+ --surface-interactive-hover: #3f3f4b;
295
+ --surface-interactive-active: #51515d;
296
+ --surface-interactive-disabled: #2b2b36;
297
+ --surface-selected: #1e168d;
298
+ --surface-accent-subtle: #100061;
292
299
  --surface-accent-default: #5b6fff;
293
- --surface-accent-strong: #d8e1ff;
294
- --surface-success-subtle: #002209;
300
+ --surface-accent-strong: #7b93ff;
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: #080810;
310
+ --surface-elev-1: #191923;
311
+ --surface-elev-2: #2b2b36;
312
+ --surface-elev-3: #3f3f4b;
313
+ --surface-elev-4: #51515d;
302
314
  }
303
315
  }
304
316
 
@@ -306,11 +318,11 @@
306
318
  /* --- Adaptive: Border (dark) — prefers-color-scheme --- */
307
319
  @media (prefers-color-scheme: dark) {
308
320
  .space-theme:not(.light) {
309
- --border-default: #41414d;
310
- --border-muted: #2d2d38;
311
- --border-strong: #545460;
321
+ --border-default: #3f3f4b;
322
+ --border-muted: #2b2b36;
323
+ --border-strong: #51515d;
312
324
  --border-focus: #5b6fff;
313
- --border-disabled: #2d2d38;
325
+ --border-disabled: #2b2b36;
314
326
  --border-success: #22c55e;
315
327
  --border-warning: #f59e0b;
316
328
  --border-error: #ef4444;
@@ -323,19 +335,19 @@
323
335
  @media (prefers-color-scheme: dark) {
324
336
  .space-theme:not(.light) {
325
337
  --interactive-primary-bg: #5b6fff;
326
- --interactive-primary-bg-hover: #d8e1ff;
327
- --interactive-primary-bg-active: #e2e9ff;
338
+ --interactive-primary-bg-hover: #7b93ff;
339
+ --interactive-primary-bg-active: #aabcff;
328
340
  --interactive-primary-text: #ffffff;
329
- --interactive-secondary-bg: #2d2d38;
330
- --interactive-secondary-bg-hover: #41414d;
331
- --interactive-secondary-bg-active: #545460;
341
+ --interactive-secondary-bg: #2b2b36;
342
+ --interactive-secondary-bg-hover: #3f3f4b;
343
+ --interactive-secondary-bg-active: #51515d;
332
344
  --interactive-secondary-text: #f5f5f8;
333
- --interactive-secondary-border: #545460;
345
+ --interactive-secondary-border: #51515d;
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
- --interactive-ghost-bg: #2d2d38;
338
- --interactive-ghost-bg-hover: #41414d;
349
+ --interactive-ghost-bg: #2b2b36;
350
+ --interactive-ghost-bg-hover: #3f3f4b;
339
351
  }
340
352
  }
341
353
 
@@ -347,15 +359,15 @@ html:not(.dark) .space-theme {
347
359
  --text-primary: #1a1630;
348
360
  --text-secondary: rgba(26, 22, 48, 0.72);
349
361
  --text-tertiary: rgba(26, 22, 48, 0.65);
350
- --text-disabled: #e5e6f5;
362
+ --text-disabled: #b4b4c2;
351
363
  --text-inverse: #ffffff;
352
- --text-inverse-secondary: #ecedf8;
364
+ --text-inverse-secondary: #d2d2dd;
353
365
  --text-link: #5b6fff;
354
- --text-link-hover: #281fb0;
355
- --text-success: #005120;
356
- --text-warning: #5e3900;
357
- --text-error: #81000f;
358
- --text-info: #004869;
366
+ --text-link-hover: #2e2dbc;
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) .space-theme {
365
377
  --surface-card: #f2f0f8;
366
378
  --surface-popover: #f2f0f8;
367
379
  --surface-subtle: #f5f5f8;
368
- --surface-muted: #f1f1f8;
369
- --surface-overlay: #191924;
380
+ --surface-muted: #e7e7ed;
381
+ --surface-overlay: #191923;
370
382
  --surface-interactive-default: #ffffff;
371
383
  --surface-interactive-hover: #f5f5f8;
372
- --surface-interactive-active: #f1f1f8;
384
+ --surface-interactive-active: #e7e7ed;
373
385
  --surface-interactive-disabled: #f5f5f8;
374
- --surface-selected: #eef2ff;
386
+ --surface-selected: #e2e9fe;
375
387
  --surface-accent-subtle: #f2f5ff;
376
388
  --surface-accent-default: #5b6fff;
377
- --surface-accent-strong: #353ac8;
389
+ --surface-accent-strong: #3f49d7;
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) .space-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: #f5f5f8;
400
+ --surface-elev-2: #e7e7ed;
401
+ --surface-elev-3: #d2d2dd;
402
+ --surface-elev-4: #b4b4c2;
386
403
  }
387
404
 
388
405
 
389
406
  /* --- Adaptive: Border (light) --- */
390
407
  html:not(.dark) .space-theme {
391
- --border-default: #ecedf8;
392
- --border-muted: #f1f1f8;
393
- --border-strong: #e5e6f5;
408
+ --border-default: #d2d2dd;
409
+ --border-muted: #e7e7ed;
410
+ --border-strong: #b4b4c2;
394
411
  --border-focus: #5b6fff;
395
- --border-disabled: #f1f1f8;
412
+ --border-disabled: #e7e7ed;
396
413
  --border-success: #22c55e;
397
414
  --border-warning: #f59e0b;
398
415
  --border-error: #ef4444;
@@ -403,19 +420,19 @@ html:not(.dark) .space-theme {
403
420
  /* --- Adaptive: Interactive (light) --- */
404
421
  html:not(.dark) .space-theme {
405
422
  --interactive-primary-bg: #5b6fff;
406
- --interactive-primary-bg-hover: #281fb0;
407
- --interactive-primary-bg-active: #1b0b86;
423
+ --interactive-primary-bg-hover: #2e2dbc;
424
+ --interactive-primary-bg-active: #1e168d;
408
425
  --interactive-primary-text: #ffffff;
409
426
  --interactive-secondary-bg: #ffffff;
410
427
  --interactive-secondary-bg-hover: #f5f5f8;
411
- --interactive-secondary-bg-active: #f1f1f8;
412
- --interactive-secondary-text: #191924;
413
- --interactive-secondary-border: #e5e6f5;
414
- --interactive-destructive-bg: #a30016;
415
- --interactive-destructive-bg-hover: #81000f;
428
+ --interactive-secondary-bg-active: #e7e7ed;
429
+ --interactive-secondary-text: #191923;
430
+ --interactive-secondary-border: #b4b4c2;
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: #f1f1f8;
435
+ --interactive-ghost-bg-hover: #e7e7ed;
419
436
  }
420
437
 
421
438
 
@@ -425,14 +442,14 @@ html:not(.dark) .space-theme {
425
442
  --color-fd-foreground: #e8e8f0;
426
443
  --color-fd-card: #0e0e18;
427
444
  --color-fd-card-foreground: #e8e8f0;
428
- --color-fd-border: #41414d;
429
- --color-fd-muted: #41414d;
445
+ --color-fd-border: #3f3f4b;
446
+ --color-fd-muted: #0b0b14;
430
447
  --color-fd-muted-foreground: rgba(232, 232, 240, 0.72);
431
448
  --color-fd-accent: #5b6fff;
432
449
  --color-fd-accent-foreground: #ffffff;
433
450
  --color-fd-primary: #5b6fff;
434
451
  --color-fd-primary-foreground: #ffffff;
435
- --color-fd-secondary: #41414d;
452
+ --color-fd-secondary: #0b0b14;
436
453
  --color-fd-secondary-foreground: #e8e8f0;
437
454
  --color-fd-popover: #0e0e18;
438
455
  --color-fd-popover-foreground: #e8e8f0;
@@ -446,17 +463,17 @@ html:not(.dark) .space-theme {
446
463
  --color-fd-foreground: #1a1630;
447
464
  --color-fd-card: #f2f0f8;
448
465
  --color-fd-card-foreground: #1a1630;
449
- --color-fd-border: #ecedf8;
450
- --color-fd-muted: #f1f1f8;
466
+ --color-fd-border: #d2d2dd;
467
+ --color-fd-muted: #e7e7ed;
451
468
  --color-fd-muted-foreground: rgba(26, 22, 48, 0.72);
452
469
  --color-fd-accent: #5b6fff;
453
470
  --color-fd-accent-foreground: #ffffff;
454
471
  --color-fd-primary: #5b6fff;
455
472
  --color-fd-primary-foreground: #ffffff;
456
- --color-fd-secondary: #f1f1f8;
473
+ --color-fd-secondary: #e7e7ed;
457
474
  --color-fd-secondary-foreground: #1a1630;
458
475
  --color-fd-popover: #f2f0f8;
459
476
  --color-fd-popover-foreground: #1a1630;
460
477
  --color-fd-ring: #5b6fff;
461
478
  }
462
-
479
+ }
package/dist/tokens.css CHANGED
@@ -5,10 +5,12 @@
5
5
  ============================================ */
6
6
 
7
7
  /* Import order: primitives → semantic → adaptive */
8
+ @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
8
9
 
9
10
  /* ============================================
10
- Tier 1: Primitives
11
+ Tier 1: Primitives → @layer visor-primitives
11
12
  ============================================ */
13
+ @layer visor-primitives {
12
14
  /* --- Primitive: Colors --- */
13
15
  :root {
14
16
  --color-neutral-50: #f9fafb;
@@ -121,6 +123,7 @@
121
123
 
122
124
  /* --- Primitive: Font Sizes --- */
123
125
  :root {
126
+ --font-size-2xs: 0.6875rem; /* 11px */
124
127
  --font-size-xs: 0.75rem; /* 12px */
125
128
  --font-size-sm: 0.875rem; /* 14px */
126
129
  --font-size-base: 1rem; /* 16px */
@@ -219,10 +222,12 @@
219
222
  --motion-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
220
223
  --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
221
224
  }
225
+ }
222
226
 
223
227
  /* ============================================
224
- Tier 2: Semantic
228
+ Tier 2: Semantic → @layer visor-semantic
225
229
  ============================================ */
230
+ @layer visor-semantic {
226
231
  /* --- Semantic: Text --- */
227
232
  :root {
228
233
  --text-primary: var(--color-neutral-900);
@@ -264,6 +269,11 @@
264
269
  --surface-error-default: var(--color-error-500);
265
270
  --surface-info-subtle: var(--color-info-50);
266
271
  --surface-info-default: var(--color-info-500);
272
+ --surface-elev-0: var(--color-neutral-950);
273
+ --surface-elev-1: var(--color-neutral-900);
274
+ --surface-elev-2: var(--color-neutral-800);
275
+ --surface-elev-3: var(--color-neutral-700);
276
+ --surface-elev-4: var(--color-neutral-600);
267
277
  }
268
278
 
269
279
 
@@ -388,10 +398,12 @@
388
398
  --sidebar-ring: var(--color-primary-500);
389
399
  --sidebar-text-muted: var(--color-neutral-500);
390
400
  }
401
+ }
391
402
 
392
403
  /* ============================================
393
- Tier 3: Adaptive — Light Theme (:root)
404
+ Tier 3: Adaptive — Light + Dark → @layer visor-adaptive
394
405
  ============================================ */
406
+ @layer visor-adaptive {
395
407
  /* --- Adaptive: Text (light) --- */
396
408
  :root {
397
409
  --text-primary: var(--color-neutral-900);
@@ -433,6 +445,11 @@
433
445
  --surface-error-default: var(--color-error-500);
434
446
  --surface-info-subtle: var(--color-info-50);
435
447
  --surface-info-default: var(--color-info-500);
448
+ --surface-elev-0: var(--color-white);
449
+ --surface-elev-1: var(--color-neutral-50);
450
+ --surface-elev-2: var(--color-neutral-100);
451
+ --surface-elev-3: var(--color-neutral-200);
452
+ --surface-elev-4: var(--color-neutral-300);
436
453
  }
437
454
 
438
455
 
@@ -510,10 +527,8 @@
510
527
  --sidebar-text-muted: var(--color-neutral-500);
511
528
  }
512
529
 
513
- /* ============================================
514
- Tier 3: Adaptive — Dark Theme (.dark, .theme-dark, [data-theme="dark"])
515
- and @media (prefers-color-scheme: dark)
516
- ============================================ */
530
+
531
+
517
532
  /* --- Adaptive: Text (dark) — manual toggle --- */
518
533
  .dark,
519
534
  .theme-dark,
@@ -559,6 +574,11 @@
559
574
  --surface-error-default: var(--color-error-500);
560
575
  --surface-info-subtle: var(--color-info-900);
561
576
  --surface-info-default: var(--color-info-500);
577
+ --surface-elev-0: var(--color-neutral-950);
578
+ --surface-elev-1: var(--color-neutral-900);
579
+ --surface-elev-2: var(--color-neutral-800);
580
+ --surface-elev-3: var(--color-neutral-700);
581
+ --surface-elev-4: var(--color-neutral-600);
562
582
  }
563
583
 
564
584
 
@@ -693,6 +713,11 @@
693
713
  --surface-error-default: var(--color-error-500);
694
714
  --surface-info-subtle: var(--color-info-900);
695
715
  --surface-info-default: var(--color-info-500);
716
+ --surface-elev-0: var(--color-neutral-950);
717
+ --surface-elev-1: var(--color-neutral-900);
718
+ --surface-elev-2: var(--color-neutral-800);
719
+ --surface-elev-3: var(--color-neutral-700);
720
+ --surface-elev-4: var(--color-neutral-600);
696
721
  }
697
722
  }
698
723
 
@@ -782,7 +807,7 @@
782
807
  --sidebar-text-muted: var(--color-neutral-400);
783
808
  }
784
809
  }
785
-
810
+ }
786
811
  /* ============================================
787
812
  Global: Motion Safety
788
813
  ============================================ */
package/dist/utilities.css ADDED
@@ -0,0 +1,23 @@
1
+ /* ============================================
2
+ Visor Design Tokens — Utilities
3
+ Generated by @loworbitstudio/visor-core
4
+ DO NOT EDIT — run `npm run build` to regenerate
5
+ ============================================ */
6
+ @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
7
+
8
+ @layer visor-adaptive {
9
+ /* --- Typography Utilities --- */
10
+ .eyebrow {
11
+ font-size: var(--font-size-2xs);
12
+ font-weight: var(--font-weight-medium);
13
+ letter-spacing: 0.16em;
14
+ text-transform: uppercase;
15
+ color: var(--text-tertiary);
16
+ }
17
+
18
+ .label-tiny {
19
+ font-size: var(--font-size-2xs);
20
+ font-weight: var(--font-weight-medium);
21
+ color: var(--text-tertiary);
22
+ }
23
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@loworbitstudio/visor-core",
3
- "version": "0.5.0",
3
+ "version": "0.7.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",
@@ -16,7 +16,8 @@
16
16
  "./themes/modern-minimal": "./dist/themes/modern-minimal.css",
17
17
  "./themes/neutral": "./dist/themes/neutral.css",
18
18
  "./themes/space": "./dist/themes/space.css",
19
- "./types": "./src/types.ts"
19
+ "./types": "./src/types.ts",
20
+ "./utilities": "./dist/utilities.css"
20
21
  },
21
22
  "scripts": {
22
23
  "build": "tsx src/generate/generate-css.ts",
@@ -47,7 +48,7 @@
47
48
  "access": "public"
48
49
  },
49
50
  "devDependencies": {
50
- "@loworbitstudio/visor-theme-engine": "^0.4.0",
51
+ "@loworbitstudio/visor-theme-engine": "^0.4.2",
51
52
  "@types/node": "^22.0.0",
52
53
  "tsx": "^4.19.2",
53
54
  "typescript": "^5.7.2",