@lumx/core 3.21.1-alpha.0 → 3.21.2-alpha.0

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