Create siteVariables palette interface with color names

Feature Request

Problem description

Each component should have the ability to change its color through the color prop. The color value should be available as part of a predefined palette.

Proposed solution

Create siteVariables palette interface with color names.

Should we use the SUI palette there?

https://semantic-ui.com/usage/theming.html#sitewide-defaults

[
  'primary',  'secondary',

  'red', 'orange', 'yellow', 'olive', 'green', 'teal', 'blue', 'violet', 'purple', 'pink', 'brown', 'grey', 'black'
]

Should we also add a white color?

🌟 Criteria

We should define our criteria for a good color palette so we know what we're aiming for. An artists palette is quite different from the Material Color System, for example. This is because their goals are completely different.

We might have some goals like this for starters:

Engineering Friendly - Allow programmatic generation / adaptation of color lightness
Learn Once - Provide a naming scheme that is predictable and scales across all colors and purposes
Design Focused - Similar to the needs of an artist, the palette should lend itself to useful design work over scientific correctness

Resources

Let's consider more information before suggesting a palette.

Natural Language Colors

There is a lot of mind blowing research on the development of color names in natural language around the globe. Take 6min to watch "The surprising pattern behind color names around the world
".

The short of it is that cultures develop words for specific areas of the spectrum in a predictable order, regardless of their language. We first identify black, white, and red. Then as the language develops, yellow and green, etc. Example, English has 11 main color words but Russian has 12:

This eventually produced the World Color Survey to determine how humans classify colors. I think the test of 2,600 languages, 110 countries, and several thousands of generations is a strong basis to start with. Humans have take a very long time to come up with the words that are most helpful in communicating color, we should pay very close attention to the color ranges of these words across the worlds most influential languages.

Design & Engineering

Though design guides and frameworks have hardly existed at all compared to natural language, we can at least look at the most useful and influential design guides and frameworks to see what they have done. Try https://styleguides.io as a starting point for finding guides and frameworks.

We should also compile a list of guides and frameworks that we deem reputable and useful references for these kinds of decisions.

Color wheel

Artists have also been trying to figure out the most useful palette of colors for as long as humans have been creating imagery. We should take a look at these sources as well: https://en.wikipedia.org/wiki/Color_wheel

It is worth noting that there are also several versions of the color wheel based on different methodologies such as artistic, pigment color, spectral color, etc.

Conclusion

Someone should touch up the criteria proposed, catch up on these resources, do some basic comparative analysis, and propose a potentially most ideal color palette.

Common UI frameworks

Bootstrap, colors

Includes primary and secondary as theme colors
Has 10 basic colors and 8 theme colors (aliases to main colors)
Uses natural language colors and aliases for states

Palette

Color	Value
`Blue`	`#007bff`
`Cyan`	`#17a2b8`
`Green`	`#28a745`
`Indigo`	`#6610f2`
`Orange`	`#fd7e14`
`Pink`	`#e83e8c`
`Purple`	`#6f42c1`
`Teal`	`#20c997`
`Red`	`#dc3545`
`Yellow`	`#ffc107`

Color	Value	Alias
`Primary`	`#007bff`	`$blue`
`Secondary`	`#6c757d`	`$gray-600`
`Success`	`#28a745`	`$green`
`Info`	`#17a2b8`	`$info`
`Warning`	`#ffc107`	`$warning`
`Danger`	`#dc3545`	`$danger`
`Light`	`#f8f9fa`	`$light`
`Dark`	`#343a40`	`$dark`

Bulma, colors

Includes primary
Has 10 basic colors
Use state language colors

Palette

Color	Value
`Black`	`hsl(0, 0%, 4%)`
`Dark`	`hsl(0, 0%, 21%)`
`Danger`	`hsl(348, 100%, 61%)`
`Light`	`hsl(0, 0%, 96%)`
`Link`	`hsl(217, 71%, 53%)`
`Info`	`hsl(204, 86%, 53%)`
`Primary`	`hsl(171, 100%, 41%)`
`Success`	`hsl(141, 71%, 48%)`
`Warning`	`hsl(48, 100%, 67%)`
`White`	`hsl(0, 0%, 100%)`

