From 8a2cd942aa07df373b6bb49c53998d330b5623c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pekka=20Maanp=C3=A4=C3=A4?= <pekkamaa@vaadin.com>
Date: Thu, 18 Apr 2019 11:16:38 +0300
Subject: [PATCH] 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
---
 theme/lumo/vaadin-notification-styles.html | 52 +++++++++-------------
 1 file changed, 20 insertions(+), 32 deletions(-)

diff --git a/theme/lumo/vaadin-notification-styles.html b/theme/lumo/vaadin-notification-styles.html
index 58393ab..f5f9b92 100644
--- a/theme/lumo/vaadin-notification-styles.html
+++ b/theme/lumo/vaadin-notification-styles.html
@@ -137,14 +137,11 @@
         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"] ::slotted(vaadin-button[theme~="primary"]) {
-        background: var(--lumo-primary-contrast-color);
-        color: var(--lumo-primary-text-color);
+      :host([theme~="primary"]) [part="content"] {
+        --_lumo-button-background-color: var(--lumo-shade-20pct);
+        --_lumo-button-color: var(--lumo-primary-contrast-color);
+        --_lumo-button-primary-background-color: var(--lumo-primary-contrast-color);
+        --_lumo-button-primary-color: var(--lumo-primary-text-color);
       }
 
       :host([theme~="contrast"]) [part="overlay"] {
@@ -152,14 +149,11 @@
         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"] ::slotted(vaadin-button[theme~="primary"]) {
-        background: var(--lumo-base-color);
-        color: var(--lumo-contrast);
+      :host([theme~="contrast"]) [part="content"] {
+        --_lumo-button-background-color: var(--lumo-contrast-20pct);
+        --_lumo-button-color: var(--lumo-base-color);
+        --_lumo-button-primary-background-color: var(--lumo-base-color);
+        --_lumo-button-primary-color: var(--lumo-contrast);
       }
 
       :host([theme~="success"]) [part="overlay"] {
@@ -167,14 +161,11 @@
         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"] ::slotted(vaadin-button[theme~="primary"]) {
-        background: var(--lumo-success-contrast-color);
-        color: var(--lumo-success-text-color);
+      :host([theme~="success"]) [part="content"] {
+        --_lumo-button-background-color: var(--lumo-shade-20pct);
+        --_lumo-button-color: var(--lumo-success-contrast-color);
+        --_lumo-button-primary-background-color: var(--lumo-success-contrast-color);
+        --_lumo-button-primary-color: var(--lumo-success-text-color);
       }
 
       :host([theme~="error"]) [part="overlay"] {
@@ -182,14 +173,11 @@
         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"] ::slotted(vaadin-button[theme~="primary"]) {
-        background: var(--lumo-error-contrast-color);
-        color: var(--lumo-error-text-color);
+      :host([theme~="error"]) [part="content"] {
+        --_lumo-button-background-color: var(--lumo-shade-20pct);
+        --_lumo-button-color: var(--lumo-error-contrast-color);
+        --_lumo-button-primary-background-color: var(--lumo-error-contrast-color);
+        --_lumo-button-primary-color: var(--lumo-error-text-color);
       }
     </style>
   </template>