@nova-design-system/nova-base 3.0.0-beta.30 → 3.0.0-beta.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/css/mccs.css +1378 -0
  2. package/dist/css/nova-utils.css +951 -73
  3. package/dist/css/ocean.css +453 -28446
  4. package/dist/css/spark.css +434 -28427
  5. package/dist/js/ocean_dark.d.ts +119 -124
  6. package/dist/js/ocean_dark.js +152 -157
  7. package/dist/js/ocean_light.d.ts +119 -124
  8. package/dist/js/ocean_light.js +143 -148
  9. package/dist/js/primitives.d.ts +0 -6
  10. package/dist/js/primitives.js +0 -6
  11. package/dist/js/spacings.d.ts +2 -0
  12. package/dist/js/spacings.js +3 -1
  13. package/dist/js/spark_dark.d.ts +108 -113
  14. package/dist/js/spark_dark.js +120 -125
  15. package/dist/js/spark_light.d.ts +108 -113
  16. package/dist/js/spark_light.js +108 -113
  17. package/dist/lib/cjs/generated/nova-tailwind-components.js +292 -0
  18. package/dist/lib/cjs/{nova-plugin.js → lib/nova-plugin.js} +30 -82
  19. package/dist/lib/cjs/{nova-safelist.js → lib/nova-safelist.js} +13 -5
  20. package/dist/lib/cjs/{nova-theme.js → lib/nova-theme.js} +14 -2
  21. package/dist/lib/generated/nova-tailwind-components.d.ts +288 -0
  22. package/dist/lib/generated/nova-tailwind-components.js +289 -0
  23. package/dist/lib/{nova-plugin.js → lib/nova-plugin.js} +12 -64
  24. package/dist/lib/{nova-safelist.d.ts → lib/nova-safelist.d.ts} +2 -2
  25. package/dist/lib/{nova-safelist.js → lib/nova-safelist.js} +14 -4
  26. package/dist/lib/{nova-theme.js → lib/nova-theme.js} +14 -2
  27. package/package.json +7 -2
  28. /package/dist/lib/cjs/{nova-tailwind-tokens.js → generated/nova-tailwind-tokens.js} +0 -0
  29. /package/dist/lib/cjs/{index.js → lib/index.js} +0 -0
  30. /package/dist/lib/{nova-tailwind-tokens.d.ts → generated/nova-tailwind-tokens.d.ts} +0 -0
  31. /package/dist/lib/{nova-tailwind-tokens.js → generated/nova-tailwind-tokens.js} +0 -0
  32. /package/dist/lib/{index.d.ts → lib/index.d.ts} +0 -0
  33. /package/dist/lib/{index.js → lib/index.js} +0 -0
  34. /package/dist/lib/{nova-plugin.d.ts → lib/nova-plugin.d.ts} +0 -0
  35. /package/dist/lib/{nova-theme.d.ts → lib/nova-theme.d.ts} +0 -0
