Tweak colors of new magic tokens

Summary: Uses shades for token colors, makes function tokens white/blue.

Test Plan:
Used the new tokens in UIExamples, Differential.

{F376191}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -7,8 +7,8 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'bf29d341',
+    'core.pkg.css' => '7d05ad2a',
-    'core.pkg.js' => '347cd64a',
+    'core.pkg.js' => 'a626d14c',
     'darkconsole.pkg.js' => '8ab24e01',
     'differential.pkg.css' => '3500921f',
     'differential.pkg.js' => 'c0506961',
@@ -27,7 +27,7 @@ return array(
     'rsrc/css/aphront/panel-view.css' => '8427b78d',
     'rsrc/css/aphront/phabricator-nav-view.css' => '7aeaf435',
     'rsrc/css/aphront/table-view.css' => '59e2c0f8',
-    'rsrc/css/aphront/tokenizer.css' => 'c10c061e',
+    'rsrc/css/aphront/tokenizer.css' => '86a13f7f',
     'rsrc/css/aphront/tooltip.css' => '7672b60f',
     'rsrc/css/aphront/two-column.css' => '16ab3ad2',
     'rsrc/css/aphront/typeahead-browse.css' => 'efe293a0',
@@ -147,7 +147,7 @@ return array(
     'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
     'rsrc/css/phui/phui-spacing.css' => '042804d6',
     'rsrc/css/phui/phui-status.css' => '888cedb8',
-    'rsrc/css/phui/phui-tag-view.css' => 'ea469f3a',
+    'rsrc/css/phui/phui-tag-view.css' => '402691cc',
     'rsrc/css/phui/phui-text.css' => 'cf019f54',
     'rsrc/css/phui/phui-timeline-view.css' => 'b0fbc4d7',
     'rsrc/css/phui/phui-workboard-view.css' => '3279cbbf',
@@ -450,7 +450,7 @@ return array(
     'rsrc/js/core/KeyboardShortcutManager.js' => 'c1700f6f',
     'rsrc/js/core/MultirowRowManager.js' => 'b5d57730',
     'rsrc/js/core/Notification.js' => '0c6946e7',
-    'rsrc/js/core/Prefab.js' => '4c292cc5',
+    'rsrc/js/core/Prefab.js' => 'b972bdcd',
     'rsrc/js/core/ShapedRequest.js' => '7cbe244b',
     'rsrc/js/core/TextAreaUtils.js' => '5c93c52c',
     'rsrc/js/core/Title.js' => 'df5e11d2',
@@ -510,7 +510,7 @@ return array(
     'aphront-pager-view-css' => '2e3539af',
     'aphront-panel-view-css' => '8427b78d',
     'aphront-table-view-css' => '59e2c0f8',
-    'aphront-tokenizer-control-css' => 'c10c061e',
+    'aphront-tokenizer-control-css' => '86a13f7f',
     'aphront-tooltip-css' => '7672b60f',
     'aphront-two-column-view-css' => '16ab3ad2',
     'aphront-typeahead-control-css' => '0e403212',
@@ -744,7 +744,7 @@ return array(
     'phabricator-notification-menu-css' => '3c9d8aa1',
     'phabricator-object-selector-css' => '029a133d',
     'phabricator-phtize' => 'd254d646',
-    'phabricator-prefab' => '4c292cc5',
+    'phabricator-prefab' => 'b972bdcd',
     'phabricator-profile-css' => '1a20dcbf',
     'phabricator-remarkup-css' => 'e10512ff',
     'phabricator-search-results-css' => '15c71110',
@@ -806,7 +806,7 @@ return array(
     'phui-remarkup-preview-css' => '19ad512b',
     'phui-spacing-css' => '042804d6',
     'phui-status-list-view-css' => '888cedb8',
-    'phui-tag-view-css' => 'ea469f3a',
+    'phui-tag-view-css' => '402691cc',
     'phui-text-css' => 'cf019f54',
     'phui-timeline-view-css' => 'b0fbc4d7',
     'phui-workboard-view-css' => '3279cbbf',
@@ -1158,18 +1158,6 @@ return array(
     '4a2430d7' => array(
       'phui-fontkit-css',
     ),
-    '4c292cc5' => array(
-      'javelin-install',
-      'javelin-util',
-      'javelin-dom',
-      'javelin-typeahead',
-      'javelin-tokenizer',
-      'javelin-typeahead-preloaded-source',
-      'javelin-typeahead-ondemand-source',
-      'javelin-dom',
-      'javelin-stratcom',
-      'javelin-util',
-    ),
     '4d94d9c3' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1481,6 +1469,10 @@ return array(
       'phabricator-tooltip',
       'changeset-view-manager',
     ),
+    '86a13f7f' => array(
+      'aphront-typeahead-control-css',
+      'phui-tag-view-css',
+    ),
     '87cb6b51' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1719,6 +1711,18 @@ return array(
       'javelin-dom',
       'javelin-util',
     ),
+    'b972bdcd' => array(
+      'javelin-install',
+      'javelin-util',
+      'javelin-dom',
+      'javelin-typeahead',
+      'javelin-tokenizer',
+      'javelin-typeahead-preloaded-source',
+      'javelin-typeahead-ondemand-source',
+      'javelin-dom',
+      'javelin-stratcom',
+      'javelin-util',
+    ),
     'bba9eedf' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1764,9 +1768,6 @@ return array(
       'javelin-util',
       'phabricator-shaped-request',
     ),
-    'c10c061e' => array(
-      'aphront-typeahead-control-css',
-    ),
     'c1700f6f' => array(
       'javelin-install',
       'javelin-util',

webroot/rsrc/css/aphront/tokenizer.css

@@ -1,6 +1,7 @@
 /**
  * @provides aphront-tokenizer-control-css
  * @requires aphront-typeahead-control-css
+ * @requires phui-tag-view-css
  */
 
 body div.jx-tokenizer {
@@ -52,6 +53,7 @@ body input.jx-typeahead-placeholder {
 a.jx-tokenizer-x {
   margin-left: 4px;
   color: {$bluetext};
+  float: right;
 }
 
 a.jx-tokenizer-x:hover {
@@ -60,57 +62,50 @@ a.jx-tokenizer-x:hover {
 }
 
 a.jx-tokenizer-token {
-  padding: 2px 6px 3px;
+  padding: 2px 6px;
   border:  1px solid {$lightblueborder};
   margin: 3px 2px 0 4px;
-  background: #dee7f8;
+  background-color: {$sh-bluebackground};
   float: left;
   cursor: pointer;
   border-radius: 3px;
-  color: {$darkbluetext};
+  color: {$sh-bluetext};
   min-height: 16px;
 }
 
 a.jx-tokenizer-token:hover {
   text-decoration: none;
-  border-color: {$blueborder};
+  border-color: {$sh-blueborder};
-  background: #CDD9F0;
 }
 
 .jx-tokenizer-token .phui-icon-view {
   display: inline-block;
   margin: 2px 4px -3px 0;
-  color: {$bluetext};
+  color: {$sh-blueicon};
 }
 
 a.jx-tokenizer-token-function {
-  border-color: {$sh-lightyellowborder};
+  border-color: {$sh-lightgreyborder};
-  background: {$sh-yellowbackground};
+  background: #fff;
-  color: {$sh-yellowtext};
 }
 
 a.jx-tokenizer-token-function:hover {
-  border-color: {$sh-yellowborder};
+  background: #fff;
-  background: {$lightyellow};
-}
-
-.jx-tokenizer-token-function .phui-icon-view {
-  color: {$sh-yellowicon};
 }
 
 a.jx-tokenizer-token-disabled {
-  border-color: {$sh-lightgreyborder};
+  background-color: {$sh-disabledbackground};
-  background: {$sh-greybackground};
+  border-color: {$sh-lightdisabledborder};
-  color: {$sh-greytext};
+  color: {$sh-disabledtext};
 }
 
 a.jx-tokenizer-token-disabled:hover {
-  border-color: {$sh-greyborder};
+  border-color: {$sh-disabledborder};
-  background: {$greybackground};
+  background-color: {$sh-disabledbackground};
 }
 
 .jx-tokenizer-token-disabled .phui-icon-view {
-  color: {$sh-greyicon};
+  color: {$sh-disabledicon};
 }
 
 a.jx-tokenizer-token-invalid {
@@ -121,7 +116,7 @@ a.jx-tokenizer-token-invalid {
 
 a.jx-tokenizer-token-invalid:hover {
   border-color: {$sh-redborder};
-  background: {$lightred};
+  background: {$sh-redbackground};
 }
 
 .jx-tokenizer-token-invalid .phui-icon-view {

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

@@ -140,6 +140,20 @@ a.phui-tag-view:hover
   border-color: #d7d7d7;
 }
 
+.phabricator-handle-tag-list-item + .phabricator-handle-tag-list-item {
+  margin-top: 4px;
+}
+
+.phui-object-item .phabricator-handle-tag-list {
+  display: inline;
+}
+
+.phui-object-item .phabricator-handle-tag-list-item {
+  display: inline;
+  margin: 0 4px 2px 0;
+}
+
+
 /* - Shaded Tags ---------------------------------------------------------------
 
   For object representation inside text areas and lists.
@@ -162,133 +176,190 @@ a.phui-tag-view:hover
   font-size: 12px;
 }
 
-.phui-tag-shade-red .phui-tag-core {
+/* - Red -------------------------------------------------------------------- */
-  background-color: {$sh-redbackground};
+
+.phui-tag-shade-red .phui-tag-core,
+.jx-tokenizer-token.red {
+  background: {$sh-redbackground};
   border-color: {$sh-lightredborder};
   color: {$sh-redtext};
 }
 
-.phui-tag-shade-red .phui-icon-view {
+.phui-tag-shade-red .phui-icon-view,
+.jx-tokenizer-token.red .phui-icon-view,
+.jx-tokenizer-token.red .jx-tokenizer-x {
   color: {$sh-redicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-red .phui-tag-core {
+a.phui-tag-view:hover.phui-tag-shade-red .phui-tag-core,
+.jx-tokenizer-token.red:hover {
   border-color: {$sh-redborder};
 }
 
-.phui-tag-shade-orange .phui-tag-core {
+/* - Orange ----------------------------------------------------------------- */
-  background-color: {$sh-orangebackground};
+
+.phui-tag-shade-orange .phui-tag-core,
+.jx-tokenizer-token.orange {
+  background: {$sh-orangebackground};
   border-color: {$sh-lightorangeborder};
   color: {$sh-orangetext};
 }
 
-.phui-tag-shade-orange .phui-icon-view {
+.phui-tag-shade-orange .phui-icon-view,
+.jx-tokenizer-token.orange .phui-icon-view,
+.jx-tokenizer-token.orange .jx-tokenizer-x {
   color: {$sh-orangeicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-orange .phui-tag-core {
+a.phui-tag-view:hover.phui-tag-shade-orange .phui-tag-core,
+.jx-tokenizer-token.orange:hover {
   border-color: {$sh-orangeborder};
 }
 
-.phui-tag-shade-yellow .phui-tag-core {
+/* - Yellow ----------------------------------------------------------------- */
-  background-color: {$sh-yellowbackground};
+
+.phui-tag-shade-yellow .phui-tag-core,
+.jx-tokenizer-token.yellow {
+  background: {$sh-yellowbackground};
   border-color: {$sh-lightyellowborder};
   color: {$sh-yellowtext};
 }
 
-.phui-tag-shade-yellow .phui-icon-view {
+.phui-tag-shade-yellow .phui-icon-view,
+.jx-tokenizer-token.yellow .phui-icon-view,
+.jx-tokenizer-token.yellow .jx-tokenizer-x {
   color: {$sh-yellowicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-yellow .phui-tag-core {
+a.phui-tag-view:hover.phui-tag-shade-yellow .phui-tag-core,
+.jx-tokenizer-token.yellow:hover {
   border-color: {$sh-yellowborder};
 }
 
-.phui-tag-shade-blue .phui-tag-core {
+/* - Blue ------------------------------------------------------------------- */
-  background-color: {$sh-bluebackground};
+
+.phui-tag-shade-blue .phui-tag-core,
+.jx-tokenizer-token.blue {
+  background: {$sh-bluebackground};
   border-color: {$sh-lightblueborder};
   color: {$sh-bluetext};
 }
 
-.phui-tag-shade-blue .phui-icon-view {
+.phui-tag-shade-blue .phui-icon-view,
+.jx-tokenizer-token.blue .phui-icon-view,
+.jx-tokenizer-token.blue .jx-tokenizer-x {
   color: {$sh-blueicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-blue .phui-tag-core {
+a.phui-tag-view:hover.phui-tag-shade-blue .phui-tag-core,
+.jx-tokenizer-token.blue:hover {
   border-color: {$sh-blueborder};
 }
 
-.phui-tag-shade-indigo .phui-tag-core {
+/* - Indigo ----------------------------------------------------------------- */
-  background-color: {$sh-indigobackground};
+
+.phui-tag-shade-indigo .phui-tag-core,
+.jx-tokenizer-token.indigo {
+  background: {$sh-indigobackground};
   border-color: {$sh-lightindigoborder};
   color: {$sh-indigotext};
 }
 
-.phui-tag-shade-indigo .phui-icon-view {
+.phui-tag-shade-indigo .phui-icon-view,
+.jx-tokenizer-token.indigo .phui-icon-view,
+.jx-tokenizer-token.indigo .jx-tokenizer-x {
   color: {$sh-indigoicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-indigo .phui-tag-core {
+a.phui-tag-view:hover.phui-tag-shade-indigo .phui-tag-core,
+.jx-tokenizer-token.indigo:hover {
   border-color: {$sh-indigoborder};
 }
 
-.phui-tag-shade-green .phui-tag-core {
+/* - Green ------------------------------------------------------------------ */
-  background-color: {$sh-greenbackground};
+
+.phui-tag-shade-green .phui-tag-core,
+.jx-tokenizer-token.green {
+  background: {$sh-greenbackground};
   border-color: {$sh-lightgreenborder};
   color: {$sh-greentext};
 }
 
-.phui-tag-shade-green .phui-icon-view {
+.phui-tag-shade-green .phui-icon-view,
+.jx-tokenizer-token.green .phui-icon-view,
+.jx-tokenizer-token.green .jx-tokenizer-x {
   color: {$sh-greenicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-green .phui-tag-core {
+a.phui-tag-view:hover.phui-tag-shade-green .phui-tag-core,
+.jx-tokenizer-token.green:hover {
   border-color: {$sh-greenborder};
 }
 
-.phui-tag-shade-violet .phui-tag-core {
+/* - Violet ----------------------------------------------------------------- */
-  background-color: {$sh-violetbackground};
+
+.phui-tag-shade-violet .phui-tag-core,
+.jx-tokenizer-token.violet {
+  background: {$sh-violetbackground};
   border-color: {$sh-lightvioletborder};
   color: {$sh-violettext};
 }
 
-.phui-tag-shade-violet .phui-icon-view {
+.phui-tag-shade-violet .phui-icon-view,
+.jx-tokenizer-token.violet .phui-icon-view,
+.jx-tokenizer-token.violet .jx-tokenizer-x {
   color: {$sh-violeticon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-violet .phui-tag-core {
+a.phui-tag-view:hover.phui-tag-shade-violet .phui-tag-core,
+.jx-tokenizer-token.violet:hover {
   border-color: {$sh-violetborder};
 }
 
-.phui-tag-shade-pink .phui-tag-core {
+/* - Pink ------------------------------------------------------------------- */
-  background-color: {$sh-pinkbackground};
+
+.phui-tag-shade-pink .phui-tag-core,
+.jx-tokenizer-token.pink {
+  background: {$sh-pinkbackground};
   border-color: {$sh-lightpinkborder};
   color: {$sh-pinktext};
 }
 
-.phui-tag-shade-pink .phui-icon-view {
+.phui-tag-shade-pink .phui-icon-view,
+.jx-tokenizer-token.pink .phui-icon-view,
+.jx-tokenizer-token.pink .jx-tokenizer-x {
   color: {$sh-pinkicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-pink .phui-tag-core {
+a.phui-tag-view:hover.phui-tag-shade-pink .phui-tag-core,
+.jx-tokenizer-token.pink:hover {
   border-color: {$sh-pinkborder};
 }
 
-.phui-tag-shade-grey .phui-tag-core {
+/* - Grey ------------------------------------------------------------------- */
-  background-color: {$sh-greybackground};
+
+.phui-tag-shade-grey .phui-tag-core,
+.jx-tokenizer-token.grey {
+  background: {$sh-greybackground};
   border-color: {$sh-lightgreyborder};
   color: {$sh-greytext};
 }
 
-.phui-tag-shade-grey .phui-icon-view {
+.phui-tag-shade-grey .phui-icon-view,
+.jx-tokenizer-token.grey .phui-icon-view,
+.jx-tokenizer-token.grey .jx-tokenizer-x {
   color: {$sh-greyicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core {
+a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core,
+.jx-tokenizer-token.grey:hover {
   border-color: {$sh-greyborder};
 }
 
-.phui-tag-shade-checkered .phui-tag-core {
+/* - Checkered -------------------------------------------------------------- */
+
+.phui-tag-shade-checkered .phui-tag-core,
+.jx-tokenizer-token.checkered {
   background: url(/rsrc/image/checker_lighter.png);
   border-style: dashed;
   border-color: {$sh-greyborder};
@@ -296,15 +367,20 @@ a.phui-tag-view:hover.phui-tag-shade-grey .phui-tag-core {
   text-shadow: 1px 1px #fff;
 }
 
-.phui-tag-shade-checkered .phui-icon-view {
+.phui-tag-shade-checkered .phui-icon-view,
+.jx-tokenizer-token.checkered .phui-icon-view,
+.jx-tokenizer-token.checkered .jx-tokenizer-x {
   color: {$sh-greyicon};
 }
 
-a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core {
+a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core,
+.jx-tokenizer-token.checkered:hover {
   border-style: solid;
   border-color: {$sh-greyborder};
 }
 
+/* - Disabled --------------------------------------------------------------- */
+
 .phui-tag-shade-disabled .phui-tag-core {
   background-color: {$sh-disabledbackground};
   border-color: {$sh-lightdisabledborder};
@@ -318,16 +394,3 @@ a.phui-tag-view:hover.phui-tag-shade-checkered .phui-tag-core {
 a.phui-tag-view:hover.phui-tag-shade-disabled .phui-tag-core {
   border-color: {$sh-disabledborder};
 }
-
-.phabricator-handle-tag-list-item + .phabricator-handle-tag-list-item {
-  margin-top: 4px;
-}
-
-.phui-object-item .phabricator-handle-tag-list {
-  display: inline;
-}
-
-.phui-object-item .phabricator-handle-tag-list-item {
-  display: inline;
-  margin: 0 4px 2px 0;
-}