Update Badge style

[jvaclavik]

Graphic design for badges is different than our in `universal-components'. So that is the reason for this PR.

In the future, we need to have orbit design tokens updated because there are different badge background/text colours and height. I sent those issues to orbit team.

[netlify]

Deploy preview for kiwicom-universal-components ready!

Built with commit 222732a

https://deploy-preview-191--kiwicom-universal-components.netlify.com

[JosefDuda]

I don't think this is really the issue of orbit design tokens. And we can't probably expect that those values will be updated just for us ( if there isn't a plan to change it in all current products).
Maybe we can solve it by implementing themes like in Orbit https://orbit.kiwi/guidelines/theming/ or by extending defaultTokens in some other way.

[jvaclavik]

I don't think this is really the issue of orbit design tokens. And we can't probably expect that those values will be updated just for us ( if there isn't a plan to change it in all current products).
Maybe we can solve it by implementing themes like in Orbit https://orbit.kiwi/guidelines/theming/ or by extending defaultTokens in some other way.

There are definitely things which could be hardly unified, but this is not the case. Colours depends on graphic designer and it doesn't make sense to design colour palettes differently for web and mobile. I understand that height of the badge could be different on web and mobile, but it's also up to us to negotiate about the resources in design tokens.

I think for the future design tokens could be divided to 3 types:

• common (everything which could be unified - colours, borders, text, etc. )
• web (few platform specific resources)
• mobile (few platform specific resources)

[JosefDuda]

@jvaclavik Ok, as you stated on Slack. It will be definitely beneficial to have a talk with Orbit team and figure out some solution. And I can definitely imagine something similar to what you've proposed.
Maybe we should also invite someone from mobile team, to check how/if they are currently using design tokens.

Thanks!