[RFC] Components color prop

[bmdalex]

[RFC] Components color prop

Description

We need to implement color prop for some of our components (as described in #426).

There are a few issues that popped up while implementing the color prop for Text(#597):

1. Priority of props that change color:

Problem

Some components have multiple props that change colors, we need to come up with a consistent pattern on how these are applied.

e.g.:

<Text atMention="me" content="@me" />

renders a red bolded text

What should the following example render?

<Text atMention="me" color="green" content="@me" />

Proposed solution

The most specific prop takes precedence.

e.g.:

<Text atMention="me" color="green" content="@me" />

In this example, color overrides the color of the text set by atMention and would render a green bolded text:

2. How to pick a variant for text color and box/background color?

Problem

We have multiple variants for colors, as one can see here:
https://github.com/stardust-ui/react/blob/99b103da8ecc4bf1c8bcd0333e10a61a00867fa8/src/themes/default/colors.ts#L1
It's hard to understand which one we need to use for different color types, like color for text, background, borders, etc.

e.g.:

<Divider color="green" />

will choose variant 500 for the green palette. How did the theme developer get to that value?

Proposed solution

Replace numeric variants (50, 100, 500, etc) with:

• named ones based on what they are going to be applied on: text, border, background (similar to our color scheme strategy);
• named ones based on the shade of the color (light, regular, etc);
• ranges on [-x, x] interval for fewer variants that specify the shade of that color, where 0 is default/base/regular

3. What tool to use for deciding text color for components where color prop sets background?

Problem

We need to automatically change text color for box components (components where color prop goes to background color)

Proposed solution

Use color package and Color(bgColor).isDark call to determine if the text is light or dark, but it looks like this is not a preferred package to import? see:
#597 (comment)

Q: How do we choose the shades of light and dark text colors?

4. Can we come up with a generic color scheme?

#558 (comment)

Problem

We need an interface to map colors from the palette to the name of the colors.

Proposed solution

interface ColorScheme {
  text?: string
  background?: string
  border?: string
}

[bmdalex]

1. Priority of props that change color:

Go with Proposal

2. How to pick a variant for text color and box/background color?

ColorPalette is generic and can be used by more themes. Choose variant based on redlines provided by theme designer.

3. What tool to use for deciding text color for components where color prop sets background?

Skip for now as there are a lot of variables in place and we need approval from design for text color shades on different theme flavors (dark, high contrast, etc)

4. Can we come up with a generic color scheme?

Experiment with it and try see if it's a good pattern, good place to start is Button.