Button no longer inherits color from theme

[gpoitch]

According to the readme:

By default an MDC Button will inherit its color from the theme

:root {
  --mdc-theme-primary: #3fa9f5;
}

Since 0.21.0, this is no longer happening and the buttons are all black.

[Lc0rE]

Exactly! I came here to open an issue for this and I can confirm this behaviour.

Inspecting the CSS code, it seems that mdc-button--primary, mdc-button--secondary, mdc-button--accent are completely missing.
I don't know if I'm doing something wrong but I just approached MDC for the first time following the official Getting Started guide and I encounter this strange behaviour.

Has anyone some information about?

[hebbet]

Inspecting the CSS code, it seems that mdc-button--primary, mdc-button--secondary, mdc-button--accent are completely missing.

they aren't missing, they were removed, see Changelog:

button: Remove support of mdc-button--primary and mdc-button--accent modifier classes. For custom and theme button implementation, use button mixins instead. See demos.scss for details.

[Lc0rE]

Hey, @hebbet thanks for the useful comment!

As I said, I came here just after having read the documentation which is (sadly) not mentioning this.
As a general rule, I think that it should be a good approach to update docs when something showed up in the very first tutorial is removed or modified...

I also found terribly annoying that the example linked in the theming section docs/theming/ which is pointing to the plunker https://plnkr.co/edit/qxt7qpPsXgkt9UbMnE36?p=preview, contains the old (I guess old since I just approached the repository) mdl- classes.

Anyway, we don't have now the possibility to use CSS Custom Properties? Just SASS?

[Garbee]

The library is still alpha level. You shouldn't be using it unless you're prepared for changes and removals from release to release. The change log is the point of reference for these as well. If the docs were updated then there would be quite a large list for each component which is distracting and off putting.

There is another issue discussing why it was removed and possible remedies. On mobile so having a hard time finding it right now. Continue discussion in that issue please to keep things centralized.

[Lc0rE]

Sure @Garbee, not my intention to criticize.
I'm aware of the early stage of the project and I opened a quick pull-request to avoid confusion around the theming of buttons and save times to newcomers.
Next, I'll update the plunker and the theming guide as well.

[gpoitch]

The changelog did mention sass, but I don't think requiring sass is a good solution (also discussed here #1332).

All of the other elements are still themeable by setting that one css variable, so I opened this issue hoping we could restore buttons back to having that functionality. If there is an alternate css variable name we have to use now for buttons that would be acceptable too.

[robbyrice]

I've run into this as well after updating to version 0.21.1. I think the main issue is that the documentation doesn't reflect the current behavior of the library. As stated above (quotation from the current documentation),

By default an MDC Button will inherit its color from the theme

Unfortunately, this is not the case and buttons are rendered with a black background no matter what the theme is set to. This is the case on the button demo page as well. It is not a problem to style the button background (or any other component) on a project-by-project basis. However, the documentation should be clear about that. Otherwise, there is something missing from the CSS that is preventing the button background from being styled correctly.

[amsheehan]

As I mentioned in the now closed Pull Request, we want to figure out a way to fix this. Thanks everyone.