Style

Deux fichiers de style sont fournis avec le kit web et sont accessibles:

• dsa-theme.min.css : il contient les design tokens de marques et commencent par --dsa-.
• dsa-wc-theme.min.css : il contient les design tokens des composants et commencent par --dsa-wc-.

Ne pas surcharger les styles CSS

Les design tokens sont implémentés avec des variables CSS. Elles ont pour vocation à être lues et utilisées uniquement. Ils ne doivent pas être "surchargé" dans le sens que la valeur fournie ne doit pas être redéfinie.

Par ailleurs, il est de même pour les classes CSS. Un composant ne doit pas avoir son style surchargé.

Utiliser en premier les design tokens spécifiques

Privilégiez les design tokens spécifiques avant d'utiliser les tokens génériques. C'est à dire, utiliser les tokens venant du fichier dsa-wc-theme.min.css avant d'utiliser les variables venant de dsa-theme.min.css

                                                        
                                                        
                                                            /* round-button.css */
                                                        
                                                        .button--round {
                                                            background: var(--dsa-wc-button-primary-on-base-color);
                                                        }
                                                        
                                                            

Voici la liste des alias pour la variable ci-dessus:

Spécifique

--dsa-wc-button-primary-on-base-color

⬇️

--dsa-color-button-on-base-primary-enabled

⬇️

--dsa-color-primitives-purple-500

⬇️

hsl(265, 90%, 39%)

Abstrait