Siirry sisältöön
Kela Design System KDS

17.1.0

Design-muuttujat

Design-muuttujat ovat yhteisiä tyyliarvoja, jotka toimivat komponenttien rakennuspalikoina ja johdonmukaisen design-kielen perusyksiköinä.

Yleistä

Design-muuttujat (design tokens) ovat atomiseen rakenteeseen perustuvia tyylipäätöksiä, jotka määrittävät käyttöliittymäelementtien muotokielen ja visuaalisen ilmeen.

Yhteinen termistö ja jaetut muuttujat helpottavat kehittäjien ja suunnittelijoiden välistä yhteistyötä.

Lisäksi niiden avulla voidaan toteuttaa yhteinen visuaalinen ilme teknologiasta riippumatta.

Esimerkki

Kelan siniseen brändiväriin voidaan viitata HEX-arvon (#003580) sijaan valmiilla muuttujalla color-brand-primary (teemamuuttuja) tai color-kela-blue-80 (perusmuuttuja).

Kela Design Systemin design-muuttujat on jaettu kolmeen kategoriaan:

Kela Design System käyttää design-muuttujia esimerkiksi komponenttien tyylien, teemoituksen ja apuluokkien toteutuksessa. Teemamuuttujia käytetään arvoihin, jotka voivat muuttua teeman tai tumman ja vaalean tilan mukaan, kun taas perusmuuttujat määrittävät arvot, jotka pysyvät samoina kaikissa teemoissa.

Esimerkki design-muuttujien käytöstä komponenteissa

2

  • 1
    font-size: var(--kds-typography-label-font-size);
    font-weight: var(--kds-typography-label-font-weight);
    ...
  • 2
    background: var(--kds-color-input-bg);
    border-color: var(--kds-color-input-border);
    ...
  • 3
    background: var(--kds-color-primary-bg-btn);
    font-size: var(--kds-typography-font-size-base);
    ...
  • 4
    background: var(--kds-color-bg);
    font-size: var(--kds-typography-font-size-base);
    ...

Erilaiset design-muuttujat

Perusmuuttujat

Perusmuuttujat sisältävät visuaalisen ilmeen ja teemoituksen toteuttamiseen tarkoitetut vakioarvot. Nämä arvot ovat kiinteitä, eivätkä ne muutu eri teemojen tai tumman ja vaalean tilan välillä.

Perusmuuttujien nimeäminen kuvastaa niiden arvoja, jotta merkitys on selkeä sekä suunnittelijoille että kehittäjille.

Kaikki perusmuuttujat

Teemamuuttujat

Teemamuuttujilla toteutetaan Kela- ja Kanta-teemojen erityispiirteet sekä vaalean ja tumman tilan värit. Teemamuuttujien arvot periytyvät perusmuuttujista, mutta niiden avulla voidaan muokata visuaalista ilmettä eri teemojen tarpeisiin.

Esimerkki

Tekstin värinä toimiva color-text-teemamuuttuja on:

  • Kela-teeman vaaleassa tilassa color-kela-gray-100 ja tummassa tilassa color-kela-gray-10.
  • Kanta-teeman vaaleassa tilassa color-kanta-gray-100 ja tummassa tilassa color-kanta-gray-10.

Näin sama muuttuja tarjoaa värin teeman ja tilan mukaan.

Komponenttien teemoitus on toteutettu pääasiassa CSS-muuttujien avulla, mutta muuttujat ovat saatavilla myös muissa formaateissa, jolloin niitä voidaan hyödyntää esimerkiksi JavaScript-kontekstissa.

Teemamuuttujien nimeäminen on semanttista, ja sen tarkoituksena on kuvata muuttujien käyttötarkoitus yleisellä tasolla.

Teemamuuttujiin on sisällytetty pääasiassa vain ne arvot, joita tarvitaan Kela- ja Kanta-teemojen sekä vaalean ja tumman tilan toteuttamiseksi. Muutoin komponenttien tyylit perustuvat perusmuuttujiin.

Kaikki teemamuuttujat

Teemamuuttujat jakautuvat globaaleihin ja komponenttikohtaisiin muuttujiin. Globaaleilla teemamuuttujilla määritellään kaikkien komponenttien yhteiset arvot. Komponenttikohtaisia muuttujia käytetään silloin, kun tietyn komponentin ulkoasuun tarvitaan poikkeuksia, eikä globaaleista arvoista löydy sopivaa vaihtoehtoa.

Esimerkki

Komponenttimuuttujien nimet alkavat aina komponentin nimellä, esimerkiksi: card-bg-color ja card-icon-color

Komponenttikohtaisten muuttujien nimeäminen kuvaa tarkasti niiden käyttötarkoituksen kyseisessä komponentissa.

Kaikki komponenttimuuttujat

Tiedon visualisoinnin muuttujat

Tiedon visualisoinnin muuttujat toimivat samalla periaatteella kuin teemamuuttujat, mutta niitä käytetään ainoastaan tiedon visualisointien toteuttamiseen.

Kaikki tiedon visualisoinnin muuttujat

Muuttujien käyttö sovelluksissa

Kun sovelluksessa hyödynnetään valmiita design-muuttujia, KDS:n tyyleihin tehtävät muutokset periytyvät sovelluksiin automaattisesti versiopäivitysten myötä. Näin tyylejä ei tarvitse ylläpitää erikseen jokaisessa sovelluksessa. Teemamuuttujien käyttö varmistaa myös tumman ja vaalean tilan toimivuuden.

Esimerkki

Kuvakkeen kokoa ohjaava perusmuuttuja icon-size-md pitää sisällään m-kokoisen kuvakkeen kooksi päätetyn arvon: 2rem (32px).

Jos kuvakkeiden vakiokoot muuttuisivat ja kuvakkeen m-koko olisi jatkossa esimerkiksi 2.5rem, arvo päivitetään vain Kela Design Systemin design-muuttujaan, josta se välittyy automaattisesti kaikkiin toteutuksiin versiopäivityksen myötä.

Design-muuttujia voi käyttää sovelluksissa myös räätälöityjen komponenttien tyyleihin. Ne mahdollistavat KDS-tyylien hyödyntämisen silloinkin, kun sovellus ei käytä Reactia.

Kaikki design-muuttujat ovat saatavilla CSS-, JavaScript-, JSON- ja SCSS-tiedostomuodoissa, mikä mahdollistaa niiden käyttämisen erilaisilla teknologioilla.

Työkalut design-muuttujien hyödyntämiseen

Muuttujien käyttö CSS-apuluokissa

Design-muuttujia käytetään myös CSS-apuluokissa. Apuluokat yhdistävät design-muuttujat valmiiksi CSS-luokiksi, joita voi hyödyntää suoraan HTML-elementeissä tyylimäärittelyiden toteuttamiseen.

Esimerkki

Leipätekstin värin määrittävä CSS-apuluokka .kds-text-body toteuttaa seuraavan CSS-määrityksen: color: var(--kds-color-text).

CSS-muuttuja var(--kds-color-text) taas käyttää perusmuuttujien arvoja color-kela-gray-100 ja color-kela-gray-10 tilasta riippuen.

Sovelluksen omat CSS-apuluokat kannattaa toteuttaa siten, että ne perustuvat design-muuttujiin aina, kun sopivia arvoja on saatavilla. Näin varmistetaan yhtenäinen tyyli ja se, että muutokset design-muuttujiin päivittyvät myös räätälöityihin apuluokkiin ilman manuaalista ylläpitoa.

Työkalut apuluokkien toteuttamiseen