Flatten button colors, remove black

Summary:
Simplifies buttons states and colors.

{F390327}

Test Plan: Visited many pages. Seems like I didn't break anything. IE, Safari, FF, Chrome.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Differential Revision: https://secure.phabricator.com/D12644

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'fabe73f9',
+    'core.pkg.css' => '82833797',
     'core.pkg.js' => '59d01bb7',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '3500921f',
@@ -127,7 +127,7 @@ return array(
     'rsrc/css/phui/phui-action-list.css' => '4f4d09f2',
     'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5',
     'rsrc/css/phui/phui-box.css' => '7b3a2eed',
-    'rsrc/css/phui/phui-button.css' => 'f780e520',
+    'rsrc/css/phui/phui-button.css' => '0e41a3ce',
     'rsrc/css/phui/phui-crumbs-view.css' => '594d719e',
     'rsrc/css/phui/phui-document.css' => '94d5dcd8',
     'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
@@ -778,7 +778,7 @@ return array(
     'phui-action-header-view-css' => '89c497e7',
     'phui-action-panel-css' => '3ee9afd5',
     'phui-box-css' => '7b3a2eed',
-    'phui-button-css' => 'f780e520',
+    'phui-button-css' => '0e41a3ce',
     'phui-calendar-css' => '8675968e',
     'phui-calendar-day-css' => 'de035c8a',
     'phui-calendar-list-css' => 'c1d0ca59',

src/applications/uiexample/examples/PHUIButtonExample.php

@@ -14,7 +14,7 @@ final class PHUIButtonExample extends PhabricatorUIExample {
     $request = $this->getRequest();
     $user = $request->getUser();
 
-    $colors = array('', 'green', 'grey', 'black', 'disabled');
+    $colors = array('', 'green', 'grey', 'disabled');
     $sizes = array('', 'small');
     $tags = array('a', 'button');
 
@@ -69,7 +69,6 @@ final class PHUIButtonExample extends PhabricatorUIExample {
    $colors = array(null,
      PHUIButtonView::GREEN,
      PHUIButtonView::GREY,
-     PHUIButtonView::BLACK,
      PHUIButtonView::DISABLED,
     );
    $sizes = array(null, PHUIButtonView::SMALL);

src/view/phui/PHUIButtonView.php

@@ -4,7 +4,6 @@ final class PHUIButtonView extends AphrontTagView {
 
   const GREEN = 'green';
   const GREY = 'grey';
-  const BLACK = 'black';
   const DISABLED = 'disabled';
 
   const SIMPLE = 'simple';

webroot/rsrc/css/phui/phui-button.css

@@ -26,19 +26,17 @@ button,
 a.button,
 a.button:visited,
 input[type="submit"] {
-  background-color: #3477ad;
+  background-color: {$blue};
+  border: 1px solid {$blue};
   color: white;
-  border: 1px solid #19558D;
   cursor: pointer;
   font-weight: bold;
   font-size: 13px;
   display: inline-block;
-  padding: 3px 12px 4px;
+  padding: 4px 14px 5px;
   text-align: center;
   white-space: nowrap;
   border-radius: 3px;
-  background-image: linear-gradient(to bottom, #3b86c4, #2b628f);
-  background-image: -webkit-linear-gradient(top, #3b86c4, #2b628f);
 }
 
 /* Buttons with images (full size only) */
@@ -50,24 +48,11 @@ a.icon:visited {
   text-indent: 29px;
 }
 
-button.black,
-a.black,
-a.black:visited {
-  background-color: #383838;
-  background-image: linear-gradient(to bottom, #505d65, #2d373c);
-  background-image: -webkit-linear-gradient(top, #505d65, #2d373c);
-  border: 1px solid {$darkgreytext};
-  border-bottom-color: #000;
-}
-
 button.green,
 a.green,
 a.green:visited {
-  background-color: #348e20;
+  background-color: {$green};
-  background-image: linear-gradient(to bottom, #4e9b33, #158009);
+  border-color: {$green};
-  background-image: -webkit-linear-gradient(top, #4e9b33, #158009);
-  border: 1px solid #3b6e22;
-  border-bottom-color: #2c5a15;
 }
 
 button.grey,
@@ -75,11 +60,8 @@ input[type="submit"].grey,
 a.grey,
 a.grey:visited {
   background-color: {$lightgreybackground};
-  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
-  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
   border-color: {$lightgreyborder};
   color: {$darkgreytext};
-  border-bottom-color: {$greyborder};
 }
 
 button.simple,
@@ -102,19 +84,6 @@ button[disabled] {
   opacity: 0.5;
 }
 
-body button:active,
-body a.button:active {
-  box-shadow: inset 0 0 4px rgba(0,0,0,.4);
-}
-
-button.grey:active,
-a.grey:active,
-button.grey_active,
-a.button.phuix-dropdown-open {
-  background-color: #7d7d7d;
-  box-shadow: inset 0 0 4px rgba(0,0,0,.2);
-}
-
 a.phuix-dropdown-open {
   color: {$greytext};
 }
@@ -122,7 +91,17 @@ a.phuix-dropdown-open {
 a.button:hover,
 button:hover {
   text-decoration: none;
-  box-shadow: inset 0 0 5px rgba(0,0,0,.4);
+  background-color: {$sky};
+}
+
+a.button.grey:hover,
+button.grey:hover {
+  background-color: #fff;
+}
+
+a.button.green:hover,
+button.green:hover {
+  background-color: #0DAD48;
 }
 
 a.button.simple:hover,
@@ -144,12 +123,6 @@ a.button.simple.phuix-dropdown-open {
   box-shadow: none;
 }
 
-a.button.grey:hover,
-button.grey:hover {
-  text-decoration: none;
-  box-shadow: inset 0 0 4px rgba(0,0,0,.2);
-}
-
 body a.button.disabled:hover,
 body button.disabled:hover,
 body a.button.disabled:active,
@@ -280,7 +253,7 @@ a.toggle-fixed {
 
 .dropdown .caret {
   margin-top: 7px;
-  margin-left: 4px;
+  margin-left: 6px;
 }
 
 .small.dropdown .caret {
@@ -299,7 +272,7 @@ a.toggle-fixed {
 .button .phui-icon-view {
   display: inline-block;
   position: absolute;
-  top: 5px;
+  top: 6px;
   left: 10px;
 }
 
@@ -308,7 +281,7 @@ a.toggle-fixed {
 }
 
 .button.has-icon .phui-button-text {
-  margin-left: 16px;
+  margin-left: 14px;
 }
 
 /* Login Buttons */