@rovula/ui 0.0.31 → 0.0.32

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/dist/cjs/bundle.css +920 -20
  2. package/dist/cjs/types/stories/ColorPreview.d.ts +9 -5
  3. package/dist/cjs/types/utils/colors.d.ts +1 -0
  4. package/dist/components/Text/Text.stories.js +5 -1
  5. package/dist/esm/bundle.css +920 -20
  6. package/dist/esm/types/stories/ColorPreview.d.ts +9 -5
  7. package/dist/esm/types/utils/colors.d.ts +1 -0
  8. package/dist/src/theme/global.css +1343 -217
  9. package/dist/stories/ColorGroupPreview.js +282 -472
  10. package/dist/stories/ColorPreview.js +76 -6
  11. package/dist/theme/main-preset.js +8 -0
  12. package/dist/theme/plugins/utilities/typography.js +3 -0
  13. package/dist/theme/presets/colors.js +0 -3
  14. package/dist/utils/colors.js +31 -0
  15. package/package.json +1 -1
  16. package/src/components/Text/Text.stories.tsx +5 -1
  17. package/src/stories/ColorGroupPreview.tsx +394 -486
  18. package/src/stories/ColorPreview.tsx +122 -33
  19. package/src/theme/main-preset.js +8 -0
  20. package/src/theme/plugins/utilities/typography.js +3 -0
  21. package/src/theme/presets/colors.js +0 -3
  22. package/src/utils/colors.ts +33 -0
