Voir la source de Modèle:ColorScheme/doc

== Description ==

Le '''Modèle:ColorScheme''' est le système centralisé de gestion des couleurs du wiki. Il définit toutes les variables CSS utilisées dans les autres modèles ({{tl|ButtonLink}}, {{tl|Font}}, etc.) et permet d'afficher des palettes de couleurs de différentes manières.

=== Fonctionnalités ===

* 🎨 '''Variables CSS globales''' : définit toutes les couleurs du wiki
* 📱 '''Compatible dark/light mode''' : s'adapte au thème Citizen
* 🔧 '''Affichage flexible''' : grille, cercles, ligne, compact
* 📦 '''Modulaire''' : 6 palettes indépendantes
* 🚀 '''Performant''' : n'affiche que ce qui est demandé

== Utilisation ==

=== Syntaxe de base ===

<pre>
{{ColorScheme}}                              <!-- Toutes les palettes -->
{{ColorScheme|palette=social}}               <!-- Une palette spécifique -->
{{ColorScheme|palette=social|display=circle}} <!-- Avec format d'affichage -->
</pre>

=== Paramètres ===

{| class="wikitable"
! Paramètre !! Valeurs possibles !! Description !! Défaut
|-
| <code>palette</code>
| <code>social</code>, <code>minecraft</code>, <code>dev</code>, <code>funding</code>, <code>semantic</code>, <code>text</code>
| Palette à afficher (si vide, affiche toutes)
| ''(toutes)''
|-
| <code>display</code>
| <code>grid</code>, <code>circle</code>, <code>row</code>, <code>compact</code>
| Format d'affichage des couleurs
| <code>grid</code>
|}

== Palettes disponibles ==

=== 📱 social - Réseaux sociaux ===

Couleurs des plateformes sociales et messagerie.

'''Variables incluses :'''
* <code>--color-bluesky</code>, <code>--color-discord</code>, <code>--color-twitter</code>
* <code>--color-youtube</code>, <code>--color-mastodon</code>, <code>--color-twitch</code>
* <code>--color-reddit</code>, <code>--color-linkedin</code>, <code>--color-instagram-*</code>
* <code>--color-threads</code>, <code>--color-tiktok</code>, <code>--color-facebook</code>, <code>--color-snapchat</code>

'''Exemple d'affichage :'''
{{ColorScheme|palette=social|display=grid}}

=== ⛏️ minecraft - Minecraft & Plugins ===

Couleurs des plateformes Minecraft (serveurs, mods, plugins).

'''Variables incluses :'''
* <code>--color-minecraft</code>, <code>--color-paper</code>, <code>--color-purpur</code>
* <code>--color-spigot</code>, <code>--color-bukkit</code>, <code>--color-modrinth</code>
* <code>--color-curseforge</code>, <code>--color-polymart</code>, <code>--color-hangar</code>
* <code>--color-forge</code>, <code>--color-fabric</code>, <code>--color-quilt</code>, <code>--color-neoforge</code>

'''Exemple d'affichage :'''
{{ColorScheme|palette=minecraft|display=circle}}

=== 💻 dev - Développement & Code ===

Couleurs des outils de développement et plateformes Git.

'''Variables incluses :'''
* <code>--color-github</code>, <code>--color-github-releases</code>, <code>--color-gitlab</code>
* <code>--color-stackoverflow</code>, <code>--color-jenkins</code>, <code>--color-docker</code>
* <code>--color-kubernetes</code>, <code>--color-npm</code>, <code>--color-maven</code>, <code>--color-gradle</code>

'''Exemple d'affichage :'''
{{ColorScheme|palette=dev|display=row}}

=== 💰 funding - Financement & Donations ===

Couleurs des plateformes de financement participatif.

'''Variables incluses :'''
* <code>--color-patreon</code>, <code>--color-buymeacoffee</code>, <code>--color-kofi</code>
* <code>--color-liberapay</code>, <code>--color-opencollective</code>, <code>--color-paypal-*</code>
* <code>--color-stripe</code>

'''Exemple d'affichage :'''
{{ColorScheme|palette=funding|display=compact}}

=== 🎨 semantic - Couleurs sémantiques ===

Couleurs pour les états et messages (succès, erreur, avertissement...).

'''Variables incluses :'''
* <code>--color-primary</code>, <code>--color-secondary</code>
* <code>--color-success</code>, <code>--color-danger</code>, <code>--color-warning</code>, <code>--color-info</code>
* <code>--color-light</code>, <code>--color-dark</code>

'''Exemple d'affichage :'''
{{ColorScheme|palette=semantic|display=grid}}

=== ✏️ text - Couleurs de texte ===

Couleurs utilisées par le {{tl|Font}} et autres modèles de mise en forme.

'''Variables incluses :'''
* <code>--color-rouge</code>, <code>--color-bleu</code>, <code>--color-vert</code>, <code>--color-jaune</code>
* <code>--color-orange</code>, <code>--color-violet</code>, <code>--color-rose</code>, <code>--color-cyan</code>
* <code>--color-gris</code>, <code>--color-or</code>, <code>--color-argent</code>, <code>--color-bronze</code>

