Siirry pääsisältöön

Colors

Avaa ChatGPT:ssä

webforJ tarjoaa värijärjestelmän, joka perustuu CSS:n mukautettuihin ominaisuuksiin. Nämä värimuuttujat säilyttävät johdonmukaisen visuaalisen tyylin sovelluksessasi, samalla kun ne antavat sinulle täyden hallinnan mukauttaa värejä suunnittelutarpeidesi mukaan.

Voit viitata mihin tahansa väriin käyttämällä syntaksia --dwc-color-{palette}-{shade}, jossa {palette} on väriryhmän nimi (esim. primary, danger, ..) ja {shade} on numero 5 ja 95 välillä viiden numeron välein, joka edustaa värin vaaleutta.

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

Varshade-arvot vaihtelevat 5 (tummimmat) ja 95 (vaaleimmat) välillä, lisääntyvät viiden välein.

Väriteemat​

Saatavilla on useita valmiita väriteemoja, jotka on suunniteltu semanttisiin käyttötarkoituksiin, kuten brändäykseen, onnistumisviesteihin, varoituksiin ja muuhun. Jokainen väripaletista koostuu dynaamisesti luoduista sävyistä ja vaaleuksista, jotka perustuvat kolmeen keskeiseen ominaisuuteen: hue, saturation ja contrast-threshold.

Saatavilla olevat paletit​

  • default: Puhtaasti harmaaseen perustuva neutraali paletti, jota on sävytetty ensisijaisella värillä, käytetään useimmissa komponenteissa.
  • primary: Edustaa tyypillisesti brändisi ensisijaista väriä.
  • success, warning, danger: Semanttiset paletit, joita käytetään sopivien tilan ilmaisten esittämiseen.
  • info: Valinnainen täydentävä paletti toissijaisen korostamisen varten.
  • gray: Todellinen harmaasävyjen paletti, ilman sävyä.
  • black/white: Staattiset värimaailmat.

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

Helpottaaksesi WCAG-yhteensopivien palettien luomista webforJ-sovelluksillesi, voit käyttää DWC HueCraft työkalua. Se tukee palettien luomista brändivärien tai logojen perusteella ja mahdollistaa nopean CSS-viennin.

Tumman tila käyttäytyminen​

webforJ tukee käänteistä väri strategiaa tummassa tilassa. Sen sijaan, että käyttäisit täysin erillisiä väriteemoja, se kääntää vaaleusarvojen tulkintatapaa.

Tämä tarkoittaa, että tummissa teemoissa alhaiset shade-arvot (esim. --dwc-color-primary-5) muuttuvat vaaleiksi ja korkeammat arvot (esim. --dwc-color-primary-95) tummiksi. Logiikka käännetään optimaalisen kontrastin ja luettavuuden varmistamiseksi taustojen välillä.

Komponenttikoodisi pysyy samana riippumatta teemasta. Esimerkiksi:

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

Valoisassa tilassa tämä antaa keskivärisen taustan. Tummassa tilassa se tarjoaa edelleen keskitason, mutta käännettynä visuaalisesti tummille pinnoille. Tämä lähestymistapa välttää päällekkäisyyksiä, pitää tyylit johdonmukaisina ja varmistaa visuaalisten siirtymien sujuvuuden vaaleista tummiin teemoihin siirryttäessä.

Paletin konfigurointimuuttujat​

Jokainen paletti johdetaan seuraavista muuttujista:

MuuttujaKuvaus
hueKulma (asteina) värirenkaalla. Yksikköarvoja tulkitaan asteina.
saturationProsentti, joka ilmoittaa värin intensiivisyyden. 100% on täysin kylläinen; 0% on harmaaaste.
contrast-thresholdArvo väliltä 0 ja 100, joka määräytyy sen mukaan, tulisiko teksti olla vaalea vai tumma taustan vaaleuden perusteella.

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

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

Komponenttien teemoitus abstraktien muuttujien avulla​

Tyylin ja johdonmukaisuuden helpottamiseksi komponenttien välillä, webforJ esittelee abstraktiokerroksen perustason väriteemojen päälle. Tämä kerros perustuu abstrakteihin teemu muuttujiin - CSS:n mukautettuihin ominaisuuksiin, jotka viittaavat tiettyihin sävyihin väripalettissa.

