[RFC] Components color prop #625
Description
[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?
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
}