[gtk+] Adwaita: Adapt to color swatch changes

[Matthias Clasen <matthiasc src gnome org>]

commit 4e8aea012e081c84351e3abb2459926e519a88d8
Author: Matthias Clasen <mclasen redhat com>
Date:   Fri Oct 30 21:44:19 2015 -0400

    Adwaita: Adapt to color swatch changes
    
    This needs more work and simplification.

 gtk/theme/Adwaita/_common.scss           |   40 ++++++++++----------
 gtk/theme/Adwaita/gtk-contained-dark.css |   62 +++++++++++++++---------------
 gtk/theme/Adwaita/gtk-contained.css      |   62 +++++++++++++++---------------
 3 files changed, 82 insertions(+), 82 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 220991c..b6290de 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3047,9 +3047,9 @@ infobar {
  * Color Chooser *
  *****************/
 
-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
+colorswatch {
+  // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
+  // is colorswatch overlay {}, GtkColorSwatch has the programmatically set background, so most of the style
   // is applied to the overlay box.
 
   $_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
@@ -3061,7 +3061,7 @@ GtkColorSwatch {
   // take care of colorswatches on selected elements
   :selected & {
     box-shadow: none;
-    &.overlay, &.overlay:hover {
+    & overlay, & overlay:hover {
       border-color: $selected_fg_color;
     }
   }
@@ -3083,34 +3083,34 @@ GtkColorSwatch {
     border-bottom-left-radius: $_colorswatch-radius + 1px;
     border-bottom-right-radius: $_colorswatch-radius + 1px;
   }
-  &.left, &:first-child:not(.overlay):not(.top) {
+  &.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):not(.bottom) {
+  &.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) { border-radius: $_colorswatch-radius + 1px; }
+  &:only-child:not(overlay) { border-radius: $_colorswatch-radius + 1px; }
 
   // overlay corner rounding
-  &.top > .overlay {
+  &.top > overlay {
     border-top-left-radius: $_colorswatch-radius;
     border-top-right-radius: $_colorswatch-radius;
   }
-  &.bottom > .overlay {
+  &.bottom > overlay {
     border-bottom-left-radius: $_colorswatch-radius;
     border-bottom-right-radius: $_colorswatch-radius;
   }
-  &:first-child:not(.top) > .overlay {
+  &:first-child:not(.top) > overlay {
     border-top-left-radius: $_colorswatch-radius;
     border-bottom-left-radius: $_colorswatch-radius;
   }
-  &:last-child:not(.bottom) > .overlay {
+  &:last-child:not(.bottom) > overlay {
     border-top-right-radius: $_colorswatch-radius;
     border-bottom-right-radius: $_colorswatch-radius;
   }
-  &:only-child > .overlay { border-radius: $_colorswatch-radius; }
+  &:only-child > overlay { border-radius: $_colorswatch-radius; }
 
   // hover effect
   &:hover,
@@ -3119,15 +3119,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
+    &.dark overlay { // swatches with colors with luminosity lower than 50% get the dark class
       background-image: linear-gradient(135deg, transparentize(white, 0.5),
                                                 transparentize(white, 1) 50%);
     }
   }
   &:backdrop,
   &:backdrop:selected
-  &.color-dark:backdrop,
-  &.color-dark:backdrop:selected {
+  &.dark:backdrop,
+  &.dark:backdrop:selected {
     background-image: none;
     box-shadow: none;
   }
@@ -3143,20 +3143,20 @@ GtkColorSwatch {
   }
 
   // indicator and keynav outline colors
-  &.color-dark {
+  &.dark overlay {
     color: white;
     outline-color: transparentize(white, 0.5);
     &:backdrop { color: transparentize(white, 0.7); }
   }
-  &.color-light {
+  &.light overlay {
     color: black;
     outline-color: transparentize(black, 0.5);
     &:backdrop { color: transparentize(black, 0.7); }
   }
 
   // border color
-  &.overlay,
-  &.overlay:selected {
+  & overlay,
+  & overlay:selected {
     border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
     &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
   }
@@ -3168,7 +3168,7 @@ GtkColorSwatch {
     @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
+    overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat
   }
 }
 
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 339dad8..f78854c 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -4244,73 +4244,73 @@ infobar {
 /*****************
  * Color Chooser *
  *****************/
-GtkColorSwatch {
+colorswatch {
   box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
-  :selected GtkColorSwatch {
+  :selected colorswatch {
     box-shadow: none; }
-    :selected GtkColorSwatch.overlay, :selected GtkColorSwatch.overlay:hover {
+    :selected colorswatch overlay, :selected colorswatch overlay:hover {
       border-color: #ffffff; }
-  GtkColorSwatch:selected {
+  colorswatch:selected {
     box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
-  GtkColorSwatch.top {
+  colorswatch.top {
     border-top-left-radius: 6px;
     border-top-right-radius: 6px; }
-  GtkColorSwatch.bottom {
+  colorswatch.bottom {
     border-bottom-left-radius: 6px;
     border-bottom-right-radius: 6px; }
-  GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay):not(.top) {
+  colorswatch.left, colorswatch: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) {
+  colorswatch.right, colorswatch:last-child:not(overlay):not(.bottom) {
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px; }
-  GtkColorSwatch:only-child:not(.overlay) {
+  colorswatch:only-child:not(overlay) {
     border-radius: 6px; }
-  GtkColorSwatch.top > .overlay {
+  colorswatch.top > overlay {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px; }
-  GtkColorSwatch.bottom > .overlay {
+  colorswatch.bottom > overlay {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px; }
-  GtkColorSwatch:first-child:not(.top) > .overlay {
+  colorswatch:first-child:not(.top) > overlay {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px; }
-  GtkColorSwatch:last-child:not(.bottom) > .overlay {
+  colorswatch:last-child:not(.bottom) > overlay {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px; }
-  GtkColorSwatch:only-child > .overlay {
+  colorswatch:only-child > overlay {
     border-radius: 5px; }
-  GtkColorSwatch:hover, GtkColorSwatch:hover:selected {
+  colorswatch:hover, colorswatch: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:hover.color-dark, GtkColorSwatch:hover:selected.color-dark {
+    colorswatch:hover.dark overlay, colorswatch:hover:selected.dark overlay {
       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 {
+  colorswatch:backdrop, colorswatch:backdrop:selected
+  colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
     background-image: none;
     box-shadow: none; }
-  GtkColorEditor GtkColorSwatch {
+  GtkColorEditor colorswatch {
     border-radius: 3px; }
-    GtkColorEditor GtkColorSwatch:hover {
+    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 GtkColorSwatch:backdrop {
+    GtkColorEditor colorswatch:backdrop {
       box-shadow: none; }
-  GtkColorSwatch.color-dark {
+  colorswatch.dark overlay {
     color: white;
     outline-color: rgba(255, 255, 255, 0.5); }
-    GtkColorSwatch.color-dark:backdrop {
+    colorswatch.dark overlay:backdrop {
       color: rgba(255, 255, 255, 0.3); }
-  GtkColorSwatch.color-light {
+  colorswatch.light overlay {
     color: black;
     outline-color: rgba(0, 0, 0, 0.5); }
-    GtkColorSwatch.color-light:backdrop {
+    colorswatch.light overlay:backdrop {
       color: rgba(0, 0, 0, 0.3); }
-  GtkColorSwatch.overlay, GtkColorSwatch.overlay:selected {
+  colorswatch overlay, colorswatch overlay:selected {
     border: 1px solid #1c1f1f; }
-    GtkColorSwatch.overlay:hover, GtkColorSwatch.overlay:selected:hover {
+    colorswatch overlay:hover, colorswatch overlay:selected:hover {
       border-color: black; }
-  GtkColorSwatch#add-color-button {
+  colorswatch#add-color-button {
     border-style: solid;
     border-width: 1px;
     color: #eeeeec;
@@ -4320,7 +4320,7 @@ GtkColorSwatch {
     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 {
+    colorswatch#add-color-button:hover {
       color: #eeeeec;
       outline-color: rgba(238, 238, 236, 0.3);
       border-color: #1c1f1f;
@@ -4328,14 +4328,14 @@ GtkColorSwatch {
       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 {
+    colorswatch#add-color-button:backdrop {
       color: #949796;
       border-color: #1f2222;
       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); }
-    GtkColorSwatch#add-color-button .overlay {
+    colorswatch#add-color-button overlay {
       border-color: transparent;
       background-color: transparent;
       background-image: none;
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 014e6f8..abfdfbf 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -4416,73 +4416,73 @@ infobar {
 /*****************
  * Color Chooser *
  *****************/
-GtkColorSwatch {
+colorswatch {
   box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
-  :selected GtkColorSwatch {
+  :selected colorswatch {
     box-shadow: none; }
-    :selected GtkColorSwatch.overlay, :selected GtkColorSwatch.overlay:hover {
+    :selected colorswatch overlay, :selected colorswatch overlay:hover {
       border-color: #ffffff; }
-  GtkColorSwatch:selected {
+  colorswatch:selected {
     box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
-  GtkColorSwatch.top {
+  colorswatch.top {
     border-top-left-radius: 6px;
     border-top-right-radius: 6px; }
-  GtkColorSwatch.bottom {
+  colorswatch.bottom {
     border-bottom-left-radius: 6px;
     border-bottom-right-radius: 6px; }
-  GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay):not(.top) {
+  colorswatch.left, colorswatch: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) {
+  colorswatch.right, colorswatch:last-child:not(overlay):not(.bottom) {
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px; }
-  GtkColorSwatch:only-child:not(.overlay) {
+  colorswatch:only-child:not(overlay) {
     border-radius: 6px; }
-  GtkColorSwatch.top > .overlay {
+  colorswatch.top > overlay {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px; }
-  GtkColorSwatch.bottom > .overlay {
+  colorswatch.bottom > overlay {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px; }
-  GtkColorSwatch:first-child:not(.top) > .overlay {
+  colorswatch:first-child:not(.top) > overlay {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px; }
-  GtkColorSwatch:last-child:not(.bottom) > .overlay {
+  colorswatch:last-child:not(.bottom) > overlay {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px; }
-  GtkColorSwatch:only-child > .overlay {
+  colorswatch:only-child > overlay {
     border-radius: 5px; }
-  GtkColorSwatch:hover, GtkColorSwatch:hover:selected {
+  colorswatch:hover, colorswatch: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:hover.color-dark, GtkColorSwatch:hover:selected.color-dark {
+    colorswatch:hover.dark overlay, colorswatch:hover:selected.dark overlay {
       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 {
+  colorswatch:backdrop, colorswatch:backdrop:selected
+  colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
     background-image: none;
     box-shadow: none; }
-  GtkColorEditor GtkColorSwatch {
+  GtkColorEditor colorswatch {
     border-radius: 3px; }
-    GtkColorEditor GtkColorSwatch:hover {
+    GtkColorEditor colorswatch:hover {
       background-image: none;
       box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
-    GtkColorEditor GtkColorSwatch:backdrop {
+    GtkColorEditor colorswatch:backdrop {
       box-shadow: none; }
-  GtkColorSwatch.color-dark {
+  colorswatch.dark overlay {
     color: white;
     outline-color: rgba(255, 255, 255, 0.5); }
-    GtkColorSwatch.color-dark:backdrop {
+    colorswatch.dark overlay:backdrop {
       color: rgba(255, 255, 255, 0.3); }
-  GtkColorSwatch.color-light {
+  colorswatch.light overlay {
     color: black;
     outline-color: rgba(0, 0, 0, 0.5); }
-    GtkColorSwatch.color-light:backdrop {
+    colorswatch.light overlay:backdrop {
       color: rgba(0, 0, 0, 0.3); }
-  GtkColorSwatch.overlay, GtkColorSwatch.overlay:selected {
+  colorswatch overlay, colorswatch overlay:selected {
     border: 1px solid rgba(0, 0, 0, 0.3); }
-    GtkColorSwatch.overlay:hover, GtkColorSwatch.overlay:selected:hover {
+    colorswatch overlay:hover, colorswatch overlay:selected:hover {
       border-color: rgba(0, 0, 0, 0.5); }
-  GtkColorSwatch#add-color-button {
+  colorswatch#add-color-button {
     border-style: solid;
     border-width: 1px;
     color: #2e3436;
@@ -4492,7 +4492,7 @@ GtkColorSwatch {
     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 {
+    colorswatch#add-color-button:hover {
       color: #2e3436;
       outline-color: rgba(46, 52, 54, 0.3);
       border-color: #a1a1a1;
@@ -4500,14 +4500,14 @@ GtkColorSwatch {
       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 {
+    colorswatch#add-color-button:backdrop {
       color: #8e9192;
       border-color: darkgray;
       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); }
-    GtkColorSwatch#add-color-button .overlay {
+    colorswatch#add-color-button overlay {
       border-color: transparent;
       background-color: transparent;
       background-image: none;