Nebula UI
Introduction
IconLabelColorsTypography
Button
AlertBadgeBannerLoaderFeedbackProgress BarEmptyTooltipCarousel
HeaderNavbarSidebarTabsPaginationBreadcrumbSeparator
AvatarModule BoxChartsColor CardsTableCarouselCalendar
Text InputPassword InputTextarea InputCheckboxSwitchRadiogroupSelectorSearch BarDatepickerFile UploadTile
DropdownPopoverDialogTourDrawerAccordionExpansion Panel
Overview
Design Themes

Nebula UI Library

v1.0.0

Component

Nebula UI

Librería de componentes multi-marca para el ecosistema Nave. Construida con React, Design Tokens y una arquitectura que permite escalar experiencias visuales consistentes en todas las marcas.

¿Qué es Nebula UI?

📦

Multi-marca

Un solo set de componentes que se adapta a cualquier marca del ecosistema mediante Design Tokens.

⚛️

React & React Native

Componentes disponibles para web y mobile con la misma API y tokens compartidos.

🎨

Design Tokens

Colores, tipografía, espaciados y radios definidos en un esquema JSON estandarizado por marca.

Instalación

Agregá la librería a tu proyecto:

Bash
1npm install nave-ui-library

Quick Start

Importá los estilos globales, el ThemeProvider y los componentes que necesites:

TypeScript
1import 'nave-ui-library/styles.css'
2import { ThemeProvider, Button, Input } from 'nave-ui-library/react'
3 
4export default function App() {
5 return (
6 <ThemeProvider channelId="nave">
7 <div className="p-8 space-y-4">
8 <Button variant="primary">Confirmar</Button>
9 <Input placeholder="Ingresá tu email" />
10 </div>
11 </ThemeProvider>
12 )
13}

El ThemeProvider inyecta los tokens de la marca seleccionada a todos los componentes hijos. Podés usar channelId o pasar un objeto theme custom.

Plataformas soportadas

W

React (Web)

Next.js, Vite, CRA

M

React Native

Expo, CLI, NativeWind

Multi-Marca en acción

Seleccioná una marca para ver cómo se reconfigura todo el sistema visual en tiempo real. Los mismos componentes, distinta identidad.

Acciones

Feedback

Branded Badge

Formularios

Superficies

Live Preview

Marca activa: Nave

Arquitectura

El sistema utiliza Design Tokens como capa de abstracción entre la identidad de marca y los componentes. Al cambiar de marca, se intercambian los tokens sin modificar el código de los componentes.

Tokens

Colores, tipografía, espaciados y radios se definen por marca en un esquema JSON.

Componentes

Cada componente consume los tokens activos automáticamente vía ThemeProvider.

Tokens: Nave

Esquema JSON del tema activo. Estos valores alimentan todos los componentes.

