# Raios, bordas e opacidade

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.

Controles usam cantos discretos. A escala é `radius/*`; o uso é definido por `radius/role/*`: prefira o role.

## Escala

| Token | Valor | Variável CSS |
| --- | --- | --- |
| `radius/none` | 0px | `--midas-radius-none` |
| `radius/xs` | 4px | `--midas-radius-xs` |
| `radius/sm` | 6px | `--midas-radius-sm` |
| `radius/md` | 8px | `--midas-radius-md` |
| `radius/lg` | 10px | `--midas-radius-lg` |
| `radius/xl` | 12px | `--midas-radius-xl` |
| `radius/2xl` | 14px | `--midas-radius-2xl` |
| `radius/3xl` | 18px | `--midas-radius-3xl` |
| `radius/full` | 9999px (pílula/círculo) | `--midas-radius-full` |

## Raios por função

| Role | Aponta para | Variável CSS | Uso |
| --- | --- | --- | --- |
| `radius/role/control` | `radius/sm` | `--midas-radius-role-control` | Controles: button, input, select, toggle, chip (6px; XS/SM 4px, XL 8px). |
| `radius/role/container` | `radius/2xl` | `--midas-radius-role-container` | Containers: card, painel, alert, dialog. |
| `radius/role/overlay` | `radius/lg` | `--midas-radius-role-overlay` | Overlays: dropdown, popover, combobox, date picker, tooltip. |
| `radius/role/pill` | `radius/full` | `--midas-radius-role-pill` | Badges, tags, switches e avatares. |

## Borda

| Token | Valor | Variável CSS | Uso |
| --- | --- | --- | --- |
| `border-width/sm` | 1px | `--midas-border-width-sm` | Padrão do sistema: 1px em border/default (cinza claro), sempre com sombra suave elevation/control. Nunca usar strokes pretos ou grossos. |
| `border-width/md` | 1.5px | `--midas-border-width-md` | Uso raro (indicadores pequenos). Seleção e foco usam 1px + halo de 4px. |

## Opacidade

| Token | Valor | Variável CSS | Uso |
| --- | --- | --- | --- |
| `opacity/disabled` | 50% | `--midas-opacity-disabled` | Opacidade de elementos desabilitados quando não houver token de cor específico. |