Sizes in Sanity UI
Some UI libraries use spacing keys like
none, xs, s, m, l , xl, etc., while Sanity UI uses numeric spacing keys.For example – this is how you define the spacing/size of a button in Chakra UI:
<Button colorScheme='teal' size='sm'>
Button
</Button>While in Sanity UI you do:
<Button padding={2} tone="primary" text="Button" />These are some advantages of number-based spacing scales:
- Simpler to learn.
- Shorter keys, faster to use.
- Enables arithmetic like
padding={paddingProp - 1} - Enables negative spacing like
margin={-4}
The numbers are part of a spacing scale.
The spacing scale in Sanity UI is a sequence of 10 numbers – 0 to 9. Each number represent a spacing value:
0 = 0px1 = 4px2 = 8px3 = 12px4 = 20px5 = 32px6 = 52px7 = 84px8 = 136px9 = 220px
Using a fibonacci scale gives us an effective scale for combining different paddings and get balanced and aligned compositions.
Which means:
<Card padding={0}> // no padding
<Card padding={1}> // 4px padding
<Card padding={4}> // 20px padding
<Card padding={6}> // 52px paddingand so on.
- Material UI: https://mui.com/system/spacing/
- Theme UI: https://theme-ui.com/
- Styled System: https://styled-system.com/