Merge lp:~3v1n0/ubuntu-themes/suggested-action-states-fix into lp:ubuntu-themes

[Marco Trevisan (Treviño)]

Ambiance, Radiance: fix gradients for suggested-action hover, active and backdrop states

As bonus, update the colors used using definitions that match the ubuntu palette

Colors based on https://design.ubuntu.com/web/colour

Using darker gradients for hover, active and backdrop statesF

[lp:~3v1n0/ubuntu-themes/suggested-action-states-fix]

584. By Marco Trevisan (Treviño) on 2017-10-05

Radiance: use fg_color text shadow for suggested-action

585. By Marco Trevisan (Treviño) on 2017-10-05

Radiance: use better gradients and for suggested-action

[Didier Roche-Tolomelli (didrocks)]

I don't think that active and backdrop should be change. It makes it appears as green, as so, as if it was enabled for the user (with a weird and unmatched grey label).

The current state which was designed is way clearer for the user: the button isn't really visible (but still different from other disabled buttons), and become green + white label once it's activated. See the 2 screenshots on https://imgur.com/a/6f3U9

review: Disapprove

[lp:~3v1n0/ubuntu-themes/suggested-action-states-fix]

586. By Marco Trevisan (Treviño) on 2017-10-12

Ambiance,Radiance: don't apply changes to disabled .suggested-action buttons

[Marco Trevisan (Treviño) (3v1n0)]

Oh, I didn't want to change the disabled mode. I've pushed a new revision fixing that, and thanks for spotting (I was sure I checked that case too!).

Anyway, backdrop *has* to be different, it's just consistency.

Compare here (first is current state, then new state): https://usercontent.irccloud-cdn.com/file/x1G0M70m/suggested-action-differences.mp4

The current button uses gradients and states which are not consistent with what other buttons do.

[Daniel van Vugt (vanvugt)]

I think dark is a bad choice. Dark looks either disabled or depressed, when neither of those are true.

Hover highlighting I think should be light, at least for dark backgrounds like the Ambiance headerbar. Hovering over something should always increase its contrast with the background. So in that case it's the grey buttons I would like to see lighter when hovered. :)

I'm fairly confident most designers would agree with what I just said.

P.S. I don't understand what Didier is saying but don't need to if we both agree on Disapprove.

review: Disapprove

[Didier Roche-Tolomelli (didrocks)]

As we discussed on IRC, let's merge that one with a slight color change I'll do after this.
I agree with Daniel about the hovering being darker is a little bit weird, but that's already the global design for buttons in the headerbar.

review: Approve

=== modified file 'Ambiance/gtk-3.20/gtk-main.css'
--- Ambiance/gtk-3.20/gtk-main.css	2017-07-06 20:38:41 +0000
+++ Ambiance/gtk-3.20/gtk-main.css	2017-10-12 05:10:35 +0000
@@ -68,9 +68,9 @@
 @define-color unfocused_borders @borders;
 /*
 these are pretty self explanatory */
-@define-color warning_color #f57900;
+@define-color warning_color #eca918;
 @define-color error_color #df382c;
-@define-color success_color #4e9a06;
+@define-color success_color #38b44a;
 
 /** Default theme colors definition end **/
 
@@ -125,6 +125,8 @@
 @define-color progressbar_backdrop_fill_b shade(mix(@backdrop_selected_bg_color, grey, 0.10), 0.91);
 @define-color button_border_backdrop_active shade(@backdrop_selected_bg_color, 0.95);
 
+@define-color suggested_action_bg #38b44a;
+
 @import url("gtk-widgets-borders.css");
 @import url("gtk-widgets-assets.css");
 @import url("gtk-widgets.css");

=== modified file 'Ambiance/gtk-3.20/gtk-widgets.css'
--- Ambiance/gtk-3.20/gtk-widgets.css	2017-10-12 05:10:35 +0000
+++ Ambiance/gtk-3.20/gtk-widgets.css	2017-10-12 05:10:35 +0000
@@ -430,46 +430,6 @@
     border-color: shade(@borders, 0.8);
 }
 
