Opret dit designsystem, del 3: Farver

I denne artikel skal vi se på, hvordan man indstiller et farvesystem i CSS, og hvad er den bedste praksis for at sikre, at systemet er let at bruge og vedligeholde.

Denne artikel er en del af en serie om designsystemer inspireret af vores bibliotek med webkomponenter. Biblioteket er afhængig af et solidt system af CSS-globale. Så dette er os, der deler de ting, vi har lært, og indstiller den globale stil på vores bibliotek!

Artikel serie:
- Del 1: Typografi
- Del 2: Grid & Layout
- Del 3: Farver
- Del 4: Afstand
- Del 5: Ikoner
- Del 6: Knapper

Vi har lanceret Color Editor! Et webdesignværktøj, der genererer farvepaletter og temaer, der er kompatible med CodyHouse Framework.

Farvevariabler 101

I modsætning til andre CSS-Globale handler oprettelse af et farvesystem 10% om kodning og 90% om semantik. Når du arbejder på din _colors.scss-fil, vil du huske følgende mål:

  1. Farvevariablerne skal være lette at huske → Du ønsker ikke at tjekke den globale fil når som helst du skal vælge en farve.
  2. Systemet skal være let at opdatere → Du tilføjer, fjerner og omdøber farver. Sørg for, at det ikke er kompliceret.
  3. Systemet bør kun omfatte de væsentlige farver → vi har hørt denne så mange gange ... alligevel ender vi altid med flere farver, end vi har brug for! Den reelle succesnøgle med et designsystem er at fjerne alt, hvad der ikke er nødvendigt (farver inkluderet).

Semantiske vs deklarative farver

Når det gælder indstilling af farvevariabler, er der to hovedmetoder: semantiske og deklarative farver.

Den semantiske tilgang ser ud:

Mens her er et eksempel på en erklærende tilgang:

Ingen af ​​dem er forkert. Valg af det, der imødekommer dine behov, afhænger af så mange faktorer (f.eks. Projektstørrelse, brandfarverrelevans osv.).

Mens jeg arbejdede på filen _colors.scss i vores rammer, var jeg nødt til at tage hensyn til, at brugerne ville redigere den (100%). Det betyder, at selv hvis den erklærende tilgang var den nemmeste at bruge, var jeg nødt til at blande den med den semantiske tilgang for at få et system, der også var let at vedligeholde.

Den essentielle farvepalet

Trin nummer et erklærede det mindste antal farver, der var nødvendigt for at oprette webkomponenterne. Generelt består den essentielle farvepalet af:

  1. Hoved / primærfarve → bruges til linkene, baggrundsfarve på knappen osv. Generelt er det den vigtigste opfordring til handling-farve.
  2. Accentfarven → bruges til at fremhæve noget vigtigt på siden. Det bør ikke være en variation af den primære farve, men en komplementær farve.
  3. En skala med neutrale farver → Det er generelt en skala med gråtoner, der skal bruges til tekstelementer, subtile elementer, rammer osv.
  4. Feedbackfarver → succes, fejl, advarsel.

Nogle af disse farver har brug for en variation (mørkere / lysere version), der ofte bruges til at fremhæve interaktivitet (f.eks .: hover /: aktive tilstande).

I CSS oversættes dette til:

* note: vi bruger postcss-farve-mod-funktion plugin til at oversætte farvefunktionerne til RGBA-kode, der er kompatibel med alle browsere.

Uddraget ovenfor repræsenterer farvepaletten: alle de farver, der bruges på tværs af projektet.

Variationerne af de primære og accentfarver genereres ved hjælp af farvefunktioner. Denne fremgangsmåde er praktisk, hvis du har en demo.html-fil (og det gør vi i vores rammer), så du kan finjustere værdierne for funktionerne, indtil du er tilfreds med de opnåede farver. Nuancer (eller neutrale) farver genereres ved hjælp af chroma.js. I dette tilfælde var det ikke ideelt at bruge funktionerne, fordi du generelt har to modsatte farver (sort og hvid), og du er nødt til at generere en skala med værdier baseret på disse to farver.

Tilføjer semantiske farver til blandingen

