Lag ditt designsystem, del 3: Farger

I denne artikkelen skal vi se på hvordan du setter et fargesystem i CSS, og hva er den beste fremgangsmåten for å sikre at systemet er enkelt å bruke og vedlikeholde.

Denne artikkelen er del av en serie om designsystemer inspirert av vårt bibliotek med nettkomponenter. Biblioteket er avhengig av et solid system av CSS-globale. Så dette er oss som deler tingene vi har lært om å sette den globale stilen til biblioteket vårt!

Artikkelserie:
- Del 1: Typografi
- Del 2: Rutenett og layout
- Del 3: Farger
- Del 4: Avstand
- Del 5: Ikoner
- Del 6: Knapper

Vi har lansert Color Editor! Et webdesignverktøy som genererer fargepaletter og temaer kompatible med CodyHouse Framework.

Fargevariabler 101

I motsetning til andre CSS-globalt handler det å lage et fargesystem 10% om koding og 90% om semantikk. Når du arbeider med _colors.scss-filen din, vil du huske følgende mål:

  1. Fargevariablene må være enkle å huske → Du vil ikke sjekke den globale filen når du måtte velge en farge.
  2. Systemet må være enkelt å oppdatere → Du vil legge til, fjerne og gi nytt navn til farger. Forsikre deg om at det ikke er komplisert.
  3. Systemet skal bare inneholde essensielle farger → vi har hørt denne så mange ganger ... men vi ender alltid opp med flere farger enn vi trenger! Den virkelige suksessnøkkelen til et designsystem er å fjerne alt som ikke er nødvendig (farger inkludert).

Semantiske vs deklarative farger

Når det gjelder innstilling av fargevariabler, er det to hovedtilnærminger: semantiske og deklarative farger.

Den semantiske tilnærmingen ser ut som:

Her er et eksempel på en deklarativ tilnærming:

Ingen av dem tar feil. Valg av det som tilfredsstiller dine behov, avhenger av så mange faktorer (f.eks. Prosjektstørrelse, merkefargens relevans osv.).

Mens jeg jobbet med filen _colors.scss i rammene våre, måtte jeg ta hensyn til at brukerne skulle redigere den (100%). Det betyr at selv om den deklarative tilnærmingen var den enkleste å bruke, måtte jeg blande den med den semantiske tilnærmingen for å få et system som også var lett å vedlikeholde.

Den essensielle fargepaletten

Trinn nummer en erklærte minimum antall farger som trengs for å lage nettkomponenter. Generelt består den essensielle fargepaletten av:

  1. Hoved- / primærfarge → som brukes til koblingene, bakgrunnsfargen på knappen, osv. Generelt er det den viktigste handlingsfargen.
  2. Aksentfargen → brukes til å fremheve noe viktig på siden. Det skal ikke være en variant av primærfargen, men en komplementær farge.
  3. En skala med nøytrale farger → Det er vanligvis en skala med gråtoner, som skal brukes til tekstelementer, subtile elementer, grenser osv.
  4. Tilbakemeldingsfarger → suksess, feil, advarsel.

Noen av disse fargene trenger en variant (mørkere / lysere versjon), ofte brukt for å fremheve interaktivitet (f.eks .: sveve /: aktive tilstander).

I CSS oversettes dette til:

* merknad: vi bruker postcss-farge-mod-funksjonen plugin for å oversette fargefunksjonene til RGBA-kode som er kompatibel med alle nettlesere.

Utdraget over representerer fargepaletten: alle fargene som brukes over hele prosjektet.

Variasjonene av primærfargene og aksentfargene genereres ved hjelp av fargefunksjoner. Denne tilnærmingen er nyttig hvis du har en demo.html-fil (og det gjør vi i rammene våre), slik at du kan finpusse verdiene til funksjonene til du er fornøyd med fargene du får. Nyanser (eller nøytrale) farger genereres ved hjelp av chroma.js. I dette tilfellet var det ikke ideelt å bruke funksjonene, fordi du vanligvis har to motsatte farger (svart og hvitt), og du må generere en skala med verdier basert på disse to fargene.

Legger semantiske farger til blandingen

