Zum Hauptinhalt springen

Colors

In ChatGPT öffnen

webforJ bietet ein Farbsystem, das auf CSS-Custom-Properties 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}-{step} referenzieren, wobei {palette} der Name der Farbgruppe (z.B. primary, danger, ...) und {step} eine Zahl von 5 bis 95 in Schritten von 5 ist, die die Helligkeit der Farbe darstellt.

.element {
  background-color: var(--dwc-color-primary-50);
  color: var(--dwc-color-on-primary-text-50);
}
Farbton-Stufen-Skala

Die Schrittwerte reichen von 5 (dunkelste) bis 95 (hellste) und erhöhen sich in Schritten von 5. Schritt 5 ist immer der dunkelste und Schritt 95 immer der hellste, unabhängig von Licht- oder Dunkelmodus.

Farbpaletten​

DWC konfiguriert sieben Paletten zusätzlich zur Palette schwarz/weiß, wobei jede Palette eine Reihe von Variationen (Schattierungen und Tönungen) einer semantischen Farbe darstellt.

Verfügbare Paletten​

  • standard: Eine neutrale Palette, die mit dem primären Farbton getönt wird, verwendet für die meisten Komponenten-Hintergründe, Ränder und neutrale UI-Elemente.
  • primär: Repräsentiert typischerweise die Hauptfarbe Ihrer Marke.
  • erfolg, warnung, gefahr: Semantische Paletten, die für geeignete Statusindikatoren verwendet werden.
  • info: Eine ergänzende Palette für sekundäre Betonungen.
  • grau: Eine reine Graustufenpalette, ungetönt.
  • schwarz/weiß: Dynamische, modesensible Farben, die sich an das aktuelle Thema anpassen. Nahe Schwarz im Lichtmodus wird in den Dunkelmodus zu nahe Weiß und umgekehrt.

Paletten-Samen​

Jede Palette wird aus zwei Samenvariablen generiert: hue und saturation. Durch das Setzen dieser beiden Werte werden automatisch alle 19 Schritte generiert.

SamenvariableBeschreibung
--dwc-color-{name}-hDer Farbtonwinkel der Samenfarbe (0-360).
--dwc-color-{name}-sDer Sättigungsprozentsatz. 100% ist voll gesättigt, 0% ist vollständig entsättigt (grau).

Sie können eine Palette anpassen, indem Sie diese Variablen in Ihren Stammstilen neu definieren. Zum Beispiel, um die primäre Palette zu modifizieren:

:root {
  --dwc-color-primary-h: 225;
  --dwc-color-primary-s: 100%;
}
VariableStandardwert
--dwc-color-primary-h223
--dwc-color-primary-s91%

Direkte Samenüberschreibung​

Jede Palette hat auch eine --dwc-color-{name}-seed-Variable. Standardmäßig wird dieser aus den Farbton- und Sättigungswerten konstruiert, aber Sie können ihn direkt mit jeder gültigen CSS-Farbe überschreiben, um das System für Farbton und Sättigung vollständig zu umgehen.

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

Farbtonrotation​

Der Palettenerzeuger wendet eine subtile Farbtonrotation über die Stufen an, um natürlicher aussehende Paletten zu erstellen. Dunklere Schattierungen verschieben sich leicht warm, während hellere Schattierungen sich leicht kühl verschieben. Dies ahmt das Verhalten echter Pigmente nach und verhindert, dass Paletten flach oder synthetisch aussehen.

VariableStandardwertBeschreibung
--dwc-color-hue-rotate3Grad der Farbverschiebung über die Palette. Auf 0 setzen, um zu deaktivieren.

Generierte Variablen pro Schritt​

Jede Palette generiert 19 Schritte (5 bis 95). Für jeden Schritt werden die folgenden Variablen erstellt:

