@payfit/unity-themes 2.24.2 → 2.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/dist/css/unity.css +1653 -543
  2. package/dist/esm/components/unity-theme-provider.d.ts +25 -0
  3. package/dist/esm/components/unity-theme-provider.js +34 -0
  4. package/dist/esm/components/unity-theme-provider.test.d.ts +1 -0
  5. package/dist/esm/index.d.ts +1 -0
  6. package/dist/esm/index.js +8 -5
  7. package/dist/esm/scripts/actions/compose-multi-theme.d.ts +15 -0
  8. package/dist/esm/scripts/transforms/tailwind-color-token.d.ts +4 -3
  9. package/dist/esm/scripts/transforms/tailwind-grid-token.d.ts +2 -1
  10. package/dist/esm/scripts/transforms/tailwind-spacing-token.d.ts +1 -1
  11. package/dist/esm/scripts/transforms/tailwind-text-token.d.ts +1 -1
  12. package/dist/esm/scripts/transforms/tailwind-typography-token.d.ts +1 -4
  13. package/dist/esm/scripts/utils/prefix-transform.d.ts +4 -0
  14. package/dist/esm/utils/cn.d.ts +4 -3
  15. package/package.json +3 -2
  16. package/src/components/unity-theme-provider.stories.tsx +532 -0
  17. package/src/components/unity-theme-provider.test.tsx +150 -0
  18. package/src/components/unity-theme-provider.tsx +72 -0
  19. package/src/index.ts +8 -0
  20. package/src/scripts/actions/compose-multi-theme.ts +59 -0
  21. package/src/scripts/build.ts +261 -55
  22. package/src/scripts/formats/unity-theme.test.ts +180 -253
  23. package/src/scripts/formats/unity-theme.ts +27 -64
  24. package/src/scripts/transforms/tailwind-color-token.test.ts +18 -0
  25. package/src/scripts/transforms/tailwind-color-token.ts +7 -3
  26. package/src/scripts/transforms/tailwind-grid-token.test.ts +22 -0
  27. package/src/scripts/transforms/tailwind-grid-token.ts +7 -3
  28. package/src/scripts/transforms/tailwind-spacing-token.test.ts +9 -0
  29. package/src/scripts/transforms/tailwind-spacing-token.ts +15 -2
  30. package/src/scripts/transforms/tailwind-text-token.test.ts +18 -0
  31. package/src/scripts/transforms/tailwind-text-token.ts +15 -2
  32. package/src/scripts/transforms/tailwind-typography-token.test.ts +8 -2
  33. package/src/scripts/transforms/tailwind-typography-token.ts +5 -1
  34. package/src/scripts/utils/prefix-transform.test.ts +137 -0
  35. package/src/scripts/utils/prefix-transform.ts +16 -0
  36. package/src/utils/cn.ts +2 -2
  37. package/tokens/common/aspect-ratios.json +11 -0
  38. package/tokens/common/breakpoints.json +18 -0
  39. package/tokens/{text.json → common/font-sizes.json} +0 -28
  40. package/tokens/common/font-weights.json +18 -0
  41. package/tokens/{radii.json → common/radii.json} +0 -15
  42. package/tokens/{spacings.json → common/spacings.json} +0 -25
  43. package/tokens/legacy/radii.json +21 -0
  44. package/tokens/legacy/text.json +14 -0
  45. package/tokens/rebrand/colors.json +1400 -0
  46. package/tokens/rebrand/radii.json +21 -0
  47. package/tokens/rebrand/shadows.json +81 -0
  48. package/tokens/rebrand/text.json +14 -0
  49. package/tokens/rebrand/typography.json +329 -0
  50. package/dist/esm/scripts/formats/generators/header-generator.d.ts +0 -2
  51. package/src/scripts/formats/generators/header-generator.ts +0 -32
  52. /package/tokens/{animations.json → common/animations.json} +0 -0
  53. /package/tokens/{layout.json → common/layout.json} +0 -0
  54. /package/tokens/{sizes.json → common/sizes.json} +0 -0
  55. /package/tokens/{colors.json → legacy/colors.json} +0 -0
  56. /package/tokens/{shadows.json → legacy/shadows.json} +0 -0
  57. /package/tokens/{typography.json → legacy/typography.json} +0 -0
@@ -37,554 +37,1661 @@
37
37
  @import "@fontsource/roboto-mono";
38
38
  @import "tailwindcss" prefix(uy);
39
39
 
