@lumx/core 2.0.3 → 2.1.0-alpha-css-test2

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 (37) hide show
  1. package/css/_retro-compat-v2.css +117 -0
  2. package/css/design-tokens.css +768 -92
  3. package/css/material.css +56 -57
  4. package/js/constants/design-tokens.js +3406 -414
  5. package/js/constants/design-tokens.min.js +1 -1
  6. package/js/constants/design-tokens.min.js.map +1 -1
  7. package/js/constants/design-tokens.ts +3386 -394
  8. package/lumx.css +1 -1
  9. package/lumx.min.css +1 -1
  10. package/package.json +2 -2
  11. package/scss/_design-tokens.scss +1670 -224
  12. package/scss/_retro-compat-v2.scss +95 -0
  13. package/scss/components/button/_index.scss +6 -42
  14. package/scss/components/button/_mixins.scss +144 -29
  15. package/scss/components/checkbox/_mixins.scss +9 -9
  16. package/scss/components/chip/_index.scss +2 -2
  17. package/scss/components/chip/_mixins.scss +2 -2
  18. package/scss/components/image-block/_index.scss +4 -5
  19. package/scss/components/input-helper/_mixins.scss +3 -3
  20. package/scss/components/input-label/_mixins.scss +3 -3
  21. package/scss/components/progress/_index.scss +2 -2
  22. package/scss/components/radio-button/_mixins.scss +12 -12
  23. package/scss/components/select/_index.scss +99 -10
  24. package/scss/components/select/_mixins.scss +6 -1
  25. package/scss/components/skeleton/_index.scss +2 -2
  26. package/scss/components/switch/_mixins.scss +15 -15
  27. package/scss/components/tabs/_index.scss +27 -55
  28. package/scss/components/tabs/_mixins.scss +66 -31
  29. package/scss/components/text-field/_index.scss +114 -9
  30. package/scss/components/text-field/_mixins.scss +42 -66
  31. package/scss/components/user-block/_index.scss +2 -9
  32. package/scss/core/base/_variables.scss +1 -0
  33. package/scss/core/state/_mixins.scss +11 -7
  34. package/scss/core/typography/_index.scss +9 -2
  35. package/scss/core/typography/_mixins.scss +13 -4
  36. package/scss/core/typography/_variables.scss +2 -1
  37. package/scss/lumx.scss +4 -0
package/scss/_design-tokens.scss CHANGED
@@ -1,110 +1,733 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 06 May 2021 08:43:34 GMT
3
+ * Generated on Thu, 23 Sep 2021 06:47:16 GMT
4
4
  */
5
5
 
