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

Navigation interactive dans l’historique

Dernière version du 2 mars 2026 à 14:48

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

consomment 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).

| {{Couleur|success|En ligne}}       <!-- cellule colorée -->
{{Couleur|warning|Dégradé}}          <!-- badge inline dans du texte -->

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.

Voir aussi

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

@@ Ligne 7 : / Ligne 7 : @@
 La couleur de marque est définie via le système OKLCH du skin Citizen.
-La teinte (hue) actuelle est '''230''' (bleu-acier).
+La teinte actuelle est '''230''' (bleu-acier).
 Pour modifier la teinte globale, éditer [[MediaWiki:Citizen.css]] et changer
@@ Ligne 24 : / Ligne 24 : @@
 == Palette sémantique ==
-Ces classes s'appliquent sur les cellules de tableaux (<code><td></code>).
+La palette sémantique Nefald est définie dans [[MediaWiki:Citizen.css]] via des
-Elles s'adaptent automatiquement au mode clair, sombre et automatique.
+variables <code>--nefald-*</code>. Elle s'adapte automatiquement aux modes
+clair, sombre et automatique — aucune couleur n'est codée en dur dans les modèles.
-=== Aperçu ===
+=== Variables par token ===
+Chaque couleur sémantique expose trois variables :
+{| class="wikitable"
+! Token !! Fond !! Texte !! Bordure
+|-
+| <code>success</code>
+| <code>--nefald-success-bg</code>
+| <code>--nefald-success-text</code>
+| <code>--nefald-success-border</code>
+|-
+| <code>danger</code>
+| <code>--nefald-danger-bg</code>
+| <code>--nefald-danger-text</code>
+| <code>--nefald-danger-border</code>
+|-
+| <code>warning</code>
+| <code>--nefald-warning-bg</code>
+| <code>--nefald-warning-text</code>
+| <code>--nefald-warning-border</code>
+|-
+| <code>info</code>
+| <code>--nefald-info-bg</code>
+| <code>--nefald-info-text</code>
+| <code>--nefald-info-border</code>
+|-
+| <code>secondary</code>
+| <code>--nefald-neutral-bg</code>
+| <code>--nefald-neutral-text</code>
+| <code>--nefald-neutral-border</code>
+|}
+=== Classes de cellules ===
+Ces classes s'appliquent directement sur les cellules <code><td></code> et
+consomment les variables ci-dessus.
 {| class="wikitable" style="width:100%"
@@ Ligne 53 : / Ligne 90 : @@
 |}
