[libadwaita/wip/exalm/stylesheet-cleanups: 11/13] stylesheet: Extract trough colors into variables

[Adrien Plazas <aplazas src gnome org>]

commit 7b889590c7972a8ab859ff8629bb4fa449eb7cbf
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri May 21 14:41:02 2021 +0500

    stylesheet: Extract trough colors into variables
    
    We now share the same styling between checks/radios, switches, progress
    bars, scales and level bars. Now we can refactor it.

 src/stylesheet/_colors.scss            | 3 +++
 src/stylesheet/widgets/_checks.scss    | 8 +++-----
 src/stylesheet/widgets/_level-bar.scss | 2 +-
 src/stylesheet/widgets/_scale.scss     | 4 ++--
 src/stylesheet/widgets/_switch.scss    | 6 +++---
 5 files changed, 12 insertions(+), 11 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index d72cf90f..f984de30 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -21,6 +21,9 @@ $view_hover_color: transparentize($text_color, .93);
 $view_selected_color: transparentize($text_color, .9);
 $view_selected_hover_color: transparentize($text_color, .87);
 $view_active_color: transparentize(black, .85);
+$trough_color: transparentize($text_color, .85);
+$trough_hover_color: transparentize($text_color, .8);
+$trough_active_color: transparentize(black, .75);
 
 $scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 
50%));
 $scrollbar_slider_color: mix($fg_color, $bg_color, 60%);
diff --git a/src/stylesheet/widgets/_checks.scss b/src/stylesheet/widgets/_checks.scss
index 105bde4d..3375348e 100644
--- a/src/stylesheet/widgets/_checks.scss
+++ b/src/stylesheet/widgets/_checks.scss
@@ -17,18 +17,16 @@ radio {
   min-width: 14px;
   padding: 1px;
   -gtk-icon-size: 14px;
-  background-color: transparentize($text_color, .85);
+  background-color: $trough_color;
 
   @if $contrast == "high" {
     box-shadow: inset 0 0 0 1px $borders_color;
   }
 
   &:hover {
-    background-color: transparentize($text_color, .8);
+    background-color: $trough_hover_color;
 
-    &:active {
-      background-color: transparentize(black, .75);
-    }
+    &:active { background-color: $trough_active_color; }
   }
 
   &:checked,
diff --git a/src/stylesheet/widgets/_level-bar.scss b/src/stylesheet/widgets/_level-bar.scss
index ccbcf3f7..2ba0f831 100644
--- a/src/stylesheet/widgets/_level-bar.scss
+++ b/src/stylesheet/widgets/_level-bar.scss
@@ -89,7 +89,7 @@ levelbar {
       }
 
       &.empty {
-        background-color: transparentize($text_color, .85);
+        background-color: $trough_color;
 
         @if $contrast == "high" {
           box-shadow: inset 0 0 0 1px $borders_color;
diff --git a/src/stylesheet/widgets/_scale.scss b/src/stylesheet/widgets/_scale.scss
index 42af4780..dd5be84f 100644
--- a/src/stylesheet/widgets/_scale.scss
+++ b/src/stylesheet/widgets/_scale.scss
@@ -1,6 +1,6 @@
 %scale_trough {
   border-radius: 3px;
-  background-color: transparentize($text_color, .85);
+  background-color: $trough_color;
 
   @if $contrast == "high" {
     box-shadow: inset 0 0 0 1px $borders_color;
@@ -64,7 +64,7 @@ scale {
 
   &:hover {
     > trough {
-      background-color: transparentize($text_color, .8);
+      background-color: $trough_hover_color;
 
       > highlight {
         background-color: mix($selected_bg_color, $text_color, 90%);
diff --git a/src/stylesheet/widgets/_switch.scss b/src/stylesheet/widgets/_switch.scss
index bb52748e..8484dd34 100644
--- a/src/stylesheet/widgets/_switch.scss
+++ b/src/stylesheet/widgets/_switch.scss
@@ -16,13 +16,13 @@ switch {
     }
    }
    @else {
-     background-color: transparentize($text_color, .85);
+     background-color: $trough_color;
      color: $fg_color;
 
      &:hover {
-      background-color: transparentize($text_color, .8);
+      background-color: $trough_hover_color;
 
-      &:active { background-color: transparentize(black, .75); }
+      &:active { background-color: $trough_active_color; }
     }
 
     > image { color: transparent; }