[gtk/gtk-3-24] Adwaita: dark switches/check/radios

[Jakub Steiner <jimmac src gnome org>]

commit 71bdf20cff37e39a1df91422845c54268b72367b
Author: Jakub Steiner <jimmac gmail com>
Date:   Fri Mar 6 13:13:37 2020 +0100

    Adwaita: dark switches/check/radios
    
    - lighten up radios, switches and checkboxes
    
    Fixes https://gitlab.gnome.org/GNOME/gtk/issues/2461

 gtk/theme/Adwaita/_colors.scss |  3 ++-
 gtk/theme/Adwaita/_common.scss | 39 ++++++++++++++++++++-------------------
 2 files changed, 22 insertions(+), 20 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss
index e4480a062d..7a7c14bb19 100644
--- a/gtk/theme/Adwaita/_colors.scss
+++ b/gtk/theme/Adwaita/_colors.scss
@@ -73,5 +73,6 @@ $suggested_bg_color: $selected_bg_color;
 $suggested_border_color: $selected_borders_color;
 $progress_bg_color: $selected_bg_color;
 $progress_border_color: $selected_borders_color;
-$checkradio_bg_color: $selected_bg_color;
+$checkradio_bg_color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color,10%));
 $checkradio_fg_color: $selected_fg_color;
+$checkradio_borders_color: if($variant == 'light', darken($checkradio_bg_color,20%), 
darken($checkradio_bg_color,40%));
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 03a94d2c63..a1bf11770c 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2837,9 +2837,9 @@ switch {
 
   &:checked {
     color: $selected_fg_color;
-    border-color: $suggested_border_color;
-    background-color: $suggested_bg_color;
-    text-shadow: 0 1px transparentize($suggested_border_color, 0.5),
+    border-color: $checkradio_borders_color;
+    background-color: $checkradio_bg_color;
+    text-shadow: 0 1px transparentize($selected_borders_color, 0.5),
                  0 0 2px transparentize(white, 0.4);
   }
 
@@ -2859,8 +2859,9 @@ switch {
 
     &:checked {
       @if $variant == 'light' { color: $backdrop_bg_color; }
-      border-color: if($variant=='light', $suggested_bg_color, $suggested_border_color);
-      background-color: $suggested_bg_color;
+      border-color: if($variant == 'light', $checkradio_borders_color,
+                                            $selected_borders_color);
+      background-color: $checkradio_bg_color;
     }
 
     &:disabled {
@@ -2898,7 +2899,7 @@ switch {
     }
   }
 
-  &:checked slider { border: 1px solid $suggested_border_color; }
+  &:checked > slider { border: 1px solid $checkradio_borders_color; }
 
   &:disabled slider { @include button(insensitive); }
 
@@ -2909,7 +2910,7 @@ switch {
       @include button(backdrop);
     }
 
-    &:checked slider { border-color: if($variant == 'light', $suggested_bg_color, $suggested_border_color); }
+    &:checked > slider { border-color: $checkradio_borders_color; }
 
     &:disabled slider { @include button(backdrop-insensitive); }
   }
@@ -2917,11 +2918,11 @@ switch {
   row:selected & {
     @if $variant == 'light' {
       box-shadow: none;
-      border-color: $selected_borders_color;
+      border-color: $checkradio_borders_color;
 
-      &:backdrop { border-color: $selected_borders_color; }
+      &:backdrop { border-color: $checkradio_borders_color; }
 
-      slider { &:checked, & { border-color: $selected_borders_color; } }
+      > slider { &:checked, & { border-color: $checkradio_borders_color; } }
     }
   }
 
@@ -2937,14 +2938,14 @@ switch {
 
 //selection-mode
 @each $check_state, $check_icon, $check_color, $check_background in
-  ('', 'none', 'transparent', '#{transparentize($checkradio_bg_color, .05)}'),
-  (':hover', 'none', 'transparent', '#{transparentize($checkradio_bg_color, .05)}'),
-  (':active', 'none', 'transparent', '#{transparentize($checkradio_bg_color, .05)}'),
-  (':backdrop', 'none', 'transparent', '#{transparentize(desaturate($checkradio_bg_color, 100%), .05)}'),
-  (':checked', '-gtk-icontheme(\'object-select-symbolic\')', '#{$osd_fg_color}', 
'#{transparentize($checkradio_bg_color, .05)}'),
-  (':checked:hover', '-gtk-icontheme(\'object-select-symbolic\')', '#{$osd_fg_color}', 
'#{transparentize($checkradio_bg_color, .05)}'),
-  (':checked:active', '-gtk-icontheme(\'object-select-symbolic\')', '#{$osd_fg_color}', 
'#{transparentize($checkradio_bg_color, .05)}'),
-  (':backdrop:checked', '-gtk-icontheme(\'object-select-symbolic\')', '#{transparentize($osd_fg_color, 
0.2)}', '#{transparentize(desaturate($checkradio_bg_color, 100%), .05)}'), {
+  ('', 'none', 'transparent', '$checkradio_bg_color'),
+  (':hover', 'none', 'transparent', '$checkradio_bg_color'),
+  (':active', 'none', 'transparent', '$checkradio_bg_color'),
+  (':backdrop', 'none', 'transparent', '#{desaturate($checkradio_bg_color, 100%)}'),
+  (':checked', '-gtk-icontheme(\'object-select-symbolic\')', '#{$osd_fg_color}', '$checkradio_bg_color'),
+  (':checked:hover', '-gtk-icontheme(\'object-select-symbolic\')', '#{$osd_fg_color}', 
'$checkradio_bg_color'),
+  (':checked:active', '-gtk-icontheme(\'object-select-symbolic\')', '#{$osd_fg_color}', 
'$checkradio_bg_color'),
+  (':backdrop:checked', '-gtk-icontheme(\'object-select-symbolic\')', '#{transparentize($osd_fg_color, 
0.2)}', '#{desaturate($checkradio_bg_color, 100%)}'), {
 
   .view.content-view.check#{$check_state}:not(list),
   .content-view .tile check#{$check_state}:not(list) {
@@ -3037,7 +3038,7 @@ radio {
   @if $variant == 'light' {
     // the borders of the light variant versions of checks and radios are too similar in luminosity to the 
selected background
     // color, hence we need special casing.
-    row:selected & { border-color: $selected_borders_color; }
+    row:selected & { border-color: $checkradio_borders_color; }
   }
 
   .osd & {