Update corner radius scale and components

[mica000]

New corner radius scale:

• XS: 2px – buttons, rows, collectibles images;
• SM: 4px – menus, drop-down, inputs;
• MD: 8px – modals and drawers;
• LG: 12px – page container;

Task:

• Create new scale for corner radius
• Update components

---

FINAL PROPOSAL: OPTION 1
https://www.figma.com/file/2MLHeIeL6XPVi3Tc2DfFCr/%E2%9D%96-Leather-%E2%80%93-Design-System?type=design&node-id=9972-108739&mode=design&t=oU8qhxS

[fbwoolf]

@mica000 it appears in our tokens we have an xl = 20px and an xxl = 24px, are those ones we need to keep?

[fbwoolf]

It looks like xl is used when we display some things with tx requests (like structured data), and xxl is used just to round out a pill or badge.

EDIT: Thinking these can be removed and edge cases hardcoded separately?

[mica000]

Hi! I think Fab set the tokens to 100px so they are always rounded.
https://www.figma.com/file/2MLHeIeL6XPVi3Tc2DfFCr/%E2%9D%96-Leather-%E2%80%93-Design-System?type=design&node-id=1574-27&mode=design&t=7LgsZQErfHZlucS9-4

We do however have collectibles that have a 2px radius, so maybe this rule shouldn’t apply to them?

Let me know if I understood what you mean correctly.

[fbwoolf]

Let me know if I understood what you mean correctly.

Ha, have no idea what you are responding to here - lol. I am updating all radii (tokens). We currently use an xl and xxl, but in the description of this issue those are not included, and in Figma they both have a ?? by them. Are those supposed to be removed as radii tokens?

[mica000]

Ah got it! hehe
The xl and xxl are with ?? because we wanted to removed them since the new scale wasn’t using them (forgot to remove the ?? from the handover docs.) Instead, whenever something is rounded, fab suggested to se the radius to 100px and I think that would be manual - cc @fab to confirm.