Skip to main content

Les couleurs

Le but de ce styleguide est de retrouver les mêmes noms de variables, d'un projet à l'autre.

Les gris​

'white' et 'black' ne sont plus à déclarer, puisque tailwind le fait très bien.

Dans figma, récupérer les valeurs suivantes : 'deep-grey', 'grey', 'light-grey', 'silver'. pour les mettre en hexadecimals. En effet, la charte de gris est utilisée de manière brute, sans alpha.

Les couleurs​

Transformer les couleurs hex en couleurs RGB. Utiliser pour cela un convertisseur si ce n'est pas renseigné dans le figma.

Dans un fichier CSS, déclarer les couleurs dans le root afin que tailwind puisse les utiliser avec une valeur alpha

app.scss​

Importer le fichier colors.scss

@use './tailwind.scss';
...
@use './colors.scss';

colors.scss​

./front/colors.scss
:root {
    --primary-color: 220, 87, 36;
    --secondary-color: 23, 101, 4;
    --tertiary-color: 17, 52, 135;
}

Déclarations dans Tailwind​

colors: {
    // Les couleurs
    'primary-color': 'rgba(var(--primary-color), <alpha-value>)',
    'secondary-color': 'rgba(var(--secondary-color), <alpha-value>)',
    'tertiary-color': 'rgba(var(--tertiary-color), <alpha-value>)',

    // Les gris
    'near-black': '#212121',
    'grey': '#212121',
    'grey-depp': '#494C4E',
    'grey-light':'#B4B4B4',
    'silver' : '#f5f5f5',
    transparent: 'transparent',
    current: 'currentColor',
},

Utilisation dans le DOM avec de la transparence​

Avec ces déclarations, il sera par exemple possible de mettre une classe tailwind avec une valeur alpha pour la transparence.

class="bg-primary-color"
class="bg-secondary-color"
class="bg-tertiary-color"

class="text-primary-color/10"
class="text-primary-color/30"
class="text-secondary-color/70"

class="bg-primary-color/40"
class="bg-primary-color/60"
class="bg-secondary-color/70"