Materia-light panel color dark after upgrading to xfce 4.14

[tyzoid]

Reporter Info

• Materia version: both git package (materia-theme-git r1112.14436cd7) and arch package (20190315-1)
• GTK3 version: 3.24.10
• Distribution (and version): Arch Linux
• Desktop environment (and version): 4.14.0
• Related application (and version): xfce4-panel 4.14.0

Actual Issue After upgrading to xfce 4.14, the panel appears dark and text unreadable.

Grabbing the latest theme from git yields a readable (but dark) result:

Functionality works as expected on adwaita:

Weirdly, materia-light seems to have a panel color of #000, darker than that of materia default:

Additional Info Searching through the built CSS, it appears that gtk-light has a color of rgba(0,0,0,.6)

[tdence@tdence-arch src]$ grep -rn '.xfce4-panel.background\(,\|[ ]*{\)' -A 5
gtk/3.0/gtk.css:6134:.xfce4-panel.background {
gtk/3.0/gtk.css-6135-  border: none;
gtk/3.0/gtk.css-6136-  background-color: #1F1F1F;
gtk/3.0/gtk.css-6137-  color: rgba(255, 255, 255, 0.7);
gtk/3.0/gtk.css-6138-  font-weight: 500;
gtk/3.0/gtk.css-6139-}
--
gtk/3.0/gtk-light.css:6134:.xfce4-panel.background {
gtk/3.0/gtk-light.css-6135-  border: none;
gtk/3.0/gtk-light.css-6136-  background-color: rgba(0, 0, 0, 0.6);
gtk/3.0/gtk-light.css-6137-  color: rgba(255, 255, 255, 0.7);
gtk/3.0/gtk-light.css-6138-  font-weight: 500;
gtk/3.0/gtk-light.css-6139-}
--
gtk/3.0/gtk-light-compact.css:6134:.xfce4-panel.background {
gtk/3.0/gtk-light-compact.css-6135-  border: none;
gtk/3.0/gtk-light-compact.css-6136-  background-color: rgba(0, 0, 0, 0.6);
gtk/3.0/gtk-light-compact.css-6137-  color: rgba(255, 255, 255, 0.7);
gtk/3.0/gtk-light-compact.css-6138-  font-weight: 500;
gtk/3.0/gtk-light-compact.css-6139-}

[tyzoid]

After digging further, this appears to be due to the fact that the panels are now semi-transparent instead of light on a light theme, allowing the desktop background to show through. Why the light theme does this, and the dark theme does not seems odd, however, and breaks user expectations.

[tyzoid]

In researching this issue, I did uncover a bug in the scss (assuming the transparency is Working As Designed™).

Essentially, if the panel background is light, the buttons will still render as if they're on a dark background. Changing the button styles from always dark to depend on the panel color fixes this.

diff --git a/src/_sass/gtk/_common-3.20.scss b/src/_sass/gtk/_common-3.20.scss
index c111dd2b..0c9de49f 100644
--- a/src/_sass/gtk/_common-3.20.scss
+++ b/src/_sass/gtk/_common-3.20.scss
@@ -496,13 +496,13 @@ button {
 
   @at-root %button_selected {
     &.flat {
-      color: on(dark, secondary);
+      color: on($panel, secondary);
 
-      &:focus, &:hover, &:active, &:checked { color: on(dark); }
+      &:focus, &:hover, &:active, &:checked { color: on($panel); }
 
-      &:disabled { color: on(dark, secondary-disabled); }
+      &:disabled { color: on($panel, secondary-disabled); }
 
-      &:checked:disabled { color: on(dark, disabled); }
+      &:checked:disabled { color: on($panel, disabled); }
     }
   }

[ghost]

Thanks for your research @tyzoid ! :+1: to please merge this :)

[i8run]

The master (commit 01916998728959ba5e8bfa694f12d8b43ca083b5) has the same issue again.