Pour plus d'informations sur ce qu'est un token, vous pouvez la retrouver sur ce lien.
Nous vous recommandons également de lire attentivement les règles d'utilisations des styles pour nos composants à ce lien.
Explorez la diversité des tokens CSS dédiés au composant Accordéon, permettant ainsi la création d'une version personnalisée en accord parfait avec le design system DSA.
// Color
--dsa-wc-accordion-color: var(--dsa-color-text-on-base-primary);
--dsa-wc-accordion-background-color: var(--dsa-color-background-base);
--dsa-wc-accordion-border-color: var(--dsa-color-background-border);
/// Icon
--dsa-wc-accordion-icon-color: var(--dsa-color-icon-on-base-default);
// Font
--dsa-wc-accordion-font: var(--dsa-font-medium-normal);
// Disabled
--dsa-wc-accordion-disabled-color: var(--dsa-color-text-on-base-disabled);
--dsa-wc-accordion-disabled-icon-color: var(--dsa-color-icon-on-base-disabled);
// Hover
--dsa-wc-accordion-hover-border-color: var(--dsa-color-background-border-hover);
--dsa-wc-accordion-header-hover-background-color: var(
--dsa-color-background-base-hover
);
// Focus
--dsa-wc-accordion-focus-border: 3px solid
var(--dsa-color-background-focus-ring);
// Spacing
--dsa-wc-accordion-padding: 1rem;
--dsa-wc-accordion-border-radius: var(--dsa-spacing-4);