6
- $lumx-button-font-weight: 700 !default;
7
- $lumx-button-text-transform: none !default;
8
- $lumx-button-variant-icon-border-radius: 4px !default;
9
- $lumx-button-size-m-font-size: 14px !default;
10
- $lumx-button-size-s-font-size: 12px !default;
11
- $lumx-checkbox-wrapper-size: 20px !default;
12
- $lumx-checkbox-control-size: 16px !default;
13
- $lumx-chip-size-m-height: 36px !default;
14
- $lumx-chip-size-m-border-radius: 18px !default;
15
- $lumx-chip-size-m-padding-vertical: 16px !default;
16
- $lumx-chip-size-s-height: 24px !default;
17
- $lumx-chip-size-s-border-radius: 12px !default;
18
- $lumx-chip-size-s-padding-vertical: 12px !default;
19
- $lumx-input-helper-font-size: 12px !default;
20
- $lumx-input-helper-font-weight: 400 !default;
21
- $lumx-input-helper-line-height: 16px !default;
22
- $lumx-input-label-font-size: 14px !default;
23
- $lumx-input-label-font-weight: 400 !default;
24
- $lumx-input-label-line-height: 20px !default;
25
- $lumx-radio-button-wrapper-size: 20px !default;
26
- $lumx-radio-button-control-size: 16px !default;
27
- $lumx-radio-button-indicator-size: 8px !default;
28
- $lumx-switch-wrapper-width: 30px !default;
29
- $lumx-switch-wrapper-height: 20px !default;
30
- $lumx-switch-control-width: 30px !default;
31
- $lumx-switch-control-height: 16px !default;
32
- $lumx-switch-indicator-size: 8px !default;
33
- $lumx-switch-indicator-offset: 4px !default;
34
- $lumx-text-field-padding-top: 0 !default;
35
- $lumx-text-field-padding-bottom: 0 !default;
36
- $lumx-text-field-header-margin-bottom: 8px !default;
37
- $lumx-text-field-label-font-size: 14px !default;
38
- $lumx-text-field-label-font-weight: 400 !default;
39
- $lumx-text-field-label-line-height: 20px !default;
40
- $lumx-text-field-wrapper-min-height: 36px !default;
41
- $lumx-text-field-wrapper-border-radius: 4px !default;
42
- $lumx-text-field-wrapper-padding-vertical: 8px !default;
43
- $lumx-text-field-wrapper-padding-horizontal: 12px !default;
44
- $lumx-text-field-state-default-border-top-width: 1px !default;
45
- $lumx-text-field-state-default-border-right-width: 1px !default;
46
- $lumx-text-field-state-default-border-bottom-width: 1px !default;
47
- $lumx-text-field-state-default-border-left-width: 1px !default;
48
- $lumx-text-field-state-default-theme-light-background-color: rgba(
6
+ $lumx-button-height: 36px !default;
7
+ $lumx-button-border-radius: var(--lumx-border-radius) !default;
8
+ $lumx-button-emphasis-high-state-default-padding-horizontal: 16px !default;
9
+ $lumx-button-emphasis-high-state-default-border-width: 0 !default;
10
+ $lumx-button-emphasis-high-state-default-theme-light-background-color: var(--lumx-color-primary-N) !default;
11
+ $lumx-button-emphasis-high-state-default-theme-light-color: #fff !default; // Neutral light color
12
+ $lumx-button-emphasis-high-state-default-theme-light-border-color: transparent !default;
13
+ $lumx-button-emphasis-high-state-default-theme-dark-background-color: #fff !default; // Neutral light color
14
+ $lumx-button-emphasis-high-state-default-theme-dark-color: var(--lumx-color-primary-N) !default;
15
+ $lumx-button-emphasis-high-state-default-theme-dark-border-color: transparent !default;
16
+ $lumx-button-emphasis-high-state-hover-padding-horizontal: 16px !default;
17
+ $lumx-button-emphasis-high-state-hover-border-width: 0 !default;
18
+ $lumx-button-emphasis-high-state-hover-theme-light-background-color: var(--lumx-color-primary-D1) !default;
19
+ $lumx-button-emphasis-high-state-hover-theme-light-color: #fff !default; // Neutral light color
20
+ $lumx-button-emphasis-high-state-hover-theme-light-border-color: transparent !default;
21
+ $lumx-button-emphasis-high-state-hover-theme-dark-background-color: rgba(
22
+ 255,
23
+ 255,
24
+ 255,
25
+ 0.9
26
+ ) !default; // Base light color with 90% opacity
27
+ $lumx-button-emphasis-high-state-hover-theme-dark-color: var(--lumx-color-primary-N) !default;
28
+ $lumx-button-emphasis-high-state-hover-theme-dark-border-color: transparent !default;
29
+ $lumx-button-emphasis-high-state-active-padding-horizontal: 16px !default;
30
+ $lumx-button-emphasis-high-state-active-border-width: 0 !default;
31
+ $lumx-button-emphasis-high-state-active-theme-light-background-color: var(--lumx-color-primary-D2) !default;
32
+ $lumx-button-emphasis-high-state-active-theme-light-color: #fff !default; // Neutral light color
33
+ $lumx-button-emphasis-high-state-active-theme-light-border-color: transparent !default;
34
+ $lumx-button-emphasis-high-state-active-theme-dark-background-color: rgba(
35
+ 255,
36
+ 255,
37
+ 255,
38
+ 0.8
39
+ ) !default; // Base light color with 80% opacity
40
+ $lumx-button-emphasis-high-state-active-theme-dark-color: var(--lumx-color-primary-N) !default;
41
+ $lumx-button-emphasis-high-state-active-theme-dark-border-color: transparent !default;
42
+ $lumx-button-emphasis-medium-state-default-padding-horizontal: 16px !default;
43
+ $lumx-button-emphasis-medium-state-default-border-width: 0 !default;
44
+ $lumx-button-emphasis-medium-state-default-theme-light-background-color: rgba(
45
+ 0,
46
+ 0,
47
+ 0,
48
+ 0.12
49
+ ) !default; // Base dark color with 12% opacity
50
+ $lumx-button-emphasis-medium-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
51
+ $lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent !default;
52
+ $lumx-button-emphasis-medium-state-default-theme-dark-background-color: rgba(
53
+ 255,
54
+ 255,
55
+ 255,
56
+ 0.2
57
+ ) !default; // Base light color with 20% opacity
58
+ $lumx-button-emphasis-medium-state-default-theme-dark-color: #fff !default; // Neutral light color
59
+ $lumx-button-emphasis-medium-state-default-theme-dark-border-color: transparent !default;
60
+ $lumx-button-emphasis-medium-state-hover-padding-horizontal: 16px !default;
61
+ $lumx-button-emphasis-medium-state-hover-border-width: 0 !default;
62
+ $lumx-button-emphasis-medium-state-hover-theme-light-background-color: rgba(
63
+ 0,
64
+ 0,
65
+ 0,
66
+ 0.2
67
+ ) !default; // Base dark color with 20% opacity
68
+ $lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
69
+ $lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent !default;
70
+ $lumx-button-emphasis-medium-state-hover-theme-dark-background-color: rgba(
71
+ 255,
72
+ 255,
73
+ 255,
74
+ 0.4
75
+ ) !default; // Base light color with 40% opacity
76
+ $lumx-button-emphasis-medium-state-hover-theme-dark-color: #fff !default; // Neutral light color
77
+ $lumx-button-emphasis-medium-state-hover-theme-dark-border-color: transparent !default;
78
+ $lumx-button-emphasis-medium-state-active-padding-horizontal: 16px !default;
79
+ $lumx-button-emphasis-medium-state-active-border-width: 0 !default;
80
+ $lumx-button-emphasis-medium-state-active-theme-light-background-color: rgba(
81
+ 0,
82
+ 0,
83
+ 0,
84
+ 0.38
85
+ ) !default; // Base dark color with 38% opacity
86
+ $lumx-button-emphasis-medium-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
87
+ $lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent !default;
88
+ $lumx-button-emphasis-medium-state-active-theme-dark-background-color: rgba(
89
+ 255,
90
+ 255,
91
+ 255,
92
+ 0.6
93
+ ) !default; // Base light color with 60% opacity
94
+ $lumx-button-emphasis-medium-state-active-theme-dark-color: #fff !default; // Neutral light color
95
+ $lumx-button-emphasis-medium-state-active-theme-dark-border-color: transparent !default;
96
+ $lumx-button-emphasis-low-state-default-padding-horizontal: 8px !default;
97
+ $lumx-button-emphasis-low-state-default-border-width: 0 !default;
98
+ $lumx-button-emphasis-low-state-default-theme-light-background-color: transparent !default;
99
+ $lumx-button-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
100
+ $lumx-button-emphasis-low-state-default-theme-light-border-color: transparent !default;
101
+ $lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent !default;
102
+ $lumx-button-emphasis-low-state-default-theme-dark-color: #fff !default; // Neutral light color
103
+ $lumx-button-emphasis-low-state-default-theme-dark-border-color: transparent !default;
104
+ $lumx-button-emphasis-low-state-hover-padding-horizontal: 8px !default;
105
+ $lumx-button-emphasis-low-state-hover-border-width: 0 !default;
106
+ $lumx-button-emphasis-low-state-hover-theme-light-background-color: rgba(
107
+ 0,
108
+ 0,
109
+ 0,
110
+ 0.12
111
+ ) !default; // Base dark color with 12% opacity
112
+ $lumx-button-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
113
+ $lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent !default;
114
+ $lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgba(
115
+ 255,
116
+ 255,
117
+ 255,
118
+ 0.2
119
+ ) !default; // Base light color with 20% opacity
120
+ $lumx-button-emphasis-low-state-hover-theme-dark-color: #fff !default; // Neutral light color
121
+ $lumx-button-emphasis-low-state-hover-theme-dark-border-color: transparent !default;
122
+ $lumx-button-emphasis-low-state-active-padding-horizontal: 8px !default;
123
+ $lumx-button-emphasis-low-state-active-border-width: 0 !default;
124
+ $lumx-button-emphasis-low-state-active-theme-light-background-color: rgba(
125
+ 0,
126
+ 0,
127
+ 0,
128
+ 0.2
129
+ ) !default; // Base dark color with 20% opacity
130
+ $lumx-button-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
131
+ $lumx-button-emphasis-low-state-active-theme-light-border-color: transparent !default;
132
+ $lumx-button-emphasis-low-state-active-theme-dark-background-color: rgba(
133
+ 255,
134
+ 255,
135
+ 255,
136
+ 0.4
137
+ ) !default; // Base light color with 40% opacity
138
+ $lumx-button-emphasis-low-state-active-theme-dark-color: #fff !default; // Neutral light color
139
+ $lumx-button-emphasis-low-state-active-theme-dark-border-color: transparent !default;
140
+ $lumx-button-emphasis-selected-state-default-padding-horizontal: 16px !default;
141
+ $lumx-button-emphasis-selected-state-default-border-width: 0 !default;
142
+ $lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5) !default;
143
+ $lumx-button-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-D2) !default;
144
+ $lumx-button-emphasis-selected-state-default-theme-light-border-color: transparent !default;
145
+ $lumx-button-emphasis-selected-state-default-theme-dark-background-color: rgba(
146
+ 255,
147
+ 255,
148
+ 255,
149
+ 0.6
150
+ ) !default; // Base light color with 60% opacity
151
+ $lumx-button-emphasis-selected-state-default-theme-dark-color: #fff !default; // Neutral light color
152
+ $lumx-button-emphasis-selected-state-default-theme-dark-border-color: transparent !default;
153
+ $lumx-button-emphasis-selected-state-hover-padding-horizontal: 16px !default;
154
+ $lumx-button-emphasis-selected-state-hover-border-width: 0 !default;
155
+ $lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
156
+ $lumx-button-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-D2) !default;
157
+ $lumx-button-emphasis-selected-state-hover-theme-light-border-color: transparent !default;
158
+ $lumx-button-emphasis-selected-state-hover-theme-dark-background-color: rgba(
159
+ 255,
160
+ 255,
161
+ 255,
162
+ 0.4
163
+ ) !default; // Base light color with 40% opacity
164
+ $lumx-button-emphasis-selected-state-hover-theme-dark-color: #fff !default; // Neutral light color
165
+ $lumx-button-emphasis-selected-state-hover-theme-dark-border-color: transparent !default;
166
+ $lumx-button-emphasis-selected-state-active-padding-horizontal: 16px !default;
167
+ $lumx-button-emphasis-selected-state-active-border-width: 0 !default;
168
+ $lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3) !default;
169
+ $lumx-button-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-D2) !default;
170
+ $lumx-button-emphasis-selected-state-active-theme-light-border-color: transparent !default;
171
+ $lumx-button-emphasis-selected-state-active-theme-dark-background-color: rgba(
172
+ 255,
173
+ 255,
174
+ 255,
175
+ 0.2
176
+ ) !default; // Base light color with 20% opacity
177
+ $lumx-button-emphasis-selected-state-active-theme-dark-color: #fff !default; // Neutral light color
178
+ $lumx-button-emphasis-selected-state-active-theme-dark-border-color: transparent !default;
179
+ $lumx-material-button-text-transform: none !default;
180
+ $lumx-material-checkbox-wrapper-size: 20px !default;
181
+ $lumx-material-checkbox-control-size: 16px !default;
182
+ $lumx-material-chip-size-m-height: 36px !default;
183
+ $lumx-material-chip-size-m-border-radius: 18px !default;
184
+ $lumx-material-chip-size-m-padding-vertical: 16px !default;
185
+ $lumx-material-chip-size-s-height: 24px !default;
186
+ $lumx-material-chip-size-s-border-radius: 12px !default;
187
+ $lumx-material-chip-size-s-padding-vertical: 12px !default;
188
+ $lumx-material-input-helper-font-size: 12px !default;
189
+ $lumx-material-input-helper-font-weight: var(--lumx-typography-font-weight-regular) !default;
190
+ $lumx-material-input-helper-line-height: 16px !default;
191
+ $lumx-material-input-label-font-size: 14px !default;
192
+ $lumx-material-input-label-font-weight: var(--lumx-typography-font-weight-regular) !default;
193
+ $lumx-material-input-label-line-height: 20px !default;
194
+ $lumx-material-progress-bounce: block !default;
195
+ $lumx-material-progress-rotate: none !default;
196
+ $lumx-material-radio-button-wrapper-size: 20px !default;
197
+ $lumx-material-radio-button-control-size: 16px !default;
198
+ $lumx-material-radio-button-indicator-size: 8px !default;
199
+ $lumx-material-switch-wrapper-width: 30px !default;
200
+ $lumx-material-switch-wrapper-height: 20px !default;
201
+ $lumx-material-switch-control-width: 30px !default;
202
+ $lumx-material-switch-control-height: 16px !default;
203
+ $lumx-material-switch-indicator-size: 8px !default;
204
+ $lumx-material-switch-indicator-offset: 4px !default;
205
+ $lumx-material-text-field-padding-top: 0 !default;
206
+ $lumx-material-text-field-padding-bottom: 0 !default;
207
+ $lumx-material-text-field-header-wrapper-margin-bottom: 8px !default;
208
+ $lumx-material-text-field-header-label-font-size: 14px !default;
209
+ $lumx-material-text-field-header-label-font-weight: var(--lumx-typography-font-weight-regular) !default;
210
+ $lumx-material-text-field-header-label-line-height: 20px !default;
211
+ $lumx-material-text-field-input-content-font-size: 14px !default;
212
+ $lumx-material-text-field-input-content-font-weight: var(--lumx-typography-font-weight-regular) !default;
213
+ $lumx-material-text-field-input-content-line-height: 20px !default;
214
+ $lumx-navigation-item-padding-horizontal: 8px !default;
215
+ $lumx-navigation-item-min-height: 36px !default;
216
+ $lumx-navigation-item-border-radius: var(--lumx-border-radius) !default;
217
+ $lumx-navigation-item-emphasis-low-state-default-border-top-width: 0 !default;
218
+ $lumx-navigation-item-emphasis-low-state-default-border-right-width: 0 !default;
219
+ $lumx-navigation-item-emphasis-low-state-default-border-bottom-width: 0 !default;
220
+ $lumx-navigation-item-emphasis-low-state-default-border-left-width: 0 !default;
221
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-background-color: transparent !default;
222
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-border-color: rgba(
223
+ 0,
224
+ 0,
225
+ 0,
226
+ 0.12
227
+ ) !default; // Base dark color with 12% opacity
228
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: rgba(
229
+ 0,
230
+ 0,
231
+ 0,
232
+ 0.87
233
+ ) !default; // Neutral dark color
234
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: rgba(
235
+ 0,
236
+ 0,
237
+ 0,
238
+ 0.87
239
+ ) !default; // Neutral dark color
240
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-background-color: transparent !default;
241
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color: rgba(
242
+ 0,
243
+ 0,
244
+ 0,
245
+ 0.87
246
+ ) !default; // Neutral dark color
247
+ $lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent !default;
248
+ $lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: rgba(
249
+ 255,
250
+ 255,
251
+ 255,
252
+ 0.2
253
+ ) !default; // Base light color with 20% opacity
254
+ $lumx-navigation-item-emphasis-low-state-default-theme-dark-icon-color: #fff !default; // Neutral light color
255
+ $lumx-navigation-item-emphasis-low-state-default-theme-dark-label-color: #fff !default; // Neutral light color
256
+ $lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-background-color: transparent !default;
257
+ $lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-color: #fff !default; // Neutral light color
258
+ $lumx-navigation-item-emphasis-low-state-hover-border-top-width: 0 !default;
259
+ $lumx-navigation-item-emphasis-low-state-hover-border-right-width: 0 !default;
260
+ $lumx-navigation-item-emphasis-low-state-hover-border-bottom-width: 0 !default;
261
+ $lumx-navigation-item-emphasis-low-state-hover-border-left-width: 0 !default;
262
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color: rgba(
263
+ 0,
264
+ 0,
265
+ 0,
266
+ 0.12
267
+ ) !default; // Base dark color with 12% opacity
268
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color: rgba(
269
+ 0,
270
+ 0,
271
+ 0,
272
+ 0.12
273
+ ) !default; // Base dark color with 12% opacity
274
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: rgba(
275
+ 0,
276
+ 0,
277
+ 0,
278
+ 0.87
279
+ ) !default; // Neutral dark color
280
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: rgba(
281
+ 0,
282
+ 0,
283
+ 0,
284
+ 0.87
285
+ ) !default; // Neutral dark color
286
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color: rgba(
287
+ 0,
288
+ 0,
289
+ 0,
290
+ 0.12
291
+ ) !default; // Base dark color with 12% opacity
292
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color: rgba(
293
+ 0,
294
+ 0,
295
+ 0,
296
+ 0.87
297
+ ) !default; // Neutral dark color
298
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: rgba(
299
+ 255,
300
+ 255,
301
+ 255,
302
+ 0.2
303
+ ) !default; // Base light color with 20% opacity
304
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color: rgba(
305
+ 255,
306
+ 255,
307
+ 255,
308
+ 0.2
309
+ ) !default; // Base light color with 20% opacity
310
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color: #fff !default; // Neutral light color
311
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color: #fff !default; // Neutral light color
312
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-background-color: rgba(
313
+ 255,
314
+ 255,
315
+ 255,
316
+ 0.2
317
+ ) !default; // Base light color with 20% opacity
318
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-color: #fff !default; // Neutral light color
319
+ $lumx-navigation-item-emphasis-low-state-active-border-top-width: 0 !default;
320
+ $lumx-navigation-item-emphasis-low-state-active-border-right-width: 0 !default;
321
+ $lumx-navigation-item-emphasis-low-state-active-border-bottom-width: 0 !default;
322
+ $lumx-navigation-item-emphasis-low-state-active-border-left-width: 0 !default;
323
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-background-color: rgba(
324
+ 0,
325
+ 0,
326
+ 0,
327
+ 0.2
328
+ ) !default; // Base dark color with 20% opacity
329
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-border-color: rgba(
330
+ 0,
331
+ 0,
332
+ 0,
333
+ 0.12
334
+ ) !default; // Base dark color with 12% opacity
335
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: rgba(
336
+ 0,
337
+ 0,
338
+ 0,
339
+ 0.87
340
+ ) !default; // Neutral dark color
341
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: rgba(
342
+ 0,
343
+ 0,
344
+ 0,
345
+ 0.87
346
+ ) !default; // Neutral dark color
347
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color: rgba(
348
+ 0,
349
+ 0,
350
+ 0,
351
+ 0.2
352
+ ) !default; // Base dark color with 20% opacity
353
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color: rgba(
354
+ 0,
355
+ 0,
356
+ 0,
357
+ 0.87
358
+ ) !default; // Neutral dark color
359
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: rgba(
360
+ 255,
361
+ 255,
362
+ 255,
363
+ 0.4
364
+ ) !default; // Base light color with 40% opacity
365
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color: rgba(
366
+ 255,
367
+ 255,
368
+ 255,
369
+ 0.2
370
+ ) !default; // Base light color with 20% opacity
371
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color: #fff !default; // Neutral light color
372
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color: #fff !default; // Neutral light color
373
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color: rgba(
374
+ 255,
375
+ 255,
376
+ 255,
377
+ 0.4
378
+ ) !default; // Base light color with 40% opacity
379
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color: #fff !default; // Neutral light color
380
+ $lumx-navigation-item-emphasis-selected-state-default-border-top-width: 0 !default;
381
+ $lumx-navigation-item-emphasis-selected-state-default-border-right-width: 0 !default;
382
+ $lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 0 !default;
383
+ $lumx-navigation-item-emphasis-selected-state-default-border-left-width: 0 !default;
384
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(
385
+ --lumx-color-primary-L5
386
+ ) !default;
387
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
388
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-icon-color: var(--lumx-color-primary-D2) !default;
389
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-label-color: var(--lumx-color-primary-D2) !default;
390
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-background-color: transparent !default;
391
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-color: var(--lumx-color-primary-D2) !default;
392
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color: rgba(
393
+ 255,
394
+ 255,
395
+ 255,
396
+ 0.6
397
+ ) !default; // Base light color with 60% opacity
398
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color: rgba(
399
+ 255,
400
+ 255,
401
+ 255,
402
+ 0.2
403
+ ) !default; // Base light color with 20% opacity
404
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color: #fff !default; // Neutral light color
405
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color: #fff !default; // Neutral light color
406
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-background-color: transparent !default;
407
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-color: #fff !default; // Neutral light color
408
+ $lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 0 !default;
409
+ $lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 0 !default;
410
+ $lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 0 !default;
411
+ $lumx-navigation-item-emphasis-selected-state-hover-border-left-width: 0 !default;
412
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
413
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
414
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-icon-color: var(--lumx-color-primary-D2) !default;
415
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-label-color: var(--lumx-color-primary-D2) !default;
416
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-background-color: var(
417
+ --lumx-color-primary-L4
418
+ ) !default;
419
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-color: var(--lumx-color-primary-D2) !default;
420
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color: rgba(
421
+ 255,
422
+ 255,
423
+ 255,
424
+ 0.4
425
+ ) !default; // Base light color with 40% opacity
426
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color: rgba(
427
+ 255,
428
+ 255,
429
+ 255,
430
+ 0.2
431
+ ) !default; // Base light color with 20% opacity
432
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color: #fff !default; // Neutral light color
433
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color: #fff !default; // Neutral light color
434
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: rgba(
435
+ 255,
436
+ 255,
437
+ 255,
438
+ 0.4
439
+ ) !default; // Base light color with 40% opacity
440
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color: #fff !default; // Neutral light color
441
+ $lumx-navigation-item-emphasis-selected-state-active-border-top-width: 0 !default;
442
+ $lumx-navigation-item-emphasis-selected-state-active-border-right-width: 0 !default;
443
+ $lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 0 !default;
444
+ $lumx-navigation-item-emphasis-selected-state-active-border-left-width: 0 !default;
445
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(
446
+ --lumx-color-primary-L3
447
+ ) !default;
448
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
449
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-icon-color: var(--lumx-color-primary-D2) !default;
450
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-label-color: var(--lumx-color-primary-D2) !default;
451
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-background-color: var(
452
+ --lumx-color-primary-L3
453
+ ) !default;
454
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-color: var(--lumx-color-primary-D2) !default;
455
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color: rgba(
456
+ 255,
457
+ 255,
458
+ 255,
459
+ 0.2
460
+ ) !default; // Base light color with 20% opacity
461
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color: rgba(
462
+ 255,
463
+ 255,
464
+ 255,
465
+ 0.2
466
+ ) !default; // Base light color with 20% opacity
467
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color: #fff !default; // Neutral light color
468
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: #fff !default; // Neutral light color
469
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: rgba(
470
+ 255,
471
+ 255,
472
+ 255,
473
+ 0.2
474
+ ) !default; // Base light color with 20% opacity
475
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: #fff !default; // Neutral light color
476
+ $lumx-tabs-link-height: 48px !default;
477
+ $lumx-tabs-link-border-radius: 0 !default;
478
+ $lumx-tabs-link-emphasis-low-state-default-border-top-width: 0 !default;
479
+ $lumx-tabs-link-emphasis-low-state-default-border-right-width: 0 !default;
480
+ $lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 2px !default;
481
+ $lumx-tabs-link-emphasis-low-state-default-border-left-width: 0 !default;
482
+ $lumx-tabs-link-emphasis-low-state-default-theme-light-background-color: transparent !default;
483
+ $lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
484
+ $lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: rgba(
485
+ 0,
486
+ 0,
487
+ 0,
488
+ 0.12
489
+ ) !default; // Base dark color with 12% opacity
490
+ $lumx-tabs-link-emphasis-low-state-default-theme-dark-background-color: transparent !default;
491
+ $lumx-tabs-link-emphasis-low-state-default-theme-dark-color: #fff !default; // Neutral light color
492
+ $lumx-tabs-link-emphasis-low-state-default-theme-dark-border-color: rgba(
493
+ 255,
494
+ 255,
495
+ 255,
496
+ 0.2
497
+ ) !default; // Base light color with 20% opacity
498
+ $lumx-tabs-link-emphasis-low-state-hover-border-top-width: 0 !default;
499
+ $lumx-tabs-link-emphasis-low-state-hover-border-right-width: 0 !default;
500
+ $lumx-tabs-link-emphasis-low-state-hover-border-bottom-width: 2px !default;
501
+ $lumx-tabs-link-emphasis-low-state-hover-border-left-width: 0 !default;
502
+ $lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color: rgba(
503
+ 0,
504
+ 0,
505
+ 0,
506
+ 0.12
507
+ ) !default; // Base dark color with 12% opacity
508
+ $lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
509
+ $lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: rgba(
510
+ 0,
511
+ 0,
512
+ 0,
513
+ 0.12
514
+ ) !default; // Base dark color with 12% opacity
515
+ $lumx-tabs-link-emphasis-low-state-hover-theme-dark-background-color: rgba(
516
+ 255,
517
+ 255,
518
+ 255,
519
+ 0.2
520
+ ) !default; // Base light color with 20% opacity
521
+ $lumx-tabs-link-emphasis-low-state-hover-theme-dark-color: #fff !default; // Neutral light color
522
+ $lumx-tabs-link-emphasis-low-state-hover-theme-dark-border-color: rgba(
523
+ 255,
524
+ 255,
525
+ 255,
526
+ 0.2
527
+ ) !default; // Base light color with 20% opacity
528
+ $lumx-tabs-link-emphasis-low-state-active-border-top-width: 0 !default;
529
+ $lumx-tabs-link-emphasis-low-state-active-border-right-width: 0 !default;
530
+ $lumx-tabs-link-emphasis-low-state-active-border-bottom-width: 2px !default;
531
+ $lumx-tabs-link-emphasis-low-state-active-border-left-width: 0 !default;
532
+ $lumx-tabs-link-emphasis-low-state-active-theme-light-background-color: rgba(
533
+ 0,
534
+ 0,
535
+ 0,
536
+ 0.2
537
+ ) !default; // Base dark color with 20% opacity
538
+ $lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
539
+ $lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: rgba(
540
+ 0,
541
+ 0,
542
+ 0,
543
+ 0.12
544
+ ) !default; // Base dark color with 12% opacity
545
+ $lumx-tabs-link-emphasis-low-state-active-theme-dark-background-color: rgba(
546
+ 255,
547
+ 255,
548
+ 255,
549
+ 0.4
550
+ ) !default; // Base light color with 40% opacity
551
+ $lumx-tabs-link-emphasis-low-state-active-theme-dark-color: #fff !default; // Neutral light color
552
+ $lumx-tabs-link-emphasis-low-state-active-theme-dark-border-color: rgba(
553
+ 255,
554
+ 255,
555
+ 255,
556
+ 0.2
557
+ ) !default; // Base light color with 20% opacity
558
+ $lumx-tabs-link-emphasis-selected-state-default-border-top-width: 0 !default;
559
+ $lumx-tabs-link-emphasis-selected-state-default-border-right-width: 0 !default;
560
+ $lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 2px !default;
561
+ $lumx-tabs-link-emphasis-selected-state-default-border-left-width: 0 !default;
562
+ $lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: transparent !default;
563
+ $lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
564
+ $lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
565
+ $lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent !default;
566
+ $lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: #fff !default; // Neutral light color
567
+ $lumx-tabs-link-emphasis-selected-state-default-theme-dark-border-color: #fff !default; // Neutral light color
568
+ $lumx-tabs-link-emphasis-selected-state-hover-border-top-width: 0 !default;
569
+ $lumx-tabs-link-emphasis-selected-state-hover-border-right-width: 0 !default;
570
+ $lumx-tabs-link-emphasis-selected-state-hover-border-bottom-width: 2px !default;
571
+ $lumx-tabs-link-emphasis-selected-state-hover-border-left-width: 0 !default;
572
+ $lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color: rgba(
573
+ 0,
574
+ 0,
575
+ 0,
576
+ 0.12
577
+ ) !default; // Base dark color with 12% opacity
578
+ $lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
579
+ $lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
580
+ $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: rgba(
581
+ 255,
582
+ 255,
583
+ 255,
584
+ 0.2
585
+ ) !default; // Base light color with 20% opacity
586
+ $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-color: #fff !default; // Neutral light color
587
+ $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-border-color: #fff !default; // Neutral light color
588
+ $lumx-tabs-link-emphasis-selected-state-active-border-top-width: 0 !default;
589
+ $lumx-tabs-link-emphasis-selected-state-active-border-right-width: 0 !default;
590
+ $lumx-tabs-link-emphasis-selected-state-active-border-bottom-width: 2px !default;
591
+ $lumx-tabs-link-emphasis-selected-state-active-border-left-width: 0 !default;
592
+ $lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color: rgba(
593
+ 0,
594
+ 0,
595
+ 0,
596
+ 0.2
597
+ ) !default; // Base dark color with 20% opacity
598
+ $lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
599
+ $lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
600
+ $lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: rgba(
601
+ 255,
602
+ 255,
603
+ 255,
604
+ 0.4
605
+ ) !default; // Base light color with 40% opacity
606
+ $lumx-tabs-link-emphasis-selected-state-active-theme-dark-color: #fff !default; // Neutral light color
607
+ $lumx-tabs-link-emphasis-selected-state-active-theme-dark-border-color: #fff !default; // Neutral light color
608
+ $lumx-text-field-input-min-height: 36px !default;
609
+ $lumx-text-field-input-padding-horizontal: 12px !default;
610
+ $lumx-text-field-input-border-radius: 4px !default;
611
+ $lumx-text-field-state-default-input-border-top-width: 1px !default;
612
+ $lumx-text-field-state-default-input-border-right-width: 1px !default;
613
+ $lumx-text-field-state-default-input-border-bottom-width: 1px !default;
614
+ $lumx-text-field-state-default-input-border-left-width: 1px !default;
615
+ $lumx-text-field-state-default-theme-light-header-label-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
616
+ $lumx-text-field-state-default-theme-light-input-background-color: rgba(
49
617
  0,
50
618
  0,
51
619
  0,
52
620
  0.05
53
621
  ) !default; // Base dark color with 5% opacity
