@nova-design-system/nova-base 3.30.0 → 3.31.1-beta.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.
@@ -3,2079 +3,2079 @@
3
3
  */
4
4
 
5
5
  .dark:root {
6
- --components-overlay-opacity: 75%;
7
- --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
8
- --components-button-destructive-low-border: rgba(255, 255, 255, 0);
9
- --components-button-destructive-low-background: rgba(255, 255, 255, 0);
10
- --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
11
- --components-loader-white-background: rgba(255, 255, 255, 0.2);
12
- --components-form-opacity-disabled: 50%;
13
- --components-form-opacity-default: 100%;
14
- --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
15
- --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
16
- --components-button-lower-border-hover: rgba(255, 255, 255, 0);
17
- --components-button-lower-border-active: rgba(255, 255, 255, 0);
18
- --components-button-lower-border: rgba(255, 255, 255, 0);
19
- --components-button-low-border-hover: rgba(255, 255, 255, 0);
20
- --components-button-low-border-active: rgba(255, 255, 255, 0);
21
- --components-button-low-border: rgba(255, 255, 255, 0);
22
- --components-button-low-background: rgba(255, 255, 255, 0);
23
- --components-button-high-border-active: rgba(255, 255, 255, 0);
24
- --components-button-high-border-hover: rgba(255, 255, 255, 0);
25
- --components-button-high-border: rgba(255, 255, 255, 0);
26
- --shadow-y-axis-2xl: 25.0000px;
27
- --shadow-y-axis-xl-2: 20.0000px;
28
- --shadow-y-axis-xl-1: 10.0000px;
29
- --shadow-y-axis-lg-2: 10.0000px;
30
- --shadow-y-axis-lg-1: 4.0000px;
31
- --shadow-y-axis-md-2: 4.0000px;
32
- --shadow-y-axis-md-1: 2.0000px;
33
- --shadow-y-axis-base-2: 1.0000px;
34
- --shadow-y-axis-base-1: 1.0000px;
35
- --shadow-y-axis-none: 0.0000px;
36
- --shadow-spread-2xl: -6.0000px;
37
- --shadow-spread-xl: -2.0000px;
38
- --shadow-spread-lg-2: 0.0000px;
39
- --shadow-spread-lg-1: 0.0000px;
40
- --shadow-spread-md: 0.0000px;
41
- --shadow-spread-base: 0.0000px;
42
- --shadow-blur-2xl: 50.0000px;
43
- --shadow-blur-xl-2: 0.0000px;
44
- --shadow-blur-xl-1: 10.0000px;
45
- --shadow-blur-lg-2: 15.0000px;
46
- --shadow-blur-lg-1: 6.0000px;
47
- --shadow-blur-md-2: 6.0000px;
48
- --shadow-blur-md-1: 4.0000px;
49
- --shadow-blur-base-2: 2.0000px;
50
- --shadow-blur-base-1: 3.0000px;
51
- --shadow-color-opacity-3: rgba(11, 15, 17, 0.32);
52
- --shadow-color-opacity-2: rgba(11, 15, 17, 0.14);
53
- --shadow-color-opacity-1: rgba(11, 15, 17, 0.09);
54
- --shadow-color-opacity-0: rgba(11, 15, 17, 0.09);
55
- --opacity-disabled-2: 0%;
56
- --opacity-disabled: 50%;
57
- --color-transparent: rgba(255, 255, 255, 0);
58
- --color-white: #ffffff;
59
- --color-black: #000000;
60
6
  --color-interaction-container-neutral-background: rgba(0, 0, 0, 0);
61
- --components-toggle-shape-hover: var(--color-gray-ocean-300);
62
- --components-toggle-shape-default: var(--color-gray-ocean-400);
63
- --components-toggle-background-disabled-checked: var(--color-gray-ocean-600);
64
- --components-toggle-background-disabled: var(--color-gray-ocean-600);
65
- --components-toggle-border-disabled-checked: var(--color-gray-ocean-600);
66
- --components-toggle-border-disabled: var(--color-gray-ocean-600);
67
- --components-toggle-border-hover: var(--color-gray-ocean-300);
68
- --components-toggle-border-default: var(--color-gray-ocean-400);
69
- --components-tooltip-border: var(--color-gray-ocean-50);
70
- --components-tooltip-background: var(--color-gray-ocean-50);
71
- --components-splitter-old-border: var(--color-transparent);
72
- --components-splitter-old-background: var(--color-interaction-container-neutral-background);
73
- --components-popover-background: var(--color-gray-ocean-900);
74
- --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
75
- --components-list-dropdown-group-title-background: var(--color-transparent);
76
- --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
77
- --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
78
- --components-list-select-option-background-disabled: var(--color-interaction-container-neutral-background);
79
- --components-list-select-option-background-default: var(--color-interaction-container-neutral-background);
80
- --components-field-time-background-default: var(--color-interaction-container-neutral-background);
81
- --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
82
- --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
83
- --components-overlay-background: var(--color-gray-ocean-650);
84
- --components-button-destructive-high-icon-hover: var(--color-base-black);
85
- --components-button-destructive-high-icon: var(--color-base-black);
86
- --components-button-destructive-high-text-hover: var(--color-base-black);
87
- --components-button-destructive-high-text: var(--color-base-black);
88
- --components-button-destructive-high-background-hover: var(--color-status-red-300);
89
- --components-button-destructive-high-background: var(--color-status-red-400);
90
- --components-button-destructive-low-icon-hover: var(--color-status-red-300);
91
- --components-button-destructive-low-icon: var(--color-status-red-400);
92
- --components-button-destructive-low-text-hover: var(--color-status-red-300);
93
- --components-button-destructive-low-text: var(--color-status-red-400);
94
- --components-button-destructive-low-background-hover: var(--color-status-red-900);
95
- --components-button-destructive-medium-border-hover: var(--color-status-red-300);
96
- --components-button-destructive-medium-border: var(--color-status-red-400);
97
- --components-button-destructive-medium-icon-hover: var(--color-status-red-300);
98
- --components-button-destructive-medium-icon: var(--color-status-red-400);
99
- --components-button-destructive-medium-text-hover: var(--color-status-red-300);
100
- --components-button-destructive-medium-text: var(--color-status-red-400);
101
- --components-button-destructive-medium-background-hover: var(--color-status-red-900);
102
- --components-loader-brand-foreground: var(--color-petrol-500);
103
- --components-loader-brand-background: var(--color-petrol-900);
104
- --components-loader-white-foreground: var(--color-base-white);
105
- --components-form-shape-foreground-default: var(--color-base-black);
106
- --components-form-shape-background-selected: var(--color-petrol-500);
107
- --components-form-shape-background-disabled: var(--color-gray-ocean-700);
108
- --components-form-shape-background-hover: var(--color-gray-ocean-350);
109
- --components-form-shape-background-default: var(--color-gray-ocean-400);
110
- --components-form-field-background-checked: var(--color-petrol-500);
111
- --components-button-gr-as-complementary-icon-hover: var(--color-base-white);
112
- --components-button-gr-as-complementary-icon: var(--color-base-white);
113
- --components-button-gr-as-complementary-text-hover: var(--color-base-white);
114
- --components-button-gr-as-complementary-text: var(--color-base-white);
115
- --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-350);
116
- --components-button-gr-as-complementary-background: var(--color-gray-ocean-450);
117
- --components-button-lower-background: var(--color-interaction-container-neutral-background);
118
- --color-dont-use-background: var(--color-gray-ocean-900);
119
- --color-dont-use-content: var(--color-gray-ocean-750);
120
- --color-dont-use-border: var(--color-gray-ocean-750);
121
- --color-rainbow-10-text: var(--color-gray-ocean-250);
122
- --color-rainbow-10-icon: var(--color-gray-ocean-250);
123
- --color-rainbow-10-border-light: var(--color-gray-ocean-450);
124
- --color-rainbow-10-border: var(--color-gray-ocean-250);
125
- --color-rainbow-10-background: var(--color-gray-ocean-650);
126
- --color-rainbow-9-text: var(--color-lime-500);
127
- --color-rainbow-9-icon: var(--color-lime-500);
128
- --color-rainbow-9-border-light: var(--color-lime-700);
129
- --color-rainbow-9-border: var(--color-lime-500);
130
- --color-rainbow-9-background: var(--color-lime-900);
131
- --color-rainbow-8-text: var(--color-petrol-300);
132
- --color-rainbow-8-icon: var(--color-petrol-300);
133
- --color-rainbow-8-border-light: var(--color-petrol-600);
134
- --color-rainbow-8-border: var(--color-petrol-300);
135
- --color-rainbow-8-background: var(--color-petrol-900);
136
- --color-rainbow-7-text: var(--color-green-300);
137
- --color-rainbow-7-icon: var(--color-green-300);
138
- --color-rainbow-7-border-light: var(--color-green-600);
139
- --color-rainbow-7-border: var(--color-green-300);
140
- --color-rainbow-7-background: var(--color-green-800);
141
- --color-rainbow-6-text: var(--color-crimson-200);
142
- --color-rainbow-6-icon: var(--color-crimson-200);
143
- --color-rainbow-6-border-light: var(--color-crimson-600);
144
- --color-rainbow-6-border: var(--color-crimson-200);
145
- --color-rainbow-6-background: var(--color-crimson-900);
146
- --color-rainbow-5-text: var(--color-turquoise-400);
147
- --color-rainbow-5-icon: var(--color-turquoise-400);
148
- --color-rainbow-5-border-light: var(--color-turquoise-700);
149
- --color-rainbow-5-border: var(--color-turquoise-400);
150
- --color-rainbow-5-background: var(--color-turquoise-900);
151
- --color-rainbow-4-text: var(--color-red-200);
152
- --color-rainbow-4-icon: var(--color-red-200);
153
- --color-rainbow-4-border-light: var(--color-red-600);
154
- --color-rainbow-4-border: var(--color-red-200);
155
- --color-rainbow-4-background: var(--color-red-900);
156
- --color-rainbow-3-text: var(--color-yellow-600);
157
- --color-rainbow-3-icon: var(--color-yellow-600);
158
- --color-rainbow-3-border-light: var(--color-yellow-700);
159
- --color-rainbow-3-border: var(--color-yellow-600);
160
- --color-rainbow-3-background: var(--color-yellow-900);
161
- --color-rainbow-2-text: var(--color-orange-400);
162
- --color-rainbow-2-icon: var(--color-orange-400);
163
- --color-rainbow-2-border-light: var(--color-orange-700);
164
- --color-rainbow-2-border: var(--color-orange-400);
165
- --color-rainbow-2-background: var(--color-orange-900);
166
- --color-rainbow-1-text: var(--color-amber-500);
167
- --color-rainbow-1-icon: var(--color-amber-500);
168
- --color-rainbow-1-border-light: var(--color-amber-700);
169
- --color-rainbow-1-border: var(--color-amber-500);
170
- --color-rainbow-1-background: var(--color-amber-900);
171
- --color-focus-brand: var(--color-petrol-500);
172
- --color-feedback-success-high-contrast-title: var(--color-base-black);
173
- --color-feedback-success-high-contrast-text: var(--color-status-green-900);
174
- --color-feedback-success-high-contrast-icon: var(--color-base-black);
175
- --color-feedback-success-high-contrast-border: var(--color-status-green-400);
176
- --color-feedback-success-high-contrast-background: var(--color-status-green-400);
177
- --color-feedback-success-low-text: var(--color-status-green-400);
178
- --color-feedback-success-low-icon: var(--color-status-green-400);
179
- --color-feedback-success-low-border-subtle: var(--color-status-green-700);
180
- --color-feedback-success-low-border: var(--color-status-green-400);
181
- --color-feedback-success-low-background: var(--color-status-green-900);
182
- --color-feedback-success-high-text: var(--color-status-green-800);
183
- --color-feedback-success-high-icon: var(--color-status-green-800);
184
- --color-feedback-success-high-border: var(--color-status-green-300);
185
- --color-feedback-success-high-background: var(--color-status-green-300);
186
- --color-feedback-warning-high-contrast-title: var(--color-base-black);
187
- --color-feedback-warning-high-contrast-text: var(--color-status-yellow-900);
188
- --color-feedback-warning-high-contrast-icon: var(--color-base-black);
189
- --color-feedback-warning-high-contrast-border: var(--color-status-yellow-500);
190
- --color-feedback-warning-high-contrast-background: var(--color-status-yellow-500);
191
- --color-feedback-warning-low-text: var(--color-status-yellow-500);
192
- --color-feedback-warning-low-icon: var(--color-status-yellow-500);
193
- --color-feedback-warning-low-border-subtle: var(--color-status-yellow-700);
194
- --color-feedback-warning-low-border: var(--color-status-yellow-500);
195
- --color-feedback-warning-low-background: var(--color-status-yellow-900);
196
- --color-feedback-warning-high-text: var(--color-status-yellow-900);
197
- --color-feedback-warning-high-icon: var(--color-status-yellow-900);
198
- --color-feedback-warning-high-border: var(--color-status-yellow-500);
199
- --color-feedback-warning-high-background: var(--color-status-yellow-500);
200
- --color-feedback-neutral-high-contrast-title: var(--color-base-black);
201
- --color-feedback-neutral-high-contrast-text: var(--color-gray-ocean-900);
202
- --color-feedback-neutral-high-contrast-icon: var(--color-base-black);
203
- --color-feedback-neutral-high-contrast-border: var(--color-gray-ocean-250);
204
- --color-feedback-neutral-high-contrast-background: var(--color-gray-ocean-250);
205
- --color-feedback-neutral-low-text: var(--color-gray-ocean-250);
206
- --color-feedback-neutral-low-icon: var(--color-gray-ocean-250);
207
- --color-feedback-neutral-low-border-subtle: var(--color-gray-ocean-500);
208
- --color-feedback-neutral-low-border: var(--color-gray-ocean-250);
209
- --color-feedback-neutral-low-background: var(--color-gray-ocean-800);
210
- --color-feedback-neutral-high-text: var(--color-gray-ocean-800);
211
- --color-feedback-neutral-high-icon: var(--color-gray-ocean-800);
212
- --color-feedback-neutral-high-border: var(--color-gray-ocean-250);
213
- --color-feedback-neutral-high-background: var(--color-gray-ocean-250);
214
- --color-feedback-error-high-contrast-title: var(--color-base-black);
215
- --color-feedback-error-high-contrast-text: var(--color-status-red-900);
216
- --color-feedback-error-high-contrast-icon: var(--color-base-black);
217
- --color-feedback-error-high-contrast-border: var(--color-status-red-300);
218
- --color-feedback-error-high-contrast-background: var(--color-status-red-300);
219
- --color-feedback-error-low-text: var(--color-status-red-300);
220
- --color-feedback-error-low-icon: var(--color-status-red-300);
221
- --color-feedback-error-low-border-subtle: var(--color-status-red-700);
222
- --color-feedback-error-low-border: var(--color-status-red-300);
223
- --color-feedback-error-low-background: var(--color-status-red-900);
224
- --color-feedback-error-high-text: var(--color-status-red-900);
225
- --color-feedback-error-high-icon: var(--color-status-red-900);
226
- --color-feedback-error-high-border: var(--color-status-red-300);
227
- --color-feedback-error-high-background: var(--color-status-red-300);
228
- --color-feedback-information-high-contrast-title: var(--color-base-black);
229
- --color-feedback-information-high-contrast-text: var(--color-status-blue-900);
230
- --color-feedback-information-high-contrast-icon: var(--color-base-black);
231
- --color-feedback-information-high-contrast-border: var(--color-status-blue-300);
232
- --color-feedback-information-high-contrast-background: var(--color-status-blue-300);
233
- --color-feedback-information-low-text: var(--color-status-blue-300);
234
- --color-feedback-information-low-icon: var(--color-status-blue-300);
235
- --color-feedback-information-low-border-subtle: var(--color-status-blue-700);
236
- --color-feedback-information-low-border: var(--color-status-blue-300);
237
- --color-feedback-information-low-background: var(--color-status-blue-900);
238
- --color-feedback-information-high-text: var(--color-status-blue-800);
239
- --color-feedback-information-high-icon: var(--color-status-blue-800);
240
- --color-feedback-information-high-border: var(--color-status-blue-300);
241
- --color-feedback-information-high-background: var(--color-status-blue-300);
242
- --color-chart-10: var(--color-crimson-500);
243
- --color-chart-9: var(--color-dark-blue-500);
244
- --color-chart-8: var(--color-orange-500);
245
- --color-chart-7: var(--color-yellow-500);
246
- --color-chart-6: var(--color-lime-500);
247
- --color-chart-5: var(--color-light-blue-500);
248
- --color-chart-4: var(--color-turquoise-500);
249
- --color-chart-3: var(--color-petrol-500);
250
- --color-chart-2: var(--color-dark-gray-500);
251
- --color-chart-1: var(--color-amber-500);
252
- --color-brand-900: var(--color-petrol-50);
253
- --color-brand-800: var(--color-petrol-100);
254
- --color-brand-700: var(--color-petrol-200);
255
- --color-brand-600: var(--color-petrol-300);
256
- --color-brand-500: var(--color-petrol-400);
257
- --color-brand-400: var(--color-petrol-500);
258
- --color-brand-300: var(--color-petrol-600);
259
- --color-brand-200: var(--color-petrol-700);
260
- --color-brand-100: var(--color-petrol-800);
261
- --color-brand-50: var(--color-petrol-900);
262
- --color-accent-900: var(--color-orange-50);
263
- --color-accent-800: var(--color-orange-100);
264
- --color-accent-700: var(--color-orange-200);
265
- --color-accent-600: var(--color-orange-300);
266
- --color-accent-500: var(--color-orange-400);
267
- --color-accent-400: var(--color-orange-500);
268
- --color-accent-300: var(--color-orange-600);
269
- --color-accent-200: var(--color-orange-700);
270
- --color-accent-100: var(--color-orange-800);
271
- --color-accent-50: var(--color-orange-900);
272
- --color-content-inverted-low-icon: var(--color-gray-ocean-450);
273
- --color-content-inverted-low-text: var(--color-gray-ocean-450);
274
- --color-content-inverted-medium-icon: var(--color-gray-ocean-650);
275
- --color-content-inverted-medium-text: var(--color-gray-ocean-650);
276
- --color-content-inverted-high-icon: var(--color-gray-ocean-900);
277
- --color-content-inverted-high-text: var(--color-gray-ocean-900);
278
- --color-content-lower-text: var(--color-gray-ocean-400);
279
- --color-content-low-icon: var(--color-gray-ocean-300);
280
- --color-content-low-text: var(--color-gray-ocean-300);
281
- --color-content-low-border: var(--color-gray-ocean-500);
282
- --color-content-medium-icon: var(--color-gray-ocean-200);
283
- --color-content-medium-text: var(--color-gray-ocean-200);
284
- --color-content-medium-border: var(--color-gray-ocean-400);
285
- --color-content-high-icon: var(--color-gray-ocean-50);
286
- --color-content-high-text: var(--color-gray-ocean-50);
287
- --color-content-high-border: var(--color-gray-ocean-300);
288
- --color-level-inverted-05-background: var(--color-gray-ocean-25);
289
- --color-level-inverted-00-background: var(--color-gray-ocean-00);
290
- --color-level-inverted-40-background: var(--color-gray-ocean-00);
291
- --color-level-inverted-30-background: var(--color-gray-ocean-50);
292
- --color-level-inverted-20-background: var(--color-gray-ocean-00);
293
- --color-level-inverted-15-background: var(--color-gray-ocean-75);
294
- --color-level-inverted-10-background: var(--color-gray-ocean-50);
295
- --color-level-05-background: var(--color-gray-ocean-850);
296
- --color-level-00-background: var(--color-gray-ocean-900);
297
- --color-level-40-background: var(--color-gray-ocean-500);
298
- --color-level-30-background: var(--color-gray-ocean-600);
299
- --color-level-20-background: var(--color-gray-ocean-700);
300
- --color-level-15-background: var(--color-gray-ocean-800);
301
- --color-level-10-background: var(--color-gray-ocean-800);
302
- --color-interaction-link-inverted-text-visited: var(--color-petrol-400);
303
- --color-interaction-link-inverted-text-hover: var(--color-petrol-600);
304
- --color-interaction-link-inverted-icon-visited: var(--color-petrol-400);
305
- --color-interaction-link-inverted-icon-hover: var(--color-petrol-600);
306
- --color-interaction-link-low-text-visited: var(--color-petrol-400);
307
- --color-interaction-link-low-text-hover: var(--color-petrol-400);
308
- --color-interaction-link-low-icon-visited: var(--color-petrol-400);
309
- --color-interaction-link-low-icon-hover: var(--color-petrol-400);
310
- --color-interaction-link-high-text-visited: var(--color-petrol-400);
311
- --color-interaction-link-high-text-hover: var(--color-petrol-400);
312
- --color-interaction-link-high-text: var(--color-petrol-500);
313
- --color-interaction-link-high-icon-visited: var(--color-petrol-400);
314
- --color-interaction-link-high-icon-hover: var(--color-petrol-400);
315
- --color-interaction-link-high-icon: var(--color-petrol-500);
316
- --color-interaction-container-branded-low-text-hover: var(--color-petrol-400);
317
- --color-interaction-container-branded-low-text-active: var(--color-petrol-400);
318
- --color-interaction-container-branded-low-text: var(--color-petrol-500);
319
- --color-interaction-container-branded-low-icon-hover: var(--color-petrol-400);
320
- --color-interaction-container-branded-low-icon-active: var(--color-petrol-400);
321
- --color-interaction-container-branded-low-icon: var(--color-petrol-500);
322
- --color-interaction-container-branded-low-border-hover: var(--color-petrol-400);
323
- --color-interaction-container-branded-low-border-active: var(--color-petrol-400);
324
- --color-interaction-container-branded-low-border: var(--color-petrol-500);
325
- --color-interaction-container-branded-low-background-hover: var(--color-petrol-900);
326
- --color-interaction-container-branded-low-background-active: var(--color-petrol-900);
327
- --color-interaction-container-branded-high-text-hover: var(--color-base-black);
328
- --color-interaction-container-branded-high-text-active: var(--color-base-black);
329
- --color-interaction-container-branded-high-text: var(--color-base-black);
330
- --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
331
- --color-interaction-container-branded-high-icon-active: var(--color-base-black);
332
- --color-interaction-container-branded-high-icon: var(--color-base-black);
333
- --color-interaction-container-branded-high-border-hover: var(--color-petrol-400);
334
- --color-interaction-container-branded-high-border-active: var(--color-petrol-400);
335
- --color-interaction-container-branded-high-border: var(--color-petrol-500);
336
- --color-interaction-container-branded-high-background-hover: var(--color-petrol-400);
337
- --color-interaction-container-branded-high-background-active: var(--color-petrol-400);
338
- --color-interaction-container-branded-high-background: var(--color-petrol-500);
339
- --color-interaction-container-neutral-text-active: var(--color-petrol-400);
340
- --color-interaction-container-neutral-icon-active: var(--color-petrol-400);
341
- --color-interaction-container-neutral-border-active: var(--color-petrol-400);
7
+ --color-black: #000000;
8
+ --color-white: #ffffff;
9
+ --color-transparent: rgba(255, 255, 255, 0);
10
+ --opacity-disabled: 50%;
11
+ --opacity-disabled-2: 0%;
12
+ --shadow-color-opacity-0: rgba(11, 15, 17, 0.09);
13
+ --shadow-color-opacity-1: rgba(11, 15, 17, 0.09);
14
+ --shadow-color-opacity-2: rgba(11, 15, 17, 0.14);
15
+ --shadow-color-opacity-3: rgba(11, 15, 17, 0.32);
16
+ --shadow-blur-base-1: 3.0000px;
17
+ --shadow-blur-base-2: 2.0000px;
18
+ --shadow-blur-md-1: 4.0000px;
19
+ --shadow-blur-md-2: 6.0000px;
20
+ --shadow-blur-lg-1: 6.0000px;
21
+ --shadow-blur-lg-2: 15.0000px;
22
+ --shadow-blur-xl-1: 10.0000px;
23
+ --shadow-blur-xl-2: 0.0000px;
24
+ --shadow-blur-2xl: 50.0000px;
25
+ --shadow-spread-base: 0.0000px;
26
+ --shadow-spread-md: 0.0000px;
27
+ --shadow-spread-lg-1: 0.0000px;
28
+ --shadow-spread-lg-2: 0.0000px;
29
+ --shadow-spread-xl: -2.0000px;
30
+ --shadow-spread-2xl: -6.0000px;
31
+ --shadow-y-axis-none: 0.0000px;
32
+ --shadow-y-axis-base-1: 1.0000px;
33
+ --shadow-y-axis-base-2: 1.0000px;
34
+ --shadow-y-axis-md-1: 2.0000px;
35
+ --shadow-y-axis-md-2: 4.0000px;
36
+ --shadow-y-axis-lg-1: 4.0000px;
37
+ --shadow-y-axis-lg-2: 10.0000px;
38
+ --shadow-y-axis-xl-1: 10.0000px;
39
+ --shadow-y-axis-xl-2: 20.0000px;
40
+ --shadow-y-axis-2xl: 25.0000px;
41
+ --components-button-high-border: rgba(255, 255, 255, 0);
42
+ --components-button-high-border-hover: rgba(255, 255, 255, 0);
43
+ --components-button-high-border-active: rgba(255, 255, 255, 0);
44
+ --components-button-low-background: rgba(255, 255, 255, 0);
45
+ --components-button-low-border: rgba(255, 255, 255, 0);
46
+ --components-button-low-border-active: rgba(255, 255, 255, 0);
47
+ --components-button-low-border-hover: rgba(255, 255, 255, 0);
48
+ --components-button-lower-border: rgba(255, 255, 255, 0);
49
+ --components-button-lower-border-active: rgba(255, 255, 255, 0);
50
+ --components-button-lower-border-hover: rgba(255, 255, 255, 0);
51
+ --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
52
+ --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
53
+ --components-form-opacity-default: 100%;
54
+ --components-form-opacity-disabled: 50%;
55
+ --components-loader-white-background: rgba(255, 255, 255, 0.2);
56
+ --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
57
+ --components-button-destructive-low-background: rgba(255, 255, 255, 0);
58
+ --components-button-destructive-low-border: rgba(255, 255, 255, 0);
59
+ --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
60
+ --components-overlay-opacity: 75%;
342
61
  --color-interaction-container-neutral-background-active: var(--color-petrol-900);
