Themes need a lot more customisation

Issue type

I’m submitting a … (check one with “x”)

• bug report
• feature request

Issue description

From what I read of the docs, it is not possible to uniformly style things beyond some basic colour settings. I understand that Kitten is a “design system” and not just a collection of themed components, and I think it looks + works great (and I love these components), but I am really lacking some functionality in the styling department.

Why can’t themes include additional parameters like font families? react-native-elements does a nice job of this with their UI kit. Right now if I want to do that, I’m stuck with forking your repo!

I think the individual params have been discussed before in open/closed issues but I just want to ask in general the methodology behind only making colours editable.

And yes, I’m aware that you can style components individually, but to be honest it’s not great for me. That means that I have to create my own component called Button and wrap it around your button so I can apply just a few style changes to it.

[artyorsh]

@592da just realized this will require changes in component implementation, so please use textStyle props currently. We’re sorry about disinformation and going to fix this in a future releases

[mtimofiiv]

Hi @artyorsh, thanks for your quick answer! 😘

Font Families: We don’t currently explicitly set it, because the final app bundle will crash if it doesn’t contain fonts linked in ios and android projects. We still looking for a good solution to do this. You can see how we solve this in Kitten Tricks, but I hope we can find a better approach in future

Thanks for the tip, I might do this in the short term!

In terms of ways to do it, I get that it’s not easy to deal with a crashing app. But then again, perhaps there’s no need for a solution here since if the developer defines a family that is not included, then they should have a crashing app, and in development mode, I think React Native will throw up one of those beautiful red red dialog boxes saying the font is not available.

Other global properties: Eva also can export global configuration properties like roundness to set a global borderRadius, like it is implemented in react-native-paper. But you’re right about we’re the part of the design system, and we also have another framework working with Eva, so these changes should be discussed between teams, and could take a lot of time to implement fully synchronized stylings 😃

I get that!

Btw, can you please explain with a bit more details what other styling functionality you’re missing or unable to use?

For me font family is important at this stage, and I can’t think of anything else that colours and roundness has not covered. I would imagine pretty much everything else is more something you do on an individual component basis.

I guess how I envision a theme provider is like a base stylesheet, incorporating what on the web would be the body {} CSS rule and maybe some of the base styles for tag-level things (ie. button {}).

You can also create a discussion issue in Eva Design System repo.

I can do that!