[gtk+] Adwaita: colorchooser style rewrite

[Lapo Calamandrei <lapo src gnome org>]

commit e34bb3d483ff81a3f6410361e56ba89b6b7fb3c0
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Wed Oct 8 17:23:45 2014 +0200

    Adwaita: colorchooser style rewrite
    
    To reflect latest Benjamin changes. As a bonus the colorchooser
    looks better to me, same for the scss code.

 gtk/resources/theme/Adwaita/_common.scss           |  110 ++++++++------------
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |   95 +++++++++--------
 gtk/resources/theme/Adwaita/gtk-contained.css      |   95 +++++++++--------
 3 files changed, 144 insertions(+), 156 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index fcd7461..ddc2459 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -2774,46 +2774,9 @@ GtkInfoBar {
  *****************/
 
 GtkColorSwatch {
-  border: 1px solid;
-  @if $variant == light {
-    border-color: transparentize(black,0.7);
-    box-shadow: inset 0 1px 1px transparentize(black, 0.8);
-  }
-  @else {
-    border-color: $borders_color;
-    box-shadow: inset 0 1px 1px transparentize(black, 0.6);
-  }
-
-  &.color-light {
-    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 {
-    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; }
-    }
-  }
-
-  &:hover {
-   border-color: if($variant=='light', transparentize(black, 0.5),
-                                       $backdrop_borders_color);
-  }
-
-  &:backdrop {
-    border-color: if($variant=='light', transparentize(black,0.8),
-                                        $backdrop_borders_color);
-    box-shadow: none;
-  }
+  box-shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
 
+  // border rounding
   &.top {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
@@ -2833,37 +2796,52 @@ GtkColorSwatch {
   &:only-child {
     border-radius: 5px;
   }
-  &.overlay, &.overlay:hover {
-    /* turn off everything from regular color swatch */
-    border-width: 0px;
-    border-radius: 50%;
-    box-shadow: none;
+
+  // hover effect
+  &:hover {
+    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 if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.6));
+  }
+  &:backdrop {
     background-image: none;
-    &:selected {
-      border-width: 2px;
-      &.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);
-      }
+    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 {
+    border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
+    &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
+  }
+
+  // make the add color button looks like, well, a button
+  &#add-color-button {
+    @include button(normal);
+    &:hover { @include button(hover); }
+    &:backdrop { @include button(backdrop); }
   }
 }
 
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 94bb415..8086ba4 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -4156,26 +4156,7 @@ GtkInfoBar {
  * Color Chooser *
  *****************/
 GtkColorSwatch {
-  border: 1px solid;
-  border-color: #1c1f1f;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4); }
-  GtkColorSwatch.color-light {
-    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 {
-    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: #1e2222; }
-  GtkColorSwatch:backdrop {
-    border-color: #1e2222;
-    box-shadow: none; }
+  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: 5px;
     border-top-right-radius: 5px; }
@@ -4190,32 +4171,56 @@ GtkColorSwatch {
     border-bottom-right-radius: 5px; }
   GtkColorSwatch:only-child {
     border-radius: 5px; }
-  GtkColorSwatch.overlay, GtkColorSwatch.overlay:hover {
-    /* turn off everything from regular color swatch */
-    border-width: 0px;
-    border-radius: 50%;
-    box-shadow: none;
-    background-image: none; }
-    GtkColorSwatch.overlay:selected, GtkColorSwatch.overlay:hover:selected {
-      border-width: 2px; }
-      GtkColorSwatch.overlay:selected.color-light, GtkColorSwatch.overlay:selected.color-light:hover, 
GtkColorSwatch.overlay:hover:selected.color-light, GtkColorSwatch.overlay:hover:selected.color-light:hover {
-        color: rgba(0, 0, 0, 0.3);
-        border-color: rgba(0, 0, 0, 0.3); }
-      GtkColorSwatch.overlay:selected.color-dark, GtkColorSwatch.overlay:selected.color-dark:hover, 
GtkColorSwatch.overlay:hover:selected.color-dark, GtkColorSwatch.overlay:hover:selected.color-dark:hover {
-        color: rgba(255, 255, 255, 0.5);
-        border-color: rgba(255, 255, 255, 0.5); }
-
-GtkColorChooserWidget #add-color-button {
-  border-color: #2a2f2f;
-  background-color: #2a2f2f;
-  color: #393f3f;
-  box-shadow: none; }
-  GtkColorChooserWidget #add-color-button:hover {
+  GtkColorSwatch:hover {
+    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 {
+    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), 0 1px rgba(238, 238, 236, 0.1); }
+    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 {
+    border: 1px solid #1c1f1f; }
+    GtkColorSwatch.overlay:hover {
+      border-color: black; }
+  GtkColorSwatch#add-color-button {
+    color: #eeeeec;
+    outline-color: rgba(238, 238, 236, 0.3);
     border-color: #1c1f1f;
-    background-color: #1c1f1f; }
-  GtkColorChooserWidget #add-color-button:backdrop {
-    border-color: #2b3030;
-    background-color: #2b3030; }
+    background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
+    text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
+    icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
+    GtkColorSwatch#add-color-button:hover {
+      color: #eeeeec;
+      outline-color: rgba(238, 238, 236, 0.3);
+      border-color: #1c1f1f;
+      background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
+      text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+      icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
+    GtkColorSwatch#add-color-button:backdrop {
+      color: #c9cbc9;
+      border-color: #1e2222;
+      background-image: linear-gradient(to bottom, #393f3f);
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); }
 
 /********
  * Misc *
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 5ddcdb5..ad0bf1e 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -4317,26 +4317,7 @@ GtkInfoBar {
  * Color Chooser *
  *****************/
 GtkColorSwatch {
-  border: 1px solid;
-  border-color: rgba(0, 0, 0, 0.3);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); }
-  GtkColorSwatch.color-light {
-    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 {
-    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: none; }
+  box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
   GtkColorSwatch.top {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px; }
@@ -4351,32 +4332,56 @@ GtkColorSwatch {
     border-bottom-right-radius: 5px; }
   GtkColorSwatch:only-child {
     border-radius: 5px; }
-  GtkColorSwatch.overlay, GtkColorSwatch.overlay:hover {
-    /* turn off everything from regular color swatch */
-    border-width: 0px;
-    border-radius: 50%;
-    box-shadow: none;
-    background-image: none; }
-    GtkColorSwatch.overlay:selected, GtkColorSwatch.overlay:hover:selected {
-      border-width: 2px; }
-      GtkColorSwatch.overlay:selected.color-light, GtkColorSwatch.overlay:selected.color-light:hover, 
GtkColorSwatch.overlay:hover:selected.color-light, GtkColorSwatch.overlay:hover:selected.color-light:hover {
-        color: rgba(0, 0, 0, 0.3);
-        border-color: rgba(0, 0, 0, 0.3); }
-      GtkColorSwatch.overlay:selected.color-dark, GtkColorSwatch.overlay:selected.color-dark:hover, 
GtkColorSwatch.overlay:hover:selected.color-dark, GtkColorSwatch.overlay:hover:selected.color-dark:hover {
-        color: rgba(255, 255, 255, 0.5);
-        border-color: rgba(255, 255, 255, 0.5); }
-
-GtkColorChooserWidget #add-color-button {
-  border-color: #c7c7c7;
-  background-color: #c7c7c7;
-  color: #ededed;
-  box-shadow: none; }
-  GtkColorChooserWidget #add-color-button:hover {
+  GtkColorSwatch:hover {
+    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 {
+    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), 0 1px white; }
+    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 {
+    border: 1px solid rgba(0, 0, 0, 0.3); }
+    GtkColorSwatch.overlay:hover {
+      border-color: rgba(0, 0, 0, 0.5); }
+  GtkColorSwatch#add-color-button {
+    color: #2e3436;
+    outline-color: rgba(46, 52, 54, 0.3);
     border-color: #a1a1a1;
-    background-color: #a1a1a1; }
-  GtkColorChooserWidget #add-color-button:backdrop {
-    border-color: #cacaca;
-    background-color: #cacaca; }
+    background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
+    text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+    icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+    box-shadow: inset 0 1px white, 0 1px white; }
+    GtkColorSwatch#add-color-button:hover {
+      color: #2e3436;
+      outline-color: rgba(46, 52, 54, 0.3);
+      border-color: #a1a1a1;
+      background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
+      text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+      icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+      box-shadow: inset 0 1px white, 0 1px white; }
+    GtkColorSwatch#add-color-button:backdrop {
+      color: #54595a;
+      border-color: #a8a8a8;
+      background-image: linear-gradient(to bottom, #ededed);
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
 
 /********
  * Misc *