color editor: Redo the non-activatable color swatch

Use a .activatable style class on the color swatch and tie the
hover effect to it. The color editor simply removes this class
now to get an inert color swatch.

This is more flexible and lets us avoid referring to the
GtkColorEditor type in the theme.

gtk/gtkcoloreditor.c

@@ -377,6 +377,8 @@ gtk_color_editor_init (GtkColorEditor *editor)
   gtk_overlay_add_overlay (GTK_OVERLAY (editor->priv->overlay), editor->priv->sv_popup);
   gtk_overlay_add_overlay (GTK_OVERLAY (editor->priv->overlay), editor->priv->h_popup);
   gtk_overlay_add_overlay (GTK_OVERLAY (editor->priv->overlay), editor->priv->a_popup);
+
+  gtk_style_context_remove_class (gtk_widget_get_style_context (editor->priv->swatch), "activatable");
 }
 
 static void

gtk/gtkcolorswatch.c

@@ -31,6 +31,7 @@
 #include "gtkrenderprivate.h"
 #include "gtkcssnodeprivate.h"
 #include "gtkwidgetprivate.h"
+#include "gtkstylecontextprivate.h"
 #include "a11y/gtkcolorswatchaccessibleprivate.h"
 
 
@@ -39,6 +40,9 @@
  * and a subnode named overlay. The main node gets the .light or .dark
  * style classes added depending on the brightness of the color that
  * the swatch is showing.
+ *
+ * The color swatch has the .activatable style class by default. It can
+ * be removed for non-activatable swatches.
  */
 
 struct _GtkColorSwatchPrivate
@@ -93,6 +97,7 @@ static void
 gtk_color_swatch_init (GtkColorSwatch *swatch)
 {
   GtkCssNode *widget_node;
+  GtkStyleContext *context;
 
   swatch->priv = gtk_color_swatch_get_instance_private (swatch);
   swatch->priv->use_alpha = TRUE;
@@ -119,6 +124,9 @@ gtk_color_swatch_init (GtkColorSwatch *swatch)
   gtk_css_node_set_parent (swatch->priv->overlay_node, widget_node);
   gtk_css_node_set_state (swatch->priv->overlay_node, gtk_css_node_get_state (widget_node));
   g_object_unref (swatch->priv->overlay_node);
+
+  context = gtk_widget_get_style_context (GTK_WIDGET (swatch));
+  gtk_style_context_add_class (context, "activatable");
 }
 
 #define INTENSITY(r, g, b) ((r) * 0.30 + (g) * 0.59 + (b) * 0.11)

gtk/theme/Adwaita/_common.scss

@@ -3113,8 +3113,8 @@ colorswatch {
   &:only-child > overlay { border-radius: $_colorswatch-radius; }
 
   // hover effect
-  &:hover,
-  &:hover:selected {
+  &.activatable:hover,
+  &.activatable:hover:selected {
     background-image: linear-gradient(135deg, transparentize(white, 0.3),
                                               transparentize(white, 1) 50%);
     box-shadow: inset 0 1px transparentize(white, 0.6),
@@ -3132,16 +3132,6 @@ colorswatch {
     box-shadow: none;
   }
 
-  // no hover effect for the colorswatch in the color editor
-  GtkColorEditor & {
-    border-radius: 3px; // same radius as the entry
-    &:hover {
-      background-image: none;
-      box-shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
-    }
-    &:backdrop { box-shadow: none; }
-  }
-
   // indicator and keynav outline colors
   &.dark overlay {
     color: white;

gtk/theme/Adwaita/gtk-contained-dark.css

@@ -4280,22 +4280,15 @@ colorswatch {
     border-bottom-right-radius: 5px; }
   colorswatch:only-child > overlay {
     border-radius: 5px; }
-  colorswatch:hover, colorswatch:hover:selected {
+  colorswatch.activatable:hover, colorswatch.activatable:hover:selected {
     background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.4); }
-    colorswatch:hover.dark overlay, colorswatch:hover:selected.dark overlay {
+    colorswatch.activatable:hover.dark overlay, colorswatch.activatable:hover:selected.dark overlay {
       background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); }
   colorswatch:backdrop, colorswatch:backdrop:selected
   colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
     background-image: none;
     box-shadow: none; }
-  GtkColorEditor colorswatch {
-    border-radius: 3px; }
-    GtkColorEditor colorswatch:hover {
-      background-image: none;
-      box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
-    GtkColorEditor colorswatch:backdrop {
-      box-shadow: none; }
   colorswatch.dark overlay {
     color: white;
     outline-color: rgba(255, 255, 255, 0.5); }

gtk/theme/Adwaita/gtk-contained.css

@@ -4452,22 +4452,15 @@ colorswatch {
     border-bottom-right-radius: 5px; }
   colorswatch:only-child > overlay {
     border-radius: 5px; }
-  colorswatch:hover, colorswatch:hover:selected {
+  colorswatch.activatable:hover, colorswatch.activatable:hover:selected {
     background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.1); }
-    colorswatch:hover.dark overlay, colorswatch:hover:selected.dark overlay {
+    colorswatch.activatable:hover.dark overlay, colorswatch.activatable:hover:selected.dark overlay {
       background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); }
   colorswatch:backdrop, colorswatch:backdrop:selected
   colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
     background-image: none;
     box-shadow: none; }
-  GtkColorEditor colorswatch {
-    border-radius: 3px; }
-    GtkColorEditor colorswatch:hover {
-      background-image: none;
-      box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
-    GtkColorEditor colorswatch:backdrop {
-      box-shadow: none; }
   colorswatch.dark overlay {
     color: white;
     outline-color: rgba(255, 255, 255, 0.5); }

gtk/theme/HighContrast/_common.scss

@@ -2408,8 +2408,8 @@ colorswatch {
   // and GtkColorSwatch.overlay, I know it's weird, but this is gtk+.
 
   // hover effect
-  &:hover,
-  &:hover:selected {
+  &.activatable:hover,
+  &.activatable:hover:selected {
     background-image: linear-gradient(135deg, transparentize(white, 0.3),
                                               transparentize(white, 1) 50%);
     box-shadow: inset 0 1px transparentize(white, 0.6),
@@ -2421,16 +2421,6 @@ colorswatch {
     box-shadow: none;
   }
 
-  // no hover effect for the colorswatch in the color editor
-  GtkColorEditor & {
-    border-radius: 3px; // same radius as the entry
-    &:hover {
-      background-image: none;
-      box-shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
-    }
-    &:backdrop { box-shadow: none; }
-  }
-
   // indicator and keynav outline colors, color-dark is a color with luminosity lower then 50%
   &.dark {
     color: white;

gtk/theme/HighContrast/gtk.css

@@ -2626,19 +2626,12 @@ colorswatch {
     border-bottom-right-radius: 5px; }
   colorswatch:only-child:not(overlay), colorswatch:only-child > overlay {
     border-radius: 5px; }
-  colorswatch:hover, colorswatch:hover:selected {
+  colorswatch.activatable:hover, colorswatch.activatable:hover:selected {
     background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.4); }
   colorswatch:backdrop, colorswatch:backdrop:selected {
     background-image: none;
     box-shadow: none; }
-  GtkColorEditor colorswatch {
-    border-radius: 3px; }
-    GtkColorEditor colorswatch:hover {
-      background-image: none;
-      box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px #fff; }
-    GtkColorEditor colorswatch:backdrop {
-      box-shadow: none; }
   colorswatch.dark {
     color: white;
     outline-color: rgba(0, 0, 0, 0.3); }