Zum Hauptinhalt springen

Colors

In ChatGPT öffnen

webforJ bietet ein Farbsystem, das auf CSS-Benutzerdefinierten Eigenschaften basiert. Diese Farbvariablen sorgen für einen konsistenten visuellen Stil in Ihrer Anwendung und geben Ihnen die volle Kontrolle, um Farbpaletten gemäß Ihren Designanforderungen anzupassen.

Sie können jede Farbe mit der Syntax --dwc-color-{palette}-{shade} referenzieren, wobei {palette} der Name der Farbgruppe (z. B. primary, danger, ...) und {shade} eine Zahl von 5 bis 95 in Schritten von 5 ist, die die Helligkeit der Farbe darstellt.

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

Schattierungswerte reichen von 5 (dunkelste) bis 95 (hellste), wobei sie in Schritten von 5 zunehmen.

Farbpaletten​

Es gibt mehrere integrierte Farbpaletten, die für semantische Anwendungsfälle wie Branding, Erfolgsnachrichten, Warnungen und mehr entworfen wurden. Jede Palette besteht aus dynamisch generierten Tönungen und Schattierungen, die auf drei wichtigen Eigenschaften basieren: hue, saturation und contrast-threshold.

Verfügbare Paletten​

  • default: Eine neutrale, grau-basierte Palette, die mit der Primärfarbe getönt ist und für die meisten Komponenten verwendet wird.
  • primary: Stellt typischerweise die Primärfarbe Ihrer Marke dar.
  • success, warning, danger: Semantische Paletten, die für angemessene Statusindikatoren verwendet werden.
  • info: Eine optionale komplementäre Palette für sekundäre Akzentuierung.
  • gray: Eine echte Graustufenpalette, ungetönt.
  • black/white: Statische Farbwerte

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

Um den Prozess der Erstellung von WCAG-konformen Paletten für Ihre webforJ-Anwendungen zu vereinfachen, können Sie das DWC HueCraft Werkzeug verwenden. Es unterstützt die Erstellung von Paletten basierend auf Markenfarben oder Logos und ermöglicht einen schnellen CSS-Export.

Verhaltensweise im Dunkelmodus​

webforJ unterstützt eine umgekehrte Farbstrategie im Dunkelmodus. Anstatt vollständig separate Farbpaletten zu verwenden, invertiert es die Art und Weise, wie Helligkeitswerte interpretiert werden.

Das bedeutet, dass in dunklen Themen niedrigere Schattierungswerte (z. B. --dwc-color-primary-5) hell werden und höhere Werte (z. B. --dwc-color-primary-95) dunkel werden. Die Logik wird umgekehrt, um optimalen Kontrast und Lesbarkeit über Hintergründe hinweg sicherzustellen.

Ihr Komponentencode bleibt unabhängig vom Thema gleich. Zum Beispiel:

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

Im Lichtmodus ergibt dies einen Mittelton-Hintergrund. Im Dunkelmodus ergibt es immer noch einen Mittelton, ist aber visuell umgekehrt, um auf dunklen Flächen zu funktionieren. Dieser Ansatz vermeidet Duplikation, sorgt für konsistente Stile und gewährleistet reibungslose visuelle Übergänge beim Wechsel zwischen Licht- und Dunkelmodi.

Palette-Konfigurationsvariablen​

Jede Palette wird auf der Grundlage der folgenden Variablen generiert:

VariableBeschreibung
hueDer Winkel (in Grad) auf dem Farbrad. Wertlose Werte werden als Grad interpretiert.
saturationEin Prozentsatz, der die Farbintensität angibt. 100% ist voll gesättigt; 0% ist Graustufen.
contrast-thresholdEin Wert zwischen 0 und 100, der bestimmt, ob der Text hell oder dunkel sein sollte, basierend auf der Helligkeit des Hintergrunds.

Sie können eine Palette anpassen, indem Sie diese Variablen in Ihren Root-Stilen neu definieren. Zum Beispiel, um die Primärpalette zu ändern:

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

Komponenten mit abstrakten Variablen thematisieren​

Um das Styling und die Konsistenz über Komponenten hinweg zu vereinfachen, führt webforJ eine Abstraktionsschicht über den grundlegenden Farbpaletten ein. Diese Schicht basiert auf abstrakten Themenvariablen – CSS-Benutzerdefinierten Eigenschaften, die auf bestimmte Schattierungen innerhalb einer Farbpalette verweisen.

