Aller au contenu principal

Colors

Ouvrir dans ChatGPT

webforJ fournit un système de couleurs basé sur des 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 de design.

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

.element {
  background-color: var(--dwc-color-primary-40);
  color: var(--dwc-color-primary-text-40);
}
Échelle des valeurs d'ombre

Les valeurs d'ombre vont de 5 (le plus sombre) à 95 (le plus clair), augmentant par étapes de 5.

Palettes de couleurs​

Il existe plusieurs palettes de couleurs intégrées, chacune conçue pour des cas d'utilisation sémantiques tels que l'image de marque, les messages de réussite, les avertissements, etc. Chaque palette est composée de teintes et d'ombres générées dynamiquement basées sur trois propriétés clés : teinte, saturation et seuil-contraste.

Palettes disponibles​

  • default : Une palette grise neutre teintée avec la couleur primaire, utilisée pour la plupart des composants.
  • primary : Représente généralement la couleur principale de votre marque.
  • success, warning, danger : Palettes sémantiques utilisées pour des indicateurs de statut appropriés.
  • info : Une palette complémentaire optionnelle pour une emphase secondaire.
  • gray : Une palette grise véritable, non teintée.
  • black/white : Valeurs de couleur statiques

Primary

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

Success

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

Warning

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

Danger

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

Info

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

Gray

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

Default

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

BlackWhite

Black
White

DWC HueCraft

Pour simplifier le processus de génération de palettes conformes aux normes WCAG pour vos applications webforJ, vous pouvez utiliser l'outil DWC HueCraft. Il prend en charge la création de palettes basées sur des couleurs de marque ou des logos et permet une exportation CSS rapide.

Comportement du mode sombre​

webforJ prend en charge une stratégie de couleur inversée en mode sombre. Plutôt que d'utiliser des palettes de couleurs entièrement séparées, il inverse la façon dont les valeurs de clarté sont interprétées.

Cela signifie que dans les thèmes sombres, les valeurs d'ombre plus faibles (par exemple, --dwc-color-primary-5) deviennent claires et les valeurs plus élevées (par exemple, --dwc-color-primary-95) deviennent sombres. La logique est inversée pour garantir un contraste optimal et une lisibilité à travers les arrière-plans.

Le code de votre composant reste le même, quelle que soit le thème. Par exemple :

.button {
  background-color: var(--dwc-color-primary-40);
  color: var(--dwc-color-primary-text-40);
}

En mode clair, cela donne un arrière-plan de tonalité intermédiaire. En mode sombre, cela donne toujours une tonalité intermédiaire, mais inversée visuellement pour fonctionner sur des surfaces sombres. Cette approche évite la duplication, maintient la cohérence de vos styles et assure des transitions visuelles fluides lors du passage entre les thèmes clairs et sombres.

Variables de configuration de palette​

Chaque palette est générée en fonction des variables suivantes :

VariableDescription
hueL'angle (en degrés) sur la roue des couleurs. Les valeurs sans unité sont interprétées comme des degrés.
saturationUn pourcentage indiquant l'intensité de la couleur. 100% est entièrement saturé ; 0% est en niveaux de gris.
contrast-thresholdUne valeur entre 0 et 100 qui détermine si le texte doit être clair ou sombre en fonction de la clarté de l'arrière-plan.

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

:root {
  --dwc-color-primary-h: 225;
  --dwc-color-primary-s: 100%;
  --dwc-color-primary-c: 60;
}

Thématisation des composants avec des variables abstraites​

Pour simplifier le stylage et assurer la cohérence à travers les composants, webforJ introduit une couche d'abstraction sur les palettes de couleurs de base. Cette couche est construite sur des variables de thème abstraites - des propriétés CSS personnalisées qui font référence à des teintes spécifiques au sein d'une palette de couleurs.

Ces variables facilitent l'application de thèmes sur tous les composants sans référencer directement des valeurs ou des échantillons de couleurs. Vous pouvez les considérer comme des raccourcis de stylage sémantiques qui reflètent l'intention de votre application plutôt que ses détails d'implémentation.

Groupes de variables​

