@lumx/core 3.1.5 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,544 +1,538 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 26 Oct 2022 13:20:02 GMT
3
+ * Generated on Wed, 22 Mar 2023 12:13:22 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --lumx-button-height: 36px;
8
- --lumx-button-border-radius: 4px;
9
- --lumx-button-emphasis-high-state-default-padding-horizontal: 16px;
10
- --lumx-button-emphasis-high-state-default-border-width: 0;
11
- --lumx-button-emphasis-high-state-default-theme-light-background-color: var(--lumx-color-primary-N);
12
- --lumx-button-emphasis-high-state-default-theme-light-color: var(--lumx-color-light-N);
13
- --lumx-button-emphasis-high-state-default-theme-light-border-color: transparent;
14
- --lumx-button-emphasis-high-state-default-theme-dark-background-color: var(--lumx-color-light-N);
15
- --lumx-button-emphasis-high-state-default-theme-dark-color: var(--lumx-color-primary-N);
16
- --lumx-button-emphasis-high-state-default-theme-dark-border-color: transparent;
17
- --lumx-button-emphasis-high-state-hover-padding-horizontal: 16px;
18
- --lumx-button-emphasis-high-state-hover-border-width: 0;
19
- --lumx-button-emphasis-high-state-hover-theme-light-background-color: var(--lumx-color-primary-D1);
20
- --lumx-button-emphasis-high-state-hover-theme-light-color: var(--lumx-color-light-N);
21
- --lumx-button-emphasis-high-state-hover-theme-light-border-color: transparent;
22
- --lumx-button-emphasis-high-state-hover-theme-dark-background-color: var(--lumx-color-light-L1);
23
- --lumx-button-emphasis-high-state-hover-theme-dark-color: var(--lumx-color-primary-N);
24
- --lumx-button-emphasis-high-state-hover-theme-dark-border-color: transparent;
25
- --lumx-button-emphasis-high-state-active-padding-horizontal: 16px;
26
- --lumx-button-emphasis-high-state-active-border-width: 0;
27
- --lumx-button-emphasis-high-state-active-theme-light-background-color: var(--lumx-color-primary-D2);
28
- --lumx-button-emphasis-high-state-active-theme-light-color: var(--lumx-color-light-N);
29
- --lumx-button-emphasis-high-state-active-theme-light-border-color: transparent;
30
- --lumx-button-emphasis-high-state-active-theme-dark-background-color: var(--lumx-color-light-L2);
31
- --lumx-button-emphasis-high-state-active-theme-dark-color: var(--lumx-color-primary-N);
32
- --lumx-button-emphasis-high-state-active-theme-dark-border-color: transparent;
33
- --lumx-button-emphasis-medium-state-default-padding-horizontal: 16px;
34
- --lumx-button-emphasis-medium-state-default-border-width: 0;
35
- --lumx-button-emphasis-medium-state-default-theme-light-background-color: var(--lumx-color-dark-L5);
36
- --lumx-button-emphasis-medium-state-default-theme-light-color: var(--lumx-color-dark-L1);
37
- --lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent;
38
- --lumx-button-emphasis-medium-state-default-theme-dark-background-color: var(--lumx-color-light-L5);
39
- --lumx-button-emphasis-medium-state-default-theme-dark-color: var(--lumx-color-light-N);
40
- --lumx-button-emphasis-medium-state-default-theme-dark-border-color: transparent;
41
- --lumx-button-emphasis-medium-state-hover-padding-horizontal: 16px;
42
- --lumx-button-emphasis-medium-state-hover-border-width: 0;
43
- --lumx-button-emphasis-medium-state-hover-theme-light-background-color: var(--lumx-color-dark-L4);
44
- --lumx-button-emphasis-medium-state-hover-theme-light-color: var(--lumx-color-dark-L1);
45
- --lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent;
46
- --lumx-button-emphasis-medium-state-hover-theme-dark-background-color: var(--lumx-color-light-L4);
47
- --lumx-button-emphasis-medium-state-hover-theme-dark-color: var(--lumx-color-light-N);
48
- --lumx-button-emphasis-medium-state-hover-theme-dark-border-color: transparent;
49
- --lumx-button-emphasis-medium-state-active-padding-horizontal: 16px;
50
- --lumx-button-emphasis-medium-state-active-border-width: 0;
51
- --lumx-button-emphasis-medium-state-active-theme-light-background-color: var(--lumx-color-dark-L3);
52
- --lumx-button-emphasis-medium-state-active-theme-light-color: var(--lumx-color-dark-L1);
53
- --lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent;
54
- --lumx-button-emphasis-medium-state-active-theme-dark-background-color: var(--lumx-color-light-L3);
55
- --lumx-button-emphasis-medium-state-active-theme-dark-color: var(--lumx-color-light-N);
56
- --lumx-button-emphasis-medium-state-active-theme-dark-border-color: transparent;
57
- --lumx-button-emphasis-low-state-default-padding-horizontal: 8px;
58
- --lumx-button-emphasis-low-state-default-border-width: 0;
59
- --lumx-button-emphasis-low-state-default-theme-light-background-color: transparent;
60
- --lumx-button-emphasis-low-state-default-theme-light-color: var(--lumx-color-dark-L1);
61
- --lumx-button-emphasis-low-state-default-theme-light-border-color: transparent;
62
- --lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent;
63
- --lumx-button-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-N);
64
- --lumx-button-emphasis-low-state-default-theme-dark-border-color: transparent;
65
- --lumx-button-emphasis-low-state-hover-padding-horizontal: 8px;
66
- --lumx-button-emphasis-low-state-hover-border-width: 0;
67
- --lumx-button-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5);
68
- --lumx-button-emphasis-low-state-hover-theme-light-color: var(--lumx-color-dark-L1);
69
- --lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent;
70
- --lumx-button-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
71
- --lumx-button-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-N);
72
- --lumx-button-emphasis-low-state-hover-theme-dark-border-color: transparent;
73
- --lumx-button-emphasis-low-state-active-padding-horizontal: 8px;
74
- --lumx-button-emphasis-low-state-active-border-width: 0;
75
- --lumx-button-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4);
76
- --lumx-button-emphasis-low-state-active-theme-light-color: var(--lumx-color-dark-L1);
77
- --lumx-button-emphasis-low-state-active-theme-light-border-color: transparent;
78
- --lumx-button-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
79
- --lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-N);
80
- --lumx-button-emphasis-low-state-active-theme-dark-border-color: transparent;
81
- --lumx-button-emphasis-selected-state-default-padding-horizontal: 16px;
82
- --lumx-button-emphasis-selected-state-default-border-width: 0;
83
- --lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5);
84
- --lumx-button-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-D2);
85
- --lumx-button-emphasis-selected-state-default-theme-light-border-color: transparent;
86
- --lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3);
87
- --lumx-button-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N);
88
- --lumx-button-emphasis-selected-state-default-theme-dark-border-color: transparent;
89
- --lumx-button-emphasis-selected-state-hover-padding-horizontal: 16px;
90
- --lumx-button-emphasis-selected-state-hover-border-width: 0;
91
- --lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4);
92
- --lumx-button-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-D2);
93
- --lumx-button-emphasis-selected-state-hover-theme-light-border-color: transparent;
94
- --lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4);
95
- --lumx-button-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N);
96
- --lumx-button-emphasis-selected-state-hover-theme-dark-border-color: transparent;
97
- --lumx-button-emphasis-selected-state-active-padding-horizontal: 16px;
98
- --lumx-button-emphasis-selected-state-active-border-width: 0;
99
- --lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3);
100
- --lumx-button-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-D2);
101
- --lumx-button-emphasis-selected-state-active-theme-light-border-color: transparent;
102
- --lumx-button-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5);
103
- --lumx-button-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N);
104
- --lumx-button-emphasis-selected-state-active-theme-dark-border-color: transparent;
105
- --lumx-material-button-text-transform: none;
106
- --lumx-material-checkbox-wrapper-size: 20px;
107
- --lumx-material-checkbox-control-size: 16px;
108
- --lumx-material-chip-size-m-height: 36px;
109
- --lumx-material-chip-size-m-border-radius: 18px;
110
- --lumx-material-chip-size-m-padding-vertical: 16px;
111
- --lumx-material-chip-size-s-height: 24px;
112
- --lumx-material-chip-size-s-border-radius: 12px;
113
- --lumx-material-chip-size-s-padding-vertical: 12px;
114
- --lumx-material-input-helper-font-size: 12px;
115
- --lumx-material-input-helper-font-weight: var(--lumx-typography-font-weight-regular);
116
- --lumx-material-input-helper-line-height: 16px;
117
- --lumx-material-input-label-font-size: 14px;
118
- --lumx-material-input-label-font-weight: var(--lumx-typography-font-weight-regular);
119
- --lumx-material-input-label-line-height: 20px;
120
- --lumx-material-progress-bounce: block;
121
- --lumx-material-progress-rotate: none;
122
- --lumx-material-radio-button-wrapper-size: 20px;
123
- --lumx-material-radio-button-control-size: 16px;
124
- --lumx-material-radio-button-indicator-size: 8px;
125
- --lumx-material-switch-wrapper-width: 30px;
126
- --lumx-material-switch-wrapper-height: 20px;
127
- --lumx-material-switch-control-width: 30px;
128
- --lumx-material-switch-control-height: 16px;
129
- --lumx-material-switch-indicator-size: 8px;
130
- --lumx-material-switch-indicator-offset: 4px;
131
- --lumx-material-text-field-padding-top: 0;
132
- --lumx-material-text-field-padding-bottom: 0;
133
- --lumx-material-text-field-header-wrapper-margin-bottom: 8px;
134
- --lumx-material-text-field-header-label-font-size: 14px;
135
- --lumx-material-text-field-header-label-font-weight: var(--lumx-typography-font-weight-regular);
136
- --lumx-material-text-field-header-label-line-height: 20px;
137
- --lumx-material-text-field-input-content-font-size: 14px;
138
- --lumx-material-text-field-input-content-font-weight: var(--lumx-typography-font-weight-regular);
139
- --lumx-material-text-field-input-content-line-height: 20px;
140
- --lumx-navigation-item-padding-horizontal: 8px;
141
- --lumx-navigation-item-min-height: 36px;
142
- --lumx-navigation-item-border-radius: 4px;
143
- --lumx-navigation-item-emphasis-low-state-default-border-top-width: 0;
144
- --lumx-navigation-item-emphasis-low-state-default-border-right-width: 0;
145
- --lumx-navigation-item-emphasis-low-state-default-border-bottom-width: 0;
146
- --lumx-navigation-item-emphasis-low-state-default-border-left-width: 0;
147
- --lumx-navigation-item-emphasis-low-state-default-theme-light-background-color: transparent;
148
- --lumx-navigation-item-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L5);
149
- --lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: var(--lumx-color-dark-L1);
150
- --lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: var(--lumx-color-dark-N);
151
- --lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-background-color: transparent;
152
- --lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color: var(--lumx-color-dark-L1);
153
- --lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent;
154
- --lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: var(--lumx-color-light-L5);
155
- --lumx-navigation-item-emphasis-low-state-default-theme-dark-icon-color: var(--lumx-color-light-N);
156
- --lumx-navigation-item-emphasis-low-state-default-theme-dark-label-color: var(--lumx-color-light-N);
157
- --lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-background-color: transparent;
158
- --lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-color: var(--lumx-color-light-N);
159
- --lumx-navigation-item-emphasis-low-state-hover-border-top-width: 0;
160
- --lumx-navigation-item-emphasis-low-state-hover-border-right-width: 0;
161
- --lumx-navigation-item-emphasis-low-state-hover-border-bottom-width: 0;
162
- --lumx-navigation-item-emphasis-low-state-hover-border-left-width: 0;
163
- --lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5);
164
- --lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L5);
165
- --lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: var(--lumx-color-dark-L1);
166
- --lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: var(--lumx-color-dark-N);
167
- --lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color: var(--lumx-color-dark-L5);
168
- --lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color: var(--lumx-color-dark-L1);
169
- --lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
170
- --lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color: var(--lumx-color-light-L5);
171
- --lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color: var(--lumx-color-light-N);
172
- --lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color: var(--lumx-color-light-N);
173
- --lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L5);
174
- --lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-color: var(--lumx-color-light-N);
175
- --lumx-navigation-item-emphasis-low-state-active-border-top-width: 0;
176
- --lumx-navigation-item-emphasis-low-state-active-border-right-width: 0;
177
- --lumx-navigation-item-emphasis-low-state-active-border-bottom-width: 0;
178
- --lumx-navigation-item-emphasis-low-state-active-border-left-width: 0;
179
- --lumx-navigation-item-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4);
180
- --lumx-navigation-item-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L5);
181
- --lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: var(--lumx-color-dark-L1);
182
- --lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: var(--lumx-color-dark-N);
183
- --lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color: var(--lumx-color-dark-L4);
184
- --lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color: var(--lumx-color-dark-L1);
185
- --lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
186
- --lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color: var(--lumx-color-light-L5);
187
- --lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color: var(--lumx-color-light-N);
188
- --lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color: var(--lumx-color-light-N);
189
- --lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L4);
190
- --lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color: var(--lumx-color-light-N);
191
- --lumx-navigation-item-emphasis-selected-state-default-border-top-width: 0;
192
- --lumx-navigation-item-emphasis-selected-state-default-border-right-width: 0;
193
- --lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 0;
194
- --lumx-navigation-item-emphasis-selected-state-default-border-left-width: 0;
195
- --lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5);
196
- --lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
197
- --lumx-navigation-item-emphasis-selected-state-default-theme-light-icon-color: var(--lumx-color-primary-D2);
198
- --lumx-navigation-item-emphasis-selected-state-default-theme-light-label-color: var(--lumx-color-primary-D2);
199
- --lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-background-color: transparent;
200
- --lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-color: var(--lumx-color-primary-D2);
201
- --lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3);
202
- --lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-L5);
203
- --lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color: var(--lumx-color-light-N);
204
- --lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color: var(--lumx-color-light-N);
205
- --lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-background-color: transparent;
206
- --lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-color: var(--lumx-color-light-N);
207
- --lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 0;
208
- --lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 0;
209
- --lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 0;
210
- --lumx-navigation-item-emphasis-selected-state-hover-border-left-width: 0;
211
- --lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4);
212
- --lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
213
- --lumx-navigation-item-emphasis-selected-state-hover-theme-light-icon-color: var(--lumx-color-primary-D2);
214
- --lumx-navigation-item-emphasis-selected-state-hover-theme-light-label-color: var(--lumx-color-primary-D2);
215
- --lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-background-color: var(
216
- --lumx-color-primary-L4
217
- );
218
- --lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-color: var(--lumx-color-primary-D2);
219
- --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4);
220
- --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-L5);
221
- --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color: var(--lumx-color-light-N);
222
- --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color: var(--lumx-color-light-N);
223
- --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: var(
224
- --lumx-color-light-L4
225
- );
226
- --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color: var(--lumx-color-light-N);
227
- --lumx-navigation-item-emphasis-selected-state-active-border-top-width: 0;
228
- --lumx-navigation-item-emphasis-selected-state-active-border-right-width: 0;
229
- --lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 0;
230
- --lumx-navigation-item-emphasis-selected-state-active-border-left-width: 0;
231
- --lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3);
232
- --lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
233
- --lumx-navigation-item-emphasis-selected-state-active-theme-light-icon-color: var(--lumx-color-primary-D2);
234
- --lumx-navigation-item-emphasis-selected-state-active-theme-light-label-color: var(--lumx-color-primary-D2);
235
- --lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-background-color: var(
236
- --lumx-color-primary-L3
237
- );
238
- --lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-color: var(--lumx-color-primary-D2);
239
- --lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5);
240
- --lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-L5);
241
- --lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color: var(--lumx-color-light-N);
242
- --lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N);
243
- --lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(
244
- --lumx-color-light-L5
245
- );
246
- --lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: var(--lumx-color-light-N);
247
- --lumx-tabs-link-height: 48px;
248
- --lumx-tabs-link-border-radius: 0;
249
- --lumx-tabs-link-emphasis-low-state-default-border-top-width: 0;
250
- --lumx-tabs-link-emphasis-low-state-default-border-right-width: 0;
251
- --lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 2px;
252
- --lumx-tabs-link-emphasis-low-state-default-border-left-width: 0;
253
- --lumx-tabs-link-emphasis-low-state-default-theme-light-background-color: transparent;
254
- --lumx-tabs-link-emphasis-low-state-default-theme-light-color: var(--lumx-color-dark-L1);
255
- --lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L5);
256
- --lumx-tabs-link-emphasis-low-state-default-theme-dark-background-color: transparent;
257
- --lumx-tabs-link-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-N);
258
- --lumx-tabs-link-emphasis-low-state-default-theme-dark-border-color: var(--lumx-color-light-L5);
259
- --lumx-tabs-link-emphasis-low-state-hover-border-top-width: 0;
260
- --lumx-tabs-link-emphasis-low-state-hover-border-right-width: 0;
261
- --lumx-tabs-link-emphasis-low-state-hover-border-bottom-width: 2px;
262
- --lumx-tabs-link-emphasis-low-state-hover-border-left-width: 0;
263
- --lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5);
264
- --lumx-tabs-link-emphasis-low-state-hover-theme-light-color: var(--lumx-color-dark-L1);
265
- --lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L5);
266
- --lumx-tabs-link-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
267
- --lumx-tabs-link-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-N);
268
- --lumx-tabs-link-emphasis-low-state-hover-theme-dark-border-color: var(--lumx-color-light-L5);
269
- --lumx-tabs-link-emphasis-low-state-active-border-top-width: 0;
270
- --lumx-tabs-link-emphasis-low-state-active-border-right-width: 0;
271
- --lumx-tabs-link-emphasis-low-state-active-border-bottom-width: 2px;
272
- --lumx-tabs-link-emphasis-low-state-active-border-left-width: 0;
273
- --lumx-tabs-link-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4);
274
- --lumx-tabs-link-emphasis-low-state-active-theme-light-color: var(--lumx-color-dark-L1);
275
- --lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L5);
276
- --lumx-tabs-link-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
277
- --lumx-tabs-link-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-N);
278
- --lumx-tabs-link-emphasis-low-state-active-theme-dark-border-color: var(--lumx-color-light-L5);
279
- --lumx-tabs-link-emphasis-selected-state-default-border-top-width: 0;
280
- --lumx-tabs-link-emphasis-selected-state-default-border-right-width: 0;
281
- --lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 2px;
282
- --lumx-tabs-link-emphasis-selected-state-default-border-left-width: 0;
283
- --lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: transparent;
284
- --lumx-tabs-link-emphasis-selected-state-default-theme-light-color: var(--lumx-color-dark-L1);
285
- --lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
286
- --lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent;
287
- --lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N);
288
- --lumx-tabs-link-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N);
289
- --lumx-tabs-link-emphasis-selected-state-hover-border-top-width: 0;
290
- --lumx-tabs-link-emphasis-selected-state-hover-border-right-width: 0;
291
- --lumx-tabs-link-emphasis-selected-state-hover-border-bottom-width: 2px;
292
- --lumx-tabs-link-emphasis-selected-state-hover-border-left-width: 0;
293
- --lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-dark-L5);
294
- --lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-dark-L1);
295
- --lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
296
- --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
297
- --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N);
298
- --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N);
299
- --lumx-tabs-link-emphasis-selected-state-active-border-top-width: 0;
300
- --lumx-tabs-link-emphasis-selected-state-active-border-right-width: 0;
301
- --lumx-tabs-link-emphasis-selected-state-active-border-bottom-width: 2px;
302
- --lumx-tabs-link-emphasis-selected-state-active-border-left-width: 0;
303
- --lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-dark-L4);
304
- --lumx-tabs-link-emphasis-selected-state-active-theme-light-color: var(--lumx-color-dark-L1);
305
- --lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
306
- --lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
307
- --lumx-tabs-link-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N);
308
- --lumx-tabs-link-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N);
309
- --lumx-text-field-input-min-height: 36px;
310
- --lumx-text-field-input-padding-horizontal: 12px;
311
- --lumx-text-field-input-border-radius: 4px;
312
- --lumx-text-field-state-default-input-border-top-width: 1px;
313
- --lumx-text-field-state-default-input-border-right-width: 1px;
314
- --lumx-text-field-state-default-input-border-bottom-width: 1px;
315
- --lumx-text-field-state-default-input-border-left-width: 1px;
316
- --lumx-text-field-state-default-theme-light-header-label-color: var(--lumx-color-dark-N);
317
- --lumx-text-field-state-default-theme-light-input-background-color: var(--lumx-color-dark-L6);
318
- --lumx-text-field-state-default-theme-light-input-border-color: var(--lumx-color-dark-L4);
319
- --lumx-text-field-state-default-theme-light-input-content-color: var(--lumx-color-dark-N);
320
- --lumx-text-field-state-default-theme-light-input-placeholder-color: var(--lumx-color-dark-L2);
321
- --lumx-text-field-state-default-theme-dark-header-label-color: var(--lumx-color-light-N);
322
- --lumx-text-field-state-default-theme-dark-input-background-color: var(--lumx-color-light-L6);
323
- --lumx-text-field-state-default-theme-dark-input-border-color: var(--lumx-color-light-L4);
324
- --lumx-text-field-state-default-theme-dark-input-content-color: var(--lumx-color-light-N);
325
- --lumx-text-field-state-default-theme-dark-input-placeholder-color: var(--lumx-color-light-L2);
326
- --lumx-text-field-state-hover-input-border-top-width: 1px;
327
- --lumx-text-field-state-hover-input-border-right-width: 1px;
328
- --lumx-text-field-state-hover-input-border-bottom-width: 1px;
329
- --lumx-text-field-state-hover-input-border-left-width: 1px;
330
- --lumx-text-field-state-hover-theme-light-header-label-color: var(--lumx-color-dark-N);
331
- --lumx-text-field-state-hover-theme-light-input-background-color: var(--lumx-color-dark-L5);
332
- --lumx-text-field-state-hover-theme-light-input-border-color: var(--lumx-color-dark-L4);
333
- --lumx-text-field-state-hover-theme-light-input-content-color: var(--lumx-color-dark-N);
334
- --lumx-text-field-state-hover-theme-light-input-placeholder-color: var(--lumx-color-dark-L2);
335
- --lumx-text-field-state-hover-theme-dark-header-label-color: var(--lumx-color-light-N);
336
- --lumx-text-field-state-hover-theme-dark-input-background-color: var(--lumx-color-light-L5);
337
- --lumx-text-field-state-hover-theme-dark-input-border-color: var(--lumx-color-light-L4);
338
- --lumx-text-field-state-hover-theme-dark-input-content-color: var(--lumx-color-light-N);
339
- --lumx-text-field-state-hover-theme-dark-input-placeholder-color: var(--lumx-color-light-L2);
340
- --lumx-text-field-state-focus-input-border-top-width: 2px;
341
- --lumx-text-field-state-focus-input-border-right-width: 2px;
342
- --lumx-text-field-state-focus-input-border-bottom-width: 2px;
343
- --lumx-text-field-state-focus-input-border-left-width: 2px;
344
- --lumx-text-field-state-focus-theme-light-header-label-color: var(--lumx-color-dark-N);
345
- --lumx-text-field-state-focus-theme-light-input-background-color: var(--lumx-color-light-N);
346
- --lumx-text-field-state-focus-theme-light-input-border-color: var(--lumx-color-primary-N);
347
- --lumx-text-field-state-focus-theme-light-input-content-color: var(--lumx-color-dark-N);
348
- --lumx-text-field-state-focus-theme-light-input-placeholder-color: var(--lumx-color-dark-L2);
349
- --lumx-text-field-state-focus-theme-dark-header-label-color: var(--lumx-color-light-N);
350
- --lumx-text-field-state-focus-theme-dark-input-background-color: transparent;
351
- --lumx-text-field-state-focus-theme-dark-input-border-color: var(--lumx-color-light-N);
352
- --lumx-text-field-state-focus-theme-dark-input-content-color: var(--lumx-color-light-N);
353
- --lumx-text-field-state-focus-theme-dark-input-placeholder-color: var(--lumx-color-light-L2);
354
- --lumx-border-radius: 4px;
355
- --lumx-color-dark-N: rgba(0, 0, 0, 0.87); /* Neutral dark color */
356
- --lumx-color-dark-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
357
- --lumx-color-dark-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
358
- --lumx-color-dark-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
359
- --lumx-color-dark-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */
360
- --lumx-color-dark-L5: rgba(0, 0, 0, 0.12); /* Base dark color with 12% opacity */
361
- --lumx-color-dark-L6: rgba(0, 0, 0, 0.05); /* Base dark color with 5% opacity */
362
- --lumx-color-light-N: rgb(255, 255, 255); /* Neutral light color */
363
- --lumx-color-light-L1: rgba(255, 255, 255, 0.9); /* Base light color with 90% opacity */
364
- --lumx-color-light-L2: rgba(255, 255, 255, 0.8); /* Base light color with 80% opacity */
365
- --lumx-color-light-L3: rgba(255, 255, 255, 0.6); /* Base light color with 60% opacity */
366
- --lumx-color-light-L4: rgba(255, 255, 255, 0.4); /* Base light color with 40% opacity */
367
- --lumx-color-light-L5: rgba(255, 255, 255, 0.2); /* Base light color with 20% opacity */
368
- --lumx-color-light-L6: rgba(255, 255, 255, 0.1); /* Base light color with 10% opacity */
369
- --lumx-color-blue-D2: rgb(21, 70, 193); /* Darkest blue color */
370
- --lumx-color-blue-D1: rgb(24, 78, 216); /* Dark blue color */
371
- --lumx-color-blue-N: rgb(36, 91, 231); /* Neutral blue color */
372
- --lumx-color-blue-L1: rgba(36, 91, 231, 0.8); /* Base blue color with 80% opacity */
373
- --lumx-color-blue-L2: rgba(36, 91, 231, 0.6); /* Base blue color with 60% opacity */
374
- --lumx-color-blue-L3: rgba(36, 91, 231, 0.4); /* Base blue color with 40% opacity */
375
- --lumx-color-blue-L4: rgba(36, 91, 231, 0.2); /* Base blue color with 20% opacity */
376
- --lumx-color-blue-L5: rgba(36, 91, 231, 0.1); /* Base blue color with 10% opacity */
377
- --lumx-color-blue-L6: rgba(36, 91, 231, 0.05); /* Base blue color with 5% opacity */
378
- --lumx-color-green-D2: rgb(26, 110, 89); /* Darkest green color */
379
- --lumx-color-green-D1: rgb(23, 122, 97); /* Dark green color */
380
- --lumx-color-green-N: rgb(19, 134, 105); /* Neutral green color */
381
- --lumx-color-green-L1: rgba(19, 134, 105, 0.8); /* Base green color with 80% opacity */
382
- --lumx-color-green-L2: rgba(19, 134, 105, 0.6); /* Base green color with 60% opacity */
383
- --lumx-color-green-L3: rgba(19, 134, 105, 0.4); /* Base green color with 40% opacity */
384
- --lumx-color-green-L4: rgba(19, 134, 105, 0.2); /* Base green color with 20% opacity */
385
- --lumx-color-green-L5: rgba(19, 134, 105, 0.1); /* Base green color with 10% opacity */
386
- --lumx-color-green-L6: rgba(19, 134, 105, 0.05); /* Base green color with 5% opacity */
387
- --lumx-color-yellow-D2: rgb(255, 161, 37); /* Darkest yellow color */
388
- --lumx-color-yellow-D1: rgb(255, 179, 37); /* Dark yellow color */
389
- --lumx-color-yellow-N: rgb(255, 196, 37); /* Neutral yellow color */
390
- --lumx-color-yellow-L1: rgba(255, 196, 37, 0.9); /* Base yellow color with 80% opacity */
391
- --lumx-color-yellow-L2: rgba(255, 196, 37, 0.8); /* Base yellow color with 70% opacity */
392
- --lumx-color-yellow-L3: rgba(255, 196, 37, 0.6); /* Base yellow color with 60% opacity */
393
- --lumx-color-yellow-L4: rgba(255, 196, 37, 0.48); /* Base yellow color with 40% opacity */
394
- --lumx-color-yellow-L5: rgba(255, 196, 37, 0.24); /* Base yellow color with 20% opacity */
395
- --lumx-color-yellow-L6: rgba(255, 196, 37, 0.12); /* Base yellow color with 10% opacity */
396
- --lumx-color-red-D2: rgb(190, 30, 70); /* Darkest red color */
397
- --lumx-color-red-D1: rgb(212, 33, 72); /* Dark red color */
398
- --lumx-color-red-N: rgb(223, 48, 80); /* Neutral red color */
399
- --lumx-color-red-L1: rgba(223, 48, 80, 0.8); /* Base red color with 80% opacity */
400
- --lumx-color-red-L2: rgba(223, 48, 80, 0.6); /* Base red color with 60% opacity */
401
- --lumx-color-red-L3: rgba(223, 48, 80, 0.4); /* Base red color with 40% opacity */
402
- --lumx-color-red-L4: rgba(223, 48, 80, 0.2); /* Base red color with 20% opacity */
403
- --lumx-color-red-L5: rgba(223, 48, 80, 0.1); /* Base red color with 10% opacity */
404
- --lumx-color-red-L6: rgba(223, 48, 80, 0.05); /* Base red color with 5% opacity */
405
- --lumx-color-grey-N: rgb(117, 117, 117); /* Neutral grey color */
406
- --lumx-color-grey-L1: rgba(117, 117, 117, 0.8); /* Base grey color with 80% opacity */
407
- --lumx-color-grey-L2: rgba(117, 117, 117, 0.6); /* Base grey color with 60% opacity */
408
- --lumx-color-grey-L3: rgba(117, 117, 117, 0.4); /* Base grey color with 40% opacity */
409
- --lumx-color-grey-L4: rgba(117, 117, 117, 0.2); /* Base grey color with 20% opacity */
410
- --lumx-color-grey-L5: rgba(117, 117, 117, 0.1); /* Base grey color with 10% opacity */
411
- --lumx-color-grey-L6: rgba(117, 117, 117, 0.05); /* Base grey color with 5% opacity */
412
- --lumx-color-primary-D2: rgb(21, 70, 193); /* Darkest blue color */
413
- --lumx-color-primary-D1: rgb(24, 78, 216); /* Dark blue color */
414
- --lumx-color-primary-N: rgb(36, 91, 231); /* Neutral blue color */
415
- --lumx-color-primary-L1: rgba(36, 91, 231, 0.8); /* Base blue color with 80% opacity */
416
- --lumx-color-primary-L2: rgba(36, 91, 231, 0.6); /* Base blue color with 60% opacity */
417
- --lumx-color-primary-L3: rgba(36, 91, 231, 0.4); /* Base blue color with 40% opacity */
418
- --lumx-color-primary-L4: rgba(36, 91, 231, 0.2); /* Base blue color with 20% opacity */
419
- --lumx-color-primary-L5: rgba(36, 91, 231, 0.1); /* Base blue color with 10% opacity */
420
- --lumx-color-primary-L6: rgba(36, 91, 231, 0.05); /* Base blue color with 5% opacity */
421
- --lumx-color-secondary-D2: rgb(26, 110, 89); /* Darkest green color */
422
- --lumx-color-secondary-D1: rgb(23, 122, 97); /* Dark green color */
423
- --lumx-color-secondary-N: rgb(19, 134, 105); /* Neutral green color */
424
- --lumx-color-secondary-L1: rgba(19, 134, 105, 0.8); /* Base green color with 80% opacity */
425
- --lumx-color-secondary-L2: rgba(19, 134, 105, 0.6); /* Base green color with 60% opacity */
426
- --lumx-color-secondary-L3: rgba(19, 134, 105, 0.4); /* Base green color with 40% opacity */
427
- --lumx-color-secondary-L4: rgba(19, 134, 105, 0.2); /* Base green color with 20% opacity */
428
- --lumx-color-secondary-L5: rgba(19, 134, 105, 0.1); /* Base green color with 10% opacity */
429
- --lumx-color-secondary-L6: rgba(19, 134, 105, 0.05); /* Base green color with 5% opacity */
430
- --lumx-color-accent-D2: rgb(26, 110, 89); /* Darkest green color */
431
- --lumx-color-accent-D1: rgb(23, 122, 97); /* Dark green color */
432
- --lumx-color-accent-N: rgb(19, 134, 105); /* Neutral green color */
433
- --lumx-color-accent-L1: rgba(19, 134, 105, 0.8); /* Base green color with 80% opacity */
434
- --lumx-color-accent-L2: rgba(19, 134, 105, 0.6); /* Base green color with 60% opacity */
435
- --lumx-color-accent-L3: rgba(19, 134, 105, 0.4); /* Base green color with 40% opacity */
436
- --lumx-color-accent-L4: rgba(19, 134, 105, 0.2); /* Base green color with 20% opacity */
437
- --lumx-color-accent-L5: rgba(19, 134, 105, 0.1); /* Base green color with 10% opacity */
438
- --lumx-color-accent-L6: rgba(19, 134, 105, 0.05); /* Base green color with 5% opacity */
439
- --lumx-color-black-N: rgba(0, 0, 0, 0.87); /* Neutral dark color */
440
- --lumx-color-black-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
441
- --lumx-color-black-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
442
- --lumx-color-black-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
443
- --lumx-color-black-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */
444
- --lumx-color-black-L5: rgba(0, 0, 0, 0.12); /* Base dark color with 12% opacity */
445
- --lumx-color-black-L6: rgba(0, 0, 0, 0.05); /* Base dark color with 5% opacity */
446
- --lumx-color-white-N: rgb(255, 255, 255); /* Neutral light color */
447
- --lumx-color-white-L1: rgba(255, 255, 255, 0.9); /* Base light color with 90% opacity */
448
- --lumx-color-white-L2: rgba(255, 255, 255, 0.8); /* Base light color with 80% opacity */
449
- --lumx-color-white-L3: rgba(255, 255, 255, 0.6); /* Base light color with 60% opacity */
450
- --lumx-color-white-L4: rgba(255, 255, 255, 0.4); /* Base light color with 40% opacity */
451
- --lumx-color-white-L5: rgba(255, 255, 255, 0.2); /* Base light color with 20% opacity */
452
- --lumx-color-white-L6: rgba(255, 255, 255, 0.1); /* Base light color with 10% opacity */
453
- --lumx-color-orange-D2: rgb(255, 161, 37); /* Darkest yellow color */
454
- --lumx-color-orange-D1: rgb(255, 179, 37); /* Dark yellow color */
455
- --lumx-color-orange-N: rgb(255, 196, 37); /* Neutral yellow color */
456
- --lumx-color-orange-L1: rgba(255, 196, 37, 0.9); /* Base yellow color with 80% opacity */
457
- --lumx-color-orange-L2: rgba(255, 196, 37, 0.8); /* Base yellow color with 70% opacity */
458
- --lumx-color-orange-L3: rgba(255, 196, 37, 0.6); /* Base yellow color with 60% opacity */
459
- --lumx-color-orange-L4: rgba(255, 196, 37, 0.48); /* Base yellow color with 40% opacity */
460
- --lumx-color-orange-L5: rgba(255, 196, 37, 0.24); /* Base yellow color with 20% opacity */
461
- --lumx-color-orange-L6: rgba(255, 196, 37, 0.12); /* Base yellow color with 10% opacity */
462
- --lumx-size-xxs: 14px;
463
- --lumx-size-xs: 20px;
464
- --lumx-size-s: 24px;
465
- --lumx-size-m: 36px;
466
- --lumx-size-l: 64px;
467
- --lumx-size-xl: 128px;
468
- --lumx-size-xxl: 256px;
469
- --lumx-spacing-unit-tiny: 4px;
470
- --lumx-spacing-unit-regular: 8px;
471
- --lumx-spacing-unit-medium: 12px;
472
- --lumx-spacing-unit-big: 16px;
473
- --lumx-spacing-unit-huge: 24px;
474
- --lumx-typography-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
475
- 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
476
- --lumx-typography-font-weight-regular: 400;
477
- --lumx-typography-font-weight-bold: 700;
478
- --lumx-typography-font-weight-light: 300;
479
- --lumx-typography-interface-display1-font-size: 34px;
480
- --lumx-typography-interface-display1-font-weight: var(--lumx-typography-font-weight-bold);
481
- --lumx-typography-interface-display1-line-height: 40px;
482
- --lumx-typography-interface-headline-font-size: 24px;
483
- --lumx-typography-interface-headline-font-weight: var(--lumx-typography-font-weight-bold);
484
- --lumx-typography-interface-headline-line-height: 32px;
485
- --lumx-typography-interface-title-font-size: 20px;
486
- --lumx-typography-interface-title-font-weight: var(--lumx-typography-font-weight-bold);
487
- --lumx-typography-interface-title-line-height: 30px;
488
- --lumx-typography-interface-subtitle2-font-size: 16px;
489
- --lumx-typography-interface-subtitle2-font-weight: var(--lumx-typography-font-weight-bold);
490
- --lumx-typography-interface-subtitle2-line-height: 24px;
491
- --lumx-typography-interface-subtitle1-font-size: 14px;
492
- --lumx-typography-interface-subtitle1-font-weight: var(--lumx-typography-font-weight-bold);
493
- --lumx-typography-interface-subtitle1-line-height: 20px;
494
- --lumx-typography-interface-body2-font-size: 16px;
495
- --lumx-typography-interface-body2-font-weight: var(--lumx-typography-font-weight-regular);
496
- --lumx-typography-interface-body2-line-height: 24px;
497
- --lumx-typography-interface-body1-font-size: 14px;
498
- --lumx-typography-interface-body1-font-weight: var(--lumx-typography-font-weight-regular);
499
- --lumx-typography-interface-body1-line-height: 20px;
500
- --lumx-typography-interface-caption-font-size: 12px;
501
- --lumx-typography-interface-caption-font-weight: var(--lumx-typography-font-weight-regular);
502
- --lumx-typography-interface-caption-line-height: 16px;
503
- --lumx-typography-interface-overline-font-size: 10px;
504
- --lumx-typography-interface-overline-font-weight: var(--lumx-typography-font-weight-bold);
505
- --lumx-typography-interface-overline-line-height: 12px;
506
- --lumx-typography-custom-title1-font-size: 40px;
507
- --lumx-typography-custom-title1-font-weight: var(--lumx-typography-font-weight-bold);
508
- --lumx-typography-custom-title1-line-height: 50px;
509
- --lumx-typography-custom-title2-font-size: 30px;
510
- --lumx-typography-custom-title2-font-weight: var(--lumx-typography-font-weight-bold);
511
- --lumx-typography-custom-title2-line-height: 40px;
512
- --lumx-typography-custom-title3-font-size: 24px;
513
- --lumx-typography-custom-title3-font-weight: var(--lumx-typography-font-weight-bold);
514
- --lumx-typography-custom-title3-line-height: 32px;
515
- --lumx-typography-custom-title4-font-size: 20px;
516
- --lumx-typography-custom-title4-font-weight: var(--lumx-typography-font-weight-bold);
517
- --lumx-typography-custom-title4-line-height: 30px;
518
- --lumx-typography-custom-title5-font-size: 16px;
519
- --lumx-typography-custom-title5-font-weight: var(--lumx-typography-font-weight-bold);
520
- --lumx-typography-custom-title5-line-height: 24px;
521
- --lumx-typography-custom-title6-font-size: 14px;
522
- --lumx-typography-custom-title6-font-weight: var(--lumx-typography-font-weight-bold);
523
- --lumx-typography-custom-title6-line-height: 20px;
524
- --lumx-typography-custom-intro-font-size: 18px;
525
- --lumx-typography-custom-intro-font-weight: var(--lumx-typography-font-weight-bold);
526
- --lumx-typography-custom-intro-line-height: 30px;
527
- --lumx-typography-custom-body-large-font-size: 16px;
528
- --lumx-typography-custom-body-large-font-weight: var(--lumx-typography-font-weight-regular);
529
- --lumx-typography-custom-body-large-line-height: 24px;
530
- --lumx-typography-custom-body-font-size: 14px;
531
- --lumx-typography-custom-body-font-weight: var(--lumx-typography-font-weight-regular);
532
- --lumx-typography-custom-body-line-height: 20px;
533
- --lumx-typography-custom-quote-font-size: 16px;
534
- --lumx-typography-custom-quote-font-weight: var(--lumx-typography-font-weight-regular);
535
- --lumx-typography-custom-quote-font-style: italic;
536
- --lumx-typography-custom-quote-line-height: 24px;
537
- --lumx-typography-custom-publish-info-font-size: 14px;
538
- --lumx-typography-custom-publish-info-font-weight: var(--lumx-typography-font-weight-regular);
539
- --lumx-typography-custom-publish-info-line-height: 20px;
540
- --lumx-typography-custom-button-size-m-font-size: 14px;
541
- --lumx-typography-custom-button-size-m-font-weight: var(--lumx-typography-font-weight-bold);
542
- --lumx-typography-custom-button-size-s-font-size: 12px;
543
- --lumx-typography-custom-button-size-s-font-weight: var(--lumx-typography-font-weight-bold);
7
+ --lumx-button-height: 36px;
8
+ --lumx-button-border-radius: 4px;
9
+ --lumx-button-emphasis-high-state-default-padding-horizontal: 16px;
10
+ --lumx-button-emphasis-high-state-default-border-width: 0;
11
+ --lumx-button-emphasis-high-state-default-theme-light-background-color: var(--lumx-color-primary-N);
12
+ --lumx-button-emphasis-high-state-default-theme-light-color: var(--lumx-color-light-N);
13
+ --lumx-button-emphasis-high-state-default-theme-light-border-color: transparent;
14
+ --lumx-button-emphasis-high-state-default-theme-dark-background-color: var(--lumx-color-light-N);
15
+ --lumx-button-emphasis-high-state-default-theme-dark-color: var(--lumx-color-primary-N);
16
+ --lumx-button-emphasis-high-state-default-theme-dark-border-color: transparent;
17
+ --lumx-button-emphasis-high-state-hover-padding-horizontal: 16px;
18
+ --lumx-button-emphasis-high-state-hover-border-width: 0;
19
+ --lumx-button-emphasis-high-state-hover-theme-light-background-color: var(--lumx-color-primary-D1);
20
+ --lumx-button-emphasis-high-state-hover-theme-light-color: var(--lumx-color-light-N);
21
+ --lumx-button-emphasis-high-state-hover-theme-light-border-color: transparent;
22
+ --lumx-button-emphasis-high-state-hover-theme-dark-background-color: var(--lumx-color-light-L1);
23
+ --lumx-button-emphasis-high-state-hover-theme-dark-color: var(--lumx-color-primary-N);
24
+ --lumx-button-emphasis-high-state-hover-theme-dark-border-color: transparent;
25
+ --lumx-button-emphasis-high-state-active-padding-horizontal: 16px;
26
+ --lumx-button-emphasis-high-state-active-border-width: 0;
27
+ --lumx-button-emphasis-high-state-active-theme-light-background-color: var(--lumx-color-primary-D2);
28
+ --lumx-button-emphasis-high-state-active-theme-light-color: var(--lumx-color-light-N);
29
+ --lumx-button-emphasis-high-state-active-theme-light-border-color: transparent;
30
+ --lumx-button-emphasis-high-state-active-theme-dark-background-color: var(--lumx-color-light-L2);
31
+ --lumx-button-emphasis-high-state-active-theme-dark-color: var(--lumx-color-primary-N);
32
+ --lumx-button-emphasis-high-state-active-theme-dark-border-color: transparent;
33
+ --lumx-button-emphasis-medium-state-default-padding-horizontal: 16px;
34
+ --lumx-button-emphasis-medium-state-default-border-width: 0;
35
+ --lumx-button-emphasis-medium-state-default-theme-light-background-color: var(--lumx-color-dark-L5);
36
+ --lumx-button-emphasis-medium-state-default-theme-light-color: var(--lumx-color-dark-L1);
37
+ --lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent;
38
+ --lumx-button-emphasis-medium-state-default-theme-dark-background-color: var(--lumx-color-light-L5);
39
+ --lumx-button-emphasis-medium-state-default-theme-dark-color: var(--lumx-color-light-N);
40
+ --lumx-button-emphasis-medium-state-default-theme-dark-border-color: transparent;
41
+ --lumx-button-emphasis-medium-state-hover-padding-horizontal: 16px;
42
+ --lumx-button-emphasis-medium-state-hover-border-width: 0;
43
+ --lumx-button-emphasis-medium-state-hover-theme-light-background-color: var(--lumx-color-dark-L4);
44
+ --lumx-button-emphasis-medium-state-hover-theme-light-color: var(--lumx-color-dark-L1);
45
+ --lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent;
46
+ --lumx-button-emphasis-medium-state-hover-theme-dark-background-color: var(--lumx-color-light-L4);
47
+ --lumx-button-emphasis-medium-state-hover-theme-dark-color: var(--lumx-color-light-N);
48
+ --lumx-button-emphasis-medium-state-hover-theme-dark-border-color: transparent;
49
+ --lumx-button-emphasis-medium-state-active-padding-horizontal: 16px;
50
+ --lumx-button-emphasis-medium-state-active-border-width: 0;
51
+ --lumx-button-emphasis-medium-state-active-theme-light-background-color: var(--lumx-color-dark-L3);
52
+ --lumx-button-emphasis-medium-state-active-theme-light-color: var(--lumx-color-dark-L1);
53
+ --lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent;
54
+ --lumx-button-emphasis-medium-state-active-theme-dark-background-color: var(--lumx-color-light-L3);
55
+ --lumx-button-emphasis-medium-state-active-theme-dark-color: var(--lumx-color-light-N);
56
+ --lumx-button-emphasis-medium-state-active-theme-dark-border-color: transparent;
57
+ --lumx-button-emphasis-low-state-default-padding-horizontal: 8px;
58
+ --lumx-button-emphasis-low-state-default-border-width: 0;
59
+ --lumx-button-emphasis-low-state-default-theme-light-background-color: transparent;
60
+ --lumx-button-emphasis-low-state-default-theme-light-color: var(--lumx-color-dark-L1);
61
+ --lumx-button-emphasis-low-state-default-theme-light-border-color: transparent;
62
+ --lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent;
63
+ --lumx-button-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-N);
64
+ --lumx-button-emphasis-low-state-default-theme-dark-border-color: transparent;
65
+ --lumx-button-emphasis-low-state-hover-padding-horizontal: 8px;
66
+ --lumx-button-emphasis-low-state-hover-border-width: 0;
67
+ --lumx-button-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5);
68
+ --lumx-button-emphasis-low-state-hover-theme-light-color: var(--lumx-color-dark-L1);
69
+ --lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent;
70
+ --lumx-button-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
71
+ --lumx-button-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-N);
72
+ --lumx-button-emphasis-low-state-hover-theme-dark-border-color: transparent;
73
+ --lumx-button-emphasis-low-state-active-padding-horizontal: 8px;
74
+ --lumx-button-emphasis-low-state-active-border-width: 0;
75
+ --lumx-button-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4);
76
+ --lumx-button-emphasis-low-state-active-theme-light-color: var(--lumx-color-dark-L1);
77
+ --lumx-button-emphasis-low-state-active-theme-light-border-color: transparent;
78
+ --lumx-button-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
79
+ --lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-N);
80
+ --lumx-button-emphasis-low-state-active-theme-dark-border-color: transparent;
81
+ --lumx-button-emphasis-selected-state-default-padding-horizontal: 16px;
82
+ --lumx-button-emphasis-selected-state-default-border-width: 0;
83
+ --lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5);
84
+ --lumx-button-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-D2);
85
+ --lumx-button-emphasis-selected-state-default-theme-light-border-color: transparent;
86
+ --lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3);
87
+ --lumx-button-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N);
88
+ --lumx-button-emphasis-selected-state-default-theme-dark-border-color: transparent;
89
+ --lumx-button-emphasis-selected-state-hover-padding-horizontal: 16px;
90
+ --lumx-button-emphasis-selected-state-hover-border-width: 0;
91
+ --lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4);
92
+ --lumx-button-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-D2);
93
+ --lumx-button-emphasis-selected-state-hover-theme-light-border-color: transparent;
94
+ --lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4);
95
+ --lumx-button-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N);
96
+ --lumx-button-emphasis-selected-state-hover-theme-dark-border-color: transparent;
97
+ --lumx-button-emphasis-selected-state-active-padding-horizontal: 16px;
98
+ --lumx-button-emphasis-selected-state-active-border-width: 0;
99
+ --lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3);
100
+ --lumx-button-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-D2);
101
+ --lumx-button-emphasis-selected-state-active-theme-light-border-color: transparent;
102
+ --lumx-button-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5);
103
+ --lumx-button-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N);
104
+ --lumx-button-emphasis-selected-state-active-theme-dark-border-color: transparent;
105
+ --lumx-material-button-text-transform: none;
106
+ --lumx-material-checkbox-wrapper-size: 20px;
107
+ --lumx-material-checkbox-control-size: 16px;
108
+ --lumx-material-chip-size-m-height: 36px;
109
+ --lumx-material-chip-size-m-border-radius: 18px;
110
+ --lumx-material-chip-size-m-padding-vertical: 16px;
111
+ --lumx-material-chip-size-s-height: 24px;
112
+ --lumx-material-chip-size-s-border-radius: 12px;
113
+ --lumx-material-chip-size-s-padding-vertical: 12px;
114
+ --lumx-material-input-helper-font-size: 12px;
115
+ --lumx-material-input-helper-font-weight: var(--lumx-typography-font-weight-regular);
116
+ --lumx-material-input-helper-line-height: 16px;
117
+ --lumx-material-input-label-font-size: 14px;
118
+ --lumx-material-input-label-font-weight: var(--lumx-typography-font-weight-regular);
119
+ --lumx-material-input-label-line-height: 20px;
120
+ --lumx-material-progress-bounce: block;
121
+ --lumx-material-progress-rotate: none;
122
+ --lumx-material-radio-button-wrapper-size: 20px;
123
+ --lumx-material-radio-button-control-size: 16px;
124
+ --lumx-material-radio-button-indicator-size: 8px;
125
+ --lumx-material-switch-wrapper-width: 30px;
126
+ --lumx-material-switch-wrapper-height: 20px;
127
+ --lumx-material-switch-control-width: 30px;
128
+ --lumx-material-switch-control-height: 16px;
129
+ --lumx-material-switch-indicator-size: 8px;
130
+ --lumx-material-switch-indicator-offset: 4px;
131
+ --lumx-material-text-field-padding-top: 0;
132
+ --lumx-material-text-field-padding-bottom: 0;
133
+ --lumx-material-text-field-header-wrapper-margin-bottom: 8px;
134
+ --lumx-material-text-field-header-label-font-size: 14px;
135
+ --lumx-material-text-field-header-label-font-weight: var(--lumx-typography-font-weight-regular);
136
+ --lumx-material-text-field-header-label-line-height: 20px;
137
+ --lumx-material-text-field-input-content-font-size: 14px;
138
+ --lumx-material-text-field-input-content-font-weight: var(--lumx-typography-font-weight-regular);
139
+ --lumx-material-text-field-input-content-line-height: 20px;
140
+ --lumx-navigation-item-padding-horizontal: 8px;
141
+ --lumx-navigation-item-min-height: 36px;
142
+ --lumx-navigation-item-border-radius: 4px;
143
+ --lumx-navigation-item-emphasis-low-state-default-border-top-width: 0;
144
+ --lumx-navigation-item-emphasis-low-state-default-border-right-width: 0;
145
+ --lumx-navigation-item-emphasis-low-state-default-border-bottom-width: 0;
146
+ --lumx-navigation-item-emphasis-low-state-default-border-left-width: 0;
147
+ --lumx-navigation-item-emphasis-low-state-default-theme-light-background-color: transparent;
148
+ --lumx-navigation-item-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L5);
149
+ --lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: var(--lumx-color-dark-L1);
150
+ --lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: var(--lumx-color-dark-N);
151
+ --lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-background-color: transparent;
152
+ --lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color: var(--lumx-color-dark-L1);
153
+ --lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent;
154
+ --lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: var(--lumx-color-light-L5);
155
+ --lumx-navigation-item-emphasis-low-state-default-theme-dark-icon-color: var(--lumx-color-light-N);
156
+ --lumx-navigation-item-emphasis-low-state-default-theme-dark-label-color: var(--lumx-color-light-N);
157
+ --lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-background-color: transparent;
158
+ --lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-color: var(--lumx-color-light-N);
159
+ --lumx-navigation-item-emphasis-low-state-hover-border-top-width: 0;
160
+ --lumx-navigation-item-emphasis-low-state-hover-border-right-width: 0;
161
+ --lumx-navigation-item-emphasis-low-state-hover-border-bottom-width: 0;
162
+ --lumx-navigation-item-emphasis-low-state-hover-border-left-width: 0;
163
+ --lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5);
164
+ --lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L5);
165
+ --lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: var(--lumx-color-dark-L1);
166
+ --lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: var(--lumx-color-dark-N);
167
+ --lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color: var(--lumx-color-dark-L5);
168
+ --lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color: var(--lumx-color-dark-L1);
169
+ --lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
170
+ --lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color: var(--lumx-color-light-L5);
171
+ --lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color: var(--lumx-color-light-N);
172
+ --lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color: var(--lumx-color-light-N);
173
+ --lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L5);
174
+ --lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-color: var(--lumx-color-light-N);
175
+ --lumx-navigation-item-emphasis-low-state-active-border-top-width: 0;
176
+ --lumx-navigation-item-emphasis-low-state-active-border-right-width: 0;
177
+ --lumx-navigation-item-emphasis-low-state-active-border-bottom-width: 0;
178
+ --lumx-navigation-item-emphasis-low-state-active-border-left-width: 0;
179
+ --lumx-navigation-item-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4);
180
+ --lumx-navigation-item-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L5);
181
+ --lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: var(--lumx-color-dark-L1);
182
+ --lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: var(--lumx-color-dark-N);
183
+ --lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color: var(--lumx-color-dark-L4);
184
+ --lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color: var(--lumx-color-dark-L1);
185
+ --lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
186
+ --lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color: var(--lumx-color-light-L5);
187
+ --lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color: var(--lumx-color-light-N);
188
+ --lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color: var(--lumx-color-light-N);
189
+ --lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L4);
190
+ --lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color: var(--lumx-color-light-N);
191
+ --lumx-navigation-item-emphasis-selected-state-default-border-top-width: 0;
192
+ --lumx-navigation-item-emphasis-selected-state-default-border-right-width: 0;
193
+ --lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 0;
194
+ --lumx-navigation-item-emphasis-selected-state-default-border-left-width: 0;
195
+ --lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5);
196
+ --lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
197
+ --lumx-navigation-item-emphasis-selected-state-default-theme-light-icon-color: var(--lumx-color-primary-D2);
198
+ --lumx-navigation-item-emphasis-selected-state-default-theme-light-label-color: var(--lumx-color-primary-D2);
199
+ --lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-background-color: transparent;
200
+ --lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-color: var(--lumx-color-primary-D2);
201
+ --lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3);
202
+ --lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-L5);
203
+ --lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color: var(--lumx-color-light-N);
204
+ --lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color: var(--lumx-color-light-N);
205
+ --lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-background-color: transparent;
206
+ --lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-color: var(--lumx-color-light-N);
207
+ --lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 0;
208
+ --lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 0;
209
+ --lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 0;
210
+ --lumx-navigation-item-emphasis-selected-state-hover-border-left-width: 0;
211
+ --lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4);
212
+ --lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
213
+ --lumx-navigation-item-emphasis-selected-state-hover-theme-light-icon-color: var(--lumx-color-primary-D2);
214
+ --lumx-navigation-item-emphasis-selected-state-hover-theme-light-label-color: var(--lumx-color-primary-D2);
215
+ --lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-background-color: var(--lumx-color-primary-L4);
216
+ --lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-color: var(--lumx-color-primary-D2);
217
+ --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4);
218
+ --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-L5);
219
+ --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color: var(--lumx-color-light-N);
220
+ --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color: var(--lumx-color-light-N);
221
+ --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L4);
222
+ --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color: var(--lumx-color-light-N);
223
+ --lumx-navigation-item-emphasis-selected-state-active-border-top-width: 0;
224
+ --lumx-navigation-item-emphasis-selected-state-active-border-right-width: 0;
225
+ --lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 0;
226
+ --lumx-navigation-item-emphasis-selected-state-active-border-left-width: 0;
227
+ --lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3);
228
+ --lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
229
+ --lumx-navigation-item-emphasis-selected-state-active-theme-light-icon-color: var(--lumx-color-primary-D2);
230
+ --lumx-navigation-item-emphasis-selected-state-active-theme-light-label-color: var(--lumx-color-primary-D2);
231
+ --lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-background-color: var(--lumx-color-primary-L3);
232
+ --lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-color: var(--lumx-color-primary-D2);
233
+ --lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5);
234
+ --lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-L5);
235
+ --lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color: var(--lumx-color-light-N);
236
+ --lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N);
237
+ --lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L5);
238
+ --lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: var(--lumx-color-light-N);
239
+ --lumx-tabs-link-height: 48px;
240
+ --lumx-tabs-link-border-radius: 0;
241
+ --lumx-tabs-link-emphasis-low-state-default-border-top-width: 0;
242
+ --lumx-tabs-link-emphasis-low-state-default-border-right-width: 0;
243
+ --lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 2px;
244
+ --lumx-tabs-link-emphasis-low-state-default-border-left-width: 0;
245
+ --lumx-tabs-link-emphasis-low-state-default-theme-light-background-color: transparent;
246
+ --lumx-tabs-link-emphasis-low-state-default-theme-light-color: var(--lumx-color-dark-L1);
247
+ --lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L5);
248
+ --lumx-tabs-link-emphasis-low-state-default-theme-dark-background-color: transparent;
249
+ --lumx-tabs-link-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-N);
250
+ --lumx-tabs-link-emphasis-low-state-default-theme-dark-border-color: var(--lumx-color-light-L5);
251
+ --lumx-tabs-link-emphasis-low-state-hover-border-top-width: 0;
252
+ --lumx-tabs-link-emphasis-low-state-hover-border-right-width: 0;
253
+ --lumx-tabs-link-emphasis-low-state-hover-border-bottom-width: 2px;
254
+ --lumx-tabs-link-emphasis-low-state-hover-border-left-width: 0;
255
+ --lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5);
256
+ --lumx-tabs-link-emphasis-low-state-hover-theme-light-color: var(--lumx-color-dark-L1);
257
+ --lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L5);
258
+ --lumx-tabs-link-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
259
+ --lumx-tabs-link-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-N);
260
+ --lumx-tabs-link-emphasis-low-state-hover-theme-dark-border-color: var(--lumx-color-light-L5);
261
+ --lumx-tabs-link-emphasis-low-state-active-border-top-width: 0;
262
+ --lumx-tabs-link-emphasis-low-state-active-border-right-width: 0;
263
+ --lumx-tabs-link-emphasis-low-state-active-border-bottom-width: 2px;
264
+ --lumx-tabs-link-emphasis-low-state-active-border-left-width: 0;
265
+ --lumx-tabs-link-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4);
266
+ --lumx-tabs-link-emphasis-low-state-active-theme-light-color: var(--lumx-color-dark-L1);
267
+ --lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L5);
268
+ --lumx-tabs-link-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
269
+ --lumx-tabs-link-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-N);
270
+ --lumx-tabs-link-emphasis-low-state-active-theme-dark-border-color: var(--lumx-color-light-L5);
271
+ --lumx-tabs-link-emphasis-selected-state-default-border-top-width: 0;
272
+ --lumx-tabs-link-emphasis-selected-state-default-border-right-width: 0;
273
+ --lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 2px;
274
+ --lumx-tabs-link-emphasis-selected-state-default-border-left-width: 0;
275
+ --lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: transparent;
276
+ --lumx-tabs-link-emphasis-selected-state-default-theme-light-color: var(--lumx-color-dark-L1);
277
+ --lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
278
+ --lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent;
279
+ --lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N);
280
+ --lumx-tabs-link-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N);
281
+ --lumx-tabs-link-emphasis-selected-state-hover-border-top-width: 0;
282
+ --lumx-tabs-link-emphasis-selected-state-hover-border-right-width: 0;
283
+ --lumx-tabs-link-emphasis-selected-state-hover-border-bottom-width: 2px;
284
+ --lumx-tabs-link-emphasis-selected-state-hover-border-left-width: 0;
285
+ --lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-dark-L5);
286
+ --lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-dark-L1);
287
+ --lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
288
+ --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
289
+ --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N);
290
+ --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N);
291
+ --lumx-tabs-link-emphasis-selected-state-active-border-top-width: 0;
292
+ --lumx-tabs-link-emphasis-selected-state-active-border-right-width: 0;
293
+ --lumx-tabs-link-emphasis-selected-state-active-border-bottom-width: 2px;
294
+ --lumx-tabs-link-emphasis-selected-state-active-border-left-width: 0;
295
+ --lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-dark-L4);
296
+ --lumx-tabs-link-emphasis-selected-state-active-theme-light-color: var(--lumx-color-dark-L1);
297
+ --lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
298
+ --lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
299
+ --lumx-tabs-link-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N);
300
+ --lumx-tabs-link-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N);
301
+ --lumx-text-field-input-min-height: 36px;
302
+ --lumx-text-field-input-padding-horizontal: 12px;
303
+ --lumx-text-field-input-border-radius: 4px;
304
+ --lumx-text-field-state-default-input-border-top-width: 1px;
305
+ --lumx-text-field-state-default-input-border-right-width: 1px;
306
+ --lumx-text-field-state-default-input-border-bottom-width: 1px;
307
+ --lumx-text-field-state-default-input-border-left-width: 1px;
308
+ --lumx-text-field-state-default-theme-light-header-label-color: var(--lumx-color-dark-N);
309
+ --lumx-text-field-state-default-theme-light-input-background-color: var(--lumx-color-dark-L6);
310
+ --lumx-text-field-state-default-theme-light-input-border-color: var(--lumx-color-dark-L4);
311
+ --lumx-text-field-state-default-theme-light-input-content-color: var(--lumx-color-dark-N);
312
+ --lumx-text-field-state-default-theme-light-input-placeholder-color: var(--lumx-color-dark-L2);
313
+ --lumx-text-field-state-default-theme-dark-header-label-color: var(--lumx-color-light-N);
314
+ --lumx-text-field-state-default-theme-dark-input-background-color: var(--lumx-color-light-L6);
315
+ --lumx-text-field-state-default-theme-dark-input-border-color: var(--lumx-color-light-L4);
316
+ --lumx-text-field-state-default-theme-dark-input-content-color: var(--lumx-color-light-N);
317
+ --lumx-text-field-state-default-theme-dark-input-placeholder-color: var(--lumx-color-light-L2);
318
+ --lumx-text-field-state-hover-input-border-top-width: 1px;
319
+ --lumx-text-field-state-hover-input-border-right-width: 1px;
320
+ --lumx-text-field-state-hover-input-border-bottom-width: 1px;
321
+ --lumx-text-field-state-hover-input-border-left-width: 1px;
322
+ --lumx-text-field-state-hover-theme-light-header-label-color: var(--lumx-color-dark-N);
323
+ --lumx-text-field-state-hover-theme-light-input-background-color: var(--lumx-color-dark-L5);
324
+ --lumx-text-field-state-hover-theme-light-input-border-color: var(--lumx-color-dark-L4);
325
+ --lumx-text-field-state-hover-theme-light-input-content-color: var(--lumx-color-dark-N);
326
+ --lumx-text-field-state-hover-theme-light-input-placeholder-color: var(--lumx-color-dark-L2);
327
+ --lumx-text-field-state-hover-theme-dark-header-label-color: var(--lumx-color-light-N);
328
+ --lumx-text-field-state-hover-theme-dark-input-background-color: var(--lumx-color-light-L5);
329
+ --lumx-text-field-state-hover-theme-dark-input-border-color: var(--lumx-color-light-L4);
330
+ --lumx-text-field-state-hover-theme-dark-input-content-color: var(--lumx-color-light-N);
331
+ --lumx-text-field-state-hover-theme-dark-input-placeholder-color: var(--lumx-color-light-L2);
332
+ --lumx-text-field-state-focus-input-border-top-width: 2px;
333
+ --lumx-text-field-state-focus-input-border-right-width: 2px;
334
+ --lumx-text-field-state-focus-input-border-bottom-width: 2px;
335
+ --lumx-text-field-state-focus-input-border-left-width: 2px;
336
+ --lumx-text-field-state-focus-theme-light-header-label-color: var(--lumx-color-dark-N);
337
+ --lumx-text-field-state-focus-theme-light-input-background-color: var(--lumx-color-light-N);
338
+ --lumx-text-field-state-focus-theme-light-input-border-color: var(--lumx-color-primary-N);
339
+ --lumx-text-field-state-focus-theme-light-input-content-color: var(--lumx-color-dark-N);
340
+ --lumx-text-field-state-focus-theme-light-input-placeholder-color: var(--lumx-color-dark-L2);
341
+ --lumx-text-field-state-focus-theme-dark-header-label-color: var(--lumx-color-light-N);
342
+ --lumx-text-field-state-focus-theme-dark-input-background-color: transparent;
343
+ --lumx-text-field-state-focus-theme-dark-input-border-color: var(--lumx-color-light-N);
344
+ --lumx-text-field-state-focus-theme-dark-input-content-color: var(--lumx-color-light-N);
345
+ --lumx-text-field-state-focus-theme-dark-input-placeholder-color: var(--lumx-color-light-L2);
346
+ --lumx-border-radius: 4px;
347
+ --lumx-color-dark-N: rgba(0, 0, 0, 0.87); /* Neutral dark color */
348
+ --lumx-color-dark-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
349
+ --lumx-color-dark-L2: rgba(0, 0, 0, 0.6); /* Base dark color with 60% opacity */
350
+ --lumx-color-dark-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
351
+ --lumx-color-dark-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */
352
+ --lumx-color-dark-L5: rgba(0, 0, 0, 0.12); /* Base dark color with 12% opacity */
353
+ --lumx-color-dark-L6: rgba(0, 0, 0, 0.03); /* Base dark color with 3% opacity */
354
+ --lumx-color-light-N: rgb(255, 255, 255); /* Neutral light color */
355
+ --lumx-color-light-L1: rgba(255, 255, 255, 0.9); /* Base light color with 90% opacity */
356
+ --lumx-color-light-L2: rgba(255, 255, 255, 0.8); /* Base light color with 80% opacity */
357
+ --lumx-color-light-L3: rgba(255, 255, 255, 0.6); /* Base light color with 60% opacity */
358
+ --lumx-color-light-L4: rgba(255, 255, 255, 0.4); /* Base light color with 40% opacity */
359
+ --lumx-color-light-L5: rgba(255, 255, 255, 0.2); /* Base light color with 20% opacity */
360
+ --lumx-color-light-L6: rgba(255, 255, 255, 0.1); /* Base light color with 10% opacity */
361
+ --lumx-color-blue-D2: rgb(21, 70, 193); /* Darkest blue color */
362
+ --lumx-color-blue-D1: rgb(24, 78, 216); /* Dark blue color */
363
+ --lumx-color-blue-N: rgb(36, 91, 231); /* Neutral blue color */
364
+ --lumx-color-blue-L1: rgba(36, 91, 231, 0.8); /* Base blue color with 80% opacity */
365
+ --lumx-color-blue-L2: rgba(36, 91, 231, 0.6); /* Base blue color with 60% opacity */
366
+ --lumx-color-blue-L3: rgba(36, 91, 231, 0.4); /* Base blue color with 40% opacity */
367
+ --lumx-color-blue-L4: rgba(36, 91, 231, 0.2); /* Base blue color with 20% opacity */
368
+ --lumx-color-blue-L5: rgba(36, 91, 231, 0.1); /* Base blue color with 10% opacity */
369
+ --lumx-color-blue-L6: rgba(36, 91, 231, 0.05); /* Base blue color with 5% opacity */
370
+ --lumx-color-green-D2: rgb(26, 110, 89); /* Darkest green color */
371
+ --lumx-color-green-D1: rgb(23, 122, 97); /* Dark green color */
372
+ --lumx-color-green-N: rgb(19, 134, 105); /* Neutral green color */
373
+ --lumx-color-green-L1: rgba(19, 134, 105, 0.8); /* Base green color with 80% opacity */
374
+ --lumx-color-green-L2: rgba(19, 134, 105, 0.6); /* Base green color with 60% opacity */
375
+ --lumx-color-green-L3: rgba(19, 134, 105, 0.4); /* Base green color with 40% opacity */
376
+ --lumx-color-green-L4: rgba(19, 134, 105, 0.2); /* Base green color with 20% opacity */
377
+ --lumx-color-green-L5: rgba(19, 134, 105, 0.1); /* Base green color with 10% opacity */
378
+ --lumx-color-green-L6: rgba(19, 134, 105, 0.05); /* Base green color with 5% opacity */
379
+ --lumx-color-yellow-D2: rgb(255, 161, 37); /* Darkest yellow color */
380
+ --lumx-color-yellow-D1: rgb(255, 179, 37); /* Dark yellow color */
381
+ --lumx-color-yellow-N: rgb(255, 196, 37); /* Neutral yellow color */
382
+ --lumx-color-yellow-L1: rgba(255, 196, 37, 0.9); /* Base yellow color with 80% opacity */
383
+ --lumx-color-yellow-L2: rgba(255, 196, 37, 0.8); /* Base yellow color with 70% opacity */
384
+ --lumx-color-yellow-L3: rgba(255, 196, 37, 0.6); /* Base yellow color with 60% opacity */
385
+ --lumx-color-yellow-L4: rgba(255, 196, 37, 0.48); /* Base yellow color with 40% opacity */
386
+ --lumx-color-yellow-L5: rgba(255, 196, 37, 0.24); /* Base yellow color with 20% opacity */
387
+ --lumx-color-yellow-L6: rgba(255, 196, 37, 0.12); /* Base yellow color with 10% opacity */
388
+ --lumx-color-red-D2: rgb(190, 30, 70); /* Darkest red color */
389
+ --lumx-color-red-D1: rgb(212, 33, 72); /* Dark red color */
390
+ --lumx-color-red-N: rgb(223, 48, 80); /* Neutral red color */
391
+ --lumx-color-red-L1: rgba(223, 48, 80, 0.8); /* Base red color with 80% opacity */
392
+ --lumx-color-red-L2: rgba(223, 48, 80, 0.6); /* Base red color with 60% opacity */
393
+ --lumx-color-red-L3: rgba(223, 48, 80, 0.4); /* Base red color with 40% opacity */
394
+ --lumx-color-red-L4: rgba(223, 48, 80, 0.2); /* Base red color with 20% opacity */
395
+ --lumx-color-red-L5: rgba(223, 48, 80, 0.1); /* Base red color with 10% opacity */
396
+ --lumx-color-red-L6: rgba(223, 48, 80, 0.05); /* Base red color with 5% opacity */
397
+ --lumx-color-grey-N: rgb(117, 117, 117); /* Neutral grey color */
398
+ --lumx-color-grey-L1: rgba(117, 117, 117, 0.8); /* Base grey color with 80% opacity */
399
+ --lumx-color-grey-L2: rgba(117, 117, 117, 0.6); /* Base grey color with 60% opacity */
400
+ --lumx-color-grey-L3: rgba(117, 117, 117, 0.4); /* Base grey color with 40% opacity */
401
+ --lumx-color-grey-L4: rgba(117, 117, 117, 0.2); /* Base grey color with 20% opacity */
402
+ --lumx-color-grey-L5: rgba(117, 117, 117, 0.1); /* Base grey color with 10% opacity */
403
+ --lumx-color-grey-L6: rgba(117, 117, 117, 0.05); /* Base grey color with 5% opacity */
404
+ --lumx-color-primary-D2: rgb(21, 70, 193); /* Darkest blue color */
405
+ --lumx-color-primary-D1: rgb(24, 78, 216); /* Dark blue color */
406
+ --lumx-color-primary-N: rgb(36, 91, 231); /* Neutral blue color */
407
+ --lumx-color-primary-L1: rgba(36, 91, 231, 0.8); /* Base blue color with 80% opacity */
408
+ --lumx-color-primary-L2: rgba(36, 91, 231, 0.6); /* Base blue color with 60% opacity */
409
+ --lumx-color-primary-L3: rgba(36, 91, 231, 0.4); /* Base blue color with 40% opacity */
410
+ --lumx-color-primary-L4: rgba(36, 91, 231, 0.2); /* Base blue color with 20% opacity */
411
+ --lumx-color-primary-L5: rgba(36, 91, 231, 0.1); /* Base blue color with 10% opacity */
412
+ --lumx-color-primary-L6: rgba(36, 91, 231, 0.05); /* Base blue color with 5% opacity */
413
+ --lumx-color-secondary-D2: rgb(26, 110, 89); /* Darkest green color */
414
+ --lumx-color-secondary-D1: rgb(23, 122, 97); /* Dark green color */
415
+ --lumx-color-secondary-N: rgb(19, 134, 105); /* Neutral green color */
416
+ --lumx-color-secondary-L1: rgba(19, 134, 105, 0.8); /* Base green color with 80% opacity */
417
+ --lumx-color-secondary-L2: rgba(19, 134, 105, 0.6); /* Base green color with 60% opacity */
418
+ --lumx-color-secondary-L3: rgba(19, 134, 105, 0.4); /* Base green color with 40% opacity */
419
+ --lumx-color-secondary-L4: rgba(19, 134, 105, 0.2); /* Base green color with 20% opacity */
420
+ --lumx-color-secondary-L5: rgba(19, 134, 105, 0.1); /* Base green color with 10% opacity */
421
+ --lumx-color-secondary-L6: rgba(19, 134, 105, 0.05); /* Base green color with 5% opacity */
422
+ --lumx-color-accent-D2: rgb(26, 110, 89); /* Darkest green color */
423
+ --lumx-color-accent-D1: rgb(23, 122, 97); /* Dark green color */
424
+ --lumx-color-accent-N: rgb(19, 134, 105); /* Neutral green color */
425
+ --lumx-color-accent-L1: rgba(19, 134, 105, 0.8); /* Base green color with 80% opacity */
426
+ --lumx-color-accent-L2: rgba(19, 134, 105, 0.6); /* Base green color with 60% opacity */
427
+ --lumx-color-accent-L3: rgba(19, 134, 105, 0.4); /* Base green color with 40% opacity */
428
+ --lumx-color-accent-L4: rgba(19, 134, 105, 0.2); /* Base green color with 20% opacity */
429
+ --lumx-color-accent-L5: rgba(19, 134, 105, 0.1); /* Base green color with 10% opacity */
430
+ --lumx-color-accent-L6: rgba(19, 134, 105, 0.05); /* Base green color with 5% opacity */
431
+ --lumx-color-black-N: rgba(0, 0, 0, 0.87); /* Neutral dark color */
432
+ --lumx-color-black-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
433
+ --lumx-color-black-L2: rgba(0, 0, 0, 0.6); /* Base dark color with 60% opacity */
434
+ --lumx-color-black-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
435
+ --lumx-color-black-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */
436
+ --lumx-color-black-L5: rgba(0, 0, 0, 0.12); /* Base dark color with 12% opacity */
437
+ --lumx-color-black-L6: rgba(0, 0, 0, 0.03); /* Base dark color with 3% opacity */
438
+ --lumx-color-white-N: rgb(255, 255, 255); /* Neutral light color */
439
+ --lumx-color-white-L1: rgba(255, 255, 255, 0.9); /* Base light color with 90% opacity */
440
+ --lumx-color-white-L2: rgba(255, 255, 255, 0.8); /* Base light color with 80% opacity */
441
+ --lumx-color-white-L3: rgba(255, 255, 255, 0.6); /* Base light color with 60% opacity */
442
+ --lumx-color-white-L4: rgba(255, 255, 255, 0.4); /* Base light color with 40% opacity */
443
+ --lumx-color-white-L5: rgba(255, 255, 255, 0.2); /* Base light color with 20% opacity */
444
+ --lumx-color-white-L6: rgba(255, 255, 255, 0.1); /* Base light color with 10% opacity */
445
+ --lumx-color-orange-D2: rgb(255, 161, 37); /* Darkest yellow color */
446
+ --lumx-color-orange-D1: rgb(255, 179, 37); /* Dark yellow color */
447
+ --lumx-color-orange-N: rgb(255, 196, 37); /* Neutral yellow color */
448
+ --lumx-color-orange-L1: rgba(255, 196, 37, 0.9); /* Base yellow color with 80% opacity */
449
+ --lumx-color-orange-L2: rgba(255, 196, 37, 0.8); /* Base yellow color with 70% opacity */
450
+ --lumx-color-orange-L3: rgba(255, 196, 37, 0.6); /* Base yellow color with 60% opacity */
451
+ --lumx-color-orange-L4: rgba(255, 196, 37, 0.48); /* Base yellow color with 40% opacity */
452
+ --lumx-color-orange-L5: rgba(255, 196, 37, 0.24); /* Base yellow color with 20% opacity */
453
+ --lumx-color-orange-L6: rgba(255, 196, 37, 0.12); /* Base yellow color with 10% opacity */
454
+ --lumx-size-xxs: 14px;
455
+ --lumx-size-xs: 20px;
456
+ --lumx-size-s: 24px;
457
+ --lumx-size-m: 36px;
458
+ --lumx-size-l: 64px;
459
+ --lumx-size-xl: 128px;
460
+ --lumx-size-xxl: 256px;
461
+ --lumx-spacing-unit-tiny: 4px;
462
+ --lumx-spacing-unit-regular: 8px;
463
+ --lumx-spacing-unit-medium: 12px;
464
+ --lumx-spacing-unit-big: 16px;
465
+ --lumx-spacing-unit-huge: 24px;
466
+ --lumx-typography-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
467
+ --lumx-typography-font-weight-regular: 400;
468
+ --lumx-typography-font-weight-bold: 700;
469
+ --lumx-typography-font-weight-light: 300;
470
+ --lumx-typography-interface-display1-font-size: 34px;
471
+ --lumx-typography-interface-display1-font-weight: var(--lumx-typography-font-weight-bold);
472
+ --lumx-typography-interface-display1-line-height: 40px;
473
+ --lumx-typography-interface-headline-font-size: 24px;
474
+ --lumx-typography-interface-headline-font-weight: var(--lumx-typography-font-weight-bold);
475
+ --lumx-typography-interface-headline-line-height: 32px;
476
+ --lumx-typography-interface-title-font-size: 20px;
477
+ --lumx-typography-interface-title-font-weight: var(--lumx-typography-font-weight-bold);
478
+ --lumx-typography-interface-title-line-height: 30px;
479
+ --lumx-typography-interface-subtitle2-font-size: 16px;
480
+ --lumx-typography-interface-subtitle2-font-weight: var(--lumx-typography-font-weight-bold);
481
+ --lumx-typography-interface-subtitle2-line-height: 24px;
482
+ --lumx-typography-interface-subtitle1-font-size: 14px;
483
+ --lumx-typography-interface-subtitle1-font-weight: var(--lumx-typography-font-weight-bold);
484
+ --lumx-typography-interface-subtitle1-line-height: 20px;
485
+ --lumx-typography-interface-body2-font-size: 16px;
486
+ --lumx-typography-interface-body2-font-weight: var(--lumx-typography-font-weight-regular);
487
+ --lumx-typography-interface-body2-line-height: 24px;
488
+ --lumx-typography-interface-body1-font-size: 14px;
489
+ --lumx-typography-interface-body1-font-weight: var(--lumx-typography-font-weight-regular);
490
+ --lumx-typography-interface-body1-line-height: 20px;
491
+ --lumx-typography-interface-caption-font-size: 12px;
492
+ --lumx-typography-interface-caption-font-weight: var(--lumx-typography-font-weight-regular);
493
+ --lumx-typography-interface-caption-line-height: 16px;
494
+ --lumx-typography-interface-overline-font-size: 10px;
495
+ --lumx-typography-interface-overline-font-weight: var(--lumx-typography-font-weight-bold);
496
+ --lumx-typography-interface-overline-line-height: 12px;
497
+ --lumx-typography-custom-title1-font-size: 40px;
498
+ --lumx-typography-custom-title1-font-weight: var(--lumx-typography-font-weight-bold);
499
+ --lumx-typography-custom-title1-line-height: 50px;
500
+ --lumx-typography-custom-title2-font-size: 30px;
501
+ --lumx-typography-custom-title2-font-weight: var(--lumx-typography-font-weight-bold);
502
+ --lumx-typography-custom-title2-line-height: 40px;
503
+ --lumx-typography-custom-title3-font-size: 24px;
504
+ --lumx-typography-custom-title3-font-weight: var(--lumx-typography-font-weight-bold);
505
+ --lumx-typography-custom-title3-line-height: 32px;
506
+ --lumx-typography-custom-title4-font-size: 20px;
507
+ --lumx-typography-custom-title4-font-weight: var(--lumx-typography-font-weight-bold);
508
+ --lumx-typography-custom-title4-line-height: 30px;
509
+ --lumx-typography-custom-title5-font-size: 16px;
510
+ --lumx-typography-custom-title5-font-weight: var(--lumx-typography-font-weight-bold);
511
+ --lumx-typography-custom-title5-line-height: 24px;
512
+ --lumx-typography-custom-title6-font-size: 14px;
513
+ --lumx-typography-custom-title6-font-weight: var(--lumx-typography-font-weight-bold);
514
+ --lumx-typography-custom-title6-line-height: 20px;
515
+ --lumx-typography-custom-intro-font-size: 18px;
516
+ --lumx-typography-custom-intro-font-weight: var(--lumx-typography-font-weight-bold);
517
+ --lumx-typography-custom-intro-line-height: 30px;
518
+ --lumx-typography-custom-body-large-font-size: 16px;
519
+ --lumx-typography-custom-body-large-font-weight: var(--lumx-typography-font-weight-regular);
520
+ --lumx-typography-custom-body-large-line-height: 24px;
521
+ --lumx-typography-custom-body-font-size: 14px;
522
+ --lumx-typography-custom-body-font-weight: var(--lumx-typography-font-weight-regular);
523
+ --lumx-typography-custom-body-line-height: 20px;
524
+ --lumx-typography-custom-quote-font-size: 16px;
525
+ --lumx-typography-custom-quote-font-weight: var(--lumx-typography-font-weight-regular);
526
+ --lumx-typography-custom-quote-font-style: italic;
527
+ --lumx-typography-custom-quote-line-height: 24px;
528
+ --lumx-typography-custom-publish-info-font-size: 14px;
529
+ --lumx-typography-custom-publish-info-font-weight: var(--lumx-typography-font-weight-regular);
530
+ --lumx-typography-custom-publish-info-line-height: 20px;
531
+ --lumx-typography-custom-button-size-m-font-size: 14px;
532
+ --lumx-typography-custom-button-size-m-font-weight: var(--lumx-typography-font-weight-bold);
533
+ --lumx-typography-custom-button-size-s-font-size: 12px;
534
+ --lumx-typography-custom-button-size-s-font-weight: var(--lumx-typography-font-weight-bold);
535
+ --lumx-typography-custom-navigation-item-font-size: 14px;
536
+ --lumx-typography-custom-navigation-item-font-weight: var(--lumx-typography-font-weight-bold);
537
+ --lumx-typography-custom-navigation-item-line-height: 20px;
544
538
  }