@loworbitstudio/visor-core 0.3.0 → 0.5.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.
@@ -0,0 +1,512 @@
1
+ @font-face {
2
+ font-family: "Product Sans";
3
+ src: url("https://fonts.visor.design/low-orbit-studio/product-sans/ProductSans-Regular.woff2") format("woff2");
4
+ font-weight: 400;
5
+ font-style: normal;
6
+ font-display: swap;
7
+ }
8
+
9
+ @font-face {
10
+ font-family: "Product Sans";
11
+ src: url("https://fonts.visor.design/low-orbit-studio/product-sans/ProductSans-Bold.woff2") format("woff2");
12
+ font-weight: 700;
13
+ font-style: normal;
14
+ font-display: swap;
15
+ }
16
+
17
+
18
+ /* ── Section 1: Shared tokens (mode-independent) ── */
19
+
20
+ /* --- Primitive: Colors --- */
21
+ .modern-minimal-theme {
22
+ min-height: 100vh;
23
+ font-size: 1rem;
24
+ background: var(--surface-page, var(--surface-background));
25
+ color: var(--text-primary);
26
+ font-family: var(--font-sans);
27
+
28
+ --color-white: #ffffff;
29
+ --color-black: #000000;
30
+ --color-primary-50: #e8faf0;
31
+ --color-primary-100: #ddfceb;
32
+ --color-primary-200: #ccffe3;
33
+ --color-primary-300: #bbffdb;
34
+ --color-primary-400: #a0ffcf;
35
+ --color-primary-500: #04bf81;
36
+ --color-primary-600: #016643;
37
+ --color-primary-700: #005033;
38
+ --color-primary-800: #003823;
39
+ --color-primary-900: #002113;
40
+ --color-primary-950: #000d05;
41
+ --color-accent-50: #e8faf0;
42
+ --color-accent-100: #ddfceb;
43
+ --color-accent-200: #ccffe3;
44
+ --color-accent-300: #bbffdb;
45
+ --color-accent-400: #a0ffcf;
46
+ --color-accent-500: #04bf81;
47
+ --color-accent-600: #016643;
48
+ --color-accent-700: #005033;
49
+ --color-accent-800: #003823;
50
+ --color-accent-900: #002113;
51
+ --color-accent-950: #000d05;
52
+ --color-neutral-50: #f4f5f7;
53
+ --color-neutral-100: #f0f2f6;
54
+ --color-neutral-200: #eaeef5;
55
+ --color-neutral-300: #e2e8f3;
56
+ --color-neutral-400: #d8dfec;
57
+ --color-neutral-500: #6c727e;
58
+ --color-neutral-600: #505561;
59
+ --color-neutral-700: #3d424d;
60
+ --color-neutral-800: #292e38;
61
+ --color-neutral-900: #171b22;
62
+ --color-neutral-950: #07090e;
63
+ --color-success-50: #e8fbeb;
64
+ --color-success-100: #defde3;
65
+ --color-success-500: #22c55e;
66
+ --color-success-600: #00672b;
67
+ --color-success-700: #005120;
68
+ --color-success-900: #002209;
69
+ --color-warning-50: #fff3e6;
70
+ --color-warning-100: #fff1e3;
71
+ --color-warning-500: #f59e0b;
72
+ --color-warning-600: #774a01;
73
+ --color-warning-700: #5e3900;
74
+ --color-warning-900: #281600;
75
+ --color-error-50: #fff2f0;
76
+ --color-error-100: #ffefed;
77
+ --color-error-500: #ef4444;
78
+ --color-error-600: #a30016;
79
+ --color-error-700: #81000f;
80
+ --color-error-900: #3a0003;
81
+ --color-info-50: #ecf7ff;
82
+ --color-info-100: #e8f5ff;
83
+ --color-info-500: #0ea5e9;
84
+ --color-info-600: #005c85;
85
+ --color-info-700: #004869;
86
+ --color-info-900: #001d2e;
87
+ }
88
+
89
+
90
+ /* --- Primitive: Spacing --- */
91
+ .modern-minimal-theme {
92
+ --spacing-0: 0;
93
+ --spacing-1: 0.25rem;
94
+ --spacing-2: 0.5rem;
95
+ --spacing-3: 0.75rem;
96
+ --spacing-4: 1rem;
97
+ --spacing-5: 1.25rem;
98
+ --spacing-6: 1.5rem;
99
+ --spacing-8: 2rem;
100
+ --spacing-10: 2.5rem;
101
+ --spacing-12: 3rem;
102
+ --spacing-16: 4rem;
103
+ --spacing-20: 5rem;
104
+ --spacing-24: 6rem;
105
+ }
106
+
107
+
108
+ /* --- Primitive: Border Radius --- */
109
+ .modern-minimal-theme {
110
+ --radius-none: 0;
111
+ --radius-sm: 0.5rem; /* 8px */
112
+ --radius-md: 0.75rem; /* 12px */
113
+ --radius-lg: 1rem; /* 16px */
114
+ --radius-xl: 1.25rem; /* 20px */
115
+ --radius-2xl: 1.66625rem; /* 27px */
116
+ --radius-3xl: 2.5rem; /* 40px */
117
+ --radius-full: 9999px;
118
+ }
119
+
120
+
121
+ /* --- Primitive: Typography --- */
122
+ .modern-minimal-theme {
123
+ --font-display: Product Sans;
124
+ --font-sans: Product Sans;
125
+ --font-heading: var(--font-sans);
126
+ --font-body: Product Sans;
127
+ --font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
128
+ --font-size-xs: 0.75rem; /* 12px */
129
+ --font-size-sm: 0.875rem; /* 14px */
130
+ --font-size-base: 1rem; /* 16px */
131
+ --font-size-lg: 1.125rem; /* 18px */
132
+ --font-size-xl: 1.25rem; /* 20px */
133
+ --font-size-2xl: 1.5rem; /* 24px */
134
+ --font-size-3xl: 1.875rem; /* 30px */
135
+ --font-size-4xl: 2.25rem; /* 36px */
136
+ --font-weight-normal: 400;
137
+ --font-weight-medium: 500;
138
+ --font-weight-semibold: 700;
139
+ --font-weight-bold: 700;
140
+ --line-height-none: 1;
141
+ --line-height-tight: 1.25;
142
+ --line-height-snug: 1.375;
143
+ --line-height-normal: 1.5;
144
+ --line-height-relaxed: 1.625;
145
+ --line-height-loose: 2;
146
+ --letter-spacing-normal: 0.05em;
147
+ }
148
+
149
+
150
+ /* --- Primitive: Shadows --- */
151
+ .modern-minimal-theme {
152
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
153
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
154
+ --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
155
+ --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04);
156
+ --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.06), 0 8px 10px rgba(0, 0, 0, 0.03);
157
+ }
158
+
159
+
160
+ /* --- Primitive: Motion --- */
161
+ .modern-minimal-theme {
162
+ --motion-duration-100: 100ms;
163
+ --motion-duration-150: 150ms;
164
+ --motion-duration-200: 200ms;
165
+ --motion-duration-300: 300ms;
166
+ --motion-duration-500: 400ms;
167
+ --motion-duration-800: 800ms;
168
+ --motion-easing-linear: linear;
169
+ --motion-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
170
+ --motion-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
171
+ --motion-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
172
+ --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
173
+ }
174
+
175
+
176
+ /* --- Primitive: Miscellaneous --- */
177
+ .modern-minimal-theme {
178
+ --border-width-1: 1px;
179
+ --border-width-2: 2px;
180
+ --border-width-3: 3px;
181
+ --border-width-4: 4px;
182
+ --z-base: 0;
183
+ --z-raised: 1;
184
+ --z-dropdown: 1000;
185
+ --z-sticky: 1100;
186
+ --z-modal: 1300;
187
+ --z-popover: 1400;
188
+ --z-toast: 1500;
189
+ --overlay-bg: rgba(0, 0, 0, 0.5);
190
+ --focus-ring-width: 2px;
191
+ --focus-ring-offset: 2px;
192
+ }
193
+
194
+
195
+ /* ── Section 2: Dark mode overrides ── */
196
+
197
+ /* --- Primitive overrides (dark) — dark brand color anchors at shade 500 --- */
198
+ .dark .modern-minimal-theme {
199
+ --color-primary-50: #e7fbf0;
200
+ --color-primary-100: #dcfdeb;
201
+ --color-primary-200: #ceffe5;
202
+ --color-primary-300: #c0ffde;
203
+ --color-primary-400: #aaffd5;
204
+ --color-primary-500: #02cd8d;
205
+ --color-primary-600: #006644;
206
+ --color-primary-700: #005034;
207
+ --color-primary-800: #003823;
208
+ --color-primary-900: #002113;
209
+ --color-primary-950: #000d06;
210
+ }
211
+
212
+
213
+ /* --- Adaptive: Text (dark) — manual toggle --- */
214
+ .dark .modern-minimal-theme {
215
+ --text-primary: rgba(255, 255, 255, 0.7);
216
+ --text-secondary: rgba(255, 255, 255, 0.70);
217
+ --text-tertiary: rgba(255, 255, 255, 0.55);
218
+ --text-disabled: rgba(255, 255, 255, 0.1);
219
+ --text-inverse: #171b22;
220
+ --text-inverse-secondary: #3d424d;
221
+ --text-link: #a0ffcf;
222
+ --text-link-hover: #bbffdb;
223
+ --text-success: #22c55e;
224
+ --text-warning: #f59e0b;
225
+ --text-error: #ef4444;
226
+ --text-info: #0ea5e9;
227
+ }
228
+
229
+
230
+ /* --- Adaptive: Surface (dark) — manual toggle --- */
231
+ .dark .modern-minimal-theme {
232
+ --surface-page: #000000;
233
+ --surface-card: rgba(255, 255, 255, 0.04);
234
+ --surface-popover: #141414;
235
+ --surface-subtle: rgba(255, 255, 255, 0.02);
236
+ --surface-muted: rgba(255, 255, 255, 0.04);
237
+ --surface-overlay: #07090e;
238
+ --surface-interactive-default: #292e38;
239
+ --surface-interactive-hover: #3d424d;
240
+ --surface-interactive-active: #505561;
241
+ --surface-interactive-disabled: #292e38;
242
+ --surface-selected: #003823;
243
+ --surface-accent-subtle: #002113;
244
+ --surface-accent-default: #04bf81;
245
+ --surface-accent-strong: #a0ffcf;
246
+ --surface-success-subtle: #002209;
247
+ --surface-success-default: #22c55e;
248
+ --surface-warning-subtle: #281600;
249
+ --surface-warning-default: #f59e0b;
250
+ --surface-error-subtle: #3a0003;
251
+ --surface-error-default: #ef4444;
252
+ --surface-info-subtle: #001d2e;
253
+ --surface-info-default: #0ea5e9;
254
+ }
255
+
256
+
257
+ /* --- Adaptive: Border (dark) — manual toggle --- */
258
+ .dark .modern-minimal-theme {
259
+ --border-default: rgba(255, 255, 255, 0.06);
260
+ --border-muted: rgba(255, 255, 255, 0.03);
261
+ --border-strong: rgba(255, 255, 255, 0.1);
262
+ --border-focus: #a0ffcf;
263
+ --border-disabled: #292e38;
264
+ --border-success: #22c55e;
265
+ --border-warning: #f59e0b;
266
+ --border-error: #ef4444;
267
+ --border-info: #0ea5e9;
268
+ }
269
+
270
+
271
+ /* --- Adaptive: Interactive (dark) — manual toggle --- */
272
+ .dark .modern-minimal-theme {
273
+ --interactive-primary-bg: #04bf81;
274
+ --interactive-primary-bg-hover: #a0ffcf;
275
+ --interactive-primary-bg-active: #bbffdb;
276
+ --interactive-primary-text: #ffffff;
277
+ --interactive-secondary-bg: #292e38;
278
+ --interactive-secondary-bg-hover: #3d424d;
279
+ --interactive-secondary-bg-active: #505561;
280
+ --interactive-secondary-text: #f4f5f7;
281
+ --interactive-secondary-border: #505561;
282
+ --interactive-destructive-bg: #ef4444;
283
+ --interactive-destructive-bg-hover: #a30016;
284
+ --interactive-destructive-text: #ffffff;
285
+ --interactive-ghost-bg: #292e38;
286
+ --interactive-ghost-bg-hover: #3d424d;
287
+ }
288
+
289
+
290
+ /* --- Adaptive: Text (dark) — prefers-color-scheme --- */
291
+ @media (prefers-color-scheme: dark) {
292
+ .modern-minimal-theme:not(.light) {
293
+ --text-primary: rgba(255, 255, 255, 0.7);
294
+ --text-secondary: rgba(255, 255, 255, 0.70);
295
+ --text-tertiary: rgba(255, 255, 255, 0.55);
296
+ --text-disabled: rgba(255, 255, 255, 0.1);
297
+ --text-inverse: #171b22;
298
+ --text-inverse-secondary: #3d424d;
299
+ --text-link: #a0ffcf;
300
+ --text-link-hover: #bbffdb;
301
+ --text-success: #22c55e;
302
+ --text-warning: #f59e0b;
303
+ --text-error: #ef4444;
304
+ --text-info: #0ea5e9;
305
+ }
306
+ }
307
+
308
+
309
+ /* --- Adaptive: Surface (dark) — prefers-color-scheme --- */
310
+ @media (prefers-color-scheme: dark) {
311
+ .modern-minimal-theme:not(.light) {
312
+ --surface-page: #000000;
313
+ --surface-card: rgba(255, 255, 255, 0.04);
314
+ --surface-popover: #141414;
315
+ --surface-subtle: rgba(255, 255, 255, 0.02);
316
+ --surface-muted: rgba(255, 255, 255, 0.04);
317
+ --surface-overlay: #07090e;
318
+ --surface-interactive-default: #292e38;
319
+ --surface-interactive-hover: #3d424d;
320
+ --surface-interactive-active: #505561;
321
+ --surface-interactive-disabled: #292e38;
322
+ --surface-selected: #003823;
323
+ --surface-accent-subtle: #002113;
324
+ --surface-accent-default: #04bf81;
325
+ --surface-accent-strong: #a0ffcf;
326
+ --surface-success-subtle: #002209;
327
+ --surface-success-default: #22c55e;
328
+ --surface-warning-subtle: #281600;
329
+ --surface-warning-default: #f59e0b;
330
+ --surface-error-subtle: #3a0003;
331
+ --surface-error-default: #ef4444;
332
+ --surface-info-subtle: #001d2e;
333
+ --surface-info-default: #0ea5e9;
334
+ }
335
+ }
336
+
337
+
338
+ /* --- Adaptive: Border (dark) — prefers-color-scheme --- */
339
+ @media (prefers-color-scheme: dark) {
340
+ .modern-minimal-theme:not(.light) {
341
+ --border-default: rgba(255, 255, 255, 0.06);
342
+ --border-muted: rgba(255, 255, 255, 0.03);
343
+ --border-strong: rgba(255, 255, 255, 0.1);
344
+ --border-focus: #a0ffcf;
345
+ --border-disabled: #292e38;
346
+ --border-success: #22c55e;
347
+ --border-warning: #f59e0b;
348
+ --border-error: #ef4444;
349
+ --border-info: #0ea5e9;
350
+ }
351
+ }
352
+
353
+
354
+ /* --- Adaptive: Interactive (dark) — prefers-color-scheme --- */
355
+ @media (prefers-color-scheme: dark) {
356
+ .modern-minimal-theme:not(.light) {
357
+ --interactive-primary-bg: #04bf81;
358
+ --interactive-primary-bg-hover: #a0ffcf;
359
+ --interactive-primary-bg-active: #bbffdb;
360
+ --interactive-primary-text: #ffffff;
361
+ --interactive-secondary-bg: #292e38;
362
+ --interactive-secondary-bg-hover: #3d424d;
363
+ --interactive-secondary-bg-active: #505561;
364
+ --interactive-secondary-text: #f4f5f7;
365
+ --interactive-secondary-border: #505561;
366
+ --interactive-destructive-bg: #ef4444;
367
+ --interactive-destructive-bg-hover: #a30016;
368
+ --interactive-destructive-text: #ffffff;
369
+ --interactive-ghost-bg: #292e38;
370
+ --interactive-ghost-bg-hover: #3d424d;
371
+ }
372
+ }
373
+
374
+
375
+ /* --- Primitive overrides (dark) — prefers-color-scheme --- */
376
+ @media (prefers-color-scheme: dark) {
377
+ .modern-minimal-theme:not(.light) {
378
+ --color-primary-50: #e7fbf0;
379
+ --color-primary-100: #dcfdeb;
380
+ --color-primary-200: #ceffe5;
381
+ --color-primary-300: #c0ffde;
382
+ --color-primary-400: #aaffd5;
383
+ --color-primary-500: #02cd8d;
384
+ --color-primary-600: #006644;
385
+ --color-primary-700: #005034;
386
+ --color-primary-800: #003823;
387
+ --color-primary-900: #002113;
388
+ --color-primary-950: #000d06;
389
+ }
390
+ }
391
+
392
+
393
+ /* ── Section 3: Light mode overrides ── */
394
+
395
+ /* --- Adaptive: Text (light) --- */
396
+ html:not(.dark) .modern-minimal-theme {
397
+ --text-primary: rgba(0, 0, 0, 0.9);
398
+ --text-secondary: rgba(0, 0, 0, 0.55);
399
+ --text-tertiary: rgba(0, 0, 0, 0.55);
400
+ --text-disabled: #e2e8f3;
401
+ --text-inverse: #ffffff;
402
+ --text-inverse-secondary: #eaeef5;
403
+ --text-link: #016643;
404
+ --text-link-hover: #005033;
405
+ --text-success: #005120;
406
+ --text-warning: #5e3900;
407
+ --text-error: #81000f;
408
+ --text-info: #004869;
409
+ }
410
+
411
+
412
+ /* --- Adaptive: Surface (light) --- */
413
+ html:not(.dark) .modern-minimal-theme {
414
+ --surface-page: #FFFFFF;
415
+ --surface-card: #FFFFFF;
416
+ --surface-popover: #FFFFFF;
417
+ --surface-subtle: #f4f5f7;
418
+ --surface-muted: #f0f2f6;
419
+ --surface-overlay: #171b22;
420
+ --surface-interactive-default: #ffffff;
421
+ --surface-interactive-hover: #f4f5f7;
422
+ --surface-interactive-active: #f0f2f6;
423
+ --surface-interactive-disabled: #f4f5f7;
424
+ --surface-selected: #ddfceb;
425
+ --surface-accent-subtle: #e8faf0;
426
+ --surface-accent-default: #04bf81;
427
+ --surface-accent-strong: #016643;
428
+ --surface-success-subtle: #e8fbeb;
429
+ --surface-success-default: #22c55e;
430
+ --surface-warning-subtle: #fff3e6;
431
+ --surface-warning-default: #f59e0b;
432
+ --surface-error-subtle: #fff2f0;
433
+ --surface-error-default: #ef4444;
434
+ --surface-info-subtle: #ecf7ff;
435
+ --surface-info-default: #0ea5e9;
436
+ }
437
+
438
+
439
+ /* --- Adaptive: Border (light) --- */
440
+ html:not(.dark) .modern-minimal-theme {
441
+ --border-default: #eaeef5;
442
+ --border-muted: #f0f2f6;
443
+ --border-strong: #e2e8f3;
444
+ --border-focus: #04bf81;
445
+ --border-disabled: #f0f2f6;
446
+ --border-success: #22c55e;
447
+ --border-warning: #f59e0b;
448
+ --border-error: #ef4444;
449
+ --border-info: #0ea5e9;
450
+ }
451
+
452
+
453
+ /* --- Adaptive: Interactive (light) --- */
454
+ html:not(.dark) .modern-minimal-theme {
455
+ --interactive-primary-bg: #016643;
456
+ --interactive-primary-bg-hover: #005033;
457
+ --interactive-primary-bg-active: #003823;
458
+ --interactive-primary-text: #ffffff;
459
+ --interactive-secondary-bg: #ffffff;
460
+ --interactive-secondary-bg-hover: #f4f5f7;
461
+ --interactive-secondary-bg-active: #f0f2f6;
462
+ --interactive-secondary-text: #171b22;
463
+ --interactive-secondary-border: #e2e8f3;
464
+ --interactive-destructive-bg: #a30016;
465
+ --interactive-destructive-bg-hover: #81000f;
466
+ --interactive-destructive-text: #ffffff;
467
+ --interactive-ghost-bg: #ffffff;
468
+ --interactive-ghost-bg-hover: #f0f2f6;
469
+ }
470
+
471
+
472
+ /* --- Fumadocs bridge: dark --- */
473
+ .dark .modern-minimal-theme {
474
+ --color-fd-background: #000000;
475
+ --color-fd-foreground: rgba(255, 255, 255, 0.7);
476
+ --color-fd-card: rgba(255, 255, 255, 0.04);
477
+ --color-fd-card-foreground: rgba(255, 255, 255, 0.7);
478
+ --color-fd-border: rgba(255, 255, 255, 0.06);
479
+ --color-fd-muted: rgba(255, 255, 255, 0.04);
480
+ --color-fd-muted-foreground: rgba(255, 255, 255, 0.70);
481
+ --color-fd-accent: #04bf81;
482
+ --color-fd-accent-foreground: #ffffff;
483
+ --color-fd-primary: #04bf81;
484
+ --color-fd-primary-foreground: #ffffff;
485
+ --color-fd-secondary: rgba(255, 255, 255, 0.04);
486
+ --color-fd-secondary-foreground: rgba(255, 255, 255, 0.7);
487
+ --color-fd-popover: #141414;
488
+ --color-fd-popover-foreground: rgba(255, 255, 255, 0.7);
489
+ --color-fd-ring: #a0ffcf;
490
+ }
491
+
492
+
493
+ /* --- Fumadocs bridge: light --- */
494
+ html:not(.dark) .modern-minimal-theme {
495
+ --color-fd-background: #FFFFFF;
496
+ --color-fd-foreground: rgba(0, 0, 0, 0.9);
497
+ --color-fd-card: #FFFFFF;
498
+ --color-fd-card-foreground: rgba(0, 0, 0, 0.9);
499
+ --color-fd-border: #eaeef5;
500
+ --color-fd-muted: #f0f2f6;
501
+ --color-fd-muted-foreground: rgba(0, 0, 0, 0.55);
502
+ --color-fd-accent: #04bf81;
503
+ --color-fd-accent-foreground: #ffffff;
504
+ --color-fd-primary: #04bf81;
505
+ --color-fd-primary-foreground: #ffffff;
506
+ --color-fd-secondary: #f0f2f6;
507
+ --color-fd-secondary-foreground: rgba(0, 0, 0, 0.9);
508
+ --color-fd-popover: #FFFFFF;
509
+ --color-fd-popover-foreground: rgba(0, 0, 0, 0.9);
510
+ --color-fd-ring: #04bf81;
511
+ }
512
+