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