From f877f0c9ed149fc31159565da9860ca0e86e1d4c Mon Sep 17 00:00:00 2001
From: Marius Vollmer <marius.vollmer@gmail.com>
Date: Thu, 9 Jan 2025 10:17:16 +0200
Subject: [PATCH] systemd: White widget backgrounds in the journal filter
 toolbar

The secondary button should not be transparent.

At the same time, improve the existing CSS that does the same job for
menu toggles.

The toolbar already has its own super custom styling, which I had
missed earlier. Let's move our tweaks for the menu toggles into that
section and do them by setting the appropriate PF variable.

Also, we can remove the FIXME part.
---
 pkg/systemd/logs.scss | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/pkg/systemd/logs.scss b/pkg/systemd/logs.scss
index 1c326f00bc75..3ca5b8fc8c83 100644
--- a/pkg/systemd/logs.scss
+++ b/pkg/systemd/logs.scss
@@ -117,6 +117,20 @@
 .pf-v5-c-toolbar {
   --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-page__main-section--BackgroundColor);
 
+  // We want menu toggles and secondary buttons in light mode to have
+  // a white background to increase their text-to-background contrast
+  // and to match the SearchInput component.
+
+  html:not(.pf-v5-theme-dark) & {
+      .pf-v5-c-menu-toggle {
+          --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+      }
+
+      .pf-v5-c-button {
+          --pf-v5-c-button--m-secondary--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+      }
+  }
+
   // Make toolbar stretch to all the available space and wrap up to two lines
   .pf-v5-c-toolbar__group:nth-child(3) {
     flex-grow: 1;
@@ -141,11 +155,6 @@
   .pf-v5-c-toolbar__expandable-content.pf-m-expanded .pf-v5-c-divider {
     display: none;
   }
-
-  // FIXME: When porting the selects to the PF5 select implementation drop this
-  .pf-v5-c-toolbar__item {
-    align-self: center;
-  }
 }
 
 .log-text-filter-popover-button {
@@ -156,12 +165,3 @@
       color: var(--pf-v5-global--Color--100);
     }
 }
-
-/* Menu toggles are transparent in light mode (but not in dark
-   mode). This makes them white on a white page (fine), but grey in a
-   grey toolbar. The deprecated Select had a white background. Let's
-   make MenuToggles match.
-*/
-html:not(.pf-v5-theme-dark) .pf-v5-c-menu-toggle:not(.pf-m-primary) {
-    background-color: var(--pf-v5-global--BackgroundColor--100);
-}