Best practices to add custom global variant

[gamegee]

I'm implementing my own components library on top of chakra-ui.

My theme now contains specific values for fontSize and lineHeight, each fontSize has a related lineHeight.
It helps to provide vertical rhythm.

import { theme as chakraTheme } from '@chakra-ui/core'

export const theme = {
  ...chakraTheme,
  lineHeights: {
    1: '1.45454545455',
    2: '1.4',
    3: '1.71429',
    4: '1.5',
    5: '1.6',
    6: '1.5',
    7: '1.6',
    8: '1.5',
    9: '1.5',
  },
  fontSizes: {
    1: '11px',
    2: '12px',
    3: '14px',
    4: '16px',
    5: '20px',
    6: '24px',
    7: '28px',
    8: '32px',
    9: '48px',
  },
}

What would be the best way to ensure each component always use fontSize and lineHeight with the same value ?

Currently I have to do that:

<Text fontSize={1} lineHeight={1} />
<Button fontSize={1} lineHeight={1} />
...

Can I have custom variants ?

<Text variant="textsize-1" />
<Button variant="textsize-1" />
...

Or other idea ? :)

[chasinhues]

AFAIK, variants are per-component (meaning you would have to create a variant for every component that you wanted to use it on).

It sounds like what you're looking for is text styles.
E.g.

! Untested

// theme
const theme = extendTheme({
  textStyles: {
    xs: {
      fontSize: 1,
      lineHeight: 1
    }
  },
})

// usage
<Text textStyle="xs" />