Nebula UI
Introduction
IconLabelColorsTypography
Button
AlertBadgeBannerLoaderFeedbackProgress BarEmptyTooltipCarousel
HeaderNavbarSidebarTabsPaginationBreadcrumbSeparator
AvatarCardsModule BoxChartsColor CardsTableCarouselCalendarList Item
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

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 "color": "{foundations.colors.neutral.850}",
1520 "fontSize": "{foundations.typography.size.24}",
1521 "fontWeight": "{foundations.typography.weight.550}",
1522 "lineHeight": "{foundations.typography.lineHeight.tight}",
1523 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
1524 },
1525 "description": {
1526 "color": "{foundations.colors.neutral.750}",
1527 "fontSize": "{foundations.typography.size.16}",
1528 "fontWeight": "{foundations.typography.weight.400}",
1529 "lineHeight": "{foundations.typography.lineHeight.130}",
1530 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
1531 }
1532 },
1533 "moduleBox": {
1534 "lineHeight": "{foundations.typography.lineHeight.tight}",
1535 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1536 "fontFamily": "{foundations.typography.fontFamily.base}",
1537 "backgroundColor": "{semanticTokens.surface.default}",
1538 "borderColor": "{semanticTokens.border.default}",
1539 "borderRadius": "{foundations.radius.lg}",
1540 "padding": "{foundations.spacing.6}",
1541 "gap": "{foundations.spacing.6}",
1542 "header": {
1543 "gap": "{foundations.spacing.3}"
1544 },
1545 "slot": {
1546 "minHeight": "{foundations.spacing.28}",
1547 "background": "{foundations.colors.neutral.175}",
1548 "border": "{foundations.colors.brand.500}",
1549 "borderRadius": "{foundations.radius.none}",
1550 "padding": "{foundations.spacing.6}",
1551 "color": "{foundations.colors.neutral.750}"
1552 },
1553 "footer": {
1554 "gap": "{foundations.spacing.3}"
1555 },
1556 "title": {
1557 "fontWeight": "{foundations.typography.weight.550}",
1558 "fontStyle": "{foundations.other.fontStyleNormal}",
1559 "fontSize": "{foundations.typography.size.18}",
1560 "color": "{foundations.colors.neutral.850}"
1561 },
1562 "description": {
1563 "marginTop": "{foundations.spacing.1}",
1564 "fontWeight": "{foundations.typography.weight.400}",
1565 "fontStyle": "{foundations.other.fontStyleNormal}",
1566 "fontSize": "{foundations.typography.size.14}",
1567 "color": "{foundations.colors.neutral.650}"
1568 },
1569 "content": {
1570 "marginTop": "{foundations.spacing.4}"
1571 }
1572 },
1573 "charts": {
1574 "backgroundColor": "{foundations.other.transparent}",
1575 "borderColor": "{foundations.other.transparent}",
1576 "borderRadius": "{foundations.radius.lg}",
1577 "padding": "{foundations.spacing.0}",
1578 "height": "{foundations.other.chartHeight}",
1579 "fontFamily": "{foundations.typography.fontFamily.base}",
1580 "lineHeight": "{foundations.typography.lineHeight.130}",
1581 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1582 "title": {
1583 "color": "{semanticTokens.text.primary}",
1584 "fontSize": "{foundations.typography.size.16}",
1585 "fontWeight": "{foundations.typography.weight.550}"
1586 },
1587 "subtitle": {
1588 "color": "{semanticTokens.text.muted}",
1589 "fontSize": "{foundations.typography.size.14}",
1590 "fontWeight": "{foundations.typography.weight.400}"
1591 },
1592 "grid": {
1593 "color": "{semanticTokens.border.default}",
1594 "dasharray": "{foundations.border.width.0}"
1595 },
1596 "axis": {
1597 "lineColor": "{semanticTokens.border.default}",
1598 "labelColor": "{semanticTokens.text.muted}",
1599 "fontSize": "{foundations.typography.size.12}"
1600 },
1601 "baseline": {
1602 "color": "{semanticTokens.border.default}",
1603 "strokeWidth": "{foundations.border.width.1}",
1604 "dasharray": "{foundations.border.width.0}"
1605 },
1606 "legend": {
1607 "color": "{semanticTokens.text.secondary}",
1608 "fontSize": "{foundations.typography.size.14}",
1609 "fontWeight": "{foundations.typography.weight.500}",
1610 "dotSize": "{foundations.typography.size.10}",
1611 "gap": "{foundations.spacing.4}"
1612 },
1613 "tooltip": {
1614 "background": "{semanticTokens.surface.default}",
1615 "borderColor": "{semanticTokens.border.default}",
1616 "radius": "{foundations.radius.md}",
1617 "titleColor": "{semanticTokens.text.secondary}",
1618 "valueColor": "{semanticTokens.text.primary}",
1619 "titleFontSize": "{foundations.typography.size.12}",
1620 "titleFontWeight": "{foundations.typography.weight.550}",
1621 "valueFontSize": "{foundations.typography.size.14}",
1622 "valueFontWeight": "{foundations.typography.weight.600}"
1623 },
1624 "bar": {
1625 "radius": "{foundations.spacing.[\"2.5\"]}",
1626 "gap": "{foundations.spacing.2}",
1627 "categoryGap": "{foundations.other.chartCategoryGap}",
1628 "maxBarSize": "{foundations.spacing.14}"
1629 },
1630 "line": {
1631 "stroke": "{semanticTokens.action.primary}",
1632 "strokeWidth": "{foundations.border.width.2}",
1633 "curveType": "{foundations.other.chartCurveType}",
1634 "activeDotRadius": "{foundations.spacing.1}"
1635 },
1636 "pie": {
1637 "strokeColor": "{semanticTokens.surface.default}",
1638 "strokeWidth": "{foundations.border.width.2}",
1639 "paddingAngle": "{foundations.spacing.0}",
1640 "innerRadius": "{foundations.spacing.0}",
1641 "outerRadius": "{foundations.spacing.18}"
1642 },
1643 "donut": {
1644 "innerRadius": "{foundations.spacing.13}",
1645 "outerRadius": "{foundations.spacing.18}",
1646 "centerValueColor": "{semanticTokens.text.secondary}",
1647 "centerValueSize": "{foundations.typography.size.24}",
1648 "centerValueWeight": "{foundations.typography.weight.600}",
1649 "centerLabelColor": "{semanticTokens.text.muted}",
1650 "centerLabelSize": "{foundations.typography.size.12}",
1651 "centerLabelWeight": "{foundations.typography.weight.500}"
1652 },
1653 "emptyState": {
1654 "color": "{semanticTokens.text.muted}",
1655 "fontSize": "{foundations.typography.size.14}",
1656 "fontWeight": "{foundations.typography.weight.400}",
1657 "lineHeight": "{foundations.typography.lineHeight.130}",
1658 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
1659 }
1660 },
1661 "integrationCard": {
1662 "backgroundColor": "{foundations.colors.neutral.950}",
1663 "borderColor": "{foundations.colors.neutral.200}",
1664 "borderRadius": "{foundations.radius.xl}",
1665 "title": {
1666 "color": "{foundations.colors.neutral.900}",
1667 "fontSize": "{foundations.typography.size.16}",
1668 "fontWeight": "{foundations.typography.weight.550}"
1669 },
1670 "description": {
1671 "color": "{foundations.colors.neutral.500}",
1672 "fontSize": "{foundations.typography.size.14}"
1673 },
1674 "link": {
1675 "color": "{foundations.colors.brand.500}",
1676 "fontSize": "{foundations.typography.size.14}",
1677 "fontWeight": "{foundations.typography.weight.550}"
1678 },
1679 "variants": {
1680 "default": {
1681 "borderColor": "{foundations.colors.neutral.200}"
1682 },
1683 "subtle": {
1684 "borderColor": "{foundations.colors.neutral.225}"
1685 },
1686 "none": {
1687 "borderColor": "{foundations.other.transparent}"
1688 }
1689 }
1690 },
1691 "carousel": {
1692 "gap": "{foundations.spacing.4}",
1693 "cursorGrab": "{foundations.other.cursor.grab}",
1694 "cursorGrabbing": "{foundations.other.cursor.grabbing}",
1695 "scrollBehavior": "{foundations.other.scrollBehavior}",
1696 "card": {
1697 "background": "{foundations.colors.neutral.950}",
1698 "borderRadius": "{foundations.radius.lg}",
1699 "color": "{foundations.colors.neutral.750}",
1700 "padding": "{foundations.spacing.4}",
1701 "fontSize": "{foundations.typography.size.14}",
1702 "fontFamily": "{foundations.typography.fontFamily.base}",
1703 "fontWeight": "{foundations.typography.weight.550}",
1704 "lineHeight": "{foundations.typography.lineHeight.130}",
1705 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
1706 }
1707 },
1708 "calendar": {
1709 "base": {
1710 "background": "{semanticTokens.surface.default}",
1711 "radius": "{foundations.radius.md}",
1712 "text": "{semanticTokens.text.primary}",
1713 "fontFamily": "{foundations.typography.fontFamily.base}",
1714 "lineHeight": "{foundations.typography.lineHeight.130}",
1715 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1716 "muted": "{semanticTokens.text.muted}",
1717 "border": "{semanticTokens.border.default}",
1718 "item": {
1719 "size": "{foundations.spacing.8}",
1720 "radius": "{foundations.radius.sm}",
1721 "default": {
1722 "color": "{semanticTokens.text.primary}",
1723 "background": "{foundations.other.transparent}"
1724 },
1725 "hover": {
1726 "background": "{foundations.colors.neutral.150}",
1727 "color": "{semanticTokens.text.primary}"
1728 },
1729 "current": {
1730 "background": "{foundations.colors.neutral.150}",
1731 "color": "{semanticTokens.text.primary}"
1732 },
1733 "active": {
1734 "background": "{foundations.colors.brand.500}",
1735 "color": "{semanticTokens.text.inverse}"
1736 }
1737 }
1738 }
1739 },
1740 "popover": {
1741 "background": "{foundations.colors.neutral.0}",
1742 "color": "{foundations.colors.neutral.850}",
1743 "border": "{foundations.colors.neutral.150}",
1744 "radius": "{foundations.radius.lg}",
1745 "shadow": "{foundations.shadow.dropdown}",
1746 "padding": "{foundations.spacing.3}",
1747 "fontSize": "{foundations.typography.size.16}",
1748 "fontWeight": "{foundations.typography.weight.400}",
1749 "lineHeight": "{foundations.typography.lineHeight.normal}",
1750 "fontFamily": "{foundations.typography.fontFamily.base}",
1751 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1752 "header": {
1753 "fontSize": "{foundations.typography.size.16}",
1754 "fontWeight": "{foundations.typography.weight.400}",
1755 "color": "{foundations.colors.neutral.850}"
1756 },
1757 "description": {
1758 "fontSize": "{foundations.typography.size.14}",
1759 "fontWeight": "{foundations.typography.weight.400}",
1760 "color": "{foundations.colors.neutral.650}"
1761 },
1762 "divider": {
1763 "color": "{foundations.colors.neutral.150}"
1764 },
1765 "motion": {
1766 "duration": "{foundations.motion.duration.normal}",
1767 "easing": "{foundations.motion.easing.out}"
1768 },
1769 "zIndex": "{foundations.zIndex.dropdown}"
1770 },
1771 "pagination": {
1772 "base": {
1773 "radius": "{foundations.radius.md}",
1774 "gap": "{foundations.spacing.2}",
1775 "fontFamily": "{foundations.typography.fontFamily.base}",
1776 "lineHeight": "{foundations.typography.lineHeight.130}",
1777 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1778 "pageNumber": {
1779 "fontSize": "{foundations.typography.size.14}",
1780 "fontWeight": "{foundations.typography.weight.500}",
1781 "color": "{semanticTokens.text.primary}"
1782 },
1783 "icon": {
1784 "size": "{foundations.typography.size.16}",
1785 "color": "{foundations.colors.neutral.500}"
1786 },
1787 "item": {
1788 "default": {
1789 "background": "{semanticTokens.surface.default}",
1790 "border": "{semanticTokens.border.default}",
1791 "color": "{semanticTokens.text.primary}"
1792 },
1793 "hover": {
1794 "background": "{foundations.colors.brand.100}",
1795 "border": "{semanticTokens.border.default}"
1796 },
1797 "active": {
1798 "background": "{foundations.colors.brand.200}",
1799 "text": "{semanticTokens.action.primary}",
1800 "border": "{foundations.other.transparent}"
1801 },
1802 "focus": {
1803 "border": "{semanticTokens.border.focus}"
1804 },
1805 "disabled": {
1806 "background": "{foundations.colors.neutral.0}",
1807 "text": "{foundations.colors.neutral.400}",
1808 "opacity": "{foundations.opacity.overlay}"
1809 }
1810 }
1811 }
1812 },
1813 "tabs": {
1814 "base": {
1815 "fontFamily": "{foundations.typography.fontFamily.base}",
1816 "lineHeight": "{foundations.typography.lineHeight.130}",
1817 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1818 "tabsList": {
1819 "background": "{foundations.colors.neutral.150}",
1820 "color": "{foundations.colors.neutral.750}",
1821 "radius": "{foundations.radius.sm}"
1822 },
1823 "tabsTrigger": {
1824 "color": "{foundations.colors.neutral.750}",
1825 "hover": {
1826 "background": "{foundations.colors.neutral.950}",
1827 "color": "{foundations.colors.neutral.850}"
1828 },
1829 "active": {
1830 "background": "{foundations.colors.neutral.0}",
1831 "color": "{foundations.colors.neutral.850}"
1832 },
1833 "disabled": {
1834 "background": "{foundations.colors.neutral.0}",
1835 "color": "{foundations.colors.neutral.550}",
1836 "opacity": "{foundations.opacity.overlay}"
1837 }
1838 },
1839 "tabsFocusRing": {
1840 "innerColor": "{foundations.colors.neutral.0}",
1841 "outerColor": "{foundations.colors.brand.500}",
1842 "innerSize": "{foundations.border.width.2}",
1843 "outerSize": "{foundations.border.width.4}"
1844 }
1845 },
1846 "sizes": {
1847 "medium": {
1848 "fontSize": "{foundations.typography.size.14}",
1849 "fontWeight": "{foundations.typography.weight.500}"
1850 },
1851 "small": {
1852 "fontSize": "{foundations.typography.size.12}",
1853 "fontWeight": "{foundations.typography.weight.500}"
1854 }
1855 }
1856 },
1857 "table": {
1858 "base": {
1859 "background": "{semanticTokens.surface.default}",
1860 "border": "{semanticTokens.border.default}",
1861 "radius": "{foundations.radius.md}",
1862 "shadow": "{foundations.shadow.md}",
1863 "headerBackground": "{foundations.colors.neutral.950}",
1864 "headerTextColor": "{foundations.colors.neutral.650}",
1865 "headerFontSize": "{foundations.typography.size.12}",
1866 "headerFontWeight": "{foundations.typography.weight.600}",
1867 "rowHoverBackground": "{semanticTokens.surface.hover}",
1868 "rowSelectedBackground": "{foundations.colors.brand.200}",
1869 "cellTextColor": "{semanticTokens.text.primary}",
1870 "cellFontSize": "{foundations.typography.size.14}",
1871 "descriptionColor": "{foundations.colors.neutral.650}",
1872 "descriptionFontSize": "{foundations.typography.size.12}",
1873 "descriptionFontWeight": "{foundations.typography.weight.400}",
1874 "fontFamily": "{foundations.typography.fontFamily.base}",
1875 "lineHeight": "{foundations.typography.lineHeight.130}",
1876 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
1877 }
1878 },
1879 "breadcrumb": {
1880 "base": {
1881 "gap": "{foundations.spacing.2}",
1882 "maxLabelLength": "24",
1883 "fontFamily": "{foundations.typography.fontFamily.base}",
1884 "lineHeight": "{foundations.typography.lineHeight.130}",
1885 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
1886 "link": {
1887 "default": {
1888 "color": "{foundations.colors.brand.500}",
1889 "fontWeight": "{foundations.typography.weight.600}"
1890 },
1891 "hover": {
1892 "color": "{foundations.colors.brand.700}",
1893 "textDecoration": "underline"
1894 }
1895 },
1896 "page": {
1897 "color": "{foundations.colors.neutral.650}",
1898 "fontWeight": "{foundations.typography.weight.550}"
1899 },
1900 "separator": {
1901 "color": "{foundations.colors.neutral.400}",
1902 "size": "{foundations.typography.size.14}"
1903 }
1904 },
1905 "sizes": {
1906 "medium": {
1907 "fontSize": "{foundations.typography.size.14}",
1908 "gap": "{foundations.spacing.2}",
1909 "itemMinHeight": "{foundations.typography.size.20}"
1910 },
1911 "small": {
1912 "fontSize": "{foundations.typography.size.12}",
1913 "gap": "{foundations.spacing.2}",
1914 "itemMinHeight": "{foundations.typography.size.18}"
1915 }
1916 }
1917 },
1918 "loader": {
1919 "base": {
1920 "fontFamily": "{foundations.typography.fontFamily.base}",
1921 "lineHeight": "{foundations.typography.lineHeight.130}",
1922 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
1923 },
1924 "sizes": {
1925 "small": {
1926 "spinnerSize": "{foundations.typography.size.16}",
1927 "minWidth": "200px",
1928 "maxWidth": "360px",
1929 "minHeight": "200px",
1930 "paddingX": "{foundations.spacing.4}",
1931 "paddingY": "{foundations.spacing.4}",
1932 "contentGap": "{foundations.spacing.4}",
1933 "textGap": "{foundations.spacing.1}",
1934 "labelFontWeight": "{foundations.typography.weight.550}",
1935 "descriptionFontWeight": "{foundations.typography.weight.400}",
1936 "labelFontSize": "{foundations.typography.size.16}",
1937 "descriptionFontSize": "{foundations.typography.size.12}",
1938 "labelColor": "{foundations.colors.neutral.850}",
1939 "descriptionColor": "{foundations.colors.neutral.650}"
1940 },
1941 "medium": {
1942 "spinnerSize": "{foundations.typography.size.20}",
1943 "minWidth": "280px",
1944 "maxWidth": "400px",
1945 "minHeight": "280px",
1946 "paddingX": "{foundations.spacing.5}",
1947 "paddingY": "{foundations.spacing.5}",
1948 "contentGap": "{foundations.spacing.5}",
1949 "textGap": "{foundations.spacing[\"1.5\"]}",
1950 "labelFontWeight": "{foundations.typography.weight.550}",
1951 "descriptionFontWeight": "{foundations.typography.weight.400}",
1952 "labelFontSize": "{foundations.typography.size.18}",
1953 "descriptionFontSize": "{foundations.typography.size.14}",
1954 "labelColor": "{foundations.colors.neutral.850}",
1955 "descriptionColor": "{foundations.colors.neutral.650}"
1956 },
1957 "large": {
1958 "spinnerSize": "{foundations.typography.size.24}",
1959 "minWidth": "280px",
1960 "maxWidth": "400px",
1961 "minHeight": "280px",
1962 "paddingX": "{foundations.spacing.6}",
1963 "paddingY": "{foundations.spacing.6}",
1964 "contentGap": "{foundations.spacing.5}",
1965 "textGap": "{foundations.spacing[\"1.5\"]}",
1966 "labelFontWeight": "{foundations.typography.weight.550}",
1967 "descriptionFontWeight": "{foundations.typography.weight.400}",
1968 "labelFontSize": "{foundations.typography.size.18}",
1969 "descriptionFontSize": "{foundations.typography.size.14}",
1970 "labelColor": "{foundations.colors.neutral.850}",
1971 "descriptionColor": "{foundations.colors.neutral.650}"
1972 },
1973 "extraLarge": {
1974 "spinnerSize": "{foundations.typography.size.32}",
1975 "minWidth": "280px",
1976 "maxWidth": "400px",
1977 "minHeight": "280px",
1978 "paddingX": "{foundations.spacing.8}",
1979 "paddingY": "{foundations.spacing.8}",
1980 "contentGap": "{foundations.spacing.5}",
1981 "textGap": "{foundations.spacing[\"1.5\"]}",
1982 "labelFontWeight": "{foundations.typography.weight.550}",
1983 "descriptionFontWeight": "{foundations.typography.weight.400}",
1984 "labelFontSize": "{foundations.typography.size.18}",
1985 "descriptionFontSize": "{foundations.typography.size.14}",
1986 "labelColor": "{foundations.colors.neutral.850}",
1987 "descriptionColor": "{foundations.colors.neutral.650}"
1988 }
1989 },
1990 "variants": {
1991 "default": {
1992 "color": "{foundations.colors.brand.500}"
1993 },
1994 "primary": {
1995 "color": "{foundations.colors.brand.500}"
1996 }
1997 }
1998 },
1999 "progress": {
2000 "base": {
2001 "labelColor": "{semanticTokens.text.primary}",
2002 "labelFontSize": "{foundations.typography.size.14}",
2003 "labelFontWeight": "{foundations.typography.weight.550}",
2004 "descriptionColor": "{semanticTokens.text.muted}",
2005 "descriptionFontSize": "{foundations.typography.size.12}",
2006 "descriptionFontWeight": "{foundations.typography.weight.400}",
2007 "gap": "{foundations.spacing.[\"1.5\"]}",
2008 "fontFamily": "{foundations.typography.fontFamily.base}",
2009 "lineHeight": "{foundations.typography.lineHeight.130}",
2010 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
2011 },
2012 "track": {
2013 "height": "{foundations.spacing.[\"1.5\"]}",
2014 "radius": "{foundations.radius.full}",
2015 "background": "{semanticTokens.surface.muted}"
2016 },
2017 "indicator": {
2018 "background": "{semanticTokens.action.primary}"
2019 },
2020 "motion": {
2021 "duration": "{foundations.motion.duration.normal}",
2022 "easing": "{foundations.motion.easing.standard}"
2023 }
2024 },
2025 "sidebar": {
2026 "base": {
2027 "container": {
2028 "background": "{semanticTokens.surface.default}",
2029 "border": "{semanticTokens.border.default}",
2030 "width": "{foundations.maxWidth.sidebar}",
2031 "collapsedWidth": "{foundations.spacing.16}",
2032 "padding": "{foundations.spacing.2}"
2033 },
2034 "header": {
2035 "minHeight": "{foundations.spacing.14}",
2036 "titleColor": "{semanticTokens.text.muted}",
2037 "titleFontSize": "{foundations.typography.size.14}",
2038 "titleFontWeight": "{foundations.typography.weight.500}",
2039 "titleFontFamily": "{foundations.typography.fontFamily.base}",
2040 "titleLineHeight": "{foundations.typography.lineHeight.130}",
2041 "titleLetterSpacing": "{foundations.typography.letterSpacing.tighter}"
2042 },
2043 "item": {
2044 "radius": "{foundations.radius.md}",
2045 "height": "{foundations.spacing.9}",
2046 "paddingX": "{foundations.spacing.2}",
2047 "gap": "{foundations.spacing.3}",
2048 "fontSize": "{foundations.typography.size.14}",
2049 "fontWeight": "{foundations.typography.weight.500}",
2050 "fontFamily": "{foundations.typography.fontFamily.base}",
2051 "lineHeight": "{foundations.typography.lineHeight.130}",
2052 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
2053 "color": "{semanticTokens.text.muted}",
2054 "hover": {
2055 "background": "{semanticTokens.surface.hover}",
2056 "color": "{semanticTokens.text.primary}"
2057 },
2058 "active": {
2059 "background": "{foundations.colors.brand.200}",
2060 "color": "{semanticTokens.action.primary}"
2061 }
2062 },
2063 "section": {
2064 "titleColor": "{foundations.colors.neutral.400}",
2065 "titleFontSize": "{foundations.typography.size.10}",
2066 "titleFontFamily": "{foundations.typography.fontFamily.base}",
2067 "titleLineHeight": "{foundations.typography.lineHeight.130}",
2068 "titleLetterSpacing": "{foundations.typography.letterSpacing.tighter}",
2069 "gap": "{foundations.spacing.4}"
2070 },
2071 "toggle": {
2072 "color": "{foundations.colors.neutral.400}",
2073 "hoverColor": "{foundations.colors.neutral.500}"
2074 },
2075 "motion": {
2076 "duration": "{foundations.motion.duration.normal}"
2077 }
2078 }
2079 },
2080 "tour": {
2081 "backgroundColor": "{semanticTokens.surface.default}",
2082 "borderColor": "{semanticTokens.border.default}",
2083 "borderRadius": "{foundations.radius.lg}",
2084 "padding": "{foundations.spacing.4}",
2085 "gap": "{foundations.spacing.3}",
2086 "shadow": "{foundations.shadow.md}",
2087 "step": {
2088 "fontFamily": "{foundations.typography.fontFamily.base}",
2089 "fontWeight": "{foundations.typography.weight.550}",
2090 "fontStyle": "{foundations.other.fontStyleNormal}",
2091 "fontSize": "{foundations.typography.size.14}",
2092 "lineHeight": "{foundations.typography.lineHeight.130}",
2093 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
2094 "color": "{foundations.colors.neutral.650}"
2095 },
2096 "title": {
2097 "fontFamily": "{foundations.typography.fontFamily.base}",
2098 "fontWeight": "{foundations.typography.weight.550}",
2099 "fontStyle": "{foundations.other.fontStyleNormal}",
2100 "fontSize": "{foundations.typography.size.16}",
2101 "lineHeight": "{foundations.typography.lineHeight.130}",
2102 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
2103 "color": "{foundations.colors.neutral.850}"
2104 },
2105 "description": {
2106 "fontFamily": "{foundations.typography.fontFamily.base}",
2107 "fontWeight": "{foundations.typography.weight.400}",
2108 "fontStyle": "{foundations.other.fontStyleNormal}",
2109 "fontSize": "{foundations.typography.size.14}",
2110 "lineHeight": "{foundations.typography.lineHeight.130}",
2111 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
2112 "color": "{foundations.colors.neutral.650}"
2113 },
2114 "actions": {
2115 "gap": "{foundations.spacing.2}"
2116 },
2117 "arrow": {
2118 "size": "{foundations.typography.size.12}",
2119 "background": "{semanticTokens.surface.default}",
2120 "borderColor": "{semanticTokens.border.default}"
2121 }
2122 },
2123 "header": {
2124 "container": {
2125 "gapDesktop": "{foundations.spacing.3}",
2126 "gapMobile": "{foundations.spacing.2}",
2127 "minHeightDesktop": "{foundations.spacing.12}",
2128 "minHeightMobile": "59px"
2129 },
2130 "title": {
2131 "color": "{foundations.colors.neutral.850}",
2132 "fontSizeDesktop": "{foundations.typography.size.24}",
2133 "fontSizeMobile": "{foundations.typography.size.18}",
2134 "fontWeight": "{foundations.typography.weight.550}",
2135 "fontFamily": "{foundations.typography.fontFamily.base}",
2136 "lineHeight": "{foundations.typography.lineHeight.130}",
2137 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
2138 },
2139 "description": {
2140 "color": "{foundations.colors.neutral.650}",
2141 "fontSizeDesktop": "{foundations.typography.size.16}",
2142 "fontSizeMobile": "{foundations.typography.size.14}",
2143 "fontWeight": "{foundations.typography.weight.400}",
2144 "fontFamily": "{foundations.typography.fontFamily.base}",
2145 "lineHeight": "{foundations.typography.lineHeight.130}",
2146 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
2147 }
2148 },
2149 "navbar": {
2150 "container": {
2151 "height": "{foundations.spacing.16}",
2152 "background": "{foundations.colors.neutral.0}",
2153 "border": "{foundations.colors.neutral.150}",
2154 "radius": "{foundations.radius.md}",
2155 "iconColor": "{foundations.colors.neutral.550}"
2156 },
2157 "expanded": {
2158 "background": "{foundations.colors.neutral.0}"
2159 },
2160 "content": {
2161 "maxWidth": "{foundations.maxWidth.container}",
2162 "paddingX": "{foundations.spacing.5}",
2163 "gap": "{foundations.spacing.4}"
2164 },
2165 "start": {
2166 "gap": "{foundations.spacing.4}"
2167 },
2168 "end": {
2169 "gap": "{foundations.spacing.2}"
2170 },
2171 "logo": {
2172 "gap": "{foundations.spacing.2}"
2173 },
2174 "merchant": {
2175 "color": "{foundations.colors.neutral.850}",
2176 "fontSize": "{foundations.typography.size.14}",
2177 "fontWeight": "{foundations.typography.weight.550}",
2178 "fontFamily": "{foundations.typography.fontFamily.base}",
2179 "lineHeight": "{foundations.typography.lineHeight.130}",
2180 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
2181 "gap": "{foundations.spacing.5}",
2182 "triggerGap": "{foundations.spacing.1}",
2183 "paddingX": "{foundations.spacing.4}",
2184 "paddingY": "{foundations.spacing[\"2.5\"]}"
2185 },
2186 "action": {
2187 "gap": "{foundations.spacing.3}"
2188 },
2189 "user": {
2190 "nameColor": "{foundations.colors.neutral.850}",
2191 "roleColor": "{foundations.colors.neutral.650}",
2192 "roleFontSize": "{foundations.typography.size.12}",
2193 "nameFontSize": "{foundations.typography.size.12}",
2194 "nameFontWeight": "{foundations.typography.weight.550}",
2195 "roleFontWeight": "{foundations.typography.weight.400}",
2196 "nameFontFamily": "{foundations.typography.fontFamily.base}",
2197 "roleFontFamily": "{foundations.typography.fontFamily.base}",
2198 "nameLineHeight": "{foundations.typography.lineHeight.130}",
2199 "roleLineHeight": "{foundations.typography.lineHeight.130}",
2200 "nameLetterSpacing": "{foundations.typography.letterSpacing.tighter}",
2201 "roleLetterSpacing": "{foundations.typography.letterSpacing.tighter}",
2202 "gap": "{foundations.spacing.2}",
2203 "paddingX": "{foundations.spacing[\"2.5\"]}",
2204 "paddingY": "{foundations.spacing[\"2.5\"]}",
2205 "triggerHover": "{foundations.colors.neutral.950}",
2206 "focusColor": "{foundations.colors.brand.500}"
2207 },
2208 "motion": {
2209 "duration": "{foundations.motion.duration.fast}"
2210 }
2211 },
2212 "drawer": {
2213 "base": {
2214 "overlay": {
2215 "background": "{foundations.other.overlayBackground}",
2216 "opacity": "{foundations.opacity.disabled}",
2217 "backdropBlur": "{foundations.other.backdropBlur}"
2218 },
2219 "content": {
2220 "background": "{foundations.colors.neutral.0}",
2221 "radius": "{foundations.radius.xs}",
2222 "borderColor": "{foundations.colors.neutral.150}",
2223 "color": "{semanticTokens.text.primary}",
2224 "borderWidth": "{foundations.border.width.1}",
2225 "shadow": "{foundations.shadow.drawer}",
2226 "padding": "{foundations.spacing.6}",
2227 "maxHeight": "{foundations.other.maxHeight}"
2228 },
2229 "header": {
2230 "gap": "{foundations.spacing.2}"
2231 },
2232 "footer": {
2233 "paddingTop": "{foundations.spacing.4}",
2234 "gap": "{foundations.spacing.2}",
2235 "align": "end"
2236 },
2237 "title": {
2238 "color": "{foundations.colors.neutral.850}",
2239 "fontSize": "{foundations.typography.size.24}",
2240 "fontFamily": "{foundations.typography.fontFamily.base}",
2241 "lineHeight": "{foundations.typography.lineHeight.130}",
2242 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
2243 },
2244 "description": {
2245 "color": "{foundations.colors.neutral.650}",
2246 "fontSize": "{foundations.typography.size.16}",
2247 "fontFamily": "{foundations.typography.fontFamily.base}",
2248 "lineHeight": "{foundations.typography.lineHeight.130}",
2249 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
2250 },
2251 "close": {
2252 "size": "{foundations.typography.size.12}",
2253 "color": "{foundations.colors.neutral.850}"
2254 }
2255 }
2256 },
2257 "icon": {
2258 "base": {
2259 "color": "{semanticTokens.action.primary}"
2260 },
2261 "sizes": {
2262 "xs": "{foundations.typography.size.12}",
2263 "sm": "{foundations.typography.size.16}",
2264 "md": "{foundations.typography.size.20}",
2265 "lg": "{foundations.typography.size.24}",
2266 "xl": "{foundations.typography.size.32}"
2267 },
2268 "variants": {
2269 "default": {
2270 "color": "{semanticTokens.action.primary}"
2271 },
2272 "muted": {
2273 "color": "{semanticTokens.text.muted}"
2274 },
2275 "danger": {
2276 "color": "{foundations.colors.feedback.error.500}"
2277 },
2278 "success": {
2279 "color": "{foundations.colors.feedback.success.500}"
2280 }
2281 }
2282 },
2283 "feedback": {
2284 "base": {
2285 "fontWeight": "{foundations.typography.weight.550}",
2286 "fontFamily": "{foundations.typography.fontFamily.base}",
2287 "lineHeight": "{foundations.typography.lineHeight.130}",
2288 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
2289 "actions": {
2290 "gap": "{foundations.spacing.2}"
2291 }
2292 },
2293 "sizes": {
2294 "medium": {
2295 "minWidth": "{foundations.minWidth.feedback}",
2296 "maxWidth": "{foundations.maxWidth.feedbackMidiumMaxWidth}",
2297 "iconSize": "{foundations.spacing.6}",
2298 "titleSize": "{foundations.typography.size.30}",
2299 "descriptionSize": "{foundations.typography.size.18}",
2300 "conatinerPaddingY": "{foundations.spacing.6}",
2301 "conatinerPaddingX": "{foundations.spacing.5}",
2302 "imgMarginBottom": "{foundations.spacing.8}",
2303 "imgMaxWidth": "{foundations.maxWidth.feedbackMidiumImgMaxWidth}",
2304 "descriptionMarginTop": "{foundations.spacing.4}",
2305 "actionsMarginTop": "{foundations.spacing.8}"
2306 },
2307 "small": {
2308 "minWidth": "{foundations.minWidth.feedback}",
2309 "maxWidth": "{foundations.maxWidth.feedbackSmallMaxWidth}",
2310 "iconSize": "{foundations.spacing.4}",
2311 "titleSize": "{foundations.typography.size.24}",
2312 "descriptionSize": "{foundations.typography.size.16}",
2313 "conatinerPaddingY": "{foundations.spacing.6}",
2314 "conatinerPaddingX": "{foundations.spacing.5}",
2315 "imgMarginBottom": "{foundations.spacing.6}",
2316 "imgMaxWidth": "{foundations.maxWidth.feedbackSmallImgMaxWidth}",
2317 "descriptionMarginTop": "{foundations.spacing.3}",
2318 "actionsMarginTop": "{foundations.spacing.6}"
2319 }
2320 }
2321 },
2322 "expansionPanel": {
2323 "base": {
2324 "fontFamily": "{foundations.typography.fontFamily.base}",
2325 "lineHeight": "{foundations.typography.lineHeight.130}",
2326 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
2327 "borderRadius": "{foundations.radius.xl}",
2328 "borderColor": "{foundations.colors.neutral.150}",
2329 "title": {
2330 "fontWeight": "{foundations.typography.weight.550}",
2331 "fontSize": "{foundations.typography.size.16}",
2332 "color": "{foundations.colors.neutral.850}"
2333 },
2334 "description": {
2335 "fontWeight": "{foundations.typography.weight.400}",
2336 "fontSize": "{foundations.typography.size.14}",
2337 "fontColour": "{foundations.colors.neutral.650}"
2338 },
2339 "actions": {
2340 "gap": "{foundations.spacing.2}"
2341 },
2342 "content": {
2343 "marginY": "{foundations.spacing.8}"
2344 }
2345 },
2346 "sizes": {
2347 "medium": {
2348 "containerPadding": "{foundations.spacing.6}",
2349 "containerMaxWidth": "{foundations.maxWidth.containerExpansionPanelMedium}"
2350 },
2351 "small": {
2352 "containerPadding": "{foundations.spacing.5}",
2353 "containerMaxWidth": "{foundations.maxWidth.containerExpansionPanelSmall}"
2354 }
2355 }
2356 },
2357 "tile": {
2358 "base": {
2359 "background": "{foundations.colors.neutral.0}",
2360 "borderRadius": "{foundations.radius.xl}",
2361 "borderColor": "{foundations.colors.neutral.150}",
2362 "fontFamily": "{foundations.typography.fontFamily.base}",
2363 "lineHeight": "{foundations.typography.lineHeight.130}",
2364 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
2365 "padding": "{foundations.spacing.3}",
2366 "paddingWithDescription": "{foundations.spacing.4}",
2367 "title": {
2368 "color": "{foundations.colors.neutral.850}",
2369 "fontWeight": "{foundations.typography.weight.550}"
2370 },
2371 "description": {
2372 "color": "{foundations.colors.neutral.650}",
2373 "fontWeight": "{foundations.typography.weight.400}",
2374 "paddingTop": "{foundations.spacing.1}"
2375 },
2376 "icon": {
2377 "color": "{foundations.colors.brand.500}"
2378 },
2379 "variants": {
2380 "hover": {
2381 "background": "{foundations.colors.neutral.950}",
2382 "borderColor": "{foundations.colors.neutral.350}"
2383 },
2384 "select": {
2385 "background": "{foundations.colors.brand.50}",
2386 "borderColor": "{foundations.colors.brand.500}",
2387 "colorTitle": "{foundations.colors.brand.500}",
2388 "colorDescription": "{foundations.colors.brand.500}"
2389 },
2390 "selectHover": {
2391 "background": "{foundations.colors.brand.100}"
2392 },
2393 "error": {
2394 "background": "{foundations.colors.neutral.0}",
2395 "borderColor": "{foundations.colors.feedback.error.600}",
2396 "colorTitle": "{foundations.colors.neutral.850}",
2397 "colorDescription": "{foundations.colors.neutral.850}"
2398 }
2399 }
2400 },
2401 "sizes": {
2402 "small": {
2403 "titleFontSize": "{foundations.typography.size.14}",
2404 "descriptionFontSize": "{foundations.typography.size.12}"
2405 },
2406 "medium": {
2407 "titleFontSize": "{foundations.typography.size.16}",
2408 "descriptionFontSize": "{foundations.typography.size.14}"
2409 }
2410 }
2411 },
2412 "listItem": {
2413 "base": {
2414 "background": "{foundations.colors.neutral.0}",
2415 "backgroundHover": "{foundations.colors.neutral.950}",
2416 "borderRadius": "{foundations.radius.md}",
2417 "fontFamily": "{foundations.typography.fontFamily.base}",
2418 "paddingX": "{foundations.spacing.1}",
2419 "paddingY": "{foundations.spacing.[\"2.5\"]}",
2420 "gapY": "{foundations.spacing.1}",
2421 "gapX": "{foundations.spacing.6}"
2422 },
2423 "header": {
2424 "color": "{foundations.colors.neutral.650}",
2425 "fontSize": "{foundations.typography.size.12}",
2426 "fontWeight": "{foundations.typography.weight.400}",
2427 "lineHeight": "{foundations.typography.lineHeight.130}",
2428 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
2429 "marginLeft": "{foundations.spacing.1}",
2430 "gap": "{foundations.spacing.[\"1.5\"]}"
2431 },
2432 "content": {
2433 "gapX": "{foundations.spacing.3}",
2434 "gapY": "{foundations.spacing.1}",
2435 "title": {
2436 "color": "{foundations.colors.neutral.850}",
2437 "fontSize": "{foundations.typography.size.16}",
2438 "fontWeight": "{foundations.typography.weight.550}",
2439 "lineHeight": "{foundations.typography.lineHeight.130}",
2440 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
2441 },
2442 "description": {
2443 "color": "{foundations.colors.neutral.650}",
2444 "fontSize": "{foundations.typography.size.14}",
2445 "fontWeight": "{foundations.typography.weight.400}",
2446 "lineHeight": "{foundations.typography.lineHeight.130}",
2447 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
2448 },
2449 "labels": {
2450 "gap": "{foundations.spacing.2}"
2451 }
2452 },
2453 "info": {
2454 "gap": "{foundations.spacing.1}",
2455 "title": {
2456 "color": "{foundations.colors.neutral.850}",
2457 "fontSize": "{foundations.typography.size.16}",
2458 "fontWeight": "{foundations.typography.weight.550}",
2459 "lineHeight": "{foundations.typography.lineHeight.130}",
2460 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
2461 },
2462 "description": {
2463 "color": "{foundations.colors.neutral.650}",
2464 "fontSize": "{foundations.typography.size.14}",
2465 "fontWeight": "{foundations.typography.weight.400}",
2466 "lineHeight": "{foundations.typography.lineHeight.130}",
2467 "letterSpacing": "{foundations.typography.letterSpacing.tighter}"
2468 },
2469 "label": {
2470 "background": "{foundations.colors.neutral.950}",
2471 "borderRadius": "{foundations.radius.xl}",
2472 "color": "{foundations.colors.neutral.750}",
2473 "fontSize": "{foundations.typography.size.14}",
2474 "fontWeight": "{foundations.typography.weight.550}",
2475 "gap": "{foundations.spacing.1}",
2476 "lineHeight": "{foundations.typography.lineHeight.130}",
2477 "letterSpacing": "{foundations.typography.letterSpacing.tighter}",
2478 "paddingX": "{foundations.spacing.[\"2.5\"]}",
2479 "paddingY": "{foundations.spacing.1}"
2480 }
2481 }
2482 }
2483 }
2484}