Color. Inconsistency with the official tool

[o-alexandrov]

Thank you for the awesome library.
Let me describe the issue:

• the color tool generates different result than the official tool that you also mention in the docs.

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

When user passes an override with only main color, the material-ui should set the light and dark not based on its own color tool, but using the official tool.

Motivation 🔦

Currently, having two I'd say main color tools (material-ui's and the official one) producing different results lead to a misunderstanding.

[mbrookes]

@o-alexandrov Material-UI uses the 2014 color palettes: https://material.io/design/color/the-color-system.html#tools-for-picking-colors

The "official" tool also uses these palettes, but the light and dark shades are calculated from the selected color rather than using palette colors directly. Material-UI uses shades from the palette, which is in line with "Distinguish UI elements" in the above docs page.

[o-alexandrov]

@mbrookes thank you for your reply, the depth of your knowledge on this topic is truly amazing.

Please share your opinion whether the material-ui and official tools should produce the same light and dark shades.

• personally, before knowing there's a difference, it'd have been hard for me to guess there's such case

[mbrookes]

I think the question is perhaps better phrased as "should the 'official' tool follow the guidelines." to which I'd say yes.

[o-alexandrov]

@mbrookes would you agree, there is a vast number of users, who add colors not based on the material palette?

Doesn’t it make more sense to define light and dark shades based on the selected main color?

I might be wrong on the following statement and I will find appropriate people from the Material Design team to ping here:

• I think with a high degree of confidence the official tool doesn’t break any of the Design Guidelines when provides with the light and dark shades based on the selected color

[o-alexandrov]

@material-components, hello, could you please step in and share your thoughts on this inconsistency and your suggestions to resolve it?

I apologize, I don’t know your most appropriate team member to ask, so I’m pinging entire team.

[mbrookes]

would you agree, there is a vast number of users, who add colors not based on the material palette?

No doubt, and the more recent spec (what we loosely refer to as "v2") reflects that:

"All of these colors can be customized for your app."
"The Material palette generator can be used to generate a palette for any color you input."

Doesn’t it make more sense to define light and dark shades based on the selected main color?

For colors that fall outside of a pre-defined palette, then yes. And that's exactly what Material-UI does. If you define an arbitrary main color, then light and dark are calculated from that. What I can't promise it does (and it almost certainly doesn't) is to use the same calculation for these as palette tool in the current spec or the "official" color tool, since neither existed when it was coded.

If anyone would like to reverse engineer what offset these use, then we could consider a breaking change for v5. (Incidentally, the shades used for light and dark in the color tool don't match those generated for the same main color in the palette tool in the spec, so good luck with that 😉.)

[o-alexandrov]

@mbrookes thank you, all your points are clear and I agree with you completely.

Since:

• material-ui's team is willing to consider to match the official color tool:

If anyone would like to reverse engineer what offset these use, then we could consider a breaking change for v5.

@material-components, could you point us at the exposed color tool's API we could connect to that here in material-ui's code, so there is a single source of truth to maintain?

• or, if the color API is not exposed, could you please consider to do so as it would:
  • further promote the official tool and many other win-wins to both teams

[mbrookes]

@o-alexandrov Not sure if you missed the comment that the color tool output doesn't match the spec palette tool output. That would need to be resolved first. Also, an API is definitely not the way to go, as this has runtime implications (not just docs), hence "breaking change".

[o-alexandrov]

With Material You adoption not far away (in the next 2 years probably), this issue does not have much value