search

ninja / ninjakit

Material Design for React
https://ninjakit.dev
Apache License 2.0
3 stars 4 forks source link

Customizing Colors and Fonts #436

Open 0x15F9 opened 2 years ago

0x15F9 commented 2 years ago

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

uipoet commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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.