Aide:Charte graphique - Historique des versions

Hiob : /* Modèle {{Couleur}} */

2026-03-05T05:37:13Z

Modèle {{Couleur}}

← Version précédente		Version du 5 mars 2026 à 05:37
Ligne 91 :		Ligne 91 :
	=== Modèle {{Couleur}} ===		=== 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		utiliser la palette sémantique en wikicode. Il gère automatiquement le
	contexte (cellule ou badge inline).		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>.		<code>bleu</code>, <code>gris</code>, <code>neutre</code>.

Hiob le 5 mars 2026 à 05:35

2026-03-05T05:35:48Z

← Version précédente		Version du 5 mars 2026 à 05:35
Ligne 1 :		Ligne 1 :
	{{DISPLAYTITLE:Charte graphique}}		{{DISPLAYTITLE:Charte graphique}}
	__TOC__		__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.		Elle est la référence pour tout contributeur créant des modèles ou des tableaux.

Ligne 63 :		Ligne 63 :
	=== Classes de cellules ===		=== 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%"		{\| class="wikitable" style="width:100%"
Ligne 169 :		Ligne 168 :
	* Pour les blocs d'avertissement ou d'information, préférer les [[Modèle:Note\|modèles dédiés]].		* 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 ==		== Voir aussi ==

Hiob : /* Bonnes pratiques */

2026-03-05T05:32:22Z

Bonnes pratiques

← Version précédente		Version du 5 mars 2026 à 05:32
Ligne 164 :		Ligne 164 :
	== Bonnes pratiques ==		== 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.		* 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.		* Tester chaque modèle en mode clair ''et'' sombre avant publication.

Hiob : /* Voir aussi */

2026-03-04T20:46:39Z

Voir aussi

← Version précédente		Version du 4 mars 2026 à 20:46
Ligne 173 :		Ligne 173 :
	* [[MediaWiki:Citizen.css]] — Palette Nefald et surcharges de thème		* [[MediaWiki:Citizen.css]] — Palette Nefald et surcharges de thème
	* [[Modèle:Couleur]] — Application de la palette en wikicode		* [[Modèle:Couleur]] — Application de la palette en wikicode
	* [[Aide:~~Modèles~~]] — Bibliothèque des modèles disponibles		* [[Aide:Modèle]] — Bibliothèque des modèles disponibles

Hiob le 2 mars 2026 à 14:48

2026-03-02T14:48:16Z

Voir les modifications

Hiob : /* Variables disponibles */

2026-03-02T14:33:06Z

Variables disponibles

← Version précédente		Version du 2 mars 2026 à 14:33
Ligne 69 :		Ligne 69 :
	== Variables disponibles ==		== Variables disponibles ==

	Ces variables CSS sont utilisables dans ~~tes~~ modèles via <code>style="..."</code>		Ces variables CSS sont utilisables dans les modèles via <code>style="..."</code>
	ou dans [[MediaWiki:Citizen.css]].		ou dans [[MediaWiki:Citizen.css]].

Hiob le 2 mars 2026 à 14:30

2026-03-02T14:30:39Z

← Version précédente		Version du 2 mars 2026 à 14:30
Ligne 100 :		Ligne 100 :
	\|-		\|-
	\| <code>var(--color-link)</code> \|\| Couleur des liens		\| <code>var(--color-link)</code> \|\| Couleur des liens
	\|}

	~~=== Palette Nefald ===~~

	~~{\| class="wikitable"~~
	~~! Variable !! Mode clair !! Mode sombre~~
	\|-
	~~\| <code>--nefald-success-bg</code> \|\| Vert clair \|\| Vert sombre~~
	\|-
	~~\| <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~~
	\|}		\|}

Ligne 155 :		Ligne 133 :
	\|}		\|}

			<div class="home-cards-grid-3">
			{{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}}
			{{Card\|title=Surface 2\|subtitle=<code>--color-surface-2</code>\|bgcolor=var(--color-surface-2)\|colorheight=80\|text=Surfaces tertiaires}}
			</div>

	<div class="ds-~~swatch~~-grid">
	{{Card\|title=Surface 0\|subtitle=--color-surface-0\|bgcolor=var(--color-surface-~~0)\|colorheight=80\|text=Fond principal}}~~		<div class="home-cards-grid-3">
	~~{{Card\|title=Surface 1\|subtitle=--color-surface-1\|bgcolor=var(--color-surface-1)\|colorheight=80\|text=Modals, dropdowns}}~~		{{Card\|title=Surface 3\|subtitle=<code>--color-surface-3</code>\|bgcolor=var(--color-surface-3)\|colorheight=80\|text=Surfaces quaternaires}}
	~~{{Card\|title=Surface 2\|subtitle=--color-surface-2\|bgcolor=var(--color-surface-2~~)\|colorheight=80\|text=Surfaces ~~tertiaires~~}}		{{Card\|title=Surface 4\|subtitle=<code>--color-surface-4</code>\|bgcolor=var(--color-surface-4)\|colorheight=80\|text=Surfaces quinaires}}
	{{Card\|title=Surface 3\|subtitle=--color-surface-3\|bgcolor=var(--color-surface-3)\|colorheight=80\|text=Surfaces ~~quaternaires~~}}		{{Card\|title=Progressive\|subtitle=<code>--color-progressive</code>\|bgcolor=var(--color-progressive)\|colorheight=80\|text=Accent principal}}
	{{Card\|title=~~Surface 4~~\|subtitle=--color-~~surface-4~~\|bgcolor=var(--color-~~surface-4~~)\|colorheight=80\|text=~~Surfaces quinaires~~}}
	</div>		</div>

	<div class="ds-~~swatch~~-grid">
	~~{{Card\|title=Progressive\|subtitle=--color-progressive\|bgcolor=var(--color-progressive)\|colorheight=80\|text=Accent principal}}~~		<div class="home-cards-grid-3">
	{{Card\|title=Emphasized\|subtitle=--color-emphasized\|bgcolor=var(--color-emphasized)\|colorheight=80\|text=Titres, headers}}		{{Card\|title=Emphasized\|subtitle=<code>--color-emphasized</code>\|bgcolor=var(--color-emphasized)\|colorheight=80\|text=Titres, headers}}
	{{Card\|title=Subtle\|subtitle=--color-subtle\|bgcolor=var(--color-subtle)\|colorheight=80\|text=Captions}}		{{Card\|title=Subtle\|subtitle=<code>--color-subtle</code>\|bgcolor=var(--color-subtle)\|colorheight=80\|text=Captions}}
	{{Card\|title=Link\|subtitle=--color-link\|bgcolor=var(--color-link)\|colorheight=80\|text=Liens}}		{{Card\|title=Link\|subtitle=<code>--color-link</code>\|bgcolor=var(--color-link)\|colorheight=80\|text=Liens}}
	</div>		</div>

