Improving the color mechanism and organization

[mnajdova]

Improvement for the color mechanism

This issue will keep track of the possible improvements for the color definitions and the mechanism used for creating the color scheme.

1. The siteVariables are polluted with lots of different concepts related to colors: scheme, contextualColors, emphasisColors etc. We can create one object in the siteVariables, where all these values will be assembled. For more details, please the thread in this feat(Label): add color prop #647 (comment)
2. We need better way for generating the right foreground colors based on the background. Currently we are storing a list of light color and depending on that, the foreground colors are generated. Please see the suggestion on this thread for some proposals on this: feat(Label): add color prop #647 (comment)
3. Currently in the colorScheme we have different object default that contains the default colors. This makes the structure of the scheme strange:

const colorScheme = {
      foreground: '...',
      border: '..',
      shadow: '..',
      background: colorVariants[500],
      default: {
        foreground: colors.grey[600],
        border: colors.grey[600],
        shadow: colors.grey[600],
        background: colors.grey[100],
      },
    }

We should consider other mechanism for creating defaults and merging them with the colors used in the components then this.