googlearchive / core-style

Manage styling inside other elements and can be used to make themes.
https://www.polymer-project.org/0.5/docs/elements/core-style.html
10 stars 13 forks source link

Support parametrized producer refinement #11

Open clyfe opened 9 years ago

clyfe commented 9 years ago

The idea is to allow local customization of the variables in producers.

An example use case would be:

  1. adding a paper input on an blue toolbar
  2. I'd like to make it's colors white so they look ok on the blue background
  3. all while keeping the global paper-inputs colors unaltered.

Since there are already customization vars in the producer, I'd prefer not to write a ton of CSS all over again, but to reuse the existing producer with new, local, variables.

Sample API:

<!-- global params -->
<script>
  CoreStyle.g.myColor = red;
</script>

<!-- parameterized producer -->
<core-style id="myProducer">
  selector {
    color: {{g.myColor}}; /* default to CoreStyle.params.myColor */
  }
</core-style>

<!-- refined producer -->
<core-style refines="myProducer" select=".css-selector">
  g.myColor = red; // local parameter just for this instance
</core-style>

The select=".css-selector" could be used to target a subset of elements that have a paired consumer, so it can be applied selectively.

If the select attribute would be missing the refinement would apply globally.