Move ActionHeaders to PHUI, add ObjectBox Support, new Colors

Summary: Moves PhabricatorActionHeaderView to PHUIActionHeaderView, adds Red, Green, and Violet colors and extend ObjectBox to take colors and action headers.

Test Plan:
Tested new Welcome layout as well as UIExamples, Workboards, and Hovercards

{F169669}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => 'f9c94804',
+    'core.pkg.css' => 'daedf92a',
     'core.pkg.js' => '8c184823',
     'darkconsole.pkg.js' => 'df001cab',
     'differential.pkg.css' => '4a93db37',
@@ -19,7 +19,7 @@ return array(
     'rsrc/css/aphront/aphront-bars.css' => '231ac33c',
     'rsrc/css/aphront/context-bar.css' => '1c3b0529',
     'rsrc/css/aphront/dark-console.css' => '6378ef3d',
-    'rsrc/css/aphront/dialog-view.css' => '318fe7e1',
+    'rsrc/css/aphront/dialog-view.css' => '4dbbe3bb',
     'rsrc/css/aphront/error-view.css' => '9f1d5518',
     'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d',
     'rsrc/css/aphront/list-filter-view.css' => '2ae43867',
@@ -43,7 +43,7 @@ return array(
     'rsrc/css/application/chatlog/chatlog.css' => '852140ff',
     'rsrc/css/application/config/config-options.css' => '7fedf08b',
     'rsrc/css/application/config/config-template.css' => '25d446d6',
-    'rsrc/css/application/config/config-welcome.css' => '09daaca0',
+    'rsrc/css/application/config/config-welcome.css' => 'b0d16200',
     'rsrc/css/application/config/setup-issue.css' => '69e640e7',
     'rsrc/css/application/conpherence/menu.css' => 'e1e0fdf1',
     'rsrc/css/application/conpherence/message-pane.css' => '11a393ca',
@@ -52,7 +52,7 @@ return array(
     'rsrc/css/application/conpherence/widget-pane.css' => 'bf275a6c',
     'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
     'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
-    'rsrc/css/application/dashboard/dashboard.css' => '22dfc441',
+    'rsrc/css/application/dashboard/dashboard.css' => 'a2bfdcbf',
     'rsrc/css/application/diff/inline-comment-summary.css' => '8cfd34e8',
     'rsrc/css/application/differential/add-comment.css' => 'c478bcaa',
     'rsrc/css/application/differential/changeset-view.css' => 'ff8eacf8',
@@ -65,7 +65,7 @@ return array(
     'rsrc/css/application/diffusion/commit-view.css' => '92d1e8f9',
     'rsrc/css/application/diffusion/diffusion-icons.css' => '9c5828da',
     'rsrc/css/application/diffusion/diffusion-source.css' => '66fdf661',
-    'rsrc/css/application/feed/feed.css' => '5cbec787',
+    'rsrc/css/application/feed/feed.css' => '4e544db4',
     'rsrc/css/application/files/global-drag-and-drop.css' => '697324ad',
     'rsrc/css/application/flag/flag.css' => '5337623f',
     'rsrc/css/application/harbormaster/harbormaster.css' => 'cec833b7',
@@ -93,7 +93,7 @@ return array(
     'rsrc/css/application/ponder/feed.css' => 'e62615b6',
     'rsrc/css/application/ponder/post.css' => 'ebab8a70',
     'rsrc/css/application/ponder/vote.css' => '8ed6ed8b',
-    'rsrc/css/application/profile/profile-view.css' => '91c6dd26',
+    'rsrc/css/application/profile/profile-view.css' => 'b459416e',
     'rsrc/css/application/projects/project-icon.css' => 'c2ecb7f1',
     'rsrc/css/application/projects/project-tag.css' => '095c9404',
     'rsrc/css/application/releeph/releeph-core.css' => '9b3c5733',
@@ -112,17 +112,17 @@ return array(
     'rsrc/css/font/font-awesome.css' => '73d075c3',
     'rsrc/css/font/font-source-sans-pro.css' => '91d53463',
     'rsrc/css/font/phui-font-icon-base.css' => 'eb84f033',
-    'rsrc/css/layout/phabricator-action-header-view.css' => 'f11f18b5',
+    'rsrc/css/layout/phabricator-action-header-view.css' => '83e2cc86',
-    'rsrc/css/layout/phabricator-action-list-view.css' => '35dbd16e',
     'rsrc/css/layout/phabricator-crumbs-view.css' => '7fbf25b8',
     'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
-    'rsrc/css/layout/phabricator-hovercard-view.css' => 'cae6e28f',
+    'rsrc/css/layout/phabricator-hovercard-view.css' => '893f4783',
     'rsrc/css/layout/phabricator-side-menu-view.css' => 'a2ccd7bd',
     'rsrc/css/layout/phabricator-source-code-view.css' => '7d346aa4',
     'rsrc/css/phui/calendar/phui-calendar-day.css' => 'de035c8a',
     'rsrc/css/phui/calendar/phui-calendar-list.css' => 'c1d0ca59',
     'rsrc/css/phui/calendar/phui-calendar-month.css' => 'a92e47d2',
     'rsrc/css/phui/calendar/phui-calendar.css' => '5e1ad989',
+    'rsrc/css/phui/phui-action-list.css' => '9ee9910a',
     'rsrc/css/phui/phui-box.css' => '7b3a2eed',
     'rsrc/css/phui/phui-button.css' => 'c7412aa1',
     'rsrc/css/phui/phui-document.css' => 'a5615198',
@@ -135,7 +135,7 @@ return array(
     'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-list.css' => '43ed2d93',
-    'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
+    'rsrc/css/phui/phui-object-box.css' => 'e9f7e938',
     'rsrc/css/phui/phui-object-item-list-view.css' => '46e12abc',
     'rsrc/css/phui/phui-pinboard-view.css' => '2c8abb19',
     'rsrc/css/phui/phui-property-list-view.css' => '2f7199e8',
@@ -146,12 +146,12 @@ return array(
     'rsrc/css/phui/phui-text.css' => '23e9b4b7',
     'rsrc/css/phui/phui-timeline-view.css' => 'bbd990d0',
     'rsrc/css/phui/phui-workboard-view.css' => '2bf82d00',
-    'rsrc/css/phui/phui-workpanel-view.css' => 'fddd97bf',
+    'rsrc/css/phui/phui-workpanel-view.css' => 'a8d0273b',
     'rsrc/css/sprite-apps-large.css' => '12ea1ced',
     'rsrc/css/sprite-apps.css' => '37ee4f4e',
     'rsrc/css/sprite-conpherence.css' => '3b4a0487',
     'rsrc/css/sprite-docs.css' => '5f65d0da',
-    'rsrc/css/sprite-gradient.css' => '4aec2401',
+    'rsrc/css/sprite-gradient.css' => '4bdb98a7',
     'rsrc/css/sprite-login.css' => '67ff30b2',
     'rsrc/css/sprite-main-header.css' => '92720ee2',
     'rsrc/css/sprite-menu.css' => '28281e16',
@@ -323,7 +323,7 @@ return array(
     'rsrc/image/sprite-conpherence.png' => 'a5ab2eb7',
     'rsrc/image/sprite-docs-X2.png' => '6dc1adad',
     'rsrc/image/sprite-docs.png' => '4636297f',
-    'rsrc/image/sprite-gradient.png' => '7c71fb29',
+    'rsrc/image/sprite-gradient.png' => 'ec15a417',
     'rsrc/image/sprite-login-X2.png' => '5f75d60b',
     'rsrc/image/sprite-login.png' => 'efe40ddb',
     'rsrc/image/sprite-main-header.png' => '83521873',
@@ -498,7 +498,7 @@ return array(
     'aphront-bars' => '231ac33c',
     'aphront-contextbar-view-css' => '1c3b0529',
     'aphront-dark-console-css' => '6378ef3d',
-    'aphront-dialog-view-css' => '318fe7e1',
+    'aphront-dialog-view-css' => '4dbbe3bb',
     'aphront-error-view-css' => '9f1d5518',
     'aphront-list-filter-view-css' => '2ae43867',
     'aphront-multi-column-view-css' => '1b95ab2e',
@@ -513,7 +513,7 @@ return array(
     'auth-css' => '1e655982',
     'changeset-view-manager' => 'd2907473',
     'config-options-css' => '7fedf08b',
-    'config-welcome-css' => '09daaca0',
+    'config-welcome-css' => 'b0d16200',
     'conpherence-menu-css' => 'e1e0fdf1',
     'conpherence-message-pane-css' => '11a393ca',
     'conpherence-notification-css' => '04a6e10a',
@@ -702,8 +702,7 @@ return array(
     'paste-css' => 'aa1767d1',
     'path-typeahead' => 'f7fc67ec',
     'people-profile-css' => 'ba7b2762',
-    'phabricator-action-header-view-css' => 'f11f18b5',
+    'phabricator-action-list-view-css' => '9ee9910a',
-    'phabricator-action-list-view-css' => '35dbd16e',
     'phabricator-application-launch-view-css' => '8b7e271d',
     'phabricator-busy' => '6453c869',
     'phabricator-chatlog-css' => '852140ff',
@@ -711,16 +710,16 @@ return array(
     'phabricator-core-css' => '40151074',
     'phabricator-countdown-css' => '86b7b0a0',
     'phabricator-crumbs-view-css' => '7fbf25b8',
-    'phabricator-dashboard-css' => '22dfc441',
+    'phabricator-dashboard-css' => 'a2bfdcbf',
     'phabricator-drag-and-drop-file-upload' => '1d8ad5c3',
     'phabricator-draggable-list' => '2cad29d1',
     'phabricator-fatal-config-template-css' => '25d446d6',
-    'phabricator-feed-css' => '5cbec787',
+    'phabricator-feed-css' => '4e544db4',
     'phabricator-file-upload' => 'a4ae61bf',
     'phabricator-filetree-view-css' => 'fccf9f82',
     'phabricator-flag-css' => '5337623f',
     'phabricator-hovercard' => '7e8468ae',
-    'phabricator-hovercard-view-css' => 'cae6e28f',
+    'phabricator-hovercard-view-css' => '893f4783',
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => 'ad7a69ca',
     'phabricator-main-menu-view' => 'aceca0e9',
@@ -731,7 +730,7 @@ return array(
     'phabricator-object-selector-css' => '029a133d',
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => '41ed7994',
-    'phabricator-profile-css' => '91c6dd26',
+    'phabricator-profile-css' => 'b459416e',
     'phabricator-project-tag-css' => '095c9404',
     'phabricator-remarkup-css' => '864d4f5e',
     'phabricator-search-results-css' => 'f240504c',
@@ -763,6 +762,7 @@ return array(
     'phortune-credit-card-form-css' => 'b25b4beb',
     'phrequent-css' => 'ffc185ad',
     'phriction-document-css' => '7d7f0071',
+    'phui-action-header-view-css' => '83e2cc86',
     'phui-box-css' => '7b3a2eed',
     'phui-button-css' => 'c7412aa1',
     'phui-calendar-css' => '5e1ad989',
@@ -780,7 +780,7 @@ return array(
     'phui-image-mask-css' => '5a8b09c8',
     'phui-info-panel-css' => '27ea50a1',
     'phui-list-view-css' => '43ed2d93',
-    'phui-object-box-css' => 'ce92d8ec',
+    'phui-object-box-css' => 'e9f7e938',
     'phui-object-item-list-view-css' => '46e12abc',
     'phui-pinboard-view-css' => '2c8abb19',
     'phui-property-list-view-css' => '2f7199e8',
@@ -791,7 +791,7 @@ return array(
     'phui-text-css' => '23e9b4b7',
     'phui-timeline-view-css' => 'bbd990d0',
     'phui-workboard-view-css' => '2bf82d00',
-    'phui-workpanel-view-css' => 'fddd97bf',
+    'phui-workpanel-view-css' => 'a8d0273b',
     'phuix-action-list-view' => 'b5c256b8',
     'phuix-action-view' => '6e8cefa4',
     'phuix-dropdown-menu' => 'bd4c8dca',
@@ -815,7 +815,7 @@ return array(
     'sprite-apps-large-css' => '12ea1ced',
     'sprite-conpherence-css' => '3b4a0487',
     'sprite-docs-css' => '5f65d0da',
-    'sprite-gradient-css' => '4aec2401',
+    'sprite-gradient-css' => '4bdb98a7',
     'sprite-login-css' => '67ff30b2',
     'sprite-main-header-css' => '92720ee2',
     'sprite-menu-css' => '28281e16',

resources/sprite/manifest/gradient.json

@@ -1,20 +1,35 @@
 {
   "version" : 1,
   "sprites" : {
-    "gradient-dark-grey-header" : {
+    "gradient-dark-grey-header"   : {
       "name" : "gradient-dark-grey-header",
       "rule" : ".gradient-dark-grey-header",
       "hash" : "e8762dd2849410a7e4fba8f972f946ff"
     },
-    "gradient-grey-header"      : {
+    "gradient-grey-header"        : {
       "name" : "gradient-grey-header",
       "rule" : ".gradient-grey-header",
       "hash" : "1c8f8d61984e3fc5a7e528b9bd4d484a"
     },
-    "gradient-lightblue-header" : {
+    "gradient-lightblue-header"   : {
       "name" : "gradient-lightblue-header",
       "rule" : ".gradient-lightblue-header",
       "hash" : "e7753a6ce63c6822a559266eef9e255b"
+    },
+    "gradient-lightgreen-header"  : {
+      "name" : "gradient-lightgreen-header",
+      "rule" : ".gradient-lightgreen-header",
+      "hash" : "87b5c391ea4ea84dd8531fb0f199cbeb"
+    },
+    "gradient-lightred-header"    : {
+      "name" : "gradient-lightred-header",
+      "rule" : ".gradient-lightred-header",
+      "hash" : "a367ea9163aa15f52c105b5805cf493e"
+    },
+    "gradient-lightviolet-header" : {
+      "name" : "gradient-lightviolet-header",
+      "rule" : ".gradient-lightviolet-header",
+      "hash" : "e17e05135e53e1258340cfc27f96f23f"
     }
   },
   "scales"  : [

src/__phutil_library_map__.php

@@ -1005,6 +1005,8 @@ phutil_register_library_map(array(
     'NuanceTransaction' => 'applications/nuance/storage/NuanceTransaction.php',
     'OwnersPackageReplyHandler' => 'applications/owners/mail/OwnersPackageReplyHandler.php',
     'PHUI' => 'view/phui/PHUI.php',
+    'PHUIActionHeaderExample' => 'applications/uiexample/examples/PHUIActionHeaderExample.php',
+    'PHUIActionHeaderView' => 'view/phui/PHUIActionHeaderView.php',
     'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php',
     'PHUIBoxView' => 'view/phui/PHUIBoxView.php',
     'PHUIButtonBarExample' => 'applications/uiexample/examples/PHUIButtonBarExample.php',
@@ -1101,8 +1103,6 @@ phutil_register_library_map(array(
     'PhabricatorAccessControlTestCase' => 'applications/base/controller/__tests__/PhabricatorAccessControlTestCase.php',
     'PhabricatorAccessLog' => 'infrastructure/log/PhabricatorAccessLog.php',
     'PhabricatorAccessLogConfigOptions' => 'applications/config/option/PhabricatorAccessLogConfigOptions.php',
-    'PhabricatorActionHeaderExample' => 'applications/uiexample/examples/PhabricatorActionHeaderExample.php',
-    'PhabricatorActionHeaderView' => 'view/layout/PhabricatorActionHeaderView.php',
     'PhabricatorActionListView' => 'view/layout/PhabricatorActionListView.php',
     'PhabricatorActionView' => 'view/layout/PhabricatorActionView.php',
     'PhabricatorAllCapsTranslation' => 'infrastructure/internationalization/translation/PhabricatorAllCapsTranslation.php',
@@ -3779,6 +3779,8 @@ phutil_register_library_map(array(
     'NuanceSourceViewController' => 'NuanceController',
     'NuanceTransaction' => 'PhabricatorApplicationTransaction',
     'OwnersPackageReplyHandler' => 'PhabricatorMailReplyHandler',
+    'PHUIActionHeaderExample' => 'PhabricatorUIExample',
+    'PHUIActionHeaderView' => 'AphrontView',
     'PHUIBoxExample' => 'PhabricatorUIExample',
     'PHUIBoxView' => 'AphrontTagView',
     'PHUIButtonBarExample' => 'PhabricatorUIExample',
@@ -3878,8 +3880,6 @@ phutil_register_library_map(array(
     'PhabricatorAWSConfigOptions' => 'PhabricatorApplicationConfigOptions',
     'PhabricatorAccessControlTestCase' => 'PhabricatorTestCase',
     'PhabricatorAccessLogConfigOptions' => 'PhabricatorApplicationConfigOptions',
-    'PhabricatorActionHeaderExample' => 'PhabricatorUIExample',
-    'PhabricatorActionHeaderView' => 'AphrontView',
     'PhabricatorActionListView' => 'AphrontView',
     'PhabricatorActionView' => 'AphrontView',
     'PhabricatorAllCapsTranslation' => 'PhabricatorTranslation',

src/applications/config/controller/PhabricatorConfigWelcomeController.php

@@ -358,52 +358,38 @@ final class PhabricatorConfigWelcomeController
     $columns = id(new AphrontMultiColumnView())
       ->addColumn($col1)
       ->addColumn($col2)
-      ->setFluidLayout(true)
+      ->setFluidLayout(true);
-      ->setGutter(AphrontMultiColumnView::GUTTER_SMALL);
 
-    return array(
+    return phutil_tag(
-      $header,
+      'div',
-      $columns,
+      array(
-    );
+        'class' => 'config-welcome',
-  }
+      ),
-
+      array(
-  private function newHeader($title, $done) {
+        $header,
-    $header = id(new PhabricatorActionHeaderView())
+        $columns,
-      ->setHeaderTitle($title);
+      ));
-
-    if ($done === true) {
-      $header
-        ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREEN)
-        ->addAction(id(new PHUIIconView())->setIconFont('fa-check'));
-    } else if ($done === false) {
-      $header
-        ->setHeaderColor(PhabricatorActionHeaderView::HEADER_BLUE)
-        ->addAction(id(new PHUIIconView())->setIconFont('fa-exclamation'));
-    } else {
-      $header
-        ->setHeaderColor(PhabricatorActionHeaderView::HEADER_LIGHTBLUE);
-    }
-
-    return $header;
   }
 
   private function newItem(AphrontRequest $request, $title, $done, $content) {
     $viewer = $request->getUser();
 
-    $header = $this->newHeader($title, $done);
+    $box = new PHUIObjectBoxView();
+    $header = new PHUIActionHeaderView();
+    $header->setHeaderTitle($title);
+    if ($done === true) {
+      $box->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTGREEN);
+      $header->addAction(id(new PHUIIconView())->setIconFont('fa-check'));
+    } else if ($done === false) {
+      $box->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTVIOLET);
+      $header->addAction(id(new PHUIIconView())->setIconFont('fa-exclamation'));
+    }
 
     $content = PhabricatorMarkupEngine::renderOneObject(
       id(new PhabricatorMarkupOneOff())->setContent($content),
       'default',
       $viewer);
 
-    $header = phutil_tag(
-      'div',
-      array(
-        'class' => 'config-welcome-box-header',
-      ),
-      $header);
-
     $content = phutil_tag(
       'div',
       array(
@@ -411,10 +397,10 @@ final class PhabricatorConfigWelcomeController
       ),
       $content);
 
-    return id(new PHUIBoxView())
+    $box->setHeader($header);
-      ->addClass('config-welcome-box')
+    $box->appendChild($content);
-      ->appendChild($header)
+
-      ->appendChild($content);
+    return $box;
   }
 
 }

src/applications/conpherence/controller/ConpherenceWidgetController.php

@@ -75,8 +75,8 @@ final class ConpherenceWidgetController extends
       array(
         'class' => 'widgets-header',
       ),
-      id(new PhabricatorActionHeaderView())
+      id(new PHUIActionHeaderView())
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREY)
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_GREY)
       ->setHeaderTitle(pht('Participants'))
       ->setHeaderHref('#')
       ->setDropdown(true)

src/applications/dashboard/engine/PhabricatorDashboardPanelRenderingEngine.php

@@ -154,16 +154,16 @@ final class PhabricatorDashboardPanelRenderingEngine extends Phobject {
         $header = null;
         break;
       case self::HEADER_MODE_EDIT:
-        $header = id(new PhabricatorActionHeaderView())
+        $header = id(new PHUIActionHeaderView())
           ->setHeaderTitle($title)
-          ->setHeaderColor(PhabricatorActionHeaderView::HEADER_LIGHTBLUE);
+          ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTBLUE);
         $header = $this->addPanelHeaderActions($header);
         break;
       case self::HEADER_MODE_NORMAL:
       default:
-        $header = id(new PhabricatorActionHeaderView())
+        $header = id(new PHUIActionHeaderView())
           ->setHeaderTitle($title)
-          ->setHeaderColor(PhabricatorActionHeaderView::HEADER_LIGHTBLUE);
+          ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTBLUE);
         break;
     }
     $icon = id(new PHUIIconView())
@@ -209,23 +209,23 @@ final class PhabricatorDashboardPanelRenderingEngine extends Phobject {
         $header = null;
         break;
       case self::HEADER_MODE_EDIT:
-        $header = id(new PhabricatorActionHeaderView())
+        $header = id(new PHUIActionHeaderView())
           ->setHeaderTitle($panel->getName())
-          ->setHeaderColor(PhabricatorActionHeaderView::HEADER_LIGHTBLUE);
+          ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTBLUE);
         $header = $this->addPanelHeaderActions($header);
         break;
       case self::HEADER_MODE_NORMAL:
       default:
-        $header = id(new PhabricatorActionHeaderView())
+        $header = id(new PHUIActionHeaderView())
           ->setHeaderTitle($panel->getName())
-          ->setHeaderColor(PhabricatorActionHeaderView::HEADER_LIGHTBLUE);
+          ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTBLUE);
         break;
     }
     return $header;
   }
 
   private function addPanelHeaderActions(
-    PhabricatorActionHeaderView $header) {
+    PHUIActionHeaderView $header) {
     $panel = $this->getPanel();
 
     $dashboard_id = $this->getDashboardID();

src/applications/feed/builder/PhabricatorFeedBuilder.php

@@ -51,7 +51,7 @@ final class PhabricatorFeedBuilder {
             phutil_tag_div('phabricator-feed-story-date-separator'));
         }
         $last_date = $date;
-        $header = new PhabricatorActionHeaderView();
+        $header = new PHUIActionHeaderView();
         $header->setHeaderTitle($date);
 
         $null_view->appendChild($header);

src/applications/project/storage/PhabricatorProjectColumn.php

@@ -58,9 +58,9 @@ final class PhabricatorProjectColumn
 
   public function getHeaderColor() {
     if ($this->isDefaultColumn()) {
-      return PhabricatorActionHeaderView::HEADER_DARK_GREY;
+      return PHUIActionHeaderView::HEADER_DARK_GREY;
     }
-    return PhabricatorActionHeaderView::HEADER_GREY;
+    return PHUIActionHeaderView::HEADER_GREY;
   }
 
 

src/applications/uiexample/examples/PHUIActionHeaderExample.php

@@ -1,6 +1,6 @@
 <?php
 
-final class PhabricatorActionHeaderExample extends PhabricatorUIExample {
+final class PHUIActionHeaderExample extends PhabricatorUIExample {
 
   public function getName() {
     return 'Action Headers';
@@ -16,28 +16,28 @@ final class PhabricatorActionHeaderExample extends PhabricatorUIExample {
     $title1 = id(new PHUIHeaderView())
       ->setHeader(pht('Header Plain'));
 
-    $header1 = id(new PhabricatorActionHeaderView())
+    $header1 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Colorless');
 
-    $header2 = id(new PhabricatorActionHeaderView())
+    $header2 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Light Grey')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREY);
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_GREY);
 
-    $header3 = id(new PhabricatorActionHeaderView())
+    $header3 = id(new PHUIActionHeaderView())
-      ->setHeaderTitle('Blue')
+      ->setHeaderTitle('Light Blue')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_BLUE);
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTBLUE);
 
-    $header4 = id(new PhabricatorActionHeaderView())
+    $header4 = id(new PHUIActionHeaderView())
-      ->setHeaderTitle('Green')
+      ->setHeaderTitle('Light Green')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREEN);
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTGREEN);
 
-    $header5 = id(new PhabricatorActionHeaderView())
+    $header5 = id(new PHUIActionHeaderView())
-      ->setHeaderTitle('Red')
+      ->setHeaderTitle('Light Red')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_RED);
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTRED);
 
-    $header6 = id(new PhabricatorActionHeaderView())
+    $header6 = id(new PHUIActionHeaderView())
-      ->setHeaderTitle('Yellow')
+      ->setHeaderTitle('Light Violet')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_YELLOW);
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTVIOLET);
 
     $layout1 = id(new AphrontMultiColumnView())
       ->addColumn($header1)
@@ -57,33 +57,33 @@ final class PhabricatorActionHeaderExample extends PhabricatorUIExample {
     $title2 = id(new PHUIHeaderView())
       ->setHeader(pht('With Policy Icons'));
 
-    $header1 = id(new PhabricatorActionHeaderView())
+    $header1 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Company')
       ->setHeaderIcon('company-dark');
 
-    $header2 = id(new PhabricatorActionHeaderView())
+    $header2 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Public')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREY)
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_GREY)
       ->setHeaderIcon('public-dark');
 
-    $header3 = id(new PhabricatorActionHeaderView())
+    $header3 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Restricted')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_BLUE)
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTBLUE)
       ->setHeaderIcon('restricted-white');
 
-    $header4 = id(new PhabricatorActionHeaderView())
+    $header4 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Company')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREEN)
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTGREEN)
       ->setHeaderIcon('company-white');
 
-    $header5 = id(new PhabricatorActionHeaderView())
+    $header5 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Public')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_RED)
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTRED)
       ->setHeaderIcon('public-white');
 
-    $header6 = id(new PhabricatorActionHeaderView())
+    $header6 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Restricted')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_YELLOW)
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTVIOLET)
       ->setHeaderIcon('restriced-white');
 
     $layout2 = id(new AphrontMultiColumnView())
@@ -110,11 +110,11 @@ final class PhabricatorActionHeaderExample extends PhabricatorUIExample {
     $action1->setHref('#');
 
     $action2 = new PHUIIconView();
-    $action1->setIconFont('fa-heart');
+    $action2->setIconFont('fa-heart');
     $action2->setHref('#');
 
     $action3 = new PHUIIconView();
-    $action1->setIconFont('fa-tag');
+    $action3->setIconFont('fa-tag');
     $action3->setHref('#');
 
     $action4 = new PHUIIconView();
@@ -129,40 +129,40 @@ final class PhabricatorActionHeaderExample extends PhabricatorUIExample {
     $action6->setIconFont('fa-arrows');
     $action6->setHref('#');
 
-    $header1 = id(new PhabricatorActionHeaderView())
+    $header1 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Company')
       ->setHeaderHref('http://example.com/')
       ->addAction($action1);
 
-    $header2 = id(new PhabricatorActionHeaderView())
+    $header2 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Public')
       ->setHeaderHref('http://example.com/')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREY)
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_GREY)
       ->addAction($action1);
 
-    $header3 = id(new PhabricatorActionHeaderView())
+    $header3 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Restricted')
       ->setHeaderHref('http://example.com/')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_BLUE)
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTBLUE)
       ->addAction($action2);
 
-    $header4 = id(new PhabricatorActionHeaderView())
+    $header4 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Company')
       ->setHeaderHref('http://example.com/')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREEN)
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTGREEN)
       ->addAction($action3);
 
-    $header5 = id(new PhabricatorActionHeaderView())
+    $header5 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Public')
       ->setHeaderHref('http://example.com/')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_RED)
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTRED)
       ->addAction($action4)
       ->addAction($action5);
 
-    $header6 = id(new PhabricatorActionHeaderView())
+    $header6 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Restricted')
       ->setHeaderHref('http://example.com/')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_YELLOW)
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTVIOLET)
       ->addAction($action6);
 
     $layout3 = id(new AphrontMultiColumnView())
@@ -197,34 +197,34 @@ final class PhabricatorActionHeaderExample extends PhabricatorUIExample {
     $action1->setIconFont('fa-flag');
     $action1->setHref('#');
 
-    $header1 = id(new PhabricatorActionHeaderView())
+    $header1 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Company')
       ->setTag($tag2);
 
-    $header2 = id(new PhabricatorActionHeaderView())
+    $header2 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Public')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREY)
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_GREY)
       ->addAction($action1)
       ->setTag($tag1);
 
-    $header3 = id(new PhabricatorActionHeaderView())
+    $header3 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Restricted')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_BLUE)
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTBLUE)
       ->setTag($tag2);
 
-    $header4 = id(new PhabricatorActionHeaderView())
+    $header4 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Company')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREEN)
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTGREEN)
       ->setTag($tag1);
 