package/dist/css/mccs.css ADDED
@@ -0,0 +1,1378 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ .dark:root {
6
+ --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
7
+ --components-button-destructive-low-border: rgba(255, 255, 255, 0);
8
+ --components-button-destructive-low-background-hover: rgba(255, 255, 255, 0.12);
9
+ --components-button-destructive-low-background: rgba(255, 255, 255, 0);
10
+ --components-button-destructive-medium-background-hover: rgba(255, 255, 255, 0.12);
11
+ --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
12
+ --components-loader-white-background: rgba(255, 255, 255, 0.2);
13
+ --components-list-native-item-background-title: rgba(255, 255, 255, 0);
14
+ --components-list-native-item-background-disabled: rgba(255, 255, 255, 0);
15
+ --components-list-native-item-background-hover: #4e7fdf;
16
+ --components-list-native-item-background-default: rgba(255, 255, 255, 0);
17
+ --components-list-native-item-content-disabled: rgba(255, 255, 255, 0.5);
18
+ --components-list-native-border: #767578;
19
+ --components-list-native-separator: #838086;
20
+ --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
21
+ --components-list-native-background: #565558;
22
+ --components-form-opacity-disabled: 50px;
23
+ --components-form-opacity-default: 100px;
24
+ --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
25
+ --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
26
+ --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
27
+ --components-button-lower-border-2: rgba(255, 255, 255, 0);
28
+ --components-button-lower-border-hover: rgba(255, 255, 255, 0);
29
+ --components-button-lower-border: rgba(255, 255, 255, 0);
30
+ --components-button-low-background: rgba(255, 255, 255, 0);
31
+ --components-button-high-border-hover: rgba(255, 255, 255, 0);
32
+ --components-button-high-border: rgba(255, 255, 255, 0);
33
+ --components-wpf-components-2: #ffffff;
34
+ --shadow-y-axis-2xl: 25px;
35
+ --shadow-y-axis-xl-2: 20px;
36
+ --shadow-y-axis-xl-1: 10px;
37
+ --shadow-y-axis-lg-2: 10px;
38
+ --shadow-y-axis-lg-1: 4px;
39
+ --shadow-y-axis-md-2: 4px;
40
+ --shadow-y-axis-md-1: 2px;
41
+ --shadow-y-axis-base: 1px;
42
+ --shadow-y-axis-none: 0px;
43
+ --shadow-spread-2xl: -6px;
44
+ --shadow-spread-xl: -2px;
45
+ --shadow-spread-lg-2: 0px;
46
+ --shadow-spread-lg-1: 0px;
47
+ --shadow-blur-2xl: 50px;
48
+ --shadow-blur-xl-2: 0px;
49
+ --shadow-blur-xl-1: 10px;
50
+ --shadow-blur-lg-2: 15px;
51
+ --shadow-blur-lg-1: 6px;
52
+ --shadow-blur-md-2: 6px;
53
+ --shadow-blur-md-1: 4px;
54
+ --shadow-blur-base-2: 2px;
55
+ --shadow-blur-base-1: 3px;
56
+ --shadow-color-opacity-3: rgba(11, 15, 17, 0.32);
57
+ --shadow-color-opacity-2: rgba(11, 15, 17, 0.14);
58
+ --shadow-color-opacity-1: rgba(11, 15, 17, 0.09);
59
+ --shadow-color-opacity-0: rgba(11, 15, 17, 0.09);
60
+ --color-black: #000000;
61
+ --color-interaction-container-neutral-background-hover: rgba(255, 255, 255, 0.1);
62
+ --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
63
+ --color-interaction-container-branded-low-background-hover: rgba(255, 255, 255, 0.12);
64
+ --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
65
+ --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
66
+ --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
67
+ --components-tooltip-border: var(--color-gray-ocean-50);
68
+ --components-tooltip-background: var(--color-gray-ocean-50);
69
+ --components-popover-background: var(--color-gray-ocean-900);
70
+ --components-button-destructive-high-icon-hover: var(--color-base-black);
71
+ --components-button-destructive-high-icon: var(--color-base-black);
72
+ --components-button-destructive-high-text-hover: var(--color-base-black);
73
+ --components-button-destructive-high-text: var(--color-base-black);
74
+ --components-button-destructive-high-background-hover: var(--color-status-red-400);
75
+ --components-button-destructive-high-background: var(--color-status-red-300);
76
+ --components-button-destructive-low-icon-hover: var(--color-status-red-400);
77
+ --components-button-destructive-low-icon: var(--color-status-red-300);
78
+ --components-button-destructive-low-text-hover: var(--color-status-red-400);
79
+ --components-button-destructive-low-text: var(--color-status-red-300);
80
+ --components-button-destructive-medium-border-hover: var(--color-status-red-400);
81
+ --components-button-destructive-medium-border: var(--color-status-red-300);
82
+ --components-button-destructive-medium-icon-hover: var(--color-status-red-400);
83
+ --components-button-destructive-medium-icon: var(--color-status-red-300);
84
+ --components-button-destructive-medium-text-hover: var(--color-status-red-400);
85
+ --components-button-destructive-medium-text: var(--color-status-red-300);
86
+ --components-loader-brand-foreground: var(--color-petrol-500);
87
+ --components-loader-brand-background: var(--color-petrol-900);
88
+ --components-loader-white-foreground: var(--color-base-white);
89
+ --components-list-custom-item-background-title: var(--color-interaction-container-neutral-background);
90
+ --components-list-custom-item-background-disabled: var(--color-interaction-container-neutral-background);
91
+ --components-list-custom-item-background-hover: var(--color-interaction-container-neutral-background-hover);
92
+ --components-list-custom-item-background-default: var(--color-interaction-container-neutral-background);
93
+ --components-list-native-item-content-hover: var(--color-base-white);
94
+ --components-list-native-item-content-default: var(--color-base-white);
95
+ --components-form-shape-foreground-default: var(--color-base-black);
96
+ --components-form-shape-background-selected: var(--color-petrol-500);
97
+ --components-form-shape-background-disabled: var(--color-gray-ocean-700);
98
+ --components-form-shape-background-hover: var(--color-gray-ocean-350);
99
+ --components-form-shape-background-default: var(--color-gray-ocean-400);
100
+ --components-form-field-background-checked: var(--color-petrol-500);
101
+ --components-button-medium-border-hover: var(--components-button-gr-as-complementary-border-hover);
102
+ --components-button-medium-border: var(--components-button-gr-as-complementary-border);
103
+ --components-button-gr-as-complementary-icon-hover: var(--color-base-white);
104
+ --components-button-gr-as-complementary-icon: var(--color-base-white);
105
+ --components-button-gr-as-complementary-text-hover: var(--color-base-white);
106
+ --components-button-gr-as-complementary-text: var(--color-base-white);
107
+ --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-350);
108
+ --components-button-gr-as-complementary-background: var(--color-gray-ocean-450);
109
+ --components-button-lower-background-hover: var(--color-interaction-container-branded-low-background-hover);
110
+ --components-button-lower-background: var(--color-interaction-container-branded-low-background);
111
+ --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
112
+ --color-dont-use-background: var(--color-gray-ocean-900);
113
+ --color-dont-use-content: var(--color-gray-ocean-750);
114
+ --color-dont-use-border: var(--color-gray-ocean-750);
115
+ --color-rainbow-10-text: var(--color-gray-ocean-250);
116
+ --color-rainbow-10-icon: var(--color-gray-ocean-250);
117
+ --color-rainbow-10-border: var(--color-gray-ocean-250);
118
+ --color-rainbow-10-background: var(--color-gray-ocean-650);
119
+ --color-rainbow-9-text: var(--color-lime-500);
120
+ --color-rainbow-9-icon: var(--color-lime-500);
121
+ --color-rainbow-9-border: var(--color-lime-500);
122
+ --color-rainbow-9-background: var(--color-lime-900);
123
+ --color-rainbow-8-text: var(--color-petrol-300);
124
+ --color-rainbow-8-icon: var(--color-petrol-300);
125
+ --color-rainbow-8-border: var(--color-petrol-300);
126
+ --color-rainbow-8-background: var(--color-petrol-800);
127
+ --color-rainbow-7-text: var(--color-green-300);
128
+ --color-rainbow-7-icon: var(--color-green-300);
129
+ --color-rainbow-7-border: var(--color-green-300);
130
+ --color-rainbow-7-background: var(--color-green-800);
131
+ --color-rainbow-6-text: var(--color-crimson-200);
132
+ --color-rainbow-6-icon: var(--color-crimson-200);
133
+ --color-rainbow-6-border: var(--color-crimson-200);
134
+ --color-rainbow-6-background: var(--color-crimson-700);
135
+ --color-rainbow-5-text: var(--color-turquoise-500);
136
+ --color-rainbow-5-icon: var(--color-turquoise-500);
137
+ --color-rainbow-5-border: var(--color-turquoise-500);
138
+ --color-rainbow-5-background: var(--color-turquoise-900);
139
+ --color-rainbow-4-text: var(--color-red-200);
140
+ --color-rainbow-4-icon: var(--color-red-200);
141
+ --color-rainbow-4-border: var(--color-red-200);
142
+ --color-rainbow-4-background: var(--color-red-800);
143
+ --color-rainbow-3-text: var(--color-yellow-600);
144
+ --color-rainbow-3-icon: var(--color-yellow-600);
145
+ --color-rainbow-3-border: var(--color-yellow-600);
146
+ --color-rainbow-3-background: var(--color-yellow-900);
147
+ --color-rainbow-2-text: var(--color-orange-400);
148
+ --color-rainbow-2-icon: var(--color-orange-400);
149
+ --color-rainbow-2-border: var(--color-orange-400);
150
+ --color-rainbow-2-background: var(--color-orange-900);
151
+ --color-rainbow-1-text: var(--color-amber-500);
152
+ --color-rainbow-1-icon: var(--color-amber-500);
153
+ --color-rainbow-1-border: var(--color-amber-500);
154
+ --color-rainbow-1-background: var(--color-amber-900);
155
+ --color-focus-brand: var(--color-petrol-400);
156
+ --color-feedback-success-low-text: var(--color-status-green-300);
157
+ --color-feedback-success-low-icon: var(--color-status-green-300);
158
+ --color-feedback-success-low-border: var(--color-status-green-300);
159
+ --color-feedback-success-low-background: var(--color-status-green-900);
160
+ --color-feedback-success-high-text: var(--color-base-black);
161
+ --color-feedback-success-high-icon: var(--color-base-black);
162
+ --color-feedback-success-high-border: var(--color-status-green-300);
163
+ --color-feedback-success-high-background: var(--color-status-green-300);
164
+ --color-feedback-warning-low-text: var(--color-status-yellow-300);
165
+ --color-feedback-warning-low-icon: var(--color-status-yellow-300);
166
+ --color-feedback-warning-low-border: var(--color-status-yellow-300);
167
+ --color-feedback-warning-low-background: var(--color-status-yellow-900);
168
+ --color-feedback-warning-high-text: var(--color-base-black);
169
+ --color-feedback-warning-high-icon: var(--color-base-black);
170
+ --color-feedback-warning-high-border: var(--color-status-yellow-300);
171
+ --color-feedback-warning-high-background: var(--color-status-yellow-300);
172
+ --color-feedback-neutral-low-text: var(--color-gray-ocean-300);
173
+ --color-feedback-neutral-low-icon: var(--color-gray-ocean-300);
174
+ --color-feedback-neutral-low-border: var(--color-gray-ocean-300);
175
+ --color-feedback-neutral-low-background: var(--color-gray-ocean-650);
176
+ --color-feedback-neutral-high-text: var(--color-base-black);
177
+ --color-feedback-neutral-high-icon: var(--color-base-black);
178
+ --color-feedback-neutral-high-border: var(--color-gray-ocean-300);
179
+ --color-feedback-neutral-high-background: var(--color-gray-ocean-300);
180
+ --color-feedback-error-low-text: var(--color-status-red-400);
181
+ --color-feedback-error-low-icon: var(--color-status-red-400);
182
+ --color-feedback-error-low-border: var(--color-status-red-400);
183
+ --color-feedback-error-low-background: var(--color-status-red-900);
184
+ --color-feedback-error-high-text: var(--color-base-black);
185
+ --color-feedback-error-high-icon: var(--color-base-black);
186
+ --color-feedback-error-high-border: var(--color-status-red-400);
187
+ --color-feedback-error-high-background: var(--color-status-red-400);
188
+ --color-feedback-information-low-text: var(--color-status-blue-300);
189
+ --color-feedback-information-low-icon: var(--color-status-blue-300);
190
+ --color-feedback-information-low-border: var(--color-status-blue-300);
191
+ --color-feedback-information-low-background: var(--color-status-blue-900);
192
+ --color-feedback-information-high-text: var(--color-base-black);
193
+ --color-feedback-information-high-icon: var(--color-base-black);
194
+ --color-feedback-information-high-border: var(--color-status-blue-300);
195
+ --color-feedback-information-high-background: var(--color-status-blue-300);
196
+ --color-chart-10: var(--color-crimson-500);
197
+ --color-chart-9: var(--color-dark-blue-500);
198
+ --color-chart-8: var(--color-orange-500);
199
+ --color-chart-7: var(--color-yellow-500);
200
+ --color-chart-6: var(--color-lime-500);
201
+ --color-chart-5: var(--color-light-blue-500);
202
+ --color-chart-4: var(--color-turquoise-500);
203
+ --color-chart-3: var(--color-petrol-500);
204
+ --color-chart-2: var(--color-dark-gray-500);
205
+ --color-chart-1: var(--color-amber-500);
206
+ --color-accent-900: var(--color-orange-900);
207
+ --color-accent-800: var(--color-orange-800);
208
+ --color-accent-700: var(--color-orange-700);
209
+ --color-accent-600: var(--color-orange-600);
210
+ --color-accent-500: var(--color-orange-500);
211
+ --color-accent-400: var(--color-orange-400);
212
+ --color-accent-300: var(--color-orange-300);
213
+ --color-accent-200: var(--color-orange-200);
214
+ --color-accent-100: var(--color-orange-100);
215
+ --color-accent-50: var(--color-orange-50);
216
+ --color-content-inverted-low-icon: var(--color-gray-ocean-450);
217
+ --color-content-inverted-low-text: var(--color-gray-ocean-450);
218
+ --color-content-inverted-medium-icon: var(--color-gray-ocean-650);
219
+ --color-content-inverted-medium-text: var(--color-gray-ocean-650);
220
+ --color-content-inverted-high-icon: var(--color-gray-ocean-900);
221
+ --color-content-inverted-high-text: var(--color-gray-ocean-900);
222
+ --color-content-lower-text: var(--color-gray-ocean-450);
223
+ --color-content-low-icon: var(--color-gray-ocean-300);
224
+ --color-content-low-text: var(--color-gray-ocean-300);
225
+ --color-content-low-border: var(--color-gray-ocean-500);
226
+ --color-content-medium-icon: var(--color-gray-ocean-200);
227
+ --color-content-medium-text: var(--color-gray-ocean-200);
228
+ --color-content-medium-border: var(--color-gray-ocean-400);
229
+ --color-content-high-icon: var(--color-gray-ocean-50);
230
+ --color-content-high-text: var(--color-gray-ocean-50);
231
+ --color-content-high-border: var(--color-gray-ocean-300);
232
+ --color-level-05-background: var(--color-gray-ocean-850);
233
+ --color-level-00-background: var(--color-gray-ocean-900);
234
+ --color-level-40-background: var(--color-gray-ocean-500);
235
+ --color-level-30-background: var(--color-gray-ocean-600);
236
+ --color-level-20-background: var(--color-gray-ocean-700);
237
+ --color-level-10-background: var(--color-gray-ocean-800);
238
+ --color-interaction-link-low-icon-hover: var(--color-petrol-400);
239
+ --color-interaction-link-low-text-hover: var(--color-petrol-400);
240
+ --color-interaction-link-high-icon-hover: var(--color-petrol-300);
241
+ --color-interaction-link-high-icon: var(--color-petrol-400);
242
+ --color-interaction-link-high-text-hover: var(--color-petrol-300);
243
+ --color-interaction-link-high-text: var(--color-petrol-400);
244
+ --color-interaction-container-branded-high-border-hover: var(--color-petrol-500);
245
+ --color-interaction-container-branded-high-border: var(--color-petrol-600);
246
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-white);
247
+ --color-interaction-container-branded-high-icon: var(--color-base-white);
248
+ --color-interaction-container-branded-high-text-hover: var(--color-base-white);
249
+ --color-interaction-container-branded-high-text: var(--color-base-white);
250
+ --color-interaction-container-branded-high-background-hover: var(--color-petrol-500);
251
+ --color-interaction-container-branded-high-background: var(--color-petrol-600);
252
+ --color-interaction-container-branded-low-border-hover: var(--color-petrol-300);
253
+ --color-interaction-container-branded-low-border: var(--color-petrol-400);
254
+ --color-interaction-container-branded-low-icon-hover: var(--color-petrol-300);
255
+ --color-interaction-container-branded-low-icon: var(--color-petrol-400);
256
+ --color-interaction-container-branded-low-text-hover: var(--color-petrol-300);
257
+ --color-interaction-container-branded-low-text: var(--color-petrol-400);
258
+ --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
259
+ --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
260
+ --components-menu-contextual-border: var(--color-content-low-border);
261
+ --components-menu-contextual-background: var(--color-level-00-background);
262
+ --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
263
+ --components-tooltip-text: var(--color-content-inverted-high-text);
264
+ --components-popover-supporting-text: var(--color-content-low-text);
265
+ --components-popover-text: var(--color-content-inverted-medium-text);
266
+ --components-popover-border: var(--color-content-low-border);
267
+ --components-notification-neutral-icon: var(--color-feedback-neutral-low-icon);
268
+ --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
269
+ --components-notification-neutral-background: var(--color-level-20-background);
270
+ --components-notification-success-icon: var(--color-feedback-success-low-icon);
271
+ --components-notification-success-border: var(--color-feedback-success-low-border);
272
+ --components-notification-success-background: var(--color-level-20-background);
273
+ --components-notification-error-icon: var(--color-feedback-error-low-icon);
274
+ --components-notification-error-border: var(--color-feedback-error-low-border);
275
+ --components-notification-error-background: var(--color-level-20-background);
276
+ --components-notification-warning-icon: var(--color-feedback-warning-low-icon);
277
+ --components-notification-warning-border: var(--color-feedback-warning-low-border);
278
+ --components-notification-warning-background: var(--color-level-20-background);
279
+ --components-notification-content-title: var(--color-content-high-text);
280
+ --components-notification-content-description: var(--color-content-medium-text);
281
+ --components-notification-information-border: var(--color-feedback-information-low-border);
282
+ --components-notification-information-icon: var(--color-feedback-information-low-icon);
283
+ --components-notification-information-background: var(--color-level-20-background);
284
+ --components-avatar-content-10: var(--color-rainbow-10-icon);
285
+ --components-avatar-content-9: var(--color-rainbow-9-text);
286
+ --components-avatar-content-8: var(--color-rainbow-8-text);
287
+ --components-avatar-content-7: var(--color-rainbow-7-text);
288
+ --components-avatar-content-6: var(--color-rainbow-6-icon);
289
+ --components-avatar-content-5: var(--color-rainbow-5-icon);
290
+ --components-avatar-content-4: var(--color-rainbow-4-icon);
291
+ --components-avatar-content-3: var(--color-rainbow-3-icon);
292
+ --components-avatar-content-2: var(--color-rainbow-2-icon);
293
+ --components-avatar-content-1: var(--color-rainbow-1-icon);
294
+ --components-avatar-border-10: var(--color-rainbow-10-border);
295
+ --components-avatar-border-9: var(--color-rainbow-9-border);
296
+ --components-avatar-border-8: var(--color-rainbow-8-border);
297
+ --components-avatar-border-7: var(--color-rainbow-7-border);
298
+ --components-avatar-border-6: var(--color-rainbow-6-border);
299
+ --components-avatar-border-5: var(--color-rainbow-5-border);
300
+ --components-avatar-border-4: var(--color-rainbow-4-border);
301
+ --components-avatar-border-3: var(--color-rainbow-3-border);
302
+ --components-avatar-border-2: var(--color-rainbow-2-border);
303
+ --components-avatar-border-1: var(--color-rainbow-1-border);
304
+ --components-avatar-background-10: var(--color-rainbow-10-background);
305
+ --components-avatar-background-9: var(--color-rainbow-9-background);
306
+ --components-avatar-background-8: var(--color-rainbow-8-background);
307
+ --components-avatar-background-7: var(--color-rainbow-7-background);
308
+ --components-avatar-background-6: var(--color-rainbow-6-background);
309
+ --components-avatar-background-5: var(--color-rainbow-5-background);
310
+ --components-avatar-background-4: var(--color-rainbow-4-background);
311
+ --components-avatar-background-3: var(--color-rainbow-3-background);
312
+ --components-avatar-background-2: var(--color-rainbow-2-background);
313
+ --components-avatar-background-1: var(--color-rainbow-1-background);
314
+ --components-alert-neutral-icon: var(--color-feedback-neutral-low-icon);
315
+ --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
316
+ --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
317
+ --components-alert-success-icon: var(--color-feedback-success-low-icon);
318
+ --components-alert-success-border: var(--color-feedback-success-low-border);
319
+ --components-alert-success-background: var(--color-feedback-success-low-background);
320
+ --components-alert-error-icon: var(--color-feedback-error-low-icon);
321
+ --components-alert-error-border: var(--color-feedback-error-low-border);
322
+ --components-alert-error-background: var(--color-feedback-error-low-background);
323
+ --components-alert-warning-icon: var(--color-feedback-warning-low-icon);
324
+ --components-alert-warning-border: var(--color-feedback-warning-low-border);
325
+ --components-alert-warning-background: var(--color-feedback-warning-low-background);
326
+ --components-alert-content-title: var(--color-content-high-text);
327
+ --components-alert-content-description: var(--color-content-medium-text);
328
+ --components-alert-information-border: var(--color-feedback-information-low-border);
329
+ --components-alert-information-icon: var(--color-feedback-information-low-icon);
330
+ --components-alert-information-background: var(--color-feedback-information-low-background);
331
+ --components-button-destructive-lower-border-hover: var(--color-dont-use-border);
332
+ --components-button-destructive-lower-border: var(--color-dont-use-border);
333
+ --components-button-destructive-lower-icon-hover: var(--color-dont-use-content);
334
+ --components-button-destructive-lower-icon: var(--color-dont-use-content);
335
+ --components-button-destructive-lower-text-hover: var(--color-dont-use-content);
336
+ --components-button-destructive-lower-text: var(--color-dont-use-content);
337
+ --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
338
+ --components-button-destructive-lower-background: var(--color-dont-use-background);
339
+ --components-list-custom-border: var(--color-content-low-border);
340
+ --components-list-custom-separator: var(--color-content-low-border);
341
+ --components-list-custom-item-title-content: var(--color-content-low-text);
342
+ --components-list-custom-item-content-disabled: var(--color-content-low-text);
343
+ --components-list-custom-background: var(--color-level-00-background);
344
+ --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
345
+ --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
346
+ --components-form-shape-border-success: var(--color-feedback-success-low-border);
347
+ --components-form-shape-border-error: var(--color-feedback-error-low-border);
348
+ --components-form-shape-border-focus: var(--color-focus-brand);
349
+ --components-form-shape-border-hover: var(--color-content-high-border);
350
+ --components-form-shape-border-default: var(--color-content-medium-border);
351
+ --components-form-shape-background-error: var(--color-feedback-error-high-background);
352
+ --components-form-field-icon-success: var(--color-feedback-success-low-icon);
353
+ --components-form-field-icon-error: var(--color-feedback-error-low-icon);
354
+ --components-form-field-icon-disabled: var(--color-content-medium-border);
355
+ --components-form-field-icon-default: var(--color-content-low-text);
356
+ --components-form-field-content-text: var(--color-content-high-text);
357
+ --components-form-field-content-placeholder: var(--color-content-low-text);
358
+ --components-form-field-border-readonly: var(--color-content-low-border);
359
+ --components-form-field-border-success: var(--color-feedback-success-low-border);
360
+ --components-form-field-border-error: var(--color-feedback-error-low-border);
361
+ --components-form-field-border-focus: var(--color-focus-brand);
362
+ --components-form-field-border-hover: var(--color-content-high-border);
363
+ --components-form-field-border-disabled: var(--color-content-medium-border);
364
+ --components-form-field-border-default: var(--color-content-medium-border);
365
+ --components-form-field-background-readonly: var(--color-level-05-background);
366
+ --components-form-field-background-error: var(--color-feedback-error-high-background);
367
+ --components-form-field-background-disabled: var(--color-level-10-background);
368
+ --components-form-field-background-hover: var(--color-level-05-background);
369
+ --components-form-field-background-focus: var(--color-level-00-background);
370
+ --components-form-field-background-default: var(--color-level-00-background);
371
+ --components-form-text-description-error: var(--color-feedback-error-low-icon);
372
+ --components-form-text-description-default: var(--color-content-low-text);
373
+ --components-form-text-label-disabled: var(--color-content-medium-text);
374
+ --components-form-text-label-default: var(--color-content-high-text);
375
+ --components-form-text-info-icon: var(--color-content-medium-text);
376
+ --components-form-text-required: var(--color-feedback-error-low-icon);
377
+ --components-button-medium-icon-hover: var(--components-button-gr-as-complementary-icon-hover);
378
+ --components-button-medium-icon: var(--components-button-gr-as-complementary-icon);
379
+ --components-button-medium-text-hover: var(--components-button-gr-as-complementary-text-hover);
380
+ --components-button-medium-text: var(--components-button-gr-as-complementary-text);
381
+ --components-button-medium-background-hover: var(--components-button-gr-as-complementary-background-hover);
382
+ --components-button-medium-background: var(--components-button-gr-as-complementary-background);
383
+ --components-button-lower-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
384
+ --components-button-lower-icon: var(--color-interaction-container-branded-low-icon);
385
+ --components-button-lower-text-hover: var(--color-interaction-container-branded-low-text-hover);
386
+ --components-button-lower-text: var(--color-interaction-container-branded-low-text);
387
+ --components-button-low-border-hover: var(--color-interaction-container-branded-low-border-hover);
388
+ --components-button-low-border: var(--color-interaction-container-branded-low-border);
389
+ --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
390
+ --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
391
+ --components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
392
+ --components-button-low-text: var(--color-interaction-container-branded-low-text);
393
+ --components-button-high-icon-hover: var(--color-interaction-container-branded-high-icon-hover);
394
+ --components-button-high-icon: var(--color-interaction-container-branded-high-icon);
395
+ --components-button-high-text-hover: var(--color-interaction-container-branded-high-text-hover);
396
+ --components-button-high-text: var(--color-interaction-container-branded-high-text);
397
+ --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
398
+ --components-button-high-background: var(--color-interaction-container-branded-high-background);
399
+ --color-focus-success: var(--color-feedback-success-low-border);
400
+ --color-focus-destructive: var(--color-feedback-error-high-border);
401
+ --color-interaction-link-low-icon: var(--color-content-high-text);
402
+ --color-interaction-link-low-text: var(--color-content-high-text);
403
+ --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
404
+ --color-interaction-container-neutral-border: var(--color-content-low-text);
405
+ --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
406
+ --color-interaction-container-neutral-icon: var(--color-content-low-text);
407
+ --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
408
+ --color-interaction-container-neutral-text: var(--color-content-low-text);
409
+ --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
410
+ --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
411
+ --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
412
+ --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
413
+ --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
414
+ }
415
+
416
+ :root {
417
+ --color-red-100: var(--color-red-mccs-100);
418
+ --color-red-200: var(--color-red-mccs-200);
419
+ --color-red-300: var(--color-red-mccs-300);
420
+ --color-red-400: var(--color-red-mccs-400);
421
+ --color-red-500: var(--color-red-mccs-500);
422
+ --color-red-00: var(--color-red-mccs-00);
423
+ }
424
+ /**
425
+ * Do not edit directly, this file was auto-generated.
426
+ */
427
+
428
+ :root {
429
+ --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
430
+ --components-button-destructive-low-border: rgba(255, 255, 255, 0);
431
+ --components-button-destructive-low-background-hover: rgba(11, 15, 17, 0.08);
432
+ --components-button-destructive-low-background: rgba(255, 255, 255, 0);
433
+ --components-button-destructive-medium-background-hover: rgba(11, 15, 17, 0.08);
434
+ --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
435
+ --components-loader-white-background: rgba(255, 255, 255, 0.2);
436
+ --components-list-native-item-background-title: rgba(255, 255, 255, 0);
437
+ --components-list-native-item-background-disabled: rgba(255, 255, 255, 0);
438
+ --components-list-native-item-background-hover: #4e7fdf;
439
+ --components-list-native-item-background-default: rgba(255, 255, 255, 0);
440
+ --components-list-native-item-content-disabled: rgba(255, 255, 255, 0.5);
441
+ --components-list-native-border: #767578;
442
+ --components-list-native-separator: #838086;
443
+ --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
444
+ --components-list-native-background: #565558;
445
+ --components-form-opacity-disabled: 50px;
446
+ --components-form-opacity-default: 100px;
447
+ --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
448
+ --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
449
+ --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
450
+ --components-button-lower-border-2: rgba(255, 255, 255, 0);
451
+ --components-button-lower-border-hover: rgba(255, 255, 255, 0);
452
+ --components-button-lower-border: rgba(255, 255, 255, 0);
453
+ --components-button-low-background: rgba(255, 255, 255, 0);
454
+ --components-button-high-border-hover: rgba(255, 255, 255, 0);
455
+ --components-button-high-border: rgba(255, 255, 255, 0);
456
+ --components-wpf-components-2: #ffffff;
457
+ --shadow-y-axis-2xl: 25px;
458
+ --shadow-y-axis-xl-2: 20px;
459
+ --shadow-y-axis-xl-1: 10px;
460
+ --shadow-y-axis-lg-2: 10px;
461
+ --shadow-y-axis-lg-1: 4px;
462
+ --shadow-y-axis-md-2: 4px;
463
+ --shadow-y-axis-md-1: 2px;
464
+ --shadow-y-axis-base: 1px;
465
+ --shadow-y-axis-none: 0px;
466
+ --shadow-spread-2xl: -12px;
467
+ --shadow-spread-xl: -5px;
468
+ --shadow-spread-lg-2: -3px;
469
+ --shadow-spread-lg-1: -2px;
470
+ --shadow-blur-2xl: 50px;
471
+ --shadow-blur-xl-2: 25px;
472
+ --shadow-blur-xl-1: 10px;
473
+ --shadow-blur-lg-2: 15px;
474
+ --shadow-blur-lg-1: 6px;
475
+ --shadow-blur-md-2: 6px;
476
+ --shadow-blur-md-1: 4px;
477
+ --shadow-blur-base-2: 2px;
478
+ --shadow-blur-base-1: 3px;
479
+ --shadow-color-opacity-3: rgba(11, 15, 17, 0.25);
480
+ --shadow-color-opacity-2: rgba(11, 15, 17, 0.1);
481
+ --shadow-color-opacity-1: rgba(11, 15, 17, 0.06);
482
+ --shadow-color-opacity-0: rgba(255, 255, 255, 0.06);
483
+ --color-black: #000000;
484
+ --color-interaction-container-neutral-background-hover: rgba(165, 166, 167, 0.12);
485
+ --color-interaction-container-neutral-background: rgba(255, 255, 255, 0);
486
+ --color-interaction-container-branded-low-background-hover: rgba(11, 15, 17, 0.08);
487
+ --color-interaction-container-branded-low-background: rgba(255, 255, 255, 0);
488
+ --components-menu-contextual-item-background-hover: var(--color-interaction-container-neutral-background-hover);
489
+ --components-menu-contextual-item-background: var(--color-interaction-container-neutral-background);
490
+ --components-tooltip-border: var(--color-gray-ocean-900);
491
+ --components-tooltip-background: var(--color-gray-ocean-900);
492
+ --components-popover-background: var(--color-gray-ocean-50);
493
+ --components-button-destructive-high-icon-hover: var(--color-base-black);
494
+ --components-button-destructive-high-icon: var(--color-base-black);
495
+ --components-button-destructive-high-text-hover: var(--color-base-black);
496
+ --components-button-destructive-high-text: var(--color-base-black);
497
+ --components-button-destructive-high-background-hover: var(--color-status-red-400);
498
+ --components-button-destructive-high-background: var(--color-status-red-300);
499
+ --components-button-destructive-low-icon-hover: var(--color-status-red-600);
500
+ --components-button-destructive-low-icon: var(--color-status-red-500);
501
+ --components-button-destructive-low-text-hover: var(--color-status-red-600);
502
+ --components-button-destructive-low-text: var(--color-status-red-500);
503
+ --components-button-destructive-medium-border-hover: var(--color-status-red-600);
504
+ --components-button-destructive-medium-border: var(--color-status-red-500);
505
+ --components-button-destructive-medium-icon-hover: var(--color-status-red-600);
506
+ --components-button-destructive-medium-icon: var(--color-status-red-500);
507
+ --components-button-destructive-medium-text-hover: var(--color-status-red-600);
508
+ --components-button-destructive-medium-text: var(--color-status-red-500);
509
+ --components-loader-brand-foreground: var(--color-petrol-500);
510
+ --components-loader-brand-background: var(--color-petrol-50);
511
+ --components-loader-white-foreground: var(--color-base-white);
512
+ --components-list-custom-item-background-title: var(--color-interaction-container-neutral-background);
513
+ --components-list-custom-item-background-disabled: var(--color-interaction-container-neutral-background);
514
+ --components-list-custom-item-background-hover: var(--color-interaction-container-neutral-background-hover);
515
+ --components-list-custom-item-background-default: var(--color-interaction-container-neutral-background);
516
+ --components-list-native-item-content-hover: var(--color-base-white);
517
+ --components-list-native-item-content-default: var(--color-base-white);
518
+ --components-form-shape-foreground-default: var(--color-base-white);
519
+ --components-form-shape-background-selected: var(--color-petrol-600);
520
+ --components-form-shape-background-disabled: var(--color-gray-ocean-75);
521
+ --components-form-shape-background-hover: var(--color-gray-ocean-100);
522
+ --components-form-shape-background-default: var(--color-gray-ocean-75);
523
+ --components-form-field-background-checked: var(--color-petrol-600);
524
+ --components-button-medium-border-hover: var(--components-button-gr-as-complementary-border-hover);
525
+ --components-button-medium-border: var(--components-button-gr-as-complementary-border);
526
+ --components-button-gr-as-complementary-icon-hover: var(--color-base-black);
527
+ --components-button-gr-as-complementary-icon: var(--color-base-black);
528
+ --components-button-gr-as-complementary-text-hover: var(--color-base-black);
529
+ --components-button-gr-as-complementary-text: var(--color-base-black);
530
+ --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-300);
531
+ --components-button-gr-as-complementary-background: var(--color-gray-ocean-200);
532
+ --components-button-lower-background-hover: var(--color-interaction-container-branded-low-background-hover);
533
+ --components-button-lower-background: var(--color-interaction-container-branded-low-background);
534
+ --components-button-low-background-hover: var(--color-interaction-container-branded-low-background-hover);
535
+ --color-dont-use-background: var(--color-gray-ocean-50);
536
+ --color-dont-use-content: var(--color-gray-ocean-150);
537
+ --color-dont-use-border: var(--color-gray-ocean-150);
538
+ --color-rainbow-10-text: var(--color-gray-ocean-500);
539
+ --color-rainbow-10-icon: var(--color-gray-ocean-500);
540
+ --color-rainbow-10-border: var(--color-gray-ocean-500);
541
+ --color-rainbow-10-background: var(--color-gray-ocean-75);
542
+ --color-rainbow-9-text: var(--color-lime-700);
543
+ --color-rainbow-9-icon: var(--color-lime-700);
544
+ --color-rainbow-9-border: var(--color-lime-700);
545
+ --color-rainbow-9-background: var(--color-lime-50);
546
+ --color-rainbow-8-text: var(--color-petrol-600);
547
+ --color-rainbow-8-icon: var(--color-petrol-600);
548
+ --color-rainbow-8-border: var(--color-petrol-600);
549
+ --color-rainbow-8-background: var(--color-petrol-50);
550
+ --color-rainbow-7-text: var(--color-green-600);
551
+ --color-rainbow-7-icon: var(--color-green-600);
552
+ --color-rainbow-7-border: var(--color-green-600);
553
+ --color-rainbow-7-background: var(--color-green-50);
554
+ --color-rainbow-6-text: var(--color-crimson-400);
555
+ --color-rainbow-6-icon: var(--color-crimson-400);
556
+ --color-rainbow-6-border: var(--color-crimson-400);
557
+ --color-rainbow-6-background: var(--color-crimson-50);
558
+ --color-rainbow-5-text: var(--color-turquoise-800);
559
+ --color-rainbow-5-icon: var(--color-turquoise-800);
560
+ --color-rainbow-5-border: var(--color-turquoise-800);
561
+ --color-rainbow-5-background: var(--color-turquoise-100);
562
+ --color-rainbow-4-text: var(--color-red-500);
563
+ --color-rainbow-4-icon: var(--color-red-500);
564
+ --color-rainbow-4-border: var(--color-red-500);
565
+ --color-rainbow-4-background: var(--color-red-50);
566
+ --color-rainbow-3-text: var(--color-yellow-800);
567
+ --color-rainbow-3-icon: var(--color-yellow-800);
568
+ --color-rainbow-3-border: var(--color-yellow-800);
569
+ --color-rainbow-3-background: var(--color-yellow-100);
570
+ --color-rainbow-2-text: var(--color-orange-700);
571
+ --color-rainbow-2-icon: var(--color-orange-700);
572
+ --color-rainbow-2-border: var(--color-orange-700);
573
+ --color-rainbow-2-background: var(--color-orange-50);
574
+ --color-rainbow-1-text: var(--color-amber-600);
575
+ --color-rainbow-1-icon: var(--color-amber-600);
576
+ --color-rainbow-1-border: var(--color-amber-600);
577
+ --color-rainbow-1-background: var(--color-amber-50);
578
+ --color-focus-brand: var(--color-petrol-500);
579
+ --color-feedback-success-low-text: var(--color-status-green-500);
580
+ --color-feedback-success-low-icon: var(--color-status-green-500);
581
+ --color-feedback-success-low-border: var(--color-status-green-500);
582
+ --color-feedback-success-low-background: var(--color-status-green-50);
583
+ --color-feedback-success-high-text: var(--color-base-white);
584
+ --color-feedback-success-high-icon: var(--color-base-white);
585
+ --color-feedback-success-high-border: var(--color-status-green-400);
586
+ --color-feedback-success-high-background: var(--color-status-green-400);
587
+ --color-feedback-warning-low-text: var(--color-status-yellow-500);
588
+ --color-feedback-warning-low-icon: var(--color-status-yellow-500);
589
+ --color-feedback-warning-low-border: var(--color-status-yellow-500);
590
+ --color-feedback-warning-low-background: var(--color-status-yellow-50);
591
+ --color-feedback-warning-high-text: var(--color-base-white);
592
+ --color-feedback-warning-high-icon: var(--color-base-white);
593
+ --color-feedback-warning-high-border: var(--color-status-yellow-400);
594
+ --color-feedback-warning-high-background: var(--color-status-yellow-400);
595
+ --color-feedback-neutral-low-text: var(--color-gray-ocean-400);
596
+ --color-feedback-neutral-low-icon: var(--color-gray-ocean-400);
597
+ --color-feedback-neutral-low-border: var(--color-gray-ocean-400);
598
+ --color-feedback-neutral-low-background: var(--color-gray-ocean-75);
599
+ --color-feedback-neutral-high-text: var(--color-base-white);
600
+ --color-feedback-neutral-high-icon: var(--color-base-white);
601
+ --color-feedback-neutral-high-border: var(--color-gray-ocean-400);
602
+ --color-feedback-neutral-high-background: var(--color-gray-ocean-400);
603
+ --color-feedback-error-low-text: var(--color-status-red-500);
604
+ --color-feedback-error-low-icon: var(--color-status-red-500);
605
+ --color-feedback-error-low-border: var(--color-status-red-500);
606
+ --color-feedback-error-low-background: var(--color-status-red-50);
607
+ --color-feedback-error-high-text: var(--color-base-white);
608
+ --color-feedback-error-high-icon: var(--color-base-white);
609
+ --color-feedback-error-high-border: var(--color-status-red-500);
610
+ --color-feedback-error-high-background: var(--color-status-red-500);
611
+ --color-feedback-information-low-text: var(--color-status-blue-500);
612
+ --color-feedback-information-low-icon: var(--color-status-blue-500);
613
+ --color-feedback-information-low-border: var(--color-status-blue-500);
614
+ --color-feedback-information-low-background: var(--color-status-blue-50);
615
+ --color-feedback-information-high-text: var(--color-base-white);
616
+ --color-feedback-information-high-icon: var(--color-base-white);
617
+ --color-feedback-information-high-border: var(--color-status-blue-400);
618
+ --color-feedback-information-high-background: var(--color-status-blue-400);
619
+ --color-chart-10: var(--color-crimson-500);
620
+ --color-chart-9: var(--color-dark-blue-500);
621
+ --color-chart-8: var(--color-orange-500);
622
+ --color-chart-7: var(--color-yellow-500);
623
+ --color-chart-6: var(--color-lime-500);
624
+ --color-chart-5: var(--color-light-blue-500);
625
+ --color-chart-4: var(--color-turquoise-500);
626
+ --color-chart-3: var(--color-petrol-500);
627
+ --color-chart-2: var(--color-dark-gray-500);
628
+ --color-chart-1: var(--color-amber-500);
629
+ --color-accent-900: var(--color-orange-900);
630
+ --color-accent-800: var(--color-orange-800);
631
+ --color-accent-700: var(--color-orange-700);
632
+ --color-accent-600: var(--color-orange-600);
633
+ --color-accent-500: var(--color-orange-500);
634
+ --color-accent-400: var(--color-orange-400);
635
+ --color-accent-300: var(--color-orange-300);
636
+ --color-accent-200: var(--color-orange-200);
637
+ --color-accent-100: var(--color-orange-100);
638
+ --color-accent-50: var(--color-orange-50);
639
+ --color-content-inverted-low-icon: var(--color-gray-ocean-400);
640
+ --color-content-inverted-low-text: var(--color-gray-ocean-400);
641
+ --color-content-inverted-medium-icon: var(--color-gray-ocean-300);
642
+ --color-content-inverted-medium-text: var(--color-gray-ocean-300);
643
+ --color-content-inverted-high-icon: var(--color-gray-ocean-50);
644
+ --color-content-inverted-high-text: var(--color-gray-ocean-50);
645
+ --color-content-lower-text: var(--color-gray-ocean-250);
646
+ --color-content-low-icon: var(--color-gray-ocean-400);
647
+ --color-content-low-text: var(--color-gray-ocean-400);
648
+ --color-content-low-border: var(--color-gray-ocean-100);
649
+ --color-content-medium-icon: var(--color-gray-ocean-550);
650
+ --color-content-medium-text: var(--color-gray-ocean-550);
651
+ --color-content-medium-border: var(--color-gray-ocean-200);
652
+ --color-content-high-icon: var(--color-gray-ocean-800);
653
+ --color-content-high-text: var(--color-gray-ocean-800);
654
+ --color-content-high-border: var(--color-gray-ocean-300);
655
+ --color-level-05-background: var(--color-gray-ocean-25);
656
+ --color-level-00-background: var(--color-gray-ocean-00);
657
+ --color-level-40-background: var(--color-gray-ocean-00);
658
+ --color-level-30-background: var(--color-gray-ocean-50);
659
+ --color-level-20-background: var(--color-gray-ocean-00);
660
+ --color-level-10-background: var(--color-gray-ocean-50);
661
+ --color-interaction-link-low-icon-hover: var(--color-petrol-600);
662
+ --color-interaction-link-low-text-hover: var(--color-petrol-600);
663
+ --color-interaction-link-high-icon-hover: var(--color-petrol-700);
664
+ --color-interaction-link-high-icon: var(--color-petrol-600);
665
+ --color-interaction-link-high-text-hover: var(--color-petrol-700);
666
+ --color-interaction-link-high-text: var(--color-petrol-600);
667
+ --color-interaction-container-branded-high-border-hover: var(--color-petrol-500);
668
+ --color-interaction-container-branded-high-border: var(--color-petrol-400);
669
+ --color-interaction-container-branded-high-icon-hover: var(--color-base-black);
670
+ --color-interaction-container-branded-high-icon: var(--color-base-black);
671
+ --color-interaction-container-branded-high-text-hover: var(--color-base-black);
672
+ --color-interaction-container-branded-high-text: var(--color-base-black);
673
+ --color-interaction-container-branded-high-background-hover: var(--color-petrol-500);
674
+ --color-interaction-container-branded-high-background: var(--color-petrol-400);
675
+ --color-interaction-container-branded-low-border-hover: var(--color-petrol-700);
676
+ --color-interaction-container-branded-low-border: var(--color-petrol-600);
677
+ --color-interaction-container-branded-low-icon-hover: var(--color-petrol-700);
678
+ --color-interaction-container-branded-low-icon: var(--color-petrol-600);
679
+ --color-interaction-container-branded-low-text-hover: var(--color-petrol-700);
680
+ --color-interaction-container-branded-low-text: var(--color-petrol-600);
681
+ --components-menu-contextual-item-content-disabled: var(--color-content-lower-text);
682
+ --components-menu-contextual-item-shortcut: var(--color-content-lower-text);
683
+ --components-menu-contextual-border: var(--color-content-low-border);
684
+ --components-menu-contextual-background: var(--color-level-00-background);
685
+ --components-tooltip-supporting-text: var(--color-content-inverted-medium-text);
686
+ --components-tooltip-text: var(--color-content-inverted-high-text);
687
+ --components-popover-supporting-text: var(--color-content-low-text);
688
+ --components-popover-text: var(--color-content-medium-text);
689
+ --components-popover-border: var(--color-content-low-border);
690
+ --components-notification-neutral-icon: var(--color-feedback-neutral-low-icon);
691
+ --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
692
+ --components-notification-neutral-background: var(--color-level-00-background);
693
+ --components-notification-success-icon: var(--color-feedback-success-low-icon);
694
+ --components-notification-success-border: var(--color-feedback-success-low-border);
695
+ --components-notification-success-background: var(--color-level-00-background);
696
+ --components-notification-error-icon: var(--color-feedback-error-low-icon);
697
+ --components-notification-error-border: var(--color-feedback-error-low-border);
698
+ --components-notification-error-background: var(--color-level-00-background);
699
+ --components-notification-warning-icon: var(--color-feedback-warning-low-icon);
700
+ --components-notification-warning-border: var(--color-feedback-warning-low-border);
701
+ --components-notification-warning-background: var(--color-level-00-background);
702
+ --components-notification-content-title: var(--color-content-high-text);
703
+ --components-notification-content-description: var(--color-content-medium-text);
704
+ --components-notification-information-border: var(--color-feedback-information-low-border);
705
+ --components-notification-information-icon: var(--color-feedback-information-low-icon);
706
+ --components-notification-information-background: var(--color-level-00-background);
707
+ --components-avatar-content-10: var(--color-rainbow-10-icon);
708
+ --components-avatar-content-9: var(--color-rainbow-9-text);
709
+ --components-avatar-content-8: var(--color-rainbow-8-text);
710
+ --components-avatar-content-7: var(--color-rainbow-7-text);
711
+ --components-avatar-content-6: var(--color-rainbow-6-icon);
712
+ --components-avatar-content-5: var(--color-rainbow-5-icon);
713
+ --components-avatar-content-4: var(--color-rainbow-4-icon);
714
+ --components-avatar-content-3: var(--color-rainbow-3-icon);
715
+ --components-avatar-content-2: var(--color-rainbow-2-icon);
716
+ --components-avatar-content-1: var(--color-rainbow-1-icon);
717
+ --components-avatar-border-10: var(--color-rainbow-10-border);
718
+ --components-avatar-border-9: var(--color-rainbow-9-border);
719
+ --components-avatar-border-8: var(--color-rainbow-8-border);
720
+ --components-avatar-border-7: var(--color-rainbow-7-border);
721
+ --components-avatar-border-6: var(--color-rainbow-6-border);
722
+ --components-avatar-border-5: var(--color-rainbow-5-border);
723
+ --components-avatar-border-4: var(--color-rainbow-4-border);
724
+ --components-avatar-border-3: var(--color-rainbow-3-border);
725
+ --components-avatar-border-2: var(--color-rainbow-2-border);
726
+ --components-avatar-border-1: var(--color-rainbow-1-border);
727
+ --components-avatar-background-10: var(--color-rainbow-10-background);
728
+ --components-avatar-background-9: var(--color-rainbow-9-background);
729
+ --components-avatar-background-8: var(--color-rainbow-8-background);
730
+ --components-avatar-background-7: var(--color-rainbow-7-background);
731
+ --components-avatar-background-6: var(--color-rainbow-6-background);
732
+ --components-avatar-background-5: var(--color-rainbow-5-background);
733
+ --components-avatar-background-4: var(--color-rainbow-4-background);
734
+ --components-avatar-background-3: var(--color-rainbow-3-background);
735
+ --components-avatar-background-2: var(--color-rainbow-2-background);
736
+ --components-avatar-background-1: var(--color-rainbow-1-background);
737
+ --components-alert-neutral-icon: var(--color-feedback-neutral-low-icon);
738
+ --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
739
+ --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
740
+ --components-alert-success-icon: var(--color-feedback-success-low-icon);
741
+ --components-alert-success-border: var(--color-feedback-success-low-border);
742
+ --components-alert-success-background: var(--color-feedback-success-low-background);
743
+ --components-alert-error-icon: var(--color-feedback-error-low-icon);
744
+ --components-alert-error-border: var(--color-feedback-error-low-border);
745
+ --components-alert-error-background: var(--color-feedback-error-low-background);
746
+ --components-alert-warning-icon: var(--color-feedback-warning-low-icon);
747
+ --components-alert-warning-border: var(--color-feedback-warning-low-border);
748
+ --components-alert-warning-background: var(--color-feedback-warning-low-background);
749
+ --components-alert-content-title: var(--color-content-high-text);
750
+ --components-alert-content-description: var(--color-content-medium-text);
751
+ --components-alert-information-border: var(--color-feedback-information-low-border);
752
+ --components-alert-information-icon: var(--color-feedback-information-low-icon);
753
+ --components-alert-information-background: var(--color-feedback-information-low-background);
754
+ --components-button-destructive-lower-border-hover: var(--color-dont-use-border);
755
+ --components-button-destructive-lower-border: var(--color-dont-use-border);
756
+ --components-button-destructive-lower-icon-hover: var(--color-dont-use-content);
757
+ --components-button-destructive-lower-icon: var(--color-dont-use-content);
758
+ --components-button-destructive-lower-text-hover: var(--color-dont-use-content);
759
+ --components-button-destructive-lower-text: var(--color-dont-use-content);
760
+ --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
761
+ --components-button-destructive-lower-background: var(--color-dont-use-background);
762
+ --components-list-custom-border: var(--color-content-low-border);
763
+ --components-list-custom-separator: var(--color-content-low-border);
764
+ --components-list-custom-item-title-content: var(--color-content-low-text);
765
+ --components-list-custom-item-content-disabled: var(--color-content-low-text);
766
+ --components-list-custom-background: var(--color-level-00-background);
767
+ --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
768
+ --components-form-shape-foreground-switch-dot: var(--color-content-medium-border);
769
+ --components-form-shape-border-success: var(--color-feedback-success-low-border);
770
+ --components-form-shape-border-error: var(--color-feedback-error-low-border);
771
+ --components-form-shape-border-focus: var(--color-focus-brand);
772
+ --components-form-shape-border-hover: var(--color-content-high-border);
773
+ --components-form-shape-border-default: var(--color-content-medium-border);
774
+ --components-form-shape-background-error: var(--color-feedback-error-high-background);
775
+ --components-form-field-icon-success: var(--color-feedback-success-low-icon);
776
+ --components-form-field-icon-error: var(--color-feedback-error-low-icon);
777
+ --components-form-field-icon-disabled: var(--color-content-medium-border);
778
+ --components-form-field-icon-default: var(--color-content-low-text);
779
+ --components-form-field-content-text: var(--color-content-high-text);
780
+ --components-form-field-content-placeholder: var(--color-content-low-text);
781
+ --components-form-field-border-readonly: var(--color-content-low-border);
782
+ --components-form-field-border-success: var(--color-feedback-success-low-border);
783
+ --components-form-field-border-error: var(--color-feedback-error-low-border);
784
+ --components-form-field-border-focus: var(--color-focus-brand);
785
+ --components-form-field-border-hover: var(--color-content-high-border);
786
+ --components-form-field-border-disabled: var(--color-content-medium-border);
787
+ --components-form-field-border-default: var(--color-content-medium-border);
788
+ --components-form-field-background-readonly: var(--color-level-05-background);
789
+ --components-form-field-background-error: var(--color-feedback-error-high-background);
790
+ --components-form-field-background-disabled: var(--color-level-10-background);
791
+ --components-form-field-background-hover: var(--color-level-05-background);
792
+ --components-form-field-background-focus: var(--color-level-00-background);
793
+ --components-form-field-background-default: var(--color-level-00-background);
794
+ --components-form-text-description-error: var(--color-feedback-error-low-icon);
795
+ --components-form-text-description-default: var(--color-content-low-text);
796
+ --components-form-text-label-disabled: var(--color-content-medium-text);
797
+ --components-form-text-label-default: var(--color-content-high-text);
798
+ --components-form-text-info-icon: var(--color-content-low-text);
799
+ --components-form-text-required: var(--color-feedback-error-low-icon);
800
+ --components-button-medium-icon-hover: var(--components-button-gr-as-complementary-icon-hover);
801
+ --components-button-medium-icon: var(--components-button-gr-as-complementary-icon);
802
+ --components-button-medium-text-hover: var(--components-button-gr-as-complementary-text-hover);
803
+ --components-button-medium-text: var(--components-button-gr-as-complementary-text);
804
+ --components-button-medium-background-hover: var(--components-button-gr-as-complementary-background-hover);
805
+ --components-button-medium-background: var(--components-button-gr-as-complementary-background);
806
+ --components-button-lower-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
807
+ --components-button-lower-icon: var(--color-interaction-container-branded-low-icon);
808
+ --components-button-lower-text-hover: var(--color-interaction-container-branded-low-text-hover);
809
+ --components-button-lower-text: var(--color-interaction-container-branded-low-text);
810
+ --components-button-low-border-hover: var(--color-interaction-container-branded-low-border-hover);
811
+ --components-button-low-border: var(--color-interaction-container-branded-low-border);
812
+ --components-button-low-icon-hover: var(--color-interaction-container-branded-low-icon-hover);
813
+ --components-button-low-icon: var(--color-interaction-container-branded-low-icon);
814
+ --components-button-low-text-hover: var(--color-interaction-container-branded-low-text-hover);
815
+ --components-button-low-text: var(--color-interaction-container-branded-low-text);
816
+ --components-button-high-icon-hover: var(--color-interaction-container-branded-high-icon-hover);
817
+ --components-button-high-icon: var(--color-interaction-container-branded-high-icon);
818
+ --components-button-high-text-hover: var(--color-interaction-container-branded-high-text-hover);
819
+ --components-button-high-text: var(--color-interaction-container-branded-high-text);
820
+ --components-button-high-background-hover: var(--color-interaction-container-branded-high-background-hover);
821
+ --components-button-high-background: var(--color-interaction-container-branded-high-background);
822
+ --color-focus-success: var(--color-feedback-success-low-border);
823
+ --color-focus-destructive: var(--color-feedback-error-high-border);
824
+ --color-interaction-link-low-icon: var(--color-content-high-text);
825
+ --color-interaction-link-low-text: var(--color-content-high-text);
826
+ --color-interaction-container-neutral-border-hover: var(--color-content-medium-text);
827
+ --color-interaction-container-neutral-border: var(--color-content-inverted-low-text);
828
+ --color-interaction-container-neutral-icon-hover: var(--color-content-medium-text);
829
+ --color-interaction-container-neutral-icon: var(--color-content-low-text);
830
+ --color-interaction-container-neutral-text-hover: var(--color-content-medium-text);
831
+ --color-interaction-container-neutral-text: var(--color-content-low-text);
832
+ --components-menu-contextual-item-content-hover: var(--color-interaction-container-neutral-text-hover);
833
+ --components-menu-contextual-item-content: var(--color-interaction-container-neutral-text);
834
+ --components-list-custom-item-content-hover: var(--color-interaction-container-neutral-text-hover);
835
+ --components-list-custom-item-content-default: var(--color-interaction-container-neutral-text);
836
+ --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
837
+ }
838
+
839
+ /**
840
+ * Do not edit directly, this file was auto-generated.
841
+ */
842
+
843
+ :root {
844
+ --letter-spacing-heading-xl: -1px;
845
+ --letter-spacing-heading-lg: -0.75px;
846
+ --letter-spacing-heading-md: -0.5px;
847
+ --letter-spacing-heading-sm: -0.25px;
848
+ --letter-spacing-heading-xs: 0px;
849
+ --spacing-09: 36px;
850
+ --spacing-07: 28px;
851
+ --spacing-3-5: 14px;
852
+ --spacing-2-5: 10px;
853
+ --spacing-1-5: 6px;
854
+ --spacing-0-5: 2px;
855
+ --spacing-px: 1px;
856
+ --spacing-96: 384px;
857
+ --spacing-80: 320px;
858
+ --spacing-72: 288px;
859
+ --spacing-64: 256px;
860
+ --spacing-60: 240px;
861
+ --spacing-56: 224px;
862
+ --spacing-52: 208px;
863
+ --spacing-48: 192px;
864
+ --spacing-44: 176px;
865
+ --spacing-40: 160px;
866
+ --spacing-36: 144px;
867
+ --spacing-32: 128px;
868
+ --spacing-28: 112px;
869
+ --spacing-24: 96px;
870
+ --spacing-20: 80px;
871
+ --spacing-16: 64px;
872
+ --spacing-14: 56px;
873
+ --spacing-12: 48px;
874
+ --spacing-11: 44px;
875
+ --spacing-10: 40px;
876
+ --spacing-9: 36px;
877
+ --spacing-8: 32px;
878
+ --spacing-7: 28px;
879
+ --spacing-6: 24px;
880
+ --spacing-5: 20px;
881
+ --spacing-4: 16px;
882
+ --spacing-3: 12px;
883
+ --spacing-2: 8px;
884
+ --spacing-1: 4px;
885
+ --spacing-0: 0px;
886
+ --radius-rounded-full: 9999px;
887
+ --radius-rounded-3xl: 24px;
888
+ --radius-rounded-2xl: 16px;
889
+ --radius-rounded-xl: 12px;
890
+ --radius-rounded-lg: 8px;
891
+ --radius-rounded-md: 6px;
892
+ --radius-rounded: 4px;
893
+ --radius-rounded-sm: 2px;
894
+ --radius-rounded-none: 0px;
895
+ --line-height-9xl: 128px;
896
+ --line-height-8xl: 96px;
897
+ --line-height-7xl: 72px;
898
+ --line-height-6xl: 60px;
899
+ --line-height-5xl: 48px;
900
+ --line-height-4xl: 40px;
901
+ --line-height-3xl: 36px;
902
+ --line-height-2xl: 32px;
903
+ --line-height-xl: 30px;
904
+ --line-height-lg: 28px;
905
+ --line-height-base: 24px;
906
+ --line-height-sm: 20px;
907
+ --line-height-xs: 16px;
908
+ --leading-loose: 2px;
909
+ --leading-relaxed: 1.625px;
910
+ --leading-normal: 1.5px;
911
+ --leading-snug: 1.375px;
912
+ --leading-tight: 1.25px;
913
+ --leading-none: 1px;
914
+ --leading-px-10: 40px;
915
+ --leading-px-9: 36px;
916
+ --leading-px-8: 32px;
917
+ --leading-px-7: 28px;
918
+ --leading-px-6: 24px;
919
+ --leading-px-5: 20px;
920
+ --leading-px-4: 16px;
921
+ --leading-px-3: 12px;
922
+ --font-weight-low-emphasis: 400;
923
+ --font-weight-medium-emphasis: 500;
924
+ --font-weight-high-emphasis: 700;
925
+ --font-size-9xl: 128px;
926
+ --font-size-8xl: 96px;
927
+ --font-size-7xl: 72px;
928
+ --font-size-6xl: 60px;
929
+ --font-size-5xl: 48px;
930
+ --font-size-4xl: 36px;
931
+ --font-size-3xl: 30px;
932
+ --font-size-2xl: 24px;
933
+ --font-size-xl: 20px;
934
+ --font-size-lg: 18px;
935
+ --font-size-md: 16px;
936
+ --font-size-sm: 14px;
937
+ --font-size-xs: 12px;
938
+ --color-yellow-900: #4d3a00;
939
+ --color-yellow-800: #795c00;
940
+ --color-yellow-700: #a67d00;
941
+ --color-yellow-600: #d29f00;
942
+ --color-yellow-500: #ffc100;
943
+ --color-yellow-400: #ffcc2d;
944
+ --color-yellow-300: #ffd759;
945
+ --color-yellow-200: #ffe286;
946
+ --color-yellow-100: #ffecb3;
947
+ --color-yellow-50: #fff7df;
948
+ --color-turquoise-900: #203330;
949
+ --color-turquoise-800: #32504c;
950
+ --color-turquoise-700: #456e68;
951
+ --color-turquoise-600: #578b84;
952
+ --color-turquoise-500: #6aa9a0;
953
+ --color-turquoise-400: #84b8b1;
954
+ --color-turquoise-300: #9ec7c1;
955
+ --color-turquoise-200: #b8d6d2;
956
+ --color-turquoise-100: #d2e5e3;
957
+ --color-turquoise-50: #ecf4f3;
958
+ --color-red-mccs-00: #ff6161;
959
+ --color-red-mccs-500: #450000;
960
+ --color-red-mccs-400: #7d0000;
961
+ --color-red-mccs-300: #ae0303;
962
+ --color-red-mccs-200: #d00202;
963
+ --color-red-mccs-100: #ff3838;
964
+ --color-red-900: #3d0909;
965
+ --color-red-800: #610e0e;
966
+ --color-red-700: #851313;
967
+ --color-red-600: #a81818;
968
+ --color-red-500: #cc1d1d;
969
+ --color-red-400: #d54545;
970
+ --color-red-300: #de6c6c;
971
+ --color-red-200: #e79494;
972
+ --color-red-100: #f0bbbb;
973
+ --color-red-50: #f9e3e3;
974
+ --color-petrol-900: #0b292e;
975
+ --color-petrol-800: #124148;
976
+ --color-petrol-700: #185963;
977
+ --color-petrol-600: #1f717d;
978
+ --color-petrol-500: #258998;
979
+ --color-petrol-400: #4b9eaa;
980
+ --color-petrol-300: #71b2bc;
981
+ --color-petrol-200: #97c7ce;
982
+ --color-petrol-100: #bedce0;
983
+ --color-petrol-50: #e4f0f2;
984
+ --color-orange-950: #371408;
985
+ --color-orange-900: #45190a;
986
+ --color-orange-800: #6e280f;
987
+ --color-orange-700: #963715;
988
+ --color-orange-600: #bf451a;
989
+ --color-orange-500: #e75420;
990
+ --color-orange-400: #eb7247;
991
+ --color-orange-300: #ef906e;
992
+ --color-orange-200: #f4ae95;
993
+ --color-orange-100: #f8ccbc;
994
+ --color-orange-50: #fceae3;
995
+ --color-status-yellow-900: #302300;
996
+ --color-status-yellow-800: #4d3701;
997
+ --color-status-yellow-700: #805c00;
998
+ --color-status-yellow-600: #b58200;
999
+ --color-status-yellow-500: #e0a917;
1000
+ --color-status-yellow-400: #fac50d;
1001
+ --color-status-yellow-300: #f7d14c;
1002
+ --color-status-yellow-200: #ffe286;
1003
+ --color-status-yellow-100: #fae49d;
1004
+ --color-status-yellow-50: #fff7df;
1005
+ --color-status-red-900: #380101;
1006
+ --color-status-red-800: #530101;
1007
+ --color-status-red-700: #911515;
1008
+ --color-status-red-600: #bb1919;
1009
+ --color-status-red-500: #da2424;
1010
+ --color-status-red-400: #ff3d3d;
1011
+ --color-status-red-300: #ff6161;
1012
+ --color-status-red-200: #ff8f8f;
1013
+ --color-status-red-100: #f5c4c4;
1014
+ --color-status-red-50: #ffeded;
1015
+ --color-status-green-900: #002302;
1016
+ --color-status-green-800: #003603;
1017
+ --color-status-green-700: #035707;
1018
+ --color-status-green-600: #008207;
1019
+ --color-status-green-500: #34ae3b;
1020
+ --color-status-green-400: #45d24d;
1021
+ --color-status-green-300: #6bde71;
1022
+ --color-status-green-200: #9ef4a3;
1023
+ --color-status-green-100: #c8facb;
1024
+ --color-status-green-50: #eafeeb;
1025
+ --color-status-blue-900: #001c37;
1026
+ --color-status-blue-800: #09285c;
1027
+ --color-status-blue-700: #113a80;
1028
+ --color-status-blue-600: #1c4d9e;
1029
+ --color-status-blue-500: #2660c2;
1030
+ --color-status-blue-400: #3883ff;
1031
+ --color-status-blue-300: #659fff;
1032
+ --color-status-blue-200: #a8c9ff;
1033
+ --color-status-blue-100: #c7dcff;
1034
+ --color-status-blue-50: #f0f6ff;
1035
+ --color-light-blue-500: #9ac3ce;
1036
+ --color-lime-900: #2a330e;
1037
+ --color-lime-800: #435017;
1038
+ --color-lime-700: #5c6e1f;
1039
+ --color-lime-600: #748b28;
1040
+ --color-lime-500: #8da930;
1041
+ --color-lime-400: #a1b854;
1042
+ --color-lime-300: #b5c778;
1043
+ --color-lime-200: #c9d69d;
1044
+ --color-lime-100: #dde5c1;
1045
+ --color-lime-50: #f1f4e5;
1046
+ --color-green-900: #062908;
1047
+ --color-green-800: #09400c;
1048
+ --color-green-700: #0c5810;
1049
+ --color-green-600: #106f15;
1050
+ --color-green-500: #138719;
1051
+ --color-green-400: #3c9c41;
1052
+ --color-green-300: #66b16a;
1053
+ --color-green-200: #8fc692;
1054
+ --color-green-100: #b8dbba;
1055
+ --color-green-50: #e2f0e2;
1056
+ --color-gray-spark-00: #ffffff;
1057
+ --color-gray-spark-900: #0e0e0e;
1058
+ --color-gray-spark-850: #161616;
1059
+ --color-gray-spark-800: #1d1d1d;
1060
+ --color-gray-spark-750: #252525;
1061
+ --color-gray-spark-700: #2b2b2b;
1062
+ --color-gray-spark-650: #313131;
1063
+ --color-gray-spark-600: #3a3a3a;
1064
+ --color-gray-spark-550: #414141;
1065
+ --color-gray-spark-500: #484848;
1066
+ --color-gray-spark-450: #4f4f4f;
1067
+ --color-gray-spark-400: #6d6d6d;
1068
+ --color-gray-spark-350: #808080;
1069
+ --color-gray-spark-300: #919191;
1070
+ --color-gray-spark-250: #a9a9a9;
1071
+ --color-gray-spark-200: #bfbfbf;
1072
+ --color-gray-spark-150: #cccccc;
1073
+ --color-gray-spark-100: #e3e3e3;
1074
+ --color-gray-spark-75: #ededed;
1075
+ --color-gray-spark-50: #f6f6f6;
1076
+ --color-gray-spark-25: #fbfbfb;
1077
+ --color-gray-ocean-00: #ffffff;
1078
+ --color-gray-ocean-900: #0b0f11;
1079
+ --color-gray-ocean-850: #11171a;
1080
+ --color-gray-ocean-800: #171f22;
1081
+ --color-gray-ocean-750: #1e272b;
1082
+ --color-gray-ocean-700: #222e33;
1083
+ --color-gray-ocean-650: #27353b;
1084
+ --color-gray-ocean-600: #2e3e44;
1085
+ --color-gray-ocean-550: #34464d;
1086
+ --color-gray-ocean-500: #394d55;
1087
+ --color-gray-ocean-450: #3f555e;
1088
+ --color-gray-ocean-400: #617177;
1089
+ --color-gray-ocean-350: #72858c;
1090
+ --color-gray-ocean-300: #889499;
1091
+ --color-gray-ocean-250: #9fadb2;
1092
+ --color-gray-ocean-200: #bac1c4;
1093
+ --color-gray-ocean-150: #c6ced1;
1094
+ --color-gray-ocean-100: #e1e4e6;
1095
+ --color-gray-ocean-75: #eaeef0;
1096
+ --color-gray-ocean-50: #f5f6f7;
1097
+ --color-gray-ocean-25: #fafbfb;
1098
+ --color-dark-gray-500: #394d55;
1099
+ --color-dark-blue-500: #447583;
1100
+ --color-crimson-900: #2e0010;
1101
+ --color-crimson-800: #490019;
1102
+ --color-crimson-700: #630022;
1103
+ --color-crimson-600: #7e002c;
1104
+ --color-crimson-500: #990035;
1105
+ --color-crimson-400: #ab2d58;
1106
+ --color-crimson-300: #bd597c;
1107
+ --color-crimson-200: #cf869f;
1108
+ --color-crimson-100: #e0b3c2;
1109
+ --color-crimson-50: #f2dfe6;
1110
+ --color-amber-900: #482608;
1111
+ --color-amber-800: #723d0c;
1112
+ --color-amber-700: #9c5311;
1113
+ --color-amber-600: #c66a15;
1114
+ --color-amber-500: #f0801a;
1115
+ --color-amber-400: #f39642;
1116
+ --color-amber-300: #f5ac6a;
1117
+ --color-amber-200: #f8c392;
1118
+ --color-amber-100: #fbd9ba;
1119
+ --color-amber-50: #fdefe2;
1120
+ --color-base-black: #000000;
1121
+ --color-base-white: #ffffff;
1122
+ }
1123
+
1124
+ /**
1125
+ * Do not edit directly, this file was auto-generated.
1126
+ */
1127
+
1128
+ :root {
1129
+ --global-typography-legend-font-style: uppercase;
1130
+ --global-typography-label-font-style: normal;
1131
+ --global-typography-small-font-style: normal;
1132
+ --global-typography-p-font-style: normal;
1133
+ --global-typography-h5-font-style: normal;
1134
+ --global-typography-h6-font-style: normal;
1135
+ --global-typography-h4-font-style: normal;
1136
+ --global-typography-h3-font-style: normal;
1137
+ --global-typography-h2-font-style: normal;
1138
+ --global-typography-h1-font-style: normal;
1139
+ --tooltip-font-weight: 500;
1140
+ --popover-shadow-2-x: 0px;
1141
+ --popover-shadow-1-blur: 1px;
1142
+ --popover-shadow-1-x: 0px;
1143
+ --popover-font-weight: 500;
1144
+ --menu-contextual-item-font-weight: 500;
1145
+ --menu-contextual-divider-padding-bottom: 3px;
1146
+ --list-native-separator-padding-y: 3px;
1147
+ --list-native-separator-padding-x: 9px;
1148
+ --button-lg-ring-radius: 9px;
1149
+ --button-md-ring-radius: 7px;
1150
+ --button-sm-ring-radius: 5px;
1151
+ --button-xs-ring-radius: 3px;
1152
+ --notification-title-line-height: var(--line-height-sm);
1153
+ --notification-title-font-weight: var(--font-weight-medium-emphasis);
1154
+ --notification-title-font-size: var(--font-size-sm);
1155
+ --notification-timestamp-line-height: var(--line-height-sm);
1156
+ --notification-timestamp-font-weight: var(--font-weight-low-emphasis);
1157
+ --notification-timestamp-font-size: var(--font-size-sm);
1158
+ --notification-description-line-height: var(--line-height-sm);
1159
+ --notification-description-font-weight: var(--font-weight-medium-emphasis);
1160
+ --notification-description-font-size: var(--font-size-sm);
1161
+ --notification-border-width-low-emphasis: var(--spacing-px);
1162
+ --notification-border-width-high-emphasis: var(--spacing-2);
1163
+ --notification-radius: var(--radius-rounded-lg);
1164
+ --notification-padding: var(--spacing-4);
1165
+ --notification-gap-y: var(--spacing-1);
1166
+ --notification-gap-x-title: var(--spacing-2);
1167
+ --notification-gap-x: var(--spacing-3);
1168
+ --notification-icon-size: var(--spacing-5);
1169
+ --icon-xl: var(--spacing-7);
1170
+ --icon-lg: var(--spacing-6);
1171
+ --icon-md: var(--spacing-5);
1172
+ --icon-sm: var(--spacing-4);
1173
+ --icon-xs: var(--spacing-3);
1174
+ --loader-size-xl: var(--spacing-8);
1175
+ --loader-size-lg: var(--spacing-7);
1176
+ --loader-size-md: var(--spacing-6);
1177
+ --loader-size-sm: var(--spacing-5);
1178
+ --loader-size-xs: var(--spacing-4);
1179
+ --form-toggle-width: var(--spacing-9);
1180
+ --form-toggle-switch-dot-selected: var(--spacing-3-5);
1181
+ --form-toggle-switch-dot-default: var(--spacing-3);
1182
+ --form-toggle-padding-selected: var(--spacing-0-5);
1183
+ --form-toggle-padding-default: var(--spacing-1);
1184
+ --form-toggle-radius: var(--radius-rounded-full);
1185
+ --form-toggle-padding-top: var(--spacing-0);
1186
+ --form-toggle-height: var(--spacing-5);
1187
+ --form-toggle-border-width: var(--spacing-0-5);
1188
+ --form-radio-ring-radius: var(--radius-rounded-full);
1189
+ --form-radio-size: var(--spacing-5);
1190
+ --form-radio-padding-top: var(--spacing-0);
1191
+ --form-radio-inner-circle-size: var(--spacing-2);
1192
+ --form-radio-inner-circle-padding: var(--spacing-1-5);
1193
+ --form-radio-border-width: var(--spacing-0-5);
1194
+ --form-checkbox-icon-stroke: var(--spacing-0-5);
1195
+ --form-checkbox-ring-radius: var(--radius-rounded-lg);
1196
+ --form-checkbox-size: var(--spacing-5);
1197
+ --form-checkbox-radius: var(--radius-rounded-md);
1198
+ --form-checkbox-padding-top: var(--spacing-0);
1199
+ --form-checkbox-icon-size: var(--spacing-3-5);
1200
+ --form-checkbox-border-width: var(--spacing-0-5);
1201
+ --form-field-inner-button-padding-y: var(--spacing-2-5);
1202
+ --form-field-inner-button-padding-x-int: var(--spacing-1-5);
1203
+ --form-field-inner-button-padding-x-ext: var(--spacing-2-5);
1204
+ --form-field-leading-trailing-line-height: var(--line-height-base);
1205
+ --form-field-leading-trailing-icon-size: var(--spacing-5);
1206
+ --form-field-leading-trailing-font-size: var(--font-size-sm);
1207
+ --form-field-radius: var(--radius-rounded-md);
1208
+ --form-field-padding-y: var(--spacing-2);
1209
+ --form-field-padding-x-icon-button: var(--spacing-10);
1210
+ --form-field-padding-x: var(--spacing-2);
1211
+ --form-field-line-height: var(--line-height-base);
1212
+ --form-field-gap-inner: var(--spacing-2);
1213
+ --form-field-gap: var(--spacing-2);
1214
+ --form-field-icon-size: var(--spacing-5);
1215
+ --form-field-font-weight: var(--font-weight-medium-emphasis);
1216
+ --form-field-font-size: var(--font-size-md);
1217
+ --form-label-font-weight: var(--font-weight-medium-emphasis);
1218
+ --form-label-line-height: var(--line-height-sm);
1219
+ --form-label-gap: var(--spacing-1);
1220
+ --form-label-font-size: var(--font-size-sm);
1221
+ --form-description-font-weight: var(--font-weight-low-emphasis);
1222
+ --form-description-line-height: var(--line-height-sm);
1223
+ --form-description-font-size: var(--font-size-sm);
1224
+ --form-gap-y: var(--spacing-1);
1225
+ --form-gap-x: var(--spacing-3);
1226
+ --focus-outline-stroke: var(--spacing-0-5);
1227
+ --focus-outline-offset: var(--spacing-0-5);
1228
+ --focus-field-stroke: var(--spacing-px);
1229
+ --badge-radius: var(--radius-rounded-full);
1230
+ --badge-padding-y: var(--spacing-1);
1231
+ --badge-padding-x: var(--spacing-2);
1232
+ --badge-gap-x: var(--spacing-1);
1233
+ --avatar-xl-size: var(--spacing-16);
1234
+ --avatar-xl-icon-size: var(--spacing-11);
1235
+ --avatar-xl-font-size: var(--spacing-8);
1236
+ --avatar-lg-size: var(--spacing-12);
1237
+ --avatar-lg-icon-size: var(--spacing-8);
1238
+ --avatar-lg-font-size: var(--spacing-6);
1239
+ --avatar-md-size: var(--spacing-10);
1240
+ --avatar-md-icon-size: var(--spacing-7);
1241
+ --avatar-md-font-size: var(--spacing-5);
1242
+ --avatar-sm-size: var(--spacing-8);
1243
+ --avatar-sm-icon-size: var(--spacing-5);
1244
+ --avatar-sm-font-size: var(--spacing-4);
1245
+ --avatar-xs-size: var(--spacing-6);
1246
+ --avatar-xs-icon-size: var(--spacing-4);
1247
+ --avatar-xs-font-size: var(--spacing-3);
1248
+ --alert-message-line-height: var(--line-height-sm);
1249
+ --alert-message-font-weight: var(--font-weight-low-emphasis);
1250
+ --alert-message-font-size: var(--font-size-sm);
1251
+ --alert-heading-line-height: var(--line-height-sm);
1252
+ --alert-heading-font-weight: var(--font-weight-medium-emphasis);
1253
+ --alert-heading-font-size: var(--font-size-sm);
1254
+ --alert-radius: var(--radius-rounded-lg);
1255
+ --alert-padding: var(--spacing-4);
1256
+ --alert-gap-y: var(--spacing-1);
1257
+ --alert-icon-position-y: var(--spacing-4);
1258
+ --alert-icon-position-x: var(--spacing-4);
1259
+ --alert-gap-x: var(--spacing-3);
1260
+ --alert-icon-size: var(--spacing-5);
1261
+ --global-typography-legend-font-weight: var(--font-weight-medium-emphasis);
1262
+ --global-typography-legend-line-height: var(--line-height-xs);
1263
+ --global-typography-legend-font-size: var(--font-size-xs);
1264
+ --global-typography-label-font-weight: var(--font-weight-medium-emphasis);
1265
+ --global-typography-label-line-height: var(--line-height-sm);
1266
+ --global-typography-label-font-size: var(--font-size-sm);
1267
+ --global-typography-small-line-height: var(--line-height-xs);
1268
+ --global-typography-small-font-size: var(--font-size-xs);
1269
+ --global-typography-p-font-weight: var(--font-weight-low-emphasis);
1270
+ --global-typography-p-line-height: var(--line-height-base);
1271
+ --global-typography-p-font-size: var(--font-size-md);
1272
+ --global-typography-h5-font-weight: var(--font-weight-high-emphasis);
1273
+ --global-typography-h5-line-height: var(--line-height-lg);
1274
+ --global-typography-h5-font-size: var(--font-size-lg);
1275
+ --global-typography-h6-font-weight: var(--font-weight-medium-emphasis);
1276
+ --global-typography-h6-line-height: var(--line-height-lg);
1277
+ --global-typography-h6-font-size: var(--font-size-lg);
1278
+ --global-typography-h4-font-weight: var(--font-weight-high-emphasis);
1279
+ --global-typography-h4-line-height: var(--line-height-xl);
1280
+ --global-typography-h4-font-size: var(--font-size-xl);
1281
+ --global-typography-h3-font-weight: var(--font-weight-high-emphasis);
1282
+ --global-typography-h3-line-height: var(--line-height-2xl);
1283
+ --global-typography-h3-font-size: var(--font-size-2xl);
1284
+ --global-typography-h2-font-weight: var(--font-weight-high-emphasis);
1285
+ --global-typography-h2-line-height: var(--line-height-3xl);
1286
+ --global-typography-h2-font-size: var(--font-size-3xl);
1287
+ --global-typography-h1-font-weight: var(--font-weight-high-emphasis);
1288
+ --global-typography-h1-line-height: var(--line-height-4xl);
1289
+ --global-typography-h1-font-size: var(--font-size-5xl);
1290
+ --tooltip-radius: var(--radius-rounded-md);
1291
+ --tooltip-gap-y: var(--spacing-1);
1292
+ --tooltip-complex-padding-y: var(--spacing-3);
1293
+ --tooltip-padding-y: var(--spacing-3);
1294
+ --tooltip-padding-x: var(--spacing-3);
1295
+ --tooltip-font-size: var(--font-size-sm);
1296
+ --popover-radius: var(--radius-rounded-md);
1297
+ --popover-padding-y: var(--spacing-3);
1298
+ --popover-padding-x: var(--spacing-3);
1299
+ --popover-gap-y: var(--spacing-1);
1300
+ --popover-font-size: var(--font-size-sm);
1301
+ --popover-shadow-2-opacity: var(--shadow-color-opacity-2);
1302
+ --popover-shadow-2-spread: var(--shadow-spread-lg-2);
1303
+ --popover-shadow-2-blur: var(--shadow-blur-lg-2);
1304
+ --popover-shadow-2-y: var(--shadow-y-axis-lg-2);
1305
+ --popover-shadow-1-opacity: var(--shadow-color-opacity-3);
1306
+ --popover-shadow-1-spread: var(--shadow-spread-lg-1);
1307
+ --popover-shadow-1-y: var(--shadow-y-axis-none);
1308
+ --menu-contextual-radius: var(--radius-rounded-md);
1309
+ --menu-contextual-padding-y: var(--spacing-1);
1310
+ --menu-contextual-padding-x: var(--spacing-1);
1311
+ --menu-contextual-gap-y: var(--spacing-0-5);
1312
+ --menu-contextual-item-radius: var(--radius-rounded);
1313
+ --menu-contextual-item-gap-x: var(--spacing-3);
1314
+ --menu-contextual-item-padding-y: var(--spacing-2);
1315
+ --menu-contextual-item-padding-x: var(--spacing-2-5);
1316
+ --menu-contextual-item-font-size: var(--font-size-sm);
1317
+ --menu-contextual-divider-padding-x: var(--spacing-2-5);
1318
+ --menu-contextual-divider-padding-top: var(--spacing-1);
1319
+ --list-custom-sub-item-padding-left: var(--spacing-10);
1320
+ --list-custom-separator-padding-y: var(--spacing-0-5);
1321
+ --list-custom-separator-padding-x: var(--spacing-0);
1322
+ --list-custom-padding: var(--spacing-2);
1323
+ --list-custom-radius: var(--radius-rounded-md);
1324
+ --list-custom-gap-y: var(--spacing-0-5);
1325
+ --list-custom-item-radius: var(--radius-rounded-md);
1326
+ --list-custom-item-gap-x: var(--spacing-3);
1327
+ --list-custom-item-padding-y: var(--spacing-2);
1328
+ --list-custom-item-padding-x: var(--spacing-2);
1329
+ --list-custom-item-padding-right: var(--spacing-2);
1330
+ --list-custom-item-padding-left: var(--spacing-8);
1331
+ --list-custom-line-height: var(--line-height-base);
1332
+ --list-custom-font-size: var(--font-size-md);
1333
+ --list-custom-icon-size: var(--spacing-5);
1334
+ --list-native-sub-item-padding-left: var(--spacing-8);
1335
+ --list-native-padding: var(--spacing-2);
1336
+ --list-native-radius: var(--radius-rounded-md);
1337
+ --list-native-gap-y: var(--spacing-0-5);
1338
+ --list-native-item-radius: var(--radius-rounded-md);
1339
+ --list-native-item-padding-y: var(--spacing-0);
1340
+ --list-native-item-padding-right: var(--spacing-2);
1341
+ --list-native-item-padding-left: var(--spacing-5);
1342
+ --list-native-line-height: var(--line-height-base);
1343
+ --list-native-font-size: var(--font-size-md);
1344
+ --list-native-icon-size: var(--spacing-5);
1345
+ --button-lg-padding-y: var(--spacing-2-5);
1346
+ --button-lg-padding-x: var(--spacing-4);
1347
+ --button-lg-line-height: var(--line-height-lg);
1348
+ --button-lg-icon-size: var(--spacing-6);
1349
+ --button-lg-icon-button-padding: var(--spacing-3);
1350
+ --button-lg-gap: var(--spacing-2);
1351
+ --button-lg-font-size: var(--font-size-lg);
1352
+ --button-lg-border-radius: var(--radius-rounded-lg);
1353
+ --button-md-padding-y: var(--spacing-2);
1354
+ --button-md-padding-x: var(--spacing-3-5);
1355
+ --button-md-line-height: var(--line-height-base);
1356
+ --button-md-icon-size: var(--spacing-5);
1357
+ --button-md-icon-button-padding: var(--spacing-2-5);
1358
+ --button-md-gap: var(--spacing-2);
1359
+ --button-md-font-size: var(--font-size-md);
1360
+ --button-md-border-radius: var(--radius-rounded-md);
1361
+ --button-sm-padding-y: var(--spacing-1-5);
1362
+ --button-sm-padding-x: var(--spacing-3);
1363
+ --button-sm-line-height: var(--line-height-sm);
1364
+ --button-sm-icon-size: var(--spacing-4);
1365
+ --button-sm-icon-button-padding: var(--spacing-2);
1366
+ --button-sm-gap: var(--spacing-1-5);
1367
+ --button-sm-font-size: var(--font-size-sm);
1368
+ --button-sm-border-radius: var(--radius-rounded);
1369
+ --button-xs-padding-y: var(--spacing-1);
1370
+ --button-xs-padding-x: var(--spacing-2-5);
1371
+ --button-xs-line-height: var(--line-height-xs);
1372
+ --button-xs-icon-size: var(--spacing-3);
1373
+ --button-xs-icon-button-padding: var(--spacing-1-5);
1374
+ --button-xs-gap: var(--spacing-1);
1375
+ --button-xs-font-size: var(--font-size-xs);
1376
+ --button-xs-border-radius: var(--radius-rounded-sm);
1377
+ }
1378
+