Passer 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 garantissent un style visuel constant dans votre application tout en vous offrant un contrôle total pour personnaliser les palettes selon vos besoins en matière 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 chiffre de 5 à 95 par intervalles de 5, représentant la luminosité de la couleur.

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

Les valeurs d'ombre vont de 5 (le plus sombre) à 95 (le plus clair), augmentant par intervalles 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 le branding, les messages de succès, les avertissements, etc. Chaque palette est composée de teintes et d'ombres générées dynamiquement sur la base de trois propriétés clés : hue, saturation et contrast-threshold.

Palettes disponibles​

  • default : Une palette neutre à base de gris teintée de 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 un second accent.
  • gray : Une palette en niveaux de gris 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 les couleurs ou logos de marque et permet une exportation CSS rapide.

Comportement en mode sombre​

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

Cela signifie que dans les thèmes sombres, les valeurs d'ombre inférieures (par exemple, --dwc-color-primary-5) deviennent claires et les valeurs supérieures (par exemple, --dwc-color-primary-95) deviennent sombres. La logique est inversée afin d’assurer un contraste optimal et une lisibilité à travers les arrière-plans.

Votre code de composant reste le même, peu importe 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 fond de tonalité intermédiaire. En mode sombre, cela donne également une tonalité intermédiaire, mais inversée visuellement pour fonctionner sur des surfaces sombres. Cette approche évite la duplication, maintient vos styles cohérents et conserve 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 sur la base 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 comprise entre 0 et 100 qui détermine si le texte doit être clair ou foncé en fonction de la luminosité de l'arrière-plan.

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%;
  --dwc-color-primary-c: 60;
}

Thématisation des composants avec des variables abstraites​

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

Ces variables facilitent l'application de thèmes à tous les composants sans faire directement référence aux valeurs ou échantillons de couleur bruts. Vous pouvez les considérer comme des raccourcis de style 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. Dark Utilisé pour les états actifs ou sélectionnés.
  3. Light Utilisé pour les états de survol et de focus.
  4. Alt Utilisé pour les mises en évidence secondaires, telles que le focus du clavier ou les accents d'interface utilisateur subtils.

Chaque groupe définit :

  • Une couleur d'arrière-plan
  • Une couleur de premier plan (texte)
  • Une couleur de bordure (pour les états focus/hover/actif)
  • 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 tirent des valeurs de la palette sous-jacente (par exemple, --dwc-color-primary-40) et les rendent réutilisables dans 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 en tant que 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 neutre de base d'un composant—lorsqu’il est inactif et non interagi avec.

VariableDescription
--dwc-color-${name}La couleur d’arrière-plan par défaut. Utilisée également pour les bordures dans de nombreux composants.
--dwc-color-on-${name}-textLa couleur du texte affichée au-dessus du 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 la bordure, principalement utilisée pour les états de survol, focus et actif.
--dwc-focus-ring-${name}Ombre de l'anneau de focus lorsque le composant reçoit un style de focus-visible.

Variante plus sombre​

Utilisé pour les états sélectionnés ou actifs—généralement 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 pressés ou sélectionnés.
--dwc-color-on-${name}-text-darkCouleur du texte lorsqu'il est utilisé 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 plus claire​

Utilisé pour les états de survol, de focus et les indices visuels moins dominants. Ce sont des tonalités douces conçues 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 pour une utilisation dans des états moins proéminents.

Variante alternative​

Utilisé pour une emphase secondaire ou des surbrillances d'interface utilisateur—comme les contours de navigation au clavier ou les indicateurs auxiliaires.

VariableDescription
--dwc-color-${name}-altUne version très claire de la couleur, principalement utilisée pour les surlignements ou les lueurs d'arrière-plan.
--dwc-color-on-${name}-text-altCouleur du texte lorsque le fond est 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);