-    $header5 = id(new PhabricatorActionHeaderView())
+    $header5 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Public')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_RED)
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTRED)
       ->setTag($tag2);
 
-    $header6 = id(new PhabricatorActionHeaderView())
+    $header6 = id(new PHUIActionHeaderView())
       ->setHeaderTitle('Restricted')
-      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_YELLOW)
+      ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTVIOLET)
       ->setTag($tag1);
 
     $layout4 = id(new AphrontMultiColumnView())

src/infrastructure/celerity/CelerityResourceTransformer.php

@@ -220,6 +220,18 @@ final class CelerityResourceTransformer {
       'lightbluetext'       => '#8C98B8',
       'bluetext'            => '#6B748C',
       'darkbluetext'        => '#464C5C',
+
+      // Base Greens
+      'lightgreenborder'    => '#bfdac1',
+      'greenborder'         => '#8cb89c',
+
+      // Base Red
+      'lightredborder'      => '#f4c6c6',
+      'redborder'           => '#eb9797',
+
+      // Base Violet
+      'lightvioletborder'    => '#cfbddb',
+      'violetborder'         => '#b589ba',
     );
   }
 

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -403,13 +403,12 @@ final class CeleritySpriteGenerator {
 
     $unusual_heights = array(
       'breadcrumbs'     => 31,
-      'red-header'      => 70,
-      'blue-header'     => 70,
-      'green-header'    => 70,
-      'yellow-header'   => 70,
       'grey-header'     => 70,
       'dark-grey-header' => 70,
       'lightblue-header' => 240,
+      'lightgreen-header' => 240,
+      'lightviolet-header' => 240,
+      'lightred-header' => 240,
     );
 
     $sprites = array();

src/view/AphrontDialogView.php

@@ -12,7 +12,7 @@ final class AphrontDialogView extends AphrontView {
   private $class;
   private $renderAsForm = true;
   private $formID;
-  private $headerColor = PhabricatorActionHeaderView::HEADER_LIGHTBLUE;
+  private $headerColor = PHUIActionHeaderView::HEADER_LIGHTBLUE;
   private $footers = array();
   private $isStandalone;
   private $method = 'POST';
@@ -291,7 +291,7 @@ final class AphrontDialogView extends AphrontView {
         $children);
     }
 
-    $header = new PhabricatorActionHeaderView();
+    $header = new PHUIActionHeaderView();
     $header->setHeaderTitle($this->title);
     $header->setHeaderColor($this->headerColor);
 

src/view/phui/PHUIActionHeaderView.php

@@ -1,13 +1,12 @@
 <?php
 
-final class PhabricatorActionHeaderView extends AphrontView {
+final class PHUIActionHeaderView extends AphrontView {
 
   const HEADER_GREY = 'grey';
   const HEADER_DARK_GREY = 'dark-grey';
-  const HEADER_BLUE = 'blue';
+  const HEADER_LIGHTGREEN = 'lightgreen';
-  const HEADER_GREEN = 'green';
+  const HEADER_LIGHTRED = 'lightred';
-  const HEADER_RED = 'red';
+  const HEADER_LIGHTVIOLET = 'lightviolet';
-  const HEADER_YELLOW = 'yellow';
   const HEADER_LIGHTBLUE ='lightblue';
   const HEADER_WHITE = 'white';
 
@@ -66,14 +65,12 @@ final class PhabricatorActionHeaderView extends AphrontView {
         return 'lightgreytext';
       case self::HEADER_DARK_GREY:
         return 'lightgreytext';
-      case self::HEADER_BLUE:
+      case self::HEADER_LIGHTGREEN:
-        return 'white';
+        return 'bluegrey';
-      case self::HEADER_GREEN:
+      case self::HEADER_LIGHTRED:
-        return 'white';
+        return 'bluegrey';
-      case self::HEADER_RED:
+      case self::HEADER_LIGHTVIOLET:
-        return 'white';
+        return 'bluegrey';
-      case self::HEADER_YELLOW:
-        return 'white';
       case self::HEADER_LIGHTBLUE:
         return 'bluegrey';
     }
@@ -81,10 +78,10 @@ final class PhabricatorActionHeaderView extends AphrontView {
 
   public function render() {
 
-    require_celerity_resource('phabricator-action-header-view-css');
+    require_celerity_resource('phui-action-header-view-css');
 
     $classes = array();
-    $classes[] = 'phabricator-action-header';
+    $classes[] = 'phui-action-header';
 
     if ($this->headerColor) {
       $classes[] = 'sprite-gradient';
@@ -102,7 +99,7 @@ final class PhabricatorActionHeaderView extends AphrontView {
         $action_list[] = phutil_tag(
           'li',
             array(
-            'class' => 'phabricator-action-header-icon-item'
+            'class' => 'phui-action-header-icon-item'
           ),
           $action);
       }
@@ -112,7 +109,7 @@ final class PhabricatorActionHeaderView extends AphrontView {
       $action_list[] = phutil_tag(
         'li',
           array(
-          'class' => 'phabricator-action-header-icon-item'
+          'class' => 'phui-action-header-icon-item'
         ),
         $this->tag);
     }
@@ -133,7 +130,7 @@ final class PhabricatorActionHeaderView extends AphrontView {
       $header_title = javelin_tag(
         'a',
           array(
-            'class' => 'phabricator-action-header-link',
+            'class' => 'phui-action-header-link',
             'href' => $this->headerHref,
             'sigil' => implode(' ', $this->headerSigils)
           ),
@@ -143,7 +140,7 @@ final class PhabricatorActionHeaderView extends AphrontView {
     $header = phutil_tag(
       'h3',
         array(
-          'class' => 'phabricator-action-header-title'
+          'class' => 'phui-action-header-title'
         ),
       array(
         $header_icon,
@@ -154,7 +151,7 @@ final class PhabricatorActionHeaderView extends AphrontView {
       $icons = phutil_tag(
         'ul',
           array(
-            'class' => 'phabricator-action-header-icon-list'
+            'class' => 'phui-action-header-icon-list'
           ),
           $action_list);
     }

src/view/phui/PHUIDocumentView.php

@@ -23,7 +23,7 @@ final class PHUIDocumentView extends AphrontTagView {
   }
 
   public function setHeader(PHUIHeaderView $header) {
-    $header->setGradient(PhabricatorActionHeaderView::HEADER_LIGHTBLUE);
+    $header->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTBLUE);
     $this->header = $header;
     return $this;
   }

src/view/phui/PHUIHeaderView.php

@@ -10,7 +10,7 @@ final class PHUIHeaderView extends AphrontView {
   private $image;
   private $imageURL = null;
   private $subheader;
-  private $gradient;
+  private $headerColor;
   private $noBackground;
   private $bleedHeader;
   private $properties = array();
@@ -58,8 +58,8 @@ final class PHUIHeaderView extends AphrontView {
     return $this;
   }
 
-  public function setGradient($gradient) {
+  public function setHeaderColor($color) {
-    $this->gradient = $gradient;
+    $this->headerColor = $color;
     return $this;
   }
 
@@ -121,9 +121,9 @@ final class PHUIHeaderView extends AphrontView {
       $classes[] = 'phui-bleed-header';
     }
 
-    if ($this->gradient) {
+    if ($this->headerColor) {
       $classes[] = 'sprite-gradient';
-      $classes[] = 'gradient-'.$this->gradient.'-header';
+      $classes[] = 'gradient-'.$this->headerColor.'-header';
     }
 
     if ($this->properties || $this->policyObject || $this->subheader) {

src/view/phui/PHUIObjectBoxView.php

@@ -3,6 +3,7 @@
 final class PHUIObjectBoxView extends AphrontView {
 
   private $headerText;
+  private $headerColor;
   private $formErrors = null;
   private $formSaved = false;
   private $errorView;
@@ -78,6 +79,11 @@ final class PHUIObjectBoxView extends AphrontView {
     return $this;
   }
 
+  public function setHeaderColor($color) {
+    $this->headerColor = $color;
+    return $this;
+  }
+
   public function setFormErrors(array $errors, $title = null) {
     if (nonempty($errors)) {
       $this->formErrors = id(new AphrontErrorView())
@@ -115,7 +121,7 @@ final class PHUIObjectBoxView extends AphrontView {
     return $this;
   }
 
-  public function setHeader(PHUIHeaderView $header) {
+  public function setHeader($header) {
     $this->header = $header;
     return $this;
   }
@@ -135,13 +141,19 @@ final class PHUIObjectBoxView extends AphrontView {
 
     require_celerity_resource('phui-object-box-css');
 
+    if ($this->headerColor) {
+      $header_color = $this->headerColor;
+    } else {
+      $header_color = PHUIActionHeaderView::HEADER_LIGHTBLUE;
+    }
+
     if ($this->header) {
       $header = $this->header;
-      $header->setGradient(PhabricatorActionHeaderView::HEADER_LIGHTBLUE);
+      $header->setHeaderColor($header_color);
     } else {
       $header = id(new PHUIHeaderView())
         ->setHeader($this->headerText)
-        ->setGradient(PhabricatorActionHeaderView::HEADER_LIGHTBLUE);
+        ->setHeaderColor($header_color);
     }
 
     $ex = $this->validationException;
@@ -258,6 +270,8 @@ final class PHUIObjectBoxView extends AphrontView {
       $content->addClass('phui-object-box-flush');
     }
 
+    $content->addClass('phui-object-box-'.$header_color);
+
     foreach ($this->sigils as $sigil) {
       $content->addSigil($sigil);
     }

src/view/phui/PHUIWorkpanelView.php

@@ -7,7 +7,7 @@ final class PHUIWorkpanelView extends AphrontTagView {
   private $editURI;
   private $headerAction;
   private $footerAction;
-  private $headerColor = PhabricatorActionHeaderView::HEADER_GREY;
+  private $headerColor = PHUIActionHeaderView::HEADER_GREY;
 
   public function setHeaderAction(PHUIIconView $header_action) {
     $this->headerAction = $header_action;
@@ -65,7 +65,7 @@ final class PHUIWorkpanelView extends AphrontTagView {
         ->setIconFont('fa-pencil')
         ->setHref($this->editURI);
     }
-    $header = id(new PhabricatorActionHeaderView())
+    $header = id(new PHUIActionHeaderView())
       ->setHeaderTitle($this->header)
       ->setHeaderColor($this->headerColor);
     if ($header_edit) {

src/view/widget/hovercard/PhabricatorHovercardView.php

@@ -73,7 +73,7 @@ final class PhabricatorHovercardView extends AphrontView {
       $handle->getTypeName(),
       $this->title ? $this->title : $handle->getName());
 
-    $header = new PhabricatorActionHeaderView();
+    $header = new PHUIActionHeaderView();
     $header->setHeaderColor($this->color);
     $header->setHeaderTitle($title);
     if ($this->tags) {

webroot/rsrc/css/aphront/dialog-view.css

@@ -20,14 +20,14 @@
   margin: auto;
 }
 
-.aphront-dialog-head .phabricator-action-header {
+.aphront-dialog-head .phui-action-header {
   border-bottom: 1px solid {$lightblueborder};
   padding: 4px 16px;
   white-space: nowrap;
 }
 
-.aphront-dialog-head .phabricator-action-header
+.aphront-dialog-head .phui-action-header
-  .phabricator-action-header-title {
+  .phui-action-header-title {
   font-size: 15px;
   color: {$bluetext};
   text-shadow: 0 1px 2px #fff;

webroot/rsrc/css/application/config/config-welcome.css

@@ -2,23 +2,26 @@
  * @provides config-welcome-css
  */
 
-.config-welcome-box {
+.config-welcome {
-  background: #fff;
+  margin-top: -1px;
 }
 
-.config-welcome-box {
+.config-welcome .phui-object-box {
   margin: 12px;
 }
 
-.config-welcome-box-header {
+.config-welcome .aphront-multi-column-column-last .phui-object-box {
-  border-style: solid;
+  margin-left: 0;
-  border-width: 1px 1px 0;
+}
-  border-color: {$lightblueborder};
+
+.config-welcome-box .phui-action-header-title {
+  padding: 10px 4px;
 }
 
 .config-welcome-box-content {
-  padding: 8px 12px;
+  padding: 12px;
-  border-style: solid;
+}
-  border-width: 0 1px 1px;
+
-  border-color: {$lightblueborder};
+.config-welcome .phui-object-box .phui-action-header {
+  padding: 2px 8px 2px 12px;
 }

webroot/rsrc/css/application/dashboard/dashboard.css

@@ -78,6 +78,6 @@
   border-bottom: 1px solid {$blueborder};
 }
 
-.dashboard-panel .gradient-lightblue-header .phabricator-action-header-title {
+.dashboard-panel .sprite-gradient .phui-action-header-title {
   padding: 10px 4px;
 }

webroot/rsrc/css/application/feed/feed.css

@@ -12,7 +12,7 @@
   overflow-x: auto;
 }
 
-.phabricator-feed-frame .phabricator-action-header-title {
+.phabricator-feed-frame .phui-action-header-title {
   font-size: 16px;
   margin-bottom: 5px;
 }
@@ -22,7 +22,7 @@
   margin: 16px;
 }
 
-.phabricator-feed-frame .phabricator-action-header {
+.phabricator-feed-frame .phui-action-header {
   padding: 0;
 }
 
@@ -63,13 +63,13 @@
   max-width: none;
 }
 
-.dashboard-panel .phabricator-feed-frame .phabricator-action-header {
+.dashboard-panel .phabricator-feed-frame .phui-action-header {
   background: #f7f7f7;
   margin-top: -1px;
   border-top: 1px solid {$thinblueborder};
 }
 
-.dashboard-panel .phabricator-feed-frame .phabricator-action-header-title {
+.dashboard-panel .phabricator-feed-frame .phui-action-header-title {
   font-size: 13px;
   margin-left: 12px;
   margin-bottom: 0;

webroot/rsrc/css/application/profile/profile-view.css

@@ -15,7 +15,7 @@
   padding: 12px 8px;
 }
 
-.profile-feed .phabricator-action-header-title {
+.profile-feed .phui-action-header-title {
   font-size: 16px;
   margin-bottom: 5px;
 }

webroot/rsrc/css/layout/phabricator-action-header-view.css

@@ -1,13 +1,13 @@
 /**
- * @provides phabricator-action-header-view-css
+ * @provides phui-action-header-view-css
  */
 
-.phabricator-action-header {
+.phui-action-header {
   padding: 0 5px 0 8px;
   overflow: hidden;
 }
 
-.phabricator-action-header-title {
+.phui-action-header-title {
   color: {$darkgreytext};
   float: left;
   font-size: 14px;
@@ -18,21 +18,21 @@
   -webkit-font-smoothing: antialiased;
 }
 
-.gradient-lightblue-header .phabricator-action-header-title {
+.gradient-lightblue-header .phui-action-header-title {
   color: {$darkbluetext};
 }
 
-.phabricator-action-header-icon-list {
+.phui-action-header-icon-list {
   float: right;
   padding-top: 4px;
 }
 
-.phabricator-action-header-icon-item {
+.phui-action-header-icon-item {
   float: right;
   padding-left: 4px;
 }
 
-.phabricator-action-header-icon-item .phui-icon-view {
+.phui-action-header-icon-item .phui-icon-view {
   display: inline-block;
   font-size: 18px;
   margin: 4px 0;
@@ -40,67 +40,39 @@
   width: 18px;
 }
 
-.phabricator-action-header-icon-item .phui-tag-view {
+.phui-action-header-icon-item .phui-tag-view {
   margin: 4px 2px 0;
   display: inline-block;
 }
 
-.phabricator-action-header-link {
+.phui-action-header-link {
   color: {$darkgreytext};
 }
 
-.phabricator-action-header.gradient-green-header {
+.phui-action-header.gradient-white-header {
-  background: {$green};
-}
-
-.phabricator-action-header.gradient-blue-header {
-  background: {$blue};
-}
-
-.phabricator-action-header.gradient-yellow-header {
-  background: {$yellow};
-}
-
-.phabricator-action-header.gradient-red-header {
-  background: {$red};
-}
-
-.phabricator-action-header.gradient-white-header {
   background: #fff;
 }
 
-.phabricator-action-header.gradient-white-header .phabricator-action-header-title {
+.phui-action-header.gradient-white-header .phui-action-header-title {
   color: {$darkbluetext};
   padding: 12px 0 12px 4px;
 }
 
-.phabricator-action-header.gradient-white-header
+.phui-action-header.gradient-white-header
- .phabricator-action-header-icon-list .phui-icon-view {
+ .phui-action-header-icon-list .phui-icon-view {
   color: {$lightbluetext};
 }
 
-.phabricator-action-header.gradient-white-header
+.phui-action-header.gradient-white-header
- .phabricator-action-header-icon-list .phui-icon-view:hover {
+ .phui-action-header-icon-list .phui-icon-view:hover {
   color: {$darkbluetext};
 }
 
-.gradient-green-header .phabricator-action-header-title,
+.phui-action-header-icon-list .phui-tag-view {
-.gradient-red-header .phabricator-action-header-title,
-.gradient-blue-header .phabricator-action-header-title,
-.gradient-yellow-header .phabricator-action-header-title,
-.gradient-green-header .phabricator-action-header-link,
-.gradient-red-header .phabricator-action-header-link,
-.gradient-blue-header .phabricator-action-header-link,
-.gradient-yellow-header .phabricator-action-header-link {
-  color: #fff;
-  -webkit-font-smoothing: antialiased;
-}
-
-.phabricator-action-header-icon-list .phui-tag-view {
   font-weight: normal;
 }
 
-.phabricator-action-header-title span {
+.phui-action-header-title span {
   float: left;
   height: 16px;
   width: 16px;
@@ -109,21 +81,21 @@
 
 /* - Dashboards ------------------------------------------------------------ */
 
-.dashboard-panel .phabricator-action-header.gradient-grey-header,
+.dashboard-panel .phui-action-header.gradient-grey-header,
-.dashboard-panel .phabricator-action-header.gradient-lightblue-header {
+.dashboard-panel .phui-action-header.gradient-lightblue-header {
   border: 1px solid {$lightblueborder};
   border-bottom: 1px solid {$thinblueborder};
 }
 
-.dashboard-panel .phabricator-action-header.gradient-white-header {
+.dashboard-panel .phui-action-header.gradient-white-header {
   border: 1px solid {$lightblueborder};
   border-bottom: 1px solid {$thinblueborder};
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
 
-.dashboard-panel .phabricator-action-header.gradient-white-header
+.dashboard-panel .phui-action-header.gradient-white-header
- .phabricator-action-header-icon-list {
+ .phui-action-header-icon-list {
   padding-top: 6px;
   padding-right: 6px;
 }

webroot/rsrc/css/layout/phabricator-hovercard-view.css

@@ -29,7 +29,7 @@
   border-bottom: 1px solid {$thinblueborder};
 }
 
-.phabricator-hovercard-head .phabricator-action-header {
+.phabricator-hovercard-head .phui-action-header {
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }

webroot/rsrc/css/phui/phui-object-box.css

@@ -31,3 +31,39 @@ div.phui-object-box.phui-object-box-flush {
 .device-phone .phui-object-box {
   margin: 8px 8px 0 8px;
 }
+
+.phui-box-border.phui-object-box-lightgreen {
+  border: 1px solid {$lightgreenborder};
+  border-bottom: 1px solid {$greenborder};
+}
+
+.phui-box-border.phui-object-box-lightgreen .phui-action-header {
+  border-bottom: 1px solid {$lightgreenborder};
+}
+
+.phui-box-border.phui-object-box-lightblue {
+  border: 1px solid {$lightblueborder};
+  border-bottom: 1px solid {$blueborder};
+}
+
+.phui-box-border.phui-object-box-lightblue .phui-action-header {
+  border-bottom: 1px solid {$lightblueborder};
+}
+
+.phui-box-border.phui-object-box-lightred {
+  border: 1px solid {$lightredborder};
+  border-bottom: 1px solid {$redborder};
+}
+
+.phui-box-border.phui-object-box-lightred .phui-action-header {
+  border-bottom: 1px solid {$lightredborder};
+}
+
+.phui-box-border.phui-object-box-lightviolet {
+  border: 1px solid {$lightvioletborder};
+  border-bottom: 1px solid {$violetborder};
+}
+
+.phui-box-border.phui-object-box-lightviolet .phui-action-header {
+  border-bottom: 1px solid {$lightvioletborder};
+}

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

@@ -2,12 +2,16 @@
  * @provides phui-workpanel-view-css
  */
 
-.phui-workpanel-view .phabricator-action-header {
+.phui-workpanel-view .phui-action-header {
   border: 1px solid #b3b5b6;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
 }
 
+.phui-workpanel-view .phui-action-header .phui-action-header-title {
+  padding: 8px 0;
+}
+
 .device-phone .phui-workboard-view {
   width: auto;
   margin: 0 8px;

webroot/rsrc/css/sprite-gradient.css

@@ -22,3 +22,15 @@
 .gradient-lightblue-header {
   background-position: 0px -142px;
 }
+
+.gradient-lightgreen-header {
+  background-position: 0px -383px;
+}
+
+.gradient-lightred-header {
+  background-position: 0px -624px;
+}
+
+.gradient-lightviolet-header {
+  background-position: 0px -865px;
+}