-/* Suggested action */
-headerbar button.suggested-action {
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     from (shade (#3eb34f, 1.08)),
-                                     color-stop (0.5, #3eb34f),
-                                     to (shade (#3eb34f, 0.94)));
-    border-radius: 12px;
-}
-
-headerbar button.suggested-action label {
-    color: white;
-    text-shadow: 0 1px alpha (shade (black, 1.25), 0.4);
-}
-
-headerbar button.suggested-action:hover {
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     from (shade (#3eb34f, 1.20)),
-                                     color-stop (0.5, #3eb34f),
-                                     to (shade (#3eb34f, 0.85)));
-}
-
-headerbar button.suggested-action:backdrop:hover {
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     from (shade (#3eb34f, 1.20)),
-                                     color-stop (0.5, #3eb34f),
-                                     to (shade (#3eb34f, 0.85)));
-}
-
-headerbar button.suggested-action:active {
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     from (shade (#3eb34f, 1.01)),
-                                     color-stop (0.5, #3eb34f),
-                                     to (shade (#3eb34f, 0.98)));
-}
-
-headerbar button.suggested-action:disabled label {
-    color: @fg_color;
-    text-shadow: none;
-}
-
 /**************
  * ComboBoxes *
  **************/
@@ -1506,11 +1466,11 @@
 }
 
 levelbar block.filled.high {
-    border-color: shade(@success_color, 0.85);
+    border-color: shade(@suggested_action_bg, 0.85);
     background-image: linear-gradient(to bottom,
-                                      shade(@success_color, 1.2),
-                                      @success_color 75%,
-                                      shade(@success_color, 0.95)
+                                      shade(@suggested_action_bg, 1.2),
+                                      @suggested_action_bg 75%,
+                                      shade(@suggested_action_bg, 0.95)
                                       );
 }
 
@@ -2585,6 +2545,56 @@
                                      url("assets/[e-mail]"));
 }
 
+/* Suggested action */
+headerbar button.suggested-action:not(:disabled) * {
+   color: white;
+   text-shadow: 0 -1px shade (@dark_bg_color, 1.2);
+}
+
+headerbar button.suggested-action:not(:disabled) {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@suggested_action_bg, 1.10)),
+                                     to (shade (@suggested_action_bg, 0.90)));
+    border-radius: 12px;
+}
+
+headerbar button.suggested-action:hover {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@suggested_action_bg, 0.93)),
+                                     to (shade (@suggested_action_bg, 0.75)));
+}
+
+headerbar button.suggested-action:backdrop:not(:disabled) * {
+    color: shade (white, 0.65);
+}
+
+headerbar button.suggested-action:backdrop:not(:disabled) {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@suggested_action_bg, 0.65)),
+                                     to (shade (@suggested_action_bg, 0.65)));
+}
+
+headerbar button.suggested-action:hover:backdrop {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@suggested_action_bg, 0.77)),
+                                     to (shade (@suggested_action_bg, 0.75)));
+}
+
+headerbar button.suggested-action:hover:backdrop * {
+    color: shade (white, 0.67);
+}
+
+headerbar button.suggested-action:active {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@suggested_action_bg, 0.80)),
+                                     to (shade (@suggested_action_bg, 0.65)));
+}
+
+headerbar button.suggested-action:disabled * {
+    color: @fg_color;
+    text-shadow: none;
+}
+
 .primary-toolbar separator,
 .primary-toolbar separator,
 .primary-toolbar separator:disabled,

=== modified file 'Radiance/gtk-3.20/gtk-main.css'
--- Radiance/gtk-3.20/gtk-main.css	2017-08-28 15:33:12 +0000
+++ Radiance/gtk-3.20/gtk-main.css	2017-10-12 05:10:35 +0000
@@ -68,9 +68,9 @@
 @define-color unfocused_borders @borders;
 /*
 these are pretty self explanatory */
-@define-color warning_color #f57900;
+@define-color warning_color #eca918;
 @define-color error_color #df382c;
-@define-color success_color #4e9a06;
+@define-color success_color #38b44a;
 
 /* misc colors used by gtk+
  *
@@ -124,6 +124,8 @@
 @define-color progressbar_backdrop_fill_b shade(mix(@backdrop_selected_bg_color, grey, 0.10), 0.91);
 @define-color button_border_backdrop_active shade(@backdrop_selected_bg_color, 0.95);
 
+@define-color suggested_action_bg #38b44a;
+
 @import url("gtk-widgets-borders.css");
 @import url("gtk-widgets-borders-radiance.css");
 @import url("gtk-widgets-assets.css");

=== modified file 'Radiance/gtk-3.20/gtk-widgets.css'
--- Radiance/gtk-3.20/gtk-widgets.css	2017-10-12 05:10:35 +0000
+++ Radiance/gtk-3.20/gtk-widgets.css	2017-10-12 05:10:35 +0000
@@ -1465,11 +1465,11 @@
 }
 
 levelbar block.filled.high {
-    border-color: shade(@success_color, 0.85);
+    border-color: shade(@suggested_action_bg, 0.85);
     background-image: linear-gradient(to bottom,
-                                      shade(@success_color, 1.2),
-                                      @success_color 75%,
-                                      shade(@success_color, 0.95)
+                                      shade(@suggested_action_bg, 1.2),
+                                      @suggested_action_bg 75%,
+                                      shade(@suggested_action_bg, 0.95)
                                       );
 }
 
@@ -2552,6 +2552,56 @@
                                      url("assets/[e-mail]"));
 }
 
+/* Suggested action */
+headerbar button.suggested-action:not(:disabled) * {
+   color: white;
+   text-shadow: 0 -1px shade (@fg_color, 1.2);
+}
+
+headerbar button.suggested-action:not(:disabled) {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@suggested_action_bg, 1.10)),
+                                     to (shade (@suggested_action_bg, 0.90)));
+    border-radius: 12px;
+}
+
+headerbar button.suggested-action:hover {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@suggested_action_bg, 0.98)),
+                                     to (shade (@suggested_action_bg, 0.79)));
+}
+
+headerbar button.suggested-action:backdrop:not(:disabled) * {
+    color: alpha (white, 0.65);
+}
+
+headerbar button.suggested-action:backdrop:not(:disabled) {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (alpha (@suggested_action_bg, 0.80)),
+                                     to (alpha (@suggested_action_bg, 0.80)));
+}
+
+headerbar button.suggested-action:hover:backdrop {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (alpha (@suggested_action_bg, 0.70)),
+                                     to (alpha (@suggested_action_bg, 0.69)));
+}
+
+headerbar button.suggested-action:hover:backdrop * {
+    color: alpha (white, 0.67);
+}
+
+headerbar button.suggested-action:active {
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@suggested_action_bg, 0.85)),
+                                     to (shade (@suggested_action_bg, 0.70)));
+}
+
+headerbar button.suggested-action:disabled * {
+    color: @fg_color;
+    text-shadow: none;
+}
+
 .primary-toolbar separator,
 .primary-toolbar separator,
 .primary-toolbar separator:disabled,