Foundation, colors

Includes primary and secondary
Use state language colors

Palette

Color	Value
`Alert`	`#cc4b37`
`Black`	`#0a0a0a`
`Dark Gray`	`#8a8a8a`
`Light Gray`	`#e6e6e6`
`Medium Gray`	`#cacaca`
`Primary`	`#1779ba`
`Secondary`	`#767676`
`Success`	`#3adb76`
`Warning`	`#ffae00`
`White`	`#fefefe`

Semantic UI, colors

Includes primary and secondary
Has 13 basic colors
Uses natural language colors, uses aliases for states

Palette

Color	Value
`Black`	`#000000`
`Blue`	`#0E6EB8`
`Brown`	`#A52A2A`
`Green`	`#016936`
`Grey`	`#A0A0A0`
`Olive`	`#32CD32`
`Orange`	`#FE9A76`
`Pink`	`#FF1493`
`Purple`	`#B413EC`
`Red`	`#B03060`
`Teal`	`#008080`
`Violet`	`#EE82EE`
`Yellow`	`#FFD700`

Color	Value	Alias
`Primary`	`#0E6EB8`	`$blue`
`Secondary`	`#000000`	`$black`

Tailwind CSS, colors

Has 10 basic colors
Provides literal variants of each color (light, dark, darker)
Uses natural language colors

Palette

Color	Value
`Blue`	`#3490DC`
`Grey`	`#B8C2CC`
`Green`	`#38C172`
`Indigo`	`#6574CD`
`Orange`	`#F6993F`
`Pink`	`#F66D9B`
`Purple`	`#9561E2`
`Red`	`#E3342F`
`Teal`	`#4DC0B5`
`Yellow`	`#FFED4A`

Turret CSS, colors

Has 12 basic colors
Includes primary and secondary
Provides numeral variants of each color (100, 200, 300)
Use state language colors

Palette

Color	Value
`Black`	`#000000`
`Dark`	`#323236`
`Error`	`#D91E18`
`Grey`	`#616166`
`Info`	`#1E90FF`
`Light`	`#D3D3D9`
`Primary`	`#3455DB`
`Secondary`	`rebeccapurple`
`Success`	`#00AA00`
`Tertiary`	`#8B008B`
`Warning`	`#FF4500`
`White`	`#FFFFFF`

Others

Blueprint: https://blueprintjs.com/docs/#core/colors
MaterializeCSS: https://materializecss.com/color.html
Kube: https://imperavi.com/kube/docs/modules/color/

Corporate UI frameworks

Atlassian design, colors

Includes primary and secondary as theme colors
Provides numeral variants of each color (50, 100, 200)
Uses 6 natural and 3 state language colors
Has 10 basic colors

Palette

Color	Value
`Blue`	`#0747A6`
`Green`	`#006644`
`Purple`	`#403294`
`Red`	`#BF2600`
`Teal`	`#008DA6`
`Yellow`	`#FF8B00`

Carbon by IBM, colors

Uses own color names

Palette

Color	Value
`brand-01`	`#3d70b2`
`brand-02`	`#5596e6`
`brand-03`	`#41d6c3`
`ui-01`	`#ffffff`
`ui-02`	`#f4f7fb`
`ui-03`	`#dfe3e6`
`ui-04`	`#8897a2`
`ui-05`	`#5a6872`
`text-01`	`#152935`
`text-02`	`#5a6872`
`text-03`	`#cdd1d4`
`inverse-01`	`#ffffff`
`inverse-02`	`#272d33`
`field-01`	`#f4f7fb`
`field-02`	`#ffffff`
`hover-primary`	`#30588c`
`hover-primary-text`	`#294c86`
`hover-danger`	`#bd1427`
`hover-secondary`	`#3d70b2`
`hover-row`	`rgba(85,150,230,.1)`
`support-01`	`#e0182d`
`support-02`	`#5aa700`
`support-03`	`#efc100`
`support-04`	`#5aaafa`

