How do I use a CSS var as a fontWeight?

[joriswitteman]

Hi, we're looking to use CSS variables as values for Theme.fontWeights, but the typings don't allow for this. Could this be changed?

  fontWeights: {
    // See global-styles for font weight variables
    thin: 'var(--font-weight-thin-200)',
    light: 'var(--font-weight-light-300)',
    body: 'var(--font-weight-regular-400)',
    regular: 'var(--font-weight-regular-400)',
    book: 'var(--font-weight-book-450)',
    medium: 'var(--font-weight-medium-500)',
    semiBold: 'var(--font-weight-semiBold-600)',
    bold: 'var(--font-weight-bold-700)',
    extraBold: 'var(--font-weight-extraBold-800)',
    black: 'var(--font-weight-black-900)',
    extraBlack: 'var(--font-weight-extraBlack-950)',
  },

The reason we want to do this is so that both the font weight name, and the numeral weight, can be seen when inspecting elements, for QA purposes. Like so:

The type error I get is:

Type '"var(--font-weight-book-450)"' is not assignable to type 'FontWeightProperty'. ts(2322)

I think I should be allowed to set an arbitrary string here, so that I can use CSS variables.

[lachlanjc]

Issue for this, if folks are looking or want to contribute a fix: #2318