@voxel51/voodo 0.0.41 → 0.2.0-dev-prerelease-publishing.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 (22) hide show
  1. package/README.md +21 -1
  2. package/dist/index.cjs +1 -1
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.js +3070 -2603
  5. package/dist/index.js.map +1 -1
  6. package/dist/styles/color-classes.d.ts +1 -1
  7. package/dist/styles/color-classes.d.ts.map +1 -1
  8. package/dist/theme/cssVar.d.ts +223 -0
  9. package/dist/theme/cssVar.d.ts.map +1 -0
  10. package/dist/theme/index.d.ts +2 -0
  11. package/dist/theme/index.d.ts.map +1 -1
  12. package/dist/theme/mui.d.ts +78 -0
  13. package/dist/theme/mui.d.ts.map +1 -0
  14. package/dist/theme/tokens/colors.d.ts +348 -124
  15. package/dist/theme/tokens/colors.d.ts.map +1 -1
  16. package/dist/theme/tokens/index.d.ts +252 -125
  17. package/dist/theme/tokens/index.d.ts.map +1 -1
  18. package/dist/theme/tokens/typography.d.ts +1 -1
  19. package/dist/types/color.d.ts +67 -4
  20. package/dist/types/color.d.ts.map +1 -1
  21. package/dist/voodo.css +1 -1
  22. package/package.json +14 -2
