# Tokens

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

Toda decisão visual mensurável do sistema vive em `src/tokens.json` neste repositório (fonte única, extraída do Figma). Os demais arquivos são gerados por `npm run build:ai`, que roda automaticamente em `predev` e `prebuild`.

## Camadas

Primitives (paletas) → Theme (tokens semânticos por função) → componentes. Componentes só consomem tokens do Theme.

- **Primitives**: 26 paletas x 11 passos (`--midas-color-<matiz>-<passo>`). Ocultas: só servem de alias.
- **Theme**: 97 tokens semânticos nomeados por função, com valores para Light, Dark e Dark Blue.
- **Componentes**: consomem apenas tokens do Theme.

## Convenção de nomes

Figma `grupo/subgrupo/nome` vira CSS `--midas-grupo-subgrupo-nome` e DTCG `grupo.subgrupo.nome`.

| Tipo | Figma | Variável CSS | DTCG |
| --- | --- | --- | --- |
| Primitivo | `color/cyan/700` | `--midas-color-cyan-700` | `primitive.color.cyan.700` |
| Semântico | `action/accent/bg` | `--midas-action-accent-bg` | `color.action.accent.bg` |
| Espaço | `space/16` | `--midas-space-16` | `space.16` |
| Controle | `size/control/md` | `--midas-size-control-md` | `size.control.md` |
| Raio | `radius/role/control` | `--midas-radius-role-control` | `radius.role.control` |
| Elevação | `elevation/card` | `--midas-elevation-card` | `elevation.card` |
| Foco | `focus/ring` | `--midas-effect-focus-ring` | `focus.ring` |
| Texto | `heading/md` | `--midas-text-heading-md` | `typography.heading.md` |
| Gradiente | `gradient/cyan/linear` | `--midas-gradient-cyan` | `gradient.cyan.base` |
| Grid | `Grid/Desktop` | `--midas-grid-columns (muda por breakpoint)` | `grid.desktop.columns` |

Atenção: `focus/ring` existe como **token de cor** (`--midas-focus-ring`, a borda do campo em foco) e como **effect style** (`--midas-effect-focus-ring`, o halo). Por isso o halo recebe o prefixo `effect`.

## Arquivos gerados

| Arquivo | Conteúdo |
| --- | --- |
| `/tokens.json` | Todos os tokens em W3C Design Tokens (DTCG), com os 3 temas em $extensions.mode |
| `/tokens.css` | Variáveis CSS --midas-* dos 3 temas (:root/light, dark, dark-blue) |
| `/llms.txt` | Índice curto para agentes de IA |
| `/llms-full.txt` | Toda a documentação em um único Markdown |
| `/docs/<secao>.md` | Uma página Markdown por seção do site |

## Estrutura do tokens.json de origem (src/tokens.json)

```text
themes[]                     id, label, selector
primitives.palettes.<matiz>.<passo> = hex
semantic.groups[]            id, description
semantic.tokens[]            token, group, description, modes.{light,dark,dark-blue}.{hex, alias?, alpha?}
contrast.pairs[]             fg, bg, min, light/dark/dark-blue {ok, ratio}
gradients.items[]            token, hue, variant, angle, stops[], css
typography                   families, size, lineHeight, weight, tracking, styles[]
space, size, radius, border, opacity, blur, elevation, focus, materials, grid
```