« Aide:Charte graphique » : différence entre les versions

Navigation interactive dans l’historique

Dernière version du 5 mars 2026 à 05:37

Cette page documente les conventions visuelles du wiki. 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 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

La palette sémantique Nefald est définie dans MediaWiki:Citizen.css via des variables --nefald-*. Elle s'adapte automatiquement aux modes clair, sombre et automatique — aucune couleur n'est codée en dur dans les modèles.

Variables par token

Chaque couleur sémantique expose trois variables :

Token	Fond	Texte	Bordure
`success`	`--nefald-success-bg`	`--nefald-success-text`	`--nefald-success-border`
`danger`	`--nefald-danger-bg`	`--nefald-danger-text`	`--nefald-danger-border`
`warning`	`--nefald-warning-bg`	`--nefald-warning-text`	`--nefald-warning-border`
`info`	`--nefald-info-bg`	`--nefald-info-text`	`--nefald-info-border`
`secondary`	`--nefald-neutral-bg`	`--nefald-neutral-text`	`--nefald-neutral-border`

Classes de cellules

Ces classes s'appliquent directement sur les cellules et utilisent les variables ci-dessus.

Classe	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

Modèle

Le modèle Modèle:Couleur est la méthode recommandée pour utiliser la palette sémantique en wikicode. Il gère automatiquement le contexte (cellule ou badge inline).

Aliases acceptés : vert, rouge, jaune, bleu, gris, neutre.

Nom	Badge	Cellule	Syntaxe
Succès	Succès	Succès	`...`
Danger	Danger	Danger	`...`
Avertissement	Avertissement	Avertissement	`...`
Info	Info	Info	`...`
Neutre	Neutre	Neutre	`...`

Surfaces Citizen

Ces variables sont fournies par le skin Citizen et couvrent tous les arrière-plans.

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

Typographie

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

Les titres (h1–h6) utilisent font-weight: medium via Citizen.css.

Modes de thème

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 sombre uniquement

Les variables --nefald-* sont surchargées pour chaque mode dans MediaWiki:Citizen.css — aucune intervention manuelle n'est nécessaire dans les modèles.

Bonnes pratiques

Utiliser Modèle:Couleur pour tout coloriage sémantique dans les tableaux.
Utiliser les variables --nefald-* ou --color-* (Citizen) dans les styles inline, jamais de valeurs hex fixes.
Tester chaque modèle en mode clair et sombre avant publication.
Pour les blocs d'avertissement ou d'information, préférer les modèles dédiés.

Modèles utilisant la charte graphique

Voir aussi

MediaWiki:Citizen.css — Palette Nefald et surcharges de thème
Modèle:Couleur — Application de la palette en wikicode
Aide:Modèle — Bibliothèque des modèles disponibles

@@ Ligne 1 : / Ligne 1 : @@
 {{DISPLAYTITLE:Charte graphique}}
 __TOC__
-Cette page documente les conventions visuelles du wiki Nefald.
+Cette page documente les conventions visuelles du wiki.
 Elle est la référence pour tout contributeur créant des modèles ou des tableaux.
@@ Ligne 63 : / Ligne 63 : @@
 === Classes de cellules ===
-Ces classes s'appliquent directement sur les cellules <code><td></code> et
+Ces classes s'appliquent directement sur les cellules <code><td></code> et utilisent les variables ci-dessus.
-consomment les variables ci-dessus.
 {| class="wikitable" style="width:100%"
@@ Ligne 92 : / Ligne 91 : @@
 === Modèle {{Couleur}} ===
-Le modèle [[Modèle:Couleur|{{Couleur}}]] est la méthode recommandée pour
+Le modèle [[Modèle:Couleur]] est la méthode recommandée pour
 utiliser la palette sémantique en wikicode. Il gère automatiquement le
 contexte (cellule ou badge inline).
-<syntaxhighlight lang="mediawiki">
+'''Aliases acceptés''' : <code>vert</code>, <code>rouge</code>, <code>jaune</code>,
-| {{Couleur|success|En ligne}}       <!-- cellule colorée -->
-{{Couleur|warning|Dégradé}}          <!-- badge inline dans du texte -->
-</syntaxhighlight>
-Aliases acceptés : <code>vert</code>, <code>rouge</code>, <code>jaune</code>,
 <code>bleu</code>, <code>gris</code>, <code>neutre</code>.
@@ Ligne 164 : / Ligne 158 : @@
 == Bonnes pratiques ==
-* Utiliser [[Modèle:Couleur|{{Couleur}}]] pour tout coloriage sémantique dans les tableaux.
+* Utiliser [[Modèle:Couleur]] pour tout coloriage sémantique dans les tableaux.
 * Utiliser les variables <code>--nefald-*</code> ou <code>--color-*</code> (Citizen) dans les styles inline, jamais de valeurs hex fixes.
 * Tester chaque modèle en mode clair ''et'' sombre avant publication.
 * Pour les blocs d'avertissement ou d'information, préférer les [[Modèle:Note|modèles dédiés]].
+== Modèles utilisant la charte graphique ==
+<div class="contributions-dpl">
+{{#dpl:
+|category=Modèle conforme à la charte graphique
+|namespace=Template
+|nottitlematch=%/doc%
+|mode=unordered
+|ordermethod=title
+|order=ascending
+|columns=2
+}}
+</div>
 == Voir aussi ==