FontWeightProperty doesn't accept arbitrary strings

[hasparus]

Currently, we're just exposing the types from csstype. We should expose our own layer of types instead and allow string & {} in fontWeights.

Discussed in #2317

^{Originally posted by joriswitteman September 12, 2022}
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.

[joriswitteman]

An issue for exactly this exists at csstype also but is not planned until v3.1.0:
frenic/csstype#126