Styles de heading par défaut

Description

Suite à la réunion du 17/03 entre dev - accessibilité - design, il serait préférable de proposer dans la feuille de style WCS par défaut les niveaux de titres déjà stylisés, dans global.css ou dans le template à copier coller.

A noter que ça ne pose pas de problème pour l'accessibilité si le titre est <h1> sémantiquement mais qu'il a un style "override" de niveau 4 par exemple. Les niveaux de titre dans les tokens ne sons pas nécessairement liés à leur sémantique en HTML.

Rejoint l'issue d'amélioration de la doc token des typographies => #397

Solutions

Regarder comment font les autres Design Systems.

Discuté au daily du 18/03, on pourrait proposer dans la doc l'ajout de styles de titres par défaut pourrait être envisageable :

h1 {
    font-size: var(--wcs-semantic-font-size-heading-1);
    font-weight: var(--wcs-semantic-font-weight-black);
    line-height: var(--wcs-semantic-font-line-height-medium);
}

h2 {
    font-size: var(--wcs-semantic-font-size-heading-2);
    font-weight: var(--wcs-semantic-font-weight-heavy);
    line-height: var(--wcs-semantic-font-line-height-medium);
}

h3 {
    font-size: var(--wcs-semantic-font-size-heading-3);
    font-weight: var(--wcs-semantic-font-weight-heavy);
    line-height: var(--wcs-semantic-font-line-height-medium);
}

h4 {
    font-size: var(--wcs-semantic-font-size-heading-4);
    font-weight: var(--wcs-semantic-font-weight-heavy);
    line-height: var(--wcs-semantic-font-line-height-medium);
}

h5 {
    font-size: var(--wcs-semantic-font-size-heading-5);
    font-weight: var(--wcs-semantic-font-weight-heavy);
    line-height: var(--wcs-semantic-font-line-height-medium);
}

h6 {
    font-size: var(--wcs-semantic-font-size-heading-6);
    font-weight: var(--wcs-semantic-font-weight-heavy);
    line-height: var(--wcs-semantic-font-line-height-medium);
}