Formas & Bordas
Visão ao vivo
Seção intitulada “Visão ao vivo”Cantos padronizados em escala própria (não ligada à escala de spacing, apesar de nomes iguais):
| Token | px |
|---|---|
xxs |
4 |
xs |
6 |
sm |
8 |
md |
16 |
lg |
24 |
xl |
32 |
xxl |
40 |
xxxl |
48 |
Raio por família de componente (extraído do SCSS de cada um — não presuma)
Seção intitulada “Raio por família de componente (extraído do SCSS de cada um — não presuma)”| Elemento | Raio | Fonte |
|---|---|---|
Botão (md, padrão) |
8px (--mds-radius-sm) |
tokens/_components.scss |
| Input / Select (padrão) | 8px (--mds-radius-sm) |
mixins/_fields.scss:33 (parâmetro padrão do mixin) |
| Card | 8px (--mds-radius-sm) |
components/_card.scss:12 |
Modal (mds-float-panel--modal) |
8px (--mds-radius-sm) |
components/_float-panel.scss:189 |
Drawer / tela cheia (--fullscreen) |
0px (sem raio — encosta na borda da viewport) | components/_float-panel.scss:226 |
| Avatar (padrão) | 8px, quadrado arredondado (não é círculo por padrão) | components/_avatar.scss:23 |
Avatar .mds-avatar--rounded |
100% (círculo completo) | components/_avatar.scss:30 |
| Checkbox | 6px (--mds-radius-xs) |
components/_checkbox.scss:4 (parâmetro padrão do mixin) |
| Switch/Toggle | 40px (--mds-radius-xxl, pill) |
components/_checkbox.scss:42 (parâmetro padrão do mixin) |
A maioria dos componentes de formulário/superfície (botão, input, select, card, modal, checkbox) usa o mesmo raio pequeno (
--mds-radius-sm, 8px, ou--mds-radius-xs, 6px, no checkbox) — não há um raio “de input” desproporcionalmente maior; só avatar--roundede switch/toggle chegam a formas totalmente arredondadas.
Borda: 1px sólida como padrão (--mds-colors-ui-border ou --mds-control-default-border); campo em foco/erro sobe para 2–3px com a cor semântica. Nunca use outline do navegador puro — o MDS estiliza o próprio anel de foco.