Normalize colors a bit better on Profiles/Projects, add Workboard backgrounds

Summary: Cleans up the backgrounds a little on Projects/Profiles and adds a number of colour choices for Workboards.

Test Plan:
Manually add each color for testing. Test new project / profile layouts with and without properties.

{F1109325}

{F1109326}

{F1109327}

{F1109328}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'b59766ad',
+    'core.pkg.css' => '394a6788',
     'core.pkg.js' => 'd7daa6d8',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
@@ -94,7 +94,7 @@ return array(
     'rsrc/css/application/policy/policy.css' => '957ea14c',
     'rsrc/css/application/ponder/ponder-view.css' => '7b0df4da',
     'rsrc/css/application/project/project-card-view.css' => '9418c97d',
-    'rsrc/css/application/project/project-view.css' => '4693497c',
+    'rsrc/css/application/project/project-view.css' => '4c832c27',
     'rsrc/css/application/releeph/releeph-core.css' => '9b3c5733',
     'rsrc/css/application/releeph/releeph-preview-branch.css' => 'b7a6f4a5',
     'rsrc/css/application/releeph/releeph-request-differential-create-dialog.css' => '8d8b92cd',
@@ -123,8 +123,8 @@ return array(
     'rsrc/css/phui/phui-action-panel.css' => '91c7b835',
     'rsrc/css/phui/phui-badge.css' => 'f25c3476',
     'rsrc/css/phui/phui-big-info-view.css' => 'bd903741',
-    'rsrc/css/phui/phui-box.css' => '6e8ac7fd',
+    'rsrc/css/phui/phui-box.css' => 'dd1294d3',
-    'rsrc/css/phui/phui-button.css' => 'd6ac72db',
+    'rsrc/css/phui/phui-button.css' => 'd04a0eb7',
     'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
     'rsrc/css/phui/phui-crumbs-view.css' => '79d536e5',
     'rsrc/css/phui/phui-document-pro.css' => '8799acf7',
@@ -143,7 +143,7 @@ return array(
     'rsrc/css/phui/phui-info-view.css' => '6d7c3509',
     'rsrc/css/phui/phui-list.css' => '9da2aa00',
     'rsrc/css/phui/phui-object-box.css' => '407eaf5a',
-    'rsrc/css/phui/phui-object-item-list-view.css' => 'be31c3a7',
+    'rsrc/css/phui/phui-object-item-list-view.css' => '18b2ce8e',
     'rsrc/css/phui/phui-pager.css' => 'bea33d23',
     'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
     'rsrc/css/phui/phui-profile-menu.css' => 'f709256c',
@@ -155,9 +155,10 @@ return array(
     'rsrc/css/phui/phui-tag-view.css' => '9d5d4400',
     'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
     'rsrc/css/phui/phui-two-column-view.css' => 'c75bfc5b',
-    'rsrc/css/phui/workboards/phui-workboard.css' => 'e9e56029',
+    'rsrc/css/phui/workboards/phui-workboard-color.css' => 'd30ae971',
+    'rsrc/css/phui/workboards/phui-workboard.css' => 'e6d89647',
     'rsrc/css/phui/workboards/phui-workcard.css' => '3646fb96',
-    'rsrc/css/phui/workboards/phui-workpanel.css' => 'a78c0661',
+    'rsrc/css/phui/workboards/phui-workpanel.css' => '92197373',
     'rsrc/css/sprite-login.css' => '60e8560e',
     'rsrc/css/sprite-menu.css' => '9dd65b92',
     'rsrc/css/sprite-tokens.css' => '4f399012',
@@ -801,8 +802,8 @@ return array(
     'phui-action-panel-css' => '91c7b835',
     'phui-badge-view-css' => 'f25c3476',
     'phui-big-info-view-css' => 'bd903741',
-    'phui-box-css' => '6e8ac7fd',
+    'phui-box-css' => 'dd1294d3',
-    'phui-button-css' => 'd6ac72db',
+    'phui-button-css' => 'd04a0eb7',
     'phui-calendar-css' => 'ccabe893',
     'phui-calendar-day-css' => 'd1cf6f93',
     'phui-calendar-list-css' => 'c1c7f338',
@@ -828,7 +829,7 @@ return array(
     'phui-inline-comment-view-css' => '0fdb3667',
     'phui-list-view-css' => '9da2aa00',
     'phui-object-box-css' => '407eaf5a',
-    'phui-object-item-list-view-css' => 'be31c3a7',
+    'phui-object-item-list-view-css' => '18b2ce8e',
     'phui-pager-css' => 'bea33d23',
     'phui-pinboard-view-css' => '2495140e',
     'phui-profile-menu-css' => 'f709256c',
@@ -841,9 +842,10 @@ return array(
     'phui-theme-css' => 'ab7b848c',
     'phui-timeline-view-css' => '2efceff8',
     'phui-two-column-view-css' => 'c75bfc5b',
-    'phui-workboard-view-css' => 'e9e56029',
+    'phui-workboard-color-css' => 'd30ae971',
+    'phui-workboard-view-css' => 'e6d89647',
     'phui-workcard-view-css' => '3646fb96',
-    'phui-workpanel-view-css' => 'a78c0661',
+    'phui-workpanel-view-css' => '92197373',
     'phuix-action-list-view' => 'b5c256b8',
     'phuix-action-view' => '8cf6d262',
     'phuix-autocomplete' => '9196fb06',
@@ -855,7 +857,7 @@ return array(
     'policy-transaction-detail-css' => '82100a43',
     'ponder-view-css' => '7b0df4da',
     'project-card-view-css' => '9418c97d',
-    'project-view-css' => '4693497c',
+    'project-view-css' => '4c832c27',
     'releeph-core' => '9b3c5733',
     'releeph-preview-branch' => 'b7a6f4a5',
     'releeph-request-differential-create-dialog' => '8d8b92cd',
@@ -1573,6 +1575,9 @@ return array(
       'phuix-icon-view',
       'phabricator-prefab',
     ),
+    92197373 => array(
+      'phui-workcard-view-css',
+    ),
     '93d0c9e3' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1659,9 +1664,6 @@ return array(
       'javelin-install',
       'javelin-dom',
     ),
-    'a78c0661' => array(
-      'phui-workcard-view-css',
-    ),
     'a80d0378' => array(
       'javelin-behavior',
       'javelin-stratcom',

src/applications/people/controller/PhabricatorPeopleProfileViewController.php

@@ -115,7 +115,7 @@ final class PhabricatorPeopleProfileViewController
     }
 
     $view = id(new PHUIBoxView())
-      ->setColor(PHUIBoxView::GREY)
+      ->setBorder(true)
       ->appendChild($view)
       ->addClass('project-view-properties');
 

src/applications/project/controller/PhabricatorProjectBoardViewController.php

@@ -427,6 +427,11 @@ final class PhabricatorProjectBoardViewController
     $crumbs->addAction($manage_menu);
     $crumbs->addAction($fullscreen);
 
+    // TODO: Wire to Workboard Preferences
+    // require_celerity_resource('phui-workboard-color-css');
+    // ->addClass('phui-workboard-color')
+    // ->addClass('phui-workboard-bluegrey')
+
     return $this->newPage()
       ->setTitle(
         array(

src/applications/project/controller/PhabricatorProjectProfileController.php

@@ -142,7 +142,7 @@ final class PhabricatorProjectProfileController
     }
 
     $view = id(new PHUIBoxView())
-      ->setColor(PHUIBoxView::GREY)
+      ->setBorder(true)
       ->appendChild($view)
       ->addClass('project-view-properties');
 

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

@@ -3,8 +3,8 @@
  */
 
 .project-view-home {
-  background: #fff;
   padding-bottom: 64px;
+  background: #fff;
 }
 
 .project-view-header-tag {
@@ -24,18 +24,25 @@
   color: {$bluetext};
 }
 
-.phui-box.phui-box-grey.project-view-properties {
+.project-view-home .phui-box.project-view-properties {
-  margin: 0 16px 0 16px;
+  margin: 0 16px 16px 16px;
   padding: 4px 12px;
+  border: 2px solid rgba(55,55,55,.1);
+  background-color: #F7F7F9;
 }
 
-.device-phone .phui-box.phui-box-grey.project-view-properties {
+.device-phone .phui-box.project-view-properties {
   margin: 0 12px 0 12px;
 }
 
+.project-view-properties .phui-property-list-container +
+  .phui-property-list-text-content {
+  border-color: rgba(55,55,55,.15);
+}
+
 .project-view-properties .phui-property-list-key {
   width: auto;
-  margin-left: 4px;
+  margin-left: 4px2
 }
 
 .project-view-properties .phui-property-list-section-header {
@@ -44,8 +51,8 @@
 }
 
 .project-view-feed .phui-object-box.phui-box-border {
+  padding: 0 16px 8px 16px;
   border: none;
-  padding: 8px;
 }
 
 .project-view-feed .phui-object-box .phui-header-shell {
@@ -67,7 +74,7 @@
 }
 
 .project-view-home .phui-box-grey .phui-header-shell {
-  padding: 8px 8px 8px 12px;
+  padding: 6px 6px 6px 12px;
 }
 
 .project-view-home .phui-box-grey .phui-header-header {
@@ -75,11 +82,15 @@
 }
 
 .project-view-home .phui-box-grey .phui-object-item-list-view {
-  padding: 8px;
+  padding: 4px 8px 0 8px;
 }
 
 .device-desktop .phui-two-column-view.project-view-badges .phui-side-column {
-  width: 364px;
+  width: 366px;
+}
+
+.project-view-badges .phui-badge-flex-view {
+  background-color: #fff;
 }
 
 .project-view-home .phui-box-grey .phui-object-item-attribute .phui-icon-view {

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

@@ -13,15 +13,15 @@
 }
 
 .phui-box-grey {
-  background-color: {$page.background};
+  background-color: #F7F7F9;
   border-radius: 3px;
-  border: none;
+  border-color: rgba(55,55,55,.1);
 }
 
 .phui-box-blue {
   background-color: {$bluebackground};
   border-radius: 3px;
-  border: none;
+  border-color: {$thinblueborder};
 }
 
 .phui-box-blue .phui-object-item,
@@ -34,15 +34,23 @@
   color: {$darkbluetext};
 }
 
-.phui-box-blue .phui-header-shell,
+.phui-box-blue .phui-object-item-list-view,
+.phui-box-grey .phui-object-item-list-view {
+  background-color: #fff;
+}
+
+.phui-box-blue .phui-header-shell {
+  border-color: {$thinblueborder};
+}
+
 .phui-box-grey .phui-header-shell {
-  border-bottom: 2px solid #fff;
+  border-color: rgba(55,55,55,.1);
 }
 
 .phui-object-box.phui-box-blue div.phui-info-severity-nodata,
 .phui-object-box.phui-box-grey div.phui-info-severity-nodata {
   background: transparent;
-  padding: 12px 4px;
+  padding: 20px 4px 24px;
   text-align: center;
   border: none;
   color: {$greytext};

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

@@ -59,8 +59,8 @@ button.grey,
 input[type="submit"].grey,
 a.grey,
 a.grey:visited {
-  background-color: rgba(71, 87, 120, 0.06);
+  background-color: #F7F7F9;
-  border-color: rgba(71, 87, 120, 0.12);
+  border: 1px solid rgba(55,55,55,.1);
   color: {$darkgreytext};
 }
 
@@ -106,8 +106,8 @@ button:hover {
 
 a.button.grey:hover,
 button.grey:hover {
-  background-color: rgba(71, 87, 120, 0.12);
+  background-color: rgba(71, 87, 120, 0.1);
-  border-color: rgba(71, 87, 120, 0.2);
+  border-color: rgba(71, 87, 120, 0.15);
   transition: 0.1s;
 }
 

webroot/rsrc/css/phui/phui-object-item-list-view.css

@@ -29,7 +29,6 @@ ul.phui-object-item-list-view {
 }
 
 .phui-object-box .phui-object-item-list-view .phui-info-view {
-  margin: 4px 0;
   color: {$greytext};
   border: none;
 }

webroot/rsrc/css/phui/workboards/phui-workboard-color.css

@@ -0,0 +1,88 @@
+/**
+ * @provides phui-workboard-color-css
+ */
+
+.phui-workboard-color .phabricator-nav-content .phui-workboard-view-shadow {
+  background-color: transparent;
+}
+
+.phui-workboard-color .phui-crumbs-view {
+  background-color: rgba(55,55,55,.15);
+  border: none;
+  color: rgba(255,255,255,.8);
+}
+
+.phui-workboard-color .phui-crumbs-view a,
+.phui-workboard-color .phui-crumbs-view .phui-icon-view {
+    color: rgba(255,255,255,.85);
+}
+
+.phui-workboard-color .phui-crumbs-view a:hover,
+.phui-workboard-color .phui-crumbs-view a:hover .phui-icon-view {
+  color: #fff;
+}
+
+.phui-workboard-color .phuix-dropdown-menu {
+  background-color: rgba(255,255,255,.9);
+}
+
+.phui-workboard-color .phui-workpanel-view .phui-box-grey {
+  background-color: rgba(255,255,255,.6);
+}
+
+/* Colors */
+
+.phui-workboard-red {
+  background-color: #e53935;
+  background-image: linear-gradient(to left, #e53935, #e35d5b);
+}
+
+.phui-workboard-orange {
+  background-color: #f46b45;
+  background-image: linear-gradient(to left, #f46b45, #eea849);
+}
+
+.phui-workboard-yellow {
+  background-color: #FF8008;
+  background-image: linear-gradient(to left, #FF8008, #FFC837);
+}
+
+.phui-workboard-blue {
+  background-color: #73a5c3;
+  background-image: linear-gradient(90deg, #73a5c3 0, #6875be);
+}
+
+.phui-workboard-bluegrey {
+  background-color: #517fa4;
+  background-image: linear-gradient(to left, #517fa4, #243949);
+}
+
+.phui-workboard-green {
+  background-color: #2fa0ac;
+  background-image: linear-gradient(90deg, #2fa0ac 0, #58cca6);
+}
+
+.phui-workboard-indigo {
+  background-color: #4776E6;
+  background-image: linear-gradient(to left, #4776E6, #8E54E9);
+}
+
+.phui-workboard-violet {
+  background-color: #9f73c3;
+  background-image: linear-gradient(90deg, #9f73c3 0, #6875be);
+}
+
+.phui-workboard-sky {
+  background-color: #7474BF;
+  background-image: linear-gradient(to left, #7474BF, #348AC7);
+}
+
+.phui-workboard-pink {
+  background-color: #EA2A90;
+  background-image: linear-gradient(to left, #EA2A90, #79164B);
+}
+
+.phui-workboard-grey {
+  background-color: #283048;
+  background-image: linear-gradient(to left, #283048, #859398);
+}

webroot/rsrc/css/phui/workboards/phui-workboard.css

@@ -18,8 +18,8 @@
   bottom: 0;
   left: 0;
   right: 0;
-  background: #fff;
   padding: 16px;
+  background-color: #fff;
 }
 
 .device-desktop .page-has-warning .phui-workboard-view-shadow {

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

@@ -85,6 +85,7 @@
 
 .phui-workpanel-body .phui-object-item-list-view {
   min-height: 54px;
+  background-color: transparent;
 }
 
 .device .aphront-multi-column-outer
@@ -115,7 +116,7 @@
 }
 
 .project-panel-empty .phui-object-item-list-view {
-  background: {$sh-indigobackground};
+  background: rgba(234, 230, 247, 0.85);
   border-radius: 3px;
   margin-bottom: 4px;
   border: 1px dashed {$sh-indigoborder};