[gnome-themes-standard] wm: draw the buttons similarly to gtk

From: Jakub Steiner <jimmac src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-themes-standard] wm: draw the buttons similarly to gtk
Date: Wed, 11 Jun 2014 10:19:04 +0000 (UTC)
commit 2c90e2548606ddd5b4a61bfbaa997d1a88a452b0
Author: Jakub Steiner <jimmac gmail com>
Date:   Wed Jun 11 12:18:28 2014 +0200

    wm: draw the buttons similarly to gtk

 themes/Adwaita/gtk-3.0/_colors.scss            |   35 ++++++++++++++++++++++-
 themes/Adwaita/gtk-3.0/gtk-contained-dark.css  |   31 +++++++++++++++++++-
 themes/Adwaita/gtk-3.0/gtk-contained.css       |   31 +++++++++++++++++++-
 themes/Adwaita/metacity-1/metacity-theme-3.xml |   23 +++++++---------
 4 files changed, 101 insertions(+), 19 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_colors.scss b/themes/Adwaita/gtk-3.0/_colors.scss
index 7d7b1bc..dfe05fe 100644
--- a/themes/Adwaita/gtk-3.0/_colors.scss
+++ b/themes/Adwaita/gtk-3.0/_colors.scss
@@ -54,8 +54,39 @@ $backdrop_borders_color: $borders_color;
 @define-color wm_title shade($fg_color, 1.8);
 @define-color wm_unfocused_title $backdrop_fg_color;
 @define-color wm_highlight $borders_edge;