Når farvepaletten er klar, kan vi tilføje semantiske farver. Oprettelse af semantiske farver betyder ikke at øge antallet af farver, men at fordele farverne ved hjælp af semantiske referencer.

Hvorfor jeg synes, dette er en god tilgang

Først og fremmest er dette system afhængig af to væsentlige farver: primær- og accentfarver. Det betyder, at når du skal bruge farvevariablerne, vil det ikke være svært for dig at huske, hvad disse variabler repræsenterer (selvom du ikke bruger deklarative navne som "blå" og "rød").

Dit system skal muligvis indeholde flere farver (f.eks. En sekundær farve). Du beskæftiger stadig med kun tre farver. Det ville være vanskeligt at administrere et system baseret på 10+ hovedfarver uanset den tilgang, du bruger, så du kan overveje at forenkle det.

Gråtonefarverne bruger en anden navnekonvention: jo højere er tallet i slutningen af ​​variablen, jo mørkere er farven.
Denne tilgang bliver praktisk, når du ikke er sikker på, hvilken neutral farve du vil anvende. Hvis grå-2 ser for subtil ud, kan du prøve grå-3. Du har muligvis bemærket, at nogle nuancer mangler (f.eks. Grå-5). De var ikke vigtige i vores tilfælde (vi brugte dem aldrig, mens vi oprettede webkomponenterne), så vi fjernede dem fra farvepaletten.

Semantiske farver føjes til blandingen af ​​tre hovedårsager:

  1. Filen _colors.scss bliver kilden til sandheden, når som helst du har brug for at ændre en farve. Føler du, at tekstoverskriftselementerne skal være mørkere? Åbn filen _colors.scss, og rediger variabel i farve-tekstoverskrift.
  2. Hvis du f.eks. Definerer en farvekant, behøver du ikke slå op, hvilken grå farve, du har brugt i andre komponenter, næste gang du opretter et kantelement. Det samme koncept gælder for mange elementer, ikke kun grænser.
  3. Det gør det til et stykke kage at skabe og vedligeholde forskellige temaer.

temaer

Så snart vi kan bruge CSS-variabler uden at skulle stole på plugins eller polyfill, vil det være superenkelt at oprette farvetemaer *! Betyder det, at vi ikke kan oprette temaer i dag? Nej, det kan vi. Vi har to muligheder.

* I vores rammer bruger vi plugcss-css-variabler-pluginet til at udarbejde CSS-variabler. Det understøtter i øjeblikket ikke opdatering af variabler i en CSS-klasse.

Alternativ 1 opdaterer alligevel CSS-variabler. Browsere, der ikke understøtter variabler, viser ”standard” farvetemaet. Dette er ikke et problem, så længe indholdet er tilgængeligt.

For eksempel har du et standardfarvetema → hvid baggrund og sort tekstfarve og en .themørk → sort baggrund og hvid tekstfarve. Derefter opretter du to komponenter, den ene med standardtemaet, den anden med .dark-temaet. Hvis det at have begge komponenter med standardtemaet ikke påvirker brugeroplevelsen, kan du betragte .dark-temaet som en forbedring (valgfrit). I dette tilfælde er det fornuftigt at opdatere variablerne for at oprette forskellige temaer, selvom de ikke understøttes overalt.

Sådan opretter du et nyt tema, der opdaterer nogle nøgle CSS-variabler:

Jeg elsker denne løsning, fordi den abstraherer farvekorrektionen, og den giver dig mulighed for at bevare dine farvetemaer i en enkelt fil. Dermed kan vi potentielt ændre tilstanden for hver komponent (fra tema-a til tema-b) ved blot at anvende en CSS-klasse.

Alternativ 2 vil være målrettet mod alle elementer, hvis udseende påvirkes af temaet. Fordelen ved denne metode er, at den understøttes af alle browsere. Det er dog ikke så let at vedligeholde sammenlignet med den, der udelukkende er baseret på CSS-variabler.

Her er et eksempel på mulighed 2 i handling:

Nu ved du, hvordan vi planlægger at håndtere farver i vores rammer! Hvis du har feedback / forslag, så fortæl os det i kommentaren!

Jeg håber, du nød artiklen! For flere webdesign-nuggets, følg os her på Medium eller Twitter.