[gnome-themes-standard/wip/sass] added text emboss effect helper function and some error fixing in the button drawing function



commit 07b5a5838af8b78267daeb353306f8c3a8298793
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Mon May 19 20:24:06 2014 +0200

    added text emboss effect helper function and some error fixing in the button drawing function

 themes/Adwaita/gtk-3.0/_drawing.scss     |  112 ++++++++++++++++++++----------
 themes/Adwaita/gtk-3.0/gtk-contained.css |   20 ++++--
 2 files changed, 88 insertions(+), 44 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_drawing.scss b/themes/Adwaita/gtk-3.0/_drawing.scss
index 40f2b86..843049e 100644
--- a/themes/Adwaita/gtk-3.0/_drawing.scss
+++ b/themes/Adwaita/gtk-3.0/_drawing.scss
@@ -6,6 +6,10 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
                                              //most widgets, not working
                                              //since gtk doesn't draw (yet?)
                                              //outside the widget itself.
+
+$bright_text_shadow: white; //FIXME
+$dark_text_shadow: black; //FIXME
+
 @mixin _border-rounded() {
 }
 
@@ -24,6 +28,9 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
 // buttons
 
 @mixin _button_border_custom_color ($c) {
+//
+// helper function to draw borders for colored buttons
+//
   @if $variant=='light' {
     border-color: darken($c,30%);
   }
@@ -32,16 +39,39 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
   }
 }
 
- mixin _button_text_shadow ($c) {
-  @if $c==none { text-shadow: none; icon-shadow: none; }
+ mixin _button_text_shadow ($tc:$theme_fg_color, $sc:false) { 
+//
+// helper function for the text emboss effect
+//
+// $tc is the optional text color, not the shadow color
+// $sc is the optional shadow color
+//
+  @if lightness($tc) < 50% {
+    @if $sc {
+      text-shadow: 0 1px $sc;
+      icon-shadow: 0 1px $sc;
+    }
+    @else {
+      text-shadow: 0 1px $bright_text_shadow;
+      icon-shadow: 0 1px $bright_text_shadow;
+    }
+  }
   @else {
-    text-shadow: 0 1px $c;
-    icon-shadow: 0 1px $c;
+    @if $sc {
+      text-shadow: 0 -1px $sc;
+      icon-shadow: 0 -1ps $sc;
+    }
+    @else {
+      text-shadow: 0 -1px $dark_text_shadow;
+      icon-shadow: 0 -1px $dark_text_shadow;
+    }
   }
 }
 
 @mixin _button_box_shadow($shadow1, $shadow2:false, $shadow3:false, $shadow4:false) {
-  //needed to stack box shadows
+//
+// Helper function to stack up to 4 box-shadows;
+//
   @if $shadow2 {box-shadow: $shadow1, $shadow2;}
   @else if $shadow3 {box-shadow: $shadow1, $shadow2, $shadow3;}
   @else if $shadow4 {box-shadow: $shadow1, $shadow2, $shadow3, shadow4;}
@@ -49,16 +79,18 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
 }
 
 @mixin button($t, $c:false, $tc:false ) {
-// BUTTON DRAWING FUNCTION
+//
+// Button drawing function
+// 
 // $t:  button type,  
 // $c:  base button color for colored* types
-// $tc: optional text-color for colored* types
+// $tc: optional text color for colored* types
 //  
 // possible $t values:
 // normal, hover, active, insensitive, insensitive-active,
 // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
 // colored, colored-hover, colored-active, colored-backdrop
- 
+// 
   border-width: 1px;
   border-style: solid;
 
@@ -71,10 +103,9 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
                                       darken($theme_bg_color,10%)
                                       );
 
-    text-shadow: 0 1px lighten($theme_bg_color,50%); 
-    icon-shadow: 0 1px lighten($theme_bg_color,50%); 
+    @include _button_text_shadow;
 
-    @include _button-box-shadow(inset 0 1px $borders_edge, 
+    @include _button_box_shadow(inset 0 1px $borders_edge, 
                                 $widget_bottom_hilight);
   }
 
@@ -86,10 +117,8 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
                                       lighten($theme_bg_color,4%) 40%,
                                       $theme_bg_color);
 
-    text-shadow: 0 1px lighten($theme_bg_color,50%); 
-    icon-shadow: 0 1px lighten($theme_bg_color,50%); 
-   
-    @include _button-box-shadow(inset 0 1px $borders_edge, 
+    @include _button_text_shadow;
+    @include _button_box_shadow(inset 0 1px $borders_edge, 
                                 $widget_bottom_hilight);
   }
 
@@ -101,9 +130,7 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
                                       darken($theme_bg_color,15%) 5%,
                                       darken($theme_bg_color,10%));
 
-    text-shadow: 0 1px $theme_bg_color;
-    icon-shadow: 0 1px $theme_bg_color;
-
+    @include _button_text_shadow($theme_fg_color,$theme_bg_color);
     @include _button_box_shadow(inset 0 2px 3px -1px transparentize(black,0.7),
                                 $widget_bottom_hilight);
   }
@@ -158,8 +185,14 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
   }
   @else if $t==colored { // custom colored button
     // if the text color is specified use it, otherwise use the default
-    @if $tc { color: $tc; }
-    @else { color: $theme_base_color };
+    @if $tc { 
+      color: $tc;
+      @include _button_text_shadow($tc);
+    }
+    @else { 
+      color: $theme_base_color;
+      @include _button_text_shadow($theme_base_color);
+    }
 
     @include _button_border_custom_color($c);
 
@@ -169,15 +202,18 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
                                       darken($c,10%)
                                       );
 
