Muuttujat ja luokat
Tähän osioon on koottu kehittäjille Kelan fonteille määritellyt muuttujat sekä CSS-luokat. Muuttujia on saatavilla useassa eri muodossa.
Muuttujat
Fontit
Kela Design Systemin fontit ovat tarjolla seuraavien muuttujien ja CSS-luokkien kautta.
Kela
| SASS | JS | CSS | Arvo |
|---|---|---|---|
| $font-family-sans-serif | FONT_FAMILY_SANS_SERIF | .kds-font-body | Lato, -apple-system, BlinkMacS... |
| $font-family-sans-serif-alt | FONT_FAMILY_SANS_SERIF_ALT | .kds-font-heading | 'Noto Sans', -apple-system, Bl... |
Kanta
| SASS | JS | CSS | Arvo |
|---|---|---|---|
| $font-family-kanta-sans-serif | FONT_FAMILY_KANTA_SANS_SERIF | .kds-font-heading | Montserrat, Arial, -apple-syst... |
| $font-family-kanta-sans-serif-alt | FONT_FAMILY_KANTA_SANS_SERIF_ALT | .kds-font-body | Nunito, Arial, -apple-system, ... |
Rivikorkeus
Kela Design System tarjoaa muutamia yleiskäyttöisiä rivikorkeuksia. Suurempi riviväli on tarkoitettu leipätekstille ja muita arvoja voi käyttää mm. otsikoissa tai pienissä käyttöliittymäteksteissä.
| SASS | JS | CSS | Arvo |
|---|---|---|---|
| $line-height-reset | LINE_HEIGHT_RESET | .kds-leading-reset | 1 |
| $line-height-sm | LINE_HEIGHT_SM | .kds-leading-sm | 1.2 |
| $line-height-md | LINE_HEIGHT_MD | .kds-leading-md | 1.35 |
| $line-height-lg | LINE_HEIGHT_LG | .kds-leading-lg | 1.5 |
Kirjainväli
| SASS | JS | CSS | Arvo |
|---|---|---|---|
| $letter-spacing-sm | LETTER_SPACING_SM | .kds-tracking-sm | -0.02em |
| $letter-spacing-md | LETTER_SPACING_MD | .kds-tracking-md | 0 |
| $letter-spacing-lg | LETTER_SPACING_LG | .kds-tracking-lg | 0.02em |
Tekstikoot
KDS:n eri tekstikoot ovat saatavilla muuttujina ja responsiivisina CSS-luokkina.
Responsiivisuus on toteutettu yksinkertaisella periaatteella. Leipätekstin koko (16px / 1rem) pysyy vakiona näytön koosta riippumatta. Otsikoita pienennetään pienemmille näytöille. Tällä pyritään luomaan lisää tilaa pitkille sanoille ja välttämään otsikoiden liiallista rivittymistä.
CSS-luokilla voi asettaa halutun tekstikoon, joka mukautuu eri kokoisille näytöille automaattisesti.
Koko 9xl · NaNpx
Tekstikoko 9xlKoko 8xl · NaNpx
Tekstikoko 8xlKoko 7xl · NaNpx
Tekstikoko 7xlKoko 6xl · NaNpx
Tekstikoko 6xlKoko 5xl · NaNpx
Tekstikoko 5xlKoko 4xl · NaNpx
Tekstikoko 4xlKoko 3xl · NaNpx
Tekstikoko 3xlKoko 2xl · NaNpx
Tekstikoko 2xlKoko xl · NaNpx
Tekstikoko xlKoko base · NaNpx
Tekstikoko baseKoko sm · NaNpx
Tekstikoko smMiten tekstikoot on muodostettu?
Kela Design Systemin tekstikokoja ei ole valittu sattumanvaraisesti vaan ne on laskettu yksinkertaisen kertoimen avulla. Kun fonttikoko kasvaa yhden pykälän, koko kasvaa aina saman kertoimen verran (ns. “modular scale”).
Kela Design Systemissä kertoimia on käytössä useita, jokaiselle eri breakpointille omansa. Näiden avulla tekstikokoja skaalataan pienemmille näytöille samalla logiikalla. Suuria tekstikokoja pienennetään, jotta sisällöt mahtuvat paremmin pienemmille näytöille.
Esimerkki
Käytännön esimerkki tekstikokojen muodostamisesta suurille näytöille, kun kertoimena on 1,17 ja peruskokona 16px. Tekstikoot voi laskea yksinkertaisella kertolaskulla.
- 16px × 1,17 ~ 19px
- 16px × 1,17 × 1,17 ~ 22px
- 16px × 1,17 × 1,17 × 1,17 ~ 26px
- ...
Kertoimet
Edellä kuvatut tekstikoot on saatu käyttämällä niiden laskentaan seuraavia arvoja.
| SASS | JS | Suhdeluku | Arvo |
|---|---|---|---|
$modular-scale-base | $MODULAR_SCALE_BASE | - | 1rem |
$modular-scale-ratio-xs | MODULAR_SCALE_RATIO_XS | 1.10 | - |
$modular-scale-ratio-sm | MODULAR_SCALE_RATIO_SM | 1.12 | - |
$modular-scale-ratio-md | MODULAR_SCALE_RATIO_MD | 1.13 | - |
$modular-scale-ratio-lg | MODULAR_SCALE_RATIO_LG | 1.14 | - |
$modular-scale-ratio-xl | MODULAR_SCALE_RATIO_XL | 1.17 | - |