@loworbitstudio/visor-core 0.8.1 → 0.9.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 +1 -1
  2. package/dist/primitives.css +1 -1
  3. package/dist/semantic.css +1 -1
  4. package/dist/themes/blackout.css +175 -1
  5. package/dist/themes/dark.css +1 -1
  6. package/dist/themes/light.css +1 -1
  7. package/dist/themes/modern-minimal.css +175 -1
  8. package/dist/themes/neutral.css +175 -1
  9. package/dist/themes/space.css +175 -1
  10. package/dist/tokens.css +1 -1
  11. package/dist/utilities.css +1 -1
  12. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -5,6 +5,6 @@
5
5
  ============================================ */
6
6
 
7
7
  /* Full design token bundle */
8
- @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
8
+ @layer visor-primitives, visor-semantic, visor-brand, visor-adaptive, visor-bridge;
9
9
 
10
10
  @import './tokens.css';
package/dist/primitives.css CHANGED
@@ -3,7 +3,7 @@
3
3
  Generated by @loworbitstudio/visor-core
4
4
  DO NOT EDIT — run `npm run build` to regenerate
5
5
  ============================================ */
6
- @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
6
+ @layer visor-primitives, visor-semantic, visor-brand, visor-adaptive, visor-bridge;
7
7
 
8
8
  @layer visor-primitives {
9
9
  /* --- Primitive: Colors --- */
package/dist/semantic.css CHANGED
@@ -3,7 +3,7 @@
3
3
  Generated by @loworbitstudio/visor-core
4
4
  DO NOT EDIT — run `npm run build` to regenerate
5
5
  ============================================ */
6
- @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
6
+ @layer visor-primitives, visor-semantic, visor-brand, visor-adaptive, visor-bridge;
7
7
 
8
8
  @layer visor-semantic {
9
9
  /* --- Semantic: Text --- */
package/dist/themes/blackout.css CHANGED
@@ -1,6 +1,153 @@
1
1
  @import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,700&display=swap");
2
2
 
3
- @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
3
+ @layer visor-primitives, visor-semantic, visor-brand, visor-adaptive, visor-bridge;
4
+
5
+ @layer visor-semantic {
6
+ /* ── Layer: Semantic aliases (VI-451) ── */
7
+
8
+ /* --- Discrete: Text size aliases (--text-N) --- */
9
+ .blackout-theme {
10
+ --text-11: 11px;
11
+ --text-13: 13px;
12
+ --text-14: 14px;
13
+ --text-16: 16px;
14
+ --text-20: 20px;
15
+ --text-24: 24px;
16
+ --text-32: 32px;
17
+ --text-40: 40px;
18
+ --text-48: 48px;
19
+ }
20
+
21
+
22
+ /* --- Discrete: Space aliases (--space-N) --- */
23
+ .blackout-theme {
24
+ --space-1: 4px;
25
+ --space-2: 8px;
26
+ --space-3: 12px;
27
+ --space-4: 16px;
28
+ --space-5: 20px;
29
+ --space-6: 24px;
30
+ --space-8: 32px;
31
+ --space-10: 40px;
32
+ --space-12: 48px;
33
+ --space-16: 64px;
34
+ }
35
+
36
+
37
+ /* --- Intent aliases (light) --- */
38
+ html:not(.dark) .blackout-theme {
39
+ --primary: #666666;
40
+ --primary-text: #ffffff;
41
+ --accent: #666666;
42
+ --success: #22c55e;
43
+ --warning: #f59e0b;
44
+ --destructive: #ef4444;
45
+ --info: #0ea5e9;
46
+ }
47
+
48
+
49
+ /* --- Hairline aliases (light) --- */
50
+ html:not(.dark) .blackout-theme {
51
+ --hairline: rgba(0, 0, 0, 0.06);
52
+ --hairline-strong: rgba(0, 0, 0, 0.10);
53
+ }
54
+
55
+
56
+ /* --- Intent aliases (dark) — manual toggle --- */
57
+ .dark .blackout-theme {
58
+ --primary: #666666;
59
+ --primary-text: #ffffff;
60
+ --accent: #666666;
61
+ --success: #22c55e;
62
+ --warning: #f59e0b;
63
+ --destructive: #ef4444;
64
+ --info: #0ea5e9;
65
+ }
66
+
67
+
68
+ /* --- Hairline aliases (dark) — manual toggle --- */
69
+ .dark .blackout-theme {
70
+ --hairline: rgba(255, 255, 255, 0.06);
71
+ --hairline-strong: rgba(255, 255, 255, 0.10);
72
+ }
73
+
74
+
75
+ /* --- Intent aliases (dark) — prefers-color-scheme --- */
76
+ @media (prefers-color-scheme: dark) {
77
+ .blackout-theme:not(.light) {
78
+ --primary: #666666;
79
+ --primary-text: #ffffff;
80
+ --accent: #666666;
81
+ --success: #22c55e;
82
+ --warning: #f59e0b;
83
+ --destructive: #ef4444;
84
+ --info: #0ea5e9;
85
+ }
86
+ }
87
+
88
+
89
+ /* --- Hairline aliases (dark) — prefers-color-scheme --- */
90
+ @media (prefers-color-scheme: dark) {
91
+ .blackout-theme:not(.light) {
92
+ --hairline: rgba(255, 255, 255, 0.06);
93
+ --hairline-strong: rgba(255, 255, 255, 0.10);
94
+ }
95
+ }
96
+ }
97
+
98
+ @layer visor-brand {
99
+ /* --- Brand: forced-mode aliases + tokens --- */
100
+ .blackout-theme {
101
+ --brand-logo-light: url("/themes/visor/brand/visor-logo-light.svg");
102
+ --brand-logo-dark: url("/themes/visor/brand/visor-logo-dark.svg");
103
+ --brand-logo-clear-space: 0.5rem;
104
+ --brand-logo-aspect-ratio: 1269.97 / 540;
105
+ --brand-brandmark-light: url("/themes/visor/brand/visor-brandmark.svg");
106
+ --brand-brandmark-dark: url("/themes/visor/brand/visor-brandmark.svg");
107
+ --brand-brandmark-clear-space: 0.25rem;
108
+ --brand-brandmark-aspect-ratio: 1 / 1;
109
+ --brand-wordmark-light: url("/themes/visor/brand/visor-wordmark-light.svg");
110
+ --brand-wordmark-dark: url("/themes/visor/brand/visor-wordmark-dark.svg");
111
+ --brand-wordmark-clear-space: 0.5rem;
112
+ --brand-wordmark-aspect-ratio: 1100 / 316;
113
+ --brand-monochrome-light: url("/themes/visor/brand/visor-monochrome.svg");
114
+ --brand-monochrome-dark: url("/themes/visor/brand/visor-monochrome.svg");
115
+ --brand-monochrome-clear-space: 0.25rem;
116
+ --brand-monochrome-aspect-ratio: 2210 / 636;
117
+ --brand-favicon-light: url("/themes/visor/brand/visor-favicon.svg");
118
+ --brand-favicon-dark: url("/themes/visor/brand/visor-favicon.svg");
119
+ --brand-favicon-aspect-ratio: 1 / 1;
120
+ }
121
+
122
+ /* --- Brand: variants (light) --- */
123
+ html:not(.dark) .blackout-theme {
124
+ --brand-logo: url("/themes/visor/brand/visor-logo-light.svg");
125
+ --brand-brandmark: url("/themes/visor/brand/visor-brandmark.svg");
126
+ --brand-wordmark: url("/themes/visor/brand/visor-wordmark-light.svg");
127
+ --brand-monochrome: url("/themes/visor/brand/visor-monochrome.svg");
128
+ --brand-favicon: url("/themes/visor/brand/visor-favicon.svg");
129
+ }
130
+
131
+ /* --- Brand: variants (dark) — manual toggle --- */
132
+ .dark .blackout-theme {
133
+ --brand-logo: url("/themes/visor/brand/visor-logo-dark.svg");
134
+ --brand-brandmark: url("/themes/visor/brand/visor-brandmark.svg");
135
+ --brand-wordmark: url("/themes/visor/brand/visor-wordmark-dark.svg");
136
+ --brand-monochrome: url("/themes/visor/brand/visor-monochrome.svg");
137
+ --brand-favicon: url("/themes/visor/brand/visor-favicon.svg");
138
+ }
139
+
140
+ /* --- Brand: variants (dark) — prefers-color-scheme --- */
141
+ @media (prefers-color-scheme: dark) {
142
+ .blackout-theme:not(.light) {
143
+ --brand-logo: url("/themes/visor/brand/visor-logo-dark.svg");
144
+ --brand-brandmark: url("/themes/visor/brand/visor-brandmark.svg");
145
+ --brand-wordmark: url("/themes/visor/brand/visor-wordmark-dark.svg");
146
+ --brand-monochrome: url("/themes/visor/brand/visor-monochrome.svg");
147
+ --brand-favicon: url("/themes/visor/brand/visor-favicon.svg");
148
+ }
149
+ }
150
+ }
4
151
 
5
152
  @layer visor-adaptive {
6
153
  /* ── Section 1: Shared tokens (mode-independent) ── */
@@ -187,6 +334,7 @@
187
334
  --text-primary: rgba(255, 255, 255, 0.7);
188
335
  --text-secondary: rgba(255, 255, 255, 0.70);
189
336
  --text-tertiary: rgba(255, 255, 255, 0.55);
337
+ --text-muted: #333333;
190
338
  --text-disabled: rgba(255, 255, 255, 0.1);
191
339
  --text-inverse: #101011;
192
340
  --text-inverse-secondary: #212121;
@@ -206,6 +354,8 @@
206
354
  --surface-popover: #141414;
207
355
  --surface-subtle: rgba(255, 255, 255, 0.02);
208
356
  --surface-muted: rgba(255, 255, 255, 0.04);
357
+ --surface-screen: #090909;
358
+ --surface-elev: #181818;
209
359
  --surface-overlay: #090909;
210
360
  --surface-interactive-default: #181818;
211
361
  --surface-interactive-hover: #212121;
@@ -223,6 +373,9 @@
223
373
  --surface-error-default: #ef4444;
224
374
  --surface-info-subtle: #002437;
225
375
  --surface-info-default: #0ea5e9;
376
+ --surface-success-soft: color-mix(in srgb, var(--color-success-500) 10%, transparent);
377
+ --surface-warning-soft: color-mix(in srgb, var(--color-warning-500) 12%, transparent);
378
+ --surface-error-soft: color-mix(in srgb, var(--color-error-500) 12%, transparent);
226
379
  --surface-elev-0: #090909;
227
380
  --surface-elev-1: #101011;
228
381
  --surface-elev-2: #181818;
@@ -251,6 +404,9 @@
251
404
  --interactive-primary-bg-hover: #868686;
252
405
  --interactive-primary-bg-active: #b2b2b2;
253
406
  --interactive-primary-text: #ffffff;
407
+ --interactive-primary-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
408
+ --interactive-primary-glow: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
409
+ --interactive-primary-strong: #868686;
254
410
  --interactive-secondary-bg: #181818;
255
411
  --interactive-secondary-bg-hover: #212121;
256
412
  --interactive-secondary-bg-active: #282828;
@@ -270,6 +426,7 @@
270
426
  --text-primary: rgba(255, 255, 255, 0.7);
271
427
  --text-secondary: rgba(255, 255, 255, 0.70);
272
428
  --text-tertiary: rgba(255, 255, 255, 0.55);
429
+ --text-muted: #333333;
273
430
  --text-disabled: rgba(255, 255, 255, 0.1);
274
431
  --text-inverse: #101011;
275
432
  --text-inverse-secondary: #212121;
@@ -291,6 +448,8 @@
291
448
  --surface-popover: #141414;
292
449
  --surface-subtle: rgba(255, 255, 255, 0.02);
293
450
  --surface-muted: rgba(255, 255, 255, 0.04);
451
+ --surface-screen: #090909;
452
+ --surface-elev: #181818;
294
453
  --surface-overlay: #090909;
295
454
  --surface-interactive-default: #181818;
296
455
  --surface-interactive-hover: #212121;
@@ -308,6 +467,9 @@
308
467
  --surface-error-default: #ef4444;
309
468
  --surface-info-subtle: #002437;
310
469
  --surface-info-default: #0ea5e9;
470
+ --surface-success-soft: color-mix(in srgb, var(--color-success-500) 10%, transparent);
471
+ --surface-warning-soft: color-mix(in srgb, var(--color-warning-500) 12%, transparent);
472
+ --surface-error-soft: color-mix(in srgb, var(--color-error-500) 12%, transparent);
311
473
  --surface-elev-0: #090909;
312
474
  --surface-elev-1: #101011;
313
475
  --surface-elev-2: #181818;
@@ -340,6 +502,9 @@
340
502
  --interactive-primary-bg-hover: #868686;
341
503
  --interactive-primary-bg-active: #b2b2b2;
342
504
  --interactive-primary-text: #ffffff;
505
+ --interactive-primary-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
506
+ --interactive-primary-glow: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
507
+ --interactive-primary-strong: #868686;
343
508
  --interactive-secondary-bg: #181818;
344
509
  --interactive-secondary-bg-hover: #212121;
345
510
  --interactive-secondary-bg-active: #282828;
@@ -361,6 +526,7 @@ html:not(.dark) .blackout-theme {
361
526
  --text-primary: rgba(255, 255, 255, 0.75);
362
527
  --text-secondary: rgba(255, 255, 255, 0.5);
363
528
  --text-tertiary: rgba(255, 255, 255, 0.55);
529
+ --text-muted: #333333;
364
530
  --text-disabled: rgba(255, 255, 255, 0.12);
365
531
  --text-inverse: #ffffff;
366
532
  --text-inverse-secondary: #c2c2c2;
@@ -380,6 +546,8 @@ html:not(.dark) .blackout-theme {
380
546
  --surface-popover: #141414;
381
547
  --surface-subtle: rgba(255, 255, 255, 0.02);
382
548
  --surface-muted: rgba(255, 255, 255, 0.05);
549
+ --surface-screen: #f5f5f5;
550
+ --surface-elev: #e0e0e0;
383
551
  --surface-overlay: #101011;
384
552
  --surface-interactive-default: transparent;
385
553
  --surface-interactive-hover: rgba(255, 255, 255, 0.08);
@@ -397,6 +565,9 @@ html:not(.dark) .blackout-theme {
397
565
  --surface-error-default: #ef4444;
398
566
  --surface-info-subtle: #002e44;
399
567
  --surface-info-default: #0ea5e9;
568
+ --surface-success-soft: color-mix(in srgb, var(--color-success-500) 10%, transparent);
569
+ --surface-warning-soft: color-mix(in srgb, var(--color-warning-500) 12%, transparent);
570
+ --surface-error-soft: color-mix(in srgb, var(--color-error-500) 12%, transparent);
400
571
  --surface-elev-0: #101011;
401
572
  --surface-elev-1: #181818;
402
573
  --surface-elev-2: #212121;
@@ -425,6 +596,9 @@ html:not(.dark) .blackout-theme {
425
596
  --interactive-primary-bg-hover: #3c3c3c;
426
597
  --interactive-primary-bg-active: #2a2a2a;
427
598
  --interactive-primary-text: #ffffff;
599
+ --interactive-primary-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
600
+ --interactive-primary-glow: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
601
+ --interactive-primary-strong: #4d4d4d;
428
602
  --interactive-secondary-bg: #212121;
429
603
  --interactive-secondary-bg-hover: #282828;
430
604
  --interactive-secondary-bg-active: #303030;
package/dist/themes/dark.css CHANGED
@@ -3,7 +3,7 @@
3
3
  Generated by @loworbitstudio/visor-core
4
4
  DO NOT EDIT — run `npm run build` to regenerate
5
5
  ============================================ */
6
- @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
6
+ @layer visor-primitives, visor-semantic, visor-brand, visor-adaptive, visor-bridge;
7
7
 
8
8
  @layer visor-adaptive {
9
9
  /* --- Adaptive: Text (dark) — manual toggle --- */
package/dist/themes/light.css CHANGED
@@ -3,7 +3,7 @@
3
3
  Generated by @loworbitstudio/visor-core
4
4
  DO NOT EDIT — run `npm run build` to regenerate
5
5
  ============================================ */
6
- @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
6
+ @layer visor-primitives, visor-semantic, visor-brand, visor-adaptive, visor-bridge;
7
7
 
8
8
  @layer visor-adaptive {
9
9
  /* --- Adaptive: Text (light) --- */
package/dist/themes/modern-minimal.css CHANGED
@@ -14,7 +14,154 @@
14
14
  font-display: swap;
15
15
  }
16
16
 
17
- @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
17
+ @layer visor-primitives, visor-semantic, visor-brand, visor-adaptive, visor-bridge;
18
+
19
+ @layer visor-semantic {
20
+ /* ── Layer: Semantic aliases (VI-451) ── */
21
+
22
+ /* --- Discrete: Text size aliases (--text-N) --- */
23
+ .modern-minimal-theme {
24
+ --text-11: 11px;
25
+ --text-13: 13px;
26
+ --text-14: 14px;
27
+ --text-16: 16px;
28
+ --text-20: 20px;
29
+ --text-24: 24px;
30
+ --text-32: 32px;
31
+ --text-40: 40px;
32
+ --text-48: 48px;
33
+ }
34
+
35
+
36
+ /* --- Discrete: Space aliases (--space-N) --- */
37
+ .modern-minimal-theme {
38
+ --space-1: 4px;
39
+ --space-2: 8px;
40
+ --space-3: 12px;
41
+ --space-4: 16px;
42
+ --space-5: 20px;
43
+ --space-6: 24px;
44
+ --space-8: 32px;
45
+ --space-10: 40px;
46
+ --space-12: 48px;
47
+ --space-16: 64px;
48
+ }
49
+
50
+
51
+ /* --- Intent aliases (light) --- */
52
+ html:not(.dark) .modern-minimal-theme {
53
+ --primary: #04bf81;
54
+ --primary-text: #ffffff;
55
+ --accent: #04bf81;
56
+ --success: #22c55e;
57
+ --warning: #f59e0b;
58
+ --destructive: #ef4444;
59
+ --info: #0ea5e9;
60
+ }
61
+
62
+
63
+ /* --- Hairline aliases (light) --- */
64
+ html:not(.dark) .modern-minimal-theme {
65
+ --hairline: rgba(0, 0, 0, 0.06);
66
+ --hairline-strong: rgba(0, 0, 0, 0.10);
67
+ }
68
+
69
+
70
+ /* --- Intent aliases (dark) — manual toggle --- */
71
+ .dark .modern-minimal-theme {
72
+ --primary: #02cd8d;
73
+ --primary-text: #ffffff;
74
+ --accent: #04bf81;
75
+ --success: #22c55e;
76
+ --warning: #f59e0b;
77
+ --destructive: #ef4444;
78
+ --info: #0ea5e9;
79
+ }
80
+
81
+
82
+ /* --- Hairline aliases (dark) — manual toggle --- */
83
+ .dark .modern-minimal-theme {
84
+ --hairline: rgba(255, 255, 255, 0.06);
85
+ --hairline-strong: rgba(255, 255, 255, 0.10);
86
+ }
87
+
88
+
89
+ /* --- Intent aliases (dark) — prefers-color-scheme --- */
90
+ @media (prefers-color-scheme: dark) {
91
+ .modern-minimal-theme:not(.light) {
92
+ --primary: #02cd8d;
93
+ --primary-text: #ffffff;
94
+ --accent: #04bf81;
95
+ --success: #22c55e;
96
+ --warning: #f59e0b;
97
+ --destructive: #ef4444;
98
+ --info: #0ea5e9;
99
+ }
100
+ }
101
+
102
+
103
+ /* --- Hairline aliases (dark) — prefers-color-scheme --- */
104
+ @media (prefers-color-scheme: dark) {
105
+ .modern-minimal-theme:not(.light) {
106
+ --hairline: rgba(255, 255, 255, 0.06);
107
+ --hairline-strong: rgba(255, 255, 255, 0.10);
108
+ }
109
+ }
110
+ }
111
+
112
+ @layer visor-brand {
113
+ /* --- Brand: forced-mode aliases + tokens --- */
114
+ .modern-minimal-theme {
115
+ --brand-logo-light: url("/themes/visor/brand/visor-logo-light.svg");
116
+ --brand-logo-dark: url("/themes/visor/brand/visor-logo-dark.svg");
117
+ --brand-logo-clear-space: 0.5rem;
118
+ --brand-logo-aspect-ratio: 1269.97 / 540;
119
+ --brand-brandmark-light: url("/themes/visor/brand/visor-brandmark.svg");
120
+ --brand-brandmark-dark: url("/themes/visor/brand/visor-brandmark.svg");
121
+ --brand-brandmark-clear-space: 0.25rem;
122
+ --brand-brandmark-aspect-ratio: 1 / 1;
123
+ --brand-wordmark-light: url("/themes/visor/brand/visor-wordmark-light.svg");
124
+ --brand-wordmark-dark: url("/themes/visor/brand/visor-wordmark-dark.svg");
125
+ --brand-wordmark-clear-space: 0.5rem;
126
+ --brand-wordmark-aspect-ratio: 1100 / 316;
127
+ --brand-monochrome-light: url("/themes/visor/brand/visor-monochrome.svg");
128
+ --brand-monochrome-dark: url("/themes/visor/brand/visor-monochrome.svg");
129
+ --brand-monochrome-clear-space: 0.25rem;
130
+ --brand-monochrome-aspect-ratio: 2210 / 636;
131
+ --brand-favicon-light: url("/themes/visor/brand/visor-favicon.svg");
132
+ --brand-favicon-dark: url("/themes/visor/brand/visor-favicon.svg");
133
+ --brand-favicon-aspect-ratio: 1 / 1;
134
+ }
135
+
136
+ /* --- Brand: variants (light) --- */
137
+ html:not(.dark) .modern-minimal-theme {
138
+ --brand-logo: url("/themes/visor/brand/visor-logo-light.svg");
139
+ --brand-brandmark: url("/themes/visor/brand/visor-brandmark.svg");
140
+ --brand-wordmark: url("/themes/visor/brand/visor-wordmark-light.svg");
141
+ --brand-monochrome: url("/themes/visor/brand/visor-monochrome.svg");
142
+ --brand-favicon: url("/themes/visor/brand/visor-favicon.svg");
143
+ }
144
+
145
+ /* --- Brand: variants (dark) — manual toggle --- */
146
+ .dark .modern-minimal-theme {
147
+ --brand-logo: url("/themes/visor/brand/visor-logo-dark.svg");
148
+ --brand-brandmark: url("/themes/visor/brand/visor-brandmark.svg");
149
+ --brand-wordmark: url("/themes/visor/brand/visor-wordmark-dark.svg");
150
+ --brand-monochrome: url("/themes/visor/brand/visor-monochrome.svg");
151
+ --brand-favicon: url("/themes/visor/brand/visor-favicon.svg");
152
+ }
153
+
154
+ /* --- Brand: variants (dark) — prefers-color-scheme --- */
155
+ @media (prefers-color-scheme: dark) {
156
+ .modern-minimal-theme:not(.light) {
157
+ --brand-logo: url("/themes/visor/brand/visor-logo-dark.svg");
158
+ --brand-brandmark: url("/themes/visor/brand/visor-brandmark.svg");
159
+ --brand-wordmark: url("/themes/visor/brand/visor-wordmark-dark.svg");
160
+ --brand-monochrome: url("/themes/visor/brand/visor-monochrome.svg");
161
+ --brand-favicon: url("/themes/visor/brand/visor-favicon.svg");
162
+ }
163
+ }
164
+ }
18
165
 
19
166
  @layer visor-adaptive {
20
167
  /* ── Section 1: Shared tokens (mode-independent) ── */
@@ -217,6 +364,7 @@
217
364
  --text-primary: rgba(255, 255, 255, 0.7);
218
365
  --text-secondary: rgba(255, 255, 255, 0.70);
219
366
  --text-tertiary: rgba(255, 255, 255, 0.55);
367
+ --text-muted: #6b7280;
220
368
  --text-disabled: rgba(255, 255, 255, 0.1);
221
369
  --text-inverse: #171b22;
222
370
  --text-inverse-secondary: #3d424d;
@@ -236,6 +384,8 @@
236
384
  --surface-popover: #141414;
237
385
  --surface-subtle: rgba(255, 255, 255, 0.02);
238
386
  --surface-muted: rgba(255, 255, 255, 0.04);
387
+ --surface-screen: #07090e;
388
+ --surface-elev: #292e38;
239
389
  --surface-overlay: #07090e;
240
390
  --surface-interactive-default: #292e38;
241
391
  --surface-interactive-hover: #3d424d;
@@ -253,6 +403,9 @@
253
403
  --surface-error-default: #ef4444;
254
404
  --surface-info-subtle: #002437;
255
405
  --surface-info-default: #0ea5e9;
406
+ --surface-success-soft: color-mix(in srgb, var(--color-success-500) 10%, transparent);
407
+ --surface-warning-soft: color-mix(in srgb, var(--color-warning-500) 12%, transparent);
408
+ --surface-error-soft: color-mix(in srgb, var(--color-error-500) 12%, transparent);
256
409
  --surface-elev-0: #07090e;
257
410
  --surface-elev-1: #171b22;
258
411
  --surface-elev-2: #292e38;
@@ -281,6 +434,9 @@
281
434
  --interactive-primary-bg-hover: #a0ffcf;
282
435
  --interactive-primary-bg-active: #bbffdb;
283
436
  --interactive-primary-text: #ffffff;
437
+ --interactive-primary-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
438
+ --interactive-primary-glow: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
439
+ --interactive-primary-strong: #4fdca1;
284
440
  --interactive-secondary-bg: #292e38;
285
441
  --interactive-secondary-bg-hover: #3d424d;
286
442
  --interactive-secondary-bg-active: #505561;
@@ -300,6 +456,7 @@
300
456
  --text-primary: rgba(255, 255, 255, 0.7);
301
457
  --text-secondary: rgba(255, 255, 255, 0.70);
302
458
  --text-tertiary: rgba(255, 255, 255, 0.55);
459
+ --text-muted: #6b7280;
303
460
  --text-disabled: rgba(255, 255, 255, 0.1);
304
461
  --text-inverse: #171b22;
305
462
  --text-inverse-secondary: #3d424d;
@@ -321,6 +478,8 @@
321
478
  --surface-popover: #141414;
322
479
  --surface-subtle: rgba(255, 255, 255, 0.02);
323
480
  --surface-muted: rgba(255, 255, 255, 0.04);
481
+ --surface-screen: #07090e;
482
+ --surface-elev: #292e38;
324
483
  --surface-overlay: #07090e;
325
484
  --surface-interactive-default: #292e38;
326
485
  --surface-interactive-hover: #3d424d;
@@ -338,6 +497,9 @@
338
497
  --surface-error-default: #ef4444;
339
498
  --surface-info-subtle: #002437;
340
499
  --surface-info-default: #0ea5e9;
500
+ --surface-success-soft: color-mix(in srgb, var(--color-success-500) 10%, transparent);
501
+ --surface-warning-soft: color-mix(in srgb, var(--color-warning-500) 12%, transparent);
502
+ --surface-error-soft: color-mix(in srgb, var(--color-error-500) 12%, transparent);
341
503
  --surface-elev-0: #07090e;
342
504
  --surface-elev-1: #171b22;
343
505
  --surface-elev-2: #292e38;
@@ -370,6 +532,9 @@
370
532
  --interactive-primary-bg-hover: #a0ffcf;
371
533
  --interactive-primary-bg-active: #bbffdb;
372
534
  --interactive-primary-text: #ffffff;
535
+ --interactive-primary-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
536
+ --interactive-primary-glow: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
537
+ --interactive-primary-strong: #4fdca1;
373
538
  --interactive-secondary-bg: #292e38;
374
539
  --interactive-secondary-bg-hover: #3d424d;
375
540
  --interactive-secondary-bg-active: #505561;
@@ -409,6 +574,7 @@ html:not(.dark) .modern-minimal-theme {
409
574
  --text-primary: rgba(0, 0, 0, 0.9);
410
575
  --text-secondary: rgba(0, 0, 0, 0.55);
411
576
  --text-tertiary: rgba(0, 0, 0, 0.55);
577
+ --text-muted: #6b7280;
412
578
  --text-disabled: #b2b7c2;
413
579
  --text-inverse: #ffffff;
414
580
  --text-inverse-secondary: #d1d4db;
@@ -428,6 +594,8 @@ html:not(.dark) .modern-minimal-theme {
428
594
  --surface-popover: #FFFFFF;
429
595
  --surface-subtle: #f4f5f7;
430
596
  --surface-muted: #e6e8ec;
597
+ --surface-screen: #f4f5f7;
598
+ --surface-elev: #e6e8ec;
431
599
  --surface-overlay: #171b22;
432
600
  --surface-interactive-default: #ffffff;
433
601
  --surface-interactive-hover: #f4f5f7;
@@ -445,6 +613,9 @@ html:not(.dark) .modern-minimal-theme {
445
613
  --surface-error-default: #ef4444;
446
614
  --surface-info-subtle: #ecf7ff;
447
615
  --surface-info-default: #0ea5e9;
616
+ --surface-success-soft: color-mix(in srgb, var(--color-success-500) 10%, transparent);
617
+ --surface-warning-soft: color-mix(in srgb, var(--color-warning-500) 12%, transparent);
618
+ --surface-error-soft: color-mix(in srgb, var(--color-error-500) 12%, transparent);
448
619
  --surface-elev-0: #ffffff;
449
620
  --surface-elev-1: #f4f5f7;
450
621
  --surface-elev-2: #e6e8ec;
@@ -473,6 +644,9 @@ html:not(.dark) .modern-minimal-theme {
473
644
  --interactive-primary-bg-hover: #016e48;
474
645
  --interactive-primary-bg-active: #004a30;
475
646
  --interactive-primary-text: #ffffff;
647
+ --interactive-primary-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
648
+ --interactive-primary-glow: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
649
+ --interactive-primary-strong: #018e5f;
476
650
  --interactive-secondary-bg: #ffffff;
477
651
  --interactive-secondary-bg-hover: #f4f5f7;
478
652
  --interactive-secondary-bg-active: #e6e8ec;
package/dist/themes/neutral.css CHANGED
@@ -1,4 +1,151 @@
1
- @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
1
+ @layer visor-primitives, visor-semantic, visor-brand, visor-adaptive, visor-bridge;
2
+
3
+ @layer visor-semantic {
4
+ /* ── Layer: Semantic aliases (VI-451) ── */
5
+
6
+ /* --- Discrete: Text size aliases (--text-N) --- */
7
+ .neutral-theme {
8
+ --text-11: 11px;
9
+ --text-13: 13px;
10
+ --text-14: 14px;
11
+ --text-16: 16px;
12
+ --text-20: 20px;
13
+ --text-24: 24px;
14
+ --text-32: 32px;
15
+ --text-40: 40px;
16
+ --text-48: 48px;
17
+ }
18
+
19
+
20
+ /* --- Discrete: Space aliases (--space-N) --- */
21
+ .neutral-theme {
22
+ --space-1: 4px;
23
+ --space-2: 8px;
24
+ --space-3: 12px;
25
+ --space-4: 16px;
26
+ --space-5: 20px;
27
+ --space-6: 24px;
28
+ --space-8: 32px;
29
+ --space-10: 40px;
30
+ --space-12: 48px;
31
+ --space-16: 64px;
32
+ }
33
+
34
+
35
+ /* --- Intent aliases (light) --- */
36
+ html:not(.dark) .neutral-theme {
37
+ --primary: #1798ad;
38
+ --primary-text: #ffffff;
39
+ --accent: #1798ad;
40
+ --success: #22c55e;
41
+ --warning: #f59e0b;
42
+ --destructive: #ef4444;
43
+ --info: #0ea5e9;
44
+ }
45
+
46
+
47
+ /* --- Hairline aliases (light) --- */
48
+ html:not(.dark) .neutral-theme {
49
+ --hairline: rgba(0, 0, 0, 0.06);
50
+ --hairline-strong: rgba(0, 0, 0, 0.10);
51
+ }
52
+
53
+
54
+ /* --- Intent aliases (dark) — manual toggle --- */
55
+ .dark .neutral-theme {
56
+ --primary: #1798ad;
57
+ --primary-text: #ffffff;
58
+ --accent: #1798ad;
59
+ --success: #22c55e;
60
+ --warning: #f59e0b;
61
+ --destructive: #ef4444;
62
+ --info: #0ea5e9;
63
+ }
64
+
65
+
66
+ /* --- Hairline aliases (dark) — manual toggle --- */
67
+ .dark .neutral-theme {
68
+ --hairline: rgba(255, 255, 255, 0.06);
69
+ --hairline-strong: rgba(255, 255, 255, 0.10);
70
+ }
71
+
72
+
73
+ /* --- Intent aliases (dark) — prefers-color-scheme --- */
74
+ @media (prefers-color-scheme: dark) {
75
+ .neutral-theme:not(.light) {
76
+ --primary: #1798ad;
77
+ --primary-text: #ffffff;
78
+ --accent: #1798ad;
79
+ --success: #22c55e;
80
+ --warning: #f59e0b;
81
+ --destructive: #ef4444;
82
+ --info: #0ea5e9;
83
+ }
84
+ }
85
+
86
+
87
+ /* --- Hairline aliases (dark) — prefers-color-scheme --- */
88
+ @media (prefers-color-scheme: dark) {
89
+ .neutral-theme:not(.light) {
90
+ --hairline: rgba(255, 255, 255, 0.06);
91
+ --hairline-strong: rgba(255, 255, 255, 0.10);
92
+ }
93
+ }
94
+ }
95
+
96
+ @layer visor-brand {
97
+ /* --- Brand: forced-mode aliases + tokens --- */
98
+ .neutral-theme {
99
+ --brand-logo-light: url("/themes/visor/brand/visor-logo-light.svg");
100
+ --brand-logo-dark: url("/themes/visor/brand/visor-logo-dark.svg");
101
+ --brand-logo-clear-space: 0.5rem;
102
+ --brand-logo-aspect-ratio: 1269.97 / 540;
103
+ --brand-brandmark-light: url("/themes/visor/brand/visor-brandmark.svg");
104
+ --brand-brandmark-dark: url("/themes/visor/brand/visor-brandmark.svg");
105
+ --brand-brandmark-clear-space: 0.25rem;
106
+ --brand-brandmark-aspect-ratio: 1 / 1;
107
+ --brand-wordmark-light: url("/themes/visor/brand/visor-wordmark-light.svg");
108
+ --brand-wordmark-dark: url("/themes/visor/brand/visor-wordmark-dark.svg");
109
+ --brand-wordmark-clear-space: 0.5rem;
110
+ --brand-wordmark-aspect-ratio: 1100 / 316;
111
+ --brand-monochrome-light: url("/themes/visor/brand/visor-monochrome.svg");
112
+ --brand-monochrome-dark: url("/themes/visor/brand/visor-monochrome.svg");
113
+ --brand-monochrome-clear-space: 0.25rem;
114
+ --brand-monochrome-aspect-ratio: 2210 / 636;
115
+ --brand-favicon-light: url("/themes/visor/brand/visor-favicon.svg");
116
+ --brand-favicon-dark: url("/themes/visor/brand/visor-favicon.svg");
117
+ --brand-favicon-aspect-ratio: 1 / 1;
118
+ }
119
+
120
+ /* --- Brand: variants (light) --- */
121
+ html:not(.dark) .neutral-theme {
122
+ --brand-logo: url("/themes/visor/brand/visor-logo-light.svg");
123
+ --brand-brandmark: url("/themes/visor/brand/visor-brandmark.svg");
124
+ --brand-wordmark: url("/themes/visor/brand/visor-wordmark-light.svg");
125
+ --brand-monochrome: url("/themes/visor/brand/visor-monochrome.svg");
126
+ --brand-favicon: url("/themes/visor/brand/visor-favicon.svg");
127
+ }
128
+
129
+ /* --- Brand: variants (dark) — manual toggle --- */
130
+ .dark .neutral-theme {
131
+ --brand-logo: url("/themes/visor/brand/visor-logo-dark.svg");
132
+ --brand-brandmark: url("/themes/visor/brand/visor-brandmark.svg");
133
+ --brand-wordmark: url("/themes/visor/brand/visor-wordmark-dark.svg");
134
+ --brand-monochrome: url("/themes/visor/brand/visor-monochrome.svg");
135
+ --brand-favicon: url("/themes/visor/brand/visor-favicon.svg");
136
+ }
137
+
138
+ /* --- Brand: variants (dark) — prefers-color-scheme --- */
139
+ @media (prefers-color-scheme: dark) {
140
+ .neutral-theme:not(.light) {
141
+ --brand-logo: url("/themes/visor/brand/visor-logo-dark.svg");
142
+ --brand-brandmark: url("/themes/visor/brand/visor-brandmark.svg");
143
+ --brand-wordmark: url("/themes/visor/brand/visor-wordmark-dark.svg");
144
+ --brand-monochrome: url("/themes/visor/brand/visor-monochrome.svg");
145
+ --brand-favicon: url("/themes/visor/brand/visor-favicon.svg");
146
+ }
147
+ }
148
+ }
2
149
 
3
150
  @layer visor-adaptive {
4
151
  /* ── Section 1: Shared tokens (mode-independent) ── */
@@ -185,6 +332,7 @@
185
332
  --text-primary: #f5f5f6;
186
333
  --text-secondary: #b6b7bd;
187
334
  --text-tertiary: #8e8e97;
335
+ --text-muted: #71717a;
188
336
  --text-disabled: #54545d;
189
337
  --text-inverse: #1a1a1f;
190
338
  --text-inverse-secondary: #41414a;
@@ -204,6 +352,8 @@
204
352
  --surface-popover: #18181b;
205
353
  --surface-subtle: #2d2d34;
206
354
  --surface-muted: #1f1f23;
355
+ --surface-screen: #09090c;
356
+ --surface-elev: #2d2d34;
207
357
  --surface-overlay: #09090c;
208
358
  --surface-interactive-default: #2d2d34;
209
359
  --surface-interactive-hover: #41414a;
@@ -221,6 +371,9 @@
221
371
  --surface-error-default: #ef4444;
222
372
  --surface-info-subtle: #002437;
223
373
  --surface-info-default: #0ea5e9;
374
+ --surface-success-soft: color-mix(in srgb, var(--color-success-500) 10%, transparent);
375
+ --surface-warning-soft: color-mix(in srgb, var(--color-warning-500) 12%, transparent);
376
+ --surface-error-soft: color-mix(in srgb, var(--color-error-500) 12%, transparent);
224
377
  --surface-elev-0: #09090c;
225
378
  --surface-elev-1: #1a1a1f;
226
379
  --surface-elev-2: #2d2d34;
@@ -249,6 +402,9 @@
249
402
  --interactive-primary-bg-hover: #4fb0c3;
250
403
  --interactive-primary-bg-active: #89cfde;
251
404
  --interactive-primary-text: #ffffff;
405
+ --interactive-primary-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
406
+ --interactive-primary-glow: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
407
+ --interactive-primary-strong: #4fb0c3;
252
408
  --interactive-secondary-bg: #2d2d34;
253
409
  --interactive-secondary-bg-hover: #41414a;
254
410
  --interactive-secondary-bg-active: #54545d;
@@ -268,6 +424,7 @@
268
424
  --text-primary: #f5f5f6;
269
425
  --text-secondary: #b6b7bd;
270
426
  --text-tertiary: #8e8e97;
427
+ --text-muted: #71717a;
271
428
  --text-disabled: #54545d;
272
429
  --text-inverse: #1a1a1f;
273
430
  --text-inverse-secondary: #41414a;
@@ -289,6 +446,8 @@
289
446
  --surface-popover: #18181b;
290
447
  --surface-subtle: #2d2d34;
291
448
  --surface-muted: #1f1f23;
449
+ --surface-screen: #09090c;
450
+ --surface-elev: #2d2d34;
292
451
  --surface-overlay: #09090c;
293
452
  --surface-interactive-default: #2d2d34;
294
453
  --surface-interactive-hover: #41414a;
@@ -306,6 +465,9 @@
306
465
  --surface-error-default: #ef4444;
307
466
  --surface-info-subtle: #002437;
308
467
  --surface-info-default: #0ea5e9;
468
+ --surface-success-soft: color-mix(in srgb, var(--color-success-500) 10%, transparent);
469
+ --surface-warning-soft: color-mix(in srgb, var(--color-warning-500) 12%, transparent);
470
+ --surface-error-soft: color-mix(in srgb, var(--color-error-500) 12%, transparent);
309
471
  --surface-elev-0: #09090c;
310
472
  --surface-elev-1: #1a1a1f;
311
473
  --surface-elev-2: #2d2d34;
@@ -338,6 +500,9 @@
338
500
  --interactive-primary-bg-hover: #4fb0c3;
339
501
  --interactive-primary-bg-active: #89cfde;
340
502
  --interactive-primary-text: #ffffff;
503
+ --interactive-primary-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
504
+ --interactive-primary-glow: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
505
+ --interactive-primary-strong: #4fb0c3;
341
506
  --interactive-secondary-bg: #2d2d34;
342
507
  --interactive-secondary-bg-hover: #41414a;
343
508
  --interactive-secondary-bg-active: #54545d;
@@ -359,6 +524,7 @@ html:not(.dark) .neutral-theme {
359
524
  --text-primary: #1a1a1f;
360
525
  --text-secondary: #41414a;
361
526
  --text-tertiary: #54545d;
527
+ --text-muted: #71717a;
362
528
  --text-disabled: #b6b7bd;
363
529
  --text-inverse: #ffffff;
364
530
  --text-inverse-secondary: #d4d4d8;
@@ -378,6 +544,8 @@ html:not(.dark) .neutral-theme {
378
544
  --surface-popover: #ffffff;
379
545
  --surface-subtle: #f5f5f6;
380
546
  --surface-muted: #e7e7ea;
547
+ --surface-screen: #f5f5f6;
548
+ --surface-elev: #e7e7ea;
381
549
  --surface-overlay: #1a1a1f;
382
550
  --surface-interactive-default: #ffffff;
383
551
  --surface-interactive-hover: #f5f5f6;
@@ -395,6 +563,9 @@ html:not(.dark) .neutral-theme {
395
563
  --surface-error-default: #ef4444;
396
564
  --surface-info-subtle: #ecf7ff;
397
565
  --surface-info-default: #0ea5e9;
566
+ --surface-success-soft: color-mix(in srgb, var(--color-success-500) 10%, transparent);
567
+ --surface-warning-soft: color-mix(in srgb, var(--color-warning-500) 12%, transparent);
568
+ --surface-error-soft: color-mix(in srgb, var(--color-error-500) 12%, transparent);
398
569
  --surface-elev-0: #ffffff;
399
570
  --surface-elev-1: #f5f5f6;
400
571
  --surface-elev-2: #e7e7ea;
@@ -423,6 +594,9 @@ html:not(.dark) .neutral-theme {
423
594
  --interactive-primary-bg-hover: #015866;
424
595
  --interactive-primary-bg-active: #013d46;
425
596
  --interactive-primary-text: #ffffff;
597
+ --interactive-primary-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
598
+ --interactive-primary-glow: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
599
+ --interactive-primary-strong: #037283;
426
600
  --interactive-secondary-bg: #ffffff;
427
601
  --interactive-secondary-bg-hover: #f5f5f6;
428
602
  --interactive-secondary-bg-active: #e7e7ea;
package/dist/themes/space.css CHANGED
@@ -2,7 +2,154 @@
2
2
 
3
3
  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400&display=swap");
4
4
 
5
- @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
5
+ @layer visor-primitives, visor-semantic, visor-brand, visor-adaptive, visor-bridge;
6
+
7
+ @layer visor-semantic {
8
+ /* ── Layer: Semantic aliases (VI-451) ── */
9
+
10
+ /* --- Discrete: Text size aliases (--text-N) --- */
11
+ .space-theme {
12
+ --text-11: 11px;
13
+ --text-13: 13px;
14
+ --text-14: 14px;
15
+ --text-16: 16px;
16
+ --text-20: 20px;
17
+ --text-24: 24px;
18
+ --text-32: 32px;
19
+ --text-40: 40px;
20
+ --text-48: 48px;
21
+ }
22
+
23
+
24
+ /* --- Discrete: Space aliases (--space-N) --- */
25
+ .space-theme {
26
+ --space-1: 4px;
27
+ --space-2: 8px;
28
+ --space-3: 12px;
29
+ --space-4: 16px;
30
+ --space-5: 20px;
31
+ --space-6: 24px;
32
+ --space-8: 32px;
33
+ --space-10: 40px;
34
+ --space-12: 48px;
35
+ --space-16: 64px;
36
+ }
37
+
38
+
39
+ /* --- Intent aliases (light) --- */
40
+ html:not(.dark) .space-theme {
41
+ --primary: #5b6fff;
42
+ --primary-text: #ffffff;
43
+ --accent: #5b6fff;
44
+ --success: #22c55e;
45
+ --warning: #f59e0b;
46
+ --destructive: #ef4444;
47
+ --info: #0ea5e9;
48
+ }
49
+
50
+
51
+ /* --- Hairline aliases (light) --- */
52
+ html:not(.dark) .space-theme {
53
+ --hairline: rgba(0, 0, 0, 0.06);
54
+ --hairline-strong: rgba(0, 0, 0, 0.10);
55
+ }
56
+
57
+
58
+ /* --- Intent aliases (dark) — manual toggle --- */
59
+ .dark .space-theme {
60
+ --primary: #5b6fff;
61
+ --primary-text: #ffffff;
62
+ --accent: #5b6fff;
63
+ --success: #22c55e;
64
+ --warning: #f59e0b;
65
+ --destructive: #ef4444;
66
+ --info: #0ea5e9;
67
+ }
68
+
69
+
70
+ /* --- Hairline aliases (dark) — manual toggle --- */
71
+ .dark .space-theme {
72
+ --hairline: rgba(255, 255, 255, 0.06);
73
+ --hairline-strong: rgba(255, 255, 255, 0.10);
74
+ }
75
+
76
+
77
+ /* --- Intent aliases (dark) — prefers-color-scheme --- */
78
+ @media (prefers-color-scheme: dark) {
79
+ .space-theme:not(.light) {
80
+ --primary: #5b6fff;
81
+ --primary-text: #ffffff;
82
+ --accent: #5b6fff;
83
+ --success: #22c55e;
84
+ --warning: #f59e0b;
85
+ --destructive: #ef4444;
86
+ --info: #0ea5e9;
87
+ }
88
+ }
89
+
90
+
91
+ /* --- Hairline aliases (dark) — prefers-color-scheme --- */
92
+ @media (prefers-color-scheme: dark) {
93
+ .space-theme:not(.light) {
94
+ --hairline: rgba(255, 255, 255, 0.06);
95
+ --hairline-strong: rgba(255, 255, 255, 0.10);
96
+ }
97
+ }
98
+ }
99
+
100
+ @layer visor-brand {
101
+ /* --- Brand: forced-mode aliases + tokens --- */
102
+ .space-theme {
103
+ --brand-logo-light: url("/themes/visor/brand/visor-logo-light.svg");
104
+ --brand-logo-dark: url("/themes/visor/brand/visor-logo-dark.svg");
105
+ --brand-logo-clear-space: 0.5rem;
106
+ --brand-logo-aspect-ratio: 1269.97 / 540;
107
+ --brand-brandmark-light: url("/themes/visor/brand/visor-brandmark.svg");
108
+ --brand-brandmark-dark: url("/themes/visor/brand/visor-brandmark.svg");
109
+ --brand-brandmark-clear-space: 0.25rem;
110
+ --brand-brandmark-aspect-ratio: 1 / 1;
111
+ --brand-wordmark-light: url("/themes/visor/brand/visor-wordmark-light.svg");
112
+ --brand-wordmark-dark: url("/themes/visor/brand/visor-wordmark-dark.svg");
113
+ --brand-wordmark-clear-space: 0.5rem;
114
+ --brand-wordmark-aspect-ratio: 1100 / 316;
115
+ --brand-monochrome-light: url("/themes/visor/brand/visor-monochrome.svg");
116
+ --brand-monochrome-dark: url("/themes/visor/brand/visor-monochrome.svg");
117
+ --brand-monochrome-clear-space: 0.25rem;
118
+ --brand-monochrome-aspect-ratio: 2210 / 636;
119
+ --brand-favicon-light: url("/themes/visor/brand/visor-favicon.svg");
120
+ --brand-favicon-dark: url("/themes/visor/brand/visor-favicon.svg");
121
+ --brand-favicon-aspect-ratio: 1 / 1;
122
+ }
123
+
124
+ /* --- Brand: variants (light) --- */
125
+ html:not(.dark) .space-theme {
126
+ --brand-logo: url("/themes/visor/brand/visor-logo-light.svg");
127
+ --brand-brandmark: url("/themes/visor/brand/visor-brandmark.svg");
128
+ --brand-wordmark: url("/themes/visor/brand/visor-wordmark-light.svg");
129
+ --brand-monochrome: url("/themes/visor/brand/visor-monochrome.svg");
130
+ --brand-favicon: url("/themes/visor/brand/visor-favicon.svg");
131
+ }
132
+
133
+ /* --- Brand: variants (dark) — manual toggle --- */
134
+ .dark .space-theme {
135
+ --brand-logo: url("/themes/visor/brand/visor-logo-dark.svg");
136
+ --brand-brandmark: url("/themes/visor/brand/visor-brandmark.svg");
137
+ --brand-wordmark: url("/themes/visor/brand/visor-wordmark-dark.svg");
138
+ --brand-monochrome: url("/themes/visor/brand/visor-monochrome.svg");
139
+ --brand-favicon: url("/themes/visor/brand/visor-favicon.svg");
140
+ }
141
+
142
+ /* --- Brand: variants (dark) — prefers-color-scheme --- */
143
+ @media (prefers-color-scheme: dark) {
144
+ .space-theme:not(.light) {
145
+ --brand-logo: url("/themes/visor/brand/visor-logo-dark.svg");
146
+ --brand-brandmark: url("/themes/visor/brand/visor-brandmark.svg");
147
+ --brand-wordmark: url("/themes/visor/brand/visor-wordmark-dark.svg");
148
+ --brand-monochrome: url("/themes/visor/brand/visor-monochrome.svg");
149
+ --brand-favicon: url("/themes/visor/brand/visor-favicon.svg");
150
+ }
151
+ }
152
+ }
6
153
 
7
154
  @layer visor-adaptive {
8
155
  /* ── Section 1: Shared tokens (mode-independent) ── */
@@ -189,6 +336,7 @@
189
336
  --text-primary: #e8e8f0;
190
337
  --text-secondary: rgba(232, 232, 240, 0.72);
191
338
  --text-tertiary: rgba(232, 232, 240, 0.5);
339
+ --text-muted: #6b6b80;
192
340
  --text-disabled: #51515d;
193
341
  --text-inverse: #191923;
194
342
  --text-inverse-secondary: #3f3f4b;
@@ -208,6 +356,8 @@
208
356
  --surface-popover: #0e0e18;
209
357
  --surface-subtle: #2b2b36;
210
358
  --surface-muted: #0b0b14;
359
+ --surface-screen: #080810;
360
+ --surface-elev: #2b2b36;
211
361
  --surface-overlay: #080810;
212
362
  --surface-interactive-default: #2b2b36;
213
363
  --surface-interactive-hover: #3f3f4b;
@@ -225,6 +375,9 @@
225
375
  --surface-error-default: #ef4444;
226
376
  --surface-info-subtle: #002437;
227
377
  --surface-info-default: #0ea5e9;
378
+ --surface-success-soft: color-mix(in srgb, var(--color-success-500) 10%, transparent);
379
+ --surface-warning-soft: color-mix(in srgb, var(--color-warning-500) 12%, transparent);
380
+ --surface-error-soft: color-mix(in srgb, var(--color-error-500) 12%, transparent);
228
381
  --surface-elev-0: #080810;
229
382
  --surface-elev-1: #191923;
230
383
  --surface-elev-2: #2b2b36;
@@ -253,6 +406,9 @@
253
406
  --interactive-primary-bg-hover: #7b93ff;
254
407
  --interactive-primary-bg-active: #aabcff;
255
408
  --interactive-primary-text: #ffffff;
409
+ --interactive-primary-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
410
+ --interactive-primary-glow: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
411
+ --interactive-primary-strong: #7b93ff;
256
412
  --interactive-secondary-bg: #2b2b36;
257
413
  --interactive-secondary-bg-hover: #3f3f4b;
258
414
  --interactive-secondary-bg-active: #51515d;
@@ -272,6 +428,7 @@
272
428
  --text-primary: #e8e8f0;
273
429
  --text-secondary: rgba(232, 232, 240, 0.72);
274
430
  --text-tertiary: rgba(232, 232, 240, 0.5);
431
+ --text-muted: #6b6b80;
275
432
  --text-disabled: #51515d;
276
433
  --text-inverse: #191923;
277
434
  --text-inverse-secondary: #3f3f4b;
@@ -293,6 +450,8 @@
293
450
  --surface-popover: #0e0e18;
294
451
  --surface-subtle: #2b2b36;
295
452
  --surface-muted: #0b0b14;
453
+ --surface-screen: #080810;
454
+ --surface-elev: #2b2b36;
296
455
  --surface-overlay: #080810;
297
456
  --surface-interactive-default: #2b2b36;
298
457
  --surface-interactive-hover: #3f3f4b;
@@ -310,6 +469,9 @@
310
469
  --surface-error-default: #ef4444;
311
470
  --surface-info-subtle: #002437;
312
471
  --surface-info-default: #0ea5e9;
472
+ --surface-success-soft: color-mix(in srgb, var(--color-success-500) 10%, transparent);
473
+ --surface-warning-soft: color-mix(in srgb, var(--color-warning-500) 12%, transparent);
474
+ --surface-error-soft: color-mix(in srgb, var(--color-error-500) 12%, transparent);
313
475
  --surface-elev-0: #080810;
314
476
  --surface-elev-1: #191923;
315
477
  --surface-elev-2: #2b2b36;
@@ -342,6 +504,9 @@
342
504
  --interactive-primary-bg-hover: #7b93ff;
343
505
  --interactive-primary-bg-active: #aabcff;
344
506
  --interactive-primary-text: #ffffff;
507
+ --interactive-primary-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
508
+ --interactive-primary-glow: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
509
+ --interactive-primary-strong: #7b93ff;
345
510
  --interactive-secondary-bg: #2b2b36;
346
511
  --interactive-secondary-bg-hover: #3f3f4b;
347
512
  --interactive-secondary-bg-active: #51515d;
@@ -363,6 +528,7 @@ html:not(.dark) .space-theme {
363
528
  --text-primary: #1a1630;
364
529
  --text-secondary: rgba(26, 22, 48, 0.72);
365
530
  --text-tertiary: rgba(26, 22, 48, 0.65);
531
+ --text-muted: #6b6b80;
366
532
  --text-disabled: #b4b4c2;
367
533
  --text-inverse: #ffffff;
368
534
  --text-inverse-secondary: #d2d2dd;
@@ -382,6 +548,8 @@ html:not(.dark) .space-theme {
382
548
  --surface-popover: #f2f0f8;
383
549
  --surface-subtle: #f5f5f8;
384
550
  --surface-muted: #e7e7ed;
551
+ --surface-screen: #f5f5f8;
552
+ --surface-elev: #e7e7ed;
385
553
  --surface-overlay: #191923;
386
554
  --surface-interactive-default: #ffffff;
387
555
  --surface-interactive-hover: #f5f5f8;
@@ -399,6 +567,9 @@ html:not(.dark) .space-theme {
399
567
  --surface-error-default: #ef4444;
400
568
  --surface-info-subtle: #ecf7ff;
401
569
  --surface-info-default: #0ea5e9;
570
+ --surface-success-soft: color-mix(in srgb, var(--color-success-500) 10%, transparent);
571
+ --surface-warning-soft: color-mix(in srgb, var(--color-warning-500) 12%, transparent);
572
+ --surface-error-soft: color-mix(in srgb, var(--color-error-500) 12%, transparent);
402
573
  --surface-elev-0: #ffffff;
403
574
  --surface-elev-1: #f5f5f8;
404
575
  --surface-elev-2: #e7e7ed;
@@ -427,6 +598,9 @@ html:not(.dark) .space-theme {
427
598
  --interactive-primary-bg-hover: #2e2dbc;
428
599
  --interactive-primary-bg-active: #1e168d;
429
600
  --interactive-primary-text: #ffffff;
601
+ --interactive-primary-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
602
+ --interactive-primary-glow: color-mix(in srgb, var(--color-primary-500) 32%, transparent);
603
+ --interactive-primary-strong: #3f49d7;
430
604
  --interactive-secondary-bg: #ffffff;
431
605
  --interactive-secondary-bg-hover: #f5f5f8;
432
606
  --interactive-secondary-bg-active: #e7e7ed;
package/dist/tokens.css CHANGED
@@ -5,7 +5,7 @@
5
5
  ============================================ */
6
6
 
7
7
  /* Import order: primitives → semantic → adaptive */
8
- @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
8
+ @layer visor-primitives, visor-semantic, visor-brand, visor-adaptive, visor-bridge;
9
9
 
10
10
  /* ============================================
11
11
  Tier 1: Primitives → @layer visor-primitives
package/dist/utilities.css CHANGED
@@ -3,7 +3,7 @@
3
3
  Generated by @loworbitstudio/visor-core
4
4
  DO NOT EDIT — run `npm run build` to regenerate
5
5
  ============================================ */
6
- @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
6
+ @layer visor-primitives, visor-semantic, visor-brand, visor-adaptive, visor-bridge;
7
7
 
8
8
  @layer visor-adaptive {
9
9
  /* --- Typography Utilities --- */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@loworbitstudio/visor-core",
3
- "version": "0.8.1",
3
+ "version": "0.9.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.8.1",
51
+ "@loworbitstudio/visor-theme-engine": "^0.12.0",
52
52
  "@types/node": "^22.0.0",
53
53
  "tsx": "^4.19.2",
54
54
  "typescript": "^5.7.2",