Valider 711c7d14 rédigé par marcimat's avatar marcimat
Parcourir les fichiers

Modification substantielles dans les couleurs des thèmes de l'espace privé :... 

Modification substantielles dans les couleurs des thèmes de l'espace privé : on considère qu'il n'y a qu'une couleur (la foncée),
comme couleur définissant un thème. La couleur claire est calculée à partir de celle là.
Ça modifie légèrement ici ou là l'apparence du privé. Il faudra peut être redéfinir légèrement certaines couleurs en les saturant ou désaturant selon).

On renomme cette couleur "couleur_theme".

Du coup, avec ceci, on crée des variables CSS (hsl) :

```css
--spip-color-theme-lightest
--spip-color-theme-lighter
--spip-color-theme-light
--spip-color-theme
--spip-color-theme-dark
--spip-color-theme-darker
--spip-color-theme-darkest
```

Qui remplacent la proposition précédente.
On définit aussi quelques autres variables -hsl, -rgb (les 3 valeurs séparées par des virgules), -h, -s, -l, -r, -g, -b
(chaque valeur) mais également -hs, et -sl qui regroupent 2 valeurs.
C'est pour pouvoir économiser quelques caractères en changeant la teinte ou la clarté, comme pour le calcul ici des variantes :

```css
--spip-color-theme-dark: hsl(var(--spip-color-theme-hs), calc(var(--spip-color-theme-l) * var(--spip-color-coef-dark)));
```
parent b33e9d3c

ecrire/inc/couleurs.php