Ligne 181 :		Ligne 163 :

	* [[MediaWiki:Citizen.css]] — Feuille de style principale		* [[MediaWiki:Citizen.css]] — Feuille de style principale
	* [[Aide:Modèles]] — Bibliothèque des modèles disponibles

Hiob le 2 mars 2026 à 10:58

2026-03-02T10:58:27Z

@@ Ligne 154 : / Ligne 154 : @@
 | Noir pur || <code>.citizen-feature-pure-black-clientpref-1</code> || Variante du mode sombre
 |}
 == Bonnes pratiques ==

Hiob : Page créée avec « {{DISPLAYTITLE:Charte graphique}} TOC 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_... »`


2026-03-02T10:45:58Z
Page créée avec « {{DISPLAYTITLE:Charte graphique}} __TOC__ 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 <code>--color-progressive-oklch_... »
Nouvelle page
{{DISPLAYTITLE:Charte graphique}}

__TOC__

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 <code>--color-progressive-oklch__h</code>.



{| class="wikitable"

! Variable !! Rôle !! Valeur actuelle

|-

| <code>--color-progressive-oklch__h</code> || Teinte principale || 230

|-

| <code>--color-progressive-oklch__c</code> || Saturation || 0.1679

|-

| <code>--color-progressive-oklch__l</code> || Luminosité || 53.25 %

|}



== Palette sémantique ==



Ces classes s'appliquent sur les cellules de tableaux (<code><td></code>).

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



=== Aperçu ===



{| class="wikitable" style="width:100%"

! Classe !! Rendu !! Usage recommandé

|-

| <code>table-color-success</code>

| <td class="table-color-success">Succès</td>

| Validation, disponibilité, état positif

|-

| <code>table-color-danger</code>

| <td class="table-color-danger">Danger</td>

| Erreur, suppression, état critique

|-

| <code>table-color-warning</code>

| <td class="table-color-warning">Avertissement</td>

| Attention, déprécié, en cours

|-

| <code>table-color-info</code>

| <td class="table-color-info">Information</td>

| Note, contexte, neutre positif

|-

| <code>table-color-secondary</code>

| <td class="table-color-secondary">Neutre</td>

| Données secondaires, en-têtes alternés

|}



=== Exemple d'utilisation ===



<syntaxhighlight lang="mediawiki">

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

|}

</syntaxhighlight>



== Variables disponibles ==



Ces variables CSS sont utilisables dans tes modèles via <code>style="..."</code>

ou dans [[MediaWiki:Citizen.css]].



=== Surfaces (arrière-plans) ===



{| class="wikitable"

! Variable !! Description

|-

| <code>var(--color-surface-0)</code> || Fond principal du site

|-

| <code>var(--color-surface-1)</code> || Surfaces secondaires (modals, dropdowns)

|-

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

! Variable !! Description

|-

| <code>var(--color-base)</code> || Texte courant

|-

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

! Variable !! Mode clair !! Mode sombre

|-

| <code>--nefald-success-bg</code> || Vert clair || Vert sombre

|-

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

! Variable !! Police !! Usage

|-

| <code>--font-family-citizen-base</code> || Roboto || Corps de texte

|-

| <code>--font-family-citizen-serif</code> || Roboto Serif || Citations, accents

|-

| <code>--font-family-citizen-monospace</code> || Roboto Mono || Code, éditeur

|}



== Modes de thème ==



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



{| class="wikitable"

! Mode !! Classe CSS !! Comportement

|-

| Clair || <code>.skin-theme-clientpref-day</code> || Toujours en clair

|-

| Sombre || <code>.skin-theme-clientpref-night</code> || Toujours en sombre

|-

| 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

|}



== 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èle:Note|modèles dédiés]] aux styles inline.

* Ne pas utiliser <code>color:</code> ou <code>background-color:</code> inline avec des valeurs fixes.



== Voir aussi ==



* [[MediaWiki:Citizen.css]] — Feuille de style principale

* [[Aide:Modèles]] — Bibliothèque des modèles disponibles

Aide:Charte graphique - Historique des versions

Hiob : /* Modèle {{Couleur}} */