Lightning Design System by Salesforce, colors

Uses state colors with gray variants

Palette

Color	Value
`Gray 1`	`#fff`
`Gray 2`	`#fafaf9`
`Gray 3`	`#f3f2f2`
`Gray 4`	`#ecebea`
`Gray 5`	`#dddbda`
`Gray 6`	`#c9c7c5`
`Gray 7`	`#b0adab`
`Gray 8`	`#969492`
`Gray 9`	`#706e6b`
`Gray 10`	`#514f4d`
`Gray 11`	`#3e3e3c`
`Gray 12`	`#2b2826`

Color	Value
`Accessible`	`#0070d2`
`Accessible - Active`	`#005fb2`
`Contrast`	`#1a1b1e`
`Contrast - Active`	`#0d0e12`
`Dark`	`#182337`
`Dark - Active`	`#253045`
`Light`	`#f4f6fe`
`Light - Active`	`#e3e5ed`
`Primary`	`#1589ee`
`Primary - Active`	`#007add`

Fabric, colors

Has 16 bases in shared colors
Provides numeral variants of each color (10, 20)
Uses natural language for shared colors

Palette

Color	Value
`PinkRed`	`#750b1c`
`Red`	`#d13438`
`RedOrange`	`#da3b01`
`Orange`	`#ffaa44`
`Yellow`	`#fce100`
`OrangeYellow`	`#c19c00`
`YellowGreen`	`#8cbd18`
`Green`	`#498205`
`GreenCyan`	`#00ad56`
`Cyan`	`#00b7c3`
`CyanBlue`	`#0078d4`
`Blue`	`#4f6bed`
`BlueMagenta`	`#8378de`
`Magenta`	`#c239b3`
`MagentaPink`	`#e3008c`
`Gray`	`#a0aeb2`

Primer by Github, colors

Has 9 basic colors
Provides numeral variants of each color (100, 200, 300)
Uses natural language colors

Palette

Color	Value
`Black`	`#1b1f23`
`Blue`	`#0366d6`
`Gray`	`#6a737d`
`Green`	`#28a745`
`Orange`	`#f66a0a`
`Purple`	`#6f42c1`
`Red`	`#d73a49`
`White`	`#fff`
`Yellow`	`#ffd33d`

Proton by Fifefox, colors

Has 11 basic colors
Provides numeral variants of each color (50, 60, 70)
Uses natural language colors

Palette

Color	Value
`Blue`	`#0a84ff`
`Green`	`#30e60b`
`Grey`	`#737373`
`Ink`	`#363959`
`Magenta`	`#ff1ad9`
`Orange`	`#ff9400`
`Purple`	`#9400ff`
`Red`	`#ff0039`
`Teal`	`#00feff`
`White`	`#ffffff`
`Yellow`	`#ffe900`

Others

Alfabank: https://design.alfabank.ru/style/colors
Aurora design system by Canada gov: https://design.gccollab.ca/component/colour
Bristol city: http://style.bristol.gov.uk/patterns/colours/
Clarity by VMWare: https://vmware.github.io/clarity/documentation/v0.13/color
Evergreen: https://evergreen.segment.com/components/colors/
Co‑op: https://coop-design-system.herokuapp.com/components/detail/palette.html
Polaris by Shopify: https://polaris.shopify.com/design/colors#section-color-palette
Purple 3: https://design.herokai.com/purple3/docs/#skins
The Times: https://www.thetimes.co.uk/styleguide/colours
Ubuntu Design: https://design.ubuntu.com/brand/colour-palette/
Uniform: http://uniform.hudl.com/guidelines/colors/design/
uStyle: https://ustyle.guide/brand/colours.html
U.S. Web Design System: https://designsystem.digital.gov/components/colors/
WordPress: https://make.wordpress.org/design/handbook/design-guide/foundations/colors/

I've analyzed a little ton of stuff, let's summarize it. I will take numbers from
community frameworks because the most of corporate frameworks doesn't work with natural color names.

