Ajout de variables CSS pour avoir un dégradé de gris également. Nomenclature...

Ajout de variables CSS pour avoir un dégradé de gris également. Nomenclature et valeurs reprises des variables de couleur (with marcimat).

prive/themes/spip/vars.css.html

@@ -20,7 +20,7 @@
 :root,
 [data-spip-theme-colors],
 [class*="spip-theme-colors"] {
-	[(#VAL|spip_generer_variables_css_couleurs_actives)]
+	[(#VAL|spip_generer_variables_css_couleurs)]
 }
 
 

prive/themes/spip/vars.css_fonctions.php

@@ -61,7 +61,7 @@ function spip_generer_variables_css_couleurs_theme(string $couleur) : \Spip_Css_
     $vars->add("--spip-color-theme--s", couleur_hex_to_hsl($couleur, "s"));
     $vars->add("--spip-color-theme--l", couleur_hex_to_hsl($couleur, "l"));
 
-    // un joli dégradé de presque blanc à presque noir…
+    // un joli dégradé coloré de presque blanc à presque noir…
     $vars->add("--spip-color-theme--100", couleur_hex_to_hsl(couleur_eclaircir($couleur, .99), "h, s, l"));
     $vars->add("--spip-color-theme--98", couleur_hex_to_hsl(couleur_eclaircir($couleur, .95), "h, s, l"));
     $vars->add("--spip-color-theme--95", couleur_hex_to_hsl(couleur_eclaircir($couleur, .90), "h, s, l"));
@@ -80,12 +80,12 @@ function spip_generer_variables_css_couleurs_theme(string $couleur) : \Spip_Css_
 }
 
 /**
- * Génère les variables CSS dépendantes des couleurs du thème actif.
+ * Génère les variables CSS de couleurs, dont celles dépendantes des couleurs du thème actif.
  */
-function spip_generer_variables_css_couleurs_actives() : \Spip_Css_Vars_Collection {
+function spip_generer_variables_css_couleurs() : \Spip_Css_Vars_Collection {
     $vars = new \Spip_Css_Vars_Collection();
 
-    // nos déclinaisons (basées sur le dégradé précedent, où 60 est là couleur du thème)
+    // nos déclinaisons de couleur (basées sur le dégradé précedent, où 60 est là couleur du thème)
     $vars->add("--spip-color-theme-white--hsl", "var(--spip-color-theme--100)");
     $vars->add("--spip-color-theme-lightest--hsl", "var(--spip-color-theme--95)");
     $vars->add("--spip-color-theme-lighter--hsl", "var(--spip-color-theme--90)");
@@ -106,5 +106,26 @@ function spip_generer_variables_css_couleurs_actives() : \Spip_Css_Vars_Collecti
     $vars->add("--spip-color-theme-darkest", "hsl(var(--spip-color-theme-darkest--hsl))");
     $vars->add("--spip-color-theme-black", "hsl(var(--spip-color-theme-black--hsl))");
 
+    // déclinaisons de gris (luminosité calquée sur le dégradé de couleur)
+    $vars->add("--spip-color-white--hsl", "0, 0%, 100%");
+    $vars->add("--spip-color-gray-lightest--hsl", "0, 0%, 95%");
+    $vars->add("--spip-color-gray-lighter--hsl", "0, 0%, 90%");
+    $vars->add("--spip-color-gray-light--hsl", "0, 0%, 80%");
+    $vars->add("--spip-color-gray--hsl", "0, 0%, 60%");
+    $vars->add("--spip-color-gray-dark--hsl", "0, 0%, 40%");
+    $vars->add("--spip-color-gray-darker--hsl", "0, 0%, 20%");
+    $vars->add("--spip-color-gray-darkest--hsl", "0, 0%, 10%");
+    $vars->add("--spip-color-black--hsl", "0, 0%, 0%");
+
+    $vars->add("--spip-color-white", "hsl(var(--spip-color-white--hsl))");
+    $vars->add("--spip-color-gray-lightest", "hsl(var(--spip-color-gray-lightest--hsl))");
+    $vars->add("--spip-color-gray-lighter", "hsl(var(--spip-color-gray-lighter--hsl))");
+    $vars->add("--spip-color-gray-light", "hsl(var(--spip-color-gray-light--hsl))");
+    $vars->add("--spip-color-gray", "hsl(var(--spip-color-gray--hsl))");
+    $vars->add("--spip-color-gray-dark", "hsl(var(--spip-color-gray-dark--hsl))");
+    $vars->add("--spip-color-gray-darker", "hsl(var(--spip-color-gray-darker--hsl))");
+    $vars->add("--spip-color-gray-darkest", "hsl(var(--spip-color-gray-darkest--hsl))");
+    $vars->add("--spip-color-black", "hsl(var(--spip-color-black--hsl))");
+
     return $vars;
-}
+}
\ No newline at end of file