[Redesign] New Simple button style, remove unused button states

Summary: Mostly testing a more colorful simple button state, feels decent in use. Removed other simple colors and toggle buttons which I couldn't find any use of.

Test Plan:
Test workboards, inline comments, uiexamples, profiles, documentview

{F407159}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'a6cf8066',
+    'core.pkg.css' => '3d5bd914',
     'core.pkg.js' => 'f3e08b38',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'bb338e4b',
@@ -127,14 +127,14 @@ return array(
     'rsrc/css/phui/phui-action-list.css' => '4f4d09f2',
     'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5',
     'rsrc/css/phui/phui-box.css' => 'a5bb366d',
-    'rsrc/css/phui/phui-button.css' => 'de610129',
+    'rsrc/css/phui/phui-button.css' => 'b995182d',
     'rsrc/css/phui/phui-crumbs-view.css' => 'aeff7a21',
     'rsrc/css/phui/phui-document.css' => '7b564cf6',
     'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
     'rsrc/css/phui/phui-fontkit.css' => '1e71371a',
     'rsrc/css/phui/phui-form-view.css' => 'e1abbe8e',
     'rsrc/css/phui/phui-form.css' => 'f535f938',
-    'rsrc/css/phui/phui-header-view.css' => 'c2855306',
+    'rsrc/css/phui/phui-header-view.css' => '00898f29',
     'rsrc/css/phui/phui-icon.css' => 'bc766998',
     'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
@@ -757,7 +757,7 @@ return array(
     'phui-action-header-view-css' => 'e4471f43',
     'phui-action-panel-css' => '3ee9afd5',
     'phui-box-css' => 'a5bb366d',
-    'phui-button-css' => 'de610129',
+    'phui-button-css' => 'b995182d',
     'phui-calendar-css' => '8675968e',
     'phui-calendar-day-css' => '38891735',
     'phui-calendar-list-css' => 'c1d0ca59',
@@ -769,7 +769,7 @@ return array(
     'phui-fontkit-css' => '1e71371a',
     'phui-form-css' => 'f535f938',
     'phui-form-view-css' => 'e1abbe8e',
-    'phui-header-view-css' => 'c2855306',
+    'phui-header-view-css' => '00898f29',
     'phui-icon-view-css' => 'bc766998',
     'phui-image-mask-css' => '5a8b09c8',
     'phui-info-panel-css' => '27ea50a1',

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

@@ -68,11 +68,16 @@ button.simple,
 input[type="submit"].simple,
 a.simple,
 a.simple:visited {
-  background-color: transparent;
+  background: #fff;
-  background-image: none;
+  color: {$blue};
-  border: 1px solid transparent;
+  border: 1px solid {$blue};
-  color: {$bluetext};
+}
-  border: 1px solid {$lightblueborder};
+
+button.simple .phui-icon-view,
+input[type="submit"].simple .phui-icon-view,
+a.simple .phui-icon-view,
+a.simple:visited .phui-icon-view {
+  color: {$blue};
 }
 
 a.disabled,
@@ -106,12 +111,13 @@ button.green:hover {
 
 a.button.simple:hover,
 button.simple:hover {
-  background-color: #fff;
+  background-color: {$blue};
-  border-color: {$blueborder};
+  color: #fff;
-  background-image: none;
+}
-  border-bottom-color: {$darkblueborder};
+
-  box-shadow: none;
+a.button.simple:hover .phui-icon-view,
-  text-decoration: none;
+button.simple:hover .phui-icon-view {
+  color: #fff;
 }
 
 a.button.simple .phui-icon-view {
@@ -120,9 +126,14 @@ a.button.simple .phui-icon-view {
 
 a.button.simple.phuix-dropdown-open {
   background-color: #fff;
+  color: {$blue};
   box-shadow: none;
 }
 
+a.button.simple.phuix-dropdown-open:hover .phui-icon-view {
+  color: {$blue};
+}
+
 body a.button.disabled:hover,
 body button.disabled:hover,
 body a.button.disabled:active,
@@ -187,35 +198,6 @@ a.policy-control .caret {
   float: right;
 }
 
-a.toggle {
-  display: inline-block;
-  padding: 4px 8px;
-  font-size: 12px;
-  font-weight: bold;
-  color: #555;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: baseline;
-  background-color: {$lightgreybackground};
-  margin: 0 6px 0 0;
-  border-radius: 3px;
-  box-shadow: inset 0 0 3px rgba(0,0,0,.4);
-}
-
-a.toggle:hover {
-  background-color: #14568e;
-  color: #fff
-}
-
-a.toggle-selected {
-  background-color: #14568e;
-  color: #fff
-}
-
-a.toggle-fixed {
-  cursor: default;
-}
-
 .caret {
   display: inline-block;
   width: 0;
@@ -331,6 +313,7 @@ a.toggle-fixed {
 
 .phui-button-bar .button.simple:hover {
   border-color: {$lightblueborder};
+  background-color: #fff;
   color: {$sky};
 }
 
@@ -338,58 +321,3 @@ a.toggle-fixed {
   border-color: {$lightblueborder};
   color: {$sky};
 }
-
-/* Simple Button Colors */
-a.simple.simple-blue,
-button.simple.simple-blue {
-  border-color: {$blue};
-  background: {$lightblue};
-  color: {$blue};
-}
-
-a.simple.simple-blue:hover,
-button.simple.simple-blue:hover {
-  color: {$blue};
-  border-color: {$blue};
-}
-
-a.simple.simple-blue .phui-icon-view,
-button.simple.simple-blue .phui-icon-view {
-  color: {$blue};
-}
-
-a.simple.simple-yellow,
-button.simple.simple-yellow {
-  border-color: #bc7837;
-  background: {$lightyellow};
-  color: #bc7837;
-}
-
-a.simple.simple-yellow:hover,
-button.simple.simple-yellow:hover {
-  color: #bc7837;
-  border-color: #bc7837;
-}
-
-a.simple.simple-yellow .phui-icon-view,
-button.simple.simple-yellow .phui-icon-view {
-  color: #bc7837;
-}
-
-a.simple.simple-grey,
-button.simple.simple-grey {
-  border-color: {$greyborder};
-  background: {$lightgreybackground};
-  color: {$greytext};
-}
-
-a.simple.simple-grey:hover,
-button.simple.simple-grey:hover {
-  color: {$greytext};
-  border-color: {$greyborder};
-}
-
-a.simple.simple-grey .phui-icon-view,
-button.simple.simple-grey .phui-icon-view {
-  color: {$greytext};
-}

webroot/rsrc/css/phui/phui-header-view.css

@@ -3,9 +3,7 @@
  */
 
 .phui-header-shell {
-  border-width: 1px 0;
+  border-bottom: 1px solid {$hovergrey};
-  border-style: solid;
-  border-color: {$hovergrey};
   overflow: hidden;
 }
 
@@ -52,8 +50,7 @@ body .phui-header-shell.phui-bleed-header
   font-weight: 500;
 }
 
-.phui-header-view a,
+.phui-header-view > a {
-.phui-header-view a.simple {
   color: {$darkbluetext};
 }