@nova-design-system/nova-base 3.0.0-beta.16

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