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

[Alexander Mikhaylenko <alexm src gnome org>]

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

    stylesheet: Redo color swatches

 src/stylesheet/widgets/_buttons.scss       | 19 +++++++-----
 src/stylesheet/widgets/_color-chooser.scss | 49 ++++++------------------------
 2 files changed, 20 insertions(+), 48 deletions(-)
---
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 5217dadb..dfab7f69 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -296,17 +296,20 @@ 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;
     }
-  }
 
-  @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..5c2c35ff 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,32 @@ colorswatch {
     }
   }
 
-  &.dark {
-    > overlay {
-      color: white;
-    }
-
-    &.activatable:hover > overlay {
-      border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color);
-    }
+  &.dark > overlay {
+    color: white;
   }
 
-  &.light {
-    > overlay {
-      color: black;
-    }
+  &.light > overlay {
+    color: transparentize(black, .25);
 
-    &.activatable:hover > overlay {
-      border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color);
+    @if $variant == 'light' {
+      box-shadow: inset 0 0 0 1px transparentize(black, 0.9);
     }
   }
 
   &: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 +89,7 @@ colorswatch {
   }
 
   &:disabled {
-    opacity: 0.5;
-
-    > overlay {
-      border-color: transparentize(black, 0.4);
-      box-shadow: none;
-    }
+    filter: opacity(.5);
   }
 
   &#editor-color-sample {