Styling of the border and text of the action button. A dark variant is available.

[endlessm/eos-sdk#104]

2 files changed, 105 insertions, 26 deletions

diff --git a/test/smoke-tests/action-buttons.js b/test/smoke-tests/action-buttons.js
index 7fe046b..cc8534b 100644
--- a/test/smoke-tests/action-buttons.js
+++ b/test/smoke-tests/action-buttons.js
@@ -15,7 +15,22 @@ const TestApplication = new Lang.Class ({
 
         this._page = new Gtk.Grid ();
         
-        this._content = new Gtk.Label ({name: 'content', label: 'Content'});
+        this._content = new Gtk.Grid ({
+            hexpand: true,
+            halign: Gtk.Align.CENTER,
+            vexpand: true,
+            valign: Gtk.Align.CENTER});
+
+        this._darkSwitch = new Gtk.Switch ({active: false});
+        this._darkSwitch.connect ('notify::active', Lang.bind (this, function (active) {
+            if (this._darkSwitch.get_active()) {
+                this._menu_panel.get_style_context().add_class('dark');
+            } else {
+                this._menu_panel.get_style_context().remove_class('dark');
+            }
+        }));
+        this._content.add(new Gtk.Label ({label: 'Dark action menu'}), 0, 0, 1, 1);
+        this._content.add(this._darkSwitch, 0, 1, 1, 1);
         
         this._menu = new Endless.ActionMenu ();
         
diff --git a/test/smoke-tests/eosactionbutton.css b/test/smoke-tests/eosactionbutton.css
index e4a8267..e6bb8e7 100644
--- a/test/smoke-tests/eosactionbutton.css
+++ b/test/smoke-tests/eosactionbutton.css
@@ -2,71 +2,135 @@
 
 EosActionButton {
 	background-color: transparent;
-	border-color: #012345;
-	border-radius: 32px;
-	border-width: 8px;
 	border-style: solid;
 	margin: 10px;
+
+	border-radius: 40px;
+	border-width: 8px;
+}
+
+EosActionButton GtkLabel {
+	font-family: BentonSans, sans-serif;
+	font-weight: normal;
+	font-size: 11px;
 }
 
 /* ****** SIZES ****** */
 
 EosActionButton.primary {
-	border-radius: 32px;
+	border-radius: 40px;
 	border-width: 8px;
 }
 
 EosActionButton.secondary {
-	border-radius: 24px;
+	border-radius: 30px;
 	border-width: 6px;
 }
 
 EosActionButton.tertiary {
-	border-radius: 18px;
+	border-radius: 23px;
 	border-width: 5px;
 }
 
 EosActionButton.quaternary {
-	border-radius: 13px;
+	border-radius: 17px;
 	border-width: 4px;
 }
 
-/* ****** STATES ****** */
+/* ****** LIGHT BACKGROUND ****** */
 
-EosActionButton:active {
-	border-color: #123456;
+/* normal */
+EosActionButton,
+EosActionButton:selected,
+EosActionButton:focused {
+	border-color: alpha(#323232, 0.5);
+	box-shadow: 1px 1px 1px alpha(black, 0.8) inset,
+	            0px -1px 1px alpha(white, 0.65);
 }
 
-EosActionButton:hover {
-	border-color: #234567;
+EosActionButton GtkLabel,
+EosActionButton:selected GtkLabel,
+EosActionButton:focused GtkLabel {
+	color: alpha(#323232, 0.65);
 }
 
-EosActionButton:insensitive {
-	border-color: #345678;
+/* hover */
+EosActionButton:hover {
+	border-color: alpha(#323232, 0.8);
+	box-shadow: 1px 1px 1px alpha(black, 0.8) inset;
 }
 
-EosActionButton:selected {
-	border-color: #456789;
+EosActionButton:hover GtkLabel {
+	color: alpha(#1E1E1E, 0.8);
 }
 
-EosActionButton:focused {
-	border-color: #56789A;
+/* pressed */
+EosActionButton:active {
+	border-color: alpha(#323232, 0.65);
+	box-shadow: 1px 1px 1px alpha(black, 0.8) inset;
+}	
+
+EosActionButton:active {
+	color: alpha(#1E1E1E, 0.8);
 }
 
+/* insensitive, just in case */
+EosActionButton:insensitive,
 EosActionButton:inconsistent {
-	border-color: #6789AB;
+	border-color: alpha(#888888, 0.50);
+	box-shadow: none;
+}
+
+/* ****** DARK BACKGROUND ****** */
+
+
+/* normal */
+.dark EosActionButton,
+.dark EosActionButton:selected,
+.dark EosActionButton:focused {
+	border-color: alpha(#E6E6E6, 0.5);
+	box-shadow: 1px 1px 1px alpha(black, 0.95) inset,
+	            0px -1px 1px alpha(white, 0.5) inset;
+}
+
+.dark EosActionButton GtkLabel,
+.dark EosActionButton:selected GtkLabel,
+.dark EosActionButton:focused GtkLabel {
+	color: alpha(#E6E6E6, 0.5);
+}
+
+/* hover */
+.dark EosActionButton:hover {
+	border-color: alpha(white, 0.8);
+	box-shadow: 1px 1px 1px alpha(black, 0.95) inset,
+	            0px -1px 1px alpha(white, 0.85) inset;
+}
+
+.dark EosActionButton:hover GtkLabel {
+	color: alpha(white, 0.8);
+	font-style: italic;
+}
+
+/* pressed */
+.dark EosActionButton:active {
+	border-color: alpha(white, 0.65);
+	box-shadow: 1px 1px 1px alpha(black, 0.95) inset,
+	            0px -1px 1px alpha(white, 0.7) inset;
+}	
+
+.dark EosActionButton:active {
+	color: alpha(white, 0.8);
 }
 
 /* ****** ACTION MENU ****** */
 
 GtkFrame#menu {
-	background-color: #D3D7CF;
-	border-color: #E1E2DE;
+	background-color: mix(white, black, 0.2);
+	border-color: mix(white, black, 0.5);
 	border-width: 0 0 0 6px;
 }
 
-GtkLabel#content {
-	color: #BABDB6;
-	font-size: 48pt;
-	background: #EEEEEC;
+GtkFrame.dark#menu {
+	background-color: mix(white, black, 0.8);
+	border-width: 0 0 0 6px;
 }