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