Add CSS variables for lumo theme variants

to enable theming inside a notification, connects to vaadin/vaadin-notification#104
vaadin · Apr 18, 2019 · dae0af7 · dae0af7
1 parent 4a5c54f
commit dae0af7
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/theme/lumo/vaadin-button-styles.html b/theme/lumo/vaadin-button-styles.html
@@ -19,8 +19,8 @@
         font-family: var(--lumo-font-family);
         font-size: var(--lumo-font-size-m);
         font-weight: 500;
-        color: var(--lumo-primary-text-color);
-        background-color: var(--lumo-contrast-5pct);
+        color: var(--lumo-button-color, var(--lumo-primary-text-color));
+        background-color: var(--lumo-button-background-color, var(--lumo-contrast-5pct));
         border-radius: var(--lumo-border-radius);
         cursor: default;
         -webkit-tap-highlight-color: transparent;
@@ -156,8 +156,8 @@
       }
 
       :host([theme~="primary"]) {
-        background-color: var(--lumo-primary-color);
-        color: var(--lumo-primary-contrast-color);
+        background-color: var(--lumo-button-primary-background-color, var(--lumo-primary-color));
+        color: var(--lumo-button-primary-color, var(--lumo-primary-contrast-color));
         font-weight: 600;
         min-width: calc(var(--lumo-button-size) * 2.5);
       }