Siirry pääsisältöön

Colors

Avaa ChatGPT:ssä

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

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

.element {
  background-color: var(--dwc-color-primary-40);
  color: var(--dwc-color-primary-text-40);
}
Sävyarvojen asteikko

Sävyarvot vaihtelevat välillä 5 (tummimmat) ja 95 (vaaleimmat), kasvavat viiden välein.

Väripaletit​

On useita käyttövalmiita väripaletteja, jotka on suunniteltu semanttisia käyttötapauksia varten, kuten brändäys, menestysviestit, varoitukset jne. Kukin paletti koostuu dynaamisesti luoduista sävyistä ja vivahteista, jotka perustuvat kolmeen keskeiseen ominaisuuteen: hue, saturation ja contrast-threshold.

Saatavilla olevat paletit​

  • default: Neutraali harmaapohjainen paletti, joka on sävytetty päävärillä, käytetään useimmissa komponenteissa.
  • primary: Edustaa yleensä brändisi pääväriä.
  • success, warning, danger: Semanttiset paletit käytettäväksi asianmukaisina tilan indikaattoreina.
  • info: Valinnainen täydentävä paletti toissijaiselle painotukselle.
  • gray: Todellinen harmaan sävyinen paletti, ilman sävyä.
  • black/white: Staattiset väriarvot.

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 luomisprosessia webforJ-sovelluksillesi, voit käyttää DWC HueCraft työkalua. Se tukee palettien luomista brändivärien tai logojen perusteella ja mahdollistaa nopean CSS-viennin.

Tumma tila​

webforJ tukee käänteistä väristrategiaa tummassa tilassa. Sen sijaan, että käyttäisit täysin erillisiä väripaletteja, se kääntää huomioväriarvoja.

Tämä tarkoittaa, että tummissa teemoissa alhaiset sävyarvot (esim. --dwc-color-primary-5) muuttuvat vaaleiksi ja korkeammat arvot (esim. --dwc-color-primary-95) tummiksi. Logiikka kääntyy varmistamaan optimaalisen kontrastin ja luettavuuden taustojen yli.

Komponenttikoodisi pysyy samana riippumatta teemasta. Esimerkiksi:

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

Vaalea tila antaa keskiväri taustan. Tumma tila antaa silti keskivärin, mutta käänteisenä visuaalisesti suljettujen pintojen päällä. Tämä lähestymistapa välttää päällekkäisyyksiä, pitää tyylisi johdonmukaisina ja tekee visuaalisista siirtymisistä sujuvia kun vaihdetaan vaaleista tummiin teemoihin.

Palettien konfigurointi muuttujat​

Jokainen paletti luodaan seuraavien muuttujien perusteella:

MuuttujaKuvaus
hueKulma (asteina) väripyörällä. Yksikköinä arvoja käsitellään asteina.
saturationProsentti, joka indikoi värin voimakkuutta. 100% on täysin kyllästetty; 0% on harmaasävy.
contrast-thresholdArvo välillä 0 ja 100, joka määrittää, onko teksti vaaleaa vai tummaa taustavärin vaaleuden perusteella.

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

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

Komponenttien teemoittaminen abstrakteilla muuttujilla​

Helpottaaksesi tyylittämistä ja johdonmukaisuutta komponenttien kesken, webforJ esittelee abstraktiokerroksen perusväripalettejensa päälle. Tämä kerros perustuu abstrakteihin teema muuttujille - CSS:n mukautetut ominaisuudet, jotka viittaavat tiettyihin sävyihin väripaletissa.

Nämä muuttujat helpottavat teemojen soveltamista kaikissa komponenteissa ilman, että suoraan viitataan raakoihin väriarvoihin tai vahahiin. Voit ajatella niitä semanttisina tyylitien oikoreitteinä, jotka heijastavat sovelluksesi aikomusta sen toteutustiedon sijaan.

Muuttujaryhmät​

