fix: use Lumo colors for popup button overlay (#4269) (#4273)

Co-authored-by: Tomi Virkki <[email protected]>
vaadin · Nov 30, 2022 · e842ee6 · e842ee6
1 parent 3add351
commit e842ee6
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/...ain/resources/META-INF/resources/frontend/vaadin-spreadsheet/vaadin-spreadsheet-styles.js b/...ain/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);
   }
 `;