Action Icons

Summary: First pass at 'action icons' for headers and other items. Ties into future diff.

Test Plan: photoshop, read the css.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin, AnhNhan

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

resources/sprite/manifest/actions.json

@@ -0,0 +1,146 @@
+{
+  "version" : 1,
+  "sprites" : {
+    "action-icon-flag-dark"      : {
+      "name" : "action-icon-flag-dark",
+      "rule" : ".action-icon-flag-dark",
+      "hash" : "4ae54fc28dd2d6cfa6e57dde7bd640cf"
+    },
+    "action-icon-flag-grey"      : {
+      "name" : "action-icon-flag-grey",
+      "rule" : ".action-icon-flag-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-flag",
+      "hash" : "50e739ca2d6a5527ce2bb8aafd4eb93f"
+    },
+    "action-icon-flag-white"     : {
+      "name" : "action-icon-flag-white",
+      "rule" : ".action-icon-flag-white",
+      "hash" : "d29ba4e3f88d5b2f3b0ea14754f7b89a"
+    },
+    "action-icon-heart-dark"     : {
+      "name" : "action-icon-heart-dark",
+      "rule" : ".action-icon-heart-dark",
+      "hash" : "90b437a281724a4961e33272eafd616b"
+    },
+    "action-icon-heart-grey"     : {
+      "name" : "action-icon-heart-grey",
+      "rule" : ".action-icon-heart-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-heart",
+      "hash" : "cd521a7267b321516223462860373f09"
+    },
+    "action-icon-heart-white"    : {
+      "name" : "action-icon-heart-white",
+      "rule" : ".action-icon-heart-white",
+      "hash" : "505ebd7324f9c39fa2366a85996d1194"
+    },
+    "action-icon-move-dark"      : {
+      "name" : "action-icon-move-dark",
+      "rule" : ".action-icon-move-dark",
+      "hash" : "38f5b9168bf04d1a904b09805e589cd7"
+    },
+    "action-icon-move-grey"      : {
+      "name" : "action-icon-move-grey",
+      "rule" : ".action-icon-move-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-move",
+      "hash" : "35dcc45f04a81cbf9e5ecdf0fcd5bebc"
+    },
+    "action-icon-move-white"     : {
+      "name" : "action-icon-move-white",
+      "rule" : ".action-icon-move-white",
+      "hash" : "2b1b790a494a079d288d5a3a47c6bd62"
+    },
+    "action-icon-new-dark"       : {
+      "name" : "action-icon-new-dark",
+      "rule" : ".action-icon-new-dark",
+      "hash" : "52c45b76d0dbd51e6eb65f0597d5098a"
+    },
+    "action-icon-new-grey"       : {
+      "name" : "action-icon-new-grey",
+      "rule" : ".action-icon-new-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-new",
+      "hash" : "c51315bd83a20806625ca3a887f86215"
+    },
+    "action-icon-new-white"      : {
+      "name" : "action-icon-new-white",
+      "rule" : ".action-icon-new-white",
+      "hash" : "5a344c62e037d672516dae0e3a8dd589"
+    },
+    "action-icon-search-dark"    : {
+      "name" : "action-icon-search-dark",
+      "rule" : ".action-icon-search-dark",
+      "hash" : "6ff124bc9423bf98be5a53e22508cd26"
+    },
+    "action-icon-search-grey"    : {
+      "name" : "action-icon-search-grey",
+      "rule" : ".action-icon-search-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-search",
+      "hash" : "57b5c47c0676da7f97d3b2f7eefbbea4"
+    },
+    "action-icon-search-white"   : {
+      "name" : "action-icon-search-white",
+      "rule" : ".action-icon-search-white",
+      "hash" : "17f1bf9820b0c44f4641e0256840b138"
+    },
+    "action-icon-settings-dark"  : {
+      "name" : "action-icon-settings-dark",
+      "rule" : ".action-icon-settings-dark",
+      "hash" : "5ecb08643250a052e5d090ef4660faf5"
+    },
+    "action-icon-settings-grey"  : {
+      "name" : "action-icon-settings-grey",
+      "rule" : ".action-icon-settings-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-settings",
+      "hash" : "5aeb35f1019c51a2f9140dc8765c9dca"
+    },
+    "action-icon-settings-white" : {
+      "name" : "action-icon-settings-white",
+      "rule" : ".action-icon-settings-white",
+      "hash" : "8cdd154946f1a8d8d307b72eddd5d755"
+    },
+    "action-icon-star-dark"      : {
+      "name" : "action-icon-star-dark",
+      "rule" : ".action-icon-star-dark",
+      "hash" : "45567d03f8e34811eca0621e93b5e050"
+    },
+    "action-icon-star-grey"      : {
+      "name" : "action-icon-star-grey",
+      "rule" : ".action-icon-star-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-star",
+      "hash" : "1c7909e987b64b26b728506695457770"
+    },
+    "action-icon-star-white"     : {
+      "name" : "action-icon-star-white",
+      "rule" : ".action-icon-star-white",
+      "hash" : "e7c949542a54a347879ceb96f42a3c02"
+    },
+    "action-icon-tag-dark"       : {
+      "name" : "action-icon-tag-dark",
+      "rule" : ".action-icon-tag-dark",
+      "hash" : "24d97fa7524d0bf1bac17d9e07a63f48"
+    },
+    "action-icon-tag-grey"       : {
+      "name" : "action-icon-tag-grey",
+      "rule" : ".action-icon-tag-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-tag",
+      "hash" : "f04a5b38209c0f8e9ad2a3a964d5d505"
+    },
+    "action-icon-tag-white"      : {
+      "name" : "action-icon-tag-white",
+      "rule" : ".action-icon-tag-white",
+      "hash" : "fdfc5d20f6a0d90b6d329159823d2cb0"
+    },
+    "action-icon-wrench-dark"    : {
+      "name" : "action-icon-wrench-dark",
+      "rule" : ".action-icon-wrench-dark",
+      "hash" : "3a5cfa463c3c89194d3bbce3952a6e80"
+    },
+    "action-icon-wrench-grey"    : {
+      "name" : "action-icon-wrench-grey",
+      "rule" : ".action-icon-wrench-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-wrench",
+      "hash" : "40d8a77d6272589c69f65e9b5e5587e1"
+    },
+    "action-icon-wrench-white"   : {
+      "name" : "action-icon-wrench-white",
+      "rule" : ".action-icon-wrench-white",
+      "hash" : "20ee83ae6a5d0dc6918727b6ccacec67"
+    }
+  },
+  "scales"  : [
+    1,
+    2
+  ],
+  "header"  : "\/**\n * @provides sprite-action-icon-css\n * @generated\n *\/\n\n.sprite-action-icon {\n  background-image: url(\/rsrc\/image\/sprite-action-icon.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-action-icon {\n    background-image: url(\/rsrc\/image\/sprite-action-icon-X2.png);\n    background-size: {X}px {Y}px;\n  }\n}\n",
+  "type"    : "standard"
+}

