Design refactoring: Padding, Spacing, Radius

[shenkys]

As of now, we've got some mismatch between code & design.

So far discovered

Radius Small = 12px in design, 8px in code Radius Large = 20px in design, 24px in code

Radius used on (almost) all cards: Design = radius-lg (20px) Code = radius-md (16px)

There's definitely more to it so....

....we should dedicate a day or two with dev to:

Check for mismatching values in already existing tokens

• Check for any possible breaking points (e.g. radius value used for different padding or some other )

Check for mismatching usage of these tokens (e.g. the cards) & and align on it long term

• Card radii & padding
• Bottomsheet radii & padding
• etc.

This will help us with:

• Design handoff (won't need to anotate everything as we'll have a reliable source of truth)
• Programming (won't have to use hard-coded values)
• Visual language (we'll do one more step for unification & any future changes can be done from 1 place)

[vytick]

I agree, that unification of design tokens and values used in the code would be beneficial in order to speak the same language. Not only in case of radius, but also other properties (spacings, paddings, ...)

Also the design and app current state is not in real sync now partially because of this.