Arrondis

Les arrondis TDS sont volontairement limités. Un Design System d’État doit rester sobre : les arrondis excessifs appartiennent aux interfaces startup, pas aux services publics.

---

Échelle

Token	Variable CSS	Valeur	Usage principal
none	--tds-radius-none	0	Tables, sections formelles, containers de données
xs	--tds-radius-xs	2px	Surfaces neutres, cards gouvernementales strictes
sm	--tds-radius-sm	4px	Boutons, inputs, tags — composants standard
md	--tds-radius-md	8px	Cards, modales, menus, sections de formulaire
lg	--tds-radius-lg	12px	Dialogues, overlays, panels doux
xl	--tds-radius-xl	16px	Sections majeures, encarts mis en avant
full	--tds-radius-full	9999px	Badges, tags, pills, boutons full-round

---

Règles par composant

Composant	Radius recommandé
Bouton	sm (4px)
Input, Textarea, Select	sm (4px)
Card standard	xs (2px) ou md (8px) selon la formalité
Modal, dialogue	md (8px)
Tableau de données	none ou xs
Badge, tag, pill	full (9999px) ou sm
Menu déroulant	sm (4px)
Notification, toast	sm (4px)
Tooltip	xs (2px)
Navigation / sidebar	none

---

Variables CSS

--tds-radius-none: 0;
--tds-radius-xs:   2px   /* 0.125rem */
--tds-radius-sm:   4px   /* 0.25rem  */
--tds-radius-md:   8px   /* 0.5rem   */
--tds-radius-lg:   12px  /* 0.75rem  */
--tds-radius-xl:   16px  /* 1rem     */
--tds-radius-full: 9999px

/* Exemple d'usage */
.ma-card {
  border-radius: var(--tds-radius-md);
}

.mon-badge {
  border-radius: var(--tds-radius-full);
}