@vhyxui/tokens 0.1.3-alpha → 0.2.0-alpha

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/LICENSE +21 -0
  2. package/README.md +48 -0
  3. package/index.css +80 -43
  4. package/package.json +35 -6
  5. package/reset.css +50 -41
  6. package/tokens.css +476 -0
  7. package/scripts/sync-bundle.js +0 -39
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Vhyxara
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,48 @@
1
+ # @vhyxui/tokens
2
+
3
+ VhyxUI design tokens as CSS custom properties: colour, typography, spacing,
4
+ radius, shadow and motion, with a light and dark theme.
5
+
6
+ > **Alpha** — token names may change before 1.0.
7
+
8
+ ## Install
9
+
10
+ ```bash
11
+ npm install @vhyxui/tokens
12
+ ```
13
+
14
+ ## Usage
15
+
16
+ ```css
17
+ @import "@vhyxui/tokens/index.css"; /* tokens + reset */
18
+ ```
19
+
20
+ | Entry | Contents |
21
+ |---|---|
22
+ | `@vhyxui/tokens` / `index.css` | Tokens and a minimal reset |
23
+ | `@vhyxui/tokens/tokens.css` | Tokens only, no reset (use with Tailwind's preflight or your own reset) |
24
+ | `@vhyxui/tokens/reset.css` | Reset only |
25
+ | `@vhyxui/tokens/dark.css` | Dark theme overrides |
26
+
27
+ All tokens use the `--vhyx-` prefix, e.g. `var(--vhyx-color-accent)`.
28
+
29
+ ## Dark mode
30
+
31
+ Dark tokens apply under any of:
32
+
33
+ ```html
34
+ <html data-theme="dark"> <!-- explicit -->
35
+ <html class="dark"> <!-- Tailwind convention -->
36
+ <html data-theme="system"> <!-- follows the OS setting -->
37
+ ```
38
+
39
+ ## Cascade layers
40
+
41
+ The reset is declared inside `@layer base`, so it never overrides your own
42
+ styles or Tailwind utilities.
43
+
44
+ ## Links
45
+
46
+ - Documentation — https://vhyxui.com
47
+ - Source — https://github.com/vhyxara/vhyxUI/tree/main/packages/tokens
48
+ - License — MIT
package/index.css CHANGED
@@ -410,7 +410,9 @@
410
410
  }
411
411
 
412
412
  /* === src/themes/dark.css === */