'''Exemple d'affichage :'''
{{ColorScheme|palette=text|display=circle}}

== Formats d'affichage ==

=== grid (grille) ===

Affichage en grille responsive avec labels et codes de variables.

<pre>{{ColorScheme|palette=social|display=grid}}</pre>

{{ColorScheme|palette=semantic|display=grid}}

=== circle (cercles) ===

Affichage en cercles, idéal pour visualiser des palettes harmonieuses.

<pre>{{ColorScheme|palette=text|display=circle}}</pre>

{{ColorScheme|palette=text|display=circle}}

=== row (ligne) ===

Affichage en ligne horizontale, compact avec scroll si nécessaire.

<pre>{{ColorScheme|palette=funding|display=row}}</pre>

{{ColorScheme|palette=funding|display=row}}

=== compact (minimaliste) ===

Affichage ultra-compact sans labels, juste les couleurs.

<pre>{{ColorScheme|palette=semantic|display=compact}}</pre>

{{ColorScheme|palette=semantic|display=compact}}

== Utilisation dans d'autres modèles ==

=== Dans le CSS d'un modèle ===

Pour utiliser une variable ColorScheme dans le CSS d'un modèle :

<syntaxhighlight lang="css">
.mon-bouton {
    background-color: var(--color-discord);
    color: white;
}

.mon-bouton:hover {
    background-color: var(--color-discord-hover);
}
</syntaxhighlight>

=== Dans la documentation d'un modèle ===

Pour afficher les couleurs disponibles dans la doc d'un modèle :

<pre>
== Couleurs disponibles ==

{{ColorScheme|palette=social|display=grid}}

Utilisez ces couleurs avec le paramètre {{para|type}}.
</pre>

== Exemples concrets ==

=== Documentation du Modèle:ButtonLink ===

<pre>
== Types de boutons ==

Les types suivants sont disponibles avec leurs couleurs respectives :

{{ColorScheme|palette=social|display=grid}}
{{ColorScheme|palette=funding|display=grid}}

Utilisez {{para|type|discord}} pour créer un bouton Discord.
</pre>

=== Documentation du Modèle:Font ===

<pre>
== Couleurs de texte ==

{{ColorScheme|palette=text|display=circle}}

Exemple : {{Font|couleur=rouge|Texte en rouge}}
</pre>

=== Page de style guide du wiki ===

<pre>
= Guide des couleurs =

Toutes les couleurs utilisées sur le wiki :

{{ColorScheme}}
</pre>

== Architecture technique ==

Le système ColorScheme est composé de :

* '''Modèle:ColorScheme''' : modèle principal avec logique d'affichage
* '''Modèle:ColorScheme/styles.css''' : définition des variables CSS
* '''Modèle:ColorScheme/Social''' : sous-modèle palette réseaux sociaux
* '''Modèle:ColorScheme/Minecraft''' : sous-modèle palette Minecraft
* '''Modèle:ColorScheme/Dev''' : sous-modèle palette développement
* '''Modèle:ColorScheme/Funding''' : sous-modèle palette financement
* '''Modèle:ColorScheme/Semantic''' : sous-modèle palette sémantique
* '''Modèle:ColorScheme/Text''' : sous-modèle palette texte
* '''Modèle:ColorScheme/Swatch''' : composant d'affichage d'un échantillon

=== Conventions de nommage ===

Les variables CSS suivent le schéma : <code>--color-{nom}</code>

Pour les couleurs avec état hover : <code>--color-{nom}-hover</code>

Pour les gradients : <code>--color-{nom}-start</code>, <code>--color-{nom}-end</code>, etc.

== Compatibilité ==

* ✅ '''Skin Citizen''' : support natif dark/light mode
* ✅ '''CSS Variables''' : tous les navigateurs modernes
* ✅ '''Responsive''' : s'adapte à tous les écrans
* ✅ '''Accessibilité''' : ratios de contraste respectés

== Maintenance ==

=== Ajouter une nouvelle couleur ===

# Ajouter la variable dans <code>Modèle:ColorScheme/styles.css</code>
# Ajouter l'échantillon dans le sous-modèle de palette approprié (ex: <code>Modèle:ColorScheme/Social</code>)
# Purger le cache

=== Créer une nouvelle palette ===

# Créer <code>Modèle:ColorScheme/MaPalette</code>
# Ajouter les variables dans <code>styles.css</code>
# Ajouter l'appel dans <code>Modèle:ColorScheme</code>
# Documenter dans cette page

== Voir aussi ==

* {{tl|ButtonLink}} : utilise les variables de ColorScheme
* {{tl|Font}} : utilise les couleurs de texte
* [[MediaWiki:Common.css]] : styles globaux du wiki
* [[Spécial:Version#mw-version-skin]] : version du skin Citizen

<includeonly>[[Catégorie:Modèles de mise en forme]][[Catégorie:Système de design]]</includeonly>