-=== Exemple d'utilisation ===
+=== Modèle {{Couleur}} ===
+Le modèle [[Modèle:Couleur|{{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">
-{| class="wikitable"
+| {{Couleur|success|En ligne}}       <!-- cellule colorée -->
-! Composant !! État
+{{Couleur|warning|Dégradé}}          <!-- badge inline dans du texte -->
-|-
-| 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>
-|}
 </syntaxhighlight>
-== Variables disponibles ==
+Aliases acceptés : <code>vert</code>, <code>rouge</code>, <code>jaune</code>,
+<code>bleu</code>, <code>gris</code>, <code>neutre</code>.
-Ces variables CSS sont utilisables dans tes modèles via <code>style="..."</code>
+{{#invoke:TableColors|list}}
-ou dans [[MediaWiki:Citizen.css]].
-=== Surfaces (arrière-plans) ===
+== Surfaces Citizen ==
-{| class="wikitable"
+Ces variables sont fournies par le skin Citizen et couvrent tous les arrière-plans.
-! Variable !! Description
-|-
+<div class="home-cards-grid-3">
-| <code>var(--color-surface-0)</code> || Fond principal du site
+{{Card|title=Surface 0|subtitle=<code>--color-surface-0</code>|bgcolor=var(--color-surface-0)|colorheight=80|text=Fond principal}}
-|-
+{{Card|title=Surface 1|subtitle=<code>--color-surface-1</code>|bgcolor=var(--color-surface-1)|colorheight=80|text=Modals, dropdowns}}
-| <code>var(--color-surface-1)</code> || Surfaces secondaires (modals, dropdowns)
+{{Card|title=Surface 2|subtitle=<code>--color-surface-2</code>|bgcolor=var(--color-surface-2)|colorheight=80|text=Surfaces tertiaires}}
-|-
+</div>
-| <code>var(--color-surface-2)</code> || Surfaces tertiaires
-|-
-| <code>var(--color-surface-3)</code> || Surfaces quaternaires
-|-
-| <code>var(--color-surface-4)</code> || Surfaces quinaires
-|}
-=== Textes ===
-{| class="wikitable"
+<div class="home-cards-grid-3">
-! Variable !! Description
+{{Card|title=Surface 3|subtitle=<code>--color-surface-3</code>|bgcolor=var(--color-surface-3)|colorheight=80|text=Surfaces quaternaires}}
-|-
+{{Card|title=Surface 4|subtitle=<code>--color-surface-4</code>|bgcolor=var(--color-surface-4)|colorheight=80|text=Surfaces quinaires}}
-| <code>var(--color-base)</code> || Texte courant
+{{Card|title=Progressive|subtitle=<code>--color-progressive</code>|bgcolor=var(--color-progressive)|colorheight=80|text=Accent principal}}
-|-
+</div>
-| <code>var(--color-emphasized)</code> || Titres et éléments mis en avant
-|-
-| <code>var(--color-subtle)</code> || Légendes, métadonnées, texte secondaire
-|-
-| <code>var(--color-link)</code> || Couleur des liens
-|}
-=== Palette Nefald ===
-{| class="wikitable"
+<div class="home-cards-grid-3">
-! Variable !! Mode clair !! Mode sombre
+{{Card|title=Emphasized|subtitle=<code>--color-emphasized</code>|bgcolor=var(--color-emphasized)|colorheight=80|text=Titres, headers}}
-|-
+{{Card|title=Subtle|subtitle=<code>--color-subtle</code>|bgcolor=var(--color-subtle)|colorheight=80|text=Captions}}
-| <code>--nefald-success-bg</code> || Vert clair || Vert sombre
+{{Card|title=Link|subtitle=<code>--color-link</code>|bgcolor=var(--color-link)|colorheight=80|text=Liens}}
-|-
+</div>
-| <code>--nefald-success-text</code> || Vert foncé || Vert clair
-|-
-| <code>--nefald-danger-bg</code> || Rouge clair || Rouge sombre
-|-
-| <code>--nefald-danger-text</code> || Rouge foncé || Rouge clair
-|-
-| <code>--nefald-warning-bg</code> || Jaune clair || Jaune sombre
-|-
-| <code>--nefald-info-bg</code> || Bleu clair || Bleu sombre
-|-
-| <code>--nefald-accent</code> || Bleu-acier vif || Bleu-acier éclairci
-|-
-| <code>--nefald-accent-subtle</code> || Bleu très clair || Bleu très sombre
-|}
 == Typographie ==
-Le wiki utilise les polices par défaut de Citizen (Roboto).
-Les titres utilisent <code>font-weight: medium</code>.
 {| class="wikitable"
@@ Ligne 138 : / Ligne 141 : @@
 | <code>--font-family-citizen-monospace</code> || Roboto Mono || Code, éditeur
 |}
+Les titres (h1–h6) utilisent <code>font-weight: medium</code> via Citizen.css.
 == Modes de thème ==
-Le skin Citizen gère trois modes. La palette Nefald s'adapte à chacun.
 {| class="wikitable"
@@ Ligne 152 : / Ligne 155 : @@
 | Automatique || <code>.skin-theme-clientpref-os</code> || Suit le système
 |-
-| Noir pur || <code>.citizen-feature-pure-black-clientpref-1</code> || Variante du mode sombre
+| Noir pur || <code>.citizen-feature-pure-black-clientpref-1</code> || Variante sombre uniquement
 |}
+Les variables <code>--nefald-*</code> sont surchargées pour chaque mode dans
+[[MediaWiki:Citizen.css]] — aucune intervention manuelle n'est nécessaire dans
+les modèles.
 == Bonnes pratiques ==
-* '''Toujours utiliser les variables CSS''' plutôt que des couleurs hex codées en dur.
+* Utiliser [[Modèle:Couleur|{{Couleur}}]] pour tout coloriage sémantique dans les tableaux.
-* Tester les modèles en mode clair ''et'' sombre avant publication.
+* Utiliser les variables <code>--nefald-*</code> ou <code>--color-*</code> (Citizen) dans les styles inline, jamais de valeurs hex fixes.
-* Pour les blocs d'information, préférer les [[Modèle:Note|modèles dédiés]] aux styles inline.
+* Tester chaque modèle en mode clair ''et'' sombre avant publication.
-* Ne pas utiliser <code>color:</code> ou <code>background-color:</code> inline avec des valeurs fixes.
+* Pour les blocs d'avertissement ou d'information, préférer les [[Modèle:Note|modèles dédiés]].
 == Voir aussi ==
-* [[MediaWiki:Citizen.css]] — Feuille de style principale
+* [[MediaWiki:Citizen.css]] — Palette Nefald et surcharges de thème
+* [[Modèle:Couleur]] — Application de la palette en wikicode
 * [[Aide:Modèles]] — Bibliothèque des modèles disponibles