@lumx/core 3.5.5-alpha.0 → 3.5.5

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