@lumx/core 3.20.1-alpha.45 → 3.20.1-alpha.46

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 (40) hide show
  1. package/js/constants/className/index.d.ts +4 -0
  2. package/js/constants/className/index.js +6 -0
  3. package/js/constants/components/index.d.ts +24 -0
  4. package/js/constants/components/index.js +26 -0
  5. package/js/constants/enums/index.d.ts +200 -0
  6. package/js/constants/enums/index.js +155 -0
  7. package/js/constants/index.d.ts +3 -231
  8. package/js/constants/index.js +4 -188
  9. package/js/utils/{color → _internal/color}/resolveColorWithVariants.d.ts +1 -1
  10. package/js/utils/className/color/index.js +2 -2
  11. package/js/utils/className/visually-hidden/index.js +2 -1
  12. package/js/utils/index.d.ts +0 -1
  13. package/js/utils/index.js +0 -1
  14. package/package.json +1 -1
  15. package/js/constants/design-tokens.d.ts +0 -5421
  16. package/js/constants/design-tokens.js +0 -2325
  17. package/js/custom-colors.d.ts +0 -25
  18. package/js/custom-colors.js +0 -43
  19. package/js/types/Callback.js +0 -1
  20. package/js/types/Direction.js +0 -1
  21. package/js/types/Falsy.js +0 -1
  22. package/js/types/GenericProps.js +0 -1
  23. package/js/types/HasAriaLabelOrLabelledBy.js +0 -1
  24. package/js/types/HasClassName.js +0 -1
  25. package/js/types/HasCloseMode.js +0 -1
  26. package/js/types/HasTheme.js +0 -1
  27. package/js/types/HeadingElement.js +0 -1
  28. package/js/types/KebabCase.js +0 -1
  29. package/js/types/LumxClassName.js +0 -1
  30. package/js/types/Point.js +0 -1
  31. package/js/types/Predicate.js +0 -1
  32. package/js/types/RectSize.js +0 -1
  33. package/js/types/Spacing.js +0 -1
  34. package/js/types/TextElement.js +0 -1
  35. package/js/types/ValueOf.js +0 -1
  36. package/js/utils/color/index.js +0 -1
  37. package/js/utils/color/resolveColorWithVariants.js +0 -9
  38. /package/js/constants/{keycodes.d.ts → keycodes/index.d.ts} +0 -0
  39. /package/js/constants/{keycodes.js → keycodes/index.js} +0 -0
  40. /package/js/utils/{color → _internal/color}/index.d.ts +0 -0