Nämä muuttujat helpottavat teemojen käyttöä kaikissa komponenteissa ilman, että sinun tarvitsee viitata suoraan raakoihin väriväwerteihin tai väriin. Voit ajatella niitä semanttisina tyylityökaluna, jotka heijastavat sovelluksesi aikomusta sen toteutuksen yksityiskohtien sijaan.

Muuttujaryhmät​

Abstraktit teemamuuttujat on järjestetty neljään ryhmään:

  1. Normaali Käytetään oletusulkoasun, kuten taustojen ja tekstin dynaamisissa komponenteissa.
  2. Tumma Käytetään aktiivisissa tai valituissa tiloissa.
  3. Vaalea Käytetään hover- ja fokus-tiloissa.
  4. Alt Käytetään toissijaisissa korostuksissa, kuten näppäimistön fokuksessa tai hienovaraisissa käyttöliittymän sävyissä.

Jokainen ryhmä määrittelee:

  • Taustaväri
  • Etualan (teksti) väri
  • Rantaväri (fokusoiduissa/hypiävissä/aktiivisissa tiloissa)
  • Fokus-renkaat (käytetään, kun komponentti saa näkyvän fokus-tyylin)

Jokainen välilehti alla osoittaa abstraktit muuttujat, jotka on määritelty tietylle paletille (primary, success, danger, jne.). Nämä muuttujat nappaavat arvot alustan paletista (esim. --dwc-color-primary-40) ja tekevät niistä käytettävissä sovelluksessasi.

Esimerkiksi, sen sijaan, että käyttäisit suoraan --dwc-color-primary-40, voit soveltaa --dwc-color-primary, joka abstrahoi sen roolin oletustaustana ensisijaisille tyyli komponenteille.

Muuttamalla palettin arvoja yhdessä paikassa päivittää kaikkien näiden abstraktien muuttujien varan saaneiden komponenttien ulkoasua.

Normaali tila​

Käytetään komponentin perus-, neutraalia ulkoasua - kun se on lepotilassa eikä sillä ole vuorovaikutusta.

MuuttujaKuvaus
--dwc-color-${name}Oletus taustaväri. Käytetään myös useimmissa komponenttien rajoissa.
--dwc-color-on-${name}-textTekstiväri, joka näkyy oletus taustan yllä.
--dwc-color-${name}-textTekstiväri, kun komponentti on asetettu pinnan taustalle.
--dwc-border-color-${name}Rantaväri, käytetään pääasiassa hover, fokus ja aktiivisissa tiloissa.
--dwc-focus-ring-${name}Fokusrenkaan varjo, kun komponentti saa näkyvän fokus-tyylin.

Tummempi variantti​

Käytetään valituissa tai aktiivisissa tiloissa - yleensä syvempi sävy voimakkaamman kontrastin ja korostuksen vuoksi.

MuuttujaKuvaus
--dwc-color-${name}-darkTummempi versio perusväristä. Käytetään usein painetuissa tai valituissa tiloissa.
--dwc-color-on-${name}-text-darkTekstiväri, kun taustana on tumma väri.
--dwc-color-${name}-text-darkAavistuksen tummempi tekstivaihtoehto pinnan päällä.

Vaaleampi variantti​

Käytetään hover-, fokus- ja vähemmän hallitsevissa visuaalista varoitusviestintää. Nämä ovat pehmeitä sävyjä, jotka on suunniteltu hienovaraisiksi vuorovaikutuksen palautteiksi.

MuuttujaKuvaus
--dwc-color-${name}-lightVaaleampi versio perusväristä. Tyypillisesti käytetään hover/fokus taustoissa.
--dwc-color-on-${name}-text-lightTekstiväri, kun se näkyy vaalealla taustalla.
--dwc-color-${name}-text-lightVaaleampi tekstisävy vähemmän hallitsevissa tiloissa.

Alt-variantti​

Käytetään toissijaiselle korostamiselle tai käyttöliittymän kohokohtiin - kuten näppäimistön navigoinnin fokusviivoille tai apuviesteille.

MuuttujaKuvaus
--dwc-color-${name}-altErittäin vaalea versio väri, käytetään pääasiassa korostuksissa tai taustasäteilyssä.
--dwc-color-on-${name}-text-altTekstiväri, kun taustana on vaihtoehtoinen (alt) väri.
--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);