resources/sprite/manifest/gradient.json

@@ -16,6 +16,11 @@
       "rule" : ".gradient-blue-dark, button, a.button, a.button:visited, input.inputsubmit",
       "hash" : "f467612edcdbf984672287c6086492c4"
     },
+    "gradient-blue-header"     : {
+      "name" : "gradient-blue-header",
+      "rule" : ".gradient-blue-header",
+      "hash" : "dd82b6d737f9f683c0d6e70eff59e872"
+    },
     "gradient-blue-light"      : {
       "name" : "gradient-blue-light",
       "rule" : ".gradient-blue-light, button:active, a.button:active",
@@ -36,6 +41,11 @@
       "rule" : ".gradient-green-dark, button.green, a.green, a.green:visited",
       "hash" : "a6719fe55b2b0e527ed32985691eab34"
     },
+    "gradient-green-header"    : {
+      "name" : "gradient-green-header",
+      "rule" : ".gradient-green-header",
+      "hash" : "d61297d23aa31fa1de51e2b9b5974554"
+    },
     "gradient-green-light"     : {
       "name" : "gradient-green-light",
       "rule" : ".gradient-green-light, button.green:active, a.green:active",
@@ -46,6 +56,11 @@
       "rule" : ".gradient-grey-dark, button.grey, input.inputaux, a.grey, a.grey:visited, a.button.disabled, button[disabled], button.disabled",
       "hash" : "fac28a773098fc62bf571e12b843f71a"
     },
