Use CSS variables to set vaadin-button lumo colors

This enables vaadin-button styles to be applied for buttons that are not direct children of the vaadin-notification-card. Fixes #104
vaadin · Apr 18, 2019 · c926782 · c926782
1 parent 8dd5301
commit c926782
Showing 1 changed file with 24 additions and 24 deletions.
diff --git a/theme/lumo/vaadin-notification-styles.html b/theme/lumo/vaadin-notification-styles.html
@@ -137,59 +137,59 @@
         color: var(--lumo-primary-contrast-color);
       }
 
-      :host([theme~="primary"]) [part="content"] ::slotted(vaadin-button) {
-        background: var(--lumo-shade-20pct);
-        color: var(--lumo-primary-contrast-color);
+      :host([theme~="primary"]) [part="content"] {
+        --_lumo-button-background-color: var(--lumo-shade-20pct);
+        --_lumo-button-color: var(--lumo-primary-contrast-color);
       }
 
-      :host([theme~="primary"]) [part="content"] ::slotted(vaadin-button[theme~="primary"]) {
-        background: var(--lumo-primary-contrast-color);
-        color: var(--lumo-primary-text-color);
+      :host([theme~="primary"]) [part="content"] {
+        --_lumo-button-primary-background-color: var(--lumo-primary-contrast-color);
+        --_lumo-button-primary-color: var(--lumo-primary-text-color);
       }
 
       :host([theme~="contrast"]) [part="overlay"] {
         background: var(--lumo-contrast);
         color: var(--lumo-base-color);
       }
 
-      :host([theme~="contrast"]) [part="content"] ::slotted(vaadin-button) {
-        background: var(--lumo-contrast-20pct);
-        color: var(--lumo-base-color);
+      :host([theme~="contrast"]) [part="content"] {
+        --_lumo-button-background-color: var(--lumo-contrast-20pct);
+        --_lumo-button-color: var(--lumo-base-color);
       }
 
-      :host([theme~="contrast"]) [part="content"] ::slotted(vaadin-button[theme~="primary"]) {
-        background: var(--lumo-base-color);
-        color: var(--lumo-contrast);
+      :host([theme~="contrast"]) [part="content"] {
+        --_lumo-button-primary-background-color: var(--lumo-base-color);
+        --_lumo-button-primary-color: var(--lumo-contrast);
       }
 
       :host([theme~="success"]) [part="overlay"] {
         background: var(--lumo-success-color);
         color: var(--lumo-success-contrast-color);
       }
 
-      :host([theme~="success"]) [part="content"] ::slotted(vaadin-button) {
-        background: var(--lumo-shade-20pct);
-        color: var(--lumo-success-contrast-color);
+      :host([theme~="success"]) [part="content"] {
+        --_lumo-button-background-color: var(--lumo-shade-20pct);
+        --_lumo-button-color: var(--lumo-success-contrast-color);
       }
 
-      :host([theme~="success"]) [part="content"] ::slotted(vaadin-button[theme~="primary"]) {
-        background: var(--lumo-success-contrast-color);
-        color: var(--lumo-success-text-color);
+      :host([theme~="success"]) [part="content"] {
+        --_lumo-button-primary-background-color: var(--lumo-success-contrast-color);
+        --_lumo-button-primary-color: var(--lumo-success-text-color);
       }
 
       :host([theme~="error"]) [part="overlay"] {
         background: var(--lumo-error-color);
         color: var(--lumo-error-contrast-color);
       }
 
-      :host([theme~="error"]) [part="content"] ::slotted(vaadin-button) {
-        background: var(--lumo-shade-20pct);
-        color: var(--lumo-error-contrast-color);
+      :host([theme~="error"]) [part="content"] {
+        --_lumo-button-background-color: var(--lumo-shade-20pct);
+        --_lumo-button-color: var(--lumo-error-contrast-color);
       }
 
-      :host([theme~="error"]) [part="content"] ::slotted(vaadin-button[theme~="primary"]) {
-        background: var(--lumo-error-contrast-color);
-        color: var(--lumo-error-text-color);
+      :host([theme~="error"]) [part="content"] {
+        --_lumo-button-primary-background-color: var(--lumo-error-contrast-color);
+        --_lumo-button-primary-color: var(--lumo-error-text-color);
       }
     </style>
   </template>