Siirry pääsisältöön

Colors

Avaa ChatGPT:ssä

webforJ tarjoaa värijärjestelmän, joka perustuu CSS:n mukautettaviin ominaisuuksiin. Nämä väri muuttujat säilyttävät johdonmukaisen visuaalisen tyylin sovelluksessasi, samalla kun annat täyden hallinnan mukauttaa väripaletteja suunnittelutarpeidesi mukaan.

Voit viitata mihin tahansa väriin käyttäen syntaksia --dwc-color-{palette}-{step}, jossa {palette} on väriryhmän nimi (esim. primary, danger, ..) ja {step} on luku 5 - 95 välein 5, mikä edustaa värin vaaleutta.

.element {
  background-color: var(--dwc-color-primary-50);
  color: var(--dwc-color-on-primary-text-50);
}
Shade Step Scale

Vaiheiden arvot vaihtelevat 5 (tummimmat) ja 95 (vaaleimmat) välillä, kasvavat viiden välein. Vaihe 5 on aina tummimmassa tilassa ja vaihe 95 on aina vaaleimmassa, riippumatta vaaleasta tai tummasta tilasta.

Väripaletit​

DWC määrittää seitsemän palettia sekä black/white paletin, jossa jokainen paletti on joukkue variations (sävyjä ja sävyjä) semanttisesta väristä.

Saatavilla olevat paletit​

  • default: Neutraali paletti, joka on sävytys päävärillä, käytetään useimpien komponenttien taustoissa, rajoissa ja neutraaleissa käyttöliittymäelementeissä.
  • primary: Edustaa tyypillisesti brändisi pääväriä.
  • success, warning, danger: Semanttiset paletit, joita käytetään asianmukaisiin tilan indikaattoreihin.
  • info: Täydentävä paletti toissijaiselle korostukselle.
  • gray: Puhdas harmaan sävyjen paletti, ilman sävyjä.
  • black/white: Dynaamisesti teemoja tunnistavat värit, jotka mukautuvat nykyiseen teemaan. Lähes musta vaaleassa tilassa muuttuu lähes valkoiseksi tummassa tilassa ja päinvastoin.

Palettisiemenet​

Jokainen paletti generoidaan kahdesta siemen muuttujasta: hue ja saturation. Asettamalla nämä kaksi arvoa, kaikki 19 vaihetta generoituu automaattisesti.

Siemen muuttujaKuvaus
--dwc-color-{name}-hSiemenvärin sävykulma (0-360).
--dwc-color-{name}-sSaturaatio prosentteina. 100% on täysin kyllästetty, 0% on täysin kyllästämätön (harmaa).

Voit säätää palettia määrittelemällä nämä muuttujat juuristyyleissäsi. Esimerkiksi, muuttaaksesi pääpalettia:

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

Suora siemenkorvaus​

Jokainen paletti altistaa myös --dwc-color-{name}-seed muuttujan. Oletusarvoisesti tämä rakennetaan sävy- ja kyllästysarvoista, mutta voit ohittaa sen suoraan millä tahansa voimassa olevalla CSS-värillä kiertäen hue/kyllästysjärjestelmän kokonaan.

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

Sävykierto​

Palettigeneraattori soveltaa hienovaraista sävykiertoa vaiheiden yli luodakseen luonnollisemman näköisiä paletteja. Tummemmat sävyt siirtyvät hieman lämpimämmiksi, kun taas vaaleammat sävyt siirtyvät hieman viileämmiksi. Tämä jäljittelee, miten todelliset pigmentit käyttäytyvät ja estää paletteja näyttämästä litteiltä tai synteettisiltä.

MuuttujaOletusarvoKuvaus
--dwc-color-hue-rotate3Pisteiden sävykierron asteet paletissa. Aseta 0 poistaaksesi käytöstä.

Generoituja muuttujia jokaiselle vaiheelle​

Jokainen paletti generoi 19 vaihetta (5 - 95). Jokaiselle vaiheelle tuotetaan seuraavat muuttujat:

MuuttujamalliKuvaus
--dwc-color-{name}-{step}Paletin sävy kyseisessä vaiheessa.
--dwc-color-{name}-text-{step}Pintaturvallinen tekstiväri, joka on peräisin kyseisestä vaiheesta (WCAG AA -yhteensopiva).
--dwc-color-on-{name}-text-{step}Tekstiväri käytettäväksi SABOTTOMINA värin päällä (automaattisesti vaihdattaa vaaleaa/tummaista).
Esteettömyys

Kaikki generoituat tekstivärit täyttävät WCAG AA -kontrastivaatimukset automaattisesti. Sinun ei tarvitse laskea kontrastisuhteita itse.

Ylärivillä näkyy sävy sen on-text värin kanssa (tekstille, joka on suoraan tätä sävyä vasten). Alarivillä näkyy text väri pinnan taustalla:

Lisägeneroidut muuttujat​

MuuttujamalliKuvaus
--dwc-color-{name}-tintSiemenväri 12% läpinäkyvyydellä hienovaraisille korostustaustoille.
--dwc-border-color-{name}Moodin mukautuva reunan väri, jossa on paletin sävy.
--dwc-border-color-{name}-emphasisVoimakkaampi moodin mukautuva reunan väri hiiren päällä, tarkennuksessa ja aktiivisissa tiloissa.
--dwc-focus-ring-{name}Keskitysrenkaan varjo paletille.

Globaalit värit​

Nämä ovat moodin mukautuvia värejä, jotka mukautuvat automaattisesti vaalealle ja tummalle teemalle.

MuuttujaKuvaus
--dwc-color-blackLähes musta vaaleassa tilassa, lähes valkoinen tummassa tilassa.
--dwc-color-whiteLähes valkoinen vaaleassa tilassa, lähes musta tummassa tilassa.
--dwc-color-body-textOletustekstiväri (käyttää --dwc-color-black).

Komponenttiteemat​

DWC abstrahoi käytön käytettävissä olevista paleteista korkeamman tason semanttisten variaatiomuuttujien avulla. Komponentit käyttävät näitä variaatioita raakojen vaiheiden numeroiden sijaan, koska variaatiot mukautuvat automaattisesti vaaleisiin ja tummiin teemoihin.

Variaatiot on jaettu kolmeen ryhmään: normal, dark, ja light.

  1. normal muuttujat ovat perusväri, jota käytetään taustoihin ja ensisijaisiin käyttöliittymäelementteihin.
  2. dark muuttujat käytetään pääasiassa aktiivisissa/painetuissa tiloissa.
  3. light muuttujat käytetään pääasiassa hover/focus tiloissa.
--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)

Variaatioviite​

MuuttujaKuvaus
--dwc-color-{name}Perusväri. Käytetään taustoissa, täytöissä ja rajoissa.
--dwc-color-{name}-darkTummempi versio. Käytetään aktiivisissa/painetuissa tiloissa.
--dwc-color-{name}-lightVaaleampi versio. Käytetään hover/focus -tiloissa.
--dwc-color-{name}-altSiemen 12% läpinäkyvyydellä. Käytetään hienovaraisissa korostustiloissa.
--dwc-color-{name}-textTekstiväri, joka on turvallinen sovelluspinnalla (WCAG AA).
--dwc-color-{name}-text-darkTummempi tekstivaihtoehto.
--dwc-color-{name}-text-lightVaaleampi tekstivaihtoehto.
--dwc-color-on-{name}-textTekstiväri käytettäväksi --dwc-color-{name} päällä.
--dwc-color-on-{name}-text-darkTekstiväri käytettäväksi --dwc-color-{name}-dark.
--dwc-color-on-{name}-text-lightTekstiväri käytettäväksi --dwc-color-{name}-light.
--dwc-color-on-{name}-text-altTekstiväri käytettäväksi --dwc-color-{name}-alt.
--dwc-border-color-{name}Moodista tietoinen reunan väri.
--dwc-border-color-{name}-emphasisVoimakkaampi moodista tietoinen reunan väri.
--dwc-focus-ring-{name}Keskitysrenkaan varjo.