Passer au contenu principal

Colors

Ouvrir dans ChatGPT

webforJ fournit un système de couleurs basé sur les propriétés CSS personnalisées. Ces variables de couleur maintiennent un style visuel cohérent à travers votre application tout en vous donnant un contrôle total pour personnaliser les palettes selon vos besoins en design.

Vous pouvez référencer n'importe quelle couleur en utilisant la syntaxe --dwc-color-{palette}-{step}, où {palette} est le nom du groupe de couleurs (par exemple, primary, danger, ..) et {step} est un nombre allant de 5 à 95 par paliers de 5, représentant la clarté de la couleur.

.element {
  background-color: var(--dwc-color-primary-50);
  color: var(--dwc-color-on-primary-text-50);
}
Échelle des valeurs de teinte

Les valeurs des étapes vont de 5 (le plus sombre) à 95 (le plus clair), augmentant par paliers de 5. L'étape 5 est toujours la plus sombre et l'étape 95 est toujours la plus claire, qu'il s'agisse du mode clair ou sombre.

Palettes de couleurs​

DWC configure sept palettes plus la palette noir/blanc où chaque palette est un ensemble de variations (nuances et teintes) d'une couleur sémantique.

Palettes disponibles​

  • default : Une palette neutre teintée de la couleur primaire, utilisée pour la plupart des arrière-plans de composants, bordures et éléments d'interface utilisateur neutres.
  • primary : Représente généralement la couleur primaire de votre marque.
  • success, warning, danger : Palettes sémantiques utilisées pour des indicateurs de statut appropriés.
  • info : Une palette complémentaire pour une emphase secondaire.
  • gray : Une palette de niveaux de gris pur, non teintée.
  • black/white : Couleurs dynamiques conscientes du mode qui s'adaptent au thème actuel. Le presque noir en mode clair devient presque blanc en mode sombre, et vice versa.

Semences de palette​

Chaque palette est générée à partir de deux variables de semence : hue et saturation. En définissant ces deux valeurs, toutes les 19 étapes sont générées automatiquement.

Variable de semenceDescription
--dwc-color-{name}-hL'angle de teinte de la couleur de semence (0-360).
--dwc-color-{name}-sLe pourcentage de saturation. 100% est complètement saturé, 0% est complètement désaturé (gris).

Vous pouvez ajuster une palette en redéfinissant ces variables dans vos styles racine. Par exemple, pour modifier la palette primaire :

:root {
  --dwc-color-primary-h: 225;
  --dwc-color-primary-s: 100%;
}
VariableValeur par défaut
--dwc-color-primary-h223
--dwc-color-primary-s91%

Surcharge directe de semence​

Chaque palette expose également une variable --dwc-color-{name}-seed. Par défaut, celle-ci est construite à partir des valeurs de teinte et de saturation, mais vous pouvez la remplacer directement par n'importe quelle couleur CSS valide pour contourner entièrement le système de teinte/saturation.

:root {
  --dwc-color-primary-seed: #6366f1;
}

Rotation des teintes​

Le générateur de palettes applique une légère rotation des teintes à travers les étapes pour créer des palettes d'apparence plus naturelle. Les nuances plus sombres se déplacent légèrement vers le chaud tandis que les nuances plus claires se déplacent légèrement vers le frais. Cela imite le comportement des pigments réels et empêche les palettes de sembler plates ou synthétiques.

VariableValeur par défautDescription
--dwc-color-hue-rotate3Degrés de décalage de teinte à travers la palette. Réglez sur 0 pour désactiver.

Variables générées par étape​

Chaque palette génère 19 étapes (de 5 à 95). Pour chaque étape, les variables suivantes sont produites :

Modèle de variableDescription
--dwc-color-{name}-{step}La nuance de la palette à cette étape.
--dwc-color-{name}-text-{step}Une couleur de texte sûre pour la surface dérivée de cette étape (conforme à WCAG AA).
--dwc-color-on-{name}-text-{step}Couleur de texte à utiliser SUR la nuance comme fond (inverse automatiquement clair/foncé).
Accessibilité