package/js/constants/design-tokens.js DELETED
@@ -1,2325 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Mon, 13 Jan 2025 09:24:38 GMT
4
- */
5
- const DESIGN_TOKENS = {
6
- button: {
7
- height: { value: '36px', $aliasedFrom: 'size.m' },
8
- 'border-radius': { value: 'var(--lumx-border-radius)', $aliasedFrom: 'border-radius' },
9
- 'emphasis-high': {
10
- 'state-default': {
11
- padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
12
- 'border-width': { value: '0' },
13
- 'theme-light': {
14
- 'background-color': {
15
- value: 'var(--lumx-color-primary-N)',
16
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
17
- $aliasedFrom: 'color.primary.N',
18
- },
19
- color: {
20
- value: 'var(--lumx-color-light-N)',
21
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
22
- $aliasedFrom: 'color.light.N',
23
- },
24
- 'border-color': { value: 'transparent' },
25
- },
26
- 'theme-dark': {
27
- 'background-color': {
28
- value: 'var(--lumx-color-light-N)',
29
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
30
- $aliasedFrom: 'color.light.N',
31
- },
32
- color: {
33
- value: 'var(--lumx-color-primary-N)',
34
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
35
- $aliasedFrom: 'color.primary.N',
36
- },
37
- 'border-color': { value: 'transparent' },
38
- },
39
- },
40
- 'state-hover': {
41
- padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
42
- 'border-width': { value: '0' },
43
- 'theme-light': {
44
- 'background-color': {
45
- value: 'var(--lumx-color-primary-D1)',
46
- attributes: { hex: '184ed8', rgb: { r: 24, g: 78, b: 216, a: 1 } },
47
- $aliasedFrom: 'color.primary.D1',
48
- },
49
- color: {
50
- value: 'var(--lumx-color-light-N)',
51
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
52
- $aliasedFrom: 'color.light.N',
53
- },
54
- 'border-color': { value: 'transparent' },
55
- },
56
- 'theme-dark': {
57
- 'background-color': {
58
- value: 'var(--lumx-color-light-L1)',
59
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
60
- $aliasedFrom: 'color.light.L1',
61
- },
62
- color: {
63
- value: 'var(--lumx-color-primary-N)',
64
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
65
- $aliasedFrom: 'color.primary.N',
66
- },
67
- 'border-color': { value: 'transparent' },
68
- },
69
- },
70
- 'state-active': {
71
- padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
72
- 'border-width': { value: '0' },
73
- 'theme-light': {
74
- 'background-color': {
75
- value: 'var(--lumx-color-primary-D2)',
76
- attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
77
- $aliasedFrom: 'color.primary.D2',
78
- },
79
- color: {
80
- value: 'var(--lumx-color-light-N)',
81
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
82
- $aliasedFrom: 'color.light.N',
83
- },
84
- 'border-color': { value: 'transparent' },
85
- },
86
- 'theme-dark': {
87
- 'background-color': {
88
- value: 'var(--lumx-color-light-L2)',
89
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.8 } },
90
- $aliasedFrom: 'color.light.L2',
91
- },
92
- color: {
93
- value: 'var(--lumx-color-primary-N)',
94
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
95
- $aliasedFrom: 'color.primary.N',
96
- },
97
- 'border-color': { value: 'transparent' },
98
- },
99
- },
100
- },
101
- 'emphasis-medium': {
102
- 'state-default': {
103
- padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
104
- 'border-width': { value: '0' },
105
- 'theme-light': {
106
- 'background-color': {
107
- value: 'var(--lumx-color-dark-L5)',
108
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
109
- $aliasedFrom: 'color.dark.L5',
110
- },
111
- color: {
112
- value: 'var(--lumx-color-dark-L1)',
113
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
114
- $aliasedFrom: 'color.dark.L1',
115
- },
116
- 'border-color': { value: 'transparent' },
117
- },
118
- 'theme-dark': {
119
- 'background-color': {
120
- value: 'var(--lumx-color-light-L5)',
121
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
122
- $aliasedFrom: 'color.light.L5',
123
- },
124
- color: {
125
- value: 'var(--lumx-color-light-L1)',
126
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
127
- $aliasedFrom: 'color.light.L1',
128
- },
129
- 'border-color': { value: 'transparent' },
130
- },
131
- },
132
- 'state-hover': {
133
- padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
134
- 'border-width': { value: '0' },
135
- 'theme-light': {
136
- 'background-color': {
137
- value: 'var(--lumx-color-dark-L4)',
138
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
139
- $aliasedFrom: 'color.dark.L4',
140
- },
141
- color: {
142
- value: 'var(--lumx-color-dark-L1)',
143
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
144
- $aliasedFrom: 'color.dark.L1',
145
- },
146
- 'border-color': { value: 'transparent' },
147
- },
148
- 'theme-dark': {
149
- 'background-color': {
150
- value: 'var(--lumx-color-light-L4)',
151
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
152
- $aliasedFrom: 'color.light.L4',
153
- },
154
- color: {
155
- value: 'var(--lumx-color-light-L1)',
156
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
157
- $aliasedFrom: 'color.light.L1',
158
- },
159
- 'border-color': { value: 'transparent' },
160
- },
161
- },
162
- 'state-active': {
163
- padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
164
- 'border-width': { value: '0' },
165
- 'theme-light': {
166
- 'background-color': {
167
- value: 'var(--lumx-color-dark-L3)',
168
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.38 } },
169
- $aliasedFrom: 'color.dark.L3',
170
- },
171
- color: {
172
- value: 'var(--lumx-color-dark-L1)',
173
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
174
- $aliasedFrom: 'color.dark.L1',
175
- },
176
- 'border-color': { value: 'transparent' },
177
- },
178
- 'theme-dark': {
179
- 'background-color': {
180
- value: 'var(--lumx-color-light-L3)',
181
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.6 } },
182
- $aliasedFrom: 'color.light.L3',
183
- },
184
- color: {
185
- value: 'var(--lumx-color-light-L1)',
186
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
187
- $aliasedFrom: 'color.light.L1',
188
- },
189
- 'border-color': { value: 'transparent' },
190
- },
191
- },
192
- },
193
- 'emphasis-low': {
194
- 'state-default': {
195
- padding: {
196
- horizontal: { value: 'var(--lumx-spacing-unit-regular)', $aliasedFrom: 'spacing.unit.regular' },
197
- },
198
- 'border-width': { value: '0' },
199
- 'theme-light': {
200
- 'background-color': { value: 'transparent' },
201
- color: {
202
- value: 'var(--lumx-color-dark-L1)',
203
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
204
- $aliasedFrom: 'color.dark.L1',
205
- },
206
- 'border-color': { value: 'transparent' },
207
- },
208
- 'theme-dark': {
209
- 'background-color': { value: 'transparent' },
210
- color: {
211
- value: 'var(--lumx-color-light-L1)',
212
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
213
- $aliasedFrom: 'color.light.L1',
214
- },
215
- 'border-color': { value: 'transparent' },
216
- },
217
- },
218
- 'state-hover': {
219
- padding: {
220
- horizontal: { value: 'var(--lumx-spacing-unit-regular)', $aliasedFrom: 'spacing.unit.regular' },
221
- },
222
- 'border-width': { value: '0' },
223
- 'theme-light': {
224
- 'background-color': {
225
- value: 'var(--lumx-color-dark-L5)',
226
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
227
- $aliasedFrom: 'color.dark.L5',
228
- },
229
- color: {
230
- value: 'var(--lumx-color-dark-L1)',
231
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
232
- $aliasedFrom: 'color.dark.L1',
233
- },
234
- 'border-color': { value: 'transparent' },
235
- },
236
- 'theme-dark': {
237
- 'background-color': {
238
- value: 'var(--lumx-color-light-L5)',
239
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
240
- $aliasedFrom: 'color.light.L5',
241
- },
242
- color: {
243
- value: 'var(--lumx-color-light-L1)',
244
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
245
- $aliasedFrom: 'color.light.L1',
246
- },
247
- 'border-color': { value: 'transparent' },
248
- },
249
- },
250
- 'state-active': {
251
- padding: {
252
- horizontal: { value: 'var(--lumx-spacing-unit-regular)', $aliasedFrom: 'spacing.unit.regular' },
253
- },
254
- 'border-width': { value: '0' },
255
- 'theme-light': {
256
- 'background-color': {
257
- value: 'var(--lumx-color-dark-L4)',
258
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
259
- $aliasedFrom: 'color.dark.L4',
260
- },
261
- color: {
262
- value: 'var(--lumx-color-dark-L1)',
263
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
264
- $aliasedFrom: 'color.dark.L1',
265
- },
266
- 'border-color': { value: 'transparent' },
267
- },
268
- 'theme-dark': {
269
- 'background-color': {
270
- value: 'var(--lumx-color-light-L4)',
271
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
272
- $aliasedFrom: 'color.light.L4',
273
- },
274
- color: {
275
- value: 'var(--lumx-color-light-L1)',
276
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
277
- $aliasedFrom: 'color.light.L1',
278
- },
279
- 'border-color': { value: 'transparent' },
280
- },
281
- },
282
- },
283
- 'emphasis-selected': {
284
- 'state-default': {
285
- padding: { horizontal: { comment: 'deprecated (use base emphasis padding)', value: '16px' } },
286
- 'border-width': { value: '1px' },
287
- 'theme-light': {
288
- 'background-color': {
289
- value: 'var(--lumx-color-primary-L6)',
290
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.05 } },
291
- $aliasedFrom: 'color.primary.L6',
292
- },
293
- color: {
294
- value: 'var(--lumx-color-primary-D2)',
295
- attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
296
- $aliasedFrom: 'color.primary.D2',
297
- },
298
- 'border-color': {
299
- value: 'var(--lumx-color-primary-N)',
300
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
301
- $aliasedFrom: 'color.primary.N',
302
- },
303
- },
304
- 'theme-dark': {
305
- 'background-color': {
306
- value: 'var(--lumx-color-light-L6)',
307
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.1 } },
308
- $aliasedFrom: 'color.light.L6',
309
- },
310
- color: {
311
- value: 'var(--lumx-color-light-N)',
312
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
313
- $aliasedFrom: 'color.light.N',
314
- },
315
- 'border-color': {
316
- value: 'var(--lumx-color-light-N)',
317
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
318
- $aliasedFrom: 'color.light.N',
319
- },
320
- },
321
- },
322
- 'state-hover': {
323
- padding: { horizontal: { comment: 'deprecated (use base emphasis padding)', value: '16px' } },
324
- 'border-width': { value: '1px' },
325
- 'theme-light': {
326
- 'background-color': {
327
- value: 'var(--lumx-color-primary-L5)',
328
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
329
- $aliasedFrom: 'color.primary.L5',
330
- },
331
- color: {
332
- value: 'var(--lumx-color-primary-D2)',
333
- attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
334
- $aliasedFrom: 'color.primary.D2',
335
- },
336
- 'border-color': {
337
- value: 'var(--lumx-color-primary-N)',
338
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
339
- $aliasedFrom: 'color.primary.N',
340
- },
341
- },
342
- 'theme-dark': {
343
- 'background-color': {
344
- value: 'var(--lumx-color-light-L5)',
345
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
346
- $aliasedFrom: 'color.light.L5',
347
- },
348
- color: {
349
- value: 'var(--lumx-color-light-N)',
350
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
351
- $aliasedFrom: 'color.light.N',
352
- },
353
- 'border-color': {
354
- value: 'var(--lumx-color-light-N)',
355
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
356
- $aliasedFrom: 'color.light.N',
357
- },
358
- },
359
- },
360
- 'state-active': {
361
- padding: { horizontal: { comment: 'deprecated (use base emphasis padding)', value: '16px' } },
362
- 'border-width': { value: '1px' },
363
- 'theme-light': {
364
- 'background-color': {
365
- value: 'var(--lumx-color-primary-L4)',
366
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
367
- $aliasedFrom: 'color.primary.L4',
368
- },
369
- color: {
370
- value: 'var(--lumx-color-primary-D2)',
371
- attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
372
- $aliasedFrom: 'color.primary.D2',
373
- },
374
- 'border-color': {
375
- value: 'var(--lumx-color-primary-N)',
376
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
377
- $aliasedFrom: 'color.primary.N',
378
- },
379
- },
380
- 'theme-dark': {
381
- 'background-color': {
382
- value: 'var(--lumx-color-light-L4)',
383
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
384
- $aliasedFrom: 'color.light.L4',
385
- },
386
- color: {
387
- value: 'var(--lumx-color-light-N)',
388
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
389
- $aliasedFrom: 'color.light.N',
390
- },
391
- 'border-color': {
392
- value: 'var(--lumx-color-light-N)',
393
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
394
- $aliasedFrom: 'color.light.N',
395
- },
396
- },
397
- },
398
- },
399
- },
400
- chip: {
401
- 'emphasis-selected': {
402
- 'state-default': {
403
- 'border-width': { value: '1px' },
404
- 'theme-light': {
405
- 'border-color': {
406
- value: 'var(--lumx-color-primary-N)',
407
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
408
- $aliasedFrom: 'color.primary.N',
409
- },
410
- 'background-color': {
411
- value: 'var(--lumx-color-primary-L6)',
412
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.05 } },
413
- $aliasedFrom: 'color.primary.L6',
414
- },
415
- },
416
- 'theme-dark': {
417
- 'border-color': {
418
- value: 'var(--lumx-color-light-N)',
419
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
420
- $aliasedFrom: 'color.light.N',
421
- },
422
- 'background-color': {
423
- value: 'var(--lumx-color-light-L6)',
424
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.1 } },
425
- $aliasedFrom: 'color.light.L6',
426
- },
427
- },
428
- },
429
- 'state-hover': {
430
- 'border-width': { value: '1px' },
431
- 'theme-light': {
432
- 'border-color': {
433
- value: 'var(--lumx-color-primary-N)',
434
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
435
- $aliasedFrom: 'color.primary.N',
436
- },
437
- 'background-color': {
438
- value: 'var(--lumx-color-primary-L5)',
439
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
440
- $aliasedFrom: 'color.primary.L5',
441
- },
442
- },
443
- 'theme-dark': {
444
- 'border-color': {
445
- value: 'var(--lumx-color-light-N)',
446
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
447
- $aliasedFrom: 'color.light.N',
448
- },
449
- 'background-color': {
450
- value: 'var(--lumx-color-light-L5)',
451
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
452
- $aliasedFrom: 'color.light.L5',
453
- },
454
- },
455
- },
456
- 'state-active': {
457
- 'border-width': { value: '1px' },
458
- 'theme-light': {
459
- 'border-color': {
460
- value: 'var(--lumx-color-primary-N)',
461
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
462
- $aliasedFrom: 'color.primary.N',
463
- },
464
- 'background-color': {
465
- value: 'var(--lumx-color-primary-L4)',
466
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
467
- $aliasedFrom: 'color.primary.L4',
468
- },
469
- },
470
- 'theme-dark': {
471
- 'border-color': {
472
- value: 'var(--lumx-color-light-N)',
473
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
474
- $aliasedFrom: 'color.light.N',
475
- },
476
- 'background-color': {
477
- value: 'var(--lumx-color-light-L4)',
478
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
479
- $aliasedFrom: 'color.light.L4',
480
- },
481
- },
482
- },
483
- },
484
- },
485
- material: {
486
- button: { 'text-transform': { value: 'none' } },
487
- checkbox: { 'wrapper-size': { value: '20px' }, 'control-size': { value: '16px' } },
488
- chip: {
489
- 'size-m': {
490
- height: { value: '36px' },
491
- 'border-radius': { value: '18px' },
492
- 'padding-vertical': { value: '16px' },
493
- },
494
- 'size-s': {
495
- height: { value: '24px' },
496
- 'border-radius': { value: '12px' },
497
- 'padding-vertical': { value: '12px' },
498
- },
499
- },
500
- 'input-helper': {
501
- 'font-size': { value: '12px' },
502
- 'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
503
- 'line-height': { value: '16px' },
504
- },
505
- 'input-label': {
506
- 'font-size': { value: '14px' },
507
- 'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
508
- 'line-height': { value: '20px' },
509
- },
510
- progress: { bounce: { value: 'block' }, rotate: { value: 'none' } },
511
- 'radio-button': {
512
- 'wrapper-size': { value: '20px' },
513
- 'control-size': { value: '16px' },
514
- 'indicator-size': { value: '8px' },
515
- },
516
- switch: {
517
- wrapper: { width: { value: '30px' }, height: { value: '20px' } },
518
- control: { width: { value: '30px' }, height: { value: '16px' } },
519
- indicator: { size: { value: '8px' }, offset: { value: '4px' } },
520
- },
521
- 'text-field': {
522
- padding: { top: { value: '0' }, bottom: { value: '0' } },
523
- header: {
524
- wrapper: { 'margin-bottom': { value: '8px' } },
525
- label: {
526
- 'font-size': { value: '14px' },
527
- 'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
528
- 'line-height': { value: '20px' },
529
- },
530
- },
531
- input: {
532
- content: {
533
- 'font-size': { value: '14px' },
534
- 'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
535
- 'line-height': { value: '20px' },
536
- },
537
- },
538
- },
539
- },
540
- navigation: {
541
- item: {
542
- padding: {
543
- horizontal: { value: 'var(--lumx-spacing-unit-regular)', $aliasedFrom: 'spacing.unit.regular' },
544
- },
545
- 'min-height': { value: '36px', $aliasedFrom: 'size.m' },
546
- 'border-radius': { value: 'var(--lumx-border-radius)', $aliasedFrom: 'border-radius' },
547
- 'emphasis-low': {
548
- 'state-default': {
549
- border: {
550
- top: { width: { value: '0px' } },
551
- right: { width: { value: '0px' } },
552
- bottom: { width: { value: '0px' } },
553
- left: { width: { value: '0px' } },
554
- },
555
- 'theme-light': {
556
- 'background-color': { value: 'transparent' },
557
- 'border-color': {
558
- value: 'var(--lumx-color-dark-L4)',
559
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
560
- $aliasedFrom: 'color.dark.L4',
561
- },
562
- 'icon-color': {
563
- value: 'var(--lumx-color-dark-L1)',
564
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
565
- $aliasedFrom: 'color.dark.L1',
566
- },
567
- 'label-color': {
568
- value: 'var(--lumx-color-dark-N)',
569
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
570
- $aliasedFrom: 'color.dark.N',
571
- },
572
- 'chevron-background-color': { value: 'transparent' },
573
- 'chevron-color': {
574
- value: 'var(--lumx-color-dark-L1)',
575
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
576
- $aliasedFrom: 'color.dark.L1',
577
- },
578
- },
579
- 'theme-dark': {
580
- 'background-color': { value: 'transparent' },
581
- 'border-color': {
582
- value: 'var(--lumx-color-light-L4)',
583
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
584
- $aliasedFrom: 'color.light.L4',
585
- },
586
- 'icon-color': {
587
- value: 'var(--lumx-color-light-L1)',
588
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
589
- $aliasedFrom: 'color.light.L1',
590
- },
591
- 'label-color': {
592
- value: 'var(--lumx-color-light-N)',
593
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
594
- $aliasedFrom: 'color.light.N',
595
- },
596
- 'chevron-background-color': { value: 'transparent' },
597
- 'chevron-color': {
598
- value: 'var(--lumx-color-light-L1)',
599
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
600
- $aliasedFrom: 'color.light.L1',
601
- },
602
- },
603
- },
604
- 'state-hover': {
605
- border: {
606
- top: { width: { value: '0px' } },
607
- right: { width: { value: '0px' } },
608
- bottom: { width: { value: '0px' } },
609
- left: { width: { value: '0px' } },
610
- },
611
- 'theme-light': {
612
- 'background-color': {
613
- value: 'var(--lumx-color-dark-L5)',
614
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
615
- $aliasedFrom: 'color.dark.L5',
616
- },
617
- 'border-color': {
618
- value: 'var(--lumx-color-dark-L4)',
619
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
620
- $aliasedFrom: 'color.dark.L4',
621
- },
622
- 'icon-color': {
623
- value: 'var(--lumx-color-dark-L1)',
624
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
625
- $aliasedFrom: 'color.dark.L1',
626
- },
627
- 'label-color': {
628
- value: 'var(--lumx-color-dark-N)',
629
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
630
- $aliasedFrom: 'color.dark.N',
631
- },
632
- 'chevron-background-color': {
633
- value: 'var(--lumx-color-dark-L5)',
634
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
635
- $aliasedFrom: 'color.dark.L5',
636
- },
637
- 'chevron-color': {
638
- value: 'var(--lumx-color-dark-L1)',
639
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
640
- $aliasedFrom: 'color.dark.L1',
641
- },
642
- },
643
- 'theme-dark': {
644
- 'background-color': {
645
- value: 'var(--lumx-color-light-L5)',
646
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
647
- $aliasedFrom: 'color.light.L5',
648
- },
649
- 'border-color': {
650
- value: 'var(--lumx-color-light-L4)',
651
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
652
- $aliasedFrom: 'color.light.L4',
653
- },
654
- 'icon-color': {
655
- value: 'var(--lumx-color-light-L1)',
656
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
657
- $aliasedFrom: 'color.light.L1',
658
- },
659
- 'label-color': {
660
- value: 'var(--lumx-color-light-N)',
661
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
662
- $aliasedFrom: 'color.light.N',
663
- },
664
- 'chevron-background-color': {
665
- value: 'var(--lumx-color-light-L5)',
666
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
667
- $aliasedFrom: 'color.light.L5',
668
- },
669
- 'chevron-color': {
670
- value: 'var(--lumx-color-light-L1)',
671
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
672
- $aliasedFrom: 'color.light.L1',
673
- },
674
- },
675
- },
676
- 'state-active': {
677
- border: {
678
- top: { width: { value: '0px' } },
679
- right: { width: { value: '0px' } },
680
- bottom: { width: { value: '0px' } },
681
- left: { width: { value: '0px' } },
682
- },
683
- 'theme-light': {
684
- 'background-color': {
685
- value: 'var(--lumx-color-dark-L4)',
686
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
687
- $aliasedFrom: 'color.dark.L4',
688
- },
689
- 'border-color': {
690
- value: 'var(--lumx-color-dark-L4)',
691
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
692
- $aliasedFrom: 'color.dark.L4',
693
- },
694
- 'icon-color': {
695
- value: 'var(--lumx-color-dark-L1)',
696
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
697
- $aliasedFrom: 'color.dark.L1',
698
- },
699
- 'label-color': {
700
- value: 'var(--lumx-color-dark-N)',
701
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
702
- $aliasedFrom: 'color.dark.N',
703
- },
704
- 'chevron-background-color': {
705
- value: 'var(--lumx-color-dark-L4)',
706
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
707
- $aliasedFrom: 'color.dark.L4',
708
- },
709
- 'chevron-color': {
710
- value: 'var(--lumx-color-dark-L1)',
711
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
712
- $aliasedFrom: 'color.dark.L1',
713
- },
714
- },
715
- 'theme-dark': {
716
- 'background-color': {
717
- value: 'var(--lumx-color-light-L4)',
718
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
719
- $aliasedFrom: 'color.light.L4',
720
- },
721
- 'border-color': {
722
- value: 'var(--lumx-color-light-L4)',
723
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
724
- $aliasedFrom: 'color.light.L4',
725
- },
726
- 'icon-color': {
727
- value: 'var(--lumx-color-light-L1)',
728
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
729
- $aliasedFrom: 'color.light.L1',
730
- },
731
- 'label-color': {
732
- value: 'var(--lumx-color-light-N)',
733
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
734
- $aliasedFrom: 'color.light.N',
735
- },
736
- 'chevron-background-color': {
737
- value: 'var(--lumx-color-light-L4)',
738
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
739
- $aliasedFrom: 'color.light.L4',
740
- },
741
- 'chevron-color': {
742
- value: 'var(--lumx-color-light-L1)',
743
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
744
- $aliasedFrom: 'color.light.L1',
745
- },
746
- },
747
- },
748
- },
749
- 'emphasis-selected': {
750
- 'state-default': {
751
- border: {
752
- top: { width: { value: '1px' } },
753
- right: { width: { value: '1px' } },
754
- bottom: { width: { value: '1px' } },
755
- left: { width: { value: '1px' } },
756
- },
757
- 'theme-light': {
758
- 'background-color': {
759
- value: 'var(--lumx-color-primary-L6)',
760
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.05 } },
761
- $aliasedFrom: 'color.primary.L6',
762
- },
763
- 'border-color': {
764
- value: 'var(--lumx-color-primary-N)',
765
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
766
- $aliasedFrom: 'color.primary.N',
767
- },
768
- 'icon-color': {
769
- value: 'var(--lumx-color-primary-D2)',
770
- attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
771
- $aliasedFrom: 'color.primary.D2',
772
- },
773
- 'label-color': {
774
- value: 'var(--lumx-color-primary-D2)',
775
- attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
776
- $aliasedFrom: 'color.primary.D2',
777
- },
778
- 'chevron-background-color': { value: 'transparent' },
779
- 'chevron-color': {
780
- value: 'var(--lumx-color-primary-D2)',
781
- attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
782
- $aliasedFrom: 'color.primary.D2',
783
- },
784
- },
785
- 'theme-dark': {
786
- 'background-color': {
787
- value: 'var(--lumx-color-light-L6)',
788
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.1 } },
789
- $aliasedFrom: 'color.light.L6',
790
- },
791
- 'border-color': {
792
- value: 'var(--lumx-color-light-N)',
793
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
794
- $aliasedFrom: 'color.light.N',
795
- },
796
- 'icon-color': {
797
- value: 'var(--lumx-color-light-N)',
798
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
799
- $aliasedFrom: 'color.light.N',
800
- },
801
- 'label-color': {
802
- value: 'var(--lumx-color-light-N)',
803
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
804
- $aliasedFrom: 'color.light.N',
805
- },
806
- 'chevron-background-color': { value: 'transparent' },
807
- 'chevron-color': {
808
- value: 'var(--lumx-color-light-N)',
809
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
810
- $aliasedFrom: 'color.light.N',
811
- },
812
- },
813
- },
814
- 'state-hover': {
815
- border: {
816
- top: { width: { value: '1px' } },
817
- right: { width: { value: '1px' } },
818
- bottom: { width: { value: '1px' } },
819
- left: { width: { value: '1px' } },
820
- },
821
- 'theme-light': {
822
- 'background-color': {
823
- value: 'var(--lumx-color-primary-L5)',
824
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
825
- $aliasedFrom: 'color.primary.L5',
826
- },
827
- 'border-color': {
828
- value: 'var(--lumx-color-primary-N)',
829
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
830
- $aliasedFrom: 'color.primary.N',
831
- },
832
- 'icon-color': {
833
- value: 'var(--lumx-color-primary-D2)',
834
- attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
835
- $aliasedFrom: 'color.primary.D2',
836
- },
837
- 'label-color': {
838
- value: 'var(--lumx-color-primary-D2)',
839
- attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
840
- $aliasedFrom: 'color.primary.D2',
841
- },
842
- 'chevron-background-color': {
843
- value: 'var(--lumx-color-primary-L5)',
844
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
845
- $aliasedFrom: 'color.primary.L5',
846
- },
847
- 'chevron-color': {
848
- value: 'var(--lumx-color-primary-D2)',
849
- attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
850
- $aliasedFrom: 'color.primary.D2',
851
- },
852
- },
853
- 'theme-dark': {
854
- 'background-color': {
855
- value: 'var(--lumx-color-light-L5)',
856
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
857
- $aliasedFrom: 'color.light.L5',
858
- },
859
- 'border-color': {
860
- value: 'var(--lumx-color-light-N)',
861
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
862
- $aliasedFrom: 'color.light.N',
863
- },
864
- 'icon-color': {
865
- value: 'var(--lumx-color-light-N)',
866
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
867
- $aliasedFrom: 'color.light.N',
868
- },
869
- 'label-color': {
870
- value: 'var(--lumx-color-light-N)',
871
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
872
- $aliasedFrom: 'color.light.N',
873
- },
874
- 'chevron-background-color': {
875
- value: 'var(--lumx-color-light-L5)',
876
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
877
- $aliasedFrom: 'color.light.L5',
878
- },
879
- 'chevron-color': {
880
- value: 'var(--lumx-color-light-N)',
881
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
882
- $aliasedFrom: 'color.light.N',
883
- },
884
- },
885
- },
886
- 'state-active': {
887
- border: {
888
- top: { width: { value: '1px' } },
889
- right: { width: { value: '1px' } },
890
- bottom: { width: { value: '1px' } },
891
- left: { width: { value: '1px' } },
892
- },
893
- 'theme-light': {
894
- 'background-color': {
895
- value: 'var(--lumx-color-primary-L4)',
896
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
897
- $aliasedFrom: 'color.primary.L4',
898
- },
899
- 'border-color': {
900
- value: 'var(--lumx-color-primary-N)',
901
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
902
- $aliasedFrom: 'color.primary.N',
903
- },
904
- 'icon-color': {
905
- value: 'var(--lumx-color-primary-D2)',
906
- attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
907
- $aliasedFrom: 'color.primary.D2',
908
- },
909
- 'label-color': {
910
- value: 'var(--lumx-color-primary-D2)',
911
- attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
912
- $aliasedFrom: 'color.primary.D2',
913
- },
914
- 'chevron-background-color': {
915
- value: 'var(--lumx-color-primary-L4)',
916
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
917
- $aliasedFrom: 'color.primary.L4',
918
- },
919
- 'chevron-color': {
920
- value: 'var(--lumx-color-primary-D2)',
921
- attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
922
- $aliasedFrom: 'color.primary.D2',
923
- },
924
- },
925
- 'theme-dark': {
926
- 'background-color': {
927
- value: 'var(--lumx-color-light-L4)',
928
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
929
- $aliasedFrom: 'color.light.L4',
930
- },
931
- 'border-color': {
932
- value: 'var(--lumx-color-light-N)',
933
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
934
- $aliasedFrom: 'color.light.N',
935
- },
936
- 'icon-color': {
937
- value: 'var(--lumx-color-light-N)',
938
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
939
- $aliasedFrom: 'color.light.N',
940
- },
941
- 'label-color': {
942
- value: 'var(--lumx-color-light-N)',
943
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
944
- $aliasedFrom: 'color.light.N',
945
- },
946
- 'chevron-background-color': {
947
- value: 'var(--lumx-color-light-L4)',
948
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
949
- $aliasedFrom: 'color.light.L4',
950
- },
951
- 'chevron-color': {
952
- value: 'var(--lumx-color-light-N)',
953
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
954
- $aliasedFrom: 'color.light.N',
955
- },
956
- },
957
- },
958
- },
959
- },
960
- },
961
- 'side-navigation': {
962
- item: {
963
- 'emphasis-selected': {
964
- 'state-default': {
965
- 'border-width': { value: '1px' },
966
- 'theme-light': {
967
- 'border-color': {
968
- value: 'var(--lumx-color-primary-N)',
969
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
970
- $aliasedFrom: 'color.primary.N',
971
- },
972
- 'background-color': {
973
- value: 'var(--lumx-color-primary-L6)',
974
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.05 } },
975
- $aliasedFrom: 'color.primary.L6',
976
- },
977
- },
978
- },
979
- 'state-hover': {
980
- 'border-width': { value: '1px' },
981
- 'theme-light': {
982
- 'border-color': {
983
- value: 'var(--lumx-color-primary-N)',
984
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
985
- $aliasedFrom: 'color.primary.N',
986
- },
987
- 'background-color': {
988
- value: 'var(--lumx-color-primary-L5)',
989
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
990
- $aliasedFrom: 'color.primary.L5',
991
- },
992
- },
993
- },
994
- 'state-active': {
995
- 'border-width': { value: '1px' },
996
- 'theme-light': {
997
- 'border-color': {
998
- value: 'var(--lumx-color-primary-N)',
999
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
1000
- $aliasedFrom: 'color.primary.N',
1001
- },
1002
- 'background-color': {
1003
- value: 'var(--lumx-color-primary-L4)',
1004
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
1005
- $aliasedFrom: 'color.primary.L4',
1006
- },
1007
- },
1008
- },
1009
- },
1010
- },
1011
- },
1012
- tabs: {
1013
- link: {
1014
- height: { value: '48px' },
1015
- 'border-radius': { value: '0' },
1016
- 'emphasis-low': {
1017
- 'state-default': {
1018
- border: {
1019
- top: { width: { value: '0' } },
1020
- right: { width: { value: '0' } },
1021
- bottom: { width: { value: '2px' } },
1022
- left: { width: { value: '0' } },
1023
- },
1024
- 'theme-light': {
1025
- 'background-color': { value: 'transparent' },
1026
- color: {
1027
- value: 'var(--lumx-color-dark-L1)',
1028
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
1029
- $aliasedFrom: 'color.dark.L1',
1030
- },
1031
- 'border-color': {
1032
- value: 'var(--lumx-color-dark-L4)',
1033
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
1034
- $aliasedFrom: 'color.dark.L4',
1035
- },
1036
- },
1037
- 'theme-dark': {
1038
- 'background-color': { value: 'transparent' },
1039
- color: {
1040
- value: 'var(--lumx-color-light-L1)',
1041
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
1042
- $aliasedFrom: 'color.light.L1',
1043
- },
1044
- 'border-color': {
1045
- value: 'var(--lumx-color-light-L4)',
1046
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
1047
- $aliasedFrom: 'color.light.L4',
1048
- },
1049
- },
1050
- },
1051
- 'state-hover': {
1052
- border: {
1053
- top: { width: { value: '0' } },
1054
- right: { width: { value: '0' } },
1055
- bottom: { width: { value: '2px' } },
1056
- left: { width: { value: '0' } },
1057
- },
1058
- 'theme-light': {
1059
- 'background-color': {
1060
- value: 'var(--lumx-color-dark-L5)',
1061
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
1062
- $aliasedFrom: 'color.dark.L5',
1063
- },
1064
- color: {
1065
- value: 'var(--lumx-color-dark-L1)',
1066
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
1067
- $aliasedFrom: 'color.dark.L1',
1068
- },
1069
- 'border-color': {
1070
- value: 'var(--lumx-color-dark-L4)',
1071
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
1072
- $aliasedFrom: 'color.dark.L4',
1073
- },
1074
- },
1075
- 'theme-dark': {
1076
- 'background-color': {
1077
- value: 'var(--lumx-color-light-L5)',
1078
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
1079
- $aliasedFrom: 'color.light.L5',
1080
- },
1081
- color: {
1082
- value: 'var(--lumx-color-light-L1)',
1083
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
1084
- $aliasedFrom: 'color.light.L1',
1085
- },
1086
- 'border-color': {
1087
- value: 'var(--lumx-color-light-L4)',
1088
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
1089
- $aliasedFrom: 'color.light.L4',
1090
- },
1091
- },
1092
- },
1093
- 'state-active': {
1094
- border: {
1095
- top: { width: { value: '0' } },
1096
- right: { width: { value: '0' } },
1097
- bottom: { width: { value: '2px' } },
1098
- left: { width: { value: '0' } },
1099
- },
1100
- 'theme-light': {
1101
- 'background-color': {
1102
- value: 'var(--lumx-color-dark-L4)',
1103
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
1104
- $aliasedFrom: 'color.dark.L4',
1105
- },
1106
- color: {
1107
- value: 'var(--lumx-color-dark-L1)',
1108
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
1109
- $aliasedFrom: 'color.dark.L1',
1110
- },
1111
- 'border-color': {
1112
- value: 'var(--lumx-color-dark-L4)',
1113
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
1114
- $aliasedFrom: 'color.dark.L4',
1115
- },
1116
- },
1117
- 'theme-dark': {
1118
- 'background-color': {
1119
- value: 'var(--lumx-color-light-L4)',
1120
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
1121
- $aliasedFrom: 'color.light.L4',
1122
- },
1123
- color: {
1124
- value: 'var(--lumx-color-light-L1)',
1125
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
1126
- $aliasedFrom: 'color.light.L1',
1127
- },
1128
- 'border-color': {
1129
- value: 'var(--lumx-color-light-L4)',
1130
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
1131
- $aliasedFrom: 'color.light.L4',
1132
- },
1133
- },
1134
- },
1135
- },
1136
- 'emphasis-selected': {
1137
- 'state-default': {
1138
- border: {
1139
- top: { width: { value: '0' } },
1140
- right: { width: { value: '0' } },
1141
- bottom: { width: { value: '2px' } },
1142
- left: { width: { value: '0' } },
1143
- },
1144
- 'theme-light': {
1145
- 'background-color': { value: 'transparent' },
1146
- color: {
1147
- value: 'var(--lumx-color-dark-L1)',
1148
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
1149
- $aliasedFrom: 'color.dark.L1',
1150
- },
1151
- 'border-color': {
1152
- value: 'var(--lumx-color-primary-N)',
1153
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
1154
- $aliasedFrom: 'color.primary.N',
1155
- },
1156
- },
1157
- 'theme-dark': {
1158
- 'background-color': { value: 'transparent' },
1159
- color: {
1160
- value: 'var(--lumx-color-light-L1)',
1161
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
1162
- $aliasedFrom: 'color.light.L1',
1163
- },
1164
- 'border-color': {
1165
- value: 'var(--lumx-color-light-N)',
1166
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
1167
- $aliasedFrom: 'color.light.N',
1168
- },
1169
- },
1170
- },
1171
- 'state-hover': {
1172
- border: {
1173
- top: { width: { value: '0' } },
1174
- right: { width: { value: '0' } },
1175
- bottom: { width: { value: '2px' } },
1176
- left: { width: { value: '0' } },
1177
- },
1178
- 'theme-light': {
1179
- 'background-color': {
1180
- value: 'var(--lumx-color-dark-L5)',
1181
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
1182
- $aliasedFrom: 'color.dark.L5',
1183
- },
1184
- color: {
1185
- value: 'var(--lumx-color-dark-L1)',
1186
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
1187
- $aliasedFrom: 'color.dark.L1',
1188
- },
1189
- 'border-color': {
1190
- value: 'var(--lumx-color-primary-N)',
1191
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
1192
- $aliasedFrom: 'color.primary.N',
1193
- },
1194
- },
1195
- 'theme-dark': {
1196
- 'background-color': {
1197
- value: 'var(--lumx-color-light-L5)',
1198
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
1199
- $aliasedFrom: 'color.light.L5',
1200
- },
1201
- color: {
1202
- value: 'var(--lumx-color-light-L1)',
1203
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
1204
- $aliasedFrom: 'color.light.L1',
1205
- },
1206
- 'border-color': {
1207
- value: 'var(--lumx-color-light-N)',
1208
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
1209
- $aliasedFrom: 'color.light.N',
1210
- },
1211
- },
1212
- },
1213
- 'state-active': {
1214
- border: {
1215
- top: { width: { value: '0' } },
1216
- right: { width: { value: '0' } },
1217
- bottom: { width: { value: '2px' } },
1218
- left: { width: { value: '0' } },
1219
- },
1220
- 'theme-light': {
1221
- 'background-color': {
1222
- value: 'var(--lumx-color-dark-L4)',
1223
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
1224
- $aliasedFrom: 'color.dark.L4',
1225
- },
1226
- color: {
1227
- value: 'var(--lumx-color-dark-L1)',
1228
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
1229
- $aliasedFrom: 'color.dark.L1',
1230
- },
1231
- 'border-color': {
1232
- value: 'var(--lumx-color-primary-N)',
1233
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
1234
- $aliasedFrom: 'color.primary.N',
1235
- },
1236
- },
1237
- 'theme-dark': {
1238
- 'background-color': {
1239
- value: 'var(--lumx-color-light-L4)',
1240
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
1241
- $aliasedFrom: 'color.light.L4',
1242
- },
1243
- color: {
1244
- value: 'var(--lumx-color-light-L1)',
1245
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
1246
- $aliasedFrom: 'color.light.L1',
1247
- },
1248
- 'border-color': {
1249
- value: 'var(--lumx-color-light-N)',
1250
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
1251
- $aliasedFrom: 'color.light.N',
1252
- },
1253
- },
1254
- },
1255
- },
1256
- },
1257
- },
1258
- 'text-field': {
1259
- input: {
1260
- 'min-height': { value: '36px', $aliasedFrom: 'size.m' },
1261
- padding: { horizontal: { value: 'var(--lumx-spacing-unit-medium)', $aliasedFrom: 'spacing.unit.medium' } },
1262
- 'border-radius': { value: 'var(--lumx-border-radius)', $aliasedFrom: 'border-radius' },
1263
- },
1264
- 'state-default': {
1265
- input: {
1266
- border: {
1267
- top: { width: { value: '1px' } },
1268
- right: { width: { value: '1px' } },
1269
- bottom: { width: { value: '1px' } },
1270
- left: { width: { value: '1px' } },
1271
- },
1272
- },
1273
- 'theme-light': {
1274
- header: {
1275
- label: {
1276
- color: {
1277
- value: 'var(--lumx-color-dark-N)',
1278
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
1279
- $aliasedFrom: 'color.dark.N',
1280
- },
1281
- },
1282
- },
1283
- input: {
1284
- 'background-color': {
1285
- value: 'var(--lumx-color-dark-L6)',
1286
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.03 } },
1287
- $aliasedFrom: 'color.dark.L6',
1288
- },
1289
- 'border-color': {
1290
- value: 'var(--lumx-color-dark-L3)',
1291
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.38 } },
1292
- $aliasedFrom: 'color.dark.L3',
1293
- },
1294
- content: {
1295
- color: {
1296
- value: 'var(--lumx-color-dark-N)',
1297
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
1298
- $aliasedFrom: 'color.dark.N',
1299
- },
1300
- },
1301
- placeholder: {
1302
- color: {
1303
- value: 'var(--lumx-color-dark-L2)',
1304
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.6 } },
1305
- $aliasedFrom: 'color.dark.L2',
1306
- },
1307
- },
1308
- },
1309
- },
1310
- 'theme-dark': {
1311
- header: {
1312
- label: {
1313
- color: {
1314
- value: 'var(--lumx-color-light-N)',
1315
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
1316
- $aliasedFrom: 'color.light.N',
1317
- },
1318
- },
1319
- },
1320
- input: {
1321
- 'background-color': {
1322
- value: 'var(--lumx-color-light-L6)',
1323
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.1 } },
1324
- $aliasedFrom: 'color.light.L6',
1325
- },
1326
- 'border-color': {
1327
- value: 'var(--lumx-color-light-L4)',
1328
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
1329
- $aliasedFrom: 'color.light.L4',
1330
- },
1331
- content: {
1332
- color: {
1333
- value: 'var(--lumx-color-light-N)',
1334
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
1335
- $aliasedFrom: 'color.light.N',
1336
- },
1337
- },
1338
- placeholder: {
1339
- color: {
1340
- value: 'var(--lumx-color-light-L2)',
1341
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.8 } },
1342
- $aliasedFrom: 'color.light.L2',
1343
- },
1344
- },
1345
- },
1346
- },
1347
- },
1348
- 'state-hover': {
1349
- input: {
1350
- border: {
1351
- top: { width: { value: '1px' } },
1352
- right: { width: { value: '1px' } },
1353
- bottom: { width: { value: '1px' } },
1354
- left: { width: { value: '1px' } },
1355
- },
1356
- },
1357
- 'theme-light': {
1358
- header: {
1359
- label: {
1360
- color: {
1361
- value: 'var(--lumx-color-dark-N)',
1362
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
1363
- $aliasedFrom: 'color.dark.N',
1364
- },
1365
- },
1366
- },
1367
- input: {
1368
- 'background-color': {
1369
- value: 'var(--lumx-color-dark-L5)',
1370
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
1371
- $aliasedFrom: 'color.dark.L5',
1372
- },
1373
- 'border-color': {
1374
- value: 'var(--lumx-color-dark-L3)',
1375
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.38 } },
1376
- $aliasedFrom: 'color.dark.L3',
1377
- },
1378
- content: {
1379
- color: {
1380
- value: 'var(--lumx-color-dark-N)',
1381
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
1382
- $aliasedFrom: 'color.dark.N',
1383
- },
1384
- },
1385
- placeholder: {
1386
- color: {
1387
- value: 'var(--lumx-color-dark-L2)',
1388
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.6 } },
1389
- $aliasedFrom: 'color.dark.L2',
1390
- },
1391
- },
1392
- },
1393
- },
1394
- 'theme-dark': {
1395
- header: {
1396
- label: {
1397
- color: {
1398
- value: 'var(--lumx-color-light-N)',
1399
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
1400
- $aliasedFrom: 'color.light.N',
1401
- },
1402
- },
1403
- },
1404
- input: {
1405
- 'background-color': {
1406
- value: 'var(--lumx-color-light-L5)',
1407
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
1408
- $aliasedFrom: 'color.light.L5',
1409
- },
1410
- 'border-color': {
1411
- value: 'var(--lumx-color-light-L4)',
1412
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
1413
- $aliasedFrom: 'color.light.L4',
1414
- },
1415
- content: {
1416
- color: {
1417
- value: 'var(--lumx-color-light-N)',
1418
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
1419
- $aliasedFrom: 'color.light.N',
1420
- },
1421
- },
1422
- placeholder: {
1423
- color: {
1424
- value: 'var(--lumx-color-light-L2)',
1425
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.8 } },
1426
- $aliasedFrom: 'color.light.L2',
1427
- },
1428
- },
1429
- },
1430
- },
1431
- },
1432
- 'state-focus': {
1433
- input: {
1434
- border: {
1435
- top: { width: { value: '2px' } },
1436
- right: { width: { value: '2px' } },
1437
- bottom: { width: { value: '2px' } },
1438
- left: { width: { value: '2px' } },
1439
- },
1440
- },
1441
- 'theme-light': {
1442
- header: {
1443
- label: {
1444
- color: {
1445
- value: 'var(--lumx-color-dark-N)',
1446
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
1447
- $aliasedFrom: 'color.dark.N',
1448
- },
1449
- },
1450
- },
1451
- input: {
1452
- 'background-color': { value: 'transparent' },
1453
- 'border-color': {
1454
- value: 'var(--lumx-color-primary-N)',
1455
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
1456
- $aliasedFrom: 'color.primary.N',
1457
- },
1458
- content: {
1459
- color: {
1460
- value: 'var(--lumx-color-dark-N)',
1461
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
1462
- $aliasedFrom: 'color.dark.N',
1463
- },
1464
- },
1465
- placeholder: {
1466
- color: {
1467
- value: 'var(--lumx-color-dark-L2)',
1468
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.6 } },
1469
- $aliasedFrom: 'color.dark.L2',
1470
- },
1471
- },
1472
- },
1473
- },
1474
- 'theme-dark': {
1475
- header: {
1476
- label: {
1477
- color: {
1478
- value: 'var(--lumx-color-light-N)',
1479
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
1480
- $aliasedFrom: 'color.light.N',
1481
- },
1482
- },
1483
- },
1484
- input: {
1485
- 'background-color': { value: 'transparent' },
1486
- 'border-color': {
1487
- value: 'var(--lumx-color-light-N)',
1488
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
1489
- $aliasedFrom: 'color.light.N',
1490
- },
1491
- content: {
1492
- color: {
1493
- value: 'var(--lumx-color-light-N)',
1494
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
1495
- $aliasedFrom: 'color.light.N',
1496
- },
1497
- },
1498
- placeholder: {
1499
- color: {
1500
- value: 'var(--lumx-color-light-L2)',
1501
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.8 } },
1502
- $aliasedFrom: 'color.light.L2',
1503
- },
1504
- },
1505
- },
1506
- },
1507
- },
1508
- },
1509
- 'border-radius': { value: '4px' },
1510
- color: {
1511
- dark: {
1512
- N: {
1513
- version: '0.22',
1514
- comment: 'Neutral dark color',
1515
- value: 'rgba(0, 0, 0, 0.87)',
1516
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
1517
- },
1518
- L1: {
1519
- version: '0.22',
1520
- comment: 'Base dark color with 70% opacity',
1521
- value: 'rgba(0, 0, 0, 0.7)',
1522
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
1523
- },
1524
- L2: {
1525
- version: '0.22',
1526
- comment: 'Base dark color with 60% opacity',
1527
- value: 'rgba(0, 0, 0, 0.6)',
1528
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.6 } },
1529
- },
1530
- L3: {
1531
- version: '0.22',
1532
- comment: 'Base dark color with 38% opacity',
1533
- value: 'rgba(0, 0, 0, 0.38)',
1534
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.38 } },
1535
- },
1536
- L4: {
1537
- version: '0.22',
1538
- comment: 'Base dark color with 20% opacity',
1539
- value: 'rgba(0, 0, 0, 0.2)',
1540
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
1541
- },
1542
- L5: {
1543
- version: '0.22',
1544
- comment: 'Base dark color with 12% opacity',
1545
- value: 'rgba(0, 0, 0, 0.12)',
1546
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
1547
- },
1548
- L6: {
1549
- version: '0.22',
1550
- comment: 'Base dark color with 3% opacity',
1551
- value: 'rgba(0, 0, 0, 0.03)',
1552
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.03 } },
1553
- },
1554
- },
1555
- light: {
1556
- N: {
1557
- version: '0.22',
1558
- comment: 'Neutral light color',
1559
- value: 'rgb(255, 255, 255)',
1560
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
1561
- },
1562
- L1: {
1563
- version: '0.22',
1564
- comment: 'Base light color with 90% opacity',
1565
- value: 'rgba(255, 255, 255, 0.9)',
1566
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
1567
- },
1568
- L2: {
1569
- version: '0.22',
1570
- comment: 'Base light color with 80% opacity',
1571
- value: 'rgba(255, 255, 255, 0.8)',
1572
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.8 } },
1573
- },
1574
- L3: {
1575
- version: '0.22',
1576
- comment: 'Base light color with 60% opacity',
1577
- value: 'rgba(255, 255, 255, 0.6)',
1578
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.6 } },
1579
- },
1580
- L4: {
1581
- version: '0.22',
1582
- comment: 'Base light color with 40% opacity',
1583
- value: 'rgba(255, 255, 255, 0.4)',
1584
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
1585
- },
1586
- L5: {
1587
- version: '0.22',
1588
- comment: 'Base light color with 20% opacity',
1589
- value: 'rgba(255, 255, 255, 0.2)',
1590
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
1591
- },
1592
- L6: {
1593
- version: '0.22',
1594
- comment: 'Base light color with 10% opacity',
1595
- value: 'rgba(255, 255, 255, 0.1)',
1596
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.1 } },
1597
- },
1598
- },
1599
- blue: {
1600
- D2: {
1601
- version: '0.22',
1602
- comment: 'Darkest blue color',
1603
- value: 'rgb(21, 70, 193)',
1604
- attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
1605
- },
1606
- D1: {
1607
- version: '0.22',
1608
- comment: 'Dark blue color',
1609
- value: 'rgb(24, 78, 216)',
1610
- attributes: { hex: '184ed8', rgb: { r: 24, g: 78, b: 216, a: 1 } },
1611
- },
1612
- N: {
1613
- version: '0.22',
1614
- comment: 'Neutral blue color',
1615
- value: 'rgb(36, 91, 231)',
1616
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
1617
- },
1618
- L1: {
1619
- version: '0.22',
1620
- comment: 'Base blue color with 80% opacity',
1621
- value: 'rgba(36, 91, 231, 0.8)',
1622
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.8 } },
1623
- },
1624
- L2: {
1625
- version: '0.22',
1626
- comment: 'Base blue color with 60% opacity',
1627
- value: 'rgba(36, 91, 231, 0.6)',
1628
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.6 } },
1629
- },
1630
- L3: {
1631
- version: '0.22',
1632
- comment: 'Base blue color with 40% opacity',
1633
- value: 'rgba(36, 91, 231, 0.4)',
1634
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.4 } },
1635
- },
1636
- L4: {
1637
- version: '0.22',
1638
- comment: 'Base blue color with 20% opacity',
1639
- value: 'rgba(36, 91, 231, 0.2)',
1640
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
1641
- },
1642
- L5: {
1643
- version: '0.22',
1644
- comment: 'Base blue color with 10% opacity',
1645
- value: 'rgba(36, 91, 231, 0.1)',
1646
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
1647
- },
1648
- L6: {
1649
- version: '0.22',
1650
- comment: 'Base blue color with 5% opacity',
1651
- value: 'rgba(36, 91, 231, 0.05)',
1652
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.05 } },
1653
- },
1654
- },
1655
- green: {
1656
- D2: {
1657
- version: '0.22',
1658
- comment: 'Darkest green color',
1659
- value: 'rgb(25, 109, 88)',
1660
- attributes: { hex: '196d58', rgb: { r: 25, g: 109, b: 88, a: 1 } },
1661
- },
1662
- D1: {
1663
- version: '0.22',
1664
- comment: 'Dark green color',
1665
- value: 'rgb(23, 122, 97)',
1666
- attributes: { hex: '177a61', rgb: { r: 23, g: 122, b: 97, a: 1 } },
1667
- },
1668
- N: {
1669
- version: '0.22',
1670
- comment: 'Neutral green color',
1671
- value: 'rgb(19, 134, 105)',
1672
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 1 } },
1673
- },
1674
- L1: {
1675
- version: '0.22',
1676
- comment: 'Base green color with 80% opacity',
1677
- value: 'rgba(19, 134, 105, 0.8)',
1678
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.8 } },
1679
- },
1680
- L2: {
1681
- version: '0.22',
1682
- comment: 'Base green color with 60% opacity',
1683
- value: 'rgba(19, 134, 105, 0.6)',
1684
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.6 } },
1685
- },
1686
- L3: {
1687
- version: '0.22',
1688
- comment: 'Base green color with 40% opacity',
1689
- value: 'rgba(19, 134, 105, 0.4)',
1690
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.4 } },
1691
- },
1692
- L4: {
1693
- version: '0.22',
1694
- comment: 'Base green color with 20% opacity',
1695
- value: 'rgba(19, 134, 105, 0.2)',
1696
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.2 } },
1697
- },
1698
- L5: {
1699
- version: '0.22',
1700
- comment: 'Base green color with 10% opacity',
1701
- value: 'rgba(19, 134, 105, 0.1)',
1702
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.1 } },
1703
- },
1704
- L6: {
1705
- version: '0.22',
1706
- comment: 'Base green color with 5% opacity',
1707
- value: 'rgba(19, 134, 105, 0.05)',
1708
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.05 } },
1709
- },
1710
- },
1711
- yellow: {
1712
- D2: {
1713
- version: '0.22',
1714
- comment: 'Darkest yellow color',
1715
- value: 'rgb(255, 161, 37)',
1716
- attributes: { hex: 'ffa125', rgb: { r: 255, g: 161, b: 37, a: 1 } },
1717
- },
1718
- D1: {
1719
- version: '0.22',
1720
- comment: 'Dark yellow color',
1721
- value: 'rgb(255, 179, 37)',
1722
- attributes: { hex: 'ffb325', rgb: { r: 255, g: 179, b: 37, a: 1 } },
1723
- },
1724
- N: {
1725
- version: '0.22',
1726
- comment: 'Neutral yellow color',
1727
- value: 'rgb(255, 196, 37)',
1728
- attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 1 } },
1729
- },
1730
- L1: {
1731
- version: '0.22',
1732
- comment: 'Base yellow color with 80% opacity',
1733
- value: 'rgba(255, 196, 37, 0.9)',
1734
- attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.9 } },
1735
- },
1736
- L2: {
1737
- version: '0.22',
1738
- comment: 'Base yellow color with 70% opacity',
1739
- value: 'rgba(255, 196, 37, 0.8)',
1740
- attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.8 } },
1741
- },
1742
- L3: {
1743
- version: '0.22',
1744
- comment: 'Base yellow color with 60% opacity',
1745
- value: 'rgba(255, 196, 37, 0.6)',
1746
- attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.6 } },
1747
- },
1748
- L4: {
1749
- version: '0.22',
1750
- comment: 'Base yellow color with 40% opacity',
1751
- value: 'rgba(255, 196, 37, 0.48)',
1752
- attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.48 } },
1753
- },
1754
- L5: {
1755
- version: '0.22',
1756
- comment: 'Base yellow color with 20% opacity',
1757
- value: 'rgba(255, 196, 37, 0.24)',
1758
- attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.24 } },
1759
- },
1760
- L6: {
1761
- version: '0.22',
1762
- comment: 'Base yellow color with 10% opacity',
1763
- value: 'rgba(255, 196, 37, 0.12)',
1764
- attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.12 } },
1765
- },
1766
- },
1767
- red: {
1768
- D2: {
1769
- version: '0.22',
1770
- comment: 'Darkest red color',
1771
- value: 'rgb(188, 9, 48)',
1772
- attributes: { hex: 'bc0930', rgb: { r: 188, g: 9, b: 48, a: 1 } },
1773
- },
1774
- D1: {
1775
- version: '0.22',
1776
- comment: 'Dark red color',
1777
- value: 'rgb(212, 33, 72)',
1778
- attributes: { hex: 'd42148', rgb: { r: 212, g: 33, b: 72, a: 1 } },
1779
- },
1780
- N: {
1781
- version: '0.22',
1782
- comment: 'Neutral red color',
1783
- value: 'rgb(223, 42, 75)',
1784
- attributes: { hex: 'df2a4b', rgb: { r: 223, g: 42, b: 75, a: 1 } },
1785
- },
1786
- L1: {
1787
- version: '0.22',
1788
- comment: 'Base red color with 80% opacity',
1789
- value: 'rgba(223, 42, 75, 0.8)',
1790
- attributes: { hex: 'df2a4b', rgb: { r: 223, g: 42, b: 75, a: 0.8 } },
1791
- },
1792
- L2: {
1793
- version: '0.22',
1794
- comment: 'Base red color with 60% opacity',
1795
- value: 'rgba(223, 42, 75, 0.6)',
1796
- attributes: { hex: 'df2a4b', rgb: { r: 223, g: 42, b: 75, a: 0.6 } },
1797
- },
1798
- L3: {
1799
- version: '0.22',
1800
- comment: 'Base red color with 40% opacity',
1801
- value: 'rgba(223, 42, 75, 0.4)',
1802
- attributes: { hex: 'df2a4b', rgb: { r: 223, g: 42, b: 75, a: 0.4 } },
1803
- },
1804
- L4: {
1805
- version: '0.22',
1806
- comment: 'Base red color with 20% opacity',
1807
- value: 'rgba(223, 42, 75, 0.2)',
1808
- attributes: { hex: 'df2a4b', rgb: { r: 223, g: 42, b: 75, a: 0.2 } },
1809
- },
1810
- L5: {
1811
- version: '0.22',
1812
- comment: 'Base red color with 10% opacity',
1813
- value: 'rgba(223, 42, 75, 0.1)',
1814
- attributes: { hex: 'df2a4b', rgb: { r: 223, g: 42, b: 75, a: 0.1 } },
1815
- },
1816
- L6: {
1817
- version: '0.22',
1818
- comment: 'Base red color with 5% opacity',
1819
- value: 'rgba(223, 42, 75, 0.05)',
1820
- attributes: { hex: 'df2a4b', rgb: { r: 223, g: 42, b: 75, a: 0.05 } },
1821
- },
1822
- },
1823
- grey: {
1824
- N: {
1825
- version: '0.22',
1826
- comment: 'Neutral grey color',
1827
- value: 'rgb(117, 117, 117)',
1828
- attributes: { hex: '757575', rgb: { r: 117, g: 117, b: 117, a: 1 } },
1829
- },
1830
- L1: {
1831
- version: '0.22',
1832
- comment: 'Base grey color with 80% opacity',
1833
- value: 'rgba(117, 117, 117, 0.8)',
1834
- attributes: { hex: '757575', rgb: { r: 117, g: 117, b: 117, a: 0.8 } },
1835
- },
1836
- L2: {
1837
- version: '0.22',
1838
- comment: 'Base grey color with 60% opacity',
1839
- value: 'rgba(117, 117, 117, 0.6)',
1840
- attributes: { hex: '757575', rgb: { r: 117, g: 117, b: 117, a: 0.6 } },
1841
- },
1842
- L3: {
1843
- version: '0.22',
1844
- comment: 'Base grey color with 40% opacity',
1845
- value: 'rgba(117, 117, 117, 0.4)',
1846
- attributes: { hex: '757575', rgb: { r: 117, g: 117, b: 117, a: 0.4 } },
1847
- },
1848
- L4: {
1849
- version: '0.22',
1850
- comment: 'Base grey color with 20% opacity',
1851
- value: 'rgba(117, 117, 117, 0.2)',
1852
- attributes: { hex: '757575', rgb: { r: 117, g: 117, b: 117, a: 0.2 } },
1853
- },
1854
- L5: {
1855
- version: '0.22',
1856
- comment: 'Base grey color with 10% opacity',
1857
- value: 'rgba(117, 117, 117, 0.1)',
1858
- attributes: { hex: '757575', rgb: { r: 117, g: 117, b: 117, a: 0.1 } },
1859
- },
1860
- L6: {
1861
- version: '0.22',
1862
- comment: 'Base grey color with 5% opacity',
1863
- value: 'rgba(117, 117, 117, 0.05)',
1864
- attributes: { hex: '757575', rgb: { r: 117, g: 117, b: 117, a: 0.05 } },
1865
- },
1866
- },
1867
- primary: {
1868
- D2: {
1869
- version: '0.22',
1870
- comment: 'Darkest blue color',
1871
- value: 'rgb(21, 70, 193)',
1872
- attributes: { hex: '1546c1', rgb: { r: 21, g: 70, b: 193, a: 1 } },
1873
- },
1874
- D1: {
1875
- version: '0.22',
1876
- comment: 'Dark blue color',
1877
- value: 'rgb(24, 78, 216)',
1878
- attributes: { hex: '184ed8', rgb: { r: 24, g: 78, b: 216, a: 1 } },
1879
- },
1880
- N: {
1881
- version: '0.22',
1882
- comment: 'Neutral blue color',
1883
- value: 'rgb(36, 91, 231)',
1884
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
1885
- },
1886
- L1: {
1887
- version: '0.22',
1888
- comment: 'Base blue color with 80% opacity',
1889
- value: 'rgba(36, 91, 231, 0.8)',
1890
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.8 } },
1891
- },
1892
- L2: {
1893
- version: '0.22',
1894
- comment: 'Base blue color with 60% opacity',
1895
- value: 'rgba(36, 91, 231, 0.6)',
1896
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.6 } },
1897
- },
1898
- L3: {
1899
- version: '0.22',
1900
- comment: 'Base blue color with 40% opacity',
1901
- value: 'rgba(36, 91, 231, 0.4)',
1902
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.4 } },
1903
- },
1904
- L4: {
1905
- version: '0.22',
1906
- comment: 'Base blue color with 20% opacity',
1907
- value: 'rgba(36, 91, 231, 0.2)',
1908
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.2 } },
1909
- },
1910
- L5: {
1911
- version: '0.22',
1912
- comment: 'Base blue color with 10% opacity',
1913
- value: 'rgba(36, 91, 231, 0.1)',
1914
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.1 } },
1915
- },
1916
- L6: {
1917
- version: '0.22',
1918
- comment: 'Base blue color with 5% opacity',
1919
- value: 'rgba(36, 91, 231, 0.05)',
1920
- attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 0.05 } },
1921
- },
1922
- },
1923
- secondary: {
1924
- D2: {
1925
- version: '0.22',
1926
- comment: 'Darkest green color',
1927
- value: 'rgb(25, 109, 88)',
1928
- attributes: { hex: '196d58', rgb: { r: 25, g: 109, b: 88, a: 1 } },
1929
- },
1930
- D1: {
1931
- version: '0.22',
1932
- comment: 'Dark green color',
1933
- value: 'rgb(23, 122, 97)',
1934
- attributes: { hex: '177a61', rgb: { r: 23, g: 122, b: 97, a: 1 } },
1935
- },
1936
- N: {
1937
- version: '0.22',
1938
- comment: 'Neutral green color',
1939
- value: 'rgb(19, 134, 105)',
1940
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 1 } },
1941
- },
1942
- L1: {
1943
- version: '0.22',
1944
- comment: 'Base green color with 80% opacity',
1945
- value: 'rgba(19, 134, 105, 0.8)',
1946
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.8 } },
1947
- },
1948
- L2: {
1949
- version: '0.22',
1950
- comment: 'Base green color with 60% opacity',
1951
- value: 'rgba(19, 134, 105, 0.6)',
1952
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.6 } },
1953
- },
1954
- L3: {
1955
- version: '0.22',
1956
- comment: 'Base green color with 40% opacity',
1957
- value: 'rgba(19, 134, 105, 0.4)',
1958
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.4 } },
1959
- },
1960
- L4: {
1961
- version: '0.22',
1962
- comment: 'Base green color with 20% opacity',
1963
- value: 'rgba(19, 134, 105, 0.2)',
1964
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.2 } },
1965
- },
1966
- L5: {
1967
- version: '0.22',
1968
- comment: 'Base green color with 10% opacity',
1969
- value: 'rgba(19, 134, 105, 0.1)',
1970
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.1 } },
1971
- },
1972
- L6: {
1973
- version: '0.22',
1974
- comment: 'Base green color with 5% opacity',
1975
- value: 'rgba(19, 134, 105, 0.05)',
1976
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.05 } },
1977
- },
1978
- },
1979
- accent: {
1980
- D2: {
1981
- version: '0.22',
1982
- comment: 'Darkest green color',
1983
- value: 'rgb(25, 109, 88)',
1984
- attributes: { hex: '196d58', rgb: { r: 25, g: 109, b: 88, a: 1 } },
1985
- },
1986
- D1: {
1987
- version: '0.22',
1988
- comment: 'Dark green color',
1989
- value: 'rgb(23, 122, 97)',
1990
- attributes: { hex: '177a61', rgb: { r: 23, g: 122, b: 97, a: 1 } },
1991
- },
1992
- N: {
1993
- version: '0.22',
1994
- comment: 'Neutral green color',
1995
- value: 'rgb(19, 134, 105)',
1996
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 1 } },
1997
- },
1998
- L1: {
1999
- version: '0.22',
2000
- comment: 'Base green color with 80% opacity',
2001
- value: 'rgba(19, 134, 105, 0.8)',
2002
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.8 } },
2003
- },
2004
- L2: {
2005
- version: '0.22',
2006
- comment: 'Base green color with 60% opacity',
2007
- value: 'rgba(19, 134, 105, 0.6)',
2008
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.6 } },
2009
- },
2010
- L3: {
2011
- version: '0.22',
2012
- comment: 'Base green color with 40% opacity',
2013
- value: 'rgba(19, 134, 105, 0.4)',
2014
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.4 } },
2015
- },
2016
- L4: {
2017
- version: '0.22',
2018
- comment: 'Base green color with 20% opacity',
2019
- value: 'rgba(19, 134, 105, 0.2)',
2020
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.2 } },
2021
- },
2022
- L5: {
2023
- version: '0.22',
2024
- comment: 'Base green color with 10% opacity',
2025
- value: 'rgba(19, 134, 105, 0.1)',
2026
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.1 } },
2027
- },
2028
- L6: {
2029
- version: '0.22',
2030
- comment: 'Base green color with 5% opacity',
2031
- value: 'rgba(19, 134, 105, 0.05)',
2032
- attributes: { hex: '138669', rgb: { r: 19, g: 134, b: 105, a: 0.05 } },
2033
- },
2034
- },
2035
- black: {
2036
- N: {
2037
- version: '0.22',
2038
- comment: 'Neutral dark color',
2039
- value: 'rgba(0, 0, 0, 0.87)',
2040
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.87 } },
2041
- },
2042
- L1: {
2043
- version: '0.22',
2044
- comment: 'Base dark color with 70% opacity',
2045
- value: 'rgba(0, 0, 0, 0.7)',
2046
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.7 } },
2047
- },
2048
- L2: {
2049
- version: '0.22',
2050
- comment: 'Base dark color with 60% opacity',
2051
- value: 'rgba(0, 0, 0, 0.6)',
2052
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.6 } },
2053
- },
2054
- L3: {
2055
- version: '0.22',
2056
- comment: 'Base dark color with 38% opacity',
2057
- value: 'rgba(0, 0, 0, 0.38)',
2058
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.38 } },
2059
- },
2060
- L4: {
2061
- version: '0.22',
2062
- comment: 'Base dark color with 20% opacity',
2063
- value: 'rgba(0, 0, 0, 0.2)',
2064
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
2065
- },
2066
- L5: {
2067
- version: '0.22',
2068
- comment: 'Base dark color with 12% opacity',
2069
- value: 'rgba(0, 0, 0, 0.12)',
2070
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
2071
- },
2072
- L6: {
2073
- version: '0.22',
2074
- comment: 'Base dark color with 3% opacity',
2075
- value: 'rgba(0, 0, 0, 0.03)',
2076
- attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.03 } },
2077
- },
2078
- },
2079
- white: {
2080
- N: {
2081
- version: '0.22',
2082
- comment: 'Neutral light color',
2083
- value: 'rgb(255, 255, 255)',
2084
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
2085
- },
2086
- L1: {
2087
- version: '0.22',
2088
- comment: 'Base light color with 90% opacity',
2089
- value: 'rgba(255, 255, 255, 0.9)',
2090
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
2091
- },
2092
- L2: {
2093
- version: '0.22',
2094
- comment: 'Base light color with 80% opacity',
2095
- value: 'rgba(255, 255, 255, 0.8)',
2096
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.8 } },
2097
- },
2098
- L3: {
2099
- version: '0.22',
2100
- comment: 'Base light color with 60% opacity',
2101
- value: 'rgba(255, 255, 255, 0.6)',
2102
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.6 } },
2103
- },
2104
- L4: {
2105
- version: '0.22',
2106
- comment: 'Base light color with 40% opacity',
2107
- value: 'rgba(255, 255, 255, 0.4)',
2108
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
2109
- },
2110
- L5: {
2111
- version: '0.22',
2112
- comment: 'Base light color with 20% opacity',
2113
- value: 'rgba(255, 255, 255, 0.2)',
2114
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
2115
- },
2116
- L6: {
2117
- version: '0.22',
2118
- comment: 'Base light color with 10% opacity',
2119
- value: 'rgba(255, 255, 255, 0.1)',
2120
- attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.1 } },
2121
- },
2122
- },
2123
- orange: {
2124
- D2: {
2125
- version: '0.22',
2126
- comment: 'Darkest yellow color',
2127
- value: 'rgb(255, 161, 37)',
2128
- attributes: { hex: 'ffa125', rgb: { r: 255, g: 161, b: 37, a: 1 } },
2129
- },
2130
- D1: {
2131
- version: '0.22',
2132
- comment: 'Dark yellow color',
2133
- value: 'rgb(255, 179, 37)',
2134
- attributes: { hex: 'ffb325', rgb: { r: 255, g: 179, b: 37, a: 1 } },
2135
- },
2136
- N: {
2137
- version: '0.22',
2138
- comment: 'Neutral yellow color',
2139
- value: 'rgb(255, 196, 37)',
2140
- attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 1 } },
2141
- },
2142
- L1: {
2143
- version: '0.22',
2144
- comment: 'Base yellow color with 80% opacity',
2145
- value: 'rgba(255, 196, 37, 0.9)',
2146
- attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.9 } },
2147
- },
2148
- L2: {
2149
- version: '0.22',
2150
- comment: 'Base yellow color with 70% opacity',
2151
- value: 'rgba(255, 196, 37, 0.8)',
2152
- attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.8 } },
2153
- },
2154
- L3: {
2155
- version: '0.22',
2156
- comment: 'Base yellow color with 60% opacity',
2157
- value: 'rgba(255, 196, 37, 0.6)',
2158
- attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.6 } },
2159
- },
2160
- L4: {
2161
- version: '0.22',
2162
- comment: 'Base yellow color with 40% opacity',
2163
- value: 'rgba(255, 196, 37, 0.48)',
2164
- attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.48 } },
2165
- },
2166
- L5: {
2167
- version: '0.22',
2168
- comment: 'Base yellow color with 20% opacity',
2169
- value: 'rgba(255, 196, 37, 0.24)',
2170
- attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.24 } },
2171
- },
2172
- L6: {
2173
- version: '0.22',
2174
- comment: 'Base yellow color with 10% opacity',
2175
- value: 'rgba(255, 196, 37, 0.12)',
2176
- attributes: { hex: 'ffc425', rgb: { r: 255, g: 196, b: 37, a: 0.12 } },
2177
- },
2178
- },
2179
- },
2180
- size: {
2181
- xxs: { value: '14px' },
2182
- xs: { value: '20px' },
2183
- s: { value: '24px' },
2184
- m: { value: '36px' },
2185
- l: { value: '64px' },
2186
- xl: { value: '128px' },
2187
- xxl: { value: '256px' },
2188
- },
2189
- spacing: {
2190
- unit: {
2191
- tiny: { value: '4px' },
2192
- regular: { value: '8px' },
2193
- medium: { value: '12px' },
2194
- big: { value: '16px' },
2195
- huge: { value: '24px' },
2196
- },
2197
- },
2198
- typography: {
2199
- 'font-family': {
2200
- value: "'-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'sans-serif'",
2201
- },
2202
- 'font-weight': {
2203
- regular: { value: '400' },
2204
- medium: { value: '500' },
2205
- bold: { value: '700' },
2206
- light: { value: '300' },
2207
- },
2208
- interface: {
2209
- display1: {
2210
- 'font-size': { value: '34px' },
2211
- 'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
2212
- 'line-height': { value: '40px' },
2213
- },
2214
- headline: {
2215
- 'font-size': { value: '24px' },
2216
- 'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
2217
- 'line-height': { value: '32px' },
2218
- },
2219
- title: {
2220
- 'font-size': { value: '20px' },
2221
- 'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
2222
- 'line-height': { value: '30px' },
2223
- },
2224
- subtitle2: {
2225
- 'font-size': { value: '16px' },
2226
- 'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
2227
- 'line-height': { value: '24px' },
2228
- },
2229
- subtitle1: {
2230
- 'font-size': { value: '14px' },
2231
- 'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
2232
- 'line-height': { value: '20px' },
2233
- },
2234
- body2: {
2235
- 'font-size': { value: '16px' },
2236
- 'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
2237
- 'line-height': { value: '24px' },
2238
- },
2239
- body1: {
2240
- 'font-size': { value: '14px' },
2241
- 'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
2242
- 'line-height': { value: '20px' },
2243
- },
2244
- caption: {
2245
- 'font-size': { value: '12px' },
2246
- 'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
2247
- 'line-height': { value: '16px' },
2248
- },
2249
- overline: {
2250
- 'font-size': { value: '10px' },
2251
- 'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
2252
- 'line-height': { value: '12px' },
2253
- },
2254
- },
2255
- custom: {
2256
- title1: {
2257
- 'font-size': { value: '40px' },
2258
- 'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
2259
- },
2260
- title2: {
2261
- 'font-size': { value: '30px' },
2262
- 'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
2263
- },
2264
- title3: {
2265
- 'font-size': { value: '24px' },
2266
- 'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
2267
- },
2268
- title4: {
2269
- 'font-size': { value: '20px' },
2270
- 'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
2271
- },
2272
- title5: {
2273
- 'font-size': { value: '16px' },
2274
- 'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
2275
- },
2276
- title6: {
2277
- 'font-size': { value: '14px' },
2278
- 'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
2279
- },
2280
- intro: {
2281
- 'font-size': { value: '18px' },
2282
- 'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
2283
- 'line-height': { value: '30px' },
2284
- },
2285
- 'body-large': {
2286
- 'font-size': { value: '16px' },
2287
- 'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
2288
- 'line-height': { value: '24px' },
2289
- },
2290
- body: {
2291
- 'font-size': { value: '14px' },
2292
- 'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
2293
- 'line-height': { value: '20px' },
2294
- },
2295
- quote: {
2296
- 'font-size': { value: '16px' },
2297
- 'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
2298
- 'font-style': { value: 'italic' },
2299
- 'line-height': { value: '24px' },
2300
- },
2301
- 'publish-info': {
2302
- 'font-size': { value: '14px' },
2303
- 'font-weight': { value: 'var(--lumx-typography-font-weight-regular)' },
2304
- 'line-height': { value: '20px' },
2305
- },
2306
- button: {
2307
- 'size-m': {
2308
- 'font-size': { value: '14px' },
2309
- 'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
2310
- },
2311
- 'size-s': {
2312
- 'font-size': { value: '12px' },
2313
- 'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
2314
- },
2315
- },
2316
- 'navigation-item': {
2317
- 'font-size': { value: '14px' },
2318
- 'font-weight': { value: 'var(--lumx-typography-font-weight-bold)' },
2319
- 'line-height': { value: '20px' },
2320
- },
2321
- },
2322
- },
2323
- };
2324
-
2325
- export { DESIGN_TOKENS };