From e2c84c6cef51b6d8a4f14603ced1ae540cd207fb 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 | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/pkg/systemd/logs.scss b/pkg/systemd/logs.scss
index 1c326f00bc75..12caae0c2058 100644
--- a/pkg/systemd/logs.scss
+++ b/pkg/systemd/logs.scss
@@ -117,6 +117,19 @@
 .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 +154,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 +164,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);
-}