@rovula/ui 0.0.31 → 0.0.33

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 (28) hide show
  1. package/dist/cjs/bundle.css +1020 -16
  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 +1020 -16
  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 +1410 -153
  9. package/dist/stories/ColorGroupPreview.js +280 -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 +1 -3
  14. package/dist/theme/tokens/color.css +2 -1
  15. package/dist/theme/tokens/transparent.css +2 -2
  16. package/dist/theme/utils.js +12 -1
  17. package/dist/utils/colors.js +31 -0
  18. package/package.json +1 -1
  19. package/src/components/Text/Text.stories.tsx +5 -1
  20. package/src/stories/ColorGroupPreview.tsx +392 -486
  21. package/src/stories/ColorPreview.tsx +122 -33
  22. package/src/theme/main-preset.js +8 -0
  23. package/src/theme/plugins/utilities/typography.js +3 -0
  24. package/src/theme/presets/colors.js +1 -3
  25. package/src/theme/tokens/color.css +2 -1
  26. package/src/theme/tokens/transparent.css +2 -2
  27. package/src/theme/utils.js +12 -1
  28. package/src/utils/colors.ts +33 -0
package/src/stories/ColorGroupPreview.tsx CHANGED
@@ -1,494 +1,400 @@
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-tertiary",
16
+ "bg-tertiary-foreground",
17
+ "bg-info",
18
+ "bg-info-foreground",
19
+ "bg-success",
20
+ "bg-success-foreground",
21
+ "bg-warning",
22
+ "bg-warning-foreground",
23
+ "bg-error",
24
+ "bg-error-foreground",
25
+ ]}
26
+ />
27
+ <ColorItems
28
+ title="Text Color"
29
+ colors={[
30
+ "bg-text-black",
31
+ "bg-text-dark",
32
+ "bg-text-medium",
33
+ "bg-text-light",
34
+ "bg-text-grey-dark",
35
+ "bg-text-grey-medium",
36
+ "bg-text-grey-light",
37
+ "bg-text-white",
38
+ ]}
39
+ />
40
+ <ColorItems
41
+ title="State Color"
42
+ subTitle="Primary"
43
+ colors={[
44
+ "bg-primary-default",
45
+ "bg-primary-hover",
46
+ "bg-primary-stroke",
47
+ "bg-primary-hover-bg",
48
+ "bg-primary-pressed",
49
+ "bg-primary-text-solid",
50
+ "bg-primary-text-outline",
51
+ "bg-primary-text-pressed",
52
+ ]}
53
+ />
54
+ <ColorItems
55
+ subTitle="Disabled"
56
+ colors={["bg-state-disable-solid", "bg-state-disable-outline"]}
57
+ />
58
+ <ColorItems
59
+ subTitle="Secondary"
60
+ colors={[
61
+ "bg-secondary-default",
62
+ "bg-secondary-hover",
63
+ "bg-secondary-stroke",
64
+ "bg-secondary-hover-bg",
65
+ "bg-secondary-pressed",
66
+ "bg-secondary-text-solid",
67
+ "bg-secondary-text-outline",
68
+ "bg-secondary-text-pressed",
69
+ ]}
70
+ />
71
+ <ColorItems
72
+ subTitle="Tertiary"
73
+ colors={[
74
+ "bg-tertiary-default",
75
+ "bg-tertiary-hover",
76
+ "bg-tertiary-stroke",
77
+ "bg-tertiary-hover-bg",
78
+ "bg-tertiary-pressed",
79
+ "bg-tertiary-text-solid",
80
+ "bg-tertiary-text-outline",
81
+ "bg-tertiary-text-pressed",
82
+ ]}
83
+ />
6
84
 
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
- },
85
+ <ColorItems
86
+ title="Color Ramps Primary"
87
+ colors={[
88
+ "bg-primary-5",
89
+ "bg-primary-10",
90
+ "bg-primary-20",
91
+ "bg-primary-30",
92
+ "bg-primary-40",
93
+ "bg-primary-50",
94
+ "bg-primary-60",
95
+ "bg-primary-70",
96
+ "bg-primary-80",
97
+ "bg-primary-90",
98
+ "bg-primary-100",
99
+ "bg-primary-110",
100
+ "bg-primary-120",
101
+ "bg-primary-130",
102
+ "bg-primary-140",
103
+ "bg-primary-150",
104
+ ]}
105
+ />
106
+ <ColorItems
107
+ title="Color Ramps Secondary"
108
+ colors={[
109
+ "bg-secondary-5",
110
+ "bg-secondary-10",
111
+ "bg-secondary-20",
112
+ "bg-secondary-30",
113
+ "bg-secondary-40",
114
+ "bg-secondary-50",
115
+ "bg-secondary-60",
116
+ "bg-secondary-70",
117
+ "bg-secondary-80",
118
+ "bg-secondary-90",
119
+ "bg-secondary-100",
120
+ "bg-secondary-110",
121
+ "bg-secondary-120",
122
+ "bg-secondary-130",
123
+ "bg-secondary-140",
124
+ "bg-secondary-150",
125
+ ]}
126
+ />
127
+ <ColorItems
128
+ title="Color Ramps Tertiary"
129
+ colors={[
130
+ "bg-tertiary-5",
131
+ "bg-tertiary-10",
132
+ "bg-tertiary-20",
133
+ "bg-tertiary-30",
134
+ "bg-tertiary-40",
135
+ "bg-tertiary-50",
136
+ "bg-tertiary-60",
137
+ "bg-tertiary-70",
138
+ "bg-tertiary-80",
139
+ "bg-tertiary-90",
140
+ "bg-tertiary-100",
141
+ "bg-tertiary-110",
142
+ "bg-tertiary-120",
143
+ "bg-tertiary-130",
144
+ "bg-tertiary-140",
145
+ "bg-tertiary-150",
146
+ ]}
147
+ />
148
+ <ColorItems
149
+ title="Grey"
150
+ colors={[
151
+ "bg-grey-5",
152
+ "bg-grey-10",
153
+ "bg-grey-20",
154
+ "bg-grey-30",
155
+ "bg-grey-40",
156
+ "bg-grey-50",
157
+ "bg-grey-60",
158
+ "bg-grey-70",
159
+ "bg-grey-80",
160
+ "bg-grey-90",
161
+ "bg-grey-100",
162
+ "bg-grey-110",
163
+ "bg-grey-120",
164
+ "bg-grey-130",
165
+ "bg-grey-140",
166
+ "bg-grey-150",
167
+ ]}
168
+ />
169
+ <ColorItems
170
+ title="Grey2"
171
+ col={5}
172
+ colors={[
173
+ "bg-grey2-50",
174
+ "bg-grey2-100",
175
+ "bg-grey2-200",
176
+ "bg-grey2-300",
177
+ "bg-grey2-400",
178
+ "bg-grey2-500",
179
+ "bg-grey2-600",
180
+ "bg-grey2-700",
181
+ "bg-grey2-800",
182
+ "bg-grey2-900",
183
+ ]}
184
+ />
185
+ <ColorItems
186
+ title="error"
187
+ col={5}
188
+ colors={[
189
+ "bg-info-50",
190
+ "bg-info-100",
191
+ "bg-info-200",
192
+ "bg-info-300",
193
+ "bg-info-400",
194
+ "bg-info-500",
195
+ "bg-info-600",
196
+ "bg-info-700",
197
+ "bg-info-800",
198
+ "bg-info-900",
199
+ ]}
200
+ />
201
+ <ColorItems
202
+ title="Success"
203
+ col={5}
204
+ colors={[
205
+ "bg-success-50",
206
+ "bg-success-100",
207
+ "bg-success-200",
208
+ "bg-success-300",
209
+ "bg-success-400",
210
+ "bg-success-500",
211
+ "bg-success-600",
212
+ "bg-success-700",
213
+ "bg-success-800",
214
+ "bg-success-900",
215
+ ]}
216
+ />
217
+ <ColorItems
218
+ title="Warning"
219
+ col={5}
220
+ colors={[
221
+ "bg-warning-50",
222
+ "bg-warning-100",
223
+ "bg-warning-200",
224
+ "bg-warning-300",
225
+ "bg-warning-400",
226
+ "bg-warning-500",
227
+ "bg-warning-600",
228
+ "bg-warning-700",
229
+ "bg-warning-800",
230
+ "bg-warning-900",
231
+ ]}
232
+ />
233
+ <ColorItems
234
+ title="Error"
235
+ col={5}
236
+ colors={[
237
+ "bg-error-50",
238
+ "bg-error-100",
239
+ "bg-error-200",
240
+ "bg-error-300",
241
+ "bg-error-400",
242
+ "bg-error-500",
243
+ "bg-error-600",
244
+ "bg-error-700",
245
+ "bg-error-800",
246
+ "bg-error-900",
247
+ ]}
248
+ />
249
+ <ColorItems
250
+ title="Main Transparency"
251
+ subTitle="Primary"
252
+ col={6}
253
+ colors={[
254
+ "bg-primary-transparent-8",
255
+ "bg-primary-transparent-12",
256
+ "bg-primary-transparent-16",
257
+ "bg-primary-transparent-24",
258
+ "bg-primary-transparent-32",
259
+ "bg-primary-transparent-48",
260
+ //
16
261
 
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
- };
262
+ "bg-secondary-transparent-8",
263
+ "bg-secondary-transparent-12",
264
+ "bg-secondary-transparent-16",
265
+ "bg-secondary-transparent-24",
266
+ "bg-secondary-transparent-32",
267
+ "bg-secondary-transparent-48",
268
+ //
269
+ "bg-tertiary-transparent-8",
270
+ "bg-tertiary-transparent-12",
271
+ "bg-tertiary-transparent-16",
272
+ "bg-tertiary-transparent-24",
273
+ "bg-tertiary-transparent-32",
274
+ "bg-tertiary-transparent-48",
275
+ ]}
276
+ />
277
+ <ColorItems
278
+ title="Other Transparency"
279
+ col={6}
280
+ colors={[
281
+ "bg-info-transparent-8",
282
+ "bg-info-transparent-12",
283
+ "bg-info-transparent-16",
284
+ "bg-info-transparent-24",
285
+ "bg-info-transparent-32",
286
+ "bg-info-transparent-48",
474
287
 
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
- ))}
288
+ "bg-success-transparent-8",
289
+ "bg-success-transparent-12",
290
+ "bg-success-transparent-16",
291
+ "bg-success-transparent-24",
292
+ "bg-success-transparent-32",
293
+ "bg-success-transparent-48",
294
+
295
+ "bg-warning-transparent-8",
296
+ "bg-warning-transparent-12",
297
+ "bg-warning-transparent-16",
298
+ "bg-warning-transparent-24",
299
+ "bg-warning-transparent-32",
300
+ "bg-warning-transparent-48",
301
+
302
+ "bg-error-transparent-8",
303
+ "bg-error-transparent-12",
304
+ "bg-error-transparent-16",
305
+ "bg-error-transparent-24",
306
+ "bg-error-transparent-32",
307
+ "bg-error-transparent-48",
308
+
309
+ "bg-grey-transparent-8",
310
+ "bg-grey-transparent-12",
311
+ "bg-grey-transparent-16",
312
+ "bg-grey-transparent-24",
313
+ "bg-grey-transparent-32",
314
+ "bg-grey-transparent-48",
315
+
316
+ "bg-grey2-transparent-8",
317
+ "bg-grey2-transparent-12",
318
+ "bg-grey2-transparent-16",
319
+ "bg-grey2-transparent-24",
320
+ "bg-grey2-transparent-32",
321
+ "bg-grey2-transparent-48",
322
+
323
+ "bg-white-transparent-8",
324
+ "bg-white-transparent-12",
325
+ "bg-white-transparent-16",
326
+ "bg-white-transparent-24",
327
+ "bg-white-transparent-32",
328
+ "bg-white-transparent-48",
329
+
330
+ "bg-black-transparent-8",
331
+ "bg-black-transparent-12",
332
+ "bg-black-transparent-16",
333
+ "bg-black-transparent-24",
334
+ "bg-black-transparent-32",
335
+ "bg-black-transparent-48",
336
+ ]}
337
+ />
338
+ <ColorItems
339
+ title="Base color"
340
+ colors={[
341
+ "bg-base-bg",
342
+ "bg-base-bg2",
343
+ "bg-base-bg3",
344
+ "bg-base-stroke",
345
+ "bg-base-workspace-stroke",
346
+ "bg-base-guideline-stroke",
347
+ "bg-base-popup",
348
+ "bg-base-popup-highlight",
349
+ "bg-base-popup-curtain",
350
+ "bg-base-popup-foreground",
351
+ ]}
352
+ />
353
+ <ColorItems
354
+ title="Input color"
355
+ col={3}
356
+ colors={[
357
+ "bg-input-default-text",
358
+ "bg-input-default-stroke",
359
+ "bg-input-filled-text",
360
+ "bg-input-active-stroke",
361
+ "bg-input-disable-text",
362
+ "bg-input-disable-stroke",
363
+ "bg-input-disable-bg",
364
+ "bg-input-label-bg",
365
+ "bg-input-error",
366
+ ]}
367
+ />
368
+ <ColorItems
369
+ title="Function Button"
370
+ col={4}
371
+ colors={[
372
+ "bg-function-default-solid",
373
+ "bg-function-default-hover",
374
+ "bg-function-default-hover-bg",
375
+ "bg-function-default-hover-bg",
376
+ "bg-function-default-stroke",
377
+ "bg-function-default-icon",
378
+ "bg-function-default-outline",
379
+ "bg-function-active-solid",
380
+ "bg-function-active-hover",
381
+ "bg-function-active-hover-bg",
382
+ "bg-function-active-stroke",
383
+ "bg-function-active-icon",
384
+ ]}
385
+ />
386
+ <ColorItems
387
+ title="Common color"
388
+ colors={["bg-common-white", "bg-common-black"]}
389
+ />
390
+ <ColorItems
391
+ title="Surface color"
392
+ colors={["bg-surface", "bg-foreground"]}
393
+ />
394
+ <ColorItems
395
+ title="Background / foreground color"
396
+ colors={["bg-background", "bg-foreground"]}
397
+ />
492
398
  </div>
493
399
  );
494
400
  }