[redesign] Tokens and List

Summary: Takes a pass at standardizing spacing and colors for lists and tokens.

Test Plan: Tested a lot of lists, policy, timeline, quick create, diffusion.

Reviewers: epriestley

Subscribers: epriestley, Korvin

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

resources/celerity/map.php

@@ -7,11 +7,11 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => '45c8100d',
+    'core.pkg.css' => 'ac63f8ac',
     'core.pkg.js' => '7db41c19',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => 'fbf57382',
-    'differential.pkg.js' => 'f4c86691',
+    'differential.pkg.js' => '74cb0d29',
     'diffusion.pkg.css' => '3783278d',
     'diffusion.pkg.js' => '077e3ad0',
     'maniphest.pkg.css' => 'f88a8402',
@@ -30,13 +30,13 @@ return array(
     'rsrc/css/aphront/phabricator-nav-view.css' => '9283c2df',
     'rsrc/css/aphront/request-failure-view.css' => 'da14df31',
     'rsrc/css/aphront/table-view.css' => '88e80148',
-    'rsrc/css/aphront/tokenizer.css' => '36903077',
+    'rsrc/css/aphront/tokenizer.css' => '82ce2142',
     'rsrc/css/aphront/tooltip.css' => '9c90229d',
     'rsrc/css/aphront/transaction.css' => 'ce491938',
     'rsrc/css/aphront/two-column.css' => '16ab3ad2',
     'rsrc/css/aphront/typeahead.css' => 'a989b5b3',
     'rsrc/css/application/auth/auth.css' => '1e655982',
-    'rsrc/css/application/base/main-menu-view.css' => '5f08823b',
+    'rsrc/css/application/base/main-menu-view.css' => '72d1d2ef',
     'rsrc/css/application/base/notification-menu.css' => '8637a3db',
     'rsrc/css/application/base/phabricator-application-launch-view.css' => '137e794e',
     'rsrc/css/application/base/standard-page-view.css' => '517cdfb1',
@@ -44,7 +44,7 @@ return array(
     'rsrc/css/application/config/config-options.css' => '7fedf08b',
     'rsrc/css/application/config/config-template.css' => '25d446d6',
     'rsrc/css/application/config/setup-issue.css' => '69e640e7',
-    'rsrc/css/application/conpherence/menu.css' => '3690ec7a',
+    'rsrc/css/application/conpherence/menu.css' => '828ddd3e',
     'rsrc/css/application/conpherence/message-pane.css' => '7703a9a9',
     'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
     'rsrc/css/application/conpherence/update.css' => '1099a660',
@@ -113,20 +113,20 @@ return array(
     'rsrc/css/diviner/diviner-shared.css' => '38813222',
     'rsrc/css/font/font-awesome.css' => '73d075c3',
     'rsrc/css/font/font-source-sans-pro.css' => '91d53463',
-    'rsrc/css/font/phui-font-icon-base.css' => '3b2f9260',
+    'rsrc/css/font/phui-font-icon-base.css' => 'eb84f033',
     'rsrc/css/layout/phabricator-action-header-view.css' => '33a4590a',
-    'rsrc/css/layout/phabricator-action-list-view.css' => '020d6dab',
+    'rsrc/css/layout/phabricator-action-list-view.css' => 'dcbfc854',
     'rsrc/css/layout/phabricator-crumbs-view.css' => '989a48b6',
     'rsrc/css/layout/phabricator-filetree-view.css' => 'a8c86ace',
     'rsrc/css/layout/phabricator-hovercard-view.css' => '46a13cf0',
-    'rsrc/css/layout/phabricator-side-menu-view.css' => '4372f3bd',
+    'rsrc/css/layout/phabricator-side-menu-view.css' => 'c1986b85',
     'rsrc/css/layout/phabricator-source-code-view.css' => '62a99814',
     '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-box.css' => '7b3a2eed',
-    'rsrc/css/phui/phui-button.css' => '3dbdbf0d',
+    'rsrc/css/phui/phui-button.css' => 'd26cad6e',
     'rsrc/css/phui/phui-document.css' => '3b078dc0',
     'rsrc/css/phui/phui-feed-story.css' => 'e2c9bc83',
     'rsrc/css/phui/phui-fontkit.css' => 'de84aa4a',
@@ -135,7 +135,7 @@ return array(
     'rsrc/css/phui/phui-header-view.css' => '689dbc38',
     'rsrc/css/phui/phui-icon.css' => 'cdcf2aca',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
-    'rsrc/css/phui/phui-list.css' => 'bf15683f',
+    'rsrc/css/phui/phui-list.css' => '43ed2d93',
     'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
     'rsrc/css/phui/phui-object-item-list-view.css' => '16003f41',
     'rsrc/css/phui/phui-pinboard-view.css' => '874c22f9',
@@ -145,7 +145,7 @@ return array(
     'rsrc/css/phui/phui-status.css' => '2f562399',
     'rsrc/css/phui/phui-tag-view.css' => '74051f4e',
     'rsrc/css/phui/phui-text.css' => '23e9b4b7',
-    'rsrc/css/phui/phui-timeline-view.css' => '15ff2a9f',
+    '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/sprite-apps-large.css' => '12ea1ced',
@@ -359,7 +359,7 @@ return array(
     'rsrc/js/application/differential/behavior-comment-jump.js' => '71755c79',
     'rsrc/js/application/differential/behavior-comment-preview.js' => '127f2018',
     'rsrc/js/application/differential/behavior-diff-radios.js' => 'e1ff79b1',
-    'rsrc/js/application/differential/behavior-dropdown-menus.js' => 'dfd45180',
+    'rsrc/js/application/differential/behavior-dropdown-menus.js' => '9f0dfafa',
     'rsrc/js/application/differential/behavior-edit-inline-comments.js' => '00861799',
     'rsrc/js/application/differential/behavior-keyboard-nav.js' => '173ce7e7',
     'rsrc/js/application/differential/behavior-populate.js' => 'dfdf9f34',
@@ -401,7 +401,7 @@ return array(
     'rsrc/js/application/phortune/behavior-stripe-payment-form.js' => '1693a296',
     'rsrc/js/application/phortune/behavior-test-payment-form.js' => 'b3e5ee60',
     'rsrc/js/application/phortune/phortune-credit-card-form.js' => '2290aeef',
-    'rsrc/js/application/policy/behavior-policy-control.js' => '71b4cbcc',
+    'rsrc/js/application/policy/behavior-policy-control.js' => 'f3fef818',
     'rsrc/js/application/policy/behavior-policy-rule-editor.js' => '263aeb8c',
     'rsrc/js/application/ponder/behavior-votebox.js' => '327dbe61',
     'rsrc/js/application/projects/behavior-boards-filter.js' => '22f113af',
@@ -498,13 +498,13 @@ return array(
     'aphront-panel-view-css' => '5846dfa2',
     'aphront-request-failure-view-css' => 'da14df31',
     'aphront-table-view-css' => '88e80148',
-    'aphront-tokenizer-control-css' => '36903077',
+    'aphront-tokenizer-control-css' => '82ce2142',
     'aphront-tooltip-css' => '9c90229d',
     'aphront-two-column-view-css' => '16ab3ad2',
     'aphront-typeahead-control-css' => 'a989b5b3',
     'auth-css' => '1e655982',
     'config-options-css' => '7fedf08b',
-    'conpherence-menu-css' => '3690ec7a',
+    'conpherence-menu-css' => '828ddd3e',
     'conpherence-message-pane-css' => '7703a9a9',
     'conpherence-notification-css' => '04a6e10a',
     'conpherence-update-css' => '1099a660',
@@ -555,7 +555,7 @@ return array(
     'javelin-behavior-differential-add-reviewers-and-ccs' => '533a187b',
     'javelin-behavior-differential-comment-jump' => '71755c79',
     'javelin-behavior-differential-diff-radios' => 'e1ff79b1',
-    'javelin-behavior-differential-dropdown-menus' => 'dfd45180',
+    'javelin-behavior-differential-dropdown-menus' => '9f0dfafa',
     'javelin-behavior-differential-edit-inline-comments' => '00861799',
     'javelin-behavior-differential-feedback-preview' => '127f2018',
     'javelin-behavior-differential-keyboard-navigation' => '173ce7e7',
@@ -620,7 +620,7 @@ return array(
     'javelin-behavior-pholio-mock-view' => '28497740',
     'javelin-behavior-phui-object-box-tabs' => 'a3e2244e',
     'javelin-behavior-phui-timeline-dropdown-menu' => '4d94d9c3',
-    'javelin-behavior-policy-control' => '71b4cbcc',
+    'javelin-behavior-policy-control' => 'f3fef818',
     'javelin-behavior-policy-rule-editor' => '263aeb8c',
     'javelin-behavior-ponder-votebox' => '327dbe61',
     'javelin-behavior-project-boards' => 'd8e135db',
@@ -689,7 +689,7 @@ return array(
     'path-typeahead' => 'f7fc67ec',
     'people-profile-css' => 'ba7b2762',
     'phabricator-action-header-view-css' => '33a4590a',
-    'phabricator-action-list-view-css' => '020d6dab',
+    'phabricator-action-list-view-css' => 'dcbfc854',
     'phabricator-application-launch-view-css' => '137e794e',
     'phabricator-busy' => '6453c869',
     'phabricator-chatlog-css' => '852140ff',
@@ -710,7 +710,7 @@ return array(
     'phabricator-jump-nav' => 'f0c5e726',
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => 'ad7a69ca',
-    'phabricator-main-menu-view' => '5f08823b',
+    'phabricator-main-menu-view' => '72d1d2ef',
     'phabricator-nav-view-css' => '9283c2df',
     'phabricator-notification' => '0c6946e7',
     'phabricator-notification-css' => 'ef2c9b34',
@@ -724,7 +724,7 @@ return array(
     'phabricator-search-results-css' => 'f240504c',
     'phabricator-settings-css' => 'ea8f5915',
     'phabricator-shaped-request' => '7cbe244b',
-    'phabricator-side-menu-view-css' => '4372f3bd',
+    'phabricator-side-menu-view-css' => 'c1986b85',
     'phabricator-slowvote-css' => '266df6a1',
     'phabricator-source-code-view-css' => '62a99814',
     'phabricator-standard-page-view' => '517cdfb1',
@@ -752,21 +752,21 @@ return array(
     'phrequent-css' => 'ffc185ad',
     'phriction-document-css' => '7d7f0071',
     'phui-box-css' => '7b3a2eed',
-    'phui-button-css' => '3dbdbf0d',
+    'phui-button-css' => 'd26cad6e',
     'phui-calendar-css' => '5e1ad989',
     'phui-calendar-day-css' => 'de035c8a',
     'phui-calendar-list-css' => 'c1d0ca59',
     'phui-calendar-month-css' => 'a92e47d2',
     'phui-document-view-css' => '3b078dc0',
     'phui-feed-story-css' => 'e2c9bc83',
-    'phui-font-icon-base-css' => '3b2f9260',
+    'phui-font-icon-base-css' => 'eb84f033',
     'phui-fontkit-css' => 'de84aa4a',
     'phui-form-css' => 'b78ec020',
     'phui-form-view-css' => 'ed856191',
     'phui-header-view-css' => '689dbc38',
     'phui-icon-view-css' => 'cdcf2aca',
     'phui-info-panel-css' => '27ea50a1',
-    'phui-list-view-css' => 'bf15683f',
+    'phui-list-view-css' => '43ed2d93',
     'phui-object-box-css' => 'ce92d8ec',
     'phui-object-item-list-view-css' => '16003f41',
     'phui-pinboard-view-css' => '874c22f9',
@@ -776,7 +776,7 @@ return array(
     'phui-status-list-view-css' => '2f562399',
     'phui-tag-view-css' => '74051f4e',
     'phui-text-css' => '23e9b4b7',
-    'phui-timeline-view-css' => '15ff2a9f',
+    'phui-timeline-view-css' => 'bbd990d0',
     'phui-workboard-view-css' => '2bf82d00',
     'phui-workpanel-view-css' => 'fddd97bf',
     'phuix-action-list-view' => 'b5c256b8',
@@ -1332,16 +1332,6 @@ return array(
       1 => 'javelin-stratcom',
       2 => 'javelin-dom',
     ),
-    '71b4cbcc' =>
-    array(
-      0 => 'javelin-behavior',
-      1 => 'javelin-dom',
-      2 => 'javelin-util',
-      3 => 'phuix-dropdown-menu',
-      4 => 'phuix-action-list-view',
-      5 => 'phuix-action-view',
-      6 => 'javelin-workflow',
-    ),
     '7319e029' =>
     array(
       0 => 'javelin-behavior',
@@ -1428,6 +1418,10 @@ return array(
       0 => 'javelin-behavior',
       1 => 'javelin-history',
     ),
+    '82ce2142' =>
+    array(
+      0 => 'aphront-typeahead-control-css',
+    ),
     '82f568cd' =>
     array(
       0 => 'javelin-install',
@@ -1567,6 +1561,17 @@ return array(
       2 => 'javelin-uri',
       3 => 'javelin-request',
     ),
+    '9f0dfafa' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-dom',
+      2 => 'javelin-util',
+      3 => 'javelin-stratcom',
+      4 => 'phuix-dropdown-menu',
+      5 => 'phuix-action-list-view',
+      6 => 'phuix-action-view',
+      7 => 'phabricator-phtize',
+    ),
     'a3e2244e' =>
     array(
       0 => 'javelin-behavior',
@@ -1893,17 +1898,6 @@ return array(
       1 => 'javelin-dom',
       2 => 'phabricator-prefab',
     ),
-    'dfd45180' =>
-    array(
-      0 => 'javelin-behavior',
-      1 => 'javelin-dom',
-      2 => 'javelin-util',
-      3 => 'javelin-stratcom',
-      4 => 'phuix-dropdown-menu',
-      5 => 'phuix-action-list-view',
-      6 => 'phuix-action-view',
-      7 => 'phabricator-phtize',
-    ),
     'dfdf9f34' =>
     array(
       0 => 'javelin-behavior',
@@ -1981,6 +1975,16 @@ return array(
       4 => 'javelin-request',
       5 => 'javelin-workflow',
     ),
+    'f3fef818' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-dom',
+      2 => 'javelin-util',
+      3 => 'phuix-dropdown-menu',
+      4 => 'phuix-action-list-view',
+      5 => 'phuix-action-view',
+      6 => 'javelin-workflow',
+    ),
     'f42bb8c6' =>
     array(
       0 => 'javelin-stratcom',
@@ -2073,10 +2077,6 @@ return array(
       10 => 'javelin-behavior-device',
       11 => 'phabricator-keyboard-shortcut',
     ),
-    36903077 =>
-    array(
-      0 => 'aphront-typeahead-control-css',
-    ),
     42126667 =>
     array(
       0 => 'javelin-behavior',

src/view/control/AphrontTokenizerTemplateView.php

@@ -81,7 +81,7 @@ final class AphrontTokenizerTemplateView extends AphrontView {
         phutil_tag(
           'span',
           array(
-            'class' => 'phui-icon-view phui-font-fa bluegrey '.$icon,
+            'class' => 'phui-icon-view phui-font-fa bluetext '.$icon,
           )),
         $value);
     }

webroot/rsrc/css/aphront/tokenizer.css

@@ -80,6 +80,7 @@ a.jx-tokenizer-token:hover {
 .jx-tokenizer-token .phui-icon-view {
   display: inline-block;
   margin: 2px 4px -3px 0;
+  color: {$bluetext};
 }
 
 .tokenizer-result {

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

@@ -165,8 +165,6 @@
   color: #333;
   border-color: #e7e7e7;
   box-shadow: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
 }
 
 .phabricator-main-menu-search input.jx-typeahead-placeholder {
@@ -286,13 +284,14 @@
 .device .phabricator-dark-menu,
 .device .phabricator-dark-menu a.phui-list-item-href {
   color: #fff;
+  -webkit-font-smoothing: antialiased;
 }
 
 .device .phabricator-dark-menu .phui-list-item-type-label {
   text-transform: uppercase;
-  font-size: 12px;
+  font-size: 13px;
   background-color: #151719;
-  padding: 5px 0;
+  padding: 6px 0;
   display: block;
   font-weight: bold;
 }
@@ -301,8 +300,8 @@
   border-width: 1px 0;
   border-style: solid;
   border-color: #34373b transparent #282c2d;
-  background-image: url(/rsrc/image/texture/dark-menu.png);
+  background-color: #272c2f;
-  padding: 4px 0;
+  padding: 4px 0 4px 16px;
   display: block;
 }
 
@@ -387,7 +386,7 @@
 }
 
 .device .phabricator-core-menu-icon {
-  left: 6px;
+  left: 24px;
 }
 
 .phabricator-core-menu-icon {
@@ -402,9 +401,9 @@
   background: #fff;
   top: 38px;
   padding: 2px;
-  border: 1px solid {$lightblueborder};
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
-  border-bottom: 1px solid {$blueborder};
+  border: {$blueborder};
-  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
+  border-radius: 3px;
 }
 
 

webroot/rsrc/css/application/conpherence/menu.css

@@ -99,7 +99,7 @@
 
 .conpherence-menu .conpherence-selected {
   background: {$hovergrey};
-  border-left: 4px solid {$blue};
+  border-left: 4px solid {$sky};
 }
 
 .conpherence-menu .loading {

webroot/rsrc/css/font/phui-font-icon-base.css

@@ -108,7 +108,7 @@
   color: {$darkgreytext};
 }
 .phui-icon-view.bluegrey {
-  color: #7787a6;
+  color: {$bluetext};
 }
 .phui-icon-view.white {
   color: #fff;

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

@@ -6,6 +6,10 @@
   font-size: 12px;
 }
 
+.phuix-dropdown-menu .phabricator-action-list-view {
+  font-size: 13px;
+}
+
 .device .phabricator-action-list-view {
   padding: 4px 0;
   display: none;
@@ -36,7 +40,6 @@
 }
 
 .phabricator-action-view {
-  padding: 1px 0;
   position: relative;
 }
 
@@ -61,7 +64,7 @@
 
 .phabricator-action-view button.phabricator-action-view-item,
 .phabricator-action-view-item {
-  padding: 2px 4px 2px 28px;
+  padding: 3px 4px 3px 28px;
   line-height: 18px;
   display: block;
   text-decoration: none;
@@ -79,7 +82,7 @@
 
 .device-desktop .phabricator-action-view:hover .phabricator-action-view-item {
   text-decoration: none;
-  background-color: {$blue};
+  background-color: {$sky};
   color: #fff;
 }
 
@@ -93,7 +96,16 @@
 }
 
 .phabricator-action-view-selected {
-  background: {$lightblue};
+  border-left: 3px solid {$sky};
+  background: {$hoverblue};
+}
+
+.phabricator-action-view-selected .phabricator-action-view-item {
+  padding-left: 25px;
+}
+
+.phabricator-action-view-selected .phabricator-action-view-icon {
+  left: 6px;
 }
 
 .phabricator-action-view button[disabled] {

webroot/rsrc/css/layout/phabricator-side-menu-view.css

@@ -20,7 +20,7 @@
 .device-desktop .phui-side-menu
  .phui-list-item-selected.phui-list-item-href:hover {
   background-color: {$hovergrey};
-  border-left: 4px solid {$blue};
+  border-left: 4px solid {$sky};
 }
 
 .phabricator-side-menu .phui-list-item-selected .phui-list-item-href {

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

@@ -172,9 +172,11 @@ button.link:hover {
   background: #fff;
   margin-top: -1px;
   padding: 5px 0;
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
   border: 1px solid {$lightgreyborder};
-  border-bottom-color: {$greyborder};
+  border-bottom: 1px solid {$greyborder};
+  border-radius: 3px;
+  margin-bottom: 16px;
 }
 
 .phuix-dropdown-menu a:focus {

webroot/rsrc/css/phui/phui-list.css

@@ -4,11 +4,9 @@
 
 .phui-list-item-header,
 .phui-list-item-header a {
-  color: #9ca5b5;
+  color: {$bluetext};
-  text-transform: uppercase;
   font-weight: bold;
-  font-size: 12px;
+  -webkit-font-smoothing: antialiased;
-  text-shadow: 0 1px 0 rgba(255,255,255,0.90);
 }
 
 /* - Sidenav and Actions -------------------------------------------------------
@@ -22,12 +20,11 @@
 }
 
 .phui-list-sidenav .phui-list-item-type-label .phui-list-item-name {
-  font-size: 12px;
   font-weight: bold;
-  color: #9ca5b5;
+  color: {$bluetext};
-  text-transform: uppercase;
+  padding: 4px 8px 6px 8px;
-  padding: 4px 8px 4px 8px;
   display: block;
+  -webkit-font-smoothing: antialiased;
 }
 
 .phui-list-sidenav .phui-list-item-type-divider {
@@ -60,7 +57,7 @@
   display: block;
   padding: 4px 16px;
   clear: both;
-  color: #333333;
+  color: {$darkgreytext};
   line-height: 18px;
 }
 
@@ -69,7 +66,7 @@
 }
 
 .device-desktop .phui-list-sidenav .phui-list-item-href:hover {
-  background: {$blue};
+  background: {$sky};
   color: white;
   cursor: pointer;
   text-decoration: none;

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

@@ -358,10 +358,5 @@ a.phui-timeline-menu .phui-icon-view {
 }
 
 .phui-timeline-menu.phuix-dropdown-open {
-  background: {$blue};
+  background: {$hovergrey};
-}
-
-.phui-timeline-menu.phuix-dropdown-open .phui-icon-view,
-.device-desktop a.phuix-dropdown-open:hover .phui-icon-view {
-  color: #ffffff;
 }

webroot/rsrc/js/application/differential/behavior-dropdown-menus.js

@@ -97,7 +97,7 @@ JX.behavior('differential-dropdown-menus', function(config) {
       });
     list.addItem(visible_item);
 
-    add_link('fa-files', pht('Browse in Diffusion'), data.diffusionURI);
+    add_link('fa-files-o', pht('Browse in Diffusion'), data.diffusionURI);
     add_link('fa-file-o', pht('View Standalone'), data.standaloneURI);
     add_link('fa-arrow-left', pht('Show Raw File (Left)'), data.leftURI);
     add_link('fa-arrow-right', pht('Show Raw File (Right)'), data.rightURI);

webroot/rsrc/js/application/policy/behavior-policy-control.js

@@ -56,7 +56,7 @@ JX.behavior('policy-control', function(config) {
         var option = config.options[phid];
         var item = new JX.PHUIXActionView()
           .setName(option.name)
-          .setIcon(option.icon + ' bluegrey')
+          .setIcon(option.icon + ' darkgreytext')
           .setHandler(JX.bind(null, function(fn, e) {
             e.prevent();
             menu.close();