Toutes les couleurs de texte générées respectent automatiquement les exigences de contraste WCAG AA. Vous n'avez pas besoin de calculer les rapports de contraste vous-même.

La première ligne montre la nuance avec sa couleur on-text (pour le texte placé directement sur cette nuance). La ligne du bas montre la couleur text sur un fond de surface :

Variables supplémentaires générées​

Modèle de variableDescription
--dwc-color-{name}-tintLa couleur de semence à 12% d'opacité, pour des fonds de surbrillance subtils.
--dwc-border-color-{name}Couleur de bordure consciente du mode teintée avec la teinte de la palette.
--dwc-border-color-{name}-emphasisCouleur de bordure plus forte consciente du mode pour les états hover, focus et actifs.
--dwc-focus-ring-{name}Ombre d'anneau de focus pour la palette.

Couleurs globales​

Ce sont des couleurs conscientes du mode qui s'adaptent automatiquement aux thèmes clairs et sombres.

VariableDescription
--dwc-color-blackPresque noir en mode clair, presque blanc en mode sombre.
--dwc-color-whitePresque blanc en mode clair, presque noir en mode sombre.
--dwc-color-body-textCouleur du texte par défaut du corps (utilise --dwc-color-black).

Thèmes de composants​

DWC abstrait l'utilisation des palettes disponibles avec un ensemble de variables de variation sémantique de niveau supérieur. Les composants utilisent ces variations plutôt que les numéros d'étape bruts, car les variations s'adaptent automatiquement aux modes clairs et sombres.

Les variations sont divisées en trois groupes : normal, dark et light.

  1. Les variables normal sont la couleur de base, utilisées pour les arrière-plans et les éléments d'interface utilisateur principaux.
  2. Les variables dark sont principalement utilisées pour les états actif/appuyé.
  3. Les variables light sont principalement utilisées pour les états hover/focus.
--dwc-color-primary-dark: var(--dwc-color-primary-45)
--dwc-color-primary: var(--dwc-color-primary-50)
--dwc-color-primary-light: var(--dwc-color-primary-55)
--dwc-color-primary-alt: var(--dwc-color-primary-tint)

--dwc-color-primary-text-dark: var(--dwc-color-primary-text-40)
--dwc-color-primary-text: var(--dwc-color-primary-text-45)
--dwc-color-primary-text-light: var(--dwc-color-primary-text-50)

--dwc-color-on-primary-text-dark: var(--dwc-color-on-primary-text-45)
--dwc-color-on-primary-text: var(--dwc-color-on-primary-text-50)
--dwc-color-on-primary-text-light: var(--dwc-color-on-primary-text-55)
--dwc-color-on-primary-text-alt: var(--dwc-color-primary-text)

Référence des variations​

VariableDescription
--dwc-color-{name}La couleur de base. Utilisée pour les arrière-plans, remplissages et bordures.
--dwc-color-{name}-darkUne version plus sombre. Utilisée pour les états actifs/appuyés.
--dwc-color-{name}-lightUne version plus claire. Utilisée pour les états hover/focus.
--dwc-color-{name}-altLa couleur de semence à 12% d'opacité. Utilisée pour des états de surbrillance subtils.
--dwc-color-{name}-textCouleur de texte sûre sur les surfaces de l'application (WCAG AA).
--dwc-color-{name}-text-darkVariation de texte plus sombre.
--dwc-color-{name}-text-lightVariation de texte plus claire.
--dwc-color-on-{name}-textCouleur de texte à utiliser SUR --dwc-color-{name} comme fond.
--dwc-color-on-{name}-text-darkCouleur de texte à utiliser SUR --dwc-color-{name}-dark.
--dwc-color-on-{name}-text-lightCouleur de texte à utiliser SUR --dwc-color-{name}-light.
--dwc-color-on-{name}-text-altCouleur de texte à utiliser SUR --dwc-color-{name}-alt.
--dwc-border-color-{name}Couleur de bordure consciente du mode.
--dwc-border-color-{name}-emphasisCouleur de bordure plus forte consciente du mode.
--dwc-focus-ring-{name}Ombre de l'anneau de focus.