Overslaan naar hoofdinhoud

Colors

Openen in ChatGPT

webforJ biedt een kleursysteem dat is opgebouwd met CSS-variabelen. Deze kleurvariabelen zorgen voor een consistente visuele stijl in je app en geven je volledige controle om paletten aan te passen aan je ontwerpeisen.

Je kunt elke kleur verwijzen met de syntaxis --dwc-color-{palette}-{shade}, waarbij {palette} de naam van de kleurgroep is (bijv. primary, danger, ..) en {shade} een nummer van 5 tot 95 in stappen van 5, dat de lichtheid van de kleur vertegenwoordigt.

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

Schaduwwaarden variëren van 5 (donkerste) tot 95 (lichtste), met toenames van 5.

Kleurenpaletten​

Er zijn verschillende ingebouwde kleurenpaletten, elk ontworpen voor semantische gebruiksdoelen, zoals branding, succesberichten, waarschuwingen en meer. Elk palet bestaat uit dynamisch gegenereerde tinten en schaduwen, gebaseerd op drie belangrijke eigenschappen: hue, saturation en contrast-threshold.

Beschikbare paletten​

  • default: Een neutraal grijs-gebaseerd palet getint met de primaire kleur, gebruikt voor de meeste componenten.
  • primary: Vertegenwoordigt doorgaans de primaire kleur van je merk.
  • success, warning, danger: Semantische paletten die worden gebruikt voor geschikte statusindicatoren.
  • info: Een optioneel aanvullend palet voor secundaire nadruk.
  • gray: Een echte grijs-schaalpalet, niet getint.
  • black/white: Statische kleurwaarden

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

Om het proces van het genereren van WCAG-compliant paletten voor je webforJ-toepassingen te vereenvoudigen, kun je de DWC HueCraft tool gebruiken. Het ondersteunt het maken van paletten op basis van merkgekleurde of logo's en maakt snelle CSS-export mogelijk.

Gedrag in donkere modus​

webforJ ondersteunt een omgekeerde kleurstrategie in de donkere modus. In plaats van geheel aparte kleurenpaletten te gebruiken, draait het de manier waarop lichtheidswaarden worden geïnterpreteerd om.

Dit betekent dat in donkere thema's, lagere schaduwwaarden (bijv. --dwc-color-primary-5) licht worden en hogere waarden (bijv. --dwc-color-primary-95) donker. De logica is omgekeerd om optimale contrast en leesbaarheid over achtergronden te waarborgen.

Je componentcode blijft hetzelfde, ongeacht het thema. Bijvoorbeeld:

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

In lichte modus geeft dit een middentoon achtergrond. In donkere modus geeft het nog steeds een middentoon, maar visueel omgekeerd voor gebruik op donkere oppervlakken. Deze aanpak voorkomt duplicatie, houdt je stijlen consistent en zorgt voor soepele visuele overgangen bij het schakelen tussen lichte en donkere thema's.

Paletconfiguratievariabelen​

Elk palet wordt gegenereerd op basis van de volgende variabelen:

VariabeleBeschrijving
hueDe hoek (in graden) op het kleurenwiel. Waarden zonder eenheid worden geïnterpreteerd als graden.
saturationEen percentage dat de kleurintensiteit aangeeft. 100% is volledig verzadigd; 0% is grijswaarde.
contrast-thresholdEen waarde tussen 0 en 100 die bepaalt of tekst licht of donker moet zijn, afhankelijk van de achtergrondlichtheid.

Je kunt een palet aanpassen door deze variabelen opnieuw te definiëren in je root-stijlen. Bijvoorbeeld, om het primaire palet te wijzigen:

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

Thema-componenten met abstracte variabelen​

Om styling en consistentie over componenten te vereenvoudigen, introduceert webforJ een abstractielaag boven de basis kleurenpaletten. Deze laag is opgebouwd uit abstracte thema-variabelen - CSS-variabelen die verwijzen naar specifieke tinten binnen een kleurenpalet.

