Skip to main content

Configuration des couleurs

Notre thème utilise un fichier JSON pour définir une palette de couleurs riche et adaptable, basée sur la nouvelle charte graphique SNCF. Ce fichier sert de base pour générer les variables de couleurs utilisées par Tailwind CSS, offrant ainsi une cohérence visuelle à travers tout le site.

1. Structure et utilisation du fichier JSON​

Fichier à la racine du thème : /tailwind-colors.json

Ce fichier sera chargé via le fichier de configuration tailwind : /tailwind-config.js.

info

Plus d'information à ce sujet dans la page : Configuration tailwind

Ce fichier JSON structure les couleurs en objets nommés, avec chaque couleur ayant plusieurs variations comme DEFAULT, light, dark, inverse, expo ...

Cela permet leur utilisation dans le nommage des classes tailwind css, par exemple pour appliquer un fond couleur lavande, il suffit d'appliquer la classe bg-sncf-lavande.

Par défaut, sans déclinaison de couleur cela prendra le code héxadecimal de l'attribut enfant DEFAULT

Si vous ajoutez une déclinaison de couleur à la classe, par exemple avec bg-sncf-lavande-dark ou bg-sncf-lavande-inverse, cela utilisera les codes héxadécimaux associées (ici dark et inverse).

Bien sur cela reste compatible avec les "pseudo-selecteurs" de tailwind, afin d'appliquer des classes conditionnelles comme hover:bg-sncf-lavande ou encore dark:bg-sncf-lavande, ainsi que les filtres d'opacitée comme bg-sncf-lavande/50.

