Ga naar hoofdinhoud

Colors

Open in ChatGPT

webforJ biedt een kleursysteem dat is opgebouwd uit CSS-aangepaste eigenschappen. Deze kleurvariabelen zorgen voor een consistente visuele stijl in uw app, terwijl u volledige controle hebt om paletten aan te passen aan uw ontwerpeisen.

U kunt elke kleur verwijzen met de --dwc-color-{palette}-{shade} syntaxis, waarbij {palette} de naam is van de kleurengroep (bijv. primary, danger, ..) en {shade} een getal 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), in stappen van 5.

Kleurpaletten​

Er zijn verschillende ingebouwde kleurpaletten, elk ontworpen voor semantische gebruikscenario's zoals branding, succesberichten, waarschuwingen en meer. Elk palet bestaat uit dynamisch gegenereerde tinten en schaduwen op basis van drie belangrijke eigenschappen: hue, saturation, en contrast-threshold.

Beschikbare paletten​

  • default: Een neutrale grijsgebaseerde palet getint met de primaire kleur, gebruikt voor de meeste componenten.
  • primary: Vertegenwoordigt doorgaans de primaire kleur van uw merk.
  • success, warning, danger: Semantische paletten die worden gebruikt voor geschikte statusindicatoren.
  • info: Een optioneel complementair palet voor secundaire nadruk.
  • gray: Een echte grijs-schalen palet, ongekleurd.
  • 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-conforme paletten voor uw webforJ-toepassingen te vereenvoudigen, kunt u de DWC HueCraft tool gebruiken. Het ondersteunt het maken van paletten op basis van merk kleuren of logo's en laat snelle CSS-export toe.

Donkere modus gedrag​

webforJ ondersteunt een omgekeerde kleurstrategie in de donkere modus. In plaats van volledig aparte kleurpaletten te gebruiken, draait het de manier waarop lichtheid waarden 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 worden. De logica is omgekeerd om optimale contrast en leesbaarheid over achtergronden te waarborgen.

Uw componentcode blijft hetzelfde, ongeacht het thema. Bijvoorbeeld:

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

In de lichte modus geeft dit een middentoon achtergrond. In de donkere modus geeft het nog steeds een middentoon, maar visueel omgekeerd om op donkere oppervlakken te werken. Deze benadering voorkomt duplicatie, houdt uw stijlen consistent en zorgt ervoor dat visuele overgangen soepel verlopen bij het schakelen tussen lichte en donkere thema's.

Palet configuratievariabelen​

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 kleurdichtheid aangeeft. 100% is volledig verzadigd; 0% is grijswaarden.
contrast-thresholdEen waarde tussen 0 en 100 die bepaalt of tekst licht of donker moet zijn, afhankelijk van de achtergrondlichtheid.

U kunt een palet aanpassen door deze variabelen opnieuw te definiëren in uw 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;
}

Theming componenten met abstracte variabelen​

Om styling en consistentie over componenten te vereenvoudigen, introduceert webforJ een abstractielaag bovenop de basis kleurpaletten. Deze laag is opgebouwd uit abstracte themavariabelen - CSS aangepaste eigenschappen die verwijzen naar specifieke tinten binnen een kleurpalet.

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

Variabele groepen​

Abstracte themavariabelen zijn georganiseerd in vier groepen:

  1. Normaal Gebruikt voor het standaard uiterlijk, zoals achtergronden en tekst op niet-actieve 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 voorgrond (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 gedefinieerd voor een specifiek palet (primary, success, danger, enz.). Deze variabelen halen waarden uit het onderliggende palet (bijv. --dwc-color-primary-40) en maken ze herbruikbaar in uw app.

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

Het wijzigen van de paletwaarden op één plaats zal het uiterlijk van alle componenten die afhankelijk zijn van deze abstracte variabelen bijwerken.

Normale staat​

Gebruikt voor het basis, neutrale uiterlijk van een component—wanneer deze inactief is en niet wordt interactie mee.

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

Donkere variant​

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

VariabeleBeschrijving
--dwc-color-${name}-darkEen donkere versie van de basiskleur. Vaak gebruikt voor ingedrukte of geselecteerde toestanden.
--dwc-color-on-${name}-text-darkTekstkleur wanneer gebruikt op een donkere achtergrond.
--dwc-color-${name}-text-darkEen iets donkerdere tekstalternatief wanneer getoond op het oppervlak.

Lichtere variant​

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

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 texttoon voor gebruik in minder prominente toestanden.

Alt variant​

Gebruikt voor secundaire nadruk of UI-hoogtepunten—zoals toetsenbord navigatie focusomtrekken of aanvullende indicatoren.

VariabeleBeschrijving
--dwc-color-${name}-altEen zeer lichte versie van de kleur, voornamelijk gebruikt voor hoogtepunten of achtergrondglosten.
--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);