TylerAPfledderer / chakra-ui-typescale

⚖️ A ChakraUI theme extension for generating type scale.
https://www.npmjs.com/package/@tylerapfledderer/chakra-ui-typescale
MIT License
15 stars 3 forks source link

Consider adding spacing theme values for vertical rhythm #13

Closed TylerAPfledderer closed 2 years ago

TylerAPfledderer commented 2 years ago

Because vertical rhythm is typically a part of type scaling, consider extending the space theme object to include a scale of values to match the line-height used in the extension. This ensures that spacing between different sizes of text stays in the baseline (this is for consistency and not a strict rule, due to other non-copy content being of varying sizes not within the scale)

Maybe a sub object like container in the default theme sizes object that specifies these values are meant for vertical spacing only.

I prefer token names being number in multiples of 0.5 and the values based on the lineHeight prop set in rem, and also based in multiples of 0.5.

Example to be generated:

const space = {
  vertical: {
    0.5: '0.750rem',
    1: '1.500rem',
    1.5: '2.250rem',
    2: '3.000rem',
    2.5: '3.750rem',
    3: '4.500rem',
    3.5: '5.250rem',
    4: '6.000rem',
    4.5: '6.750rem',
    5.5: '8.250rem',
    5: '7.500rem',
    6: '9.000rem',
    6.5: '9.750rem'
  }
}

I have a new portfolio site project where I already built a function that could be added.