[Redesign] Uh... Add back gradient headers?

Summary: Ref T8099, hashtag#yolo. Adds back the original gradients plus a 'light' theme. Unclear which should be default, but we can play with it until a decision needs to be made.

Test Plan: Change colors a lot, turn on durable column.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T8099

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

resources/celerity/map.php

@@ -7,8 +7,8 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '1dd87664',
+    'core.pkg.css' => '996cd7ca',
-    'core.pkg.js' => 'fbf1d615',
+    'core.pkg.js' => '125d168c',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'f89b49b6',
     'differential.pkg.js' => '8c98ce21',
@@ -33,9 +33,10 @@ return array(
     'rsrc/css/aphront/typeahead.css' => '0e403212',
     'rsrc/css/application/almanac/almanac.css' => 'dbb9b3af',
     'rsrc/css/application/auth/auth.css' => '44975d4b',
-    'rsrc/css/application/base/main-menu-view.css' => '1d2f0ad0',
+    'rsrc/css/application/base/main-menu-view.css' => '5e8c1ab7',
     'rsrc/css/application/base/notification-menu.css' => '713df25a',
     'rsrc/css/application/base/phabricator-application-launch-view.css' => '9a233ed6',
+    'rsrc/css/application/base/phui-theme.css' => '1ccdcc84',
     'rsrc/css/application/base/standard-page-view.css' => '43045fb4',
     'rsrc/css/application/calendar/calendar-icon.css' => '98ce946d',
     'rsrc/css/application/chatlog/chatlog.css' => 'f1971c1c',
@@ -45,7 +46,7 @@ return array(
     'rsrc/css/application/config/config-welcome.css' => '6abd79be',
     'rsrc/css/application/config/setup-issue.css' => '631c4e92',
     'rsrc/css/application/config/unhandled-exception.css' => '4c96257a',
-    'rsrc/css/application/conpherence/durable-column.css' => '4cb8c197',
+    'rsrc/css/application/conpherence/durable-column.css' => '418234d3',
     'rsrc/css/application/conpherence/menu.css' => 'f9f1d143',
     'rsrc/css/application/conpherence/message-pane.css' => '7cbf4cbb',
     'rsrc/css/application/conpherence/notification.css' => '919974b6',
@@ -112,7 +113,7 @@ return array(
     'rsrc/css/core/z-index.css' => '63689f49',
     'rsrc/css/diviner/diviner-shared.css' => '38813222',
     'rsrc/css/font/font-awesome.css' => 'e2e712fe',
-    'rsrc/css/font/font-oswald.css' => '608d6059',
+    'rsrc/css/font/font-oswald.css' => 'd5e48ef7',
     'rsrc/css/font/font-source-sans-pro.css' => '8906c07b',
     'rsrc/css/font/phui-font-icon-base.css' => '3dad2ae3',
     'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
@@ -153,7 +154,8 @@ return array(
     'rsrc/css/phui/phui-workboard-view.css' => '0cac51a4',
     'rsrc/css/phui/phui-workpanel-view.css' => '4bdc2562',
     'rsrc/css/sprite-login.css' => 'a3526809',
-    'rsrc/css/sprite-menu.css' => 'ab8f6356',
+    'rsrc/css/sprite-main-header.css' => '37e05e50',
+    'rsrc/css/sprite-menu.css' => 'fba663c3',
     'rsrc/css/sprite-projects.css' => 'b0d9e24f',
     'rsrc/css/sprite-tokens.css' => '1706b943',
     'rsrc/externals/font/fontawesome/fontawesome-webfont.eot' => '5fb6fb0e',
@@ -310,8 +312,9 @@ return array(
     'rsrc/image/phrequent_inactive.png' => 'bfc15a69',
     'rsrc/image/sprite-login-X2.png' => 'a15918f0',
     'rsrc/image/sprite-login.png' => '8cee4f6e',
-    'rsrc/image/sprite-menu-X2.png' => 'dc41efa4',
+    'rsrc/image/sprite-main-header.png' => 'f9008250',
-    'rsrc/image/sprite-menu.png' => '8848c09a',
+    'rsrc/image/sprite-menu-X2.png' => '1c25965b',
+    'rsrc/image/sprite-menu.png' => '76373b62',
     'rsrc/image/sprite-projects-X2.png' => '8c91c839',
     'rsrc/image/sprite-projects.png' => 'ef9dc9b5',
     'rsrc/image/sprite-tokens-X2.png' => 'b4776580',
@@ -327,7 +330,7 @@ return array(
     'rsrc/image/texture/table_header_hover.png' => '038ec3b9',
     'rsrc/image/texture/table_header_tall.png' => 'd56b434f',
     'rsrc/js/application/aphlict/Aphlict.js' => '5359e785',
-    'rsrc/js/application/aphlict/behavior-aphlict-dropdown.js' => 'e09f6208',
+    'rsrc/js/application/aphlict/behavior-aphlict-dropdown.js' => '031cee25',
     'rsrc/js/application/aphlict/behavior-aphlict-listen.js' => 'b1a59974',
     'rsrc/js/application/aphlict/behavior-aphlict-status.js' => 'ea681761',
     'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18',
@@ -499,7 +502,7 @@ return array(
     'conduit-api-css' => '7bc725c4',
     'config-options-css' => '7fedf08b',
     'config-welcome-css' => '6abd79be',
-    'conpherence-durable-column-view' => '4cb8c197',
+    'conpherence-durable-column-view' => '418234d3',
     'conpherence-menu-css' => 'f9f1d143',
     'conpherence-message-pane-css' => '7cbf4cbb',
     'conpherence-notification-css' => '919974b6',
@@ -521,7 +524,7 @@ return array(
     'diffusion-source-css' => '66fdf661',
     'diviner-shared-css' => '38813222',
     'font-fontawesome' => 'e2e712fe',
-    'font-oswald' => '608d6059',
+    'font-oswald' => 'd5e48ef7',
     'font-source-sans-pro' => '8906c07b',
     'global-drag-and-drop-css' => '697324ad',
     'harbormaster-css' => '49d64eb4',
@@ -531,7 +534,7 @@ return array(
     'inline-comment-summary-css' => 'eb5f8e8c',
     'javelin-aphlict' => '5359e785',
     'javelin-behavior' => '61cbc29a',
-    'javelin-behavior-aphlict-dropdown' => 'e09f6208',
+    'javelin-behavior-aphlict-dropdown' => '031cee25',
     'javelin-behavior-aphlict-listen' => 'b1a59974',
     'javelin-behavior-aphlict-status' => 'ea681761',
     'javelin-behavior-aphront-basic-tokenizer' => 'b3a4b884',
@@ -721,7 +724,7 @@ return array(
     'phabricator-hovercard-view-css' => '0d665853',
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => 'c1700f6f',
-    'phabricator-main-menu-view' => '1d2f0ad0',
+    'phabricator-main-menu-view' => '5e8c1ab7',
     'phabricator-nav-view-css' => '0ecd30a1',
     'phabricator-notification' => '0c6946e7',
     'phabricator-notification-css' => '9c279160',
@@ -791,6 +794,7 @@ return array(
     'phui-status-list-view-css' => '888cedb8',
     'phui-tag-view-css' => '402691cc',
     'phui-text-css' => 'cf019f54',
+    'phui-theme-css' => '1ccdcc84',
     'phui-timeline-view-css' => '07a1bd0f',
     'phui-workboard-view-css' => '0cac51a4',
     'phui-workpanel-view-css' => '4bdc2562',
@@ -814,7 +818,8 @@ return array(
     'releeph-request-typeahead-css' => '667a48ae',
     'setup-issue-css' => '631c4e92',
     'sprite-login-css' => 'a3526809',
-    'sprite-menu-css' => 'ab8f6356',
+    'sprite-main-header-css' => '37e05e50',
+    'sprite-menu-css' => 'fba663c3',
     'sprite-projects-css' => 'b0d9e24f',
     'sprite-tokens-css' => '1706b943',
     'syntax-highlighting-css' => '6b7b24d9',
@@ -837,6 +842,16 @@ return array(
     '029a133d' => array(
       'aphront-dialog-view-css',
     ),
+    '031cee25' => array(
+      'javelin-behavior',
+      'javelin-request',
+      'javelin-stratcom',
+      'javelin-vector',
+      'javelin-dom',
+      'javelin-uri',
+      'javelin-behavior-device',
+      'phabricator-title',
+    ),
     '037b59eb' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1267,6 +1282,9 @@ return array(
       'javelin-stratcom',
       'javelin-dom',
     ),
+    '5e8c1ab7' => array(
+      'phui-theme-css',
+    ),
     '5e9f347c' => array(
       'javelin-behavior',
       'multirow-row-manager',
@@ -1290,9 +1308,6 @@ return array(
       'javelin-stratcom',
       'javelin-dom',
     ),
-    '608d6059' => array(
-      'phui-fontkit-css',
-    ),
     '6153c708' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1843,6 +1858,9 @@ return array(
       'javelin-dom',
       'javelin-stratcom',
     ),
+    'd5e48ef7' => array(
+      'phui-fontkit-css',
+    ),
     'd75709e6' => array(
       'javelin-behavior',
       'javelin-workflow',
@@ -1872,16 +1890,6 @@ return array(
     'df5e11d2' => array(
       'javelin-install',
     ),
-    'e09f6208' => array(
-      'javelin-behavior',
-      'javelin-request',
-      'javelin-stratcom',
-      'javelin-vector',
-      'javelin-dom',
-      'javelin-uri',
-      'javelin-behavior-device',
-      'phabricator-title',
-    ),
     'e10f8e18' => array(
       'javelin-behavior',
       'javelin-dom',

resources/sprite/manifest/main-header.json

@@ -0,0 +1,70 @@
+{
+  "version": 1,
+  "sprites": {
+    "main-header-applebloom": {
+      "name": "main-header-applebloom",
+      "rule": ".phui-theme-applebloom .phabricator-main-menu-background",
+      "hash": "64822776b129e724709983db1ac5a712"
+    },
+    "main-header-blindigo": {
+      "name": "main-header-blindigo",
+      "rule": ".phui-theme-blindigo .phabricator-main-menu-background",
+      "hash": "8c4f5b1f1f3faceb6ca6e8278a1b082f"
+    },
+    "main-header-blue": {
+      "name": "main-header-blue",
+      "rule": ".phui-theme-blue .phabricator-main-menu-background",
+      "hash": "b5dd317b7bd35e0592b3f4b66267437c"
+    },
+    "main-header-dark": {
+      "name": "main-header-dark",
+      "rule": ".phui-theme-dark .phabricator-main-menu-background",
+      "hash": "817815d84c0c935b4875f6ecc7dbb526"
+    },
+    "main-header-fluttershy": {
+      "name": "main-header-fluttershy",
+      "rule": ".phui-theme-fluttershy .phabricator-main-menu-background",
+      "hash": "55d4e9f813cf354693290105cf83cf78"
+    },
+    "main-header-green": {
+      "name": "main-header-green",
+      "rule": ".phui-theme-green .phabricator-main-menu-background",
+      "hash": "c230f09e307d167fab3ea0d8c3b33755"
+    },
+    "main-header-indigo": {
+      "name": "main-header-indigo",
+      "rule": ".phui-theme-indigo .phabricator-main-menu-background",
+      "hash": "a27394ff1eff4d24398ec57e54d7f5fd"
+    },
+    "main-header-light": {
+      "name": "main-header-light",
+      "rule": ".phui-theme-light .phabricator-main-menu-background",
+      "hash": "3c41fbfbe13cae2451467a1e307115aa"
+    },
+    "main-header-nightmaremoon": {
+      "name": "main-header-nightmaremoon",
+      "rule": ".phui-theme-nightmaremoon .phabricator-main-menu-background",
+      "hash": "9e7cc7b18d2132d2dd47586ba0cd6400"
+    },
+    "main-header-red": {
+      "name": "main-header-red",
+      "rule": ".phui-theme-red .phabricator-main-menu-background",
+      "hash": "3f12cc098afddb8e6c830ef761dcaa61"
+    },
+    "main-header-scootaloo": {
+      "name": "main-header-scootaloo",
+      "rule": ".phui-theme-scootaloo .phabricator-main-menu-background",
+      "hash": "8cedc359dccab1bbd49cbc69940f566a"
+    },
+    "main-header-yellow": {
+      "name": "main-header-yellow",
+      "rule": ".phui-theme-yellow .phabricator-main-menu-background",
+      "hash": "d920e70a6d2662cfb83e1d7e4b4000fd"
+    }
+  },
+  "scales": [
+    1
+  ],
+  "header": "\/**\n * @provides sprite-main-header-css\n * @generated\n *\/\n\n.sprite-main-header {\n  background-image: url(\/rsrc\/image\/sprite-main-header.png);\n  background-repeat: repeat-x;\n}\n\n\n",
+  "type": "repeat-x"
+}

resources/sprite/manifest/menu.json

@@ -1,26 +1,6 @@
 {
   "version": 1,
   "sprites": {
-    "blindigo-eye": {
-      "name": "blindigo-eye",
-      "rule": ".blindigo-eye",
-      "hash": "fcd3eb2a8d2d8babf59a952b62783282"
-    },
-    "blindigo-logo": {
-      "name": "blindigo-logo",
-      "rule": ".blindigo-logo",
-      "hash": "a22978e621df5126471576510303222f"
-    },
-    "blue-eye": {
-      "name": "blue-eye",
-      "rule": ".blue-eye",
-      "hash": "f7505e56e452c5922f1a275a736d5326"
-    },
-    "blue-logo": {
-      "name": "blue-logo",
-      "rule": ".blue-logo",
-      "hash": "4c6240f153245d56a6bf02bb6796404f"
-    },
     "dark-eye": {
       "name": "dark-eye",
       "rule": ".dark-eye",
@@ -31,35 +11,15 @@
       "rule": ".dark-logo",
       "hash": "e3425da87e8f6737d8db0063d064cd7d"
     },
-    "indigo-eye": {
+    "light-eye": {
-      "name": "indigo-eye",
+      "name": "light-eye",
-      "rule": ".indigo-eye",
+      "rule": ".light-eye",
-      "hash": "497b57bc1709a88fa68b14dc88a2a253"
+      "hash": "5b6bf7c8c10d4f7414d976f6e79ae2ff"
     },
-    "indigo-logo": {
+    "light-logo": {
-      "name": "indigo-logo",
+      "name": "light-logo",
-      "rule": ".indigo-logo",
+      "rule": ".light-logo",
-      "hash": "c7223567a77c46fbab571170f0a76ae6"
+      "hash": "bee37c0a86825ec7ded38936b1ba7b65"
-    },
-    "rainbow-eye": {
-      "name": "rainbow-eye",
-      "rule": ".rainbow-eye",
-      "hash": "2c63171eeb8ba6acb645219fdf2585b1"
-    },
-    "rainbow-logo": {
-      "name": "rainbow-logo",
-      "rule": ".rainbow-logo",
-      "hash": "eca0c685cb9524bff513a5f7eab7c6e5"
-    },
-    "red-eye": {
-      "name": "red-eye",
-      "rule": ".red-eye",
-      "hash": "97a9a11ecbeee1fbb8a7c8ea406e4be4"
-    },
-    "red-logo": {
-      "name": "red-logo",
-      "rule": ".red-logo",
-      "hash": "1126a79154d24242d3f72e868b95a445"
     }
   },
   "scales": [

scripts/celerity/generate_sprites.php

@@ -29,6 +29,7 @@ $generator = new CeleritySpriteGenerator();
 $sheets = array(
   'menu' => $generator->buildMenuSheet(),
   'tokens' => $generator->buildTokenSheet(),
+  'main-header' => $generator->buildMainHeaderSheet(),
   'login' => $generator->buildLoginSheet(),
   'projects' => $generator->buildProjectsSheet(),
 );

src/applications/celerity/CelerityResourceTransformer.php

@@ -207,6 +207,7 @@ final class CelerityResourceTransformer {
       'lightviolet'   => '#ecdff1',
       'charcoal'      => '#4b4d51',
       'backdrop'      => '#dadee7',
+      'hoverwhite'    => 'rgba(255,255,255,.75)',
       'hovergrey'     => '#c5cbcf',
       'hoverblue'     => '#eceff5',
       'hoverborder'   => '#dfe1e9',

src/applications/celerity/CeleritySpriteGenerator.php

@@ -7,11 +7,7 @@ final class CeleritySpriteGenerator {
 
     $colors = array(
       'dark',
-      'red',
+      'light',
-      'blue',
-      'indigo',
-      'blindigo',
-      'rainbow',
     );
 
     $sources = array();
@@ -154,6 +150,33 @@ final class CeleritySpriteGenerator {
     return $sheet;
   }
 
+  public function buildMainHeaderSheet() {
+    $gradients = $this->getDirectoryList('main_header');
+    $template = new PhutilSprite();
+
+    $sprites = array();
+    foreach ($gradients as $gradient) {
+      $path = $this->getPath('main_header/'.$gradient.'.png');
+      $sprite = id(clone $template)
+        ->setName('main-header-'.$gradient)
+        ->setSourceFile($path)
+        ->setTargetCSS('.phui-theme-'.$gradient.
+          ' .phabricator-main-menu-background');
+      $sprite->setSourceSize(6, 44);
+      $sprites[] = $sprite;
+    }
+
+    $sheet = $this->buildSheet('main-header',
+      false,
+      PhutilSpriteSheet::TYPE_REPEAT_X);
+
+    foreach ($sprites as $sprite) {
+      $sheet->addSprite($sprite);
+    }
+
+    return $sheet;
+  }
+
   private function getPath($to_path = null) {
     $root = dirname(phutil_get_library_root('phabricator'));
     return $root.'/resources/sprite/'.$to_path;

src/applications/config/option/PhabricatorUIConfigOptions.php

@@ -20,18 +20,15 @@ final class PhabricatorUIConfigOptions
   }
 
   public function getOptions() {
+    $manifest = PHUIIconView::getSheetManifest('main-header');
     $custom_header_example =
       PhabricatorCustomHeaderConfigType::getExampleConfig();
     $experimental_link = 'https://secure.phabricator.com/T4214';
-
+    $options = array();
-    $options = array(
+    foreach (array_keys($manifest) as $sprite_name) {
-      'blindigo' => 'blindigo',
+      $key = substr($sprite_name, strlen('main-header-'));
-      'blue' => 'blue',
+      $options[$key] = $key;
-      'dark' => 'dark',
+    }
-      'indigo' => 'indigo',
-      'red' => 'red',
-      'rainbow' => 'rainbow',
-    );
 
     $example = <<<EOJSON
 [

src/applications/conpherence/view/ConpherenceDurableColumnView.php

@@ -139,6 +139,7 @@ final class ConpherenceDurableColumnView extends AphrontTagView {
     $classes = array();
     $classes[] = 'conpherence-durable-column-header';
     $classes[] = 'phabricator-main-menu-background';
+    $classes[] = 'sprite-main-header';
 
     $loading_mask = phutil_tag(
       'div',

src/view/page/PhabricatorStandardPageView.php

@@ -349,6 +349,7 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
 
     $classes = array();
     $classes[] = 'main-page-frame';
+    $classes[] = 'phui-theme-'.PhabricatorEnv::getEnvConfig('ui.header-color');
     $developer_warning = null;
     if (PhabricatorEnv::getEnvConfig('phabricator.developer-mode') &&
         DarkConsoleErrorLogPluginAPI::getErrors()) {

src/view/page/menu/PhabricatorMainMenuView.php

@@ -27,6 +27,7 @@ final class PhabricatorMainMenuView extends AphrontView {
     $user = $this->user;
 
     require_celerity_resource('phabricator-main-menu-view');
+    require_celerity_resource('sprite-main-header-css');
 
     $header_id = celerity_generate_unique_node_id();
     $menus = array();
@@ -80,7 +81,7 @@ final class PhabricatorMainMenuView extends AphrontView {
 
     $application_menu = $this->renderApplicationMenu();
     $classes = array();
-    $classes[] = 'phabricator-main-menu';
+    $classes[] = 'phabricator-main-menu sprite-main-header';
     $classes[] = 'phabricator-main-menu-background';
 
     return phutil_tag(
@@ -159,7 +160,7 @@ final class PhabricatorMainMenuView extends AphrontView {
         'meta'  => array(
           'map' => array(
             $header_id => 'phabricator-application-menu-expanded',
-            $button_id => 'sky',
+            $button_id => 'menu-icon-selected',
           ),
         ),
       ),
@@ -222,7 +223,7 @@ final class PhabricatorMainMenuView extends AphrontView {
         'meta'  => array(
           'map' => array(
             $header_id => 'phabricator-search-menu-expanded',
-            $button_id => 'sky',
+            $button_id => 'menu-icon-selected',
           ),
         ),
       ),
@@ -273,10 +274,15 @@ final class PhabricatorMainMenuView extends AphrontView {
           'background-position: 0px 0px; '.
           'background-image: url('.$logo_uri.');';
       }
+    } else {
+      $color = PhabricatorEnv::getEnvConfig('ui.header-color');
+      if ($color == 'light') {
+        $color = 'dark';
+      } else {
+        $color = 'light';
+      }
     }
 
-    $color = PhabricatorEnv::getEnvConfig('ui.header-color');
-
     return phutil_tag(
       'a',
       array(

webroot/rsrc/css/application/base/main-menu-view.css

@@ -1,5 +1,6 @@
 /**
  * @provides phabricator-main-menu-view
+ * @requires phui-theme-css
  */
 
 
@@ -17,7 +18,7 @@
 .phabricator-main-menu-background {
   min-height: 43px;
   background: #ebecee;
-  border-bottom: 1px solid {$hovergrey};
+  border-bottom: 1px solid rgba(0,0,0,.1);
 }
 
 .device-desktop .phabricator-main-menu {
@@ -88,11 +89,10 @@
   font-size: 20px;
   height: 20px;
   width: 20px;
-  color: {$bluetext};
+  color: {$hoverwhite};
   text-align: center;
   vertical-align: middle;
   line-height: 24px;
-  text-shadow: {$whitetextshadow};
 }
 
 .phabricator-expand-application-menu,
@@ -161,7 +161,6 @@
   border-color: {$blueborder};
   border-radius: 3px;
   background-color: #fff;
-  opacity: .8;
   height: 28px;
   padding: 3px 30px 3px 6px;
   float: left;
@@ -190,7 +189,7 @@
 .phabricator-main-menu-search button {
   color: {$bluetext};
   position: absolute;
-  background: {$lightgreybackground};
+  background: {$greybackground};
   border: none;
   outline: none;
   box-shadow: none;
@@ -221,34 +220,37 @@
 
 .device-desktop .phabricator-main-menu-search
   button.phabricator-main-menu-search-dropdown:hover .phui-icon-view {
-    color: {$darkbluetext};
+    color: #fff;
 }
 
-.device-desktop .phabricator-main-menu-search
-  button.phabricator-main-menu-search-dropdown:hover {
-    background-color: rgba(55,55,55,0.08);
-    border-radius: 3px;
-  }
-
 .device .phabricator-main-menu-search
   button.phabricator-main-menu-search-dropdown {
     left: 2px;
-    background: {$lightgreybackground};
+    background: {$greybackground};
 }
 
 button.phabricator-main-menu-search-dropdown .caret:before {
   content: "\f107";
   font-family: FontAwesome;
-  color: {$lightbluetext};
+  color: {$hoverwhite};
 }
 
 .phabricator-main-menu-search button.phabricator-main-menu-search-dropdown
   .phui-icon-view {
-  color: {$lightbluetext};
+  color: {$hoverwhite};
   font-size: 15px;
   top: 6px;
   left: 8px;
-  text-shadow: {$whitetextshadow};
+}
+
+.device
+  .phabricator-main-menu-search button.phabricator-main-menu-search-dropdown
+  .phui-icon-view {
+  color: {$bluetext};
+}
+
+.device button.phabricator-main-menu-search-dropdown .caret:before {
+  color: {$bluetext};
 }
 
 .phabricator-main-menu-search-dropdown .caret {
@@ -335,6 +337,8 @@ button.phabricator-main-menu-search-dropdown .caret:before {
   line-height: 18px;
 }
 
+
+
 /* - Alert ---------------------------------------------------------------------
 
   Alert menus are like icon menus but don't obey collapse rules.
@@ -352,8 +356,7 @@ button.phabricator-main-menu-search-dropdown .caret:before {
 }
 
 .alert-notifications .phui-icon-view {
-  color: {$lightbluetext};
+  color: {$hoverwhite};
-  text-shadow: {$whitetextshadow};
 }
 
 .device-desktop .alert-notifications:hover {
@@ -362,7 +365,7 @@ button.phabricator-main-menu-search-dropdown .caret:before {
 }
 
 .device-desktop .alert-notifications:hover .phui-icon-view {
-  color: {$sky};
+  color: #fff;
 }
 
 .phabricator-main-menu-alert-icon,
@@ -371,12 +374,16 @@ button.phabricator-main-menu-search-dropdown .caret:before {
   height: 18px;
   float: left;
   padding: 8px 6px 8px 4px;
-  color: {$sky};
+  color: #fff;
   font-size: 18px;
   line-height: 20px;
   text-align: right;
 }
 
+.phui-icon-view.menu-icon-selected {
+  color: #fff;
+}
+
 .phabricator-main-menu-alert-icon {
   font-size: 16px;
   margin-top: 2px;
@@ -384,13 +391,12 @@ button.phabricator-main-menu-search-dropdown .caret:before {
 
 .phabricator-main-menu-alert-count,
 .phabricator-main-menu-message-count {
-  color: {$sky};
+  color: #fff;
   text-align: center;
   display: none;
   float: left;
   margin: 11px 6px 0 -2px;
   font-size: 12px;
-  text-shadow: {$whitetextshadow};
 }
 
 .device-phone .alert-unread .phabricator-main-menu-alert-count,
@@ -400,7 +406,7 @@ button.phabricator-main-menu-search-dropdown .caret:before {
 
 .alert-unread .phabricator-main-menu-alert-icon,
 .message-unread .phabricator-main-menu-message-icon  {
-  color: {$sky};
+  color: #fff;
 }
 
 .alert-unread .phabricator-main-menu-alert-count,
@@ -423,18 +429,16 @@ button.phabricator-main-menu-search-dropdown .caret:before {
 }
 
 .device .phabricator-dark-menu .phui-list-item-type-label {
-  border-top: 1px solid {$thinblueborder};
   text-transform: uppercase;
   font-size: 13px;
   background-color: #fff;
   padding: 6px 0 6px 12px;
   display: block;
   font-weight: bold;
-  color: {$blue};
+  color: #000;
 }
 
 .device .phabricator-dark-menu .phui-list-item-href {
-  border-top: 1px solid {$thinblueborder};
   background-color: #fff;
   padding: 4px 0 4px 20px;
   display: block;
@@ -461,21 +465,21 @@ button.phabricator-main-menu-search-dropdown .caret:before {
 
 .device .phabricator-search-menu-expanded .phabricator-search-menu {
   display: block;
-  padding-top: 44px;
+  position: absolute;
+  top: 38px;
+  left: 8px;
+  right: 8px;
+  border: 1px solid {$lightblueborder};
+  border-radius: 3px;
+  box-shadow: {$dropshadow};
 }
 
 .device .phabricator-dark-menu .phui-list-item-type-link {
-  font-size: 15px;
+  min-height: 24px;
-  min-height: 30px;
+  line-height: 20px;
-  line-height: 28px;
   background: #fff;
 }
 
-.device .phui-list-item-type-link
-  .phabricator-core-menu-icon + .phui-list-item-name {
-  margin-left: 32px;
-}
-
 .device-desktop .phabricator-application-menu {
   float: right;
 }
@@ -493,11 +497,16 @@ button.phabricator-main-menu-search-dropdown .caret:before {
   font-size: 20px;
   height: 20px;
   width: 20px;
-  color: {$lightbluetext};
+  color: {$hoverwhite};
   margin: 8px;
   text-align: center;
   vertical-align: middle;
-  text-shadow: {$whitetextshadow};
+}
+
+.device .phabricator-dark-menu.phabricator-application-menu
+  .phui-list-item-icon.phui-font-fa,
+.device .phabricator-dark-menu .phabricator-core-menu-icon {
+  display: none;
 }
 
 .device .phabricator-application-menu .phui-list-item-icon.phui-font-fa {
@@ -511,7 +520,7 @@ button.phabricator-main-menu-search-dropdown .caret:before {
 .device-desktop .phabricator-application-menu
   .core-menu-item.phui-list-item-view:hover
   .phui-list-item-icon.phui-font-fa {
-    color: {$darkbluetext};
+    color: #fff;
   }
 
 .device-desktop .phabricator-application-menu
@@ -519,12 +528,6 @@ button.phabricator-main-menu-search-dropdown .caret:before {
   display: block;
 }
 
-.device-desktop .phabricator-application-menu
- .core-menu-item.phui-list-item-view:hover {
-  background-color: rgba(55,55,55,.08);
-  border-radius: 3px;
-}
-
 .device-desktop .phabricator-application-menu .phui-list-item-view {
   float: left;
   position: relative;
@@ -572,7 +575,13 @@ button.phabricator-main-menu-search-dropdown .caret:before {
 
 .device .phabricator-application-menu-expanded .phabricator-application-menu {
   display: block;
-  padding-top: 44px;
+  position: absolute;
+  border: 1px solid {$lightblueborder};
+  border-radius: 3px;
+  box-shadow: {$dropshadow};
+  top: 38px;
+  right: 8px;
+  width: 240px;
 }
 
 .device .phabricator-application-menu,

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

@@ -0,0 +1,73 @@
+/**
+ * @provides phui-theme-css
+ */
+
+ .phui-theme-light button.phabricator-main-menu-search-dropdown .caret:before {
+  color: {$lightbluetext};
+}
+
+ .phui-theme-light .phabricator-main-menu-search
+  button.phabricator-main-menu-search-dropdown .phui-icon-view {
+  color: {$lightbluetext};
+  text-shadow: {$whitetextshadow};
+}
+
+.phui-theme-light .alert-notifications .phui-icon-view {
+  color: {$lightbluetext};
+  text-shadow: {$whitetextshadow};
+}
+
+.phui-theme-light .phabricator-application-menu
+  .phui-list-item-icon.phui-font-fa {
+  color: {$lightbluetext};
+  text-shadow: {$whitetextshadow};
+}
+
+.device-desktop .phui-theme-light .phabricator-main-menu-search
+  button.phabricator-main-menu-search-dropdown:hover .phui-icon-view {
+    color: {$sky};
+}
+
+.device-desktop .phui-theme-light .phabricator-application-menu
+  .core-menu-item.phui-list-item-view:hover
+  .phui-list-item-icon.phui-font-fa {
+    color: {$sky};
+}
+
+.phui-theme-light .phabricator-menu-button-icon.phui-icon-view {
+  color: {$bluetext};
+  text-shadow: {$whitetextshadow};
+}
+
+.phui-theme-light .sprite-main-header {
+  background-image: none;
+}
+
+/*--- 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};
+}

webroot/rsrc/css/application/conpherence/durable-column.css

@@ -108,16 +108,16 @@
 }
 
 .conpherence-durable-column-header {
-  border-left: 1px solid {$lightblueborder};
+  border-left: 1px solid rgba(0,0,0,.1);
-  border-right: 1px solid {$lightblueborder};
+  border-right: 1px solid rgba(0,0,0,.1);
 }
 
 .conpherence-durable-column-header-text {
   float: left;
   padding: 13px 0 12px 12px;
   font-size: 15px;
-  color: {$darkbluetext};
+  color: {$hoverwhite};
-  font-weight: 500;
+  font-weight: 400;
   width: 230px;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -125,7 +125,7 @@
 }
 
 .conpherence-durable-column-header-text .phui-icon-view {
-  color: {$bluetext};
+  color: {$hoverwhite};
 }
 
 .conpherence-durable-column-icon-bar {

webroot/rsrc/css/sprite-main-header.css

@@ -0,0 +1,60 @@
+/**
+ * @provides sprite-main-header-css
+ * @generated
+ */
+
+.sprite-main-header {
+  background-image: url(/rsrc/image/sprite-main-header.png);
+  background-repeat: repeat-x;
+}
+
+
+
+
+.phui-theme-applebloom .phabricator-main-menu-background {
+  background-position: 0px 0px;
+}
+
+.phui-theme-blindigo .phabricator-main-menu-background {
+  background-position: 0px -45px;
+}
+
+.phui-theme-blue .phabricator-main-menu-background {
+  background-position: 0px -90px;
+}
+
+.phui-theme-dark .phabricator-main-menu-background {
+  background-position: 0px -135px;
+}
+
+.phui-theme-fluttershy .phabricator-main-menu-background {
+  background-position: 0px -180px;
+}
+
+.phui-theme-green .phabricator-main-menu-background {
+  background-position: 0px -225px;
+}
+
+.phui-theme-indigo .phabricator-main-menu-background {
+  background-position: 0px -270px;
+}
+
+.phui-theme-light .phabricator-main-menu-background {
+  background-position: 0px -315px;
+}
+
+.phui-theme-nightmaremoon .phabricator-main-menu-background {
+  background-position: 0px -360px;
+}
+
+.phui-theme-red .phabricator-main-menu-background {
+  background-position: 0px -405px;
+}
+
+.phui-theme-scootaloo .phabricator-main-menu-background {
+  background-position: 0px -450px;
+}
+
+.phui-theme-yellow .phabricator-main-menu-background {
+  background-position: 0px -495px;
+}

webroot/rsrc/css/sprite-menu.css

@@ -13,7 +13,7 @@ only screen and (min-device-pixel-ratio: 1.5),
 only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   .sprite-menu {
     background-image: url(/rsrc/image/sprite-menu-X2.png);
-    background-size: 194px 205px;
+    background-size: 97px 123px;
   }
 }
 
@@ -26,42 +26,10 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   background-position: 0px -82px;
 }
 
-.red-logo {
+.light-logo {
-  background-position: -97px 0px;
-}
-
-.red-eye {
-  background-position: -41px -82px;
-}
-
-.blue-logo {
   background-position: 0px -41px;
 }
 
-.blue-eye {
+.light-eye {
-  background-position: -82px -82px;
+  background-position: -41px -82px;
-}
-
-.indigo-logo {
-  background-position: -97px -41px;
-}
-
-.indigo-eye {
-  background-position: -123px -82px;
-}
-
-.blindigo-logo {
-  background-position: 0px -123px;
-}
-
-.blindigo-eye {
-  background-position: -97px -123px;
-}
-
-.rainbow-logo {
-  background-position: 0px -164px;
-}
-
-.rainbow-eye {
-  background-position: -97px -164px;
 }

webroot/rsrc/js/application/aphlict/behavior-aphlict-dropdown.js

@@ -125,13 +125,13 @@ JX.behavior('aphlict-dropdown', function(config, statics) {
     if (menu) {
       statics.visible = {menu: menu, icon: icon};
       if (icon) {
-        JX.DOM.alterClass(icon, 'sky', true);
+        JX.DOM.alterClass(icon, 'menu-icon-selected', true);
       }
     } else {
       if (statics.visible) {
         JX.DOM.hide(statics.visible.menu);
         if (statics.visible.icon) {
-          JX.DOM.alterClass(statics.visible.icon, 'sky', false);
+          JX.DOM.alterClass(statics.visible.icon, 'menu-icon-selected', false);
         }
       }
       statics.visible = null;