[Theme] Inadeguate palette theming primitives

Disclaimer! This is a feature-request/question hybrid since I believe there are some problems on how colors are treated in v1. If maintainers think this is not the right place to discuss this I’ll aptly move it to Stack Overflow.

Problem Description

While customizing the library with a custom theme I found the way we have to specify the primary and accent shades a little bit controversial. Let me explain this a little bit more thoroughly.

Material Design guidelines define a set of “colors” (or “hues”) beautifully crafted by the Google Design team so that each “color” has a nicely defined set of shades (50, 100 to 900). Once you choose your main starting shade inside the hue, moving up and down helps in creating a visual chromatic hierarchy. Given the length of jumps required to have enough contrast inside the hue, and to give more vibrancy to the design of apps, they suggest to start at 500 and move up and down from there.

But nothing stops you from choosing a different shade as your starting point.

50	200	500	900

In fact these screenshots have been generated by the “official” Color Tool.

The actual problem

In this library when defining the theme for the application we can specify the hue for primary or accent colors, but not the specific shade we want.

To do so we need to create a custom “color” by shifting values up or down in order to move the selected shade to the 500 (and A500) position.

And most of the time this is required for the UI to have some chromatic sense. If you look at the documentation itself you can find an occurrence of a wrongly defined color right in the «Themes» section.

In fact this approach makes it difficult for components to extract the right colors.

Actual	Expected
«Accent» is too light	«Accent» is readable

Proposal

It’s a little but late to change this part of the library but I believe something should be done about it; be it an utility to create new colors automatically based on a shade (shiftColor(greeen, 900)) or a different approach.

[oliviertassinari]

Alright, let’s fix this issue. It’s going to be a breaking change. But I think that it’s important to simplify the situation. I have been giving a look at how Bootstrap and material-components-web palette work. We can try to copy what works best for them. Here is my proposal:

The new API

import { createMuiTheme } from 'material-ui/styles';
import indigo from 'material-ui/colors/indigo';
import pink from 'material-ui/colors/pink';
import red from 'material-ui/colors/red';
import { darken, lighten } from 'material-ui/styles/colorManipulator';

const themeDefault = createMuiTheme()

// All the following keys are optional.
// We try our best to provide a great default value.
// The following values illustrate the default logic when our users don't provide anything.
const theme = createMuiTheme({
  palette: {
    contrastThreshold: 3.1,
    tonalOffset: 0.07,
    primary: {
      // Looking at material-components-web,
      // lighten() and darken() might not be enough:
      // https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L83
      light: lighten(indigo[500], 0.07),
      main: indigo[500],
      dark: darken(indigo[500], 0.07),
      contrastText: themeDefault.palette.getContrastText(indigo[500]),
    },
    secondary: {
      light: lighten(pink.A400, 0.07),
      main: pink.A400,
      dark: darken(pink.A400, 0.07)
      contrastText: themeDefault.palette.getContrastText(pink.A400),
    },
    error: red.A400,
  },
});

The upgrade path

const theme = createMuiTheme({
  palette: {
-   primary: indigo,
+   primary: {
+     light: indigo[200],
+     main: indigo[500],
+     dark: indigo[700],
    },
-   secondary: pink,
+   secondary: {
+     light: pink.A200,
+     main: pink.A400,
+     dark: pink.A700,
    },
-   error: red,
+   error: red.A400,
  },
});

Problems solved

• People can use https://material.io/color/ out of the box.

• But nothing stops you from choosing a different shade as your starting point. of @yuchi

• If you want to quickly get going and immediately have a theme corresponding to your brand it is currently pretty hard of @Floriferous

• Button text color does not respect the themes contrastDefaultColor #8183 of @dangerousdan

[vuhrmeister]

I also stumbled upon this issue. I used mdl long time ago, lastly I tried material-component-web. Now I wanted to achieve the same result, but the need to define a whole palette just confused me a lot. The result is not what I expected, neither what the official color tool generates.

So I really hope this will change. I was just convinced to use material-ui until I came across this issue.