40
- @theme static {
40
+ @layer base {
41
+ :root,
42
+ [data-uy-theme="legacy"] {
43
+ --uy-animate-spin: 2s linear infinite spin;
44
+ --uy-animate-arc-shrink: 2s ease-in-out infinite arc-shrink;
45
+ --uy-animate-pulse: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite pulse;
46
+ --uy-animate-slide: 4s cubic-bezier(1, 0, 0.36, 0.71) infinite slide;
47
+ --uy-animate-fade-in: 0.3s linear 1 fade-in;
48
+ --uy-animate-fade-out: 0.3s linear 1 fade-out;
49
+ --uy-animate-slide-right-fade-in: 0.3s ease-in 1 slide-right-fade-in;
50
+ --uy-animate-slide-right-fade-out: 0.3s ease-out 1 slide-right-fade-out;
51
+ --uy-animate-slide-up-fade-in: 0.3s ease-in 1 slide-up-fade-in;
52
+ --uy-animate-slide-down-fade-out: 0.3s ease-out 1 slide-down-fade-out;
53
+ --uy-animate-zoom-in: 0.3s ease-in 1 zoom-in;
54
+ --uy-animate-zoom-out: 0.3s ease-out 1 zoom-out;
55
+ --uy-aspect-video: 16 / 9;
56
+ --uy-aspect-square: 1 / 1;
57
+ --uy-breakpoint-sm: 490px;
58
+ --uy-breakpoint-md: 768px;
59
+ --uy-breakpoint-lg: 1280px;
60
+ --uy-breakpoint-xl: 1440px;
61
+ --uy-text-50: 12px;
62
+ --uy-text-75: 14px;
63
+ --uy-text-100: 16px;
64
+ --uy-text-200: 18px;
65
+ --uy-text-300: 20px;
66
+ --uy-text-400: 22px;
67
+ --uy-text-500: 24px;
68
+ --uy-text-600: 28px;
69
+ --uy-text-800: 30px;
70
+ --uy-text-1000: 32px;
71
+ --uy-text-1200: 41px;
72
+ --uy-text-1400: 52px;
73
+ --uy-text-1600: 66px;
74
+ --uy-font-weight-regular: 400;
75
+ --uy-font-weight-medium: 500;
76
+ --uy-font-weight-semibold: 600;
77
+ --uy-font-weight-bold: 700;
78
+ --uy-grid-layout-columns--default: 6;
79
+ --uy-grid-layout-columns--md: 12;
80
+ --uy-grid-layout-columns--lg: 12;
81
+ --uy-radius-0: 0;
82
+ --uy-radius-25: 2px;
83
+ --uy-radius-50: 4px;
84
+ --uy-radius-75: 6px;
85
+ --uy-radius-100: 8px;
86
+ --uy-radius-125: 10px;
87
+ --uy-radius-150: 12px;
88
+ --uy-radius-200: 16px;
89
+ --uy-radius-300: 24px;
90
+ --uy-radius-400: 32px;
91
+ --uy-radius-circle: 50%;
92
+ --uy-radius-pill: 9999px;
93
+ --uy-container-app-menu: 296px; /** Width of the main menu in global App layout */
94
+ --uy-container-lg: 984px; /** Maximum width for layout containers at large resolutions */
95
+ --uy-container-xl: 1360px; /** Maximum width for layout containers at extra-large resolutions */
96
+ --uy-container-content: 523px; /** Maximum width for content containers */
97
+ --uy-container-section: 703px; /** Maximum width for section containers */
98
+ --uy-container-page: 1063px; /** Maximum width for page containers */
99
+ --uy-container-app: 1439px; /** Maximum width for app containers */
100
+ --uy-spacing-0: 0;
101
+ --uy-spacing-25: 2px;
102
+ --uy-spacing-50: 4px;
103
+ --uy-spacing-75: 6px;
104
+ --uy-spacing-100: 8px;
105
+ --uy-spacing-125: 10px;
106
+ --uy-spacing-150: 12px;
107
+ --uy-spacing-200: 16px;
108
+ --uy-spacing-250: 20px;
109
+ --uy-spacing-300: 24px;
110
+ --uy-spacing-400: 32px;
111
+ --uy-spacing-500: 40px;
112
+ --uy-spacing-600: 48px;
113
+ --uy-spacing-800: 64px;
114
+ --uy-spacing-1000: 80px;
115
+ --uy-spacing: 8px; /** Base spacing value */
116
+ --uy-color-grayscale-l1: oklch(99.059% 0.0017 247.84);
117
+ --uy-color-grayscale-l2: oklch(98.22% 0.00412 271.37);
118
+ --uy-color-grayscale-l3: oklch(97.323% 0.00413 271.37);
119
+ --uy-color-grayscale-l4: oklch(95.128% 0.00745 260.73);
120
+ --uy-color-grayscale-l5: oklch(91.982% 0.00977 252.82);
121
+ --uy-color-grayscale-l6: oklch(86.339% 0.01521 251.17);
122
+ --uy-color-grayscale-l7: oklch(76.254% 0.02353 254.43);
123
+ --uy-color-grayscale-l8: oklch(65.823% 0.02505 252.27);
124
+ --uy-color-grayscale-l9: oklch(53.625% 0.02834 252.08);
125
+ --uy-color-grayscale-l10: oklch(49.112% 0.03033 253.74);
126
+ --uy-color-grayscale-l11: oklch(37.463% 0.03027 254.19);
127
+ --uy-color-grayscale-l12: oklch(16.172% 0.03703 253.15);
128
+ --uy-color-grayscale-l0: oklch(100% 0 none);
129
+ --uy-color-red-l1: oklch(98.894% 0.00534 17.247);
130
+ --uy-color-red-l2: oklch(95.657% 0.02191 10.599);
131
+ --uy-color-red-l3: oklch(89.102% 0.05813 11.703);
132
+ --uy-color-red-l4: oklch(76.425% 0.14179 14.508);
133
+ --uy-color-red-l5: oklch(66.039% 0.19306 18.401);
134
+ --uy-color-red-l6: oklch(61.565% 0.23811 24.593);
135
+ --uy-color-red-l7: oklch(57.968% 0.22848 25.303);
136
+ --uy-color-red-l8: oklch(54.299% 0.21359 25.062);
137
+ --uy-color-red-l9: oklch(49.786% 0.19508 24.828);
138
+ --uy-color-red-l10: oklch(42.146% 0.1518 22.159);
139
+ --uy-color-red-l11: oklch(31.984% 0.11081 21.252);
140
+ --uy-color-red-l12: oklch(14.815% 0.03894 14.818);
141
+ --uy-color-green-l1: oklch(99.09% 0.01311 159.93);
142
+ --uy-color-green-l2: oklch(97.628% 0.03602 155.45);
143
+ --uy-color-green-l3: oklch(93.032% 0.07653 156.15);
144
+ --uy-color-green-l4: oklch(87.477% 0.11235 154.7);
145
+ --uy-color-green-l5: oklch(82.183% 0.15332 152.92);
146
+ --uy-color-green-l6: oklch(73.532% 0.21134 147.69);
147
+ --uy-color-green-l7: oklch(69.453% 0.19894 147.76);
148
+ --uy-color-green-l8: oklch(59.644% 0.17117 147.68);
149
+ --uy-color-green-l9: oklch(50.681% 0.14238 148.18);
150
+ --uy-color-green-l10: oklch(45.284% 0.12552 148.44);
151
+ --uy-color-green-l11: oklch(38.135% 0.10324 148.99);
152
+ --uy-color-green-l12: oklch(29.078% 0.08111 149.47);
153
+ --uy-color-yellow-l1: oklch(99.339% 0.01073 95.159);
154
+ --uy-color-yellow-l2: oklch(97.51% 0.03751 93.823);
155
+ --uy-color-yellow-l3: oklch(94.386% 0.09476 96.118);
156
+ --uy-color-yellow-l4: oklch(91.334% 0.13181 94.112);
157
+ --uy-color-yellow-l5: oklch(88.467% 0.16439 92.595);
158
+ --uy-color-yellow-l6: oklch(85.747% 0.17524 88.489);
159
+ --uy-color-yellow-l7: oklch(78.825% 0.16326 80.005);
160
+ --uy-color-yellow-l8: oklch(70.863% 0.14874 76.185);
161
+ --uy-color-yellow-l9: oklch(65.58% 0.13871 74.43);
162
+ --uy-color-yellow-l10: oklch(57.086% 0.12081 74.308);
163
+ --uy-color-yellow-l11: oklch(44.005% 0.09353 73.415);
164
+ --uy-color-yellow-l12: oklch(19.304% 0.03947 87.228);
165
+ --uy-color-cyan-l1: oklch(98.251% 0.01093 225.98);
166
+ --uy-color-cyan-l2: oklch(96.793% 0.02117 223);
167
+ --uy-color-cyan-l3: oklch(92.693% 0.04939 222.46);
168
+ --uy-color-cyan-l4: oklch(88.175% 0.07902 224.08);
169
+ --uy-color-cyan-l5: oklch(85.429% 0.09702 224.9);
170
+ --uy-color-cyan-l6: oklch(81.492% 0.12112 226.94);
171
+ --uy-color-cyan-l7: oklch(72.674% 0.124 228.51);
172
+ --uy-color-cyan-l8: oklch(64.227% 0.11503 229.99);
173
+ --uy-color-cyan-l9: oklch(52.482% 0.09504 229.3);
174
+ --uy-color-cyan-l10: oklch(46.295% 0.08653 230.57);
175
+ --uy-color-cyan-l11: oklch(39.485% 0.07503 230.8);
176
+ --uy-color-cyan-l12: oklch(27.448% 0.05468 229.97);
177
+ --uy-color-blue-l1: oklch(95.332% 0.02282 252.17);
178
+ --uy-color-blue-l2: oklch(90.025% 0.04979 252.09);
179
+ --uy-color-blue-l3: oklch(76.235% 0.11994 252.37);
180
+ --uy-color-blue-l4: oklch(66.102% 0.17494 254.38);
181
+ --uy-color-blue-l5: oklch(57.397% 0.20023 257.15);
182
+ --uy-color-blue-l6: oklch(55.63% 0.18803 256.77);
183
+ --uy-color-blue-l7: oklch(50.854% 0.17021 256.62);
184
+ --uy-color-blue-l8: oklch(46.343% 0.15334 256.43);
185
+ --uy-color-blue-l9: oklch(42.818% 0.13895 256.1);
186
+ --uy-color-blue-l10: oklch(38.89% 0.12422 255.76);
187
+ --uy-color-blue-l11: oklch(30.049% 0.09294 255.42);
188
+ --uy-color-blue-l12: oklch(19.818% 0.05155 252.58);
189
+ --uy-color-purple-l1: oklch(98.727% 0.00667 295.45);
190
+ --uy-color-purple-l2: oklch(96.104% 0.02008 292.15);
191
+ --uy-color-purple-l3: oklch(86.837% 0.07043 292.06);
192
+ --uy-color-purple-l4: oklch(77.641% 0.12295 290.62);
193
+ --uy-color-purple-l5: oklch(68.949% 0.1743 288.5);
194
+ --uy-color-purple-l6: oklch(60.721% 0.22281 284.89);
195
+ --uy-color-purple-l7: oklch(52.742% 0.21026 283.76);
196
+ --uy-color-purple-l8: oklch(45.172% 0.19333 282.42);
197
+ --uy-color-purple-l9: oklch(37.908% 0.1729 281.55);
198
+ --uy-color-purple-l10: oklch(30.959% 0.14783 280.72);
199
+ --uy-color-purple-l11: oklch(26.77% 0.13374 278.97);
200
+ --uy-color-purple-l12: oklch(19.414% 0.10973 276.86);
201
+ --uy-color-plum-l1: oklch(97.96% 0.01323 340.54);
202
+ --uy-color-plum-l2: oklch(94.722% 0.03438 342.15);
203
+ --uy-color-plum-l3: oklch(89.332% 0.05898 343.24);
204
+ --uy-color-plum-l4: oklch(77.61% 0.13363 344.73);
205
+ --uy-color-plum-l5: oklch(71.011% 0.17788 346.37);
206
+ --uy-color-plum-l6: oklch(65.697% 0.21441 348.85);
207
+ --uy-color-plum-l7: oklch(62.946% 0.23091 350.49);
208
+ --uy-color-plum-l8: oklch(60.018% 0.2365 352.7);
209
+ --uy-color-plum-l9: oklch(55.392% 0.21788 352.33);
210
+ --uy-color-plum-l10: oklch(47.463% 0.17504 350.96);
211
+ --uy-color-plum-l11: oklch(35.416% 0.11019 347.55);
212
+ --uy-color-plum-l12: oklch(17.955% 0.04579 345.08);
213
+ --uy-color-peach-l1: oklch(97.27% 0.01359 34.299);
214
+ --uy-color-peach-l2: oklch(90.632% 0.04897 32.141);
215
+ --uy-color-peach-l3: oklch(82.029% 0.10207 33.458);
216
+ --uy-color-peach-l9: oklch(74.944% 0.15289 33.756);
217
+ --uy-color-peach-l10: oklch(68.145% 0.20917 33.947);
218
+ --uy-color-peach-l11: oklch(45.269% 0.14889 33.908);
219
+ --uy-color-peach-l12: oklch(22.79% 0.07583 37.262);
220
+ --uy-color-sunglow-l1: oklch(97.781% 0.02393 85.787);
221
+ --uy-color-sunglow-l2: oklch(94.597% 0.05744 85.031);
222
+ --uy-color-sunglow-l3: oklch(88.727% 0.12792 86.388);
223
+ --uy-color-sunglow-l9: oklch(82.358% 0.16964 79.247);
224
+ --uy-color-sunglow-l10: oklch(55.358% 0.10103 84.486);
225
+ --uy-color-sunglow-l11: oklch(41.232% 0.07399 83.781);
226
+ --uy-color-sunglow-l12: oklch(28.544% 0.05865 83.417);
227
+ --uy-color-teal-l1: oklch(98.741% 0.01366 196.94);
228
+ --uy-color-teal-l2: oklch(97.487% 0.01887 196.85);
229
+ --uy-color-teal-l3: oklch(94.358% 0.04709 193.11);
230
+ --uy-color-teal-l4: oklch(88.394% 0.07939 191.85);
231
+ --uy-color-teal-l5: oklch(83.893% 0.09384 191.26);
232
+ --uy-color-teal-l6: oklch(74.584% 0.12769 188.32);
233
+ --uy-color-teal-l7: oklch(70.945% 0.12073 188.56);
234
+ --uy-color-teal-l8: oklch(64.559% 0.11068 188.59);
235
+ --uy-color-teal-l9: oklch(53.208% 0.09099 187.88);
236
+ --uy-color-teal-l10: oklch(46.647% 0.07467 189.94);
237
+ --uy-color-teal-l11: oklch(39.345% 0.06605 190.42);
238
+ --uy-color-teal-l12: oklch(25.346% 0.04379 189.82);
239
+ --uy-color-orange-l1: oklch(99.087% 0.00448 34.309);
240
+ --uy-color-orange-l2: oklch(95.249% 0.02398 33.548);
241
+ --uy-color-orange-l3: oklch(89.762% 0.05397 32.365);
242
+ --uy-color-orange-l4: oklch(83.646% 0.0914 33.222);
243
+ --uy-color-orange-l5: oklch(74.944% 0.15289 33.756);
244
+ --uy-color-orange-l6: oklch(68.776% 0.18707 34.151);
245
+ --uy-color-orange-l7: oklch(65.542% 0.20292 33.582);
246
+ --uy-color-orange-l8: oklch(54.399% 0.19025 33.476);
247
+ --uy-color-orange-l9: oklch(47.762% 0.15857 33.832);
248
+ --uy-color-orange-l10: oklch(42.172% 0.12494 33.8);
249
+ --uy-color-orange-l11: oklch(28.891% 0.10112 35.093);
250
+ --uy-color-orange-l12: oklch(16.65% 0.04887 43.496);
251
+ --uy-color-utility-backdrop: oklch(16.172% 0.03703 253.15 / 0.6);
252
+ --uy-color-utility-shadow-100: oklch(0% 0 none / 0.05882);
253
+ --uy-color-utility-shadow-200: oklch(0% 0 none / 0.07843);
254
+ --uy-color-utility-shadow-300: oklch(0% 0 none / 0.07843);
255
+ --uy-color-utility-shadow-400: oklch(0% 0 none / 0.10196);
256
+ --uy-color-utility-shadow-500: oklch(0% 0 none / 0.12157);
257
+ --uy-color-utility-shadow-600: oklch(0% 0 none / 0.12157);
258
+ --uy-shadow-canvas: none;
259
+ --uy-font-serif: "Source Serif 4", serif;
260
+ --uy-font-sans: Inter, sans-serif;
261
+ --uy-font-mono: "Roboto Mono", monospace;
262
+ --uy-grid-layout-gutter--default: calc(var(--uy-spacing) * 2);
263
+ --uy-grid-layout-margin--default: calc(var(--uy-spacing) * 2);
264
+ --uy-grid-layout-gutter--md: calc(var(--uy-spacing) * 2);
265
+ --uy-grid-layout-margin--md: calc(var(--uy-spacing) * 3);
266
+ --uy-grid-layout-gutter--lg: calc(var(--uy-spacing) * 2);
267
+ --uy-grid-layout-margin--lg: calc(var(--uy-spacing) * 5);
268
+ --uy-radius-xs: var(--uy-radius-50);
269
+ --uy-radius-sm: var(--uy-radius-75);
270
+ --uy-radius-md: var(--uy-radius-100);
271
+ --uy-radius-lg: var(--uy-radius-200);
272
+ --uy-radius-xl: var(--uy-radius-300);
273
+ --uy-color-canvas: var(--uy-color-grayscale-l2);
274
+ --uy-color-surface-primary-highest: var(--uy-color-blue-l10);
275
+ --uy-color-surface-primary-high: var(--uy-color-blue-l8);
276
+ --uy-color-surface-primary: var(--uy-color-blue-l5);
277
+ --uy-color-surface-primary-enabled: var(--uy-color-blue-l5);
278
+ --uy-color-surface-primary-hover: var(--uy-color-blue-l7);
279
+ --uy-color-surface-primary-pressed: var(--uy-color-blue-l8);
280
+ --uy-color-surface-primary-focus: var(--uy-color-blue-l5);
281
+ --uy-color-surface-primary-active: var(--uy-color-blue-l5);
282
+ --uy-color-surface-primary-disabled: var(--uy-color-grayscale-l3);
283
+ --uy-color-surface-primary-low: var(--uy-color-blue-l3);
284
+ --uy-color-surface-primary-lowest: var(--uy-color-blue-l1);
285
+ --uy-color-surface-primary-lowest-enabled: var(--uy-color-blue-l1);
286
+ --uy-color-surface-primary-lowest-hover: var(--uy-color-blue-l1);
287
+ --uy-color-surface-primary-lowest-pressed: var(--uy-color-blue-l2);
288
+ --uy-color-surface-primary-lowest-focus: var(--uy-color-blue-l4);
289
+ --uy-color-surface-primary-lowest-active: var(--uy-color-blue-l1);
290
+ --uy-color-surface-primary-lowest-disabled: var(--uy-color-grayscale-l2);
291
+ --uy-color-surface-neutral: var(--uy-color-grayscale-l0);
292
+ --uy-color-surface-neutral-enabled: var(--uy-color-grayscale-l0);
293
+ --uy-color-surface-neutral-hover: var(--uy-color-grayscale-l3);
294
+ --uy-color-surface-neutral-pressed: var(--uy-color-grayscale-l4);
295
+ --uy-color-surface-neutral-focus: var(--uy-color-grayscale-l2);
296
+ --uy-color-surface-neutral-active: var(--uy-color-grayscale-l4);
297
+ --uy-color-surface-neutral-selected: var(--uy-color-grayscale-l3);
298
+ --uy-color-surface-neutral-disabled: var(--uy-color-grayscale-l4);
299
+ --uy-color-surface-neutral-low: var(--uy-color-grayscale-l3);
300
+ --uy-color-surface-neutral-low-enabled: var(--uy-color-grayscale-l3);
301
+ --uy-color-surface-neutral-low-hover: var(--uy-color-grayscale-l4);
302
+ --uy-color-surface-neutral-low-pressed: var(--uy-color-grayscale-l5);
303
+ --uy-color-surface-neutral-low-focus: var(--uy-color-grayscale-l4);
304
+ --uy-color-surface-neutral-low-active: var(--uy-color-grayscale-l5);
305
+ --uy-color-surface-neutral-low-disabled: var(--uy-color-grayscale-l3);
306
+ --uy-color-surface-neutral-low-selected: var(--uy-color-grayscale-l4);
307
+ --uy-color-surface-neutral-lowest: var(--uy-color-grayscale-l4);
308
+ --uy-color-surface-neutral-lowest-enabled: var(--uy-color-grayscale-l4);
309
+ --uy-color-surface-neutral-lowest-hover: var(--uy-color-grayscale-l5);
310
+ --uy-color-surface-neutral-lowest-pressed: var(--uy-color-grayscale-l6);
311
+ --uy-color-surface-neutral-lowest-focus: var(--uy-color-grayscale-l5);
312
+ --uy-color-surface-neutral-lowest-active: var(--uy-color-grayscale-l6);
313
+ --uy-color-surface-neutral-lowest-disabled: var(--uy-color-grayscale-l4);
314
+ --uy-color-surface-neutral-lowest-selected: var(--uy-color-grayscale-l5);
315
+ --uy-color-surface-danger: var(--uy-color-red-l7);
316
+ --uy-color-surface-danger-enabled: var(--uy-color-red-l7);
317
+ --uy-color-surface-danger-hover: var(--uy-color-red-l8);
318
+ --uy-color-surface-danger-pressed: var(--uy-color-red-l9);
319
+ --uy-color-surface-danger-focus: var(--uy-color-red-l7);
320
+ --uy-color-surface-danger-active: var(--uy-color-red-l7);
321
+ --uy-color-surface-danger-disabled: var(--uy-color-grayscale-l8);
322
+ --uy-color-surface-danger-low: var(--uy-color-red-l3);
323
+ --uy-color-surface-danger-lowest: var(--uy-color-red-l2);
324
+ --uy-color-surface-danger-lowest-enabled: var(--uy-color-red-l1);
325
+ --uy-color-surface-danger-lowest-hover: var(--uy-color-red-l2);
326
+ --uy-color-surface-danger-lowest-pressed: var(--uy-color-red-l3);
327
+ --uy-color-surface-danger-lowest-focus: var(--uy-color-grayscale-l0);
328
+ --uy-color-surface-danger-lowest-active: var(--uy-color-red-l2);
329
+ --uy-color-surface-danger-lowest-disabled: var(--uy-color-grayscale-l8);
330
+ --uy-color-surface-warning: var(--uy-color-yellow-l6);
331
+ --uy-color-surface-warning-enabled: var(--uy-color-yellow-l6);
332
+ --uy-color-surface-warning-hover: var(--uy-color-yellow-l7);
333
+ --uy-color-surface-warning-pressed: var(--uy-color-yellow-l8);
334
+ --uy-color-surface-warning-focus: var(--uy-color-yellow-l6);
335
+ --uy-color-surface-warning-active: var(--uy-color-yellow-l6);
336
+ --uy-color-surface-warning-disabled: var(--uy-color-grayscale-l8);
337
+ --uy-color-surface-warning-low: var(--uy-color-yellow-l3);
338
+ --uy-color-surface-warning-lowest: var(--uy-color-yellow-l2);
339
+ --uy-color-surface-warning-lowest-enabled: var(--uy-color-yellow-l2);
340
+ --uy-color-surface-warning-lowest-hover: var(--uy-color-yellow-l2);
341
+ --uy-color-surface-warning-lowest-pressed: var(--uy-color-yellow-l3);
342
+ --uy-color-surface-warning-lowest-focus: var(--uy-color-grayscale-l0);
343
+ --uy-color-surface-warning-lowest-active: var(--uy-color-yellow-l2);
344
+ --uy-color-surface-warning-lowest-disabled: var(--uy-color-grayscale-l8);
345
+ --uy-color-surface-success: var(--uy-color-green-l8);
346
+ --uy-color-surface-success-low: var(--uy-color-green-l3);
347
+ --uy-color-surface-success-lowest: var(--uy-color-green-l2);
348
+ --uy-color-surface-success-lowest-enabled: var(--uy-color-green-l2);
349
+ --uy-color-surface-success-lowest-hover: var(--uy-color-green-l2);
350
+ --uy-color-surface-success-lowest-pressed: var(--uy-color-green-l3);
351
+ --uy-color-surface-success-lowest-focus: var(--uy-color-green-l4);
352
+ --uy-color-surface-success-lowest-active: var(--uy-color-green-l2);
353
+ --uy-color-surface-success-lowest-disabled: var(--uy-color-grayscale-l8);
354
+ --uy-color-surface-info: var(--uy-color-cyan-l6);
355
+ --uy-color-surface-info-low: var(--uy-color-cyan-l3);
356
+ --uy-color-surface-info-lowest: var(--uy-color-cyan-l2);
357
+ --uy-color-surface-info-lowest-enabled: var(--uy-color-cyan-l2);
358
+ --uy-color-surface-info-lowest-hover: var(--uy-color-cyan-l3);
359
+ --uy-color-surface-info-lowest-pressed: var(--uy-color-cyan-l3);
360
+ --uy-color-surface-info-lowest-focus: var(--uy-color-cyan-l9);
361
+ --uy-color-surface-info-lowest-active: var(--uy-color-cyan-l11);
362
+ --uy-color-surface-info-lowest-disabled: var(--uy-color-grayscale-l8);
363
+ --uy-color-surface-promo: var(--uy-color-plum-l6);
364
+ --uy-color-surface-promo-low: var(--uy-color-plum-l3);
365
+ --uy-color-surface-promo-lowest: var(--uy-color-plum-l2);
366
+ --uy-color-surface-ai-low: var(--uy-color-purple-l6);
367
+ --uy-color-surface-form-enabled: var(--uy-color-grayscale-l0);
368
+ --uy-color-surface-form-hover: var(--uy-color-grayscale-l0);
369
+ --uy-color-surface-form-pressed: var(--uy-color-grayscale-l0);
370
+ --uy-color-surface-form-focus: var(--uy-color-grayscale-l0);
371
+ --uy-color-surface-form-active: var(--uy-color-blue-l5);
372
+ --uy-color-surface-form-selected: var(--uy-color-blue-l1);
373
+ --uy-color-surface-form-disabled: var(--uy-color-grayscale-l3);
374
+ --uy-color-surface-form-read-only: var(--uy-color-grayscale-l8);
375
+ --uy-color-surface-form-error: var(--uy-color-red-l2);
376
+ --uy-color-surface-form-high-enabled: var(--uy-color-grayscale-l3);
377
+ --uy-color-surface-form-high-hover: var(--uy-color-grayscale-l4);
378
+ --uy-color-surface-form-high-pressed: var(--uy-color-grayscale-l5);
379
+ --uy-color-surface-form-high-focus: var(--uy-color-grayscale-l3);
380
+ --uy-color-surface-form-high-active: var(--uy-color-grayscale-l0);
381
+ --uy-color-surface-form-high-selected: var(--uy-color-blue-l2);
382
+ --uy-color-surface-form-high-disabled: var(--uy-color-grayscale-l2);
383
+ --uy-color-surface-form-high-read-only: var(--uy-color-grayscale-l2);
384
+ --uy-color-surface-form-high-error: var(--uy-color-red-l2);
385
+ --uy-color-surface-inverted: var(--uy-color-grayscale-l12);
386
+ --uy-color-surface-inverted-enabled: var(--uy-color-grayscale-l12);
387
+ --uy-color-surface-inverted-hover: var(--uy-color-grayscale-l10);
388
+ --uy-color-surface-inverted-pressed: var(--uy-color-grayscale-l11);
389
+ --uy-color-surface-inverted-focus: var(--uy-color-grayscale-l12);
390
+ --uy-color-surface-inverted-active: var(--uy-color-grayscale-l11);
391
+ --uy-color-surface-decorative-teal: var(--uy-color-teal-l6);
392
+ --uy-color-surface-decorative-teal-high: var(--uy-color-teal-l9);
393
+ --uy-color-surface-decorative-teal-low: var(--uy-color-teal-l3);
394
+ --uy-color-surface-decorative-teal-lowest: var(--uy-color-teal-l2);
395
+ --uy-color-surface-decorative-purple-high: var(--uy-color-purple-l9);
396
+ --uy-color-surface-decorative-purple: var(--uy-color-purple-l6);
397
+ --uy-color-surface-decorative-purple-low: var(--uy-color-purple-l3);
398
+ --uy-color-surface-decorative-purple-lowest: var(--uy-color-purple-l2);
399
+ --uy-color-surface-decorative-plum: var(--uy-color-plum-l6);
400
+ --uy-color-surface-decorative-plum-high: var(--uy-color-plum-l9);
401
+ --uy-color-surface-decorative-plum-low: var(--uy-color-plum-l3);
402
+ --uy-color-surface-decorative-plum-lowest: var(--uy-color-plum-l2);
403
+ --uy-color-surface-decorative-orange: var(--uy-color-orange-l6);
404
+ --uy-color-surface-decorative-orange-high: var(--uy-color-orange-l9);
405
+ --uy-color-surface-decorative-orange-low: var(--uy-color-orange-l3);
406
+ --uy-color-surface-decorative-orange-lowest: var(--uy-color-orange-l2);
407
+ --uy-color-content-primary: var(--uy-color-blue-l6);
408
+ --uy-color-content-primary-enabled: var(--uy-color-blue-l7);
409
+ --uy-color-content-primary-hover: var(--uy-color-blue-l10);
410
+ --uy-color-content-primary-pressed: var(--uy-color-blue-l11);
411
+ --uy-color-content-primary-focus: var(--uy-color-blue-l7);
412
+ --uy-color-content-primary-active: var(--uy-color-blue-l6);
413
+ --uy-color-content-primary-disabled: var(--uy-color-grayscale-l8);
414
+ --uy-color-content-primary-high: var(--uy-color-blue-l10);
415
+ --uy-color-content-neutral: var(--uy-color-grayscale-l12);
416
+ --uy-color-content-neutral-enabled: var(--uy-color-grayscale-l12);
417
+ --uy-color-content-neutral-hover: var(--uy-color-grayscale-l12);
418
+ --uy-color-content-neutral-pressed: var(--uy-color-grayscale-l12);
419
+ --uy-color-content-neutral-focus: var(--uy-color-grayscale-l12);
420
+ --uy-color-content-neutral-active: var(--uy-color-grayscale-l12);
421
+ --uy-color-content-neutral-disabled: var(--uy-color-grayscale-l8);
422
+ --uy-color-content-neutral-low: var(--uy-color-grayscale-l11);
423
+ --uy-color-content-neutral-lowest: var(--uy-color-grayscale-l9);
424
+ --uy-color-content-neutral-lowest-enabled: var(--uy-color-grayscale-l9);
425
+ --uy-color-content-neutral-lowest-hover: var(--uy-color-grayscale-l10);
426
+ --uy-color-content-neutral-lowest-pressed: var(--uy-color-grayscale-l11);
427
+ --uy-color-content-neutral-lowest-focus: var(--uy-color-grayscale-l9);
428
+ --uy-color-content-neutral-lowest-active: var(--uy-color-grayscale-l12);
429
+ --uy-color-content-neutral-lowest-disabled: var(--uy-color-grayscale-l8);
430
+ --uy-color-content-danger: var(--uy-color-red-l8);
431
+ --uy-color-content-danger-enabled: var(--uy-color-red-l9);
432
+ --uy-color-content-danger-hover: var(--uy-color-red-l10);
433
+ --uy-color-content-danger-pressed: var(--uy-color-red-l11);
434
+ --uy-color-content-danger-focus: var(--uy-color-red-l9);
435
+ --uy-color-content-danger-active: var(--uy-color-red-l10);
436
+ --uy-color-content-danger-disabled: var(--uy-color-grayscale-l8);
437
+ --uy-color-content-danger-high: var(--uy-color-red-l11);
438
+ --uy-color-content-warning: var(--uy-color-yellow-l7);
439
+ --uy-color-content-warning-enabled: var(--uy-color-yellow-l11);
440
+ --uy-color-content-warning-hover: var(--uy-color-yellow-l11);
441
+ --uy-color-content-warning-pressed: var(--uy-color-yellow-l12);
442
+ --uy-color-content-warning-focus: var(--uy-color-yellow-l1);
443
+ --uy-color-content-warning-active: var(--uy-color-yellow-l11);
444
+ --uy-color-content-warning-disabled: var(--uy-color-grayscale-l8);
445
+ --uy-color-content-warning-high: var(--uy-color-yellow-l11);
446
+ --uy-color-content-success: var(--uy-color-green-l8);
447
+ --uy-color-content-success-enabled: var(--uy-color-green-l9);
448
+ --uy-color-content-success-hover: var(--uy-color-green-l10);
449
+ --uy-color-content-success-pressed: var(--uy-color-green-l11);
450
+ --uy-color-content-success-focus: var(--uy-color-green-l9);
451
+ --uy-color-content-success-active: var(--uy-color-green-l10);
452
+ --uy-color-content-success-disabled: var(--uy-color-grayscale-l8);
453
+ --uy-color-content-success-high: var(--uy-color-green-l11);
454
+ --uy-color-content-info: var(--uy-color-cyan-l7);
455
+ --uy-color-content-info-enabled: var(--uy-color-cyan-l9);
456
+ --uy-color-content-info-hover: var(--uy-color-cyan-l10);
457
+ --uy-color-content-info-pressed: var(--uy-color-cyan-l11);
458
+ --uy-color-content-info-focus: var(--uy-color-cyan-l9);
459
+ --uy-color-content-info-active: var(--uy-color-cyan-l10);
460
+ --uy-color-content-info-disabled: var(--uy-color-grayscale-l8);
461
+ --uy-color-content-info-high: var(--uy-color-cyan-l11);
462
+ --uy-color-content-promo: var(--uy-color-plum-l6);
463
+ --uy-color-content-promo-high: var(--uy-color-plum-l10);
464
+ --uy-color-content-form-enabled: var(--uy-color-grayscale-l12);
465
+ --uy-color-content-form-hover: var(--uy-color-grayscale-l12);
466
+ --uy-color-content-form-pressed: var(--uy-color-grayscale-l12);
467
+ --uy-color-content-form-focus: var(--uy-color-grayscale-l12);
468
+ --uy-color-content-form-active: var(--uy-color-grayscale-l12);
469
+ --uy-color-content-form-selected: var(--uy-color-blue-l6);
470
+ --uy-color-content-form-disabled: var(--uy-color-grayscale-l8);
471
+ --uy-color-content-form-read-only: var(--uy-color-grayscale-l12);
472
+ --uy-color-content-form-invalid: var(--uy-color-red-l8);
473
+ --uy-color-content-inverted: var(--uy-color-grayscale-l0);
474
+ --uy-color-content-inverted-enabled: var(--uy-color-grayscale-l0);
475
+ --uy-color-content-inverted-hover: var(--uy-color-grayscale-l2);
476
+ --uy-color-content-inverted-pressed: var(--uy-color-grayscale-l4);
477
+ --uy-color-content-inverted-focus: var(--uy-color-grayscale-l0);
478
+ --uy-color-content-inverted-active: var(--uy-color-grayscale-l0);
479
+ --uy-color-content-inverted-disabled: var(--uy-color-grayscale-l7);
480
+ --uy-color-content-decorative-teal: var(--uy-color-teal-l6);
481
+ --uy-color-content-decorative-teal-high: var(--uy-color-teal-l10);
482
+ --uy-color-content-decorative-purple: var(--uy-color-purple-l6);
483
+ --uy-color-content-decorative-purple-high: var(--uy-color-purple-l10);
484
+ --uy-color-content-decorative-plum: var(--uy-color-plum-l6);
485
+ --uy-color-content-decorative-plum-high: var(--uy-color-plum-l10);
486
+ --uy-color-content-decorative-orange: var(--uy-color-orange-l6);
487
+ --uy-color-content-decorative-orange-high: var(--uy-color-orange-l10);
488
+ --uy-color-border-primary: var(--uy-color-blue-l5);
489
+ --uy-color-border-primary-enabled: var(--uy-color-blue-l5);
490
+ --uy-color-border-primary-hover: var(--uy-color-blue-l6);
491
+ --uy-color-border-primary-pressed: var(--uy-color-blue-l7);
492
+ --uy-color-border-primary-focus: var(--uy-color-blue-l5);
493
+ --uy-color-border-primary-active: var(--uy-color-blue-l8);
494
+ --uy-color-border-primary-disabled: var(--uy-color-grayscale-l4);
495
+ --uy-color-border-primary-lowest: var(--uy-color-blue-l2);
496
+ --uy-color-border-neutral-high: var(--uy-color-grayscale-l7);
497
+ --uy-color-border-neutral-high-enabled: var(--uy-color-grayscale-l8);
498
+ --uy-color-border-neutral-high-hover: var(--uy-color-grayscale-l9);
499
+ --uy-color-border-neutral-high-pressed: var(--uy-color-grayscale-l10);
500
+ --uy-color-border-neutral-high-focus: var(--uy-color-grayscale-l8);
501
+ --uy-color-border-neutral-high-active: var(--uy-color-grayscale-l8);
502
+ --uy-color-border-neutral-high-disabled: var(--uy-color-grayscale-l5);
503
+ --uy-color-border-neutral: var(--uy-color-grayscale-l5);
504
+ --uy-color-border-neutral-enabled: var(--uy-color-grayscale-l6);
505
+ --uy-color-border-neutral-hover: var(--uy-color-grayscale-l6);
506
+ --uy-color-border-neutral-active: var(--uy-color-blue-l5);
507
+ --uy-color-border-neutral-pressed: var(--uy-color-grayscale-l7);
508
+ --uy-color-border-neutral-selected: var(--uy-color-grayscale-l6);
509
+ --uy-color-border-neutral-disabled: var(--uy-color-grayscale-l5);
510
+ --uy-color-border-neutral-low: var(--uy-color-grayscale-l4);
511
+ --uy-color-border-danger: var(--uy-color-red-l4);
512
+ --uy-color-border-danger-lowest: var(--uy-color-red-l2);
513
+ --uy-color-border-warning: var(--uy-color-yellow-l4);
514
+ --uy-color-border-warning-lowest: var(--uy-color-yellow-l2);
515
+ --uy-color-border-success: var(--uy-color-green-l8);
516
+ --uy-color-border-success-low: var(--uy-color-green-l4);
517
+ --uy-color-border-success-lowest: var(--uy-color-green-l2);
518
+ --uy-color-border-info: var(--uy-color-cyan-l4);
519
+ --uy-color-border-info-lowest: var(--uy-color-cyan-l2);
520
+ --uy-color-border-promo: var(--uy-color-plum-l4);
521
+ --uy-color-border-promo-lowest: var(--uy-color-plum-l3);
522
+ --uy-color-border-form-enabled: var(--uy-color-grayscale-l8);
523
+ --uy-color-border-form-hover: var(--uy-color-grayscale-l9);
524
+ --uy-color-border-form-pressed: var(--uy-color-grayscale-l10);
525
+ --uy-color-border-form-focus: var(--uy-color-grayscale-l8);
526
+ --uy-color-border-form-active: var(--uy-color-blue-l5);
527
+ --uy-color-border-form-selected: var(--uy-color-blue-l5);
528
+ --uy-color-border-form-disabled: var(--uy-color-grayscale-l5);
529
+ --uy-color-border-form-read-only: var(--uy-color-grayscale-l5);
530
+ --uy-color-border-form-error: var(--uy-color-red-l8);
531
+ --uy-color-border-inverted: var(--uy-color-grayscale-l2);
532
+ --uy-color-border-inverted-enabled: var(--uy-color-grayscale-l2);
533
+ --uy-color-border-inverted-hover: var(--uy-color-grayscale-l3);
534
+ --uy-color-border-inverted-pressed: var(--uy-color-grayscale-l4);
535
+ --uy-color-border-inverted-focus: var(--uy-color-grayscale-l2);
536
+ --uy-color-border-inverted-active: var(--uy-color-grayscale-l1);
537
+ --uy-color-border-inverted-disabled: var(--uy-color-grayscale-l7);
538
+ --uy-color-border-inverted-high: var(--uy-color-grayscale-l0);
539
+ --uy-color-utility-focus-ring: var(--uy-color-blue-l4);
540
+ --uy-color-utility-inverted-focus-ring: var(--uy-color-yellow-l4);
541
+ --uy-shadow-100: 0px 1px 4px 1px var(--uy-color-utility-shadow-100);
542
+ --uy-shadow-200: 0px 2px 8px 1px var(--uy-color-utility-shadow-200);
543
+ --uy-shadow-300: 0px 5px 10px 1px var(--uy-color-utility-shadow-300);
544
+ --uy-shadow-400: 0px 8px 18px 2px var(--uy-color-utility-shadow-400);
545
+ --uy-shadow-500: 0px 8px 24px 4px var(--uy-color-utility-shadow-500);
546
+ --uy-shadow-600: 0px 15px 30px 5px var(--uy-color-utility-shadow-600);
547
+ --uy-typography-default-display-heading: var(--uy-font-weight-semibold) var(--uy-text-1000) / 1.25
548
+ var(--uy-font-sans);
549
+ --uy-typography-sm-display-heading: var(--uy-font-weight-semibold) var(--uy-text-1000) / 1.25 var(--uy-font-sans);
550
+ --uy-typography-default-h1: var(--uy-font-weight-semibold) var(--uy-text-800) / 1.2 var(--uy-font-sans);
551
+ --uy-typography-sm-h1: var(--uy-font-weight-semibold) var(--uy-text-600) / 1.286 var(--uy-font-sans);
552
+ --uy-typography-default-h2: var(--uy-font-weight-semibold) var(--uy-text-400) / 1.273 var(--uy-font-sans);
553
+ --uy-typography-sm-h2: var(--uy-font-weight-semibold) var(--uy-text-500) / 1.333 var(--uy-font-sans);
554
+ --uy-typography-default-h3: var(--uy-font-weight-semibold) var(--uy-text-200) / 1.333 var(--uy-font-sans);
555
+ --uy-typography-sm-h3: var(--uy-font-weight-semibold) var(--uy-text-300) / 1.2 var(--uy-font-sans);
556
+ --uy-typography-default-h4: var(--uy-font-weight-semibold) var(--uy-text-100) / 1.125 var(--uy-font-sans);
557
+ --uy-typography-sm-h4: var(--uy-font-weight-semibold) var(--uy-text-200) / 1.333 var(--uy-font-sans);
558
+ --uy-typography-default-overline: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
559
+ --uy-typography-sm-overline: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
560
+ --uy-typography-default-subtitle: var(--uy-font-weight-regular) var(--uy-text-100) / 1.5 var(--uy-font-sans);
561
+ --uy-typography-sm-subtitle: var(--uy-font-weight-regular) var(--uy-text-100) / 1.333 var(--uy-font-sans);
562
+ --uy-typography-default-display-title: var(--uy-font-weight-semibold) var(--uy-text-300) / 1.4 var(--uy-font-sans);
563
+ --uy-typography-sm-display-title: var(--uy-font-weight-semibold) var(--uy-text-500) / 1.333 var(--uy-font-sans);
564
+ --uy-typography-default-display-body: var(--uy-font-weight-regular) var(--uy-text-100) / 1.5 var(--uy-font-sans);
565
+ --uy-typography-sm-display-body: var(--uy-font-weight-regular) var(--uy-text-200) / 1.556 var(--uy-font-sans);
566
+ --uy-typography-default-body: var(--uy-font-weight-regular) var(--uy-text-100) / 1.5 var(--uy-font-sans);
567
+ --uy-typography-sm-body: var(--uy-font-weight-regular) var(--uy-text-75) / 1.571 var(--uy-font-sans);
568
+ --uy-typography-default-body-strong: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
569
+ --uy-typography-sm-body-strong: var(--uy-font-weight-medium) var(--uy-text-75) / 1.571 var(--uy-font-sans);
570
+ --uy-typography-default-body-small: var(--uy-font-weight-regular) var(--uy-text-50) / 1.667 var(--uy-font-sans);
571
+ --uy-typography-sm-body-small: var(--uy-font-weight-regular) var(--uy-text-50) / 1.667 var(--uy-font-sans);
572
+ --uy-typography-default-body-small-strong: var(--uy-font-weight-medium) var(--uy-text-50) / 1.667
573
+ var(--uy-font-sans);
574
+ --uy-typography-sm-body-small-strong: var(--uy-font-weight-medium) var(--uy-text-50) / 1.667 var(--uy-font-sans);
575
+ --uy-typography-default-body-large: var(--uy-font-weight-regular) var(--uy-text-200) / 1.556 var(--uy-font-sans);
576
+ --uy-typography-sm-body-large: var(--uy-font-weight-regular) var(--uy-text-100) / 1.5 var(--uy-font-sans);
577
+ --uy-typography-default-body-large-strong: var(--uy-font-weight-medium) var(--uy-text-200) / 1.556
578
+ var(--uy-font-sans);
579
+ --uy-typography-sm-body-large-strong: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
580
+ --uy-typography-default-action: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
581
+ --uy-typography-sm-action: var(--uy-font-weight-medium) var(--uy-text-75) / 1.571 var(--uy-font-sans);
582
+ --uy-typography-default-action-small: var(--uy-font-weight-medium) var(--uy-text-50) / 1.667 var(--uy-font-sans);
583
+ --uy-typography-sm-action-small: var(--uy-font-weight-medium) var(--uy-text-50) / 1.667 var(--uy-font-sans);
584
+ --uy-typography-default-action-large: var(--uy-font-weight-medium) var(--uy-text-200) / 1.556 var(--uy-font-sans);
585
+ --uy-typography-sm-action-large: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
586
+ --uy-shadow-raising: var(--uy-shadow-100);
587
+ --uy-shadow-floating: var(--uy-shadow-200);
588
+ --uy-shadow-levitating: var(--uy-shadow-300);
589
+ --uy-shadow-flying: var(--uy-shadow-400);
590
+ --uy-shadow-soaring: var(--uy-shadow-500);
591
+ --uy-shadow-summit: var(--uy-shadow-600);
592
+ }
593
+
594
+ [data-uy-theme="rebrand"] {
595
+ --uy-animate-spin: 2s linear infinite spin;
596
+ --uy-animate-arc-shrink: 2s ease-in-out infinite arc-shrink;
597
+ --uy-animate-pulse: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite pulse;
598
+ --uy-animate-slide: 4s cubic-bezier(1, 0, 0.36, 0.71) infinite slide;
599
+ --uy-animate-fade-in: 0.3s linear 1 fade-in;
600
+ --uy-animate-fade-out: 0.3s linear 1 fade-out;
601
+ --uy-animate-slide-right-fade-in: 0.3s ease-in 1 slide-right-fade-in;
602
+ --uy-animate-slide-right-fade-out: 0.3s ease-out 1 slide-right-fade-out;
603
+ --uy-animate-slide-up-fade-in: 0.3s ease-in 1 slide-up-fade-in;
604
+ --uy-animate-slide-down-fade-out: 0.3s ease-out 1 slide-down-fade-out;
605
+ --uy-animate-zoom-in: 0.3s ease-in 1 zoom-in;
606
+ --uy-animate-zoom-out: 0.3s ease-out 1 zoom-out;
607
+ --uy-aspect-video: 16 / 9;
608
+ --uy-aspect-square: 1 / 1;
609
+ --uy-breakpoint-sm: 490px;
610
+ --uy-breakpoint-md: 768px;
611
+ --uy-breakpoint-lg: 1280px;
612
+ --uy-breakpoint-xl: 1440px;
613
+ --uy-text-50: 12px;
614
+ --uy-text-75: 14px;
615
+ --uy-text-100: 16px;
616
+ --uy-text-200: 18px;
617
+ --uy-text-300: 20px;
618
+ --uy-text-400: 22px;
619
+ --uy-text-500: 24px;
620
+ --uy-text-600: 28px;
621
+ --uy-text-800: 30px;
622
+ --uy-text-1000: 32px;
623
+ --uy-text-1200: 41px;
624
+ --uy-text-1400: 52px;
625
+ --uy-text-1600: 66px;
626
+ --uy-font-weight-regular: 400;
627
+ --uy-font-weight-medium: 500;
628
+ --uy-font-weight-semibold: 600;
629
+ --uy-font-weight-bold: 700;
630
+ --uy-grid-layout-columns--default: 6;
631
+ --uy-grid-layout-columns--md: 12;
632
+ --uy-grid-layout-columns--lg: 12;
633
+ --uy-radius-0: 0;
634
+ --uy-radius-25: 2px;
635
+ --uy-radius-50: 4px;
636
+ --uy-radius-75: 6px;
637
+ --uy-radius-100: 8px;
638
+ --uy-radius-125: 10px;
639
+ --uy-radius-150: 12px;
640
+ --uy-radius-200: 16px;
641
+ --uy-radius-300: 24px;
642
+ --uy-radius-400: 32px;
643
+ --uy-radius-circle: 50%;
644
+ --uy-radius-pill: 9999px;
645
+ --uy-container-app-menu: 296px; /** Width of the main menu in global App layout */
646
+ --uy-container-lg: 984px; /** Maximum width for layout containers at large resolutions */
647
+ --uy-container-xl: 1360px; /** Maximum width for layout containers at extra-large resolutions */
648
+ --uy-container-content: 523px; /** Maximum width for content containers */
649
+ --uy-container-section: 703px; /** Maximum width for section containers */
650
+ --uy-container-page: 1063px; /** Maximum width for page containers */
651
+ --uy-container-app: 1439px; /** Maximum width for app containers */
652
+ --uy-spacing-0: 0;
653
+ --uy-spacing-25: 2px;
654
+ --uy-spacing-50: 4px;
655
+ --uy-spacing-75: 6px;
656
+ --uy-spacing-100: 8px;
657
+ --uy-spacing-125: 10px;
658
+ --uy-spacing-150: 12px;
659
+ --uy-spacing-200: 16px;
660
+ --uy-spacing-250: 20px;
661
+ --uy-spacing-300: 24px;
662
+ --uy-spacing-400: 32px;
663
+ --uy-spacing-500: 40px;
664
+ --uy-spacing-600: 48px;
665
+ --uy-spacing-800: 64px;
666
+ --uy-spacing-1000: 80px;
667
+ --uy-spacing: 8px; /** Base spacing value */
668
+ --uy-color-grayscale-l1: oklch(99.107% 0 none);
669
+ --uy-color-grayscale-l2: oklch(98.483% 0.00132 106.42);
670
+ --uy-color-grayscale-l3: oklch(96.987% 0.00132 106.42);
671
+ --uy-color-grayscale-l4: oklch(95.563% 0.00172 67.802);
672
+ --uy-color-grayscale-l5: oklch(92.515% 0.0029 84.559);
673
+ --uy-color-grayscale-l6: oklch(87.71% 0.00351 67.778);
674
+ --uy-color-grayscale-l7: oklch(76.698% 0.00304 84.561);
675
+ --uy-color-grayscale-l8: oklch(66.489% 0.00564 67.728);
676
+ --uy-color-grayscale-l9: oklch(53.906% 0.00524 78.28);
677
+ --uy-color-grayscale-l10: oklch(46.613% 0.00504 56.284);
678
+ --uy-color-grayscale-l11: oklch(32.073% 0.00174 106.5);
679
+ --uy-color-grayscale-l12: oklch(15.864% 0.00207 106.63);
680
+ --uy-color-grayscale-l0: oklch(100% 0 none);
681
+ --uy-color-red-l1: oklch(97.792% 0.01075 17.34);
682
+ --uy-color-red-l2: oklch(94.381% 0.02876 9.7161);
683
+ --uy-color-red-l3: oklch(89.492% 0.04856 14.944);
684
+ --uy-color-red-l4: oklch(78.582% 0.1152 16.001);
685
+ --uy-color-red-l5: oklch(71.886% 0.16053 17.784);
686
+ --uy-color-red-l6: oklch(65.708% 0.19759 21.046);
687
+ --uy-color-red-l7: oklch(59.25% 0.21355 24.137);
688
+ --uy-color-red-l8: oklch(57.879% 0.20845 23.228);
689
+ --uy-color-red-l9: oklch(50.925% 0.17633 22.089);
690
+ --uy-color-red-l10: oklch(43.341% 0.14894 22.251);
691
+ --uy-color-red-l11: oklch(35.625% 0.12118 22.019);
692
+ --uy-color-red-l12: oklch(17.535% 0.05614 18.19);
693
+ --uy-color-green-l1: oklch(98.871% 0.00744 164.95);
694
+ --uy-color-green-l2: oklch(96.38% 0.02223 160.23);
695
+ --uy-color-green-l3: oklch(92.126% 0.05504 160.67);
696
+ --uy-color-green-l4: oklch(86.028% 0.09651 159.64);
697
+ --uy-color-green-l5: oklch(81.721% 0.12618 158.13);
698
+ --uy-color-green-l6: oklch(77.692% 0.15338 156.44);
699
+ --uy-color-green-l7: oklch(73.847% 0.17437 153.87);
700
+ --uy-color-green-l8: oklch(57.61% 0.14966 151.64);
701
+ --uy-color-green-l9: oklch(47.424% 0.11597 153.14);
702
+ --uy-color-green-l10: oklch(39.675% 0.09458 153.9);
703
+ --uy-color-green-l11: oklch(31.845% 0.0735 154.83);
704
+ --uy-color-green-l12: oklch(24.608% 0.05225 158.42);
705
+ --uy-color-yellow-l1: oklch(97.915% 0.03037 98.851);
706
+ --uy-color-yellow-l2: oklch(95.518% 0.06994 99.662);
707
+ --uy-color-yellow-l3: oklch(90.451% 0.12113 97.006);
708
+ --uy-color-yellow-l4: oklch(85.448% 0.14853 92.739);
709
+ --uy-color-yellow-l5: oklch(82.818% 0.1685 86.008);
710
+ --uy-color-yellow-l6: oklch(76.928% 0.15861 79.3);
711
+ --uy-color-yellow-l7: oklch(69.416% 0.14464 76.061);
712
+ --uy-color-yellow-l8: oklch(63.915% 0.13445 73.481);
713
+ --uy-color-yellow-l9: oklch(65.58% 0.13871 74.43);
714
+ --uy-color-yellow-l10: oklch(55.319% 0.11439 74.868);
715
+ --uy-color-yellow-l11: oklch(30.395% 0.06335 78.023);
716
+ --uy-color-yellow-l12: oklch(22.149% 0.0459 79.81);
717
+ --uy-color-cyan-l1: oklch(97.886% 0.00986 267.36);
718
+ --uy-color-cyan-l2: oklch(95.134% 0.02342 256.1);
719
+ --uy-color-cyan-l3: oklch(88.875% 0.0523 253.72);
720
+ --uy-color-cyan-l4: oklch(84.58% 0.07513 252.94);
721
+ --uy-color-cyan-l5: oklch(77.464% 0.10865 254.47);
722
+ --uy-color-cyan-l6: oklch(61.922% 0.19081 264.43);
723
+ --uy-color-cyan-l7: oklch(51.695% 0.25373 263.23);
724
+ --uy-color-cyan-l8: oklch(45.699% 0.23019 263.15);
725
+ --uy-color-cyan-l9: oklch(37.762% 0.18821 262.89);
726
+ --uy-color-cyan-l10: oklch(34.112% 0.16828 262.78);
727
+ --uy-color-cyan-l11: oklch(26.594% 0.12371 262.08);
728
+ --uy-color-cyan-l12: oklch(17.635% 0.07085 259.71);
729
+ --uy-color-blue-l1: oklch(97.952% 0.01094 225.98);
730
+ --uy-color-blue-l2: oklch(95.852% 0.02276 224.85);
731
+ --uy-color-blue-l3: oklch(93.309% 0.03781 224.26);
732
+ --uy-color-blue-l4: oklch(86.944% 0.07387 225.17);
733
+ --uy-color-blue-l5: oklch(79.937% 0.09849 228.77);
734
+ --uy-color-blue-l6: oklch(73.171% 0.11492 230.76);
735
+ --uy-color-blue-l7: oklch(64.991% 0.13865 236.58);
736
+ --uy-color-blue-l8: oklch(54.305% 0.12243 240.11);
737
+ --uy-color-blue-l9: oklch(48.504% 0.11745 244.2);
738
+ --uy-color-blue-l10: oklch(41.431% 0.11515 250.54);
739
+ --uy-color-blue-l11: oklch(31.396% 0.08821 251.58);
740
+ --uy-color-blue-l12: oklch(20.128% 0.05254 250.57);
741
+ --uy-color-purple-l1: oklch(97.685% 0.0142 308.3);
742
+ --uy-color-purple-l2: oklch(93.912% 0.03693 306.42);
743
+ --uy-color-purple-l3: oklch(86.42% 0.08356 305.11);
744
+ --uy-color-purple-l4: oklch(80.045% 0.12523 304.54);
745
+ --uy-color-purple-l5: oklch(70.598% 0.18751 302.64);
746
+ --uy-color-purple-l6: oklch(59.606% 0.25733 298.62);
747
+ --uy-color-purple-l7: oklch(50.521% 0.27523 292.38);
748
+ --uy-color-purple-l8: oklch(39.992% 0.22552 290.56);
749
+ --uy-color-purple-l9: oklch(34.128% 0.19137 291.48);
750
+ --uy-color-purple-l10: oklch(28.003% 0.15567 292.93);
751
+ --uy-color-purple-l11: oklch(21.779% 0.11996 294.49);
752
+ --uy-color-purple-l12: oklch(16.492% 0.08864 298.76);
753
+ --uy-color-plum-l1: oklch(98.074% 0.01687 325.7);
754
+ --uy-color-plum-l2: oklch(95.054% 0.0442 325.92);
755
+ --uy-color-plum-l3: oklch(89.287% 0.09959 326.37);
756
+ --uy-color-plum-l4: oklch(82.177% 0.17459 327.02);
757
+ --uy-color-plum-l5: oklch(74.56% 0.26487 327.83);
758
+ --uy-color-plum-l6: oklch(70.055% 0.26778 327.97);
759
+ --uy-color-plum-l7: oklch(69.122% 0.31769 328.36);
760
+ --uy-color-plum-l8: oklch(60.393% 0.27757 328.36);
761
+ --uy-color-plum-l9: oklch(55.799% 0.25645 328.36);
762
+ --uy-color-plum-l10: oklch(41.854% 0.19236 328.36);
763
+ --uy-color-plum-l11: oklch(28.707% 0.13194 328.36);
764
+ --uy-color-plum-l12: oklch(21.133% 0.09713 328.36);
765
+ --uy-color-peach-l1: oklch(97.27% 0.01359 34.299);
766
+ --uy-color-peach-l2: oklch(90.632% 0.04897 32.141);
767
+ --uy-color-peach-l3: oklch(82.029% 0.10207 33.458);
768
+ --uy-color-peach-l9: oklch(74.944% 0.15289 33.756);
769
+ --uy-color-peach-l10: oklch(68.145% 0.20917 33.947);
770
+ --uy-color-peach-l11: oklch(45.269% 0.14889 33.908);
771
+ --uy-color-peach-l12: oklch(22.79% 0.07583 37.262);
772
+ --uy-color-sunglow-l1: oklch(97.781% 0.02393 85.787);
773
+ --uy-color-sunglow-l2: oklch(94.597% 0.05744 85.031);
774
+ --uy-color-sunglow-l3: oklch(88.727% 0.12792 86.388);
775
+ --uy-color-sunglow-l9: oklch(82.358% 0.16964 79.247);
776
+ --uy-color-sunglow-l10: oklch(55.358% 0.10103 84.486);
777
+ --uy-color-sunglow-l11: oklch(41.232% 0.07399 83.781);
778
+ --uy-color-sunglow-l12: oklch(28.544% 0.05865 83.417);
779
+ --uy-color-teal-l1: oklch(98.839% 0.01592 187.35);
780
+ --uy-color-teal-l2: oklch(97.172% 0.03545 187.96);
781
+ --uy-color-teal-l3: oklch(95.311% 0.05839 185.65);
782
+ --uy-color-teal-l4: oklch(93.64% 0.07958 185.16);
783
+ --uy-color-teal-l5: oklch(90.979% 0.10812 183.84);
784
+ --uy-color-teal-l6: oklch(85.856% 0.12945 182.74);
785
+ --uy-color-teal-l7: oklch(81.634% 0.14556 179.74);
786
+ --uy-color-teal-l8: oklch(75.655% 0.13859 178.63);
787
+ --uy-color-teal-l9: oklch(64.039% 0.11735 178.57);
788
+ --uy-color-teal-l10: oklch(53.68% 0.09858 178.28);
789
+ --uy-color-teal-l11: oklch(39.29% 0.07141 179.75);
790
+ --uy-color-teal-l12: oklch(25.219% 0.04499 182.68);
791
+ --uy-color-orange-l1: oklch(98.951% 0.00901 78.283);
792
+ --uy-color-orange-l2: oklch(96.593% 0.02201 63.21);
793
+ --uy-color-orange-l3: oklch(91.294% 0.06104 66.137);
794
+ --uy-color-orange-l4: oklch(84.141% 0.11341 63.98);
795
+ --uy-color-orange-l5: oklch(78.942% 0.14833 59.584);
796
+ --uy-color-orange-l6: oklch(74.813% 0.1758 55.368);
797
+ --uy-color-orange-l7: oklch(70.436% 0.18901 48.977);
798
+ --uy-color-orange-l8: oklch(62.422% 0.17068 47.739);
799
+ --uy-color-orange-l9: oklch(52.276% 0.14176 48.278);
800
+ --uy-color-orange-l10: oklch(41.774% 0.1105 49.961);
801
+ --uy-color-orange-l11: oklch(31.978% 0.08201 52.207);
802
+ --uy-color-orange-l12: oklch(22.532% 0.05418 57.579);
803
+ --uy-color-utility-backdrop: oklch(16.172% 0.03703 253.15 / 0.6);
804
+ --uy-color-utility-shadow-100: oklch(0% 0 none / 0.05882);
805
+ --uy-color-utility-shadow-200: oklch(0% 0 none / 0.07843);
806
+ --uy-color-utility-shadow-300: oklch(0% 0 none / 0.07843);
807
+ --uy-color-utility-shadow-400: oklch(0% 0 none / 0.10196);
808
+ --uy-color-utility-shadow-500: oklch(0% 0 none / 0.12157);
809
+ --uy-color-utility-shadow-600: oklch(0% 0 none / 0.12157);
810
+ --uy-shadow-canvas: none;
811
+ --uy-font-serif: "Source Serif 4", serif;
812
+ --uy-font-sans: Inter, sans-serif;
813
+ --uy-font-mono: "Roboto Mono", monospace;
814
+ --uy-grid-layout-gutter--default: calc(var(--uy-spacing) * 2);
815
+ --uy-grid-layout-margin--default: calc(var(--uy-spacing) * 2);
816
+ --uy-grid-layout-gutter--md: calc(var(--uy-spacing) * 2);
817
+ --uy-grid-layout-margin--md: calc(var(--uy-spacing) * 3);
818
+ --uy-grid-layout-gutter--lg: calc(var(--uy-spacing) * 2);
819
+ --uy-grid-layout-margin--lg: calc(var(--uy-spacing) * 5);
820
+ --uy-radius-xs: var(--uy-radius-50);
821
+ --uy-radius-sm: var(--uy-radius-75);
822
+ --uy-radius-md: var(--uy-radius-100);
823
+ --uy-radius-lg: var(--uy-radius-200);
824
+ --uy-radius-xl: var(--uy-radius-300);
825
+ --uy-color-canvas: var(--uy-color-grayscale-l2);
826
+ --uy-color-surface-primary-highest: var(--uy-color-plum-l10);
827
+ --uy-color-surface-primary-high: var(--uy-color-plum-l8);
828
+ --uy-color-surface-primary: var(--uy-color-plum-l6);
829
+ --uy-color-surface-primary-enabled: var(--uy-color-grayscale-l12);
830
+ --uy-color-surface-primary-hover: var(--uy-color-grayscale-l11);
831
+ --uy-color-surface-primary-pressed: var(--uy-color-plum-l5);
832
+ --uy-color-surface-primary-focus: var(--uy-color-grayscale-l12);
833
+ --uy-color-surface-primary-active: var(--uy-color-grayscale-l12);
834
+ --uy-color-surface-primary-disabled: var(--uy-color-grayscale-l5);
835
+ --uy-color-surface-primary-low: var(--uy-color-plum-l3);
836
+ --uy-color-surface-primary-lowest: var(--uy-color-plum-l1);
837
+ --uy-color-surface-primary-lowest-enabled: var(--uy-color-plum-l1);
838
+ --uy-color-surface-primary-lowest-hover: var(--uy-color-grayscale-l1);
839
+ --uy-color-surface-primary-lowest-pressed: var(--uy-color-plum-l1);
840
+ --uy-color-surface-primary-lowest-focus: var(--uy-color-plum-l4);
841
+ --uy-color-surface-primary-lowest-active: var(--uy-color-plum-l1);
842
+ --uy-color-surface-primary-lowest-disabled: var(--uy-color-grayscale-l2);
843
+ --uy-color-surface-neutral: var(--uy-color-grayscale-l0);
844
+ --uy-color-surface-neutral-enabled: var(--uy-color-grayscale-l0);
845
+ --uy-color-surface-neutral-hover: var(--uy-color-grayscale-l3);
846
+ --uy-color-surface-neutral-pressed: var(--uy-color-plum-l2);
847
+ --uy-color-surface-neutral-focus: var(--uy-color-grayscale-l2);
848
+ --uy-color-surface-neutral-active: var(--uy-color-plum-l2);
849
+ --uy-color-surface-neutral-selected: var(--uy-color-grayscale-l4);
850
+ --uy-color-surface-neutral-disabled: var(--uy-color-grayscale-l4);
851
+ --uy-color-surface-neutral-low: var(--uy-color-grayscale-l3);
852
+ --uy-color-surface-neutral-low-enabled: var(--uy-color-grayscale-l3);
853
+ --uy-color-surface-neutral-low-hover: var(--uy-color-grayscale-l4);
854
+ --uy-color-surface-neutral-low-pressed: var(--uy-color-plum-l3);
855
+ --uy-color-surface-neutral-low-focus: var(--uy-color-grayscale-l3);
856
+ --uy-color-surface-neutral-low-active: var(--uy-color-grayscale-l3);
857
+ --uy-color-surface-neutral-low-disabled: var(--uy-color-grayscale-l5);
858
+ --uy-color-surface-neutral-low-selected: var(--uy-color-grayscale-l3);
859
+ --uy-color-surface-neutral-lowest: var(--uy-color-grayscale-l4);
860
+ --uy-color-surface-neutral-lowest-enabled: var(--uy-color-grayscale-l4);
861
+ --uy-color-surface-neutral-lowest-hover: var(--uy-color-grayscale-l5);
862
+ --uy-color-surface-neutral-lowest-pressed: var(--uy-color-grayscale-l6);
863
+ --uy-color-surface-neutral-lowest-focus: var(--uy-color-grayscale-l4);
864
+ --uy-color-surface-neutral-lowest-active: var(--uy-color-grayscale-l4);
865
+ --uy-color-surface-neutral-lowest-disabled: var(--uy-color-grayscale-l4);
866
+ --uy-color-surface-neutral-lowest-selected: var(--uy-color-grayscale-l6);
867
+ --uy-color-surface-danger: var(--uy-color-red-l7);
868
+ --uy-color-surface-danger-enabled: var(--uy-color-red-l7);
869
+ --uy-color-surface-danger-hover: var(--uy-color-red-l8);
870
+ --uy-color-surface-danger-pressed: var(--uy-color-red-l9);
871
+ --uy-color-surface-danger-focus: var(--uy-color-red-l7);
872
+ --uy-color-surface-danger-active: var(--uy-color-red-l7);
873
+ --uy-color-surface-danger-disabled: var(--uy-color-grayscale-l8);
874
+ --uy-color-surface-danger-low: var(--uy-color-red-l3);
875
+ --uy-color-surface-danger-lowest: var(--uy-color-red-l2);
876
+ --uy-color-surface-danger-lowest-enabled: var(--uy-color-red-l1);
877
+ --uy-color-surface-danger-lowest-hover: var(--uy-color-red-l2);
878
+ --uy-color-surface-danger-lowest-pressed: var(--uy-color-red-l3);
879
+ --uy-color-surface-danger-lowest-focus: var(--uy-color-grayscale-l0);
880
+ --uy-color-surface-danger-lowest-active: var(--uy-color-red-l2);
881
+ --uy-color-surface-danger-lowest-disabled: var(--uy-color-grayscale-l8);
882
+ --uy-color-surface-warning: var(--uy-color-yellow-l6);
883
+ --uy-color-surface-warning-enabled: var(--uy-color-yellow-l6);
884
+ --uy-color-surface-warning-hover: var(--uy-color-yellow-l7);
885
+ --uy-color-surface-warning-pressed: var(--uy-color-yellow-l8);
886
+ --uy-color-surface-warning-focus: var(--uy-color-yellow-l6);
887
+ --uy-color-surface-warning-active: var(--uy-color-yellow-l6);
888
+ --uy-color-surface-warning-disabled: var(--uy-color-grayscale-l8);
889
+ --uy-color-surface-warning-low: var(--uy-color-yellow-l3);
890
+ --uy-color-surface-warning-lowest: var(--uy-color-yellow-l2);
891
+ --uy-color-surface-warning-lowest-enabled: var(--uy-color-yellow-l2);
892
+ --uy-color-surface-warning-lowest-hover: var(--uy-color-yellow-l2);
893
+ --uy-color-surface-warning-lowest-pressed: var(--uy-color-yellow-l3);
894
+ --uy-color-surface-warning-lowest-focus: var(--uy-color-grayscale-l0);
895
+ --uy-color-surface-warning-lowest-active: var(--uy-color-yellow-l2);
896
+ --uy-color-surface-warning-lowest-disabled: var(--uy-color-grayscale-l8);
897
+ --uy-color-surface-success: var(--uy-color-green-l8);
898
+ --uy-color-surface-success-low: var(--uy-color-green-l3);
899
+ --uy-color-surface-success-lowest: var(--uy-color-green-l2);
900
+ --uy-color-surface-success-lowest-enabled: var(--uy-color-green-l2);
901
+ --uy-color-surface-success-lowest-hover: var(--uy-color-green-l2);
902
+ --uy-color-surface-success-lowest-pressed: var(--uy-color-green-l3);
903
+ --uy-color-surface-success-lowest-focus: var(--uy-color-green-l4);
904
+ --uy-color-surface-success-lowest-active: var(--uy-color-green-l2);
905
+ --uy-color-surface-success-lowest-disabled: var(--uy-color-grayscale-l8);
906
+ --uy-color-surface-info: var(--uy-color-blue-l4);
907
+ --uy-color-surface-info-low: var(--uy-color-blue-l3);
908
+ --uy-color-surface-info-lowest: var(--uy-color-blue-l2);
909
+ --uy-color-surface-info-lowest-enabled: var(--uy-color-blue-l2);
910
+ --uy-color-surface-info-lowest-hover: var(--uy-color-blue-l3);
911
+ --uy-color-surface-info-lowest-pressed: var(--uy-color-blue-l3);
912
+ --uy-color-surface-info-lowest-focus: var(--uy-color-blue-l2);
913
+ --uy-color-surface-info-lowest-active: var(--uy-color-blue-l2);
914
+ --uy-color-surface-info-lowest-disabled: var(--uy-color-grayscale-l8);
915
+ --uy-color-surface-promo: var(--uy-color-plum-l6);
916
+ --uy-color-surface-promo-low: var(--uy-color-plum-l3);
917
+ --uy-color-surface-promo-lowest: var(--uy-color-plum-l2);
918
+ --uy-color-surface-ai-low: var(--uy-color-purple-l6);
919
+ --uy-color-surface-form-enabled: var(--uy-color-grayscale-l0);
920
+ --uy-color-surface-form-hover: var(--uy-color-grayscale-l0);
921
+ --uy-color-surface-form-pressed: var(--uy-color-grayscale-l0);
922
+ --uy-color-surface-form-focus: var(--uy-color-grayscale-l0);
923
+ --uy-color-surface-form-active: var(--uy-color-plum-l6);
924
+ --uy-color-surface-form-selected: var(--uy-color-plum-l1);
925
+ --uy-color-surface-form-disabled: var(--uy-color-grayscale-l3);
926
+ --uy-color-surface-form-read-only: var(--uy-color-grayscale-l8);
927
+ --uy-color-surface-form-error: var(--uy-color-red-l2);
928
+ --uy-color-surface-form-high-enabled: var(--uy-color-grayscale-l3);
929
+ --uy-color-surface-form-high-hover: var(--uy-color-grayscale-l4);
930
+ --uy-color-surface-form-high-pressed: var(--uy-color-grayscale-l5);
931
+ --uy-color-surface-form-high-focus: var(--uy-color-grayscale-l3);
932
+ --uy-color-surface-form-high-active: var(--uy-color-grayscale-l0);
933
+ --uy-color-surface-form-high-selected: var(--uy-color-plum-l2);
934
+ --uy-color-surface-form-high-disabled: var(--uy-color-grayscale-l2);
935
+ --uy-color-surface-form-high-read-only: var(--uy-color-grayscale-l2);
936
+ --uy-color-surface-form-high-error: var(--uy-color-red-l2);
937
+ --uy-color-surface-inverted: var(--uy-color-grayscale-l12);
938
+ --uy-color-surface-inverted-enabled: var(--uy-color-grayscale-l12);
939
+ --uy-color-surface-inverted-hover: var(--uy-color-grayscale-l10);
940
+ --uy-color-surface-inverted-pressed: var(--uy-color-grayscale-l11);
941
+ --uy-color-surface-inverted-focus: var(--uy-color-grayscale-l12);
942
+ --uy-color-surface-inverted-active: var(--uy-color-grayscale-l11);
943
+ --uy-color-surface-decorative-teal: var(--uy-color-teal-l6);
944
+ --uy-color-surface-decorative-teal-high: var(--uy-color-teal-l9);
945
+ --uy-color-surface-decorative-teal-low: var(--uy-color-teal-l3);
946
+ --uy-color-surface-decorative-teal-lowest: var(--uy-color-teal-l2);
947
+ --uy-color-surface-decorative-purple-high: var(--uy-color-purple-l9);
948
+ --uy-color-surface-decorative-purple: var(--uy-color-purple-l6);
949
+ --uy-color-surface-decorative-purple-low: var(--uy-color-purple-l3);
950
+ --uy-color-surface-decorative-purple-lowest: var(--uy-color-purple-l2);
951
+ --uy-color-surface-decorative-plum: var(--uy-color-plum-l6);
952
+ --uy-color-surface-decorative-plum-high: var(--uy-color-plum-l9);
953
+ --uy-color-surface-decorative-plum-low: var(--uy-color-plum-l3);
954
+ --uy-color-surface-decorative-plum-lowest: var(--uy-color-plum-l2);
955
+ --uy-color-surface-decorative-orange: var(--uy-color-orange-l6);
956
+ --uy-color-surface-decorative-orange-high: var(--uy-color-orange-l9);
957
+ --uy-color-surface-decorative-orange-low: var(--uy-color-orange-l3);
958
+ --uy-color-surface-decorative-orange-lowest: var(--uy-color-orange-l2);
959
+ --uy-color-content-primary: var(--uy-color-plum-l6);
960
+ --uy-color-content-primary-enabled: var(--uy-color-grayscale-l12);
961
+ --uy-color-content-primary-hover: var(--uy-color-grayscale-l11);
962
+ --uy-color-content-primary-pressed: var(--uy-color-grayscale-l12);
963
+ --uy-color-content-primary-focus: var(--uy-color-grayscale-l12);
964
+ --uy-color-content-primary-active: var(--uy-color-grayscale-l12);
965
+ --uy-color-content-primary-disabled: var(--uy-color-grayscale-l8);
966
+ --uy-color-content-primary-high: var(--uy-color-plum-l10);
967
+ --uy-color-content-neutral: var(--uy-color-grayscale-l12);
968
+ --uy-color-content-neutral-enabled: var(--uy-color-grayscale-l12);
969
+ --uy-color-content-neutral-hover: var(--uy-color-grayscale-l12);
970
+ --uy-color-content-neutral-pressed: var(--uy-color-grayscale-l12);
971
+ --uy-color-content-neutral-focus: var(--uy-color-grayscale-l12);
972
+ --uy-color-content-neutral-active: var(--uy-color-grayscale-l12);
973
+ --uy-color-content-neutral-disabled: var(--uy-color-grayscale-l7);
974
+ --uy-color-content-neutral-low: var(--uy-color-grayscale-l11);
975
+ --uy-color-content-neutral-lowest: var(--uy-color-grayscale-l9);
976
+ --uy-color-content-neutral-lowest-enabled: var(--uy-color-grayscale-l9);
977
+ --uy-color-content-neutral-lowest-hover: var(--uy-color-grayscale-l10);
978
+ --uy-color-content-neutral-lowest-pressed: var(--uy-color-grayscale-l12);
979
+ --uy-color-content-neutral-lowest-focus: var(--uy-color-grayscale-l9);
980
+ --uy-color-content-neutral-lowest-active: var(--uy-color-grayscale-l9);
981
+ --uy-color-content-neutral-lowest-disabled: var(--uy-color-grayscale-l7);
982
+ --uy-color-content-danger: var(--uy-color-red-l8);
983
+ --uy-color-content-danger-enabled: var(--uy-color-red-l9);
984
+ --uy-color-content-danger-hover: var(--uy-color-red-l10);
985
+ --uy-color-content-danger-pressed: var(--uy-color-red-l11);
986
+ --uy-color-content-danger-focus: var(--uy-color-red-l9);
987
+ --uy-color-content-danger-active: var(--uy-color-red-l9);
988
+ --uy-color-content-danger-disabled: var(--uy-color-grayscale-l8);
989
+ --uy-color-content-danger-high: var(--uy-color-red-l10);
990
+ --uy-color-content-warning: var(--uy-color-yellow-l7);
991
+ --uy-color-content-warning-enabled: var(--uy-color-yellow-l10);
992
+ --uy-color-content-warning-hover: var(--uy-color-yellow-l11);
993
+ --uy-color-content-warning-pressed: var(--uy-color-yellow-l12);
994
+ --uy-color-content-warning-focus: var(--uy-color-yellow-l1);
995
+ --uy-color-content-warning-active: var(--uy-color-yellow-l10);
996
+ --uy-color-content-warning-disabled: var(--uy-color-grayscale-l8);
997
+ --uy-color-content-warning-high: var(--uy-color-yellow-l10);
998
+ --uy-color-content-success: var(--uy-color-green-l8);
999
+ --uy-color-content-success-enabled: var(--uy-color-green-l9);
1000
+ --uy-color-content-success-hover: var(--uy-color-green-l10);
1001
+ --uy-color-content-success-pressed: var(--uy-color-green-l11);
1002
+ --uy-color-content-success-focus: var(--uy-color-green-l9);
1003
+ --uy-color-content-success-active: var(--uy-color-green-l10);
1004
+ --uy-color-content-success-disabled: var(--uy-color-grayscale-l8);
1005
+ --uy-color-content-success-high: var(--uy-color-green-l11);
1006
+ --uy-color-content-info: var(--uy-color-blue-l7);
1007
+ --uy-color-content-info-enabled: var(--uy-color-blue-l9);
1008
+ --uy-color-content-info-hover: var(--uy-color-blue-l10);
1009
+ --uy-color-content-info-pressed: var(--uy-color-blue-l11);
1010
+ --uy-color-content-info-focus: var(--uy-color-blue-l9);
1011
+ --uy-color-content-info-active: var(--uy-color-blue-l10);
1012
+ --uy-color-content-info-disabled: var(--uy-color-grayscale-l8);
1013
+ --uy-color-content-info-high: var(--uy-color-blue-l11);
1014
+ --uy-color-content-promo: var(--uy-color-plum-l6);
1015
+ --uy-color-content-promo-high: var(--uy-color-plum-l10);
1016
+ --uy-color-content-form-enabled: var(--uy-color-grayscale-l12);
1017
+ --uy-color-content-form-hover: var(--uy-color-grayscale-l12);
1018
+ --uy-color-content-form-pressed: var(--uy-color-grayscale-l12);
1019
+ --uy-color-content-form-focus: var(--uy-color-grayscale-l12);
1020
+ --uy-color-content-form-active: var(--uy-color-grayscale-l12);
1021
+ --uy-color-content-form-selected: var(--uy-color-grayscale-l12);
1022
+ --uy-color-content-form-disabled: var(--uy-color-grayscale-l8);
1023
+ --uy-color-content-form-read-only: var(--uy-color-grayscale-l8);
1024
+ --uy-color-content-form-invalid: var(--uy-color-red-l8);
1025
+ --uy-color-content-inverted: var(--uy-color-grayscale-l0);
1026
+ --uy-color-content-inverted-enabled: var(--uy-color-grayscale-l0);
1027
+ --uy-color-content-inverted-hover: var(--uy-color-grayscale-l0);
1028
+ --uy-color-content-inverted-pressed: var(--uy-color-grayscale-l12);
1029
+ --uy-color-content-inverted-focus: var(--uy-color-grayscale-l0);
1030
+ --uy-color-content-inverted-active: var(--uy-color-grayscale-l0);
1031
+ --uy-color-content-inverted-disabled: var(--uy-color-grayscale-l7);
1032
+ --uy-color-content-decorative-teal: var(--uy-color-teal-l6);
1033
+ --uy-color-content-decorative-teal-high: var(--uy-color-teal-l10);
1034
+ --uy-color-content-decorative-purple: var(--uy-color-purple-l6);
1035
+ --uy-color-content-decorative-purple-high: var(--uy-color-purple-l10);
1036
+ --uy-color-content-decorative-plum: var(--uy-color-plum-l6);
1037
+ --uy-color-content-decorative-plum-high: var(--uy-color-plum-l10);
1038
+ --uy-color-content-decorative-orange: var(--uy-color-orange-l6);
1039
+ --uy-color-content-decorative-orange-high: var(--uy-color-orange-l10);
1040
+ --uy-color-border-primary: var(--uy-color-grayscale-l12);
1041
+ --uy-color-border-primary-enabled: var(--uy-color-grayscale-l12);
1042
+ --uy-color-border-primary-hover: var(--uy-color-grayscale-l11);
1043
+ --uy-color-border-primary-pressed: var(--uy-color-grayscale-l12);
1044
+ --uy-color-border-primary-focus: var(--uy-color-grayscale-l12);
1045
+ --uy-color-border-primary-active: var(--uy-color-grayscale-l12);
1046
+ --uy-color-border-primary-disabled: var(--uy-color-grayscale-l4);
1047
+ --uy-color-border-primary-lowest: var(--uy-color-plum-l2);
1048
+ --uy-color-border-neutral-high: var(--uy-color-grayscale-l7);
1049
+ --uy-color-border-neutral-high-enabled: var(--uy-color-grayscale-l8);
1050
+ --uy-color-border-neutral-high-hover: var(--uy-color-grayscale-l9);
1051
+ --uy-color-border-neutral-high-pressed: var(--uy-color-grayscale-l10);
1052
+ --uy-color-border-neutral-high-focus: var(--uy-color-grayscale-l8);
1053
+ --uy-color-border-neutral-high-active: var(--uy-color-grayscale-l8);
1054
+ --uy-color-border-neutral-high-disabled: var(--uy-color-grayscale-l5);
1055
+ --uy-color-border-neutral: var(--uy-color-grayscale-l5);
1056
+ --uy-color-border-neutral-enabled: var(--uy-color-grayscale-l6);
1057
+ --uy-color-border-neutral-hover: var(--uy-color-grayscale-l6);
1058
+ --uy-color-border-neutral-active: var(--uy-color-plum-l5);
1059
+ --uy-color-border-neutral-pressed: var(--uy-color-grayscale-l6);
1060
+ --uy-color-border-neutral-selected: var(--uy-color-grayscale-l6);
1061
+ --uy-color-border-neutral-disabled: var(--uy-color-grayscale-l5);
1062
+ --uy-color-border-neutral-low: var(--uy-color-grayscale-l4);
1063
+ --uy-color-border-danger: var(--uy-color-red-l4);
1064
+ --uy-color-border-danger-lowest: var(--uy-color-red-l2);
1065
+ --uy-color-border-warning: var(--uy-color-yellow-l4);
1066
+ --uy-color-border-warning-lowest: var(--uy-color-yellow-l2);
1067
+ --uy-color-border-success: var(--uy-color-green-l8);
1068
+ --uy-color-border-success-low: var(--uy-color-green-l4);
1069
+ --uy-color-border-success-lowest: var(--uy-color-green-l2);
1070
+ --uy-color-border-info: var(--uy-color-blue-l4);
1071
+ --uy-color-border-info-lowest: var(--uy-color-blue-l2);
1072
+ --uy-color-border-promo: var(--uy-color-plum-l4);
1073
+ --uy-color-border-promo-lowest: var(--uy-color-plum-l3);
1074
+ --uy-color-border-form-enabled: var(--uy-color-grayscale-l8);
1075
+ --uy-color-border-form-hover: var(--uy-color-grayscale-l9);
1076
+ --uy-color-border-form-pressed: var(--uy-color-grayscale-l10);
1077
+ --uy-color-border-form-focus: var(--uy-color-grayscale-l8);
1078
+ --uy-color-border-form-active: var(--uy-color-grayscale-l12);
1079
+ --uy-color-border-form-selected: var(--uy-color-plum-l6);
1080
+ --uy-color-border-form-disabled: var(--uy-color-grayscale-l5);
1081
+ --uy-color-border-form-read-only: var(--uy-color-grayscale-l5);
1082
+ --uy-color-border-form-error: var(--uy-color-red-l8);
1083
+ --uy-color-border-inverted: var(--uy-color-grayscale-l2);
1084
+ --uy-color-border-inverted-enabled: var(--uy-color-grayscale-l2);
1085
+ --uy-color-border-inverted-hover: var(--uy-color-grayscale-l3);
1086
+ --uy-color-border-inverted-pressed: var(--uy-color-grayscale-l4);
1087
+ --uy-color-border-inverted-focus: var(--uy-color-grayscale-l2);
1088
+ --uy-color-border-inverted-active: var(--uy-color-grayscale-l1);
1089
+ --uy-color-border-inverted-disabled: var(--uy-color-grayscale-l7);
1090
+ --uy-color-border-inverted-high: var(--uy-color-grayscale-l0);
1091
+ --uy-color-utility-focus-ring: var(--uy-color-blue-l6);
1092
+ --uy-color-utility-inverted-focus-ring: var(--uy-color-yellow-l4);
1093
+ --uy-shadow-100: 0px 1px 4px 1px var(--uy-color-utility-shadow-100);
1094
+ --uy-shadow-200: 0px 2px 8px 1px var(--uy-color-utility-shadow-200);
1095
+ --uy-shadow-300: 0px 5px 10px 1px var(--uy-color-utility-shadow-300);
1096
+ --uy-shadow-400: 0px 8px 18px 2px var(--uy-color-utility-shadow-400);
1097
+ --uy-shadow-500: 0px 8px 24px 4px var(--uy-color-utility-shadow-500);
1098
+ --uy-shadow-600: 0px 15px 30px 5px var(--uy-color-utility-shadow-600);
1099
+ --uy-typography-default-display-heading: var(--uy-font-weight-semibold) var(--uy-text-1000) / 1.25
1100
+ var(--uy-font-serif);
1101
+ --uy-typography-sm-display-heading: var(--uy-font-weight-semibold) var(--uy-text-1000) / 1.25 var(--uy-font-serif);
1102
+ --uy-typography-default-h1: var(--uy-font-weight-semibold) var(--uy-text-800) / 1.2 var(--uy-font-serif);
1103
+ --uy-typography-sm-h1: var(--uy-font-weight-semibold) var(--uy-text-600) / 1.286 var(--uy-font-serif);
1104
+ --uy-typography-default-h2: var(--uy-font-weight-semibold) var(--uy-text-400) / 1.273 var(--uy-font-sans);
1105
+ --uy-typography-sm-h2: var(--uy-font-weight-semibold) var(--uy-text-500) / 1.333 var(--uy-font-sans);
1106
+ --uy-typography-default-h3: var(--uy-font-weight-semibold) var(--uy-text-200) / 1.333 var(--uy-font-sans);
1107
+ --uy-typography-sm-h3: var(--uy-font-weight-semibold) var(--uy-text-300) / 1.2 var(--uy-font-sans);
1108
+ --uy-typography-default-h4: var(--uy-font-weight-semibold) var(--uy-text-100) / 1.125 var(--uy-font-sans);
1109
+ --uy-typography-sm-h4: var(--uy-font-weight-semibold) var(--uy-text-200) / 1.333 var(--uy-font-sans);
1110
+ --uy-typography-default-overline: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
1111
+ --uy-typography-sm-overline: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
1112
+ --uy-typography-default-subtitle: var(--uy-font-weight-regular) var(--uy-text-100) / 1.5 var(--uy-font-sans);
1113
+ --uy-typography-sm-subtitle: var(--uy-font-weight-regular) var(--uy-text-100) / 1.333 var(--uy-font-sans);
1114
+ --uy-typography-default-display-title: var(--uy-font-weight-semibold) var(--uy-text-300) / 1.4 var(--uy-font-sans);
1115
+ --uy-typography-sm-display-title: var(--uy-font-weight-semibold) var(--uy-text-500) / 1.333 var(--uy-font-sans);
1116
+ --uy-typography-default-display-body: var(--uy-font-weight-regular) var(--uy-text-100) / 1.5 var(--uy-font-sans);
1117
+ --uy-typography-sm-display-body: var(--uy-font-weight-regular) var(--uy-text-200) / 1.556 var(--uy-font-sans);
1118
+ --uy-typography-default-body: var(--uy-font-weight-regular) var(--uy-text-100) / 1.5 var(--uy-font-sans);
1119
+ --uy-typography-sm-body: var(--uy-font-weight-regular) var(--uy-text-75) / 1.571 var(--uy-font-sans);
1120
+ --uy-typography-default-body-strong: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
1121
+ --uy-typography-sm-body-strong: var(--uy-font-weight-medium) var(--uy-text-75) / 1.571 var(--uy-font-sans);
1122
+ --uy-typography-default-body-small: var(--uy-font-weight-regular) var(--uy-text-50) / 1.667 var(--uy-font-sans);
1123
+ --uy-typography-sm-body-small: var(--uy-font-weight-regular) var(--uy-text-50) / 1.667 var(--uy-font-sans);
1124
+ --uy-typography-default-body-small-strong: var(--uy-font-weight-medium) var(--uy-text-50) / 1.667
1125
+ var(--uy-font-sans);
1126
+ --uy-typography-sm-body-small-strong: var(--uy-font-weight-medium) var(--uy-text-50) / 1.667 var(--uy-font-sans);
1127
+ --uy-typography-default-body-large: var(--uy-font-weight-regular) var(--uy-text-200) / 1.556 var(--uy-font-sans);
1128
+ --uy-typography-sm-body-large: var(--uy-font-weight-regular) var(--uy-text-100) / 1.5 var(--uy-font-sans);
1129
+ --uy-typography-default-body-large-strong: var(--uy-font-weight-medium) var(--uy-text-200) / 1.556
1130
+ var(--uy-font-sans);
1131
+ --uy-typography-sm-body-large-strong: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
1132
+ --uy-typography-default-action: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
1133
+ --uy-typography-sm-action: var(--uy-font-weight-medium) var(--uy-text-75) / 1.571 var(--uy-font-sans);
1134
+ --uy-typography-default-action-small: var(--uy-font-weight-medium) var(--uy-text-50) / 1.667 var(--uy-font-sans);
1135
+ --uy-typography-sm-action-small: var(--uy-font-weight-medium) var(--uy-text-50) / 1.667 var(--uy-font-sans);
1136
+ --uy-typography-default-action-large: var(--uy-font-weight-medium) var(--uy-text-200) / 1.556 var(--uy-font-sans);
1137
+ --uy-typography-sm-action-large: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
1138
+ --uy-shadow-raising: var(--uy-shadow-100);
1139
+ --uy-shadow-floating: var(--uy-shadow-200);
1140
+ --uy-shadow-levitating: var(--uy-shadow-300);
1141
+ --uy-shadow-flying: var(--uy-shadow-400);
1142
+ --uy-shadow-soaring: var(--uy-shadow-500);
1143
+ --uy-shadow-summit: var(--uy-shadow-600);
1144
+ }
1145
+ }
1146
+
1147
+ @theme {
41
1148
  --color-*: initial;
42
- --animate-spin: 2s linear infinite spin;
43
- --animate-arc-shrink: 2s ease-in-out infinite arc-shrink;
44
- --animate-pulse: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite pulse;
45
- --animate-slide: 4s cubic-bezier(1, 0, 0.36, 0.71) infinite slide;
46
- --animate-fade-in: 0.3s linear 1 fade-in;
47
- --animate-fade-out: 0.3s linear 1 fade-out;
48
- --animate-slide-right-fade-in: 0.3s ease-in 1 slide-right-fade-in;
49
- --animate-slide-right-fade-out: 0.3s ease-out 1 slide-right-fade-out;
50
- --animate-slide-up-fade-in: 0.3s ease-in 1 slide-up-fade-in;
51
- --animate-slide-down-fade-out: 0.3s ease-out 1 slide-down-fade-out;
52
- --animate-zoom-in: 0.3s ease-in 1 zoom-in;
53
- --animate-zoom-out: 0.3s ease-out 1 zoom-out;
54
- --color-grayscale-l1: oklch(99.059% 0.0017 247.84);
55
- --color-grayscale-l2: oklch(98.22% 0.00412 271.37);
56
- --color-grayscale-l3: oklch(97.323% 0.00413 271.37);
57
- --color-grayscale-l4: oklch(95.128% 0.00745 260.73);
58
- --color-grayscale-l5: oklch(91.982% 0.00977 252.82);
59
- --color-grayscale-l6: oklch(86.339% 0.01521 251.17);
60
- --color-grayscale-l7: oklch(76.254% 0.02353 254.43);
61
- --color-grayscale-l8: oklch(65.823% 0.02505 252.27);
62
- --color-grayscale-l9: oklch(53.625% 0.02834 252.08);
63
- --color-grayscale-l10: oklch(49.112% 0.03033 253.74);
64
- --color-grayscale-l11: oklch(37.463% 0.03027 254.19);
65
- --color-grayscale-l12: oklch(16.172% 0.03703 253.15);
66
- --color-grayscale-l0: oklch(100% 0 none);
67
- --color-red-l1: oklch(98.894% 0.00534 17.247);
68
- --color-red-l2: oklch(95.657% 0.02191 10.599);
69
- --color-red-l3: oklch(89.102% 0.05813 11.703);
70
- --color-red-l4: oklch(76.425% 0.14179 14.508);
71
- --color-red-l5: oklch(66.039% 0.19306 18.401);
72
- --color-red-l6: oklch(61.565% 0.23811 24.593);
73
- --color-red-l7: oklch(57.968% 0.22848 25.303);
74
- --color-red-l8: oklch(54.299% 0.21359 25.062);
75
- --color-red-l9: oklch(49.786% 0.19508 24.828);
76
- --color-red-l10: oklch(42.146% 0.1518 22.159);
77
- --color-red-l11: oklch(31.984% 0.11081 21.252);
78
- --color-red-l12: oklch(14.815% 0.03894 14.818);
79
- --color-green-l1: oklch(99.09% 0.01311 159.93);
80
- --color-green-l2: oklch(97.628% 0.03602 155.45);
81
- --color-green-l3: oklch(93.032% 0.07653 156.15);
82
- --color-green-l4: oklch(87.477% 0.11235 154.7);
83
- --color-green-l5: oklch(82.183% 0.15332 152.92);
84
- --color-green-l6: oklch(73.532% 0.21134 147.69);
85
- --color-green-l7: oklch(69.453% 0.19894 147.76);
86
- --color-green-l8: oklch(59.644% 0.17117 147.68);
87
- --color-green-l9: oklch(50.681% 0.14238 148.18);
88
- --color-green-l10: oklch(45.284% 0.12552 148.44);
89
- --color-green-l11: oklch(38.135% 0.10324 148.99);
90
- --color-green-l12: oklch(29.078% 0.08111 149.47);
91
- --color-yellow-l1: oklch(99.339% 0.01073 95.159);
92
- --color-yellow-l2: oklch(97.51% 0.03751 93.823);
93
- --color-yellow-l3: oklch(94.386% 0.09476 96.118);
94
- --color-yellow-l4: oklch(91.334% 0.13181 94.112);
95
- --color-yellow-l5: oklch(88.467% 0.16439 92.595);
96
- --color-yellow-l6: oklch(85.747% 0.17524 88.489);
97
- --color-yellow-l7: oklch(78.825% 0.16326 80.005);
98
- --color-yellow-l8: oklch(70.863% 0.14874 76.185);
99
- --color-yellow-l9: oklch(65.58% 0.13871 74.43);
100
- --color-yellow-l10: oklch(57.086% 0.12081 74.308);
101
- --color-yellow-l11: oklch(44.005% 0.09353 73.415);
102
- --color-yellow-l12: oklch(19.304% 0.03947 87.228);
103
- --color-cyan-l1: oklch(98.251% 0.01093 225.98);
104
- --color-cyan-l2: oklch(96.793% 0.02117 223);
105
- --color-cyan-l3: oklch(92.693% 0.04939 222.46);
106
- --color-cyan-l4: oklch(88.175% 0.07902 224.08);
107
- --color-cyan-l5: oklch(85.429% 0.09702 224.9);
108
- --color-cyan-l6: oklch(81.492% 0.12112 226.94);
109
- --color-cyan-l7: oklch(72.674% 0.124 228.51);
110
- --color-cyan-l8: oklch(64.227% 0.11503 229.99);
111
- --color-cyan-l9: oklch(52.482% 0.09504 229.3);
112
- --color-cyan-l10: oklch(46.295% 0.08653 230.57);
113
- --color-cyan-l11: oklch(39.485% 0.07503 230.8);
114
- --color-cyan-l12: oklch(27.448% 0.05468 229.97);
115
- --color-blue-l1: oklch(95.332% 0.02282 252.17);
116
- --color-blue-l2: oklch(90.025% 0.04979 252.09);
117
- --color-blue-l3: oklch(76.235% 0.11994 252.37);
118
- --color-blue-l4: oklch(66.102% 0.17494 254.38);
119
- --color-blue-l5: oklch(57.397% 0.20023 257.15);
120
- --color-blue-l6: oklch(55.63% 0.18803 256.77);
121
- --color-blue-l7: oklch(50.854% 0.17021 256.62);
122
- --color-blue-l8: oklch(46.343% 0.15334 256.43);
123
- --color-blue-l9: oklch(42.818% 0.13895 256.1);
124
- --color-blue-l10: oklch(38.89% 0.12422 255.76);
125
- --color-blue-l11: oklch(30.049% 0.09294 255.42);
126
- --color-blue-l12: oklch(19.818% 0.05155 252.58);
127
- --color-purple-l1: oklch(98.727% 0.00667 295.45);
128
- --color-purple-l2: oklch(96.104% 0.02008 292.15);
129
- --color-purple-l3: oklch(86.837% 0.07043 292.06);
130
- --color-purple-l4: oklch(77.641% 0.12295 290.62);
131
- --color-purple-l5: oklch(68.949% 0.1743 288.5);
132
- --color-purple-l6: oklch(60.721% 0.22281 284.89);
133
- --color-purple-l7: oklch(52.742% 0.21026 283.76);
134
- --color-purple-l8: oklch(45.172% 0.19333 282.42);
135
- --color-purple-l9: oklch(37.908% 0.1729 281.55);
136
- --color-purple-l10: oklch(30.959% 0.14783 280.72);
137
- --color-purple-l11: oklch(26.77% 0.13374 278.97);
138
- --color-purple-l12: oklch(19.414% 0.10973 276.86);
139
- --color-plum-l1: oklch(97.96% 0.01323 340.54);
140
- --color-plum-l2: oklch(94.722% 0.03438 342.15);
141
- --color-plum-l3: oklch(89.332% 0.05898 343.24);
142
- --color-plum-l4: oklch(77.61% 0.13363 344.73);
143
- --color-plum-l5: oklch(71.011% 0.17788 346.37);
144
- --color-plum-l6: oklch(65.697% 0.21441 348.85);
145
- --color-plum-l7: oklch(62.946% 0.23091 350.49);
146
- --color-plum-l8: oklch(60.018% 0.2365 352.7);
147
- --color-plum-l9: oklch(55.392% 0.21788 352.33);
148
- --color-plum-l10: oklch(47.463% 0.17504 350.96);
149
- --color-plum-l11: oklch(35.416% 0.11019 347.55);
150
- --color-plum-l12: oklch(17.955% 0.04579 345.08);
151
- --color-peach-l1: oklch(97.27% 0.01359 34.299);
152
- --color-peach-l2: oklch(90.632% 0.04897 32.141);
153
- --color-peach-l3: oklch(82.029% 0.10207 33.458);
154
- --color-peach-l9: oklch(74.944% 0.15289 33.756);
155
- --color-peach-l10: oklch(68.145% 0.20917 33.947);
156
- --color-peach-l11: oklch(45.269% 0.14889 33.908);
157
- --color-peach-l12: oklch(22.79% 0.07583 37.262);
158
- --color-sunglow-l1: oklch(97.781% 0.02393 85.787);
159
- --color-sunglow-l2: oklch(94.597% 0.05744 85.031);
160
- --color-sunglow-l3: oklch(88.727% 0.12792 86.388);
161
- --color-sunglow-l9: oklch(82.358% 0.16964 79.247);
162
- --color-sunglow-l10: oklch(55.358% 0.10103 84.486);
163
- --color-sunglow-l11: oklch(41.232% 0.07399 83.781);
164
- --color-sunglow-l12: oklch(28.544% 0.05865 83.417);
165
- --color-teal-l1: oklch(98.741% 0.01366 196.94);
166
- --color-teal-l2: oklch(97.487% 0.01887 196.85);
167
- --color-teal-l3: oklch(94.358% 0.04709 193.11);
168
- --color-teal-l4: oklch(88.394% 0.07939 191.85);
169
- --color-teal-l5: oklch(83.893% 0.09384 191.26);
170
- --color-teal-l6: oklch(74.584% 0.12769 188.32);
171
- --color-teal-l7: oklch(70.945% 0.12073 188.56);
172
- --color-teal-l8: oklch(64.559% 0.11068 188.59);
173
- --color-teal-l9: oklch(53.208% 0.09099 187.88);
174
- --color-teal-l10: oklch(46.647% 0.07467 189.94);
175
- --color-teal-l11: oklch(39.345% 0.06605 190.42);
176
- --color-teal-l12: oklch(25.346% 0.04379 189.82);
177
- --color-orange-l1: oklch(99.087% 0.00448 34.309);
178
- --color-orange-l2: oklch(95.249% 0.02398 33.548);
179
- --color-orange-l3: oklch(89.762% 0.05397 32.365);
180
- --color-orange-l4: oklch(83.646% 0.0914 33.222);
181
- --color-orange-l5: oklch(74.944% 0.15289 33.756);
182
- --color-orange-l6: oklch(68.776% 0.18707 34.151);
183
- --color-orange-l7: oklch(65.542% 0.20292 33.582);
184
- --color-orange-l8: oklch(54.399% 0.19025 33.476);
185
- --color-orange-l9: oklch(47.762% 0.15857 33.832);
186
- --color-orange-l10: oklch(42.172% 0.12494 33.8);
187
- --color-orange-l11: oklch(28.891% 0.10112 35.093);
188
- --color-orange-l12: oklch(16.65% 0.04887 43.496);
189
- --color-utility-backdrop: oklch(16.172% 0.03703 253.15 / 0.6);
190
- --color-utility-shadow-100: oklch(0% 0 none / 0.06);
191
- --color-utility-shadow-200: oklch(0% 0 none / 0.08);
192
- --color-utility-shadow-300: oklch(0% 0 none / 0.08);
193
- --color-utility-shadow-400: oklch(0% 0 none / 0.1);
194
- --color-utility-shadow-500: oklch(0% 0 none / 0.12);
195
- --color-utility-shadow-600: oklch(0% 0 none / 0.12);
196
- --grid-layout-columns--default: 6;
197
- --grid-layout-columns--md: 12;
198
- --grid-layout-columns--lg: 12;
199
- --radius-0: 0;
200
- --radius-25: 2px;
201
- --radius-50: 4px;
202
- --radius-75: 6px;
203
- --radius-100: 8px;
204
- --radius-125: 10px;
205
- --radius-150: 12px;
206
- --radius-200: 16px;
207
- --radius-300: 24px;
208
- --radius-400: 32px;
209
- --radius-circle: 50%;
210
- --radius-pill: 9999px;
211
- --shadow-canvas: none;
212
- --container-app-menu: 296px; /** Width of the main menu in global App layout */
213
- --container-lg: 984px; /** Maximum width for layout containers at large resolutions */
214
- --container-xl: 1360px; /** Maximum width for layout containers at extra-large resolutions */
215
- --container-content: 523px; /** Maximum width for content containers */
216
- --container-section: 703px; /** Maximum width for section containers */
217
- --container-page: 1063px; /** Maximum width for page containers */
218
- --container-app: 1439px; /** Maximum width for app containers */
219
- --spacing-0: 0;
220
- --spacing-25: 2px;
221
- --spacing-50: 4px;
222
- --spacing-75: 6px;
223
- --spacing-100: 8px;
224
- --spacing-125: 10px;
225
- --spacing-150: 12px;
226
- --spacing-200: 16px;
227
- --spacing-250: 20px;
228
- --spacing-300: 24px;
229
- --spacing-400: 32px;
230
- --spacing-500: 40px;
231
- --spacing-600: 48px;
232
- --spacing-800: 64px;
233
- --spacing-1000: 80px;
234
- --spacing: 8px; /** Base spacing value */
1149
+ --animate-spin: var(--uy-animate-spin);
1150
+ --animate-arc-shrink: var(--uy-animate-arc-shrink);
1151
+ --animate-pulse: var(--uy-animate-pulse);
1152
+ --animate-slide: var(--uy-animate-slide);
1153
+ --animate-fade-in: var(--uy-animate-fade-in);
1154
+ --animate-fade-out: var(--uy-animate-fade-out);
1155
+ --animate-slide-right-fade-in: var(--uy-animate-slide-right-fade-in);
1156
+ --animate-slide-right-fade-out: var(--uy-animate-slide-right-fade-out);
1157
+ --animate-slide-up-fade-in: var(--uy-animate-slide-up-fade-in);
1158
+ --animate-slide-down-fade-out: var(--uy-animate-slide-down-fade-out);
1159
+ --animate-zoom-in: var(--uy-animate-zoom-in);
1160
+ --animate-zoom-out: var(--uy-animate-zoom-out);
1161
+ --aspect-video: var(--uy-aspect-video);
1162
+ --aspect-square: var(--uy-aspect-square);
235
1163
  --breakpoint-sm: 490px;
236
1164
  --breakpoint-md: 768px;
237
1165
  --breakpoint-lg: 1280px;
238
1166
  --breakpoint-xl: 1440px;
239
- --aspect-video: 16 / 9;
240
- --aspect-square: 1 / 1;
241
- --font-serif: "Source Serif 4", serif;
242
- --font-sans: Inter, sans-serif;
243
- --font-mono: "Roboto Mono", monospace;
244
- --font-weight-regular: 400;
245
- --font-weight-medium: 500;
246
- --font-weight-semibold: 600;
247
- --font-weight-bold: 700;
248
- --text-50: 12px;
249
- --text-75: 14px;
250
- --text-100: 16px;
251
- --text-200: 18px;
252
- --text-300: 20px;
253
- --text-400: 22px;
254
- --text-500: 24px;
255
- --text-600: 28px;
256
- --text-800: 30px;
257
- --text-1000: 32px;
258
- --text-1200: 41px;
259
- --text-1400: 52px;
260
- --text-1600: 66px;
261
- --color-canvas: var(--uy-color-grayscale-l2);
262
- --color-surface-primary-highest: var(--uy-color-blue-l10);
263
- --color-surface-primary-high: var(--uy-color-blue-l8);
264
- --color-surface-primary: var(--uy-color-blue-l5);
265
- --color-surface-primary-enabled: var(--uy-color-blue-l5);
266
- --color-surface-primary-hover: var(--uy-color-blue-l7);
267
- --color-surface-primary-pressed: var(--uy-color-blue-l8);
268
- --color-surface-primary-focus: var(--uy-color-blue-l5);
269
- --color-surface-primary-active: var(--uy-color-blue-l5);
270
- --color-surface-primary-disabled: var(--uy-color-grayscale-l3);
271
- --color-surface-primary-low: var(--uy-color-blue-l3);
272
- --color-surface-primary-lowest: var(--uy-color-blue-l1);
273
- --color-surface-primary-lowest-enabled: var(--uy-color-blue-l1);
274
- --color-surface-primary-lowest-hover: var(--uy-color-blue-l1);
275
- --color-surface-primary-lowest-pressed: var(--uy-color-blue-l2);
276
- --color-surface-primary-lowest-focus: var(--uy-color-blue-l4);
277
- --color-surface-primary-lowest-active: var(--uy-color-blue-l1);
278
- --color-surface-primary-lowest-disabled: var(--uy-color-grayscale-l2);
279
- --color-surface-neutral: var(--uy-color-grayscale-l0);
280
- --color-surface-neutral-enabled: var(--uy-color-grayscale-l0);
281
- --color-surface-neutral-hover: var(--uy-color-grayscale-l3);
282
- --color-surface-neutral-pressed: var(--uy-color-grayscale-l4);
283
- --color-surface-neutral-focus: var(--uy-color-grayscale-l2);
284
- --color-surface-neutral-active: var(--uy-color-grayscale-l4);
285
- --color-surface-neutral-selected: var(--uy-color-grayscale-l3);
286
- --color-surface-neutral-disabled: var(--uy-color-grayscale-l4);
287
- --color-surface-neutral-low: var(--uy-color-grayscale-l3);
288
- --color-surface-neutral-low-enabled: var(--uy-color-grayscale-l3);
289
- --color-surface-neutral-low-hover: var(--uy-color-grayscale-l4);
290
- --color-surface-neutral-low-pressed: var(--uy-color-grayscale-l5);
291
- --color-surface-neutral-low-focus: var(--uy-color-grayscale-l4);
292
- --color-surface-neutral-low-active: var(--uy-color-grayscale-l5);
293
- --color-surface-neutral-low-disabled: var(--uy-color-grayscale-l3);
294
- --color-surface-neutral-low-selected: var(--uy-color-grayscale-l4);
295
- --color-surface-neutral-lowest: var(--uy-color-grayscale-l4);
296
- --color-surface-neutral-lowest-enabled: var(--uy-color-grayscale-l4);
297
- --color-surface-neutral-lowest-hover: var(--uy-color-grayscale-l5);
298
- --color-surface-neutral-lowest-pressed: var(--uy-color-grayscale-l6);
299
- --color-surface-neutral-lowest-focus: var(--uy-color-grayscale-l5);
300
- --color-surface-neutral-lowest-active: var(--uy-color-grayscale-l6);
301
- --color-surface-neutral-lowest-disabled: var(--uy-color-grayscale-l4);
302
- --color-surface-neutral-lowest-selected: var(--uy-color-grayscale-l5);
303
- --color-surface-danger: var(--uy-color-red-l7);
304
- --color-surface-danger-enabled: var(--uy-color-red-l7);
305
- --color-surface-danger-hover: var(--uy-color-red-l8);
306
- --color-surface-danger-pressed: var(--uy-color-red-l9);
307
- --color-surface-danger-focus: var(--uy-color-red-l7);
308
- --color-surface-danger-active: var(--uy-color-red-l7);
309
- --color-surface-danger-disabled: var(--uy-color-grayscale-l8);
310
- --color-surface-danger-low: var(--uy-color-red-l3);
311
- --color-surface-danger-lowest: var(--uy-color-red-l2);
312
- --color-surface-danger-lowest-enabled: var(--uy-color-red-l1);
313
- --color-surface-danger-lowest-hover: var(--uy-color-red-l2);
314
- --color-surface-danger-lowest-pressed: var(--uy-color-red-l3);
315
- --color-surface-danger-lowest-focus: var(--uy-color-grayscale-l0);
316
- --color-surface-danger-lowest-active: var(--uy-color-red-l2);
317
- --color-surface-danger-lowest-disabled: var(--uy-color-grayscale-l8);
318
- --color-surface-warning: var(--uy-color-yellow-l6);
319
- --color-surface-warning-enabled: var(--uy-color-yellow-l6);
320
- --color-surface-warning-hover: var(--uy-color-yellow-l7);
321
- --color-surface-warning-pressed: var(--uy-color-yellow-l8);
322
- --color-surface-warning-focus: var(--uy-color-yellow-l6);
323
- --color-surface-warning-active: var(--uy-color-yellow-l6);
324
- --color-surface-warning-disabled: var(--uy-color-grayscale-l8);
325
- --color-surface-warning-low: var(--uy-color-yellow-l3);
326
- --color-surface-warning-lowest: var(--uy-color-yellow-l2);
327
- --color-surface-warning-lowest-enabled: var(--uy-color-yellow-l2);
328
- --color-surface-warning-lowest-hover: var(--uy-color-yellow-l2);
329
- --color-surface-warning-lowest-pressed: var(--uy-color-yellow-l3);
330
- --color-surface-warning-lowest-focus: var(--uy-color-grayscale-l0);
331
- --color-surface-warning-lowest-active: var(--uy-color-yellow-l2);
332
- --color-surface-warning-lowest-disabled: var(--uy-color-grayscale-l8);
333
- --color-surface-success: var(--uy-color-green-l8);
334
- --color-surface-success-low: var(--uy-color-green-l3);
335
- --color-surface-success-lowest: var(--uy-color-green-l2);
336
- --color-surface-success-lowest-enabled: var(--uy-color-green-l2);
337
- --color-surface-success-lowest-hover: var(--uy-color-green-l2);
338
- --color-surface-success-lowest-pressed: var(--uy-color-green-l3);
339
- --color-surface-success-lowest-focus: var(--uy-color-green-l4);
340
- --color-surface-success-lowest-active: var(--uy-color-green-l2);
341
- --color-surface-success-lowest-disabled: var(--uy-color-grayscale-l8);
342
- --color-surface-info: var(--uy-color-cyan-l6);
343
- --color-surface-info-low: var(--uy-color-cyan-l3);
344
- --color-surface-info-lowest: var(--uy-color-cyan-l2);
345
- --color-surface-info-lowest-enabled: var(--uy-color-cyan-l2);
346
- --color-surface-info-lowest-hover: var(--uy-color-cyan-l3);
347
- --color-surface-info-lowest-pressed: var(--uy-color-cyan-l3);
348
- --color-surface-info-lowest-focus: var(--uy-color-cyan-l9);
349
- --color-surface-info-lowest-active: var(--uy-color-cyan-l11);
350
- --color-surface-info-lowest-disabled: var(--uy-color-grayscale-l8);
351
- --color-surface-promo: var(--uy-color-plum-l6);
352
- --color-surface-promo-low: var(--uy-color-plum-l3);
353
- --color-surface-promo-lowest: var(--uy-color-plum-l2);
354
- --color-surface-ai-low: var(--uy-color-purple-l6);
355
- --color-surface-form-enabled: var(--uy-color-grayscale-l0);
356
- --color-surface-form-hover: var(--uy-color-grayscale-l0);
357
- --color-surface-form-pressed: var(--uy-color-grayscale-l0);
358
- --color-surface-form-focus: var(--uy-color-grayscale-l0);
359
- --color-surface-form-active: var(--uy-color-blue-l5);
360
- --color-surface-form-selected: var(--uy-color-blue-l1);
361
- --color-surface-form-disabled: var(--uy-color-grayscale-l3);
362
- --color-surface-form-read-only: var(--uy-color-grayscale-l8);
363
- --color-surface-form-error: var(--uy-color-red-l2);
364
- --color-surface-form-high-enabled: var(--uy-color-grayscale-l3);
365
- --color-surface-form-high-hover: var(--uy-color-grayscale-l4);
366
- --color-surface-form-high-pressed: var(--uy-color-grayscale-l5);
367
- --color-surface-form-high-focus: var(--uy-color-grayscale-l3);
368
- --color-surface-form-high-active: var(--uy-color-grayscale-l0);
369
- --color-surface-form-high-selected: var(--uy-color-blue-l2);
370
- --color-surface-form-high-disabled: var(--uy-color-grayscale-l2);
371
- --color-surface-form-high-read-only: var(--uy-color-grayscale-l2);
372
- --color-surface-form-high-error: var(--uy-color-red-l2);
373
- --color-surface-inverted: var(--uy-color-grayscale-l12);
374
- --color-surface-inverted-enabled: var(--uy-color-grayscale-l12);
375
- --color-surface-inverted-hover: var(--uy-color-grayscale-l10);
376
- --color-surface-inverted-pressed: var(--uy-color-grayscale-l11);
377
- --color-surface-inverted-focus: var(--uy-color-grayscale-l12);
378
- --color-surface-inverted-active: var(--uy-color-grayscale-l11);
379
- --color-surface-decorative-teal: var(--uy-color-teal-l6);
380
- --color-surface-decorative-teal-high: var(--uy-color-teal-l9);
381
- --color-surface-decorative-teal-low: var(--uy-color-teal-l3);
382
- --color-surface-decorative-teal-lowest: var(--uy-color-teal-l2);
383
- --color-surface-decorative-purple-high: var(--uy-color-purple-l9);
384
- --color-surface-decorative-purple: var(--uy-color-purple-l6);
385
- --color-surface-decorative-purple-low: var(--uy-color-purple-l3);
386
- --color-surface-decorative-purple-lowest: var(--uy-color-purple-l2);
387
- --color-surface-decorative-plum: var(--uy-color-plum-l6);
388
- --color-surface-decorative-plum-high: var(--uy-color-plum-l9);
389
- --color-surface-decorative-plum-low: var(--uy-color-plum-l3);
390
- --color-surface-decorative-plum-lowest: var(--uy-color-plum-l2);
391
- --color-surface-decorative-orange: var(--uy-color-orange-l6);
392
- --color-surface-decorative-orange-high: var(--uy-color-orange-l9);
393
- --color-surface-decorative-orange-low: var(--uy-color-orange-l3);
394
- --color-surface-decorative-orange-lowest: var(--uy-color-orange-l2);
395
- --color-content-primary: var(--uy-color-blue-l6);
396
- --color-content-primary-enabled: var(--uy-color-blue-l7);
397
- --color-content-primary-hover: var(--uy-color-blue-l10);
398
- --color-content-primary-pressed: var(--uy-color-blue-l11);
399
- --color-content-primary-focus: var(--uy-color-blue-l7);
400
- --color-content-primary-active: var(--uy-color-blue-l6);
401
- --color-content-primary-disabled: var(--uy-color-grayscale-l8);
402
- --color-content-primary-high: var(--uy-color-blue-l10);
403
- --color-content-neutral: var(--uy-color-grayscale-l12);
404
- --color-content-neutral-enabled: var(--uy-color-grayscale-l12);
405
- --color-content-neutral-hover: var(--uy-color-grayscale-l12);
406
- --color-content-neutral-pressed: var(--uy-color-grayscale-l12);
407
- --color-content-neutral-focus: var(--uy-color-grayscale-l12);
408
- --color-content-neutral-active: var(--uy-color-grayscale-l12);
409
- --color-content-neutral-disabled: var(--uy-color-grayscale-l8);
410
- --color-content-neutral-low: var(--uy-color-grayscale-l11);
411
- --color-content-neutral-lowest: var(--uy-color-grayscale-l9);
412
- --color-content-neutral-lowest-enabled: var(--uy-color-grayscale-l9);
413
- --color-content-neutral-lowest-hover: var(--uy-color-grayscale-l10);
414
- --color-content-neutral-lowest-pressed: var(--uy-color-grayscale-l11);
415
- --color-content-neutral-lowest-focus: var(--uy-color-grayscale-l9);
416
- --color-content-neutral-lowest-active: var(--uy-color-grayscale-l12);
417
- --color-content-neutral-lowest-disabled: var(--uy-color-grayscale-l8);
418
- --color-content-danger: var(--uy-color-red-l8);
419
- --color-content-danger-enabled: var(--uy-color-red-l9);
420
- --color-content-danger-hover: var(--uy-color-red-l10);
421
- --color-content-danger-pressed: var(--uy-color-red-l11);
422
- --color-content-danger-focus: var(--uy-color-red-l9);
423
- --color-content-danger-active: var(--uy-color-red-l10);
424
- --color-content-danger-disabled: var(--uy-color-grayscale-l8);
425
- --color-content-danger-high: var(--uy-color-red-l11);
426
- --color-content-warning: var(--uy-color-yellow-l7);
427
- --color-content-warning-enabled: var(--uy-color-yellow-l11);
428
- --color-content-warning-hover: var(--uy-color-yellow-l11);
429
- --color-content-warning-pressed: var(--uy-color-yellow-l12);
430
- --color-content-warning-focus: var(--uy-color-yellow-l1);
431
- --color-content-warning-active: var(--uy-color-yellow-l11);
432
- --color-content-warning-disabled: var(--uy-color-grayscale-l8);
433
- --color-content-warning-high: var(--uy-color-yellow-l11);
434
- --color-content-success: var(--uy-color-green-l8);
435
- --color-content-success-enabled: var(--uy-color-green-l9);
436
- --color-content-success-hover: var(--uy-color-green-l10);
437
- --color-content-success-pressed: var(--uy-color-green-l11);
438
- --color-content-success-focus: var(--uy-color-green-l9);
439
- --color-content-success-active: var(--uy-color-green-l10);
440
- --color-content-success-disabled: var(--uy-color-grayscale-l8);
441
- --color-content-success-high: var(--uy-color-green-l11);
442
- --color-content-info: var(--uy-color-cyan-l7);
443
- --color-content-info-enabled: var(--uy-color-cyan-l9);
444
- --color-content-info-hover: var(--uy-color-cyan-l10);
445
- --color-content-info-pressed: var(--uy-color-cyan-l11);
446
- --color-content-info-focus: var(--uy-color-cyan-l9);
447
- --color-content-info-active: var(--uy-color-cyan-l10);
448
- --color-content-info-disabled: var(--uy-color-grayscale-l8);
449
- --color-content-info-high: var(--uy-color-cyan-l11);
450
- --color-content-promo: var(--uy-color-plum-l6);
451
- --color-content-promo-high: var(--uy-color-plum-l10);
452
- --color-content-form-enabled: var(--uy-color-grayscale-l12);
453
- --color-content-form-hover: var(--uy-color-grayscale-l12);
454
- --color-content-form-pressed: var(--uy-color-grayscale-l12);
455
- --color-content-form-focus: var(--uy-color-grayscale-l12);
456
- --color-content-form-active: var(--uy-color-grayscale-l12);
457
- --color-content-form-selected: var(--uy-color-blue-l6);
458
- --color-content-form-disabled: var(--uy-color-grayscale-l8);
459
- --color-content-form-read-only: var(--uy-color-grayscale-l12);
460
- --color-content-form-invalid: var(--uy-color-red-l8);
461
- --color-content-inverted: var(--uy-color-grayscale-l0);
462
- --color-content-inverted-enabled: var(--uy-color-grayscale-l0);
463
- --color-content-inverted-hover: var(--uy-color-grayscale-l2);
464
- --color-content-inverted-pressed: var(--uy-color-grayscale-l4);
465
- --color-content-inverted-focus: var(--uy-color-grayscale-l0);
466
- --color-content-inverted-active: var(--uy-color-grayscale-l0);
467
- --color-content-inverted-disabled: var(--uy-color-grayscale-l7);
468
- --color-content-decorative-teal: var(--uy-color-teal-l6);
469
- --color-content-decorative-teal-high: var(--uy-color-teal-l10);
470
- --color-content-decorative-purple: var(--uy-color-purple-l6);
471
- --color-content-decorative-purple-high: var(--uy-color-purple-l10);
472
- --color-content-decorative-plum: var(--uy-color-plum-l6);
473
- --color-content-decorative-plum-high: var(--uy-color-plum-l10);
474
- --color-content-decorative-orange: var(--uy-color-orange-l6);
475
- --color-content-decorative-orange-high: var(--uy-color-orange-l10);
476
- --color-border-primary: var(--uy-color-blue-l5);
477
- --color-border-primary-enabled: var(--uy-color-blue-l5);
478
- --color-border-primary-hover: var(--uy-color-blue-l6);
479
- --color-border-primary-pressed: var(--uy-color-blue-l7);
480
- --color-border-primary-focus: var(--uy-color-blue-l5);
481
- --color-border-primary-active: var(--uy-color-blue-l8);
482
- --color-border-primary-disabled: var(--uy-color-grayscale-l4);
483
- --color-border-primary-lowest: var(--uy-color-blue-l2);
484
- --color-border-neutral-high: var(--uy-color-grayscale-l7);
485
- --color-border-neutral-high-enabled: var(--uy-color-grayscale-l8);
486
- --color-border-neutral-high-hover: var(--uy-color-grayscale-l9);
487
- --color-border-neutral-high-pressed: var(--uy-color-grayscale-l10);
488
- --color-border-neutral-high-focus: var(--uy-color-grayscale-l8);
489
- --color-border-neutral-high-active: var(--uy-color-grayscale-l8);
490
- --color-border-neutral-high-disabled: var(--uy-color-grayscale-l5);
491
- --color-border-neutral: var(--uy-color-grayscale-l5);
492
- --color-border-neutral-enabled: var(--uy-color-grayscale-l6);
493
- --color-border-neutral-hover: var(--uy-color-grayscale-l6);
494
- --color-border-neutral-active: var(--uy-color-blue-l5);
495
- --color-border-neutral-pressed: var(--uy-color-grayscale-l7);
496
- --color-border-neutral-selected: var(--uy-color-grayscale-l6);
497
- --color-border-neutral-disabled: var(--uy-color-grayscale-l5);
498
- --color-border-neutral-low: var(--uy-color-grayscale-l4);
499
- --color-border-danger: var(--uy-color-red-l4);
500
- --color-border-danger-lowest: var(--uy-color-red-l2);
501
- --color-border-warning: var(--uy-color-yellow-l4);
502
- --color-border-warning-lowest: var(--uy-color-yellow-l2);
503
- --color-border-success: var(--uy-color-green-l8);
504
- --color-border-success-low: var(--uy-color-green-l4);
505
- --color-border-success-lowest: var(--uy-color-green-l2);
506
- --color-border-info: var(--uy-color-cyan-l4);
507
- --color-border-info-lowest: var(--uy-color-cyan-l2);
508
- --color-border-promo: var(--uy-color-plum-l4);
509
- --color-border-promo-lowest: var(--uy-color-plum-l3);
510
- --color-border-form-enabled: var(--uy-color-grayscale-l8);
511
- --color-border-form-hover: var(--uy-color-grayscale-l9);
512
- --color-border-form-pressed: var(--uy-color-grayscale-l10);
513
- --color-border-form-focus: var(--uy-color-grayscale-l8);
514
- --color-border-form-active: var(--uy-color-blue-l5);
515
- --color-border-form-selected: var(--uy-color-blue-l5);
516
- --color-border-form-disabled: var(--uy-color-grayscale-l5);
517
- --color-border-form-read-only: var(--uy-color-grayscale-l5);
518
- --color-border-form-error: var(--uy-color-red-l8);
519
- --color-border-inverted: var(--uy-color-grayscale-l2);
520
- --color-border-inverted-enabled: var(--uy-color-grayscale-l2);
521
- --color-border-inverted-hover: var(--uy-color-grayscale-l3);
522
- --color-border-inverted-pressed: var(--uy-color-grayscale-l4);
523
- --color-border-inverted-focus: var(--uy-color-grayscale-l2);
524
- --color-border-inverted-active: var(--uy-color-grayscale-l1);
525
- --color-border-inverted-disabled: var(--uy-color-grayscale-l7);
526
- --color-border-inverted-high: var(--uy-color-grayscale-l0);
527
- --color-utility-focus-ring: var(--uy-color-blue-l4);
528
- --color-utility-inverted-focus-ring: var(--uy-color-yellow-l4);
529
- --grid-layout-gutter--default: calc(var(--uy-spacing) * 2);
530
- --grid-layout-margin--default: calc(var(--uy-spacing) * 2);
531
- --grid-layout-gutter--md: calc(var(--uy-spacing) * 2);
532
- --grid-layout-margin--md: calc(var(--uy-spacing) * 3);
533
- --grid-layout-gutter--lg: calc(var(--uy-spacing) * 2);
534
- --grid-layout-margin--lg: calc(var(--uy-spacing) * 5);
535
- --radius-xs: var(--uy-radius-50);
536
- --radius-sm: var(--uy-radius-75);
537
- --radius-md: var(--uy-radius-100);
538
- --radius-lg: var(--uy-radius-200);
539
- --radius-xl: var(--uy-radius-300);
540
- --shadow-100: 0px 1px 4px 1px var(--uy-color-utility-shadow-100);
541
- --shadow-200: 0px 2px 8px 1px var(--uy-color-utility-shadow-200);
542
- --shadow-300: 0px 5px 10px 1px var(--uy-color-utility-shadow-300);
543
- --shadow-400: 0px 8px 18px 2px var(--uy-color-utility-shadow-400);
544
- --shadow-500: 0px 8px 24px 4px var(--uy-color-utility-shadow-500);
545
- --shadow-600: 0px 15px 30px 5px var(--uy-color-utility-shadow-600);
546
- --typography-default-display-heading: var(--uy-font-weight-semibold) var(--uy-text-1000) / 1.25 var(--uy-font-sans);
547
- --typography-sm-display-heading: var(--uy-font-weight-semibold) var(--uy-text-1000) / 1.25 var(--uy-font-sans);
548
- --typography-default-h1: var(--uy-font-weight-semibold) var(--uy-text-800) / 1.2 var(--uy-font-sans);
549
- --typography-sm-h1: var(--uy-font-weight-semibold) var(--uy-text-600) / 1.286 var(--uy-font-sans);
550
- --typography-default-h2: var(--uy-font-weight-semibold) var(--uy-text-400) / 1.273 var(--uy-font-sans);
551
- --typography-sm-h2: var(--uy-font-weight-semibold) var(--uy-text-500) / 1.333 var(--uy-font-sans);
552
- --typography-default-h3: var(--uy-font-weight-semibold) var(--uy-text-200) / 1.333 var(--uy-font-sans);
553
- --typography-sm-h3: var(--uy-font-weight-semibold) var(--uy-text-300) / 1.2 var(--uy-font-sans);
554
- --typography-default-h4: var(--uy-font-weight-semibold) var(--uy-text-100) / 1.125 var(--uy-font-sans);
555
- --typography-sm-h4: var(--uy-font-weight-semibold) var(--uy-text-200) / 1.333 var(--uy-font-sans);
556
- --typography-default-overline: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
557
- --typography-sm-overline: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
558
- --typography-default-subtitle: var(--uy-font-weight-regular) var(--uy-text-100) / 1.5 var(--uy-font-sans);
559
- --typography-sm-subtitle: var(--uy-font-weight-regular) var(--uy-text-100) / 1.333 var(--uy-font-sans);
560
- --typography-default-display-title: var(--uy-font-weight-semibold) var(--uy-text-300) / 1.4 var(--uy-font-sans);
561
- --typography-sm-display-title: var(--uy-font-weight-semibold) var(--uy-text-500) / 1.333 var(--uy-font-sans);
562
- --typography-default-display-body: var(--uy-font-weight-regular) var(--uy-text-100) / 1.5 var(--uy-font-sans);
563
- --typography-sm-display-body: var(--uy-font-weight-regular) var(--uy-text-200) / 1.556 var(--uy-font-sans);
564
- --typography-default-body: var(--uy-font-weight-regular) var(--uy-text-100) / 1.5 var(--uy-font-sans);
565
- --typography-sm-body: var(--uy-font-weight-regular) var(--uy-text-75) / 1.571 var(--uy-font-sans);
566
- --typography-default-body-strong: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
567
- --typography-sm-body-strong: var(--uy-font-weight-medium) var(--uy-text-75) / 1.571 var(--uy-font-sans);
568
- --typography-default-body-small: var(--uy-font-weight-regular) var(--uy-text-50) / 1.667 var(--uy-font-sans);
569
- --typography-sm-body-small: var(--uy-font-weight-regular) var(--uy-text-50) / 1.667 var(--uy-font-sans);
570
- --typography-default-body-small-strong: var(--uy-font-weight-medium) var(--uy-text-50) / 1.667 var(--uy-font-sans);
571
- --typography-sm-body-small-strong: var(--uy-font-weight-medium) var(--uy-text-50) / 1.667 var(--uy-font-sans);
572
- --typography-default-body-large: var(--uy-font-weight-regular) var(--uy-text-200) / 1.556 var(--uy-font-sans);
573
- --typography-sm-body-large: var(--uy-font-weight-regular) var(--uy-text-100) / 1.5 var(--uy-font-sans);
574
- --typography-default-body-large-strong: var(--uy-font-weight-medium) var(--uy-text-200) / 1.556 var(--uy-font-sans);
575
- --typography-sm-body-large-strong: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
576
- --typography-default-action: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
577
- --typography-sm-action: var(--uy-font-weight-medium) var(--uy-text-75) / 1.571 var(--uy-font-sans);
578
- --typography-default-action-small: var(--uy-font-weight-medium) var(--uy-text-50) / 1.667 var(--uy-font-sans);
579
- --typography-sm-action-small: var(--uy-font-weight-medium) var(--uy-text-50) / 1.667 var(--uy-font-sans);
580
- --typography-default-action-large: var(--uy-font-weight-medium) var(--uy-text-200) / 1.556 var(--uy-font-sans);
581
- --typography-sm-action-large: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
582
- --shadow-raising: var(--uy-shadow-100);
583
- --shadow-floating: var(--uy-shadow-200);
584
- --shadow-levitating: var(--uy-shadow-300);
585
- --shadow-flying: var(--uy-shadow-400);
586
- --shadow-soaring: var(--uy-shadow-500);
587
- --shadow-summit: var(--uy-shadow-600);
1167
+ --text-50: var(--uy-text-50);
1168
+ --text-75: var(--uy-text-75);
1169
+ --text-100: var(--uy-text-100);
1170
+ --text-200: var(--uy-text-200);
1171
+ --text-300: var(--uy-text-300);
1172
+ --text-400: var(--uy-text-400);
1173
+ --text-500: var(--uy-text-500);
1174
+ --text-600: var(--uy-text-600);
1175
+ --text-800: var(--uy-text-800);
1176
+ --text-1000: var(--uy-text-1000);
1177
+ --text-1200: var(--uy-text-1200);
1178
+ --text-1400: var(--uy-text-1400);
1179
+ --text-1600: var(--uy-text-1600);
1180
+ --font-weight-regular: var(--uy-font-weight-regular);
1181
+ --font-weight-medium: var(--uy-font-weight-medium);
1182
+ --font-weight-semibold: var(--uy-font-weight-semibold);
1183
+ --font-weight-bold: var(--uy-font-weight-bold);
1184
+ --grid-layout-columns--default: var(--uy-grid-layout-columns--default);
1185
+ --grid-layout-gutter--default: var(--uy-grid-layout-gutter--default);
1186
+ --grid-layout-margin--default: var(--uy-grid-layout-margin--default);
1187
+ --grid-layout-columns--md: var(--uy-grid-layout-columns--md);
1188
+ --grid-layout-gutter--md: var(--uy-grid-layout-gutter--md);
1189
+ --grid-layout-margin--md: var(--uy-grid-layout-margin--md);
1190
+ --grid-layout-columns--lg: var(--uy-grid-layout-columns--lg);
1191
+ --grid-layout-gutter--lg: var(--uy-grid-layout-gutter--lg);
1192
+ --grid-layout-margin--lg: var(--uy-grid-layout-margin--lg);
1193
+ --radius-0: var(--uy-radius-0);
1194
+ --radius-25: var(--uy-radius-25);
1195
+ --radius-50: var(--uy-radius-50);
1196
+ --radius-75: var(--uy-radius-75);
1197
+ --radius-100: var(--uy-radius-100);
1198
+ --radius-125: var(--uy-radius-125);
1199
+ --radius-150: var(--uy-radius-150);
1200
+ --radius-200: var(--uy-radius-200);
1201
+ --radius-300: var(--uy-radius-300);
1202
+ --radius-400: var(--uy-radius-400);
1203
+ --radius-circle: var(--uy-radius-circle);
1204
+ --radius-pill: var(--uy-radius-pill);
1205
+ --radius-xs: var(--uy-radius-xs);
1206
+ --radius-sm: var(--uy-radius-sm);
1207
+ --radius-md: var(--uy-radius-md);
1208
+ --radius-lg: var(--uy-radius-lg);
1209
+ --radius-xl: var(--uy-radius-xl);
1210
+ --container-app-menu: 296px;
1211
+ --container-lg: 984px;
1212
+ --container-xl: 1360px;
1213
+ --container-content: 523px;
1214
+ --container-section: 703px;
1215
+ --container-page: 1063px;
1216
+ --container-app: 1439px;
1217
+ --spacing-0: var(--uy-spacing-0);
1218
+ --spacing-25: var(--uy-spacing-25);
1219
+ --spacing-50: var(--uy-spacing-50);
1220
+ --spacing-75: var(--uy-spacing-75);
1221
+ --spacing-100: var(--uy-spacing-100);
1222
+ --spacing-125: var(--uy-spacing-125);
1223
+ --spacing-150: var(--uy-spacing-150);
1224
+ --spacing-200: var(--uy-spacing-200);
1225
+ --spacing-250: var(--uy-spacing-250);
1226
+ --spacing-300: var(--uy-spacing-300);
1227
+ --spacing-400: var(--uy-spacing-400);
1228
+ --spacing-500: var(--uy-spacing-500);
1229
+ --spacing-600: var(--uy-spacing-600);
1230
+ --spacing-800: var(--uy-spacing-800);
1231
+ --spacing-1000: var(--uy-spacing-1000);
1232
+ --spacing: var(--uy-spacing);
1233
+ --color-grayscale-l1: var(--uy-color-grayscale-l1);
1234
+ --color-grayscale-l2: var(--uy-color-grayscale-l2);
1235
+ --color-grayscale-l3: var(--uy-color-grayscale-l3);
1236
+ --color-grayscale-l4: var(--uy-color-grayscale-l4);
1237
+ --color-grayscale-l5: var(--uy-color-grayscale-l5);
1238
+ --color-grayscale-l6: var(--uy-color-grayscale-l6);
1239
+ --color-grayscale-l7: var(--uy-color-grayscale-l7);
1240
+ --color-grayscale-l8: var(--uy-color-grayscale-l8);
1241
+ --color-grayscale-l9: var(--uy-color-grayscale-l9);
1242
+ --color-grayscale-l10: var(--uy-color-grayscale-l10);
1243
+ --color-grayscale-l11: var(--uy-color-grayscale-l11);
1244
+ --color-grayscale-l12: var(--uy-color-grayscale-l12);
1245
+ --color-grayscale-l0: var(--uy-color-grayscale-l0);
1246
+ --color-red-l1: var(--uy-color-red-l1);
1247
+ --color-red-l2: var(--uy-color-red-l2);
1248
+ --color-red-l3: var(--uy-color-red-l3);
1249
+ --color-red-l4: var(--uy-color-red-l4);
1250
+ --color-red-l5: var(--uy-color-red-l5);
1251
+ --color-red-l6: var(--uy-color-red-l6);
1252
+ --color-red-l7: var(--uy-color-red-l7);
1253
+ --color-red-l8: var(--uy-color-red-l8);
1254
+ --color-red-l9: var(--uy-color-red-l9);
1255
+ --color-red-l10: var(--uy-color-red-l10);
1256
+ --color-red-l11: var(--uy-color-red-l11);
1257
+ --color-red-l12: var(--uy-color-red-l12);
1258
+ --color-green-l1: var(--uy-color-green-l1);
1259
+ --color-green-l2: var(--uy-color-green-l2);
1260
+ --color-green-l3: var(--uy-color-green-l3);
1261
+ --color-green-l4: var(--uy-color-green-l4);
1262
+ --color-green-l5: var(--uy-color-green-l5);
1263
+ --color-green-l6: var(--uy-color-green-l6);
1264
+ --color-green-l7: var(--uy-color-green-l7);
1265
+ --color-green-l8: var(--uy-color-green-l8);
1266
+ --color-green-l9: var(--uy-color-green-l9);
1267
+ --color-green-l10: var(--uy-color-green-l10);
1268
+ --color-green-l11: var(--uy-color-green-l11);
1269
+ --color-green-l12: var(--uy-color-green-l12);
1270
+ --color-yellow-l1: var(--uy-color-yellow-l1);
1271
+ --color-yellow-l2: var(--uy-color-yellow-l2);
1272
+ --color-yellow-l3: var(--uy-color-yellow-l3);
1273
+ --color-yellow-l4: var(--uy-color-yellow-l4);
1274
+ --color-yellow-l5: var(--uy-color-yellow-l5);
1275
+ --color-yellow-l6: var(--uy-color-yellow-l6);
1276
+ --color-yellow-l7: var(--uy-color-yellow-l7);
1277
+ --color-yellow-l8: var(--uy-color-yellow-l8);
1278
+ --color-yellow-l9: var(--uy-color-yellow-l9);
1279
+ --color-yellow-l10: var(--uy-color-yellow-l10);
1280
+ --color-yellow-l11: var(--uy-color-yellow-l11);
1281
+ --color-yellow-l12: var(--uy-color-yellow-l12);
1282
+ --color-cyan-l1: var(--uy-color-cyan-l1);
1283
+ --color-cyan-l2: var(--uy-color-cyan-l2);
1284
+ --color-cyan-l3: var(--uy-color-cyan-l3);
1285
+ --color-cyan-l4: var(--uy-color-cyan-l4);
1286
+ --color-cyan-l5: var(--uy-color-cyan-l5);
1287
+ --color-cyan-l6: var(--uy-color-cyan-l6);
1288
+ --color-cyan-l7: var(--uy-color-cyan-l7);
1289
+ --color-cyan-l8: var(--uy-color-cyan-l8);
1290
+ --color-cyan-l9: var(--uy-color-cyan-l9);
1291
+ --color-cyan-l10: var(--uy-color-cyan-l10);
1292
+ --color-cyan-l11: var(--uy-color-cyan-l11);
1293
+ --color-cyan-l12: var(--uy-color-cyan-l12);
1294
+ --color-blue-l1: var(--uy-color-blue-l1);
1295
+ --color-blue-l2: var(--uy-color-blue-l2);
1296
+ --color-blue-l3: var(--uy-color-blue-l3);
1297
+ --color-blue-l4: var(--uy-color-blue-l4);
1298
+ --color-blue-l5: var(--uy-color-blue-l5);
1299
+ --color-blue-l6: var(--uy-color-blue-l6);
1300
+ --color-blue-l7: var(--uy-color-blue-l7);
1301
+ --color-blue-l8: var(--uy-color-blue-l8);
1302
+ --color-blue-l9: var(--uy-color-blue-l9);
1303
+ --color-blue-l10: var(--uy-color-blue-l10);
1304
+ --color-blue-l11: var(--uy-color-blue-l11);
1305
+ --color-blue-l12: var(--uy-color-blue-l12);
1306
+ --color-purple-l1: var(--uy-color-purple-l1);
1307
+ --color-purple-l2: var(--uy-color-purple-l2);
1308
+ --color-purple-l3: var(--uy-color-purple-l3);
1309
+ --color-purple-l4: var(--uy-color-purple-l4);
1310
+ --color-purple-l5: var(--uy-color-purple-l5);
1311
+ --color-purple-l6: var(--uy-color-purple-l6);
1312
+ --color-purple-l7: var(--uy-color-purple-l7);
1313
+ --color-purple-l8: var(--uy-color-purple-l8);
1314
+ --color-purple-l9: var(--uy-color-purple-l9);
1315
+ --color-purple-l10: var(--uy-color-purple-l10);
1316
+ --color-purple-l11: var(--uy-color-purple-l11);
1317
+ --color-purple-l12: var(--uy-color-purple-l12);
1318
+ --color-plum-l1: var(--uy-color-plum-l1);
1319
+ --color-plum-l2: var(--uy-color-plum-l2);
1320
+ --color-plum-l3: var(--uy-color-plum-l3);
1321
+ --color-plum-l4: var(--uy-color-plum-l4);
1322
+ --color-plum-l5: var(--uy-color-plum-l5);
1323
+ --color-plum-l6: var(--uy-color-plum-l6);
1324
+ --color-plum-l7: var(--uy-color-plum-l7);
1325
+ --color-plum-l8: var(--uy-color-plum-l8);
1326
+ --color-plum-l9: var(--uy-color-plum-l9);
1327
+ --color-plum-l10: var(--uy-color-plum-l10);
1328
+ --color-plum-l11: var(--uy-color-plum-l11);
1329
+ --color-plum-l12: var(--uy-color-plum-l12);
1330
+ --color-peach-l1: var(--uy-color-peach-l1);
1331
+ --color-peach-l2: var(--uy-color-peach-l2);
1332
+ --color-peach-l3: var(--uy-color-peach-l3);
1333
+ --color-peach-l9: var(--uy-color-peach-l9);
1334
+ --color-peach-l10: var(--uy-color-peach-l10);
1335
+ --color-peach-l11: var(--uy-color-peach-l11);
1336
+ --color-peach-l12: var(--uy-color-peach-l12);
1337
+ --color-sunglow-l1: var(--uy-color-sunglow-l1);
1338
+ --color-sunglow-l2: var(--uy-color-sunglow-l2);
1339
+ --color-sunglow-l3: var(--uy-color-sunglow-l3);
1340
+ --color-sunglow-l9: var(--uy-color-sunglow-l9);
1341
+ --color-sunglow-l10: var(--uy-color-sunglow-l10);
1342
+ --color-sunglow-l11: var(--uy-color-sunglow-l11);
1343
+ --color-sunglow-l12: var(--uy-color-sunglow-l12);
1344
+ --color-teal-l1: var(--uy-color-teal-l1);
1345
+ --color-teal-l2: var(--uy-color-teal-l2);
1346
+ --color-teal-l3: var(--uy-color-teal-l3);
1347
+ --color-teal-l4: var(--uy-color-teal-l4);
1348
+ --color-teal-l5: var(--uy-color-teal-l5);
1349
+ --color-teal-l6: var(--uy-color-teal-l6);
1350
+ --color-teal-l7: var(--uy-color-teal-l7);
1351
+ --color-teal-l8: var(--uy-color-teal-l8);
1352
+ --color-teal-l9: var(--uy-color-teal-l9);
1353
+ --color-teal-l10: var(--uy-color-teal-l10);
1354
+ --color-teal-l11: var(--uy-color-teal-l11);
1355
+ --color-teal-l12: var(--uy-color-teal-l12);
1356
+ --color-orange-l1: var(--uy-color-orange-l1);
1357
+ --color-orange-l2: var(--uy-color-orange-l2);
1358
+ --color-orange-l3: var(--uy-color-orange-l3);
1359
+ --color-orange-l4: var(--uy-color-orange-l4);
1360
+ --color-orange-l5: var(--uy-color-orange-l5);
1361
+ --color-orange-l6: var(--uy-color-orange-l6);
1362
+ --color-orange-l7: var(--uy-color-orange-l7);
1363
+ --color-orange-l8: var(--uy-color-orange-l8);
1364
+ --color-orange-l9: var(--uy-color-orange-l9);
1365
+ --color-orange-l10: var(--uy-color-orange-l10);
1366
+ --color-orange-l11: var(--uy-color-orange-l11);
1367
+ --color-orange-l12: var(--uy-color-orange-l12);
1368
+ --color-canvas: var(--uy-color-canvas);
1369
+ --color-surface-primary-highest: var(--uy-color-surface-primary-highest);
1370
+ --color-surface-primary-high: var(--uy-color-surface-primary-high);
1371
+ --color-surface-primary: var(--uy-color-surface-primary);
1372
+ --color-surface-primary-enabled: var(--uy-color-surface-primary-enabled);
1373
+ --color-surface-primary-hover: var(--uy-color-surface-primary-hover);
1374
+ --color-surface-primary-pressed: var(--uy-color-surface-primary-pressed);
1375
+ --color-surface-primary-focus: var(--uy-color-surface-primary-focus);
1376
+ --color-surface-primary-active: var(--uy-color-surface-primary-active);
1377
+ --color-surface-primary-disabled: var(--uy-color-surface-primary-disabled);
1378
+ --color-surface-primary-low: var(--uy-color-surface-primary-low);
1379
+ --color-surface-primary-lowest: var(--uy-color-surface-primary-lowest);
1380
+ --color-surface-primary-lowest-enabled: var(--uy-color-surface-primary-lowest-enabled);
1381
+ --color-surface-primary-lowest-hover: var(--uy-color-surface-primary-lowest-hover);
1382
+ --color-surface-primary-lowest-pressed: var(--uy-color-surface-primary-lowest-pressed);
1383
+ --color-surface-primary-lowest-focus: var(--uy-color-surface-primary-lowest-focus);
1384
+ --color-surface-primary-lowest-active: var(--uy-color-surface-primary-lowest-active);
1385
+ --color-surface-primary-lowest-disabled: var(--uy-color-surface-primary-lowest-disabled);
1386
+ --color-surface-neutral: var(--uy-color-surface-neutral);
1387
+ --color-surface-neutral-enabled: var(--uy-color-surface-neutral-enabled);
1388
+ --color-surface-neutral-hover: var(--uy-color-surface-neutral-hover);
1389
+ --color-surface-neutral-pressed: var(--uy-color-surface-neutral-pressed);
1390
+ --color-surface-neutral-focus: var(--uy-color-surface-neutral-focus);
1391
+ --color-surface-neutral-active: var(--uy-color-surface-neutral-active);
1392
+ --color-surface-neutral-selected: var(--uy-color-surface-neutral-selected);
1393
+ --color-surface-neutral-disabled: var(--uy-color-surface-neutral-disabled);
1394
+ --color-surface-neutral-low: var(--uy-color-surface-neutral-low);
1395
+ --color-surface-neutral-low-enabled: var(--uy-color-surface-neutral-low-enabled);
1396
+ --color-surface-neutral-low-hover: var(--uy-color-surface-neutral-low-hover);
1397
+ --color-surface-neutral-low-pressed: var(--uy-color-surface-neutral-low-pressed);
1398
+ --color-surface-neutral-low-focus: var(--uy-color-surface-neutral-low-focus);
1399
+ --color-surface-neutral-low-active: var(--uy-color-surface-neutral-low-active);
1400
+ --color-surface-neutral-low-disabled: var(--uy-color-surface-neutral-low-disabled);
1401
+ --color-surface-neutral-low-selected: var(--uy-color-surface-neutral-low-selected);
1402
+ --color-surface-neutral-lowest: var(--uy-color-surface-neutral-lowest);
1403
+ --color-surface-neutral-lowest-enabled: var(--uy-color-surface-neutral-lowest-enabled);
1404
+ --color-surface-neutral-lowest-hover: var(--uy-color-surface-neutral-lowest-hover);
1405
+ --color-surface-neutral-lowest-pressed: var(--uy-color-surface-neutral-lowest-pressed);
1406
+ --color-surface-neutral-lowest-focus: var(--uy-color-surface-neutral-lowest-focus);
1407
+ --color-surface-neutral-lowest-active: var(--uy-color-surface-neutral-lowest-active);
1408
+ --color-surface-neutral-lowest-disabled: var(--uy-color-surface-neutral-lowest-disabled);
1409
+ --color-surface-neutral-lowest-selected: var(--uy-color-surface-neutral-lowest-selected);
1410
+ --color-surface-danger: var(--uy-color-surface-danger);
1411
+ --color-surface-danger-enabled: var(--uy-color-surface-danger-enabled);
1412
+ --color-surface-danger-hover: var(--uy-color-surface-danger-hover);
1413
+ --color-surface-danger-pressed: var(--uy-color-surface-danger-pressed);
1414
+ --color-surface-danger-focus: var(--uy-color-surface-danger-focus);
1415
+ --color-surface-danger-active: var(--uy-color-surface-danger-active);
1416
+ --color-surface-danger-disabled: var(--uy-color-surface-danger-disabled);
1417
+ --color-surface-danger-low: var(--uy-color-surface-danger-low);
1418
+ --color-surface-danger-lowest: var(--uy-color-surface-danger-lowest);
1419
+ --color-surface-danger-lowest-enabled: var(--uy-color-surface-danger-lowest-enabled);
1420
+ --color-surface-danger-lowest-hover: var(--uy-color-surface-danger-lowest-hover);
1421
+ --color-surface-danger-lowest-pressed: var(--uy-color-surface-danger-lowest-pressed);
1422
+ --color-surface-danger-lowest-focus: var(--uy-color-surface-danger-lowest-focus);
1423
+ --color-surface-danger-lowest-active: var(--uy-color-surface-danger-lowest-active);
1424
+ --color-surface-danger-lowest-disabled: var(--uy-color-surface-danger-lowest-disabled);
1425
+ --color-surface-warning: var(--uy-color-surface-warning);
1426
+ --color-surface-warning-enabled: var(--uy-color-surface-warning-enabled);
1427
+ --color-surface-warning-hover: var(--uy-color-surface-warning-hover);
1428
+ --color-surface-warning-pressed: var(--uy-color-surface-warning-pressed);
1429
+ --color-surface-warning-focus: var(--uy-color-surface-warning-focus);
1430
+ --color-surface-warning-active: var(--uy-color-surface-warning-active);
1431
+ --color-surface-warning-disabled: var(--uy-color-surface-warning-disabled);
1432
+ --color-surface-warning-low: var(--uy-color-surface-warning-low);
1433
+ --color-surface-warning-lowest: var(--uy-color-surface-warning-lowest);
1434
+ --color-surface-warning-lowest-enabled: var(--uy-color-surface-warning-lowest-enabled);
1435
+ --color-surface-warning-lowest-hover: var(--uy-color-surface-warning-lowest-hover);
1436
+ --color-surface-warning-lowest-pressed: var(--uy-color-surface-warning-lowest-pressed);
1437
+ --color-surface-warning-lowest-focus: var(--uy-color-surface-warning-lowest-focus);
1438
+ --color-surface-warning-lowest-active: var(--uy-color-surface-warning-lowest-active);
1439
+ --color-surface-warning-lowest-disabled: var(--uy-color-surface-warning-lowest-disabled);
1440
+ --color-surface-success: var(--uy-color-surface-success);
1441
+ --color-surface-success-low: var(--uy-color-surface-success-low);
1442
+ --color-surface-success-lowest: var(--uy-color-surface-success-lowest);
1443
+ --color-surface-success-lowest-enabled: var(--uy-color-surface-success-lowest-enabled);
1444
+ --color-surface-success-lowest-hover: var(--uy-color-surface-success-lowest-hover);
1445
+ --color-surface-success-lowest-pressed: var(--uy-color-surface-success-lowest-pressed);
1446
+ --color-surface-success-lowest-focus: var(--uy-color-surface-success-lowest-focus);
1447
+ --color-surface-success-lowest-active: var(--uy-color-surface-success-lowest-active);
1448
+ --color-surface-success-lowest-disabled: var(--uy-color-surface-success-lowest-disabled);
1449
+ --color-surface-info: var(--uy-color-surface-info);
1450
+ --color-surface-info-low: var(--uy-color-surface-info-low);
1451
+ --color-surface-info-lowest: var(--uy-color-surface-info-lowest);
1452
+ --color-surface-info-lowest-enabled: var(--uy-color-surface-info-lowest-enabled);
1453
+ --color-surface-info-lowest-hover: var(--uy-color-surface-info-lowest-hover);
1454
+ --color-surface-info-lowest-pressed: var(--uy-color-surface-info-lowest-pressed);
1455
+ --color-surface-info-lowest-focus: var(--uy-color-surface-info-lowest-focus);
1456
+ --color-surface-info-lowest-active: var(--uy-color-surface-info-lowest-active);
1457
+ --color-surface-info-lowest-disabled: var(--uy-color-surface-info-lowest-disabled);
1458
+ --color-surface-promo: var(--uy-color-surface-promo);
1459
+ --color-surface-promo-low: var(--uy-color-surface-promo-low);
1460
+ --color-surface-promo-lowest: var(--uy-color-surface-promo-lowest);
1461
+ --color-surface-ai-low: var(--uy-color-surface-ai-low);
1462
+ --color-surface-form-enabled: var(--uy-color-surface-form-enabled);
1463
+ --color-surface-form-hover: var(--uy-color-surface-form-hover);
1464
+ --color-surface-form-pressed: var(--uy-color-surface-form-pressed);
1465
+ --color-surface-form-focus: var(--uy-color-surface-form-focus);
1466
+ --color-surface-form-active: var(--uy-color-surface-form-active);
1467
+ --color-surface-form-selected: var(--uy-color-surface-form-selected);
1468
+ --color-surface-form-disabled: var(--uy-color-surface-form-disabled);
1469
+ --color-surface-form-read-only: var(--uy-color-surface-form-read-only);
1470
+ --color-surface-form-error: var(--uy-color-surface-form-error);
1471
+ --color-surface-form-high-enabled: var(--uy-color-surface-form-high-enabled);
1472
+ --color-surface-form-high-hover: var(--uy-color-surface-form-high-hover);
1473
+ --color-surface-form-high-pressed: var(--uy-color-surface-form-high-pressed);
1474
+ --color-surface-form-high-focus: var(--uy-color-surface-form-high-focus);
1475
+ --color-surface-form-high-active: var(--uy-color-surface-form-high-active);
1476
+ --color-surface-form-high-selected: var(--uy-color-surface-form-high-selected);
1477
+ --color-surface-form-high-disabled: var(--uy-color-surface-form-high-disabled);
1478
+ --color-surface-form-high-read-only: var(--uy-color-surface-form-high-read-only);
1479
+ --color-surface-form-high-error: var(--uy-color-surface-form-high-error);
1480
+ --color-surface-inverted: var(--uy-color-surface-inverted);
1481
+ --color-surface-inverted-enabled: var(--uy-color-surface-inverted-enabled);
1482
+ --color-surface-inverted-hover: var(--uy-color-surface-inverted-hover);
1483
+ --color-surface-inverted-pressed: var(--uy-color-surface-inverted-pressed);
1484
+ --color-surface-inverted-focus: var(--uy-color-surface-inverted-focus);
1485
+ --color-surface-inverted-active: var(--uy-color-surface-inverted-active);
1486
+ --color-surface-decorative-teal: var(--uy-color-surface-decorative-teal);
1487
+ --color-surface-decorative-teal-high: var(--uy-color-surface-decorative-teal-high);
1488
+ --color-surface-decorative-teal-low: var(--uy-color-surface-decorative-teal-low);
1489
+ --color-surface-decorative-teal-lowest: var(--uy-color-surface-decorative-teal-lowest);
1490
+ --color-surface-decorative-purple-high: var(--uy-color-surface-decorative-purple-high);
1491
+ --color-surface-decorative-purple: var(--uy-color-surface-decorative-purple);
1492
+ --color-surface-decorative-purple-low: var(--uy-color-surface-decorative-purple-low);
1493
+ --color-surface-decorative-purple-lowest: var(--uy-color-surface-decorative-purple-lowest);
1494
+ --color-surface-decorative-plum: var(--uy-color-surface-decorative-plum);
1495
+ --color-surface-decorative-plum-high: var(--uy-color-surface-decorative-plum-high);
1496
+ --color-surface-decorative-plum-low: var(--uy-color-surface-decorative-plum-low);
1497
+ --color-surface-decorative-plum-lowest: var(--uy-color-surface-decorative-plum-lowest);
1498
+ --color-surface-decorative-orange: var(--uy-color-surface-decorative-orange);
1499
+ --color-surface-decorative-orange-high: var(--uy-color-surface-decorative-orange-high);
1500
+ --color-surface-decorative-orange-low: var(--uy-color-surface-decorative-orange-low);
1501
+ --color-surface-decorative-orange-lowest: var(--uy-color-surface-decorative-orange-lowest);
1502
+ --color-content-primary: var(--uy-color-content-primary);
1503
+ --color-content-primary-enabled: var(--uy-color-content-primary-enabled);
1504
+ --color-content-primary-hover: var(--uy-color-content-primary-hover);
1505
+ --color-content-primary-pressed: var(--uy-color-content-primary-pressed);
1506
+ --color-content-primary-focus: var(--uy-color-content-primary-focus);
1507
+ --color-content-primary-active: var(--uy-color-content-primary-active);
1508
+ --color-content-primary-disabled: var(--uy-color-content-primary-disabled);
1509
+ --color-content-primary-high: var(--uy-color-content-primary-high);
1510
+ --color-content-neutral: var(--uy-color-content-neutral);
1511
+ --color-content-neutral-enabled: var(--uy-color-content-neutral-enabled);
1512
+ --color-content-neutral-hover: var(--uy-color-content-neutral-hover);
1513
+ --color-content-neutral-pressed: var(--uy-color-content-neutral-pressed);
1514
+ --color-content-neutral-focus: var(--uy-color-content-neutral-focus);
1515
+ --color-content-neutral-active: var(--uy-color-content-neutral-active);
1516
+ --color-content-neutral-disabled: var(--uy-color-content-neutral-disabled);
1517
+ --color-content-neutral-low: var(--uy-color-content-neutral-low);
1518
+ --color-content-neutral-lowest: var(--uy-color-content-neutral-lowest);
1519
+ --color-content-neutral-lowest-enabled: var(--uy-color-content-neutral-lowest-enabled);
1520
+ --color-content-neutral-lowest-hover: var(--uy-color-content-neutral-lowest-hover);
1521
+ --color-content-neutral-lowest-pressed: var(--uy-color-content-neutral-lowest-pressed);
1522
+ --color-content-neutral-lowest-focus: var(--uy-color-content-neutral-lowest-focus);
1523
+ --color-content-neutral-lowest-active: var(--uy-color-content-neutral-lowest-active);
1524
+ --color-content-neutral-lowest-disabled: var(--uy-color-content-neutral-lowest-disabled);
1525
+ --color-content-danger: var(--uy-color-content-danger);
1526
+ --color-content-danger-enabled: var(--uy-color-content-danger-enabled);
1527
+ --color-content-danger-hover: var(--uy-color-content-danger-hover);
1528
+ --color-content-danger-pressed: var(--uy-color-content-danger-pressed);
1529
+ --color-content-danger-focus: var(--uy-color-content-danger-focus);
1530
+ --color-content-danger-active: var(--uy-color-content-danger-active);
1531
+ --color-content-danger-disabled: var(--uy-color-content-danger-disabled);
1532
+ --color-content-danger-high: var(--uy-color-content-danger-high);
1533
+ --color-content-warning: var(--uy-color-content-warning);
1534
+ --color-content-warning-enabled: var(--uy-color-content-warning-enabled);
1535
+ --color-content-warning-hover: var(--uy-color-content-warning-hover);
1536
+ --color-content-warning-pressed: var(--uy-color-content-warning-pressed);
1537
+ --color-content-warning-focus: var(--uy-color-content-warning-focus);
1538
+ --color-content-warning-active: var(--uy-color-content-warning-active);
1539
+ --color-content-warning-disabled: var(--uy-color-content-warning-disabled);
1540
+ --color-content-warning-high: var(--uy-color-content-warning-high);
1541
+ --color-content-success: var(--uy-color-content-success);
1542
+ --color-content-success-enabled: var(--uy-color-content-success-enabled);
1543
+ --color-content-success-hover: var(--uy-color-content-success-hover);
1544
+ --color-content-success-pressed: var(--uy-color-content-success-pressed);
1545
+ --color-content-success-focus: var(--uy-color-content-success-focus);
1546
+ --color-content-success-active: var(--uy-color-content-success-active);
1547
+ --color-content-success-disabled: var(--uy-color-content-success-disabled);
1548
+ --color-content-success-high: var(--uy-color-content-success-high);
1549
+ --color-content-info: var(--uy-color-content-info);
1550
+ --color-content-info-enabled: var(--uy-color-content-info-enabled);
1551
+ --color-content-info-hover: var(--uy-color-content-info-hover);
1552
+ --color-content-info-pressed: var(--uy-color-content-info-pressed);
1553
+ --color-content-info-focus: var(--uy-color-content-info-focus);
1554
+ --color-content-info-active: var(--uy-color-content-info-active);
1555
+ --color-content-info-disabled: var(--uy-color-content-info-disabled);
1556
+ --color-content-info-high: var(--uy-color-content-info-high);
1557
+ --color-content-promo: var(--uy-color-content-promo);
1558
+ --color-content-promo-high: var(--uy-color-content-promo-high);
1559
+ --color-content-form-enabled: var(--uy-color-content-form-enabled);
1560
+ --color-content-form-hover: var(--uy-color-content-form-hover);
1561
+ --color-content-form-pressed: var(--uy-color-content-form-pressed);
1562
+ --color-content-form-focus: var(--uy-color-content-form-focus);
1563
+ --color-content-form-active: var(--uy-color-content-form-active);
1564
+ --color-content-form-selected: var(--uy-color-content-form-selected);
1565
+ --color-content-form-disabled: var(--uy-color-content-form-disabled);
1566
+ --color-content-form-read-only: var(--uy-color-content-form-read-only);
1567
+ --color-content-form-invalid: var(--uy-color-content-form-invalid);
1568
+ --color-content-inverted: var(--uy-color-content-inverted);
1569
+ --color-content-inverted-enabled: var(--uy-color-content-inverted-enabled);
1570
+ --color-content-inverted-hover: var(--uy-color-content-inverted-hover);
1571
+ --color-content-inverted-pressed: var(--uy-color-content-inverted-pressed);
1572
+ --color-content-inverted-focus: var(--uy-color-content-inverted-focus);
1573
+ --color-content-inverted-active: var(--uy-color-content-inverted-active);
1574
+ --color-content-inverted-disabled: var(--uy-color-content-inverted-disabled);
1575
+ --color-content-decorative-teal: var(--uy-color-content-decorative-teal);
1576
+ --color-content-decorative-teal-high: var(--uy-color-content-decorative-teal-high);
1577
+ --color-content-decorative-purple: var(--uy-color-content-decorative-purple);
1578
+ --color-content-decorative-purple-high: var(--uy-color-content-decorative-purple-high);
1579
+ --color-content-decorative-plum: var(--uy-color-content-decorative-plum);
1580
+ --color-content-decorative-plum-high: var(--uy-color-content-decorative-plum-high);
1581
+ --color-content-decorative-orange: var(--uy-color-content-decorative-orange);
1582
+ --color-content-decorative-orange-high: var(--uy-color-content-decorative-orange-high);
1583
+ --color-border-primary: var(--uy-color-border-primary);
1584
+ --color-border-primary-enabled: var(--uy-color-border-primary-enabled);
1585
+ --color-border-primary-hover: var(--uy-color-border-primary-hover);
1586
+ --color-border-primary-pressed: var(--uy-color-border-primary-pressed);
1587
+ --color-border-primary-focus: var(--uy-color-border-primary-focus);
1588
+ --color-border-primary-active: var(--uy-color-border-primary-active);
1589
+ --color-border-primary-disabled: var(--uy-color-border-primary-disabled);
1590
+ --color-border-primary-lowest: var(--uy-color-border-primary-lowest);
1591
+ --color-border-neutral-high: var(--uy-color-border-neutral-high);
1592
+ --color-border-neutral-high-enabled: var(--uy-color-border-neutral-high-enabled);
1593
+ --color-border-neutral-high-hover: var(--uy-color-border-neutral-high-hover);
1594
+ --color-border-neutral-high-pressed: var(--uy-color-border-neutral-high-pressed);
1595
+ --color-border-neutral-high-focus: var(--uy-color-border-neutral-high-focus);
1596
+ --color-border-neutral-high-active: var(--uy-color-border-neutral-high-active);
1597
+ --color-border-neutral-high-disabled: var(--uy-color-border-neutral-high-disabled);
1598
+ --color-border-neutral: var(--uy-color-border-neutral);
1599
+ --color-border-neutral-enabled: var(--uy-color-border-neutral-enabled);
1600
+ --color-border-neutral-hover: var(--uy-color-border-neutral-hover);
1601
+ --color-border-neutral-active: var(--uy-color-border-neutral-active);
1602
+ --color-border-neutral-pressed: var(--uy-color-border-neutral-pressed);
1603
+ --color-border-neutral-selected: var(--uy-color-border-neutral-selected);
1604
+ --color-border-neutral-disabled: var(--uy-color-border-neutral-disabled);
1605
+ --color-border-neutral-low: var(--uy-color-border-neutral-low);
1606
+ --color-border-danger: var(--uy-color-border-danger);
1607
+ --color-border-danger-lowest: var(--uy-color-border-danger-lowest);
1608
+ --color-border-warning: var(--uy-color-border-warning);
1609
+ --color-border-warning-lowest: var(--uy-color-border-warning-lowest);
1610
+ --color-border-success: var(--uy-color-border-success);
1611
+ --color-border-success-low: var(--uy-color-border-success-low);
1612
+ --color-border-success-lowest: var(--uy-color-border-success-lowest);
1613
+ --color-border-info: var(--uy-color-border-info);
1614
+ --color-border-info-lowest: var(--uy-color-border-info-lowest);
1615
+ --color-border-promo: var(--uy-color-border-promo);
1616
+ --color-border-promo-lowest: var(--uy-color-border-promo-lowest);
1617
+ --color-border-form-enabled: var(--uy-color-border-form-enabled);
1618
+ --color-border-form-hover: var(--uy-color-border-form-hover);
1619
+ --color-border-form-pressed: var(--uy-color-border-form-pressed);
1620
+ --color-border-form-focus: var(--uy-color-border-form-focus);
1621
+ --color-border-form-active: var(--uy-color-border-form-active);
1622
+ --color-border-form-selected: var(--uy-color-border-form-selected);
1623
+ --color-border-form-disabled: var(--uy-color-border-form-disabled);
1624
+ --color-border-form-read-only: var(--uy-color-border-form-read-only);
1625
+ --color-border-form-error: var(--uy-color-border-form-error);
1626
+ --color-border-inverted: var(--uy-color-border-inverted);
1627
+ --color-border-inverted-enabled: var(--uy-color-border-inverted-enabled);
1628
+ --color-border-inverted-hover: var(--uy-color-border-inverted-hover);
1629
+ --color-border-inverted-pressed: var(--uy-color-border-inverted-pressed);
1630
+ --color-border-inverted-focus: var(--uy-color-border-inverted-focus);
1631
+ --color-border-inverted-active: var(--uy-color-border-inverted-active);
1632
+ --color-border-inverted-disabled: var(--uy-color-border-inverted-disabled);
1633
+ --color-border-inverted-high: var(--uy-color-border-inverted-high);
1634
+ --color-utility-focus-ring: var(--uy-color-utility-focus-ring);
1635
+ --color-utility-inverted-focus-ring: var(--uy-color-utility-inverted-focus-ring);
1636
+ --color-utility-backdrop: var(--uy-color-utility-backdrop);
1637
+ --color-utility-shadow-100: var(--uy-color-utility-shadow-100);
1638
+ --color-utility-shadow-200: var(--uy-color-utility-shadow-200);
1639
+ --color-utility-shadow-300: var(--uy-color-utility-shadow-300);
1640
+ --color-utility-shadow-400: var(--uy-color-utility-shadow-400);
1641
+ --color-utility-shadow-500: var(--uy-color-utility-shadow-500);
1642
+ --color-utility-shadow-600: var(--uy-color-utility-shadow-600);
1643
+ --shadow-100: var(--uy-shadow-100);
1644
+ --shadow-200: var(--uy-shadow-200);
1645
+ --shadow-300: var(--uy-shadow-300);
1646
+ --shadow-400: var(--uy-shadow-400);
1647
+ --shadow-500: var(--uy-shadow-500);
1648
+ --shadow-600: var(--uy-shadow-600);
1649
+ --shadow-canvas: var(--uy-shadow-canvas);
1650
+ --shadow-raising: var(--uy-shadow-raising);
1651
+ --shadow-floating: var(--uy-shadow-floating);
1652
+ --shadow-levitating: var(--uy-shadow-levitating);
1653
+ --shadow-flying: var(--uy-shadow-flying);
1654
+ --shadow-soaring: var(--uy-shadow-soaring);
1655
+ --shadow-summit: var(--uy-shadow-summit);
1656
+ --font-serif: var(--uy-font-serif);
1657
+ --font-sans: var(--uy-font-sans);
1658
+ --font-mono: var(--uy-font-mono);
1659
+ --typography-default-display-heading: var(--uy-typography-default-display-heading);
1660
+ --typography-sm-display-heading: var(--uy-typography-sm-display-heading);
1661
+ --typography-default-h1: var(--uy-typography-default-h1);
1662
+ --typography-sm-h1: var(--uy-typography-sm-h1);
1663
+ --typography-default-h2: var(--uy-typography-default-h2);
1664
+ --typography-sm-h2: var(--uy-typography-sm-h2);
1665
+ --typography-default-h3: var(--uy-typography-default-h3);
1666
+ --typography-sm-h3: var(--uy-typography-sm-h3);
1667
+ --typography-default-h4: var(--uy-typography-default-h4);
1668
+ --typography-sm-h4: var(--uy-typography-sm-h4);
1669
+ --typography-default-overline: var(--uy-typography-default-overline);
1670
+ --typography-sm-overline: var(--uy-typography-sm-overline);
1671
+ --typography-default-subtitle: var(--uy-typography-default-subtitle);
1672
+ --typography-sm-subtitle: var(--uy-typography-sm-subtitle);
1673
+ --typography-default-display-title: var(--uy-typography-default-display-title);
1674
+ --typography-sm-display-title: var(--uy-typography-sm-display-title);
1675
+ --typography-default-display-body: var(--uy-typography-default-display-body);
1676
+ --typography-sm-display-body: var(--uy-typography-sm-display-body);
1677
+ --typography-default-body: var(--uy-typography-default-body);
1678
+ --typography-sm-body: var(--uy-typography-sm-body);
1679
+ --typography-default-body-strong: var(--uy-typography-default-body-strong);
1680
+ --typography-sm-body-strong: var(--uy-typography-sm-body-strong);
1681
+ --typography-default-body-small: var(--uy-typography-default-body-small);
1682
+ --typography-sm-body-small: var(--uy-typography-sm-body-small);
1683
+ --typography-default-body-small-strong: var(--uy-typography-default-body-small-strong);
1684
+ --typography-sm-body-small-strong: var(--uy-typography-sm-body-small-strong);
1685
+ --typography-default-body-large: var(--uy-typography-default-body-large);
1686
+ --typography-sm-body-large: var(--uy-typography-sm-body-large);
1687
+ --typography-default-body-large-strong: var(--uy-typography-default-body-large-strong);
1688
+ --typography-sm-body-large-strong: var(--uy-typography-sm-body-large-strong);
1689
+ --typography-default-action: var(--uy-typography-default-action);
1690
+ --typography-sm-action: var(--uy-typography-sm-action);
1691
+ --typography-default-action-small: var(--uy-typography-default-action-small);
1692
+ --typography-sm-action-small: var(--uy-typography-sm-action-small);
1693
+ --typography-default-action-large: var(--uy-typography-default-action-large);
1694
+ --typography-sm-action-large: var(--uy-typography-sm-action-large);
588
1695
  }
589
1696
 
590
1697
  @utility grid-layout {
@@ -611,6 +1718,9 @@
611
1718
  }
612
1719
  }
613
1720
 
1721
+ @custom-variant theme-legacy (&:where([data-uy-theme="legacy"], [data-uy-theme="legacy"] *));
1722
+ @custom-variant theme-rebrand (&:where([data-uy-theme="rebrand"], [data-uy-theme="rebrand"] *));
1723
+
614
1724
 
615
1725
  @keyframes spin {
616
1726
  0% {