Add more simple button colors

Summary: Saturate the color a little more, add yellow

Test Plan: uiexamples

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'ff161f2d',
     'conpherence.pkg.js' => 'b5b51108',
-    'core.pkg.css' => 'e8d63571',
+    'core.pkg.css' => 'ea94e844',
     'core.pkg.js' => '1475bd91',
     'darkconsole.pkg.js' => '1f9a31bc',
     'differential.pkg.css' => 'a2755617',
@@ -125,7 +125,7 @@ return array(
     'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
     'rsrc/css/layout/phabricator-source-code-view.css' => '4383192f',
     'rsrc/css/phui/button/phui-button-bar.css' => '39fe680c',
-    'rsrc/css/phui/button/phui-button-simple.css' => 'd410596b',
+    'rsrc/css/phui/button/phui-button-simple.css' => '081cfeea',
     'rsrc/css/phui/button/phui-button.css' => '9f13ddcc',
     'rsrc/css/phui/calendar/phui-calendar-day.css' => '572b1893',
     'rsrc/css/phui/calendar/phui-calendar-list.css' => '576be600',
@@ -821,7 +821,7 @@ return array(
     'phui-box-css' => '269cbc99',
     'phui-button-bar-css' => '39fe680c',
     'phui-button-css' => '9f13ddcc',
-    'phui-button-simple-css' => 'd410596b',
+    'phui-button-simple-css' => '081cfeea',
     'phui-calendar-css' => '477acfaa',
     'phui-calendar-day-css' => '572b1893',
     'phui-calendar-list-css' => '576be600',
@@ -936,6 +936,9 @@ return array(
       'javelin-stratcom',
       'javelin-workflow',
     ),
+    '081cfeea' => array(
+      'phui-button-css',
+    ),
     '0825c27a' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1979,9 +1982,6 @@ return array(
     'd254d646' => array(
       'javelin-util',
     ),
-    'd410596b' => array(
-      'phui-button-css',
-    ),
     'd4505101' => array(
       'javelin-stratcom',
       'javelin-install',

src/applications/uiexample/examples/PHUIButtonExample.php

@@ -175,15 +175,19 @@ final class PHUIButtonExample extends PhabricatorUIExample {
     $designs = array(
       PHUIButtonView::BUTTONTYPE_SIMPLE,
     );
+    $colors = array('', 'red', 'green', 'yellow');
     $column = array();
     foreach ($designs as $design) {
-      foreach ($icons as $text => $icon) {
-        $column[] = id(new PHUIButtonView())
-          ->setTag('a')
-          ->setButtonType($design)
-          ->setIcon($icon)
-          ->setText($text)
-          ->addClass(PHUI::MARGIN_SMALL_RIGHT);
+      foreach ($colors as $color) {
+        foreach ($icons as $text => $icon) {
+          $column[] = id(new PHUIButtonView())
+            ->setTag('a')
+            ->setButtonType($design)
+            ->setColor($color)
+            ->setIcon($icon)
+            ->setText($text)
+            ->addClass(PHUI::MARGIN_SMALL_RIGHT);
+        }
       }
     }
 

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

@@ -41,7 +41,7 @@ button.simple.red,
 input[type="submit"].simple.red,
 a.simple.red,
 a.simple.red:visited {
-  background: #fff;
+  background: {$sh-redbackground};
   color: {$redtext};
   border: 1px solid {$sh-redborder};
 }
@@ -55,9 +55,9 @@ a.simple.red:visited .phui-icon-view {
 
 a.button.simple.red:hover,
 button.simple.red:hover {
-  border-color: {$red};
+  border-color: {$sh-redtext};
   background-image: none;
-  background-color: #fff;
+  background-color: {$sh-redbackground};
   transition: 0s;
 }
 
@@ -67,7 +67,7 @@ button.simple.green,
 input[type="submit"].simple.green,
 a.simple.green,
 a.simple.green:visited {
-  background: #fff;
+  background: {$sh-greenbackground};
   color: {$greentext};
   border: 1px solid {$sh-greenborder};
 }
@@ -81,9 +81,35 @@ a.simple.green:visited .phui-icon-view {
 
 a.button.simple.green:hover,
 button.simple.green:hover {
-  border-color: {$green};
+  border-color: {$sh-greentext};
   background-image: none;
-  background-color: #fff;
+  background-color: {$sh-greenbackground};
+  transition: 0s;
+}
+
+/* - Yellow  -----------------------------------------------------------------*/
+
+button.simple.yellow,
+input[type="submit"].simple.yellow,
+a.simple.yellow,
+a.simple.yellow:visited {
+  background-color: {$sh-yellowbackground};
+  color: {$sh-yellowtext};
+  border: 1px solid {$sh-yellowborder};
+}
+
+button.simple.yellow .phui-icon-view,
+input[type="submit"].simple.yellow .phui-icon-view,
+a.simple.yellow .phui-icon-view,
+a.simple.yellow:visited .phui-icon-view {
+  color: {$sh-yellowicon};
+}
+
+a.button.simple.yellow:hover,
+button.simple.yellow:hover {
+  border-color: {$sh-yellowtext};
+  background-image: none;
+  background-color: {$sh-yellowbackground};
   transition: 0s;
 }