Zum Hauptinhalt wechseln

Colors

ChatGPT öffnen

webforJ bietet ein Farbsystem, das auf CSS-Custom-Properties basiert. Diese Farbvariablen sorgen für einen konsistenten visuellen Stil in Ihrer App und geben Ihnen die volle Kontrolle, um Farbpaletten entsprechend 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);
}
Farbwert-Skala

Die Farbwerte reichen von 5 (dunkelste) bis 95 (hellste) in Schritten von 5.

Farbpaletten​

Es gibt mehrere integrierte Farbpaletten, die für semantische Anwendungsfälle wie Branding, Erfolgsmeldungen, Warnungen und mehr konzipiert sind. Jede Palette besteht aus dynamisch generierten Farbtönen und Schattierungen, die auf drei wesentlichen Eigenschaften basieren: hue, saturation und contrast-threshold.

Verfügbare Paletten​

  • default: Eine neutrale graufarbene 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 geeignete Statusindikatoren verwendet werden.
  • info: Eine optionale ergänzende Palette für sekundäre Akzentuierung.
  • gray: Eine echte Grauskala-Palette, die nicht getönt ist.
  • 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 Tool verwenden. Es unterstützt die Palettenerstellung basierend auf Markenfarben oder Logos und ermöglicht einen schnellen CSS-Export.

Verhalten im Dunkelmodus​

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

Das bedeutet, dass in dunklen Themen niedrigere Farbwerte (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 zu gewährleisten.

Ihr Komponenten-Code 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 mitteltönigen Hintergrund. Im Dunkelmodus ergibt es immer noch einen mitteltönigen Hintergrund, jedoch visuell umgekehrt, um auf dunklen Flächen zu funktionieren. Dieser Ansatz vermeidet Duplikation, hält Ihre Styles konsistent und ermöglicht sanfte visuelle Übergänge beim Wechsel zwischen Licht- und Dunkelmodus.

Palette-Konfigurationsvariablen​

Jede Palette wird basierend auf den folgenden Variablen generiert:

VariableBeschreibung
hueDer Winkel (in Grad) auf dem Farbkreis. Einheitlose 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 Hintergrundhelligkeit.

Sie können eine Palette anpassen, indem Sie diese Variablen in Ihren Root-Styles 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 gestalten​

Um das Styling und die Konsistenz über Komponenten hinweg zu vereinfachen, führt webforJ eine Abstraktionsschicht über den Basisfarbpaletten ein. Diese Schicht basiert auf abstrakten Themenvariablen - CSS-Custom-Properties, die sich auf bestimmte Schattierungen innerhalb einer Farbpalette beziehen.

Diese Variablen erleichtern es, Themen über alle Komponenten hinweg anzuwenden, ohne direkt rohe Farbwerte oder Farbmuster zu referenzieren. Man kann sie als semantische Styling-Abkürzungen betrachten, die die Absicht Ihrer App widerspiegeln, anstatt deren Implementierungsdetails.

Variablengruppen​

Abstrakte Themenvariablen sind in vier Gruppen organisiert:

  1. Normal Wird für das Standardaussehen verwendet, wie 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 Fokus-Zustände verwendet.
  4. Alt Wird für sekundäre Hervorhebungen verwendet, wie Tastaturfokus oder subtile UI-Akzentuierungen.

Jede Gruppe definiert:

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

Jede Registerkarte unten zeigt die abstrakten Variablen, die für eine bestimmte 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 in Ihrer App wiederverwendbar.

Zum Beispiel, 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.

Wenn Sie die Palettenwerte an einer Stelle ändern, wird das Aussehen aller Komponenten aktualisiert, die auf diese abstrakten Variablen angewiesen sind.

Normalzustand​

Verwendet für das Basis-, neutrale Aussehen einer Komponente - wenn sie untätig ist und nicht interagiert wird.

VariableBeschreibung
--dwc-color-${name}Die Standard-Hintergrundfarbe. Wird 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 Hintergrund angezeigt 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 fokussierbar gestaltet wird.

Dunklere Variante​

Verwendet für ausgewählte oder aktive Zustände - 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 leicht dunklere Textalternative, die auf der Oberfläche angezeigt wird.

Hellere Variante​

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

VariableBeschreibung
--dwc-color-${name}-lightEine hellere Version der Basisfarbe. Wird 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 weniger prominente Zustände.

Alt-Variante​

Verwendet für sekundäre Betonung oder UI-Höhepunkte - wie Tastaturnavigation Fokusumrandungen oder Hilfsanzeigen.

VariableBeschreibung
--dwc-color-${name}-altEine sehr helle Version der Farbe, hauptsächlich verwendet für Höhepunkte oder Hintergrundglühen.
--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);