@ctlyst.id/voila-ui 1.0.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 (103) hide show
  1. package/LICENSE +201 -0
  2. package/README.md +1 -0
  3. package/dist/index.js +160 -0
  4. package/dist/index.mjs +14225 -0
  5. package/dist/style.css +1 -0
  6. package/dist/types/@types/vanilla-sprinkles.d.ts +17 -0
  7. package/dist/types/assets/Spinner.d.ts +8 -0
  8. package/dist/types/assets/index.d.ts +1 -0
  9. package/dist/types/components/badge/badge.css.d.ts +40 -0
  10. package/dist/types/components/badge/badge.d.ts +15 -0
  11. package/dist/types/components/badge/index.d.ts +2 -0
  12. package/dist/types/components/button/button.css.d.ts +121 -0
  13. package/dist/types/components/button/button.d.ts +19 -0
  14. package/dist/types/components/button/index.d.ts +2 -0
  15. package/dist/types/components/close-button/close-button.css.d.ts +2 -0
  16. package/dist/types/components/close-button/close-button.d.ts +14 -0
  17. package/dist/types/components/close-button/index.d.ts +2 -0
  18. package/dist/types/components/form/common/action-icon.d.ts +3 -0
  19. package/dist/types/components/form/common/add-on.d.ts +10 -0
  20. package/dist/types/components/form/common/label.d.ts +10 -0
  21. package/dist/types/components/form/field.d.ts +15 -0
  22. package/dist/types/components/form/form.type.d.ts +1 -0
  23. package/dist/types/components/form/index.d.ts +4 -0
  24. package/dist/types/components/form/input.d.ts +24 -0
  25. package/dist/types/components/form/styles/addon.css.d.ts +29 -0
  26. package/dist/types/components/form/styles/common.css.d.ts +4 -0
  27. package/dist/types/components/form/styles/field.css.d.ts +37 -0
  28. package/dist/types/components/form/styles/index.d.ts +6 -0
  29. package/dist/types/components/form/styles/input.css.d.ts +2 -0
  30. package/dist/types/components/form/styles/label.css.d.ts +20 -0
  31. package/dist/types/components/form/styles/textarea.css.d.ts +2 -0
  32. package/dist/types/components/form/textarea.d.ts +18 -0
  33. package/dist/types/components/form/utils/resolve-form-state.d.ts +8 -0
  34. package/dist/types/components/icon-button/icon-button.css.d.ts +101 -0
  35. package/dist/types/components/icon-button/icon-button.d.ts +15 -0
  36. package/dist/types/components/icon-button/index.d.ts +2 -0
  37. package/dist/types/components/image/image.css.d.ts +21 -0
  38. package/dist/types/components/image/image.d.ts +34 -0
  39. package/dist/types/components/image/index.d.ts +2 -0
  40. package/dist/types/components/index.d.ts +10 -0
  41. package/dist/types/components/list/index.d.ts +4 -0
  42. package/dist/types/components/list/list-item.css.d.ts +14 -0
  43. package/dist/types/components/list/list-item.d.ts +16 -0
  44. package/dist/types/components/list/list.css.d.ts +2 -0
  45. package/dist/types/components/list/list.d.ts +11 -0
  46. package/dist/types/components/tabs/index.d.ts +4 -0
  47. package/dist/types/components/tabs/tab-item.css.d.ts +10 -0
  48. package/dist/types/components/tabs/tab-item.d.ts +13 -0
  49. package/dist/types/components/tabs/tabs.css.d.ts +20 -0
  50. package/dist/types/components/tabs/tabs.d.ts +23 -0
  51. package/dist/types/components/tooltip/index.d.ts +2 -0
  52. package/dist/types/components/tooltip/tooltip.css.d.ts +2 -0
  53. package/dist/types/components/tooltip/tooltip.d.ts +20 -0
  54. package/dist/types/components/utils/hooks/use-ripple/index.d.ts +2 -0
  55. package/dist/types/components/utils/hooks/use-ripple/ripple.css.d.ts +2 -0
  56. package/dist/types/components/utils/hooks/use-ripple/use-ripple.d.ts +6 -0
  57. package/dist/types/index.d.ts +7 -0
  58. package/dist/types/layouts/box/box.d.ts +6979 -0
  59. package/dist/types/layouts/box/index.d.ts +2 -0
  60. package/dist/types/layouts/flex/flex.d.ts +366 -0
  61. package/dist/types/layouts/flex/index.d.ts +2 -0
  62. package/dist/types/layouts/grid/grid.d.ts +666 -0
  63. package/dist/types/layouts/grid/index.d.ts +2 -0
  64. package/dist/types/layouts/index.d.ts +5 -0
  65. package/dist/types/layouts/stack/index.d.ts +2 -0
  66. package/dist/types/layouts/stack/stack.d.ts +17 -0
  67. package/dist/types/layouts/stack/utils.d.ts +10 -0
  68. package/dist/types/layouts/text/index.d.ts +2 -0
  69. package/dist/types/layouts/text/text.css.d.ts +72 -0
  70. package/dist/types/layouts/text/text.d.ts +13959 -0
  71. package/dist/types/provider/index.d.ts +1 -0
  72. package/dist/types/provider/provider.d.ts +3 -0
  73. package/dist/types/provider/radix-provider.d.ts +3 -0
  74. package/dist/types/theme/index.d.ts +2 -0
  75. package/dist/types/theme/styles/atoms/border.css.d.ts +1575 -0
  76. package/dist/types/theme/styles/atoms/common.css.d.ts +721 -0
  77. package/dist/types/theme/styles/atoms/constants.d.ts +3 -0
  78. package/dist/types/theme/styles/atoms/flex.css.d.ts +362 -0
  79. package/dist/types/theme/styles/atoms/grid.css.d.ts +661 -0
  80. package/dist/types/theme/styles/atoms/index.d.ts +8 -0
  81. package/dist/types/theme/styles/atoms/position.css.d.ts +778 -0
  82. package/dist/types/theme/styles/atoms/sizes.css.d.ts +1313 -0
  83. package/dist/types/theme/styles/atoms/space.css.d.ts +1943 -0
  84. package/dist/types/theme/styles/atoms/typography.css.d.ts +329 -0
  85. package/dist/types/theme/styles/globals.css.d.ts +3 -0
  86. package/dist/types/theme/styles/index.d.ts +3 -0
  87. package/dist/types/theme/styles/normalize.css.d.ts +0 -0
  88. package/dist/types/theme/styles/theme.css.d.ts +240 -0
  89. package/dist/types/theme/styles/utils.d.ts +17 -0
  90. package/dist/types/theme/tokens/animation.d.ts +21 -0
  91. package/dist/types/theme/tokens/border.d.ts +9 -0
  92. package/dist/types/theme/tokens/breakpoints.d.ts +9 -0
  93. package/dist/types/theme/tokens/color.d.ts +125 -0
  94. package/dist/types/theme/tokens/index.d.ts +241 -0
  95. package/dist/types/theme/tokens/opacity.d.ts +8 -0
  96. package/dist/types/theme/tokens/radii.d.ts +6 -0
  97. package/dist/types/theme/tokens/shadows.d.ts +6 -0
  98. package/dist/types/theme/tokens/space.d.ts +72 -0
  99. package/dist/types/theme/tokens/typography.d.ts +123 -0
  100. package/dist/types/theme/tokens/z-indices.d.ts +16 -0
  101. package/dist/types/utils/index.d.ts +1 -0
  102. package/dist/types/utils/merge-atoms.d.ts +7 -0
  103. package/package.json +77 -0
