[TBD] feat(Header): adding color, background, subheaderColor and subheaderBackground props

[mnajdova]

Header

Added new props in the Header component:

• color
• background
• subheaderColor
• subheaderBackground

The aim for this PR is to allow the user to fully customize the colors for the headers and subheaders. The properties will be used in the following manner:

color: string

The color for the Header.

<Header color="#464775" content="Header with color" />

background: string

The background for the Header.

<Header background="#464775" color="white" content="Header with background" />

subheaderColor: string

The color for the subheader.

<Header as="h2"
          content="Account Settings"
          subheader="Manage your account settings and set email preferences"
          subheaderColor="#464775" />

subheaderBackground: string

The background for the subheader.

<Header as="h2"
    content="Account Settings"
    subheader="Manage your account settings and set email preferences"
    subheaderColor="white"
    subheaderBackground="#464775" />

Note:

In order for consistency in the usage of the shorthand vs children API, there are color and background properties added in the Header.Subheader component as well.

[levithomason]

I want to stop the propagation of background / color to every component. This is going to explode the API with design concerns and push developers back into hard coding design implementations.

Before we do that, I'd like to make sure I understand where the requirements are coming from for the background / color props. Could you shed some more light on that?

The part I'm having difficulty with is seeing how this is going to be handled in every component when used in concert. I don't think it is reasonable to assume users will have to put a background and foreground color on every component in a tree to achieve a colored look. Is there another angle I'm missing?

[mnajdova]

If the background of the header is always inherited, then I guess the color prop would be sufficient. The thing is, we had request for handing header in the following case:

I wasn't sure if this is the inverted version of the Header, with just changing the color to white, or if in some cases we want to specify the exact color we want to use, because this is still part of the default theme, not the dark mode theme. What would be your suggestion for handling this?

[kuzhelov]

closing as there is another (simplified) PR to handle this concept: #72