[Sugar-devel] [PATCH v2 artwork] Style activities in home view for tap - click and hover feedback

Manuel Quiñones manuq at laptop.org
Thu Oct 4 13:08:47 EDT 2012


For hover, change the previous outline to a background fill.  For tap
- click, add a grey background fill.  This change is consistent with
the style of buttons in toolbars, which have subtle hover feedback,
and more visible background change for tap - click feedback.

For choosing the grey tones, Gary used the 'strive for at least two
Munsell steps' guideline as per the HIG.  Assuming our current white
zoom view canvas backrounds, and 50% grey for activities without
Journal entries (the 50% grey is 3 too bright for a strict two Munsell
gap, but close enough). This gives good visibility for both hover,
press, and enough contrast during a press on a 50% grey.

Also, make the corners a bit more round.

Signed-off-by: Manuel Quiñones <manuq at laptop.org>
---
 gtk3/theme/gtk-widgets.css.em | 18 ++++++++++++++----
 gtk3/theme/gtk.css            |  2 ++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/gtk3/theme/gtk-widgets.css.em b/gtk3/theme/gtk-widgets.css.em
index b9a39d5..58cf450 100644
--- a/gtk3/theme/gtk-widgets.css.em
+++ b/gtk3/theme/gtk-widgets.css.em
@@ -687,13 +687,23 @@ SugarFrameWindow {
 
 /* Sugar Favorite Activity icon */
 
-SugarFavoriteActivityIcon:prelight {
-    border-color: @selection_grey;
-    border-radius: $(2 * thickness)px;
-    border-width: $(thickness)px;
+SugarFavoriteActivityIcon {
+    border-color: transparent;
+    border-radius: $(4 * thickness)px;
+    border-width: 2px;
     border-style: solid;
 }
 
+SugarFavoriteActivityIcon:prelight {
+    border-color: @zoom_views_prelight;
+    background-color: @zoom_views_prelight;
+}
+
+SugarFavoriteActivityIcon:active {
+    border-color: @zoom_views_active;
+    background-color: @zoom_views_active;
+}
+
 /* Text cursor handles */
 
 .cursor-handle.top,
diff --git a/gtk3/theme/gtk.css b/gtk3/theme/gtk.css
index 8b55cc6..9be9b8f 100644
--- a/gtk3/theme/gtk.css
+++ b/gtk3/theme/gtk.css
@@ -9,6 +9,8 @@
 @define-color row_even #E5E5E5;
 @define-color row_odd #D5D5D5;
 @define-color white #FFFFFF;
+ at define-color zoom_views_prelight #E8E8E8;
+ at define-color zoom_views_active #B3B3B3;
 
 /* Default color scheme */
 @define-color base_color #ffffff;
-- 
1.7.11.4



More information about the Sugar-devel mailing list