[gnome-themes-standard/wip/sass] use mixins to get generic button drawing

[Jakub Steiner <jimmac src gnome org>]

commit f260965869d1d0cd49891ca6a7998ddd537ffda8
Author: Jakub Steiner <jimmac gmail com>
Date:   Tue May 13 17:00:49 2014 +0200

    use mixins to get generic button drawing

 themes/Adwaita/gtk-3.0/_common.scss  |   40 +++++++++++++++++--------------
 themes/Adwaita/gtk-3.0/_drawing.scss |   44 ++++++++++++++++++++++++++++++++++
 themes/Adwaita/gtk-3.0/gtk-dark.css  |   35 +++++++++++++++++++++++----
 themes/Adwaita/gtk-3.0/gtk-dark.scss |    1 -
 themes/Adwaita/gtk-3.0/gtk.css       |   33 ++++++++++++++++++++++---
 themes/Adwaita/gtk-3.0/gtk.scss      |    1 -
 6 files changed, 125 insertions(+), 29 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index ec6118e..a197e2c 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -80,7 +80,7 @@ debug {
 *:insensitive {
     background-color: $insensitive_bg_color;
     color: $insensitive_fg_color;
-    border-color: lighten($borders,10%);
+    border-color: darken($theme_bg_color,20%);
 }
 
 *:insensitive:backdrop {
@@ -150,7 +150,7 @@ GtkGrid:insensitive {
   color: $theme_fg_color;
   border-radius: 3px;
   transition: all 200ms ease-out;
-  border: 1px solid $borders;
+  border: 1px solid darken($theme_bg_color,30%);
   background-image: linear-gradient(to bottom,
                                       darken($theme_base_color,20%) 1%,
                                       darken($theme_base_color,10%) 10%,
@@ -199,29 +199,24 @@ GtkGrid:insensitive {
   transition: all 200ms ease-out;
   padding: 2px 4px;
   background-color: transparent;
-  background-image: linear-gradient(to bottom,
-                                      lighten($theme_bg_color,10%),
-                                      $theme_bg_color 40%,
-                                      darken($theme_bg_color,10%)
-                                      );
-  border: 1px solid $borders;
+  @include button_normal($theme_bg_color);
   &:hover {
-    background-image: linear-gradient(to bottom,
-                                      lighten($theme_bg_color,15%),
-                                      lighten($theme_bg_color,10%),
-                                      $theme_bg_color);
+    @include button_hover($theme_bg_color);
   }
   &:active {
-    background-image: linear-gradient(to bottom,
-                                      darken($theme_bg_color,20%),
-                                      darken($theme_bg_color,15%) 5%,
-                                      darken($theme_bg_color,10%));
-    box-shadow: inset 0 1px 2px $borders;
+    @include button_active($theme_bg_color);
   }
   &:insensitive, &:backdrop:insensitive {
     background-image: linear-gradient(to bottom, transparent);
     color: $insensitive_fg_color;
   }
+  &.suggested-action {
+    @include button_normal($theme_selected_bg_color);
+    color: $theme_base_color; /* FIXME */
+    &:active {
+      @include button_active($theme_selected_bg_color);
+    }
+  }
 }
 
 .linked .button {
@@ -288,7 +283,7 @@ GtkComboBox {
  .header-bar {
     border-width: 0 0 1px;
     border-style: solid;
-    border-color: shade($borders, 0.90);
+    border-color: darken($theme_bg_color, 30%);
     border-radius: 5px 5px 0 0;
     
     background-color: none;
@@ -298,4 +293,13 @@ GtkComboBox {
     box-shadow: inset 0 -1px $theme_shade,
                 inset 0 1px $borders_edge;
     padding: 6px;
+
+    .title {
+      font: Bold;
+      padding: 0px 12px;
+    }
+    .subtitle {
+      font-size: 80%;
+      padding: 0 12px;
+    }
 }
diff --git a/themes/Adwaita/gtk-3.0/_drawing.scss b/themes/Adwaita/gtk-3.0/_drawing.scss
index 3b4cf8a..ff0fb71 100644
--- a/themes/Adwaita/gtk-3.0/_drawing.scss
+++ b/themes/Adwaita/gtk-3.0/_drawing.scss
@@ -1,3 +1,47 @@
 // Drawing mixins
 
 // generic drawing of more complex things
+
+// buttons
+
+ mixin button_normal ($c) {
+  border: 1px solid darken($c,30%);
+  background-image: linear-gradient(to bottom,
+                                      lighten($c,10%),
+                                      $c 40%,
+                                      darken($c,10%)
+                                      );
+}
+
+ mixin button_hover ($c) {
+  border: 1px solid darken($c,30%);
+  background-image: linear-gradient(to bottom,
+                                      lighten($c,14%),
+                                      lighten($c,4%) 40%,
+                                      $c);
+}
+
+ mixin button_active ($c) {
+  border: 1px solid darken($c,30%);
+  background-image: linear-gradient(to bottom,
+                                      darken($c,20%),
+                                      darken($c,15%) 5%,
+                                      darken($c,10%));
+    
+  box-shadow: inset 0 1px 2px darken($c,30%);
+}
+
+ mixin border-rounded() {
+}
+
+ mixin border-rounded-left() {
+}
+
+ mixin border-rounded-right() {
+}
+
+ mixin border-rounded-top() {
+}
+
+ mixin border-rounded-bottom() {
+}
diff --git a/themes/Adwaita/gtk-3.0/gtk-dark.css b/themes/Adwaita/gtk-3.0/gtk-dark.css
index 9b57ffa..a3dc007 100644
--- a/themes/Adwaita/gtk-3.0/gtk-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-dark.css
@@ -58,7 +58,7 @@ debug {
 *:insensitive {
   background-color: transparent;
   color: white;
-  border-color: #181b1b; }
+  border-color: #090909; }
 
 *:insensitive:backdrop {
   /* I want everything nice and flat in the unfocused window */
@@ -194,19 +194,21 @@ GtkGrid:insensitive {
   transition: all 200ms ease-out;
   padding: 2px 4px;
   background-color: transparent;
-  background-image: linear-gradient(to bottom, #515a5a, #393f3f 40%, #212424);
-  border: 1px solid black; }
+  border: 1px solid black;
+  background-image: linear-gradient(to bottom, #515a5a, #393f3f 40%, #212424); }
   .button:hover,
   .toolbar .button.raised:hover,
   .toolbar .raised .button:hover,
   .toolbar GtkComboBox .button:hover,
   .spinbutton.vertical .button:hover {
-    background-image: linear-gradient(to bottom, #5d6767, #515a5a, #393f3f); }
+    border: 1px solid black;
+    background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f); }
   .button:active,
   .toolbar .button.raised:active,
   .toolbar .raised .button:active,
   .toolbar GtkComboBox .button:active,
   .spinbutton.vertical .button:active {
+    border: 1px solid black;
     background-image: linear-gradient(to bottom, #090909, #151717 5%, #212424);
     box-shadow: inset 0 1px 2px black; }
   .button:insensitive, .button:backdrop:insensitive,
@@ -220,6 +222,23 @@ GtkGrid:insensitive {
   .spinbutton.vertical .button:backdrop:insensitive {
     background-image: linear-gradient(to bottom, transparent);
     color: white; }
+  .button.suggested-action,
+  .toolbar .button.raised.suggested-action,
+  .toolbar .raised .button.suggested-action,
+  .toolbar GtkComboBox .suggested-action.button,
+  .spinbutton.vertical .button.suggested-action {
+    border: 1px solid #0f2b48;
+    background-image: linear-gradient(to bottom, #4a90d9, #2a76c6 40%, #215d9c);
+    color: #333333;
+    /* FIXME */ }
+    .button.suggested-action:active,
+    .toolbar .button.raised.suggested-action:active,
+    .toolbar .raised .button.suggested-action:active,
+    .toolbar GtkComboBox .suggested-action.button:active,
+    .spinbutton.vertical .button.suggested-action:active {
+      border: 1px solid #0f2b48;
+      background-image: linear-gradient(to bottom, #184472, #1c5187 5%, #215d9c);
+      box-shadow: inset 0 1px 2px #0f2b48; }
 
 .linked .button:first-child {
   border-top-right-radius: 0;
@@ -265,9 +284,15 @@ GtkComboBox {
 .header-bar {
   border-width: 0 0 1px;
   border-style: solid;
-  border-color: shade(black, 0.9);
+  border-color: black;
   border-radius: 5px 5px 0 0;
   background-color: none;
   background-image: linear-gradient(to bottom, #3e4444, #2d3232);
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2), inset 0 1px rgba(51, 51, 51, 0.6);
   padding: 6px; }
+  .header-bar .title {
+    font: Bold;
+    padding: 0px 12px; }
+  .header-bar .subtitle {
+    font-size: 80%;
+    padding: 0 12px; }
diff --git a/themes/Adwaita/gtk-3.0/gtk-dark.scss b/themes/Adwaita/gtk-3.0/gtk-dark.scss
index eada429..8935def 100644
--- a/themes/Adwaita/gtk-3.0/gtk-dark.scss
+++ b/themes/Adwaita/gtk-3.0/gtk-dark.scss
@@ -6,7 +6,6 @@ $theme_bg_color: #393f3f;
 $theme_fg_color: #eeeeec;
 $theme_selected_fg_color: lighten($theme_fg_color,10%);
 $theme_selected_bg_color: darken(#4a90d9,10%);
-$borders: darken($theme_bg_color,30%);
 $borders_edge: transparentize($theme_base_color,.4);
 $theme_shade: rgba(0,0,0,.2); //shadow seems to be a reserved word
 $wm_shade: 0 2px 4px rgba(0,0,0,.6);
diff --git a/themes/Adwaita/gtk-3.0/gtk.css b/themes/Adwaita/gtk-3.0/gtk.css
index 7f8c334..7c3f915 100644
--- a/themes/Adwaita/gtk-3.0/gtk.css
+++ b/themes/Adwaita/gtk-3.0/gtk.css
@@ -194,19 +194,21 @@ GtkGrid:insensitive {
   transition: all 200ms ease-out;
   padding: 2px 4px;
   background-color: transparent;
-  background-image: linear-gradient(to bottom, white, #ededed 40%, lightgrey);
-  border: 1px solid #a1a1a1; }
+  border: 1px solid #a1a1a1;
+  background-image: linear-gradient(to bottom, white, #ededed 40%, lightgrey); }
   .button:hover,
   .toolbar .button.raised:hover,
   .toolbar .raised .button:hover,
   .toolbar GtkComboBox .button:hover,
   .spinbutton.vertical .button:hover {
-    background-image: linear-gradient(to bottom, white, white, #ededed); }
+    border: 1px solid #a1a1a1;
+    background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed); }
   .button:active,
   .toolbar .button.raised:active,
   .toolbar .raised .button:active,
   .toolbar GtkComboBox .button:active,
   .spinbutton.vertical .button:active {
+    border: 1px solid #a1a1a1;
     background-image: linear-gradient(to bottom, #bababa, #c7c7c7 5%, lightgrey);
     box-shadow: inset 0 1px 2px #a1a1a1; }
   .button:insensitive, .button:backdrop:insensitive,
@@ -220,6 +222,23 @@ GtkGrid:insensitive {
   .spinbutton.vertical .button:backdrop:insensitive {
     background-image: linear-gradient(to bottom, transparent);
     color: #748489; }
+  .button.suggested-action,
+  .toolbar .button.raised.suggested-action,
+  .toolbar .raised .button.suggested-action,
+  .toolbar GtkComboBox .suggested-action.button,
+  .spinbutton.vertical .button.suggested-action {
+    border: 1px solid #2b537d;
+    background-image: linear-gradient(to bottom, #98b9dc, #729fcf 40%, #4c85c2);
+    color: white;
+    /* FIXME */ }
+    .button.suggested-action:active,
+    .toolbar .button.raised.suggested-action:active,
+    .toolbar .raised .button.suggested-action:active,
+    .toolbar GtkComboBox .suggested-action.button:active,
+    .spinbutton.vertical .button.suggested-action:active {
+      border: 1px solid #2b537d;
+      background-image: linear-gradient(to bottom, #386ca3, #3e78b6 5%, #4c85c2);
+      box-shadow: inset 0 1px 2px #2b537d; }
 
 .linked .button:first-child {
   border-top-right-radius: 0;
@@ -265,9 +284,15 @@ GtkComboBox {
 .header-bar {
   border-width: 0 0 1px;
   border-style: solid;
-  border-color: shade(#a1a1a1, 0.9);
+  border-color: #a1a1a1;
   border-radius: 5px 5px 0 0;
   background-color: none;
   background-image: linear-gradient(to bottom, #f2f2f2, #e0e0e0);
   box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1), inset 0 1px rgba(255, 255, 255, 0.1);
   padding: 6px; }
+  .header-bar .title {
+    font: Bold;
+    padding: 0px 12px; }
+  .header-bar .subtitle {
+    font-size: 80%;
+    padding: 0 12px; }
diff --git a/themes/Adwaita/gtk-3.0/gtk.scss b/themes/Adwaita/gtk-3.0/gtk.scss
index 86e110f..88fe93a 100644
--- a/themes/Adwaita/gtk-3.0/gtk.scss
+++ b/themes/Adwaita/gtk-3.0/gtk.scss
@@ -12,7 +12,6 @@ $theme_bg_color: #ededed;
 $theme_fg_color: #2e3436;
 $theme_selected_fg_color: #ffffff;
 $theme_selected_bg_color: #729fcf;
-$borders: darken($theme_bg_color,30%);
 $borders_edge: transparentize($theme_base_color,0.9);
 $theme_shade: rgba(0,0,0,.1); //shadow seems to be a reserved word
 $wm_shade: 0 2px 4px rgba(0,0,0,.5);