VariablenmusterBeschreibung
--dwc-color-{name}-{step}Die Palettenschattierung in diesem Schritt.
--dwc-color-{name}-text-{step}Eine oberflächensichere Textfarbe, die aus diesem Schritt abgeleitet ist (WCAG AA konform).
--dwc-color-on-{name}-text-{step}Textfarbe zur Verwendung AUF der Schattierung als Hintergrund (automatische Umkehrung hell/dunkel).
Barrierefreiheit

Alle generierten Textfarben erfüllen automatisch die WCAG AA-Kontrastanforderungen. Sie müssen die Kontrastverhältnisse nicht selbst berechnen.

Die obere Zeile zeigt die Schattierung mit ihrer on-text-Farbe (für Text, der direkt auf dieser Schattierung platziert ist). Die untere Zeile zeigt die text-Farbe auf einem Oberfläche-Hintergrund:

Weitere generierte Variablen​

VariablenmusterBeschreibung
--dwc-color-{name}-tintDie Samenfarbe mit 12% Opazität, für subtile Hintergrundhervorhebungen.
--dwc-border-color-{name}Modesensible Rahmenfarbe, die mit dem Farbton der Palette getönt ist.
--dwc-border-color-{name}-emphasisStärkere modesensible Rahmenfarbe für Hover-, Fokus- und aktive Zustände.
--dwc-focus-ring-{name}Fokusring-Schatten für die Palette.

Globale Farben​

Dies sind modesensible Farben, die sich automatisch an helle und dunkle Themen anpassen.

VariableBeschreibung
--dwc-color-blackNahe Schwarz im Lichtmodus, nahe Weiß im Dunkelmodus.
--dwc-color-whiteNahe Weiß im Lichtmodus, nahe Schwarz im Dunkelmodus.
--dwc-color-body-textStandardfarbe für den Textkörper (verwendet --dwc-color-black).

Komponenten-Themen​

DWC abstrahiert die Verwendung der verfügbaren Paletten mit einer höherwertigen Reihe von semantischen Variationsvariablen. Komponenten verwenden diese Variationen anstelle der Roh-Schrittnummern, da sich die Variationen automatisch an helle und dunkle Modi anpassen.

Die Variationen sind in drei Gruppen unterteilt: normal, dunkel und hell.

  1. normal Variablen sind die Basisfarbe, die für Hintergründe und primäre UI-Elemente verwendet wird.
  2. dunkel Variablen werden hauptsächlich für aktive/gedrückte Zustände verwendet.
  3. hell Variablen werden hauptsächlich für hover/focus Zustände verwendet.
--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)

Referenz der Variationen​

VariableBeschreibung
--dwc-color-{name}Die Grundfarbe. Wird für Hintergründe, Füllungen und Ränder verwendet.
--dwc-color-{name}-darkEine dunklere Version. Wird für aktive/gedrückte Zustände verwendet.
--dwc-color-{name}-lightEine hellere Version. Wird für Hover/Fokus-Zustände verwendet.
--dwc-color-{name}-altDer Samen mit 12% Opazität. Wird für subtile Hervorhebungszustände verwendet.
--dwc-color-{name}-textTextfarbe, die auf Anwendungsoberflächen sicher ist (WCAG AA).
--dwc-color-{name}-text-darkDunklere Textvariationen.
--dwc-color-{name}-text-lightHellere Textvariationen.
--dwc-color-on-{name}-textTextfarbe, die AUF --dwc-color-{name} als Hintergrund verwendet wird.
--dwc-color-on-{name}-text-darkTextfarbe, die AUF --dwc-color-{name}-dark verwendet wird.
--dwc-color-on-{name}-text-lightTextfarbe, die AUF --dwc-color-{name}-light verwendet wird.
--dwc-color-on-{name}-text-altTextfarbe, die AUF --dwc-color-{name}-alt verwendet wird.
--dwc-border-color-{name}Modesensible Rahmenfarbe.
--dwc-border-color-{name}-emphasisStärkere modesensible Rahmenfarbe.
--dwc-focus-ring-{name}Fokusring-Schatten.