Les variables de thème abstraites sont organisées en quatre groupes :

  1. Normal Utilisé pour l'apparence par défaut, comme les arrière-plans et le texte sur les composants inactifs.
  2. Sombre Utilisé pour les états actifs ou sélectionnés.
  3. Clair Utilisé pour les états de survol et de focus.
  4. Alt Utilisé pour les mises en valeur secondaires, comme le focus au clavier ou les accents UI subtils.

Chaque groupe définit :

  • Une couleur d'arrière-plan
  • Une couleur de premier plan (texte)
  • Une couleur de bordure (pour les états en focus/au survol/actifs)
  • Un anneau de focus (utilisé lorsque le composant reçoit un style de focus visible)

Chaque onglet ci-dessous montre les variables abstraites définies pour une palette spécifique (primary, success, danger, etc.). Ces variables extraient des valeurs de la palette sous-jacente (par exemple, --dwc-color-primary-40) et les rendent réutilisables à travers votre application.

Par exemple, au lieu d'utiliser directement --dwc-color-primary-40, vous pouvez appliquer --dwc-color-primary, qui abstrait le rôle de cette couleur comme l'arrière-plan par défaut pour un composant de style primaire.

Changer les valeurs de la palette à un seul endroit mettra à jour l'apparence de tous les composants qui dépendent de ces variables abstraites.

État normal​

Utilisé pour l'apparence de base et neutre d'un composant—quand il est inactif et non interactif.

VariableDescription
--dwc-color-${name}La couleur de fond par défaut. Utilisée aussi pour les bordures dans de nombreux composants.
--dwc-color-on-${name}-textLa couleur du texte affichée sur le fond par défaut.
--dwc-color-${name}-textLa couleur du texte lorsque le composant est placé sur le fond de surface.
--dwc-border-color-${name}Couleur de bordure, principalement utilisée pour les états de survol, de focus et actifs.
--dwc-focus-ring-${name}Ombre de l'anneau de focus lorsque le composant reçoit un style de focus visible.

Variante sombre​

Utilisé pour les états sélectionnés ou actifs—habituellement une tonalité plus profonde pour un contraste et une emphase plus forts.

VariableDescription
--dwc-color-${name}-darkUne version plus sombre de la couleur de base. Souvent utilisée pour les états enfoncés ou sélectionnés.
--dwc-color-on-${name}-text-darkCouleur du texte utilisée sur un fond sombre.
--dwc-color-${name}-text-darkUne alternative de texte légèrement plus sombre lorsqu'elle est affichée sur la surface.

Variante claire​

Utilisé pour les états de survol, de focus et de signes visuels moins dominants. Ce sont des tons doux, conçus pour un retour d'interaction subtil.

VariableDescription
--dwc-color-${name}-lightUne version plus claire de la couleur de base. Typiquement utilisée pour les arrière-plans de survol/focus.
--dwc-color-on-${name}-text-lightCouleur du texte lorsqu'elle est affichée sur un fond clair.
--dwc-color-${name}-text-lightUne tonalité de texte plus claire à utiliser dans des états moins proéminents.

Variante alternative​

Utilisé pour une emphase secondaire ou des mises en valeur UI—comme les contours de focus de navigation au clavier ou des indicateurs auxiliaires.

VariableDescription
--dwc-color-${name}-altUne version très claire de la couleur, principalement utilisée pour des mises en valeur ou des lueurs de fond.
--dwc-color-on-${name}-text-altCouleur du texte lorsque le fond est de la couleur alternative (alt).
--dwc-color-default-dark: var(--dwc-color-default-85);
--dwc-color-on-default-text-dark: var(--dwc-color-default-text-85);
--dwc-color-default-text-dark: var(--dwc-color-default-35);

--dwc-color-default: var(--dwc-color-default-90);
--dwc-color-on-default-text: var(--dwc-color-default-text-90);
--dwc-color-default-text: var(--dwc-color-default-40);

--dwc-color-default-light: var(--dwc-color-default-95);
--dwc-color-on-default-text-light: var(--dwc-color-default-text-95);
--dwc-color-default-text-light: var(--dwc-color-default-45);

--dwc-color-default-alt: var(--dwc-color-primary-alt);
--dwc-color-on-default-text-alt: var(--dwc-color-on-primary-text-alt);

--dwc-border-color-default: var(--dwc-border-color-primary);
--dwc-focus-ring-default: var(--dwc-focus-ring-primary);