Diese Variablen erleichtern die Anwendung von Themen auf alle Komponenten, ohne direkt auf rohe Farbwerte oder Farbmuster Bezug zu nehmen. Sie können sie sich als semantische Styling-Abkürzungen vorstellen, die die Absicht Ihrer Anwendung widerspiegeln, anstatt deren Implementierungsdetails.

Variablengruppen​

Abstrakte Themenvariablen sind in vier Gruppen organisiert:

  1. Normal Wird für das Standardaussehen verwendet, z. B. Hintergründe und Text auf inaktiven Komponenten.
  2. Dunkel Wird für aktive oder ausgewählte Zustände verwendet.
  3. Hell Wird für Hover- und Fokuszustände verwendet.
  4. Alt Wird für sekundäre Hervorhebungen verwendet, z. B. Tastaturfokus oder subtile UI-Akzente.

Jede Gruppe definiert:

  • Eine Hintergrundfarbe
  • Eine Vordergrundfarbe (Textfarbe)
  • Eine Rahmenfarbe (für fokussierte/überfahrene/aktive Zustände)
  • Einen Fokusring (der verwendet wird, wenn die Komponente sichtbaren Fokus erhält)

Jeder Tab unten zeigt die abstrakten Variablen, die für eine spezifische Palette (primary, success, danger usw.) definiert sind. Diese Variablen ziehen Werte aus der zugrunde liegenden Palette (z. B. --dwc-color-primary-40) und machen sie wiederverwendbar in Ihrer Anwendung.

Anstatt direkt --dwc-color-primary-40 zu verwenden, können Sie --dwc-color-primary anwenden, was die Rolle dieser Farbe als Standardhintergrund für eine primär gestaltete Komponente abstrahiert.

Das Ändern der Palettenwerte an einem Ort aktualisiert das Aussehen aller Komponenten, die auf diese abstrakten Variablen angewiesen sind.

Normalzustand​

Wird für das Basis-, neutrale Aussehen einer Komponente verwendet – wenn sie inaktiv ist und nicht interagiert wird.

VariableBeschreibung
--dwc-color-${name}Die Standard-Hintergrundfarbe. Auch für Rahmen in vielen Komponenten verwendet.
--dwc-color-on-${name}-textDie Textfarbe, die über dem Standardhintergrund angezeigt wird.
--dwc-color-${name}-textDie Textfarbe, wenn die Komponente auf dem Oberflächenhintergrund platziert wird.
--dwc-border-color-${name}Rahmenfarbe, hauptsächlich verwendet für Hover-, Fokus- und aktive Zustände.
--dwc-focus-ring-${name}Fokusring-Schatten, wenn die Komponente die Fokus-sichtbare Gestaltung erhält.

Dunklerer Variant​

Wird für ausgewählte oder aktive Zustände verwendet – normalerweise ein tieferer Ton für stärkeren Kontrast und Betonung.

VariableBeschreibung
--dwc-color-${name}-darkEine dunklere Version der Basisfarbe. Oft verwendet für gedrückte oder ausgewählte Zustände.
--dwc-color-on-${name}-text-darkTextfarbe, wenn sie auf einem dunklen Hintergrund verwendet wird.
--dwc-color-${name}-text-darkEine etwas dunklere Textalternative, wenn sie auf der Oberfläche angezeigt wird.

Hellere Variante​

Wird für Hover-, Fokus- und weniger dominante visuelle Hinweise verwendet. Dies sind sanfte Töne, die für subtile Interaktionsrückmeldungen ausgelegt sind.

VariableBeschreibung
--dwc-color-${name}-lightEine hellere Version der Basisfarbe. Typischerweise für Hover/Fokus-Hintergründe verwendet.
--dwc-color-on-${name}-text-lightTextfarbe, wenn sie auf einem hellen Hintergrund angezeigt wird.
--dwc-color-${name}-text-lightEin hellerer Textton für die Verwendung in weniger prominenten Zuständen.

Alternativvariant​

Wird für sekundäre Betonnungen oder UI-Hervorhebungen verwendet – z. B. Tastaturnavigation Fokusumrisse oder Hilfsindikatoren.

VariableBeschreibung
--dwc-color-${name}-altEine sehr helle Version der Farbe, die hauptsächlich für Highlights oder Hintergrundschimmer verwendet wird.
--dwc-color-on-${name}-text-altTextfarbe, wenn der Hintergrund die alternative (alt) Farbe ist.
--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);