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.
Currently, sizes of components are bit inconsistent. I think it would be better to unify the size property name and its value.
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, andlg. 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 either24pxor20px. So they might only have sizing3xsand2xs. 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.