cap-collectif / ui

Design system of @cap-collectif with react • styled-components • styled-system
https://ds.cap-collectif.com/
MIT License
16 stars 0 forks source link

Prise en compte totale de la couleur primaire du DS #402

Closed aguilaj closed 5 months ago

aguilaj commented 5 months ago

:tophat: What? Why?

Hello,

Gros changements dans le DS, en poursuite de ma précédente grosse PR. Globalement, pour la faire simple, la couleur primaire est déclinée en différentes teintes, ce qui rend le DS compatible avec toutes les couleurs que pourrait choisir un utilisateur. Concrètement, comment ça marche :

Il suffit, pour changer la couleur primaire, de la passer en paramètre au provider comme ceci :

Capture d’écran 2024-01-26 à 14 18 11

On peut voir que seule la couleur primaire est concernée par ces teintes, ce n'est pour l'instant pas utile pour le reste. La fonction generateShades :

Capture d’écran 2024-01-26 à 15 06 27

Elle est assez simple, elle va juste éclaircir/assombrir notre couleur primaire avec les valeurs que Sylvain avait utilisé pour son blue.500 . Le 500 restant la couleur primaire de référence.

Je suis donc repassé dans tous les composants du DS pour changer, là ou c'était nécessaire, les blue.xxx par des primary.xxx. Aucun breaking change cependant, car le bleu reste la couleur primaire par défaut en cas de non personnalisation 😄

Quelques images de potentiels rendu sur la vue IDF par exemple :

Capture d’écran 2024-01-26 à 14 53 01 Capture d’écran 2024-01-26 à 14 53 57 Capture d’écran 2024-01-26 à 14 54 19 Capture d’écran 2024-01-26 à 14 55 20

Voilà voilà, au passage ajouts de quelques icônes. Je demanderai une recette rapide car ça méritera sa propre recette sur platform

:pushpin: Related Issues

Le parcours de participation - La vue IDF

:art: Chromatic links

Chromatic PR Storybook

:camera_flash: Screenshots

github-actions[bot] commented 5 months ago

size-limit report 📦

Path Size
dist/ui.cjs.production.min.js 377.61 KB (+0.59% 🔺)
dist/ui.esm.js 369.49 KB (+0.51% 🔺)