Työkalut design-muuttujien hyödyntämiseen

Kela Design Systemin tarjoamat työkalut design-muuttujien hyödyntämiseen.

Työkalut ovat edelleen kehityksessä, joten niiden API tai toiminta saattaa vielä muuttua seuraavissa versioissa.

Design-muuttujien hakeminen JavaScript- ja JSON-tiedostoista

JavaScript- ja JSON-muotoiset design-muuttujat kannattaa hakea getToken- tai getTokenCollection-funktioiden avulla.

Ne yhtenäistävät polkujen käsittelyä ja mahdollistavat oletusarvojen muutokset lähdetiedostoissa ilman rikkovia muutoksia muuttujien poluissa.

Lisäksi funktiot palauttavat eri tyyppisten muuttujien nimet.

getTokenCollection

const tc = getTokenCollection(themeTokens);

tc.getValue("color.brand.primary"); // #2a69c5

tc.getToken("color.brand.primary").cssVar; // var(--kds-color-brand-primary)
tc.getToken("color.brand.primary").dotPath; // color.brand.primary
tc.getToken("color.brand.primary").jsVar; // COLOR_BRAND_PRIMARY
tc.getToken("color.brand.primary").scssVar; // $color-brand-primary
tc.getToken("color.brand.primary").value; // #2a69c5

getToken

getToken(themeTokens, "color.brand.primary").cssVar; // var(--kds-color-brand-primary)
getToken(themeTokens, "color.brand.primary").dotPath; // color.brand.primary
getToken(themeTokens, "color.brand.primary").jsVar; // COLOR_BRAND_PRIMARY
getToken(themeTokens, "color.brand.primary").scssVar; // $color-brand-primary
getToken(themeTokens, "color.brand.primary").value; // #2a69c5