Aide:Charte graphique

Cette page documente les conventions visuelles du wiki Nefald. Elle est la référence pour tout contributeur créant des modèles ou des tableaux.

Couleur principale

La couleur de marque est définie via le système OKLCH du skin Citizen. La teinte (hue) actuelle est 230 (bleu-acier).

Pour modifier la teinte globale, éditer MediaWiki:Citizen.css et changer la valeur de --color-progressive-oklch__h.

Variable	Rôle	Valeur actuelle
--color-progressive-oklch__h	Teinte principale	230
--color-progressive-oklch__c	Saturation	0.1679
--color-progressive-oklch__l	Luminosité	53.25 %

Palette sémantique

Ces classes s'appliquent sur les cellules de tableaux ().

Elles s'adaptent automatiquement au mode clair, sombre et automatique.

Aperçu

Classe	Rendu	Usage recommandé
table-color-success		Succès	Validation, disponibilité, état positif
table-color-danger		Danger	Erreur, suppression, état critique
table-color-warning		Avertissement	Attention, déprécié, en cours
table-color-info		Information	Note, contexte, neutre positif
table-color-secondary		Neutre	Données secondaires, en-têtes alternés

Exemple d'utilisation

{| class="wikitable"
! Composant !! État
|-
| Serveur principal || <td class="table-color-success">En ligne</td>
|-
| Backup || <td class="table-color-warning">Dégradé</td>
|-
| Ancien serveur || <td class="table-color-danger">Hors ligne</td>
|}

Variables disponibles

Ces variables CSS sont utilisables dans les modèles via style="..." ou dans MediaWiki:Citizen.css.

Surfaces (arrière-plans)

Variable	Description
var(--color-surface-0)	Fond principal du site
var(--color-surface-1)	Surfaces secondaires (modals, dropdowns)
var(--color-surface-2)	Surfaces tertiaires
var(--color-surface-3)	Surfaces quaternaires
var(--color-surface-4)	Surfaces quinaires

Textes

Variable	Description
var(--color-base)	Texte courant
var(--color-emphasized)	Titres et éléments mis en avant
var(--color-subtle)	Légendes, métadonnées, texte secondaire
var(--color-link)	Couleur des liens

Typographie

Le wiki utilise les polices par défaut de Citizen (Roboto). Les titres utilisent font-weight: medium.

Variable	Police	Usage
--font-family-citizen-base	Roboto	Corps de texte
--font-family-citizen-serif	Roboto Serif	Citations, accents
--font-family-citizen-monospace	Roboto Mono	Code, éditeur

Modes de thème

Le skin Citizen gère trois modes. La palette Nefald s'adapte à chacun.

Mode	Classe CSS	Comportement
Clair	.skin-theme-clientpref-day	Toujours en clair
Sombre	.skin-theme-clientpref-night	Toujours en sombre
Automatique	.skin-theme-clientpref-os	Suit le système
Noir pur	.citizen-feature-pure-black-clientpref-1	Variante du mode sombre

Surface 0

--color-surface-0

Fond principal

Surface 1

--color-surface-1

Modals, dropdowns

Surface 2

--color-surface-2

Surfaces tertiaires

Surface 3

--color-surface-3

Surfaces quaternaires

Surface 4

--color-surface-4

Surfaces quinaires

Progressive

--color-progressive

Accent principal

Emphasized

--color-emphasized

Titres, headers

Subtle

--color-subtle

Captions

Link

--color-link

Liens

Bonnes pratiques

• Toujours utiliser les variables CSS plutôt que des couleurs hex codées en dur.
• Tester les modèles en mode clair et sombre avant publication.
• Pour les blocs d'information, préférer les modèles dédiés aux styles inline.
• Ne pas utiliser color: ou background-color: inline avec des valeurs fixes.

Voir aussi

• MediaWiki:Citizen.css — Feuille de style principale