Når fargepaletten er klar, kan vi legge til semantiske farger. Å lage semantiske farger betyr ikke å øke antall farger, men å fordele fargene ved å bruke semantiske referanser.

Hvorfor jeg synes dette er en god tilnærming

Først av alt er dette systemet avhengig av to viktige farger: primær- og aksentfarger. Det betyr at når du trenger å bruke fargevariablene, vil det ikke være vanskelig for deg å huske hva disse variablene representerer (selv om du ikke bruker deklarative navn som "blå" og "rød").

Systemet ditt kan trenge å inkludere flere farger (f.eks. En sekundærfarge). Du har fremdeles å gjøre med bare tre farger. Det ville være vanskelig å administrere et system basert på 10+ hovedfarger uansett hvilken tilnærming du bruker, så det kan være lurt å vurdere å forenkle det.

Gråtonefargene bruker en annen navnekonvensjon: jo høyere er tallet på slutten av variabelen, jo mørkere er fargen.
Denne tilnærmingen blir praktisk når du ikke er sikker på hvilken nøytral farge du vil bruke. Hvis grå-2 ser for subtil ut, kan du prøve grå-3. Du har kanskje lagt merke til at noen nyanser mangler (f.eks. Grå-5). De var ikke viktige i vårt tilfelle (vi har aldri brukt dem mens vi opprettet webkomponentene), så vi fjernet dem fra fargepaletten.

Semantiske farger legges til i blandingen av tre hovedgrunner:

  1. Filen _colors.scss blir sannhetskilden når som helst du trenger for å endre en farge. Føler du at overskriftselementene i teksten skal være mørkere? Åpne _colors.scss-filen og rediger variabelen for fargetekstoverskrift.
  2. Hvis du for eksempel definerer en fargekant, trenger du ikke å slå opp hvilken grå farge du har brukt i andre komponenter neste gang du oppretter et grenseelement. Det samme konseptet gjelder mange elementer, ikke bare grenser.
  3. Det gjør det til et stykke kake å lage og vedlikeholde forskjellige temaer.

theming

Så snart vi kan bruke CSS-variabler uten å måtte stole på plugins eller polyfyll, vil det være superenkelt å lage fargetemaer *! Betyr det at vi ikke kan lage temaer i dag? Nei, det kan vi. Vi har to alternativer.

* I rammene våre bruker vi plugcss-css-variabler-pluginen for å kompilere CSS-variabler. Den støtter foreløpig ikke oppdatering av variabler i en CSS-klasse.

Alternativ 1 oppdaterer CSS-variabler uansett. Nettlesere som ikke støtter variabler, vil vise "standard" fargetema. Dette er ikke et problem, så lenge innholdet er tilgjengelig.

For eksempel har du et standardfargetema → hvit bakgrunn og svart tekstfarge, og en temamørk → svart bakgrunn og hvit tekstfarge. Så lager du to komponenter, en med standardtema, den andre med .dark-tema. Hvis det å ha begge komponentene med standardtema ikke påvirker brukeropplevelsen, kan du vurdere .dark-temaet som en forbedring (valgfritt). I dette tilfellet er det fornuftig å oppdatere variablene for å lage forskjellige temaer, selv om de ikke støttes overalt.

Slik lager du et nytt tema som oppdaterer noen viktige CSS-variabler:

Jeg elsker denne løsningen fordi den abstraherer fargekorrigering, og den lar deg beholde fargetemaene dine i en enkelt fil. Ved å gjøre det, kan vi potensielt endre tilstanden til hver komponent (fra tema-a til tema-b) bare ved å bruke en CSS-klasse.

Alternativ 2 vil være rettet mot alle elementer hvis utseende påvirkes av temaet. Fordelen med denne metoden er at den støttes av alle nettlesere. Det er imidlertid ikke så lett å vedlikeholde sammenlignet med den som er basert på CSS-variabler.

Her er et eksempel på alternativ 2 i aksjon:

Nå vet du hvordan vi planlegger å håndtere farger i rammene våre! Hvis du har tilbakemeldinger / forslag, gi oss beskjed i kommentaren!

Jeg håper du likte artikkelen! Følg oss her på Medium eller Twitter for flere nettdesignklumper.