Extend PHUITheme to include Profile Nav

Summary: Reasonable first pass, removes the "light" header, due to pain of upkeep. Reinforces UI color into the Profile Nav (and later likely dropmenu hovers). Most of this is reasonably easy to maintain now, but I may do a more accurate color pass after I get some more time together with it. For now this feels pretty good if you're developing in a different color UI.

Test Plan:
Switch between all the colors, hover over all the states.

{F1076766}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'bb7485ba',
+    'core.pkg.css' => '8abb1666',
     'core.pkg.js' => '573e6664',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
@@ -35,7 +35,7 @@ return array(
     'rsrc/css/application/base/main-menu-view.css' => 'd00a795a',
     'rsrc/css/application/base/notification-menu.css' => 'f31c0bde',
     'rsrc/css/application/base/phabricator-application-launch-view.css' => '95351601',
-    'rsrc/css/application/base/phui-theme.css' => 'd52033fb',
+    'rsrc/css/application/base/phui-theme.css' => 'ab7b848c',
     'rsrc/css/application/base/standard-page-view.css' => '7b0d68d8',
     'rsrc/css/application/chatlog/chatlog.css' => 'd295b020',
     'rsrc/css/application/conduit/conduit-api.css' => '7bc725c4',
@@ -102,7 +102,7 @@ return array(
     'rsrc/css/application/slowvote/slowvote.css' => 'da0afb1b',
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
-    'rsrc/css/core/core.css' => 'a76cefc9',
+    'rsrc/css/core/core.css' => '5b3563c8',
     'rsrc/css/core/remarkup.css' => '64277c02',
     'rsrc/css/core/syntax.css' => '9fd11da8',
     'rsrc/css/core/z-index.css' => 'a36a45da',
@@ -123,7 +123,7 @@ 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' => '6240d401',
+    'rsrc/css/phui/phui-box.css' => '6e8ac7fd',
     'rsrc/css/phui/phui-button.css' => 'd6ac72db',
     'rsrc/css/phui/phui-crumbs-view.css' => '414406b5',
     'rsrc/css/phui/phui-document-pro.css' => '8799acf7',
@@ -144,7 +144,7 @@ return array(
     'rsrc/css/phui/phui-object-item-list-view.css' => '0d484a97',
     'rsrc/css/phui/phui-pager.css' => 'bea33d23',
     'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
-    'rsrc/css/phui/phui-profile-menu.css' => 'fa814ef9',
+    'rsrc/css/phui/phui-profile-menu.css' => 'ab4fcf5f',
     'rsrc/css/phui/phui-property-list-view.css' => '27b2849e',
     'rsrc/css/phui/phui-remarkup-preview.css' => '1a8f2591',
     'rsrc/css/phui/phui-spacing.css' => '042804d6',
@@ -737,7 +737,7 @@ return array(
     'phabricator-busy' => '59a7976a',
     'phabricator-chatlog-css' => 'd295b020',
     'phabricator-content-source-view-css' => '4b8b05d4',
-    'phabricator-core-css' => 'a76cefc9',
+    'phabricator-core-css' => '5b3563c8',
     'phabricator-countdown-css' => 'e7544472',
     'phabricator-dashboard-css' => 'eb458607',
     'phabricator-drag-and-drop-file-upload' => 'ad10aeac',
@@ -793,7 +793,7 @@ return array(
     'phui-action-panel-css' => '91c7b835',
     'phui-badge-view-css' => 'f25c3476',
     'phui-big-info-view-css' => 'bd903741',
-    'phui-box-css' => '6240d401',
+    'phui-box-css' => '6e8ac7fd',
     'phui-button-css' => 'd6ac72db',
     'phui-calendar-css' => 'ccabe893',
     'phui-calendar-day-css' => 'd1cf6f93',
@@ -820,14 +820,14 @@ return array(
     'phui-object-item-list-view-css' => '0d484a97',
     'phui-pager-css' => 'bea33d23',
     'phui-pinboard-view-css' => '2495140e',
-    'phui-profile-menu-css' => 'fa814ef9',
+    'phui-profile-menu-css' => 'ab4fcf5f',
     'phui-property-list-view-css' => '27b2849e',
     'phui-remarkup-preview-css' => '1a8f2591',
     'phui-spacing-css' => '042804d6',
     'phui-status-list-view-css' => '888cedb8',
     'phui-tag-view-css' => 'e60e227b',
     'phui-text-css' => 'cf019f54',
-    'phui-theme-css' => 'd52033fb',
+    'phui-theme-css' => 'ab7b848c',
     'phui-timeline-view-css' => '2efceff8',
     'phui-two-column-view-css' => 'c75bfc5b',
     'phui-workboard-view-css' => '04b34072',

src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php

@@ -185,20 +185,15 @@ final class CelerityDefaultPostprocessor
       'sh-disabledtext'         => '#a6a6a6',
       'sh-disabledbackground'   => '#f3f3f3',
 
-      // Background color for "light" themes.
+      // Background color for "most" themes.
-      'page.background.light' => '#f7f7f7',
+      'page.background' => '#f1f1f4',
 
       // Background color for "dark" themes.
       'page.background.dark' => '#ebecee',
 
-      // This is the base background color.
+      'menu.profile.text' => 'rgba(255,255,255,.8)',
-      'menu.profile.background' => '#525867',
+      'menu.profile.text.selected' => 'rgba(255,255,255,1)',
-      'menu.profile.background.hover' => '#464b58',
+      'menu.profile.icon.disabled' => 'rgba(255,255,255,.4)',
-      'menu.profile.background.selected' => '#393d48',
-
-      'menu.profile.text' => '#c6c7cb',
-      'menu.profile.text.selected' => '#ffffff',
-      'menu.profile.icon.disabled' => '#b9bcc2',
 
       'menu.main.height' => '44px',
 

src/applications/config/option/PhabricatorUIConfigOptions.php

@@ -25,7 +25,6 @@ final class PhabricatorUIConfigOptions
     $experimental_link = 'https://secure.phabricator.com/T4214';
     $options = array(
       'blindigo' => 'blindigo',
-      'light' => 'light',
       'red' => 'red',
       'blue' => 'blue',
       'green' => 'green',
@@ -52,7 +51,7 @@ EOJSON;
     return array(
       $this->newOption('ui.header-color', 'enum', 'blindigo')
         ->setDescription(
-          pht('Sets the color of the main header.'))
+          pht('Sets the default color scheme of Phabricator.'))
         ->setEnumOptions($options),
       $this->newOption('ui.footer-items', 'list<wild>', array())
         ->setSummary(

webroot/rsrc/css/application/base/phui-theme.css

@@ -2,7 +2,7 @@
  * @provides phui-theme-css
  */
 
-/*--- Base Colors ------------------------------------------------------------*/
+/*--- Header Colors ----------------------------------------------------------*/
 
 .phui-theme-blindigo .phabricator-main-menu-background {
   background: #41506e;
@@ -13,7 +13,7 @@
 }
 
 .phui-theme-indigo .phabricator-main-menu-background {
-  background: #4a2b85;
+  background: #2C1D4A;
 }
 
 .phui-theme-red .phabricator-main-menu-background {
@@ -21,87 +21,48 @@
 }
 
 .phui-theme-blue .phabricator-main-menu-background {
-  background: #004377;
+  background: #003965;
 }
 
 .phui-theme-green .phabricator-main-menu-background {
   background: #124A1B;
 }
 
-/*--- Light Colors -----------------------------------------------------------*/
+/*--- Profile Nav Colors -----------------------------------------------------*/
 
-.phui-theme-light button.phabricator-main-menu-search-dropdown .caret:before {
+
-  color: {$lightbluetext};
+.phui-theme-blindigo .phui-profile-menu .phabricator-side-menu,
+.phui-theme-blindigo .phabricator-side-menu .phui-profile-menu-footer-1 {
+  background: #525867;
 }
 
-.phui-theme-light .phabricator-main-menu-search
+.phui-theme-dark .phui-profile-menu .phabricator-side-menu,
-  button.phabricator-main-menu-search-dropdown .phui-icon-view {
+.phui-theme-dark .phabricator-side-menu .phui-profile-menu-footer-1 {
-  color: {$lightbluetext};
+  background: #30333A;
-  text-shadow: {$whitetextshadow};
 }
 
-.phui-theme-light .alert-notifications .phui-icon-view {
+.phui-theme-indigo .phui-profile-menu .phabricator-side-menu,
-  color: {$lightbluetext};
+.phui-theme-indigo .phabricator-side-menu .phui-profile-menu-footer-1 {
-  text-shadow: {$whitetextshadow};
+  background: #423658;
 }
 
-.phui-theme-light .phabricator-application-menu
+.phui-theme-red .phui-profile-menu .phabricator-side-menu,
-  .phui-list-item-icon.phui-font-fa {
+.phui-theme-red .phabricator-side-menu .phui-profile-menu-footer-1 {
-  color: {$lightbluetext};
+  background: #420C0C;
-  text-shadow: {$whitetextshadow};
 }
 
-.device-desktop.phui-theme-light .phabricator-main-menu-search
+.phui-theme-blue .phui-profile-menu .phabricator-side-menu,
-  button.phabricator-main-menu-search-dropdown:hover .phui-icon-view {
+.phui-theme-blue .phabricator-side-menu .phui-profile-menu-footer-1 {
-    color: {$sky};
+  background: #062842;
 }
 
-.device-desktop.phui-theme-light .phabricator-application-menu
+.phui-theme-green .phui-profile-menu .phabricator-side-menu,
-  .core-menu-item.phui-list-item-view:hover
+.phui-theme-green .phabricator-side-menu .phui-profile-menu-footer-1 {
-  .phui-list-item-icon.phui-font-fa {
+  background: #122916;
-    color: {$sky};
 }
 
-.phui-theme-light .phabricator-menu-button-icon.phui-icon-view {
-  color: {$bluetext};
-  text-shadow: {$whitetextshadow};
-}
 
-.device-desktop.phui-theme-light .phabricator-main-menu-brand:hover {
+/*--- Dark "Classic Phabricator" ---------------------------------------------*/
-  background-color: rgba(55,55,55,.08);
-  cursor: hand;
-}
-
-/*--- Messages / Notifications -----------------------------------------------*/
-
-.device-desktop.phui-theme-light .alert-notifications:hover .phui-icon-view {
-  color: {$sky};
-}
-
-.phui-theme-light .alert-unread .phabricator-main-menu-alert-icon,
-.phui-theme-light .message-unread .phabricator-main-menu-message-icon  {
-  color: {$sky};
-}
-
-.phui-theme-light .phabricator-main-menu-alert-count,
-.phui-theme-light .phabricator-main-menu-message-count,
-.phui-theme-light .phui-icon-view.menu-icon-selected {
-  color: {$sky};
-}
-
-/*--- Durable Column ---------------------------------------------------------*/
-
-.phui-theme-light .conpherence-durable-column-header-text,
-.phui-theme-light .conpherence-durable-column-header-text .phui-icon-view {
-  color: {$bluetext};
-}
-
-.phui-theme-light .conpherence-durable-column-header {
-  border-left: 1px solid {$lightblueborder};
-  border-right: 1px solid {$lightblueborder};
-}
-
-/*--- Dark "Classic" ---------------------------------------------------------*/
 
 .phui-theme-dark {
   background-color: {$page.background.dark};
@@ -109,11 +70,8 @@
 
 .phui-theme-dark .phui-box-border {
   border-color: {$lightblueborder};
-  border-bottom-color: {$blueborder};
 }
 
-/*--- Blindigo "Phacility" ---------------------------------------------------*/
+.phui-theme-dark .phui-box-grey {
-
+  background-color: {$page.background.dark};
-.phui-theme-blindigo {
-  background-color: #F1F1F4;
 }

webroot/rsrc/css/core/core.css

@@ -47,7 +47,7 @@ body {
   direction: ltr;
   text-align: left;
   unicode-bidi: embed;
-  background: {$page.background.light};
+  background: {$page.background};
 
   /* By default, the iPhone zooms all text on the page by some percentage when
      you rotate from portrait mode to landscape mode. Disable this, since it

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

@@ -13,7 +13,7 @@
 }
 
 .phui-box-grey {
-  background-color: rgba(71,87,120,0.06);
+  background-color: {$page.background};
   border-radius: 3px;
   border: none;
 }

webroot/rsrc/css/phui/phui-profile-menu.css

@@ -33,7 +33,7 @@
 }
 
 .phui-profile-menu .phabricator-side-menu {
-  background: {$menu.profile.background};
+  background: #525867;
   box-shadow: inset -2px 0 2px rgba(0, 0, 0, 0.150);
   width: 240px;
 }
@@ -107,7 +107,7 @@
 
 .device-desktop .phui-profile-menu .phabricator-side-menu
   .phui-list-item-href:hover {
-  background-color: {$menu.profile.background.hover};
+  background-color: rgba(0,0,0,0.15);
   color: {$menu.profile.text.selected};
 }
 
@@ -122,10 +122,15 @@
 
 .phui-profile-menu .phabricator-side-menu .phui-list-item-selected
   .phui-list-item-href {
-  background-color: {$menu.profile.background.selected};
+  background-color: rgba(0,0,0,0.3);
   color: {$menu.profile.text.selected};
 }
 
+.phui-profile-menu .phabricator-side-menu .phui-list-item-selected
+  .phui-list-item-href:hover {
+  background-color: rgba(0,0,0,0.45);
+}
+
 .phui-profile-menu .phabricator-side-menu .phui-divider {
   margin: 4px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
@@ -190,14 +195,14 @@
   .phui-icon-circle,
 .phui-profile-menu .phui-list-item-selected.phui-profile-menu-footer
   .phui-icon-circle {
-    border-color: #fff;
+    border-color: {$menu.profile.text.selected};
 }
 
 .phui-profile-menu .phui-profile-menu-footer .phui-list-item-href:hover
   .phui-icon-circle .phui-icon-view,
 .phui-profile-menu .phui-list-item-selected.phui-profile-menu-footer
   .phui-icon-circle .phui-icon-view {
-    color: #fff;
+    color: {$menu.profile.text.selected};
 }
 
 .phui-profile-menu .phui-profile-menu-footer
@@ -205,10 +210,9 @@
   font-size: 12px;
 }
 
-div.phui-profile-menu .phabricator-side-menu .phui-profile-menu-footer-1 {
+.phui-profile-menu .phabricator-side-menu .phui-profile-menu-footer-1 {
   bottom: 0;
   position: fixed;
-  background-color: {$menu.profile.background};
 }
 
 .phui-profile-menu .phui-profile-menu-footer-1 {