[libadwaita/wip/exalm/stylesheet2: 81/97] stylesheet: Split color chooser styles into a separate file

[Alexander Mikhaylenko <alexm src gnome org>]

commit f9f2d8ac055b345880720ac34f327b5795a870e3
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Apr 9 13:55:15 2021 +0500

    stylesheet: Split color chooser styles into a separate file

 src/stylesheet/_common.scss                | 150 -----------------------------
 src/stylesheet/_widgets.scss               |   1 +
 src/stylesheet/meson.build                 |   1 +
 src/stylesheet/widgets/_color-chooser.scss | 145 ++++++++++++++++++++++++++++
 4 files changed, 147 insertions(+), 150 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index 274ba98..3d0ecd4 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -533,156 +533,6 @@ tooltip {
 }
 
 
-/*****************
- * Color Chooser *
- *****************/
-colorswatch {
-  // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
-  // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
-  // applied to the overlay box.
-
-  transition: $focus_transition;
-
-  @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
-  // to avoid the artifacts caused by rounded corner anti-aliasing the base color
-  // sports a bigger radius.
-  // nth-child is needed by the custom color strip.
-
-  &.top {
-    border-top-left-radius: $_colorswatch_radius + 0.5px;
-    border-top-right-radius: $_colorswatch_radius + 0.5px;
-
-    > overlay {
-      border-top-left-radius: $_colorswatch_radius;
-      border-top-right-radius: $_colorswatch_radius;
-    }
-  }
-
-  &.bottom {
-    border-bottom-left-radius: $_colorswatch_radius + 0.5px;
-    border-bottom-right-radius: $_colorswatch_radius + 0.5px;
-
-    > overlay {
-      border-bottom-left-radius: $_colorswatch_radius;
-      border-bottom-right-radius: $_colorswatch_radius;
-    }
-  }
-
-  &.left,
-  &:first-child:not(.top) {
-    border-top-left-radius: $_colorswatch_radius + 0.5px;
-    border-bottom-left-radius: $_colorswatch_radius + 0.5px;
-
-    > overlay {
-      border-top-left-radius: $_colorswatch_radius;
-      border-bottom-left-radius: $_colorswatch_radius;
-    }
-  }
-
-  &.right,
-  &:last-child:not(.bottom) {
-    border-top-right-radius: $_colorswatch_radius + 0.5px;
-    border-bottom-right-radius: $_colorswatch_radius + 0.5px;
-
-    > overlay {
-      border-top-right-radius: $_colorswatch_radius;
-      border-bottom-right-radius: $_colorswatch_radius;
-    }
-  }
-
-  &.dark {
-    > overlay {
-      color: white;
-    }
-
-    &.activatable:hover > overlay {
-      border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color);
-    }
-  }
-
-  &.light {
-    > overlay {
-      color: black;
-    }
-
-    &.activatable:hover > overlay {
-      border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color);
-    }
-  }
-
-  &: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;
-    }
-
-    &.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;
-    }
-  }
-
-  > 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 {
-    border-radius: $_colorswatch_radius 0 0 $_colorswatch_radius;
-
-    &:only-child { border-radius: $_colorswatch_radius; }
-
-    > overlay {
-      @include button(normal);
-    }
-
-    &.activatable:hover > overlay {
-      @include button(hover);
-    }
-  }
-
-  &:disabled {
-    opacity: 0.5;
-
-    > overlay {
-      border-color: transparentize(black, 0.4);
-      box-shadow: none;
-    }
-  }
-
-  row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
-
-  &#editor-color-sample {
-    border-radius: 4px;
-
-    > overlay { border-radius: 4.5px; }
-  }
-}
-
-plane {
-  transition: $focus_transition;
-
-  @include focus-ring($offset: 2px, $outer: true);
-}
-
-// colorscale popup
-colorchooser .popover.osd { border-radius: 5px; }
-
-
 /********
  * Misc *
  ********/
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 863473f..d410769 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -1,5 +1,6 @@
 @import 'widgets/buttons';
 @import 'widgets/checks';
