@7onic-ui/tokens 0.1.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 (14) hide show
  1. package/cli/sync.js +2533 -0
  2. package/css/all.css +6 -0
  3. package/css/themes/dark.css +300 -0
  4. package/css/themes/light.css +142 -0
  5. package/css/variables.css +924 -0
  6. package/figma-tokens.json +2404 -0
  7. package/js/index.js +763 -0
  8. package/js/index.mjs +762 -0
  9. package/json/tokens.json +447 -0
  10. package/package.json +63 -0
  11. package/tailwind/v3-preset.js +701 -0
  12. package/tailwind/v4-theme.css +879 -0
  13. package/tailwind/v4.css +7 -0
  14. package/types/index.d.ts +200 -0
package/css/all.css ADDED
@@ -0,0 +1,6 @@
1
+ /* Auto-generated by sync-tokens — DO NOT EDIT */
2
+ /* All-in-one CSS bundle: variables + light/dark themes */
3
+
4
+ @import './variables.css';
5
+ @import './themes/light.css';
6
+ @import './themes/dark.css';
package/css/themes/dark.css ADDED
@@ -0,0 +1,300 @@
1
+ /**
2
+ * Dark Theme — Semantic color overrides
3
+ * ⚠️ Auto-generated — DO NOT EDIT
4
+ *
5
+ * Supports three dark mode strategies:
6
+ * 1. OS auto-detection: follows prefers-color-scheme
7
+ * 2. Manual dark: <html data-theme="dark"> or <html class="dark">
8
+ * 3. Manual light: <html data-theme="light"> (overrides OS dark)
9
+ *
10
+ * Usage: @import '@7onic-ui/tokens/css/themes/dark.css';
11
+ */
12
+
13
+ @media (prefers-color-scheme: dark) {
14
+ :root:not([data-theme="light"]) {
15
+ /* Background */
16
+ --color-background: var(--color-gray-900);
17
+ --color-background-rgb: 34 34 37;
18
+ --color-background-paper: var(--color-gray-800);
19
+ --color-background-paper-rgb: 45 45 49;
20
+ --color-background-elevated: var(--color-gray-600);
21
+ --color-background-elevated-rgb: 74 74 75;
22
+ --color-background-muted: var(--color-gray-700);
23
+ --color-background-muted-rgb: 58 58 62;
24
+
25
+ /* Text */
26
+ --color-text: var(--color-gray-100);
27
+ --color-text-rgb: 244 244 245;
28
+ --color-text-muted: var(--color-gray-400);
29
+ --color-text-muted-rgb: 154 154 155;
30
+ --color-text-subtle: var(--color-gray-500);
31
+ --color-text-subtle-rgb: 107 107 108;
32
+ --color-text-link: var(--color-blue-400);
33
+ --color-text-link-rgb: 96 165 250;
34
+ --color-text-primary: var(--color-primary-500);
35
+ --color-text-primary-rgb: 26 198 213;
36
+ --color-text-info: var(--color-blue-500);
37
+ --color-text-info-rgb: 59 130 246;
38
+ --color-text-success: var(--color-green-500);
39
+ --color-text-success-rgb: 16 185 129;
40
+ --color-text-error: var(--color-red-500);
41
+ --color-text-error-rgb: 239 68 68;
42
+ --color-text-warning: var(--color-yellow-500);
43
+ --color-text-warning-rgb: 245 158 11;
44
+
45
+ /* Primary */
46
+ --color-primary: var(--color-primary-600);
47
+ --color-primary-rgb: 21 160 172;
48
+ --color-primary-hover: var(--color-primary-700);
49
+ --color-primary-hover-rgb: 16 122 132;
50
+ --color-primary-active: var(--color-primary-700);
51
+ --color-primary-active-rgb: 16 122 132;
52
+ --color-primary-tint: var(--color-primary-900);
53
+ --color-primary-tint-rgb: 6 46 50;
54
+ --color-primary-text: var(--color-white);
55
+ --color-primary-text-rgb: 255 255 255;
56
+
57
+ /* Secondary */
58
+ --color-secondary: var(--color-secondary-400);
59
+ --color-secondary-rgb: 143 143 169;
60
+ --color-secondary-hover: var(--color-secondary-500);
61
+ --color-secondary-hover-rgb: 105 105 127;
62
+ --color-secondary-active: var(--color-secondary-500);
63
+ --color-secondary-active-rgb: 105 105 127;
64
+ --color-secondary-tint: var(--color-gray-800);
65
+ --color-secondary-tint-rgb: 45 45 49;
66
+ --color-secondary-text: var(--color-secondary-900);
67
+ --color-secondary-text-rgb: 35 35 45;
68
+
69
+ /* Success */
70
+ --color-success: var(--color-green-500);
71
+ --color-success-rgb: 16 185 129;
72
+ --color-success-hover: var(--color-green-600);
73
+ --color-success-hover-rgb: 5 150 105;
74
+ --color-success-active: var(--color-green-600);
75
+ --color-success-active-rgb: 5 150 105;
76
+ --color-success-tint: var(--color-green-900);
77
+ --color-success-tint-rgb: 6 78 59;
78
+ --color-success-text: var(--color-white);
79
+ --color-success-text-rgb: 255 255 255;
80
+
81
+ /* Warning */
82
+ --color-warning: var(--color-yellow-500);
83
+ --color-warning-rgb: 245 158 11;
84
+ --color-warning-hover: var(--color-yellow-600);
85
+ --color-warning-hover-rgb: 217 119 6;
86
+ --color-warning-active: var(--color-yellow-600);
87
+ --color-warning-active-rgb: 217 119 6;
88
+ --color-warning-tint: var(--color-yellow-900);
89
+ --color-warning-tint-rgb: 120 53 15;
90
+ --color-warning-text: var(--color-gray-900);
91
+ --color-warning-text-rgb: 34 34 37;
92
+
93
+ /* Error */
94
+ --color-error: var(--color-red-500);
95
+ --color-error-rgb: 239 68 68;
96
+ --color-error-hover: var(--color-red-600);
97
+ --color-error-hover-rgb: 220 38 38;
98
+ --color-error-active: var(--color-red-600);
99
+ --color-error-active-rgb: 220 38 38;
100
+ --color-error-tint: var(--color-red-900);
101
+ --color-error-tint-rgb: 127 29 29;
102
+ --color-error-text: var(--color-white);
103
+ --color-error-text-rgb: 255 255 255;
104
+ --color-error-bg: color-mix(in srgb, var(--color-error) 10%, transparent);
105
+
106
+ /* Info */
107
+ --color-info: var(--color-blue-500);
108
+ --color-info-rgb: 59 130 246;
109
+ --color-info-hover: var(--color-blue-600);
110
+ --color-info-hover-rgb: 37 99 235;
111
+ --color-info-active: var(--color-blue-600);
112
+ --color-info-active-rgb: 37 99 235;
113
+ --color-info-tint: var(--color-blue-900);
114
+ --color-info-tint-rgb: 30 58 138;
115
+ --color-info-text: var(--color-white);
116
+ --color-info-text-rgb: 255 255 255;
117
+
118
+ /* Border */
119
+ --color-border: var(--color-gray-700);
120
+ --color-border-rgb: 58 58 62;
121
+ --color-border-subtle: var(--color-gray-800);
122
+ --color-border-subtle-rgb: 45 45 49;
123
+ --color-border-strong: var(--color-gray-600);
124
+ --color-border-strong-rgb: 74 74 75;
125
+
126
+ /* Disabled */
127
+ --color-disabled: var(--color-gray-700);
128
+ --color-disabled-rgb: 58 58 62;
129
+ --color-disabled-text: var(--color-gray-500);
130
+ --color-disabled-text-rgb: 107 107 108;
131
+
132
+ /* Focus */
133
+ --color-focus-ring: color-mix(in srgb, var(--color-primary) 50%, transparent);
134
+ --color-focus-ring-error: color-mix(in srgb, var(--color-error) 15%, transparent);
135
+
136
+ /* Chart */
137
+ --color-chart-1: var(--color-chart-blue-dark);
138
+ --color-chart-1-rgb: 107 143 245;
139
+ --color-chart-2: var(--color-chart-pink-dark);
140
+ --color-chart-2-rgb: 232 112 184;
141
+ --color-chart-3: var(--color-chart-lavender-dark);
142
+ --color-chart-3-rgb: 196 168 248;
143
+ --color-chart-4: var(--color-chart-sky-dark);
144
+ --color-chart-4-rgb: 141 216 248;
145
+ --color-chart-5: var(--color-chart-rose-dark);
146
+ --color-chart-5-rgb: 248 192 222;
147
+
148
+ /* Dark Mode Shadows - increased opacity for visibility */
149
+ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
150
+ --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
151
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
152
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
153
+ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.25);
154
+ --shadow-primary-glow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent);
155
+ }
156
+ }
157
+
158
+ :root[data-theme="dark"],
159
+ :root.dark {
160
+ /* Background */
161
+ --color-background: var(--color-gray-900);
162
+ --color-background-rgb: 34 34 37;
163
+ --color-background-paper: var(--color-gray-800);
164
+ --color-background-paper-rgb: 45 45 49;
165
+ --color-background-elevated: var(--color-gray-600);
166
+ --color-background-elevated-rgb: 74 74 75;
167
+ --color-background-muted: var(--color-gray-700);
168
+ --color-background-muted-rgb: 58 58 62;
169
+
170
+ /* Text */
171
+ --color-text: var(--color-gray-100);
172
+ --color-text-rgb: 244 244 245;
173
+ --color-text-muted: var(--color-gray-400);
174
+ --color-text-muted-rgb: 154 154 155;
175
+ --color-text-subtle: var(--color-gray-500);
176
+ --color-text-subtle-rgb: 107 107 108;
177
+ --color-text-link: var(--color-blue-400);
178
+ --color-text-link-rgb: 96 165 250;
179
+ --color-text-primary: var(--color-primary-500);
180
+ --color-text-primary-rgb: 26 198 213;
181
+ --color-text-info: var(--color-blue-500);
182
+ --color-text-info-rgb: 59 130 246;
183
+ --color-text-success: var(--color-green-500);
184
+ --color-text-success-rgb: 16 185 129;
185
+ --color-text-error: var(--color-red-500);
186
+ --color-text-error-rgb: 239 68 68;
187
+ --color-text-warning: var(--color-yellow-500);
188
+ --color-text-warning-rgb: 245 158 11;
189
+
190
+ /* Primary */
191
+ --color-primary: var(--color-primary-600);
192
+ --color-primary-rgb: 21 160 172;
193
+ --color-primary-hover: var(--color-primary-700);
194
+ --color-primary-hover-rgb: 16 122 132;
195
+ --color-primary-active: var(--color-primary-700);
196
+ --color-primary-active-rgb: 16 122 132;
197
+ --color-primary-tint: var(--color-primary-900);
198
+ --color-primary-tint-rgb: 6 46 50;
199
+ --color-primary-text: var(--color-white);
200
+ --color-primary-text-rgb: 255 255 255;
201
+
202
+ /* Secondary */
203
+ --color-secondary: var(--color-secondary-400);
204
+ --color-secondary-rgb: 143 143 169;
205
+ --color-secondary-hover: var(--color-secondary-500);
206
+ --color-secondary-hover-rgb: 105 105 127;
207
+ --color-secondary-active: var(--color-secondary-500);
208
+ --color-secondary-active-rgb: 105 105 127;
209
+ --color-secondary-tint: var(--color-gray-800);
210
+ --color-secondary-tint-rgb: 45 45 49;
211
+ --color-secondary-text: var(--color-secondary-900);
212
+ --color-secondary-text-rgb: 35 35 45;
213
+
214
+ /* Success */
215
+ --color-success: var(--color-green-500);
216
+ --color-success-rgb: 16 185 129;
217
+ --color-success-hover: var(--color-green-600);
218
+ --color-success-hover-rgb: 5 150 105;
219
+ --color-success-active: var(--color-green-600);
220
+ --color-success-active-rgb: 5 150 105;
221
+ --color-success-tint: var(--color-green-900);
222
+ --color-success-tint-rgb: 6 78 59;
223
+ --color-success-text: var(--color-white);
224
+ --color-success-text-rgb: 255 255 255;
225
+
226
+ /* Warning */
227
+ --color-warning: var(--color-yellow-500);
228
+ --color-warning-rgb: 245 158 11;
229
+ --color-warning-hover: var(--color-yellow-600);
230
+ --color-warning-hover-rgb: 217 119 6;
231
+ --color-warning-active: var(--color-yellow-600);
232
+ --color-warning-active-rgb: 217 119 6;
233
+ --color-warning-tint: var(--color-yellow-900);
234
+ --color-warning-tint-rgb: 120 53 15;
235
+ --color-warning-text: var(--color-gray-900);
236
+ --color-warning-text-rgb: 34 34 37;
237
+
238
+ /* Error */
239
+ --color-error: var(--color-red-500);
240
+ --color-error-rgb: 239 68 68;
241
+ --color-error-hover: var(--color-red-600);
242
+ --color-error-hover-rgb: 220 38 38;
243
+ --color-error-active: var(--color-red-600);
244
+ --color-error-active-rgb: 220 38 38;
245
+ --color-error-tint: var(--color-red-900);
246
+ --color-error-tint-rgb: 127 29 29;
247
+ --color-error-text: var(--color-white);
248
+ --color-error-text-rgb: 255 255 255;
249
+ --color-error-bg: color-mix(in srgb, var(--color-error) 10%, transparent);
250
+
251
+ /* Info */
252
+ --color-info: var(--color-blue-500);
253
+ --color-info-rgb: 59 130 246;
254
+ --color-info-hover: var(--color-blue-600);
255
+ --color-info-hover-rgb: 37 99 235;
256
+ --color-info-active: var(--color-blue-600);
257
+ --color-info-active-rgb: 37 99 235;
258
+ --color-info-tint: var(--color-blue-900);
259
+ --color-info-tint-rgb: 30 58 138;
260
+ --color-info-text: var(--color-white);
261
+ --color-info-text-rgb: 255 255 255;
262
+
263
+ /* Border */
264
+ --color-border: var(--color-gray-700);
265
+ --color-border-rgb: 58 58 62;
266
+ --color-border-subtle: var(--color-gray-800);
267
+ --color-border-subtle-rgb: 45 45 49;
268
+ --color-border-strong: var(--color-gray-600);
269
+ --color-border-strong-rgb: 74 74 75;
270
+
271
+ /* Disabled */
272
+ --color-disabled: var(--color-gray-700);
273
+ --color-disabled-rgb: 58 58 62;
274
+ --color-disabled-text: var(--color-gray-500);
275
+ --color-disabled-text-rgb: 107 107 108;
276
+
277
+ /* Focus */
278
+ --color-focus-ring: color-mix(in srgb, var(--color-primary) 50%, transparent);
279
+ --color-focus-ring-error: color-mix(in srgb, var(--color-error) 15%, transparent);
280
+
281
+ /* Chart */
282
+ --color-chart-1: var(--color-chart-blue-dark);
283
+ --color-chart-1-rgb: 107 143 245;
284
+ --color-chart-2: var(--color-chart-pink-dark);
285
+ --color-chart-2-rgb: 232 112 184;
286
+ --color-chart-3: var(--color-chart-lavender-dark);
287
+ --color-chart-3-rgb: 196 168 248;
288
+ --color-chart-4: var(--color-chart-sky-dark);
289
+ --color-chart-4-rgb: 141 216 248;
290
+ --color-chart-5: var(--color-chart-rose-dark);
291
+ --color-chart-5-rgb: 248 192 222;
292
+
293
+ /* Dark Mode Shadows - increased opacity for visibility */
294
+ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
295
+ --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
296
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
297
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
298
+ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.25);
299
+ --shadow-primary-glow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent);
300
+ }
package/css/themes/light.css ADDED
@@ -0,0 +1,142 @@
1
+ /**
2
+ * Light Theme — Semantic color overrides
3
+ * ⚠️ Auto-generated — DO NOT EDIT
4
+ *
5
+ * Usage: @import '@7onic-ui/tokens/css/themes/light.css';
6
+ */
7
+
8
+ :root {
9
+ /* Background */
10
+ --color-background: var(--color-white);
11
+ --color-background-rgb: 255 255 255;
12
+ --color-background-paper: var(--color-white);
13
+ --color-background-paper-rgb: 255 255 255;
14
+ --color-background-elevated: var(--color-white);
15
+ --color-background-elevated-rgb: 255 255 255;
16
+ --color-background-muted: var(--color-gray-100);
17
+ --color-background-muted-rgb: 244 244 245;
18
+
19
+ /* Text */
20
+ --color-text: var(--color-gray-900);
21
+ --color-text-rgb: 34 34 37;
22
+ --color-text-muted: var(--color-gray-500);
23
+ --color-text-muted-rgb: 107 107 108;
24
+ --color-text-subtle: var(--color-gray-400);
25
+ --color-text-subtle-rgb: 154 154 155;
26
+ --color-text-link: var(--color-blue-600);
27
+ --color-text-link-rgb: 37 99 235;
28
+ --color-text-primary: var(--color-primary-600);
29
+ --color-text-primary-rgb: 21 160 172;
30
+ --color-text-info: var(--color-blue-600);
31
+ --color-text-info-rgb: 37 99 235;
32
+ --color-text-success: var(--color-green-600);
33
+ --color-text-success-rgb: 5 150 105;
34
+ --color-text-error: var(--color-red-600);
35
+ --color-text-error-rgb: 220 38 38;
36
+ --color-text-warning: var(--color-yellow-600);
37
+ --color-text-warning-rgb: 217 119 6;
38
+
39
+ /* Primary */
40
+ --color-primary: var(--color-primary-600);
41
+ --color-primary-rgb: 21 160 172;
42
+ --color-primary-hover: var(--color-primary-700);
43
+ --color-primary-hover-rgb: 16 122 132;
44
+ --color-primary-active: var(--color-primary-700);
45
+ --color-primary-active-rgb: 16 122 132;
46
+ --color-primary-tint: var(--color-primary-50);
47
+ --color-primary-tint-rgb: 219 248 251;
48
+ --color-primary-text: var(--color-white);
49
+ --color-primary-text-rgb: 255 255 255;
50
+
51
+ /* Secondary */
52
+ --color-secondary: var(--color-secondary-600);
53
+ --color-secondary-rgb: 78 78 96;
54
+ --color-secondary-hover: var(--color-secondary-700);
55
+ --color-secondary-hover-rgb: 59 59 74;
56
+ --color-secondary-active: var(--color-secondary-700);
57
+ --color-secondary-active-rgb: 59 59 74;
58
+ --color-secondary-tint: var(--color-gray-100);
59
+ --color-secondary-tint-rgb: 244 244 245;
60
+ --color-secondary-text: var(--color-white);
61
+ --color-secondary-text-rgb: 255 255 255;
62
+
63
+ /* Success */
64
+ --color-success: var(--color-green-600);
65
+ --color-success-rgb: 5 150 105;
66
+ --color-success-hover: var(--color-green-700);
67
+ --color-success-hover-rgb: 4 120 87;
68
+ --color-success-active: var(--color-green-700);
69
+ --color-success-active-rgb: 4 120 87;
70
+ --color-success-tint: var(--color-green-50);
71
+ --color-success-tint-rgb: 236 253 245;
72
+ --color-success-text: var(--color-white);
73
+ --color-success-text-rgb: 255 255 255;
74
+
75
+ /* Warning */
76
+ --color-warning: var(--color-yellow-500);
77
+ --color-warning-rgb: 245 158 11;
78
+ --color-warning-hover: var(--color-yellow-600);
79
+ --color-warning-hover-rgb: 217 119 6;
80
+ --color-warning-active: var(--color-yellow-600);
81
+ --color-warning-active-rgb: 217 119 6;
82
+ --color-warning-tint: var(--color-yellow-50);
83
+ --color-warning-tint-rgb: 255 251 235;
84
+ --color-warning-text: var(--color-gray-900);
85
+ --color-warning-text-rgb: 34 34 37;
86
+
87
+ /* Error */
88
+ --color-error: var(--color-red-600);
89
+ --color-error-rgb: 220 38 38;
90
+ --color-error-hover: var(--color-red-700);
91
+ --color-error-hover-rgb: 185 28 28;
92
+ --color-error-active: var(--color-red-700);
93
+ --color-error-active-rgb: 185 28 28;
94
+ --color-error-tint: var(--color-red-50);
95
+ --color-error-tint-rgb: 254 242 242;
96
+ --color-error-text: var(--color-white);
97
+ --color-error-text-rgb: 255 255 255;
98
+ --color-error-bg: color-mix(in srgb, var(--color-error) 10%, transparent);
99
+
100
+ /* Info */
101
+ --color-info: var(--color-blue-600);
102
+ --color-info-rgb: 37 99 235;
103
+ --color-info-hover: var(--color-blue-700);
104
+ --color-info-hover-rgb: 29 78 216;
105
+ --color-info-active: var(--color-blue-700);
106
+ --color-info-active-rgb: 29 78 216;
107
+ --color-info-tint: var(--color-blue-50);
108
+ --color-info-tint-rgb: 239 246 255;
109
+ --color-info-text: var(--color-white);
110
+ --color-info-text-rgb: 255 255 255;
111
+
112
+ /* Border */
113
+ --color-border: var(--color-gray-200);
114
+ --color-border-rgb: 228 228 230;
115
+ --color-border-subtle: var(--color-gray-100);
116
+ --color-border-subtle-rgb: 244 244 245;
117
+ --color-border-strong: var(--color-gray-300);
118
+ --color-border-strong-rgb: 212 212 213;
119
+
120
+ /* Disabled */
121
+ --color-disabled: var(--color-gray-300);
122
+ --color-disabled-rgb: 212 212 213;
123
+ --color-disabled-text: var(--color-gray-400);
124
+ --color-disabled-text-rgb: 154 154 155;
125
+
126
+ /* Focus */
127
+ --color-focus-ring: color-mix(in srgb, var(--color-primary) 20%, transparent);
128
+ --color-focus-ring-error: color-mix(in srgb, var(--color-error) 15%, transparent);
129
+
130
+ /* Chart */
131
+ --color-chart-1: var(--color-chart-blue-light);
132
+ --color-chart-1-rgb: 69 112 232;
133
+ --color-chart-2: var(--color-chart-pink-light);
134
+ --color-chart-2-rgb: 217 79 154;
135
+ --color-chart-3: var(--color-chart-lavender-light);
136
+ --color-chart-3-rgb: 168 136 240;
137
+ --color-chart-4: var(--color-chart-sky-light);
138
+ --color-chart-4-rgb: 104 200 245;
139
+ --color-chart-5: var(--color-chart-rose-light);
140
+ --color-chart-5-rgb: 240 160 204;
141
+
142
+ }