frendeitpt

color - informations sur les couleurs UP

Cette option est utile uniquement si vous utilisez la feuille de style de UP.
Elle permet d'utiliser le nom UP des couleurs comme argument d'une règle CSS.

L'action renvoyant uniquement un code couleur, elle ne peut être utilisée seule.

🆙 color : retourne la valeur d'une couleur de la feuille de style de UP

Cliquer pour lire la documentation

syntaxe {up color=UP-COLOR-NAME}
version UP-2.5 author Lomart license GNU/GPLv3 tags HTML
  • color: nom UP de la couleur (français ou anglais) ou de la variable CSS (--red)
  • default = #000: couleur retournée si nom couleur inexistant
  • info = 0: affiche la liste des couleurs avec leurs valeurs

    un exemple simple

    Une action div va servir de support pour la démonstration.

    avec l'option class
    {up div | class=bg-darkRed t-yellow p2}
    avec l'option <strong>class</strong>
    {/up div}
    avec l'option style
    {up div | style=background-color:{up color=darkRed};color:{up color=yellow};padding:24px}
      avec l'option <strong>style</strong>
    {/up div}

    Le premier exemple utilise l'option class pour définir les couleurs de fond et du texte.
    La feuille de style propose les classes bg-darkRed (bg-rougeFonce en français) et t-yellow (t-jaune) pour colorer notre pavé.

    Le deuxième exemple, juste pour la démo, utilise l'option style pour définir les couleurs.
    Une règle CSS n'acceptant pas les noms UP pour les couleurs, il est nécessaire d'utiliser l'action color pour le faire.

    L'action color peut être utilisée directement dans une règle CSS inline, comme dans l'exemple ci-dessous.
    Cette méthode n'est pas possible avec les éditeurs wysiwyg qui vont effacer cette formulation "exotique". Pour éviter cela, j'ai utilisé l'action bbcode

    Avec du HTML et CSS direct
    {up bbcode=[div style="border:3px dotted #ffee00; background-color:{up color=darkRed};color:{up color=yellow}; padding:24px"]
      Avec du HTML et CSS direct
    [/div]}

    Prise en charge des variables CSS

    Depuis la version 2.5, UP déclare ses couleurs comme variables CSS. Cela permet de les utiliser directement dans une règle CSS.

    Un bloc avec du texte rouge,
    sur fond jaune,
    une bordure pleine rose
    et des pointillés violet
    {up div= bd2 bd-pink tc p2
     | style=color:{up color=red};
             outline:5px dotted var(--purple);
             background-color:{up color=--YELLOW}
    }
    Un bloc avec du texte rouge, sur fond jaune, une bordure pleine rose et des pointillés violet
    {/up div}

    Dans l'exemple ci-dessus, j'utilise toutes les méthodes pour colorer des éléments :

    • class= bd2 bd-pink va créer la bordure rose de 2px avec les classes de UP
    • style=color:#ff1111  un style inline qui utilise l'action color pour récupérer le code de la couleur rouge pour le texte
    • style=outline:5px dotted var(--purple)  la bordure externe est définie avec la méthode CSS classique qui utilise le nom de la variable couleur
    • style=background-color:var(--yellow)   pour la couleur de fond, on utilise la même méthode que pour outline, mais en utilisant l'action UP qui va retourner la syntaxe css attendue : var(--yellow). Les noms de variables css étant case-sensitive et généralement en minuscules, l'action color en tient compte.

    Astuce : rendre prioritaire la feuille de style de UP

    L'ordre de priorité des règles CSS dépend principalement de 2 facteurs :

    1. le poids de son sélecteur : div.foo aura priorité sur .foo
    2. pour un même poids, c'est la dernière règle chargée qui sera retenue.

    Ne pouvant agir sur le premier point, il faut charger la feuille de UP le plus tard possible.

    L'astuce consiste à charger up.css à l'aide d'un module en position debug. Pour cela, j'utilise le module LM-Custom version site.

    1. dans les paramètres du plugin up, je désactive le chargement de UP.CSS
    2. dans le module LM-Custom, publié en position debug, j'ajoute l'appel plugins/content/up/assets/up.css dans l'onglet CSS

    En cas d'erreur

    Non sensible minuscules/majuscules, le nom de la couleur doit toutefois exister !

    En cas d'erreur, un message d'erreur sera affiché au début de l'article.

    Par défaut, la couleur retournée sera le noir, mais il est possible de la choisir avec l'option default

    Les couleurs UP

    L'action color propose une aide pour visualiser les couleurs disponibles sur le site avec leurs noms en français et en anglais.

    Il suffit d'ajouter l'option info, comme ceci {up color | info}.

    noir
    black
    #000
    grisFonce
    darkGrey
    #333
    gris
    grey
    #888
    grisClair
    lightGrey
    #bbb
    grisPale
    paleGrey
    #eee
    blanc
    white
    #fff
    bleuFonce
    darkBlue
    #001f3f
    bleu
    blue
    #01457F
    bleuClair
    lightBlue
    #069
    bleuPale
    paleBlue
    #BCE0FF
    vertFonce
    darkGreen
    #006400
    vert
    green
    #46a546
    vertClair
    lightGreen
    #98fb98
    brun
    brown
    #a0522d
    beige
    tan
    #E8DAC3
    rougeFonce
    darkRed
    #8b0000
    rouge
    red
    #ff1111
    rougeClair
    lightRed
    #f08080
    jauneFonce
    darkYellow
    #ffc40d
    jaune
    yellow
    #ffee00
    jauneClair
    lightYellow
    #ffffe0
    orange
    orange
    #ff851b
    rose
    pink
    #f012be
    violet
    purple
    #9400D3
    c0
    transparent
    transparent
    c1
    primary
    #01457F
    c2
    secondary
    #888

    Chaque pavé est composé :

    une bordure haute montre la couleur d'origine définie par UP

    la couleur de la partie centrale est celle qui est active. Celle que vous avez éventuellement modifiée. Y figure le nom en français, en anglais et sa valeur.

    une bordure basse indique qu'un autre plugin ou template prioritaire utilise le nom anglais comme nom de variable CSS (ex: --green). Le test est fait sur le nom anglais qui risque le plus de poser un conflit.

    Note : c0, c1 et c2 sont les noms rapides pour color0=transparent, color1=primary et color2=secondary

     Consultez cet article pour  personnaliser les couleurs de UP

    Quelques explications techniques

    Si vous êtes curieux, voici comment UP procède pour retrouver les codes couleurs dans la feuille de style up.css.

    UP utilise le fichier assets/colorname.ini qui a été crée lors de la compilation CSS par l'action upscsscompiler.

    Ce fichier contient la liste des couleurs utilisées (en majuscules) avec leur valeur. Il existe également une version avec les noms des couleurs tels que saisis dans les fichiers _variables.scss.

    Important : l'action color ne fonctionne que si le fichier up.css est créé par l'action upscsscompiler.