- define-color wm_title_highlight $borders_edge;
- define-color wm_title_shadow $borders_edge;
+ define-color wm_borders_edge $borders_edge;
+
+ define-color wm_bg_a shade($bg_color, 1.2);
+ define-color wm_bg_b $bg_color;
+
+ define-color wm_shadow alpha(black, 0.35);
+ define-color wm_border alpha(black, 0.18);
+
+ define-color wm_button_hover_color_a shade($bg_color, 1.3);
+ define-color wm_button_hover_color_b $bg_color;
+ define-color wm_button_active_color_a shade($bg_color, 0.85);
+ define-color wm_button_active_color_b shade($bg_color, 0.89);
+ define-color wm_button_active_color_c shade($bg_color, 0.9);
+
+/*
+$wm_button_bg_a: $bg_color;
+$wm_button_bg_b: darken($bg_color, 15%);
+$wm_button_bg_c: darken($bg_color, 20%);
+$wm_button_bg_d: darken($bg_color, 10%);
+ define-color wm_button_bg_a shade($bg_color, 1.0);
+ define-color wm_button_bg_b shade($bg_color, 0.85);
+ define-color wm_button_bg_c shade($bg_color, 0.8);
+ define-color wm_button_bg_d shade($bg_color, 0.9);
+
+ define-color wm_button_bg_hover_a shade($wm_button_bg_a, 1.1);
+ define-color wm_button_bg_hover_b shade($wm_button_bg_b, 1.1);
+ define-color wm_button_bg_hover_c shade($wm_button_bg_c, 1.1);
+ define-color wm_button_bg_hover_d shade($wm_button_bg_d, 1.1);
+
+ define-color wm_button_bg_active_a shade($bg_color, 0.7);
+ define-color wm_button_bg_active_b shade($bg_color, 0.9);
+ define-color wm_button_bg_active_c shade($bg_color, 0.9);
+*/
 
 //FIXME we probably need many more for mutter
 
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index 222a950..be468ce 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -12,8 +12,35 @@
 @define-color wm_title shade(#eeeeec, 1.8);
 @define-color wm_unfocused_title #c9cbc9;
 @define-color wm_highlight rgba(238, 238, 236, 0.1);
- define-color wm_title_highlight rgba(238, 238, 236, 0.1);
- define-color wm_title_shadow rgba(238, 238, 236, 0.1);
+ define-color wm_borders_edge rgba(238, 238, 236, 0.1);
+ define-color wm_bg_a shade(#393f3f, 1.2);
+ define-color wm_bg_b #393f3f;
+ define-color wm_shadow alpha(black, 0.35);
+ define-color wm_border alpha(black, 0.18);
+ define-color wm_button_hover_color_a shade(#393f3f, 1.3);
+ define-color wm_button_hover_color_b #393f3f;
+ define-color wm_button_active_color_a shade(#393f3f, 0.85);
+ define-color wm_button_active_color_b shade(#393f3f, 0.89);
+ define-color wm_button_active_color_c shade(#393f3f, 0.9);
+/*
+$wm_button_bg_a: $bg_color;
+$wm_button_bg_b: darken($bg_color, 15%);
+$wm_button_bg_c: darken($bg_color, 20%);
+$wm_button_bg_d: darken($bg_color, 10%);
+ define-color wm_button_bg_a shade($bg_color, 1.0);
+ define-color wm_button_bg_b shade($bg_color, 0.85);
+ define-color wm_button_bg_c shade($bg_color, 0.8);
+ define-color wm_button_bg_d shade($bg_color, 0.9);
+
+ define-color wm_button_bg_hover_a shade($wm_button_bg_a, 1.1);
+ define-color wm_button_bg_hover_b shade($wm_button_bg_b, 1.1);
+ define-color wm_button_bg_hover_c shade($wm_button_bg_c, 1.1);
+ define-color wm_button_bg_hover_d shade($wm_button_bg_d, 1.1);
+
+ define-color wm_button_bg_active_a shade($bg_color, 0.7);
+ define-color wm_button_bg_active_b shade($bg_color, 0.9);
+ define-color wm_button_bg_active_c shade($bg_color, 0.9);
+*/
 * {
   engine: adwaita;
   padding: 0;
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index 687b27a..c15737a 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -12,8 +12,35 @@
 @define-color wm_title shade(#2e3436, 1.8);
 @define-color wm_unfocused_title #54595a;
 @define-color wm_highlight white;
- define-color wm_title_highlight white;
- define-color wm_title_shadow white;
+ define-color wm_borders_edge white;
+ define-color wm_bg_a shade(#ededed, 1.2);
+ define-color wm_bg_b #ededed;
+ define-color wm_shadow alpha(black, 0.35);
+ define-color wm_border alpha(black, 0.18);
+ define-color wm_button_hover_color_a shade(#ededed, 1.3);
+ define-color wm_button_hover_color_b #ededed;
+ define-color wm_button_active_color_a shade(#ededed, 0.85);
+ define-color wm_button_active_color_b shade(#ededed, 0.89);
+ define-color wm_button_active_color_c shade(#ededed, 0.9);
+/*
+$wm_button_bg_a: $bg_color;
+$wm_button_bg_b: darken($bg_color, 15%);
+$wm_button_bg_c: darken($bg_color, 20%);
+$wm_button_bg_d: darken($bg_color, 10%);
+ define-color wm_button_bg_a shade($bg_color, 1.0);
+ define-color wm_button_bg_b shade($bg_color, 0.85);
+ define-color wm_button_bg_c shade($bg_color, 0.8);
+ define-color wm_button_bg_d shade($bg_color, 0.9);
+
+ define-color wm_button_bg_hover_a shade($wm_button_bg_a, 1.1);
+ define-color wm_button_bg_hover_b shade($wm_button_bg_b, 1.1);
+ define-color wm_button_bg_hover_c shade($wm_button_bg_c, 1.1);
+ define-color wm_button_bg_hover_d shade($wm_button_bg_d, 1.1);
+
+ define-color wm_button_bg_active_a shade($bg_color, 0.7);
+ define-color wm_button_bg_active_b shade($bg_color, 0.9);
+ define-color wm_button_bg_active_c shade($bg_color, 0.9);
+*/
 * {
   engine: adwaita;
   padding: 0;
diff --git a/themes/Adwaita/metacity-1/metacity-theme-3.xml b/themes/Adwaita/metacity-1/metacity-theme-3.xml
index f9a2eba..0aa38ca 100644
--- a/themes/Adwaita/metacity-1/metacity-theme-3.xml
+++ b/themes/Adwaita/metacity-1/metacity-theme-3.xml
@@ -15,8 +15,8 @@
 <constant name="C_titlebar_focused_hilight" value="gtk:custom(wm_highlight,gtk:base[NORMAL])" />
 <constant name="C_titlebar_unfocused" value="blend/gtk:base[NORMAL]/gtk:bg[NORMAL]/0.4" />
 <constant name="C_title_focused" value="gtk:custom(wm_title,gtk:fg[NORMAL])" />
-<constant name="C_title_focused_hilight" value="gtk:custom(wm_title_highlight,gtk:base[NORMAL])" />
-<constant name="C_title_focused_hilight_dark" value="gtk:custom(wm_title_highlight_dark,gtk:bg[NORMAL])" />
+<constant name="C_title_focused_hilight" value="gtk:custom(wm_borders_edge,gtk:base[NORMAL])" />
+<constant name="C_title_focused_hilight_dark" value="gtk:custom(wm_borders_edge,gtk:bg[NORMAL])" />
 <constant name="C_title_unfocused" value="gtk:custom(wm_unfocused_title,gtk:fg[INSENSITIVE])" />
 <!-- color of the button icons -->
 <constant name="C_icons_focused" value="gtk:custom(wm_title,gtk:fg[NORMAL])" />
@@ -24,7 +24,7 @@
 <constant name="C_icons_unfocused" value="blend/gtk:text[NORMAL]/gtk:bg[NORMAL]/0.9" />
 <constant name="C_icons_unfocused_prelight" value="blend/gtk:bg[NORMAL]/gtk:fg[NORMAL]/0.3" />
 <constant name="C_icons_unfocused_pressed" value="blend/#000000/gtk:bg[NORMAL]/0.7" />
-<constant name="C_icons_shadow" value="gtk:custom(wm_title_shadow,gtk:base[NORMAL])" />
+<constant name="C_icons_shadow" value="gtk:custom(wm_borders_edge,gtk:base[NORMAL])" />
 <constant name="C_separator" value="blend/#000000/gtk:bg[NORMAL]/0.9" />
 <constant name="D_icons_unfocused_offset" value="0" /> <!-- offset of the unfocused icons -->
 <constant name="D_icons_shrink" value="3" /> <!-- increasing this value makes the icons in buttons smaller 
-->
@@ -183,7 +183,7 @@
 
 <draw_ops name="hilight">
        <line x1="0" y1="1" x2="width-1" y2="1" color="C_titlebar_focused_hilight" />
-       <gradient type="vertical" x="1" y="1" width="1" height="height-4">
+       <gradient type="vertical" x="0" y="1" width="1" height="height-4">
                <color value="C_titlebar_focused_hilight" />
                <color value="blend/gtk:bg[NORMAL]/#000000/0.03" />
        </gradient>
@@ -822,9 +822,6 @@
 <constant name="C_button_border" value="blend/#000000/gtk:bg[NORMAL]/0.8" />
 <constant name="C_button_hilight" value="gtk:custom(wm_highlight,blend/gtk:base[NORMAL]/gtk:bg[NORMAL]/0.6)" 
/>
 
-<constant name="C_button_pressed_shadow1" 
value="blend/#000000/gtk:custom(button_active_gradient_color_b,gtk:fg[NORMAL])/0.94" />
-<constant name="C_button_pressed_shadow2" 
value="blend/#000000/gtk:custom(button_active_gradient_color_b,gtk:fg[NORMAL])/0.97" />
-
 <draw_ops name="button_border">
   <line x1="6" y1="4" x2="width-7" y2="4" color="C_button_border" />
   <arc color="C_button_border" x="width-9" y="4" width="4" height="4" start_angle="0" extent_angle="90"/>  
@@ -844,19 +841,19 @@
 
 <draw_ops name="button_fill_prelight"> <!-- button background gradient for prelight status -->
   <gradient type="vertical" x="5" y="5" width="width-10" height="height-10">
-               <color value="gtk:custom(button_hover_gradient_color_a,gtk:fg[NORMAL])" />
-               <color value="gtk:custom(button_hover_gradient_color_b,gtk:fg[NORMAL])" />
+               <color value="gtk:custom(wm_button_hover_color_a,gtk:fg[NORMAL])" />
+               <color value="gtk:custom(wm_button_hover_color_b,gtk:fg[NORMAL])" />
        </gradient>
        <include name="button_border" />
 </draw_ops>
 
 <draw_ops name="button_fill_pressed"> <!-- button background gradient for pressed status -->
   <gradient type="vertical" x="5" y="5" width="width-10" height="height-10">
-               <color value="gtk:custom(button_active_gradient_color_b,gtk:fg[NORMAL])" />
-               <color value="gtk:custom(button_active_gradient_color_c,gtk:fg[NORMAL])" />
+               <color value="gtk:custom(wm_button_active_color_b,gtk:fg[NORMAL])" />
+               <color value="gtk:custom(wm_button_active_color_c,gtk:fg[NORMAL])" />
        </gradient>
-  <line x1="5" y1="5" x2="width-6" y2="5" color="C_button_pressed_shadow1" />
-  <line x1="4" y1="6" x2="width-5" y2="6" color="C_button_pressed_shadow2" />
+  <line x1="5" y1="5" x2="width-6" y2="5" 
color="blend/#000000/gtk:custom(wm_button_active_color_a,gtk:fg[NORMAL])/0.9" />
+  <line x1="4" y1="6" x2="width-5" y2="6" color="gtk:custom(wm_button_active_color_a,gtk:fg[NORMAL])" />
        <include name="button_border" />
 </draw_ops>
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]