package/dist/theme/tokens/colors.d.ts CHANGED
@@ -1,187 +1,411 @@
1
+ /**
2
+ * Color tokens.
3
+ *
4
+ * Two-tier system mirroring the Figma variables:
5
+ * - `primitives`: raw color scales (neutral/orange/green/red/blue/yellow/
6
+ * purple/pink/teal). Not emitted as CSS vars directly.
7
+ * - `colors.{common,dark,light}`: semantic tokens that reference primitives.
8
+ * These are flattened to CSS custom properties by the theme generator.
9
+ *
10
+ * Values are sourced from the Figma "Theme" variable collection (both modes).
11
+ */
12
+ export declare const primitives: {
13
+ readonly neutral: {
14
+ readonly 0: "#FFFFFF";
15
+ readonly 25: "#FFF9F5";
16
+ readonly 50: "#F9F8F7";
17
+ readonly 75: "#F2F1F0";
18
+ readonly 100: "#EEEDEC";
19
+ readonly 125: "#E8E7E6";
20
+ readonly 150: "#E0DEDC";
21
+ readonly 200: "#D0CECC";
22
+ readonly 250: "#C0BEBC";
23
+ readonly 300: "#B5B3B1";
24
+ readonly 350: "#A0A09E";
25
+ readonly 400: "#9C9896";
26
+ readonly 450: "#8F8D8B";
27
+ readonly 500: "#6E6C6A";
28
+ readonly 550: "#6B6968";
29
+ readonly 600: "#4A4C4E";
30
+ readonly 650: "#4A4847";
31
+ readonly 700: "#3E4244";
32
+ readonly 750: "#2F3234";
33
+ readonly 800: "#2A2B2C";
34
+ readonly 825: "#232526";
35
+ readonly 850: "#1F2021";
36
+ readonly 875: "#1E1F20";
37
+ readonly 900: "#1C1D1E";
38
+ readonly 925: "#18191A";
39
+ readonly 950: "#141618";
40
+ readonly 1000: "#000000";
41
+ };
42
+ readonly orange: {
43
+ readonly 300: "#FFD098";
44
+ readonly 400: "#FF9950";
45
+ readonly 500: "#FF6D04";
46
+ readonly 600: "#D05700";
47
+ readonly 700: "#9B4200";
48
+ };
49
+ readonly green: {
50
+ readonly 300: "#7AB87C";
51
+ readonly 400: "#4CA05A";
52
+ readonly 500: "#1E7D45";
53
+ readonly 600: "#166638";
54
+ readonly 700: "#0E4E2B";
55
+ };
56
+ readonly red: {
57
+ readonly 300: "#FF9999";
58
+ readonly 400: "#FF6767";
59
+ readonly 500: "#C33636";
60
+ readonly 600: "#9B2727";
61
+ readonly 700: "#751D1D";
62
+ };
63
+ readonly blue: {
64
+ readonly 300: "#86B5F6";
65
+ readonly 400: "#4F8BEF";
66
+ readonly 500: "#2563EB";
67
+ readonly 600: "#1D4EBA";
68
+ readonly 700: "#153A8A";
69
+ };
70
+ readonly yellow: {
71
+ readonly 300: "#FCCB58";
72
+ readonly 400: "#ECAB2E";
73
+ readonly 500: "#D97706";
74
+ readonly 600: "#B26003";
75
+ readonly 700: "#8A4A02";
76
+ };
77
+ readonly purple: {
78
+ readonly 300: "#CBA6FF";
79
+ readonly 400: "#AB81FB";
80
+ readonly 500: "#8B5CF6";
81
+ readonly 600: "#6F42C1";
82
+ readonly 700: "#532E91";
83
+ };
84
+ readonly pink: {
85
+ readonly 300: "#F988B4";
86
+ readonly 400: "#EF5793";
87
+ readonly 500: "#DB2777";
88
+ readonly 600: "#AF1D5E";
89
+ readonly 700: "#851547";
90
+ };
91
+ readonly teal: {
92
+ readonly 300: "#5EC6B9";
93
+ readonly 400: "#32ADA0";
94
+ readonly 500: "#0D9488";
95
+ readonly 600: "#0A766C";
96
+ readonly 700: "#075951";
97
+ };
98
+ };
1
99
  export declare const colors: {
2
100
  common: {
3
101
  brand: {
4
- primary: string;
5
- accent: string;
102
+ primary: "#FF6D04";
103
+ accent: "#FF9950";
6
104
  };
7
105
  semantic: {
8
- success: string;
9
- destructive: string;
10
- info: string;
11
- warning: string;
106
+ success: "#1E7D45";
107
+ destructive: "#C33636";
108
+ info: "#2563EB";
109
+ warning: "#D97706";
12
110
  };
13
111
  };
14
112
  dark: {
15
113
  content: {
16
114
  bg: {
17
- background: string;
115
+ background: "#18191A";
18
116
  card: {
19
- 1: string;
20
- 2: string;
21
- elevated: string;
117
+ 1: "#1E1F20";
118
+ 2: "#232526";
119
+ elevated: "#2F3234";
22
120
  };
23
- muted: string;
24
- popover: string;
25
- secondary: string;
121
+ muted: "#1F2021";
122
+ popover: "#141618";
123
+ secondary: "#1C1D1E";
26
124
  selected: string;
27
125
  };
28
126
  text: {
29
- fg: string;
30
- primary: string;
31
- secondary: string;
32
- tertiary: string;
33
- muted: string;
34
- placeholder: string;
35
- success: string;
36
- destructive: string;
37
- info: string;
38
- warning: string;
127
+ fg: "#FFF9F5";
128
+ primary: "#FFFFFF";
129
+ secondary: "#8F8D8B";
130
+ tertiary: "#6E6C6A";
131
+ muted: "#9C9896";
132
+ placeholder: "#6B6968";
133
+ success: "#7AB87C";
134
+ destructive: "#FF6767";
135
+ info: "#86B5F6";
136
+ warning: "#FCCB58";
137
+ accent: "#FF9950";
138
+ decorative: "#FFD098";
39
139
  };
40
140
  border: {
41
- default: string;
42
- strong: string;
43
- hover: string;
44
- focus: string;
45
- subtle: string;
46
- active: string;
47
- error: string;
48
- success: string;
49
- warning: string;
50
- disabled: string;
141
+ default: "#2F3234";
142
+ strong: "#3E4244";
143
+ hover: "#4A4C4E";
144
+ focus: "#6E6C6A";
145
+ subtle: "#1E1F20";
146
+ active: "#FF6D04";
147
+ error: "#FF6767";
148
+ success: "#7AB87C";
149
+ warning: "#FCCB58";
150
+ disabled: "#1E1F20";
151
+ input: "#2F3234";
152
+ "input-hover": "#4A4C4E";
153
+ "input-focus": "#6E6C6A";
51
154
  };
52
155
  status: {
53
- approved: string;
54
- review: string;
55
- progress: string;
56
- default: string;
57
- failed: string;
156
+ approved: "#7AB87C";
157
+ review: "#FF9950";
158
+ progress: "#CBA6FF";
159
+ default: "#8F8D8B";
160
+ failed: "#FF6767";
58
161
  };
59
162
  icon: {
163
+ default: "#8F8D8B";
164
+ subtle: "#6E6C6A";
165
+ emphasis: "#FFFFFF";
166
+ muted: "#6B6968";
167
+ disabled: "#6B6968";
168
+ decorative: "#FF9950";
169
+ brand: "#FF6D04";
170
+ dark: "#18191A";
171
+ "brand-accent": "#FF9950";
172
+ success: "#7AB87C";
173
+ destructive: "#FF6767";
174
+ warning: "#FCCB58";
175
+ info: "#86B5F6";
176
+ };
177
+ overlay: {
60
178
  default: string;
61
- subtle: string;
62
- emphasis: string;
63
- muted: string;
64
- disabled: string;
65
- decorative: string;
66
- brand: string;
67
- "brand-accent": string;
68
- success: string;
69
- destructive: string;
70
- warning: string;
71
- info: string;
179
+ light: string;
180
+ heavy: string;
181
+ };
182
+ focus: {
183
+ ring: string;
184
+ };
185
+ link: {
186
+ default: "#86B5F6";
187
+ hover: "#4F8BEF";
188
+ visited: "#AB81FB";
189
+ };
190
+ palette: {
191
+ 1: "#FF6D04";
192
+ 2: "#2563EB";
193
+ 3: "#1E7D45";
194
+ 4: "#8B5CF6";
195
+ 5: "#DB2777";
196
+ 6: "#D97706";
197
+ 7: "#0D9488";
198
+ 8: "#6F42C1";
199
+ 9: "#532E91";
200
+ 10: "#C33636";
201
+ 11: "#B26003";
202
+ 12: "#166638";
203
+ orange: "#FF6D04";
204
+ blue: "#2563EB";
205
+ green: "#1E7D45";
206
+ purple: "#8B5CF6";
207
+ pink: "#DB2777";
208
+ yellow: "#D97706";
209
+ teal: "#0D9488";
210
+ red: "#C33636";
211
+ };
212
+ skeleton: {
213
+ base: "#232526";
214
+ shimmer: "#2F3234";
215
+ };
216
+ tooltip: {
217
+ bg: "#2A2B2C";
218
+ text: "#FFF9F5";
219
+ };
220
+ code: {
221
+ bg: "#141618";
222
+ text: "#FF9950";
223
+ border: "#2F3234";
224
+ };
225
+ scrollbar: {
226
+ track: "#18191A";
227
+ thumb: "#3E4244";
228
+ "thumb-hover": "#4A4C4E";
229
+ };
230
+ selection: {
231
+ bg: string;
232
+ text: "#FFFFFF";
72
233
  };
73
234
  };
74
235
  action: {
75
236
  primary: {
76
- primary: string;
77
- secondary: string;
78
- tertiary: string;
79
- text: string;
237
+ primary: "#FF6D04";
238
+ secondary: "#D05700";
239
+ tertiary: "#9B4200";
240
+ text: "#FFFFFF";
80
241
  };
81
242
  secondary: {
82
- primary: string;
83
- secondary: string;
84
- tertiary: string;
85
- text: string;
243
+ primary: "#232526";
244
+ secondary: "#2A2B2C";
245
+ tertiary: "#1E1F20";
246
+ text: "#FFFFFF";
86
247
  };
87
248
  success: {
88
- primary: string;
89
- secondary: string;
90
- tertiary: string;
91
- text: string;
249
+ primary: "#1E7D45";
250
+ secondary: "#166638";
251
+ tertiary: "#0E4E2B";
252
+ text: "#FFFFFF";
92
253
  };
93
254
  danger: {
94
- primary: string;
95
- secondary: string;
96
- tertiary: string;
97
- text: string;
255
+ primary: "#C33636";
256
+ secondary: "#9B2727";
257
+ tertiary: "#751D1D";
258
+ text: "#FFFFFF";
98
259
  };
99
260
  };
100
261
  };
101
262
  light: {
102
263
  content: {
103
264
  bg: {
104
- background: string;
265
+ background: "#F9F8F7";
105
266
  card: {
106
- 1: string;
107
- 2: string;
108
- elevated: string;
267
+ 1: "#FFFFFF";
268
+ 2: "#F2F1F0";
269
+ elevated: "#FFFFFF";
109
270
  };
110
- muted: string;
111
- popover: string;
112
- secondary: string;
271
+ muted: "#EEEDEC";
272
+ popover: "#FFFFFF";
273
+ secondary: "#E8E7E6";
113
274
  selected: string;
114
275
  };
115
276
  text: {
116
- fg: string;
117
- primary: string;
118
- secondary: string;
119
- tertiary: string;
120
- muted: string;
121
- placeholder: string;
122
- success: string;
123
- destructive: string;
124
- info: string;
125
- warning: string;
277
+ fg: "#000000";
278
+ primary: "#18191A";
279
+ secondary: "#4A4847";
280
+ tertiary: "#6B6968";
281
+ muted: "#8F8D8B";
282
+ placeholder: "#B5B3B1";
283
+ success: "#166638";
284
+ destructive: "#9B2727";
285
+ info: "#1D4EBA";
286
+ warning: "#8A4A02";
287
+ accent: "#D97706";
288
+ decorative: "#FF9950";
126
289
  };
127
290
  border: {
128
- default: string;
129
- strong: string;
130
- hover: string;
131
- focus: string;
132
- subtle: string;
133
- active: string;
134
- error: string;
135
- success: string;
136
- warning: string;
137
- disabled: string;
291
+ default: "#E0DEDC";
292
+ strong: "#D0CECC";
293
+ hover: "#C0BEBC";
294
+ focus: "#A0A09E";
295
+ subtle: "#EEEDEC";
296
+ active: "#FF6D04";
297
+ error: "#C33636";
298
+ success: "#1E7D45";
299
+ warning: "#D97706";
300
+ disabled: "#EEEDEC";
301
+ input: "#D0CECC";
302
+ "input-hover": "#C0BEBC";
303
+ "input-focus": "#A0A09E";
138
304
  };
139
305
  status: {
140
- approved: string;
141
- review: string;
142
- progress: string;
143
- default: string;
144
- failed: string;
306
+ approved: "#1E7D45";
307
+ review: "#D05700";
308
+ progress: "#8B5CF6";
309
+ default: "#6B6968";
310
+ failed: "#C33636";
145
311
  };
146
312
  icon: {
313
+ default: "#6B6968";
314
+ subtle: "#8F8D8B";
315
+ emphasis: "#18191A";
316
+ muted: "#B5B3B1";
317
+ disabled: "#B5B3B1";
318
+ decorative: "#D05700";
319
+ brand: "#FF6D04";
320
+ dark: "#18191A";
321
+ "brand-accent": "#FF9950";
322
+ success: "#1E7D45";
323
+ destructive: "#C33636";
324
+ warning: "#D97706";
325
+ info: "#2563EB";
326
+ };
327
+ overlay: {
147
328
  default: string;
148
- subtle: string;
149
- emphasis: string;
150
- muted: string;
151
- disabled: string;
152
- decorative: string;
153
- brand: string;
154
- "brand-accent": string;
155
- success: string;
156
- destructive: string;
157
- warning: string;
158
- info: string;
329
+ light: string;
330
+ heavy: string;
331
+ };
332
+ focus: {
333
+ ring: string;
334
+ };
335
+ link: {
336
+ default: "#2563EB";
337
+ hover: "#1D4EBA";
338
+ visited: "#6F42C1";
339
+ };
340
+ palette: {
341
+ 1: "#FF6D04";
342
+ 2: "#2563EB";
343
+ 3: "#1E7D45";
344
+ 4: "#8B5CF6";
345
+ 5: "#DB2777";
346
+ 6: "#D97706";
347
+ 7: "#0D9488";
348
+ 8: "#6F42C1";
349
+ 9: "#532E91";
350
+ 10: "#C33636";
351
+ 11: "#B26003";
352
+ 12: "#166638";
353
+ orange: "#FF6D04";
354
+ blue: "#2563EB";
355
+ green: "#1E7D45";
356
+ purple: "#8B5CF6";
357
+ pink: "#DB2777";
358
+ yellow: "#D97706";
359
+ teal: "#0D9488";
360
+ red: "#C33636";
361
+ };
362
+ skeleton: {
363
+ base: "#EEEDEC";
364
+ shimmer: "#E0DEDC";
365
+ };
366
+ tooltip: {
367
+ bg: "#18191A";
368
+ text: "#FFF9F5";
369
+ };
370
+ code: {
371
+ bg: "#F2F1F0";
372
+ text: "#D05700";
373
+ border: "#E0DEDC";
374
+ };
375
+ scrollbar: {
376
+ track: "#F2F1F0";
377
+ thumb: "#D0CECC";
378
+ "thumb-hover": "#C0BEBC";
379
+ };
380
+ selection: {
381
+ bg: string;
382
+ text: "#000000";
159
383
  };
160
384
  };
161
385
  action: {
162
386
  primary: {
163
- primary: string;
164
- secondary: string;
165
- tertiary: string;
166
- text: string;
387
+ primary: "#FF6D04";
388
+ secondary: "#D05700";
389
+ tertiary: "#9B4200";
390
+ text: "#FFFFFF";
167
391
  };
168
392
  secondary: {
169
- primary: string;
170
- secondary: string;
171
- tertiary: string;
172
- text: string;
393
+ primary: "#EEEDEC";
394
+ secondary: "#E0DEDC";
395
+ tertiary: "#D0CECC";
396
+ text: "#000000";
173
397
  };
174
398
  success: {
175
- primary: string;
176
- secondary: string;
177
- tertiary: string;
178
- text: string;
399
+ primary: "#1E7D45";
400
+ secondary: "#166638";
401
+ tertiary: "#0E4E2B";
402
+ text: "#FFFFFF";
179
403
  };
180
404
  danger: {
181
- primary: string;
182
- secondary: string;
183
- tertiary: string;
184
- text: string;
405
+ primary: "#C33636";
406
+ secondary: "#9B2727";
407
+ tertiary: "#751D1D";
408
+ text: "#FFFFFF";
185
409
  };
186
410
  };
187
411
  };
package/dist/theme/tokens/colors.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/theme/tokens/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2LlB,CAAC"}
1
+ {"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/theme/tokens/colors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFb,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyTlB,CAAC"}