Deze variabelen maken het gemakkelijker om thema's toe te passen op alle componenten zonder direct naar ruwe kleurwaarden of kleurstalen te verwijzen. Je kunt ze beschouwen als semantische styling-snelkoppelingen die de intentie van je app weerspiegelen in plaats van de implementatiedetails.

Variabele groepen​

Abstracte thema-variabelen zijn georganiseerd in vier groepen:

  1. Normaal Gebruikt voor het standaard uiterlijk, zoals achtergronden en tekst op inactieve componenten.
  2. Donker Gebruikt voor actieve of geselecteerde toestanden.
  3. Licht Gebruikt voor hover- en focus-toestanden.
  4. Alt Gebruikt voor secundaire highlights, zoals toetsenbordfocus of subtiele UI-accenten.

Elke groep definieert:

  • Een achtergrondkleur
  • Een foreground (tekst) kleur
  • Een randkleur (voor gefocuste/gehoverde/actieve toestanden)
  • Een focusring (gebruikt wanneer de component zichtbare focus ontvangt)

Elke tab hieronder toont de abstracte variabelen die zijn gedefinieerd voor een specifiek palet (primary, success, danger, enz.). Deze variabelen trekken waarden uit het onderliggende palet (bijv. --dwc-color-primary-40) en maken ze herbruikbaar in je app.

Bijvoorbeeld, in plaats van direct --dwc-color-primary-40 te gebruiken, kun je --dwc-color-primary toepassen, dat de rol van die kleur als de standaard achtergrond voor een primaire gestileerde component abstraheert.

Het wijzigen van de paletwaarden op één plek zal de uitstraling van alle componenten die op deze abstracte variabelen vertrouwen, bijwerken.

Normale toestand​

Gebruikt voor het basis-, neutrale uiterlijk van een component—wanneer deze inactief is en niet wordt geïndexeerd.

VariabeleBeschrijving
--dwc-color-${name}De standaard achtergrondkleur. Ook gebruikt voor randen in veel componenten.
--dwc-color-on-${name}-textDe tekstkleur die bovenop de standaard achtergrond wordt weergegeven.
--dwc-color-${name}-textDe tekstkleur wanneer de component op de oppervlakte achtergrond is geplaatst.
--dwc-border-color-${name}Randkleur, voornamelijk gebruikt voor hover, focus en actieve toestanden.
--dwc-focus-ring-${name}Focusring schaduw wanneer de component focus-zichtbare styling ontvangt.

Donkere variant​

Gebruikt voor geselecteerde of actieve toestanden—meestal een diepere toon voor sterkere contrast en nadruk.

VariabeleBeschrijving
--dwc-color-${name}-darkEen donkerdere versie van de basiskleur. Vaak gebruikt voor ingedrukte of geselecteerde toestanden.
--dwc-color-on-${name}-text-darkTextkleur wanneer gebruikt op een donkere achtergrond.
--dwc-color-${name}-text-darkEen iets donkere tekstvariant wanneer weergegeven op de oppervlakte.

Lichtere variant​

Gebruikt voor hover, focus en minder dominante visuele aanwijzingen. Dit zijn zachte tonen die zijn ontworpen voor subtiele interactie feedback.

VariabeleBeschrijving
--dwc-color-${name}-lightEen lichtere versie van de basiskleur. Typisch gebruikt voor hover/focus achtergronden.
--dwc-color-on-${name}-text-lightTekstkleur wanneer weergegeven op een lichte achtergrond.
--dwc-color-${name}-text-lightEen lichtere teksttoon voor gebruik in minder prominente toestanden.

Alt-variant​

Gebruikt voor secundaire nadruk of UI-highlights—zoals toetsenbordnavigatie focus outlines of aanvullende indicatoren.

VariabeleBeschrijving
--dwc-color-${name}-altEen zeer lichte versie van de kleur, voornamelijk gebruikt voor highlights of achtergrondglow.
--dwc-color-on-${name}-text-altTekstkleur wanneer de achtergrond de alternatieve (alt) kleur is.
--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);