Add Pebkac app icon, 2x Tokens

Summary: Adds a new app icon, 2x Tokens for Retina pixelness.

Test Plan: Photoshop

Reviewers: epriestley, btrahan

Reviewed By: btrahan

CC: Korvin, epriestley, aran

Maniphest Tasks: T4044

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

resources/sprite/manifest/apps-large.json

@@ -621,6 +621,26 @@
       "rule" : ".apps-paste-white-large",
       "hash" : "94cf3ee0f2b15b82ad8f62cb9399ecad"
     },
+    "apps-pebkac-blue-large"          : {
+      "name" : "apps-pebkac-blue-large",
+      "rule" : ".apps-pebkac-blue-large, .phabricator-crumb-view:hover .apps-pebkac-dark-large",
+      "hash" : "7a1010119d4589609f364c603cd03d1b"
+    },
+    "apps-pebkac-dark-large"          : {
+      "name" : "apps-pebkac-dark-large",
+      "rule" : ".apps-pebkac-dark-large",
+      "hash" : "617142b451eec10fe60246eec52a99d0"
+    },
+    "apps-pebkac-light-large"         : {
+      "name" : "apps-pebkac-light-large",
+      "rule" : ".apps-pebkac-light-large",
+      "hash" : "2319b657d0fe3df60b234e8961c4869e"
+    },
+    "apps-pebkac-white-large"         : {
+      "name" : "apps-pebkac-white-large",
+      "rule" : ".apps-pebkac-white-large",
+      "hash" : "25eb13ac78cf507b6ec66016cd477cfe"
+    },
     "apps-people-blue-large"          : {
       "name" : "apps-people-blue-large",
       "rule" : ".apps-people-blue-large, .phabricator-crumb-view:hover .apps-people-dark-large",

resources/sprite/manifest/apps.json

@@ -311,6 +311,16 @@
       "rule" : ".apps-paste-white",
       "hash" : "ed5ec1ee39cc2a01f568f91c72141bfb"
     },
+    "apps-pebkac-dark"          : {
+      "name" : "apps-pebkac-dark",
+      "rule" : ".apps-pebkac-dark",
+      "hash" : "4adb4a8f0a8c5bc5462bb806ceafc63f"
+    },
+    "apps-pebkac-white"         : {
+      "name" : "apps-pebkac-white",
+      "rule" : ".apps-pebkac-white",
+      "hash" : "35438c7a295df21aa2fa4771a5c3c986"
+    },
     "apps-people-dark"          : {
       "name" : "apps-people-dark",
       "rule" : ".apps-people-dark",

resources/sprite/manifest/tokens.json

@@ -4,87 +4,88 @@
     "tokens-coin-1"  : {
       "name" : "tokens-coin-1",
       "rule" : ".tokens-coin-1",
-      "hash" : "144fe1689d96f1e32102c6963e38d419"
+      "hash" : "0ec4c7309f8191972340c6789a6b5691"
     },
     "tokens-coin-2"  : {
       "name" : "tokens-coin-2",
       "rule" : ".tokens-coin-2",
-      "hash" : "fb39ebba861cfd0e1770f0fefc617a20"
+      "hash" : "4c85dd4b0c388cfefe0075b7056384fd"
     },
     "tokens-coin-3"  : {
       "name" : "tokens-coin-3",
       "rule" : ".tokens-coin-3",
-      "hash" : "f67d4c69a97262b53db38214274fbade"
+      "hash" : "a2e3770894539957e436a7d5a2be4703"
     },
     "tokens-coin-4"  : {
       "name" : "tokens-coin-4",
       "rule" : ".tokens-coin-4",
-      "hash" : "871f3130c0a00489454acdd1f1b14406"
+      "hash" : "856cb87c5590975c0a25177ca2fd2a8f"
     },
     "tokens-heart-1" : {
       "name" : "tokens-heart-1",
       "rule" : ".tokens-heart-1",
-      "hash" : "312c32354b082fd54eb1611a114b8c89"
+      "hash" : "370228318750a79d93848bdf686444e5"
     },
     "tokens-heart-2" : {
       "name" : "tokens-heart-2",
       "rule" : ".tokens-heart-2",
-      "hash" : "f23c6e814bc0c5140a6ec65d9522a4b2"
+      "hash" : "197144d3987308aaef311e29e3503707"
     },
     "tokens-like-1"  : {
       "name" : "tokens-like-1",
       "rule" : ".tokens-like-1",
-      "hash" : "810d7ff43284c9611dfc9d81b5010889"
+      "hash" : "3c5271d6678ad6d217a47779488c9918"
     },
     "tokens-like-2"  : {
       "name" : "tokens-like-2",
       "rule" : ".tokens-like-2",
-      "hash" : "8d1f0de719ce3d9c126a698bc41bbb5b"
+      "hash" : "b009176baadc3e71786ac24ce8229c5a"
     },
     "tokens-medal-1" : {
       "name" : "tokens-medal-1",
       "rule" : ".tokens-medal-1",
-      "hash" : "f565655bd55c8a62711295aa4d76d5c3"
+      "hash" : "cd897529c6834917da062589ae1a69ae"
     },
     "tokens-medal-2" : {
       "name" : "tokens-medal-2",
       "rule" : ".tokens-medal-2",
-      "hash" : "3aa60b71c15cb3f9c88c02572ce5dbd8"
+      "hash" : "d56f106b508c33bca6c0a33e2544d0d6"
     },
     "tokens-medal-3" : {
       "name" : "tokens-medal-3",
       "rule" : ".tokens-medal-3",
-      "hash" : "3e0edafb5b26b9f88019031b7738cf85"
+      "hash" : "d4e7c06cfd39d932a35aa25841d5008c"
     },
     "tokens-medal-4" : {
       "name" : "tokens-medal-4",
       "rule" : ".tokens-medal-4",
-      "hash" : "20a31832833ba9b0ace59235bc39270b"
+      "hash" : "36f596bd2615e521542ac10a771d6902"
     },
     "tokens-misc-1"  : {
       "name" : "tokens-misc-1",
       "rule" : ".tokens-misc-1",
-      "hash" : "a35a19550f5786a255dd5247a5877063"
+      "hash" : "8f7575c0176570b30aaffb801bcb2c13"
     },
     "tokens-misc-2"  : {
       "name" : "tokens-misc-2",
       "rule" : ".tokens-misc-2",
-      "hash" : "33a10020a1f62d3a103cefe22979d0e9"
+      "hash" : "5c61bc36fd0b5545ebf31b57c6ab5185"
     },
     "tokens-misc-3"  : {
       "name" : "tokens-misc-3",
       "rule" : ".tokens-misc-3",
-      "hash" : "ba1e7f3db3b0b58b93b92409b38fcf21"
+      "hash" : "97a383def5eb847077b2b26a1a441c0e"
     },
     "tokens-misc-4"  : {
       "name" : "tokens-misc-4",
       "rule" : ".tokens-misc-4",
-      "hash" : "8084934d0cdea6a07bb84c5f6c724ff5"
+      "hash" : "229c8a28e3b6bb883effbb62689e190f"
     }
   },
   "scales"  : [
-    1
+    1,
+    2
   ],
