Design refactoring: Padding, Spacing, Radius

shenkys commented 7 months ago

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 commented 7 months ago

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.

yanascz commented 1 month ago

QA, would be great to check that nothing is fundamentally broken.

STew790 commented 3 weeks ago

QA OK Haven't found anything broken but will definitely monitor this before release.

Info 24.11.1 https://github.com/trezor/trezor-suite/commit/ff16b788c576e89bbbfc17cbe783154223440336

trezor / trezor-suite

Design refactoring: Padding, Spacing, Radius #11921