Abstraktit teema muuttujat on järjestetty neljään ryhmään:

  1. Normaali Käytetään oletusulkonäössä, kuten taustoissa ja tekstissä inaktiivisissa komponenteissa.
  2. Tumma Käytetään aktiivisissa tai valituissa tiloissa.
  3. Vaalea Käytetään hover- ja keskipisteissä.
  4. Alt Käytetään toissijaisissa korostuksissa, kuten näppäimistöfokuksessa tai hienovaraisissa UI-vivahteissa.

Jokainen ryhmä määrittelee:

  • Taustaväri
  • Etualan (teksti) väri
  • Rajas väri (fokusoitu/hovered/aktiivisissa tiloissa)
  • Fokusoituväri (käytetään, kun komponentti saa näkyväfokustyylit)

Jokainen välilehti alla näyttää abstraktit muuttujat, jotka on määritelty tietylle paletille (primary, success, danger, jne.). Nämä muuttujat haetaan arvoista taustalla olevasta paletista (esim. --dwc-color-primary-40) ja tekevät niistä uudelleenkäytettäviä sovelluksessasi.

Esimerkiksi, sen sijaan, että käyttäisit suoraan --dwc-color-primary-40, voit soveltaa --dwc-color-primary, joka abstrahoi sen roolin oletustaustaksi primääriselle komponentille.

Palettimuutosten tekeminen yhdessä paikassa päivittää kaikkien komponenttien ulkoasun, jotka tukeutuvat näihin abstrakteihin muuttujiin.

Normaali tila​

Käytetään komponentin perustavaa, neutraalia ilmettä - kun se on käyttämättömänä eikä siihen ole vuorovaikutuksessa.

MuuttujaKuvaus
--dwc-color-${name}Oletustaustaväri. Käytetään myös monien komponenttien rajoissa.
--dwc-color-on-${name}-textTekstiväri, joka näkyy oletustaustalla.
--dwc-color-${name}-textTekstiväri, kun komponentti on asetettu pintataustalle.
--dwc-border-color-${name}Raja väri, käytetään pääasiassa hover, focus ja aktiivisissa tiloissa.
--dwc-focus-ring-${name}Fokusrengasvarjo, kun komponentti saa fokuksen näkyvän tyylin.

Tummempi variantti​

Käytetään valitsemisen tai aktiivisten tilojen yhteydessä - yleensä syvempi sävy voimakkaamman kontrastin ja korostuksen vuoksi.

MuuttujaKuvaus
--dwc-color-${name}-darkTummempi versio perusväri. Käytetään usein painettuina tai valittuina tiloina.
--dwc-color-on-${name}-text-darkTekstiväri, kun sitä käytetään tummalla taustalla.
--dwc-color-${name}-text-darkHiukan tummempi tekstivaihtoehto, kun sitä näytetään pinnalla.

Vaaleampi variantti​

Käytetään hover, focus ja vähemmän hallitsevissa visuaalisissa vihjeissä. Nämä ovat pehmeitä sävyjä, jotka on suunniteltu hienovaraiseksi vuorovaikutuspalautteeksi.

MuuttujaKuvaus
--dwc-color-${name}-lightVaaleampi versio perusväristä. Tyypillisesti käytetään hover/focus taustoissa.
--dwc-color-on-${name}-text-lightTekstiväri, kun se näkyy vaalealla taustalla.
--dwc-color-${name}-text-lightVaaleampi tekstiväri käytettäväksi vähemmän korostetuissa tiloissa.

Alt variantti​

Käytetään toissijaiselle korostukselle tai UI-kohokohdille - kuten näppäimistön navigointifokusoutlineille tai apuvälineille.

MuuttujaKuvaus
--dwc-color-${name}-altErittäin vaaleampi versio väristä, käytetään pääasiassa korostuksissa tai taustavaloissa.
--dwc-color-on-${name}-text-altTekstiväri, kun tausta 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);