[classes] Normalize the classes names

[oliviertassinari]

Breaking change

This is an effort in order to harmonize the classes API. The best way to recover from this breaking change is to check the warnings in the console and to check the added documentation around the design rules around this API.

I'm quite happy with the current "classes" state, the main thing missing is documented in the roadmap:

Change the CSS specificity rule to solve #10010 and #9742 at scale. It's inspired by the Bootstrap approach to writing CSS.

---

CSS Classes

All the components accept a classes property to customize the styles.
The classes design answers two constraints.
We try to make the classes structure as simple as possible while keeping it complex enough for implementing the Material specification.

• The class applied on the root element is always called root.
• The classes applied on non-root element are prefixed with the name of the element, e.g. dashedXX.
• All the default styles are grouped in a single class.
• The boolean variants applied aren't prefixed e.g. rounded.
• The enum variants applied are prefixed e.g. colorXX.
• A variant has one level of specificity.
  For instance, the color and variant properties are considered a variant.
  The lower the style specificity is, the simpler you can override it.
• We increase the specificity for a variant modifier. We already have to do it for the pseudo-classes (:hover, :focus, etc.). It allows much more control at the cost of extra complexity. Hopefully, it's more intuitive.

const styles = {
  root: {
    color: green[600],
    '&$checked': {
      color: green[500],
    },
  },
  checked: {},
};

[oliviertassinari]

AAA contrast

[xaviergonz]

I'm trying to understand this change but don't quite get it without an example.
How would I create a red raised button with this new idea compared to how it was in #10010 ?

[oliviertassinari]

@xaviergonz Nothing has changed on this end yet. This pull-request was only about normalizing and documenting the logic behind the classes wordings. I will ping you once I have a prototype of the change we can apply to solve the issue. Does that sounds good?

[xaviergonz]

@oliviertassinari sounds great :)