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.

7 files changed, 19 insertions, 50 deletions

diff --git a/gtk/gtkcoloreditor.c b/gtk/gtkcoloreditor.c
index 8fbc8d5dbc..fa80b35423 100644
--- a/gtk/gtkcoloreditor.c
+++ b/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
diff --git a/gtk/gtkcolorswatch.c b/gtk/gtkcolorswatch.c
index 9296320e11..05d8734da9 100644
--- a/gtk/gtkcolorswatch.c
+++ b/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)
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index b6290de7a9..8b6ef0d005 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/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;
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index f78854c363..be48970b0f 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/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); }
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index abfdfbf168..c73d400cb4 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/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); }
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 99b0e1a5e3..bbf3111f1b 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/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;
diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index d046e11b56..7e12fc1619 100644
--- a/gtk/theme/HighContrast/gtk.css
+++ b/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); }