package/dist/stories/ColorGroupPreview.js CHANGED
@@ -1,475 +1,285 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import ColorPreview from "./ColorPreview";
2
+ import { ColorItems } from "./ColorPreview";
3
3
  export default function ColorGroupPreview() {
4
- const style = getComputedStyle(document.body);
5
- const colorGroups = {
6
- "Main Colors": {
7
- prefix: "--main-color",
8
- variable: [
9
- "--main-color-primary",
10
- "--main-color-secondary",
11
- "--main-color-tertiary",
12
- ],
13
- },
14
- "Text Colors": {
15
- prefix: "--text",
16
- variable: [
17
- "--text-dark",
18
- "--text-medium",
19
- "--text-light",
20
- "--text-grey-dark",
21
- "--text-grey-medium",
22
- "--text-grey-light",
23
- "--text-white",
24
- ],
25
- },
26
- // "State Colors": {
27
- // prefix: "--state-color",
28
- // variable: [
29
- // "--state-color-primary-primary-default",
30
- // "--state-color-primary-primary-hover",
31
- // "--state-color-primary-primary-stroke",
32
- // "--state-color-primary-primary-hover-bg",
33
- // "--state-color-primary-primary-pressed",
34
- // "--state-color-primary-primary-active",
35
- // "--state-color-secondary-secondary-default",
36
- // "--state-color-secondary-secondary-hover",
37
- // "--state-color-secondary-secondary-stroke",
38
- // "--state-color-secondary-secondary-hover-bg",
39
- // "--state-color-secondary-secondary-pressed",
40
- // "--state-color-secondary-secondary-active",
41
- // "--state-color-tertiery-tertiary-default",
42
- // "--state-color-tertiery-tertiary-hover",
43
- // "--state-color-tertiery-tertiary-stroke",
44
- // "--state-color-tertiery-tertiary-hover-bg",
45
- // "--state-color-tertiery-tertiary-pressed",
46
- // "--state-color-tertiery-tertiery-active",
47
- // "--state-color-info-info-default",
48
- // "--state-color-info-info-hover",
49
- // "--state-color-info-info-stroke",
50
- // "--state-color-info-info-hover-bg",
51
- // "--state-color-info-info-pressed",
52
- // "--state-color-info-info-active",
53
- // "--state-color-success-success-default",
54
- // "--state-color-success-success-hover",
55
- // "--state-color-success-success-stroke",
56
- // "--state-color-success-success-hover-bg",
57
- // "--state-color-success-success-pressed",
58
- // "--state-color-success-success-active",
59
- // "--state-color-warning-warning-default",
60
- // "--state-color-warning-warning-hover",
61
- // "--state-color-warning-warning-stroke",
62
- // "--state-color-warning-warning-hover-bg",
63
- // "--state-color-warning-warning-pressed",
64
- // "--state-color-warning-warning-active",
65
- // "--state-color-error-error-default",
66
- // "--state-color-error-error-hover",
67
- // "--state-color-error-error-stroke",
68
- // "--state-color-error-error-hover-bg",
69
- // "--state-color-error-error-pressed",
70
- // "--state-color-error-error-active",
71
- // ],
72
- // },
73
- "Primary Colors": {
74
- prefix: "--primary-ramps-primary",
75
- variable: [
76
- "--primary-ramps-primary-5",
77
- "--primary-ramps-primary-10",
78
- "--primary-ramps-primary-20",
79
- "--primary-ramps-primary-30",
80
- "--primary-ramps-primary-40",
81
- "--primary-ramps-primary-50",
82
- "--primary-ramps-primary-60",
83
- "--primary-ramps-primary-70",
84
- "--primary-ramps-primary-80",
85
- "--primary-ramps-primary-90",
86
- "--primary-ramps-primary-100",
87
- "--primary-ramps-primary-110",
88
- "--primary-ramps-primary-120",
89
- "--primary-ramps-primary-130",
90
- "--primary-ramps-primary-140",
91
- "--primary-ramps-primary-150",
92
- ],
93
- },
94
- "Primary Action State": {
95
- prefix: "--state-color",
96
- variable: [
97
- "--state-color-primary-primary-default",
98
- "--state-color-primary-primary-hover",
99
- "--state-color-primary-primary-stroke",
100
- "--state-color-primary-primary-hover-bg",
101
- "--state-color-primary-primary-pressed",
102
- "--state-color-primary-primary-active",
103
- ],
104
- },
105
- "Secondary Colors": {
106
- prefix: "--secondary-ramps-secondary",
107
- variable: [
108
- "--secondary-ramps-secondary-5",
109
- "--secondary-ramps-secondary-10",
110
- "--secondary-ramps-secondary-20",
111
- "--secondary-ramps-secondary-30",
112
- "--secondary-ramps-secondary-40",
113
- "--secondary-ramps-secondary-50",
114
- "--secondary-ramps-secondary-60",
115
- "--secondary-ramps-secondary-70",
116
- "--secondary-ramps-secondary-80",
117
- "--secondary-ramps-secondary-90",
118
- "--secondary-ramps-secondary-100",
119
- "--secondary-ramps-secondary-110",
120
- "--secondary-ramps-secondary-120",
121
- "--secondary-ramps-secondary-130",
122
- "--secondary-ramps-secondary-140",
123
- "--secondary-ramps-secondary-150",
124
- ],
125
- },
126
- "Secondary Action State": {
127
- prefix: "--state-color",
128
- variable: [
129
- "--state-color-secondary-secondary-default",
130
- "--state-color-secondary-secondary-hover",
131
- "--state-color-secondary-secondary-stroke",
132
- "--state-color-secondary-secondary-hover-bg",
133
- "--state-color-secondary-secondary-pressed",
134
- "--state-color-secondary-secondary-active",
135
- ],
136
- },
137
- "Tertiary Colors": {
138
- prefix: "--tertiary-ramps-tertiary",
139
- variable: [
140
- "--tertiary-ramps-tertiary-5",
141
- "--tertiary-ramps-tertiary-10",
142
- "--tertiary-ramps-tertiary-20",
143
- "--tertiary-ramps-tertiary-30",
144
- "--tertiary-ramps-tertiary-40",
145
- "--tertiary-ramps-tertiary-50",
146
- "--tertiary-ramps-tertiary-60",
147
- "--tertiary-ramps-tertiary-70",
148
- "--tertiary-ramps-tertiary-80",
149
- "--tertiary-ramps-tertiary-90",
150
- "--tertiary-ramps-tertiary-100",
151
- "--tertiary-ramps-tertiary-110",
152
- "--tertiary-ramps-tertiary-120",
153
- "--tertiary-ramps-tertiary-130",
154
- "--tertiary-ramps-tertiary-140",
155
- "--tertiary-ramps-tertiary-150",
156
- ],
157
- },
158
- "Tertiary Action State": {
159
- prefix: "--state-color",
160
- variable: [
161
- "--state-color-tertiery-tertiary-default",
162
- "--state-color-tertiery-tertiary-hover",
163
- "--state-color-tertiery-tertiary-stroke",
164
- "--state-color-tertiery-tertiary-hover-bg",
165
- "--state-color-tertiery-tertiary-pressed",
166
- "--state-color-tertiery-tertiery-active",
167
- ],
168
- },
169
- "Grey Colors": {
170
- prefix: "--grey-grey",
171
- variable: [
172
- "--grey-grey-5",
173
- "--grey-grey-10",
174
- "--grey-grey-20",
175
- "--grey-grey-30",
176
- "--grey-grey-40",
177
- "--grey-grey-50",
178
- "--grey-grey-60",
179
- "--grey-grey-70",
180
- "--grey-grey-80",
181
- "--grey-grey-90",
182
- "--grey-grey-100",
183
- "--grey-grey-110",
184
- "--grey-grey-120",
185
- "--grey-grey-130",
186
- "--grey-grey-140",
187
- "--grey-grey-150",
188
- ],
189
- },
190
- "Grey 2 Colors": {
191
- prefix: "--grey2-grey2",
192
- variable: [
193
- "--grey2-grey2-50",
194
- "--grey2-grey2-100",
195
- "--grey2-grey2-200",
196
- "--grey2-grey2-300",
197
- "--grey2-grey2-400",
198
- "--grey2-grey2-500",
199
- "--grey2-grey2-600",
200
- "--grey2-grey2-700",
201
- "--grey2-grey2-800",
202
- "--grey2-grey2-900",
203
- "--grey2-grey2-950",
204
- ],
205
- },
206
- "Info Colors": {
207
- prefix: "--info-info",
208
- variable: [
209
- "--info-info-50",
210
- "--info-info-100",
211
- "--info-info-200",
212
- "--info-info-300",
213
- "--info-info-400",
214
- "--info-info-500",
215
- "--info-info-600",
216
- "--info-info-700",
217
- "--info-info-800",
218
- "--info-info-900",
219
- "--info-info-950",
220
- ],
221
- },
222
- "Info Action State": {
223
- prefix: "--state-color",
224
- variable: [
225
- "--state-color-info-info-default",
226
- "--state-color-info-info-hover",
227
- "--state-color-info-info-stroke",
228
- "--state-color-info-info-hover-bg",
229
- "--state-color-info-info-pressed",
230
- "--state-color-info-info-active",
231
- ],
232
- },
233
- "Success Colors": {
234
- prefix: "--success-success",
235
- variable: [
236
- "--success-success-50",
237
- "--success-success-100",
238
- "--success-success-200",
239
- "--success-success-300",
240
- "--success-success-400",
241
- "--success-success-500",
242
- "--success-success-600",
243
- "--success-success-700",
244
- "--success-success-800",
245
- "--success-success-900",
246
- "--success-success-950",
247
- ],
248
- },
249
- "Success Action State": {
250
- prefix: "--state-color",
251
- variable: [
252
- "--state-color-success-success-default",
253
- "--state-color-success-success-hover",
254
- "--state-color-success-success-stroke",
255
- "--state-color-success-success-hover-bg",
256
- "--state-color-success-success-pressed",
257
- "--state-color-success-success-active",
258
- ],
259
- },
260
- "Warning Colors": {
261
- prefix: "--warning-warning",
262
- variable: [
263
- "--warning-warning-50",
264
- "--warning-warning-100",
265
- "--warning-warning-200",
266
- "--warning-warning-300",
267
- "--warning-warning-400",
268
- "--warning-warning-500",
269
- "--warning-warning-600",
270
- "--warning-warning-700",
271
- "--warning-warning-800",
272
- "--warning-warning-900",
273
- "--warning-warning-950",
274
- ],
275
- },
276
- "Warning Action State": {
277
- prefix: "--state-color",
278
- variable: [
279
- "--state-color-warning-warning-default",
280
- "--state-color-warning-warning-hover",
281
- "--state-color-warning-warning-stroke",
282
- "--state-color-warning-warning-hover-bg",
283
- "--state-color-warning-warning-pressed",
284
- "--state-color-warning-warning-active",
285
- ],
286
- },
287
- "Error Colors": {
288
- prefix: "--error-error",
289
- variable: [
290
- "--error-error-50",
291
- "--error-error-100",
292
- "--error-error-200",
293
- "--error-error-300",
294
- "--error-error-400",
295
- "--error-error-500",
296
- "--error-error-600",
297
- "--error-error-700",
298
- "--error-error-800",
299
- "--error-error-900",
300
- "--error-error-950",
301
- ],
302
- },
303
- "Error Action State": {
304
- prefix: "--state-color",
305
- variable: [
306
- "--state-color-error-error-default",
307
- "--state-color-error-error-hover",
308
- "--state-color-error-error-stroke",
309
- "--state-color-error-error-hover-bg",
310
- "--state-color-error-error-pressed",
311
- "--state-color-error-error-active",
312
- ],
313
- },
314
- "Main Transparency Primary": {
315
- prefix: "--main-transparency",
316
- variable: [
317
- "--main-transparency-primary-8",
318
- "--main-transparency-primary-12",
319
- "--main-transparency-primary-16",
320
- "--main-transparency-primary-24",
321
- "--main-transparency-primary-32",
322
- "--main-transparency-primary-48",
323
- ],
324
- },
325
- "Main Transparency Secondary": {
326
- prefix: "--main-transparency",
327
- variable: [
328
- "--main-transparency-secondary-8",
329
- "--main-transparency-secondary-12",
330
- "--main-transparency-secondary-16",
331
- "--main-transparency-secondary-24",
332
- "--main-transparency-secondary-32",
333
- "--main-transparency-secondary-48",
334
- ],
335
- },
336
- "Main Transparency Tertiary": {
337
- prefix: "--main-transparency",
338
- variable: [
339
- "--main-transparency-tertiary-8",
340
- "--main-transparency-tertiary-12",
341
- "--main-transparency-tertiary-16",
342
- "--main-transparency-tertiary-24",
343
- "--main-transparency-tertiary-32",
344
- "--main-transparency-tertiary-48",
345
- ],
346
- },
347
- "Other Transparency Info": {
348
- prefix: "--other-transparency",
349
- variable: [
350
- "--other-transparency-info-8",
351
- "--other-transparency-info-12",
352
- "--other-transparency-info-16",
353
- "--other-transparency-info-24",
354
- "--other-transparency-info-32",
355
- "--other-transparency-info-48",
356
- ],
357
- },
358
- "Other Transparency Success": {
359
- prefix: "--other-transparency",
360
- variable: [
361
- "--other-transparency-success-8",
362
- "--other-transparency-success-12",
363
- "--other-transparency-success-16",
364
- "--other-transparency-success-24",
365
- "--other-transparency-success-32",
366
- "--other-transparency-success-48",
367
- ],
368
- },
369
- "Other Transparency Warning": {
370
- prefix: "--other-transparency",
371
- variable: [
372
- "--other-transparency-warning-8",
373
- "--other-transparency-warning-12",
374
- "--other-transparency-warning-16",
375
- "--other-transparency-warning-24",
376
- "--other-transparency-warning-32",
377
- "--other-transparency-warning-48",
378
- ],
379
- },
380
- "Other Transparency Error": {
381
- prefix: "--other-transparency",
382
- variable: [
383
- "--other-transparency-error-8",
384
- "--other-transparency-error-12",
385
- "--other-transparency-error-16",
386
- "--other-transparency-error-24",
387
- "--other-transparency-error-32",
388
- "--other-transparency-error-48",
389
- ],
390
- },
391
- "Other Transparency White": {
392
- prefix: "--other-transparency",
393
- variable: [
394
- "--other-transparency-white-8",
395
- "--other-transparency-white-12",
396
- "--other-transparency-white-16",
397
- "--other-transparency-white-24",
398
- "--other-transparency-white-32",
399
- "--other-transparency-white-48",
400
- ],
401
- },
402
- "Other Transparency Grey": {
403
- prefix: "--other-transparency",
404
- variable: [
405
- "--other-transparency-grey-8",
406
- "--other-transparency-grey-12",
407
- "--other-transparency-grey-16",
408
- "--other-transparency-grey-24",
409
- "--other-transparency-grey-32",
410
- "--other-transparency-grey-48",
411
- ],
412
- },
413
- "Other Transparency Grey 2": {
414
- prefix: "--other-transparency",
415
- variable: [
416
- "--other-transparency-grey2-8",
417
- "--other-transparency-grey2-12",
418
- "--other-transparency-grey2-16",
419
- "--other-transparency-grey2-24",
420
- "--other-transparency-grey2-32",
421
- "--other-transparency-grey2-48",
422
- ],
423
- },
424
- "Other Transparency Black": {
425
- prefix: "--other-transparency",
426
- variable: [
427
- "--other-transparency-black-8",
428
- "--other-transparency-black-12",
429
- "--other-transparency-black-16",
430
- "--other-transparency-black-24",
431
- "--other-transparency-black-32",
432
- "--other-transparency-black-48",
433
- ],
434
- },
435
- Other: {
436
- prefix: "--other",
437
- variable: [
438
- "--other-bg",
439
- "--other-bg2",
440
- "--other-popup",
441
- "--other-popup-hightlight",
442
- "--other-popup-curtain",
443
- ],
444
- },
445
- Disabled: {
446
- prefix: "--state-color-disable",
447
- variable: [
448
- "--state-color-disable-disable-solid",
449
- "--state-color-disable-disable-outline",
450
- ],
451
- },
452
- "Input Colors": {
453
- prefix: "--input-color",
454
- variable: [
455
- "--input-color-default-text",
456
- "--input-color-default-stroke",
457
- "--input-color-filled-text",
458
- "--input-color-active-stroke",
459
- "--input-color-disable-text",
460
- "--input-color-disable-stroke",
461
- "--input-color-disable-bg",
462
- "--input-color-label-bg",
463
- "--input-color-error",
464
- ],
465
- },
466
- Common: {
467
- prefix: "--common",
468
- variable: ["--common-white", "--common-black"],
469
- },
470
- };
471
- return (_jsx("div", { className: "flex flex-col gap-20", children: Object.entries(colorGroups).map(([groupName, colorVariables]) => (_jsxs("div", { className: "flex flex-col", children: [_jsx("h3", { className: "text-black m-0", children: groupName }), _jsx("div", { className: "flex flex-row flex-wrap gap-3", children: colorVariables.variable.map((colorVariable) => {
472
- var _a;
473
- return (_jsx(ColorPreview, { colorName: (_a = colorVariable.split("-").reverse()) === null || _a === void 0 ? void 0 : _a[0], colorCode: style.getPropertyValue(colorVariable).trim(), isSmall: colorVariables.variable.length > 7 }, colorVariable));
474
- }) })] }, groupName))) }));
4
+ return (_jsxs("div", { className: "flex size-full flex-col gap-10", children: [_jsx(ColorItems, { title: "Main Color", col: 2, colors: [
5
+ "bg-primary",
6
+ "bg-primary-foreground",
7
+ "bg-secondary",
8
+ "bg-secondary-foreground",
9
+ "bg-tertinary",
10
+ "bg-tertinary-foreground",
11
+ "bg-grey",
12
+ "bg-grey-foreground",
13
+ "bg-grey2",
14
+ "bg-grey2-foreground",
15
+ "bg-info",
16
+ "bg-info-foreground",
17
+ "bg-sucess",
18
+ "bg-sucess-foreground",
19
+ "bg-warning",
20
+ "bg-warning-foreground",
21
+ "bg-error",
22
+ "bg-error-foreground",
23
+ ] }), _jsx(ColorItems, { title: "Text Color", colors: [
24
+ "bg-text-black",
25
+ "bg-text-dark",
26
+ "bg-text-medium",
27
+ "bg-text-light",
28
+ "bg-text-grey-dark",
29
+ "bg-text-grey-medium",
30
+ "bg-text-grey-light",
31
+ "bg-text-white",
32
+ ] }), _jsx(ColorItems, { title: "State Color", subTitle: "Primary", colors: [
33
+ "bg-primary-default",
34
+ "bg-primary-hover",
35
+ "bg-primary-stroke",
36
+ "bg-primary-hover-bg",
37
+ "bg-primary-pressed",
38
+ "bg-primary-text-solid",
39
+ "bg-primary-text-outline",
40
+ "bg-primary-text-pressed",
41
+ ] }), _jsx(ColorItems, { subTitle: "Disabled", colors: ["bg-state-disable-solid", "bg-state-disable-outline"] }), _jsx(ColorItems, { subTitle: "Secondary", colors: [
42
+ "bg-secondary-default",
43
+ "bg-secondary-hover",
44
+ "bg-secondary-stroke",
45
+ "bg-secondary-hover-bg",
46
+ "bg-secondary-pressed",
47
+ "bg-secondary-text-solid",
48
+ "bg-secondary-text-outline",
49
+ "bg-secondary-text-pressed",
50
+ ] }), _jsx(ColorItems, { subTitle: "Tertiary", colors: [
51
+ "bg-tertiary-default",
52
+ "bg-tertiary-hover",
53
+ "bg-tertiary-stroke",
54
+ "bg-tertiary-hover-bg",
55
+ "bg-tertiary-pressed",
56
+ "bg-tertiary-text-solid",
57
+ "bg-tertiary-text-outline",
58
+ "bg-tertiary-text-pressed",
59
+ ] }), _jsx(ColorItems, { title: "Color Ramps Primary", colors: [
60
+ "bg-primary-5",
61
+ "bg-primary-10",
62
+ "bg-primary-20",
63
+ "bg-primary-30",
64
+ "bg-primary-40",
65
+ "bg-primary-50",
66
+ "bg-primary-60",
67
+ "bg-primary-70",
68
+ "bg-primary-80",
69
+ "bg-primary-90",
70
+ "bg-primary-100",
71
+ "bg-primary-110",
72
+ "bg-primary-120",
73
+ "bg-primary-130",
74
+ "bg-primary-140",
75
+ "bg-primary-150",
76
+ ] }), _jsx(ColorItems, { title: "Color Ramps Secondary", colors: [
77
+ "bg-secondary-5",
78
+ "bg-secondary-10",
79
+ "bg-secondary-20",
80
+ "bg-secondary-30",
81
+ "bg-secondary-40",
82
+ "bg-secondary-50",
83
+ "bg-secondary-60",
84
+ "bg-secondary-70",
85
+ "bg-secondary-80",
86
+ "bg-secondary-90",
87
+ "bg-secondary-100",
88
+ "bg-secondary-110",
89
+ "bg-secondary-120",
90
+ "bg-secondary-130",
91
+ "bg-secondary-140",
92
+ "bg-secondary-150",
93
+ ] }), _jsx(ColorItems, { title: "Color Ramps Tertiary", colors: [
94
+ "bg-tertiary-5",
95
+ "bg-tertiary-10",
96
+ "bg-tertiary-20",
97
+ "bg-tertiary-30",
98
+ "bg-tertiary-40",
99
+ "bg-tertiary-50",
100
+ "bg-tertiary-60",
101
+ "bg-tertiary-70",
102
+ "bg-tertiary-80",
103
+ "bg-tertiary-90",
104
+ "bg-tertiary-100",
105
+ "bg-tertiary-110",
106
+ "bg-tertiary-120",
107
+ "bg-tertiary-130",
108
+ "bg-tertiary-140",
109
+ "bg-tertiary-150",
110
+ ] }), _jsx(ColorItems, { title: "Grey", colors: [
111
+ "bg-grey-5",
112
+ "bg-grey-10",
113
+ "bg-grey-20",
114
+ "bg-grey-30",
115
+ "bg-grey-40",
116
+ "bg-grey-50",
117
+ "bg-grey-60",
118
+ "bg-grey-70",
119
+ "bg-grey-80",
120
+ "bg-grey-90",
121
+ "bg-grey-100",
122
+ "bg-grey-110",
123
+ "bg-grey-120",
124
+ "bg-grey-130",
125
+ "bg-grey-140",
126
+ "bg-grey-150",
127
+ ] }), _jsx(ColorItems, { title: "Grey2", col: 5, colors: [
128
+ "bg-grey2-50",
129
+ "bg-grey2-100",
130
+ "bg-grey2-200",
131
+ "bg-grey2-300",
132
+ "bg-grey2-400",
133
+ "bg-grey2-500",
134
+ "bg-grey2-600",
135
+ "bg-grey2-700",
136
+ "bg-grey2-800",
137
+ "bg-grey2-900",
138
+ ] }), _jsx(ColorItems, { title: "error", col: 5, colors: [
139
+ "bg-info-50",
140
+ "bg-info-100",
141
+ "bg-info-200",
142
+ "bg-info-300",
143
+ "bg-info-400",
144
+ "bg-info-500",
145
+ "bg-info-600",
146
+ "bg-info-700",
147
+ "bg-info-800",
148
+ "bg-info-900",
149
+ ] }), _jsx(ColorItems, { title: "Success", col: 5, colors: [
150
+ "bg-sucess-50",
151
+ "bg-sucess-100",
152
+ "bg-sucess-200",
153
+ "bg-sucess-300",
154
+ "bg-sucess-400",
155
+ "bg-sucess-500",
156
+ "bg-sucess-600",
157
+ "bg-sucess-700",
158
+ "bg-sucess-800",
159
+ "bg-sucess-900",
160
+ ] }), _jsx(ColorItems, { title: "Warning", col: 5, colors: [
161
+ "bg-warning-50",
162
+ "bg-warning-100",
163
+ "bg-warning-200",
164
+ "bg-warning-300",
165
+ "bg-warning-400",
166
+ "bg-warning-500",
167
+ "bg-warning-600",
168
+ "bg-warning-700",
169
+ "bg-warning-800",
170
+ "bg-warning-900",
171
+ ] }), _jsx(ColorItems, { title: "Error", col: 5, colors: [
172
+ "bg-error-50",
173
+ "bg-error-100",
174
+ "bg-error-200",
175
+ "bg-error-300",
176
+ "bg-error-400",
177
+ "bg-error-500",
178
+ "bg-error-600",
179
+ "bg-error-700",
180
+ "bg-error-800",
181
+ "bg-error-900",
182
+ ] }), _jsx(ColorItems, { title: "Main Transparency", subTitle: "Primary", col: 6, colors: [
183
+ "bg-primary-transparent-8",
184
+ "bg-primary-transparent-12",
185
+ "bg-primary-transparent-16",
186
+ "bg-primary-transparent-24",
187
+ "bg-primary-transparent-32",
188
+ "bg-primary-transparent-48",
189
+ //
190
+ "bg-secondary-transparent-8",
191
+ "bg-secondary-transparent-12",
192
+ "bg-secondary-transparent-16",
193
+ "bg-secondary-transparent-24",
194
+ "bg-secondary-transparent-32",
195
+ "bg-secondary-transparent-48",
196
+ //
197
+ "bg-tertiary-transparent-8",
198
+ "bg-tertiary-transparent-12",
199
+ "bg-tertiary-transparent-16",
200
+ "bg-tertiary-transparent-24",
201
+ "bg-tertiary-transparent-32",
202
+ "bg-tertiary-transparent-48",
203
+ ] }), _jsx(ColorItems, { title: "Other Transparency", col: 6, colors: [
204
+ "bg-info-transparent-8",
205
+ "bg-info-transparent-12",
206
+ "bg-info-transparent-16",
207
+ "bg-info-transparent-24",
208
+ "bg-info-transparent-32",
209
+ "bg-info-transparent-48",
210
+ "bg-success-transparent-8",
211
+ "bg-success-transparent-12",
212
+ "bg-success-transparent-16",
213
+ "bg-success-transparent-24",
214
+ "bg-success-transparent-32",
215
+ "bg-success-transparent-48",
216
+ "bg-warning-transparent-8",
217
+ "bg-warning-transparent-12",
218
+ "bg-warning-transparent-16",
219
+ "bg-warning-transparent-24",
220
+ "bg-warning-transparent-32",
221
+ "bg-warning-transparent-48",
222
+ "bg-error-transparent-8",
223
+ "bg-error-transparent-12",
224
+ "bg-error-transparent-16",
225
+ "bg-error-transparent-24",
226
+ "bg-error-transparent-32",
227
+ "bg-error-transparent-48",
228
+ "bg-grey-transparent-8",
229
+ "bg-grey-transparent-12",
230
+ "bg-grey-transparent-16",
231
+ "bg-grey-transparent-24",
232
+ "bg-grey-transparent-32",
233
+ "bg-grey-transparent-48",
234
+ "bg-grey2-transparent-8",
235
+ "bg-grey2-transparent-12",
236
+ "bg-grey2-transparent-16",
237
+ "bg-grey2-transparent-24",
238
+ "bg-grey2-transparent-32",
239
+ "bg-grey2-transparent-48",
240
+ "bg-white-transparent-8",
241
+ "bg-white-transparent-12",
242
+ "bg-white-transparent-16",
243
+ "bg-white-transparent-24",
244
+ "bg-white-transparent-32",
245
+ "bg-white-transparent-48",
246
+ "bg-black-transparent-8",
247
+ "bg-black-transparent-12",
248
+ "bg-black-transparent-16",
249
+ "bg-black-transparent-24",
250
+ "bg-black-transparent-32",
251
+ "bg-black-transparent-48",
252
+ ] }), _jsx(ColorItems, { title: "Base color", colors: [
253
+ "bg-base-bg1",
254
+ "bg-base-bg2",
255
+ "bg-base-bg3",
256
+ "bg-base-wrokspace-stroke",
257
+ "bg-base-guildline-stroke",
258
+ "bg-base-popup",
259
+ "bg-base-popup-hightlight",
260
+ "bg-base-popup-curtain",
261
+ ] }), _jsx(ColorItems, { title: "Input color", col: 3, colors: [
262
+ "bg-input-default-text",
263
+ "bg-input-default-stroke",
264
+ "bg-input-filled-text",
265
+ "bg-input-active-stroke",
266
+ "bg-input-disable-text",
267
+ "bg-input-disable-stroke",
268
+ "bg-input-disable-bg",
269
+ "bg-input-label-bg",
270
+ "bg-input-error",
271
+ ] }), _jsx(ColorItems, { title: "Function Button", col: 4, colors: [
272
+ "bg-function-default-solid",
273
+ "bg-function-default-hover",
274
+ "bg-function-default-hover-bg",
275
+ "bg-function-default-hover-bg",
276
+ "bg-function-default-stroke",
277
+ "bg-function-default-icon",
278
+ "bg-function-default-outline",
279
+ "bg-function-active-solid",
280
+ "bg-function-active-hover",
281
+ "bg-function-active-hover-bg",
282
+ "bg-function-active-stroke",
283
+ "bg-function-active-icon",
284
+ ] }), _jsx(ColorItems, { title: "Common color", colors: ["bg-common-white", "bg-common-black"] }), _jsx(ColorItems, { title: "Surface color", colors: ["bg-surface", "bg-foreground"] }), _jsx(ColorItems, { title: "Background / foreground color", colors: ["bg-background", "bg-foreground"] })] }));
475
285
  }