JSON
1{
2 "meta": {
3 "theme": "default-v-4.0.1"
4 },
5 "foundations": {
6 "colors": {
7 "brand": {
8 "50": "#F6F2FD",
9 "100": "#E6DCFA",
10 "200": "#F4F0FF",
11 "300": "#A78BFA",
12 "500": "#652BDF",
13 "700": "#3C168E",
14 "900": "#1E0A52"
15 },
16 "neutral": {
17 "0": "#FFFFFF",
18 "50": "#F9FAFB",
19 "100": "#F3F4F6",
20 "125": "#F0F0F0",
21 "150": "#E2E5E9",
22 "175": "#ECEAF3",
23 "200": "#E5E7EB",
24 "225": "#EEF2F7",
25 "300": "#D1D5DB",
26 "350": "#C3C7D1",
27 "400": "#9CA3AF",
28 "450": "#A3AAB8",
29 "500": "#6B7280",
30 "550": "#9DA5B5",
31 "575": "#838CA0",
32 "600": "#4B5563",
33 "650": "#6E7991",
34 "700": "#374151",
35 "750": "#3A3F4B",
36 "800": "#1F2937",
37 "850": "#020303",
38 "900": "#111827",
39 "950": "#F9F9FA"
40 },
41 "feedback": {
42 "success": {
43 "50": "#F2FDF8",
44 "500": "#16A34A",
45 "700": "#128751"
46 },
47 "warning": {
48 "50": "#FEFAF0",
49 "100": "#FEF3C7",
50 "500": "#F59E0B",
51 "700": "#C26E04"
52 },
53 "error": {
54 "50": "#FEEEEB",
55 "100": "#FEF2F2",
56 "500": "#DC2626",
57 "600": "#FB3131",
58 "700": "#C2040C",
59 "800": "#FECFCD"
60 },
61 "info": {
62 "50": "#F0F5FE",
63 "500": "#2563EB",
64 "700": "#0465C2"
65 }
66 }
67 },
68 "typography": {
69 "fontFamily": {
70 "base": "\"Inter\", Arial, Helvetica, sans-serif"
71 },
72 "size": {
73 "10": "10px",
74 "12": "12px",
75 "13": "13px",
76 "14": "14px",
77 "16": "16px",
78 "18": "18px",
79 "20": "20px",
80 "24": "24px",
81 "30": "30px",
82 "32": "32px"
83 },
84 "weight": {
85 "400": 400,
86 "500": 500,
87 "550": 550,
88 "600": 600,
89 "700": 700
90 },
91 "lineHeight": {
92 "130": "130%",
93 "tight": "1.2",
94 "normal": "1.4",
95 "relaxed": "1.6"
96 },
97 "letterSpacing": {
98 "normal": "0",
99 "tight": "-0.02em",
100 "tighter": "-0.04em"
101 }
102 },
103 "spacing": {
104 "0": "0px",
105 "1": "4px",
106 "2": "8px",
107 "3": "12px",
108 "4": "16px",
109 "5": "20px",
110 "6": "24px",
111 "7": "28px",
112 "8": "32px",
113 "9": "36px",
114 "10": "40px",
115 "11": "44px",
116 "12": "48px",
117 "13": "52px",
118 "14": "56px",
119 "16": "64px",
120 "18": "72px",
121 "28": "112px",
122 "60": "240px",
123 "0.5": "2px",
124 "1.25": "5px",
125 "1.5": "6px",
126 "1.75": "7px",
127 "2.5": "10px",
128 "4.5": "18px",
129 "6.5": "26px",
130 "8.5": "34px"
131 },
132 "maxWidth": {
133 "compact": "360px",
134 "full": "1184px",
135 "container": "1440px",
136 "dashboardMain": "767px",
137 "dashboardRight": "337px",
138 "dashboardAccred": "347px",
139 "sidebar": "240px",
140 "dropdown": "12rem",
141 "containerExpansionPanelMedium": "100%",
142 "containerExpansionPanelSmall": "343px",
143 "feedbackSmallMaxWidth": "343px",
144 "feedbackMidiumMaxWidth": "343px",
145 "feedbackMidiumImgMaxWidth": "160px",
146 "feedbackSmallImgMaxWidth": "120px"
147 },
148 "minWidth": {
149 "feedback": "280px"
150 },
151 "radius": {
152 "none": "0px",
153 "xs": "2px",
154 "sm": "6px",
155 "md": "8px",
156 "lg": "12px",
157 "xl": "16px",
158 "2xl": "18px",
159 "full": "9999px"
160 },
161 "shadow": {
162 "none": "none",
163 "xs": "0 1px 2px rgba(0,0,0,0.04)",
164 "sm": "0 1px 3px rgba(0,0,0,0.08)",
165 "md": "0 4px 12px rgba(0,0,0,0.1)",
166 "lg": "0 8px 24px rgba(0,0,0,0.12)",
167 "focus": "0px 0px 0px 4px",
168 "focusSm": "0px 0px 0px 2px",
169 "dropdown": "0px 2px 4px -1px rgba(0,0,0,0.06), 0px 4px 6px -1px rgba(0,0,0,0.1)",
170 "drawer": "0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 6px 12px -4px rgba(0, 0, 0, 0.1)"
171 },
172 "border": {
173 "width": {
174 "0": "0",
175 "1": "1px",
176 "2": "2px",
177 "4": "4px"
178 }
179 },
180 "motion": {
181 "duration": {
182 "fast": "120ms",
183 "normal": "200ms",
184 "slow": "300ms"
185 },
186 "easing": {
187 "in": "ease-in",
188 "out": "ease-out",
189 "inOut": "ease-in-out",
190 "standard": "cubic-bezier(0.2, 0, 0, 1)"
191 }
192 },
193 "opacity": {
194 "disabled": 0.4,
195 "muted": 0.7,
196 "overlay": 0.5
197 },
198 "zIndex": {
199 "base": 1,
200 "dropdown": 1000,
201 "modal": 1100,
202 "overlay": 1200,
203 "toast": 1300,
204 "tooltip": 1400
205 },
206 "other": {
207 "backdropBlur": "4px",
208 "chartHeight": 260,
209 "chartCategoryGap": "16%",
210 "chartCurveType": "monotone",
211 "fontFamilyInherit": "inherit",
212 "fontStyleNormal": "normal",
213 "overlayBackground": "rgba(0,0,0,{foundations.opacity.overlay})",
214 "cursor": {
215 "grab": "grab",
216 "grabbing": "grabbing"
217 },
218 "borderStyle": {
219 "dashed": "dashed"
220 },
221 "scrollBehavior": "smooth",
222 "maxHeight": "80vh",
223 "transparent": "transparent",
224 "auto": "auto"
225 }
226 },
227 "semanticTokens": {
228 "text": {
229 "primary": "{foundations.colors.neutral.900}",
230 "secondary": "{foundations.colors.neutral.700}",
231 "muted": "{foundations.colors.neutral.500}",
232 "inverse": "{foundations.colors.neutral.0}"
233 },
234 "surface": {
235 "default": "{foundations.colors.neutral.0}",
236 "muted": "{foundations.colors.neutral.50}",
237 "hover": "{foundations.colors.neutral.100}",
238 "selected": "{foundations.colors.brand.50}"
239 },
240 "border": {
241 "default": "{foundations.colors.neutral.200}",
242 "focus": "{foundations.colors.brand.500}",
243 "subtle": "{foundations.colors.neutral.100}"
244 },
245 "action": {
246 "primary": "{foundations.colors.brand.500}",
247 "primaryHover": "{foundations.colors.brand.700}",
248 "secondary": "{foundations.colors.neutral.100}",
249 "disabled": "{foundations.colors.neutral.300}"
250 },
251 "feedback": {
252 "success": {
253 "bg": "{foundations.colors.feedback.success.50}",
254 "text": "{foundations.colors.feedback.success.700}",
255 "border": "{foundations.colors.feedback.success.500}",
256 "iconBg": "{semanticTokens.surface.muted}",
257 "action": "{semanticTokens.text.primary}"
258 },
259 "error": {
260 "bg": "{foundations.colors.feedback.error.50}",
261 "text": "{foundations.colors.feedback.error.700}",
262 "border": "{foundations.colors.feedback.error.500}"
263 },
264 "warning": {
265 "bg": "{foundations.colors.feedback.warning.50}",
266 "text": "{foundations.colors.feedback.warning.700}",
267 "border": "{foundations.colors.feedback.warning.500}"
268 },
269 "info": {
270 "bg": "{foundations.colors.feedback.info.50}",
271 "text": "{foundations.colors.feedback.info.700}",
272 "border": "{foundations.colors.feedback.info.500}"
273 }
274 },
275 "state": {
276 "disabled": {
277 "bg": "{foundations.colors.neutral.200}",
278 "text": "{foundations.colors.neutral.400}",
279 "border": "{foundations.colors.neutral.300}"
280 }
281 }
282 },
283 "components": {
284 "button": {
285 "base": {
286 "radius": "{foundations.radius.md}",
287 "fontFamily": "{foundations.typography.fontFamily.base}",
288 "fontWeight": "{foundations.typography.weight.400}",
289 "lineHeight": "{foundations.typography.lineHeight.130}",
290 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
291 "transition": "{foundations.motion.duration.fast}",
292 "display": "inline-flex",
293 "alignItems": "center",
294 "justifyContent": "center",
295 "gap": "{foundations.spacing.2}",
296 "outline": "none"
297 },
298 "sizes": {
299 "small": {
300 "height": "{foundations.spacing.9}",
301 "paddingX": "{foundations.spacing.[\"2.5\"]}",
302 "fontSize": "{foundations.typography.size.14}",
303 "fontWeight": "{foundations.typography.weight.550}",
304 "iconSize": "{foundations.typography.size.16}"
305 },
306 "medium": {
307 "height": "{foundations.spacing.10}",
308 "paddingX": "{foundations.spacing.3}",
309 "fontSize": "{foundations.typography.size.14}",
310 "fontWeight": "{foundations.typography.weight.550}",
311 "iconSize": "{foundations.typography.size.16}"
312 },
313 "large": {
314 "height": "{foundations.spacing.11}",
315 "paddingX": "{foundations.spacing.4}",
316 "fontSize": "{foundations.typography.size.16}",
317 "fontWeight": "{foundations.typography.weight.550}",
318 "iconSize": "{foundations.typography.size.20}"
319 }
320 },
321 "variants": {
322 "primary": {
323 "background": "{foundations.colors.brand.500}",
324 "color": "{foundations.colors.neutral.0}",
325 "hover": {
326 "background": "{foundations.colors.brand.700}"
327 },
328 "focus": {
329 "boxShadow": "{foundations.shadow.focus} {foundations.colors.brand.500}"
330 },
331 "disabled": {
332 "background": "{foundations.colors.neutral.150}",
333 "color": "{foundations.colors.neutral.450}"
334 },
335 "loading": {
336 "background": "{foundations.colors.brand.500}",
337 "color": "{foundations.colors.neutral.0}"
338 }
339 },
340 "secondary": {
341 "background": "{foundations.colors.neutral.0}",
342 "color": "{foundations.colors.brand.500}",
343 "border": "{foundations.border.width.1} solid {foundations.colors.brand.100}",
344 "hover": {
345 "background": "{foundations.colors.brand.100}",
346 "color": "{foundations.colors.brand.700}"
347 },
348 "focus": {
349 "boxShadow": "{foundations.shadow.focus} {foundations.colors.brand.500}"
350 },
351 "disabled": {
352 "background": "{foundations.other.transparent}",
353 "color": "{foundations.colors.neutral.450}",
354 "border": "{foundations.colors.neutral.150}"
355 },
356 "loading": {
357 "background": "{foundations.colors.neutral.0}",
358 "color": "{foundations.colors.brand.500}",
359 "border": "{foundations.colors.brand.100}"
360 }
361 },
362 "tertiary": {
363 "background": "{foundations.other.transparent}",
364 "color": "{foundations.colors.brand.500}",
365 "hover": {
366 "background": "{foundations.other.transparent}",
367 "color": "{foundations.colors.brand.700}"
368 },
369 "focus": {
370 "boxShadow": "{foundations.shadow.focus} {foundations.colors.brand.500}",
371 "color": "{foundations.colors.brand.500}"
372 },
373 "disabled": {
374 "color": "{foundations.colors.neutral.450}",
375 "background": "{foundations.other.transparent}"
376 },
377 "loading": {
378 "color": "{foundations.colors.brand.500}",
379 "background": "{foundations.other.transparent}"
380 }
381 },
382 "neutral": {
383 "background": "{foundations.colors.neutral.0}",
384 "color": "{foundations.colors.neutral.850}",
385 "border": "{foundations.border.width.1} solid {foundations.colors.neutral.150}",
386 "hover": {
387 "background": "{foundations.colors.neutral.100}",
388 "color": "{foundations.colors.neutral.850}"
389 },
390 "focus": {
391 "boxShadow": "{foundations.shadow.focus} {foundations.colors.neutral.500}",
392 "color": "{foundations.colors.neutral.500}"
393 },
394 "disabled": {
395 "color": "{foundations.colors.neutral.450}",
396 "background": "{foundations.colors.neutral.0}"
397 }
398 }
399 },
400 "tones": {
401 "brand": {
402 "variants": {
403 "primary": {
404 "background": "{foundations.colors.brand.500}",
405 "color": "{foundations.colors.neutral.0}",
406 "hover": {
407 "background": "{foundations.colors.brand.700}"
408 },
409 "focus": {
410 "boxShadow": "{foundations.shadow.focus} {foundations.colors.brand.500}"
411 },
412 "loading": {
413 "background": "{foundations.colors.brand.500}",
414 "color": "{foundations.colors.neutral.0}"
415 },
416 "disabled": {
417 "background": "{foundations.colors.neutral.150}",
418 "color": "{foundations.colors.neutral.450}"
419 }
420 },
421 "secondary": {
422 "background": "{foundations.colors.neutral.0}",
423 "color": "{foundations.colors.brand.500}",
424 "border": "{foundations.border.width.1} solid {foundations.colors.brand.100}",
425 "hover": {
426 "background": "{foundations.colors.brand.100}",
427 "color": "{foundations.colors.brand.700}"
428 },
429 "focus": {
430 "boxShadow": "{foundations.shadow.focus} {foundations.colors.brand.500}"
431 },
432 "loading": {
433 "background": "{foundations.colors.neutral.0}",
434 "color": "{foundations.colors.brand.500}",
435 "border": "{foundations.colors.brand.100}"
436 },
437 "disabled": {
438 "background": "{foundations.other.transparent}",
439 "color": "{foundations.colors.neutral.450}",
440 "border": "{foundations.colors.neutral.150}"
441 }
442 },
443 "tertiary": {
444 "background": "{foundations.other.transparent}",
445 "color": "{foundations.colors.brand.500}",
446 "hover": {
447 "background": "{foundations.other.transparent}",
448 "color": "{foundations.colors.brand.700}"
449 },
450 "focus": {
451 "boxShadow": "{foundations.shadow.focus} {foundations.colors.brand.500}"
452 },
453 "loading": {
454 "color": "{foundations.colors.brand.500}",
455 "background": "{foundations.other.transparent}"
456 },
457 "disabled": {
458 "color": "{foundations.colors.neutral.450}",
459 "background": "{foundations.other.transparent}"
460 }
461 }
462 }
463 },
464 "neutral": {
465 "variants": {
466 "primary": {
467 "background": "{foundations.colors.neutral.850}",
468 "color": "{foundations.colors.neutral.0}",
469 "hover": {
470 "background": "{foundations.colors.neutral.750}"
471 },
472 "focus": {
473 "boxShadow": "{foundations.shadow.focus} {foundations.colors.neutral.500}"
474 },
475 "loading": {
476 "background": "{foundations.colors.neutral.850}",
477 "color": "{foundations.colors.neutral.0}"
478 },
479 "disabled": {
480 "background": "{foundations.colors.neutral.150}",
481 "color": "{foundations.colors.neutral.450}"
482 }
483 },
484 "secondary": {
485 "background": "{foundations.colors.neutral.0}",
486 "color": "{foundations.colors.neutral.850}",
487 "border": "{foundations.border.width.1} solid {foundations.colors.neutral.350}",
488 "hover": {
489 "background": "{foundations.colors.neutral.100}",
490 "color": "{foundations.colors.neutral.850}"
491 },
492 "focus": {
493 "boxShadow": "{foundations.shadow.focus} {foundations.colors.neutral.500}"
494 },
495 "loading": {
496 "background": "{foundations.colors.neutral.0}",
497 "color": "{foundations.colors.neutral.850}",
498 "border": "{foundations.colors.neutral.350}"
499 },
500 "disabled": {
501 "background": "{foundations.other.transparent}",
502 "color": "{foundations.colors.neutral.450}",
503 "border": "{foundations.colors.neutral.150}"
504 }
505 },
506 "tertiary": {
507 "background": "{foundations.other.transparent}",
508 "color": "{foundations.colors.neutral.750}",
509 "hover": {
510 "background": "{foundations.other.transparent}",
511 "color": "{foundations.colors.neutral.850}"
512 },
513 "focus": {
514 "boxShadow": "{foundations.shadow.focus} {foundations.colors.neutral.500}"
515 },
516 "loading": {
517 "color": "{foundations.colors.neutral.750}",
518 "background": "{foundations.other.transparent}"
519 },
520 "disabled": {
521 "color": "{foundations.colors.neutral.450}",
522 "background": "{foundations.other.transparent}"
523 }
524 }
525 }
526 },
527 "destructive": {
528 "variants": {
529 "primary": {
530 "background": "{foundations.colors.feedback.error.700}",
531 "color": "{foundations.colors.neutral.0}",
532 "hover": {
533 "background": "{foundations.colors.feedback.error.500}"
534 },
535 "focus": {
536 "boxShadow": "{foundations.shadow.focus} {foundations.colors.feedback.error.500}"
537 },
538 "loading": {
539 "background": "{foundations.colors.feedback.error.700}",
540 "color": "{foundations.colors.neutral.0}"
541 },
542 "disabled": {
543 "background": "{foundations.colors.neutral.150}",
544 "color": "{foundations.colors.neutral.450}"
545 }
546 },
547 "secondary": {
548 "background": "{foundations.colors.neutral.0}",
549 "color": "{foundations.colors.feedback.error.700}",
550 "border": "{foundations.border.width.1} solid {foundations.colors.feedback.error.700}",
551 "hover": {
552 "background": "{foundations.colors.feedback.error.50}",
553 "color": "{foundations.colors.feedback.error.700}"
554 },
555 "focus": {
556 "boxShadow": "{foundations.shadow.focus} {foundations.colors.feedback.error.500}"
557 },
558 "loading": {
559 "background": "{foundations.colors.neutral.0}",
560 "color": "{foundations.colors.feedback.error.700}",
561 "border": "{foundations.colors.feedback.error.700}"
562 },
563 "disabled": {
564 "background": "{foundations.other.transparent}",
565 "color": "{foundations.colors.neutral.450}",
566 "border": "{foundations.colors.neutral.150}"
567 }
568 },
569 "tertiary": {
570 "background": "{foundations.other.transparent}",
571 "color": "{foundations.colors.feedback.error.700}",
572 "hover": {
573 "background": "{foundations.other.transparent}",
574 "color": "{foundations.colors.feedback.error.500}"
575 },
576 "focus": {
577 "boxShadow": "{foundations.shadow.focus} {foundations.colors.feedback.error.500}"
578 },
579 "loading": {
580 "color": "{foundations.colors.feedback.error.700}",
581 "background": "{foundations.other.transparent}"
582 },
583 "disabled": {
584 "color": "{foundations.colors.neutral.450}",
585 "background": "{foundations.other.transparent}"
586 }
587 }
588 }
589 }
590 }
591 },
592 "label": {
593 "base": {
594 "fontSize": "{foundations.typography.size.14}",
595 "color": "{semanticTokens.text.primary}",
596 "padding": "{foundations.spacing.2} {foundations.spacing.3}",
597 "fontWeight": "{foundations.typography.weight.500}",
598 "fontFamily": "{foundations.typography.fontFamily.base}",
599 "lineHeight": "{foundations.typography.lineHeight.130}",
600 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
601 }
602 },
603 "input": {
604 "base": {
605 "fontFamily": "{foundations.typography.fontFamily.base}",
606 "lineHeight": "{foundations.typography.lineHeight.130}",
607 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
608 "background": "{foundations.colors.neutral.0}",
609 "boxShadow": "{foundations.shadow.xs}",
610 "color": "{foundations.colors.neutral.850}",
611 "border": "{foundations.border.width.1} solid {foundations.colors.neutral.150}",
612 "radius": "{foundations.radius.md}",
613 "hover": {
614 "color": "{foundations.colors.neutral.850}",
615 "background": "{foundations.colors.neutral.0}",
616 "border": "{foundations.border.width.1} solid {foundations.colors.neutral.350}"
617 },
618 "focus": {
619 "border": "{foundations.border.width.1} solid {foundations.colors.brand.500}",
620 "boxShadow": "{foundations.shadow.focusSm} {foundations.colors.brand.100}",
621 "color": "{foundations.colors.neutral.850}"
622 },
623 "filled": {
624 "color": "{foundations.colors.neutral.850}",
625 "background": "{foundations.colors.neutral.950}",
626 "boxShadow": "{foundations.shadow.xs}"
627 },
628 "disabled": {
629 "background": "{foundations.colors.neutral.150}",
630 "color": "{foundations.colors.neutral.550}",
631 "border": "{foundations.border.width.1} solid {foundations.colors.neutral.350}",
632 "boxShadow": "{foundations.shadow.xs}"
633 },
634 "error": {
635 "background": "{foundations.colors.neutral.0}",
636 "border": "{foundations.border.width.1} solid {foundations.colors.feedback.error.600}",
637 "color": "{foundations.colors.feedback.error.600}",
638 "boxShadow": "{foundations.shadow.xs}",
639 "filled": {
640 "border": "{foundations.border.width.1} solid {foundations.colors.feedback.error.600}",
641 "color": "{foundations.colors.neutral.850}",
642 "boxShadow": "{foundations.shadow.xs}"
643 },
644 "focus": {
645 "border": "{foundations.border.width.1} solid {foundations.colors.feedback.error.600}",
646 "boxShadow": "{foundations.shadow.focusSm} {foundations.colors.feedback.error.800}",
647 "color": "{foundations.colors.neutral.850}"
648 },
649 "hover": {
650 "border": "{foundations.border.width.1} solid {foundations.colors.feedback.error.700}",
651 "boxShadow": "{foundations.shadow.focusSm} {foundations.colors.feedback.error.800}",
652 "color": "{foundations.colors.neutral.850}"
653 }
654 }
655 },
656 "sizes": {
657 "medium": {
658 "height": "{foundations.spacing.11}",
659 "padding": "{foundations.spacing.3}",
660 "labelFontSize": "{foundations.typography.size.14}",
661 "inputFontSize": "{foundations.typography.size.16}",
662 "helperFontSize": "{foundations.typography.size.14}",
663 "labelFontWeight": "{foundations.typography.weight.550}",
664 "inputFontWeight": "{foundations.typography.weight.400}",
665 "helperFontWeight": "{foundations.typography.weight.400}",
666 "labelColor": "{foundations.colors.neutral.850}",
667 "helperColor": "{foundations.colors.neutral.650}",
668 "iconSize": "{foundations.typography.size.16}"
669 },
670 "small": {
671 "height": "{foundations.spacing.8}",
672 "padding": "{foundations.spacing.3} {foundations.spacing.[\"2.5\"]}",
673 "labelFontSize": "{foundations.typography.size.14}",
674 "inputFontSize": "{foundations.typography.size.14}",
675 "helperFontSize": "{foundations.typography.size.14}",
676 "labelFontWeight": "{foundations.typography.weight.550}",
677 "inputFontWeight": "{foundations.typography.weight.400}",
678 "helperFontWeight": "{foundations.typography.weight.400}",
679 "labelColor": "{foundations.colors.neutral.850}",
680 "helperColor": "{foundations.colors.neutral.650}",
681 "iconSize": "{foundations.typography.size.16}"
682 }
683 }
684 },
685 "emptyState": {
686 "base": {
687 "fontFamily": "{foundations.typography.fontFamily.base}",
688 "lineHeight": "{foundations.typography.lineHeight.130}",
689 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
690 "container": {
691 "background": "{foundations.other.transparent}",
692 "paddingY": "{foundations.spacing.6}",
693 "paddingX": "{foundations.spacing.5}",
694 "gap": "{foundations.spacing.6}"
695 },
696 "content": {
697 "gap": "{foundations.spacing.5}"
698 },
699 "icon": {
700 "color": "{foundations.colors.neutral.650}",
701 "containerPadding": "{foundations.spacing.3}"
702 },
703 "text": {
704 "gap": "{foundations.spacing[\"1.5\"]}"
705 },
706 "title": {
707 "color": "{foundations.colors.neutral.850}",
708 "fontWeight": "{foundations.typography.weight.550}"
709 },
710 "description": {
711 "color": "{foundations.colors.neutral.650}",
712 "fontWeight": "{foundations.typography.weight.400}"
713 },
714 "actions": {
715 "gap": "{foundations.spacing.2}"
716 }
717 },
718 "sizes": {
719 "medium": {
720 "minWidth": "280px",
721 "maxWidth": "400px",
722 "iconSize": "{foundations.spacing.6}",
723 "titleSize": "{foundations.typography.size.16}",
724 "descriptionSize": "{foundations.typography.size.16}"
725 },
726 "small": {
727 "minWidth": "280px",
728 "maxWidth": "360px",
729 "iconSize": "{foundations.spacing.4}",
730 "titleSize": "{foundations.typography.size.14}",
731 "descriptionSize": "{foundations.typography.size.14}"
732 }
733 }
734 },
735 "fileUpload": {
736 "base": {
737 "fontFamily": "{foundations.typography.fontFamily.base}",
738 "lineHeight": "{foundations.typography.lineHeight.130}",
739 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
740 "container": {
741 "background": "{foundations.other.transparent}",
742 "padding": "{foundations.spacing.6}"
743 },
744 "dropzone": {
745 "radius": "{foundations.radius.xl}",
746 "borderStyle": "{foundations.other.borderStyle.dashed}",
747 "borderWidth": "{foundations.border.width.1}",
748 "borderColor": "{semanticTokens.border.default}",
749 "paddingX": "{foundations.spacing.10}",
750 "paddingY": "{foundations.spacing.14}",
751 "gap": "{foundations.spacing.4}"
752 },
753 "icon": {
754 "size": "{foundations.typography.size.30}",
755 "color": "{foundations.colors.neutral.650}",
756 "wrapperSize": "{foundations.spacing.12}",
757 "wrapperRadius": "{foundations.spacing.6}",
758 "wrapperBg": "{foundations.colors.neutral.125}"
759 },
760 "title": {
761 "color": "{foundations.colors.neutral.850}",
762 "fontSize": "{foundations.typography.size.16}",
763 "fontWeight": "{foundations.typography.weight.550}"
764 },
765 "description": {
766 "color": "{foundations.colors.neutral.650}",
767 "fontSize": "{foundations.typography.size.14}",
768 "fontWeight": "{foundations.typography.weight.400}"
769 },
770 "actions": {
771 "gap": "{foundations.spacing.2}"
772 }
773 }
774 },
775 "select": {
776 "base": {
777 "fontFamily": "{foundations.typography.fontFamily.base}",
778 "lineHeight": "{foundations.typography.lineHeight.130}",
779 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
780 "background": "{foundations.colors.neutral.0}",
781 "boxShadow": "{foundations.shadow.xs}",
782 "color": "{foundations.colors.neutral.850}",
783 "border": "{foundations.border.width.1} solid {foundations.colors.neutral.150}",
784 "radius": "{foundations.radius.md}",
785 "hover": {
786 "color": "{foundations.colors.neutral.850}",
787 "background": "{foundations.colors.neutral.0}",
788 "border": "{foundations.border.width.1} solid {foundations.colors.neutral.350}"
789 },
790 "focus": {
791 "border": "{foundations.border.width.1} solid {foundations.colors.brand.500}",
792 "boxShadow": "{foundations.shadow.focusSm} {foundations.colors.brand.100}",
793 "color": "{foundations.colors.neutral.850}"
794 },
795 "filled": {
796 "color": "{foundations.colors.neutral.850}",
797 "background": "{foundations.colors.neutral.950}",
798 "boxShadow": "{foundations.shadow.xs}"
799 },
800 "disabled": {
801 "background": "{foundations.colors.neutral.150}",
802 "color": "{foundations.colors.neutral.550}",
803 "border": "{foundations.border.width.1} solid {foundations.colors.neutral.350}",
804 "boxShadow": "{foundations.shadow.xs}"
805 },
806 "error": {
807 "background": "{foundations.colors.neutral.0}",
808 "border": "{foundations.border.width.1} solid {foundations.colors.feedback.error.600}",
809 "color": "{foundations.colors.feedback.error.600}",
810 "boxShadow": "{foundations.shadow.xs}",
811 "filled": {
812 "border": "{foundations.border.width.1} solid {foundations.colors.feedback.error.600}",
813 "color": "{foundations.colors.neutral.850}",
814 "boxShadow": "{foundations.shadow.xs}"
815 },
816 "focus": {
817 "border": "{foundations.border.width.1} solid {foundations.colors.feedback.error.600}",
818 "boxShadow": "{foundations.shadow.focusSm} {foundations.colors.feedback.error.800}",
819 "color": "{foundations.colors.neutral.850}"
820 },
821 "hover": {
822 "border": "{foundations.border.width.1} solid {foundations.colors.feedback.error.700}",
823 "boxShadow": "{foundations.shadow.focusSm} {foundations.colors.feedback.error.800}",
824 "color": "{foundations.colors.neutral.850}"
825 }
826 }
827 },
828 "sizes": {
829 "medium": {
830 "height": "{foundations.spacing.11}",
831 "padding": "{foundations.spacing.3}",
832 "labelFontSize": "{foundations.typography.size.14}",
833 "inputFontSize": "{foundations.typography.size.16}",
834 "helperFontSize": "{foundations.typography.size.14}",
835 "labelFontWeight": "{foundations.typography.weight.550}",
836 "inputFontWeight": "{foundations.typography.weight.400}",
837 "helperFontWeight": "{foundations.typography.weight.400}",
838 "labelColor": "{foundations.colors.neutral.850}",
839 "helperColor": "{foundations.colors.neutral.650}",
840 "iconSize": "{foundations.typography.size.16}"
841 },
842 "small": {
843 "height": "{foundations.spacing.8}",
844 "padding": "{foundations.spacing.3} {foundations.spacing.[\"2.5\"]}",
845 "labelFontSize": "{foundations.typography.size.14}",
846 "inputFontSize": "{foundations.typography.size.14}",
847 "helperFontSize": "{foundations.typography.size.14}",
848 "labelFontWeight": "{foundations.typography.weight.550}",
849 "inputFontWeight": "{foundations.typography.weight.400}",
850 "helperFontWeight": "{foundations.typography.weight.400}",
851 "labelColor": "{foundations.colors.neutral.850}",
852 "helperColor": "{foundations.colors.neutral.650}",
853 "iconSize": "{foundations.typography.size.16}"
854 }
855 }
856 },
857 "tooltip": {
858 "background": "{foundations.colors.neutral.850}",
859 "color": "{foundations.colors.neutral.0}",
860 "radius": "{foundations.radius.sm}",
861 "maxWidth": "300px",
862 "minHeight": "30px",
863 "gap": "{foundations.spacing.1}",
864 "paddingX": "{foundations.spacing.3}",
865 "paddingY": "{foundations.spacing[\"1.5\"]}",
866 "fontSize": "{foundations.typography.size.14}",
867 "fontWeight": "{foundations.typography.weight.400}",
868 "lineHeight": "18px",
869 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
870 "fontFamily": "{foundations.typography.fontFamily.base}",
871 "textAlign": "left",
872 "caretColor": "{foundations.colors.neutral.850}",
873 "caretSize": "{foundations.spacing[\"1.5\"]}",
874 "zIndex": "{foundations.zIndex.tooltip}"
875 },
876 "accordion": {
877 "base": {
878 "fontFamily": "{foundations.typography.fontFamily.base}",
879 "lineHeight": "{foundations.typography.lineHeight.130}",
880 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
881 "radius": "{foundations.radius.sm}",
882 "borderWidth": "{foundations.border.width.1}",
883 "borderColor": "{foundations.colors.neutral.150}",
884 "background": "{foundations.colors.neutral.0}",
885 "transition": "{foundations.motion.duration.fast}",
886 "text": {
887 "title": "{foundations.colors.neutral.850}",
888 "content": "{foundations.colors.neutral.750}",
889 "icon": "{foundations.colors.neutral.650}"
890 },
891 "states": {
892 "default": {
893 "background": "{foundations.colors.neutral.0}",
894 "borderColor": "{foundations.other.transparent}",
895 "text": "{foundations.colors.neutral.850}"
896 },
897 "hover": {
898 "text": "{foundations.colors.brand.500}",
899 "icon": "{foundations.colors.brand.500}"
900 },
901 "focus": {
902 "borderColor": "{foundations.colors.brand.500}",
903 "ring": "{foundations.shadow.focus} {foundations.colors.brand.500}"
904 }
905 }
906 },
907 "sizes": {
908 "small": {
909 "trigger": {
910 "paddingY": "{foundations.spacing.3}",
911 "fontSize": "{foundations.typography.size.14}"
912 },
913 "content": {
914 "fontSize": "{foundations.typography.size.14}",
915 "paddingTop": "{foundations.spacing.2}",
916 "paddingBottom": "{foundations.spacing.3}"
917 },
918 "icon": {
919 "size": "{foundations.typography.size.14}"
920 }
921 },
922 "medium": {
923 "trigger": {
924 "paddingY": "{foundations.spacing.4}",
925 "fontSize": "{foundations.typography.size.16}"
926 },
927 "content": {
928 "fontSize": "{foundations.typography.size.16}",
929 "paddingTop": "{foundations.spacing.3}",
930 "paddingBottom": "{foundations.spacing.4}"
931 },
932 "icon": {
933 "size": "{foundations.typography.size.16}"
934 }
935 }
936 }
937 },
938 "checkbox": {
939 "base": {
940 "fontWeight": "{foundations.typography.weight.400}",
941 "gap": "{foundations.spacing.3}",
942 "textGap": "{foundations.spacing.1}",
943 "fontFamily": "{foundations.typography.fontFamily.base}",
944 "lineHeight": "{foundations.typography.lineHeight.130}",
945 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
946 "track": {
947 "radius": "{foundations.radius.sm}",
948 "background": "{semanticTokens.surface.muted}",
949 "border": "{semanticTokens.border.default}",
950 "focusBorder": "{semanticTokens.border.focus}"
951 },
952 "checked": {
953 "background": "{foundations.colors.brand.500}",
954 "backgroundHover": "{foundations.colors.brand.700}"
955 },
956 "disabled": {
957 "background": "{foundations.colors.neutral.150}",
958 "border": "{foundations.colors.neutral.150}",
959 "text": "{foundations.colors.neutral.450}"
960 },
961 "thumb": {
962 "color": "{semanticTokens.surface.default}"
963 },
964 "motion": {
965 "duration": "{foundations.motion.duration.fast}"
966 }
967 },
968 "sizes": {
969 "regular": {
970 "control": "{foundations.spacing.6}",
971 "labelFontSize": "{foundations.typography.size.16}",
972 "descriptionFontSize": "{foundations.typography.size.14}",
973 "labelFontWeight": "{foundations.typography.weight.400}",
974 "descriptionFontWeight": "{foundations.typography.weight.400}",
975 "labelColor": "{foundations.colors.neutral.850}",
976 "descriptionColor": "{foundations.colors.neutral.650}",
977 "icon": "{foundations.typography.size.16}"
978 },
979 "small": {
980 "control": "{foundations.spacing.5}",
981 "labelFontSize": "{foundations.typography.size.14}",
982 "descriptionFontSize": "{foundations.typography.size.12}",
983 "labelFontWeight": "{foundations.typography.weight.400}",
984 "descriptionFontWeight": "{foundations.typography.weight.400}",
985 "labelColor": "{foundations.colors.neutral.850}",
986 "descriptionColor": "{foundations.colors.neutral.650}",
987 "icon": "{foundations.typography.size.14}"
988 }
989 }
990 },
991 "badge": {
992 "base": {
993 "fontWeight": "{foundations.typography.weight.550}",
994 "fontFamily": "{foundations.typography.fontFamily.base}",
995 "lineHeight": "{foundations.typography.lineHeight.130}",
996 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
997 },
998 "sizes": {
999 "small": {
1000 "height": "20px",
1001 "fontSize": "{foundations.typography.size.12}",
1002 "padding": "{foundations.spacing.[\"0.5\"]} {foundations.spacing.2}"
1003 },
1004 "medium": {
1005 "height": "24px",
1006 "fontSize": "{foundations.typography.size.14}",
1007 "padding": "3px {foundations.spacing.[\"2.5\"]}"
1008 },
1009 "large": {
1010 "height": "28px",
1011 "fontSize": "{foundations.typography.size.16}",
1012 "padding": "3.5px {foundations.spacing.3}"
1013 }
1014 },
1015 "shapes": {
1016 "rounded": {
1017 "radius": "{foundations.radius.full}"
1018 },
1019 "square": {
1020 "radius": "{foundations.radius.md}"
1021 }
1022 },
1023 "tones": {
1024 "success": {
1025 "background": "{foundations.colors.feedback.success.50}",
1026 "color": "{foundations.colors.feedback.success.700}"
1027 },
1028 "warning": {
1029 "background": "{foundations.colors.feedback.warning.50}",
1030 "color": "{foundations.colors.feedback.warning.700}"
1031 },
1032 "error": {
1033 "background": "{foundations.colors.feedback.error.50}",
1034 "color": "{foundations.colors.feedback.error.700}"
1035 },
1036 "info": {
1037 "background": "{foundations.colors.feedback.info.50}",
1038 "color": "{foundations.colors.feedback.info.700}"
1039 },
1040 "neutral": {
1041 "background": "{foundations.colors.neutral.950}",
1042 "color": "{foundations.colors.neutral.750}",
1043 "border": "{foundations.colors.neutral.150}"
1044 },
1045 "brand": {
1046 "background": "{foundations.colors.brand.50}",
1047 "color": "{foundations.colors.brand.500}"
1048 }
1049 }
1050 },
1051 "banner": {
1052 "base": {
1053 "radius": "{foundations.radius.lg}",
1054 "paddingX": "{foundations.spacing.4}",
1055 "paddingY": "{foundations.spacing.4}"
1056 },
1057 "sizes": {
1058 "full": {
1059 "maxWidth": "{foundations.maxWidth.full}"
1060 },
1061 "compact": {
1062 "maxWidth": "{foundations.maxWidth.compact}"
1063 }
1064 },
1065 "tones": {
1066 "success": {
1067 "background": "{foundations.colors.feedback.success.50}",
1068 "border": "{foundations.colors.feedback.success.700}",
1069 "text": "{semanticTokens.text.primary}",
1070 "iconBg": "{semanticTokens.feedback.success.iconBg}",
1071 "iconColor": "{foundations.colors.feedback.success.700}",
1072 "action": "{semanticTokens.feedback.success.action}"
1073 },
1074 "warning": {
1075 "background": "{foundations.colors.feedback.warning.50}",
1076 "border": "{foundations.colors.feedback.warning.700}",
1077 "text": "{semanticTokens.text.primary}",
1078 "iconBg": "{semanticTokens.surface.muted}",
1079 "iconColor": "{foundations.colors.feedback.warning.700}",
1080 "action": "{semanticTokens.text.primary}"
1081 },
1082 "error": {
1083 "background": "{foundations.colors.feedback.error.50}",
1084 "border": "{foundations.colors.feedback.error.700}",
1085 "text": "{semanticTokens.text.primary}",
1086 "iconBg": "{semanticTokens.surface.muted}",
1087 "iconColor": "{foundations.colors.feedback.error.700}",
1088 "action": "{semanticTokens.text.primary}"
1089 },
1090 "info": {
1091 "background": "{foundations.colors.feedback.info.50}",
1092 "border": "{foundations.colors.feedback.info.700}",
1093 "text": "{semanticTokens.text.primary}",
1094 "iconBg": "{semanticTokens.surface.muted}",
1095 "iconColor": "{foundations.colors.feedback.info.700}",
1096 "action": "{semanticTokens.text.primary}"
1097 },
1098 "neutral": {
1099 "background": "{foundations.colors.neutral.950}",
1100 "border": "{foundations.colors.neutral.150}",
1101 "text": "{semanticTokens.text.primary}",
1102 "iconBg": "{semanticTokens.surface.muted}",
1103 "iconColor": "{foundations.colors.neutral.750}",
1104 "action": "{semanticTokens.text.primary}"
1105 },
1106 "brand": {
1107 "background": "{foundations.colors.brand.50}",
1108 "color": "{foundations.colors.brand.500}",
1109 "text": "{semanticTokens.text.primary}",
1110 "iconBg": "{semanticTokens.surface.muted}",
1111 "iconColor": "{foundations.colors.brand.500}",
1112 "action": "{semanticTokens.text.primary}"
1113 }
1114 }
1115 },
1116 "promoBanner": {
1117 "base": {
1118 "title": {
1119 "color": "{foundations.colors.neutral.0}",
1120 "fontFamily": "{foundations.typography.fontFamily.base}",
1121 "fontWeight": "{foundations.typography.weight.550}",
1122 "fontSize": "{foundations.typography.size.16}",
1123 "lineHeight": "{foundations.typography.lineHeight.130}",
1124 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
1125 },
1126 "description": {
1127 "color": "{foundations.colors.neutral.0}",
1128 "fontFamily": "{foundations.typography.fontFamily.base}",
1129 "fontWeight": "{foundations.typography.weight.400}",
1130 "fontSize": "{foundations.typography.size.12}",
1131 "lineHeight": "{foundations.typography.lineHeight.130}",
1132 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
1133 }
1134 },
1135 "primary": {
1136 "background": "{semanticTokens.action.primary}",
1137 "color": "{semanticTokens.text.inverse}",
1138 "linkColor": "{semanticTokens.text.inverse}",
1139 "linkUnderline": true,
1140 "borderRadius": "{foundations.radius.xl}",
1141 "padding": "{foundations.spacing.3} {foundations.spacing.4}",
1142 "imageBg": "{foundations.colors.neutral.200}",
1143 "imageRadius": "10px"
1144 },
1145 "secondary": {
1146 "background": "{foundations.colors.brand.100}",
1147 "color": "{semanticTokens.text.primary}",
1148 "linkColor": "{foundations.colors.brand.500}",
1149 "linkUnderline": false,
1150 "borderRadius": "{foundations.radius.xl}",
1151 "padding": "{foundations.spacing.3} {foundations.spacing.4}",
1152 "imageBg": "{foundations.colors.neutral.200}",
1153 "imageRadius": "10px"
1154 },
1155 "tertiary": {
1156 "background": "{foundations.colors.feedback.warning.50}",
1157 "color": "{semanticTokens.text.primary}",
1158 "linkColor": "{foundations.colors.feedback.warning.500}",
1159 "linkUnderline": true,
1160 "borderRadius": "{foundations.radius.xl}",
1161 "padding": "{foundations.spacing.3} {foundations.spacing.4}",
1162 "imageBg": "{foundations.colors.feedback.warning.100}",
1163 "imageRadius": "10px"
1164 }
1165 },
1166 "alert": {
1167 "base": {
1168 "radius": "{foundations.radius.lg}",
1169 "fontFamily": "{foundations.typography.fontFamily.base}",
1170 "lineHeight": "{foundations.typography.lineHeight.130}",
1171 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
1172 },
1173 "sizes": {
1174 "inline": {
1175 "maxWidth": "343px",
1176 "minHeight": "56px",
1177 "paddingX": "{foundations.spacing.4}",
1178 "paddingY": "{foundations.spacing.3}",
1179 "gap": "{foundations.spacing.3}",
1180 "titleMaxLines": 2,
1181 "descriptionMaxLines": 4
1182 },
1183 "full-width": {
1184 "maxWidth": "{foundations.maxWidth.full}",
1185 "minHeight": "76px",
1186 "paddingX": "{foundations.spacing.6}",
1187 "paddingY": "{foundations.spacing.4}",
1188 "gap": "{foundations.spacing.3}",
1189 "titleMaxLines": 1,
1190 "descriptionMaxLines": 1
1191 },
1192 "stacked": {
1193 "maxWidth": "343px",
1194 "minHeight": "82px",
1195 "paddingX": "{foundations.spacing.4}",
1196 "paddingY": "{foundations.spacing.3}",
1197 "gap": "{foundations.spacing.2}",
1198 "titleMaxLines": 1,
1199 "descriptionMaxLines": 4
1200 }
1201 },
1202 "title": {
1203 "color": "{foundations.colors.neutral.850}",
1204 "fontSize": "{foundations.typography.size.14}",
1205 "fontWeight": "{foundations.typography.weight.550}",
1206 "fontFamily": "{foundations.typography.fontFamily.base}"
1207 },
1208 "description": {
1209 "color": "{foundations.colors.neutral.750}",
1210 "fontSize": "{foundations.typography.size.12}",
1211 "fontWeight": "{foundations.typography.weight.400}",
1212 "fontFamily": "{foundations.typography.fontFamily.base}"
1213 },
1214 "cta": {
1215 "fontSize": "{foundations.typography.size.12}",
1216 "fontWeight": "{foundations.typography.weight.550}",
1217 "fontFamily": "{foundations.typography.fontFamily.base}"
1218 },
1219 "icon": {
1220 "containerSize": "{foundations.spacing.8}",
1221 "containerRadius": "{foundations.radius.md}"
1222 },
1223 "close": {
1224 "iconSize": "{foundations.typography.size.18}"
1225 },
1226 "tones": {
1227 "success": {
1228 "background": "{foundations.colors.feedback.success.50}",
1229 "border": "{foundations.colors.feedback.success.700}",
1230 "text": "{semanticTokens.text.primary}",
1231 "iconBg": "{semanticTokens.feedback.success.iconBg}",
1232 "iconColor": "{foundations.colors.feedback.success.700}",
1233 "action": "{semanticTokens.feedback.success.action}"
1234 },
1235 "warning": {
1236 "background": "{foundations.colors.feedback.warning.50}",
1237 "border": "{foundations.colors.feedback.warning.700}",
1238 "text": "{semanticTokens.text.primary}",
1239 "iconBg": "{semanticTokens.surface.muted}",
1240 "iconColor": "{foundations.colors.feedback.warning.700}",
1241 "action": "{semanticTokens.text.primary}"
1242 },
1243 "error": {
1244 "background": "{foundations.colors.feedback.error.50}",
1245 "border": "{foundations.colors.feedback.error.700}",
1246 "text": "{semanticTokens.text.primary}",
1247 "iconBg": "{semanticTokens.surface.muted}",
1248 "iconColor": "{foundations.colors.feedback.error.700}",
1249 "action": "{semanticTokens.text.primary}"
1250 },
1251 "info": {
1252 "background": "{foundations.colors.feedback.info.50}",
1253 "border": "{foundations.colors.feedback.info.700}",
1254 "text": "{semanticTokens.text.primary}",
1255 "iconBg": "{semanticTokens.surface.muted}",
1256 "iconColor": "{foundations.colors.feedback.info.700}",
1257 "action": "{semanticTokens.text.primary}"
1258 }
1259 }
1260 },
1261 "avatar": {
1262 "sizes": {
1263 "sm": {
1264 "size": "{foundations.spacing.8}",
1265 "fontSize": "{foundations.typography.size.12}"
1266 },
1267 "md": {
1268 "size": "{foundations.spacing.9}",
1269 "fontSize": "{foundations.typography.size.14}"
1270 },
1271 "lg": {
1272 "size": "{foundations.spacing.11}",
1273 "fontSize": "{foundations.typography.size.14}"
1274 }
1275 },
1276 "base": {
1277 "fontFamily": "{foundations.typography.fontFamily.base}",
1278 "lineHeight": "{foundations.typography.lineHeight.130}",
1279 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1280 "fallback": {
1281 "background": "{foundations.colors.neutral.950}",
1282 "color": "{foundations.colors.neutral.850}",
1283 "fontWeight": "{foundations.typography.weight.550}",
1284 "fontFamily": "{foundations.typography.fontFamily.base}",
1285 "lineHeight": "{foundations.typography.lineHeight.130}",
1286 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
1287 }
1288 },
1289 "shapes": {
1290 "radius": "{foundations.radius.full}"
1291 }
1292 },
1293 "radio": {
1294 "base": {
1295 "fontWeight": "{foundations.typography.weight.400}",
1296 "fontFamily": "{foundations.typography.fontFamily.base}",
1297 "lineHeight": "{foundations.typography.lineHeight.130}",
1298 "gap": "{foundations.spacing.3}",
1299 "textGap": "{foundations.spacing.1}",
1300 "outer": {
1301 "radius": "{foundations.radius.full}",
1302 "background": "{foundations.colors.neutral.0}",
1303 "border": "{foundations.colors.neutral.150}",
1304 "hoverBorder": "{foundations.colors.neutral.350}",
1305 "focusBorder": "{semanticTokens.border.focus}"
1306 },
1307 "checked": {
1308 "background": "{foundations.colors.brand.500}",
1309 "backgroundHover": "{foundations.colors.brand.700}"
1310 },
1311 "disabled": {
1312 "background": "{foundations.colors.neutral.150}",
1313 "border": "{foundations.colors.neutral.350}",
1314 "dot": "{foundations.colors.neutral.450}",
1315 "text": "{foundations.colors.neutral.450}"
1316 },
1317 "motion": {
1318 "duration": "{foundations.motion.duration.fast}"
1319 }
1320 },
1321 "sizes": {
1322 "regular": {
1323 "outer": {
1324 "size": "{foundations.spacing.5}"
1325 },
1326 "dot": {
1327 "size": "{foundations.spacing.3}"
1328 },
1329 "labelFontSize": "{foundations.typography.size.16}",
1330 "descriptionFontSize": "{foundations.typography.size.14}",
1331 "labelFontWeight": "{foundations.typography.weight.400}",
1332 "descriptionFontWeight": "{foundations.typography.weight.400}",
1333 "labelColor": "{foundations.colors.neutral.850}",
1334 "descriptionColor": "{foundations.colors.neutral.650}"
1335 },
1336 "small": {
1337 "outer": {
1338 "size": "{foundations.spacing.4}"
1339 },
1340 "dot": {
1341 "size": "{foundations.spacing.2}"
1342 },
1343 "labelFontSize": "{foundations.typography.size.14}",
1344 "descriptionFontSize": "{foundations.typography.size.12}",
1345 "labelFontWeight": "{foundations.typography.weight.400}",
1346 "descriptionFontWeight": "{foundations.typography.weight.400}",
1347 "labelColor": "{foundations.colors.neutral.850}",
1348 "descriptionColor": "{foundations.colors.neutral.650}"
1349 }
1350 }
1351 },
1352 "switch": {
1353 "base": {
1354 "fontWeight": "{foundations.typography.weight.400}",
1355 "gap": "{foundations.spacing.3}",
1356 "textGap": "{foundations.spacing.1}",
1357 "background": "{foundations.colors.neutral.350}",
1358 "fontFamily": "{foundations.typography.fontFamily.base}",
1359 "lineHeight": "{foundations.typography.lineHeight.130}",
1360 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1361 "track": {
1362 "offBackground": "{foundations.colors.neutral.150}",
1363 "offBackgroundHover": "{foundations.colors.neutral.450}",
1364 "onBackground": "{foundations.colors.brand.500}",
1365 "onBackgroundHover": "{foundations.colors.brand.700}"
1366 },
1367 "disabled": {
1368 "track": "{foundations.colors.neutral.450}",
1369 "handle": "{foundations.colors.neutral.575}",
1370 "background": "{foundations.colors.neutral.150}",
1371 "text": "{foundations.colors.neutral.450}"
1372 },
1373 "motion": {
1374 "duration": "{foundations.motion.duration.fast}"
1375 }
1376 },
1377 "sizes": {
1378 "regular": {
1379 "track": {
1380 "width": "{foundations.spacing.[\"8.5\"]}",
1381 "height": "{foundations.spacing.5}"
1382 },
1383 "handle": {
1384 "size": "{foundations.spacing.4}",
1385 "translate": "{foundations.spacing.[\"1.75\"]}"
1386 },
1387 "labelFontSize": "{foundations.typography.size.16}",
1388 "descriptionFontSize": "{foundations.typography.size.14}",
1389 "labelFontWeight": "{foundations.typography.weight.400}",
1390 "descriptionFontWeight": "{foundations.typography.weight.400}",
1391 "labelColor": "{foundations.colors.neutral.850}",
1392 "descriptionColor": "{foundations.colors.neutral.650}"
1393 },
1394 "small": {
1395 "track": {
1396 "width": "{foundations.spacing.[\"6.5\"]}",
1397 "height": "{foundations.spacing.4}"
1398 },
1399 "handle": {
1400 "size": "{foundations.spacing.3}",
1401 "translate": "{foundations.spacing.[\"1.25\"]}"
1402 },
1403 "labelFontSize": "{foundations.typography.size.12}",
1404 "descriptionFontSize": "{foundations.typography.size.12}",
1405 "labelFontWeight": "{foundations.typography.weight.400}",
1406 "descriptionFontWeight": "{foundations.typography.weight.400}",
1407 "labelColor": "{foundations.colors.neutral.850}",
1408 "descriptionColor": "{foundations.colors.neutral.650}"
1409 }
1410 }
1411 },
1412 "dropdown": {
1413 "background": "{foundations.colors.neutral.0}",
1414 "color": "{foundations.colors.neutral.850}",
1415 "border": "{foundations.border.width.1} solid {foundations.colors.neutral.150}",
1416 "radius": "{foundations.radius.md}",
1417 "shadow": "{foundations.shadow.dropdown}",
1418 "paddingX": "{foundations.spacing.2}",
1419 "paddingY": "{foundations.spacing.1}",
1420 "minWidth": "{foundations.maxWidth.dropdown}",
1421 "fontSize": "{foundations.typography.size.14}",
1422 "fontWeight": "{foundations.typography.weight.400}",
1423 "lineHeight": "{foundations.typography.lineHeight.normal}",
1424 "fontFamily": "{foundations.typography.fontFamily.base}",
1425 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1426 "animation": {
1427 "duration": "{foundations.motion.duration.fast}",
1428 "easing": "{foundations.motion.easing.out}"
1429 },
1430 "item": {
1431 "height": "{foundations.spacing.9}",
1432 "gap": "{foundations.spacing.1}",
1433 "color": "{foundations.colors.neutral.850}",
1434 "background": "{foundations.colors.neutral.0}",
1435 "hoverBackground": "{foundations.colors.neutral.950}",
1436 "activeBackground": "{foundations.colors.neutral.150}",
1437 "disabledOpacity": "{foundations.opacity.disabled}",
1438 "borderRadius": "{foundations.radius.md}",
1439 "iconSize": "{foundations.typography.size.13}",
1440 "iconColor": "{foundations.colors.brand.500}",
1441 "fontSize": "{foundations.typography.size.14}",
1442 "fontWeight": "{foundations.typography.weight.400}"
1443 },
1444 "section": {
1445 "labelColor": "{foundations.colors.neutral.650}",
1446 "separatorColor": "{foundations.colors.neutral.150}"
1447 }
1448 },
1449 "separator": {
1450 "base": {
1451 "orientation": {
1452 "vertical": {
1453 "width": "{foundations.border.width.1}",
1454 "height": "{foundations.spacing.[\"4.5\"]}"
1455 },
1456 "horizontal": {
1457 "width": "100%",
1458 "height": "{foundations.border.width.1}"
1459 }
1460 },
1461 "color": "{foundations.colors.neutral.150}",
1462 "opacity": "1"
1463 }
1464 },
1465 "alertDialog": {
1466 "base": {
1467 "overlay": {
1468 "background": "{foundations.other.overlayBackground}"
1469 },
1470 "content": {
1471 "background": "{foundations.colors.neutral.0}",
1472 "radius": "{foundations.radius.2xl}",
1473 "borderColor": "{foundations.colors.neutral.150}",
1474 "width": "clamp(360px, calc(100dvw - 32px), 512px)",
1475 "maxWidth": "512px",
1476 "maxHeight": "calc(100dvh - 64px)",
1477 "padding": "{foundations.spacing.6}",
1478 "gap": "{foundations.spacing.6}"
1479 },
1480 "header": {
1481 "gap": "{foundations.spacing.4}"
1482 },
1483 "footer": {
1484 "gap": "{foundations.spacing.2}"
1485 },
1486 "title": {
1487 "color": "{foundations.colors.neutral.850}",
1488 "fontSize": "{foundations.typography.size.18}",
1489 "fontFamily": "{foundations.typography.fontFamily.base}",
1490 "lineHeight": "{foundations.typography.lineHeight.130}",
1491 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1492 "fontWeight": "{foundations.typography.weight.550}"
1493 },
1494 "description": {
1495 "color": "{foundations.colors.neutral.650}",
1496 "fontSize": "{foundations.typography.size.16}",
1497 "fontFamily": "{foundations.typography.fontFamily.base}",
1498 "lineHeight": "{foundations.typography.lineHeight.130}",
1499 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1500 "fontWeight": "{foundations.typography.weight.400}"
1501 },
1502 "sizes": {
1503 "regular": {
1504 "padding": "{foundations.spacing.6}",
1505 "gap": "{foundations.spacing.6}",
1506 "headerGap": "{foundations.spacing.4}",
1507 "footerGap": "{foundations.spacing.2}"
1508 }
1509 }
1510 }
1511 },
1512 "card": {
1513 "backgroundColor": "{semanticTokens.surface.default}",
1514 "borderColor": "{semanticTokens.border.default}",
1515 "color": "{foundations.colors.neutral.900}",
1516 "borderRadius": "{foundations.radius.lg}",
1517 "padding": "{foundations.spacing.4}",
1518 "title": {
1519 "fontSize": "{foundations.typography.size.18}",
1520 "fontWeight": "{foundations.typography.weight.550}",
1521 "lineHeight": "{foundations.typography.lineHeight.tight}",
1522 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
1523 },
1524 "variants": {
1525 "primary": {
1526 "backgroundColor": "{foundations.colors.neutral.0}",
1527 "borderColor": "{foundations.colors.neutral.200}"
1528 },
1529 "secondary": {
1530 "backgroundColor": "{foundations.colors.neutral.50}",
1531 "borderColor": "{foundations.other.transparent}"
1532 },
1533 "tertiary": {
1534 "backgroundColor": "{foundations.colors.neutral.0}",
1535 "borderColor": "{foundations.colors.brand.500}"
1536 }
1537 }
1538 },
1539 "moduleBox": {
1540 "lineHeight": "{foundations.typography.lineHeight.tight}",
1541 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1542 "fontFamily": "{foundations.typography.fontFamily.base}",
1543 "backgroundColor": "{semanticTokens.surface.default}",
1544 "borderColor": "{semanticTokens.border.default}",
1545 "borderRadius": "{foundations.radius.lg}",
1546 "padding": "{foundations.spacing.6}",
1547 "gap": "{foundations.spacing.6}",
1548 "header": {
1549 "gap": "{foundations.spacing.3}"
1550 },
1551 "slot": {
1552 "minHeight": "{foundations.spacing.28}",
1553 "background": "{foundations.colors.neutral.175}",
1554 "border": "{foundations.colors.brand.500}",
1555 "borderRadius": "{foundations.radius.none}",
1556 "padding": "{foundations.spacing.6}",
1557 "color": "{foundations.colors.neutral.750}"
1558 },
1559 "footer": {
1560 "gap": "{foundations.spacing.3}"
1561 },
1562 "title": {
1563 "fontWeight": "{foundations.typography.weight.550}",
1564 "fontStyle": "{foundations.other.fontStyleNormal}",
1565 "fontSize": "{foundations.typography.size.18}",
1566 "color": "{foundations.colors.neutral.850}"
1567 },
1568 "description": {
1569 "marginTop": "{foundations.spacing.1}",
1570 "fontWeight": "{foundations.typography.weight.400}",
1571 "fontStyle": "{foundations.other.fontStyleNormal}",
1572 "fontSize": "{foundations.typography.size.14}",
1573 "color": "{foundations.colors.neutral.650}"
1574 },
1575 "content": {
1576 "marginTop": "{foundations.spacing.4}"
1577 }
1578 },
1579 "charts": {
1580 "backgroundColor": "{foundations.other.transparent}",
1581 "borderColor": "{foundations.other.transparent}",
1582 "borderRadius": "{foundations.radius.lg}",
1583 "padding": "{foundations.spacing.0}",
1584 "height": "{foundations.other.chartHeight}",
1585 "fontFamily": "{foundations.typography.fontFamily.base}",
1586 "lineHeight": "{foundations.typography.lineHeight.130}",
1587 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1588 "title": {
1589 "color": "{semanticTokens.text.primary}",
1590 "fontSize": "{foundations.typography.size.16}",
1591 "fontWeight": "{foundations.typography.weight.550}"
1592 },
1593 "subtitle": {
1594 "color": "{semanticTokens.text.muted}",
1595 "fontSize": "{foundations.typography.size.14}",
1596 "fontWeight": "{foundations.typography.weight.400}"
1597 },
1598 "grid": {
1599 "color": "{semanticTokens.border.default}",
1600 "dasharray": "{foundations.border.width.0}"
1601 },
1602 "axis": {
1603 "lineColor": "{semanticTokens.border.default}",
1604 "labelColor": "{semanticTokens.text.muted}",
1605 "fontSize": "{foundations.typography.size.12}"
1606 },
1607 "baseline": {
1608 "color": "{semanticTokens.border.default}",
1609 "strokeWidth": "{foundations.border.width.1}",
1610 "dasharray": "{foundations.border.width.0}"
1611 },
1612 "legend": {
1613 "color": "{semanticTokens.text.secondary}",
1614 "fontSize": "{foundations.typography.size.14}",
1615 "fontWeight": "{foundations.typography.weight.500}",
1616 "dotSize": "{foundations.typography.size.10}",
1617 "gap": "{foundations.spacing.4}"
1618 },
1619 "tooltip": {
1620 "background": "{semanticTokens.surface.default}",
1621 "borderColor": "{semanticTokens.border.default}",
1622 "radius": "{foundations.radius.md}",
1623 "titleColor": "{semanticTokens.text.secondary}",
1624 "valueColor": "{semanticTokens.text.primary}",
1625 "titleFontSize": "{foundations.typography.size.12}",
1626 "titleFontWeight": "{foundations.typography.weight.550}",
1627 "valueFontSize": "{foundations.typography.size.14}",
1628 "valueFontWeight": "{foundations.typography.weight.600}"
1629 },
1630 "bar": {
1631 "radius": "{foundations.spacing.[\"2.5\"]}",
1632 "gap": "{foundations.spacing.2}",
1633 "categoryGap": "{foundations.other.chartCategoryGap}",
1634 "maxBarSize": "{foundations.spacing.14}"
1635 },
1636 "line": {
1637 "stroke": "{semanticTokens.action.primary}",
1638 "strokeWidth": "{foundations.border.width.2}",
1639 "curveType": "{foundations.other.chartCurveType}",
1640 "activeDotRadius": "{foundations.spacing.1}"
1641 },
1642 "pie": {
1643 "strokeColor": "{semanticTokens.surface.default}",
1644 "strokeWidth": "{foundations.border.width.2}",
1645 "paddingAngle": "{foundations.spacing.0}",
1646 "innerRadius": "{foundations.spacing.0}",
1647 "outerRadius": "{foundations.spacing.18}"
1648 },
1649 "donut": {
1650 "innerRadius": "{foundations.spacing.13}",
1651 "outerRadius": "{foundations.spacing.18}",
1652 "centerValueColor": "{semanticTokens.text.secondary}",
1653 "centerValueSize": "{foundations.typography.size.24}",
1654 "centerValueWeight": "{foundations.typography.weight.600}",
1655 "centerLabelColor": "{semanticTokens.text.muted}",
1656 "centerLabelSize": "{foundations.typography.size.12}",
1657 "centerLabelWeight": "{foundations.typography.weight.500}"
1658 },
1659 "emptyState": {
1660 "color": "{semanticTokens.text.muted}",
1661 "fontSize": "{foundations.typography.size.14}",
1662 "fontWeight": "{foundations.typography.weight.400}",
1663 "lineHeight": "{foundations.typography.lineHeight.130}",
1664 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
1665 }
1666 },
1667 "integrationCard": {
1668 "backgroundColor": "{foundations.colors.neutral.950}",
1669 "borderColor": "{foundations.colors.neutral.200}",
1670 "borderRadius": "{foundations.radius.xl}",
1671 "title": {
1672 "color": "{foundations.colors.neutral.900}",
1673 "fontSize": "{foundations.typography.size.16}",
1674 "fontWeight": "{foundations.typography.weight.550}"
1675 },
1676 "description": {
1677 "color": "{foundations.colors.neutral.500}",
1678 "fontSize": "{foundations.typography.size.14}"
1679 },
1680 "link": {
1681 "color": "{foundations.colors.brand.500}",
1682 "fontSize": "{foundations.typography.size.14}",
1683 "fontWeight": "{foundations.typography.weight.550}"
1684 },
1685 "variants": {
1686 "default": {
1687 "borderColor": "{foundations.colors.neutral.200}"
1688 },
1689 "subtle": {
1690 "borderColor": "{foundations.colors.neutral.225}"
1691 },
1692 "none": {
1693 "borderColor": "{foundations.other.transparent}"
1694 }
1695 }
1696 },
1697 "carousel": {
1698 "gap": "{foundations.spacing.4}",
1699 "cursorGrab": "{foundations.other.cursor.grab}",
1700 "cursorGrabbing": "{foundations.other.cursor.grabbing}",
1701 "scrollBehavior": "{foundations.other.scrollBehavior}",
1702 "card": {
1703 "background": "{foundations.colors.neutral.950}",
1704 "borderRadius": "{foundations.radius.lg}",
1705 "color": "{foundations.colors.neutral.750}",
1706 "padding": "{foundations.spacing.4}",
1707 "fontSize": "{foundations.typography.size.14}",
1708 "fontFamily": "{foundations.typography.fontFamily.base}",
1709 "fontWeight": "{foundations.typography.weight.550}",
1710 "lineHeight": "{foundations.typography.lineHeight.130}",
1711 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
1712 }
1713 },
1714 "calendar": {
1715 "base": {
1716 "background": "{semanticTokens.surface.default}",
1717 "radius": "{foundations.radius.md}",
1718 "text": "{semanticTokens.text.primary}",
1719 "fontFamily": "{foundations.typography.fontFamily.base}",
1720 "lineHeight": "{foundations.typography.lineHeight.130}",
1721 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1722 "muted": "{semanticTokens.text.muted}",
1723 "border": "{semanticTokens.border.default}",
1724 "item": {
1725 "size": "{foundations.spacing.8}",
1726 "radius": "{foundations.radius.sm}",
1727 "default": {
1728 "color": "{semanticTokens.text.primary}",
1729 "background": "{foundations.other.transparent}"
1730 },
1731 "hover": {
1732 "background": "{foundations.colors.neutral.150}",
1733 "color": "{semanticTokens.text.primary}"
1734 },
1735 "current": {
1736 "background": "{foundations.colors.neutral.150}",
1737 "color": "{semanticTokens.text.primary}"
1738 },
1739 "active": {
1740 "background": "{foundations.colors.brand.500}",
1741 "color": "{semanticTokens.text.inverse}"
1742 }
1743 }
1744 }
1745 },
1746 "popover": {
1747 "background": "{foundations.colors.neutral.0}",
1748 "color": "{foundations.colors.neutral.850}",
1749 "border": "{foundations.colors.neutral.150}",
1750 "radius": "{foundations.radius.lg}",
1751 "shadow": "{foundations.shadow.dropdown}",
1752 "padding": "{foundations.spacing.3}",
1753 "fontSize": "{foundations.typography.size.16}",
1754 "fontWeight": "{foundations.typography.weight.400}",
1755 "lineHeight": "{foundations.typography.lineHeight.normal}",
1756 "fontFamily": "{foundations.typography.fontFamily.base}",
1757 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1758 "header": {
1759 "fontSize": "{foundations.typography.size.16}",
1760 "fontWeight": "{foundations.typography.weight.400}",
1761 "color": "{foundations.colors.neutral.850}"
1762 },
1763 "description": {
1764 "fontSize": "{foundations.typography.size.14}",
1765 "fontWeight": "{foundations.typography.weight.400}",
1766 "color": "{foundations.colors.neutral.650}"
1767 },
1768 "divider": {
1769 "color": "{foundations.colors.neutral.150}"
1770 },
1771 "motion": {
1772 "duration": "{foundations.motion.duration.normal}",
1773 "easing": "{foundations.motion.easing.out}"
1774 },
1775 "zIndex": "{foundations.zIndex.dropdown}"
1776 },
1777 "pagination": {
1778 "base": {
1779 "radius": "{foundations.radius.md}",
1780 "gap": "{foundations.spacing.2}",
1781 "fontFamily": "{foundations.typography.fontFamily.base}",
1782 "lineHeight": "{foundations.typography.lineHeight.130}",
1783 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1784 "pageNumber": {
1785 "fontSize": "{foundations.typography.size.14}",
1786 "fontWeight": "{foundations.typography.weight.500}",
1787 "color": "{semanticTokens.text.primary}"
1788 },
1789 "icon": {
1790 "size": "{foundations.typography.size.16}",
1791 "color": "{foundations.colors.neutral.500}"
1792 },
1793 "item": {
1794 "default": {
1795 "background": "{semanticTokens.surface.default}",
1796 "border": "{semanticTokens.border.default}",
1797 "color": "{semanticTokens.text.primary}"
1798 },
1799 "hover": {
1800 "background": "{foundations.colors.brand.100}",
1801 "border": "{semanticTokens.border.default}"
1802 },
1803 "active": {
1804 "background": "{foundations.colors.brand.200}",
1805 "text": "{semanticTokens.action.primary}",
1806 "border": "{foundations.other.transparent}"
1807 },
1808 "focus": {
1809 "border": "{semanticTokens.border.focus}"
1810 },
1811 "disabled": {
1812 "background": "{foundations.colors.neutral.0}",
1813 "text": "{foundations.colors.neutral.400}",
1814 "opacity": "{foundations.opacity.overlay}"
1815 }
1816 }
1817 }
1818 },
1819 "tabs": {
1820 "base": {
1821 "fontFamily": "{foundations.typography.fontFamily.base}",
1822 "lineHeight": "{foundations.typography.lineHeight.130}",
1823 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1824 "tabsList": {
1825 "background": "{foundations.colors.neutral.150}",
1826 "color": "{foundations.colors.neutral.750}",
1827 "radius": "{foundations.radius.sm}"
1828 },
1829 "tabsTrigger": {
1830 "color": "{foundations.colors.neutral.750}",
1831 "hover": {
1832 "background": "{foundations.colors.neutral.950}",
1833 "color": "{foundations.colors.neutral.850}"
1834 },
1835 "active": {
1836 "background": "{foundations.colors.neutral.0}",
1837 "color": "{foundations.colors.neutral.850}"
1838 },
1839 "disabled": {
1840 "background": "{foundations.colors.neutral.0}",
1841 "color": "{foundations.colors.neutral.550}",
1842 "opacity": "{foundations.opacity.overlay}"
1843 }
1844 },
1845 "tabsFocusRing": {
1846 "innerColor": "{foundations.colors.neutral.0}",
1847 "outerColor": "{foundations.colors.brand.500}",
1848 "innerSize": "{foundations.border.width.2}",
1849 "outerSize": "{foundations.border.width.4}"
1850 }
1851 },
1852 "sizes": {
1853 "medium": {
1854 "fontSize": "{foundations.typography.size.14}",
1855 "fontWeight": "{foundations.typography.weight.500}"
1856 },
1857 "small": {
1858 "fontSize": "{foundations.typography.size.12}",
1859 "fontWeight": "{foundations.typography.weight.500}"
1860 }
1861 }
1862 },
1863 "table": {
1864 "base": {
1865 "background": "{semanticTokens.surface.default}",
1866 "border": "{semanticTokens.border.default}",
1867 "radius": "{foundations.radius.md}",
1868 "shadow": "{foundations.shadow.md}",
1869 "headerBackground": "{foundations.colors.neutral.950}",
1870 "headerTextColor": "{foundations.colors.neutral.650}",
1871 "headerFontSize": "{foundations.typography.size.12}",
1872 "headerFontWeight": "{foundations.typography.weight.600}",
1873 "rowHoverBackground": "{semanticTokens.surface.hover}",
1874 "rowSelectedBackground": "{foundations.colors.brand.200}",
1875 "cellTextColor": "{semanticTokens.text.primary}",
1876 "cellFontSize": "{foundations.typography.size.14}",
1877 "descriptionColor": "{foundations.colors.neutral.650}",
1878 "descriptionFontSize": "{foundations.typography.size.12}",
1879 "descriptionFontWeight": "{foundations.typography.weight.400}",
1880 "fontFamily": "{foundations.typography.fontFamily.base}",
1881 "lineHeight": "{foundations.typography.lineHeight.130}",
1882 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
1883 }
1884 },
1885 "breadcrumb": {
1886 "base": {
1887 "gap": "{foundations.spacing.2}",
1888 "maxLabelLength": "24",
1889 "fontFamily": "{foundations.typography.fontFamily.base}",
1890 "lineHeight": "{foundations.typography.lineHeight.130}",
1891 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1892 "link": {
1893 "default": {
1894 "color": "{foundations.colors.brand.500}",
1895 "fontWeight": "{foundations.typography.weight.600}"
1896 },
1897 "hover": {
1898 "color": "{foundations.colors.brand.700}",
1899 "textDecoration": "underline"
1900 }
1901 },
1902 "page": {
1903 "color": "{foundations.colors.neutral.650}",
1904 "fontWeight": "{foundations.typography.weight.550}"
1905 },
1906 "separator": {
1907 "color": "{foundations.colors.neutral.400}",
1908 "size": "{foundations.typography.size.14}"
1909 }
1910 },
1911 "sizes": {
1912 "medium": {
1913 "fontSize": "{foundations.typography.size.14}",
1914 "gap": "{foundations.spacing.2}",
1915 "itemMinHeight": "{foundations.typography.size.20}"
1916 },
1917 "small": {
1918 "fontSize": "{foundations.typography.size.12}",
1919 "gap": "{foundations.spacing.2}",
1920 "itemMinHeight": "{foundations.typography.size.18}"
1921 }
1922 }
1923 },
1924 "loader": {
1925 "base": {
1926 "fontFamily": "{foundations.typography.fontFamily.base}",
1927 "lineHeight": "{foundations.typography.lineHeight.130}",
1928 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
1929 },
1930 "sizes": {
1931 "small": {
1932 "spinnerSize": "{foundations.typography.size.16}",
1933 "minWidth": "200px",
1934 "maxWidth": "360px",
1935 "minHeight": "200px",
1936 "paddingX": "{foundations.spacing.4}",
1937 "paddingY": "{foundations.spacing.4}",
1938 "contentGap": "{foundations.spacing.4}",
1939 "textGap": "{foundations.spacing.1}",
1940 "labelFontWeight": "{foundations.typography.weight.550}",
1941 "descriptionFontWeight": "{foundations.typography.weight.400}",
1942 "labelFontSize": "{foundations.typography.size.16}",
1943 "descriptionFontSize": "{foundations.typography.size.12}",
1944 "labelColor": "{foundations.colors.neutral.850}",
1945 "descriptionColor": "{foundations.colors.neutral.650}"
1946 },
1947 "medium": {
1948 "spinnerSize": "{foundations.typography.size.20}",
1949 "minWidth": "280px",
1950 "maxWidth": "400px",
1951 "minHeight": "280px",
1952 "paddingX": "{foundations.spacing.5}",
1953 "paddingY": "{foundations.spacing.5}",
1954 "contentGap": "{foundations.spacing.5}",
1955 "textGap": "{foundations.spacing[\"1.5\"]}",
1956 "labelFontWeight": "{foundations.typography.weight.550}",
1957 "descriptionFontWeight": "{foundations.typography.weight.400}",
1958 "labelFontSize": "{foundations.typography.size.18}",
1959 "descriptionFontSize": "{foundations.typography.size.14}",
1960 "labelColor": "{foundations.colors.neutral.850}",
1961 "descriptionColor": "{foundations.colors.neutral.650}"
1962 },
1963 "large": {
1964 "spinnerSize": "{foundations.typography.size.24}",
1965 "minWidth": "280px",
1966 "maxWidth": "400px",
1967 "minHeight": "280px",
1968 "paddingX": "{foundations.spacing.6}",
1969 "paddingY": "{foundations.spacing.6}",
1970 "contentGap": "{foundations.spacing.5}",
1971 "textGap": "{foundations.spacing[\"1.5\"]}",
1972 "labelFontWeight": "{foundations.typography.weight.550}",
1973 "descriptionFontWeight": "{foundations.typography.weight.400}",
1974 "labelFontSize": "{foundations.typography.size.18}",
1975 "descriptionFontSize": "{foundations.typography.size.14}",
1976 "labelColor": "{foundations.colors.neutral.850}",
1977 "descriptionColor": "{foundations.colors.neutral.650}"
1978 },
1979 "extraLarge": {
1980 "spinnerSize": "{foundations.typography.size.32}",
1981 "minWidth": "280px",
1982 "maxWidth": "400px",
1983 "minHeight": "280px",
1984 "paddingX": "{foundations.spacing.8}",
1985 "paddingY": "{foundations.spacing.8}",
1986 "contentGap": "{foundations.spacing.5}",
1987 "textGap": "{foundations.spacing[\"1.5\"]}",
1988 "labelFontWeight": "{foundations.typography.weight.550}",
1989 "descriptionFontWeight": "{foundations.typography.weight.400}",
1990 "labelFontSize": "{foundations.typography.size.18}",
1991 "descriptionFontSize": "{foundations.typography.size.14}",
1992 "labelColor": "{foundations.colors.neutral.850}",
1993 "descriptionColor": "{foundations.colors.neutral.650}"
1994 }
1995 },
1996 "variants": {
1997 "default": {
1998 "color": "{foundations.colors.brand.500}"
1999 },
2000 "primary": {
2001 "color": "{foundations.colors.brand.500}"
2002 }
2003 }
2004 },
2005 "progress": {
2006 "base": {
2007 "labelColor": "{semanticTokens.text.primary}",
2008 "labelFontSize": "{foundations.typography.size.14}",
2009 "labelFontWeight": "{foundations.typography.weight.550}",
2010 "descriptionColor": "{semanticTokens.text.muted}",
2011 "descriptionFontSize": "{foundations.typography.size.12}",
2012 "descriptionFontWeight": "{foundations.typography.weight.400}",
2013 "gap": "{foundations.spacing.[\"1.5\"]}",
2014 "fontFamily": "{foundations.typography.fontFamily.base}",
2015 "lineHeight": "{foundations.typography.lineHeight.130}",
2016 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
2017 },
2018 "track": {
2019 "height": "{foundations.spacing.[\"1.5\"]}",
2020 "radius": "{foundations.radius.full}",
2021 "background": "{semanticTokens.surface.muted}"
2022 },
2023 "indicator": {
2024 "background": "{semanticTokens.action.primary}"
2025 },
2026 "motion": {
2027 "duration": "{foundations.motion.duration.normal}",
2028 "easing": "{foundations.motion.easing.standard}"
2029 }
2030 },
2031 "sidebar": {
2032 "base": {
2033 "container": {
2034 "background": "{semanticTokens.surface.default}",
2035 "border": "{semanticTokens.border.default}",
2036 "width": "{foundations.maxWidth.sidebar}",
2037 "collapsedWidth": "{foundations.spacing.16}",
2038 "padding": "{foundations.spacing.2}"
2039 },
2040 "header": {
2041 "minHeight": "{foundations.spacing.14}",
2042 "titleColor": "{semanticTokens.text.muted}",
2043 "titleFontSize": "{foundations.typography.size.14}",
2044 "titleFontWeight": "{foundations.typography.weight.500}",
2045 "titleFontFamily": "{foundations.typography.fontFamily.base}",
2046 "titleLineHeight": "{foundations.typography.lineHeight.130}",
2047 "titleLetterSpacing": "{foundations.typography.letterSpacing.tighter}"
2048 },
2049 "item": {
2050 "radius": "{foundations.radius.md}",
2051 "height": "{foundations.spacing.9}",
2052 "paddingX": "{foundations.spacing.2}",
2053 "gap": "{foundations.spacing.3}",
2054 "fontSize": "{foundations.typography.size.14}",
2055 "fontWeight": "{foundations.typography.weight.500}",
2056 "fontFamily": "{foundations.typography.fontFamily.base}",
2057 "lineHeight": "{foundations.typography.lineHeight.130}",
2058 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
2059 "color": "{semanticTokens.text.muted}",
2060 "hover": {
2061 "background": "{semanticTokens.surface.hover}",
2062 "color": "{semanticTokens.text.primary}"
2063 },
2064 "active": {
2065 "background": "{foundations.colors.brand.200}",
2066 "color": "{semanticTokens.action.primary}"
2067 }
2068 },
2069 "section": {
2070 "titleColor": "{foundations.colors.neutral.400}",
2071 "titleFontSize": "{foundations.typography.size.10}",
2072 "titleFontFamily": "{foundations.typography.fontFamily.base}",
2073 "titleLineHeight": "{foundations.typography.lineHeight.130}",
2074 "titleLetterSpacing": "{foundations.typography.letterSpacing.tighter}",
2075 "gap": "{foundations.spacing.4}"
2076 },
2077 "toggle": {
2078 "color": "{foundations.colors.neutral.400}",
2079 "hoverColor": "{foundations.colors.neutral.500}"
2080 },
2081 "motion": {
2082 "duration": "{foundations.motion.duration.normal}"
2083 }
2084 }
2085 },
2086 "tour": {
2087 "backgroundColor": "{semanticTokens.surface.default}",
2088 "borderColor": "{semanticTokens.border.default}",
2089 "borderRadius": "{foundations.radius.lg}",
2090 "padding": "{foundations.spacing.4}",
2091 "gap": "{foundations.spacing.3}",
2092 "shadow": "{foundations.shadow.md}",
2093 "step": {
2094 "fontFamily": "{foundations.typography.fontFamily.base}",
2095 "fontWeight": "{foundations.typography.weight.550}",
2096 "fontStyle": "{foundations.other.fontStyleNormal}",
2097 "fontSize": "{foundations.typography.size.14}",
2098 "lineHeight": "{foundations.typography.lineHeight.130}",
2099 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
2100 "color": "{foundations.colors.neutral.650}"
2101 },
2102 "title": {
2103 "fontFamily": "{foundations.typography.fontFamily.base}",
2104 "fontWeight": "{foundations.typography.weight.550}",
2105 "fontStyle": "{foundations.other.fontStyleNormal}",
2106 "fontSize": "{foundations.typography.size.16}",
2107 "lineHeight": "{foundations.typography.lineHeight.130}",
2108 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
2109 "color": "{foundations.colors.neutral.850}"
2110 },
2111 "description": {
2112 "fontFamily": "{foundations.typography.fontFamily.base}",
2113 "fontWeight": "{foundations.typography.weight.400}",
2114 "fontStyle": "{foundations.other.fontStyleNormal}",
2115 "fontSize": "{foundations.typography.size.14}",
2116 "lineHeight": "{foundations.typography.lineHeight.130}",
2117 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
2118 "color": "{foundations.colors.neutral.650}"
2119 },
2120 "actions": {
2121 "gap": "{foundations.spacing.2}"
2122 },
2123 "arrow": {
2124 "size": "{foundations.typography.size.12}",
2125 "background": "{semanticTokens.surface.default}",
2126 "borderColor": "{semanticTokens.border.default}"
2127 }
2128 },
2129 "header": {
2130 "container": {
2131 "gapDesktop": "{foundations.spacing.3}",
2132 "gapMobile": "{foundations.spacing.2}",
2133 "minHeightDesktop": "{foundations.spacing.12}",
2134 "minHeightMobile": "59px"
2135 },
2136 "title": {
2137 "color": "{foundations.colors.neutral.850}",
2138 "fontSizeDesktop": "{foundations.typography.size.24}",
2139 "fontSizeMobile": "{foundations.typography.size.18}",
2140 "fontWeight": "{foundations.typography.weight.550}",
2141 "fontFamily": "{foundations.typography.fontFamily.base}",
2142 "lineHeight": "{foundations.typography.lineHeight.130}",
2143 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
2144 },
2145 "description": {
2146 "color": "{foundations.colors.neutral.650}",
2147 "fontSizeDesktop": "{foundations.typography.size.16}",
2148 "fontSizeMobile": "{foundations.typography.size.14}",
2149 "fontWeight": "{foundations.typography.weight.400}",
2150 "fontFamily": "{foundations.typography.fontFamily.base}",
2151 "lineHeight": "{foundations.typography.lineHeight.130}",
2152 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
2153 }
2154 },
2155 "navbar": {
2156 "container": {
2157 "height": "{foundations.spacing.16}",
2158 "background": "{foundations.colors.neutral.0}",
2159 "border": "{foundations.colors.neutral.150}",
2160 "radius": "{foundations.radius.md}",
2161 "iconColor": "{foundations.colors.neutral.550}"
2162 },
2163 "expanded": {
2164 "background": "{foundations.colors.neutral.0}"
2165 },
2166 "content": {
2167 "maxWidth": "{foundations.maxWidth.container}",
2168 "paddingX": "{foundations.spacing.5}",
2169 "gap": "{foundations.spacing.4}"
2170 },
2171 "start": {
2172 "gap": "{foundations.spacing.4}"
2173 },
2174 "end": {
2175 "gap": "{foundations.spacing.2}"
2176 },
2177 "logo": {
2178 "gap": "{foundations.spacing.2}"
2179 },
2180 "merchant": {
2181 "color": "{foundations.colors.neutral.850}",
2182 "fontSize": "{foundations.typography.size.14}",
2183 "fontWeight": "{foundations.typography.weight.550}",
2184 "fontFamily": "{foundations.typography.fontFamily.base}",
2185 "lineHeight": "{foundations.typography.lineHeight.130}",
2186 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
2187 "gap": "{foundations.spacing.5}",
2188 "triggerGap": "{foundations.spacing.1}",
2189 "paddingX": "{foundations.spacing.4}",
2190 "paddingY": "{foundations.spacing[\"2.5\"]}"
2191 },
2192 "action": {
2193 "gap": "{foundations.spacing.3}"
2194 },
2195 "user": {
2196 "nameColor": "{foundations.colors.neutral.850}",
2197 "roleColor": "{foundations.colors.neutral.650}",
2198 "roleFontSize": "{foundations.typography.size.12}",
2199 "nameFontSize": "{foundations.typography.size.12}",
2200 "nameFontWeight": "{foundations.typography.weight.550}",
2201 "roleFontWeight": "{foundations.typography.weight.400}",
2202 "nameFontFamily": "{foundations.typography.fontFamily.base}",
2203 "roleFontFamily": "{foundations.typography.fontFamily.base}",
2204 "nameLineHeight": "{foundations.typography.lineHeight.130}",
2205 "roleLineHeight": "{foundations.typography.lineHeight.130}",
2206 "nameLetterSpacing": "{foundations.typography.letterSpacing.tighter}",
2207 "roleLetterSpacing": "{foundations.typography.letterSpacing.tighter}",
2208 "gap": "{foundations.spacing.2}",
2209 "paddingX": "{foundations.spacing[\"2.5\"]}",
2210 "paddingY": "{foundations.spacing[\"2.5\"]}",
2211 "triggerHover": "{foundations.colors.neutral.950}",
2212 "focusColor": "{foundations.colors.brand.500}"
2213 },
2214 "motion": {
2215 "duration": "{foundations.motion.duration.fast}"
2216 }
2217 },
2218 "drawer": {
2219 "base": {
2220 "overlay": {
2221 "background": "{foundations.other.overlayBackground}",
2222 "opacity": "{foundations.opacity.disabled}",
2223 "backdropBlur": "{foundations.other.backdropBlur}"
2224 },
2225 "content": {
2226 "background": "{foundations.colors.neutral.0}",
2227 "radius": "{foundations.radius.xs}",
2228 "borderColor": "{foundations.colors.neutral.150}",
2229 "color": "{semanticTokens.text.primary}",
2230 "borderWidth": "{foundations.border.width.1}",
2231 "shadow": "{foundations.shadow.drawer}",
2232 "padding": "{foundations.spacing.6}",
2233 "maxHeight": "{foundations.other.maxHeight}"
2234 },
2235 "header": {
2236 "gap": "{foundations.spacing.2}"
2237 },
2238 "footer": {
2239 "paddingTop": "{foundations.spacing.4}",
2240 "gap": "{foundations.spacing.2}",
2241 "align": "end"
2242 },
2243 "title": {
2244 "color": "{foundations.colors.neutral.850}",
2245 "fontSize": "{foundations.typography.size.24}",
2246 "fontFamily": "{foundations.typography.fontFamily.base}",
2247 "lineHeight": "{foundations.typography.lineHeight.130}",
2248 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
2249 },
2250 "description": {
2251 "color": "{foundations.colors.neutral.650}",
2252 "fontSize": "{foundations.typography.size.16}",
2253 "fontFamily": "{foundations.typography.fontFamily.base}",
2254 "lineHeight": "{foundations.typography.lineHeight.130}",
2255 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
2256 },
2257 "close": {
2258 "size": "{foundations.typography.size.12}",
2259 "color": "{foundations.colors.neutral.850}"
2260 }
2261 }
2262 },
2263 "icon": {
2264 "base": {
2265 "color": "{semanticTokens.action.primary}"
2266 },
2267 "sizes": {
2268 "xs": "{foundations.typography.size.12}",
2269 "sm": "{foundations.typography.size.16}",
2270 "md": "{foundations.typography.size.20}",
2271 "lg": "{foundations.typography.size.24}",
2272 "xl": "{foundations.typography.size.32}"
2273 },
2274 "variants": {
2275 "default": {
2276 "color": "{semanticTokens.action.primary}"
2277 },
2278 "muted": {
2279 "color": "{semanticTokens.text.muted}"
2280 },
2281 "danger": {
2282 "color": "{foundations.colors.feedback.error.500}"
2283 },
2284 "success": {
2285 "color": "{foundations.colors.feedback.success.500}"
2286 }
2287 }
2288 },
2289 "feedback": {
2290 "base": {
2291 "fontWeight": "{foundations.typography.weight.550}",
2292 "fontFamily": "{foundations.typography.fontFamily.base}",
2293 "lineHeight": "{foundations.typography.lineHeight.130}",
2294 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
2295 "actions": {
2296 "gap": "{foundations.spacing.2}"
2297 }
2298 },
2299 "sizes": {
2300 "medium": {
2301 "minWidth": "{foundations.minWidth.feedback}",
2302 "maxWidth": "{foundations.maxWidth.feedbackMidiumMaxWidth}",
2303 "iconSize": "{foundations.spacing.6}",
2304 "titleSize": "{foundations.typography.size.30}",
2305 "descriptionSize": "{foundations.typography.size.18}",
2306 "conatinerPaddingY": "{foundations.spacing.6}",
2307 "conatinerPaddingX": "{foundations.spacing.5}",
2308 "imgMarginBottom": "{foundations.spacing.8}",
2309 "imgMaxWidth": "{foundations.maxWidth.feedbackMidiumImgMaxWidth}",
2310 "descriptionMarginTop": "{foundations.spacing.4}",
2311 "actionsMarginTop": "{foundations.spacing.8}"
2312 },
2313 "small": {
2314 "minWidth": "{foundations.minWidth.feedback}",
2315 "maxWidth": "{foundations.maxWidth.feedbackSmallMaxWidth}",
2316 "iconSize": "{foundations.spacing.4}",
2317 "titleSize": "{foundations.typography.size.24}",
2318 "descriptionSize": "{foundations.typography.size.16}",
2319 "conatinerPaddingY": "{foundations.spacing.6}",
2320 "conatinerPaddingX": "{foundations.spacing.5}",
2321 "imgMarginBottom": "{foundations.spacing.6}",
2322 "imgMaxWidth": "{foundations.maxWidth.feedbackSmallImgMaxWidth}",
2323 "descriptionMarginTop": "{foundations.spacing.3}",
2324 "actionsMarginTop": "{foundations.spacing.6}"
2325 }
2326 }
2327 },
2328 "expansionPanel": {
2329 "base": {
2330 "fontFamily": "{foundations.typography.fontFamily.base}",
2331 "lineHeight": "{foundations.typography.lineHeight.130}",
2332 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
2333 "borderRadius": "{foundations.radius.xl}",
2334 "borderColor": "{foundations.colors.neutral.150}",
2335 "title": {
2336 "fontWeight": "{foundations.typography.weight.550}",
2337 "fontSize": "{foundations.typography.size.16}",
2338 "color": "{foundations.colors.neutral.850}"
2339 },
2340 "description": {
2341 "fontWeight": "{foundations.typography.weight.400}",
2342 "fontSize": "{foundations.typography.size.14}",
2343 "fontColour": "{foundations.colors.neutral.650}"
2344 },
2345 "actions": {
2346 "gap": "{foundations.spacing.2}"
2347 },
2348 "content": {
2349 "marginY": "{foundations.spacing.8}"
2350 }
2351 },
2352 "sizes": {
2353 "medium": {
2354 "containerPadding": "{foundations.spacing.6}",
2355 "containerMaxWidth": "{foundations.maxWidth.containerExpansionPanelMedium}"
2356 },
2357 "small": {
2358 "containerPadding": "{foundations.spacing.5}",
2359 "containerMaxWidth": "{foundations.maxWidth.containerExpansionPanelSmall}"
2360 }
2361 }
2362 },
2363 "tile": {
2364 "base": {
2365 "background": "{foundations.colors.neutral.0}",
2366 "borderRadius": "{foundations.radius.xl}",
2367 "borderColor": "{foundations.colors.neutral.150}",
2368 "fontFamily": "{foundations.typography.fontFamily.base}",
2369 "lineHeight": "{foundations.typography.lineHeight.130}",
2370 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
2371 "padding": "{foundations.spacing.3}",
2372 "paddingWithDescription": "{foundations.spacing.4}",
2373 "title": {
2374 "color": "{foundations.colors.neutral.850}",
2375 "fontWeight": "{foundations.typography.weight.550}"
2376 },
2377 "description": {
2378 "color": "{foundations.colors.neutral.650}",
2379 "fontWeight": "{foundations.typography.weight.400}",
2380 "paddingTop": "{foundations.spacing.1}"
2381 },
2382 "icon": {
2383 "color": "{foundations.colors.brand.500}"
2384 },
2385 "variants": {
2386 "hover": {
2387 "background": "{foundations.colors.neutral.950}",
2388 "borderColor": "{foundations.colors.neutral.350}"
2389 },
2390 "select": {
2391 "background": "{foundations.colors.brand.50}",
2392 "borderColor": "{foundations.colors.brand.500}",
2393 "colorTitle": "{foundations.colors.brand.500}",
2394 "colorDescription": "{foundations.colors.brand.500}"
2395 },
2396 "selectHover": {
2397 "background": "{foundations.colors.brand.100}"
2398 },
2399 "error": {
2400 "background": "{foundations.colors.neutral.0}",
2401 "borderColor": "{foundations.colors.feedback.error.600}",
2402 "colorTitle": "{foundations.colors.neutral.850}",
2403 "colorDescription": "{foundations.colors.neutral.850}"
2404 }
2405 }
2406 },
2407 "sizes": {
2408 "small": {
2409 "titleFontSize": "{foundations.typography.size.14}",
2410 "descriptionFontSize": "{foundations.typography.size.12}"
2411 },
2412 "medium": {
2413 "titleFontSize": "{foundations.typography.size.16}",
2414 "descriptionFontSize": "{foundations.typography.size.14}"
2415 }
2416 }
2417 }
2418 }
2419}