[gtk+/gtk-3-16] Adwaita: colorpicker fixes.

[Matthias Clasen <matthiasc src gnome org>]

commit e9d65c9d512c4e403d3bf943b8525e058f9cfd6c
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Thu Apr 16 09:57:23 2015 +0200

    Adwaita: colorpicker fixes.
    
    Added another :not() to fix the first and last swatches in the
    first section of colorpicker.
    Dodge the artifacts due to stacked anti-aliased rounded corners by
    increasing the radius of the base object by 1px.

 gtk/theme/Adwaita/_common.scss           |   67 +++++++++++++++++++++--------
 gtk/theme/Adwaita/gtk-contained-dark.css |   27 ++++++++++--
 gtk/theme/Adwaita/gtk-contained.css      |   27 ++++++++++--
 3 files changed, 92 insertions(+), 29 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 3db8343..74da12c 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -816,7 +816,7 @@ $_dot_color: if($variant=='light', $selected_bg_color,
 GtkColorButton.button {
   padding: 5px; // Uniform padding on the GtkColorButton
 
-  GtkColorSwatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets 
overridden by the 
+  GtkColorSwatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets 
overridden by the
                                           // colorpicker style, otherwise
     border-radius: 0;
     box-shadow: inset 0 1px 1px transparentize(black, 0.9),
@@ -3098,6 +3098,8 @@ GtkColorSwatch {
 
   $_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
 
+  $_colorswatch_radius: 5px;
+
   box-shadow: $_colorswatch_shadow;
 
   // take care of colorswatches on selected elements
@@ -3111,27 +3113,48 @@ GtkColorSwatch {
   // we need to re-set the shadow here since it get axed by the previous bit
   &:selected { box-shadow: $_colorswatch_shadow; }
 
-  // border rounding
+  // 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.
+  // 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+, not a browser.
   &.top {
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
+    border-top-left-radius: $_colorswatch-radius + 1px;
+    border-top-right-radius: $_colorswatch-radius + 1px;
   }
   &.bottom {
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: $_colorswatch-radius + 1px;
+    border-bottom-right-radius: $_colorswatch-radius + 1px;
   }
-  &.left, &:first-child:not(.overlay), &:first-child:not(.top) > .overlay {
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
+  &.left, &:first-child:not(.overlay):not(.top) {
+    border-top-left-radius: $_colorswatch-radius + 1px;
+    border-bottom-left-radius: $_colorswatch-radius + 1px;
   }
-  &.right, &:last-child:not(.overlay), &:last-child:not(.bottom) > .overlay {
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
+  &.right, &:last-child:not(.overlay):not(.bottom) {
+    border-top-right-radius: $_colorswatch-radius + 1px;
+    border-bottom-right-radius: $_colorswatch-radius + 1px;
   }
-  &: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+.
+  &:only-child:not(.overlay) { border-radius: $_colorswatch-radius + 1px; }
+
+  // overlay corner rounding
+  &.top > .overlay {
+    border-top-left-radius: $_colorswatch-radius;
+    border-top-right-radius: $_colorswatch-radius;
+  }
+  &.bottom > .overlay {
+    border-bottom-left-radius: $_colorswatch-radius;
+    border-bottom-right-radius: $_colorswatch-radius;
+  }
+  &:first-child:not(.top) > .overlay {
+    border-top-left-radius: $_colorswatch-radius;
+    border-bottom-left-radius: $_colorswatch-radius;
+  }
+  &:last-child:not(.bottom) > .overlay {
+    border-top-right-radius: $_colorswatch-radius;
+    border-bottom-right-radius: $_colorswatch-radius;
+  }
+  &:only-child > .overlay { border-radius: $_colorswatch-radius; }
 
   // hover effect
   &:hover,
@@ -3140,9 +3163,15 @@ GtkColorSwatch {
                                               transparentize(white, 1) 50%);
     box-shadow: inset 0 1px transparentize(white, 0.6),
                 inset 0 -1px if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.6));
+    &.color-dark { // swatches with colors with luminosity lower than 50% get the color-dark class
+      background-image: linear-gradient(135deg, transparentize(white, 0.5),
+                                                transparentize(white, 1) 50%);
+    }
   }
   &:backdrop,
-  &:backdrop:selected {
+  &:backdrop:selected
+  &.color-dark:backdrop,
+  &.color-dark:backdrop:selected {
     background-image: none;
     box-shadow: none;
   }
@@ -3157,7 +3186,7 @@ GtkColorSwatch {
     &:backdrop { box-shadow: none; }
   }
 
-  // indicator and keynav outline colors, color-dark is a color with luminosity lower then 50%
+  // indicator and keynav outline colors
   &.color-dark {
     color: white;
     outline-color: transparentize(black, 0.7);
@@ -3330,7 +3359,7 @@ GtkVolumeButton.button { padding: 8px; }
 }
 
 // Overflow indication, works similarly to the overshoot, the size if fixed tho.
-.undershoot { 
+.undershoot {
   &.top {
     @include undershoot(top);
   }
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 28aa9af..a70361b 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -4242,23 +4242,40 @@ GtkColorSwatch {
   GtkColorSwatch:selected {
     box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
   GtkColorSwatch.top {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px; }
+  GtkColorSwatch.bottom {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px; }
+  GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay):not(.top) {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px; }
+  GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay):not(.bottom) {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px; }
+  GtkColorSwatch:only-child:not(.overlay) {
+    border-radius: 6px; }
+  GtkColorSwatch.top > .overlay {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px; }
-  GtkColorSwatch.bottom {
+  GtkColorSwatch.bottom > .overlay {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px; }
-  GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay), GtkColorSwatch:first-child:not(.top) > 
.overlay {
+  GtkColorSwatch:first-child:not(.top) > .overlay {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px; }
-  GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay), GtkColorSwatch:last-child:not(.bottom) > 
.overlay {
+  GtkColorSwatch:last-child:not(.bottom) > .overlay {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px; }
-  GtkColorSwatch:only-child:not(.overlay), GtkColorSwatch:only-child > .overlay {
+  GtkColorSwatch:only-child > .overlay {
     border-radius: 5px; }
   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 {
+    GtkColorSwatch:hover.color-dark, GtkColorSwatch:hover:selected.color-dark {
+      background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); }
+  GtkColorSwatch:backdrop, GtkColorSwatch:backdrop:selected
+  GtkColorSwatch.color-dark:backdrop, GtkColorSwatch.color-dark:backdrop:selected {
     background-image: none;
     box-shadow: none; }
   GtkColorEditor GtkColorSwatch {
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 687a2af..ede420e 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -4414,23 +4414,40 @@ GtkColorSwatch {
   GtkColorSwatch:selected {
     box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
   GtkColorSwatch.top {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px; }
+  GtkColorSwatch.bottom {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px; }
+  GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay):not(.top) {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px; }
+  GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay):not(.bottom) {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px; }
+  GtkColorSwatch:only-child:not(.overlay) {
+    border-radius: 6px; }
+  GtkColorSwatch.top > .overlay {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px; }
-  GtkColorSwatch.bottom {
+  GtkColorSwatch.bottom > .overlay {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px; }
-  GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay), GtkColorSwatch:first-child:not(.top) > 
.overlay {
+  GtkColorSwatch:first-child:not(.top) > .overlay {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px; }
-  GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay), GtkColorSwatch:last-child:not(.bottom) > 
.overlay {
+  GtkColorSwatch:last-child:not(.bottom) > .overlay {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px; }
-  GtkColorSwatch:only-child:not(.overlay), GtkColorSwatch:only-child > .overlay {
+  GtkColorSwatch:only-child > .overlay {
     border-radius: 5px; }
   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.1); }
-  GtkColorSwatch:backdrop, GtkColorSwatch:backdrop:selected {
+    GtkColorSwatch:hover.color-dark, GtkColorSwatch:hover:selected.color-dark {
+      background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); }
+  GtkColorSwatch:backdrop, GtkColorSwatch:backdrop:selected
+  GtkColorSwatch.color-dark:backdrop, GtkColorSwatch.color-dark:backdrop:selected {
     background-image: none;
     box-shadow: none; }
   GtkColorEditor GtkColorSwatch {