Design SystemFoundations
Cor
Escalas primitivas e papéis semânticos do design system.
Primitive
Escalas estáveis em @ascend/tokens (primitiveColors). Produtos mapeiam suas cores nessas escalas.
Componentes não leem hex de produto. Eles usam papéis semânticos.
Semantic (contrato shadcn)
background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring.
Aliases de acento do produto: --brand, --brand-dark, --brand-light, --dark, --dark-muted (Tailwind: brand, brand-dark, …).
Light / dark / tema de produto
Modo: classe .dark no <html>. Tema de produto: data-brand (mapa de valores no package de tokens).
<html data-brand="ascend" class="dark">Demo
primary
muted
card