Natural vs state

Type	Points	Frameworks
State	3	Bulma, Foundation, Turret CSS
Natural	3	Bootstrap, Semantic UI, Tailwind CSS
---	---
Aliases for state	2	Bootstrap, Semantic UI

Usage of natural color names in palettes

Color	Points	Framework
Black	3	Bulma, Foundation, Semantic UI, Turret CSS
Blue	3	Bootstrap, Semantic UI, Tailwind CSS
Brown	1	Semantic UI
Cyan	1	Bootstrap
Green	3	Semantic UI, Bootstrap, Tailwind CSS
Grey	2	Semantic UI, Tailwind CSS
Olive	1	Semantic UI
Indigo	2	Bootstrap, Tailwind CSS
Orange	3	Bootstrap, Semantic UI, Tailwind CSS
Pink	3	Bootstrap, Semantic UI, Tailwind CSS
Purple	3	Bootstrap, Semantic UI, Tailwind CSS
Teal	3	Bootstrap, Semantic UI, Tailwind CSS
Red	3	Bootstrap, Semantic UI, Tailwind CSS
Violet	1	Semantic UI
White	2	Bulma, Foundation, Turret CSS
Yellow	3	Bootstrap, Semantic UI, Tailwind CSS

`primary` & `secondary`

Color	Points	Frameworks
Primary	5	Bootstrap, Bulma, Foundation, Semantic UI, Turret CSS
Secondary	4	Bootstrap, Foundation, Semantic UI, Turret CSS

`grey` vs `gray`

Color	Points	Framework
Grey	4	Bulma, Semantic UI, Tailwind CSS, Turret CSS
Gray	2	Bootstrap, Foundation

Summary

We should have the predefined palette of colors.
The palette should be easily extendable.

Proposed palette

I've picked colors from summary table that have >= 2 points.

Name	Color
Black	`#252423` (taken from Teams theme)
Blue	?
Green	`#92C353` (taken from Teams theme)
Grey	?
Orange	`#CC4A31` (taken from Teams theme)
Pink	?
Purple	?
Teal	?
Red	`#C4314B` (taken from Teams theme)
White	`#FFFFFF` (taken from Teams theme)
Yellow	`#F8D22A` (taken from Teams theme)

More colors

Some frameworks provide more colors in their palette, there are common patterns:

lightest, light, base, dark: https://evergreen.segment.com/components/colors/
darkest, dark, light, lightest: https://designsystem.digital.gov/components/colors/
points (10, 20, 30, etc): https://design.firefox.com/photon/visuals/color.html
points (100, 200, 300, 400, etc):
- https://styleguide.github.com/primer/support/color-system/
- https://turretcss.com/docs/globals/#colors

However, I'm not sure that these colors should be a part of the default theme.

Others

Accessibility in Proton Design System: https://design.firefox.com/photon/visuals/color.html#accessibility
https://www.w3.org/TR/WCAG20/

I've tried to dogfood some ideas in #451. You can pull the branch and try it:

Preview

Base/Core/`YOUR_NAME` colors

White and black colors can't have a palette, what will be darker than #000000? Or lighter than #ffffff? It will be confusing. However, it's reasonable to allow define black and white colors, even Teams use #252423 as black.

Proton also separate white color. But, I should note that Primer has fades for white and black colors. I'm not sure that it's the best idea.

type BaseColors = {
  black: string
  white: string
}

Natural colors

The idea above changes the core palette a little. In #451 I used colors from Proton. This gives us 9 colors which are presented by the NaturalPalettes type.

Color	Value
Blue	`#0060df`
Green	`#12bc00`
Grey	`#4a4a4f`
Orange	`#d76e00`
Pink	`#ed00b5`
Purple	`#8000d7`
Teal	`#00c8d7`
Red	`#d70022`
Yellow	`#d7b600`

Each color is presented by its palette, each palette contains 7 gradients of colors: lightest, lighter, light, base, dark, darker, darkest. All of these is defined in the ColorPalette type.

