Draft: Refactor/design token

To check

• Explain what has changed in the changelog
• For newly created web components only : Declare all new angular proxy components in the file angular/projects/wcs-angular/src/lib/wcs-angular.module.ts
• For newly created web components only : Add the component name in Components-Overview.mdx with its corresponding image into assets/images/components-overview

Pour voir ce que j'ai déjà exploré https://miro.com/app/board/uXjVNsRboHY=/ (ouvert à tous en viewer uniquement)

Ce que j'ai fait pour l'instant

J'ai mocké un fichier de thèmes CSS qui embarquent n classes CSS avec n: le nombre de thèmes. Chaque thème, classe CSS associé, redéfinit les tokens: primitives, semantic, components. On applique la classe CSS de notre choix, donc le thème, au body de notre document => cela définit les variables pour tous les enfants du body

=> A voir si c'est une bonne approche

Ensuite, une fois après avoir mocké les tokens:

• Je les utilise dans les composants

J'ai déjà refacto:

• wcs-button
• wcs-select, wcs-select-option
• wcs-input

=> ⚠️ATTENTION⚠️ : il faut bien repasser derrière chaque fichier CSS des composants. Cette branche/MR a surtout pour but de tester les design tokens que l'on définit avec l'équipe design durant les ateliers.

Ce qu'il va rester à faire

• Créer automatiquement le fichier de thème CSS à partir des design tokens définit dans Figma
• Faire le choix de comment les projets définissent leur thème