54
- $lumx-text-field-state-default-theme-light-border-color: rgba(
622
+ $lumx-text-field-state-default-theme-light-input-border-color: rgba(
55
623
  0,
56
624
  0,
57
625
  0,
58
626
  0.2
59
627
  ) !default; // Base dark color with 20% opacity
60
- $lumx-text-field-state-default-theme-dark-background-color: rgba(
628
+ $lumx-text-field-state-default-theme-light-input-content-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
629
+ $lumx-text-field-state-default-theme-light-input-placeholder-color: rgba(
630
+ 0,
631
+ 0,
632
+ 0,
633
+ 0.54
634
+ ) !default; // Base dark color with 54% opacity
635
+ $lumx-text-field-state-default-theme-dark-header-label-color: #fff !default; // Neutral light color
636
+ $lumx-text-field-state-default-theme-dark-input-background-color: rgba(
61
637
  255,
62
638
  255,
63
639
  255,
64
640
  0.1
65
641
  ) !default; // Base light color with 10% opacity
66
- $lumx-text-field-state-default-theme-dark-border-color: rgba(
642
+ $lumx-text-field-state-default-theme-dark-input-border-color: rgba(
67
643
  255,
68
644
  255,
69
645
  255,
70
646
  0.4
71
647
  ) !default; // Base light color with 40% opacity
72
- $lumx-text-field-state-hover-theme-light-background-color: rgba(
648
+ $lumx-text-field-state-default-theme-dark-input-content-color: #fff !default; // Neutral light color
649
+ $lumx-text-field-state-default-theme-dark-input-placeholder-color: rgba(
650
+ 255,
651
+ 255,
652
+ 255,
653
+ 0.8
654
+ ) !default; // Base light color with 80% opacity
655
+ $lumx-text-field-state-hover-input-border-top-width: 1px !default;
656
+ $lumx-text-field-state-hover-input-border-right-width: 1px !default;
657
+ $lumx-text-field-state-hover-input-border-bottom-width: 1px !default;
658
+ $lumx-text-field-state-hover-input-border-left-width: 1px !default;
659
+ $lumx-text-field-state-hover-theme-light-input-background-color: rgba(
73
660
  0,
74
661
  0,
75
662
  0,
76
663
  0.12
77
664
  ) !default; // Base dark color with 12% opacity
78
- $lumx-text-field-state-hover-theme-dark-background-color: rgba(
665
+ $lumx-text-field-state-hover-theme-light-input-border-color: rgba(
666
+ 0,
667
+ 0,
668
+ 0,
669
+ 0.2
670
+ ) !default; // Base dark color with 20% opacity
671
+ $lumx-text-field-state-hover-theme-light-input-content-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
672
+ $lumx-text-field-state-hover-theme-light-input-placeholder-color: rgba(
673
+ 0,
674
+ 0,
675
+ 0,
676
+ 0.54
677
+ ) !default; // Base dark color with 54% opacity
678
+ $lumx-text-field-state-hover-theme-dark-input-background-color: rgba(
79
679
  255,
80
680
  255,
81
681
  255,
82
682
  0.2
83
683
  ) !default; // Base light color with 20% opacity
84
- $lumx-text-field-state-focus-border-top-width: 2px !default;
85
- $lumx-text-field-state-focus-border-right-width: 2px !default;
86
- $lumx-text-field-state-focus-border-bottom-width: 2px !default;
87
- $lumx-text-field-state-focus-border-left-width: 2px !default;
88
- $lumx-text-field-state-focus-theme-light-background-color: #fff !default; // Neutral light color
89
- $lumx-text-field-state-focus-theme-light-border-color: rgba(
684
+ $lumx-text-field-state-hover-theme-dark-input-border-color: rgba(
685
+ 255,
686
+ 255,
687
+ 255,
688
+ 0.4
689
+ ) !default; // Base light color with 40% opacity
690
+ $lumx-text-field-state-hover-theme-dark-input-content-color: #fff !default; // Neutral light color
691
+ $lumx-text-field-state-hover-theme-dark-input-placeholder-color: rgba(
692
+ 255,
693
+ 255,
694
+ 255,
695
+ 0.8
696
+ ) !default; // Base light color with 80% opacity
697
+ $lumx-text-field-state-focus-input-border-top-width: 2px !default;
698
+ $lumx-text-field-state-focus-input-border-right-width: 2px !default;
699
+ $lumx-text-field-state-focus-input-border-bottom-width: 2px !default;
700
+ $lumx-text-field-state-focus-input-border-left-width: 2px !default;
701
+ $lumx-text-field-state-focus-theme-light-header-label-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
702
+ $lumx-text-field-state-focus-theme-light-input-background-color: #fff !default; // Neutral light color
703
+ $lumx-text-field-state-focus-theme-light-input-border-color: rgba(
90
704
  33,
91
705
  150,
92
706
  243,
93
707
  0.6
94
708
  ) !default; // Base blue color with 60% opacity
95
- $lumx-text-field-state-focus-theme-dark-background-color: transparent !default;
96
- $lumx-text-field-state-focus-theme-dark-border-color: rgba(
709
+ $lumx-text-field-state-focus-theme-light-input-content-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
710
+ $lumx-text-field-state-focus-theme-light-input-placeholder-color: rgba(
711
+ 0,
712
+ 0,
713
+ 0,
714
+ 0.54
715
+ ) !default; // Base dark color with 54% opacity
716
+ $lumx-text-field-state-focus-theme-dark-header-label-color: #fff !default; // Neutral light color
717
+ $lumx-text-field-state-focus-theme-dark-input-background-color: transparent !default;
718
+ $lumx-text-field-state-focus-theme-dark-input-border-color: rgba(
719
+ 255,
720
+ 255,
721
+ 255,
722
+ 0.8
723
+ ) !default; // Base light color with 80% opacity
724
+ $lumx-text-field-state-focus-theme-dark-input-content-color: #fff !default; // Neutral light color
725
+ $lumx-text-field-state-focus-theme-dark-input-placeholder-color: rgba(
97
726
  255,
98
727
  255,
99
728
  255,
100
729
  0.8
101
730
  ) !default; // Base light color with 80% opacity
102
- $lumx-text-field-input-icon-size: 20px !default;
103
- $lumx-text-field-input-font-size: 14px !default;
104
- $lumx-text-field-input-font-weight: 400 !default;
105
- $lumx-text-field-input-line-height: 20px !default;
106
- $lumx-text-field-input-validity-size: 14px !default;
107
- $lumx-text-field-input-clear-size: 24px !default;
108
731
  $lumx-border-radius: 4px !default;
109
732
  $lumx-color-dark-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
110
733
  $lumx-color-dark-L1: rgba(0, 0, 0, 0.8) !default; // Base dark color with 80% opacity
@@ -213,8 +836,6 @@ $lumx-color-orange-L3: rgba(255, 179, 0, 0.6) !default; // Base yellow color wit
213
836
  $lumx-color-orange-L4: rgba(255, 179, 0, 0.4) !default; // Base yellow color with 40% opacity
214
837
  $lumx-color-orange-L5: rgba(255, 179, 0, 0.2) !default; // Base yellow color with 20% opacity
215
838
  $lumx-color-orange-L6: rgba(255, 179, 0, 0.1) !default; // Base yellow color with 10% opacity
216
- $lumx-progress-bounce: block !default;
217
- $lumx-progress-rotate: none !default;
218
839
  $lumx-size-xxs: 14px !default;
219
840
  $lumx-size-xs: 20px !default;
220
841
  $lumx-size-s: 24px !default;
@@ -229,172 +850,915 @@ $lumx-spacing-unit-big: 16px !default;
229
850
  $lumx-spacing-unit-huge: 24px !default;
230
851
  $lumx-typography-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans',
231
852
  'Droid Sans', 'Helvetica Neue', sans-serif !default;
232
- $lumx-typography-style-display1-font-size: 34px !default;
233
- $lumx-typography-style-display1-font-weight: 700 !default;
234
- $lumx-typography-style-display1-line-height: 40px !default;
235
- $lumx-typography-style-headline-font-size: 24px !default;
236
- $lumx-typography-style-headline-font-weight: 700 !default;
237
- $lumx-typography-style-headline-line-height: 32px !default;
238
- $lumx-typography-style-title-font-size: 20px !default;
239
- $lumx-typography-style-title-font-weight: 700 !default;
240
- $lumx-typography-style-title-line-height: 30px !default;
241
- $lumx-typography-style-subtitle2-font-size: 16px !default;
242
- $lumx-typography-style-subtitle2-font-weight: 700 !default;
243
- $lumx-typography-style-subtitle2-line-height: 24px !default;
244
- $lumx-typography-style-subtitle1-font-size: 14px !default;
245
- $lumx-typography-style-subtitle1-font-weight: 700 !default;
246
- $lumx-typography-style-subtitle1-line-height: 20px !default;
247
- $lumx-typography-style-body2-font-size: 16px !default;
248
- $lumx-typography-style-body2-font-weight: 400 !default;
249
- $lumx-typography-style-body2-line-height: 24px !default;
250
- $lumx-typography-style-body1-font-size: 14px !default;
251
- $lumx-typography-style-body1-font-weight: 400 !default;
252
- $lumx-typography-style-body1-line-height: 20px !default;
253
- $lumx-typography-style-caption-font-size: 12px !default;
254
- $lumx-typography-style-caption-font-weight: 400 !default;
255
- $lumx-typography-style-caption-line-height: 16px !default;
256
- $lumx-typography-style-overline-font-size: 10px !default;
257
- $lumx-typography-style-overline-font-weight: 700 !default;
258
- $lumx-typography-style-overline-line-height: 12px !default;
853
+ $lumx-typography-font-weight-regular: 400 !default;
854
+ $lumx-typography-font-weight-bold: 700 !default;
855
+ $lumx-typography-font-weight-light: 300 !default;
856
+ $lumx-typography-interface-display1-font-size: 34px !default;
857
+ $lumx-typography-interface-display1-font-weight: var(--lumx-typography-font-weight-bold) !default;
858
+ $lumx-typography-interface-display1-line-height: 40px !default;
859
+ $lumx-typography-interface-headline-font-size: 24px !default;
860
+ $lumx-typography-interface-headline-font-weight: var(--lumx-typography-font-weight-bold) !default;
861
+ $lumx-typography-interface-headline-line-height: 32px !default;
862
+ $lumx-typography-interface-title-font-size: 20px !default;
863
+ $lumx-typography-interface-title-font-weight: var(--lumx-typography-font-weight-bold) !default;
864
+ $lumx-typography-interface-title-line-height: 30px !default;
865
+ $lumx-typography-interface-subtitle2-font-size: 16px !default;
866
+ $lumx-typography-interface-subtitle2-font-weight: var(--lumx-typography-font-weight-bold) !default;
867
+ $lumx-typography-interface-subtitle2-line-height: 24px !default;
868
+ $lumx-typography-interface-subtitle1-font-size: 14px !default;
869
+ $lumx-typography-interface-subtitle1-font-weight: var(--lumx-typography-font-weight-bold) !default;
870
+ $lumx-typography-interface-subtitle1-line-height: 20px !default;
871
+ $lumx-typography-interface-body2-font-size: 16px !default;
872
+ $lumx-typography-interface-body2-font-weight: var(--lumx-typography-font-weight-regular) !default;
873
+ $lumx-typography-interface-body2-line-height: 24px !default;
874
+ $lumx-typography-interface-body1-font-size: 14px !default;
875
+ $lumx-typography-interface-body1-font-weight: var(--lumx-typography-font-weight-regular) !default;
876
+ $lumx-typography-interface-body1-line-height: 20px !default;
877
+ $lumx-typography-interface-caption-font-size: 12px !default;
878
+ $lumx-typography-interface-caption-font-weight: var(--lumx-typography-font-weight-regular) !default;
879
+ $lumx-typography-interface-caption-line-height: 16px !default;
880
+ $lumx-typography-interface-overline-font-size: 10px !default;
881
+ $lumx-typography-interface-overline-font-weight: var(--lumx-typography-font-weight-bold) !default;
882
+ $lumx-typography-interface-overline-line-height: 12px !default;
883
+ $lumx-typography-custom-title1-font-family: var(--lumx-typography-font-family) !default;
884
+ $lumx-typography-custom-title1-font-size: 40px !default;
885
+ $lumx-typography-custom-title1-font-weight: var(--lumx-typography-font-weight-bold) !default;
886
+ $lumx-typography-custom-title1-line-height: 50px !default;
887
+ $lumx-typography-custom-title2-font-family: var(--lumx-typography-font-family) !default;
888
+ $lumx-typography-custom-title2-font-size: 30px !default;
889
+ $lumx-typography-custom-title2-font-weight: var(--lumx-typography-font-weight-bold) !default;
890
+ $lumx-typography-custom-title2-line-height: 40px !default;
891
+ $lumx-typography-custom-title3-font-family: var(--lumx-typography-font-family) !default;
892
+ $lumx-typography-custom-title3-font-size: 24px !default;
893
+ $lumx-typography-custom-title3-font-weight: var(--lumx-typography-font-weight-bold) !default;
894
+ $lumx-typography-custom-title3-line-height: 32px !default;
895
+ $lumx-typography-custom-title4-font-family: var(--lumx-typography-font-family) !default;
896
+ $lumx-typography-custom-title4-font-size: 20px !default;
897
+ $lumx-typography-custom-title4-font-weight: var(--lumx-typography-font-weight-bold) !default;
898
+ $lumx-typography-custom-title4-line-height: 30px !default;
899
+ $lumx-typography-custom-title5-font-family: var(--lumx-typography-font-family) !default;
900
+ $lumx-typography-custom-title5-font-size: 16px !default;
901
+ $lumx-typography-custom-title5-font-weight: var(--lumx-typography-font-weight-bold) !default;
902
+ $lumx-typography-custom-title5-line-height: 24px !default;
903
+ $lumx-typography-custom-title6-font-family: var(--lumx-typography-font-family) !default;
904
+ $lumx-typography-custom-title6-font-size: 14px !default;
905
+ $lumx-typography-custom-title6-font-weight: var(--lumx-typography-font-weight-bold) !default;
906
+ $lumx-typography-custom-title6-line-height: 20px !default;
907
+ $lumx-typography-custom-intro-font-family: var(--lumx-typography-font-family) !default;
908
+ $lumx-typography-custom-intro-font-size: 18px !default;
909
+ $lumx-typography-custom-intro-font-weight: var(--lumx-typography-font-weight-bold) !default;
910
+ $lumx-typography-custom-intro-line-height: 30px !default;
911
+ $lumx-typography-custom-body-large-font-family: var(--lumx-typography-font-family) !default;
912
+ $lumx-typography-custom-body-large-font-size: 16px !default;
913
+ $lumx-typography-custom-body-large-font-weight: var(--lumx-typography-font-weight-regular) !default;
914
+ $lumx-typography-custom-body-large-line-height: 24px !default;
915
+ $lumx-typography-custom-body-font-family: var(--lumx-typography-font-family) !default;
916
+ $lumx-typography-custom-body-font-size: 14px !default;
917
+ $lumx-typography-custom-body-font-weight: var(--lumx-typography-font-weight-regular) !default;
918
+ $lumx-typography-custom-body-line-height: 20px !default;
919
+ $lumx-typography-custom-quote-font-family: var(--lumx-typography-font-family) !default;
920
+ $lumx-typography-custom-quote-font-size: 16px !default;
921
+ $lumx-typography-custom-quote-font-weight: var(--lumx-typography-font-weight-light) !default;
922
+ $lumx-typography-custom-quote-font-style: italic !default;
923
+ $lumx-typography-custom-quote-line-height: 24px !default;
924
+ $lumx-typography-custom-publish-info-font-family: var(--lumx-typography-font-family) !default;
925
+ $lumx-typography-custom-publish-info-font-size: 14px !default;
926
+ $lumx-typography-custom-publish-info-font-weight: var(--lumx-typography-font-weight-regular) !default;
927
+ $lumx-typography-custom-publish-info-line-height: 20px !default;
928
+ $lumx-typography-custom-button-size-m-font-family: var(--lumx-typography-font-family) !default;
929
+ $lumx-typography-custom-button-size-m-font-size: 14px !default;
930
+ $lumx-typography-custom-button-size-m-font-weight: var(--lumx-typography-font-weight-bold) !default;
931
+ $lumx-typography-custom-button-size-s-font-family: var(--lumx-typography-font-family) !default;
932
+ $lumx-typography-custom-button-size-s-font-size: 12px !default;
933
+ $lumx-typography-custom-button-size-s-font-weight: var(--lumx-typography-font-weight-bold) !default;
259
934
 
260
935
  $lumx-design-tokens: (
261
936
  'button': (
262
- 'font-weight': $lumx-button-font-weight,
263
- 'text-transform': $lumx-button-text-transform,
264
- 'variant-icon-border-radius': $lumx-button-variant-icon-border-radius,
265
- 'size-m-font-size': $lumx-button-size-m-font-size,
266
- 'size-s-font-size': $lumx-button-size-s-font-size,
267
- ),
268
- 'checkbox': (
269
- 'wrapper-size': $lumx-checkbox-wrapper-size,
270
- 'control-size': $lumx-checkbox-control-size,
271
- ),
272
- 'chip': (
273
- 'size-m': (
274
- 'height': $lumx-chip-size-m-height,
275
- 'border-radius': $lumx-chip-size-m-border-radius,
276
- 'padding-vertical': $lumx-chip-size-m-padding-vertical,
937
+ 'height': $lumx-button-height,
938
+ 'border-radius': $lumx-button-border-radius,
939
+ 'emphasis-high': (
940
+ 'state-default': (
941
+ 'padding': (
942
+ 'horizontal': $lumx-button-emphasis-high-state-default-padding-horizontal,
943
+ ),
944
+ 'border-width': $lumx-button-emphasis-high-state-default-border-width,
945
+ 'theme-light': (
946
+ 'background-color': $lumx-button-emphasis-high-state-default-theme-light-background-color,
947
+ 'color': $lumx-button-emphasis-high-state-default-theme-light-color,
948
+ 'border-color': $lumx-button-emphasis-high-state-default-theme-light-border-color,
949
+ ),
950
+ 'theme-dark': (
951
+ 'background-color': $lumx-button-emphasis-high-state-default-theme-dark-background-color,
952
+ 'color': $lumx-button-emphasis-high-state-default-theme-dark-color,
953
+ 'border-color': $lumx-button-emphasis-high-state-default-theme-dark-border-color,
954
+ ),
955
+ ),
956
+ 'state-hover': (
957
+ 'padding': (
958
+ 'horizontal': $lumx-button-emphasis-high-state-hover-padding-horizontal,
959
+ ),
960
+ 'border-width': $lumx-button-emphasis-high-state-hover-border-width,
961
+ 'theme-light': (
962
+ 'background-color': $lumx-button-emphasis-high-state-hover-theme-light-background-color,
963
+ 'color': $lumx-button-emphasis-high-state-hover-theme-light-color,
964
+ 'border-color': $lumx-button-emphasis-high-state-hover-theme-light-border-color,
965
+ ),
966
+ 'theme-dark': (
967
+ 'background-color': $lumx-button-emphasis-high-state-hover-theme-dark-background-color,
968
+ 'color': $lumx-button-emphasis-high-state-hover-theme-dark-color,
969
+ 'border-color': $lumx-button-emphasis-high-state-hover-theme-dark-border-color,
970
+ ),
971
+ ),
972
+ 'state-active': (
973
+ 'padding': (
974
+ 'horizontal': $lumx-button-emphasis-high-state-active-padding-horizontal,
975
+ ),
976
+ 'border-width': $lumx-button-emphasis-high-state-active-border-width,
977
+ 'theme-light': (
978
+ 'background-color': $lumx-button-emphasis-high-state-active-theme-light-background-color,
979
+ 'color': $lumx-button-emphasis-high-state-active-theme-light-color,
980
+ 'border-color': $lumx-button-emphasis-high-state-active-theme-light-border-color,
981
+ ),
982
+ 'theme-dark': (
983
+ 'background-color': $lumx-button-emphasis-high-state-active-theme-dark-background-color,
984
+ 'color': $lumx-button-emphasis-high-state-active-theme-dark-color,
985
+ 'border-color': $lumx-button-emphasis-high-state-active-theme-dark-border-color,
986
+ ),
987
+ ),
277
988
  ),
278
- 'size-s': (
279
- 'height': $lumx-chip-size-s-height,
280
- 'border-radius': $lumx-chip-size-s-border-radius,
281
- 'padding-vertical': $lumx-chip-size-s-padding-vertical,
989
+ 'emphasis-medium': (
990
+ 'state-default': (
991
+ 'padding': (
992
+ 'horizontal': $lumx-button-emphasis-medium-state-default-padding-horizontal,
993
+ ),
994
+ 'border-width': $lumx-button-emphasis-medium-state-default-border-width,
995
+ 'theme-light': (
996
+ 'background-color': $lumx-button-emphasis-medium-state-default-theme-light-background-color,
997
+ 'color': $lumx-button-emphasis-medium-state-default-theme-light-color,
998
+ 'border-color': $lumx-button-emphasis-medium-state-default-theme-light-border-color,
999
+ ),
1000
+ 'theme-dark': (
1001
+ 'background-color': $lumx-button-emphasis-medium-state-default-theme-dark-background-color,
1002
+ 'color': $lumx-button-emphasis-medium-state-default-theme-dark-color,
1003
+ 'border-color': $lumx-button-emphasis-medium-state-default-theme-dark-border-color,
1004
+ ),
1005
+ ),
1006
+ 'state-hover': (
1007
+ 'padding': (
1008
+ 'horizontal': $lumx-button-emphasis-medium-state-hover-padding-horizontal,
1009
+ ),
1010
+ 'border-width': $lumx-button-emphasis-medium-state-hover-border-width,
1011
+ 'theme-light': (
1012
+ 'background-color': $lumx-button-emphasis-medium-state-hover-theme-light-background-color,
1013
+ 'color': $lumx-button-emphasis-medium-state-hover-theme-light-color,
1014
+ 'border-color': $lumx-button-emphasis-medium-state-hover-theme-light-border-color,
1015
+ ),
1016
+ 'theme-dark': (
1017
+ 'background-color': $lumx-button-emphasis-medium-state-hover-theme-dark-background-color,
1018
+ 'color': $lumx-button-emphasis-medium-state-hover-theme-dark-color,
1019
+ 'border-color': $lumx-button-emphasis-medium-state-hover-theme-dark-border-color,
1020
+ ),
1021
+ ),
1022
+ 'state-active': (
1023
+ 'padding': (
1024
+ 'horizontal': $lumx-button-emphasis-medium-state-active-padding-horizontal,
1025
+ ),
1026
+ 'border-width': $lumx-button-emphasis-medium-state-active-border-width,
1027
+ 'theme-light': (
1028
+ 'background-color': $lumx-button-emphasis-medium-state-active-theme-light-background-color,
1029
+ 'color': $lumx-button-emphasis-medium-state-active-theme-light-color,
1030
+ 'border-color': $lumx-button-emphasis-medium-state-active-theme-light-border-color,
1031
+ ),
1032
+ 'theme-dark': (
1033
+ 'background-color': $lumx-button-emphasis-medium-state-active-theme-dark-background-color,
1034
+ 'color': $lumx-button-emphasis-medium-state-active-theme-dark-color,
1035
+ 'border-color': $lumx-button-emphasis-medium-state-active-theme-dark-border-color,
1036
+ ),
1037
+ ),
1038
+ ),
1039
+ 'emphasis-low': (
1040
+ 'state-default': (
1041
+ 'padding': (
1042
+ 'horizontal': $lumx-button-emphasis-low-state-default-padding-horizontal,
1043
+ ),
1044
+ 'border-width': $lumx-button-emphasis-low-state-default-border-width,
1045
+ 'theme-light': (
1046
+ 'background-color': $lumx-button-emphasis-low-state-default-theme-light-background-color,
1047
+ 'color': $lumx-button-emphasis-low-state-default-theme-light-color,
1048
+ 'border-color': $lumx-button-emphasis-low-state-default-theme-light-border-color,
1049
+ ),
1050
+ 'theme-dark': (
1051
+ 'background-color': $lumx-button-emphasis-low-state-default-theme-dark-background-color,
1052
+ 'color': $lumx-button-emphasis-low-state-default-theme-dark-color,
1053
+ 'border-color': $lumx-button-emphasis-low-state-default-theme-dark-border-color,
1054
+ ),
1055
+ ),
1056
+ 'state-hover': (
1057
+ 'padding': (
1058
+ 'horizontal': $lumx-button-emphasis-low-state-hover-padding-horizontal,
1059
+ ),
1060
+ 'border-width': $lumx-button-emphasis-low-state-hover-border-width,
1061
+ 'theme-light': (
1062
+ 'background-color': $lumx-button-emphasis-low-state-hover-theme-light-background-color,
1063
+ 'color': $lumx-button-emphasis-low-state-hover-theme-light-color,
1064
+ 'border-color': $lumx-button-emphasis-low-state-hover-theme-light-border-color,
1065
+ ),
1066
+ 'theme-dark': (
1067
+ 'background-color': $lumx-button-emphasis-low-state-hover-theme-dark-background-color,
1068
+ 'color': $lumx-button-emphasis-low-state-hover-theme-dark-color,
1069
+ 'border-color': $lumx-button-emphasis-low-state-hover-theme-dark-border-color,
1070
+ ),
1071
+ ),
1072
+ 'state-active': (
1073
+ 'padding': (
1074
+ 'horizontal': $lumx-button-emphasis-low-state-active-padding-horizontal,
1075
+ ),
1076
+ 'border-width': $lumx-button-emphasis-low-state-active-border-width,
1077
+ 'theme-light': (
1078
+ 'background-color': $lumx-button-emphasis-low-state-active-theme-light-background-color,
1079
+ 'color': $lumx-button-emphasis-low-state-active-theme-light-color,
1080
+ 'border-color': $lumx-button-emphasis-low-state-active-theme-light-border-color,
1081
+ ),
1082
+ 'theme-dark': (
1083
+ 'background-color': $lumx-button-emphasis-low-state-active-theme-dark-background-color,
1084
+ 'color': $lumx-button-emphasis-low-state-active-theme-dark-color,
1085
+ 'border-color': $lumx-button-emphasis-low-state-active-theme-dark-border-color,
1086
+ ),
1087
+ ),
1088
+ ),
1089
+ 'emphasis-selected': (
1090
+ 'state-default': (
1091
+ 'padding': (
1092
+ 'horizontal': $lumx-button-emphasis-selected-state-default-padding-horizontal,
1093
+ ),
1094
+ 'border-width': $lumx-button-emphasis-selected-state-default-border-width,
1095
+ 'theme-light': (
1096
+ 'background-color': $lumx-button-emphasis-selected-state-default-theme-light-background-color,
1097
+ 'color': $lumx-button-emphasis-selected-state-default-theme-light-color,
1098
+ 'border-color': $lumx-button-emphasis-selected-state-default-theme-light-border-color,
1099
+ ),
1100
+ 'theme-dark': (
1101
+ 'background-color': $lumx-button-emphasis-selected-state-default-theme-dark-background-color,
1102
+ 'color': $lumx-button-emphasis-selected-state-default-theme-dark-color,
1103
+ 'border-color': $lumx-button-emphasis-selected-state-default-theme-dark-border-color,
1104
+ ),
1105
+ ),
1106
+ 'state-hover': (
1107
+ 'padding': (
1108
+ 'horizontal': $lumx-button-emphasis-selected-state-hover-padding-horizontal,
1109
+ ),
1110
+ 'border-width': $lumx-button-emphasis-selected-state-hover-border-width,
1111
+ 'theme-light': (
1112
+ 'background-color': $lumx-button-emphasis-selected-state-hover-theme-light-background-color,
1113
+ 'color': $lumx-button-emphasis-selected-state-hover-theme-light-color,
1114
+ 'border-color': $lumx-button-emphasis-selected-state-hover-theme-light-border-color,
1115
+ ),
1116
+ 'theme-dark': (
1117
+ 'background-color': $lumx-button-emphasis-selected-state-hover-theme-dark-background-color,
1118
+ 'color': $lumx-button-emphasis-selected-state-hover-theme-dark-color,
1119
+ 'border-color': $lumx-button-emphasis-selected-state-hover-theme-dark-border-color,
1120
+ ),
1121
+ ),
1122
+ 'state-active': (
1123
+ 'padding': (
1124
+ 'horizontal': $lumx-button-emphasis-selected-state-active-padding-horizontal,
1125
+ ),
1126
+ 'border-width': $lumx-button-emphasis-selected-state-active-border-width,
1127
+ 'theme-light': (
1128
+ 'background-color': $lumx-button-emphasis-selected-state-active-theme-light-background-color,
1129
+ 'color': $lumx-button-emphasis-selected-state-active-theme-light-color,
1130
+ 'border-color': $lumx-button-emphasis-selected-state-active-theme-light-border-color,
1131
+ ),
1132
+ 'theme-dark': (
1133
+ 'background-color': $lumx-button-emphasis-selected-state-active-theme-dark-background-color,
1134
+ 'color': $lumx-button-emphasis-selected-state-active-theme-dark-color,
1135
+ 'border-color': $lumx-button-emphasis-selected-state-active-theme-dark-border-color,
1136
+ ),
1137
+ ),
282
1138
  ),
283
1139
  ),
284
- 'input-helper': (
285
- 'font-size': $lumx-input-helper-font-size,
286
- 'font-weight': $lumx-input-helper-font-weight,
287
- 'line-height': $lumx-input-helper-line-height,
288
- ),
289
- 'input-label': (
290
- 'font-size': $lumx-input-label-font-size,
291
- 'font-weight': $lumx-input-label-font-weight,
292
- 'line-height': $lumx-input-label-line-height,
293
- ),
294
- 'radio-button': (
295
- 'wrapper-size': $lumx-radio-button-wrapper-size,
296
- 'control-size': $lumx-radio-button-control-size,
297
- 'indicator-size': $lumx-radio-button-indicator-size,
298
- ),
299
- 'switch': (
300
- 'wrapper': (
301
- 'width': $lumx-switch-wrapper-width,
302
- 'height': $lumx-switch-wrapper-height,
1140
+ 'material': (
1141
+ 'button': (
1142
+ 'text-transform': $lumx-material-button-text-transform,
1143
+ 'variant-icon-border-radius': (),
303
1144
  ),
304
- 'control': (
305
- 'width': $lumx-switch-control-width,
306
- 'height': $lumx-switch-control-height,
1145
+ 'checkbox': (
1146
+ 'wrapper-size': $lumx-material-checkbox-wrapper-size,
1147
+ 'control-size': $lumx-material-checkbox-control-size,
307
1148
  ),
308
- 'indicator': (
309
- 'size': $lumx-switch-indicator-size,
310
- 'offset': $lumx-switch-indicator-offset,
1149
+ 'chip': (
1150
+ 'size-m': (
1151
+ 'height': $lumx-material-chip-size-m-height,
1152
+ 'border-radius': $lumx-material-chip-size-m-border-radius,
1153
+ 'padding-vertical': $lumx-material-chip-size-m-padding-vertical,
1154
+ ),
1155
+ 'size-s': (
1156
+ 'height': $lumx-material-chip-size-s-height,
1157
+ 'border-radius': $lumx-material-chip-size-s-border-radius,
1158
+ 'padding-vertical': $lumx-material-chip-size-s-padding-vertical,
1159
+ ),
311
1160
  ),
312
- ),
313
- 'text-field': (
314
- 'padding': (
315
- 'top': $lumx-text-field-padding-top,
316
- 'bottom': $lumx-text-field-padding-bottom,
1161
+ 'input-helper': (
1162
+ 'font-size': $lumx-material-input-helper-font-size,
1163
+ 'font-weight': $lumx-material-input-helper-font-weight,
1164
+ 'line-height': $lumx-material-input-helper-line-height,
317
1165
  ),
318
- 'header': (
319
- 'margin-bottom': $lumx-text-field-header-margin-bottom,
1166
+ 'input-label': (
1167
+ 'font-size': $lumx-material-input-label-font-size,
1168
+ 'font-weight': $lumx-material-input-label-font-weight,
1169
+ 'line-height': $lumx-material-input-label-line-height,
320
1170
  ),
321
- 'label': (
322
- 'font-size': $lumx-text-field-label-font-size,
323
- 'font-weight': $lumx-text-field-label-font-weight,
324
- 'line-height': $lumx-text-field-label-line-height,
1171
+ 'progress': (
1172
+ 'bounce': $lumx-material-progress-bounce,
1173
+ 'rotate': $lumx-material-progress-rotate,
325
1174
  ),
326
- 'wrapper': (
327
- 'min-height': $lumx-text-field-wrapper-min-height,
328
- 'border-radius': $lumx-text-field-wrapper-border-radius,
1175
+ 'radio-button': (
1176
+ 'wrapper-size': $lumx-material-radio-button-wrapper-size,
1177
+ 'control-size': $lumx-material-radio-button-control-size,
1178
+ 'indicator-size': $lumx-material-radio-button-indicator-size,
1179
+ ),
1180
+ 'switch': (
1181
+ 'wrapper': (
1182
+ 'width': $lumx-material-switch-wrapper-width,
1183
+ 'height': $lumx-material-switch-wrapper-height,
1184
+ ),
1185
+ 'control': (
1186
+ 'width': $lumx-material-switch-control-width,
1187
+ 'height': $lumx-material-switch-control-height,
1188
+ ),
1189
+ 'indicator': (
1190
+ 'size': $lumx-material-switch-indicator-size,
1191
+ 'offset': $lumx-material-switch-indicator-offset,
1192
+ ),
1193
+ ),
1194
+ 'text-field': (
329
1195
  'padding': (
330
- 'vertical': $lumx-text-field-wrapper-padding-vertical,
331
- 'horizontal': $lumx-text-field-wrapper-padding-horizontal,
1196
+ 'top': $lumx-material-text-field-padding-top,
1197
+ 'bottom': $lumx-material-text-field-padding-bottom,
1198
+ ),
1199
+ 'header': (
1200
+ 'wrapper': (
1201
+ 'margin-bottom': $lumx-material-text-field-header-wrapper-margin-bottom,
1202
+ ),
1203
+ 'label': (
1204
+ 'font-size': $lumx-material-text-field-header-label-font-size,
1205
+ 'font-weight': $lumx-material-text-field-header-label-font-weight,
1206
+ 'line-height': $lumx-material-text-field-header-label-line-height,
1207
+ ),
1208
+ ),
1209
+ 'input': (
1210
+ 'content': (
1211
+ 'font-size': $lumx-material-text-field-input-content-font-size,
1212
+ 'font-weight': $lumx-material-text-field-input-content-font-weight,
1213
+ 'line-height': $lumx-material-text-field-input-content-line-height,
1214
+ ),
332
1215
  ),
333
1216
  ),
334
- 'state-default': (
335
- 'border': (
336
- 'top': (
337
- 'width': $lumx-text-field-state-default-border-top-width,
1217
+ ),
1218
+ 'navigation': (
1219
+ 'item': (
1220
+ 'padding': (
1221
+ 'horizontal': $lumx-navigation-item-padding-horizontal,
1222
+ ),
1223
+ 'min-height': $lumx-navigation-item-min-height,
1224
+ 'border-radius': $lumx-navigation-item-border-radius,
1225
+ 'emphasis-low': (
1226
+ 'state-default': (
1227
+ 'border': (
1228
+ 'top': (
1229
+ 'width': $lumx-navigation-item-emphasis-low-state-default-border-top-width,
1230
+ ),
1231
+ 'right': (
1232
+ 'width': $lumx-navigation-item-emphasis-low-state-default-border-right-width,
1233
+ ),
1234
+ 'bottom': (
1235
+ 'width': $lumx-navigation-item-emphasis-low-state-default-border-bottom-width,
1236
+ ),
1237
+ 'left': (
1238
+ 'width': $lumx-navigation-item-emphasis-low-state-default-border-left-width,
1239
+ ),
1240
+ ),
1241
+ 'theme-light': (
1242
+ 'background-color':
1243
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-background-color,
1244
+ 'border-color': $lumx-navigation-item-emphasis-low-state-default-theme-light-border-color,
1245
+ 'icon-color': $lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color,
1246
+ 'label-color': $lumx-navigation-item-emphasis-low-state-default-theme-light-label-color,
1247
+ 'chevron-background-color':
1248
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-background-color,
1249
+ 'chevron-color': $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color,
1250
+ ),
1251
+ 'theme-dark': (
1252
+ 'background-color': $lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color,
1253
+ 'border-color': $lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color,
1254
+ 'icon-color': $lumx-navigation-item-emphasis-low-state-default-theme-dark-icon-color,
1255
+ 'label-color': $lumx-navigation-item-emphasis-low-state-default-theme-dark-label-color,
1256
+ 'chevron-background-color':
1257
+ $lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-background-color,
1258
+ 'chevron-color': $lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-color,
1259
+ ),
1260
+ ),
1261
+ 'state-hover': (
1262
+ 'border': (
1263
+ 'top': (
1264
+ 'width': $lumx-navigation-item-emphasis-low-state-hover-border-top-width,
1265
+ ),
1266
+ 'right': (
1267
+ 'width': $lumx-navigation-item-emphasis-low-state-hover-border-right-width,
1268
+ ),
1269
+ 'bottom': (
1270
+ 'width': $lumx-navigation-item-emphasis-low-state-hover-border-bottom-width,
1271
+ ),
1272
+ 'left': (
1273
+ 'width': $lumx-navigation-item-emphasis-low-state-hover-border-left-width,
1274
+ ),
1275
+ ),
1276
+ 'theme-light': (
1277
+ 'background-color': $lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color,
1278
+ 'border-color': $lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color,
1279
+ 'icon-color': $lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color,
1280
+ 'label-color': $lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color,
1281
+ 'chevron-background-color':
1282
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color,
1283
+ 'chevron-color': $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color,
1284
+ ),
1285
+ 'theme-dark': (
1286
+ 'background-color': $lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color,
1287
+ 'border-color': $lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color,
1288
+ 'icon-color': $lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color,
1289
+ 'label-color': $lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color,
1290
+ 'chevron-background-color':
1291
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-background-color,
1292
+ 'chevron-color': $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-color,
1293
+ ),
1294
+ ),
1295
+ 'state-active': (
1296
+ 'border': (
1297
+ 'top': (
1298
+ 'width': $lumx-navigation-item-emphasis-low-state-active-border-top-width,
1299
+ ),
1300
+ 'right': (
1301
+ 'width': $lumx-navigation-item-emphasis-low-state-active-border-right-width,
1302
+ ),
1303
+ 'bottom': (
1304
+ 'width': $lumx-navigation-item-emphasis-low-state-active-border-bottom-width,
1305
+ ),
1306
+ 'left': (
1307
+ 'width': $lumx-navigation-item-emphasis-low-state-active-border-left-width,
1308
+ ),
1309
+ ),
1310
+ 'theme-light': (
1311
+ 'background-color': $lumx-navigation-item-emphasis-low-state-active-theme-light-background-color,
1312
+ 'border-color': $lumx-navigation-item-emphasis-low-state-active-theme-light-border-color,
1313
+ 'icon-color': $lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color,
1314
+ 'label-color': $lumx-navigation-item-emphasis-low-state-active-theme-light-label-color,
1315
+ 'chevron-background-color':
1316
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color,
1317
+ 'chevron-color': $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color,
1318
+ ),
1319
+ 'theme-dark': (
1320
+ 'background-color': $lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color,
1321
+ 'border-color': $lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color,
1322
+ 'icon-color': $lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color,
1323
+ 'label-color': $lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color,
1324
+ 'chevron-background-color':
1325
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color,
1326
+ 'chevron-color': $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color,
1327
+ ),
338
1328
  ),
339
- 'right': (
340
- 'width': $lumx-text-field-state-default-border-right-width,
1329
+ ),
1330
+ 'emphasis-selected': (
1331
+ 'state-default': (
1332
+ 'border': (
1333
+ 'top': (
1334
+ 'width': $lumx-navigation-item-emphasis-selected-state-default-border-top-width,
1335
+ ),
1336
+ 'right': (
1337
+ 'width': $lumx-navigation-item-emphasis-selected-state-default-border-right-width,
1338
+ ),
1339
+ 'bottom': (
1340
+ 'width': $lumx-navigation-item-emphasis-selected-state-default-border-bottom-width,
1341
+ ),
1342
+ 'left': (
1343
+ 'width': $lumx-navigation-item-emphasis-selected-state-default-border-left-width,
1344
+ ),
1345
+ ),
1346
+ 'theme-light': (
1347
+ 'background-color':
1348
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color,
1349
+ 'border-color': $lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color,
1350
+ 'icon-color': $lumx-navigation-item-emphasis-selected-state-default-theme-light-icon-color,
1351
+ 'label-color': $lumx-navigation-item-emphasis-selected-state-default-theme-light-label-color,
1352
+ 'chevron-background-color':
1353
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-background-color,
1354
+ 'chevron-color': $lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-color,
1355
+ ),
1356
+ 'theme-dark': (
1357
+ 'background-color':
1358
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color,
1359
+ 'border-color': $lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color,
1360
+ 'icon-color': $lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color,
1361
+ 'label-color': $lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color,
1362
+ 'chevron-background-color':
1363
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-background-color,
1364
+ 'chevron-color': $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-color,
1365
+ ),
1366
+ ),
1367
+ 'state-hover': (
1368
+ 'border': (
1369
+ 'top': (
1370
+ 'width': $lumx-navigation-item-emphasis-selected-state-hover-border-top-width,
1371
+ ),
1372
+ 'right': (
1373
+ 'width': $lumx-navigation-item-emphasis-selected-state-hover-border-right-width,
1374
+ ),
1375
+ 'bottom': (
1376
+ 'width': $lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width,
1377
+ ),
1378
+ 'left': (
1379
+ 'width': $lumx-navigation-item-emphasis-selected-state-hover-border-left-width,
1380
+ ),
1381
+ ),
1382
+ 'theme-light': (
1383
+ 'background-color':
1384
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color,
1385
+ 'border-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color,
1386
+ 'icon-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-light-icon-color,
1387
+ 'label-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-light-label-color,
1388
+ 'chevron-background-color':
1389
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-background-color,
1390
+ 'chevron-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-color,
1391
+ ),
1392
+ 'theme-dark': (
1393
+ 'background-color':
1394
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color,
1395
+ 'border-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color,
1396
+ 'icon-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color,
1397
+ 'label-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color,
1398
+ 'chevron-background-color':
1399
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color,
1400
+ 'chevron-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color,
1401
+ ),
1402
+ ),
1403
+ 'state-active': (
1404
+ 'border': (
1405
+ 'top': (
1406
+ 'width': $lumx-navigation-item-emphasis-selected-state-active-border-top-width,
1407
+ ),
1408
+ 'right': (
1409
+ 'width': $lumx-navigation-item-emphasis-selected-state-active-border-right-width,
1410
+ ),
1411
+ 'bottom': (
1412
+ 'width': $lumx-navigation-item-emphasis-selected-state-active-border-bottom-width,
1413
+ ),
1414
+ 'left': (
1415
+ 'width': $lumx-navigation-item-emphasis-selected-state-active-border-left-width,
1416
+ ),
1417
+ ),
1418
+ 'theme-light': (
1419
+ 'background-color':
1420
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color,
1421
+ 'border-color': $lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color,
1422
+ 'icon-color': $lumx-navigation-item-emphasis-selected-state-active-theme-light-icon-color,
1423
+ 'label-color': $lumx-navigation-item-emphasis-selected-state-active-theme-light-label-color,
1424
+ 'chevron-background-color':
1425
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-background-color,
1426
+ 'chevron-color': $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-color,
1427
+ ),
1428
+ 'theme-dark': (
1429
+ 'background-color':
1430
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color,
1431
+ 'border-color': $lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color,
1432
+ 'icon-color': $lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color,
1433
+ 'label-color': $lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color,
1434
+ 'chevron-background-color':
1435
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color,
1436
+ 'chevron-color': $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color,
1437
+ ),
1438
+ ),
1439
+ ),
1440
+ ),
1441
+ ),
1442
+ 'tabs': (
1443
+ 'link': (
1444
+ 'height': $lumx-tabs-link-height,
1445
+ 'border-radius': $lumx-tabs-link-border-radius,
1446
+ 'emphasis-low': (
1447
+ 'state-default': (
1448
+ 'border': (
1449
+ 'top': (
1450
+ 'width': $lumx-tabs-link-emphasis-low-state-default-border-top-width,
1451
+ ),
1452
+ 'right': (
1453
+ 'width': $lumx-tabs-link-emphasis-low-state-default-border-right-width,
1454
+ ),
1455
+ 'bottom': (
1456
+ 'width': $lumx-tabs-link-emphasis-low-state-default-border-bottom-width,
1457
+ ),
1458
+ 'left': (
1459
+ 'width': $lumx-tabs-link-emphasis-low-state-default-border-left-width,
1460
+ ),
1461
+ ),
1462
+ 'theme-light': (
1463
+ 'background-color': $lumx-tabs-link-emphasis-low-state-default-theme-light-background-color,
1464
+ 'color': $lumx-tabs-link-emphasis-low-state-default-theme-light-color,
1465
+ 'border-color': $lumx-tabs-link-emphasis-low-state-default-theme-light-border-color,
1466
+ ),
1467
+ 'theme-dark': (
1468
+ 'background-color': $lumx-tabs-link-emphasis-low-state-default-theme-dark-background-color,
1469
+ 'color': $lumx-tabs-link-emphasis-low-state-default-theme-dark-color,
1470
+ 'border-color': $lumx-tabs-link-emphasis-low-state-default-theme-dark-border-color,
1471
+ ),
341
1472
  ),
342
- 'bottom': (
343
- 'width': $lumx-text-field-state-default-border-bottom-width,
1473
+ 'state-hover': (
1474
+ 'border': (
1475
+ 'top': (
1476
+ 'width': $lumx-tabs-link-emphasis-low-state-hover-border-top-width,
1477
+ ),
1478
+ 'right': (
1479
+ 'width': $lumx-tabs-link-emphasis-low-state-hover-border-right-width,
1480
+ ),
1481
+ 'bottom': (
1482
+ 'width': $lumx-tabs-link-emphasis-low-state-hover-border-bottom-width,
1483
+ ),
1484
+ 'left': (
1485
+ 'width': $lumx-tabs-link-emphasis-low-state-hover-border-left-width,
1486
+ ),
1487
+ ),
1488
+ 'theme-light': (
1489
+ 'background-color': $lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color,
1490
+ 'color': $lumx-tabs-link-emphasis-low-state-hover-theme-light-color,
1491
+ 'border-color': $lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color,
1492
+ ),
1493
+ 'theme-dark': (
1494
+ 'background-color': $lumx-tabs-link-emphasis-low-state-hover-theme-dark-background-color,
1495
+ 'color': $lumx-tabs-link-emphasis-low-state-hover-theme-dark-color,
1496
+ 'border-color': $lumx-tabs-link-emphasis-low-state-hover-theme-dark-border-color,
1497
+ ),
344
1498
  ),
345
- 'left': (
346
- 'width': $lumx-text-field-state-default-border-left-width,
1499
+ 'state-active': (
1500
+ 'border': (
1501
+ 'top': (
1502
+ 'width': $lumx-tabs-link-emphasis-low-state-active-border-top-width,
1503
+ ),
1504
+ 'right': (
1505
+ 'width': $lumx-tabs-link-emphasis-low-state-active-border-right-width,
1506
+ ),
1507
+ 'bottom': (
1508
+ 'width': $lumx-tabs-link-emphasis-low-state-active-border-bottom-width,
1509
+ ),
1510
+ 'left': (
1511
+ 'width': $lumx-tabs-link-emphasis-low-state-active-border-left-width,
1512
+ ),
1513
+ ),
1514
+ 'theme-light': (
1515
+ 'background-color': $lumx-tabs-link-emphasis-low-state-active-theme-light-background-color,
1516
+ 'color': $lumx-tabs-link-emphasis-low-state-active-theme-light-color,
1517
+ 'border-color': $lumx-tabs-link-emphasis-low-state-active-theme-light-border-color,
1518
+ ),
1519
+ 'theme-dark': (
1520
+ 'background-color': $lumx-tabs-link-emphasis-low-state-active-theme-dark-background-color,
1521
+ 'color': $lumx-tabs-link-emphasis-low-state-active-theme-dark-color,
1522
+ 'border-color': $lumx-tabs-link-emphasis-low-state-active-theme-dark-border-color,
1523
+ ),
1524
+ ),
1525
+ ),
1526
+ 'emphasis-selected': (
1527
+ 'state-default': (
1528
+ 'border': (
1529
+ 'top': (
1530
+ 'width': $lumx-tabs-link-emphasis-selected-state-default-border-top-width,
1531
+ ),
1532
+ 'right': (
1533
+ 'width': $lumx-tabs-link-emphasis-selected-state-default-border-right-width,
1534
+ ),
1535
+ 'bottom': (
1536
+ 'width': $lumx-tabs-link-emphasis-selected-state-default-border-bottom-width,
1537
+ ),
1538
+ 'left': (
1539
+ 'width': $lumx-tabs-link-emphasis-selected-state-default-border-left-width,
1540
+ ),
1541
+ ),
1542
+ 'theme-light': (
1543
+ 'background-color': $lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color,
1544
+ 'color': $lumx-tabs-link-emphasis-selected-state-default-theme-light-color,
1545
+ 'border-color': $lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color,
1546
+ ),
1547
+ 'theme-dark': (
1548
+ 'background-color': $lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color,
1549
+ 'color': $lumx-tabs-link-emphasis-selected-state-default-theme-dark-color,
1550
+ 'border-color': $lumx-tabs-link-emphasis-selected-state-default-theme-dark-border-color,
1551
+ ),
1552
+ ),
1553
+ 'state-hover': (
1554
+ 'border': (
1555
+ 'top': (
1556
+ 'width': $lumx-tabs-link-emphasis-selected-state-hover-border-top-width,
1557
+ ),
1558
+ 'right': (
1559
+ 'width': $lumx-tabs-link-emphasis-selected-state-hover-border-right-width,
1560
+ ),
1561
+ 'bottom': (
1562
+ 'width': $lumx-tabs-link-emphasis-selected-state-hover-border-bottom-width,
1563
+ ),
1564
+ 'left': (
1565
+ 'width': $lumx-tabs-link-emphasis-selected-state-hover-border-left-width,
1566
+ ),
1567
+ ),
1568
+ 'theme-light': (
1569
+ 'background-color': $lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color,
1570
+ 'color': $lumx-tabs-link-emphasis-selected-state-hover-theme-light-color,
1571
+ 'border-color': $lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color,
1572
+ ),
1573
+ 'theme-dark': (
1574
+ 'background-color': $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color,
1575
+ 'color': $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-color,
1576
+ 'border-color': $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-border-color,
1577
+ ),
1578
+ ),
1579
+ 'state-active': (
1580
+ 'border': (
1581
+ 'top': (
1582
+ 'width': $lumx-tabs-link-emphasis-selected-state-active-border-top-width,
1583
+ ),
1584
+ 'right': (
1585
+ 'width': $lumx-tabs-link-emphasis-selected-state-active-border-right-width,
1586
+ ),
1587
+ 'bottom': (
1588
+ 'width': $lumx-tabs-link-emphasis-selected-state-active-border-bottom-width,
1589
+ ),
1590
+ 'left': (
1591
+ 'width': $lumx-tabs-link-emphasis-selected-state-active-border-left-width,
1592
+ ),
1593
+ ),
1594
+ 'theme-light': (
1595
+ 'background-color': $lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color,
1596
+ 'color': $lumx-tabs-link-emphasis-selected-state-active-theme-light-color,
1597
+ 'border-color': $lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color,
1598
+ ),
1599
+ 'theme-dark': (
1600
+ 'background-color': $lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color,
1601
+ 'color': $lumx-tabs-link-emphasis-selected-state-active-theme-dark-color,
1602
+ 'border-color': $lumx-tabs-link-emphasis-selected-state-active-theme-dark-border-color,
1603
+ ),
1604
+ ),
1605
+ ),
1606
+ ),
1607
+ ),
1608
+ 'text-field': (
1609
+ 'input': (
1610
+ 'min-height': $lumx-text-field-input-min-height,
1611
+ 'padding': (
1612
+ 'horizontal': $lumx-text-field-input-padding-horizontal,
1613
+ ),
1614
+ 'border-radius': $lumx-text-field-input-border-radius,
1615
+ ),
1616
+ 'state-default': (
1617
+ 'input': (
1618
+ 'border': (
1619
+ 'top': (
1620
+ 'width': $lumx-text-field-state-default-input-border-top-width,
1621
+ ),
1622
+ 'right': (
1623
+ 'width': $lumx-text-field-state-default-input-border-right-width,
1624
+ ),
1625
+ 'bottom': (
1626
+ 'width': $lumx-text-field-state-default-input-border-bottom-width,
1627
+ ),
1628
+ 'left': (
1629
+ 'width': $lumx-text-field-state-default-input-border-left-width,
1630
+ ),
347
1631
  ),
348
1632
  ),
349
1633
  'theme-light': (
350
- 'background-color': $lumx-text-field-state-default-theme-light-background-color,
351
- 'border-color': $lumx-text-field-state-default-theme-light-border-color,
1634
+ 'header': (
1635
+ 'label': (
1636
+ 'color': $lumx-text-field-state-default-theme-light-header-label-color,
1637
+ ),
1638
+ ),
1639
+ 'input': (
1640
+ 'background-color': $lumx-text-field-state-default-theme-light-input-background-color,
1641
+ 'border-color': $lumx-text-field-state-default-theme-light-input-border-color,
1642
+ 'content': (
1643
+ 'color': $lumx-text-field-state-default-theme-light-input-content-color,
1644
+ ),
1645
+ 'placeholder': (
1646
+ 'color': $lumx-text-field-state-default-theme-light-input-placeholder-color,
1647
+ ),
1648
+ ),
352
1649
  ),
353
1650
  'theme-dark': (
354
- 'background-color': $lumx-text-field-state-default-theme-dark-background-color,
355
- 'border-color': $lumx-text-field-state-default-theme-dark-border-color,
1651
+ 'header': (
1652
+ 'label': (
1653
+ 'color': $lumx-text-field-state-default-theme-dark-header-label-color,
1654
+ ),
1655
+ ),
1656
+ 'input': (
1657
+ 'background-color': $lumx-text-field-state-default-theme-dark-input-background-color,
1658
+ 'border-color': $lumx-text-field-state-default-theme-dark-input-border-color,
1659
+ 'content': (
1660
+ 'color': $lumx-text-field-state-default-theme-dark-input-content-color,
1661
+ ),
1662
+ 'placeholder': (
1663
+ 'color': $lumx-text-field-state-default-theme-dark-input-placeholder-color,
1664
+ ),
1665
+ ),
356
1666
  ),
357
1667
  ),
358
1668
  'state-hover': (
1669
+ 'input': (
1670
+ 'border': (
1671
+ 'top': (
1672
+ 'width': $lumx-text-field-state-hover-input-border-top-width,
1673
+ ),
1674
+ 'right': (
1675
+ 'width': $lumx-text-field-state-hover-input-border-right-width,
1676
+ ),
1677
+ 'bottom': (
1678
+ 'width': $lumx-text-field-state-hover-input-border-bottom-width,
1679
+ ),
1680
+ 'left': (
1681
+ 'width': $lumx-text-field-state-hover-input-border-left-width,
1682
+ ),
1683
+ ),
1684
+ ),
359
1685
  'theme-light': (
360
- 'background-color': $lumx-text-field-state-hover-theme-light-background-color,
1686
+ 'input': (
1687
+ 'background-color': $lumx-text-field-state-hover-theme-light-input-background-color,
1688
+ 'border-color': $lumx-text-field-state-hover-theme-light-input-border-color,
1689
+ 'content': (
1690
+ 'color': $lumx-text-field-state-hover-theme-light-input-content-color,
1691
+ ),
1692
+ 'placeholder': (
1693
+ 'color': $lumx-text-field-state-hover-theme-light-input-placeholder-color,
1694
+ ),
1695
+ ),
361
1696
  ),
362
1697
  'theme-dark': (
363
- 'background-color': $lumx-text-field-state-hover-theme-dark-background-color,
1698
+ 'input': (
1699
+ 'background-color': $lumx-text-field-state-hover-theme-dark-input-background-color,
1700
+ 'border-color': $lumx-text-field-state-hover-theme-dark-input-border-color,
1701
+ 'content': (
1702
+ 'color': $lumx-text-field-state-hover-theme-dark-input-content-color,
1703
+ ),
1704
+ 'placeholder': (
1705
+ 'color': $lumx-text-field-state-hover-theme-dark-input-placeholder-color,
1706
+ ),
1707
+ ),
364
1708
  ),
365
1709
  ),
366
1710
  'state-focus': (
367
- 'border': (
368
- 'top': (
369
- 'width': $lumx-text-field-state-focus-border-top-width,
370
- ),
371
- 'right': (
372
- 'width': $lumx-text-field-state-focus-border-right-width,
373
- ),
374
- 'bottom': (
375
- 'width': $lumx-text-field-state-focus-border-bottom-width,
376
- ),
377
- 'left': (
378
- 'width': $lumx-text-field-state-focus-border-left-width,
1711
+ 'input': (
1712
+ 'border': (
1713
+ 'top': (
1714
+ 'width': $lumx-text-field-state-focus-input-border-top-width,
1715
+ ),
1716
+ 'right': (
1717
+ 'width': $lumx-text-field-state-focus-input-border-right-width,
1718
+ ),
1719
+ 'bottom': (
1720
+ 'width': $lumx-text-field-state-focus-input-border-bottom-width,
1721
+ ),
1722
+ 'left': (
1723
+ 'width': $lumx-text-field-state-focus-input-border-left-width,
1724
+ ),
379
1725
  ),
380
1726
  ),
381
1727
  'theme-light': (
382
- 'background-color': $lumx-text-field-state-focus-theme-light-background-color,
383
- 'border-color': $lumx-text-field-state-focus-theme-light-border-color,
1728
+ 'header': (
1729
+ 'label': (
1730
+ 'color': $lumx-text-field-state-focus-theme-light-header-label-color,
1731
+ ),
1732
+ ),
1733
+ 'input': (
1734
+ 'background-color': $lumx-text-field-state-focus-theme-light-input-background-color,
1735
+ 'border-color': $lumx-text-field-state-focus-theme-light-input-border-color,
1736
+ 'content': (
1737
+ 'color': $lumx-text-field-state-focus-theme-light-input-content-color,
1738
+ ),
1739
+ 'placeholder': (
1740
+ 'color': $lumx-text-field-state-focus-theme-light-input-placeholder-color,
1741
+ ),
1742
+ ),
384
1743
  ),
385
1744
  'theme-dark': (
386
- 'background-color': $lumx-text-field-state-focus-theme-dark-background-color,
387
- 'border-color': $lumx-text-field-state-focus-theme-dark-border-color,
1745
+ 'header': (
1746
+ 'label': (
1747
+ 'color': $lumx-text-field-state-focus-theme-dark-header-label-color,
1748
+ ),
1749
+ ),
1750
+ 'input': (
1751
+ 'background-color': $lumx-text-field-state-focus-theme-dark-input-background-color,
1752
+ 'border-color': $lumx-text-field-state-focus-theme-dark-input-border-color,
1753
+ 'content': (
1754
+ 'color': $lumx-text-field-state-focus-theme-dark-input-content-color,
1755
+ ),
1756
+ 'placeholder': (
1757
+ 'color': $lumx-text-field-state-focus-theme-dark-input-placeholder-color,
1758
+ ),
1759
+ ),
388
1760
  ),
389
1761
  ),
390
- 'input-icon-size': $lumx-text-field-input-icon-size,
391
- 'input': (
392
- 'font-size': $lumx-text-field-input-font-size,
393
- 'font-weight': $lumx-text-field-input-font-weight,
394
- 'line-height': $lumx-text-field-input-line-height,
395
- ),
396
- 'input-validity-size': $lumx-text-field-input-validity-size,
397
- 'input-clear-size': $lumx-text-field-input-clear-size,
398
1762
  ),
399
1763
  'border-radius': $lumx-border-radius,
400
1764
  'color': (
@@ -532,10 +1896,6 @@ $lumx-design-tokens: (
532
1896
  'L6': $lumx-color-orange-L6,
533
1897
  ),
534
1898
  ),
535
- 'progress': (
536
- 'bounce': $lumx-progress-bounce,
537
- 'rotate': $lumx-progress-rotate,
538
- ),
539
1899
  'size': (
540
1900
  'xxs': $lumx-size-xxs,
541
1901
  'xs': $lumx-size-xs,
@@ -556,51 +1916,137 @@ $lumx-design-tokens: (
556
1916
  ),
557
1917
  'typography': (
558
1918
  'font-family': $lumx-typography-font-family,
559
- 'style': (
1919
+ 'font-weight': (
1920
+ 'regular': $lumx-typography-font-weight-regular,
1921
+ 'bold': $lumx-typography-font-weight-bold,
1922
+ 'light': $lumx-typography-font-weight-light,
1923
+ ),
1924
+ 'interface': (
560
1925
  'display1': (
561
- 'font-size': $lumx-typography-style-display1-font-size,
562
- 'font-weight': $lumx-typography-style-display1-font-weight,
563
- 'line-height': $lumx-typography-style-display1-line-height,
1926
+ 'font-size': $lumx-typography-interface-display1-font-size,
1927
+ 'font-weight': $lumx-typography-interface-display1-font-weight,
1928
+ 'line-height': $lumx-typography-interface-display1-line-height,
564
1929
  ),
565
1930
  'headline': (
566
- 'font-size': $lumx-typography-style-headline-font-size,
567
- 'font-weight': $lumx-typography-style-headline-font-weight,
568
- 'line-height': $lumx-typography-style-headline-line-height,
1931
+ 'font-size': $lumx-typography-interface-headline-font-size,
1932
+ 'font-weight': $lumx-typography-interface-headline-font-weight,
1933
+ 'line-height': $lumx-typography-interface-headline-line-height,
569
1934
  ),
570
1935
  'title': (
571
- 'font-size': $lumx-typography-style-title-font-size,
572
- 'font-weight': $lumx-typography-style-title-font-weight,
573
- 'line-height': $lumx-typography-style-title-line-height,
1936
+ 'font-size': $lumx-typography-interface-title-font-size,
1937
+ 'font-weight': $lumx-typography-interface-title-font-weight,
1938
+ 'line-height': $lumx-typography-interface-title-line-height,
574
1939
  ),
575
1940
  'subtitle2': (
576
- 'font-size': $lumx-typography-style-subtitle2-font-size,
577
- 'font-weight': $lumx-typography-style-subtitle2-font-weight,
578
- 'line-height': $lumx-typography-style-subtitle2-line-height,
1941
+ 'font-size': $lumx-typography-interface-subtitle2-font-size,
1942
+ 'font-weight': $lumx-typography-interface-subtitle2-font-weight,
1943
+ 'line-height': $lumx-typography-interface-subtitle2-line-height,
579
1944
  ),
580
1945
  'subtitle1': (
581
- 'font-size': $lumx-typography-style-subtitle1-font-size,
582
- 'font-weight': $lumx-typography-style-subtitle1-font-weight,
583
- 'line-height': $lumx-typography-style-subtitle1-line-height,
1946
+ 'font-size': $lumx-typography-interface-subtitle1-font-size,
1947
+ 'font-weight': $lumx-typography-interface-subtitle1-font-weight,
1948
+ 'line-height': $lumx-typography-interface-subtitle1-line-height,
584
1949
  ),
585
1950
  'body2': (
586
- 'font-size': $lumx-typography-style-body2-font-size,
587
- 'font-weight': $lumx-typography-style-body2-font-weight,
588
- 'line-height': $lumx-typography-style-body2-line-height,
1951
+ 'font-size': $lumx-typography-interface-body2-font-size,
1952
+ 'font-weight': $lumx-typography-interface-body2-font-weight,
1953
+ 'line-height': $lumx-typography-interface-body2-line-height,
589
1954
  ),
590
1955
  'body1': (
591
- 'font-size': $lumx-typography-style-body1-font-size,
592
- 'font-weight': $lumx-typography-style-body1-font-weight,
593
- 'line-height': $lumx-typography-style-body1-line-height,
1956
+ 'font-size': $lumx-typography-interface-body1-font-size,
1957
+ 'font-weight': $lumx-typography-interface-body1-font-weight,
1958
+ 'line-height': $lumx-typography-interface-body1-line-height,
594
1959
  ),
595
1960
  'caption': (
596
- 'font-size': $lumx-typography-style-caption-font-size,
597
- 'font-weight': $lumx-typography-style-caption-font-weight,
598
- 'line-height': $lumx-typography-style-caption-line-height,
1961
+ 'font-size': $lumx-typography-interface-caption-font-size,
1962
+ 'font-weight': $lumx-typography-interface-caption-font-weight,
1963
+ 'line-height': $lumx-typography-interface-caption-line-height,
599
1964
  ),
600
1965
  'overline': (
601
- 'font-size': $lumx-typography-style-overline-font-size,
602
- 'font-weight': $lumx-typography-style-overline-font-weight,
603
- 'line-height': $lumx-typography-style-overline-line-height,
1966
+ 'font-size': $lumx-typography-interface-overline-font-size,
1967
+ 'font-weight': $lumx-typography-interface-overline-font-weight,
1968
+ 'line-height': $lumx-typography-interface-overline-line-height,
1969
+ ),
1970
+ ),
1971
+ 'custom': (
1972
+ 'title1': (
1973
+ 'font-family': $lumx-typography-custom-title1-font-family,
1974
+ 'font-size': $lumx-typography-custom-title1-font-size,
1975
+ 'font-weight': $lumx-typography-custom-title1-font-weight,
1976
+ 'line-height': $lumx-typography-custom-title1-line-height,
1977
+ ),
1978
+ 'title2': (
1979
+ 'font-family': $lumx-typography-custom-title2-font-family,
1980
+ 'font-size': $lumx-typography-custom-title2-font-size,
1981
+ 'font-weight': $lumx-typography-custom-title2-font-weight,
1982
+ 'line-height': $lumx-typography-custom-title2-line-height,
1983
+ ),
1984
+ 'title3': (
1985
+ 'font-family': $lumx-typography-custom-title3-font-family,
1986
+ 'font-size': $lumx-typography-custom-title3-font-size,
1987
+ 'font-weight': $lumx-typography-custom-title3-font-weight,
1988
+ 'line-height': $lumx-typography-custom-title3-line-height,
1989
+ ),
1990
+ 'title4': (
1991
+ 'font-family': $lumx-typography-custom-title4-font-family,
1992
+ 'font-size': $lumx-typography-custom-title4-font-size,
1993
+ 'font-weight': $lumx-typography-custom-title4-font-weight,
1994
+ 'line-height': $lumx-typography-custom-title4-line-height,
1995
+ ),
1996
+ 'title5': (
1997
+ 'font-family': $lumx-typography-custom-title5-font-family,
1998
+ 'font-size': $lumx-typography-custom-title5-font-size,
1999
+ 'font-weight': $lumx-typography-custom-title5-font-weight,
2000
+ 'line-height': $lumx-typography-custom-title5-line-height,
2001
+ ),
2002
+ 'title6': (
2003
+ 'font-family': $lumx-typography-custom-title6-font-family,
2004
+ 'font-size': $lumx-typography-custom-title6-font-size,
2005
+ 'font-weight': $lumx-typography-custom-title6-font-weight,
2006
+ 'line-height': $lumx-typography-custom-title6-line-height,
2007
+ ),
2008
+ 'intro': (
2009
+ 'font-family': $lumx-typography-custom-intro-font-family,
2010
+ 'font-size': $lumx-typography-custom-intro-font-size,
2011
+ 'font-weight': $lumx-typography-custom-intro-font-weight,
2012
+ 'line-height': $lumx-typography-custom-intro-line-height,
2013
+ ),
2014
+ 'body-large': (
2015
+ 'font-family': $lumx-typography-custom-body-large-font-family,
2016
+ 'font-size': $lumx-typography-custom-body-large-font-size,
2017
+ 'font-weight': $lumx-typography-custom-body-large-font-weight,
2018
+ 'line-height': $lumx-typography-custom-body-large-line-height,
2019
+ ),
2020
+ 'body': (
2021
+ 'font-family': $lumx-typography-custom-body-font-family,
2022
+ 'font-size': $lumx-typography-custom-body-font-size,
2023
+ 'font-weight': $lumx-typography-custom-body-font-weight,
2024
+ 'line-height': $lumx-typography-custom-body-line-height,
2025
+ ),
2026
+ 'quote': (
2027
+ 'font-family': $lumx-typography-custom-quote-font-family,
2028
+ 'font-size': $lumx-typography-custom-quote-font-size,
2029
+ 'font-weight': $lumx-typography-custom-quote-font-weight,
2030
+ 'font-style': $lumx-typography-custom-quote-font-style,
2031
+ 'line-height': $lumx-typography-custom-quote-line-height,
2032
+ ),
2033
+ 'publish-info': (
2034
+ 'font-family': $lumx-typography-custom-publish-info-font-family,
2035
+ 'font-size': $lumx-typography-custom-publish-info-font-size,
2036
+ 'font-weight': $lumx-typography-custom-publish-info-font-weight,
2037
+ 'line-height': $lumx-typography-custom-publish-info-line-height,
2038
+ ),
2039
+ 'button': (
2040
+ 'size-m': (
2041
+ 'font-family': $lumx-typography-custom-button-size-m-font-family,
2042
+ 'font-size': $lumx-typography-custom-button-size-m-font-size,
2043
+ 'font-weight': $lumx-typography-custom-button-size-m-font-weight,
2044
+ ),
2045
+ 'size-s': (
2046
+ 'font-family': $lumx-typography-custom-button-size-s-font-family,
2047
+ 'font-size': $lumx-typography-custom-button-size-s-font-size,
2048
+ 'font-weight': $lumx-typography-custom-button-size-s-font-weight,
2049
+ ),
604
2050
  ),
605
2051
  ),
606
2052
  ),