package/dist/types/theme/styles/atoms/common.css.d.ts ADDED
@@ -0,0 +1,721 @@
1
+ export declare const commonAtoms: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[{
2
+ config: {
3
+ color: {
4
+ values: {
5
+ transparent: {
6
+ default: string;
7
+ conditions: Record<string | number, string>;
8
+ };
9
+ blackTypoHigh: {
10
+ default: string;
11
+ conditions: Record<string | number, string>;
12
+ };
13
+ blackTypoMedium: {
14
+ default: string;
15
+ conditions: Record<string | number, string>;
16
+ };
17
+ blackTypoLow: {
18
+ default: string;
19
+ conditions: Record<string | number, string>;
20
+ };
21
+ whiteTypoHigh: {
22
+ default: string;
23
+ conditions: Record<string | number, string>;
24
+ };
25
+ whiteTypoMedium: {
26
+ default: string;
27
+ conditions: Record<string | number, string>;
28
+ };
29
+ whiteTypoLow: {
30
+ default: string;
31
+ conditions: Record<string | number, string>;
32
+ };
33
+ redSurface1: {
34
+ default: string;
35
+ conditions: Record<string | number, string>;
36
+ };
37
+ redSurface2: {
38
+ default: string;
39
+ conditions: Record<string | number, string>;
40
+ };
41
+ yellowSurface1: {
42
+ default: string;
43
+ conditions: Record<string | number, string>;
44
+ };
45
+ yellowSurface2: {
46
+ default: string;
47
+ conditions: Record<string | number, string>;
48
+ };
49
+ blueSurface1: {
50
+ default: string;
51
+ conditions: Record<string | number, string>;
52
+ };
53
+ blueSurface2: {
54
+ default: string;
55
+ conditions: Record<string | number, string>;
56
+ };
57
+ greenSurface1: {
58
+ default: string;
59
+ conditions: Record<string | number, string>;
60
+ };
61
+ greenSurface2: {
62
+ default: string;
63
+ conditions: Record<string | number, string>;
64
+ };
65
+ redAccent1: {
66
+ default: string;
67
+ conditions: Record<string | number, string>;
68
+ };
69
+ redAccent2: {
70
+ default: string;
71
+ conditions: Record<string | number, string>;
72
+ };
73
+ redAccent3: {
74
+ default: string;
75
+ conditions: Record<string | number, string>;
76
+ };
77
+ yellowAccent1: {
78
+ default: string;
79
+ conditions: Record<string | number, string>;
80
+ };
81
+ yellowAccent2: {
82
+ default: string;
83
+ conditions: Record<string | number, string>;
84
+ };
85
+ yellowAccent3: {
86
+ default: string;
87
+ conditions: Record<string | number, string>;
88
+ };
89
+ blueAccent1: {
90
+ default: string;
91
+ conditions: Record<string | number, string>;
92
+ };
93
+ blueAccent2: {
94
+ default: string;
95
+ conditions: Record<string | number, string>;
96
+ };
97
+ blueAccent3: {
98
+ default: string;
99
+ conditions: Record<string | number, string>;
100
+ };
101
+ greenAccent1: {
102
+ default: string;
103
+ conditions: Record<string | number, string>;
104
+ };
105
+ greenAccent2: {
106
+ default: string;
107
+ conditions: Record<string | number, string>;
108
+ };
109
+ greenAccent3: {
110
+ default: string;
111
+ conditions: Record<string | number, string>;
112
+ };
113
+ red1: {
114
+ default: string;
115
+ conditions: Record<string | number, string>;
116
+ };
117
+ red2: {
118
+ default: string;
119
+ conditions: Record<string | number, string>;
120
+ };
121
+ red3: {
122
+ default: string;
123
+ conditions: Record<string | number, string>;
124
+ };
125
+ yellow1: {
126
+ default: string;
127
+ conditions: Record<string | number, string>;
128
+ };
129
+ yellow2: {
130
+ default: string;
131
+ conditions: Record<string | number, string>;
132
+ };
133
+ yellow3: {
134
+ default: string;
135
+ conditions: Record<string | number, string>;
136
+ };
137
+ blue1: {
138
+ default: string;
139
+ conditions: Record<string | number, string>;
140
+ };
141
+ blue2: {
142
+ default: string;
143
+ conditions: Record<string | number, string>;
144
+ };
145
+ blue3: {
146
+ default: string;
147
+ conditions: Record<string | number, string>;
148
+ };
149
+ green1: {
150
+ default: string;
151
+ conditions: Record<string | number, string>;
152
+ };
153
+ green2: {
154
+ default: string;
155
+ conditions: Record<string | number, string>;
156
+ };
157
+ green3: {
158
+ default: string;
159
+ conditions: Record<string | number, string>;
160
+ };
161
+ primary: {
162
+ default: string;
163
+ conditions: Record<string | number, string>;
164
+ };
165
+ secondary: {
166
+ default: string;
167
+ conditions: Record<string | number, string>;
168
+ };
169
+ black: {
170
+ default: string;
171
+ conditions: Record<string | number, string>;
172
+ };
173
+ white: {
174
+ default: string;
175
+ conditions: Record<string | number, string>;
176
+ };
177
+ grey1: {
178
+ default: string;
179
+ conditions: Record<string | number, string>;
180
+ };
181
+ grey2: {
182
+ default: string;
183
+ conditions: Record<string | number, string>;
184
+ };
185
+ grey3: {
186
+ default: string;
187
+ conditions: Record<string | number, string>;
188
+ };
189
+ };
190
+ staticScale: {
191
+ blackTypoHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
192
+ blackTypoMedium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
193
+ blackTypoLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
194
+ whiteTypoHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
195
+ whiteTypoMedium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
196
+ whiteTypoLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
197
+ redSurface1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
198
+ redSurface2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
199
+ yellowSurface1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
200
+ yellowSurface2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
201
+ blueSurface1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
202
+ blueSurface2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
203
+ greenSurface1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
204
+ greenSurface2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
205
+ redAccent1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
206
+ redAccent2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
207
+ redAccent3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
208
+ yellowAccent1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
209
+ yellowAccent2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
210
+ yellowAccent3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
211
+ blueAccent1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
212
+ blueAccent2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
213
+ blueAccent3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
214
+ greenAccent1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
215
+ greenAccent2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
216
+ greenAccent3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
217
+ red1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
218
+ red2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
219
+ red3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
220
+ yellow1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
221
+ yellow2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
222
+ yellow3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
223
+ blue1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
224
+ blue2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
225
+ blue3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
226
+ green1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
227
+ green2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
228
+ green3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
229
+ primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
230
+ secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
231
+ black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
232
+ white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
233
+ grey1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
234
+ grey2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
235
+ grey3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
236
+ transparent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
237
+ };
238
+ name: "color";
239
+ };
240
+ backgroundColor: {
241
+ values: {
242
+ transparent: {
243
+ default: string;
244
+ conditions: Record<string | number, string>;
245
+ };
246
+ blackTypoHigh: {
247
+ default: string;
248
+ conditions: Record<string | number, string>;
249
+ };
250
+ blackTypoMedium: {
251
+ default: string;
252
+ conditions: Record<string | number, string>;
253
+ };
254
+ blackTypoLow: {
255
+ default: string;
256
+ conditions: Record<string | number, string>;
257
+ };
258
+ whiteTypoHigh: {
259
+ default: string;
260
+ conditions: Record<string | number, string>;
261
+ };
262
+ whiteTypoMedium: {
263
+ default: string;
264
+ conditions: Record<string | number, string>;
265
+ };
266
+ whiteTypoLow: {
267
+ default: string;
268
+ conditions: Record<string | number, string>;
269
+ };
270
+ redSurface1: {
271
+ default: string;
272
+ conditions: Record<string | number, string>;
273
+ };
274
+ redSurface2: {
275
+ default: string;
276
+ conditions: Record<string | number, string>;
277
+ };
278
+ yellowSurface1: {
279
+ default: string;
280
+ conditions: Record<string | number, string>;
281
+ };
282
+ yellowSurface2: {
283
+ default: string;
284
+ conditions: Record<string | number, string>;
285
+ };
286
+ blueSurface1: {
287
+ default: string;
288
+ conditions: Record<string | number, string>;
289
+ };
290
+ blueSurface2: {
291
+ default: string;
292
+ conditions: Record<string | number, string>;
293
+ };
294
+ greenSurface1: {
295
+ default: string;
296
+ conditions: Record<string | number, string>;
297
+ };
298
+ greenSurface2: {
299
+ default: string;
300
+ conditions: Record<string | number, string>;
301
+ };
302
+ redAccent1: {
303
+ default: string;
304
+ conditions: Record<string | number, string>;
305
+ };
306
+ redAccent2: {
307
+ default: string;
308
+ conditions: Record<string | number, string>;
309
+ };
310
+ redAccent3: {
311
+ default: string;
312
+ conditions: Record<string | number, string>;
313
+ };
314
+ yellowAccent1: {
315
+ default: string;
316
+ conditions: Record<string | number, string>;
317
+ };
318
+ yellowAccent2: {
319
+ default: string;
320
+ conditions: Record<string | number, string>;
321
+ };
322
+ yellowAccent3: {
323
+ default: string;
324
+ conditions: Record<string | number, string>;
325
+ };
326
+ blueAccent1: {
327
+ default: string;
328
+ conditions: Record<string | number, string>;
329
+ };
330
+ blueAccent2: {
331
+ default: string;
332
+ conditions: Record<string | number, string>;
333
+ };
334
+ blueAccent3: {
335
+ default: string;
336
+ conditions: Record<string | number, string>;
337
+ };
338
+ greenAccent1: {
339
+ default: string;
340
+ conditions: Record<string | number, string>;
341
+ };
342
+ greenAccent2: {
343
+ default: string;
344
+ conditions: Record<string | number, string>;
345
+ };
346
+ greenAccent3: {
347
+ default: string;
348
+ conditions: Record<string | number, string>;
349
+ };
350
+ red1: {
351
+ default: string;
352
+ conditions: Record<string | number, string>;
353
+ };
354
+ red2: {
355
+ default: string;
356
+ conditions: Record<string | number, string>;
357
+ };
358
+ red3: {
359
+ default: string;
360
+ conditions: Record<string | number, string>;
361
+ };
362
+ yellow1: {
363
+ default: string;
364
+ conditions: Record<string | number, string>;
365
+ };
366
+ yellow2: {
367
+ default: string;
368
+ conditions: Record<string | number, string>;
369
+ };
370
+ yellow3: {
371
+ default: string;
372
+ conditions: Record<string | number, string>;
373
+ };
374
+ blue1: {
375
+ default: string;
376
+ conditions: Record<string | number, string>;
377
+ };
378
+ blue2: {
379
+ default: string;
380
+ conditions: Record<string | number, string>;
381
+ };
382
+ blue3: {
383
+ default: string;
384
+ conditions: Record<string | number, string>;
385
+ };
386
+ green1: {
387
+ default: string;
388
+ conditions: Record<string | number, string>;
389
+ };
390
+ green2: {
391
+ default: string;
392
+ conditions: Record<string | number, string>;
393
+ };
394
+ green3: {
395
+ default: string;
396
+ conditions: Record<string | number, string>;
397
+ };
398
+ primary: {
399
+ default: string;
400
+ conditions: Record<string | number, string>;
401
+ };
402
+ secondary: {
403
+ default: string;
404
+ conditions: Record<string | number, string>;
405
+ };
406
+ black: {
407
+ default: string;
408
+ conditions: Record<string | number, string>;
409
+ };
410
+ white: {
411
+ default: string;
412
+ conditions: Record<string | number, string>;
413
+ };
414
+ grey1: {
415
+ default: string;
416
+ conditions: Record<string | number, string>;
417
+ };
418
+ grey2: {
419
+ default: string;
420
+ conditions: Record<string | number, string>;
421
+ };
422
+ grey3: {
423
+ default: string;
424
+ conditions: Record<string | number, string>;
425
+ };
426
+ };
427
+ staticScale: {
428
+ blackTypoHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
429
+ blackTypoMedium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
430
+ blackTypoLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
431
+ whiteTypoHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
432
+ whiteTypoMedium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
433
+ whiteTypoLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
434
+ redSurface1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
435
+ redSurface2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
436
+ yellowSurface1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
437
+ yellowSurface2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
438
+ blueSurface1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
439
+ blueSurface2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
440
+ greenSurface1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
441
+ greenSurface2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
442
+ redAccent1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
443
+ redAccent2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
444
+ redAccent3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
445
+ yellowAccent1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
446
+ yellowAccent2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
447
+ yellowAccent3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
448
+ blueAccent1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
449
+ blueAccent2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
450
+ blueAccent3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
451
+ greenAccent1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
452
+ greenAccent2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
453
+ greenAccent3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
454
+ red1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
455
+ red2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
456
+ red3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
457
+ yellow1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
458
+ yellow2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
459
+ yellow3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
460
+ blue1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
461
+ blue2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
462
+ blue3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
463
+ green1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
464
+ green2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
465
+ green3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
466
+ primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
467
+ secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
468
+ black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
469
+ white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
470
+ grey1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
471
+ grey2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
472
+ grey3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
473
+ transparent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
474
+ };
475
+ name: "backgroundColor";
476
+ };
477
+ opacity: {
478
+ values: {
479
+ 0: {
480
+ default: string;
481
+ conditions: Record<string | number, string>;
482
+ };
483
+ 100: {
484
+ default: string;
485
+ conditions: Record<string | number, string>;
486
+ };
487
+ 30: {
488
+ default: string;
489
+ conditions: Record<string | number, string>;
490
+ };
491
+ 60: {
492
+ default: string;
493
+ conditions: Record<string | number, string>;
494
+ };
495
+ 90: {
496
+ default: string;
497
+ conditions: Record<string | number, string>;
498
+ };
499
+ };
500
+ staticScale: {
501
+ 0: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
502
+ 30: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
503
+ 60: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
504
+ 90: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
505
+ 100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
506
+ };
507
+ name: "opacity";
508
+ };
509
+ fontSize: {
510
+ values: {
511
+ caption: {
512
+ default: string;
513
+ conditions: Record<string | number, string>;
514
+ };
515
+ footer: {
516
+ default: string;
517
+ conditions: Record<string | number, string>;
518
+ };
519
+ heading1: {
520
+ default: string;
521
+ conditions: Record<string | number, string>;
522
+ };
523
+ heading2: {
524
+ default: string;
525
+ conditions: Record<string | number, string>;
526
+ };
527
+ heading3: {
528
+ default: string;
529
+ conditions: Record<string | number, string>;
530
+ };
531
+ heading4: {
532
+ default: string;
533
+ conditions: Record<string | number, string>;
534
+ };
535
+ heading5: {
536
+ default: string;
537
+ conditions: Record<string | number, string>;
538
+ };
539
+ heading6: {
540
+ default: string;
541
+ conditions: Record<string | number, string>;
542
+ };
543
+ subtitle1: {
544
+ default: string;
545
+ conditions: Record<string | number, string>;
546
+ };
547
+ subtitle2: {
548
+ default: string;
549
+ conditions: Record<string | number, string>;
550
+ };
551
+ body1: {
552
+ default: string;
553
+ conditions: Record<string | number, string>;
554
+ };
555
+ body2: {
556
+ default: string;
557
+ conditions: Record<string | number, string>;
558
+ };
559
+ };
560
+ staticScale: {
561
+ readonly heading1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
562
+ readonly heading2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
563
+ readonly heading3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
564
+ readonly heading4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
565
+ readonly heading5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
566
+ readonly heading6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
567
+ readonly subtitle1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
568
+ readonly subtitle2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
569
+ readonly body1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
570
+ readonly body2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
571
+ readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
572
+ readonly footer: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
573
+ };
574
+ name: "fontSize";
575
+ };
576
+ fontWeight: {
577
+ values: {
578
+ bold: {
579
+ default: string;
580
+ conditions: Record<string | number, string>;
581
+ };
582
+ normal: {
583
+ default: string;
584
+ conditions: Record<string | number, string>;
585
+ };
586
+ black: {
587
+ default: string;
588
+ conditions: Record<string | number, string>;
589
+ };
590
+ hairline: {
591
+ default: string;
592
+ conditions: Record<string | number, string>;
593
+ };
594
+ thin: {
595
+ default: string;
596
+ conditions: Record<string | number, string>;
597
+ };
598
+ light: {
599
+ default: string;
600
+ conditions: Record<string | number, string>;
601
+ };
602
+ medium: {
603
+ default: string;
604
+ conditions: Record<string | number, string>;
605
+ };
606
+ semibold: {
607
+ default: string;
608
+ conditions: Record<string | number, string>;
609
+ };
610
+ extrabold: {
611
+ default: string;
612
+ conditions: Record<string | number, string>;
613
+ };
614
+ };
615
+ staticScale: {
616
+ readonly hairline: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
617
+ readonly thin: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
618
+ readonly light: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
619
+ readonly normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
620
+ readonly medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
621
+ readonly semibold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
622
+ readonly bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
623
+ readonly extrabold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
624
+ readonly black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
625
+ };
626
+ name: "fontWeight";
627
+ };
628
+ textAlign: {
629
+ values: {
630
+ center: {
631
+ default: string;
632
+ conditions: Record<string | number, string>;
633
+ };
634
+ left: {
635
+ default: string;
636
+ conditions: Record<string | number, string>;
637
+ };
638
+ right: {
639
+ default: string;
640
+ conditions: Record<string | number, string>;
641
+ };
642
+ justify: {
643
+ default: string;
644
+ conditions: Record<string | number, string>;
645
+ };
646
+ };
647
+ staticScale: ("center" | "left" | "right" | "justify")[];
648
+ name: "textAlign";
649
+ };
650
+ };
651
+ } & {
652
+ config: {
653
+ display: {
654
+ dynamic: {
655
+ default: string;
656
+ conditions: Record<string | number, string>;
657
+ };
658
+ dynamicScale: true;
659
+ name: "display";
660
+ vars: {
661
+ default: string;
662
+ conditions: Record<string | number, string>;
663
+ };
664
+ };
665
+ color: {
666
+ dynamic: {
667
+ default: string;
668
+ conditions: Record<string | number, string>;
669
+ };
670
+ dynamicScale: true;
671
+ name: "color";
672
+ vars: {
673
+ default: string;
674
+ conditions: Record<string | number, string>;
675
+ };
676
+ };
677
+ backgroundColor: {
678
+ dynamic: {
679
+ default: string;
680
+ conditions: Record<string | number, string>;
681
+ };
682
+ dynamicScale: true;
683
+ name: "backgroundColor";
684
+ vars: {
685
+ default: string;
686
+ conditions: Record<string | number, string>;
687
+ };
688
+ };
689
+ opacity: {
690
+ dynamic: {
691
+ default: string;
692
+ conditions: Record<string | number, string>;
693
+ };
694
+ dynamicScale: true;
695
+ name: "opacity";
696
+ vars: {
697
+ default: string;
698
+ conditions: Record<string | number, string>;
699
+ };
700
+ };
701
+ fontSize: {
702
+ dynamic: {
703
+ default: string;
704
+ conditions: Record<string | number, string>;
705
+ };
706
+ dynamicScale: true;
707
+ name: "fontSize";
708
+ vars: {
709
+ default: string;
710
+ conditions: Record<string | number, string>;
711
+ };
712
+ };
713
+ };
714
+ } & {
715
+ config: {
716
+ bgColor: {
717
+ mappings: "backgroundColor"[];
718
+ };
719
+ };
720
+ }]>;
721
+ export type CommonAtoms = Parameters<typeof commonAtoms>[0];