From e842ee67cef92b3131e4f97428f5bf2761932f26 Mon Sep 17 00:00:00 2001
From: Vaadin Bot <vaadin-bot@users.noreply.github.com>
Date: Wed, 30 Nov 2022 14:26:58 +0100
Subject: [PATCH] fix: use Lumo colors for popup button overlay (#4269) (#4273)

Co-authored-by: Tomi Virkki <tomivirkki@users.noreply.github.com>
---
 .../frontend/vaadin-spreadsheet/vaadin-spreadsheet-styles.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/vaadin-spreadsheet-flow-parent/vaadin-spreadsheet-flow/src/main/resources/META-INF/resources/frontend/vaadin-spreadsheet/vaadin-spreadsheet-styles.js b/vaadin-spreadsheet-flow-parent/vaadin-spreadsheet-flow/src/main/resources/META-INF/resources/frontend/vaadin-spreadsheet/vaadin-spreadsheet-styles.js
index 3b094d741e0..260e8caef3f 100644
--- a/vaadin-spreadsheet-flow-parent/vaadin-spreadsheet-flow/src/main/resources/META-INF/resources/frontend/vaadin-spreadsheet/vaadin-spreadsheet-styles.js
+++ b/vaadin-spreadsheet-flow-parent/vaadin-spreadsheet-flow/src/main/resources/META-INF/resources/frontend/vaadin-spreadsheet/vaadin-spreadsheet-styles.js
@@ -105,6 +105,7 @@ export const spreadsheetStyles = css`
     border: none;
     color: #474747;
     outline: none;
+    background-color: initial;
   }
   .v-spreadsheet .functionbar .arrow {
     position: absolute;
@@ -1253,7 +1254,7 @@ export const spreadsheetOverlayStyles = css`
   #spreadsheet-overlays .v-spreadsheet-popupbutton-overlay {
     padding: 4px 4px;
     border-radius: 4px;
-    background-color: white;
+    background-color: var(--lumo-base-color, #fff);
     color: #474747;
     box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1), 0 3px 5px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.091);
     -webkit-backface-visibility: hidden;
@@ -1290,7 +1291,6 @@ export const spreadsheetOverlayStyles = css`
     gap: 4px;
   }
   #spreadsheet-overlays .v-spreadsheet-popupbutton-overlay-header {
-    background: white;
     height: 18px;
     position: relative;
     width: 100%;
@@ -1322,5 +1322,6 @@ export const spreadsheetOverlayStyles = css`
     height: 18px;
     line-height: 18px;
     text-align: center;
+    color: var(--lumo-body-text-color);
   }
 `;