[Bug Report] Text color does not change for disabled button w/ >1 text color property

[morphatic]

Environment

Vuetify Version: 2.0.1
Vue Version: 2.6.10
Browsers: Chrome 75.0.3770.100
OS: Mac OS 10.13.6

Steps to reproduce

Create a <v-btn> instance. Assign multiple text color modifiers. Disable it, e.g.

<v-btn
  color="primary--text text--darken-2"
  :disabled="true"
/>

Expected Behavior

The text of the button gets greyed out.

Actual Behavior

The text of the button does not change color.

Reproduction Link

https://codepen.io/morphatic/pen/eqJwEP

Other comments

May have been caused by and/or be related to c5dae24d

[nekosaur]

Your assumption is correct. The change in css specificity that followed when adding .v-application to colors caused this bug.

[dsseng]

Just a specifity issue

[phil-rw]

Is this truly a bug? Our design purposefully keeps some color on disabled buttons (typically significantly lowers the opacity). By making the code change that this is related to which was introduced in 2.0.6, it appears we've lost the ability to specify any colors for disabled state. Would Vuetify be willing to remove this and be less opinionated on this manner?

[morphatic]

Yes, it is a bug because it deviates from the official Material 2.0 spec for button styles. Vuetify specifically aims to hew as close to this spec as possible. The spec is clear and explicit about what the disabled state should look like for all button styles. It's totally fine if you want to deviate from the spec in your own app, but the buggy version unexpectedly fails to grey out the button text when developers specify colors with more than one rule.

You're still able to override the default style with your own custom CSS. Here's an (admittedly awful to look at) example using the latest, non-buggy version: https://codepen.io/morphatic/pen/jONWeEG

[phil-rw]

Got it! Thank you for the detailed explanation @morphatic - makes sense. 👍