Theme variants for nested buttons

[pekam]

Currently the theme variants work nicely with buttons inside a notification, so that e.g. placing a primary-button inside a primary-notification styles the button to have contrasted background: https://cdn.vaadin.com/vaadin-notification/1.3.0/demo/#notification-theme-variants-demos

However, because of the slotted selector, this works only if the button is a direct child of the <vaadin-notification-card>. Having any kind of wrapper element in-between breaks this styling. This is an issue for the Flow component, which uses <flow-component-renderer> + a <div> wrapper for the content elements.

A possible fix suggested by @tomivirkki is to add CSS properties for <vaadin-button>'s background and color:

:host {
 background-color: var(--lumo-button-background-color, var(--lumo-contrast-5pct));
 color: var(--lumo-button-color, var(--lumo-primary-text-color));
}

Then the <vaadin-notification-card> can override the properties:

:host([theme~="primary"]) {
  --lumo-button-background-color: var(--lumo-primary-contrast-color);
  --lumo-button-color: var(--lumo-primary-text-color);
}

UPDATE: The above solution doesn't actually work, because those variables should be changed only when the button inside the notification has primary theme. So we need a lot more properties, one for background and another for color per each theme attribute. Something like this:

<vaadin-button>

:host([theme~="primary"]) {
  background-color: var(--lumo-button-primary-background-color, var(--lumo-primary-color));
  color: var(--lumo-button-primary-color, var(--lumo-primary-contrast-color));

<vaadin-notification-card>

:host([theme~="primary"]) {
  --lumo-button-primary-background-color: var(--lumo-primary-contrast-color);
  --lumo-button-primary-color: var(--lumo-primary-text-color);
}

After implementing this in <vaadin-button>, verify that it works with notification and also in IE11, before releasing a new minor of button.