-  "header"  : "\/**\n * @provides sprite-tokens-css\n * @generated\n *\/\n\n.sprite-tokens {\n  background-image: url(\/rsrc\/image\/sprite-tokens.png);\n  background-repeat: no-repeat;\n}\n\n\n",
+  "header"  : "\/**\n * @provides sprite-tokens-css\n * @generated\n *\/\n\n.sprite-tokens {\n  background-image: url(\/rsrc\/image\/sprite-tokens.png);\n  background-repeat: no-repeat;\n}\n\n@media\nonly screen and (min-device-pixel-ratio: 1.5),\nonly screen and (-webkit-min-device-pixel-ratio: 1.5) {\n  .sprite-tokens {\n    background-image: url(\/rsrc\/image\/sprite-tokens-X2.png);\n    background-size: {X}px {Y}px;\n  }\n}\n",
   "type"    : "standard"
 }

src/__celerity_resource_map__.php

@@ -569,22 +569,22 @@ celerity_register_resource_map(array(
   ),
   '/rsrc/image/sprite-apps-X2.png' =>
   array(
-    'hash' => 'c15f920572ee2acb51881039f53ab1cd',
-    'uri' => '/res/c15f9205/rsrc/image/sprite-apps-X2.png',
+    'hash' => '68bbb3f409d0eb42d65dd94769813044',
+    'uri' => '/res/68bbb3f4/rsrc/image/sprite-apps-X2.png',
     'disk' => '/rsrc/image/sprite-apps-X2.png',
     'type' => 'png',
   ),
   '/rsrc/image/sprite-apps-large-X2.png' =>
   array(
-    'hash' => '0d03d3aa517de750c2765f6d85af63fb',
-    'uri' => '/res/0d03d3aa/rsrc/image/sprite-apps-large-X2.png',
+    'hash' => '15368afbac0e1402c20f99f3166cdb11',
+    'uri' => '/res/15368afb/rsrc/image/sprite-apps-large-X2.png',
     'disk' => '/rsrc/image/sprite-apps-large-X2.png',
     'type' => 'png',
   ),
   '/rsrc/image/sprite-apps-large.png' =>
   array(
-    'hash' => 'e7d84eb34053b30a9f73eddddb58adab',
-    'uri' => '/res/e7d84eb3/rsrc/image/sprite-apps-large.png',
+    'hash' => 'b1f1de55803cf22eb3beb391fff17b04',
+    'uri' => '/res/b1f1de55/rsrc/image/sprite-apps-large.png',
     'disk' => '/rsrc/image/sprite-apps-large.png',
     'type' => 'png',
   ),
@@ -597,8 +597,8 @@ celerity_register_resource_map(array(
   ),
   '/rsrc/image/sprite-apps.png' =>
   array(
-    'hash' => 'fd67e1346117ee95b1327a2b92472525',
-    'uri' => '/res/fd67e134/rsrc/image/sprite-apps.png',
+    'hash' => 'bf7feaae848d44a461e63123c28e402f',
+    'uri' => '/res/bf7feaae/rsrc/image/sprite-apps.png',
     'disk' => '/rsrc/image/sprite-apps.png',
     'type' => 'png',
   ),
@@ -728,6 +728,13 @@ celerity_register_resource_map(array(
     'disk' => '/rsrc/image/sprite-status.png',
     'type' => 'png',
   ),
+  '/rsrc/image/sprite-tokens-X2.png' =>
+  array(
+    'hash' => '8b822687e6b1088cbb5ea89cf6d351a4',
+    'uri' => '/res/8b822687/rsrc/image/sprite-tokens-X2.png',
+    'disk' => '/rsrc/image/sprite-tokens-X2.png',
+    'type' => 'png',
+  ),
   '/rsrc/image/sprite-tokens.png' =>
   array(
     'hash' => '67c46fd75c885b76ecbfe46e71a476cc',
@@ -4176,7 +4183,7 @@ celerity_register_resource_map(array(
   ),
   'sprite-apps-css' =>
   array(
-    'uri' => '/res/49414f73/rsrc/css/sprite-apps.css',
+    'uri' => '/res/37c55e75/rsrc/css/sprite-apps.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -4185,7 +4192,7 @@ celerity_register_resource_map(array(
   ),
   'sprite-apps-large-css' =>
   array(
-    'uri' => '/res/9b28c951/rsrc/css/sprite-apps-large.css',
+    'uri' => '/res/8ddded36/rsrc/css/sprite-apps-large.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -4293,7 +4300,7 @@ celerity_register_resource_map(array(
   ),
   'sprite-tokens-css' =>
   array(
-    'uri' => '/res/edb4e341/rsrc/css/sprite-tokens.css',
+    'uri' => '/res/eeca7cf1/rsrc/css/sprite-tokens.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -4321,7 +4328,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    'cbf6df8c' =>
+    'f350af41' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -4370,7 +4377,7 @@ celerity_register_resource_map(array(
         41 => 'phabricator-tag-view-css',
         42 => 'phui-list-view-css',
       ),
-      'uri' => '/res/pkg/cbf6df8c/core.pkg.css',
+      'uri' => '/res/pkg/f350af41/core.pkg.css',
       'type' => 'css',
     ),
     '2c1dba03' =>
@@ -4562,15 +4569,15 @@ celerity_register_resource_map(array(
   ),
   'reverse' =>
   array(
-    'aphront-dialog-view-css' => 'cbf6df8c',
-    'aphront-error-view-css' => 'cbf6df8c',
-    'aphront-list-filter-view-css' => 'cbf6df8c',
-    'aphront-pager-view-css' => 'cbf6df8c',
-    'aphront-panel-view-css' => 'cbf6df8c',
-    'aphront-table-view-css' => 'cbf6df8c',
-    'aphront-tokenizer-control-css' => 'cbf6df8c',
-    'aphront-tooltip-css' => 'cbf6df8c',
-    'aphront-typeahead-control-css' => 'cbf6df8c',
+    'aphront-dialog-view-css' => 'f350af41',
+    'aphront-error-view-css' => 'f350af41',
+    'aphront-list-filter-view-css' => 'f350af41',
+    'aphront-pager-view-css' => 'f350af41',
+    'aphront-panel-view-css' => 'f350af41',
+    'aphront-table-view-css' => 'f350af41',
+    'aphront-tokenizer-control-css' => 'f350af41',
+    'aphront-tooltip-css' => 'f350af41',
+    'aphront-typeahead-control-css' => 'f350af41',
     'differential-changeset-view-css' => '1084b12b',
     'differential-core-view-css' => '1084b12b',
     'differential-inline-comment-editor' => '5e9e5c4e',
@@ -4584,7 +4591,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => '1084b12b',
     'diffusion-commit-view-css' => '7aa115b4',
     'diffusion-icons-css' => '7aa115b4',
-    'global-drag-and-drop-css' => 'cbf6df8c',
+    'global-drag-and-drop-css' => 'f350af41',
     'inline-comment-summary-css' => '1084b12b',
     'javelin-aphlict' => '2c1dba03',
     'javelin-behavior' => '3e3be199',
@@ -4659,56 +4666,56 @@ celerity_register_resource_map(array(
     'javelin-util' => '3e3be199',
     'javelin-vector' => '3e3be199',
     'javelin-workflow' => '3e3be199',
-    'lightbox-attachment-css' => 'cbf6df8c',
+    'lightbox-attachment-css' => 'f350af41',
     'maniphest-task-summary-css' => '49898640',
-    'phabricator-action-list-view-css' => 'cbf6df8c',
-    'phabricator-application-launch-view-css' => 'cbf6df8c',
+    'phabricator-action-list-view-css' => 'f350af41',
+    'phabricator-application-launch-view-css' => 'f350af41',
     'phabricator-busy' => '2c1dba03',
     'phabricator-content-source-view-css' => '1084b12b',
-    'phabricator-core-css' => 'cbf6df8c',
-    'phabricator-crumbs-view-css' => 'cbf6df8c',
+    'phabricator-core-css' => 'f350af41',
+    'phabricator-crumbs-view-css' => 'f350af41',
     'phabricator-drag-and-drop-file-upload' => '5e9e5c4e',
     'phabricator-dropdown-menu' => '2c1dba03',
     'phabricator-file-upload' => '2c1dba03',
-    'phabricator-filetree-view-css' => 'cbf6df8c',
-    'phabricator-flag-css' => 'cbf6df8c',
+    'phabricator-filetree-view-css' => 'f350af41',
+    'phabricator-flag-css' => 'f350af41',
     'phabricator-hovercard' => '2c1dba03',
-    'phabricator-jump-nav' => 'cbf6df8c',
+    'phabricator-jump-nav' => 'f350af41',
     'phabricator-keyboard-shortcut' => '2c1dba03',
     'phabricator-keyboard-shortcut-manager' => '2c1dba03',
-    'phabricator-main-menu-view' => 'cbf6df8c',
+    'phabricator-main-menu-view' => 'f350af41',
     'phabricator-menu-item' => '2c1dba03',
-    'phabricator-nav-view-css' => 'cbf6df8c',
+    'phabricator-nav-view-css' => 'f350af41',
     'phabricator-notification' => '2c1dba03',
-    'phabricator-notification-css' => 'cbf6df8c',
-    'phabricator-notification-menu-css' => 'cbf6df8c',
+    'phabricator-notification-css' => 'f350af41',
+    'phabricator-notification-menu-css' => 'f350af41',
     'phabricator-object-selector-css' => '1084b12b',
     'phabricator-phtize' => '2c1dba03',
     'phabricator-prefab' => '2c1dba03',
     'phabricator-project-tag-css' => '49898640',
-    'phabricator-remarkup-css' => 'cbf6df8c',
+    'phabricator-remarkup-css' => 'f350af41',
     'phabricator-shaped-request' => '5e9e5c4e',
-    'phabricator-side-menu-view-css' => 'cbf6df8c',
-    'phabricator-standard-page-view' => 'cbf6df8c',
-    'phabricator-tag-view-css' => 'cbf6df8c',
+    'phabricator-side-menu-view-css' => 'f350af41',
+    'phabricator-standard-page-view' => 'f350af41',
+    'phabricator-tag-view-css' => 'f350af41',
     'phabricator-textareautils' => '2c1dba03',
     'phabricator-tooltip' => '2c1dba03',
-    'phabricator-transaction-view-css' => 'cbf6df8c',
-    'phabricator-zindex-css' => 'cbf6df8c',
-    'phui-button-css' => 'cbf6df8c',
-    'phui-form-css' => 'cbf6df8c',
-    'phui-form-view-css' => 'cbf6df8c',
-    'phui-header-view-css' => 'cbf6df8c',
-    'phui-icon-view-css' => 'cbf6df8c',
-    'phui-list-view-css' => 'cbf6df8c',
-    'phui-object-item-list-view-css' => 'cbf6df8c',
-    'phui-property-list-view-css' => 'cbf6df8c',
-    'phui-spacing-css' => 'cbf6df8c',
-    'sprite-apps-large-css' => 'cbf6df8c',
-    'sprite-gradient-css' => 'cbf6df8c',
-    'sprite-icons-css' => 'cbf6df8c',
-    'sprite-menu-css' => 'cbf6df8c',
-    'sprite-status-css' => 'cbf6df8c',
-    'syntax-highlighting-css' => 'cbf6df8c',
+    'phabricator-transaction-view-css' => 'f350af41',
+    'phabricator-zindex-css' => 'f350af41',
+    'phui-button-css' => 'f350af41',
+    'phui-form-css' => 'f350af41',
+    'phui-form-view-css' => 'f350af41',
+    'phui-header-view-css' => 'f350af41',
+    'phui-icon-view-css' => 'f350af41',
+    'phui-list-view-css' => 'f350af41',
+    'phui-object-item-list-view-css' => 'f350af41',
+    'phui-property-list-view-css' => 'f350af41',
+    'phui-spacing-css' => 'f350af41',
+    'sprite-apps-large-css' => 'f350af41',
+    'sprite-gradient-css' => 'f350af41',
+    'sprite-icons-css' => 'f350af41',
+    'sprite-menu-css' => 'f350af41',
+    'sprite-status-css' => 'f350af41',
+    'syntax-highlighting-css' => 'f350af41',
   ),
 ));

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -312,24 +312,30 @@ final class CeleritySpriteGenerator {
   }
 
   public function buildTokenSheet() {
-    $tokens = $this->getDirectoryList('tokens_1x');
-
+    $icons = $this->getDirectoryList('tokens_1x');
+    $scales = array(
+      '1x' => 1,
+      '2x' => 2,
+    );
     $template = id(new PhutilSprite())
       ->setSourceSize(16, 16);
 
     $sprites = array();
-    foreach ($tokens as $token) {
-      $path = $this->getPath('tokens_1x/'.$token.'.png');
-
+    $prefix = 'tokens_';
+    foreach ($icons as $icon) {
       $sprite = id(clone $template)
-        ->setName('tokens-'.$token)
-        ->setTargetCSS('.tokens-'.$token)
-        ->setSourceFile($path, 1);
+        ->setName('tokens-'.$icon)
+        ->setTargetCSS('.tokens-'.$icon);
 
+      foreach ($scales as $scale_key => $scale) {
+        $path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
+        $sprite->setSourceFile($path, $scale);
+      }
       $sprites[] = $sprite;
     }
 
-    $sheet = $this->buildSheet('tokens', false);
+    $sheet = $this->buildSheet('tokens', true);
+    $sheet->setScales($scales);
     foreach ($sprites as $sprite) {
       $sheet->addSprite($sprite);
     }

webroot/rsrc/css/sprite-apps-large.css

@@ -514,334 +514,350 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   background-position: -87px -232px;
 }
 
-.apps-people-light-large {
+.apps-pebkac-light-large {
   background-position: -116px -232px;
 }
 
-.apps-people-dark-large {
+.apps-pebkac-dark-large {
   background-position: -145px -232px;
 }
 
-.apps-people-blue-large, .phabricator-crumb-view:hover .apps-people-dark-large {
+.apps-pebkac-blue-large, .phabricator-crumb-view:hover .apps-pebkac-dark-large {
   background-position: -174px -232px;
 }
 
-.apps-people-white-large {
+.apps-pebkac-white-large {
   background-position: -203px -232px;
 }
 
-.apps-phage-light-large {
+.apps-people-light-large {
   background-position: -232px -232px;
 }
 
-.apps-phage-dark-large {
+.apps-people-dark-large {
   background-position: -261px -232px;
 }
 
-.apps-phage-blue-large, .phabricator-crumb-view:hover .apps-phage-dark-large {
+.apps-people-blue-large, .phabricator-crumb-view:hover .apps-people-dark-large {
   background-position: -290px -232px;
 }
 
-.apps-phage-white-large {
+.apps-people-white-large {
   background-position: -319px -232px;
 }
 
-.apps-phame-light-large {
+.apps-phage-light-large {
   background-position: -348px -232px;
 }
 
-.apps-phame-dark-large {
+.apps-phage-dark-large {
   background-position: -377px -232px;
 }
 
-.apps-phame-blue-large, .phabricator-crumb-view:hover .apps-phame-dark-large {
+.apps-phage-blue-large, .phabricator-crumb-view:hover .apps-phage-dark-large {
   background-position: -406px -232px;
 }
 
-.apps-phame-white-large {
+.apps-phage-white-large {
   background-position: 0px -261px;
 }
 
-.apps-phid-light-large {
+.apps-phame-light-large {
   background-position: -29px -261px;
 }
 
-.apps-phid-dark-large {
+.apps-phame-dark-large {
   background-position: -58px -261px;
 }
 
-.apps-phid-blue-large, .phabricator-crumb-view:hover .apps-phid-dark-large {
+.apps-phame-blue-large, .phabricator-crumb-view:hover .apps-phame-dark-large {
   background-position: -87px -261px;
 }
 
-.apps-phid-white-large {
+.apps-phame-white-large {
   background-position: -116px -261px;
 }
 
-.apps-phlux-light-large {
+.apps-phid-light-large {
   background-position: -145px -261px;
 }
 
-.apps-phlux-dark-large {
+.apps-phid-dark-large {
   background-position: -174px -261px;
 }
 
-.apps-phlux-blue-large, .phabricator-crumb-view:hover .apps-phlux-dark-large {
+.apps-phid-blue-large, .phabricator-crumb-view:hover .apps-phid-dark-large {
   background-position: -203px -261px;
 }
 
-.apps-phlux-white-large {
+.apps-phid-white-large {
   background-position: -232px -261px;
 }
 
-.apps-pholio-light-large {
+.apps-phlux-light-large {
   background-position: -261px -261px;
 }
 
-.apps-pholio-dark-large {
+.apps-phlux-dark-large {
   background-position: -290px -261px;
 }
 
-.apps-pholio-blue-large, .phabricator-crumb-view:hover .apps-pholio-dark-large {
+.apps-phlux-blue-large, .phabricator-crumb-view:hover .apps-phlux-dark-large {
   background-position: -319px -261px;
 }
 
-.apps-pholio-white-large {
+.apps-phlux-white-large {
   background-position: -348px -261px;
 }
 
-.apps-phortune-light-large {
+.apps-pholio-light-large {
   background-position: -377px -261px;
 }
 
-.apps-phortune-dark-large {
+.apps-pholio-dark-large {
   background-position: -406px -261px;
 }
 
-.apps-phortune-blue-large, .phabricator-crumb-view:hover .apps-phortune-dark-large {
+.apps-pholio-blue-large, .phabricator-crumb-view:hover .apps-pholio-dark-large {
   background-position: 0px -290px;
 }
 
-.apps-phortune-white-large {
+.apps-pholio-white-large {
   background-position: -29px -290px;
 }
 
-.apps-phpast-light-large {
+.apps-phortune-light-large {
   background-position: -58px -290px;
 }
 
-.apps-phpast-dark-large {
+.apps-phortune-dark-large {
   background-position: -87px -290px;
 }
 
-.apps-phpast-blue-large, .phabricator-crumb-view:hover .apps-phpast-dark-large {
+.apps-phortune-blue-large, .phabricator-crumb-view:hover .apps-phortune-dark-large {
   background-position: -116px -290px;
 }
 
-.apps-phpast-white-large {
+.apps-phortune-white-large {
   background-position: -145px -290px;
 }
 
-.apps-phrequent-light-large {
+.apps-phpast-light-large {
   background-position: -174px -290px;
 }
 
-.apps-phrequent-dark-large {
+.apps-phpast-dark-large {
   background-position: -203px -290px;
 }
 
-.apps-phrequent-blue-large, .phabricator-crumb-view:hover .apps-phrequent-dark-large {
+.apps-phpast-blue-large, .phabricator-crumb-view:hover .apps-phpast-dark-large {
   background-position: -232px -290px;
 }
 
-.apps-phrequent-white-large {
+.apps-phpast-white-large {
   background-position: -261px -290px;
 }
 
-.apps-phriction-light-large {
+.apps-phrequent-light-large {
   background-position: -290px -290px;
 }
 
-.apps-phriction-dark-large {
+.apps-phrequent-dark-large {
   background-position: -319px -290px;
 }
 
-.apps-phriction-blue-large, .phabricator-crumb-view:hover .apps-phriction-dark-large {
+.apps-phrequent-blue-large, .phabricator-crumb-view:hover .apps-phrequent-dark-large {
   background-position: -348px -290px;
 }
 
-.apps-phriction-white-large {
+.apps-phrequent-white-large {
   background-position: -377px -290px;
 }
 
-.apps-policy-light-large {
+.apps-phriction-light-large {
+  background-position: -406px -290px;
+}
+
+.apps-phriction-dark-large {
   background-position: 0px -319px;
 }
 
-.apps-policy-dark-large {
+.apps-phriction-blue-large, .phabricator-crumb-view:hover .apps-phriction-dark-large {
   background-position: -29px -319px;
 }
 
-.apps-policy-blue-large, .phabricator-crumb-view:hover .apps-policy-dark-large {
+.apps-phriction-white-large {
   background-position: -58px -319px;
 }
 
-.apps-policy-white-large {
+.apps-policy-light-large {
   background-position: -87px -319px;
 }
 
-.apps-ponder-light-large {
+.apps-policy-dark-large {
   background-position: -116px -319px;
 }
 
-.apps-ponder-dark-large {
+.apps-policy-blue-large, .phabricator-crumb-view:hover .apps-policy-dark-large {
   background-position: -145px -319px;
 }
 
-.apps-ponder-blue-large, .phabricator-crumb-view:hover .apps-ponder-dark-large {
+.apps-policy-white-large {
   background-position: -174px -319px;
 }
 
-.apps-ponder-white-large {
+.apps-ponder-light-large {
   background-position: -203px -319px;
 }
 
-.apps-power-light-large {
+.apps-ponder-dark-large {
   background-position: -232px -319px;
 }
 
-.apps-power-dark-large {
+.apps-ponder-blue-large, .phabricator-crumb-view:hover .apps-ponder-dark-large {
   background-position: -261px -319px;
 }
 
-.apps-power-blue-large, .phabricator-crumb-view:hover .apps-power-dark-large {
+.apps-ponder-white-large {
   background-position: -290px -319px;
 }
 
-.apps-power-white-large {
+.apps-power-light-large {
   background-position: -319px -319px;
 }
 
-.apps-projects-light-large {
+.apps-power-dark-large {
   background-position: -348px -319px;
 }
 
-.apps-projects-dark-large {
+.apps-power-blue-large, .phabricator-crumb-view:hover .apps-power-dark-large {
   background-position: -377px -319px;
 }
 
-.apps-projects-blue-large, .phabricator-crumb-view:hover .apps-projects-dark-large {
+.apps-power-white-large {
+  background-position: -406px -319px;
+}
+
+.apps-projects-light-large {
   background-position: 0px -348px;
 }
 
-.apps-projects-white-large {
+.apps-projects-dark-large {
   background-position: -29px -348px;
 }
 
-.apps-releeph-light-large {
+.apps-projects-blue-large, .phabricator-crumb-view:hover .apps-projects-dark-large {
   background-position: -58px -348px;
 }
 
-.apps-releeph-dark-large {
+.apps-projects-white-large {
   background-position: -87px -348px;
 }
 
-.apps-releeph-blue-large, .phabricator-crumb-view:hover .apps-releeph-dark-large {
+.apps-releeph-light-large {
   background-position: -116px -348px;
 }
 
-.apps-releeph-white-large {
+.apps-releeph-dark-large {
   background-position: -145px -348px;
 }
 
-.apps-repositories-light-large {
+.apps-releeph-blue-large, .phabricator-crumb-view:hover .apps-releeph-dark-large {
   background-position: -174px -348px;
 }
 
-.apps-repositories-dark-large {
+.apps-releeph-white-large {
   background-position: -203px -348px;
 }
 
-.apps-repositories-blue-large, .phabricator-crumb-view:hover .apps-repositories-dark-large {
+.apps-repositories-light-large {
   background-position: -232px -348px;
 }
 
-.apps-repositories-white-large {
+.apps-repositories-dark-large {
   background-position: -261px -348px;
 }
 
-.apps-search-light-large {
+.apps-repositories-blue-large, .phabricator-crumb-view:hover .apps-repositories-dark-large {
   background-position: -290px -348px;
 }
 
-.apps-search-dark-large {
+.apps-repositories-white-large {
   background-position: -319px -348px;
 }
 
-.apps-search-blue-large, .phabricator-crumb-view:hover .apps-search-dark-large {
+.apps-search-light-large {
   background-position: -348px -348px;
 }
 
-.apps-search-white-large {
+.apps-search-dark-large {
   background-position: -377px -348px;
 }
 
-.apps-settings-light-large {
+.apps-search-blue-large, .phabricator-crumb-view:hover .apps-search-dark-large {
+  background-position: -406px -348px;
+}
+
+.apps-search-white-large {
   background-position: 0px -377px;
 }
 
-.apps-settings-dark-large {
+.apps-settings-light-large {
   background-position: -29px -377px;
 }
 
-.apps-settings-blue-large, .phabricator-crumb-view:hover .apps-settings-dark-large {
+.apps-settings-dark-large {
   background-position: -58px -377px;
 }
 
-.apps-settings-white-large {
+.apps-settings-blue-large, .phabricator-crumb-view:hover .apps-settings-dark-large {
   background-position: -87px -377px;
 }
 
-.apps-setup-light-large {
+.apps-settings-white-large {
   background-position: -116px -377px;
 }
 
-.apps-setup-dark-large {
+.apps-setup-light-large {
   background-position: -145px -377px;
 }
 
-.apps-setup-blue-large, .phabricator-crumb-view:hover .apps-setup-dark-large {
+.apps-setup-dark-large {
   background-position: -174px -377px;
 }
 
-.apps-setup-white-large {
+.apps-setup-blue-large, .phabricator-crumb-view:hover .apps-setup-dark-large {
   background-position: -203px -377px;
 }
 
-.apps-slowvote-light-large {
+.apps-setup-white-large {
   background-position: -232px -377px;
 }
 
-.apps-slowvote-dark-large {
+.apps-slowvote-light-large {
   background-position: -261px -377px;
 }
 
-.apps-slowvote-blue-large, .phabricator-crumb-view:hover .apps-slowvote-dark-large {
+.apps-slowvote-dark-large {
   background-position: -290px -377px;
 }
 
-.apps-slowvote-white-large {
+.apps-slowvote-blue-large, .phabricator-crumb-view:hover .apps-slowvote-dark-large {
   background-position: -319px -377px;
 }
 
-.apps-token-light-large {
+.apps-slowvote-white-large {
   background-position: -348px -377px;
 }
 
-.apps-token-dark-large {
+.apps-token-light-large {
   background-position: -377px -377px;
 }
 
+.apps-token-dark-large {
+  background-position: -406px -377px;
+}
+
 .apps-token-blue-large, .phabricator-crumb-view:hover .apps-token-dark-large {
   background-position: 0px -406px;
 }

webroot/rsrc/css/sprite-apps.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-apps {
     background-image: url(/rsrc/image/sprite-apps-X2.png);
-    background-size: 150px 165px;
+    background-size: 165px 165px;
   }
 }
 
@@ -59,210 +59,218 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
 }
 
 .apps-chatlog-dark {
-  background-position: 0px -15px;
+  background-position: -150px 0px;
 }
 
 .apps-chatlog-white {
-  background-position: -15px -15px;
+  background-position: 0px -15px;
 }
 
 .apps-conduit-dark {
-  background-position: -30px -15px;
+  background-position: -15px -15px;
 }
 
 .apps-conduit-white {
-  background-position: -45px -15px;
+  background-position: -30px -15px;
 }
 
 .apps-conpherence-dark {
-  background-position: -60px -15px;
+  background-position: -45px -15px;
 }
 
 .apps-conpherence-white {
-  background-position: -75px -15px;
+  background-position: -60px -15px;
 }
 
 .apps-countdown-dark {
-  background-position: -90px -15px;
+  background-position: -75px -15px;
 }
 
 .apps-countdown-white {
-  background-position: -105px -15px;
+  background-position: -90px -15px;
 }
 
 .apps-daemon-dark {
-  background-position: -120px -15px;
+  background-position: -105px -15px;
 }
 
 .apps-daemon-white {
-  background-position: -135px -15px;
+  background-position: -120px -15px;
 }
 
 .apps-differential-dark {
-  background-position: 0px -30px;
+  background-position: -135px -15px;
 }
 
 .apps-differential-white {
-  background-position: -15px -30px;
+  background-position: -150px -15px;
 }
 
 .apps-diffusion-dark {
-  background-position: -30px -30px;
+  background-position: 0px -30px;
 }
 
 .apps-diffusion-white {
-  background-position: -45px -30px;
+  background-position: -15px -30px;
 }
 
 .apps-diviner-dark {
-  background-position: -60px -30px;
+  background-position: -30px -30px;
 }
 
 .apps-diviner-white {
-  background-position: -75px -30px;
+  background-position: -45px -30px;
 }
 
 .apps-drydock-dark {
-  background-position: -90px -30px;
+  background-position: -60px -30px;
 }
 
 .apps-drydock-white {
-  background-position: -105px -30px;
+  background-position: -75px -30px;
 }
 
 .apps-fact-dark {
-  background-position: -120px -30px;
+  background-position: -90px -30px;
 }
 
 .apps-fact-white {
-  background-position: -135px -30px;
+  background-position: -105px -30px;
 }
 
 .apps-feed-dark {
-  background-position: 0px -45px;
+  background-position: -120px -30px;
 }
 
 .apps-feed-white {
-  background-position: -15px -45px;
+  background-position: -135px -30px;
 }
 
 .apps-files-dark {
-  background-position: -30px -45px;
+  background-position: 0px -45px;
 }
 
 .apps-files-white {
-  background-position: -45px -45px;
+  background-position: -15px -45px;
 }
 
 .apps-flags-dark {
-  background-position: -60px -45px;
+  background-position: -30px -45px;
 }
 
 .apps-flags-white {
-  background-position: -75px -45px;
+  background-position: -45px -45px;
 }
 
 .apps-harbormaster-dark {
-  background-position: -90px -45px;
+  background-position: -60px -45px;
 }
 
 .apps-harbormaster-white {
-  background-position: -105px -45px;
+  background-position: -75px -45px;
 }
 
 .apps-help-dark {
-  background-position: -120px -45px;
+  background-position: -90px -45px;
 }
 
 .apps-help-white {
-  background-position: -135px -45px;
+  background-position: -105px -45px;
 }
 
 .apps-herald-dark {
-  background-position: 0px -60px;
+  background-position: -120px -45px;
 }
 
 .apps-herald-white {
-  background-position: -15px -60px;
+  background-position: -135px -45px;
 }
 
 .apps-home-dark {
-  background-position: -30px -60px;
+  background-position: 0px -60px;
 }
 
 .apps-home-white {
-  background-position: -45px -60px;
+  background-position: -15px -60px;
 }
 
 .apps-legalpad-dark {
-  background-position: -60px -60px;
+  background-position: -30px -60px;
 }
 
 .apps-legalpad-white {
-  background-position: -75px -60px;
+  background-position: -45px -60px;
 }
 
 .apps-logo-dark {
-  background-position: -90px -60px;
+  background-position: -60px -60px;
 }
 
 .apps-logo-white {
-  background-position: -105px -60px;
+  background-position: -75px -60px;
 }
 
 .apps-macro-dark {
-  background-position: -120px -60px;
+  background-position: -90px -60px;
 }
 
 .apps-macro-white {
-  background-position: -135px -60px;
+  background-position: -105px -60px;
 }
 
 .apps-mail-dark {
-  background-position: 0px -75px;
+  background-position: -120px -60px;
 }
 
 .apps-mail-white {
-  background-position: -15px -75px;
+  background-position: -135px -60px;
 }
 
 .apps-maniphest-dark {
-  background-position: -30px -75px;
+  background-position: 0px -75px;
 }
 
 .apps-maniphest-white {
-  background-position: -45px -75px;
+  background-position: -15px -75px;
 }
 
 .apps-metamta-dark {
-  background-position: -60px -75px;
+  background-position: -30px -75px;
 }
 
 .apps-metamta-white {
-  background-position: -75px -75px;
+  background-position: -45px -75px;
 }
 
 .apps-new-dark {
-  background-position: -90px -75px;
+  background-position: -60px -75px;
 }
 
 .apps-new-white {
-  background-position: -105px -75px;
+  background-position: -75px -75px;
 }
 
 .apps-owners-dark {
-  background-position: -120px -75px;
+  background-position: -90px -75px;
 }
 
 .apps-owners-white {
-  background-position: -135px -75px;
+  background-position: -105px -75px;
 }
 
 .apps-paste-dark {
-  background-position: 0px -90px;
+  background-position: -120px -75px;
 }
 
 .apps-paste-white {
+  background-position: -135px -75px;
+}
+
+.apps-pebkac-dark {
+  background-position: 0px -90px;
+}
+
+.apps-pebkac-white {
   background-position: -15px -90px;
 }
 

webroot/rsrc/css/sprite-tokens.css

@@ -8,7 +8,14 @@
   background-repeat: no-repeat;
 }
 
-
+@media
+only screen and (min-device-pixel-ratio: 1.5),
+only screen and (-webkit-min-device-pixel-ratio: 1.5) {
+  .sprite-tokens {
+    background-image: url(/rsrc/image/sprite-tokens-X2.png);
+    background-size: 68px 68px;
+  }
+}
 
 
 .tokens-coin-1 {