[gtk+] HighContrast: sync color picker changes with Adwaita

[Jakub Steiner <jimmac src gnome org>]

commit 296fe0869581ca68b6de982a21695715ea0a9271
Author: Jakub Steiner <jimmac gmail com>
Date:   Thu Apr 16 00:47:40 2015 +0200

    HighContrast: sync color picker changes with Adwaita

 gtk/theme/HighContrast/_common.scss |  117 ++++++++++++++++++++---------------
 gtk/theme/HighContrast/gtk.css      |  107 +++++++++++++++++++-------------
 2 files changed, 131 insertions(+), 93 deletions(-)
---
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index f4f01ad..ffeca36 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -2209,35 +2209,26 @@ GtkInfoBar {
  *****************/
 
 GtkColorSwatch {
+  // This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other 
one
+  // is GtkColorSwatch > .overlay {}, GtkColorSwatch has the programmatically set background, so most of the 
style
+  // is applied to the overlay box.
 
-  border: 1px solid transparentize(black,0.7);
-  box-shadow: inset 0 1px 1px transparentize(black, 0.8);
+  $_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
 
-  &.color-light {
-    color: black;
-    outline-color: transparentize(black, 0.7);
-    &:hover {
-      background-image: linear-gradient(to bottom,
-                                        transparentize(white, 1) 40%,
-                                        transparentize(white, 0.6));
-      &:backdrop { background-image: none; }
-    }
-  }
-  &.color-dark {
-    color: white;
-    outline-color: transparentize(white, 0.5);
-    &:hover {
-       background-image: linear-gradient(to bottom,
-                                        transparentize(white, 1) 40%,
-                                        transparentize(white, 0.8));
-       &:backdrop { background-image: none; }
+  box-shadow: $_colorswatch_shadow;
+
+  // take care of colorswatches on selected elements
+  :selected & {
+    box-shadow: none;
+    &.overlay, &.overlay:hover {
+      border-color: $selected_fg_color;
     }
   }
 
-  &:hover { border-color: transparentize(black, 0.5); }
-
-  &:backdrop { border-color: transparentize(black,0.8); box-shadow: none; }
+  // we need to re-set the shadow here since it get axed by the previous bit
+  &:selected { box-shadow: $_colorswatch_shadow; }
 
+  // border rounding
   &.top {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
@@ -2246,42 +2237,70 @@ GtkColorSwatch {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
   }
-  &.left, &:first-child {
+  &.left, &:first-child:not(.overlay), &:first-child:not(.top) > .overlay {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
   }
-  &.right, &:last-child {
+  &.right, &:last-child:not(.overlay), &:last-child:not(.bottom) > .overlay {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
   }
-  &:only-child {
-    border-radius: 5px;
+  &:only-child:not(.overlay), &:only-child > .overlay { border-radius: 5px; }
+  // nth-child is used for the custom colors row.
+  // the :not() madness is needed since actually the overlay is selectable by GtkColorSwatch > .overlay
+  // and GtkColorSwatch.overlay, I know it's weird, but this is gtk+.
+
+  // hover effect
+  &:hover,
+  &:hover:selected {
+    background-image: linear-gradient(135deg, transparentize(white, 0.3),
+                                              transparentize(white, 1) 50%);
+    box-shadow: inset 0 1px transparentize(white, 0.6),
+                inset 0 -1px transparentize(black, 0.6);
   }
-  &.color-active-badge {
-    border-width: 2px;
-    &:hover { background-image: none; }
-    &.color-light, &.color-light:hover {
-      color: transparentize(black,0.7);
-      border-color: transparentize(black,0.7);
-    }
-    &.color-dark, &.color-dark:hover {
-      color: transparentize(white,0.5);
-      border-color: transparentize(white,0.5);
+  &:backdrop,
+  &:backdrop:selected {
+    background-image: none;
+    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; }
   }
-}
-GtkColorChooserWidget #add-color-button {
-  border-color: mix($borders_color,$bg_color,50%);
-  background-color: mix($borders_color,$bg_color,50%);
-  color: $bg_color;
-  box-shadow: none;
-  &:hover {
-    border-color: $borders_color;
-    background-color: $borders_color;
+
+  // indicator and keynav outline colors, color-dark is a color with luminosity lower then 50%
+  &.color-dark {
+    color: white;
+    outline-color: transparentize(black, 0.7);
+    &:backdrop { color: transparentize(white, 0.7); }
   }
-  &:backdrop {
-    border-color: mix($backdrop_borders_color,$backdrop_bg_color,50%);
-    background-color: mix($backdrop_borders_color,$backdrop_bg_color,50%);
+  &.color-light {
+    color: black;
+    outline-color: transparentize(white, 0.5);
+    &:backdrop { color: transparentize(black, 0.7); }
+  }
+
+  // border color
+  &.overlay,
+  &.overlay:selected {
+    border: 1px solid $borders_color;
+    &:hover { border-color: black; }
+  }
+
+  // make the add color button looks like, well, a button
+  &#add-color-button {
+    border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi
+    border-width: 1px;   // translucent on the colored background, here it's not necessary so they need to 
be set
+    @include button(normal);
+    &:hover { @include button(hover); }
+    &:backdrop { @include button(backdrop); }
+    .overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat
   }
 }
 
diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index 3e6e475..7602981 100644
--- a/gtk/theme/HighContrast/gtk.css
+++ b/gtk/theme/HighContrast/gtk.css
@@ -2542,63 +2542,82 @@ GtkInfoBar {
  * Color Chooser *
  *****************/
 GtkColorSwatch {
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); }
-  GtkColorSwatch.color-light {
-    color: black;
-    outline-color: rgba(0, 0, 0, 0.3); }
-    GtkColorSwatch.color-light:hover {
-      background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4)); }
-      GtkColorSwatch.color-light:hover:backdrop {
-        background-image: none; }
-  GtkColorSwatch.color-dark {
-    color: white;
-    outline-color: rgba(255, 255, 255, 0.5); }
-    GtkColorSwatch.color-dark:hover {
-      background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2)); }
-      GtkColorSwatch.color-dark:hover:backdrop {
-        background-image: none; }
-  GtkColorSwatch:hover {
-    border-color: rgba(0, 0, 0, 0.5); }
-  GtkColorSwatch:backdrop {
-    border-color: rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), _widget_edge(); }
+  :selected GtkColorSwatch {
     box-shadow: none; }
+    :selected GtkColorSwatch.overlay, :selected GtkColorSwatch.overlay:hover {
+      border-color: #fff; }
+  GtkColorSwatch:selected {
+    box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), _widget_edge(); }
   GtkColorSwatch.top {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px; }
   GtkColorSwatch.bottom {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px; }
-  GtkColorSwatch.left, GtkColorSwatch:first-child {
+  GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay), GtkColorSwatch:first-child:not(.top) > 
.overlay {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px; }
-  GtkColorSwatch.right, GtkColorSwatch:last-child {
+  GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay), GtkColorSwatch:last-child:not(.bottom) > 
.overlay {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px; }
-  GtkColorSwatch:only-child {
+  GtkColorSwatch:only-child:not(.overlay), GtkColorSwatch:only-child > .overlay {
     border-radius: 5px; }
-  GtkColorSwatch.color-active-badge {
-    border-width: 2px; }
-    GtkColorSwatch.color-active-badge:hover {
+  GtkColorSwatch:hover, GtkColorSwatch: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); }
+  GtkColorSwatch:backdrop, GtkColorSwatch:backdrop:selected {
+    background-image: none;
+    box-shadow: none; }
+  GtkColorEditor GtkColorSwatch {
+    border-radius: 3px; }
+    GtkColorEditor GtkColorSwatch:hover {
+      background-image: none;
+      box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), _widget_edge(); }
+    GtkColorEditor GtkColorSwatch:backdrop {
+      box-shadow: none; }
+  GtkColorSwatch.color-dark {
+    color: white;
+    outline-color: rgba(0, 0, 0, 0.3); }
+    GtkColorSwatch.color-dark:backdrop {
+      color: rgba(255, 255, 255, 0.3); }
+  GtkColorSwatch.color-light {
+    color: black;
+    outline-color: rgba(255, 255, 255, 0.5); }
+    GtkColorSwatch.color-light:backdrop {
+      color: rgba(0, 0, 0, 0.3); }
+  GtkColorSwatch.overlay, GtkColorSwatch.overlay:selected {
+    border: 1px solid #7f7f7f; }
+    GtkColorSwatch.overlay:hover, GtkColorSwatch.overlay:selected:hover {
+      border-color: black; }
+  GtkColorSwatch#add-color-button {
+    border-style: solid;
+    border-width: 1px;
+    border-width: 2px;
+    border-style: solid;
+    color: #000;
+    background-image: none;
+    background-color: #fff;
+    border-color: #7f7f7f; }
+    GtkColorSwatch#add-color-button:hover {
+      border-width: 2px;
+      border-style: solid;
+      color: #000;
+      background-color: #fff;
+      border-color: #7f7f7f;
       background-image: none; }
-    GtkColorSwatch.color-active-badge.color-light, GtkColorSwatch.color-active-badge.color-light:hover {
-      color: rgba(0, 0, 0, 0.3);
-      border-color: rgba(0, 0, 0, 0.3); }
-    GtkColorSwatch.color-active-badge.color-dark, GtkColorSwatch.color-active-badge.color-dark:hover {
-      color: rgba(255, 255, 255, 0.5);
-      border-color: rgba(255, 255, 255, 0.5); }
-
-GtkColorChooserWidget #add-color-button {
-  border-color: #bfbfbf;
-  background-color: #bfbfbf;
-  color: #fff;
-  box-shadow: none; }
-  GtkColorChooserWidget #add-color-button:hover {
-    border-color: #7f7f7f;
-    background-color: #7f7f7f; }
-  GtkColorChooserWidget #add-color-button:backdrop {
-    border-color: #c5c5c5;
-    background-color: #c5c5c5; }
+    GtkColorSwatch#add-color-button:backdrop {
+      border-width: 2px;
+      border-style: solid;
+      color: #000;
+      background-color: #fff;
+      border-color: #8b8b8b;
+      background-image: none;
+      text-shadow: none;
+      icon-shadow: none; }
+    GtkColorSwatch#add-color-button .overlay {
+      border-width: 2px;
+      border-style: solid; }
 
 /**********************
  * Window Decorations *