[libadwaita/wip/exalm/colorswatches] stylesheet: Redo color swatches

[Alexander Mikhaylenko <alexm src gnome org>]

commit f898a8b5c7e12ee6364f17b971ef0cd847439d9f
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Thu Jun 17 15:59:52 2021 +0500

    stylesheet: Redo color swatches

 src/stylesheet/widgets/_buttons.scss       | 20 ++++++-----
 src/stylesheet/widgets/_color-chooser.scss | 54 ++++++++++++------------------
 2 files changed, 34 insertions(+), 40 deletions(-)
---
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 5217dadb..dec34885 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -296,17 +296,21 @@ button.color {
   padding: 5px;
 
   > colorswatch:only-child {
-    &, > overlay { border-radius: 0; }
+    border-radius: 2.5px;
 
-    @if $variant == 'light' {
-      box-shadow: 0 1px $shadow_color;
+    > overlay {
+      border-radius: 2px;
+      background: none;
     }
-  }
 
-  @if $variant == 'light' {
-    .osd &, & {
-      &:active,
-      &:checked { colorswatch:only-child { box-shadow: none; }}
+    &:disabled {
+      filter: none;
+    }
+
+    @if $variant == 'light' {
+      &.light > overlay {
+        border-color: transparentize(black, .8);
+      }
     }
   }
 }
diff --git a/src/stylesheet/widgets/_color-chooser.scss b/src/stylesheet/widgets/_color-chooser.scss
index a8935c47..9b1c1a0f 100644
--- a/src/stylesheet/widgets/_color-chooser.scss
+++ b/src/stylesheet/widgets/_color-chooser.scss
@@ -7,8 +7,6 @@ colorswatch {
 
   @include focus-ring($width: 4px, $offset: -2px);
 
-  &:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state
-
   $_colorswatch_radius: 5px;
 
   // base color corners rounding
@@ -58,56 +56,53 @@ colorswatch {
     }
   }
 
+  &:hover > overlay {
+    background-image: -gtk-icontheme("object-select-symbolic");
+    background-position: center;
+    background-size: 16px;
+    background-repeat: no-repeat;
+  }
+
   &.dark {
-    > overlay {
-      color: white;
+    &.activatable:hover > overlay {
+      color: transparentize(white, .5);
     }
 
-    &.activatable:hover > overlay {
-      border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color);
+    &.activatable:selected > overlay {
+      color: white;
     }
   }
 
   &.light {
     > overlay {
-      color: black;
+      @if $variant == 'light' {
+        box-shadow: inset 0 0 0 1px transparentize(black, 0.9);
+      }
     }
 
     &.activatable:hover > overlay {
-      border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color);
+      color: transparentize(black, .65);
+    }
+
+    &.activatable:selected > overlay {
+      color: transparentize(black, .25);
     }
   }
 
   &:drop(active) {
-    box-shadow: none;
-
     &.light > overlay {
-      border-color: $drop_target_color;
-      box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color),
-                  inset 0 0 0 1px $drop_target_color;
+      box-shadow: inset 0 0 0 2px $drop_target_color;
     }
 
     &.dark > overlay {
-      border-color: $drop_target_color;
-      box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(black, 0.7), $borders_color),
-                  inset 0 0 0 1px $drop_target_color;
+      box-shadow: inset 0 0 0 2px $drop_target_color;
     }
   }
 
-  > overlay {
-    border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
-  }
-
-  &.activatable:hover > overlay {
-    box-shadow: inset 0 1px transparentize(white, 0.6),
-                inset 0 -1px transparentize(black, 0.8);
-  }
-
   &#add-color-button {
     > overlay {
       @extend %button_basic;
 
-      border: none;
       border-radius: $_colorswatch_radius 0 0 $_colorswatch_radius;
     }
 
@@ -115,12 +110,7 @@ colorswatch {
   }
 
   &:disabled {
-    opacity: 0.5;
-
-    > overlay {
-      border-color: transparentize(black, 0.4);
-      box-shadow: none;
-    }
+    filter: opacity(.5);
   }
 
   &#editor-color-sample {