+33 −44
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -40,74 +40,63 @@ if (!defined('_ECRIRE_INC_VERSION')) { 
function inc_couleurs_dist($choix = null, $ajouter = false) {

	static $couleurs_spip = array(

		// Saumon

		4 => array(

			"couleur_foncee" => "#CDA261",

			"couleur_claire" => "#FFDDAA",

		),

		4 => ["couleur_theme" => "#CDA261"],

		// Orange

		3 => array(

			"couleur_foncee" => "#fa9a00",

			"couleur_claire" => "#ffc000",

		),

		3 => ["couleur_theme" => "#fa9a00"],

		// Rouge

		8 => array(

			"couleur_foncee" => "#DF4543",

			"couleur_claire" => "#FAACB0",

		),

		8 => ["couleur_theme" => "#DF4543"],

		// Framboise

		2 => array(

			"couleur_foncee" =>  "#D51B60",

			"couleur_claire" => "#EF91B4",

		),

		2 => ["couleur_theme" =>  "#D51B60"],

		// Vert de gris

		7 => array(

			"couleur_foncee" => "#999966",

			"couleur_claire" => "#CCCC99",

		),

		7 => ["couleur_theme" => "#999966"],

		// Vert

		1 => array(

			"couleur_foncee" => "#9DBA00",

			"couleur_claire" => "#C5E41C",

		),

		1 => ["couleur_theme" => "#9DBA00"],

		//  Bleu pastel

		5 => array(

			"couleur_foncee" => "#5da7c5",

			"couleur_claire" => "#97d2e1",

		),

		5 => ["couleur_theme" => "#5da7c5"],

		// Violet

		9 => array(

			"couleur_foncee" => "#8F8FBD",

			"couleur_claire" => "#C4C4DD",

		),

		9 => ["couleur_theme" => "#8F8FBD"],

		//  Gris

		6 => array(

			"couleur_foncee" => "#85909A",

			"couleur_claire" => "#C0CAD4",

		),

		6 => ["couleur_theme" => "#85909A"],

		//  Gris

		10 => array(

			"couleur_foncee" => "#909090",

			"couleur_claire" => "#D3D3D3",

		),

		10 => ["couleur_theme" => "#909090"],

	);



	if (is_numeric($choix)) {

		$c = $couleurs_spip[$choix];

		// compat < SPIP 3.3

		include_spip('inc/filtres_images_mini');

		$c["couleur_foncee"] = $c["couleur_theme"];

		$c["couleur_claire"] = "#" . couleur_eclaircir($c["couleur_theme"], .5);



		return

			"couleur_claire=" . substr($couleurs_spip[$choix]['couleur_claire'], 1) .

			'&couleur_foncee=' . substr($couleurs_spip[$choix]['couleur_foncee'], 1);

			'couleur_theme=' . substr($c['couleur_theme'], 1)

			// compat < SPIP 3.3

			. '&couleur_claire=' . substr($c['couleur_claire'], 1)

			. '&couleur_foncee=' . substr($c['couleur_foncee'], 1);

	} else {

		if (is_array($choix)) {

			// compat < SPIP 3.3

			$compat_spip_33 = function($c) {

				if (!isset($c["couleur_theme"])) {

					$c["couleur_theme"] = $c["couleur_foncee"];

					unset($c["couleur_foncee"]);

					unset($c["couleur_claire"]);

					unset($c["couleur_lien"]);

					unset($c["couleur_lien_off"]);

				}

				return $c;

			};

			if ($ajouter) {

				foreach ($choix as $c) {

					$couleurs_spip[] = $c;

					$couleurs_spip[] = $compat_spip_33($c);

				}



				return $couleurs_spip;

			} else {

				$choix = array_map($compat_spip_33, $choix);

				return $couleurs_spip = $choix;

			}

		}



	}



	return $couleurs_spip;

prive/formulaires/configurer_preferences.html

+5 −5
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -64,11 +64,11 @@ 
					<input type='radio' class='radio' name='#GET{name}' id='[(#GET{name})]_#CLE'[(#ENV{#GET{name}}|=={#CLE}|oui)checked="checked" ]value="#CLE"

					onchange="if (this.checked) { jQuery('head>link#csspriveedef').clone().removeAttr('id').appendTo(jQuery('head')).attr('href', '[(#ENV{_couleurs_url/#CLE})]'); jQuery('body').removeClass(function(i, c){ return (c.match (/(^|\s)couleur_\S+/g) || []).join(' ');}).addClass('couleur_#CLE')}" />

					<label for="[(#GET{name})]_#CLE">

						<img src="#CHEMIN{rien.gif}" alt="" width="16" height="16" style="background-color:[#(#VALEUR{couleur_foncee}|couleur_foncer)];" />

						<img src="#CHEMIN{rien.gif}" alt="<:choix_couleur_interface|attribut_html:> 1" width="16" height="16" style="background-color:[(#VALEUR{couleur_foncee})];" />

						<img src="#CHEMIN{rien.gif}" alt="" width="16" height="16" style="background-color:[(#VALEUR{couleur_claire})];" />

						<img src="#CHEMIN{rien.gif}" alt="" width="16" height="16" style="background-color:[#(#VALEUR{couleur_claire}|couleur_eclaircir)];" />

						<img src="#CHEMIN{rien.gif}" alt="" width="16" height="16" style="background-color:[#(#VALEUR{couleur_claire}|couleur_eclaircir{0.75})];" />

						<img src="#CHEMIN{rien.gif}" alt="" width="16" height="16" style="background-color:[#(#VALEUR{couleur_theme}|couleur_foncer)];" />

						<img src="#CHEMIN{rien.gif}" alt="<:choix_couleur_interface|attribut_html:> 1" width="16" height="16" style="background-color:[(#VALEUR{couleur_theme})];" />

						<img src="#CHEMIN{rien.gif}" alt="" width="16" height="16" style="background-color:[#(#VALEUR{couleur_theme}|couleur_eclaircir)];" />

						<img src="#CHEMIN{rien.gif}" alt="" width="16" height="16" style="background-color:[#(#VALEUR{couleur_theme}|couleur_eclaircir{0.75})];" />

						<img src="#CHEMIN{rien.gif}" alt="" width="16" height="16" style="background-color:[#(#VALEUR{couleur_theme}|couleur_eclaircir{0.875})];" />

					</label>

				</div>

				</BOUCLE_couleurs>

prive/themes/spip/style_prive.css.html

+3 −2
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -10,8 +10,9 @@ 
#HTTP_HEADER{Vary: Accept-Encoding}

/*

Valeurs par defaut :

#SET{claire,##ENV{couleur_claire,edf3fe}} [claire: (#GET{claire});]

#SET{foncee,##ENV{couleur_foncee,3874b0}} [foncee: (#GET{foncee});]

#SET{theme,##ENV{couleur_theme,3874b0}} [theme: (#GET{theme});]

#SET{foncee,#GET{theme}} [foncee: (#GET{foncee});]

[(#SET{claire,[#(#GET{theme}|couleur_eclaircir{.5})]})] [claire: (#GET{claire});]

#SET{left,#ENV{ltr}|choixsiegal{left,left,right}} [left: (#GET{left});]

#SET{right,#ENV{ltr}|choixsiegal{left,right,left}} [right: (#GET{right});]

#SET{rtl,#ENV{ltr}|choixsiegal{left,'',_rtl}} [rtl: (#GET{rtl});]

prive/themes/spip/vars.css.html

+25 −19
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -11,25 +11,31 @@ 




:root {

	--spip-couleur-claire: #ENV{claire};

	--spip-couleur-claire-hsl: [(#ENV{claire}|couleur_hex_to_hsl)];

	--spip-couleur-claire-h: [(#ENV{claire}|couleur_hex_to_hsl{h})];

	--spip-couleur-claire-s: [(#ENV{claire}|couleur_hex_to_hsl{s})];

	--spip-couleur-claire-l: [(#ENV{claire}|couleur_hex_to_hsl{l})];

	--spip-couleur-claire-rgb: [(#ENV{claire}|couleur_hex_to_rgb)];

	--spip-couleur-claire-r: [(#ENV{claire}|couleur_hex_to_rgb{r})];

	--spip-couleur-claire-g: [(#ENV{claire}|couleur_hex_to_rgb{g})];

	--spip-couleur-claire-b: [(#ENV{claire}|couleur_hex_to_rgb{b})];



	--spip-couleur-foncee: #ENV{foncee};

	--spip-couleur-foncee-hsl: [(#ENV{foncee}|couleur_hex_to_hsl)];

	--spip-couleur-foncee-h: [(#ENV{foncee}|couleur_hex_to_hsl{h})];

	--spip-couleur-foncee-s: [(#ENV{foncee}|couleur_hex_to_hsl{s})];

	--spip-couleur-foncee-l: [(#ENV{foncee}|couleur_hex_to_hsl{l})];

	--spip-couleur-foncee-rgb: [(#ENV{foncee}|couleur_hex_to_rgb)];

	--spip-couleur-foncee-r: [(#ENV{foncee}|couleur_hex_to_rgb{r})];

	--spip-couleur-foncee-g: [(#ENV{foncee}|couleur_hex_to_rgb{g})];

	--spip-couleur-foncee-b: [(#ENV{foncee}|couleur_hex_to_rgb{b})];

	--spip-color-coef-lightest: .875;

	--spip-color-coef-lighter: .75;

	--spip-color-coef-light: .5;

	--spip-color-coef-dark: 1.25;

	--spip-color-coef-darker: 1.5;

	--spip-color-coef-darkest: 1.75;



	--spip-color-theme-hsl: [(#ENV{couleur_theme}|couleur_hex_to_hsl{"h, s, l"})];

	--spip-color-theme-hs: [(#ENV{couleur_theme}|couleur_hex_to_hsl{"h, s"})];

	--spip-color-theme-sl: [(#ENV{couleur_theme}|couleur_hex_to_hsl{"s, l"})];

	--spip-color-theme-h: [(#ENV{couleur_theme}|couleur_hex_to_hsl{h})];

	--spip-color-theme-s: [(#ENV{couleur_theme}|couleur_hex_to_hsl{s})];

	--spip-color-theme-l: [(#ENV{couleur_theme}|couleur_hex_to_hsl{l})];

	--spip-color-theme-rgb: [(#ENV{couleur_theme}|couleur_hex_to_rgb{"r, g, b"})];

	--spip-color-theme-r: [(#ENV{couleur_theme}|couleur_hex_to_rgb{r})];

	--spip-color-theme-g: [(#ENV{couleur_theme}|couleur_hex_to_rgb{g})];

	--spip-color-theme-b: [(#ENV{couleur_theme}|couleur_hex_to_rgb{b})];



	--spip-color-theme-lightest: hsl(var(--spip-color-theme-hs), calc(var(--spip-color-theme-l) * var(--spip-color-coef-lightest)));;

	--spip-color-theme-lighter: hsl(var(--spip-color-theme-hs), calc(var(--spip-color-theme-l) * var(--spip-color-coef-lighter)));

	--spip-color-theme-light : hsl(var(--spip-color-theme-hs), calc(var(--spip-color-theme-l) * var(--spip-color-coef-light)));

	--spip-color-theme: hsl(var(--spip-color-theme-hsl));

	--spip-color-theme-dark: hsl(var(--spip-color-theme-hs), calc(var(--spip-color-theme-l) * var(--spip-color-coef-dark)));

	--spip-color-theme-darker: hsl(var(--spip-color-theme-hs), calc(var(--spip-color-theme-l) * var(--spip-color-coef-darker)));

	--spip-color-theme-darkest: hsl(var(--spip-color-theme-hs), calc(var(--spip-color-theme-l) * var(--spip-color-coef-darkest)));



	--spip-css-dir: #ENV{dir};

	--spip-css-left: #ENV{left};

Forge communautaire SPIP | Charte d'utilisation | Signaler un problème sur ce site