(!) I've decided to go with semantic names, just compare colors.red.100 vs colors.red.lightest. However, this doesn't fit needs of Teams which has 8 colors in brand.

A palette for a color can be filled manually of by util:

const naturalPalettes: NaturalPalettes = {
  blue: createPalette(__BASE_COLOR__),
  green: {
    lightest: _VALUE_,
    lighter: _VALUE_,
  }

State colors

We decided to go with primary (i.e. brand) and secondary colors, however I think that this palette should be increased with info, positive/success, negative/error, warning. The easiest case where these colors can be needed is Message or Form component. These colors are also defined in Bulma and Bootstrap for example.

I also think that we need a separate palette for text like this done in Alfabank Styleguide, it's not correct to use grey color for text. For example, a disabled or timestamp variations for text.

State colors can be just aliases for natural colors:

  info: naturalPalettes.blue,
  positive: naturalPalettes.green,
  negative: naturalPalettes.red,
  warning: naturalPalettes.yellow,

The final decisions that will go to RFC.

Naming

1. `PrimitiveColors`

Includes only white and black that are will be represented by the string type.

2. `NaturalColors`

Will include 9 colors (blue, green, grey, orange, pink, purple, teal, red, yellow) as we decided before, each color should implement the ColorVariants type.

3. `ContextualColors`

We decided to go with ContextualColors instead of StateColors because it's more intuitive. This type will include: primary, secondary, text, danger, info, success, warning.

`ColorPalette`

All color types are unioned to the ColorPalette which will be exported. Names of types can be changed if we will find out a better name.

Utils

`createPalette()`

This util will create a color from a passed base color.

`unsupportedColorVariants()`, `unsupportedColor()`

These utils will throw a warning if you will try to access to a color or a variant that it is not supported by your theme.

Variants

We decided to go with numeric values instead of semantic, the main advantage this gives us more colors (10 vs 7) that will fit all out needs. The second reason - this pattern is widely used (Material, Proton, etc.)

Teams

We had a color palette that matches the described design. So, it's not a problem.

Complaisance

(!) We decided that every theme should implement our palette interfaces. For simplication we have utils that allow to block usage of colors or simply generate them.

Types and utils will be placed in the default theme.

We will get an initial implementation on this week.

Oleksandr Fediashov (@layershifter)

Have thoroughly reviewed the discussion, have several questions that would like to clarify:

Material UI approach is not included in stats

For some reason Material UI Color System is not covered in the stats - at the same time, they provide one of the most comprehensive reviews on this topic. Frankly, was surprised a bit with that.

'On' colors (for text, icons, other content..)

Here, in the RFC, a topic of 'on' colors is not covered - i.e. content colors (of text, icons, etc) that will be displayed on primary or secondary background. Note that this aspect is a basic one for most theming approaches, as it is a key factor for accessible data presentation (consider a case where, for example, one would need to provide different text color which is dependent on whether lightest or darkest tint of primary color is used - as it is not possible to just use single, say, black color for both cases). What are the actions planned to address that?

Note that this is quite important topic from accessibility perspective, as this question is one of the key that defines whether app's content will be accessible or not, according to WCAG accessibility rating of level (https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html).

`Contextual` colors - are those planned to be extensible by the client?

Cannot infer from the proposal if the set of Contextual colors may be extended by client, in order to address needs that might be specific to client's domain (like calling-alert, etc). Actually, if we are looking towards extensible theming mechanism, I would see this question being addressed (or would expect to see a plan of how we are going to address it).

What is proposed workflow for the client to generate color palette?

It is not absolutely clear from RFC what is the workflow client need to follow to create theme's palette. For example, the approach is clear for Bootstrap and Material:

provide primary color to us (optionally a secondary one), and palette will be generated - from the set of colors that are defined by framework. So, just one or two colors as an input.
- is the same logic planned behind createPalette? If yes
  - what is the number of output colors planned? (would it be a reasonably minimal number)?
  - is it possible to provide secondary color there - and, if not, how it is possible to introduce notion of secondary color to generated palette?
ok, this is the generated palette (with a minimal necessary amount of colors), let us know if more tint variations to each base color should be generated.
now you have al the base colors (natural ones) - please, bind them to contextual ones that are planned in your app. Here, once again, I would expect that we would have some mechanism to make this set of contextual colors being extensible
need to fine-tune colors of the generated-so-far palette - please, do it, and be assured that those colors you will pick will still be WCAG-conformant, because if there would be any potential problem of low contrast for any variation of background and text color, we will let you know.

Oleksandr Fediashov (@layershifter), the last point (related to user's workflow) to my mind is a crucial one, especially if we would state that color palette is a mandatory attribute of any theme. Could you, please, suggest what is our vision here?

Material UI approach is not included in stats

I agree, it's strange that I missed it. However, if you will check #451, the result is quite similar to Material UI 😄
https://material.io/design/color/the-color-system.html#tools-for-picking-colors

'On' colors (for text, icons, other content..)
What are the actions planned to address that?

Accessibility is a very important thing, but it is not covered by this RFC. We cannot cover all aspects in single run.

We discussed in offline that one of next steps will be implementation of color pairing tool that will allow to combine colors from palette and will cover accessibility aspects. We don't have an issue for that, yet.

Something like this browser's tool:

https://design.firefox.com/photon/visuals/color.html#accessibility

Contextual colors - are those planned to be extensible by the client?

The AdditionalColors type covers this. These colors aren't included to siteVariables.colors (i.e. ColorPallette), but can be accessed as siteVariables.additionalColors.

What is proposed workflow for the client to generate color palette?

PR contains two palettes:
https://github.com/stardust-ui/react/pull/451/files#diff-c29ebf6447647ff3c88ba3381b1afbcb
https://github.com/stardust-ui/react/pull/451/files#diff-a5676258cb98e8e7e5310b952649c6dc

You can reference them as example. For now, I don't have more there. For next iteration our themes should use our color palette.

These aspects should covered as part of theming guide I think.

P.S. I renamed createPalette to createColorVariants because the name was confusing.

Create siteVariables palette interface with color names #423

Description

Feature Request

Problem description

Proposed solution

Activity

layershifter commented on Nov 6, 2018

levithomason commented on Nov 6, 2018

🌟 Criteria

Resources

Natural Language Colors

Design & Engineering

Color wheel

Conclusion

layershifter commented on Nov 7, 2018

Common UI frameworks

Bootstrap, colors

Bulma, colors

Foundation, colors

Semantic UI, colors

Tailwind CSS, colors

Turret CSS, colors

Others

layershifter commented on Nov 7, 2018

Corporate UI frameworks

Atlassian design, colors

Carbon by IBM, colors

Lightning Design System by Salesforce, colors

Fabric, colors

Primer by Github, colors

Proton by Fifefox, colors

Others

layershifter commented on Nov 7, 2018

Natural vs state

Usage of natural color names in palettes

primary & secondary

grey vs gray

layershifter commented on Nov 7, 2018

Summary

Proposed palette

More colors

Others

layershifter commented on Nov 8, 2018

Base/Core/YOUR_NAME colors

Natural colors

State colors

layershifter commented on Nov 19, 2018

Naming

1. PrimitiveColors

2. NaturalColors

3. ContextualColors

ColorPalette

Utils

createPalette()

unsupportedColorVariants(), unsupportedColor()

Variants

Teams

Complaisance

kuzhelov commented on Dec 3, 2018

Material UI approach is not included in stats

'On' colors (for text, icons, other content..)

Contextual colors - are those planned to be extensible by the client?

What is proposed workflow for the client to generate color palette?

layershifter commented on Dec 3, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

`primary` & `secondary`

`grey` vs `gray`

Base/Core/`YOUR_NAME` colors

1. `PrimitiveColors`

2. `NaturalColors`

3. `ContextualColors`

`ColorPalette`

`createPalette()`

`unsupportedColorVariants()`, `unsupportedColor()`

`Contextual` colors - are those planned to be extensible by the client?