Design Tokens — Extranets (extranet-base.css)
apps/web/styles/extranet-base.css define os tokens estruturais compartilhados entre todos os clientes extranet (Abracaf, Assobens, ABCNissan). Não sobrescrever por cliente — estes são fixos para todos os tenants. Tokens de cor e fontes específicos de cada cliente ficam nos respectivos arquivos theme.<cliente>.css.
Como usar no Tailwind
Os tokens são expostos como classes Tailwind via @theme inline. Nenhum valor arbitrário é necessário para as propriedades cobertas aqui.
// Layout
<div className="max-w-extranet-container px-extranet-container-px pt-extranet-header">
// Tipografia
<p className="text-extranet-sm leading-extranet-relaxed tracking-extranet-widest">
// Bordas
<div className="rounded-extranet-lg shadow-extranet">
// Transições
<button className="transition-colors duration-extranet-base ease-extranet">
Tokens disponíveis
Layout
| Token CSS | Tailwind | Valor |
|---|---|---|
--extranet-header-height | pt-extranet-header / h-extranet-header | 72px |
--extranet-header-height-mobile | h-extranet-header-mobile | 56px |
--extranet-container-max | max-w-extranet-container | 1320px |
--extranet-container-px | px-extranet-container-px | 40px |
--extranet-container-px-sm | px-extranet-container-px-sm | 20px |
--extranet-section-y | py-extranet-section | 80px |
--extranet-gap | gap-extranet-gap | 24px |
--extranet-drawer-width | w-extranet-drawer | 288px |
Z-index
| Tailwind | Valor | Uso |
|---|---|---|
z-extranet-base | 50 | Elementos elevados genéricos |
z-extranet-overlay | 100 | Overlays e backdrops |
z-extranet-header | 200 | Header fixo |
z-extranet-modal | 300 | Modais e dialogs |
z-extranet-toast | 400 | Notificações toast |
Tipografia
| Tailwind | Valor | Uso sugerido |
|---|---|---|
text-extranet-2xs | 11px | Micro labels, eyebrows |
text-extranet-xs | 12px | Labels, captions |
text-extranet-sm | 14px | Body small, nav items |
text-extranet-base | 16px | Body padrão |
text-extranet-lg | 18px | Body destaque |
text-extranet-xl | 20px | Subtítulos |
text-extranet-2xl | 24px | Heading sm |
text-extranet-3xl | 32px | Heading md |
text-extranet-4xl | 40px | Heading lg |
text-extranet-5xl | 56px | Hero desktop |
text-extranet-6xl | 72px | Hero large |
Line-height: leading-extranet-tight (1.05) · leading-extranet-snug (1.25) · leading-extranet-normal (1.5) · leading-extranet-relaxed (1.6)
Letter-spacing: tracking-extranet-tight (-0.02em) · tracking-extranet-wide (0.05em) · tracking-extranet-wider (0.1em) · tracking-extranet-widest (0.18em)
Border radius
| Tailwind | Valor |
|---|---|
rounded-extranet-sm | 6px |
rounded-extranet | 10px |
rounded-extranet-lg | 16px |
rounded-extranet-xl | 24px |
rounded-extranet-full | 9999px |
Sombras
| Tailwind | Uso |
|---|---|
shadow-extranet-sm | Cards, inputs |
shadow-extranet | Dropdowns, popovers |
shadow-extranet-lg | Modais, sidesheets |
Transições
| Tailwind | Valor | Uso |
|---|---|---|
duration-extranet-fast | 150ms | Hover states simples |
duration-extranet-base | 200ms | Padrão |
duration-extranet-slow | 300ms | Animações de entrada |
duration-extranet-slower | 500ms | Transições de layout |
ease-extranet | cubic-bezier(0.4, 0, 0.2, 1) | Padrão |
ease-extranet-spring | cubic-bezier(0.34, 1.56, 0.64, 1) | Efeitos elásticos |
Observação: max-w-extranet-container
O Tailwind v4 gera classes w-* a partir de --width-*, mas não max-w-*. Por isso o arquivo declara explicitamente:
@utility max-w-extranet-container {
max-width: var(--extranet-container-max);
}
Isso garante que max-w-extranet-container funcione corretamente como classe Tailwind.