Työkalut apuluokkien toteuttamiseen

Kela Design Systemin tarjoamat työkalut väriapuluokkien toteuttamiseen.

Värien apuluokat

Kela Design System tarjoaa työkalut väriapuluokkien toteuttamiseen design-muuttujista tai muista väriarvoista. Väriapuluokat tukevat myös tummaa tilaa. Luokat voi nimetä vapaasti, joko atomisesti design-muuttujia noudattaen tai semanttisemmin kertomaan käyttökohteen.

Saatavilla on seuraavat apuvälineet:

generate-colors: tekstivärit, taustavärit ja reunaviivan värit
generate-pseudo-colors: tekstivärit, taustavärit ja reunaviivan värit pseudoluokille (hover, focus jne.)

Toteutus perustuu sass-mixineihin(Avautuu uuteen välilehteen).

Lisää värien johdonmukaisesta käyttämisestä voi lukea osiosta Värit.

Mixineitä voi konfiguroida seuraavilla parametreillä:

Parametri	Kuvaus
`dark`	Tuottaa tumman teeman luokan. Oletus: `false`.
`dark-class`	Tumman teeman luokka `html`-elementissä. Oletus: `kds-dark`.
`dark-prefix`	Tumman teeman luokan alkuosa. Oletus: `dark`.
`prefix`	Apuluokkien alkuosa, joka voi myös olla tyhjä. Älä käytä `kds`-etuliitettä. Oletus: `app`.
`important`	Määrittää käytetäänkö `!important`-sääntöä. Oletus: `false`.
`debug`	Tulostaa dev-tilassa terminaaliin CSS-luokan `@debug` komennolla. Oletus: `false`.

Esimerkki konfiguraation muokkaamisesta:

@include colors.generate-colors(
  (
    "blue-10": t.$color-kela-blue-10,
  ),
  "text",
  (
    "dark": false,
    "dark-class": "kds-dark",
    "dark-prefix": "dark",
    "prefix": "app-",
    "important": false,
    "debug": false,
  )
);

Esimerkit

Tekstiväri

Esimerkkiin on toteutettu app-text-blue-80 ja dark:app-text-blue-30 sekä app-text-danger-60 ja dark:app-text-danger-30 -nimiset apuluokat tekstivärin vaihtamiseen tummaan ja vaaleaan tilaan.

Apuluokat toimivat myös ikoneiden ja kuvakkeiden värin vaihtamiseen.

Esimerkkikoodi tekstivärien toteuttamisesta:

@include colors.generate-colors(
  (
    "blue-80": t.$color-kela-blue-80,
    "danger-60": t.$color-warning-red-60,
  ),
  "text"
);
@include colors.generate-colors(
  (
    "blue-10": t.$color-kela-blue-10,
    "danger-10": t.$color-warning-red-10,
  ),
  "text",
  (
    "dark": true,
  )
);

Taustaväri

Esimerkkiin on toteutettu app-bg-blue-10 ja dark:app-bg-blue-80 -nimiset apuluokat taustavärin vaihtamiseen.

Esimerkkikoodi taustavärien toteuttamisesta:

@include colors.generate-colors(
  (
    "blue-10": t.$color-kela-blue-10,
  ),
  "background"
);
@include colors.generate-colors(
  (
    "blue-80": t.$color-kela-blue-80,
  ),
  "background",
  (
    "dark": true,
  )
);

Reunaviivan väri

Esimerkkiin on toteutettu app-border-blue-20 ja dark:app-border-blue-90 -nimiset apuluokat reunaviivan värin vaihtamiseen.

Esimerkkikoodi reunaviivan värin toteuttamisesta:

@include colors.generate-colors(
  (
    "blue-20": t.$color-kela-blue-20,
  ),
  "border"
);

@include colors.generate-colors(
  (
    "blue-90": t.$color-kela-blue-90,
  ),
  "border"
);

Pseudoluokat

Alla olevaan esimerkkiin on toteutettu yllä olevien esimerkkien lisäksi, hover-värit teksti- ja taustavärille tummaan ja vaaleaan tilaan.

Esimerkkikoodi generate-pseudo-colors-mixinin käyttämiseen:

@include colors.generate-pseudo-colors(
  (
    "blue-90": t.$color-kela-blue-90,
  ),
  "text",
  ("hover")
);
@include colors.generate-pseudo-colors(
  (
    "blue-10": t.$color-kela-blue-10,
  ),
  "text",
  ("hover"),
  (
    "dark": true,
  )
);

@include colors.generate-pseudo-colors(
  (
    "blue-20": t.$color-kela-blue-20,
  ),
  "background",
  ("hover")
);
@include colors.generate-pseudo-colors(
  (
    "blue-70": t.$color-kela-blue-70,
  ),
  "background",
  ("hover"),
  (
    "dark": true,
  )
);