@visualkit/theming

v0.0.15

Published

8 months ago

VisualKit Theming est un package qui permet de gerer des variables CSS de couleurs avec une palette et ton de couleur.

Downloads

0High
0Medium
0Low

protorians

VisualKit Theming

VisualKit Theming est un package qui permet de gerer des variables CSS de couleurs avec une palette et ton de couleur.

Concept

Le concept de @visualkit-theming est de créer un thème avec ses propriétés. Si ses propriétés comporte des couleurs, des variantes de couleurs et des variantes d'opacités seront créées. A ceci le concept de @visualkit qui est d'avoir des propriétés de palettes, de tons et autres propriétés.

Palette de couleurs

Une palette de couleur est une composition de 5 couleurs qui sont nommé de la manière suivante :

one : slot 1
two : slot 2
three : slot 3
four : slot 4
five : slot 5
error : Couleur représentant le danger
error-text : Couleur du texte représentant le danger
warning : Couleur représentant l'avertissement
warning-text : Couleur du texte représentant l'avertissement
success : Couleur représentant le succès
success-text : Couleur du texte représentant le succès

Ton

Un ton est la couleur d'arrière plan et dérivé.

layer : Couleur de l'arrière plan de base
high : Couleur de l'arrière plan foncé
text : Couleur du texte
dark : Couleur sombre dans le ton
light : Couleur clair dans le ton
white : Couleur arbitraire représentant la couleur blanche
black : Couleur arbitraire représentant la couleur noir

Autres propriétés

--theme-radius
--theme-border-width
--theme-border-color
--theme-border-style
...

Usages

Créer un thème

Exemple : On ajout une propriété de type donnée

const myTheme =  theming({ identifier:  'example-id'  })
const property = themingSlot()
    .name('border-radius')
    .value('7px')
    .type(ThemeTypes.Data)
    .series(ThemeSeries.Property)
    
themeProps
    .slot(property)
    .render()

Exemple : On ajout une propriété de type couleur

const myTheme =  theming({ identifier:  'example-id'  })
const property = themingSlot()
    .name('border-color')
    .value('#777777')
    .type(ThemeTypes.Color)
    .series(ThemeSeries.Property)
    
themeProps
    .slot(property)
    .render()

Exemple : On ajout une couleur dans la palette

const myTheme =  theming({ identifier:  'example-id'  })
const property = themingSlot()
    .name('one')
    .value('7px')
    .type(ThemeTypes.Color)
    .series(ThemeSeries.Palette)
    
themeProps
    .slot(property)
    .render()

Exemple : On ajout une couleur dans le ton

const myTheme =  theming({ identifier:  'example-id'  })
const property = themingSlot()
    .name('layer')
    .value('7px')
    .type(ThemeTypes.Color)
    .series(ThemeSeries.Tone)
    
themeProps
    .slot(property)
    .render()

Utiliser un thème

On souhaite activer le thème avec l'identité example-id

<html theme:palette="example-id" theme:tone="example-id" >
    <head>
    ...
    </head>
    ...

On souhaite utiliser les propriétés dans un fichier de style CSS

body{
    background-color: var(--theme-layer)
}

On utilise donc les variable CSS avec le préfixe --theme- et nom de la propriété layer

Variables de Palette conseillés

| Nom |Variable CSS | Définition | |----------------|-------------------------------|-----------------------------| |one | --theme-one | Couleur 1 du thème | |two | --theme-two | Couleur 2 du thème | |three | --theme-three | Couleur 3 du thème | |four | --theme-four | Couleur 4 du thème | |five | --theme-five | Couleur 5 du thème | |error | --theme-error | Couleur représentant le danger | |error-text | --theme-error-text | Couleur du texte représentant le danger | |warning | --theme-warning | Couleur représentant l'avertissement | |warning-text | --theme-warning-text | Couleur du texte représentant l'avertissement | |success | --theme-success | Couleur représentant le succès | |success-text | --theme-five | Couleur du texte représentant le succès |

Variables de Ton conseillés

| Nom |Variable CSS | Définition | |----------------|-------------------------------|-----------------------------| |layer | --theme-layer | Couleur de l'arrière plan de base | |high | --theme-high | Couleur de l'arrière plan foncé | |text | --theme-text | Couleur du texte | |dark | --theme-dark | Couleur sombre dans le ton | |light | --theme-light | Couleur clair dans le ton | |white | --theme-white | Couleur arbitraire représentant la couleur blanche | |black | --theme-black | Couleur arbitraire représentant la couleur noir |

Créer un thème avec les balises `meta.kit:theming`

Déclaration

<html 
    theme:palette="default" theme:tone="default" > 
<head>
    ...
    <meta 
	    name="kit:theming" 
	    property="NOM_PROPRIETE" 
	    content="VALEUR_PROPRIETE" 
	    theme:palette="LIE_A_UNE_PALETTE"
	    theme:tone="LIE_A_UNE_TON"
	    theme:category="LIE_A_UNE_CATEGORY_DE_PROPRIETE"
	    theme:type="color|data" 
	    theme:series="palette|tone|property" 
	    theme:intensity-ratio="RATIO_D_INTENSITE_DE_COULEUR" 
	    theme:opacity-ratio="RATIO_OPACITE_DES_COULEURS"
	    >
   ...

Utilisation

En javascript appelez la fonction runtine() configurer le thème en fonction des balises métas

import { useMetaTheme } from "@visualkit/theming";

// Rendre la propriété des balise metas disponible partout
useMetaTheme(); 

// Donner le nom `default` à toutes les variables de palettes
useMetaTheme({ palette: "default" }); 

// Donner le nom `default` à toutes les variables de tons
useMetaTheme({ tone: "default" }); 

// Donner le nom `default` à toutes les variables des autres propriétés
useMetaTheme({ category: "default" });

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme