Customizing Colors and Fonts

[0x15F9]

Hello. Can you draft the steps required to use some custom fonts and colors? Thanks

[uipoet]

Thank you for the interest, I will add some documentation to the website.

In the meantime, you can override the default CSS variables in your app's global CSS file.

font variables: https://github.com/ninja/ninjakit/blob/master/src/lib/style.css#L1

color variables: https://github.com/ninja/ninjakit/blob/master/src/lib/color-scheme/default.css#L1

[0x15F9]

Great! Thank you. I went through the code and it seems that the styles get auto generated from some .json files. I thought it was the figma token's but it's not the case. Which tool are you using to get the .json files?

[uipoet]

I used Material Theme Builder to export the tokens as JSON. When ninjaKit builds, it runs extract.mjs to extract the tokens as CSS files. Looks like Material Theme Builder now exports CSS directly, so the build step is probably no longer necessary and will eventually be deprecated.