-    text-shadow: 0 1px lighten($c,50%); 
-    icon-shadow: 0 1px lighten($c,50%); 
-
-    @include _button-box-shadow($widget_bottom_hilight);
+    @include _button_box_shadow($widget_bottom_hilight);
     
   }
   @else if $t==colored-hover { // custom colored hovered button
-    @if $tc { color: $tc; }
-    @else { color: $theme_base_color };
+    @if $tc { 
+      color: $tc;
+      @include _button_text_shadow($tc);
+    }
+    @else { 
+      color: $theme_base_color;
+      @include _button_text_shadow($theme_base_color);
+    }
 
     @include _button_border_custom_color($c);
 
@@ -186,26 +222,26 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
                                       lighten($c,4%) 40%,
                                       $c);
 
-//    text-shadow: 0 1px lighten($c,50%); 
-//    icon-shadow: 0 1px lighten($c,50%);  FIXME
-   
-    @include _button-box-shadow(inset 0 1px $borders_edge,
+    @include _button_box_shadow(inset 0 1px $borders_edge,
                                $widget_bottom_hilight);
 
   }
   @else if $t==colored-active { // custom colored pushed button
-    @if $tc { color: $tc; }
-    @else { color: $theme_base_color };
+    @if $tc { 
+      color: $tc;
+      @include _button_text_shadow($tc);
+    }
+    @else { 
+      color: $theme_base_color;
+      @include _button_text_shadow($theme_base_color);
+    };
 
     @include _button_border_custom_color($c);
 
     background-image: linear-gradient(to bottom,
-                                      darken($theme_bg_color,20%),
-                                      darken($theme_bg_color,15%) 5%,
-                                      darken($theme_bg_color,10%));
-
-//    text-shadow: 0 1px $theme_bg_color; FIXME
-//    icon-shadow: 0 1px $theme_bg_color; 
+                                      darken($c,20%),
+                                      darken($c,15%) 5%,
+                                      darken($c,10%));
 
     @include _button_box_shadow(inset 0 2px 3px -1px transparentize(black,0.7),
                                 $widget_bottom_hilight);
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index c321013..e68cf35 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -267,10 +267,10 @@ GtkGrid:insensitive {
     border-width: 1px;
     border-style: solid;
     color: white;
+    text-shadow: 0 -1px black;
+    icon-shadow: 0 -1px black;
     border-color: #2b537d;
     background-image: linear-gradient(to bottom, #98b9dc, #729fcf 40%, #4c85c2);
-    text-shadow: 0 1px white;
-    icon-shadow: 0 1px white;
     box-shadow: 0 1px rgba(255, 255, 255, 0.05); }
     .button.suggested-action:hover,
     .toolbar .button.raised.suggested-action:hover,
@@ -280,6 +280,8 @@ GtkGrid:insensitive {
       border-width: 1px;
       border-style: solid;
       color: white;
+      text-shadow: 0 -1px black;
+      icon-shadow: 0 -1px black;
       border-color: #2b537d;
       background-image: linear-gradient(to bottom, #a7c3e1, #81a9d4 40%, #729fcf);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05); }
@@ -291,8 +293,10 @@ GtkGrid:insensitive {
       border-width: 1px;
       border-style: solid;
       color: white;
+      text-shadow: 0 -1px black;
+      icon-shadow: 0 -1px black;
       border-color: #2b537d;
-      background-image: linear-gradient(to bottom, #bababa, #c7c7c7 5%, lightgray);
+      background-image: linear-gradient(to bottom, #386ca3, #3e78b6 5%, #4c85c2);
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.05); }
     .button.suggested-action:backdrop,
     .toolbar .button.raised.suggested-action:backdrop,
@@ -337,10 +341,10 @@ GtkGrid:insensitive {
     border-width: 1px;
     border-style: solid;
     color: white;
+    text-shadow: 0 -1px black;
+    icon-shadow: 0 -1px black;
     border-color: #760909;
     background-image: linear-gradient(to bottom, #f35858, #ef2929 40%, #d51010);
-    text-shadow: 0 1px white;
-    icon-shadow: 0 1px white;
     box-shadow: 0 1px rgba(255, 255, 255, 0.05); }
     .button.destructive-action:hover,
     .toolbar .button.raised.destructive-action:hover,
@@ -350,6 +354,8 @@ GtkGrid:insensitive {
       border-width: 1px;
       border-style: solid;
       color: white;
+      text-shadow: 0 -1px black;
+      icon-shadow: 0 -1px black;
       border-color: #760909;
       background-image: linear-gradient(to bottom, #f46b6b, #f03c3c 40%, #ef2929);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05); }
@@ -361,8 +367,10 @@ GtkGrid:insensitive {
       border-width: 1px;
       border-style: solid;
       color: white;
+      text-shadow: 0 -1px black;
+      icon-shadow: 0 -1px black;
       border-color: #760909;
-      background-image: linear-gradient(to bottom, #bababa, #c7c7c7 5%, lightgray);
+      background-image: linear-gradient(to bottom, #a60c0c, #bd0e0e 5%, #d51010);
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.05); }
     .button.destructive-action:backdrop,
     .toolbar .button.raised.destructive-action:backdrop,


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]