From 33af4d1a5bc14bc86ba616f03c7a93406f671f39 Mon Sep 17 00:00:00 2001
From: Sam Hewitt <sam@snwh.org>
Date: Tue, 18 Jul 2023 10:30:50 -0230
Subject: [PATCH] style: Fix osd elements not being dark in light theme

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2823>
---
 data/theme/gnome-shell-sass/_colors.scss  |  4 ++--
 data/theme/gnome-shell-sass/_common.scss  | 16 ++++++++--------
 data/theme/gnome-shell-sass/_drawing.scss |  9 ++++++---
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index ecc24d954..ebb9a0171 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -28,8 +28,8 @@ $success_color: if($variant == 'light', $green_4, $green_5);
 $destructive_color: $error_color;
 
 // color definitions for OSD elements
-$osd_fg_color: if($variant == 'light', $_dark_base_color, $light_1);
-$osd_bg_color: if($variant == 'light', $light_3, lighten($_dark_base_color, 5%));
+$osd_fg_color: $light_1;
+$osd_bg_color: lighten($_dark_base_color, 5%);
 
 // derived osd colors
 $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index c64616c3f..ecd39c757 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -259,18 +259,18 @@ stage {
 // buttons on OSD elements
 %osd_button {
   @extend %button_common;
-  @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color);
-  &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color);}
-  &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);}
-  &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);}
-  &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);}
-  &:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);}
+  @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);
+  &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
+  &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
+  &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
+  &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
+  &:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
 }
 
 %osd_button_flat {
   @extend %osd_button;
-  @include button(undecorated);
-  &:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color);}
+  @include button(undecorated, $osd:true);
+  &:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
 }
 
 /* System Elements */
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index cb77411c4..5606666d6 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -143,11 +143,15 @@
 //
 // since buttons are all flat an borderless now the mixin is simpler
 
-@mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false) {
+@mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false, $osd: false) {
 
   $button_bg_color: mix($tc, $c, $button_mix_factor);
   transition-duration: 100ms;
 
+  @if $osd {
+    $button_bg_color: transparentize($tc, 0.9);
+  }
+
   // normal button
   @if $t==normal {
     color: $tc;
@@ -210,8 +214,8 @@
 
   // insensitive button
   @else if $t==insensitive {
+    color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5)) !important;
     background-color: if($variant == 'light', transparentize($tc, .9), transparentize($tc, .95));
-    color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
   }
 
   // default/suggested button
@@ -243,7 +247,6 @@
     background-color: none;
     box-shadow: none;
     &:insensitive {
-      @include button(insensitive);
       background-color: transparent;
     }
   }