Hm, I'm not sure if the current custom properties shim supports defining a
value for a custom property inside a mixin and then applying that mixin to
the host element with the hope that it will fulfill the value in a child.
+Steve may know better.
Or something like ':root { ... }' and '.theme-1 { ... }'?
It would be like this if I understand correctly. It's following regular CSS
cascade rules so the custom property in the most specific selectors wins.
On Mon, Jan 25, 2016 at 2:20 PM, Viktor Kojouharov <[email protected]>
wrote:
> Hi,
>
> In a top-level 'custom-style' element, I've defined something like this:
> :root {
> --app-theme: {
> --paper-toolbar-background: var(--paper-blue-grey-500);
> }
> }
>
> Later, in a component which contains another component which contains
> another component that contains a toolbar:
> :host {
> @apply(--app-theme);
> }
>
> That doesn't do anything, however. The toolbar background remains the
> default indigo-500. If I do this instead:
> :host {
> --paper-toolbar-background: var(--paper-blue-grey-500);
> }
>
> the toolbar's color changes accordingly.
>
> With the mixin, even though the variables defined in it seem to be
> ignored, the contents of it are known to the component itself, since doing
> the following returns the textual contents of the mixin:
> myComponent.getComputedStyleValue('--app-theme')
>
> So what exactly is the problem here? Also, the docs imply that you can
> have different mixins with the same name, as long as the selectors are
> different, but they don't go into details. If I want to switch between
> different app-theme mixins, how would the top-level style selectors looks
> like? Would it be something like : ':root { ... }' for the default, then
> ':root.theme-1 { ... } ' for the first variant, and so on? Or something
> like ':root { ... }' and '.theme-1 { ... }'?
>
> Follow Polymer on Google+: plus.google.com/107187849809354688692
> ---
> You received this message because you are subscribed to the Google Groups
> "Polymer" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/polymer-dev/f5f6ec50-3321-45cc-a63e-0eebc6c8bea8%40googlegroups.com
> <https://groups.google.com/d/msgid/polymer-dev/f5f6ec50-3321-45cc-a63e-0eebc6c8bea8%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
> For more options, visit https://groups.google.com/d/optout.
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CAJj5OwBVC8HAcq20YKppdgwYNddzAqdALWVXQ3jhS4U7QTF4Fw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
