Système de Design de l’État

Version 1.1.0

27 juillet 2021


Les mises à jour du Design System de l'État sont intégrées à des releases dont les numéros de versions suivent la nomenclature SemVer en respectant le schéma suivant : MAJEUR.MINEUR.PATCH (X.Y.Z). Ce système de gestion de versions concernera le fichier Sketch, le code et la documentation.


🎉 : AJOUT, ✨ : EVOLUTION, 🛠️ : CORRECTION, 🚫 : SUPPRESSION

 

Général

🎉 Ajout des composants Lettre d’information et Réseaux Sociaux.
🎉 Ajout du composant Partage.
🎉 Ajout du composant Citation.


Librairie Sketch

🌎 Global :

🛠️ Rajout d’un symbole 🚫 sur les “— Éléments : ne pas utiliser —”

🛠️ Correction de la nomenclature :

  • - Éléments - ne pas utiliser - → — Éléments : ne pas utiliser —

  • - 00 Outils → 0. Outils

  • 01 Fondamentaux → 1. Fondamentaux

  • 02 Composants → 2. Composants

  • Bloc marque → Bloc-marque

  • ⭤ → ⭤ Horizontal

  • ⭥ → ⭥ Vertical

  • SM → Taille SM

  • MD → Taille MD

  • LG → Taille LG

  • Forme de base/Carrée → Forme de base

  • Line → Ligne

🎨 Fondamentaux

Marianne
🛠️ Correction de la nomenclature des styles de calques et des groupes

Bloc-marque
🚫 Suppression du calque “fond” pour être raccord au thème sombre

🛠️ Correction de la nomenclature des styles de calques et des groupes

Typographie - Espacement

🛠️ Correction des espacements sur les styles de textes (24 px pour les niveaux de titres et les corps de textes, puis 32 px pour les titres alternatifs)

Styles de texte
🎉 Ajout des styles de texte : XL - Chapô - Bold

Sous-librairie d’icônes (v1.1.0)

🧩 Composants

Citation
🎉 Ajout du composant

Contenu média
🛠️ Correction des overrides des symboles : activation de l’override permettant de charger une image

Mise en avant
🛠️ Correction du resize des composants avec boutons, en mobile

Lettre d’information et réseaux sociaux
🎉 Ajout du composant

Partage
🎉 Ajout du composant


Librairie Figma

🎨 Fondamentaux

Icônes
🎉 Ajout des icônes chat-quote-line et chat-quote-fill (dans un Variant)

Styles de texte
🎉 Ajout des styles XS - Corps - Italique et XL - Châpo - Gras


🧩 Composants

Citation
🎉 Ajout du composant

Lettre d’information et réseaux sociaux
🎉 Ajout du composant

Partage
🎉 Ajout du composant

Alerte
🛠️ Ajout d’une description au composant

 

En vue du déploiement du niveau système de couleurs, les fichiers Figma sont actuellement en travaux jusqu’au 30/07. Les composants insérés depuis les librairies partagées sont fonctionnels, mais il peut y avoir des perturbations dans les styles de couleur (présence de nouveaux styles).


Code

Core
🛠️ Collapse : problème de visibilité avec visibility: visible, passe en inherit.

Composants

Cases à cocher
🛠️ Label long ne passe plus à ligne

Citation
🎉 Ajout du composant

Lettre d’information et réseaux sociaux
🎉 Ajout du composant

Partage
🎉 Ajout du composant

Tableau
🛠️ Comportement sans JS


Documentation


Cases à cocher
🛠️ Revue du paragraphe validation et usage.

Espacement
🛠️ correction de la valeur 4v, remplacée par 5v (20px, 1,25rem).

Mise en avant
🛠️ Ajout d’un paragraphe sur la gestion des headings (fr-callout__title).


Téléchargements


Code


Librairie Sketch


Sous-librairie Sketch d’icônes



 

Service d'Information du Gouvernement - 2021