Improve the typings of the colors

[mnajdova]

Feature Request

Problem description

Currently the colors object defined in the teams theme has the following type:

export type ColorPalette = ExtendablePalette<
  EmphasisColorsStrict & ContextualColorsStrict & NaturalColorsStrict & PrimitiveColors
>

where the NaturalColorsStrict is defined in the following manner:

type NaturalColorsStrict = Partial<{
  blue: ColorVariants
  green: ColorVariants
  grey: ColorVariants
  orange: ColorVariants
  pink: ColorVariants
  purple: ColorVariants
  teal: ColorVariants
  red: ColorVariants
  yellow: ColorVariants
}>

This produces problem when the user wants to specify additional colors in the color palette (like there are currently lightGreen and darkOrange in teams theme). The problem is that, we cannot use these colors from the colors object, because the typings are not containing these colors, so we always have to import them from naturalColors.

Proposed solution

One possible solution that will allow the users to specify custom colors is to add generic for custom color types, so that the color palette can be defined in the following manner:

export type ColorPalette<T={}> = ExtendablePalette<
  EmphasisColorsStrict & ContextualColorsStrict & NaturalColorsStrict & PrimitiveColors & T
>

export type CustomThemeColors = Partial<{
  darkOrange: ColorVariants
  lightGreen: ColorVariants
}>
// then in the theme...
const colors: Color<CustomThemeColors> = {...}