Unify sizing system

[kiaking]

Currently, sizes of components are bit inconsistent. I think it would be better to unify the size property name and its value.

3xs = 20px
2xs = 24px
xs  = 28px
sm  = 32px
md  = 40px
lg  = 48px
xl  = 64px
2xl = 96px
3xl = 128px

These sized are mostly used for components that are "clickable", like buttons or form inputs. And because these component often get placed side by side, having same sizing system would make sense (e.g. placing a submit button at right side of a text input).

Not all component have to support all sizing. For example, input may only have sm, md, and lg. But when they do, the height px should be aligned with the name.

Tiny components might become a bit off, like <SPill> and <SState>. These components are usually displayed in either 24px or 20px. So they might only have sizing 3xs and 2xs. However, I still it is better that the pixel size is unified rather than <SPill size="md"> having 24px.

When these sizing are used for large components it will have different pixel size e.g. <SCard>. Sizes for these components means the "width", where sizes for a button is talking about the "height".

When sizing are used for width, it should follow these rules. Mostly corresponding with media query break points.

3xs = 320px  viewport 320 (small phone)
2xs = 375px  viewport 375 (normal phone)
xs  = 512px  viewport 512 (some strange phone)
sm  = 640px  viewport 640 (I don't know)
md  = 768px  viewport 768 (tablet)
lg  = 960px  viewport 1024 (32px padding)
xl  = 1216px viewport 1280 (32px padding)
2xl = 1472px viewport 1536 (32px padding)
3xl = 1856px viewport 1920 (32px padding)