+@import 'widgets/color-chooser';
 @import 'widgets/dropdowns';
 @import 'widgets/entries';
 @import 'widgets/header-bar';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index 22bf8ab..1899fe8 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -22,6 +22,7 @@ if not fs.exists('Adwaita-light.css')
 
       'widgets/_buttons.scss',
       'widgets/_checks.scss',
+      'widgets/_color-chooser.scss',
       'widgets/_dropdowns.scss',
       'widgets/_entries.scss',
       'widgets/_header-bar.scss',
diff --git a/src/stylesheet/widgets/_color-chooser.scss b/src/stylesheet/widgets/_color-chooser.scss
new file mode 100644
index 0000000..bac6e9f
--- /dev/null
+++ b/src/stylesheet/widgets/_color-chooser.scss
@@ -0,0 +1,145 @@
+colorswatch {
+  // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
+  // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
+  // applied to the overlay box.
+
+  transition: $focus_transition;
+
+  @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
+  // to avoid the artifacts caused by rounded corner anti-aliasing the base color
+  // sports a bigger radius.
+  // nth-child is needed by the custom color strip.
+
+  &.top {
+    border-top-left-radius: $_colorswatch_radius + 0.5px;
+    border-top-right-radius: $_colorswatch_radius + 0.5px;
+
+    > overlay {
+      border-top-left-radius: $_colorswatch_radius;
+      border-top-right-radius: $_colorswatch_radius;
+    }
+  }
+
+  &.bottom {
+    border-bottom-left-radius: $_colorswatch_radius + 0.5px;
+    border-bottom-right-radius: $_colorswatch_radius + 0.5px;
+
+    > overlay {
+      border-bottom-left-radius: $_colorswatch_radius;
+      border-bottom-right-radius: $_colorswatch_radius;
+    }
+  }
+
+  &.left,
+  &:first-child:not(.top) {
+    border-top-left-radius: $_colorswatch_radius + 0.5px;
+    border-bottom-left-radius: $_colorswatch_radius + 0.5px;
+
+    > overlay {
+      border-top-left-radius: $_colorswatch_radius;
+      border-bottom-left-radius: $_colorswatch_radius;
+    }
+  }
+
+  &.right,
+  &:last-child:not(.bottom) {
+    border-top-right-radius: $_colorswatch_radius + 0.5px;
+    border-bottom-right-radius: $_colorswatch_radius + 0.5px;
+
+    > overlay {
+      border-top-right-radius: $_colorswatch_radius;
+      border-bottom-right-radius: $_colorswatch_radius;
+    }
+  }
+
+  &.dark {
+    > overlay {
+      color: white;
+    }
+
+    &.activatable:hover > overlay {
+      border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color);
+    }
+  }
+
+  &.light {
+    > overlay {
+      color: black;
+    }
+
+    &.activatable:hover > overlay {
+      border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color);
+    }
+  }
+
+  &: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;
+    }
+
+    &.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;
+    }
+  }
+
+  > 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 {
+    border-radius: $_colorswatch_radius 0 0 $_colorswatch_radius;
+
+    &:only-child { border-radius: $_colorswatch_radius; }
+
+    > overlay {
+      @include button(normal);
+    }
+
+    &.activatable:hover > overlay {
+      @include button(hover);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+
+    > overlay {
+      border-color: transparentize(black, 0.4);
+      box-shadow: none;
+    }
+  }
+
+  row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
+
+  &#editor-color-sample {
+    border-radius: 4px;
+
+    > overlay { border-radius: 4.5px; }
+  }
+}
+
+plane {
+  transition: $focus_transition;
+
+  @include focus-ring($offset: 2px, $outer: true);
+}
+
+// colorscale popup
+colorchooser .popover.osd { border-radius: 5px; }