@@ -2678,46 +2728,6 @@
     border-radius: 8px;
 }
 
-headerbar button.suggested-action {
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     from (shade (#3eb34f, 1.08)),
-                                     color-stop (0.5, #3eb34f),
-                                     to (shade (#3eb34f, 0.94)));
-    border-radius: 12px;
-}
-
-headerbar button.suggested-action label {
-    color: white;
-    text-shadow: 0 1px alpha (shade (black, 1.25), 0.4);
-}
-
-headerbar button.suggested-action:hover {
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     from (shade (#3eb34f, 1.20)),
-                                     color-stop (0.5, #3eb34f),
-                                     to (shade (#3eb34f, 0.85)));
-}
-
-headerbar button.suggested-action:backdrop:hover {
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     from (shade (#3eb34f, 1.20)),
-                                     color-stop (0.5, #3eb34f),
-                                     to (shade (#3eb34f, 0.85)));
-}
-
-headerbar button.suggested-action:active {
-    background-image: -gtk-gradient (linear, left top, left bottom,
-                                     from (shade (#3eb34f, 1.01)),
-                                     color-stop (0.5, #3eb34f),
-                                     to (shade (#3eb34f, 0.98)));
-}
-
-headerbar button.suggested-action:disabled label {
-    color: @fg_color;
-    text-shadow: none;
-}
-
-
 /***********
  * tooltip *
  ***********/