413
- [data-theme="dark"] {
413
+ [data-theme="dark"],
414
+ .dark {
415
+ color-scheme: dark;
414
416
  --vhyx-color-bg: var(--vhyx-primitive-slate-950);
415
417
  --vhyx-color-bg-subtle: var(--vhyx-primitive-slate-900);
416
418
  --vhyx-color-bg-muted: var(--vhyx-primitive-slate-800);
@@ -440,48 +442,83 @@
440
442
  --vhyx-color-info-subtle: #0c1a45;
441
443
  }
442
444
 
443
- /* === src/reset.css === */
444
- *, *::before, *::after {
445
- box-sizing: border-box;
446
- margin: 0;
447
- padding: 0;
448
- }
449
-
450
- html {
451
- -webkit-font-smoothing: antialiased;
452
- -moz-osx-font-smoothing: grayscale;
453
- text-size-adjust: 100%;
454
- }
455
-
456
- body {
457
- font-family: var(--vhyx-font-sans);
458
- font-size: var(--vhyx-text-md);
459
- line-height: var(--vhyx-leading-normal);
460
- color: var(--vhyx-color-text);
461
- background-color: var(--vhyx-color-bg);
462
- }
463
-
464
- img, video, svg {
465
- display: block;
466
- max-width: 100%;
467
- }
468
-
469
- button, input, select, textarea {
470
- font: inherit;
471
- }
472
-
473
- p, h1, h2, h3, h4, h5, h6 {
474
- overflow-wrap: break-word;
475
- }
476
-
477
- /* Remove list styles on ul/ol with role=list */
478
- ul[role="list"], ol[role="list"] {
479
- list-style: none;
445
+ @media (prefers-color-scheme: dark) {
446
+ [data-theme="system"] {
447
+ color-scheme: dark;
448
+ --vhyx-color-bg: var(--vhyx-primitive-slate-950);
449
+ --vhyx-color-bg-subtle: var(--vhyx-primitive-slate-900);
450
+ --vhyx-color-bg-muted: var(--vhyx-primitive-slate-800);
451
+ --vhyx-color-bg-inverse: var(--vhyx-primitive-slate-50);
452
+
453
+ --vhyx-color-surface: var(--vhyx-primitive-slate-900);
454
+ --vhyx-color-surface-raised: var(--vhyx-primitive-slate-800);
455
+ --vhyx-color-surface-overlay: var(--vhyx-primitive-slate-800);
456
+ --vhyx-color-overlay: rgba(0, 0, 0, 0.65);
457
+
458
+ --vhyx-color-border: var(--vhyx-primitive-slate-800);
459
+ --vhyx-color-border-strong: var(--vhyx-primitive-slate-700);
460
+ --vhyx-color-border-focus: var(--vhyx-primitive-indigo-400);
461
+
462
+ --vhyx-color-text: var(--vhyx-primitive-slate-50);
463
+ --vhyx-color-text-subtle: var(--vhyx-primitive-slate-400);
464
+ --vhyx-color-text-muted: var(--vhyx-primitive-slate-500);
465
+ --vhyx-color-text-disabled: var(--vhyx-primitive-slate-600);
466
+ --vhyx-color-text-inverse: var(--vhyx-primitive-slate-900);
467
+
468
+ --vhyx-color-accent-subtle: #1e1b4b;
469
+ --vhyx-color-accent-muted: #312e81;
470
+
471
+ --vhyx-color-success-subtle: #052e16;
472
+ --vhyx-color-danger-subtle: #450a0a;
473
+ --vhyx-color-warning-subtle: #431407;
474
+ --vhyx-color-info-subtle: #0c1a45;
475
+ }
480
476
  }
481
477
 
482
- /* Focus visible — never outline none without replacement */
483
- :focus-visible {
484
- outline: none;
485
- box-shadow: var(--vhyx-shadow-focus);
478
+ /* === src/reset.css (layered: utilities and app CSS always win) === */
479
+ @layer theme, base, components, utilities;
480
+ @layer base {
481
+ *, *::before, *::after {
482
+ box-sizing: border-box;
483
+ margin: 0;
484
+ padding: 0;
485
+ }
486
+
487
+ html {
488
+ -webkit-font-smoothing: antialiased;
489
+ -moz-osx-font-smoothing: grayscale;
490
+ text-size-adjust: 100%;
491
+ }
492
+
493
+ body {
494
+ font-family: var(--vhyx-font-sans);
495
+ font-size: var(--vhyx-text-md);
496
+ line-height: var(--vhyx-leading-normal);
497
+ color: var(--vhyx-color-text);
498
+ background-color: var(--vhyx-color-bg);
499
+ }
500
+
501
+ img, video, svg {
502
+ display: block;
503
+ max-width: 100%;
504
+ }
505
+
506
+ button, input, select, textarea {
507
+ font: inherit;
508
+ }
509
+
510
+ p, h1, h2, h3, h4, h5, h6 {
511
+ overflow-wrap: break-word;
512
+ }
513
+
514
+ /* Remove list styles on ul/ol with role=list */
515
+ ul[role="list"], ol[role="list"] {
516
+ list-style: none;
517
+ }
518
+
519
+ /* Focus visible — never outline none without replacement */
520
+ :focus-visible {
521
+ outline: none;
522
+ box-shadow: var(--vhyx-shadow-focus);
523
+ }
486
524
  }
487
-
package/package.json CHANGED
@@ -1,15 +1,44 @@
1
1
  {
2
2
  "name": "@vhyxui/tokens",
3
- "version": "0.1.3-alpha",
3
+ "version": "0.2.0-alpha",
4
4
  "description": "CSS design tokens for VhyxUI — zero JavaScript, zero build step",
5
+ "keywords": [
6
+ "vhyxui",
7
+ "vhyxara",
8
+ "design-tokens",
9
+ "css-variables",
10
+ "theme"
11
+ ],
5
12
  "license": "MIT",
6
- "scripts": {
7
- "sync": "node scripts/sync-bundle.js"
13
+ "homepage": "https://vhyxui.com",
14
+ "repository": {
15
+ "type": "git",
16
+ "url": "git+https://github.com/vhyxara/vhyxUI.git",
17
+ "directory": "packages/tokens"
18
+ },
19
+ "bugs": {
20
+ "url": "https://github.com/vhyxara/vhyxUI/issues"
21
+ },
22
+ "engines": {
23
+ "node": ">=20.19"
8
24
  },
9
25
  "exports": {
10
- ".": "./index.css",
26
+ ".": "./index.css",
11
27
  "./index.css": "./index.css",
28
+ "./tokens.css": "./tokens.css",
12
29
  "./reset.css": "./reset.css",
13
- "./dark.css": "./src/themes/dark.css"
30
+ "./dark.css": "./src/themes/dark.css"
31
+ },
32
+ "files": [
33
+ "index.css",
34
+ "tokens.css",
35
+ "reset.css",
36
+ "src"
37
+ ],
38
+ "sideEffects": [
39
+ "*.css"
40
+ ],
41
+ "scripts": {
42
+ "sync": "node scripts/sync-bundle.js"
14
43
  }
15
- }
44
+ }
package/reset.css CHANGED
@@ -1,43 +1,52 @@
1
- *, *::before, *::after {
2
- box-sizing: border-box;
3
- margin: 0;
4
- padding: 0;
5
- }
6
-
7
- html {
8
- -webkit-font-smoothing: antialiased;
9
- -moz-osx-font-smoothing: grayscale;
10
- text-size-adjust: 100%;
11
- }
12
-
13
- body {
14
- font-family: var(--vhyx-font-sans);
15
- font-size: var(--vhyx-text-md);
16
- line-height: var(--vhyx-leading-normal);
17
- color: var(--vhyx-color-text);
18
- background-color: var(--vhyx-color-bg);
19
- }
20
-
21
- img, video, svg {
22
- display: block;
23
- max-width: 100%;
24
- }
25
-
26
- button, input, select, textarea {
27
- font: inherit;
28
- }
29
-
30
- p, h1, h2, h3, h4, h5, h6 {
31
- overflow-wrap: break-word;
32
- }
33
-
34
- /* Remove list styles on ul/ol with role=list */
35
- ul[role="list"], ol[role="list"] {
36
- list-style: none;
37
- }
1
+ /* AUTO-GENERATED — do not edit directly.
2
+ Run pnpm --filter @vhyxui/tokens sync to regenerate.
3
+ Source files are in packages/tokens/src/
4
+ */
38
5
 
39
- /* Focus visible — never outline none without replacement */
40
- :focus-visible {
41
- outline: none;
42
- box-shadow: var(--vhyx-shadow-focus);
6
+ /* === src/reset.css (layered: utilities and app CSS always win) === */
7
+ @layer theme, base, components, utilities;
8
+ @layer base {
9
+ *, *::before, *::after {
10
+ box-sizing: border-box;
11
+ margin: 0;
12
+ padding: 0;
13
+ }
14
+
15
+ html {
16
+ -webkit-font-smoothing: antialiased;
17
+ -moz-osx-font-smoothing: grayscale;
18
+ text-size-adjust: 100%;
19
+ }
20
+
21
+ body {
22
+ font-family: var(--vhyx-font-sans);
23
+ font-size: var(--vhyx-text-md);
24
+ line-height: var(--vhyx-leading-normal);
25
+ color: var(--vhyx-color-text);
26
+ background-color: var(--vhyx-color-bg);
27
+ }
28
+
29
+ img, video, svg {
30
+ display: block;
31
+ max-width: 100%;
32
+ }
33
+
34
+ button, input, select, textarea {
35
+ font: inherit;
36
+ }
37
+
38
+ p, h1, h2, h3, h4, h5, h6 {
39
+ overflow-wrap: break-word;
40
+ }
41
+
42
+ /* Remove list styles on ul/ol with role=list */
43
+ ul[role="list"], ol[role="list"] {
44
+ list-style: none;
45
+ }
46
+
47
+ /* Focus visible — never outline none without replacement */
48
+ :focus-visible {
49
+ outline: none;
50
+ box-shadow: var(--vhyx-shadow-focus);
51
+ }
43
52
  }
package/tokens.css ADDED
@@ -0,0 +1,476 @@
1
+ /* AUTO-GENERATED — do not edit directly.
2
+ Run pnpm --filter @vhyxui/tokens sync to regenerate.
3
+ Source files are in packages/tokens/src/
4
+ */
5
+
6
+ /* === src/primitives/colors.css === */
7
+ :root {
8
+ /* Slate — neutral scale */
9
+ --vhyx-primitive-slate-50: #f8fafc;
10
+ --vhyx-primitive-slate-100: #f1f5f9;
11
+ --vhyx-primitive-slate-200: #e2e8f0;
12
+ --vhyx-primitive-slate-300: #cbd5e1;
13
+ --vhyx-primitive-slate-400: #94a3b8;
14
+ --vhyx-primitive-slate-500: #64748b;
15
+ --vhyx-primitive-slate-600: #475569;
16
+ --vhyx-primitive-slate-700: #334155;
17
+ --vhyx-primitive-slate-800: #1e293b;
18
+ --vhyx-primitive-slate-900: #0f172a;
19
+ --vhyx-primitive-slate-950: #020617;
20
+
21
+ /* Indigo — default accent */
22
+ --vhyx-primitive-indigo-50: #eef2ff;
23
+ --vhyx-primitive-indigo-100: #e0e7ff;
24
+ --vhyx-primitive-indigo-200: #c7d2fe;
25
+ --vhyx-primitive-indigo-300: #a5b4fc;
26
+ --vhyx-primitive-indigo-400: #818cf8;
27
+ --vhyx-primitive-indigo-500: #6366f1;
28
+ --vhyx-primitive-indigo-600: #4f46e5;
29
+ --vhyx-primitive-indigo-700: #4338ca;
30
+ --vhyx-primitive-indigo-800: #3730a3;
31
+ --vhyx-primitive-indigo-900: #312e81;
32
+
33
+ /* Green — success */
34
+ --vhyx-primitive-green-50: #f0fdf4;
35
+ --vhyx-primitive-green-500: #22c55e;
36
+ --vhyx-primitive-green-600: #16a34a;
37
+ --vhyx-primitive-green-700: #15803d;
38
+
39
+ /* Red — danger */
40
+ --vhyx-primitive-red-50: #fef2f2;
41
+ --vhyx-primitive-red-500: #ef4444;
42
+ --vhyx-primitive-red-600: #dc2626;
43
+ --vhyx-primitive-red-700: #b91c1c;
44
+
45
+ /* Amber — warning */
46
+ --vhyx-primitive-amber-50: #fffbeb;
47
+ --vhyx-primitive-amber-500: #f59e0b;
48
+ --vhyx-primitive-amber-600: #d97706;
49
+
50
+ /* Blue — info */
51
+ --vhyx-primitive-blue-50: #eff6ff;
52
+ --vhyx-primitive-blue-500: #3b82f6;
53
+ --vhyx-primitive-blue-600: #2563eb;
54
+ }
55
+
56
+ /* === src/primitives/typography.css === */
57
+ :root {
58
+ /* Font family stacks */
59
+ --vhyx-primitive-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
60
+ --vhyx-primitive-font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
61
+ --vhyx-primitive-font-serif: ui-serif, Georgia, serif;
62
+
63
+ /* Raw size scale */
64
+ --vhyx-primitive-text-2xs: 0.625rem;
65
+ --vhyx-primitive-text-xs: 0.75rem;
66
+ --vhyx-primitive-text-sm: 0.875rem;
67
+ --vhyx-primitive-text-md: 1rem;
68
+ --vhyx-primitive-text-lg: 1.125rem;
69
+ --vhyx-primitive-text-xl: 1.25rem;
70
+ --vhyx-primitive-text-2xl: 1.5rem;
71
+ --vhyx-primitive-text-3xl: 1.875rem;
72
+ --vhyx-primitive-text-4xl: 2.25rem;
73
+ }
74
+
75
+ /* === src/semantic/colors.css === */
76
+ :root {
77
+ /* Background */
78
+ --vhyx-color-bg: var(--vhyx-primitive-slate-50);
79
+ --vhyx-color-bg-subtle: var(--vhyx-primitive-slate-100);
80
+ --vhyx-color-bg-muted: var(--vhyx-primitive-slate-200);
81
+ --vhyx-color-bg-inverse: var(--vhyx-primitive-slate-900);
82
+
83
+ /* Surface — components sit on surface, not bg */
84
+ --vhyx-color-surface: #ffffff;
85
+ --vhyx-color-surface-raised: #ffffff;
86
+ --vhyx-color-surface-overlay: #ffffff;
87
+
88
+ /* Overlay backdrop */
89
+ --vhyx-color-overlay: rgba(0, 0, 0, 0.5);
90
+
91
+ /* Border */
92
+ --vhyx-color-border: var(--vhyx-primitive-slate-200);
93
+ --vhyx-color-border-strong: var(--vhyx-primitive-slate-300);
94
+ --vhyx-color-border-focus: var(--vhyx-primitive-indigo-500);
95
+
96
+ /* Text */
97
+ --vhyx-color-text: var(--vhyx-primitive-slate-900);
98
+ --vhyx-color-text-subtle: var(--vhyx-primitive-slate-500);
99
+ --vhyx-color-text-muted: var(--vhyx-primitive-slate-400);
100
+ --vhyx-color-text-disabled: var(--vhyx-primitive-slate-300);
101
+ --vhyx-color-text-inverse: var(--vhyx-primitive-slate-50);
102
+ --vhyx-color-text-on-accent: #ffffff;
103
+
104
+ /* Accent */
105
+ --vhyx-color-accent: var(--vhyx-primitive-indigo-500);
106
+ --vhyx-color-accent-hover: var(--vhyx-primitive-indigo-600);
107
+ --vhyx-color-accent-active: var(--vhyx-primitive-indigo-700);
108
+ --vhyx-color-accent-subtle: var(--vhyx-primitive-indigo-50);
109
+ --vhyx-color-accent-muted: var(--vhyx-primitive-indigo-100);
110
+
111
+ /* Success */
112
+ --vhyx-color-success: var(--vhyx-primitive-green-500);
113
+ --vhyx-color-success-hover: var(--vhyx-primitive-green-600);
114
+ --vhyx-color-success-subtle: var(--vhyx-primitive-green-50);
115
+ --vhyx-color-success-text: var(--vhyx-primitive-green-700);
116
+
117
+ /* Danger */
118
+ --vhyx-color-danger: var(--vhyx-primitive-red-500);
119
+ --vhyx-color-danger-hover: var(--vhyx-primitive-red-600);
120
+ --vhyx-color-danger-subtle: var(--vhyx-primitive-red-50);
121
+ --vhyx-color-danger-text: var(--vhyx-primitive-red-700);
122
+
123
+ /* Warning */
124
+ --vhyx-color-warning: var(--vhyx-primitive-amber-500);
125
+ --vhyx-color-warning-hover: var(--vhyx-primitive-amber-600);
126
+ --vhyx-color-warning-subtle: var(--vhyx-primitive-amber-50);
127
+ --vhyx-color-warning-text: var(--vhyx-primitive-amber-600);
128
+
129
+ /* Info */
130
+ --vhyx-color-info: var(--vhyx-primitive-blue-500);
131
+ --vhyx-color-info-hover: var(--vhyx-primitive-blue-600);
132
+ --vhyx-color-info-subtle: var(--vhyx-primitive-blue-50);
133
+ --vhyx-color-info-text: var(--vhyx-primitive-blue-600);
134
+ }
135
+
136
+ /* === src/semantic/typography.css === */
137
+ :root {
138
+ /* Font families */
139
+ --vhyx-font-sans: system-ui, -apple-system, BlinkMacSystemFont,
140
+ 'Segoe UI', sans-serif;
141
+ --vhyx-font-mono: ui-monospace, 'Cascadia Code', 'Fira Code',
142
+ 'Consolas', monospace;
143
+ --vhyx-font-serif: ui-serif, Georgia, serif;
144
+
145
+ /* Size scale */
146
+ --vhyx-text-2xs: 0.625rem;
147
+ --vhyx-text-xs: 0.75rem;
148
+ --vhyx-text-sm: 0.875rem;
149
+ --vhyx-text-md: 1rem;
150
+ --vhyx-text-lg: 1.125rem;
151
+ --vhyx-text-xl: 1.25rem;
152
+ --vhyx-text-2xl: 1.5rem;
153
+ --vhyx-text-3xl: 1.875rem;
154
+ --vhyx-text-4xl: 2.25rem;
155
+
156
+ /* Line height */
157
+ --vhyx-leading-none: 1;
158
+ --vhyx-leading-tight: 1.25;
159
+ --vhyx-leading-snug: 1.375;
160
+ --vhyx-leading-normal: 1.5;
161
+ --vhyx-leading-relaxed: 1.625;
162
+ --vhyx-leading-loose: 2;
163
+
164
+ /* Font weight */
165
+ --vhyx-weight-light: 300;
166
+ --vhyx-weight-normal: 400;
167
+ --vhyx-weight-medium: 500;
168
+ --vhyx-weight-semibold: 600;
169
+ --vhyx-weight-bold: 700;
170
+ --vhyx-weight-extrabold: 800;
171
+
172
+ /* Letter spacing */
173
+ --vhyx-tracking-tight: -0.025em;
174
+ --vhyx-tracking-normal: 0em;
175
+ --vhyx-tracking-wide: 0.025em;
176
+ --vhyx-tracking-wider: 0.05em;
177
+ --vhyx-tracking-widest: 0.1em;
178
+ }
179
+
180
+ /* === src/semantic/spacing.css === */
181
+ :root {
182
+ --vhyx-space-px: 1px;
183
+ --vhyx-space-0: 0;
184
+ --vhyx-space-0-5: 0.125rem;
185
+ --vhyx-space-1: 0.25rem;
186
+ --vhyx-space-1-5: 0.375rem;
187
+ --vhyx-space-2: 0.5rem;
188
+ --vhyx-space-2-5: 0.625rem;
189
+ --vhyx-space-3: 0.75rem;
190
+ --vhyx-space-3-5: 0.875rem;
191
+ --vhyx-space-4: 1rem;
192
+ --vhyx-space-5: 1.25rem;
193
+ --vhyx-space-6: 1.5rem;
194
+ --vhyx-space-7: 1.75rem;
195
+ --vhyx-space-8: 2rem;
196
+ --vhyx-space-9: 2.25rem;
197
+ --vhyx-space-10: 2.5rem;
198
+ --vhyx-space-12: 3rem;
199
+ --vhyx-space-14: 3.5rem;
200
+ --vhyx-space-16: 4rem;
201
+ --vhyx-space-20: 5rem;
202
+ --vhyx-space-24: 6rem;
203
+ --vhyx-space-32: 8rem;
204
+
205
+ /* Component heights — consistent across all interactive elements */
206
+ --vhyx-size-xs: 1.5rem;
207
+ --vhyx-size-sm: 2rem;
208
+ --vhyx-size-md: 2.5rem;
209
+ --vhyx-size-lg: 3rem;
210
+ --vhyx-size-xl: 3.5rem;
211
+
212
+ /* Drawer panel dimensions */
213
+ --vhyx-drawer-sm: 20rem;
214
+ --vhyx-drawer-md: 25rem;
215
+ --vhyx-drawer-lg: 32rem;
216
+ --vhyx-drawer-full: 100%;
217
+
218
+ /* Dialog panel dimensions */
219
+ --vhyx-dialog-sm: 20rem;
220
+ --vhyx-dialog-md: 32rem;
221
+ --vhyx-dialog-lg: 48rem;
222
+
223
+ /* Popover layout constraints */
224
+ --vhyx-popover-max-width: 20rem;
225
+ }
226
+
227
+ /* === src/semantic/borders.css === */
228
+ :root {
229
+ --vhyx-radius-none: 0;
230
+ --vhyx-radius-xs: 2px;
231
+ --vhyx-radius-sm: 4px;
232
+ --vhyx-radius-md: 6px;
233
+ --vhyx-radius-lg: 8px;
234
+ --vhyx-radius-xl: 12px;
235
+ --vhyx-radius-2xl: 16px;
236
+ --vhyx-radius-3xl: 24px;
237
+ --vhyx-radius-full: 9999px;
238
+
239
+ --vhyx-border-width: 1px;
240
+ --vhyx-border-width-2: 2px;
241
+ }
242
+
243
+ /* === src/semantic/shadows.css === */
244
+ :root {
245
+ --vhyx-shadow-none: none;
246
+ --vhyx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
247
+ --vhyx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1),
248
+ 0 1px 2px rgba(0, 0, 0, 0.06);
249
+ --vhyx-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07),
250
+ 0 2px 4px rgba(0, 0, 0, 0.05);
251
+ --vhyx-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1),
252
+ 0 4px 6px rgba(0, 0, 0, 0.05);
253
+ --vhyx-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1),
254
+ 0 10px 10px rgba(0, 0, 0, 0.04);
255
+ --vhyx-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
256
+ --vhyx-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
257
+
258
+ /* Focus ring — consistent across all interactive elements */
259
+ --vhyx-shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.4);
260
+ --vhyx-shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.4);
261
+ }
262
+
263
+ /* === src/semantic/motion.css === */
264
+ :root {
265
+ /* Duration */
266
+ --vhyx-duration-instant: 50ms;
267
+ --vhyx-duration-fast: 100ms;
268
+ --vhyx-duration-normal: 200ms;
269
+ --vhyx-duration-slow: 350ms;
270
+ --vhyx-duration-glacial: 500ms;
271
+
272
+ /* Easing */
273
+ --vhyx-easing-linear: linear;
274
+ --vhyx-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
275
+ --vhyx-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
276
+ --vhyx-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
277
+ --vhyx-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
278
+ --vhyx-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
279
+ --vhyx-easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
280
+ }
281
+
282
+ /* Reduced motion — collapses all durations */
283
+ @media (prefers-reduced-motion: reduce) {
284
+ :root {
285
+ --vhyx-duration-instant: 0ms;
286
+ --vhyx-duration-fast: 0ms;
287
+ --vhyx-duration-normal: 0ms;
288
+ --vhyx-duration-slow: 0ms;
289
+ --vhyx-duration-glacial: 0ms;
290
+ }
291
+ }
292
+
293
+ /* Appear / Disappear */
294
+ @keyframes vhyx-fade-in {
295
+ from { opacity: 0; }
296
+ to { opacity: 1; }
297
+ }
298
+ @keyframes vhyx-fade-out {
299
+ from { opacity: 1; }
300
+ to { opacity: 0; }
301
+ }
302
+
303
+ @keyframes vhyx-scale-in {
304
+ from { opacity: 0; transform: scale(0.95); }
305
+ to { opacity: 1; transform: scale(1); }
306
+ }
307
+ @keyframes vhyx-scale-out {
308
+ from { opacity: 1; transform: scale(1); }
309
+ to { opacity: 0; transform: scale(0.95); }
310
+ }
311
+
312
+ @keyframes vhyx-slide-up-in {
313
+ from { opacity: 0; transform: translateY(8px) scale(0.98); }
314
+ to { opacity: 1; transform: translateY(0) scale(1); }
315
+ }
316
+ @keyframes vhyx-slide-up-out {
317
+ from { opacity: 1; transform: translateY(0) scale(1); }
318
+ to { opacity: 0; transform: translateY(8px) scale(0.98); }
319
+ }
320
+
321
+ @keyframes vhyx-slide-right-in {
322
+ from { transform: translateX(100%); }
323
+ to { transform: translateX(0); }
324
+ }
325
+ @keyframes vhyx-slide-right-out {
326
+ from { transform: translateX(0); }
327
+ to { transform: translateX(100%); }
328
+ }
329
+
330
+ @keyframes vhyx-slide-left-in {
331
+ from { transform: translateX(-100%); }
332
+ to { transform: translateX(0); }
333
+ }
334
+ @keyframes vhyx-slide-left-out {
335
+ from { transform: translateX(0); }
336
+ to { transform: translateX(-100%); }
337
+ }
338
+
339
+ @keyframes vhyx-slide-down-in {
340
+ from { transform: translateY(-100%); }
341
+ to { transform: translateY(0); }
342
+ }
343
+ @keyframes vhyx-slide-down-out {
344
+ from { transform: translateY(0); }
345
+ to { transform: translateY(-100%); }
346
+ }
347
+
348
+ @keyframes vhyx-overlay-in {
349
+ from { opacity: 0; }
350
+ to { opacity: 1; }
351
+ }
352
+ @keyframes vhyx-overlay-out {
353
+ from { opacity: 1; }
354
+ to { opacity: 0; }
355
+ }
356
+
357
+ /* Feedback */
358
+ @keyframes vhyx-shake {
359
+ 0%, 100% { transform: translateX(0); }
360
+ 20% { transform: translateX(-6px); }
361
+ 40% { transform: translateX(6px); }
362
+ 60% { transform: translateX(-4px); }
363
+ 80% { transform: translateX(4px); }
364
+ }
365
+
366
+ @keyframes vhyx-success-pulse {
367
+ 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
368
+ 50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3); }
369
+ }
370
+
371
+ /* Ambient */
372
+ @keyframes vhyx-spin {
373
+ from { transform: rotate(0deg); }
374
+ to { transform: rotate(360deg); }
375
+ }
376
+
377
+ @keyframes vhyx-shimmer {
378
+ from { background-position: -200% center; }
379
+ to { background-position: 200% center; }
380
+ }
381
+
382
+ @keyframes vhyx-indeterminate {
383
+ 0% { transform: translateX(-100%) scaleX(0.5); }
384
+ 50% { transform: translateX(0%) scaleX(0.3); }
385
+ 100% { transform: translateX(100%) scaleX(0.5); }
386
+ }
387
+
388
+ /* === src/semantic/zindex.css === */
389
+ :root {
390
+ --vhyx-z-hide: -1;
391
+ --vhyx-z-base: 0;
392
+ --vhyx-z-raised: 10;
393
+ --vhyx-z-sticky: 200;
394
+ --vhyx-z-banner: 250;
395
+ --vhyx-z-overlay: 300;
396
+ --vhyx-z-modal: 400;
397
+ /*
398
+ * A dropdown (Select.Content, and any future Combobox/Autocomplete/Menu)
399
+ * is floating overlay content that must render above whatever context it
400
+ * was opened in, including a Dialog it's nested inside of -- the same
401
+ * reasoning --vhyx-z-popover already applies. Sits below popover/toast/
402
+ * tooltip so a genuinely higher-priority overlay (a toast, a tooltip
403
+ * inside the dropdown itself) can still out-rank it.
404
+ */
405
+ --vhyx-z-dropdown: 420;
406
+ --vhyx-z-popover: 450;
407
+ --vhyx-z-toast: 500;
408
+ --vhyx-z-tooltip: 550;
409
+ --vhyx-z-top: 999;
410
+ }
411
+
412
+ /* === src/themes/dark.css === */
413
+ [data-theme="dark"],
414
+ .dark {
415
+ color-scheme: dark;
416
+ --vhyx-color-bg: var(--vhyx-primitive-slate-950);
417
+ --vhyx-color-bg-subtle: var(--vhyx-primitive-slate-900);
418
+ --vhyx-color-bg-muted: var(--vhyx-primitive-slate-800);
419
+ --vhyx-color-bg-inverse: var(--vhyx-primitive-slate-50);
420
+
421
+ --vhyx-color-surface: var(--vhyx-primitive-slate-900);
422
+ --vhyx-color-surface-raised: var(--vhyx-primitive-slate-800);
423
+ --vhyx-color-surface-overlay: var(--vhyx-primitive-slate-800);
424
+ --vhyx-color-overlay: rgba(0, 0, 0, 0.65);
425
+
426
+ --vhyx-color-border: var(--vhyx-primitive-slate-800);
427
+ --vhyx-color-border-strong: var(--vhyx-primitive-slate-700);
428
+ --vhyx-color-border-focus: var(--vhyx-primitive-indigo-400);
429
+
430
+ --vhyx-color-text: var(--vhyx-primitive-slate-50);
431
+ --vhyx-color-text-subtle: var(--vhyx-primitive-slate-400);
432
+ --vhyx-color-text-muted: var(--vhyx-primitive-slate-500);
433
+ --vhyx-color-text-disabled: var(--vhyx-primitive-slate-600);
434
+ --vhyx-color-text-inverse: var(--vhyx-primitive-slate-900);
435
+
436
+ --vhyx-color-accent-subtle: #1e1b4b;
437
+ --vhyx-color-accent-muted: #312e81;
438
+
439
+ --vhyx-color-success-subtle: #052e16;
440
+ --vhyx-color-danger-subtle: #450a0a;
441
+ --vhyx-color-warning-subtle: #431407;
442
+ --vhyx-color-info-subtle: #0c1a45;
443
+ }
444
+
445
+ @media (prefers-color-scheme: dark) {
446
+ [data-theme="system"] {
447
+ color-scheme: dark;
448
+ --vhyx-color-bg: var(--vhyx-primitive-slate-950);
449
+ --vhyx-color-bg-subtle: var(--vhyx-primitive-slate-900);
450
+ --vhyx-color-bg-muted: var(--vhyx-primitive-slate-800);
451
+ --vhyx-color-bg-inverse: var(--vhyx-primitive-slate-50);
452
+
453
+ --vhyx-color-surface: var(--vhyx-primitive-slate-900);
454
+ --vhyx-color-surface-raised: var(--vhyx-primitive-slate-800);
455
+ --vhyx-color-surface-overlay: var(--vhyx-primitive-slate-800);
456
+ --vhyx-color-overlay: rgba(0, 0, 0, 0.65);
457
+
458
+ --vhyx-color-border: var(--vhyx-primitive-slate-800);
459
+ --vhyx-color-border-strong: var(--vhyx-primitive-slate-700);
460
+ --vhyx-color-border-focus: var(--vhyx-primitive-indigo-400);
461
+
462
+ --vhyx-color-text: var(--vhyx-primitive-slate-50);
463
+ --vhyx-color-text-subtle: var(--vhyx-primitive-slate-400);
464
+ --vhyx-color-text-muted: var(--vhyx-primitive-slate-500);
465
+ --vhyx-color-text-disabled: var(--vhyx-primitive-slate-600);
466
+ --vhyx-color-text-inverse: var(--vhyx-primitive-slate-900);
467
+
468
+ --vhyx-color-accent-subtle: #1e1b4b;
469
+ --vhyx-color-accent-muted: #312e81;
470
+
471
+ --vhyx-color-success-subtle: #052e16;
472
+ --vhyx-color-danger-subtle: #450a0a;
473
+ --vhyx-color-warning-subtle: #431407;
474
+ --vhyx-color-info-subtle: #0c1a45;
475
+ }
476
+ }
package/scripts/sync-bundle.js DELETED
@@ -1,39 +0,0 @@
1
- const fs = require('fs')
2
- const path = require('path')
3
-
4
- // Source files in dependency order
5
- const SRC_FILES = [
6
- 'src/primitives/colors.css',
7
- 'src/primitives/typography.css',
8
- 'src/primitives/index.css',
9
- 'src/semantic/colors.css',
10
- 'src/semantic/typography.css',
11
- 'src/semantic/spacing.css',
12
- 'src/semantic/borders.css',
13
- 'src/semantic/shadows.css',
14
- 'src/semantic/motion.css',
15
- 'src/semantic/zindex.css',
16
- 'src/semantic/index.css',
17
- 'src/themes/dark.css',
18
- 'src/themes/index.css',
19
- 'src/reset.css',
20
- 'src/index.css',
21
- ]
22
-
23
- const root = path.join(__dirname, '..')
24
- const header = '/* AUTO-GENERATED — do not edit directly.\n' +
25
- ' Run pnpm --filter @vhyxui/tokens sync to regenerate.\n' +
26
- ' Source files are in packages/tokens/src/\n */\n\n'
27
-
28
- let output = header
29
- for (const file of SRC_FILES) {
30
- const content = fs.readFileSync(path.join(root, file), 'utf8')
31
- // Remove @import statements — we are inlining everything
32
- const stripped = content.replace(/@import[^;]+;/g, '').trim()
33
- if (stripped) {
34
- output += `/* === ${file} === */\n${stripped}\n\n`
35
- }
36
- }
37
-
38
- fs.writeFileSync(path.join(root, 'index.css'), output)
39
- console.log('Token bundle synced.')