Voici quelques déclinaisons utilisées :

  • DEFAULT : couleur par défaut, il n'est pas nécessaire de le mentionner dans les noms de classes.
  • light : couleur allégée (se référer à la charte graphique).
  • dark : couleur renforcée, utilisée pour le mode "contrastes renforcés" (création d'un module tailwind, ajoutant le pseudo-selecteur renforce:.
  • inverse : couleur inversée, utilisée pour le mode "couleurs inversées" (utilisation native du darkmode dark: de tailwind).
  • expo : nouvelle palette de couleur utilisée pour la partie expositions du site.
  • expo-dark, expo-inverse : sur le même principe que les déclinaisons dark et inverse mais pour la palette expo
  • 0, 3, 5 ... : déclinaisons de l'opacité de la couleur, utilisé sur la palette de gris.

2. Contenu du fichier tailwind-colors.json​

/tailwind-colors.json
{
    "ambre": {
        "DEFAULT": "#EED484",
        "light": "#f9f0d5",
        "dark": "#e5bd43",
        "inverse": "#112b7b"
    },
    "safran": {
        "DEFAULT": "#DAAA00",
        "light": "#FFCB12",
        "dark": "#AE8800",
        "inverse": "#2555FF",
        "before-50": "#F7E7B6",
        "before-50-inverse": "#081849",
        "expo": "#7E671F",
        "expo-dark": "#675319",
        "expo-inverse": "#8198e0"
    },
    "modore": {
        "DEFAULT": "#4a412a",
        "light": "#5d5135",
        "dark": "#3b3422",
        "inverse": "#b5bed5"
    },
    "peche": {
        "DEFAULT": "#FDBE87",
        "light": "#fff2e6",
        "dark": "#fc953b",
        "inverse": "#024178"
    },
    "ocre": {
        "DEFAULT": "#DC582A",
        "light": "#e58462",
        "dark": "#b4441e",
        "inverse": "#23a7d5",
        "before-50": "#FFDBB9",
        "before-50-inverse": "#002446",
        "expo": "#B4441E",
        "expo-dark": "#993A1A",
        "expo-inverse": "#4bbbe1"
    },
    "chocolat": {
        "DEFAULT": "#4F2910",
        "light": "#633314",
        "dark": "#3f210d",
        "inverse": "#b0d6ef"
    },
    "nude": {
        "DEFAULT": "#f8c1b8",
        "light": "#ffffff",
        "dark": "#F07C69",
        "inverse": "#073e47"
    },
    "corail": {
        "DEFAULT": "#F2827F",
        "light": "#fbd4d3",
        "dark": "#eb413c",
        "inverse": "#0d7d80",
        "before-50": "#FDDCD5",
        "before-50-inverse": "#02232a",
        "expo": "#D53F34",
        "expo-dark": "#A52B22",
        "expo-inverse": "#2ac0cb"
    },
    "burgundy": {
        "DEFAULT": "#622032",
        "light": "#7a283f",
        "dark": "#4e1a28",
        "inverse": "#9ddfcd"
    },
    "dragee": {
        "DEFAULT": "#EFBAE1",
        "light": "#ffffff",
        "dark": "#df75c3",
        "inverse": "#10451e"
    },
    "vieux-rose": {
        "DEFAULT": "#F59BBB",
        "light": "#fef6f9",
        "dark": "#ee528a",
        "inverse": "#0a6444",
        "before-50": "#F3DEEF",
        "before-50-inverse": "#0c2110",
        "expo": "#3f2a56",
        "expo-dark": "#3f2a56",
        "expo-inverse": "#c0d5a9"
    },
    "aubergine": {
        "DEFAULT": "#3F2A56",
        "light": "#4f356c",
        "dark": "#322245",
        "inverse": "#c0d5a9"
    },
    "parme": {
        "DEFAULT": "#C7B2DE",
        "light": "#faf8fc",
        "dark": "#9e7ac6",
        "inverse": "#384d21",
        "20": "#F3EEF7",
        "50": "#E0D3EE"
    },
    "lavande": {
        "DEFAULT": "#6558B1",
        "light": "#8f85c6",
        "dark": "#4f4391",
        "inverse": "#9aa74e"
    },
    "bleu-marine": {
        "DEFAULT": "#00205B",
        "light": "#002872",
        "dark": "#001a49",
        "inverse": "#ffdfa4"
    },
    "bleu-horizon": {
        "DEFAULT": "#A4C8E1",
        "light": "#edf4f9",
        "dark": "#69a5ce",
        "inverse": "#5b371e"
    },
    "ceruleen": {
        "DEFAULT": "#0084D4",
        "light": "#0aa3ff",
        "dark": "#006aaa",
        "inverse": "#ff7b2b",
        "before-50": "#C9DEEF",
        "before-50-inverse": "#362110",
        "expo": "#006AAA",
        "expo-dark": "#005B94",
        "expo-inverse": "#ff9555"
    },
    "cobalt": {
        "DEFAULT": "#003865",
        "light": "#00467e",
        "dark": "#002d51",
        "inverse": "#ffc79a"
    },
    "vert-d-eau": {
        "DEFAULT": "#A1D6CA",
        "light": "#e2f2ef",
        "dark": "#6dbfad",
        "inverse": "#5e2935"
    },
    "menthe": {
        "DEFAULT": "#00B388",
        "light": "#00e0aa",
        "dark": "#008f6d",
        "inverse": "#ff4c77",
        "before-50": "#C7E8E1",
        "before-50-inverse": "#38171e",
        "expo": "#008566",
        "expo-dark": "#00614A",
        "expo-inverse": "#ff7a99"
    },
    "foret": {
        "DEFAULT": "#154734",
        "light": "#1a5941",
        "dark": "#11392a",
        "inverse": "#eab8cb"
    },
    "rouge": {
        "DEFAULT": "#D52B1E"
    },
    "bleu": {
        "DEFAULT": "#0088BE"
    },
    "blanc": {
        "DEFAULT": "#FFFFFF"
    },
    "noir": {
        "DEFAULT": "#000000"
    },
    "gris": {
        "DEFAULT": "#D9D9D9",
        "carbone":"#333333",
        "carbone-inverse":"#CCCCCC",
        "carbone-dark":"#111111",
        "11":"#4D4F53",
        "9":"#747678",
        "7":"#A0A0A0",
        "5":"#B9B9B9",
        "4":"#CCCCCC",
        "3":"#D7D7D7",
        "0":"#F4F5F6",
        "inverse": "#262626"
    }
    
}

Ressources​