@loworbitstudio/visor-core 0.9.0 → 0.10.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 (7) hide show
  1. package/dist/semantic.css +6 -0
  2. package/dist/themes/blackout.css +9 -9
  3. package/dist/themes/modern-minimal.css +10 -10
  4. package/dist/themes/neutral.css +9 -9
  5. package/dist/themes/space.css +9 -9
  6. package/dist/tokens.css +6 -0
  7. package/package.json +2 -2
package/dist/semantic.css CHANGED
@@ -176,4 +176,10 @@
176
176
  --sidebar-ring: var(--color-primary-500);
177
177
  --sidebar-text-muted: var(--color-neutral-500);
178
178
  }
179
+
180
+
181
+ /* --- Semantic: Field --- */
182
+ :root {
183
+ --field-menu-bg: var(--surface-popover);
184
+ }
179
185
  }
package/dist/themes/blackout.css CHANGED
@@ -37,7 +37,7 @@
37
37
  /* --- Intent aliases (light) --- */
38
38
  html:not(.dark) .blackout-theme {
39
39
  --primary: #666666;
40
- --primary-text: #ffffff;
40
+ --primary-text: var(--interactive-primary-text);
41
41
  --accent: #666666;
42
42
  --success: #22c55e;
43
43
  --warning: #f59e0b;
@@ -56,7 +56,7 @@ html:not(.dark) .blackout-theme {
56
56
  /* --- Intent aliases (dark) — manual toggle --- */
57
57
  .dark .blackout-theme {
58
58
  --primary: #666666;
59
- --primary-text: #ffffff;
59
+ --primary-text: var(--interactive-primary-text);
60
60
  --accent: #666666;
61
61
  --success: #22c55e;
62
62
  --warning: #f59e0b;
@@ -74,9 +74,9 @@ html:not(.dark) .blackout-theme {
74
74
 
75
75
  /* --- Intent aliases (dark) — prefers-color-scheme --- */
76
76
  @media (prefers-color-scheme: dark) {
77
- .blackout-theme:not(.light) {
77
+ .blackout-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
78
78
  --primary: #666666;
79
- --primary-text: #ffffff;
79
+ --primary-text: var(--interactive-primary-text);
80
80
  --accent: #666666;
81
81
  --success: #22c55e;
82
82
  --warning: #f59e0b;
@@ -88,7 +88,7 @@ html:not(.dark) .blackout-theme {
88
88
 
89
89
  /* --- Hairline aliases (dark) — prefers-color-scheme --- */
90
90
  @media (prefers-color-scheme: dark) {
91
- .blackout-theme:not(.light) {
91
+ .blackout-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
92
92
  --hairline: rgba(255, 255, 255, 0.06);
93
93
  --hairline-strong: rgba(255, 255, 255, 0.10);
94
94
  }
@@ -422,7 +422,7 @@ html:not(.dark) .blackout-theme {
422
422
 
423
423
  /* --- Adaptive: Text (dark) — prefers-color-scheme --- */
424
424
  @media (prefers-color-scheme: dark) {
425
- .blackout-theme:not(.light) {
425
+ .blackout-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
426
426
  --text-primary: rgba(255, 255, 255, 0.7);
427
427
  --text-secondary: rgba(255, 255, 255, 0.70);
428
428
  --text-tertiary: rgba(255, 255, 255, 0.55);
@@ -442,7 +442,7 @@ html:not(.dark) .blackout-theme {
442
442
 
443
443
  /* --- Adaptive: Surface (dark) — prefers-color-scheme --- */
444
444
  @media (prefers-color-scheme: dark) {
445
- .blackout-theme:not(.light) {
445
+ .blackout-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
446
446
  --surface-page: #000000;
447
447
  --surface-card: rgba(255, 255, 255, 0.04);
448
448
  --surface-popover: #141414;
@@ -481,7 +481,7 @@ html:not(.dark) .blackout-theme {
481
481
 
482
482
  /* --- Adaptive: Border (dark) — prefers-color-scheme --- */
483
483
  @media (prefers-color-scheme: dark) {
484
- .blackout-theme:not(.light) {
484
+ .blackout-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
485
485
  --border-default: rgba(255, 255, 255, 0.06);
486
486
  --border-muted: rgba(255, 255, 255, 0.03);
487
487
  --border-strong: rgba(255, 255, 255, 0.1);
@@ -497,7 +497,7 @@ html:not(.dark) .blackout-theme {
497
497
 
498
498
  /* --- Adaptive: Interactive (dark) — prefers-color-scheme --- */
499
499
  @media (prefers-color-scheme: dark) {
500
- .blackout-theme:not(.light) {
500
+ .blackout-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
501
501
  --interactive-primary-bg: #666666;
502
502
  --interactive-primary-bg-hover: #868686;
503
503
  --interactive-primary-bg-active: #b2b2b2;
package/dist/themes/modern-minimal.css CHANGED
@@ -51,7 +51,7 @@
51
51
  /* --- Intent aliases (light) --- */
52
52
  html:not(.dark) .modern-minimal-theme {
53
53
  --primary: #04bf81;
54
- --primary-text: #ffffff;
54
+ --primary-text: var(--interactive-primary-text);
55
55
  --accent: #04bf81;
56
56
  --success: #22c55e;
57
57
  --warning: #f59e0b;
@@ -70,7 +70,7 @@ html:not(.dark) .modern-minimal-theme {
70
70
  /* --- Intent aliases (dark) — manual toggle --- */
71
71
  .dark .modern-minimal-theme {
72
72
  --primary: #02cd8d;
73
- --primary-text: #ffffff;
73
+ --primary-text: var(--interactive-primary-text);
74
74
  --accent: #04bf81;
75
75
  --success: #22c55e;
76
76
  --warning: #f59e0b;
@@ -88,9 +88,9 @@ html:not(.dark) .modern-minimal-theme {
88
88
 
89
89
  /* --- Intent aliases (dark) — prefers-color-scheme --- */
90
90
  @media (prefers-color-scheme: dark) {
91
- .modern-minimal-theme:not(.light) {
91
+ .modern-minimal-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
92
92
  --primary: #02cd8d;
93
- --primary-text: #ffffff;
93
+ --primary-text: var(--interactive-primary-text);
94
94
  --accent: #04bf81;
95
95
  --success: #22c55e;
96
96
  --warning: #f59e0b;
@@ -102,7 +102,7 @@ html:not(.dark) .modern-minimal-theme {
102
102
 
103
103
  /* --- Hairline aliases (dark) — prefers-color-scheme --- */
104
104
  @media (prefers-color-scheme: dark) {
105
- .modern-minimal-theme:not(.light) {
105
+ .modern-minimal-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
106
106
  --hairline: rgba(255, 255, 255, 0.06);
107
107
  --hairline-strong: rgba(255, 255, 255, 0.10);
108
108
  }
@@ -452,7 +452,7 @@ html:not(.dark) .modern-minimal-theme {
452
452
 
453
453
  /* --- Adaptive: Text (dark) — prefers-color-scheme --- */
454
454
  @media (prefers-color-scheme: dark) {
455
- .modern-minimal-theme:not(.light) {
455
+ .modern-minimal-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
456
456
  --text-primary: rgba(255, 255, 255, 0.7);
457
457
  --text-secondary: rgba(255, 255, 255, 0.70);
458
458
  --text-tertiary: rgba(255, 255, 255, 0.55);
@@ -472,7 +472,7 @@ html:not(.dark) .modern-minimal-theme {
472
472
 
473
473
  /* --- Adaptive: Surface (dark) — prefers-color-scheme --- */
474
474
  @media (prefers-color-scheme: dark) {
475
- .modern-minimal-theme:not(.light) {
475
+ .modern-minimal-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
476
476
  --surface-page: #000000;
477
477
  --surface-card: rgba(255, 255, 255, 0.04);
478
478
  --surface-popover: #141414;
@@ -511,7 +511,7 @@ html:not(.dark) .modern-minimal-theme {
511
511
 
512
512
  /* --- Adaptive: Border (dark) — prefers-color-scheme --- */
513
513
  @media (prefers-color-scheme: dark) {
514
- .modern-minimal-theme:not(.light) {
514
+ .modern-minimal-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
515
515
  --border-default: rgba(255, 255, 255, 0.06);
516
516
  --border-muted: rgba(255, 255, 255, 0.03);
517
517
  --border-strong: rgba(255, 255, 255, 0.1);
@@ -527,7 +527,7 @@ html:not(.dark) .modern-minimal-theme {
527
527
 
528
528
  /* --- Adaptive: Interactive (dark) — prefers-color-scheme --- */
529
529
  @media (prefers-color-scheme: dark) {
530
- .modern-minimal-theme:not(.light) {
530
+ .modern-minimal-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
531
531
  --interactive-primary-bg: #04bf81;
532
532
  --interactive-primary-bg-hover: #a0ffcf;
533
533
  --interactive-primary-bg-active: #bbffdb;
@@ -551,7 +551,7 @@ html:not(.dark) .modern-minimal-theme {
551
551
 
552
552
  /* --- Primitive overrides (dark) — prefers-color-scheme --- */
553
553
  @media (prefers-color-scheme: dark) {
554
- .modern-minimal-theme:not(.light) {
554
+ .modern-minimal-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
555
555
  --color-primary-50: #e7fbf0;
556
556
  --color-primary-100: #d7f7e6;
557
557
  --color-primary-200: #b8f4d5;
package/dist/themes/neutral.css CHANGED
@@ -35,7 +35,7 @@
35
35
  /* --- Intent aliases (light) --- */
36
36
  html:not(.dark) .neutral-theme {
37
37
  --primary: #1798ad;
38
- --primary-text: #ffffff;
38
+ --primary-text: var(--interactive-primary-text);
39
39
  --accent: #1798ad;
40
40
  --success: #22c55e;
41
41
  --warning: #f59e0b;
@@ -54,7 +54,7 @@ html:not(.dark) .neutral-theme {
54
54
  /* --- Intent aliases (dark) — manual toggle --- */
55
55
  .dark .neutral-theme {
56
56
  --primary: #1798ad;
57
- --primary-text: #ffffff;
57
+ --primary-text: var(--interactive-primary-text);
58
58
  --accent: #1798ad;
59
59
  --success: #22c55e;
60
60
  --warning: #f59e0b;
@@ -72,9 +72,9 @@ html:not(.dark) .neutral-theme {
72
72
 
73
73
  /* --- Intent aliases (dark) — prefers-color-scheme --- */
74
74
  @media (prefers-color-scheme: dark) {
75
- .neutral-theme:not(.light) {
75
+ .neutral-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
76
76
  --primary: #1798ad;
77
- --primary-text: #ffffff;
77
+ --primary-text: var(--interactive-primary-text);
78
78
  --accent: #1798ad;
79
79
  --success: #22c55e;
80
80
  --warning: #f59e0b;
@@ -86,7 +86,7 @@ html:not(.dark) .neutral-theme {
86
86
 
87
87
  /* --- Hairline aliases (dark) — prefers-color-scheme --- */
88
88
  @media (prefers-color-scheme: dark) {
89
- .neutral-theme:not(.light) {
89
+ .neutral-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
90
90
  --hairline: rgba(255, 255, 255, 0.06);
91
91
  --hairline-strong: rgba(255, 255, 255, 0.10);
92
92
  }
@@ -420,7 +420,7 @@ html:not(.dark) .neutral-theme {
420
420
 
421
421
  /* --- Adaptive: Text (dark) — prefers-color-scheme --- */
422
422
  @media (prefers-color-scheme: dark) {
423
- .neutral-theme:not(.light) {
423
+ .neutral-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
424
424
  --text-primary: #f5f5f6;
425
425
  --text-secondary: #b6b7bd;
426
426
  --text-tertiary: #8e8e97;
@@ -440,7 +440,7 @@ html:not(.dark) .neutral-theme {
440
440
 
441
441
  /* --- Adaptive: Surface (dark) — prefers-color-scheme --- */
442
442
  @media (prefers-color-scheme: dark) {
443
- .neutral-theme:not(.light) {
443
+ .neutral-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
444
444
  --surface-page: #09090b;
445
445
  --surface-card: #18181b;
446
446
  --surface-popover: #18181b;
@@ -479,7 +479,7 @@ html:not(.dark) .neutral-theme {
479
479
 
480
480
  /* --- Adaptive: Border (dark) — prefers-color-scheme --- */
481
481
  @media (prefers-color-scheme: dark) {
482
- .neutral-theme:not(.light) {
482
+ .neutral-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
483
483
  --border-default: #41414a;
484
484
  --border-muted: #2d2d34;
485
485
  --border-strong: #54545d;
@@ -495,7 +495,7 @@ html:not(.dark) .neutral-theme {
495
495
 
496
496
  /* --- Adaptive: Interactive (dark) — prefers-color-scheme --- */
497
497
  @media (prefers-color-scheme: dark) {
498
- .neutral-theme:not(.light) {
498
+ .neutral-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
499
499
  --interactive-primary-bg: #1798ad;
500
500
  --interactive-primary-bg-hover: #4fb0c3;
501
501
  --interactive-primary-bg-active: #89cfde;
package/dist/themes/space.css CHANGED
@@ -39,7 +39,7 @@
39
39
  /* --- Intent aliases (light) --- */
40
40
  html:not(.dark) .space-theme {
41
41
  --primary: #5b6fff;
42
- --primary-text: #ffffff;
42
+ --primary-text: var(--interactive-primary-text);
43
43
  --accent: #5b6fff;
44
44
  --success: #22c55e;
45
45
  --warning: #f59e0b;
@@ -58,7 +58,7 @@ html:not(.dark) .space-theme {
58
58
  /* --- Intent aliases (dark) — manual toggle --- */
59
59
  .dark .space-theme {
60
60
  --primary: #5b6fff;
61
- --primary-text: #ffffff;
61
+ --primary-text: var(--interactive-primary-text);
62
62
  --accent: #5b6fff;
63
63
  --success: #22c55e;
64
64
  --warning: #f59e0b;
@@ -76,9 +76,9 @@ html:not(.dark) .space-theme {
76
76
 
77
77
  /* --- Intent aliases (dark) — prefers-color-scheme --- */
78
78
  @media (prefers-color-scheme: dark) {
79
- .space-theme:not(.light) {
79
+ .space-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
80
80
  --primary: #5b6fff;
81
- --primary-text: #ffffff;
81
+ --primary-text: var(--interactive-primary-text);
82
82
  --accent: #5b6fff;
83
83
  --success: #22c55e;
84
84
  --warning: #f59e0b;
@@ -90,7 +90,7 @@ html:not(.dark) .space-theme {
90
90
 
91
91
  /* --- Hairline aliases (dark) — prefers-color-scheme --- */
92
92
  @media (prefers-color-scheme: dark) {
93
- .space-theme:not(.light) {
93
+ .space-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
94
94
  --hairline: rgba(255, 255, 255, 0.06);
95
95
  --hairline-strong: rgba(255, 255, 255, 0.10);
96
96
  }
@@ -424,7 +424,7 @@ html:not(.dark) .space-theme {
424
424
 
425
425
  /* --- Adaptive: Text (dark) — prefers-color-scheme --- */
426
426
  @media (prefers-color-scheme: dark) {
427
- .space-theme:not(.light) {
427
+ .space-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
428
428
  --text-primary: #e8e8f0;
429
429
  --text-secondary: rgba(232, 232, 240, 0.72);
430
430
  --text-tertiary: rgba(232, 232, 240, 0.5);
@@ -444,7 +444,7 @@ html:not(.dark) .space-theme {
444
444
 
445
445
  /* --- Adaptive: Surface (dark) — prefers-color-scheme --- */
446
446
  @media (prefers-color-scheme: dark) {
447
- .space-theme:not(.light) {
447
+ .space-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
448
448
  --surface-page: #080810;
449
449
  --surface-card: #0e0e18;
450
450
  --surface-popover: #0e0e18;
@@ -483,7 +483,7 @@ html:not(.dark) .space-theme {
483
483
 
484
484
  /* --- Adaptive: Border (dark) — prefers-color-scheme --- */
485
485
  @media (prefers-color-scheme: dark) {
486
- .space-theme:not(.light) {
486
+ .space-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
487
487
  --border-default: #3f3f4b;
488
488
  --border-muted: #2b2b36;
489
489
  --border-strong: #51515d;
@@ -499,7 +499,7 @@ html:not(.dark) .space-theme {
499
499
 
500
500
  /* --- Adaptive: Interactive (dark) — prefers-color-scheme --- */
501
501
  @media (prefers-color-scheme: dark) {
502
- .space-theme:not(.light) {
502
+ .space-theme:not(.light):not(.theme-light):not([data-theme="light"]) {
503
503
  --interactive-primary-bg: #5b6fff;
504
504
  --interactive-primary-bg-hover: #7b93ff;
505
505
  --interactive-primary-bg-active: #aabcff;
package/dist/tokens.css CHANGED
@@ -398,6 +398,12 @@
398
398
  --sidebar-ring: var(--color-primary-500);
399
399
  --sidebar-text-muted: var(--color-neutral-500);
400
400
  }
401
+
402
+
403
+ /* --- Semantic: Field --- */
404
+ :root {
405
+ --field-menu-bg: var(--surface-popover);
406
+ }
401
407
  }
402
408
 
403
409
  /* ============================================
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@loworbitstudio/visor-core",
3
- "version": "0.9.0",
3
+ "version": "0.10.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.12.0",
51
+ "@loworbitstudio/visor-theme-engine": "^0.14.0",
52
52
  "@types/node": "^22.0.0",
53
53
  "tsx": "^4.19.2",
54
54
  "typescript": "^5.7.2",