Tokens
292 tokens do design system TRDR — primitivos, semânticos e scale.
Cores Primitivas
| Token | CSS Variable | Valor Dark | Valor Light | |
|---|---|---|---|---|
color.blue.50Azul mais claro | --color-blue-50 | #F0F7FF | ||
color.blue.100Azul 100 | --color-blue-100 | #E0EEFF | ||
color.blue.200Azul 200 | --color-blue-200 | #C1DDFF | ||
color.blue.300Azul 300 | --color-blue-300 | #A2CDFF | ||
color.blue.400Azul 400 | --color-blue-400 | #84BFFF | ||
color.blue.500Azul 500 — border.focus | --color-blue-500 | #65B0FF | ||
color.blue.600Azul 600 — ação primária (brand) | --color-blue-600 | #3D99FF | ||
color.blue.700Azul 700 — hover do brand | --color-blue-700 | #1E82FF | ||
color.blue.800Azul 800 — active do brand | --color-blue-800 | #0066FF | ||
color.blue.900Azul 900 — mais escuro | --color-blue-900 | #0052CC | ||
color.blue.alpha.08Azul com alpha 8% | --color-blue-alpha-08 | #0052CC14 | ||
color.blue.alpha.16Azul com alpha 16% | --color-blue-alpha-16 | #0052CC29 | ||
color.blue.alpha.32Azul com alpha 32% | --color-blue-alpha-32 | #0052CC52 | ||
color.neutral.0Branco puro | --color-neutral-0 | #FFFFFF | ||
color.neutral.50Quase branco | --color-neutral-50 | #FAFAFA | ||
color.neutral.100Neutro 100 | --color-neutral-100 | #EEEEEE | ||
color.neutral.200Neutro 200 | --color-neutral-200 | #E8E8E8 | ||
color.neutral.300Neutro 300 | --color-neutral-300 | #D2D2D2 | ||
color.neutral.400Neutro 400 | --color-neutral-400 | #BCBCBC | ||
color.neutral.500Neutro 500 — content.tertiary (dark) | --color-neutral-500 | #A4A4A4 | ||
color.neutral.600Neutro 600 | --color-neutral-600 | #777777 | ||
color.neutral.700Neutro 700 — surface.primary / border.default | --color-neutral-700 | #4A4A4A | ||
color.neutral.800Neutro 800 — surface.secondary / border.subtle | --color-neutral-800 | #222222 | ||
color.neutral.900Neutro 900 — bg.tertiary | --color-neutral-900 | #1A1A1A | ||
color.neutral.1000Neutro 1000 — bg.secondary | --color-neutral-1000 | #141519 | ||
color.neutral.1200Neutro 1200 — bg.primary | --color-neutral-1200 | #0E0E0E | ||
color.green.600Verde primário — bg.success | --color-green-600 | #31DD7E | ||
color.green.alpha.08Verde alpha 8% — surface.success | --color-green-alpha-08 | #4FE29014 | ||
color.green.alpha.16Verde alpha 16% | --color-green-alpha-16 | #4FE29029 | ||
color.green.alpha.32Verde alpha 32% | --color-green-alpha-32 | #4FE29052 | ||
color.green.alpha.40Verde alpha 40% | --color-green-alpha-40 | #4FE29066 | ||
color.green.alpha.56Verde alpha 56% | --color-green-alpha-56 | #4FE2908F | ||
color.red.600Vermelho primário — bg.danger / short | --color-red-600 | #F34F45 | ||
color.red.alpha.08Vermelho alpha 8% — surface.error | --color-red-alpha-08 | #F34F4514 | ||
color.red.alpha.16Vermelho alpha 16% | --color-red-alpha-16 | #F34F4529 | ||
color.red.alpha.32Vermelho alpha 32% | --color-red-alpha-32 | #F34F4552 | ||
color.red.alpha.40Vermelho alpha 40% | --color-red-alpha-40 | #F34F4566 | ||
color.red.alpha.56Vermelho alpha 56% | --color-red-alpha-56 | #F34F458F | ||
color.yellow.500Amarelo primário — bg.warning | --color-yellow-500 | #FFCC40 | ||
color.yellow.alpha.08Amarelo alpha 8% — surface.warning | --color-yellow-alpha-08 | #FFCC4014 | ||
color.yellow.alpha.16Amarelo alpha 16% | --color-yellow-alpha-16 | #FFCC4029 | ||
color.yellow.alpha.32Amarelo alpha 32% | --color-yellow-alpha-32 | #FFCC4052 | ||
color.orange.600Laranja primário — action.destructive / stop loss | --color-orange-600 | #F57C00 | ||
color.orange.alpha.08Laranja alpha 8% | --color-orange-alpha-08 | #FF640014 | ||
color.orange.alpha.16Laranja alpha 16% | --color-orange-alpha-16 | #FF640029 | ||
color.orange.alpha.32Laranja alpha 32% | --color-orange-alpha-32 | #FF640052 | ||
color.purple.500Roxo primário — action.tertiary | --color-purple-500 | #7C4DFF | ||
color.purple.alpha.08Roxo alpha 8% | --color-purple-alpha-08 | #7C4DFF14 | ||
color.purple.alpha.16Roxo alpha 16% | --color-purple-alpha-16 | #7C4DFF29 | ||
color.purple.alpha.32Roxo alpha 32% | --color-purple-alpha-32 | #7C4DFF52 |