Have the colors default to --primary-text-color, etc

[tewalds]

Right now there are explicit variables for the button text color and background color, but it'd be much easier to change the theme of a site if there were variables for those and they defaulted based on --primary-color, --primary-text-color, etc.

[keanulee]

@tewalds Styling the background and text color can be done with regular CSS (without custom properties/mixins), which can already be done on a site wide basis. I don't see why we would need to introduce those variables.

paper-button {
  background: red;
  color: white;
}

[tewalds]

That works great when the button is at the top level, but doesn't work when the buttons are within subcomponents in the shadow dom. I can do this instead:

body /deep/ paper-button {
  background: red;
  color: white;
}

but that uses /deep/ which is deprecated and discouraged.

I can also do:

--paper-button: {
  background: red;
  color: white;
}

which is better. Or better yet:

--paper-button: {
  background: var(--primary-background-color);
  color: var(--primary-test-color);
}

but why not just make that the default anyway since that's probably what most people want?

[keanulee]

There exists a --paper-font-common-base property for styling text in paper elements. background should arguably be paper-button specific, so your suggestion to set this through the --paper-button mixin is probably the best way forward.