Getting TypeScript error trying to merge `makeTheme(Object.assign({}, baseTheme, _lightTheme))`

[midrizi]

Hi @nandorojo, I'm getting an error when merging two theme object into one, since I don't want to have a duplicate code.

I have a baseTheme object that has spacing, custom fonts - basically styles that are shared between light and dark mode

const baseTheme = {
  space: {
    $0: 0,
    $1: 4,
    $2: 8,
    $3: 16,
    $4: 32,
    $5: 64,
    $6: 128,
    $7: 256,
  },
  ...
}

const _lightTheme = {
  colors: {
    $primary: '#0b0'
    ...
  }
  ...
}

const lighTheme = Object.assign({}, baseTheme, _lightTheme)

Getting the following error:

Types of property 'fontWeights' are incompatible.
    Type '{ light: string; normal: string; regular: string; medium: string; bold: string; semiBold: string; extraBold: string; black: string; }' is not assignable to type '{ [x: string]: NarrowRaw<FontWeight>; }'.
      Property 'light' is incompatible with index signature.
        Type 'string' is not assignable to type 'NarrowRaw<FontWeight>'.ts(2345)

Is there a way to get around this issue?

[midrizi]

This is so weird.

By adding as const the error goes away

fontWeights: {
  light: '300' as const,
  normal: 'normal' as const,
  regular: '400' as const,
  medium: '500' as const,
  bold: '700' as const,
  semiBold: 'bold' as const,
  extraBold: '800' as const,
  black: '900' as const,
}

Same with textTransform: 'uppercase' as const otherwise won't work

[nandorojo]

yeah it's because font weights require strict values rather than any string.

you can also do as const after the object itself