[libadwaita/wip/exalm/scales: 1/2] stylesheet: Update switch style

[Alexander Mikhaylenko <alexm src gnome org>]

commit 49fefd0d4d682c4346be345fe4428afa8df162e8
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Thu May 20 15:37:43 2021 +0500

    stylesheet: Update switch style
    
    Use a similar style to the new checks and radios. Keep the slider light
    even in dark variant for better visibility, but make it slightly darker
    when not checked or hovered.
    
    Unlike with checks, a border doesn't work well with HC here, so instead
    use the border color as a background and make the symbols always white.
    
    Change the trough colors on hover, since the whole switch is clickable and
    not just the slider.
    
    Add a slight drop shadow to the slider, drop it when insensitive.

 src/stylesheet/_colors.scss         |  4 --
 src/stylesheet/widgets/_switch.scss | 76 +++++++++++++++++++++++--------------
 2 files changed, 47 insertions(+), 33 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index d06d6971..ba0d0c42 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -57,8 +57,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;
-$switch_bg_color: $selected_bg_color;
-$switch_borders_color: if($variant == 'light',darken($switch_bg_color,15%),darken($switch_bg_color,30%));
 $focus_border_color: if($variant == 'light', transparentize($selected_bg_color, 0.5), 
transparentize($selected_bg_color, 0.3));
 $alt_focus_border_color: if($variant == 'light', transparentize(white, 0.2), transparentize(white,0.7));
 $dim_label_opacity: 0.55;
@@ -86,6 +84,4 @@ $dim_label_opacity: 0.55;
 
   $dim_label_opacity: 0.9;
 
-  $switch_borders_color: if($variant == 'light',darken($switch_bg_color,15%),lighten($switch_bg_color,15%));
-
 }
diff --git a/src/stylesheet/widgets/_switch.scss b/src/stylesheet/widgets/_switch.scss
index 5aeb1841..413c0f35 100644
--- a/src/stylesheet/widgets/_switch.scss
+++ b/src/stylesheet/widgets/_switch.scss
@@ -1,49 +1,67 @@
 switch {
-  // similar to the .scale
-  border: 1px solid $borders_color;
+  // similar to GtkScale
   border-radius: 14px;
-  color: $fg_color;
-  background-color: $dark_fill;
+  padding: 2px;
+
   transition: $focus_transition;
 
-  @include focus-ring($offset: 0, $outer: true);
+  @if $contrast == "high" {
+     background-color: $borders_color;
+     color: white;
 
-  headerbar & { background-color: darken($dark_fill,8%); } //3504
+     &:hover {
+      background-color: mix($borders_color, $text_color, 80%);
 
-  &:checked {
-    color: $selected_fg_color;
-    border-color: $switch_borders_color;
-    background-color: $switch_bg_color;
-  }
+      &:active { background-color: mix($borders_color, black, 60%); }
+    }
+   }
+   @else {
+     background-color: transparentize($text_color, .85);
+     color: $fg_color;
+
+     &:hover {
+      background-color: transparentize($text_color, .75);
+
+      &:active { background-color: transparentize(black, .65); }
+    }
+
+    > image { color: transparent; }
+   }
+
+  @include focus-ring($offset: 0, $outer: true);
 
   &:disabled {
-    color: $insensitive_fg_color;
-    border-color: $borders_color;
-    background-color: $insensitive_bg_color;
+    filter: opacity(0.5);
   }
 
   > slider {
-    @include button(normal);
-
-    margin: -1px;
-    min-width: 24px;
-    min-height: 24px;
-    border: 1px solid;
-    border-color: $borders_color;
+    min-width: 22px;
+    min-height: 22px;
     border-radius: 50%;
-    transition: $button_transition;
-  }
+    background-color: mix(white, $base_color, 80%);
+    box-shadow: 0 2px 4px transparentize(black, .8);
 
-  /* only show i / o for the accessible theme */
-  @if $contrast == 'normal' {
-    > image { color: transparent; }
+    &:disabled {
+      box-shadow: 0 2px 4px transparent;
+    }
   }
 
   &:hover > slider {
-    @include button(hover);
+    background: white;
   }
 
-  &:checked > slider { border: 1px solid $switch_borders_color; }
+  &:checked {
+    color: $selected_fg_color;
+    background-color: $selected_bg_color;
+
+    &:hover {
+      background-color: mix($selected_bg_color, $text_color, 80%);
 
-  &:disabled > slider { @include button(insensitive); }
+      &:active { background-color: mix($selected_bg_color, black, 60%); }
+    }
+
+    > slider {
+      background-color: $selected_fg_color;
+    }
+  }
 }