+    "gradient-grey-header"     : {
+      "name" : "gradient-grey-header",
+      "rule" : ".gradient-grey-header",
+      "hash" : "f1453896068a8dd0d7885457c8e371bc"
+    },
     "gradient-grey-light"      : {
       "name" : "gradient-grey-light",
       "rule" : ".gradient-grey-light, button.grey:active, a.grey:active, button.grey_active, a.dropdown-open",
@@ -65,6 +80,16 @@
       "name" : "gradient-menu-selected",
       "rule" : ".gradient-menu-selected, .phabricator-side-menu .phabricator-menu-item-selected, .device-desktop .phabricator-side-menu a.phabricator-menu-item-selected:hover, .phabricator-nav-local a.phabricator-active-nav-focus",
       "hash" : "9b4b039fba177b90bc26f0e6eece339d"
+    },
+    "gradient-red-header"      : {
+      "name" : "gradient-red-header",
+      "rule" : ".gradient-red-header",
+      "hash" : "27a76645065953a8440d0c3d2b192c82"
+    },
+    "gradient-yellow-header"   : {
+      "name" : "gradient-yellow-header",
+      "rule" : ".gradient-yellow-header",
+      "hash" : "181e68e61f29071c3ec3810694c2ef08"
     }
   },
   "scales"  : [

resources/sprite/manifest/minicons.json

@@ -0,0 +1,31 @@
+{
+  "version" : 1,
+  "sprites" : {
+    "minicons-company-white"    : {
+      "name" : "minicons-company-white",
+      "rule" : ".minicons-company-white",
+      "hash" : "181289eba2fcb851858ab5b99fd19818"
+    },
+    "minicons-move-white"       : {
+      "name" : "minicons-move-white",
+      "rule" : ".minicons-move-white",
+      "hash" : "620e464c0e50830b90eaed3b5a2b9f56"
+    },
+    "minicons-public-white"     : {
+      "name" : "minicons-public-white",
+      "rule" : ".minicons-public-white",
+      "hash" : "c075363aeba4c52dbcc328a24d8f4298"
+    },
+    "minicons-restricted-white" : {
+      "name" : "minicons-restricted-white",
+      "rule" : ".minicons-restricted-white",
+      "hash" : "af00df15815b83d410073859dacf7a75"
+    }
+  },
+  "scales"  : [
+    1,
+    2
+  ],
+  "header"  : "\/**\n * @provides sprite-minicons-css\n * @generated\n *\/\n\n.sprite-minicons {\n  background-image: url(\/rsrc\/image\/sprite-minicons.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-minicons {\n    background-image: url(\/rsrc\/image\/sprite-minicons-X2.png);\n    background-size: {X}px {Y}px;\n  }\n}\n",
+  "type"    : "standard"
+}

scripts/celerity/generate_sprites.php

@@ -30,6 +30,8 @@ $sheets = array(
   'icon' => $generator->buildIconSheet(),
   'menu' => $generator->buildMenuSheet(),
   'apps' => $generator->buildAppsSheet(),
+  'actions' => $generator->buildActionsSheet(),
+  'minicons' => $generator->buildMiniconsSheet(),
   'conpherence' => $generator->buildConpherenceSheet(),
   'apps-large' => $generator->buildAppsLargeSheet(),
   'tokens' => $generator->buildTokenSheet(),

src/__celerity_resource_map__.php

@@ -511,6 +511,20 @@ celerity_register_resource_map(array(
     'disk' => '/rsrc/image/search.png',
     'type' => 'png',
   ),
+  '/rsrc/image/sprite-actions-X2.png' =>
+  array(
+    'hash' => 'dee876887537d0f941f89ea41adf6631',
+    'uri' => '/res/dee87688/rsrc/image/sprite-actions-X2.png',
+    'disk' => '/rsrc/image/sprite-actions-X2.png',
+    'type' => 'png',
+  ),
+  '/rsrc/image/sprite-actions.png' =>
+  array(
+    'hash' => '6b58724a27c34412edb421dc25b4b091',
+    'uri' => '/res/6b58724a/rsrc/image/sprite-actions.png',
+    'disk' => '/rsrc/image/sprite-actions.png',
+    'type' => 'png',
+  ),
   '/rsrc/image/sprite-apps-X2.png' =>
   array(
     'hash' => '35a4b5c92f0b05a6a06c8a8e2f409d9e',
@@ -576,8 +590,8 @@ celerity_register_resource_map(array(
   ),
   '/rsrc/image/sprite-gradient.png' =>
   array(
-    'hash' => '92aebaab67dcc6baf2ea99294368d895',
+    'hash' => 'df1e8e0d09bbbabdd6015d3467dec11a',
-    'uri' => '/res/92aebaab/rsrc/image/sprite-gradient.png',
+    'uri' => '/res/df1e8e0d/rsrc/image/sprite-gradient.png',
     'disk' => '/rsrc/image/sprite-gradient.png',
     'type' => 'png',
   ),
@@ -609,6 +623,20 @@ celerity_register_resource_map(array(
     'disk' => '/rsrc/image/sprite-menu.png',
     'type' => 'png',
   ),
+  '/rsrc/image/sprite-minicons-X2.png' =>
+  array(
+    'hash' => '9b36608d0bfaa941816e42ceb6912aaf',
+    'uri' => '/res/9b36608d/rsrc/image/sprite-minicons-X2.png',
+    'disk' => '/rsrc/image/sprite-minicons-X2.png',
+    'type' => 'png',
+  ),
+  '/rsrc/image/sprite-minicons.png' =>
+  array(
+    'hash' => 'f4aa63b2bb2d7364c388a20fa35a08c5',
+    'uri' => '/res/f4aa63b2/rsrc/image/sprite-minicons.png',
+    'disk' => '/rsrc/image/sprite-minicons.png',
+    'type' => 'png',
+  ),
   '/rsrc/image/sprite-tokens.png' =>
   array(
     'hash' => '67c46fd75c885b76ecbfe46e71a476cc',
@@ -3688,6 +3716,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/core/spacing.css',
   ),
+  'sprite-action-icon-css' =>
+  array(
+    'uri' => '/res/a992b71c/rsrc/css/sprite-actions.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/sprite-actions.css',
+  ),
   'sprite-apps-css' =>
   array(
     'uri' => '/res/d0b8b697/rsrc/css/sprite-apps.css',
@@ -3735,7 +3772,7 @@ celerity_register_resource_map(array(
   ),
   'sprite-gradient-css' =>
   array(
-    'uri' => '/res/e62e7a0f/rsrc/css/sprite-gradient.css',
+    'uri' => '/res/0d784d61/rsrc/css/sprite-gradient.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3760,6 +3797,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/sprite-menu.css',
   ),
+  'sprite-minicons--css' =>
+  array(
+    'uri' => '/res/6dda36e5/rsrc/css/sprite-minicons.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/sprite-minicons.css',
+  ),
   'sprite-tokens-css' =>
   array(
     'uri' => '/res/9ae0de5b/rsrc/css/sprite-tokens.css',
@@ -3808,7 +3854,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    '2265745d' =>
+    'fdb9d6ab' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -3850,7 +3896,7 @@ celerity_register_resource_map(array(
         34 => 'phabricator-object-item-list-view-css',
         35 => 'global-drag-and-drop-css',
       ),
-      'uri' => '/res/pkg/2265745d/core.pkg.css',
+      'uri' => '/res/pkg/fdb9d6ab/core.pkg.css',
       'type' => 'css',
     ),
     'd95b69e5' =>
@@ -4040,16 +4086,16 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => '6b1fccc6',
-    'aphront-dialog-view-css' => '2265745d',
+    'aphront-dialog-view-css' => 'fdb9d6ab',
-    'aphront-error-view-css' => '2265745d',
+    'aphront-error-view-css' => 'fdb9d6ab',
-    'aphront-form-view-css' => '2265745d',
+    'aphront-form-view-css' => 'fdb9d6ab',
-    'aphront-list-filter-view-css' => '2265745d',
+    'aphront-list-filter-view-css' => 'fdb9d6ab',
-    'aphront-pager-view-css' => '2265745d',
+    'aphront-pager-view-css' => 'fdb9d6ab',
-    'aphront-panel-view-css' => '2265745d',
+    'aphront-panel-view-css' => 'fdb9d6ab',
-    'aphront-table-view-css' => '2265745d',
+    'aphront-table-view-css' => 'fdb9d6ab',
-    'aphront-tokenizer-control-css' => '2265745d',
+    'aphront-tokenizer-control-css' => 'fdb9d6ab',
-    'aphront-tooltip-css' => '2265745d',
+    'aphront-tooltip-css' => 'fdb9d6ab',
-    'aphront-typeahead-control-css' => '2265745d',
+    'aphront-typeahead-control-css' => 'fdb9d6ab',
     'differential-changeset-view-css' => '8aaacd1b',
     'differential-core-view-css' => '8aaacd1b',
     'differential-inline-comment-editor' => 'e96b08f8',
@@ -4063,7 +4109,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => '8aaacd1b',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => '2265745d',
+    'global-drag-and-drop-css' => 'fdb9d6ab',
     'inline-comment-summary-css' => '8aaacd1b',
     'javelin-aphlict' => 'd95b69e5',
     'javelin-behavior' => 'fe22443b',
@@ -4135,47 +4181,47 @@ celerity_register_resource_map(array(
     'javelin-util' => 'fe22443b',
     'javelin-vector' => 'fe22443b',
     'javelin-workflow' => 'fe22443b',
-    'lightbox-attachment-css' => '2265745d',
+    'lightbox-attachment-css' => 'fdb9d6ab',
     'maniphest-task-summary-css' => '6b1fccc6',
     'maniphest-transaction-detail-css' => '6b1fccc6',
     'phabricator-busy' => 'd95b69e5',
     'phabricator-content-source-view-css' => '8aaacd1b',
-    'phabricator-core-buttons-css' => '2265745d',
+    'phabricator-core-buttons-css' => 'fdb9d6ab',
-    'phabricator-core-css' => '2265745d',
+    'phabricator-core-css' => 'fdb9d6ab',
-    'phabricator-crumbs-view-css' => '2265745d',
+    'phabricator-crumbs-view-css' => 'fdb9d6ab',
-    'phabricator-directory-css' => '2265745d',
+    'phabricator-directory-css' => 'fdb9d6ab',
     'phabricator-drag-and-drop-file-upload' => 'e96b08f8',
     'phabricator-dropdown-menu' => 'd95b69e5',
     'phabricator-file-upload' => 'd95b69e5',
-    'phabricator-filetree-view-css' => '2265745d',
+    'phabricator-filetree-view-css' => 'fdb9d6ab',
-    'phabricator-flag-css' => '2265745d',
+    'phabricator-flag-css' => 'fdb9d6ab',
-    'phabricator-form-view-css' => '2265745d',
+    'phabricator-form-view-css' => 'fdb9d6ab',
-    'phabricator-header-view-css' => '2265745d',
+    'phabricator-header-view-css' => 'fdb9d6ab',
-    'phabricator-jump-nav' => '2265745d',
+    'phabricator-jump-nav' => 'fdb9d6ab',
     'phabricator-keyboard-shortcut' => 'd95b69e5',
     'phabricator-keyboard-shortcut-manager' => 'd95b69e5',
-    'phabricator-main-menu-view' => '2265745d',
+    'phabricator-main-menu-view' => 'fdb9d6ab',
     'phabricator-menu-item' => 'd95b69e5',
-    'phabricator-nav-view-css' => '2265745d',
+    'phabricator-nav-view-css' => 'fdb9d6ab',
     'phabricator-notification' => 'd95b69e5',
-    'phabricator-notification-css' => '2265745d',
+    'phabricator-notification-css' => 'fdb9d6ab',
-    'phabricator-notification-menu-css' => '2265745d',
+    'phabricator-notification-menu-css' => 'fdb9d6ab',
-    'phabricator-object-item-list-view-css' => '2265745d',
+    'phabricator-object-item-list-view-css' => 'fdb9d6ab',
     'phabricator-object-selector-css' => '8aaacd1b',
     'phabricator-prefab' => 'd95b69e5',
     'phabricator-project-tag-css' => '6b1fccc6',
-    'phabricator-remarkup-css' => '2265745d',
+    'phabricator-remarkup-css' => 'fdb9d6ab',
     'phabricator-shaped-request' => 'e96b08f8',
-    'phabricator-side-menu-view-css' => '2265745d',
+    'phabricator-side-menu-view-css' => 'fdb9d6ab',
-    'phabricator-standard-page-view' => '2265745d',
+    'phabricator-standard-page-view' => 'fdb9d6ab',
     'phabricator-textareautils' => 'd95b69e5',
     'phabricator-tooltip' => 'd95b69e5',
-    'phabricator-transaction-view-css' => '2265745d',
+    'phabricator-transaction-view-css' => 'fdb9d6ab',
-    'phabricator-zindex-css' => '2265745d',
+    'phabricator-zindex-css' => 'fdb9d6ab',
-    'sprite-apps-large-css' => '2265745d',
+    'sprite-apps-large-css' => 'fdb9d6ab',
-    'sprite-gradient-css' => '2265745d',
+    'sprite-gradient-css' => 'fdb9d6ab',
-    'sprite-icon-css' => '2265745d',
+    'sprite-icon-css' => 'fdb9d6ab',
-    'sprite-menu-css' => '2265745d',
+    'sprite-menu-css' => 'fdb9d6ab',
-    'syntax-highlighting-css' => '2265745d',
+    'syntax-highlighting-css' => 'fdb9d6ab',
   ),
 ));

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -83,6 +83,116 @@ final class CeleritySpriteGenerator {
     return $sheet;
   }
 
+  public function buildActionsSheet() {
+    $icons = $this->getDirectoryList('actions_white_1x');
+
+    $colors = array(
+      'dark',
+      'grey',
+      'white',
+    );
+
+    $scales = array(
+      '1x'  => 1,
+      '2x'  => 2,
+    );
+
+    $template = id(new PhutilSprite())
+      ->setSourceSize(24, 24);
+
+    $sprites = array();
+    foreach ($colors as $color) {
+      foreach ($icons as $icon) {
+        $prefix = 'actions_';
+        if (strlen($color)) {
+          $prefix .= $color.'_';
+        }
+
+        $suffix = '';
+        if (strlen($color)) {
+          $suffix = '-'.$color;
+        }
+
+        $sprite = id(clone $template)
+          ->setName('action-icon-'.$icon.$suffix);
+
+        $tcss = array();
+        $tcss[] = '.action-icon-'.$icon.$suffix;
+        if ($color == 'grey') {
+          $tcss[] = '.device-desktop .phabricator-action-icon-view:hover '.
+            '.action-icon-'.$icon;
+        }
+
+        $sprite->setTargetCSS(implode(', ', $tcss));
+
+        foreach ($scales as $scale_key => $scale) {
+          $path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
+          $sprite->setSourceFile($path, $scale);
+        }
+        $sprites[] = $sprite;
+      }
+    }
+
+    $sheet = $this->buildSheet('action-icon', true);
+    $sheet->setScales($scales);
+    foreach ($sprites as $sprite) {
+      $sheet->addSprite($sprite);
+    }
+
+    return $sheet;
+  }
+
+    public function buildMiniconsSheet() {
+    $icons = $this->getDirectoryList('minicons_white_1x');
+
+    $colors = array(
+      'white',
+    );
+
+    $scales = array(
+      '1x'  => 1,
+      '2x'  => 2,
+    );
+
+    $template = id(new PhutilSprite())
+      ->setSourceSize(16, 16);
+
+    $sprites = array();
+    foreach ($colors as $color) {
+      foreach ($icons as $icon) {
+        $prefix = 'minicons_';
+        if (strlen($color)) {
+          $prefix .= $color.'_';
+        }
+
+        $suffix = '';
+        if (strlen($color)) {
+          $suffix = '-'.$color;
+        }
+
+        $sprite = id(clone $template)
+          ->setName('minicons-'.$icon.$suffix);
+
+        $sprite->setTargetCSS('.minicons-'.$icon.$suffix);
+
+        foreach ($scales as $scale_key => $scale) {
+          $path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
+          $sprite->setSourceFile($path, $scale);
+        }
+        $sprites[] = $sprite;
+      }
+    }
+
+    $sheet = $this->buildSheet('minicons', true);
+    $sheet->setScales($scales);
+    foreach ($sprites as $sprite) {
+      $sheet->addSprite($sprite);
+    }
+
+    return $sheet;
+  }
+
+
   public function buildMenuSheet() {
     $sprites = array();
 
@@ -300,6 +410,11 @@ final class CeleritySpriteGenerator {
       'menu-hover'      => 28,
       'menu-label'      => 24,
       'menu-selected'   => 28,
+      'red-header'      => 70,
+      'blue-header'     => 70,
+      'green-header'    => 70,
+      'yellow-header'   => 70,
+      'grey-header'     => 70
     );
 
     // Reorder the sprites so less-specific rules generate earlier in the sheet.

webroot/rsrc/css/sprite-actions.css

@@ -0,0 +1,127 @@
+/**
+ * @provides sprite-action-icon-css
+ * @generated
+ */
+
+.sprite-action-icon {
+  background-image: url(/rsrc/image/sprite-action-icon.png);
+  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-action-icon {
+    background-image: url(/rsrc/image/sprite-action-icon-X2.png);
+    background-size: 125px 150px;
+  }
+}
+
+
+.action-icon-flag-dark {
+  background-position: 0px 0px;
+}
+
+.action-icon-heart-dark {
+  background-position: -25px 0px;
+}
+
+.action-icon-move-dark {
+  background-position: -50px 0px;
+}
+
+.action-icon-new-dark {
+  background-position: -75px 0px;
+}
+
+.action-icon-search-dark {
+  background-position: -100px 0px;
+}
+
+.action-icon-settings-dark {
+  background-position: 0px -25px;
+}
+
+.action-icon-star-dark {
+  background-position: -25px -25px;
+}
+
+.action-icon-tag-dark {
+  background-position: -50px -25px;
+}
+
+.action-icon-wrench-dark {
+  background-position: -75px -25px;
+}
+
+.action-icon-flag-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-flag {
+  background-position: -100px -25px;
+}
+
+.action-icon-heart-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-heart {
+  background-position: 0px -50px;
+}
+
+.action-icon-move-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-move {
+  background-position: -25px -50px;
+}
+
+.action-icon-new-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-new {
+  background-position: -50px -50px;
+}
+
+.action-icon-search-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-search {
+  background-position: -75px -50px;
+}
+
+.action-icon-settings-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-settings {
+  background-position: -100px -50px;
+}
+
+.action-icon-star-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-star {
+  background-position: 0px -75px;
+}
+
+.action-icon-tag-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-tag {
+  background-position: -25px -75px;
+}
+
+.action-icon-wrench-grey, .device-desktop .phabricator-action-icon-view:hover .action-icon-wrench {
+  background-position: -50px -75px;
+}
+
+.action-icon-flag-white {
+  background-position: -75px -75px;
+}
+
+.action-icon-heart-white {
+  background-position: -100px -75px;
+}
+
+.action-icon-move-white {
+  background-position: 0px -100px;
+}
+
+.action-icon-new-white {
+  background-position: -25px -100px;
+}
+
+.action-icon-search-white {
+  background-position: -50px -100px;
+}
+
+.action-icon-settings-white {
+  background-position: -75px -100px;
+}
+
+.action-icon-star-white {
+  background-position: -100px -100px;
+}
+
+.action-icon-tag-white {
+  background-position: 0px -125px;
+}
+
+.action-icon-wrench-white {
+  background-position: -25px -125px;
+}

webroot/rsrc/css/sprite-gradient.css

@@ -27,6 +27,10 @@
   background-position: 0px -132px;
 }
 
+.gradient-blue-header {
+  background-position: 0px -357px;
+}
+
 .gradient-breadcrumbs {
   background-position: 0px -325px;
 }
@@ -39,6 +43,10 @@
   background-position: 0px -159px;
 }
 
+.gradient-green-header {
+  background-position: 0px -428px;
+}
+
 .gradient-green-light, button.green:active, a.green:active {
   background-position: 0px -186px;
 }
@@ -47,6 +55,10 @@
   background-position: 0px -213px;
 }
 
+.gradient-grey-header {
+  background-position: 0px -499px;
+}
+
 .gradient-grey-light, button.grey:active, a.grey:active, button.grey_active, a.dropdown-open {
   background-position: 0px -240px;
 }
@@ -62,3 +74,11 @@
 .gradient-menu-selected, .phabricator-side-menu .phabricator-menu-item-selected, .device-desktop .phabricator-side-menu a.phabricator-menu-item-selected:hover, .phabricator-nav-local a.phabricator-active-nav-focus {
   background-position: 0px -296px;
 }
+
+.gradient-red-header {
+  background-position: 0px -570px;
+}
+
+.gradient-yellow-header {
+  background-position: 0px -641px;
+}

webroot/rsrc/css/sprite-minicons.css

@@ -0,0 +1,35 @@
+/**
+ * @provides sprite-minicons-css
+ * @generated
+ */
+
+.sprite-minicons {
+  background-image: url(/rsrc/image/sprite-minicons.png);
+  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-minicons {
+    background-image: url(/rsrc/image/sprite-minicons-X2.png);
+    background-size: 34px 34px;
+  }
+}
+
+
+.minicons-company-white {
+  background-position: 0px 0px;
+}
+
+.minicons-move-white {
+  background-position: -17px 0px;
+}
+
+.minicons-public-white {
+  background-position: 0px -17px;
+}
+
+.minicons-restricted-white {
+  background-position: -17px -17px;
+}