Color, Alpha, variables CSS & Design System³

Variables CSS & Gestion des couleurs

j’ai planché un moment sur la problématique de gérer la transparence du fond et/ou du texte, indépendamment, et en utilisant des variables CSS.

Les variables peuvent être définie à la racine du document, ou d’un élément du DOM.
Ce qui pose des problèmes d’héritage.
Pour comprendre le sujet, je vais vous montrer les erreurs que j’ai fait en chemin en testant (et en présumant des fonctionnalités).

Rêgles d’accumulation des var()

On peut (pourrait) faire une définition de variable qui est un cumul de plusieurs variables, comme suit :

• Une var() devrait correspondre à une valeur ‘valide’ en CSS pour un élément HTML donné (une variable représente une valeur, et ne peut donc être utilisée sur une déclaration qui ne ‘comprend’ pas la valeur).
• On ne peut pas surcharger une variable définie en :root sur un élément donné (à moins d’ajouter une balise !important -ce qui est toujours dommage-).
• Une var () est interprétée comme un Token et génère donc des espaces ou des fermetures selon son type.
• On peut définir une variable dont la valeur est fausse en CSS, mais peut quand même être utilisée au sein d’une autre définition CSS en tant que variable(!).
• On peut définir une variable dont la valeur est fausse en CSS, et inutilisable en CSS mais que l’on peut lire (et utiliser) via JavaScript!

Méthode CSS, souplesse & portabilité.

Pour que mes variables CSS (de couleurs ici) fonctionnent indépendamment des éléments qu’ils concernent, je dois créer un ‘Token’ de base équivalent à la valeur BRUTE, hors parenthèses (considérant aussi que le ‘;’ est un délimiter de fin de déclaration CSS et n’est pas pris en compte dans la valeur de la variable en ‘rgb’ et/ou autre espace colorimétrique* (Name, Hexa, HSL, HSV,…).

Basics Var() Color config

:root {
--colorDark: 0,0,0;
--colorDark2: 170, 172, 174;
/* Valeurs Brutes en RGB - ces deux variables ne sont pas une valeur valide que je peux utiliser en valeur CSS puisqu'elle n'a pas de parenthèse ou d'espace colorimétrique */

--BgdColorDark {rgb(var--colorDark);}
/* Mais cette déclaration devient valide car entourée d'accolades et par rgb(…) */ 
}

Utilisations

Je veux une couleur ‘Plain’ (à 100%),  j’utilise  une classe simple avec un « var(–BgdColorDark(1,2,3,4,…) »  qui hérite de la valeur rgb brute.

.monBloc {
background :var(--BgdColorDark1);
}

Je veux une couleur X avec une alpha (opacité) en variable,  j’utilise la formule suivante :

div.monBloc {
--alpha : 0.5;
background : rgba(x,x,x,var(--alpha));
}

ou, mieux, parce que Design Sytem  oblige, j’utilise la variable de la valeur brute, soit :

div.monBloc {
--alpha : 0.5;
background : rgba(var(--BgdColorDark),var(--alpha));}
}

l’intérêt de tout cela, me direz-vous?

1. Avoir une unique source (le token de la valeur brute) pour changer les couleurs selon la charte graphique (la –varColor de base reprise comme valeur de variable est normalement l’unique valeur à changer) et ça peut être automatiser à partir du Design Sytem.
2. Pouvoir contrôler la transparence élément par élément, grâce à une variable ‘–alpha’ qui est assignable à chaque élément indépendamment du DOM en utilisant var(–alpha:xx)
3. Contrôler indépendamment l’opacité du texte ou du fond, ou des deux en même temps, de manière dynamique en utilisant une variable –alpha commune ou une valeur différente pour le fond(–alphaBgd) et le texte (–alphaTxt), tout cela dérivée de la couleur d’origine
4. Créer des classes CSS qui appliquent uniquement la valeur de l’alpha à un élément
5. Ou des classes qui appliquent uniquement un effet de transformation CSS ou SVG
6. Bonus : la logique est applicable à n’importe quelle définition (CSS) !
   Je l’utilise pour faire mes ‘tokens’ d’espacement (valeur de margin), pour les appels de polices de caractères, des effets spéciaux, etc…

Particulièrement utile quand on doit faire un système DesignToCode. On approfondit et résume dans le prochain article.