343
- --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
344
- --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
345
- --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
346
- --components-toggle-background-hover-checked: var(--color-interaction-container-branded-high-background-hover);
347
- --components-toggle-background-default-checked: var(--color-interaction-container-branded-high-background);
348
- --components-toggle-border-hover-checked: var(--color-interaction-container-branded-high-border-hover);
349
- --components-toggle-border-default-checked: var(--color-interaction-container-branded-high-border);
350
- --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
351
- --components-tooltip-text: var(--color-content-inverted-high-text);
352
- --components-splitter-handle-background-hover: var(--color-interaction-container-branded-high-background-active);
353
- --components-splitter-handle-background-active: var(--color-interaction-container-branded-high-background-active);
354
- --components-splitter-handle-background: var(--color-content-low-border);
355
- --components-splitter-line-background-hover: var(--color-interaction-container-branded-low-background-active);
356
- --components-splitter-line-background-active: var(--color-interaction-container-branded-high-background-active);
357
- --components-splitter-line-background: var(--color-level-10-background);
358
- --components-splitter-old-border-active: var(--color-interaction-container-neutral-border-active);
359
- --components-splitter-old-background-active: var(--color-interaction-container-neutral-background-active);
360
- --components-slider-handler-border-focus: var(--components-form-field-background-checked);
361
- --components-slider-handler-background-focus: var(--components-form-field-background-checked);
362
- --components-slider-track-background: var(--color-content-low-border);
363
- --components-sidebar-border: var(--color-content-low-border);
364
- --components-sidebar-divider: var(--color-content-low-border);
365
- --components-sidebar-background: var(--color-level-00-background);
366
- --components-popover-supporting-text: var(--color-content-low-text);
367
- --components-popover-text: var(--color-content-inverted-medium-text);
368
- --components-popover-border: var(--color-content-low-border);
369
- --components-notification-neutral-icon: var(--color-feedback-neutral-low-icon);
370
- --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
371
- --components-notification-neutral-background: var(--color-level-20-background);
372
- --components-notification-success-icon: var(--color-feedback-success-low-icon);
373
- --components-notification-success-border: var(--color-feedback-success-low-border);
374
- --components-notification-success-background: var(--color-level-20-background);
375
- --components-notification-error-icon: var(--color-feedback-error-low-icon);
376
- --components-notification-error-border: var(--color-feedback-error-low-border);
377
- --components-notification-error-background: var(--color-level-20-background);
378
- --components-notification-warning-icon: var(--color-feedback-warning-low-icon);
379
- --components-notification-warning-border: var(--color-feedback-warning-low-border);
380
- --components-notification-warning-background: var(--color-level-20-background);
381
- --components-notification-content-title: var(--color-content-high-text);
382
- --components-notification-content-timestamp: var(--color-content-medium-text);
383
- --components-notification-content-description: var(--color-content-medium-text);
384
- --components-notification-information-border: var(--color-feedback-information-low-border);
385
- --components-notification-information-icon: var(--color-feedback-information-low-icon);
386
- --components-notification-information-background: var(--color-level-20-background);
387
- --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
388
- --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
389
- --components-menu-contextual-border: var(--color-content-low-border);
390
- --components-menu-contextual-background: var(--color-level-00-background);
391
- --components-list-dropdown-border: var(--color-content-low-border);
392
- --components-list-dropdown-separator: var(--color-content-low-border);
393
- --components-list-dropdown-group-title-content: var(--color-content-medium-text);
394
- --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
395
- --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
396
- --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
397
- --components-list-dropdown-item-description-default: var(--color-content-low-text);
398
- --components-list-dropdown-item-label-active: var(--color-content-low-text);
399
- --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
400
- --components-list-dropdown-item-label-hover: var(--color-content-high-text);
401
- --components-list-dropdown-item-label-default: var(--color-content-medium-text);
402
- --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
403
- --components-list-dropdown-header-background: var(--color-level-10-background);
404
- --components-list-dropdown-background: var(--color-level-00-background);
405
- --components-list-select-hr: var(--color-content-low-border);
406
- --components-list-select-border: var(--color-content-low-border);
407
- --components-list-select-optgroup-content: var(--color-content-lower-text);
408
- --components-list-select-option-background-active: var(--color-interaction-container-neutral-background-active);
409
- --components-list-select-option-content-active: var(--color-interaction-container-neutral-text-active);
410
- --components-list-select-option-content-disabled: var(--color-content-lower-text);
411
- --components-list-select-option-content-hover: var(--color-content-high-text);
412
- --components-list-select-option-content-default: var(--color-content-medium-text);
413
- --components-list-select-background: var(--color-level-00-background);
414
- --components-calendar-background: var(--color-level-00-background);
415
- --components-calendar-cell-text-today: var(--color-content-high-text);
416
- --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
417
- --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
418
- --components-calendar-cell-text-selected: var(--color-interaction-container-branded-high-text-active);
419
- --components-calendar-cell-dot-hover: var(--color-interaction-container-branded-high-icon-hover);
420
- --components-calendar-cell-dot-selected: var(--color-interaction-container-branded-high-icon-active);
421
- --components-calendar-cell-dot: var(--color-content-high-icon);
422
- --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
423
- --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
424
- --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
425
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
426
- --components-calendar-weeks-text: var(--color-content-high-text);
427
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
428
- --components-calendar-weeks-background: var(--color-level-10-background);
429
- --components-calendar-header-text: var(--color-content-high-text);
430
- --components-calendar-border: var(--color-content-low-border);
431
- --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
432
- --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
433
- --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
434
- --components-datagrid-expander-expander-background: var(--color-level-10-background);
435
- --components-datagrid-expander-border: var(--color-content-low-border);
436
- --components-datagrid-expander-content-background: var(--color-level-00-background);
437
- --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
438
- --components-datagrid-body-subtext: var(--color-content-low-text);
439
- --components-datagrid-body-text: var(--color-content-medium-text);
440
- --components-datagrid-body-border: var(--color-content-low-border);
441
- --components-datagrid-header-text: var(--color-content-high-text);
442
- --components-datagrid-header-border: var(--color-content-medium-border);
443
- --components-buttongroup-low-border: var(--color-interaction-container-branded-low-border);
444
- --components-buttongroup-medium-border: var(--color-interaction-container-branded-low-border);
445
- --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
446
- --components-buttongroup-high-border: var(--color-interaction-container-branded-high-border);
447
- --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
448
- --components-avatar-content-10: var(--color-rainbow-10-icon);
449
- --components-avatar-content-9: var(--color-rainbow-9-text);
450
- --components-avatar-content-8: var(--color-rainbow-8-text);
451
- --components-avatar-content-7: var(--color-rainbow-7-text);
452
- --components-avatar-content-6: var(--color-rainbow-6-icon);
453
- --components-avatar-content-5: var(--color-rainbow-5-icon);
454
- --components-avatar-content-4: var(--color-rainbow-4-icon);
455
- --components-avatar-content-3: var(--color-rainbow-3-icon);
456
- --components-avatar-content-2: var(--color-rainbow-2-icon);
457
- --components-avatar-content-1: var(--color-rainbow-1-icon);
458
- --components-avatar-border-10: var(--color-rainbow-10-border);
459
- --components-avatar-border-9: var(--color-rainbow-9-border);
460
- --components-avatar-border-8: var(--color-rainbow-8-border);
461
- --components-avatar-border-7: var(--color-rainbow-7-border);
462
- --components-avatar-border-6: var(--color-rainbow-6-border);
463
- --components-avatar-border-5: var(--color-rainbow-5-border);
464
- --components-avatar-border-4: var(--color-rainbow-4-border);
465
- --components-avatar-border-3: var(--color-rainbow-3-border);
466
- --components-avatar-border-2: var(--color-rainbow-2-border);
467
- --components-avatar-border-1: var(--color-rainbow-1-border);
468
- --components-avatar-background-10: var(--color-rainbow-10-background);
469
- --components-avatar-background-9: var(--color-rainbow-9-background);
470
- --components-avatar-background-8: var(--color-rainbow-8-background);
471
- --components-avatar-background-7: var(--color-rainbow-7-background);
472
- --components-avatar-background-6: var(--color-rainbow-6-background);
473
- --components-avatar-background-5: var(--color-rainbow-5-background);
474
- --components-avatar-background-4: var(--color-rainbow-4-background);
475
- --components-avatar-background-3: var(--color-rainbow-3-background);
476
- --components-avatar-background-2: var(--color-rainbow-2-background);
477
- --components-avatar-background-1: var(--color-rainbow-1-background);
478
- --components-alert-neutral-icon: var(--color-feedback-neutral-low-icon);
479
- --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
480
- --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
481
- --components-alert-success-icon: var(--color-feedback-success-low-icon);
482
- --components-alert-success-border: var(--color-feedback-success-low-border);
483
- --components-alert-success-background: var(--color-feedback-success-low-background);
484
- --components-alert-error-icon: var(--color-feedback-error-low-icon);
485
- --components-alert-error-border: var(--color-feedback-error-low-border);
486
- --components-alert-error-background: var(--color-feedback-error-low-background);
487
- --components-alert-warning-icon: var(--color-feedback-warning-low-icon);
488
- --components-alert-warning-border: var(--color-feedback-warning-low-border);
489
- --components-alert-warning-background: var(--color-feedback-warning-low-background);
490
- --components-alert-content-title: var(--color-content-high-text);
491
- --components-alert-content-description: var(--color-content-medium-text);
492
- --components-alert-information-border: var(--color-feedback-information-low-border);
493
- --components-alert-information-icon: var(--color-feedback-information-low-icon);
494
- --components-alert-information-background: var(--color-feedback-information-low-background);
495
- --components-button-destructive-lower-border-hover: var(--color-dont-use-border);
496
- --components-button-destructive-lower-border: var(--color-dont-use-border);
497
- --components-button-destructive-lower-icon-hover: var(--color-dont-use-content);
498
- --components-button-destructive-lower-icon: var(--color-dont-use-content);
499
- --components-button-destructive-lower-text-hover: var(--color-dont-use-content);
500
- --components-button-destructive-lower-text: var(--color-dont-use-content);
501
- --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
502
- --components-button-destructive-lower-background: var(--color-dont-use-background);
503
- --components-form-shape-foreground-disabled-error: var(--color-feedback-error-low-icon);
504
- --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
505
- --components-form-shape-border-success: var(--color-feedback-success-low-border);
506
- --components-form-shape-border-error: var(--color-feedback-error-low-border);
507
- --components-form-shape-border-focus: var(--color-focus-brand);
508
- --components-form-shape-border-hover: var(--color-content-high-border);
509
- --components-form-shape-border-default: var(--color-content-medium-border);
510
- --components-form-shape-background-error: var(--color-feedback-error-low-icon);
511
- --components-form-field-icon-success: var(--color-feedback-success-low-icon);
512
- --components-form-field-icon-error: var(--color-feedback-error-low-icon);
513
- --components-form-field-icon-disabled: var(--color-content-medium-border);
514
- --components-form-field-icon-default: var(--color-content-low-text);
515
- --components-form-field-content-text: var(--color-content-high-text);
516
- --components-form-field-content-placeholder: var(--color-content-low-text);
517
- --components-form-field-border-readonly: var(--color-content-low-border);
518
- --components-form-field-border-success: var(--color-feedback-success-low-border);
519
- --components-form-field-border-error: var(--color-feedback-error-low-border);
520
- --components-form-field-border-focus: var(--color-focus-brand);
521
- --components-form-field-border-hover: var(--color-content-high-border);
522
- --components-form-field-border-disabled: var(--color-content-medium-border);
523
- --components-form-field-border-default: var(--color-content-medium-border);
524
- --components-form-field-background-readonly: var(--color-level-05-background);
525
- --components-form-field-background-error: var(--color-feedback-error-low-border);
526
- --components-form-field-background-disabled: var(--color-level-10-background);
527
- --components-form-field-background-hover: var(--color-level-05-background);
528
- --components-form-field-background-focus: var(--color-level-00-background);
529
- --components-form-field-background-default: var(--color-level-00-background);
530
- --components-form-text-description-error: var(--color-feedback-error-low-icon);
531
- --components-form-text-description-default: var(--color-content-low-text);
532
- --components-form-text-label-disabled: var(--color-content-medium-text);
533
- --components-form-text-label-default: var(--color-content-high-text);
534
- --components-form-text-info-icon: var(--color-content-medium-text);
535
- --components-form-text-required: var(--color-feedback-error-low-icon);
536
- --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
537
- --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
538
- --components-button-medium-text: var(--color-interaction-container-branded-low-text);
539
- --components-button-medium-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
540
- --components-button-medium-icon-active: var(--color-interaction-container-branded-low-icon-active);
541
- --components-button-medium-icon: var(--color-interaction-container-branded-low-icon);
542
- --components-button-medium-border-hover: var(--color-interaction-container-branded-low-border-hover);
543
- --components-button-medium-border-active: var(--color-interaction-container-branded-low-border-hover);
544
- --components-button-medium-border: var(--color-interaction-container-branded-low-border);
545
- --components-button-medium-background-hover: var(--color-interaction-container-branded-low-background-hover);
546
- --components-button-medium-background-active: var(--color-interaction-container-branded-low-background-active);
547
- --components-button-lower-text-active: var(--color-interaction-container-neutral-text-active);
548
- --components-button-lower-icon-active: var(--color-interaction-container-neutral-icon-active);
549
- --components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
550
- --components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
551
- --components-button-low-text-active: var(--color-interaction-container-branded-low-text-active);
552
- --components-button-low-text: var(--color-interaction-container-branded-low-text);
553
- --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
554
- --components-button-low-icon-active: var(--color-interaction-container-branded-low-icon-active);
555
- --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
556
- --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
557
- --components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
558
- --components-button-high-icon-hover: var(--color-interaction-container-branded-high-icon-hover);
559
- --components-button-high-icon-active: var(--color-interaction-container-branded-high-icon-active);
560
- --components-button-high-icon: var(--color-interaction-container-branded-high-icon);
561
- --components-button-high-text-hover: var(--color-interaction-container-branded-high-text-hover);
562
- --components-button-high-text-active: var(--color-interaction-container-branded-high-text-active);
563
- --components-button-high-text: var(--color-interaction-container-branded-high-text);
564
- --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
565
- --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
566
- --components-button-high-background: var(--color-interaction-container-branded-high-background);
567
- --color-focus-success: var(--color-feedback-success-low-border);
568
- --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
569
- --color-focus-destructive: var(--color-feedback-error-high-border);
570
- --color-focus-background-inverted: var(--color-level-inverted-00-background);
571
- --color-focus-background: var(--color-level-00-background);
572
- --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
573
- --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
574
- --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
575
- --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
576
- --color-interaction-link-low-text-disabled: var(--color-content-low-text);
577
- --color-interaction-link-low-text: var(--color-content-high-text);
578
- --color-interaction-link-low-icon-disabled: var(--color-content-low-icon);
579
- --color-interaction-link-low-icon: var(--color-content-high-text);
580
- --color-interaction-link-high-text-disabled: var(--color-content-low-text);
581
- --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
582
- --color-interaction-container-branded-low-background: var(--color-level-00-background);
583
- --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
584
- --color-interaction-container-neutral-text: var(--color-content-low-text);
585
- --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
586
- --color-interaction-container-neutral-icon: var(--color-content-low-text);
587
- --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
588
- --color-interaction-container-neutral-border: var(--color-content-low-text);
589
- --color-interaction-container-neutral-background-hover: var(--color-level-10-background);
590
- --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
591
- --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
592
- --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
593
- --components-toggle-shape-disabled-checked: var(--color-interaction-container-neutral-icon);
594
- --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
595
- --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
596
- --components-toggle-background-default: var(--color-interaction-container-branded-low-background);
597
- --components-splitter-old-border-hover: var(--color-interaction-container-neutral-border-hover);
598
- --components-splitter-old-background-hover: var(--color-interaction-container-neutral-background-hover);
599
- --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
600
- --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
601
- --components-slider-handler-border-error: var(--components-form-field-background-error);
602
- --components-slider-handler-border-hover: var(--components-form-field-background-hover);
603
- --components-slider-handler-border-default: var(--components-form-field-background-default);
604
- --components-slider-handler-background-readonly: var(--components-form-field-background-readonly);
605
- --components-slider-handler-background-disabled: var(--components-form-field-background-disabled);
606
- --components-slider-handler-background-error: var(--components-form-field-background-error);
607
- --components-slider-handler-background-hover: var(--components-form-field-background-hover);
608
- --components-slider-handler-background-default: var(--components-form-field-background-default);
609
- --components-slider-track-filled-readonly: var(--components-form-field-border-readonly);
610
- --components-slider-track-filled-disabled: var(--components-form-field-border-disabled);
611
- --components-slider-track-filled-error: var(--components-form-field-border-error);
612
- --components-slider-track-filled-focus: var(--components-form-field-border-focus);
613
- --components-slider-track-filled-hover: var(--components-form-field-border-hover);
614
- --components-slider-track-filled-default: var(--components-form-field-border-default);
615
- --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
616
- --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
617
- --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
618
- --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
619
- --components-list-select-option-background-hover: var(--color-interaction-container-neutral-background-hover);
620
- --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
621
- --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
622
- --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
623
- --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
624
- --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
625
- --components-field-time-text-default: var(--color-interaction-container-neutral-text);
626
- --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
627
- --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
628
- --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
629
- --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
630
- --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
631
- --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
632
- --components-breadcrumb-text-current: var(--color-interaction-link-high-text-disabled);
633
- --components-breadcrumb-text: var(--color-interaction-link-low-text);
634
- --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
635
- --components-button-medium-background: var(--color-interaction-container-branded-low-background);
636
- --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
637
- --components-button-lower-text: var(--color-interaction-container-neutral-text);
638
- --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
639
- --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
640
- --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
641
- }
642
-
643
- :root {
644
- --color-gray-25: var(--color-gray-ocean-25);
645
- --color-gray-50: var(--color-gray-ocean-50);
646
- --color-gray-75: var(--color-gray-ocean-75);
647
- --color-gray-100: var(--color-gray-ocean-100);
648
- --color-gray-150: var(--color-gray-ocean-150);
649
- --color-gray-200: var(--color-gray-ocean-200);
650
- --color-gray-250: var(--color-gray-ocean-250);
651
- --color-gray-300: var(--color-gray-ocean-300);
652
- --color-gray-350: var(--color-gray-ocean-350);
653
- --color-gray-400: var(--color-gray-ocean-400);
654
- --color-gray-450: var(--color-gray-ocean-450);
655
- --color-gray-500: var(--color-gray-ocean-500);
656
- --color-gray-550: var(--color-gray-ocean-550);
657
- --color-gray-600: var(--color-gray-ocean-600);
658
- --color-gray-650: var(--color-gray-ocean-650);
659
- --color-gray-700: var(--color-gray-ocean-700);
660
- --color-gray-750: var(--color-gray-ocean-750);
661
- --color-gray-800: var(--color-gray-ocean-800);
662
- --color-gray-850: var(--color-gray-ocean-850);
663
- --color-gray-900: var(--color-gray-ocean-900);
664
- --color-gray-00: var(--color-gray-ocean-00);
665
- }
666
- /**
667
- * Do not edit directly, this file was auto-generated.
668
- */
669
-
670
- :root {
671
- --components-overlay-opacity: 55%;
672
- --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
673
- --components-button-destructive-low-border: rgba(255, 255, 255, 0);
674
- --components-button-destructive-low-background: rgba(255, 255, 255, 0);
675
- --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
676
- --components-loader-white-background: rgba(255, 255, 255, 0.2);
677
- --components-form-opacity-disabled: 50%;
678
- --components-form-opacity-default: 100%;
679
- --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
680
- --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
681
- --components-button-lower-border-hover: rgba(255, 255, 255, 0);
682
- --components-button-lower-border-active: rgba(255, 255, 255, 0);
683
- --components-button-lower-border: rgba(255, 255, 255, 0);
684
- --components-button-low-border-hover: rgba(255, 255, 255, 0);
685
- --components-button-low-border-active: rgba(255, 255, 255, 0);
686
- --components-button-low-border: rgba(255, 255, 255, 0);
687
- --components-button-low-background: rgba(255, 255, 255, 0);
688
- --components-button-high-border-active: rgba(255, 255, 255, 0);
689
- --components-button-high-border-hover: rgba(255, 255, 255, 0);
690
- --components-button-high-border: rgba(255, 255, 255, 0);
691
- --shadow-y-axis-2xl: 25.0000px;
692
- --shadow-y-axis-xl-2: 20.0000px;
693
- --shadow-y-axis-xl-1: 10.0000px;
694
- --shadow-y-axis-lg-2: 10.0000px;
695
- --shadow-y-axis-lg-1: 4.0000px;
696
- --shadow-y-axis-md-2: 4.0000px;
697
- --shadow-y-axis-md-1: 2.0000px;
698
- --shadow-y-axis-base-2: 1.0000px;
699
- --shadow-y-axis-base-1: 1.0000px;
700
- --shadow-y-axis-none: 0.0000px;
701
- --shadow-spread-2xl: -12.0000px;
702
- --shadow-spread-xl: -5.0000px;
703
- --shadow-spread-lg-2: -3.0000px;
704
- --shadow-spread-lg-1: -2.0000px;
705
- --shadow-spread-md: 0.0000px;
706
- --shadow-spread-base: 0.0000px;
707
- --shadow-blur-2xl: 50.0000px;
708
- --shadow-blur-xl-2: 25.0000px;
709
- --shadow-blur-xl-1: 10.0000px;
710
- --shadow-blur-lg-2: 15.0000px;
711
- --shadow-blur-lg-1: 6.0000px;
712
- --shadow-blur-md-2: 6.0000px;
713
- --shadow-blur-md-1: 4.0000px;
714
- --shadow-blur-base-2: 2.0000px;
715
- --shadow-blur-base-1: 3.0000px;
716
- --shadow-color-opacity-3: rgba(11, 15, 17, 0.25);
717
- --shadow-color-opacity-2: rgba(11, 15, 17, 0.1);
718
- --shadow-color-opacity-1: rgba(11, 15, 17, 0.06);
719
- --shadow-color-opacity-0: rgba(255, 255, 255, 0.06);
720
- --opacity-disabled-2: 0%;
721
- --opacity-disabled: 50%;
722
- --color-transparent: rgba(255, 255, 255, 0);
723
- --color-white: #ffffff;
724
- --color-black: #000000;
725
- --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
726
- --components-toggle-shape-hover: var(--color-gray-ocean-400);
727
- --components-toggle-shape-default: var(--color-gray-ocean-300);
728
- --components-toggle-background-disabled-checked: var(--color-gray-ocean-150);
729
- --components-toggle-background-disabled: var(--color-gray-ocean-150);
730
- --components-toggle-border-disabled-checked: var(--color-gray-ocean-150);
731
- --components-toggle-border-disabled: var(--color-gray-ocean-150);
732
- --components-toggle-border-hover: var(--color-gray-ocean-400);
733
- --components-toggle-border-default: var(--color-gray-spark-300);
734
- --components-tooltip-border: var(--color-gray-ocean-900);
735
- --components-tooltip-background: var(--color-gray-ocean-900);
736
- --components-splitter-old-border: var(--color-transparent);
737
- --components-splitter-old-background: var(--color-interaction-container-neutral-background);
738
- --components-popover-background: var(--color-gray-ocean-00);
739
- --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
740
- --components-list-dropdown-group-title-background: var(--color-transparent);
741
- --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
742
- --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
743
- --components-list-select-option-background-disabled: var(--color-interaction-container-neutral-background);
744
- --components-list-select-option-background-default: var(--color-interaction-container-neutral-background);
745
- --components-field-time-background-default: var(--color-interaction-container-neutral-background);
746
- --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
747
- --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
748
- --components-overlay-background: var(--color-gray-ocean-850);
749
- --components-button-destructive-high-icon-hover: var(--color-base-white);
750
- --components-button-destructive-high-icon: var(--color-base-white);
751
- --components-button-destructive-high-text-hover: var(--color-base-white);
752
- --components-button-destructive-high-text: var(--color-base-white);
753
- --components-button-destructive-high-background-hover: var(--color-status-red-600);
754
- --components-button-destructive-high-background: var(--color-status-red-500);
755
- --components-button-destructive-low-icon-hover: var(--color-status-red-600);
756
- --components-button-destructive-low-icon: var(--color-status-red-500);
757
- --components-button-destructive-low-text-hover: var(--color-status-red-600);
758
- --components-button-destructive-low-text: var(--color-status-red-500);
759
- --components-button-destructive-low-background-hover: var(--color-status-red-50);
760
- --components-button-destructive-medium-border-hover: var(--color-status-red-600);
761
- --components-button-destructive-medium-border: var(--color-status-red-500);
762
- --components-button-destructive-medium-icon-hover: var(--color-status-red-600);
763
- --components-button-destructive-medium-icon: var(--color-status-red-500);
764
- --components-button-destructive-medium-text-hover: var(--color-status-red-600);
765
- --components-button-destructive-medium-text: var(--color-status-red-500);
766
- --components-button-destructive-medium-background-hover: var(--color-status-red-50);
767
- --components-loader-brand-foreground: var(--color-petrol-500);
768
- --components-loader-brand-background: var(--color-petrol-50);
769
- --components-loader-white-foreground: var(--color-base-white);
770
- --components-form-shape-foreground-default: var(--color-base-white);
771
- --components-form-shape-background-selected: var(--color-petrol-600);
772
- --components-form-shape-background-disabled: var(--color-gray-ocean-75);
773
- --components-form-shape-background-hover: var(--color-gray-ocean-100);
774
- --components-form-shape-background-default: var(--color-gray-ocean-75);
775
- --components-form-field-background-checked: var(--color-petrol-600);
776
- --components-button-gr-as-complementary-icon-hover: var(--color-base-black);
777
- --components-button-gr-as-complementary-icon: var(--color-base-black);
778
- --components-button-gr-as-complementary-text-hover: var(--color-base-black);
779
- --components-button-gr-as-complementary-text: var(--color-base-black);
780
- --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-300);
781
- --components-button-gr-as-complementary-background: var(--color-gray-ocean-200);
782
- --components-button-lower-background: var(--color-interaction-container-neutral-background);
783
- --color-dont-use-background: var(--color-gray-ocean-50);
784
- --color-dont-use-content: var(--color-gray-ocean-150);
785
- --color-dont-use-border: var(--color-gray-ocean-150);
786
- --color-rainbow-10-text: var(--color-gray-ocean-500);
787
- --color-rainbow-10-icon: var(--color-gray-ocean-500);
788
- --color-rainbow-10-border-light: var(--color-gray-ocean-150);
789
- --color-rainbow-10-border: var(--color-gray-ocean-500);
790
- --color-rainbow-10-background: var(--color-gray-ocean-75);
791
- --color-rainbow-9-text: var(--color-lime-700);
792
- --color-rainbow-9-icon: var(--color-lime-700);
793
- --color-rainbow-9-border-light: var(--color-lime-100);
794
- --color-rainbow-9-border: var(--color-lime-700);
795
- --color-rainbow-9-background: var(--color-lime-50);
796
- --color-rainbow-8-text: var(--color-petrol-600);
797
- --color-rainbow-8-icon: var(--color-petrol-600);
798
- --color-rainbow-8-border-light: var(--color-petrol-100);
799
- --color-rainbow-8-border: var(--color-petrol-600);
800
- --color-rainbow-8-background: var(--color-petrol-50);
801
- --color-rainbow-7-text: var(--color-green-600);
802
- --color-rainbow-7-icon: var(--color-green-600);
803
- --color-rainbow-7-border-light: var(--color-green-100);
804
- --color-rainbow-7-border: var(--color-green-600);
805
- --color-rainbow-7-background: var(--color-green-50);
806
- --color-rainbow-6-text: var(--color-crimson-400);
807
- --color-rainbow-6-icon: var(--color-crimson-400);
808
- --color-rainbow-6-border-light: var(--color-crimson-100);
809
- --color-rainbow-6-border: var(--color-crimson-400);
810
- --color-rainbow-6-background: var(--color-crimson-50);
811
- --color-rainbow-5-text: var(--color-turquoise-800);
812
- --color-rainbow-5-icon: var(--color-turquoise-800);
813
- --color-rainbow-5-border-light: var(--color-turquoise-100);
814
- --color-rainbow-5-border: var(--color-turquoise-800);
815
- --color-rainbow-5-background: var(--color-turquoise-50);
816
- --color-rainbow-4-text: var(--color-red-500);
817
- --color-rainbow-4-icon: var(--color-red-500);
818
- --color-rainbow-4-border-light: var(--color-red-100);
819
- --color-rainbow-4-border: var(--color-red-500);
820
- --color-rainbow-4-background: var(--color-red-50);
821
- --color-rainbow-3-text: var(--color-yellow-800);
822
- --color-rainbow-3-icon: var(--color-yellow-800);
823
- --color-rainbow-3-border-light: var(--color-yellow-200);
824
- --color-rainbow-3-border: var(--color-yellow-800);
825
- --color-rainbow-3-background: var(--color-yellow-50);
826
- --color-rainbow-2-text: var(--color-orange-700);
827
- --color-rainbow-2-icon: var(--color-orange-700);
828
- --color-rainbow-2-border-light: var(--color-orange-100);
829
- --color-rainbow-2-border: var(--color-orange-700);
830
- --color-rainbow-2-background: var(--color-orange-50);
831
- --color-rainbow-1-text: var(--color-amber-700);
832
- --color-rainbow-1-icon: var(--color-amber-700);
833
- --color-rainbow-1-border-light: var(--color-amber-100);
834
- --color-rainbow-1-border: var(--color-amber-700);
835
- --color-rainbow-1-background: var(--color-amber-50);
836
- --color-focus-brand: var(--color-petrol-600);
837
- --color-feedback-success-high-contrast-title: var(--color-base-white);
838
- --color-feedback-success-high-contrast-text: var(--color-status-green-50);
839
- --color-feedback-success-high-contrast-icon: var(--color-base-white);
840
- --color-feedback-success-high-contrast-border: var(--color-status-green-600);
841
- --color-feedback-success-high-contrast-background: var(--color-status-green-600);
842
- --color-feedback-success-low-text: var(--color-status-green-600);
843
- --color-feedback-success-low-icon: var(--color-status-green-600);
844
- --color-feedback-success-low-border-subtle: var(--color-status-green-100);
845
- --color-feedback-success-low-border: var(--color-status-green-600);
846
- --color-feedback-success-low-background: var(--color-status-green-50);
847
- --color-feedback-success-high-text: var(--color-status-green-800);
848
- --color-feedback-success-high-icon: var(--color-status-green-800);
849
- --color-feedback-success-high-border: var(--color-status-green-400);
850
- --color-feedback-success-high-background: var(--color-status-green-400);
851
- --color-feedback-warning-high-contrast-title: var(--color-base-white);
852
- --color-feedback-warning-high-contrast-text: var(--color-status-yellow-50);
853
- --color-feedback-warning-high-contrast-icon: var(--color-base-white);
854
- --color-feedback-warning-high-contrast-border: var(--color-status-yellow-700);
855
- --color-feedback-warning-high-contrast-background: var(--color-status-yellow-700);
856
- --color-feedback-warning-low-text: var(--color-status-yellow-700);
857
- --color-feedback-warning-low-icon: var(--color-status-yellow-700);
858
- --color-feedback-warning-low-border-subtle: var(--color-status-yellow-100);
859
- --color-feedback-warning-low-border: var(--color-status-yellow-700);
860
- --color-feedback-warning-low-background: var(--color-status-yellow-50);
861
- --color-feedback-warning-high-text: var(--color-status-yellow-900);
862
- --color-feedback-warning-high-icon: var(--color-status-yellow-900);
863
- --color-feedback-warning-high-border: var(--color-status-yellow-500);
864
- --color-feedback-warning-high-background: var(--color-status-yellow-500);
865
- --color-feedback-neutral-high-contrast-title: var(--color-base-white);
866
- --color-feedback-neutral-high-contrast-text: var(--color-gray-ocean-50);
867
- --color-feedback-neutral-high-contrast-icon: var(--color-base-white);
868
- --color-feedback-neutral-high-contrast-border: var(--color-gray-ocean-450);
869
- --color-feedback-neutral-high-contrast-background: var(--color-gray-ocean-450);
870
- --color-feedback-neutral-low-text: var(--color-gray-ocean-450);
871
- --color-feedback-neutral-low-icon: var(--color-gray-ocean-450);
872
- --color-feedback-neutral-low-border-subtle: var(--color-gray-ocean-100);
873
- --color-feedback-neutral-low-border: var(--color-gray-ocean-450);
874
- --color-feedback-neutral-low-background: var(--color-gray-ocean-50);
875
- --color-feedback-neutral-high-text: var(--color-gray-ocean-800);
876
- --color-feedback-neutral-high-icon: var(--color-gray-ocean-800);
877
- --color-feedback-neutral-high-border: var(--color-gray-ocean-250);
878
- --color-feedback-neutral-high-background: var(--color-gray-ocean-250);
879
- --color-feedback-error-high-contrast-title: var(--color-base-white);
880
- --color-feedback-error-high-contrast-text: var(--color-status-red-50);
881
- --color-feedback-error-high-contrast-icon: var(--color-base-white);
882
- --color-feedback-error-high-contrast-border: var(--color-status-red-600);
883
- --color-feedback-error-high-contrast-background: var(--color-status-red-600);
884
- --color-feedback-error-low-text: var(--color-status-red-600);
885
- --color-feedback-error-low-icon: var(--color-status-red-600);
886
- --color-feedback-error-low-border-subtle: var(--color-status-red-100);
887
- --color-feedback-error-low-border: var(--color-status-red-600);
888
- --color-feedback-error-low-background: var(--color-status-red-50);
889
- --color-feedback-error-high-text: var(--color-status-red-900);
890
- --color-feedback-error-high-icon: var(--color-status-red-900);
891
- --color-feedback-error-high-border: var(--color-status-red-300);
892
- --color-feedback-error-high-background: var(--color-status-red-300);
893
- --color-feedback-information-high-contrast-title: var(--color-base-white);
894
- --color-feedback-information-high-contrast-text: var(--color-status-blue-50);
895
- --color-feedback-information-high-contrast-icon: var(--color-base-white);
896
- --color-feedback-information-high-contrast-border: var(--color-status-blue-300);
897
- --color-feedback-information-high-contrast-background: var(--color-status-blue-300);
898
- --color-feedback-information-low-text: var(--color-status-blue-500);
899
- --color-feedback-information-low-icon: var(--color-status-blue-500);
900
- --color-feedback-information-low-border-subtle: var(--color-status-blue-100);
901
- --color-feedback-information-low-border: var(--color-status-blue-500);
902
- --color-feedback-information-low-background: var(--color-status-blue-50);
903
- --color-feedback-information-high-text: var(--color-status-blue-800);
904
- --color-feedback-information-high-icon: var(--color-status-blue-800);
905
- --color-feedback-information-high-border: var(--color-status-blue-300);
906
- --color-feedback-information-high-background: var(--color-status-blue-300);
907
- --color-chart-10: var(--color-crimson-500);
908
- --color-chart-9: var(--color-dark-blue-500);
909
- --color-chart-8: var(--color-orange-500);
910
- --color-chart-7: var(--color-yellow-500);
911
- --color-chart-6: var(--color-lime-500);
912
- --color-chart-5: var(--color-light-blue-500);
913
- --color-chart-4: var(--color-turquoise-500);
914
- --color-chart-3: var(--color-petrol-500);
915
- --color-chart-2: var(--color-dark-gray-500);
916
- --color-chart-1: var(--color-amber-500);
917
- --color-brand-900: var(--color-petrol-900);
918
- --color-brand-800: var(--color-petrol-800);
919
- --color-brand-700: var(--color-petrol-700);
920
- --color-brand-600: var(--color-petrol-600);
921
- --color-brand-500: var(--color-petrol-500);
922
- --color-brand-400: var(--color-petrol-400);
923
- --color-brand-300: var(--color-petrol-300);
924
- --color-brand-200: var(--color-petrol-200);
925
- --color-brand-100: var(--color-petrol-100);
926
- --color-brand-50: var(--color-petrol-100);
927
- --color-accent-900: var(--color-orange-900);
928
- --color-accent-800: var(--color-orange-800);
929
- --color-accent-700: var(--color-orange-700);
930
- --color-accent-600: var(--color-orange-600);
931
- --color-accent-500: var(--color-orange-500);
932
- --color-accent-400: var(--color-orange-400);
933
- --color-accent-300: var(--color-orange-300);
934
- --color-accent-200: var(--color-orange-200);
935
- --color-accent-100: var(--color-orange-100);
936
- --color-accent-50: var(--color-orange-50);
937
- --color-content-inverted-low-icon: var(--color-gray-ocean-400);
938
- --color-content-inverted-low-text: var(--color-gray-ocean-400);
939
- --color-content-inverted-medium-icon: var(--color-gray-ocean-300);
940
- --color-content-inverted-medium-text: var(--color-gray-ocean-300);
941
- --color-content-inverted-high-icon: var(--color-gray-ocean-50);
942
- --color-content-inverted-high-text: var(--color-gray-ocean-50);
943
- --color-content-lower-text: var(--color-gray-ocean-250);
944
- --color-content-low-icon: var(--color-gray-ocean-400);
945
- --color-content-low-text: var(--color-gray-ocean-400);
946
- --color-content-low-border: var(--color-gray-ocean-100);
947
- --color-content-medium-icon: var(--color-gray-ocean-550);
948
- --color-content-medium-text: var(--color-gray-ocean-550);
949
- --color-content-medium-border: var(--color-gray-ocean-200);
950
- --color-content-high-icon: var(--color-gray-ocean-800);
951
- --color-content-high-text: var(--color-gray-ocean-800);
952
- --color-content-high-border: var(--color-gray-ocean-300);
953
- --color-level-inverted-05-background: var(--color-gray-ocean-850);
954
- --color-level-inverted-00-background: var(--color-gray-ocean-900);
955
- --color-level-inverted-40-background: var(--color-gray-ocean-500);
956
- --color-level-inverted-30-background: var(--color-gray-ocean-600);
957
- --color-level-inverted-20-background: var(--color-gray-ocean-700);
958
- --color-level-inverted-15-background: var(--color-gray-ocean-750);
959
- --color-level-inverted-10-background: var(--color-gray-ocean-800);
960
- --color-level-05-background: var(--color-gray-ocean-25);
961
- --color-level-00-background: var(--color-gray-ocean-00);
962
- --color-level-40-background: var(--color-gray-ocean-00);
963
- --color-level-30-background: var(--color-gray-ocean-50);
964
- --color-level-20-background: var(--color-gray-ocean-00);
965
- --color-level-15-background: var(--color-gray-ocean-75);
966
- --color-level-10-background: var(--color-gray-ocean-50);
967
- --color-interaction-link-inverted-text-visited: var(--color-petrol-700);
968
- --color-interaction-link-inverted-text-hover: var(--color-petrol-500);
969
- --color-interaction-link-inverted-icon-visited: var(--color-petrol-700);
970
- --color-interaction-link-inverted-icon-hover: var(--color-petrol-500);
971
- --color-interaction-link-low-text-visited: var(--color-petrol-700);
972
- --color-interaction-link-low-text-hover: var(--color-petrol-700);
973
- --color-interaction-link-low-icon-visited: var(--color-petrol-700);
974
- --color-interaction-link-low-icon-hover: var(--color-petrol-700);
975
- --color-interaction-link-high-text-visited: var(--color-petrol-700);
976
- --color-interaction-link-high-text-hover: var(--color-petrol-700);
977
- --color-interaction-link-high-text: var(--color-petrol-600);
978
- --color-interaction-link-high-icon-visited: var(--color-petrol-700);
979
- --color-interaction-link-high-icon-hover: var(--color-petrol-700);
980
- --color-interaction-link-high-icon: var(--color-petrol-600);
981
- --color-interaction-container-branded-low-text-hover: var(--color-petrol-700);
982
- --color-interaction-container-branded-low-text-active: var(--color-petrol-700);
983
- --color-interaction-container-branded-low-text: var(--color-petrol-600);
984
- --color-interaction-container-branded-low-icon-hover: var(--color-petrol-700);
985
- --color-interaction-container-branded-low-icon-active: var(--color-petrol-700);
986
- --color-interaction-container-branded-low-icon: var(--color-petrol-600);
987
- --color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
988
- --color-interaction-container-branded-low-border-active: var(--color-petrol-700);
989
- --color-interaction-container-branded-low-border: var(--color-petrol-600);
990
- --color-interaction-container-branded-low-background-hover: var(--color-petrol-50);
991
- --color-interaction-container-branded-low-background-active: var(--color-petrol-50);
992
- --color-interaction-container-branded-high-text-hover: var(--color-base-white);
993
- --color-interaction-container-branded-high-text-active: var(--color-base-white);
994
- --color-interaction-container-branded-high-text: var(--color-base-white);
995
- --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
996
- --color-interaction-container-branded-high-icon-active: var(--color-base-white);
997
- --color-interaction-container-branded-high-icon: var(--color-base-white);
998
- --color-interaction-container-branded-high-border-hover: var(--color-petrol-700);
999
- --color-interaction-container-branded-high-border-active: var(--color-petrol-700);
1000
- --color-interaction-container-branded-high-border: var(--color-petrol-600);
1001
- --color-interaction-container-branded-high-background-hover: var(--color-petrol-700);
1002
- --color-interaction-container-branded-high-background-active: var(--color-petrol-700);
1003
- --color-interaction-container-branded-high-background: var(--color-petrol-600);
1004
- --color-interaction-container-neutral-text-active: var(--color-petrol-700);
1005
- --color-interaction-container-neutral-icon-active: var(--color-petrol-700);
1006
- --color-interaction-container-neutral-border-active: var(--color-petrol-700);
1007
- --color-interaction-container-neutral-background-active: var(--color-petrol-50);
1008
- --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
1009
- --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
1010
- --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
1011
- --components-toggle-background-hover-checked: var(--color-interaction-container-branded-high-background-hover);
1012
- --components-toggle-background-default-checked: var(--color-interaction-container-branded-high-background);
1013
- --components-toggle-border-hover-checked: var(--color-interaction-container-branded-high-border-hover);
1014
- --components-toggle-border-default-checked: var(--color-interaction-container-branded-high-border);
1015
- --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
1016
- --components-tooltip-text: var(--color-content-inverted-high-text);
1017
- --components-splitter-handle-background-hover: var(--color-interaction-container-branded-high-background-active);
1018
- --components-splitter-handle-background-active: var(--color-interaction-container-branded-high-background-active);
1019
- --components-splitter-handle-background: var(--color-content-low-border);
1020
- --components-splitter-line-background-hover: var(--color-interaction-container-branded-low-background-active);
1021
- --components-splitter-line-background-active: var(--color-interaction-container-branded-high-background-active);
1022
- --components-splitter-line-background: var(--color-level-10-background);
1023
- --components-splitter-old-border-active: var(--color-interaction-container-neutral-border-active);
1024
- --components-splitter-old-background-active: var(--color-interaction-container-neutral-background-active);
1025
- --components-slider-handler-border-focus: var(--components-form-field-background-checked);
1026
- --components-slider-handler-background-focus: var(--components-form-field-background-checked);
1027
- --components-slider-track-background: var(--color-content-low-border);
1028
- --components-sidebar-border: var(--color-content-low-border);
1029
- --components-sidebar-divider: var(--color-content-low-border);
1030
- --components-sidebar-background: var(--color-level-00-background);
1031
- --components-popover-supporting-text: var(--color-content-low-text);
1032
- --components-popover-text: var(--color-content-medium-text);
1033
- --components-popover-border: var(--color-content-low-border);
1034
- --components-notification-neutral-icon: var(--color-feedback-neutral-low-icon);
1035
- --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
1036
- --components-notification-neutral-background: var(--color-level-00-background);
1037
- --components-notification-success-icon: var(--color-feedback-success-low-icon);
1038
- --components-notification-success-border: var(--color-feedback-success-low-border);
1039
- --components-notification-success-background: var(--color-level-00-background);
1040
- --components-notification-error-icon: var(--color-feedback-error-low-icon);
1041
- --components-notification-error-border: var(--color-feedback-error-low-border);
1042
- --components-notification-error-background: var(--color-level-00-background);
1043
- --components-notification-warning-icon: var(--color-feedback-warning-low-icon);
1044
- --components-notification-warning-border: var(--color-feedback-warning-low-border);
1045
- --components-notification-warning-background: var(--color-level-00-background);
1046
- --components-notification-content-title: var(--color-content-high-text);
1047
- --components-notification-content-timestamp: var(--color-content-medium-text);
1048
- --components-notification-content-description: var(--color-content-medium-text);
1049
- --components-notification-information-border: var(--color-feedback-information-low-border);
1050
- --components-notification-information-icon: var(--color-feedback-information-low-icon);
1051
- --components-notification-information-background: var(--color-level-00-background);
1052
- --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
1053
- --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
1054
- --components-menu-contextual-border: var(--color-content-low-border);
1055
- --components-menu-contextual-background: var(--color-level-00-background);
1056
- --components-list-dropdown-border: var(--color-content-low-border);
1057
- --components-list-dropdown-separator: var(--color-content-low-border);
1058
- --components-list-dropdown-group-title-content: var(--color-content-medium-text);
1059
- --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
1060
- --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
1061
- --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
1062
- --components-list-dropdown-item-description-default: var(--color-content-low-text);
1063
- --components-list-dropdown-item-label-active: var(--color-content-low-text);
1064
- --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
1065
- --components-list-dropdown-item-label-hover: var(--color-content-high-text);
1066
- --components-list-dropdown-item-label-default: var(--color-content-medium-text);
1067
- --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
1068
- --components-list-dropdown-header-background: var(--color-level-10-background);
1069
- --components-list-dropdown-background: var(--color-level-00-background);
1070
- --components-list-select-hr: var(--color-content-low-border);
1071
- --components-list-select-border: var(--color-content-low-border);
1072
- --components-list-select-optgroup-content: var(--color-content-lower-text);
1073
- --components-list-select-option-background-active: var(--color-interaction-container-neutral-background-active);
1074
- --components-list-select-option-content-active: var(--color-interaction-container-neutral-text-active);
1075
- --components-list-select-option-content-disabled: var(--color-content-lower-text);
1076
- --components-list-select-option-content-hover: var(--color-content-high-text);
1077
- --components-list-select-option-content-default: var(--color-content-medium-text);
1078
- --components-list-select-background: var(--color-level-00-background);
1079
- --components-calendar-background: var(--color-level-00-background);
1080
- --components-calendar-cell-text-today: var(--color-content-high-text);
1081
- --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
1082
- --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
1083
- --components-calendar-cell-text-selected: var(--color-interaction-container-branded-high-text-active);
1084
- --components-calendar-cell-dot-hover: var(--color-interaction-container-branded-high-icon-hover);
1085
- --components-calendar-cell-dot-selected: var(--color-interaction-container-branded-high-icon-active);
1086
- --components-calendar-cell-dot: var(--color-content-high-icon);
1087
- --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
1088
- --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
1089
- --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
1090
- --components-calendar-weeks-text-hover: var(--color-content-high-text);
1091
- --components-calendar-weeks-text: var(--color-content-high-text);
1092
- --components-calendar-weeks-background-hover: var(--color-level-15-background);
1093
- --components-calendar-weeks-background: var(--color-level-10-background);
1094
- --components-calendar-header-text: var(--color-content-high-text);
1095
- --components-calendar-border: var(--color-content-low-border);
1096
- --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
1097
- --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
1098
- --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
1099
- --components-datagrid-expander-expander-background: var(--color-level-10-background);
1100
- --components-datagrid-expander-border: var(--color-content-low-border);
1101
- --components-datagrid-expander-content-background: var(--color-level-00-background);
1102
- --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
1103
- --components-datagrid-body-subtext: var(--color-content-low-text);
1104
- --components-datagrid-body-text: var(--color-content-medium-text);
1105
- --components-datagrid-body-border: var(--color-content-low-border);
1106
- --components-datagrid-header-text: var(--color-content-high-text);
1107
- --components-datagrid-header-border: var(--color-content-medium-border);
1108
- --components-buttongroup-low-border: var(--color-interaction-container-branded-low-border);
1109
- --components-buttongroup-medium-border: var(--color-interaction-container-branded-low-border);
1110
- --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
1111
- --components-buttongroup-high-border: var(--color-interaction-container-branded-high-border);
1112
- --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
1113
- --components-avatar-content-10: var(--color-rainbow-10-icon);
1114
- --components-avatar-content-9: var(--color-rainbow-9-text);
1115
- --components-avatar-content-8: var(--color-rainbow-8-text);
1116
- --components-avatar-content-7: var(--color-rainbow-7-text);
1117
- --components-avatar-content-6: var(--color-rainbow-6-icon);
1118
- --components-avatar-content-5: var(--color-rainbow-5-icon);
1119
- --components-avatar-content-4: var(--color-rainbow-4-icon);
1120
- --components-avatar-content-3: var(--color-rainbow-3-icon);
1121
- --components-avatar-content-2: var(--color-rainbow-2-icon);
1122
- --components-avatar-content-1: var(--color-rainbow-1-icon);
1123
- --components-avatar-border-10: var(--color-rainbow-10-border);
1124
- --components-avatar-border-9: var(--color-rainbow-9-border);
1125
- --components-avatar-border-8: var(--color-rainbow-8-border);
1126
- --components-avatar-border-7: var(--color-rainbow-7-border);
1127
- --components-avatar-border-6: var(--color-rainbow-6-border);
1128
- --components-avatar-border-5: var(--color-rainbow-5-border);
1129
- --components-avatar-border-4: var(--color-rainbow-4-border);
1130
- --components-avatar-border-3: var(--color-rainbow-3-border);
1131
- --components-avatar-border-2: var(--color-rainbow-2-border);
1132
- --components-avatar-border-1: var(--color-rainbow-1-border);
1133
- --components-avatar-background-10: var(--color-rainbow-10-background);
1134
- --components-avatar-background-9: var(--color-rainbow-9-background);
1135
- --components-avatar-background-8: var(--color-rainbow-8-background);
1136
- --components-avatar-background-7: var(--color-rainbow-7-background);
1137
- --components-avatar-background-6: var(--color-rainbow-6-background);
1138
- --components-avatar-background-5: var(--color-rainbow-5-background);
1139
- --components-avatar-background-4: var(--color-rainbow-4-background);
1140
- --components-avatar-background-3: var(--color-rainbow-3-background);
1141
- --components-avatar-background-2: var(--color-rainbow-2-background);
1142
- --components-avatar-background-1: var(--color-rainbow-1-background);
1143
- --components-alert-neutral-icon: var(--color-feedback-neutral-low-icon);
1144
- --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
1145
- --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
1146
- --components-alert-success-icon: var(--color-feedback-success-low-icon);
1147
- --components-alert-success-border: var(--color-feedback-success-low-border);
1148
- --components-alert-success-background: var(--color-feedback-success-low-background);
1149
- --components-alert-error-icon: var(--color-feedback-error-low-icon);
1150
- --components-alert-error-border: var(--color-feedback-error-low-border);
1151
- --components-alert-error-background: var(--color-feedback-error-low-background);
1152
- --components-alert-warning-icon: var(--color-feedback-warning-low-icon);
1153
- --components-alert-warning-border: var(--color-feedback-warning-low-border);
1154
- --components-alert-warning-background: var(--color-feedback-warning-low-background);
1155
- --components-alert-content-title: var(--color-content-high-text);
1156
- --components-alert-content-description: var(--color-content-medium-text);
1157
- --components-alert-information-border: var(--color-feedback-information-low-border);
1158
- --components-alert-information-icon: var(--color-feedback-information-low-icon);
1159
- --components-alert-information-background: var(--color-feedback-information-low-background);
1160
- --components-button-destructive-lower-border-hover: var(--color-dont-use-border);
1161
- --components-button-destructive-lower-border: var(--color-dont-use-border);
1162
- --components-button-destructive-lower-icon-hover: var(--color-dont-use-content);
1163
- --components-button-destructive-lower-icon: var(--color-dont-use-content);
1164
- --components-button-destructive-lower-text-hover: var(--color-dont-use-content);
1165
- --components-button-destructive-lower-text: var(--color-dont-use-content);
1166
- --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
1167
- --components-button-destructive-lower-background: var(--color-dont-use-background);
1168
- --components-form-shape-foreground-disabled-error: var(--color-feedback-error-low-icon);
1169
- --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
1170
- --components-form-shape-border-success: var(--color-feedback-success-low-border);
1171
- --components-form-shape-border-error: var(--color-feedback-error-low-border);
1172
- --components-form-shape-border-focus: var(--color-focus-brand);
1173
- --components-form-shape-border-hover: var(--color-content-high-border);
1174
- --components-form-shape-border-default: var(--color-content-medium-border);
1175
- --components-form-shape-background-error: var(--color-feedback-error-low-icon);
1176
- --components-form-field-icon-success: var(--color-feedback-success-low-icon);
1177
- --components-form-field-icon-error: var(--color-feedback-error-low-icon);
1178
- --components-form-field-icon-disabled: var(--color-content-medium-border);
1179
- --components-form-field-icon-default: var(--color-content-low-text);
1180
- --components-form-field-content-text: var(--color-content-high-text);
1181
- --components-form-field-content-placeholder: var(--color-content-low-text);
1182
- --components-form-field-border-readonly: var(--color-content-low-border);
1183
- --components-form-field-border-success: var(--color-feedback-success-low-border);
1184
- --components-form-field-border-error: var(--color-feedback-error-low-border);
1185
- --components-form-field-border-focus: var(--color-focus-brand);
1186
- --components-form-field-border-hover: var(--color-content-high-border);
1187
- --components-form-field-border-disabled: var(--color-content-medium-border);
1188
- --components-form-field-border-default: var(--color-content-medium-border);
1189
- --components-form-field-background-readonly: var(--color-level-05-background);
1190
- --components-form-field-background-error: var(--color-feedback-error-low-border);
1191
- --components-form-field-background-disabled: var(--color-level-10-background);
1192
- --components-form-field-background-hover: var(--color-level-05-background);
1193
- --components-form-field-background-focus: var(--color-level-00-background);
1194
- --components-form-field-background-default: var(--color-level-00-background);
1195
- --components-form-text-description-error: var(--color-feedback-error-low-icon);
1196
- --components-form-text-description-default: var(--color-content-low-text);
1197
- --components-form-text-label-disabled: var(--color-content-medium-text);
1198
- --components-form-text-label-default: var(--color-content-high-text);
1199
- --components-form-text-info-icon: var(--color-content-low-text);
1200
- --components-form-text-required: var(--color-feedback-error-low-icon);
1201
- --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
1202
- --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
1203
- --components-button-medium-text: var(--color-interaction-container-branded-low-text);
1204
- --components-button-medium-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
1205
- --components-button-medium-icon-active: var(--color-interaction-container-branded-low-icon-active);
1206
- --components-button-medium-icon: var(--color-interaction-container-branded-low-icon);
1207
- --components-button-medium-border-hover: var(--color-interaction-container-branded-low-border-hover);
1208
- --components-button-medium-border-active: var(--color-interaction-container-branded-low-border-hover);
1209
- --components-button-medium-border: var(--color-interaction-container-branded-low-border);
1210
- --components-button-medium-background-hover: var(--color-interaction-container-branded-low-background-hover);
1211
- --components-button-medium-background-active: var(--color-interaction-container-branded-low-background-active);
1212
- --components-button-lower-text-active: var(--color-interaction-container-neutral-text-active);
1213
- --components-button-lower-icon-active: var(--color-interaction-container-neutral-icon-active);
1214
- --components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
1215
- --components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
1216
- --components-button-low-text-active: var(--color-interaction-container-branded-low-text-active);
1217
- --components-button-low-text: var(--color-interaction-container-branded-low-text);
1218
- --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
1219
- --components-button-low-icon-active: var(--color-interaction-container-branded-low-icon-active);
1220
- --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
1221
- --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
1222
- --components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
1223
- --components-button-high-icon-hover: var(--color-interaction-container-branded-high-icon-hover);
1224
- --components-button-high-icon-active: var(--color-interaction-container-branded-high-icon-active);
1225
- --components-button-high-icon: var(--color-interaction-container-branded-high-icon);
1226
- --components-button-high-text-hover: var(--color-interaction-container-branded-high-text-hover);
1227
- --components-button-high-text-active: var(--color-interaction-container-branded-high-text-active);
1228
- --components-button-high-text: var(--color-interaction-container-branded-high-text);
1229
- --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
1230
- --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
1231
- --components-button-high-background: var(--color-interaction-container-branded-high-background);
1232
- --color-focus-success: var(--color-feedback-success-low-border);
1233
- --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
1234
- --color-focus-destructive: var(--color-feedback-error-high-border);
1235
- --color-focus-background-inverted: var(--color-level-inverted-00-background);
1236
- --color-focus-background: var(--color-level-00-background);
1237
- --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
1238
- --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
1239
- --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
1240
- --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
1241
- --color-interaction-link-low-text-disabled: var(--color-content-low-text);
1242
- --color-interaction-link-low-text: var(--color-content-high-text);
1243
- --color-interaction-link-low-icon-disabled: var(--color-content-low-icon);
1244
- --color-interaction-link-low-icon: var(--color-content-high-text);
1245
- --color-interaction-link-high-text-disabled: var(--color-content-low-text);
1246
- --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
1247
- --color-interaction-container-branded-low-background: var(--color-level-00-background);
1248
- --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
1249
- --color-interaction-container-neutral-text: var(--color-content-low-text);
1250
- --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
1251
- --color-interaction-container-neutral-icon: var(--color-content-low-text);
1252
- --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
1253
- --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
1254
- --color-interaction-container-neutral-background-hover: var(--color-level-10-background);
1255
- --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
1256
- --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
1257
- --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
1258
- --components-toggle-shape-disabled-checked: var(--color-interaction-container-neutral-icon);
1259
- --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
1260
- --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
1261
- --components-toggle-background-default: var(--color-interaction-container-branded-low-background);
1262
- --components-splitter-old-border-hover: var(--color-interaction-container-neutral-border-hover);
1263
- --components-splitter-old-background-hover: var(--color-interaction-container-neutral-background-hover);
1264
- --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
1265
- --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
1266
- --components-slider-handler-border-error: var(--components-form-field-background-error);
1267
- --components-slider-handler-border-hover: var(--components-form-field-background-hover);
1268
- --components-slider-handler-border-default: var(--components-form-field-background-default);
1269
- --components-slider-handler-background-readonly: var(--components-form-field-background-readonly);
1270
- --components-slider-handler-background-disabled: var(--components-form-field-background-disabled);
1271
- --components-slider-handler-background-error: var(--components-form-field-background-error);
1272
- --components-slider-handler-background-hover: var(--components-form-field-background-hover);
1273
- --components-slider-handler-background-default: var(--components-form-field-background-default);
1274
- --components-slider-track-filled-readonly: var(--components-form-field-border-readonly);
1275
- --components-slider-track-filled-disabled: var(--components-form-field-border-disabled);
1276
- --components-slider-track-filled-error: var(--components-form-field-border-error);
1277
- --components-slider-track-filled-focus: var(--components-form-field-border-focus);
1278
- --components-slider-track-filled-hover: var(--components-form-field-border-hover);
1279
- --components-slider-track-filled-default: var(--components-form-field-border-default);
1280
- --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
1281
- --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1282
- --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1283
- --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1284
- --components-list-select-option-background-hover: var(--color-interaction-container-neutral-background-hover);
1285
- --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
1286
- --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
1287
- --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
1288
- --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
1289
- --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
1290
- --components-field-time-text-default: var(--color-interaction-container-neutral-text);
1291
- --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
1292
- --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
1293
- --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
1294
- --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
1295
- --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
1296
- --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
1297
- --components-breadcrumb-text-current: var(--color-interaction-link-high-text-disabled);
1298
- --components-breadcrumb-text: var(--color-interaction-link-low-text);
1299
- --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
1300
- --components-button-medium-background: var(--color-interaction-container-branded-low-background);
1301
- --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
1302
- --components-button-lower-text: var(--color-interaction-container-neutral-text);
1303
- --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
1304
- --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
1305
- --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
1306
- }
1307
-
1308
- /**
1309
- * Do not edit directly, this file was auto-generated.
1310
- */
1311
-
1312
- :root {
1313
- --letter-spacing-heading-xl: -1.0000px;
1314
- --letter-spacing-heading-lg: -0.7500px;
1315
- --letter-spacing-heading-md: -0.5000px;
1316
- --letter-spacing-heading-sm: -0.2500px;
1317
- --letter-spacing-heading-xs: 0.0000px;
1318
- --spacing-3-5: 14.0000px;
1319
- --spacing-2-5: 10.0000px;
1320
- --spacing-1-5: 6.0000px;
1321
- --spacing-0-5: 2.0000px;
1322
- --spacing-px: 1.0000px;
1323
- --spacing-96: 384.0000px;
1324
- --spacing-80: 320.0000px;
1325
- --spacing-72: 288.0000px;
1326
- --spacing-64: 256.0000px;
1327
- --spacing-60: 240.0000px;
1328
- --spacing-56: 224.0000px;
1329
- --spacing-52: 208.0000px;
1330
- --spacing-48: 192.0000px;
1331
- --spacing-44: 176.0000px;
1332
- --spacing-40: 160.0000px;
1333
- --spacing-36: 144.0000px;
1334
- --spacing-32: 128.0000px;
1335
- --spacing-28: 112.0000px;
1336
- --spacing-24: 96.0000px;
1337
- --spacing-20: 80.0000px;
1338
- --spacing-16: 64.0000px;
1339
- --spacing-14: 56.0000px;
1340
- --spacing-12: 48.0000px;
1341
- --spacing-11: 44.0000px;
1342
- --spacing-10: 40.0000px;
1343
- --spacing-9: 36.0000px;
1344
- --spacing-8: 32.0000px;
1345
- --spacing-7: 28.0000px;
1346
- --spacing-6: 24.0000px;
1347
- --spacing-5: 20.0000px;
1348
- --spacing-4: 16.0000px;
1349
- --spacing-3: 12.0000px;
1350
- --spacing-2: 8.0000px;
1351
- --spacing-1: 4.0000px;
1352
- --spacing-0: 0.0000px;
1353
- --radius-rounded-full: 9999.0000px;
1354
- --radius-rounded-3xl: 24.0000px;
1355
- --radius-rounded-2xl: 16.0000px;
1356
- --radius-rounded-xl: 12.0000px;
1357
- --radius-rounded-lg: 8.0000px;
1358
- --radius-rounded-md: 6.0000px;
1359
- --radius-rounded: 4.0000px;
1360
- --radius-rounded-sm: 2.0000px;
1361
- --radius-rounded-none: 0.0000px;
1362
- --line-height-9xl: 128.0000px;
1363
- --line-height-8xl: 96.0000px;
1364
- --line-height-7xl: 72.0000px;
1365
- --line-height-6xl: 60.0000px;
1366
- --line-height-5xl: 48.0000px;
1367
- --line-height-4xl: 40.0000px;
1368
- --line-height-3xl: 36.0000px;
1369
- --line-height-2xl: 32.0000px;
1370
- --line-height-xl: 30.0000px;
1371
- --line-height-lg: 28.0000px;
1372
- --line-height-base: 24.0000px;
1373
- --line-height-sm: 20.0000px;
1374
- --line-height-xs: 16.0000px;
1375
- --leading-loose: 2.0000px;
1376
- --leading-relaxed: 1.6250px;
1377
- --leading-normal: 1.5000px;
1378
- --leading-snug: 1.3750px;
1379
- --leading-tight: 1.2500px;
1380
- --leading-none: 1.0000px;
1381
- --leading-px-10: 40.0000px;
1382
- --leading-px-9: 36.0000px;
1383
- --leading-px-8: 32.0000px;
1384
- --leading-px-7: 28.0000px;
1385
- --leading-px-6: 24.0000px;
1386
- --leading-px-5: 20.0000px;
1387
- --leading-px-4: 16.0000px;
1388
- --leading-px-3: 12.0000px;
1389
- --font-weight-high-emphasis-700: Bold;
1390
- --font-weight-medium-emphasis-500: Medium;
1391
- --font-weight-low-emphasis-400: Regular;
1392
- --font-weight-low-emphasis: 400;
1393
- --font-weight-medium-emphasis: 500;
1394
- --font-weight-high-emphasis: 700;
1395
- --font-size-9xl: 128.0000px;
1396
- --font-size-8xl: 96.0000px;
1397
- --font-size-7xl: 72.0000px;
1398
- --font-size-6xl: 60.0000px;
1399
- --font-size-5xl: 48.0000px;
1400
- --font-size-4xl: 36.0000px;
1401
- --font-size-3xl: 30.0000px;
1402
- --font-size-2xl: 24.0000px;
1403
- --font-size-xl: 20.0000px;
1404
- --font-size-lg: 18.0000px;
1405
- --font-size-md: 16.0000px;
1406
- --font-size-sm: 14.0000px;
1407
- --font-size-xs: 12.0000px;
1408
- --font-family-fallback: Arial;
1409
- --font-family-mono: TT Norms Pro Mono;
1410
- --font-family-default: TT Norms Pro;
1411
- --color-yellow-900: #4d3a00;
1412
- --color-yellow-800: #795c00;
1413
- --color-yellow-700: #a67d00;
1414
- --color-yellow-600: #d29f00;
1415
- --color-yellow-500: #ffc100;
1416
- --color-yellow-400: #ffcc2d;
1417
- --color-yellow-300: #ffd759;
1418
- --color-yellow-200: #ffe286;
1419
- --color-yellow-100: #ffecb3;
1420
- --color-yellow-50: #fff7df;
1421
- --color-turquoise-900: #1c2b28;
1422
- --color-turquoise-800: #32504c;
1423
- --color-turquoise-700: #456e68;
1424
- --color-turquoise-600: #578b84;
1425
- --color-turquoise-500: #6aa9a0;
1426
- --color-turquoise-400: #84b8b1;
1427
- --color-turquoise-300: #9ec7c1;
1428
- --color-turquoise-200: #b8d6d2;
1429
- --color-turquoise-100: #d2e5e3;
1430
- --color-turquoise-50: #ecf4f3;
1431
- --color-red-900: #3d0909;
1432
- --color-red-800: #610e0e;
1433
- --color-red-700: #851313;
1434
- --color-red-600: #a81818;
1435
- --color-red-500: #cc1d1d;
1436
- --color-red-400: #d54545;
1437
- --color-red-300: #de6c6c;
1438
- --color-red-200: #e79494;
1439
- --color-red-100: #f0bbbb;
1440
- --color-red-50: #f9e3e3;
1441
- --color-petrol-900: #0b292e;
1442
- --color-petrol-800: #124148;
1443
- --color-petrol-700: #185963;
1444
- --color-petrol-600: #1f717d;
1445
- --color-petrol-500: #258998;
1446
- --color-petrol-400: #4b9eaa;
1447
- --color-petrol-300: #71b2bc;
1448
- --color-petrol-200: #97c7ce;
1449
- --color-petrol-100: #bedce0;
1450
- --color-petrol-50: #e4f0f2;
1451
- --color-orange-950: #371408;
1452
- --color-orange-900: #45190a;
1453
- --color-orange-800: #6e280f;
1454
- --color-orange-700: #963715;
1455
- --color-orange-600: #bf451a;
1456
- --color-orange-500: #e75420;
1457
- --color-orange-400: #eb7247;
1458
- --color-orange-300: #ef906e;
1459
- --color-orange-200: #f4ae95;
1460
- --color-orange-100: #f8ccbc;
1461
- --color-orange-50: #fceae3;
1462
- --color-status-yellow-900: #302300;
1463
- --color-status-yellow-800: #4d3701;
1464
- --color-status-yellow-700: #805c00;
1465
- --color-status-yellow-600: #b58200;
1466
- --color-status-yellow-500: #e0a917;
1467
- --color-status-yellow-400: #fac50d;
1468
- --color-status-yellow-300: #f7d14c;
1469
- --color-status-yellow-200: #ffe286;
1470
- --color-status-yellow-100: #fae49d;
1471
- --color-status-yellow-50: #fff7df;
1472
- --color-status-red-900: #380101;
1473
- --color-status-red-800: #530101;
1474
- --color-status-red-700: #911515;
1475
- --color-status-red-600: #bb1919;
1476
- --color-status-red-500: #da2424;
1477
- --color-status-red-400: #ff3d3d;
1478
- --color-status-red-300: #ff6161;
1479
- --color-status-red-200: #ff8f8f;
1480
- --color-status-red-100: #f5c4c4;
1481
- --color-status-red-50: #ffeded;
1482
- --color-status-green-900: #002302;
1483
- --color-status-green-800: #003603;
1484
- --color-status-green-700: #035707;
1485
- --color-status-green-600: #008207;
1486
- --color-status-green-500: #34ae3b;
1487
- --color-status-green-400: #45d24d;
1488
- --color-status-green-300: #6bde71;
1489
- --color-status-green-200: #9ef4a3;
1490
- --color-status-green-100: #c8facb;
1491
- --color-status-green-50: #eafeeb;
1492
- --color-status-blue-900: #001c37;
1493
- --color-status-blue-800: #09285c;
1494
- --color-status-blue-700: #113a80;
1495
- --color-status-blue-600: #1c4d9e;
1496
- --color-status-blue-500: #2660c2;
1497
- --color-status-blue-400: #3883ff;
1498
- --color-status-blue-300: #659fff;
1499
- --color-status-blue-200: #a8c9ff;
1500
- --color-status-blue-100: #c7dcff;
1501
- --color-status-blue-50: #f0f6ff;
1502
- --color-light-blue-500: #9ac3ce;
1503
- --color-lime-900: #2a330e;
1504
- --color-lime-800: #435017;
1505
- --color-lime-700: #5c6e1f;
1506
- --color-lime-600: #748b28;
1507
- --color-lime-500: #8da930;
1508
- --color-lime-400: #a1b854;
1509
- --color-lime-300: #b5c778;
1510
- --color-lime-200: #c9d69d;
1511
- --color-lime-100: #dde5c1;
1512
- --color-lime-50: #f1f4e5;
1513
- --color-green-900: #062908;
1514
- --color-green-800: #09400c;
1515
- --color-green-700: #0c5810;
1516
- --color-green-600: #106f15;
1517
- --color-green-500: #138719;
1518
- --color-green-400: #3c9c41;
1519
- --color-green-300: #66b16a;
1520
- --color-green-200: #8fc692;
1521
- --color-green-100: #b8dbba;
1522
- --color-green-50: #e2f0e2;
1523
- --color-gray-spark-00: #ffffff;
1524
- --color-gray-spark-900: #0e0e0e;
1525
- --color-gray-spark-850: #161616;
1526
- --color-gray-spark-800: #1d1d1d;
1527
- --color-gray-spark-750: #252525;
1528
- --color-gray-spark-700: #2b2b2b;
1529
- --color-gray-spark-650: #313131;
1530
- --color-gray-spark-600: #3a3a3a;
1531
- --color-gray-spark-550: #414141;
1532
- --color-gray-spark-500: #484848;
1533
- --color-gray-spark-450: #4f4f4f;
1534
- --color-gray-spark-400: #6d6d6d;
1535
- --color-gray-spark-350: #808080;
1536
- --color-gray-spark-300: #919191;
1537
- --color-gray-spark-250: #a9a9a9;
1538
- --color-gray-spark-200: #bfbfbf;
1539
- --color-gray-spark-150: #cccccc;
1540
- --color-gray-spark-100: #e3e3e3;
1541
- --color-gray-spark-75: #ededed;
1542
- --color-gray-spark-50: #f6f6f6;
1543
- --color-gray-spark-25: #fbfbfb;
1544
- --color-gray-ocean-00: #ffffff;
1545
- --color-gray-ocean-900: #0b0f11;
1546
- --color-gray-ocean-850: #11171a;
1547
- --color-gray-ocean-800: #171f22;
1548
- --color-gray-ocean-750: #1e272b;
1549
- --color-gray-ocean-700: #222e33;
1550
- --color-gray-ocean-650: #27353b;
1551
- --color-gray-ocean-600: #2e3e44;
1552
- --color-gray-ocean-550: #34464d;
1553
- --color-gray-ocean-500: #394d55;
1554
- --color-gray-ocean-450: #3f555e;
1555
- --color-gray-ocean-400: #617177;
1556
- --color-gray-ocean-350: #72858c;
1557
- --color-gray-ocean-300: #889499;
1558
- --color-gray-ocean-250: #9fadb2;
1559
- --color-gray-ocean-200: #bac1c4;
1560
- --color-gray-ocean-150: #c6ced1;
1561
- --color-gray-ocean-100: #e1e4e6;
1562
- --color-gray-ocean-75: #eaeef0;
1563
- --color-gray-ocean-50: #f5f6f7;
1564
- --color-gray-ocean-25: #fafbfb;
1565
- --color-dark-gray-500: #394d55;
1566
- --color-dark-blue-500: #447583;
1567
- --color-crimson-900: #2e0010;
1568
- --color-crimson-800: #490019;
1569
- --color-crimson-700: #630022;
1570
- --color-crimson-600: #7e002c;
1571
- --color-crimson-500: #990035;
1572
- --color-crimson-400: #ab2d58;
1573
- --color-crimson-300: #bd597c;
1574
- --color-crimson-200: #cf869f;
1575
- --color-crimson-100: #e0b3c2;
1576
- --color-crimson-50: #f7e9ee;
1577
- --color-amber-900: #432306;
1578
- --color-amber-800: #723d0c;
1579
- --color-amber-700: #9c5311;
1580
- --color-amber-600: #c66a15;
1581
- --color-amber-500: #f0801a;
1582
- --color-amber-400: #f39642;
1583
- --color-amber-300: #f5ac6a;
1584
- --color-amber-200: #f8c392;
1585
- --color-amber-100: #fbd9ba;
1586
- --color-amber-50: #fdefe2;
1587
- --color-base-black: #000000;
1588
- --color-base-white: #ffffff;
1589
- }
1590
-
1591
- /**
1592
- * Do not edit directly, this file was auto-generated.
1593
- */
1594
-
1595
- :root {
1596
- --global-typography-legend-font-style: uppercase;
1597
- --global-typography-label-font-style: normal;
1598
- --global-typography-small-font-style: normal;
1599
- --global-typography-p-font-style: normal;
1600
- --global-typography-h5-font-style: normal;
1601
- --global-typography-h6-font-style: normal;
1602
- --global-typography-h4-font-style: normal;
1603
- --global-typography-h3-font-style: normal;
1604
- --global-typography-h2-font-style: normal;
1605
- --global-typography-h1-font-style: normal;
1606
- --tooltip-font-weight: 500;
1607
- --togglegroup-lg-iconbutton-padding-y: 9.0000px;
1608
- --togglegroup-lg-button-radius: 5.0000px;
1609
- --togglegroup-lg-button-padding-y: 7.0000px;
1610
- --togglegroup-lg-padding: 3.0000px;
1611
- --togglegroup-md-iconbutton-padding-y: 7.0000px;
1612
- --togglegroup-md-button-radius: 3.0000px;
1613
- --togglegroup-md-button-padding-y: 5.0000px;
1614
- --togglegroup-md-padding: 3.0000px;
1615
- --togglegroup-sm-iconbutton-padding-y: 5.0000px;
1616
- --togglegroup-sm-button-radius: 2.0000px;
1617
- --togglegroup-sm-button-padding-y: 3.0000px;
1618
- --togglegroup-sm-padding: 3.0000px;
1619
- --togglegroup-xs-iconbutton-padding-y: 3.0000px;
1620
- --togglegroup-xs-button-radius: 1.0000px;
1621
- --togglegroup-xs-button-padding-y: 1.0000px;
1622
- --togglegroup-xs-padding: 3.0000px;
1623
- --splitter-old-stroke: 1.0000px;
1624
- --slider-tick-radius: 1.0000px;
1625
- --sidebar-reduced-width: 68.0000px;
1626
- --sidebar-notification-bullet-font-size: 9.0000px;
1627
- --sidebar-width: 312.0000px;
1628
- --popover-shadow-2-x: 0.0000px;
1629
- --popover-shadow-1-blur: 1.0000px;
1630
- --popover-shadow-1-x: 0.0000px;
1631
- --popover-font-weight: 500;
1632
- --navigation-primary-notification-bullet-font-size: 9.0000px;
1633
- --navigation-reduced-max-width: 100.0000px;
1634
- --navigation-width: 312.0000px;
1635
- --menu-contextual-item-font-weight: 500;
1636
- --menu-contextual-divider-padding-bottom: 3.0000px;
1637
- --form-max-width: 480.0000px;
1638
- --form-field-badge-gap: 0.0000px;
1639
- --list-select-hr-padding-y: 3.0000px;
1640
- --list-select-hr-padding-x: 9.0000px;
1641
- --icon-stroke-xl: 1.9000px;
1642
- --icon-stroke-lg: 1.8000px;
1643
- --icon-stroke-md: 1.6000px;
1644
- --icon-stroke-sm: 1.4000px;
1645
- --icon-stroke-xs: 1.2000px;
1646
- --calendar-cell-dot-size: 3.0000px;
1647
- --drawer-size-full-width: 1372.0000px;
1648
- --drawer-size-lg-max-width: 1024.0000px;
1649
- --drawer-size-lg-width: 992.0000px;
1650
- --drawer-size-lg-min-width: 960.0000px;
1651
- --drawer-size-md-max-width: 960.0000px;
1652
- --drawer-size-md-width: 800.0000px;
1653
- --drawer-size-md-min-width: 640.0000px;
1654
- --drawer-size-sm-max-width: 480.0000px;
1655
- --drawer-size-sm-width: 400.0000px;
1656
- --drawer-size-sm-min-width: 320.0000px;
1657
- --drawer-radius-top-right: 0.0000px;
1658
- --drawer-radius-bottom-right: 0.0000px;
1659
- --button-lg-ring-radius: 9.0000px;
1660
- --button-md-ring-radius: 7.0000px;
1661
- --button-sm-ring-radius: 5.0000px;
1662
- --button-xs-ring-radius: 3.0000px;
1663
- --buttongroup-md-button-radius: 3.0000px;
1664
- --buttongroup-md-button-padding-y: 5.0000px;
1665
- --buttongroup-md-padding: 3.0000px;
1666
- --buttongroup-lg-button-radius: 4.0000px;
1667
- --buttongroup-lg-button-padding-y: 6.0000px;
1668
- --buttongroup-lg-padding: 4.0000px;
1669
- --buttongroup-sm-padding: 2.0000px;
1670
- --buttongroup-sm-button-radius: 2.0000px;
1671
- --buttongroup-sm-button-padding-y: 4.0000px;
1672
- --buttongroup-xs-button-radius: 1.0000px;
1673
- --buttongroup-xs-padding: 2.0000px;
1674
- --avatar-xl-font-size: 28.0000px;
1675
- --avatar-lg-font-size: 22.0000px;
1676
- --avatar-md-font-size: 18.0000px;
1677
- --avatar-sm-font-size: 13.0000px;
1678
- --avatar-xs-font-size: 10.0000px;
1679
- --tag-border-radius: var(--radius-rounded);
1680
- --tag-height: var(--spacing-6);
1681
- --tag-padding-x: var(--spacing-1-5);
1682
- --tag-gap-x: var(--spacing-1);
1683
- --splitter-handle-radius: var(--radius-rounded-md);
1684
- --splitter-handle-wide-hover: var(--spacing-2);
1685
- --splitter-handle-wide: var(--spacing-1);
1686
- --splitter-handle-long: var(--spacing-6);
1687
- --splitter-gutter: var(--spacing-6);
1688
- --splitter-line-width: var(--spacing-1);
1689
- --status-indicator-label-line-height: var(--line-height-xs);
1690
- --status-indicator-label-size: var(--font-size-xs);
1691
- --status-indicator-radius: var(--radius-rounded-full);
1692
- --status-indicator-padding-y: var(--spacing-1);
1693
- --status-indicator-padding-x: var(--spacing-1-5);
1694
- --status-indicator-icon-size: var(--spacing-3);
1695
- --status-indicator-width-icon-only: var(--spacing-6);
1696
- --status-indicator-height: var(--spacing-6);
1697
- --status-indicator-gap-x: var(--spacing-0-5);
1698
- --pagination-table-padding-y: var(--spacing-2);
1699
- --pagination-table-padding-x: var(--spacing-3);
1700
- --pagination-table-padding-left: var(--spacing-3);
1701
- --pagination-table-height: var(--spacing-9);
1702
- --pagination-table-gap-x: var(--spacing-8);
1703
- --pagination-table-font-size: var(--font-size-sm);
1704
- --notification-title-line-height: var(--line-height-sm);
1705
- --notification-title-font-weight: var(--font-weight-medium-emphasis);
1706
- --notification-title-font-size: var(--font-size-sm);
1707
- --notification-timestamp-line-height: var(--line-height-sm);
1708
- --notification-timestamp-font-weight: var(--font-weight-low-emphasis);
1709
- --notification-timestamp-font-size: var(--font-size-sm);
1710
- --notification-description-line-height: var(--line-height-sm);
1711
- --notification-description-font-weight: var(--font-weight-medium-emphasis);
1712
- --notification-description-font-size: var(--font-size-sm);
1713
- --notification-border-width-low-emphasis: var(--spacing-px);
1714
- --notification-border-width-high-emphasis: var(--spacing-2);
1715
- --notification-radius: var(--radius-rounded-lg);
1716
- --notification-padding-left: var(--spacing-6);
1717
- --notification-padding-right: var(--spacing-6);
1718
- --notification-padding: var(--spacing-4);
1719
- --notification-gap-y: var(--spacing-1);
1720
- --notification-gap-x-title: var(--spacing-2);
1721
- --notification-gap-x: var(--spacing-3);
1722
- --notification-icon-size: var(--spacing-5);
1723
- --loader-size-xl: var(--spacing-8);
1724
- --loader-size-lg: var(--spacing-7);
1725
- --loader-size-md: var(--spacing-6);
1726
- --loader-size-sm: var(--spacing-5);
1727
- --loader-size-xs: var(--spacing-4);
1728
- --focus-outline-stroke: var(--spacing-0-5);
1729
- --focus-outline-offset: var(--spacing-0-5);
1730
- --focus-field-stroke: var(--spacing-px);
1731
- --dialog-footer-padding-x: var(--spacing-6);
1732
- --dialog-footer-padding-bottom: var(--spacing-6);
1733
- --dialog-footer-padding-top: var(--spacing-2);
1734
- --dialog-footer-gap-y: var(--spacing-3);
1735
- --dialog-body-padding-y: var(--spacing-2);
1736
- --dialog-body-padding-x: var(--spacing-6);
1737
- --dialog-header-padding-x: var(--spacing-6);
1738
- --dialog-header-padding-bottom: var(--spacing-2);
1739
- --dialog-header-padding-top: var(--spacing-6);
1740
- --dialog-header-gap-y: var(--spacing-0);
1741
- --dialog-dismissible-position-right: var(--spacing-3);
1742
- --dialog-dismissible-position-top: var(--spacing-5);
1743
- --datagrid-expanded-padding-left: var(--spacing-14);
1744
- --datagrid-expanded-padding-y: var(--spacing-4);
1745
- --datagrid-expanded-padding-right: var(--spacing-4);
1746
- --datagrid-cell-header-chevron-padding-x: var(--spacing-0);
1747
- --datagrid-cell-header-padding-y: var(--spacing-3);
1748
- --datagrid-cell-header-padding-right: var(--spacing-2);
1749
- --datagrid-cell-header-padding-x: var(--spacing-4);
1750
- --datagrid-cell-body-chevron-padding-x: var(--spacing-0);
1751
- --datagrid-cell-body-actions-padding-y: var(--spacing-1);
1752
- --datagrid-cell-body-padding-y: var(--spacing-2);
1753
- --datagrid-cell-body-actions-gap-x: var(--spacing-2);
1754
- --datagrid-cell-body-avatar-gap-x: var(--spacing-3);
1755
- --datagrid-cell-body-padding-x: var(--spacing-4);
1756
- --breadcrumb-padding-y: var(--spacing-1);
1757
- --badge-radius: var(--radius-rounded-full);
1758
- --badge-padding-y: var(--spacing-1);
1759
- --badge-padding-icon-only-x: var(--spacing-1-5);
1760
- --badge-padding-x: var(--spacing-2);
1761
- --badge-height: var(--spacing-6);
1762
- --badge-gap-icon-only-x: var(--spacing-0-5);
1763
- --badge-gap-x: var(--spacing-1);
1764
- --alert-message-line-height: var(--line-height-sm);
1765
- --alert-message-font-weight: var(--font-weight-low-emphasis);
1766
- --alert-message-font-size: var(--font-size-sm);
1767
- --alert-heading-line-height: var(--line-height-sm);
1768
- --alert-heading-font-weight: var(--font-weight-medium-emphasis);
1769
- --alert-heading-font-size: var(--font-size-sm);
1770
- --alert-radius: var(--radius-rounded-lg);
1771
- --alert-padding-right: var(--spacing-8);
1772
- --alert-padding: var(--spacing-4);
1773
- --alert-gap-y: var(--spacing-1);
1774
- --alert-icon-position-y: var(--spacing-4);
1775
- --alert-icon-position-x: var(--spacing-4);
1776
- --alert-gap-x: var(--spacing-3);
1777
- --alert-icon-size: var(--spacing-5);
1778
- --global-typography-legend-font-weight: var(--font-weight-medium-emphasis);
1779
- --global-typography-legend-line-height: var(--line-height-xs);
1780
- --global-typography-legend-font-size: var(--font-size-xs);
1781
- --global-typography-label-font-weight: var(--font-weight-medium-emphasis);
1782
- --global-typography-label-line-height: var(--line-height-sm);
1783
- --global-typography-label-font-size: var(--font-size-sm);
1784
- --global-typography-small-line-height: var(--line-height-xs);
1785
- --global-typography-small-font-size: var(--font-size-xs);
1786
- --global-typography-p-font-weight: var(--font-weight-low-emphasis);
1787
- --global-typography-p-line-height: var(--line-height-base);
1788
- --global-typography-p-font-size: var(--font-size-md);
1789
- --global-typography-h5-font-weight: var(--font-weight-high-emphasis);
1790
- --global-typography-h5-line-height: var(--line-height-lg);
1791
- --global-typography-h5-font-size: var(--font-size-lg);
1792
- --global-typography-h6-font-weight: var(--font-weight-medium-emphasis);
1793
- --global-typography-h6-line-height: var(--line-height-lg);
1794
- --global-typography-h6-font-size: var(--font-size-lg);
1795
- --global-typography-h4-font-weight: var(--font-weight-high-emphasis);
1796
- --global-typography-h4-line-height: var(--line-height-xl);
1797
- --global-typography-h4-font-size: var(--font-size-xl);
1798
- --global-typography-h3-font-weight: var(--font-weight-high-emphasis);
1799
- --global-typography-h3-line-height: var(--line-height-2xl);
1800
- --global-typography-h3-font-size: var(--font-size-2xl);
1801
- --global-typography-h2-font-weight: var(--font-weight-high-emphasis);
1802
- --global-typography-h2-line-height: var(--line-height-3xl);
1803
- --global-typography-h2-font-size: var(--font-size-3xl);
1804
- --global-typography-h1-font-weight: var(--font-weight-high-emphasis);
1805
- --global-typography-h1-line-height: var(--line-height-4xl);
1806
- --global-typography-h1-font-size: var(--font-size-5xl);
1807
- --tooltip-radius: var(--radius-rounded-md);
1808
- --tooltip-gap-y: var(--spacing-1);
1809
- --tooltip-complex-padding-y: var(--spacing-3);
1810
- --tooltip-padding-y: var(--spacing-3);
1811
- --tooltip-padding-x: var(--spacing-3);
1812
- --tooltip-font-size: var(--font-size-sm);
1813
- --togglegroup-inner-space: var(--spacing-1-5);
1814
- --togglegroup-stroke: var(--spacing-px);
1815
- --togglegroup-lg-height: var(--spacing-12);
1816
- --togglegroup-lg-gap: var(--spacing-0-5);
1817
- --togglegroup-lg-radius: var(--radius-rounded-lg);
1818
- --togglegroup-md-height: var(--spacing-10);
1819
- --togglegroup-md-gap: var(--spacing-0-5);
1820
- --togglegroup-md-radius: var(--radius-rounded-md);
1821
- --togglegroup-sm-height: var(--spacing-8);
1822
- --togglegroup-sm-gap: var(--spacing-0-5);
1823
- --togglegroup-sm-radius: var(--radius-rounded);
1824
- --togglegroup-xs-height: var(--spacing-6);
1825
- --togglegroup-xs-gap: var(--spacing-0-5);
1826
- --togglegroup-xs-radius: var(--radius-rounded-sm);
1827
- --splitter-old-handler-radius: var(--radius-rounded-md);
1828
- --splitter-old-handler-wide: var(--spacing-3);
1829
- --splitter-old-handler-long: var(--spacing-6);
1830
- --slider-track-radius: var(--radius-rounded-sm);
1831
- --slider-track-padding-x: var(--spacing-3);
1832
- --slider-track-height: var(--spacing-1);
1833
- --slider-handler-size-inner: var(--spacing-4);
1834
- --slider-handler-size-max: var(--spacing-6);
1835
- --slider-handler-size-min: var(--spacing-5);
1836
- --slider-handler-stroke: var(--spacing-0-5);
1837
- --slider-tick-width: var(--spacing-0-5);
1838
- --slider-tick-height: var(--spacing-1);
1839
- --sidebar-divider-size: var(--spacing-px);
1840
- --sidebar-sub-item-padding-left: var(--spacing-7);
1841
- --sidebar-item-radius: var(--radius-rounded-md);
1842
- --sidebar-item-padding-y-collapsed: var(--spacing-2-5);
1843
- --sidebar-item-padding-y: var(--spacing-2);
1844
- --sidebar-item-padding-x-collapsed: var(--spacing-2-5);
1845
- --sidebar-item-padding-x: var(--spacing-3);
1846
- --sidebar-item-icon-size: var(--spacing-5);
1847
- --sidebar-item-gap-x: var(--spacing-2);
1848
- --sidebar-item-font-size: var(--font-size-md);
1849
- --sidebar-title-padding-y: var(--spacing-1);
1850
- --sidebar-title-padding-x: var(--spacing-3);
1851
- --sidebar-title-font-size: var(--font-size-sm);
1852
- --sidebar-collapsible-button-position-right: var(--spacing-4);
1853
- --sidebar-collapsible-button-position-top: var(--spacing-8);
1854
- --sidebar-collapsible-button-padding: var(--spacing-2);
1855
- --sidebar-collapsible-button-icon-size: var(--spacing-4);
1856
- --sidebar-section-gap-y-collapsed: var(--spacing-1);
1857
- --sidebar-section-gap-y: var(--spacing-0-5);
1858
- --sidebar-group-gap-y: var(--spacing-1);
1859
- --sidebar-footer-gap-y: var(--spacing-5);
1860
- --sidebar-width-collapsed: var(--spacing-20);
1861
- --sidebar-padding-y: var(--spacing-6);
1862
- --sidebar-padding-x-collapsed: var(--spacing-5);
1863
- --sidebar-padding-x: var(--spacing-6);
1864
- --sidebar-gap-y: var(--spacing-3);
1865
- --sidebar-notification-bullet-size-reduced: var(--spacing-1-5);
1866
- --sidebar-notification-bullet-size: var(--spacing-4);
1867
- --sidebar-notification-bullet-font-weight: var(--font-weight-medium-emphasis);
1868
- --popover-radius: var(--radius-rounded-md);
1869
- --popover-padding-y: var(--spacing-2);
1870
- --popover-padding-x: var(--spacing-2);
1871
- --popover-gap-y: var(--spacing-1);
1872
- --popover-font-size: var(--font-size-sm);
1873
- --popover-shadow-2-opacity: var(--shadow-color-opacity-2);
1874
- --popover-shadow-2-spread: var(--shadow-spread-lg-2);
1875
- --popover-shadow-2-blur: var(--shadow-blur-lg-2);
1876
- --popover-shadow-2-y: var(--shadow-y-axis-lg-2);
1877
- --popover-shadow-1-opacity: var(--shadow-color-opacity-3);
1878
- --popover-shadow-1-spread: var(--shadow-spread-lg-1);
1879
- --popover-shadow-1-y: var(--shadow-y-axis-none);
1880
- --navigation-gap-y: var(--spacing-3);
1881
- --navigation-primary-separator-size: var(--spacing-px);
1882
- --navigation-primary-sub-item-padding-left-x: var(--spacing-7);
1883
- --navigation-primary-item-radius: var(--radius-rounded-md);
1884
- --navigation-primary-item-icon-size: var(--spacing-5);
1885
- --navigation-primary-item-font-size: var(--font-size-md);
1886
- --navigation-primary-item-padding-y: var(--spacing-2);
1887
- --navigation-primary-item-padding-x: var(--spacing-3);
1888
- --navigation-primary-item-gap-x: var(--spacing-2);
1889
- --navigation-primary-title-font-size: var(--font-size-sm);
1890
- --navigation-primary-title-padding-y: var(--spacing-1);
1891
- --navigation-primary-title-padding-x: var(--spacing-3);
1892
- --navigation-primary-notification-bullet-font-weight: var(--font-weight-medium-emphasis);
1893
- --navigation-primary-notification-bullet-size-reduced: var(--spacing-1-5);
1894
- --navigation-primary-notification-bullet-size: var(--spacing-4);
1895
- --menu-contextual-radius: var(--radius-rounded-md);
1896
- --menu-contextual-padding-y: var(--spacing-1);
1897
- --menu-contextual-padding-x: var(--spacing-1);
1898
- --menu-contextual-gap-y: var(--spacing-0-5);
1899
- --menu-contextual-item-radius: var(--radius-rounded);
1900
- --menu-contextual-item-gap-x: var(--spacing-3);
1901
- --menu-contextual-item-padding-y: var(--spacing-2);
1902
- --menu-contextual-item-padding-x: var(--spacing-2-5);
1903
- --menu-contextual-item-font-size: var(--font-size-sm);
1904
- --menu-contextual-divider-padding-x: var(--spacing-2-5);
1905
- --menu-contextual-divider-padding-top: var(--spacing-1);
1906
- --form-toggle-width: var(--spacing-9);
1907
- --form-toggle-switch-dot-selected: var(--spacing-3-5);
1908
- --form-toggle-switch-dot-default: var(--spacing-3);
1909
- --form-toggle-padding-selected: var(--spacing-0-5);
1910
- --form-toggle-padding-default: var(--spacing-1);
1911
- --form-toggle-radius: var(--radius-rounded-full);
1912
- --form-toggle-padding-top: var(--spacing-0);
1913
- --form-toggle-height: var(--spacing-5);
1914
- --form-toggle-border-width: var(--spacing-0-5);
1915
- --form-radio-ring-radius: var(--radius-rounded-full);
1916
- --form-radio-size: var(--spacing-5);
1917
- --form-radio-padding-top: var(--spacing-0);
1918
- --form-radio-inner-circle-size: var(--spacing-2);
1919
- --form-radio-inner-circle-padding: var(--spacing-1-5);
1920
- --form-radio-border-width: var(--spacing-0-5);
1921
- --form-checkbox-icon-stroke: var(--spacing-0-5);
1922
- --form-checkbox-ring-radius: var(--radius-rounded-lg);
1923
- --form-checkbox-size: var(--spacing-5);
1924
- --form-checkbox-radius: var(--radius-rounded-md);
1925
- --form-checkbox-padding-top: var(--spacing-0);
1926
- --form-checkbox-icon-size: var(--spacing-3-5);
1927
- --form-checkbox-border-width: var(--spacing-0-5);
1928
- --form-label-font-weight: var(--font-weight-medium-emphasis);
1929
- --form-label-line-height: var(--line-height-sm);
1930
- --form-label-gap: var(--spacing-1);
1931
- --form-label-font-size: var(--font-size-sm);
1932
- --form-description-font-weight: var(--font-weight-low-emphasis);
1933
- --form-description-line-height: var(--line-height-sm);
1934
- --form-description-font-size: var(--font-size-sm);
1935
- --form-gap-y: var(--spacing-1);
1936
- --form-gap-x: var(--spacing-3);
1937
- --form-field-inner-button-padding-y: var(--spacing-2-5);
1938
- --form-field-inner-button-padding-x-int: var(--spacing-1-5);
1939
- --form-field-inner-button-padding-x-ext: var(--spacing-2-5);
1940
- --form-field-leading-trailing-line-height: var(--line-height-base);
1941
- --form-field-leading-trailing-icon-size: var(--spacing-5);
1942
- --form-field-leading-trailing-font-size: var(--font-size-sm);
1943
- --form-field-radius: var(--radius-rounded-md);
1944
- --form-field-padding-y: var(--spacing-2);
1945
- --form-field-padding-x-icon-button: var(--spacing-10);
1946
- --form-field-padding-x: var(--spacing-2);
1947
- --form-field-line-height: var(--line-height-base);
1948
- --form-field-gap-inner: var(--spacing-2);
1949
- --form-field-gap: var(--spacing-2);
1950
- --form-field-icon-size: var(--spacing-5);
1951
- --form-field-font-weight: var(--font-weight-medium-emphasis);
1952
- --form-field-font-size: var(--font-size-md);
1953
- --form-field-badge-padding-y: var(--spacing-0-5);
1954
- --form-field-badge-padding-x: var(--spacing-1);
1955
- --list-multiselect-padding: var(--spacing-3);
1956
- --list-dropdown-sub-item-padding-left: var(--spacing-4);
1957
- --list-dropdown-separator-padding-y: var(--spacing-0-5);
1958
- --list-dropdown-separator-padding-x: var(--spacing-0);
1959
- --list-dropdown-padding: var(--spacing-2);
1960
- --list-dropdown-radius: var(--radius-rounded-md);
1961
- --list-dropdown-gap-y: var(--spacing-0-5);
1962
- --list-dropdown-item-radius: var(--radius-rounded-md);
1963
- --list-dropdown-item-gap-x: var(--spacing-3);
1964
- --list-dropdown-item-padding-y: var(--spacing-2);
1965
- --list-dropdown-item-padding-x: var(--spacing-2);
1966
- --list-dropdown-item-padding-right: var(--spacing-2);
1967
- --list-dropdown-item-padding-left: var(--spacing-8);
1968
- --list-dropdown-line-height: var(--line-height-base);
1969
- --list-dropdown-font-size: var(--font-size-md);
1970
- --list-dropdown-icon-size: var(--spacing-5);
1971
- --list-select-optgroup-padding-y: var(--spacing-2);
1972
- --list-select-optgroup-gap: var(--spacing-0-5);
1973
- --list-select-optgroup-option-margin-top: var(--spacing-1);
1974
- --list-select-optgroup-option-padding-left: var(--spacing-5);
1975
- --list-select-padding: var(--spacing-2);
1976
- --list-select-radius: var(--radius-rounded-md);
1977
- --list-select-gap-y: var(--spacing-0-5);
1978
- --list-select-option-radius: var(--radius-rounded-md);
1979
- --list-select-option-padding: var(--spacing-2);
1980
- --list-select-option-padding-right: var(--spacing-2);
1981
- --list-select-option-padding-left: var(--spacing-5);
1982
- --list-select-line-height: var(--line-height-base);
1983
- --list-select-font-size: var(--font-size-md);
1984
- --list-select-icon-size: var(--spacing-5);
1985
- --icon-size-xl: var(--spacing-7);
1986
- --icon-size-lg: var(--spacing-6);
1987
- --icon-size-md: var(--spacing-5);
1988
- --icon-size-sm: var(--spacing-4);
1989
- --icon-size-xs: var(--spacing-3);
1990
- --calendar-navigation-buttons-gap: var(--spacing-1);
1991
- --calendar-controls-padding-top: var(--spacing-2);
1992
- --calendar-controls-margin-top: var(--spacing-1);
1993
- --calendar-weeks-size: var(--spacing-10);
1994
- --calendar-weeks-radius: var(--radius-rounded);
1995
- --calendar-header-button-size: var(--spacing-8);
1996
- --calendar-header-margin-bottom: var(--spacing-1);
1997
- --calendar-header-line-height: var(--line-height-sm);
1998
- --calendar-header-font-weight: var(--font-weight-medium-emphasis);
1999
- --calendar-header-font-size: var(--font-size-sm);
2000
- --calendar-grid-gap-y: var(--spacing-0-5);
2001
- --calendar-grid-gap-x: var(--spacing-0);
2002
- --calendar-radius: var(--radius-rounded-md);
2003
- --calendar-weeks-calendar-gap-x: var(--spacing-2);
2004
- --calendar-gap-y: var(--spacing-1);
2005
- --calendar-gap-x: var(--spacing-1);
2006
- --calendar-double-gap-x: var(--spacing-3);
2007
- --calendar-padding: var(--spacing-1);
2008
- --calendar-cell-radius: var(--radius-rounded-2xl);
2009
- --calendar-cell-size: var(--spacing-8);
2010
- --calendar-cell-line-height: var(--line-height-sm);
2011
- --calendar-cell-font-weight: var(--font-weight-low-emphasis);
2012
- --calendar-cell-font-size: var(--font-size-sm);
2013
- --drawer-padding-y: var(--spacing-6);
2014
- --drawer-padding-x: var(--spacing-6);
2015
- --drawer-header-padding-right: var(--spacing-8);
2016
- --drawer-gap-y: var(--spacing-6);
2017
- --drawer-dismissible-position-right: var(--spacing-6);
2018
- --drawer-dismissible-position-top: var(--spacing-6);
2019
- --drawer-radius-top-left: var(--radius-rounded-2xl);
2020
- --drawer-radius-bottom-left: var(--radius-rounded-2xl);
2021
- --button-lg-padding-y: var(--spacing-2-5);
2022
- --button-lg-padding-x: var(--spacing-4);
2023
- --button-lg-line-height: var(--line-height-lg);
2024
- --button-lg-icon-size: var(--spacing-6);
2025
- --button-lg-icon-button-padding: var(--spacing-3);
2026
- --button-lg-height: var(--spacing-12);
2027
- --button-lg-gap: var(--spacing-2);
2028
- --button-lg-font-size: var(--font-size-lg);
2029
- --button-lg-border-radius: var(--radius-rounded-lg);
2030
- --button-md-padding-y: var(--spacing-2);
2031
- --button-md-padding-x: var(--spacing-3-5);
2032
- --button-md-line-height: var(--line-height-base);
2033
- --button-md-icon-size: var(--spacing-5);
2034
- --button-md-icon-button-padding: var(--spacing-2-5);
2035
- --button-md-height: var(--spacing-10);
2036
- --button-md-gap: var(--spacing-2);
2037
- --button-md-font-size: var(--font-size-md);
2038
- --button-md-border-radius: var(--radius-rounded-md);
2039
- --button-sm-padding-y: var(--spacing-1-5);
2040
- --button-sm-padding-x: var(--spacing-3);
2041
- --button-sm-line-height: var(--line-height-sm);
2042
- --button-sm-icon-size: var(--spacing-4);
2043
- --button-sm-icon-button-padding: var(--spacing-2);
2044
- --button-sm-height: var(--spacing-8);
2045
- --button-sm-gap: var(--spacing-1-5);
2046
- --button-sm-font-size: var(--font-size-sm);
2047
- --button-sm-border-radius: var(--radius-rounded);
2048
- --button-xs-padding-y: var(--spacing-1);
2049
- --button-xs-padding-x: var(--spacing-2-5);
2050
- --button-xs-line-height: var(--line-height-xs);
2051
- --button-xs-icon-size: var(--spacing-3);
2052
- --button-xs-icon-button-padding: var(--spacing-1-5);
2053
- --button-xs-height: var(--spacing-6);
2054
- --button-xs-gap: var(--spacing-1);
2055
- --button-xs-font-size: var(--font-size-xs);
2056
- --button-xs-border-radius: var(--radius-rounded-sm);
2057
- --buttongroup-md-height: var(--spacing-10);
2058
- --buttongroup-md-gap: var(--spacing-px);
2059
- --buttongroup-md-radius: var(--radius-rounded-md);
2060
- --buttongroup-lg-height: var(--spacing-12);
2061
- --buttongroup-lg-gap: var(--spacing-px);
2062
- --buttongroup-lg-radius: var(--radius-rounded-lg);
2063
- --buttongroup-sm-height: var(--spacing-8);
2064
- --buttongroup-sm-gap: var(--spacing-px);
2065
- --buttongroup-sm-radius: var(--radius-rounded);
2066
- --buttongroup-xs-height: var(--spacing-6);
2067
- --buttongroup-xs-gap: var(--spacing-px);
2068
- --buttongroup-xs-radius: var(--radius-rounded-sm);
2069
- --buttongroup-xs-button-padding-y: var(--spacing-0-5);
2070
- --avatar-xl-size: var(--spacing-16);
2071
- --avatar-xl-icon-size: var(--spacing-11);
2072
- --avatar-lg-size: var(--spacing-12);
2073
- --avatar-lg-icon-size: var(--spacing-8);
2074
- --avatar-md-size: var(--spacing-10);
2075
- --avatar-md-icon-size: var(--spacing-7);
2076
- --avatar-sm-size: var(--spacing-8);
2077
- --avatar-sm-icon-size: var(--spacing-5);
2078
- --avatar-xs-size: var(--spacing-6);
62
+ --color-interaction-container-neutral-border-active: var(--color-petrol-400);
63
+ --color-interaction-container-neutral-icon-active: var(--color-petrol-400);
64
+ --color-interaction-container-neutral-text-active: var(--color-petrol-400);
65
+ --color-interaction-container-branded-high-background: var(--color-petrol-500);
66
+ --color-interaction-container-branded-high-background-active: var(--color-petrol-400);
67
+ --color-interaction-container-branded-high-background-hover: var(--color-petrol-400);
68
+ --color-interaction-container-branded-high-border: var(--color-petrol-500);
69
+ --color-interaction-container-branded-high-border-active: var(--color-petrol-400);
70
+ --color-interaction-container-branded-high-border-hover: var(--color-petrol-400);
71
+ --color-interaction-container-branded-high-icon: var(--color-base-black);
72
+ --color-interaction-container-branded-high-icon-active: var(--color-base-black);
73
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
74
+ --color-interaction-container-branded-high-text: var(--color-base-black);
75
+ --color-interaction-container-branded-high-text-active: var(--color-base-black);
76
+ --color-interaction-container-branded-high-text-hover: var(--color-base-black);
77
+ --color-interaction-container-branded-low-background-active: var(--color-petrol-900);
78
+ --color-interaction-container-branded-low-background-hover: var(--color-petrol-900);
79
+ --color-interaction-container-branded-low-border: var(--color-petrol-500);
80
+ --color-interaction-container-branded-low-border-active: var(--color-petrol-400);
81
+ --color-interaction-container-branded-low-border-hover: var(--color-petrol-400);
82
+ --color-interaction-container-branded-low-icon: var(--color-petrol-500);
83
+ --color-interaction-container-branded-low-icon-active: var(--color-petrol-400);
84
+ --color-interaction-container-branded-low-icon-hover: var(--color-petrol-400);
85
+ --color-interaction-container-branded-low-text: var(--color-petrol-500);
86
+ --color-interaction-container-branded-low-text-active: var(--color-petrol-400);
87
+ --color-interaction-container-branded-low-text-hover: var(--color-petrol-400);
88
+ --color-interaction-link-high-icon: var(--color-petrol-500);
89
+ --color-interaction-link-high-icon-hover: var(--color-petrol-400);
90
+ --color-interaction-link-high-icon-visited: var(--color-petrol-400);
91
+ --color-interaction-link-high-text: var(--color-petrol-500);
92
+ --color-interaction-link-high-text-hover: var(--color-petrol-400);
93
+ --color-interaction-link-high-text-visited: var(--color-petrol-400);
94
+ --color-interaction-link-low-icon-hover: var(--color-petrol-400);
95
+ --color-interaction-link-low-icon-visited: var(--color-petrol-400);
96
+ --color-interaction-link-low-text-hover: var(--color-petrol-400);
97
+ --color-interaction-link-low-text-visited: var(--color-petrol-400);
98
+ --color-interaction-link-inverted-icon-hover: var(--color-petrol-600);
99
+ --color-interaction-link-inverted-icon-visited: var(--color-petrol-400);
100
+ --color-interaction-link-inverted-text-hover: var(--color-petrol-600);
101
+ --color-interaction-link-inverted-text-visited: var(--color-petrol-400);
102
+ --color-level-10-background: var(--color-gray-ocean-800);
103
+ --color-level-15-background: var(--color-gray-ocean-800);
104
+ --color-level-20-background: var(--color-gray-ocean-700);
105
+ --color-level-30-background: var(--color-gray-ocean-600);
106
+ --color-level-40-background: var(--color-gray-ocean-500);
107
+ --color-level-00-background: var(--color-gray-ocean-900);
108
+ --color-level-05-background: var(--color-gray-ocean-850);
109
+ --color-level-inverted-10-background: var(--color-gray-ocean-50);
110
+ --color-level-inverted-15-background: var(--color-gray-ocean-75);
111
+ --color-level-inverted-20-background: var(--color-gray-ocean-00);
112
+ --color-level-inverted-30-background: var(--color-gray-ocean-50);
113
+ --color-level-inverted-40-background: var(--color-gray-ocean-00);
114
+ --color-level-inverted-00-background: var(--color-gray-ocean-00);
115
+ --color-level-inverted-05-background: var(--color-gray-ocean-25);
116
+ --color-content-high-border: var(--color-gray-ocean-300);
117
+ --color-content-high-text: var(--color-gray-ocean-50);
118
+ --color-content-high-icon: var(--color-gray-ocean-50);
119
+ --color-content-medium-border: var(--color-gray-ocean-400);
120
+ --color-content-medium-text: var(--color-gray-ocean-200);
121
+ --color-content-medium-icon: var(--color-gray-ocean-200);
122
+ --color-content-low-border: var(--color-gray-ocean-500);
123
+ --color-content-low-text: var(--color-gray-ocean-300);
124
+ --color-content-low-icon: var(--color-gray-ocean-300);
125
+ --color-content-lower-text: var(--color-gray-ocean-400);
126
+ --color-content-inverted-high-text: var(--color-gray-ocean-900);
127
+ --color-content-inverted-high-icon: var(--color-gray-ocean-900);
128
+ --color-content-inverted-medium-text: var(--color-gray-ocean-650);
129
+ --color-content-inverted-medium-icon: var(--color-gray-ocean-650);
130
+ --color-content-inverted-low-text: var(--color-gray-ocean-450);
131
+ --color-content-inverted-low-icon: var(--color-gray-ocean-450);
132
+ --color-accent-50: var(--color-orange-900);
133
+ --color-accent-100: var(--color-orange-800);
134
+ --color-accent-200: var(--color-orange-700);
135
+ --color-accent-300: var(--color-orange-600);
136
+ --color-accent-400: var(--color-orange-500);
137
+ --color-accent-500: var(--color-orange-400);
138
+ --color-accent-600: var(--color-orange-300);
139
+ --color-accent-700: var(--color-orange-200);
140
+ --color-accent-800: var(--color-orange-100);
141
+ --color-accent-900: var(--color-orange-50);
142
+ --color-brand-50: var(--color-petrol-900);
143
+ --color-brand-100: var(--color-petrol-800);
144
+ --color-brand-200: var(--color-petrol-700);
145
+ --color-brand-300: var(--color-petrol-600);
146
+ --color-brand-400: var(--color-petrol-500);
147
+ --color-brand-500: var(--color-petrol-400);
148
+ --color-brand-600: var(--color-petrol-300);
149
+ --color-brand-700: var(--color-petrol-200);
150
+ --color-brand-800: var(--color-petrol-100);
151
+ --color-brand-900: var(--color-petrol-50);
152
+ --color-chart-1: var(--color-amber-500);
153
+ --color-chart-2: var(--color-dark-gray-500);
154
+ --color-chart-3: var(--color-petrol-500);
155
+ --color-chart-4: var(--color-turquoise-500);
156
+ --color-chart-5: var(--color-light-blue-500);
157
+ --color-chart-6: var(--color-lime-500);
158
+ --color-chart-7: var(--color-yellow-500);
159
+ --color-chart-8: var(--color-orange-500);
160
+ --color-chart-9: var(--color-dark-blue-500);
161
+ --color-chart-10: var(--color-crimson-500);
162
+ --color-feedback-information-high-background: var(--color-status-blue-300);
163
+ --color-feedback-information-high-border: var(--color-status-blue-300);
164
+ --color-feedback-information-high-icon: var(--color-status-blue-800);
165
+ --color-feedback-information-high-text: var(--color-status-blue-800);
166
+ --color-feedback-information-low-background: var(--color-status-blue-900);
167
+ --color-feedback-information-low-border: var(--color-status-blue-300);
168
+ --color-feedback-information-low-border-subtle: var(--color-status-blue-700);
169
+ --color-feedback-information-low-icon: var(--color-status-blue-300);
170
+ --color-feedback-information-low-text: var(--color-status-blue-300);
171
+ --color-feedback-information-high-contrast-background: var(--color-status-blue-300);
172
+ --color-feedback-information-high-contrast-border: var(--color-status-blue-300);
173
+ --color-feedback-information-high-contrast-icon: var(--color-base-black);
174
+ --color-feedback-information-high-contrast-text: var(--color-status-blue-900);
175
+ --color-feedback-information-high-contrast-title: var(--color-base-black);
176
+ --color-feedback-error-high-background: var(--color-status-red-300);
177
+ --color-feedback-error-high-border: var(--color-status-red-300);
178
+ --color-feedback-error-high-icon: var(--color-status-red-900);
179
+ --color-feedback-error-high-text: var(--color-status-red-900);
180
+ --color-feedback-error-low-background: var(--color-status-red-900);
181
+ --color-feedback-error-low-border: var(--color-status-red-300);
182
+ --color-feedback-error-low-border-subtle: var(--color-status-red-700);
183
+ --color-feedback-error-low-icon: var(--color-status-red-300);
184
+ --color-feedback-error-low-text: var(--color-status-red-300);
185
+ --color-feedback-error-high-contrast-background: var(--color-status-red-300);
186
+ --color-feedback-error-high-contrast-border: var(--color-status-red-300);
187
+ --color-feedback-error-high-contrast-icon: var(--color-base-black);
188
+ --color-feedback-error-high-contrast-text: var(--color-status-red-900);
189
+ --color-feedback-error-high-contrast-title: var(--color-base-black);
190
+ --color-feedback-neutral-high-background: var(--color-gray-ocean-250);
191
+ --color-feedback-neutral-high-border: var(--color-gray-ocean-250);
192
+ --color-feedback-neutral-high-icon: var(--color-gray-ocean-800);
193
+ --color-feedback-neutral-high-text: var(--color-gray-ocean-800);
194
+ --color-feedback-neutral-low-background: var(--color-gray-ocean-800);
195
+ --color-feedback-neutral-low-border: var(--color-gray-ocean-250);
196
+ --color-feedback-neutral-low-border-subtle: var(--color-gray-ocean-500);
197
+ --color-feedback-neutral-low-icon: var(--color-gray-ocean-250);
198
+ --color-feedback-neutral-low-text: var(--color-gray-ocean-250);
199
+ --color-feedback-neutral-high-contrast-background: var(--color-gray-ocean-250);
200
+ --color-feedback-neutral-high-contrast-border: var(--color-gray-ocean-250);
201
+ --color-feedback-neutral-high-contrast-icon: var(--color-base-black);
202
+ --color-feedback-neutral-high-contrast-text: var(--color-gray-ocean-900);
203
+ --color-feedback-neutral-high-contrast-title: var(--color-base-black);
204
+ --color-feedback-warning-high-background: var(--color-status-yellow-500);
205
+ --color-feedback-warning-high-border: var(--color-status-yellow-500);
206
+ --color-feedback-warning-high-icon: var(--color-status-yellow-900);
207
+ --color-feedback-warning-high-text: var(--color-status-yellow-900);
208
+ --color-feedback-warning-low-background: var(--color-status-yellow-900);
209
+ --color-feedback-warning-low-border: var(--color-status-yellow-500);
210
+ --color-feedback-warning-low-border-subtle: var(--color-status-yellow-700);
211
+ --color-feedback-warning-low-icon: var(--color-status-yellow-500);
212
+ --color-feedback-warning-low-text: var(--color-status-yellow-500);
213
+ --color-feedback-warning-high-contrast-background: var(--color-status-yellow-500);
214
+ --color-feedback-warning-high-contrast-border: var(--color-status-yellow-500);
215
+ --color-feedback-warning-high-contrast-icon: var(--color-base-black);
216
+ --color-feedback-warning-high-contrast-text: var(--color-status-yellow-900);
217
+ --color-feedback-warning-high-contrast-title: var(--color-base-black);
218
+ --color-feedback-success-high-background: var(--color-status-green-300);
219
+ --color-feedback-success-high-border: var(--color-status-green-300);
220
+ --color-feedback-success-high-icon: var(--color-status-green-800);
221
+ --color-feedback-success-high-text: var(--color-status-green-800);
222
+ --color-feedback-success-low-background: var(--color-status-green-900);
223
+ --color-feedback-success-low-border: var(--color-status-green-400);
224
+ --color-feedback-success-low-border-subtle: var(--color-status-green-700);
225
+ --color-feedback-success-low-icon: var(--color-status-green-400);
226
+ --color-feedback-success-low-text: var(--color-status-green-400);
227
+ --color-feedback-success-high-contrast-background: var(--color-status-green-400);
228
+ --color-feedback-success-high-contrast-border: var(--color-status-green-400);
229
+ --color-feedback-success-high-contrast-icon: var(--color-base-black);
230
+ --color-feedback-success-high-contrast-text: var(--color-status-green-900);
231
+ --color-feedback-success-high-contrast-title: var(--color-base-black);
232
+ --color-focus-brand: var(--color-petrol-500);
233
+ --color-rainbow-1-background: var(--color-amber-900);
234
+ --color-rainbow-1-border: var(--color-amber-500);
235
+ --color-rainbow-1-border-light: var(--color-amber-700);
236
+ --color-rainbow-1-icon: var(--color-amber-500);
237
+ --color-rainbow-1-text: var(--color-amber-500);
238
+ --color-rainbow-2-background: var(--color-orange-900);
239
+ --color-rainbow-2-border: var(--color-orange-400);
240
+ --color-rainbow-2-border-light: var(--color-orange-700);
241
+ --color-rainbow-2-icon: var(--color-orange-400);
242
+ --color-rainbow-2-text: var(--color-orange-400);
243
+ --color-rainbow-3-background: var(--color-yellow-900);
244
+ --color-rainbow-3-border: var(--color-yellow-600);
245
+ --color-rainbow-3-border-light: var(--color-yellow-700);
246
+ --color-rainbow-3-icon: var(--color-yellow-600);
247
+ --color-rainbow-3-text: var(--color-yellow-600);
248
+ --color-rainbow-4-background: var(--color-red-900);
249
+ --color-rainbow-4-border: var(--color-red-200);
250
+ --color-rainbow-4-border-light: var(--color-red-600);
251
+ --color-rainbow-4-icon: var(--color-red-200);
252
+ --color-rainbow-4-text: var(--color-red-200);
253
+ --color-rainbow-5-background: var(--color-turquoise-900);
254
+ --color-rainbow-5-border: var(--color-turquoise-400);
255
+ --color-rainbow-5-border-light: var(--color-turquoise-700);
256
+ --color-rainbow-5-icon: var(--color-turquoise-400);
257
+ --color-rainbow-5-text: var(--color-turquoise-400);
258
+ --color-rainbow-6-background: var(--color-crimson-900);
259
+ --color-rainbow-6-border: var(--color-crimson-200);
260
+ --color-rainbow-6-border-light: var(--color-crimson-600);
261
+ --color-rainbow-6-icon: var(--color-crimson-200);
262
+ --color-rainbow-6-text: var(--color-crimson-200);
263
+ --color-rainbow-7-background: var(--color-green-800);
264
+ --color-rainbow-7-border: var(--color-green-300);
265
+ --color-rainbow-7-border-light: var(--color-green-600);
266
+ --color-rainbow-7-icon: var(--color-green-300);
267
+ --color-rainbow-7-text: var(--color-green-300);
268
+ --color-rainbow-8-background: var(--color-petrol-900);
269
+ --color-rainbow-8-border: var(--color-petrol-300);
270
+ --color-rainbow-8-border-light: var(--color-petrol-600);
271
+ --color-rainbow-8-icon: var(--color-petrol-300);
272
+ --color-rainbow-8-text: var(--color-petrol-300);
273
+ --color-rainbow-9-background: var(--color-lime-900);
274
+ --color-rainbow-9-border: var(--color-lime-500);
275
+ --color-rainbow-9-border-light: var(--color-lime-700);
276
+ --color-rainbow-9-icon: var(--color-lime-500);
277
+ --color-rainbow-9-text: var(--color-lime-500);
278
+ --color-rainbow-10-background: var(--color-gray-ocean-650);
279
+ --color-rainbow-10-border: var(--color-gray-ocean-250);
280
+ --color-rainbow-10-border-light: var(--color-gray-ocean-450);
281
+ --color-rainbow-10-icon: var(--color-gray-ocean-250);
282
+ --color-rainbow-10-text: var(--color-gray-ocean-250);
283
+ --color-dont-use-border: var(--color-gray-ocean-750);
284
+ --color-dont-use-content: var(--color-gray-ocean-750);
285
+ --color-dont-use-background: var(--color-gray-ocean-900);
286
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
287
+ --components-button-gr-as-complementary-background: var(--color-gray-ocean-450);
288
+ --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-350);
289
+ --components-button-gr-as-complementary-text: var(--color-base-white);
290
+ --components-button-gr-as-complementary-text-hover: var(--color-base-white);
291
+ --components-button-gr-as-complementary-icon: var(--color-base-white);
292
+ --components-button-gr-as-complementary-icon-hover: var(--color-base-white);
293
+ --components-form-field-background-checked: var(--color-petrol-500);
294
+ --components-form-shape-background-default: var(--color-gray-ocean-400);
295
+ --components-form-shape-background-hover: var(--color-gray-ocean-350);
296
+ --components-form-shape-background-disabled: var(--color-gray-ocean-700);
297
+ --components-form-shape-background-selected: var(--color-petrol-500);
298
+ --components-form-shape-foreground-default: var(--color-base-black);
299
+ --components-loader-white-foreground: var(--color-base-white);
300
+ --components-loader-brand-background: var(--color-petrol-900);
301
+ --components-loader-brand-foreground: var(--color-petrol-500);
302
+ --components-button-destructive-medium-background-hover: var(--color-status-red-900);
303
+ --components-button-destructive-medium-text: var(--color-status-red-400);
304
+ --components-button-destructive-medium-text-hover: var(--color-status-red-300);
305
+ --components-button-destructive-medium-icon: var(--color-status-red-400);
306
+ --components-button-destructive-medium-icon-hover: var(--color-status-red-300);
307
+ --components-button-destructive-medium-border: var(--color-status-red-400);
308
+ --components-button-destructive-medium-border-hover: var(--color-status-red-300);
309
+ --components-button-destructive-low-background-hover: var(--color-status-red-900);
310
+ --components-button-destructive-low-text: var(--color-status-red-400);
311
+ --components-button-destructive-low-text-hover: var(--color-status-red-300);
312
+ --components-button-destructive-low-icon: var(--color-status-red-400);
313
+ --components-button-destructive-low-icon-hover: var(--color-status-red-300);
314
+ --components-button-destructive-high-background: var(--color-status-red-400);
315
+ --components-button-destructive-high-background-hover: var(--color-status-red-300);
316
+ --components-button-destructive-high-text: var(--color-base-black);
317
+ --components-button-destructive-high-text-hover: var(--color-base-black);
318
+ --components-button-destructive-high-icon: var(--color-base-black);
319
+ --components-button-destructive-high-icon-hover: var(--color-base-black);
320
+ --components-overlay-background: var(--color-gray-ocean-650);
321
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
322
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
323
+ --components-field-time-background-default: var(--color-interaction-container-neutral-background);
324
+ --components-list-select-option-background-default: var(--color-interaction-container-neutral-background);
325
+ --components-list-select-option-background-disabled: var(--color-interaction-container-neutral-background);
326
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
327
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
328
+ --components-list-dropdown-group-title-background: var(--color-transparent);
329
+ --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
330
+ --components-popover-background: var(--color-gray-ocean-900);
331
+ --components-splitter-old-background: var(--color-interaction-container-neutral-background);
332
+ --components-splitter-old-border: var(--color-transparent);
333
+ --components-tooltip-background: var(--color-gray-ocean-50);
334
+ --components-tooltip-border: var(--color-gray-ocean-50);
335
+ --components-toggle-border-default: var(--color-gray-ocean-400);
336
+ --components-toggle-border-hover: var(--color-gray-ocean-300);
337
+ --components-toggle-border-disabled: var(--color-gray-ocean-600);
338
+ --components-toggle-border-disabled-checked: var(--color-gray-ocean-600);
339
+ --components-toggle-background-disabled: var(--color-gray-ocean-600);
340
+ --components-toggle-background-disabled-checked: var(--color-gray-ocean-600);
341
+ --components-toggle-shape-default: var(--color-gray-ocean-400);
342
+ --components-toggle-shape-hover: var(--color-gray-ocean-300);
343
+ --color-interaction-container-neutral-background-hover: var(--color-level-10-background);
344
+ --color-interaction-container-neutral-border: var(--color-content-low-text);
345
+ --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
346
+ --color-interaction-container-neutral-icon: var(--color-content-low-text);
347
+ --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
348
+ --color-interaction-container-neutral-text: var(--color-content-low-text);
349
+ --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
350
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
351
+ --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
352
+ --color-interaction-link-high-text-disabled: var(--color-content-low-text);
353
+ --color-interaction-link-low-icon: var(--color-content-high-text);
354
+ --color-interaction-link-low-icon-disabled: var(--color-content-low-icon);
355
+ --color-interaction-link-low-text: var(--color-content-high-text);
356
+ --color-interaction-link-low-text-disabled: var(--color-content-low-text);
357
+ --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
358
+ --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
359
+ --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
360
+ --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
361
+ --color-focus-background: var(--color-level-00-background);
362
+ --color-focus-background-inverted: var(--color-level-inverted-00-background);
363
+ --color-focus-destructive: var(--color-feedback-error-high-border);
364
+ --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
365
+ --color-focus-success: var(--color-feedback-success-low-border);
366
+ --components-button-high-background: var(--color-interaction-container-branded-high-background);
367
+ --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
368
+ --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
369
+ --components-button-high-text: var(--color-interaction-container-branded-high-text);
370
+ --components-button-high-text-active: var(--color-interaction-container-branded-high-text-active);
371
+ --components-button-high-text-hover: var(--color-interaction-container-branded-high-text-hover);
372
+ --components-button-high-icon: var(--color-interaction-container-branded-high-icon);
373
+ --components-button-high-icon-active: var(--color-interaction-container-branded-high-icon-active);
374
+ --components-button-high-icon-hover: var(--color-interaction-container-branded-high-icon-hover);
375
+ --components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
376
+ --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
377
+ --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
378
+ --components-button-low-icon-active: var(--color-interaction-container-branded-low-icon-active);
379
+ --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
380
+ --components-button-low-text: var(--color-interaction-container-branded-low-text);
381
+ --components-button-low-text-active: var(--color-interaction-container-branded-low-text-active);
382
+ --components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
383
+ --components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
384
+ --components-button-lower-icon-active: var(--color-interaction-container-neutral-icon-active);
385
+ --components-button-lower-text-active: var(--color-interaction-container-neutral-text-active);
386
+ --components-button-medium-background-active: var(--color-interaction-container-branded-low-background-active);
387
+ --components-button-medium-background-hover: var(--color-interaction-container-branded-low-background-hover);
388
+ --components-button-medium-border: var(--color-interaction-container-branded-low-border);
389
+ --components-button-medium-border-active: var(--color-interaction-container-branded-low-border-hover);
390
+ --components-button-medium-border-hover: var(--color-interaction-container-branded-low-border-hover);
391
+ --components-button-medium-icon: var(--color-interaction-container-branded-low-icon);
392
+ --components-button-medium-icon-active: var(--color-interaction-container-branded-low-icon-active);
393
+ --components-button-medium-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
394
+ --components-button-medium-text: var(--color-interaction-container-branded-low-text);
395
+ --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
396
+ --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
397
+ --components-form-text-required: var(--color-feedback-error-low-icon);
398
+ --components-form-text-info-icon: var(--color-content-medium-text);
399
+ --components-form-text-label-default: var(--color-content-high-text);
400
+ --components-form-text-label-disabled: var(--color-content-medium-text);
401
+ --components-form-text-description-default: var(--color-content-low-text);
402
+ --components-form-text-description-error: var(--color-feedback-error-low-icon);
403
+ --components-form-field-background-default: var(--color-level-00-background);
404
+ --components-form-field-background-focus: var(--color-level-00-background);
405
+ --components-form-field-background-hover: var(--color-level-05-background);
406
+ --components-form-field-background-disabled: var(--color-level-10-background);
407
+ --components-form-field-background-error: var(--color-feedback-error-low-border);
408
+ --components-form-field-background-readonly: var(--color-level-05-background);
409
+ --components-form-field-border-default: var(--color-content-medium-border);
410
+ --components-form-field-border-disabled: var(--color-content-medium-border);
411
+ --components-form-field-border-hover: var(--color-content-high-border);
412
+ --components-form-field-border-focus: var(--color-focus-brand);
413
+ --components-form-field-border-error: var(--color-feedback-error-low-border);
414
+ --components-form-field-border-success: var(--color-feedback-success-low-border);
415
+ --components-form-field-border-readonly: var(--color-content-low-border);
416
+ --components-form-field-content-placeholder: var(--color-content-low-text);
417
+ --components-form-field-content-text: var(--color-content-high-text);
418
+ --components-form-field-icon-default: var(--color-content-low-text);
419
+ --components-form-field-icon-disabled: var(--color-content-medium-border);
420
+ --components-form-field-icon-error: var(--color-feedback-error-low-icon);
421
+ --components-form-field-icon-success: var(--color-feedback-success-low-icon);
422
+ --components-form-shape-background-error: var(--color-feedback-error-low-icon);
423
+ --components-form-shape-border-default: var(--color-content-medium-border);
424
+ --components-form-shape-border-hover: var(--color-content-high-border);
425
+ --components-form-shape-border-focus: var(--color-focus-brand);
426
+ --components-form-shape-border-error: var(--color-feedback-error-low-border);
427
+ --components-form-shape-border-success: var(--color-feedback-success-low-border);
428
+ --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
429
+ --components-form-shape-foreground-disabled-error: var(--color-feedback-error-low-icon);
430
+ --components-button-destructive-lower-background: var(--color-dont-use-background);
431
+ --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
432
+ --components-button-destructive-lower-text: var(--color-dont-use-content);
433
+ --components-button-destructive-lower-text-hover: var(--color-dont-use-content);
434
+ --components-button-destructive-lower-icon: var(--color-dont-use-content);
435
+ --components-button-destructive-lower-icon-hover: var(--color-dont-use-content);
436
+ --components-button-destructive-lower-border: var(--color-dont-use-border);
437
+ --components-button-destructive-lower-border-hover: var(--color-dont-use-border);
438
+ --components-alert-information-background: var(--color-feedback-information-low-background);
439
+ --components-alert-information-icon: var(--color-feedback-information-low-icon);
440
+ --components-alert-information-border: var(--color-feedback-information-low-border);
441
+ --components-alert-content-description: var(--color-content-medium-text);
442
+ --components-alert-content-title: var(--color-content-high-text);
443
+ --components-alert-warning-background: var(--color-feedback-warning-low-background);
444
+ --components-alert-warning-border: var(--color-feedback-warning-low-border);
445
+ --components-alert-warning-icon: var(--color-feedback-warning-low-icon);
446
+ --components-alert-error-background: var(--color-feedback-error-low-background);
447
+ --components-alert-error-border: var(--color-feedback-error-low-border);
448
+ --components-alert-error-icon: var(--color-feedback-error-low-icon);
449
+ --components-alert-success-background: var(--color-feedback-success-low-background);
450
+ --components-alert-success-border: var(--color-feedback-success-low-border);
451
+ --components-alert-success-icon: var(--color-feedback-success-low-icon);
452
+ --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
453
+ --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
454
+ --components-alert-neutral-icon: var(--color-feedback-neutral-low-icon);
455
+ --components-avatar-background-1: var(--color-rainbow-1-background);
456
+ --components-avatar-background-2: var(--color-rainbow-2-background);
457
+ --components-avatar-background-3: var(--color-rainbow-3-background);
458
+ --components-avatar-background-4: var(--color-rainbow-4-background);
459
+ --components-avatar-background-5: var(--color-rainbow-5-background);
460
+ --components-avatar-background-6: var(--color-rainbow-6-background);
461
+ --components-avatar-background-7: var(--color-rainbow-7-background);
462
+ --components-avatar-background-8: var(--color-rainbow-8-background);
463
+ --components-avatar-background-9: var(--color-rainbow-9-background);
464
+ --components-avatar-background-10: var(--color-rainbow-10-background);
465
+ --components-avatar-border-1: var(--color-rainbow-1-border);
466
+ --components-avatar-border-2: var(--color-rainbow-2-border);
467
+ --components-avatar-border-3: var(--color-rainbow-3-border);
468
+ --components-avatar-border-4: var(--color-rainbow-4-border);
469
+ --components-avatar-border-5: var(--color-rainbow-5-border);
470
+ --components-avatar-border-6: var(--color-rainbow-6-border);
471
+ --components-avatar-border-7: var(--color-rainbow-7-border);
472
+ --components-avatar-border-8: var(--color-rainbow-8-border);
473
+ --components-avatar-border-9: var(--color-rainbow-9-border);
474
+ --components-avatar-border-10: var(--color-rainbow-10-border);
475
+ --components-avatar-content-1: var(--color-rainbow-1-icon);
476
+ --components-avatar-content-2: var(--color-rainbow-2-icon);
477
+ --components-avatar-content-3: var(--color-rainbow-3-icon);
478
+ --components-avatar-content-4: var(--color-rainbow-4-icon);
479
+ --components-avatar-content-5: var(--color-rainbow-5-icon);
480
+ --components-avatar-content-6: var(--color-rainbow-6-icon);
481
+ --components-avatar-content-7: var(--color-rainbow-7-text);
482
+ --components-avatar-content-8: var(--color-rainbow-8-text);
483
+ --components-avatar-content-9: var(--color-rainbow-9-text);
484
+ --components-avatar-content-10: var(--color-rainbow-10-icon);
485
+ --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
486
+ --components-buttongroup-high-border: var(--color-interaction-container-branded-high-border);
487
+ --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
488
+ --components-buttongroup-medium-border: var(--color-interaction-container-branded-low-border);
489
+ --components-buttongroup-low-border: var(--color-interaction-container-branded-low-border);
490
+ --components-datagrid-header-border: var(--color-content-medium-border);
491
+ --components-datagrid-header-text: var(--color-content-high-text);
492
+ --components-datagrid-body-border: var(--color-content-low-border);
493
+ --components-datagrid-body-text: var(--color-content-medium-text);
494
+ --components-datagrid-body-subtext: var(--color-content-low-text);
495
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
496
+ --components-datagrid-expander-content-background: var(--color-level-00-background);
497
+ --components-datagrid-expander-border: var(--color-content-low-border);
498
+ --components-datagrid-expander-expander-background: var(--color-level-10-background);
499
+ --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
500
+ --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
501
+ --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
502
+ --components-calendar-border: var(--color-content-low-border);
503
+ --components-calendar-header-text: var(--color-content-high-text);
504
+ --components-calendar-weeks-background: var(--color-level-10-background);
505
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
506
+ --components-calendar-weeks-text: var(--color-content-high-text);
507
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
508
+ --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
509
+ --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
510
+ --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
511
+ --components-calendar-cell-dot: var(--color-content-high-icon);
512
+ --components-calendar-cell-dot-selected: var(--color-interaction-container-branded-high-icon-active);
513
+ --components-calendar-cell-dot-hover: var(--color-interaction-container-branded-high-icon-hover);
514
+ --components-calendar-cell-text-selected: var(--color-interaction-container-branded-high-text-active);
515
+ --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
516
+ --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
517
+ --components-calendar-cell-text-today: var(--color-content-high-text);
518
+ --components-calendar-background: var(--color-level-00-background);
519
+ --components-list-select-background: var(--color-level-00-background);
520
+ --components-list-select-option-content-default: var(--color-content-medium-text);
521
+ --components-list-select-option-content-hover: var(--color-content-high-text);
522
+ --components-list-select-option-content-disabled: var(--color-content-lower-text);
523
+ --components-list-select-option-content-active: var(--color-interaction-container-neutral-text-active);
524
+ --components-list-select-option-background-active: var(--color-interaction-container-neutral-background-active);
525
+ --components-list-select-optgroup-content: var(--color-content-lower-text);
526
+ --components-list-select-border: var(--color-content-low-border);
527
+ --components-list-select-hr: var(--color-content-low-border);
528
+ --components-list-dropdown-background: var(--color-level-00-background);
529
+ --components-list-dropdown-header-background: var(--color-level-10-background);
530
+ --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
531
+ --components-list-dropdown-item-label-default: var(--color-content-medium-text);
532
+ --components-list-dropdown-item-label-hover: var(--color-content-high-text);
533
+ --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
534
+ --components-list-dropdown-item-label-active: var(--color-content-low-text);
535
+ --components-list-dropdown-item-description-default: var(--color-content-low-text);
536
+ --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
537
+ --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
538
+ --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
539
+ --components-list-dropdown-group-title-content: var(--color-content-medium-text);
540
+ --components-list-dropdown-separator: var(--color-content-low-border);
541
+ --components-list-dropdown-border: var(--color-content-low-border);
542
+ --components-menu-contextual-background: var(--color-level-00-background);
543
+ --components-menu-contextual-border: var(--color-content-low-border);
544
+ --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
545
+ --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
546
+ --components-notification-information-background: var(--color-level-20-background);
547
+ --components-notification-information-icon: var(--color-feedback-information-low-icon);
548
+ --components-notification-information-border: var(--color-feedback-information-low-border);
549
+ --components-notification-content-description: var(--color-content-medium-text);
550
+ --components-notification-content-timestamp: var(--color-content-medium-text);
551
+ --components-notification-content-title: var(--color-content-high-text);
552
+ --components-notification-warning-background: var(--color-level-20-background);
553
+ --components-notification-warning-border: var(--color-feedback-warning-low-border);
554
+ --components-notification-warning-icon: var(--color-feedback-warning-low-icon);
555
+ --components-notification-error-background: var(--color-level-20-background);
556
+ --components-notification-error-border: var(--color-feedback-error-low-border);
557
+ --components-notification-error-icon: var(--color-feedback-error-low-icon);
558
+ --components-notification-success-background: var(--color-level-20-background);
559
+ --components-notification-success-border: var(--color-feedback-success-low-border);
560
+ --components-notification-success-icon: var(--color-feedback-success-low-icon);
561
+ --components-notification-neutral-background: var(--color-level-20-background);
562
+ --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
563
+ --components-notification-neutral-icon: var(--color-feedback-neutral-low-icon);
564
+ --components-popover-border: var(--color-content-low-border);
565
+ --components-popover-text: var(--color-content-inverted-medium-text);
566
+ --components-popover-supporting-text: var(--color-content-low-text);
567
+ --components-sidebar-background: var(--color-level-00-background);
568
+ --components-sidebar-divider: var(--color-content-low-border);
569
+ --components-sidebar-border: var(--color-content-low-border);
570
+ --components-slider-track-background: var(--color-content-low-border);
571
+ --components-slider-handler-background-focus: var(--components-form-field-background-checked);
572
+ --components-slider-handler-border-focus: var(--components-form-field-background-checked);
573
+ --components-splitter-old-background-active: var(--color-interaction-container-neutral-background-active);
574
+ --components-splitter-old-border-active: var(--color-interaction-container-neutral-border-active);
575
+ --components-splitter-line-background: var(--color-level-10-background);
576
+ --components-splitter-line-background-active: var(--color-interaction-container-branded-high-background-active);
577
+ --components-splitter-line-background-hover: var(--color-interaction-container-branded-low-background-active);
578
+ --components-splitter-handle-background: var(--color-content-low-border);
579
+ --components-splitter-handle-background-active: var(--color-interaction-container-branded-high-background-active);
580
+ --components-splitter-handle-background-hover: var(--color-interaction-container-branded-high-background-active);
581
+ --components-tooltip-text: var(--color-content-inverted-high-text);
582
+ --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
583
+ --components-toggle-border-default-checked: var(--color-interaction-container-branded-high-border);
584
+ --components-toggle-border-hover-checked: var(--color-interaction-container-branded-high-border-hover);
585
+ --components-toggle-background-default-checked: var(--color-interaction-container-branded-high-background);
586
+ --components-toggle-background-hover-checked: var(--color-interaction-container-branded-high-background-hover);
587
+ --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
588
+ --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
589
+ --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
590
+ --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
591
+ --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
592
+ --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
593
+ --components-button-lower-text: var(--color-interaction-container-neutral-text);
594
+ --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
595
+ --components-button-medium-background: var(--color-interaction-container-branded-low-background);
596
+ --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
597
+ --components-breadcrumb-text: var(--color-interaction-link-low-text);
598
+ --components-breadcrumb-text-current: var(--color-interaction-link-high-text-disabled);
599
+ --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
600
+ --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
601
+ --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
602
+ --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
603
+ --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
604
+ --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
605
+ --components-field-time-text-default: var(--color-interaction-container-neutral-text);
606
+ --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
607
+ --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
608
+ --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
609
+ --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
610
+ --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
611
+ --components-list-select-option-background-hover: var(--color-interaction-container-neutral-background-hover);
612
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
613
+ --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
614
+ --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
615
+ --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
616
+ --components-slider-track-filled-default: var(--components-form-field-border-default);
617
+ --components-slider-track-filled-hover: var(--components-form-field-border-hover);
618
+ --components-slider-track-filled-focus: var(--components-form-field-border-focus);
619
+ --components-slider-track-filled-error: var(--components-form-field-border-error);
620
+ --components-slider-track-filled-disabled: var(--components-form-field-border-disabled);
621
+ --components-slider-track-filled-readonly: var(--components-form-field-border-readonly);
622
+ --components-slider-handler-background-default: var(--components-form-field-background-default);
623
+ --components-slider-handler-background-hover: var(--components-form-field-background-hover);
624
+ --components-slider-handler-background-error: var(--components-form-field-background-error);
625
+ --components-slider-handler-background-disabled: var(--components-form-field-background-disabled);
626
+ --components-slider-handler-background-readonly: var(--components-form-field-background-readonly);
627
+ --components-slider-handler-border-default: var(--components-form-field-background-default);
628
+ --components-slider-handler-border-hover: var(--components-form-field-background-hover);
629
+ --components-slider-handler-border-error: var(--components-form-field-background-error);
630
+ --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
631
+ --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
632
+ --components-splitter-old-background-hover: var(--color-interaction-container-neutral-background-hover);
633
+ --components-splitter-old-border-hover: var(--color-interaction-container-neutral-border-hover);
634
+ --components-toggle-background-default: var(--color-interaction-container-branded-low-background);
635
+ --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
636
+ --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
637
+ --components-toggle-shape-disabled-checked: var(--color-interaction-container-neutral-icon);
638
+ --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
639
+ --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
640
+ --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
641
+ }
642
+
643
+ :root {
644
+ --color-gray-25: var(--color-gray-ocean-25);
645
+ --color-gray-50: var(--color-gray-ocean-50);
646
+ --color-gray-75: var(--color-gray-ocean-75);
647
+ --color-gray-100: var(--color-gray-ocean-100);
648
+ --color-gray-150: var(--color-gray-ocean-150);
649
+ --color-gray-200: var(--color-gray-ocean-200);
650
+ --color-gray-250: var(--color-gray-ocean-250);
651
+ --color-gray-300: var(--color-gray-ocean-300);
652
+ --color-gray-350: var(--color-gray-ocean-350);
653
+ --color-gray-400: var(--color-gray-ocean-400);
654
+ --color-gray-450: var(--color-gray-ocean-450);
655
+ --color-gray-500: var(--color-gray-ocean-500);
656
+ --color-gray-550: var(--color-gray-ocean-550);
657
+ --color-gray-600: var(--color-gray-ocean-600);
658
+ --color-gray-650: var(--color-gray-ocean-650);
659
+ --color-gray-700: var(--color-gray-ocean-700);
660
+ --color-gray-750: var(--color-gray-ocean-750);
661
+ --color-gray-800: var(--color-gray-ocean-800);
662
+ --color-gray-850: var(--color-gray-ocean-850);
663
+ --color-gray-900: var(--color-gray-ocean-900);
664
+ --color-gray-00: var(--color-gray-ocean-00);
665
+ }
666
+ /**
667
+ * Do not edit directly, this file was auto-generated.
668
+ */
669
+
670
+ :root {
671
+ --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
672
+ --color-black: #000000;
673
+ --color-white: #ffffff;
674
+ --color-transparent: rgba(255, 255, 255, 0);
675
+ --opacity-disabled: 50%;
676
+ --opacity-disabled-2: 0%;
677
+ --shadow-color-opacity-0: rgba(255, 255, 255, 0.06);
678
+ --shadow-color-opacity-1: rgba(11, 15, 17, 0.06);
679
+ --shadow-color-opacity-2: rgba(11, 15, 17, 0.1);
680
+ --shadow-color-opacity-3: rgba(11, 15, 17, 0.25);
681
+ --shadow-blur-base-1: 3.0000px;
682
+ --shadow-blur-base-2: 2.0000px;
683
+ --shadow-blur-md-1: 4.0000px;
684
+ --shadow-blur-md-2: 6.0000px;
685
+ --shadow-blur-lg-1: 6.0000px;
686
+ --shadow-blur-lg-2: 15.0000px;
687
+ --shadow-blur-xl-1: 10.0000px;
688
+ --shadow-blur-xl-2: 25.0000px;
689
+ --shadow-blur-2xl: 50.0000px;
690
+ --shadow-spread-base: 0.0000px;
691
+ --shadow-spread-md: 0.0000px;
692
+ --shadow-spread-lg-1: -2.0000px;
693
+ --shadow-spread-lg-2: -3.0000px;
694
+ --shadow-spread-xl: -5.0000px;
695
+ --shadow-spread-2xl: -12.0000px;
696
+ --shadow-y-axis-none: 0.0000px;
697
+ --shadow-y-axis-base-1: 1.0000px;
698
+ --shadow-y-axis-base-2: 1.0000px;
699
+ --shadow-y-axis-md-1: 2.0000px;
700
+ --shadow-y-axis-md-2: 4.0000px;
701
+ --shadow-y-axis-lg-1: 4.0000px;
702
+ --shadow-y-axis-lg-2: 10.0000px;
703
+ --shadow-y-axis-xl-1: 10.0000px;
704
+ --shadow-y-axis-xl-2: 20.0000px;
705
+ --shadow-y-axis-2xl: 25.0000px;
706
+ --components-button-high-border: rgba(255, 255, 255, 0);
707
+ --components-button-high-border-hover: rgba(255, 255, 255, 0);
708
+ --components-button-high-border-active: rgba(255, 255, 255, 0);
709
+ --components-button-low-background: rgba(255, 255, 255, 0);
710
+ --components-button-low-border: rgba(255, 255, 255, 0);
711
+ --components-button-low-border-active: rgba(255, 255, 255, 0);
712
+ --components-button-low-border-hover: rgba(255, 255, 255, 0);
713
+ --components-button-lower-border: rgba(255, 255, 255, 0);
714
+ --components-button-lower-border-active: rgba(255, 255, 255, 0);
715
+ --components-button-lower-border-hover: rgba(255, 255, 255, 0);
716
+ --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
717
+ --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
718
+ --components-form-opacity-default: 100%;
719
+ --components-form-opacity-disabled: 50%;
720
+ --components-loader-white-background: rgba(255, 255, 255, 0.2);
721
+ --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
722
+ --components-button-destructive-low-background: rgba(255, 255, 255, 0);
723
+ --components-button-destructive-low-border: rgba(255, 255, 255, 0);
724
+ --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
725
+ --components-overlay-opacity: 55%;
726
+ --color-interaction-container-neutral-background-active: var(--color-petrol-50);
727
+ --color-interaction-container-neutral-border-active: var(--color-petrol-700);
728
+ --color-interaction-container-neutral-icon-active: var(--color-petrol-700);
729
+ --color-interaction-container-neutral-text-active: var(--color-petrol-700);
730
+ --color-interaction-container-branded-high-background: var(--color-petrol-600);
731
+ --color-interaction-container-branded-high-background-active: var(--color-petrol-700);
732
+ --color-interaction-container-branded-high-background-hover: var(--color-petrol-700);
733
+ --color-interaction-container-branded-high-border: var(--color-petrol-600);
734
+ --color-interaction-container-branded-high-border-active: var(--color-petrol-700);
735
+ --color-interaction-container-branded-high-border-hover: var(--color-petrol-700);
736
+ --color-interaction-container-branded-high-icon: var(--color-base-white);
737
+ --color-interaction-container-branded-high-icon-active: var(--color-base-white);
738
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
739
+ --color-interaction-container-branded-high-text: var(--color-base-white);
740
+ --color-interaction-container-branded-high-text-active: var(--color-base-white);
741
+ --color-interaction-container-branded-high-text-hover: var(--color-base-white);
742
+ --color-interaction-container-branded-low-background-active: var(--color-petrol-50);
743
+ --color-interaction-container-branded-low-background-hover: var(--color-petrol-50);
744
+ --color-interaction-container-branded-low-border: var(--color-petrol-600);
745
+ --color-interaction-container-branded-low-border-active: var(--color-petrol-700);
746
+ --color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
747
+ --color-interaction-container-branded-low-icon: var(--color-petrol-600);
748
+ --color-interaction-container-branded-low-icon-active: var(--color-petrol-700);
749
+ --color-interaction-container-branded-low-icon-hover: var(--color-petrol-700);
750
+ --color-interaction-container-branded-low-text: var(--color-petrol-600);
751
+ --color-interaction-container-branded-low-text-active: var(--color-petrol-700);
752
+ --color-interaction-container-branded-low-text-hover: var(--color-petrol-700);
753
+ --color-interaction-link-high-icon: var(--color-petrol-600);
754
+ --color-interaction-link-high-icon-hover: var(--color-petrol-700);
755
+ --color-interaction-link-high-icon-visited: var(--color-petrol-700);
756
+ --color-interaction-link-high-text: var(--color-petrol-600);
757
+ --color-interaction-link-high-text-hover: var(--color-petrol-700);
758
+ --color-interaction-link-high-text-visited: var(--color-petrol-700);
759
+ --color-interaction-link-low-icon-hover: var(--color-petrol-700);
760
+ --color-interaction-link-low-icon-visited: var(--color-petrol-700);
761
+ --color-interaction-link-low-text-hover: var(--color-petrol-700);
762
+ --color-interaction-link-low-text-visited: var(--color-petrol-700);
763
+ --color-interaction-link-inverted-icon-hover: var(--color-petrol-500);
764
+ --color-interaction-link-inverted-icon-visited: var(--color-petrol-700);
765
+ --color-interaction-link-inverted-text-hover: var(--color-petrol-500);
766
+ --color-interaction-link-inverted-text-visited: var(--color-petrol-700);
767
+ --color-level-10-background: var(--color-gray-ocean-50);
768
+ --color-level-15-background: var(--color-gray-ocean-75);
769
+ --color-level-20-background: var(--color-gray-ocean-00);
770
+ --color-level-30-background: var(--color-gray-ocean-50);
771
+ --color-level-40-background: var(--color-gray-ocean-00);
772
+ --color-level-00-background: var(--color-gray-ocean-00);
773
+ --color-level-05-background: var(--color-gray-ocean-25);
774
+ --color-level-inverted-10-background: var(--color-gray-ocean-800);
775
+ --color-level-inverted-15-background: var(--color-gray-ocean-750);
776
+ --color-level-inverted-20-background: var(--color-gray-ocean-700);
777
+ --color-level-inverted-30-background: var(--color-gray-ocean-600);
778
+ --color-level-inverted-40-background: var(--color-gray-ocean-500);
779
+ --color-level-inverted-00-background: var(--color-gray-ocean-900);
780
+ --color-level-inverted-05-background: var(--color-gray-ocean-850);
781
+ --color-content-high-border: var(--color-gray-ocean-300);
782
+ --color-content-high-text: var(--color-gray-ocean-800);
783
+ --color-content-high-icon: var(--color-gray-ocean-800);
784
+ --color-content-medium-border: var(--color-gray-ocean-200);
785
+ --color-content-medium-text: var(--color-gray-ocean-550);
786
+ --color-content-medium-icon: var(--color-gray-ocean-550);
787
+ --color-content-low-border: var(--color-gray-ocean-100);
788
+ --color-content-low-text: var(--color-gray-ocean-400);
789
+ --color-content-low-icon: var(--color-gray-ocean-400);
790
+ --color-content-lower-text: var(--color-gray-ocean-250);
791
+ --color-content-inverted-high-text: var(--color-gray-ocean-50);
792
+ --color-content-inverted-high-icon: var(--color-gray-ocean-50);
793
+ --color-content-inverted-medium-text: var(--color-gray-ocean-300);
794
+ --color-content-inverted-medium-icon: var(--color-gray-ocean-300);
795
+ --color-content-inverted-low-text: var(--color-gray-ocean-400);
796
+ --color-content-inverted-low-icon: var(--color-gray-ocean-400);
797
+ --color-accent-50: var(--color-orange-50);
798
+ --color-accent-100: var(--color-orange-100);
799
+ --color-accent-200: var(--color-orange-200);
800
+ --color-accent-300: var(--color-orange-300);
801
+ --color-accent-400: var(--color-orange-400);
802
+ --color-accent-500: var(--color-orange-500);
803
+ --color-accent-600: var(--color-orange-600);
804
+ --color-accent-700: var(--color-orange-700);
805
+ --color-accent-800: var(--color-orange-800);
806
+ --color-accent-900: var(--color-orange-900);
807
+ --color-brand-50: var(--color-petrol-100);
808
+ --color-brand-100: var(--color-petrol-100);
809
+ --color-brand-200: var(--color-petrol-200);
810
+ --color-brand-300: var(--color-petrol-300);
811
+ --color-brand-400: var(--color-petrol-400);
812
+ --color-brand-500: var(--color-petrol-500);
813
+ --color-brand-600: var(--color-petrol-600);
814
+ --color-brand-700: var(--color-petrol-700);
815
+ --color-brand-800: var(--color-petrol-800);
816
+ --color-brand-900: var(--color-petrol-900);
817
+ --color-chart-1: var(--color-amber-500);
818
+ --color-chart-2: var(--color-dark-gray-500);
819
+ --color-chart-3: var(--color-petrol-500);
820
+ --color-chart-4: var(--color-turquoise-500);
821
+ --color-chart-5: var(--color-light-blue-500);
822
+ --color-chart-6: var(--color-lime-500);
823
+ --color-chart-7: var(--color-yellow-500);
824
+ --color-chart-8: var(--color-orange-500);
825
+ --color-chart-9: var(--color-dark-blue-500);
826
+ --color-chart-10: var(--color-crimson-500);
827
+ --color-feedback-information-high-background: var(--color-status-blue-300);
828
+ --color-feedback-information-high-border: var(--color-status-blue-300);
829
+ --color-feedback-information-high-icon: var(--color-status-blue-800);
830
+ --color-feedback-information-high-text: var(--color-status-blue-800);
831
+ --color-feedback-information-low-background: var(--color-status-blue-50);
832
+ --color-feedback-information-low-border: var(--color-status-blue-500);
833
+ --color-feedback-information-low-border-subtle: var(--color-status-blue-100);
834
+ --color-feedback-information-low-icon: var(--color-status-blue-500);
835
+ --color-feedback-information-low-text: var(--color-status-blue-500);
836
+ --color-feedback-information-high-contrast-background: var(--color-status-blue-300);
837
+ --color-feedback-information-high-contrast-border: var(--color-status-blue-300);
838
+ --color-feedback-information-high-contrast-icon: var(--color-base-white);
839
+ --color-feedback-information-high-contrast-text: var(--color-status-blue-50);
840
+ --color-feedback-information-high-contrast-title: var(--color-base-white);
841
+ --color-feedback-error-high-background: var(--color-status-red-300);
842
+ --color-feedback-error-high-border: var(--color-status-red-300);
843
+ --color-feedback-error-high-icon: var(--color-status-red-900);
844
+ --color-feedback-error-high-text: var(--color-status-red-900);
845
+ --color-feedback-error-low-background: var(--color-status-red-50);
846
+ --color-feedback-error-low-border: var(--color-status-red-600);
847
+ --color-feedback-error-low-border-subtle: var(--color-status-red-100);
848
+ --color-feedback-error-low-icon: var(--color-status-red-600);
849
+ --color-feedback-error-low-text: var(--color-status-red-600);
850
+ --color-feedback-error-high-contrast-background: var(--color-status-red-600);
851
+ --color-feedback-error-high-contrast-border: var(--color-status-red-600);
852
+ --color-feedback-error-high-contrast-icon: var(--color-base-white);
853
+ --color-feedback-error-high-contrast-text: var(--color-status-red-50);
854
+ --color-feedback-error-high-contrast-title: var(--color-base-white);
855
+ --color-feedback-neutral-high-background: var(--color-gray-ocean-250);
856
+ --color-feedback-neutral-high-border: var(--color-gray-ocean-250);
857
+ --color-feedback-neutral-high-icon: var(--color-gray-ocean-800);
858
+ --color-feedback-neutral-high-text: var(--color-gray-ocean-800);
859
+ --color-feedback-neutral-low-background: var(--color-gray-ocean-50);
860
+ --color-feedback-neutral-low-border: var(--color-gray-ocean-450);
861
+ --color-feedback-neutral-low-border-subtle: var(--color-gray-ocean-100);
862
+ --color-feedback-neutral-low-icon: var(--color-gray-ocean-450);
863
+ --color-feedback-neutral-low-text: var(--color-gray-ocean-450);
864
+ --color-feedback-neutral-high-contrast-background: var(--color-gray-ocean-450);
865
+ --color-feedback-neutral-high-contrast-border: var(--color-gray-ocean-450);
866
+ --color-feedback-neutral-high-contrast-icon: var(--color-base-white);
867
+ --color-feedback-neutral-high-contrast-text: var(--color-gray-ocean-50);
868
+ --color-feedback-neutral-high-contrast-title: var(--color-base-white);
869
+ --color-feedback-warning-high-background: var(--color-status-yellow-500);
870
+ --color-feedback-warning-high-border: var(--color-status-yellow-500);
871
+ --color-feedback-warning-high-icon: var(--color-status-yellow-900);
872
+ --color-feedback-warning-high-text: var(--color-status-yellow-900);
873
+ --color-feedback-warning-low-background: var(--color-status-yellow-50);
874
+ --color-feedback-warning-low-border: var(--color-status-yellow-700);
875
+ --color-feedback-warning-low-border-subtle: var(--color-status-yellow-100);
876
+ --color-feedback-warning-low-icon: var(--color-status-yellow-700);
877
+ --color-feedback-warning-low-text: var(--color-status-yellow-700);
878
+ --color-feedback-warning-high-contrast-background: var(--color-status-yellow-700);
879
+ --color-feedback-warning-high-contrast-border: var(--color-status-yellow-700);
880
+ --color-feedback-warning-high-contrast-icon: var(--color-base-white);
881
+ --color-feedback-warning-high-contrast-text: var(--color-status-yellow-50);
882
+ --color-feedback-warning-high-contrast-title: var(--color-base-white);
883
+ --color-feedback-success-high-background: var(--color-status-green-400);
884
+ --color-feedback-success-high-border: var(--color-status-green-400);
885
+ --color-feedback-success-high-icon: var(--color-status-green-800);
886
+ --color-feedback-success-high-text: var(--color-status-green-800);
887
+ --color-feedback-success-low-background: var(--color-status-green-50);
888
+ --color-feedback-success-low-border: var(--color-status-green-600);
889
+ --color-feedback-success-low-border-subtle: var(--color-status-green-100);
890
+ --color-feedback-success-low-icon: var(--color-status-green-600);
891
+ --color-feedback-success-low-text: var(--color-status-green-600);
892
+ --color-feedback-success-high-contrast-background: var(--color-status-green-600);
893
+ --color-feedback-success-high-contrast-border: var(--color-status-green-600);
894
+ --color-feedback-success-high-contrast-icon: var(--color-base-white);
895
+ --color-feedback-success-high-contrast-text: var(--color-status-green-50);
896
+ --color-feedback-success-high-contrast-title: var(--color-base-white);
897
+ --color-focus-brand: var(--color-petrol-600);
898
+ --color-rainbow-1-background: var(--color-amber-50);
899
+ --color-rainbow-1-border: var(--color-amber-700);
900
+ --color-rainbow-1-border-light: var(--color-amber-100);
901
+ --color-rainbow-1-icon: var(--color-amber-700);
902
+ --color-rainbow-1-text: var(--color-amber-700);
903
+ --color-rainbow-2-background: var(--color-orange-50);
904
+ --color-rainbow-2-border: var(--color-orange-700);
905
+ --color-rainbow-2-border-light: var(--color-orange-100);
906
+ --color-rainbow-2-icon: var(--color-orange-700);
907
+ --color-rainbow-2-text: var(--color-orange-700);
908
+ --color-rainbow-3-background: var(--color-yellow-50);
909
+ --color-rainbow-3-border: var(--color-yellow-800);
910
+ --color-rainbow-3-border-light: var(--color-yellow-200);
911
+ --color-rainbow-3-icon: var(--color-yellow-800);
912
+ --color-rainbow-3-text: var(--color-yellow-800);
913
+ --color-rainbow-4-background: var(--color-red-50);
914
+ --color-rainbow-4-border: var(--color-red-500);
915
+ --color-rainbow-4-border-light: var(--color-red-100);
916
+ --color-rainbow-4-icon: var(--color-red-500);
917
+ --color-rainbow-4-text: var(--color-red-500);
918
+ --color-rainbow-5-background: var(--color-turquoise-50);
919
+ --color-rainbow-5-border: var(--color-turquoise-800);
920
+ --color-rainbow-5-border-light: var(--color-turquoise-100);
921
+ --color-rainbow-5-icon: var(--color-turquoise-800);
922
+ --color-rainbow-5-text: var(--color-turquoise-800);
923
+ --color-rainbow-6-background: var(--color-crimson-50);
924
+ --color-rainbow-6-border: var(--color-crimson-400);
925
+ --color-rainbow-6-border-light: var(--color-crimson-100);
926
+ --color-rainbow-6-icon: var(--color-crimson-400);
927
+ --color-rainbow-6-text: var(--color-crimson-400);
928
+ --color-rainbow-7-background: var(--color-green-50);
929
+ --color-rainbow-7-border: var(--color-green-600);
930
+ --color-rainbow-7-border-light: var(--color-green-100);
931
+ --color-rainbow-7-icon: var(--color-green-600);
932
+ --color-rainbow-7-text: var(--color-green-600);
933
+ --color-rainbow-8-background: var(--color-petrol-50);
934
+ --color-rainbow-8-border: var(--color-petrol-600);
935
+ --color-rainbow-8-border-light: var(--color-petrol-100);
936
+ --color-rainbow-8-icon: var(--color-petrol-600);
937
+ --color-rainbow-8-text: var(--color-petrol-600);
938
+ --color-rainbow-9-background: var(--color-lime-50);
939
+ --color-rainbow-9-border: var(--color-lime-700);
940
+ --color-rainbow-9-border-light: var(--color-lime-100);
941
+ --color-rainbow-9-icon: var(--color-lime-700);
942
+ --color-rainbow-9-text: var(--color-lime-700);
943
+ --color-rainbow-10-background: var(--color-gray-ocean-75);
944
+ --color-rainbow-10-border: var(--color-gray-ocean-500);
945
+ --color-rainbow-10-border-light: var(--color-gray-ocean-150);
946
+ --color-rainbow-10-icon: var(--color-gray-ocean-500);
947
+ --color-rainbow-10-text: var(--color-gray-ocean-500);
948
+ --color-dont-use-border: var(--color-gray-ocean-150);
949
+ --color-dont-use-content: var(--color-gray-ocean-150);
950
+ --color-dont-use-background: var(--color-gray-ocean-50);
951
+ --components-button-lower-background: var(--color-interaction-container-neutral-background);
952
+ --components-button-gr-as-complementary-background: var(--color-gray-ocean-200);
953
+ --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-300);
954
+ --components-button-gr-as-complementary-text: var(--color-base-black);
955
+ --components-button-gr-as-complementary-text-hover: var(--color-base-black);
956
+ --components-button-gr-as-complementary-icon: var(--color-base-black);
957
+ --components-button-gr-as-complementary-icon-hover: var(--color-base-black);
958
+ --components-form-field-background-checked: var(--color-petrol-600);
959
+ --components-form-shape-background-default: var(--color-gray-ocean-75);
960
+ --components-form-shape-background-hover: var(--color-gray-ocean-100);
961
+ --components-form-shape-background-disabled: var(--color-gray-ocean-75);
962
+ --components-form-shape-background-selected: var(--color-petrol-600);
963
+ --components-form-shape-foreground-default: var(--color-base-white);
964
+ --components-loader-white-foreground: var(--color-base-white);
965
+ --components-loader-brand-background: var(--color-petrol-50);
966
+ --components-loader-brand-foreground: var(--color-petrol-500);
967
+ --components-button-destructive-medium-background-hover: var(--color-status-red-50);
968
+ --components-button-destructive-medium-text: var(--color-status-red-500);
969
+ --components-button-destructive-medium-text-hover: var(--color-status-red-600);
970
+ --components-button-destructive-medium-icon: var(--color-status-red-500);
971
+ --components-button-destructive-medium-icon-hover: var(--color-status-red-600);
972
+ --components-button-destructive-medium-border: var(--color-status-red-500);
973
+ --components-button-destructive-medium-border-hover: var(--color-status-red-600);
974
+ --components-button-destructive-low-background-hover: var(--color-status-red-50);
975
+ --components-button-destructive-low-text: var(--color-status-red-500);
976
+ --components-button-destructive-low-text-hover: var(--color-status-red-600);
977
+ --components-button-destructive-low-icon: var(--color-status-red-500);
978
+ --components-button-destructive-low-icon-hover: var(--color-status-red-600);
979
+ --components-button-destructive-high-background: var(--color-status-red-500);
980
+ --components-button-destructive-high-background-hover: var(--color-status-red-600);
981
+ --components-button-destructive-high-text: var(--color-base-white);
982
+ --components-button-destructive-high-text-hover: var(--color-base-white);
983
+ --components-button-destructive-high-icon: var(--color-base-white);
984
+ --components-button-destructive-high-icon-hover: var(--color-base-white);
985
+ --components-overlay-background: var(--color-gray-ocean-850);
986
+ --components-datagrid-header-background: var(--color-interaction-container-neutral-background);
987
+ --components-datagrid-body-background-default: var(--color-interaction-container-neutral-background);
988
+ --components-field-time-background-default: var(--color-interaction-container-neutral-background);
989
+ --components-list-select-option-background-default: var(--color-interaction-container-neutral-background);
990
+ --components-list-select-option-background-disabled: var(--color-interaction-container-neutral-background);
991
+ --components-list-dropdown-item-background-default: var(--color-interaction-container-neutral-background);
992
+ --components-list-dropdown-item-background-disabled: var(--color-interaction-container-neutral-background);
993
+ --components-list-dropdown-group-title-background: var(--color-transparent);
994
+ --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
995
+ --components-popover-background: var(--color-gray-ocean-00);
996
+ --components-splitter-old-background: var(--color-interaction-container-neutral-background);
997
+ --components-splitter-old-border: var(--color-transparent);
998
+ --components-tooltip-background: var(--color-gray-ocean-900);
999
+ --components-tooltip-border: var(--color-gray-ocean-900);
1000
+ --components-toggle-border-default: var(--color-gray-spark-300);
1001
+ --components-toggle-border-hover: var(--color-gray-ocean-400);
1002
+ --components-toggle-border-disabled: var(--color-gray-ocean-150);
1003
+ --components-toggle-border-disabled-checked: var(--color-gray-ocean-150);
1004
+ --components-toggle-background-disabled: var(--color-gray-ocean-150);
1005
+ --components-toggle-background-disabled-checked: var(--color-gray-ocean-150);
1006
+ --components-toggle-shape-default: var(--color-gray-ocean-300);
1007
+ --components-toggle-shape-hover: var(--color-gray-ocean-400);
1008
+ --color-interaction-container-neutral-background-hover: var(--color-level-10-background);
1009
+ --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
1010
+ --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
1011
+ --color-interaction-container-neutral-icon: var(--color-content-low-text);
1012
+ --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
1013
+ --color-interaction-container-neutral-text: var(--color-content-low-text);
1014
+ --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
1015
+ --color-interaction-container-branded-low-background: var(--color-level-00-background);
1016
+ --color-interaction-link-high-icon-inactive: var(--color-content-low-icon);
1017
+ --color-interaction-link-high-text-disabled: var(--color-content-low-text);
1018
+ --color-interaction-link-low-icon: var(--color-content-high-text);
1019
+ --color-interaction-link-low-icon-disabled: var(--color-content-low-icon);
1020
+ --color-interaction-link-low-text: var(--color-content-high-text);
1021
+ --color-interaction-link-low-text-disabled: var(--color-content-low-text);
1022
+ --color-interaction-link-inverted-icon: var(--color-content-inverted-medium-icon);
1023
+ --color-interaction-link-inverted-icon-disabled: var(--color-content-inverted-low-icon);
1024
+ --color-interaction-link-inverted-text: var(--color-content-inverted-medium-text);
1025
+ --color-interaction-link-inverted-text-inactive: var(--color-content-inverted-low-text);
1026
+ --color-focus-background: var(--color-level-00-background);
1027
+ --color-focus-background-inverted: var(--color-level-inverted-00-background);
1028
+ --color-focus-destructive: var(--color-feedback-error-high-border);
1029
+ --color-focus-destructive-in-field: var(--color-feedback-error-low-border);
1030
+ --color-focus-success: var(--color-feedback-success-low-border);
1031
+ --components-button-high-background: var(--color-interaction-container-branded-high-background);
1032
+ --components-button-high-background-active: var(--color-interaction-container-branded-high-background-active);
1033
+ --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
1034
+ --components-button-high-text: var(--color-interaction-container-branded-high-text);
1035
+ --components-button-high-text-active: var(--color-interaction-container-branded-high-text-active);
1036
+ --components-button-high-text-hover: var(--color-interaction-container-branded-high-text-hover);
1037
+ --components-button-high-icon: var(--color-interaction-container-branded-high-icon);
1038
+ --components-button-high-icon-active: var(--color-interaction-container-branded-high-icon-active);
1039
+ --components-button-high-icon-hover: var(--color-interaction-container-branded-high-icon-hover);
1040
+ --components-button-low-background-active: var(--color-interaction-container-branded-low-background-active);
1041
+ --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
1042
+ --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
1043
+ --components-button-low-icon-active: var(--color-interaction-container-branded-low-icon-active);
1044
+ --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
1045
+ --components-button-low-text: var(--color-interaction-container-branded-low-text);
1046
+ --components-button-low-text-active: var(--color-interaction-container-branded-low-text-active);
1047
+ --components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
1048
+ --components-button-lower-background-active: var(--color-interaction-container-neutral-background-active);
1049
+ --components-button-lower-icon-active: var(--color-interaction-container-neutral-icon-active);
1050
+ --components-button-lower-text-active: var(--color-interaction-container-neutral-text-active);
1051
+ --components-button-medium-background-active: var(--color-interaction-container-branded-low-background-active);
1052
+ --components-button-medium-background-hover: var(--color-interaction-container-branded-low-background-hover);
1053
+ --components-button-medium-border: var(--color-interaction-container-branded-low-border);
1054
+ --components-button-medium-border-active: var(--color-interaction-container-branded-low-border-hover);
1055
+ --components-button-medium-border-hover: var(--color-interaction-container-branded-low-border-hover);
1056
+ --components-button-medium-icon: var(--color-interaction-container-branded-low-icon);
1057
+ --components-button-medium-icon-active: var(--color-interaction-container-branded-low-icon-active);
1058
+ --components-button-medium-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
1059
+ --components-button-medium-text: var(--color-interaction-container-branded-low-text);
1060
+ --components-button-medium-text-active: var(--color-interaction-container-branded-low-text-active);
1061
+ --components-button-medium-text-hover: var(--color-interaction-container-branded-low-text-hover);
1062
+ --components-form-text-required: var(--color-feedback-error-low-icon);
1063
+ --components-form-text-info-icon: var(--color-content-low-text);
1064
+ --components-form-text-label-default: var(--color-content-high-text);
1065
+ --components-form-text-label-disabled: var(--color-content-medium-text);
1066
+ --components-form-text-description-default: var(--color-content-low-text);
1067
+ --components-form-text-description-error: var(--color-feedback-error-low-icon);
1068
+ --components-form-field-background-default: var(--color-level-00-background);
1069
+ --components-form-field-background-focus: var(--color-level-00-background);
1070
+ --components-form-field-background-hover: var(--color-level-05-background);
1071
+ --components-form-field-background-disabled: var(--color-level-10-background);
1072
+ --components-form-field-background-error: var(--color-feedback-error-low-border);
1073
+ --components-form-field-background-readonly: var(--color-level-05-background);
1074
+ --components-form-field-border-default: var(--color-content-medium-border);
1075
+ --components-form-field-border-disabled: var(--color-content-medium-border);
1076
+ --components-form-field-border-hover: var(--color-content-high-border);
1077
+ --components-form-field-border-focus: var(--color-focus-brand);
1078
+ --components-form-field-border-error: var(--color-feedback-error-low-border);
1079
+ --components-form-field-border-success: var(--color-feedback-success-low-border);
1080
+ --components-form-field-border-readonly: var(--color-content-low-border);
1081
+ --components-form-field-content-placeholder: var(--color-content-low-text);
1082
+ --components-form-field-content-text: var(--color-content-high-text);
1083
+ --components-form-field-icon-default: var(--color-content-low-text);
1084
+ --components-form-field-icon-disabled: var(--color-content-medium-border);
1085
+ --components-form-field-icon-error: var(--color-feedback-error-low-icon);
1086
+ --components-form-field-icon-success: var(--color-feedback-success-low-icon);
1087
+ --components-form-shape-background-error: var(--color-feedback-error-low-icon);
1088
+ --components-form-shape-border-default: var(--color-content-medium-border);
1089
+ --components-form-shape-border-hover: var(--color-content-high-border);
1090
+ --components-form-shape-border-focus: var(--color-focus-brand);
1091
+ --components-form-shape-border-error: var(--color-feedback-error-low-border);
1092
+ --components-form-shape-border-success: var(--color-feedback-success-low-border);
1093
+ --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
1094
+ --components-form-shape-foreground-disabled-error: var(--color-feedback-error-low-icon);
1095
+ --components-button-destructive-lower-background: var(--color-dont-use-background);
1096
+ --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
1097
+ --components-button-destructive-lower-text: var(--color-dont-use-content);
1098
+ --components-button-destructive-lower-text-hover: var(--color-dont-use-content);
1099
+ --components-button-destructive-lower-icon: var(--color-dont-use-content);
1100
+ --components-button-destructive-lower-icon-hover: var(--color-dont-use-content);
1101
+ --components-button-destructive-lower-border: var(--color-dont-use-border);
1102
+ --components-button-destructive-lower-border-hover: var(--color-dont-use-border);
1103
+ --components-alert-information-background: var(--color-feedback-information-low-background);
1104
+ --components-alert-information-icon: var(--color-feedback-information-low-icon);
1105
+ --components-alert-information-border: var(--color-feedback-information-low-border);
1106
+ --components-alert-content-description: var(--color-content-medium-text);
1107
+ --components-alert-content-title: var(--color-content-high-text);
1108
+ --components-alert-warning-background: var(--color-feedback-warning-low-background);
1109
+ --components-alert-warning-border: var(--color-feedback-warning-low-border);
1110
+ --components-alert-warning-icon: var(--color-feedback-warning-low-icon);
1111
+ --components-alert-error-background: var(--color-feedback-error-low-background);
1112
+ --components-alert-error-border: var(--color-feedback-error-low-border);
1113
+ --components-alert-error-icon: var(--color-feedback-error-low-icon);
1114
+ --components-alert-success-background: var(--color-feedback-success-low-background);
1115
+ --components-alert-success-border: var(--color-feedback-success-low-border);
1116
+ --components-alert-success-icon: var(--color-feedback-success-low-icon);
1117
+ --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
1118
+ --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
1119
+ --components-alert-neutral-icon: var(--color-feedback-neutral-low-icon);
1120
+ --components-avatar-background-1: var(--color-rainbow-1-background);
1121
+ --components-avatar-background-2: var(--color-rainbow-2-background);
1122
+ --components-avatar-background-3: var(--color-rainbow-3-background);
1123
+ --components-avatar-background-4: var(--color-rainbow-4-background);
1124
+ --components-avatar-background-5: var(--color-rainbow-5-background);
1125
+ --components-avatar-background-6: var(--color-rainbow-6-background);
1126
+ --components-avatar-background-7: var(--color-rainbow-7-background);
1127
+ --components-avatar-background-8: var(--color-rainbow-8-background);
1128
+ --components-avatar-background-9: var(--color-rainbow-9-background);
1129
+ --components-avatar-background-10: var(--color-rainbow-10-background);
1130
+ --components-avatar-border-1: var(--color-rainbow-1-border);
1131
+ --components-avatar-border-2: var(--color-rainbow-2-border);
1132
+ --components-avatar-border-3: var(--color-rainbow-3-border);
1133
+ --components-avatar-border-4: var(--color-rainbow-4-border);
1134
+ --components-avatar-border-5: var(--color-rainbow-5-border);
1135
+ --components-avatar-border-6: var(--color-rainbow-6-border);
1136
+ --components-avatar-border-7: var(--color-rainbow-7-border);
1137
+ --components-avatar-border-8: var(--color-rainbow-8-border);
1138
+ --components-avatar-border-9: var(--color-rainbow-9-border);
1139
+ --components-avatar-border-10: var(--color-rainbow-10-border);
1140
+ --components-avatar-content-1: var(--color-rainbow-1-icon);
1141
+ --components-avatar-content-2: var(--color-rainbow-2-icon);
1142
+ --components-avatar-content-3: var(--color-rainbow-3-icon);
1143
+ --components-avatar-content-4: var(--color-rainbow-4-icon);
1144
+ --components-avatar-content-5: var(--color-rainbow-5-icon);
1145
+ --components-avatar-content-6: var(--color-rainbow-6-icon);
1146
+ --components-avatar-content-7: var(--color-rainbow-7-text);
1147
+ --components-avatar-content-8: var(--color-rainbow-8-text);
1148
+ --components-avatar-content-9: var(--color-rainbow-9-text);
1149
+ --components-avatar-content-10: var(--color-rainbow-10-icon);
1150
+ --components-breadcrumb-text-hover: var(--color-interaction-link-low-text-hover);
1151
+ --components-buttongroup-high-border: var(--color-interaction-container-branded-high-border);
1152
+ --components-buttongroup-high-background: var(--color-interaction-container-branded-high-background);
1153
+ --components-buttongroup-medium-border: var(--color-interaction-container-branded-low-border);
1154
+ --components-buttongroup-low-border: var(--color-interaction-container-branded-low-border);
1155
+ --components-datagrid-header-border: var(--color-content-medium-border);
1156
+ --components-datagrid-header-text: var(--color-content-high-text);
1157
+ --components-datagrid-body-border: var(--color-content-low-border);
1158
+ --components-datagrid-body-text: var(--color-content-medium-text);
1159
+ --components-datagrid-body-subtext: var(--color-content-low-text);
1160
+ --components-datagrid-body-background-active: var(--color-interaction-container-neutral-background-active);
1161
+ --components-datagrid-expander-content-background: var(--color-level-00-background);
1162
+ --components-datagrid-expander-border: var(--color-content-low-border);
1163
+ --components-datagrid-expander-expander-background: var(--color-level-10-background);
1164
+ --components-field-time-background-active: var(--color-interaction-container-neutral-background-active);
1165
+ --components-field-time-text-active: var(--color-interaction-container-neutral-text-active);
1166
+ --components-field-time-border-active: var(--color-interaction-container-neutral-icon-active);
1167
+ --components-calendar-border: var(--color-content-low-border);
1168
+ --components-calendar-header-text: var(--color-content-high-text);
1169
+ --components-calendar-weeks-background: var(--color-level-10-background);
1170
+ --components-calendar-weeks-background-hover: var(--color-level-15-background);
1171
+ --components-calendar-weeks-text: var(--color-content-high-text);
1172
+ --components-calendar-weeks-text-hover: var(--color-content-high-text);
1173
+ --components-calendar-cell-background-selected: var(--color-interaction-container-branded-high-background-active);
1174
+ --components-calendar-cell-background-in-range: var(--color-interaction-container-branded-low-background-active);
1175
+ --components-calendar-cell-background-hover: var(--color-interaction-container-branded-low-background-hover);
1176
+ --components-calendar-cell-dot: var(--color-content-high-icon);
1177
+ --components-calendar-cell-dot-selected: var(--color-interaction-container-branded-high-icon-active);
1178
+ --components-calendar-cell-dot-hover: var(--color-interaction-container-branded-high-icon-hover);
1179
+ --components-calendar-cell-text-selected: var(--color-interaction-container-branded-high-text-active);
1180
+ --components-calendar-cell-text-in-range: var(--color-interaction-container-branded-low-text-active);
1181
+ --components-calendar-cell-text-outside-month: var(--color-content-lower-text);
1182
+ --components-calendar-cell-text-today: var(--color-content-high-text);
1183
+ --components-calendar-background: var(--color-level-00-background);
1184
+ --components-list-select-background: var(--color-level-00-background);
1185
+ --components-list-select-option-content-default: var(--color-content-medium-text);
1186
+ --components-list-select-option-content-hover: var(--color-content-high-text);
1187
+ --components-list-select-option-content-disabled: var(--color-content-lower-text);
1188
+ --components-list-select-option-content-active: var(--color-interaction-container-neutral-text-active);
1189
+ --components-list-select-option-background-active: var(--color-interaction-container-neutral-background-active);
1190
+ --components-list-select-optgroup-content: var(--color-content-lower-text);
1191
+ --components-list-select-border: var(--color-content-low-border);
1192
+ --components-list-select-hr: var(--color-content-low-border);
1193
+ --components-list-dropdown-background: var(--color-level-00-background);
1194
+ --components-list-dropdown-header-background: var(--color-level-10-background);
1195
+ --components-list-dropdown-item-border-active: var(--color-interaction-container-neutral-border-active);
1196
+ --components-list-dropdown-item-label-default: var(--color-content-medium-text);
1197
+ --components-list-dropdown-item-label-hover: var(--color-content-high-text);
1198
+ --components-list-dropdown-item-label-disabled: var(--color-content-low-text);
1199
+ --components-list-dropdown-item-label-active: var(--color-content-low-text);
1200
+ --components-list-dropdown-item-description-default: var(--color-content-low-text);
1201
+ --components-list-dropdown-item-description-hover: var(--color-content-medium-text);
1202
+ --components-list-dropdown-item-description-disabled: var(--color-content-lower-text);
1203
+ --components-list-dropdown-item-background-active: var(--color-interaction-container-neutral-background-active);
1204
+ --components-list-dropdown-group-title-content: var(--color-content-medium-text);
1205
+ --components-list-dropdown-separator: var(--color-content-low-border);
1206
+ --components-list-dropdown-border: var(--color-content-low-border);
1207
+ --components-menu-contextual-background: var(--color-level-00-background);
1208
+ --components-menu-contextual-border: var(--color-content-low-border);
1209
+ --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
1210
+ --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
1211
+ --components-notification-information-background: var(--color-level-00-background);
1212
+ --components-notification-information-icon: var(--color-feedback-information-low-icon);
1213
+ --components-notification-information-border: var(--color-feedback-information-low-border);
1214
+ --components-notification-content-description: var(--color-content-medium-text);
1215
+ --components-notification-content-timestamp: var(--color-content-medium-text);
1216
+ --components-notification-content-title: var(--color-content-high-text);
1217
+ --components-notification-warning-background: var(--color-level-00-background);
1218
+ --components-notification-warning-border: var(--color-feedback-warning-low-border);
1219
+ --components-notification-warning-icon: var(--color-feedback-warning-low-icon);
1220
+ --components-notification-error-background: var(--color-level-00-background);
1221
+ --components-notification-error-border: var(--color-feedback-error-low-border);
1222
+ --components-notification-error-icon: var(--color-feedback-error-low-icon);
1223
+ --components-notification-success-background: var(--color-level-00-background);
1224
+ --components-notification-success-border: var(--color-feedback-success-low-border);
1225
+ --components-notification-success-icon: var(--color-feedback-success-low-icon);
1226
+ --components-notification-neutral-background: var(--color-level-00-background);
1227
+ --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
1228
+ --components-notification-neutral-icon: var(--color-feedback-neutral-low-icon);
1229
+ --components-popover-border: var(--color-content-low-border);
1230
+ --components-popover-text: var(--color-content-medium-text);
1231
+ --components-popover-supporting-text: var(--color-content-low-text);
1232
+ --components-sidebar-background: var(--color-level-00-background);
1233
+ --components-sidebar-divider: var(--color-content-low-border);
1234
+ --components-sidebar-border: var(--color-content-low-border);
1235
+ --components-slider-track-background: var(--color-content-low-border);
1236
+ --components-slider-handler-background-focus: var(--components-form-field-background-checked);
1237
+ --components-slider-handler-border-focus: var(--components-form-field-background-checked);
1238
+ --components-splitter-old-background-active: var(--color-interaction-container-neutral-background-active);
1239
+ --components-splitter-old-border-active: var(--color-interaction-container-neutral-border-active);
1240
+ --components-splitter-line-background: var(--color-level-10-background);
1241
+ --components-splitter-line-background-active: var(--color-interaction-container-branded-high-background-active);
1242
+ --components-splitter-line-background-hover: var(--color-interaction-container-branded-low-background-active);
1243
+ --components-splitter-handle-background: var(--color-content-low-border);
1244
+ --components-splitter-handle-background-active: var(--color-interaction-container-branded-high-background-active);
1245
+ --components-splitter-handle-background-hover: var(--color-interaction-container-branded-high-background-active);
1246
+ --components-tooltip-text: var(--color-content-inverted-high-text);
1247
+ --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
1248
+ --components-toggle-border-default-checked: var(--color-interaction-container-branded-high-border);
1249
+ --components-toggle-border-hover-checked: var(--color-interaction-container-branded-high-border-hover);
1250
+ --components-toggle-background-default-checked: var(--color-interaction-container-branded-high-background);
1251
+ --components-toggle-background-hover-checked: var(--color-interaction-container-branded-high-background-hover);
1252
+ --components-toggle-shape-default-checked: var(--color-interaction-container-branded-high-icon);
1253
+ --components-toggle-shape-hover-checked: var(--color-interaction-container-branded-high-icon);
1254
+ --components-togglegroup-high-border: var(--color-interaction-container-branded-low-border);
1255
+ --components-button-lower-background-hover: var(--color-interaction-container-neutral-background-hover);
1256
+ --components-button-lower-icon: var(--color-interaction-container-neutral-icon);
1257
+ --components-button-lower-icon-hover: var(--color-interaction-container-neutral-icon-hover);
1258
+ --components-button-lower-text: var(--color-interaction-container-neutral-text);
1259
+ --components-button-lower-text-hover: var(--color-interaction-container-neutral-text-hover);
1260
+ --components-button-medium-background: var(--color-interaction-container-branded-low-background);
1261
+ --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
1262
+ --components-breadcrumb-text: var(--color-interaction-link-low-text);
1263
+ --components-breadcrumb-text-current: var(--color-interaction-link-high-text-disabled);
1264
+ --components-buttongroup-medium-background: var(--color-interaction-container-branded-low-background);
1265
+ --components-buttongroup-low-background: var(--color-interaction-container-branded-low-background);
1266
+ --components-buttongroup-lower-border: var(--color-interaction-container-neutral-border);
1267
+ --components-buttongroup-lower-background: var(--color-interaction-container-branded-low-background);
1268
+ --components-datagrid-body-background-hover: var(--color-interaction-container-neutral-background-hover);
1269
+ --components-field-time-background-hover: var(--color-interaction-container-neutral-background-hover);
1270
+ --components-field-time-text-default: var(--color-interaction-container-neutral-text);
1271
+ --components-field-time-text-hover: var(--color-interaction-container-neutral-text-hover);
1272
+ --components-calendar-cell-background: var(--color-interaction-container-branded-low-background);
1273
+ --components-calendar-cell-background-today: var(--color-interaction-container-branded-low-background);
1274
+ --components-calendar-cell-text: var(--color-interaction-container-neutral-text);
1275
+ --components-calendar-cell-text-hover: var(--color-interaction-container-neutral-text-hover);
1276
+ --components-list-select-option-background-hover: var(--color-interaction-container-neutral-background-hover);
1277
+ --components-list-dropdown-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1278
+ --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
1279
+ --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
1280
+ --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
1281
+ --components-slider-track-filled-default: var(--components-form-field-border-default);
1282
+ --components-slider-track-filled-hover: var(--components-form-field-border-hover);
1283
+ --components-slider-track-filled-focus: var(--components-form-field-border-focus);
1284
+ --components-slider-track-filled-error: var(--components-form-field-border-error);
1285
+ --components-slider-track-filled-disabled: var(--components-form-field-border-disabled);
1286
+ --components-slider-track-filled-readonly: var(--components-form-field-border-readonly);
1287
+ --components-slider-handler-background-default: var(--components-form-field-background-default);
1288
+ --components-slider-handler-background-hover: var(--components-form-field-background-hover);
1289
+ --components-slider-handler-background-error: var(--components-form-field-background-error);
1290
+ --components-slider-handler-background-disabled: var(--components-form-field-background-disabled);
1291
+ --components-slider-handler-background-readonly: var(--components-form-field-background-readonly);
1292
+ --components-slider-handler-border-default: var(--components-form-field-background-default);
1293
+ --components-slider-handler-border-hover: var(--components-form-field-background-hover);
1294
+ --components-slider-handler-border-error: var(--components-form-field-background-error);
1295
+ --components-slider-handler-border-disabled: var(--components-form-field-background-disabled);
1296
+ --components-slider-handler-border-readonly: var(--components-form-field-background-readonly);
1297
+ --components-splitter-old-background-hover: var(--color-interaction-container-neutral-background-hover);
1298
+ --components-splitter-old-border-hover: var(--color-interaction-container-neutral-border-hover);
1299
+ --components-toggle-background-default: var(--color-interaction-container-branded-low-background);
1300
+ --components-toggle-background-hover: var(--color-interaction-container-neutral-background-hover);
1301
+ --components-toggle-shape-disabled: var(--color-interaction-container-neutral-icon);
1302
+ --components-toggle-shape-disabled-checked: var(--color-interaction-container-neutral-icon);
1303
+ --components-togglegroup-high-background: var(--color-interaction-container-branded-low-background);
1304
+ --components-togglegroup-low-border: var(--color-interaction-container-neutral-border);
1305
+ --components-togglegroup-low-background: var(--color-interaction-container-branded-low-background);
1306
+ }
1307
+
1308
+ /**
1309
+ * Do not edit directly, this file was auto-generated.
1310
+ */
1311
+
1312
+ :root {
1313
+ --color-base-white: #ffffff;
1314
+ --color-base-black: #000000;
1315
+ --color-amber-50: #fdefe2;
1316
+ --color-amber-100: #fbd9ba;
1317
+ --color-amber-200: #f8c392;
1318
+ --color-amber-300: #f5ac6a;
1319
+ --color-amber-400: #f39642;
1320
+ --color-amber-500: #f0801a;
1321
+ --color-amber-600: #c66a15;
1322
+ --color-amber-700: #9c5311;
1323
+ --color-amber-800: #723d0c;
1324
+ --color-amber-900: #432306;
1325
+ --color-crimson-50: #f7e9ee;
1326
+ --color-crimson-100: #e0b3c2;
1327
+ --color-crimson-200: #cf869f;
1328
+ --color-crimson-300: #bd597c;
1329
+ --color-crimson-400: #ab2d58;
1330
+ --color-crimson-500: #990035;
1331
+ --color-crimson-600: #7e002c;
1332
+ --color-crimson-700: #630022;
1333
+ --color-crimson-800: #490019;
1334
+ --color-crimson-900: #2e0010;
1335
+ --color-dark-blue-500: #447583;
1336
+ --color-dark-gray-500: #394d55;
1337
+ --color-gray-ocean-25: #fafbfb;
1338
+ --color-gray-ocean-50: #f5f6f7;
1339
+ --color-gray-ocean-75: #eaeef0;
1340
+ --color-gray-ocean-100: #e1e4e6;
1341
+ --color-gray-ocean-150: #c6ced1;
1342
+ --color-gray-ocean-200: #bac1c4;
1343
+ --color-gray-ocean-250: #9fadb2;
1344
+ --color-gray-ocean-300: #889499;
1345
+ --color-gray-ocean-350: #72858c;
1346
+ --color-gray-ocean-400: #617177;
1347
+ --color-gray-ocean-450: #3f555e;
1348
+ --color-gray-ocean-500: #394d55;
1349
+ --color-gray-ocean-550: #34464d;
1350
+ --color-gray-ocean-600: #2e3e44;
1351
+ --color-gray-ocean-650: #27353b;
1352
+ --color-gray-ocean-700: #222e33;
1353
+ --color-gray-ocean-750: #1e272b;
1354
+ --color-gray-ocean-800: #171f22;
1355
+ --color-gray-ocean-850: #11171a;
1356
+ --color-gray-ocean-900: #0b0f11;
1357
+ --color-gray-ocean-00: #ffffff;
1358
+ --color-gray-spark-25: #fbfbfb;
1359
+ --color-gray-spark-50: #f6f6f6;
1360
+ --color-gray-spark-75: #ededed;
1361
+ --color-gray-spark-100: #e3e3e3;
1362
+ --color-gray-spark-150: #cccccc;
1363
+ --color-gray-spark-200: #bfbfbf;
1364
+ --color-gray-spark-250: #a9a9a9;
1365
+ --color-gray-spark-300: #919191;
1366
+ --color-gray-spark-350: #808080;
1367
+ --color-gray-spark-400: #6d6d6d;
1368
+ --color-gray-spark-450: #4f4f4f;
1369
+ --color-gray-spark-500: #484848;
1370
+ --color-gray-spark-550: #414141;
1371
+ --color-gray-spark-600: #3a3a3a;
1372
+ --color-gray-spark-650: #313131;
1373
+ --color-gray-spark-700: #2b2b2b;
1374
+ --color-gray-spark-750: #252525;
1375
+ --color-gray-spark-800: #1d1d1d;
1376
+ --color-gray-spark-850: #161616;
1377
+ --color-gray-spark-900: #0e0e0e;
1378
+ --color-gray-spark-00: #ffffff;
1379
+ --color-green-50: #e2f0e2;
1380
+ --color-green-100: #b8dbba;
1381
+ --color-green-200: #8fc692;
1382
+ --color-green-300: #66b16a;
1383
+ --color-green-400: #3c9c41;
1384
+ --color-green-500: #138719;
1385
+ --color-green-600: #106f15;
1386
+ --color-green-700: #0c5810;
1387
+ --color-green-800: #09400c;
1388
+ --color-green-900: #062908;
1389
+ --color-lime-50: #f1f4e5;
1390
+ --color-lime-100: #dde5c1;
1391
+ --color-lime-200: #c9d69d;
1392
+ --color-lime-300: #b5c778;
1393
+ --color-lime-400: #a1b854;
1394
+ --color-lime-500: #8da930;
1395
+ --color-lime-600: #748b28;
1396
+ --color-lime-700: #5c6e1f;
1397
+ --color-lime-800: #435017;
1398
+ --color-lime-900: #2a330e;
1399
+ --color-light-blue-500: #9ac3ce;
1400
+ --color-status-blue-50: #f0f6ff;
1401
+ --color-status-blue-100: #c7dcff;
1402
+ --color-status-blue-200: #a8c9ff;
1403
+ --color-status-blue-300: #659fff;
1404
+ --color-status-blue-400: #3883ff;
1405
+ --color-status-blue-500: #2660c2;
1406
+ --color-status-blue-600: #1c4d9e;
1407
+ --color-status-blue-700: #113a80;
1408
+ --color-status-blue-800: #09285c;
1409
+ --color-status-blue-900: #001c37;
1410
+ --color-status-green-50: #eafeeb;
1411
+ --color-status-green-100: #c8facb;
1412
+ --color-status-green-200: #9ef4a3;
1413
+ --color-status-green-300: #6bde71;
1414
+ --color-status-green-400: #45d24d;
1415
+ --color-status-green-500: #34ae3b;
1416
+ --color-status-green-600: #008207;
1417
+ --color-status-green-700: #035707;
1418
+ --color-status-green-800: #003603;
1419
+ --color-status-green-900: #002302;
1420
+ --color-status-red-50: #ffeded;
1421
+ --color-status-red-100: #f5c4c4;
1422
+ --color-status-red-200: #ff8f8f;
1423
+ --color-status-red-300: #ff6161;
1424
+ --color-status-red-400: #ff3d3d;
1425
+ --color-status-red-500: #da2424;
1426
+ --color-status-red-600: #bb1919;
1427
+ --color-status-red-700: #911515;
1428
+ --color-status-red-800: #530101;
1429
+ --color-status-red-900: #380101;
1430
+ --color-status-yellow-50: #fff7df;
1431
+ --color-status-yellow-100: #fae49d;
1432
+ --color-status-yellow-200: #ffe286;
1433
+ --color-status-yellow-300: #f7d14c;
1434
+ --color-status-yellow-400: #fac50d;
1435
+ --color-status-yellow-500: #e0a917;
1436
+ --color-status-yellow-600: #b58200;
1437
+ --color-status-yellow-700: #805c00;
1438
+ --color-status-yellow-800: #4d3701;
1439
+ --color-status-yellow-900: #302300;
1440
+ --color-orange-50: #fceae3;
1441
+ --color-orange-100: #f8ccbc;
1442
+ --color-orange-200: #f4ae95;
1443
+ --color-orange-300: #ef906e;
1444
+ --color-orange-400: #eb7247;
1445
+ --color-orange-500: #e75420;
1446
+ --color-orange-600: #bf451a;
1447
+ --color-orange-700: #963715;
1448
+ --color-orange-800: #6e280f;
1449
+ --color-orange-900: #45190a;
1450
+ --color-orange-950: #371408;
1451
+ --color-petrol-50: #e4f0f2;
1452
+ --color-petrol-100: #bedce0;
1453
+ --color-petrol-200: #97c7ce;
1454
+ --color-petrol-300: #71b2bc;
1455
+ --color-petrol-400: #4b9eaa;
1456
+ --color-petrol-500: #258998;
1457
+ --color-petrol-600: #1f717d;
1458
+ --color-petrol-700: #185963;
1459
+ --color-petrol-800: #124148;
1460
+ --color-petrol-900: #0b292e;
1461
+ --color-red-50: #f9e3e3;
1462
+ --color-red-100: #f0bbbb;
1463
+ --color-red-200: #e79494;
1464
+ --color-red-300: #de6c6c;
1465
+ --color-red-400: #d54545;
1466
+ --color-red-500: #cc1d1d;
1467
+ --color-red-600: #a81818;
1468
+ --color-red-700: #851313;
1469
+ --color-red-800: #610e0e;
1470
+ --color-red-900: #3d0909;
1471
+ --color-turquoise-50: #ecf4f3;
1472
+ --color-turquoise-100: #d2e5e3;
1473
+ --color-turquoise-200: #b8d6d2;
1474
+ --color-turquoise-300: #9ec7c1;
1475
+ --color-turquoise-400: #84b8b1;
1476
+ --color-turquoise-500: #6aa9a0;
1477
+ --color-turquoise-600: #578b84;
1478
+ --color-turquoise-700: #456e68;
1479
+ --color-turquoise-800: #32504c;
1480
+ --color-turquoise-900: #1c2b28;
1481
+ --color-yellow-50: #fff7df;
1482
+ --color-yellow-100: #ffecb3;
1483
+ --color-yellow-200: #ffe286;
1484
+ --color-yellow-300: #ffd759;
1485
+ --color-yellow-400: #ffcc2d;
1486
+ --color-yellow-500: #ffc100;
1487
+ --color-yellow-600: #d29f00;
1488
+ --color-yellow-700: #a67d00;
1489
+ --color-yellow-800: #795c00;
1490
+ --color-yellow-900: #4d3a00;
1491
+ --font-family-default: TT Norms Pro;
1492
+ --font-family-mono: TT Norms Pro Mono;
1493
+ --font-family-fallback: Arial;
1494
+ --font-size-xs: 12.0000px;
1495
+ --font-size-sm: 14.0000px;
1496
+ --font-size-md: 16.0000px;
1497
+ --font-size-lg: 18.0000px;
1498
+ --font-size-xl: 20.0000px;
1499
+ --font-size-2xl: 24.0000px;
1500
+ --font-size-3xl: 30.0000px;
1501
+ --font-size-4xl: 36.0000px;
1502
+ --font-size-5xl: 48.0000px;
1503
+ --font-size-6xl: 60.0000px;
1504
+ --font-size-7xl: 72.0000px;
1505
+ --font-size-8xl: 96.0000px;
1506
+ --font-size-9xl: 128.0000px;
1507
+ --font-weight-high-emphasis: 700;
1508
+ --font-weight-medium-emphasis: 500;
1509
+ --font-weight-low-emphasis: 400;
1510
+ --font-weight-low-emphasis-400: Regular;
1511
+ --font-weight-medium-emphasis-500: Medium;
1512
+ --font-weight-high-emphasis-700: Bold;
1513
+ --leading-px-3: 12.0000px;
1514
+ --leading-px-4: 16.0000px;
1515
+ --leading-px-5: 20.0000px;
1516
+ --leading-px-6: 24.0000px;
1517
+ --leading-px-7: 28.0000px;
1518
+ --leading-px-8: 32.0000px;
1519
+ --leading-px-9: 36.0000px;
1520
+ --leading-px-10: 40.0000px;
1521
+ --leading-none: 1.0000px;
1522
+ --leading-tight: 1.2500px;
1523
+ --leading-snug: 1.3750px;
1524
+ --leading-normal: 1.5000px;
1525
+ --leading-relaxed: 1.6250px;
1526
+ --leading-loose: 2.0000px;
1527
+ --line-height-xs: 16.0000px;
1528
+ --line-height-sm: 20.0000px;
1529
+ --line-height-base: 24.0000px;
1530
+ --line-height-lg: 28.0000px;
1531
+ --line-height-xl: 30.0000px;
1532
+ --line-height-2xl: 32.0000px;
1533
+ --line-height-3xl: 36.0000px;
1534
+ --line-height-4xl: 40.0000px;
1535
+ --line-height-5xl: 48.0000px;
1536
+ --line-height-6xl: 60.0000px;
1537
+ --line-height-7xl: 72.0000px;
1538
+ --line-height-8xl: 96.0000px;
1539
+ --line-height-9xl: 128.0000px;
1540
+ --radius-rounded-none: 0.0000px;
1541
+ --radius-rounded-sm: 2.0000px;
1542
+ --radius-rounded: 4.0000px;
1543
+ --radius-rounded-md: 6.0000px;
1544
+ --radius-rounded-lg: 8.0000px;
1545
+ --radius-rounded-xl: 12.0000px;
1546
+ --radius-rounded-2xl: 16.0000px;
1547
+ --radius-rounded-3xl: 24.0000px;
1548
+ --radius-rounded-full: 9999.0000px;
1549
+ --spacing-0: 0.0000px;
1550
+ --spacing-1: 4.0000px;
1551
+ --spacing-2: 8.0000px;
1552
+ --spacing-3: 12.0000px;
1553
+ --spacing-4: 16.0000px;
1554
+ --spacing-5: 20.0000px;
1555
+ --spacing-6: 24.0000px;
1556
+ --spacing-7: 28.0000px;
1557
+ --spacing-8: 32.0000px;
1558
+ --spacing-9: 36.0000px;
1559
+ --spacing-10: 40.0000px;
1560
+ --spacing-11: 44.0000px;
1561
+ --spacing-12: 48.0000px;
1562
+ --spacing-14: 56.0000px;
1563
+ --spacing-16: 64.0000px;
1564
+ --spacing-20: 80.0000px;
1565
+ --spacing-24: 96.0000px;
1566
+ --spacing-28: 112.0000px;
1567
+ --spacing-32: 128.0000px;
1568
+ --spacing-36: 144.0000px;
1569
+ --spacing-40: 160.0000px;
1570
+ --spacing-44: 176.0000px;
1571
+ --spacing-48: 192.0000px;
1572
+ --spacing-52: 208.0000px;
1573
+ --spacing-56: 224.0000px;
1574
+ --spacing-60: 240.0000px;
1575
+ --spacing-64: 256.0000px;
1576
+ --spacing-72: 288.0000px;
1577
+ --spacing-80: 320.0000px;
1578
+ --spacing-96: 384.0000px;
1579
+ --spacing-px: 1.0000px;
1580
+ --spacing-0-5: 2.0000px;
1581
+ --spacing-1-5: 6.0000px;
1582
+ --spacing-2-5: 10.0000px;
1583
+ --spacing-3-5: 14.0000px;
1584
+ --letter-spacing-heading-xs: 0.0000px;
1585
+ --letter-spacing-heading-sm: -0.2500px;
1586
+ --letter-spacing-heading-md: -0.5000px;
1587
+ --letter-spacing-heading-lg: -0.7500px;
1588
+ --letter-spacing-heading-xl: -1.0000px;
1589
+ }
1590
+
1591
+ /**
1592
+ * Do not edit directly, this file was auto-generated.
1593
+ */
1594
+
1595
+ :root {
1596
+ --avatar-xs-font-size: 10.0000px;
1597
+ --avatar-sm-font-size: 13.0000px;
1598
+ --avatar-md-font-size: 18.0000px;
1599
+ --avatar-lg-font-size: 22.0000px;
1600
+ --avatar-xl-font-size: 28.0000px;
1601
+ --buttongroup-xs-padding: 2.0000px;
1602
+ --buttongroup-xs-button-radius: 1.0000px;
1603
+ --buttongroup-sm-button-padding-y: 4.0000px;
1604
+ --buttongroup-sm-button-radius: 2.0000px;
1605
+ --buttongroup-sm-padding: 2.0000px;
1606
+ --buttongroup-lg-padding: 4.0000px;
1607
+ --buttongroup-lg-button-padding-y: 6.0000px;
1608
+ --buttongroup-lg-button-radius: 4.0000px;
1609
+ --buttongroup-md-padding: 3.0000px;
1610
+ --buttongroup-md-button-padding-y: 5.0000px;
1611
+ --buttongroup-md-button-radius: 3.0000px;
1612
+ --button-xs-ring-radius: 3.0000px;
1613
+ --button-sm-ring-radius: 5.0000px;
1614
+ --button-md-ring-radius: 7.0000px;
1615
+ --button-lg-ring-radius: 9.0000px;
1616
+ --drawer-radius-bottom-right: 0.0000px;
1617
+ --drawer-radius-top-right: 0.0000px;
1618
+ --drawer-size-sm-min-width: 320.0000px;
1619
+ --drawer-size-sm-width: 400.0000px;
1620
+ --drawer-size-sm-max-width: 480.0000px;
1621
+ --drawer-size-md-min-width: 640.0000px;
1622
+ --drawer-size-md-width: 800.0000px;
1623
+ --drawer-size-md-max-width: 960.0000px;
1624
+ --drawer-size-lg-min-width: 960.0000px;
1625
+ --drawer-size-lg-width: 992.0000px;
1626
+ --drawer-size-lg-max-width: 1024.0000px;
1627
+ --drawer-size-full-width: 1372.0000px;
1628
+ --calendar-cell-dot-size: 3.0000px;
1629
+ --icon-stroke-xs: 1.2000px;
1630
+ --icon-stroke-sm: 1.4000px;
1631
+ --icon-stroke-md: 1.6000px;
1632
+ --icon-stroke-lg: 1.8000px;
1633
+ --icon-stroke-xl: 1.9000px;
1634
+ --list-select-hr-padding-x: 9.0000px;
1635
+ --list-select-hr-padding-y: 3.0000px;
1636
+ --form-field-badge-gap: 0.0000px;
1637
+ --form-max-width: 480.0000px;
1638
+ --menu-contextual-divider-padding-bottom: 3.0000px;
1639
+ --menu-contextual-item-font-weight: 500;
1640
+ --navigation-width: 312.0000px;
1641
+ --navigation-reduced-max-width: 100.0000px;
1642
+ --navigation-primary-notification-bullet-font-size: 9.0000px;
1643
+ --popover-font-weight: 500;
1644
+ --popover-shadow-1-x: 0.0000px;
1645
+ --popover-shadow-1-blur: 1.0000px;
1646
+ --popover-shadow-2-x: 0.0000px;
1647
+ --sidebar-width: 312.0000px;
1648
+ --sidebar-notification-bullet-font-size: 9.0000px;
1649
+ --sidebar-reduced-width: 68.0000px;
1650
+ --slider-tick-radius: 1.0000px;
1651
+ --splitter-old-stroke: 1.0000px;
1652
+ --togglegroup-xs-padding: 3.0000px;
1653
+ --togglegroup-xs-button-padding-y: 1.0000px;
1654
+ --togglegroup-xs-button-radius: 1.0000px;
1655
+ --togglegroup-xs-iconbutton-padding-y: 3.0000px;
1656
+ --togglegroup-sm-padding: 3.0000px;
1657
+ --togglegroup-sm-button-padding-y: 3.0000px;
1658
+ --togglegroup-sm-button-radius: 2.0000px;
1659
+ --togglegroup-sm-iconbutton-padding-y: 5.0000px;
1660
+ --togglegroup-md-padding: 3.0000px;
1661
+ --togglegroup-md-button-padding-y: 5.0000px;
1662
+ --togglegroup-md-button-radius: 3.0000px;
1663
+ --togglegroup-md-iconbutton-padding-y: 7.0000px;
1664
+ --togglegroup-lg-padding: 3.0000px;
1665
+ --togglegroup-lg-button-padding-y: 7.0000px;
1666
+ --togglegroup-lg-button-radius: 5.0000px;
1667
+ --togglegroup-lg-iconbutton-padding-y: 9.0000px;
1668
+ --tooltip-font-weight: 500;
1669
+ --global-typography-h1-font-style: normal;
1670
+ --global-typography-h2-font-style: normal;
1671
+ --global-typography-h3-font-style: normal;
1672
+ --global-typography-h4-font-style: normal;
1673
+ --global-typography-h6-font-style: normal;
1674
+ --global-typography-h5-font-style: normal;
1675
+ --global-typography-p-font-style: normal;
1676
+ --global-typography-small-font-style: normal;
1677
+ --global-typography-label-font-style: normal;
1678
+ --global-typography-legend-font-style: uppercase;
2079
1679
  --avatar-xs-icon-size: var(--spacing-4);
1680
+ --avatar-xs-size: var(--spacing-6);
1681
+ --avatar-sm-icon-size: var(--spacing-5);
1682
+ --avatar-sm-size: var(--spacing-8);
1683
+ --avatar-md-icon-size: var(--spacing-7);
1684
+ --avatar-md-size: var(--spacing-10);
1685
+ --avatar-lg-icon-size: var(--spacing-8);
1686
+ --avatar-lg-size: var(--spacing-12);
1687
+ --avatar-xl-icon-size: var(--spacing-11);
1688
+ --avatar-xl-size: var(--spacing-16);
1689
+ --buttongroup-xs-button-padding-y: var(--spacing-0-5);
1690
+ --buttongroup-xs-radius: var(--radius-rounded-sm);
1691
+ --buttongroup-xs-gap: var(--spacing-px);
1692
+ --buttongroup-xs-height: var(--spacing-6);
1693
+ --buttongroup-sm-radius: var(--radius-rounded);
1694
+ --buttongroup-sm-gap: var(--spacing-px);
1695
+ --buttongroup-sm-height: var(--spacing-8);
1696
+ --buttongroup-lg-radius: var(--radius-rounded-lg);
1697
+ --buttongroup-lg-gap: var(--spacing-px);
1698
+ --buttongroup-lg-height: var(--spacing-12);
1699
+ --buttongroup-md-radius: var(--radius-rounded-md);
1700
+ --buttongroup-md-gap: var(--spacing-px);
1701
+ --buttongroup-md-height: var(--spacing-10);
1702
+ --button-xs-border-radius: var(--radius-rounded-sm);
1703
+ --button-xs-font-size: var(--font-size-xs);
1704
+ --button-xs-gap: var(--spacing-1);
1705
+ --button-xs-height: var(--spacing-6);
1706
+ --button-xs-icon-button-padding: var(--spacing-1-5);
1707
+ --button-xs-icon-size: var(--spacing-3);
1708
+ --button-xs-line-height: var(--line-height-xs);
1709
+ --button-xs-padding-x: var(--spacing-2-5);
1710
+ --button-xs-padding-y: var(--spacing-1);
1711
+ --button-sm-border-radius: var(--radius-rounded);
1712
+ --button-sm-font-size: var(--font-size-sm);
1713
+ --button-sm-gap: var(--spacing-1-5);
1714
+ --button-sm-height: var(--spacing-8);
1715
+ --button-sm-icon-button-padding: var(--spacing-2);
1716
+ --button-sm-icon-size: var(--spacing-4);
1717
+ --button-sm-line-height: var(--line-height-sm);
1718
+ --button-sm-padding-x: var(--spacing-3);
1719
+ --button-sm-padding-y: var(--spacing-1-5);
1720
+ --button-md-border-radius: var(--radius-rounded-md);
1721
+ --button-md-font-size: var(--font-size-md);
1722
+ --button-md-gap: var(--spacing-2);
1723
+ --button-md-height: var(--spacing-10);
1724
+ --button-md-icon-button-padding: var(--spacing-2-5);
1725
+ --button-md-icon-size: var(--spacing-5);
1726
+ --button-md-line-height: var(--line-height-base);
1727
+ --button-md-padding-x: var(--spacing-3-5);
1728
+ --button-md-padding-y: var(--spacing-2);
1729
+ --button-lg-border-radius: var(--radius-rounded-lg);
1730
+ --button-lg-font-size: var(--font-size-lg);
1731
+ --button-lg-gap: var(--spacing-2);
1732
+ --button-lg-height: var(--spacing-12);
1733
+ --button-lg-icon-button-padding: var(--spacing-3);
1734
+ --button-lg-icon-size: var(--spacing-6);
1735
+ --button-lg-line-height: var(--line-height-lg);
1736
+ --button-lg-padding-x: var(--spacing-4);
1737
+ --button-lg-padding-y: var(--spacing-2-5);
1738
+ --drawer-radius-bottom-left: var(--radius-rounded-2xl);
1739
+ --drawer-radius-top-left: var(--radius-rounded-2xl);
1740
+ --drawer-dismissible-position-top: var(--spacing-6);
1741
+ --drawer-dismissible-position-right: var(--spacing-6);
1742
+ --drawer-gap-y: var(--spacing-6);
1743
+ --drawer-header-padding-right: var(--spacing-8);
1744
+ --drawer-padding-x: var(--spacing-6);
1745
+ --drawer-padding-y: var(--spacing-6);
1746
+ --calendar-cell-font-size: var(--font-size-sm);
1747
+ --calendar-cell-font-weight: var(--font-weight-low-emphasis);
1748
+ --calendar-cell-line-height: var(--line-height-sm);
1749
+ --calendar-cell-size: var(--spacing-8);
1750
+ --calendar-cell-radius: var(--radius-rounded-2xl);
1751
+ --calendar-padding: var(--spacing-1);
1752
+ --calendar-double-gap-x: var(--spacing-3);
1753
+ --calendar-gap-x: var(--spacing-1);
1754
+ --calendar-gap-y: var(--spacing-1);
1755
+ --calendar-weeks-calendar-gap-x: var(--spacing-2);
1756
+ --calendar-radius: var(--radius-rounded-md);
1757
+ --calendar-grid-gap-x: var(--spacing-0);
1758
+ --calendar-grid-gap-y: var(--spacing-0-5);
1759
+ --calendar-header-font-size: var(--font-size-sm);
1760
+ --calendar-header-font-weight: var(--font-weight-medium-emphasis);
1761
+ --calendar-header-line-height: var(--line-height-sm);
1762
+ --calendar-header-margin-bottom: var(--spacing-1);
1763
+ --calendar-header-button-size: var(--spacing-8);
1764
+ --calendar-weeks-radius: var(--radius-rounded);
1765
+ --calendar-weeks-size: var(--spacing-10);
1766
+ --calendar-controls-margin-top: var(--spacing-1);
1767
+ --calendar-controls-padding-top: var(--spacing-2);
1768
+ --calendar-navigation-buttons-gap: var(--spacing-1);
1769
+ --icon-size-xs: var(--spacing-3);
1770
+ --icon-size-sm: var(--spacing-4);
1771
+ --icon-size-md: var(--spacing-5);
1772
+ --icon-size-lg: var(--spacing-6);
1773
+ --icon-size-xl: var(--spacing-7);
1774
+ --list-select-icon-size: var(--spacing-5);
1775
+ --list-select-font-size: var(--font-size-md);
1776
+ --list-select-line-height: var(--line-height-base);
1777
+ --list-select-option-padding-left: var(--spacing-5);
1778
+ --list-select-option-padding-right: var(--spacing-2);
1779
+ --list-select-option-padding: var(--spacing-2);
1780
+ --list-select-option-radius: var(--radius-rounded-md);
1781
+ --list-select-gap-y: var(--spacing-0-5);
1782
+ --list-select-radius: var(--radius-rounded-md);
1783
+ --list-select-padding: var(--spacing-2);
1784
+ --list-select-optgroup-option-padding-left: var(--spacing-5);
1785
+ --list-select-optgroup-option-margin-top: var(--spacing-1);
1786
+ --list-select-optgroup-gap: var(--spacing-0-5);
1787
+ --list-select-optgroup-padding-y: var(--spacing-2);
1788
+ --list-dropdown-icon-size: var(--spacing-5);
1789
+ --list-dropdown-font-size: var(--font-size-md);
1790
+ --list-dropdown-line-height: var(--line-height-base);
1791
+ --list-dropdown-item-padding-left: var(--spacing-8);
1792
+ --list-dropdown-item-padding-right: var(--spacing-2);
1793
+ --list-dropdown-item-padding-x: var(--spacing-2);
1794
+ --list-dropdown-item-padding-y: var(--spacing-2);
1795
+ --list-dropdown-item-gap-x: var(--spacing-3);
1796
+ --list-dropdown-item-radius: var(--radius-rounded-md);
1797
+ --list-dropdown-gap-y: var(--spacing-0-5);
1798
+ --list-dropdown-radius: var(--radius-rounded-md);
1799
+ --list-dropdown-padding: var(--spacing-2);
1800
+ --list-dropdown-separator-padding-x: var(--spacing-0);
1801
+ --list-dropdown-separator-padding-y: var(--spacing-0-5);
1802
+ --list-dropdown-sub-item-padding-left: var(--spacing-4);
1803
+ --list-multiselect-padding: var(--spacing-3);
1804
+ --form-field-badge-padding-x: var(--spacing-1);
1805
+ --form-field-badge-padding-y: var(--spacing-0-5);
1806
+ --form-field-font-size: var(--font-size-md);
1807
+ --form-field-font-weight: var(--font-weight-medium-emphasis);
1808
+ --form-field-icon-size: var(--spacing-5);
1809
+ --form-field-gap: var(--spacing-2);
1810
+ --form-field-gap-inner: var(--spacing-2);
1811
+ --form-field-line-height: var(--line-height-base);
1812
+ --form-field-padding-x: var(--spacing-2);
1813
+ --form-field-padding-x-icon-button: var(--spacing-10);
1814
+ --form-field-padding-y: var(--spacing-2);
1815
+ --form-field-radius: var(--radius-rounded-md);
1816
+ --form-field-leading-trailing-font-size: var(--font-size-sm);
1817
+ --form-field-leading-trailing-icon-size: var(--spacing-5);
1818
+ --form-field-leading-trailing-line-height: var(--line-height-base);
1819
+ --form-field-inner-button-padding-x-ext: var(--spacing-2-5);
1820
+ --form-field-inner-button-padding-x-int: var(--spacing-1-5);
1821
+ --form-field-inner-button-padding-y: var(--spacing-2-5);
1822
+ --form-gap-x: var(--spacing-3);
1823
+ --form-gap-y: var(--spacing-1);
1824
+ --form-description-font-size: var(--font-size-sm);
1825
+ --form-description-line-height: var(--line-height-sm);
1826
+ --form-description-font-weight: var(--font-weight-low-emphasis);
1827
+ --form-label-font-size: var(--font-size-sm);
1828
+ --form-label-gap: var(--spacing-1);
1829
+ --form-label-line-height: var(--line-height-sm);
1830
+ --form-label-font-weight: var(--font-weight-medium-emphasis);
1831
+ --form-checkbox-border-width: var(--spacing-0-5);
1832
+ --form-checkbox-icon-size: var(--spacing-3-5);
1833
+ --form-checkbox-padding-top: var(--spacing-0);
1834
+ --form-checkbox-radius: var(--radius-rounded-md);
1835
+ --form-checkbox-size: var(--spacing-5);
1836
+ --form-checkbox-ring-radius: var(--radius-rounded-lg);
1837
+ --form-checkbox-icon-stroke: var(--spacing-0-5);
1838
+ --form-radio-border-width: var(--spacing-0-5);
1839
+ --form-radio-inner-circle-padding: var(--spacing-1-5);
1840
+ --form-radio-inner-circle-size: var(--spacing-2);
1841
+ --form-radio-padding-top: var(--spacing-0);
1842
+ --form-radio-size: var(--spacing-5);
1843
+ --form-radio-ring-radius: var(--radius-rounded-full);
1844
+ --form-toggle-border-width: var(--spacing-0-5);
1845
+ --form-toggle-height: var(--spacing-5);
1846
+ --form-toggle-padding-top: var(--spacing-0);
1847
+ --form-toggle-radius: var(--radius-rounded-full);
1848
+ --form-toggle-padding-default: var(--spacing-1);
1849
+ --form-toggle-padding-selected: var(--spacing-0-5);
1850
+ --form-toggle-switch-dot-default: var(--spacing-3);
1851
+ --form-toggle-switch-dot-selected: var(--spacing-3-5);
1852
+ --form-toggle-width: var(--spacing-9);
1853
+ --menu-contextual-divider-padding-top: var(--spacing-1);
1854
+ --menu-contextual-divider-padding-x: var(--spacing-2-5);
1855
+ --menu-contextual-item-font-size: var(--font-size-sm);
1856
+ --menu-contextual-item-padding-x: var(--spacing-2-5);
1857
+ --menu-contextual-item-padding-y: var(--spacing-2);
1858
+ --menu-contextual-item-gap-x: var(--spacing-3);
1859
+ --menu-contextual-item-radius: var(--radius-rounded);
1860
+ --menu-contextual-gap-y: var(--spacing-0-5);
1861
+ --menu-contextual-padding-x: var(--spacing-1);
1862
+ --menu-contextual-padding-y: var(--spacing-1);
1863
+ --menu-contextual-radius: var(--radius-rounded-md);
1864
+ --navigation-primary-notification-bullet-size: var(--spacing-4);
1865
+ --navigation-primary-notification-bullet-size-reduced: var(--spacing-1-5);
1866
+ --navigation-primary-notification-bullet-font-weight: var(--font-weight-medium-emphasis);
1867
+ --navigation-primary-title-padding-x: var(--spacing-3);
1868
+ --navigation-primary-title-padding-y: var(--spacing-1);
1869
+ --navigation-primary-title-font-size: var(--font-size-sm);
1870
+ --navigation-primary-item-gap-x: var(--spacing-2);
1871
+ --navigation-primary-item-padding-x: var(--spacing-3);
1872
+ --navigation-primary-item-padding-y: var(--spacing-2);
1873
+ --navigation-primary-item-font-size: var(--font-size-md);
1874
+ --navigation-primary-item-icon-size: var(--spacing-5);
1875
+ --navigation-primary-item-radius: var(--radius-rounded-md);
1876
+ --navigation-primary-sub-item-padding-left-x: var(--spacing-7);
1877
+ --navigation-primary-separator-size: var(--spacing-px);
1878
+ --navigation-gap-y: var(--spacing-3);
1879
+ --popover-shadow-1-y: var(--shadow-y-axis-none);
1880
+ --popover-shadow-1-spread: var(--shadow-spread-lg-1);
1881
+ --popover-shadow-1-opacity: var(--shadow-color-opacity-3);
1882
+ --popover-shadow-2-y: var(--shadow-y-axis-lg-2);
1883
+ --popover-shadow-2-blur: var(--shadow-blur-lg-2);
1884
+ --popover-shadow-2-spread: var(--shadow-spread-lg-2);
1885
+ --popover-shadow-2-opacity: var(--shadow-color-opacity-2);
1886
+ --popover-font-size: var(--font-size-sm);
1887
+ --popover-gap-y: var(--spacing-1);
1888
+ --popover-padding-x: var(--spacing-2);
1889
+ --popover-padding-y: var(--spacing-2);
1890
+ --popover-radius: var(--radius-rounded-md);
1891
+ --sidebar-notification-bullet-font-weight: var(--font-weight-medium-emphasis);
1892
+ --sidebar-notification-bullet-size: var(--spacing-4);
1893
+ --sidebar-notification-bullet-size-reduced: var(--spacing-1-5);
1894
+ --sidebar-gap-y: var(--spacing-3);
1895
+ --sidebar-padding-x: var(--spacing-6);
1896
+ --sidebar-padding-x-collapsed: var(--spacing-5);
1897
+ --sidebar-padding-y: var(--spacing-6);
1898
+ --sidebar-width-collapsed: var(--spacing-20);
1899
+ --sidebar-footer-gap-y: var(--spacing-5);
1900
+ --sidebar-group-gap-y: var(--spacing-1);
1901
+ --sidebar-section-gap-y: var(--spacing-0-5);
1902
+ --sidebar-section-gap-y-collapsed: var(--spacing-1);
1903
+ --sidebar-collapsible-button-icon-size: var(--spacing-4);
1904
+ --sidebar-collapsible-button-padding: var(--spacing-2);
1905
+ --sidebar-collapsible-button-position-top: var(--spacing-8);
1906
+ --sidebar-collapsible-button-position-right: var(--spacing-4);
1907
+ --sidebar-title-font-size: var(--font-size-sm);
1908
+ --sidebar-title-padding-x: var(--spacing-3);
1909
+ --sidebar-title-padding-y: var(--spacing-1);
1910
+ --sidebar-item-font-size: var(--font-size-md);
1911
+ --sidebar-item-gap-x: var(--spacing-2);
1912
+ --sidebar-item-icon-size: var(--spacing-5);
1913
+ --sidebar-item-padding-x: var(--spacing-3);
1914
+ --sidebar-item-padding-x-collapsed: var(--spacing-2-5);
1915
+ --sidebar-item-padding-y: var(--spacing-2);
1916
+ --sidebar-item-padding-y-collapsed: var(--spacing-2-5);
1917
+ --sidebar-item-radius: var(--radius-rounded-md);
1918
+ --sidebar-sub-item-padding-left: var(--spacing-7);
1919
+ --sidebar-divider-size: var(--spacing-px);
1920
+ --slider-tick-height: var(--spacing-1);
1921
+ --slider-tick-width: var(--spacing-0-5);
1922
+ --slider-handler-stroke: var(--spacing-0-5);
1923
+ --slider-handler-size-min: var(--spacing-5);
1924
+ --slider-handler-size-max: var(--spacing-6);
1925
+ --slider-handler-size-inner: var(--spacing-4);
1926
+ --slider-track-height: var(--spacing-1);
1927
+ --slider-track-padding-x: var(--spacing-3);
1928
+ --slider-track-radius: var(--radius-rounded-sm);
1929
+ --splitter-old-handler-long: var(--spacing-6);
1930
+ --splitter-old-handler-wide: var(--spacing-3);
1931
+ --splitter-old-handler-radius: var(--radius-rounded-md);
1932
+ --togglegroup-xs-radius: var(--radius-rounded-sm);
1933
+ --togglegroup-xs-gap: var(--spacing-0-5);
1934
+ --togglegroup-xs-height: var(--spacing-6);
1935
+ --togglegroup-sm-radius: var(--radius-rounded);
1936
+ --togglegroup-sm-gap: var(--spacing-0-5);
1937
+ --togglegroup-sm-height: var(--spacing-8);
1938
+ --togglegroup-md-radius: var(--radius-rounded-md);
1939
+ --togglegroup-md-gap: var(--spacing-0-5);
1940
+ --togglegroup-md-height: var(--spacing-10);
1941
+ --togglegroup-lg-radius: var(--radius-rounded-lg);
1942
+ --togglegroup-lg-gap: var(--spacing-0-5);
1943
+ --togglegroup-lg-height: var(--spacing-12);
1944
+ --togglegroup-stroke: var(--spacing-px);
1945
+ --togglegroup-inner-space: var(--spacing-1-5);
1946
+ --tooltip-font-size: var(--font-size-sm);
1947
+ --tooltip-padding-x: var(--spacing-3);
1948
+ --tooltip-padding-y: var(--spacing-3);
1949
+ --tooltip-complex-padding-y: var(--spacing-3);
1950
+ --tooltip-gap-y: var(--spacing-1);
1951
+ --tooltip-radius: var(--radius-rounded-md);
1952
+ --global-typography-h1-font-size: var(--font-size-5xl);
1953
+ --global-typography-h1-line-height: var(--line-height-4xl);
1954
+ --global-typography-h1-font-weight: var(--font-weight-high-emphasis);
1955
+ --global-typography-h2-font-size: var(--font-size-3xl);
1956
+ --global-typography-h2-line-height: var(--line-height-3xl);
1957
+ --global-typography-h2-font-weight: var(--font-weight-high-emphasis);
1958
+ --global-typography-h3-font-size: var(--font-size-2xl);
1959
+ --global-typography-h3-line-height: var(--line-height-2xl);
1960
+ --global-typography-h3-font-weight: var(--font-weight-high-emphasis);
1961
+ --global-typography-h4-font-size: var(--font-size-xl);
1962
+ --global-typography-h4-line-height: var(--line-height-xl);
1963
+ --global-typography-h4-font-weight: var(--font-weight-high-emphasis);
1964
+ --global-typography-h6-font-size: var(--font-size-lg);
1965
+ --global-typography-h6-line-height: var(--line-height-lg);
1966
+ --global-typography-h6-font-weight: var(--font-weight-medium-emphasis);
1967
+ --global-typography-h5-font-size: var(--font-size-lg);
1968
+ --global-typography-h5-line-height: var(--line-height-lg);
1969
+ --global-typography-h5-font-weight: var(--font-weight-high-emphasis);
1970
+ --global-typography-p-font-size: var(--font-size-md);
1971
+ --global-typography-p-line-height: var(--line-height-base);
1972
+ --global-typography-p-font-weight: var(--font-weight-low-emphasis);
1973
+ --global-typography-small-font-size: var(--font-size-xs);
1974
+ --global-typography-small-line-height: var(--line-height-xs);
1975
+ --global-typography-label-font-size: var(--font-size-sm);
1976
+ --global-typography-label-line-height: var(--line-height-sm);
1977
+ --global-typography-label-font-weight: var(--font-weight-medium-emphasis);
1978
+ --global-typography-legend-font-size: var(--font-size-xs);
1979
+ --global-typography-legend-line-height: var(--line-height-xs);
1980
+ --global-typography-legend-font-weight: var(--font-weight-medium-emphasis);
1981
+ --alert-icon-size: var(--spacing-5);
1982
+ --alert-gap-x: var(--spacing-3);
1983
+ --alert-icon-position-x: var(--spacing-4);
1984
+ --alert-icon-position-y: var(--spacing-4);
1985
+ --alert-gap-y: var(--spacing-1);
1986
+ --alert-padding: var(--spacing-4);
1987
+ --alert-padding-right: var(--spacing-8);
1988
+ --alert-radius: var(--radius-rounded-lg);
1989
+ --alert-heading-font-size: var(--font-size-sm);
1990
+ --alert-heading-font-weight: var(--font-weight-medium-emphasis);
1991
+ --alert-heading-line-height: var(--line-height-sm);
1992
+ --alert-message-font-size: var(--font-size-sm);
1993
+ --alert-message-font-weight: var(--font-weight-low-emphasis);
1994
+ --alert-message-line-height: var(--line-height-sm);
1995
+ --badge-gap-x: var(--spacing-1);
1996
+ --badge-gap-icon-only-x: var(--spacing-0-5);
1997
+ --badge-height: var(--spacing-6);
1998
+ --badge-padding-x: var(--spacing-2);
1999
+ --badge-padding-icon-only-x: var(--spacing-1-5);
2000
+ --badge-padding-y: var(--spacing-1);
2001
+ --badge-radius: var(--radius-rounded-full);
2002
+ --breadcrumb-padding-y: var(--spacing-1);
2003
+ --datagrid-cell-body-padding-x: var(--spacing-4);
2004
+ --datagrid-cell-body-avatar-gap-x: var(--spacing-3);
2005
+ --datagrid-cell-body-actions-gap-x: var(--spacing-2);
2006
+ --datagrid-cell-body-padding-y: var(--spacing-2);
2007
+ --datagrid-cell-body-actions-padding-y: var(--spacing-1);
2008
+ --datagrid-cell-body-chevron-padding-x: var(--spacing-0);
2009
+ --datagrid-cell-header-padding-x: var(--spacing-4);
2010
+ --datagrid-cell-header-padding-right: var(--spacing-2);
2011
+ --datagrid-cell-header-padding-y: var(--spacing-3);
2012
+ --datagrid-cell-header-chevron-padding-x: var(--spacing-0);
2013
+ --datagrid-expanded-padding-right: var(--spacing-4);
2014
+ --datagrid-expanded-padding-y: var(--spacing-4);
2015
+ --datagrid-expanded-padding-left: var(--spacing-14);
2016
+ --dialog-dismissible-position-top: var(--spacing-5);
2017
+ --dialog-dismissible-position-right: var(--spacing-3);
2018
+ --dialog-header-gap-y: var(--spacing-0);
2019
+ --dialog-header-padding-top: var(--spacing-6);
2020
+ --dialog-header-padding-bottom: var(--spacing-2);
2021
+ --dialog-header-padding-x: var(--spacing-6);
2022
+ --dialog-body-padding-x: var(--spacing-6);
2023
+ --dialog-body-padding-y: var(--spacing-2);
2024
+ --dialog-footer-gap-y: var(--spacing-3);
2025
+ --dialog-footer-padding-top: var(--spacing-2);
2026
+ --dialog-footer-padding-bottom: var(--spacing-6);
2027
+ --dialog-footer-padding-x: var(--spacing-6);
2028
+ --focus-field-stroke: var(--spacing-px);
2029
+ --focus-outline-offset: var(--spacing-0-5);
2030
+ --focus-outline-stroke: var(--spacing-0-5);
2031
+ --loader-size-xs: var(--spacing-4);
2032
+ --loader-size-sm: var(--spacing-5);
2033
+ --loader-size-md: var(--spacing-6);
2034
+ --loader-size-lg: var(--spacing-7);
2035
+ --loader-size-xl: var(--spacing-8);
2036
+ --notification-icon-size: var(--spacing-5);
2037
+ --notification-gap-x: var(--spacing-3);
2038
+ --notification-gap-x-title: var(--spacing-2);
2039
+ --notification-gap-y: var(--spacing-1);
2040
+ --notification-padding: var(--spacing-4);
2041
+ --notification-padding-right: var(--spacing-6);
2042
+ --notification-padding-left: var(--spacing-6);
2043
+ --notification-radius: var(--radius-rounded-lg);
2044
+ --notification-border-width-high-emphasis: var(--spacing-2);
2045
+ --notification-border-width-low-emphasis: var(--spacing-px);
2046
+ --notification-description-font-size: var(--font-size-sm);
2047
+ --notification-description-font-weight: var(--font-weight-medium-emphasis);
2048
+ --notification-description-line-height: var(--line-height-sm);
2049
+ --notification-timestamp-font-size: var(--font-size-sm);
2050
+ --notification-timestamp-font-weight: var(--font-weight-low-emphasis);
2051
+ --notification-timestamp-line-height: var(--line-height-sm);
2052
+ --notification-title-font-size: var(--font-size-sm);
2053
+ --notification-title-font-weight: var(--font-weight-medium-emphasis);
2054
+ --notification-title-line-height: var(--line-height-sm);
2055
+ --pagination-table-font-size: var(--font-size-sm);
2056
+ --pagination-table-gap-x: var(--spacing-8);
2057
+ --pagination-table-height: var(--spacing-9);
2058
+ --pagination-table-padding-left: var(--spacing-3);
2059
+ --pagination-table-padding-x: var(--spacing-3);
2060
+ --pagination-table-padding-y: var(--spacing-2);
2061
+ --status-indicator-gap-x: var(--spacing-0-5);
2062
+ --status-indicator-height: var(--spacing-6);
2063
+ --status-indicator-width-icon-only: var(--spacing-6);
2064
+ --status-indicator-icon-size: var(--spacing-3);
2065
+ --status-indicator-padding-x: var(--spacing-1-5);
2066
+ --status-indicator-padding-y: var(--spacing-1);
2067
+ --status-indicator-radius: var(--radius-rounded-full);
2068
+ --status-indicator-label-size: var(--font-size-xs);
2069
+ --status-indicator-label-line-height: var(--line-height-xs);
2070
+ --splitter-line-width: var(--spacing-1);
2071
+ --splitter-gutter: var(--spacing-6);
2072
+ --splitter-handle-long: var(--spacing-6);
2073
+ --splitter-handle-wide: var(--spacing-1);
2074
+ --splitter-handle-wide-hover: var(--spacing-2);
2075
+ --splitter-handle-radius: var(--radius-rounded-md);
2076
+ --tag-gap-x: var(--spacing-1);
2077
+ --tag-padding-x: var(--spacing-1-5);
2078
+ --tag-height: var(--spacing-6);
2079
+ --tag-border-radius: var(--radius-rounded);
2080
2080
  }
2081
2081