Espacement

TDS utilise une grille modulaire basée sur 4px, exprimée en rem. Chaque token est un multiple de 4px : spacing-4 = 16px = 1rem.

Principe de la grille 4px

La grille 4px garantit que tous les espacements sont compatibles entre eux. Combiner spacing-4 (16px) et spacing-2 (8px) donne toujours un résultat cohérent.

Les tokens utilisent des nombres entiers qui correspondent au nombre d’unités de 4px :

spacing-1 = 1 × 4px = 4px
spacing-4 = 4 × 4px = 16px
spacing-8 = 8 × 4px = 32px

Échelle complète

Token	Variable CSS	rem	px	Zone d’usage
`0`	`--tds-spacing-0`	`0`	0px	Aucun espace
`1`	`--tds-spacing-1`	`0.25rem`	4px	Micro-spacing, séparateurs
`2`	`--tds-spacing-2`	`0.5rem`	8px	Icônes et labels, espaces très fins
`3`	`--tds-spacing-3`	`0.75rem`	12px	Padding compact, interlignes serrés
`4`	`--tds-spacing-4`	`1rem`	16px	Padding standard, marge de base
`5`	`--tds-spacing-5`	`1.25rem`	20px	Formulaires, boutons, listes
`6`	`--tds-spacing-6`	`1.5rem`	24px	Groupes de composants, cards
`8`	`--tds-spacing-8`	`2rem`	32px	Espaces entre sections
`10`	`--tds-spacing-10`	`2.5rem`	40px	Layout, barres d’actions
`12`	`--tds-spacing-12`	`3rem`	48px	Espaces larges
`14`	`--tds-spacing-14`	`3.5rem`	56px	Intervalles personnalisés
`16`	`--tds-spacing-16`	`4rem`	64px	Marges de page, sections majeures
`20`	`--tds-spacing-20`	`5rem`	80px	Zones de contenu larges
`24`	`--tds-spacing-24`	`6rem`	96px	Layout top-level
`32`	`--tds-spacing-32`	`8rem`	128px	Marges horizontales/verticales
`40`	`--tds-spacing-40`	`10rem`	160px	Buffers de contenu
`48`	`--tds-spacing-48`	`12rem`	192px	Tableaux, formulaires groupés
`64`	`--tds-spacing-64`	`16rem`	256px	Bannière, héros
`80`	`--tds-spacing-80`	`20rem`	320px	Grands blocs de page
`96`	`--tds-spacing-96`	`24rem`	384px	Extra-large, templates

Groupes d’usage

Micro (4–12px) — `spacing-1` à `spacing-3`

Espaces internes très petits : icônes et textes, badges, séparateurs fins, padding de tags.

.tds-badge {
  padding: var(--tds-spacing-1) var(--tds-spacing-2);
  /* 4px vertical, 8px horizontal */
}

.tds-icon-label {
  gap: var(--tds-spacing-2); /* 8px entre icône et texte */
}

Standard (16–24px) — `spacing-4` à `spacing-6`

Padding de composants, marges internes, espaces entre champs de formulaire.

.tds-card {
  padding: var(--tds-spacing-6); /* 24px */
}

.tds-field + .tds-field {
  margin-top: var(--tds-spacing-5); /* 20px */
}

Section (32–56px) — `spacing-8` à `spacing-14`

Espaces entre blocs fonctionnels, séparation de sections, zones d’actions.

.page-section + .page-section {
  margin-top: var(--tds-spacing-8); /* 32px */
}

.page-actions {
  padding: var(--tds-spacing-6) var(--tds-spacing-10);
}

Page (64px+) — `spacing-16` et plus

Marges de page, padding de layout, zones de contenu de grande taille.

.page-container {
  padding: 0 var(--tds-spacing-6);   /* mobile : 24px */
  max-width: 1024px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .page-container {
    padding: 0 var(--tds-spacing-10); /* desktop : 40px */
  }
}

Règles de layout

Mobile

Padding latéral de page : spacing-4 (16px) minimum, spacing-6 (24px) recommandé
Espace entre sections fonctionnelles : spacing-6 à spacing-8 (24–32px)
Espace interne des cards : spacing-4 (16px)
Ne pas dépasser spacing-10 (40px) entre éléments fonctionnels dans une colonne

Desktop

Padding latéral de page : spacing-10 (40px) ou spacing-12 (48px)
Espace entre sections : spacing-8 à spacing-12 (32–48px)
Espace interne des cards : spacing-5 à spacing-6 (20–24px)
Container max-width : 1024px ou 1200px selon le template

Tableaux et formulaires

Padding des cellules de tableau : spacing-4 (16px)
Espace entre groupes de champs : spacing-6 (24px)
Espace entre un label et son champ : spacing-1 (4px)
Espace entre champs de formulaire : spacing-5 (20px)

Variables CSS — Référence

--tds-spacing-0:  0rem;      /*   0px */
--tds-spacing-1:  0.25rem;   /*   4px */
--tds-spacing-2:  0.5rem;    /*   8px */
--tds-spacing-3:  0.75rem;   /*  12px */
--tds-spacing-4:  1rem;      /*  16px */
--tds-spacing-5:  1.25rem;   /*  20px */
--tds-spacing-6:  1.5rem;    /*  24px */
--tds-spacing-8:  2rem;      /*  32px */
--tds-spacing-10: 2.5rem;    /*  40px */
--tds-spacing-12: 3rem;      /*  48px */
--tds-spacing-14: 3.5rem;    /*  56px */
--tds-spacing-16: 4rem;      /*  64px */
--tds-spacing-20: 5rem;      /*  80px */
--tds-spacing-24: 6rem;      /*  96px */
--tds-spacing-32: 8rem;      /* 128px */
--tds-spacing-40: 10rem;     /* 160px */
--tds-spacing-48: 12rem;     /* 192px */
--tds-spacing-64: 16rem;     /* 256px */
--tds-spacing-80: 20rem;     /* 320px */
--tds-spacing-96: 24rem;     /* 384px */