Overslaan naar hoofdinhoud

Colors

Openen in ChatGPT

webforJ biedt een kleurensysteem dat is opgebouwd uit CSS aangepaste eigenschappen. Deze kleurvariabelen behouden een consistente visuele stijl in je app terwijl je volledige controle hebt om paletten aan te passen aan je ontwerpeisen.

Je kunt elke kleur refereren met de syntaxis --dwc-color-{palette}-{step}, waarbij {palette} de naam van de kleuren groep is (bijvoorbeeld primary, danger, ..) en {step} een getal van 5 tot 95 in stappen van 5 is, dat de lichtheid van de kleur vertegenwoordigt.

.element {
  background-color: var(--dwc-color-primary-50);
  color: var(--dwc-color-on-primary-text-50);
}
Schaduw Stap Schaal

Stapwaarden variëren van 5 (donkerste) tot 95 (lichtste), in stappen van 5. Stap 5 is altijd de donkerste en stap 95 is altijd de lichtste, ongeacht de licht- of donkere modus.

Kleurpaletten​

DWC configureert zeven paletten plus de black/white palette waarbij elke palette een set variaties (schaduwen en tinten) van een semantische kleur is.

Beschikbare paletten​

  • default: Een neutrale palette getint met de primaire tint, gebruikt voor de meeste achtergrond van componenten, randen en neutrale UI-elementen.
  • primary: Vertegenwoordigt typisch de primaire kleur van je merk.
  • success, warning, danger: Semantische paletten die worden gebruikt voor geschikte statusindicatoren.
  • info: Een complementaire palette voor secundaire nadruk.
  • gray: Een pure grijs-schaal palette, ongekleurd.
  • black/white: Dynamische mode-bewuste kleuren die zich aanpassen aan het huidige thema. Bijna zwart in de lichte modus wordt bijna wit in de donkere modus, en vice versa.

Palette zaden​

Elke palette wordt gegenereerd uit twee zaadvariabelen: hue en saturation. Het instellen van deze twee waarden genereert automatisch alle 19 stappen.

ZaadvariabeleBeschrijving
--dwc-color-{name}-hDe hue-hoek van de zaadkleur (0-360).
--dwc-color-{name}-sHet verzadiging percentage. 100% is volledig verzadigd, 0% is helemaal ongekleurd (grijs).

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

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

Directe zaadoverschrijving​

Elke palette biedt ook een --dwc-color-{name}-seed variabele. Standaard wordt deze geconstrueerd uit de hue- en verzadiging waarden, maar je kunt deze rechtstreeks overschrijven met elke geldige CSS kleur om het hue/verzadiging systeem geheel te omzeilen.

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

Hue-rotatie​

De palette-generator past een subtiele hue-rotatie toe over de stappen om meer natuurlijk uitziende paletten te creëren. Donkere schaduwen verschuiven iets naar warm terwijl lichtere schaduwen iets naar koel verschuiven. Dit bootst na hoe echte pigmenten zich gedragen en voorkomt dat paletten er vlak of synthetisch uitzien.

VariabeleStandaardwaardeBeschrijving
--dwc-color-hue-rotate3Graden van hue verschuiving over de palette. Stel in op 0 om uit te schakelen.

Gegenereerde variabelen per stap​

Elke palette genereert 19 stappen (5 tot 95). Voor elke stap worden de volgende variabelen geproduceerd:

Variabele patroonBeschrijving
--dwc-color-{name}-{step}De palet schaduw op die stap.
--dwc-color-{name}-text-{step}Een oppervlakteveilige tekstkleur afgeleid van die stap (WCAG AA conforme).
--dwc-color-on-{name}-text-{step}Tekstkleur voor gebruik OP de schaduw als achtergrond (veranderen automatisch tussen licht/donker).
Toegankelijkheid

Alle gegenereerde tekstkleuren voldoen automatisch aan de WCAG AA contrastvereisten. Je hoeft zelf geen contrastverhoudingen te berekenen.

De bovenste rij toont de schaduw met zijn on-text kleur (voor tekst die direct op die schaduw is geplaatst). De onderste rij toont de text kleur op een oppervlakte achtergrond:

Aanvullende gegenereerde variabelen​

Variabele patroonBeschrijving
--dwc-color-{name}-tintDe zaadkleur op 12% opaciteit, voor subtiele achtergrondaccenten.
--dwc-border-color-{name}Mode-bewuste randkleur getint met de palette hue.
--dwc-border-color-{name}-emphasisSterkere mode-bewuste randkleur voor hover-, focus- en actieve toestanden.
--dwc-focus-ring-{name}Focus ring schaduw voor de palette.

Global kleuren​

Dit zijn mode-bewuste kleuren die automatisch zich aanpassen aan lichte en donkere thema's.

VariabeleBeschrijving
--dwc-color-blackBijna zwart in de lichte modus, bijna wit in de donkere modus.
--dwc-color-whiteBijna wit in de lichte modus, bijna zwart in de donkere modus.
--dwc-color-body-textStandaard lichaamstekstkleur (gebruik --dwc-color-black).

Component thema's​

DWC abstraheert het gebruik van de beschikbare paletten met een hoger niveau van semantische variatievariabelen. Componenten gebruiken deze variaties in plaats van ruwe stapnummers, omdat variaties zich automatisch aanpassen aan de licht- en donkere modus.

De variaties zijn verdeeld in drie groepen: normal, dark, en light.

  1. normal variabelen zijn de basis kleur, gebruikt voor achtergrond en primaire UI-elementen.
  2. dark variabelen worden hoofdzakelijk gebruikt voor actieve/ingedrukte toestanden.
  3. light variabelen worden hoofdzakelijk gebruikt voor hover/focus toestanden.
--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)

Variatie referentie​

VariabeleBeschrijving
--dwc-color-{name}De basis kleur. Gebruikt voor achtergronden, vullingen en randen.
--dwc-color-{name}-darkEen donkere versie. Gebruikt voor actieve/ingedrukte toestanden.
--dwc-color-{name}-lightEen lichtere versie. Gebruikt voor hover/focus toestanden.
--dwc-color-{name}-altDe zaadkleur op 12% opaciteit. Gebruikt voor subtiele accenttoestanden.
--dwc-color-{name}-textTekstkleur veilig op app-oppervlakken (WCAG AA).
--dwc-color-{name}-text-darkDonkere tekstvariatie.
--dwc-color-{name}-text-lightLichtere tekstvariatie.
--dwc-color-on-{name}-textTekstkleur voor gebruik OP --dwc-color-{name} als achtergrond.
--dwc-color-on-{name}-text-darkTekstkleur voor gebruik OP --dwc-color-{name}-dark.
--dwc-color-on-{name}-text-lightTekstkleur voor gebruik OP --dwc-color-{name}-light.
--dwc-color-on-{name}-text-altTekstkleur voor gebruik OP --dwc-color-{name}-alt.
--dwc-border-color-{name}Mode-bewuste randkleur.
--dwc-border-color-{name}-emphasisSterkere mode-bewuste randkleur.
--dwc-focus-ring-{name}Focus ring schaduw.