Modularize Celerity postprocessors

Summary: Not sure if we want this, but it seems to work fine.

Test Plan: {F516736}

Reviewers: joshuaspence, chad

Reviewed By: joshuaspence, chad

Subscribers: joshuaspence, epriestley

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '87e6e18f',
+    'core.pkg.css' => '173fc33c',
     'core.pkg.js' => 'f1e8abd7',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'fe951924',
@@ -33,7 +33,7 @@ return array(
     'rsrc/css/aphront/typeahead.css' => '0e403212',
     'rsrc/css/application/almanac/almanac.css' => 'dbb9b3af',
     'rsrc/css/application/auth/auth.css' => 'dc62cb0e',
-    'rsrc/css/application/base/main-menu-view.css' => '44b4a289',
+    'rsrc/css/application/base/main-menu-view.css' => '3cd48671',
     'rsrc/css/application/base/notification-menu.css' => 'f31c0bde',
     'rsrc/css/application/base/phabricator-application-launch-view.css' => '9a233ed6',
     'rsrc/css/application/base/phui-theme.css' => 'd4a49411',
@@ -107,7 +107,7 @@ return array(
     'rsrc/css/application/slowvote/slowvote.css' => '266df6a1',
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
-    'rsrc/css/core/core.css' => '47adcf87',
+    'rsrc/css/core/core.css' => 'a76cefc9',
     'rsrc/css/core/remarkup.css' => 'a4f23e80',
     'rsrc/css/core/syntax.css' => '9fd11da8',
     'rsrc/css/core/z-index.css' => '63689f49',
@@ -708,7 +708,7 @@ return array(
     'phabricator-busy' => '59a7976a',
     'phabricator-chatlog-css' => 'f1971c1c',
     'phabricator-content-source-view-css' => '4b8b05d4',
-    'phabricator-core-css' => '47adcf87',
+    'phabricator-core-css' => 'a76cefc9',
     'phabricator-countdown-css' => '86b7b0a0',
     'phabricator-dashboard-css' => 'eb458607',
     'phabricator-drag-and-drop-file-upload' => '07de8873',
@@ -722,7 +722,7 @@ return array(
     'phabricator-hovercard-view-css' => '0a08eb6c',
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => 'c1700f6f',
-    'phabricator-main-menu-view' => '44b4a289',
+    'phabricator-main-menu-view' => '3cd48671',
     'phabricator-nav-view-css' => '0ecd30a1',
     'phabricator-notification' => '0c6946e7',
     'phabricator-notification-css' => '9c279160',
@@ -1063,6 +1063,9 @@ return array(
       'javelin-util',
       'javelin-uri',
     ),
+    '3cd48671' => array(
+      'phui-theme-css',
+    ),
     '3ee3408b' => array(
       'javelin-behavior',
       'javelin-behavior-device',
@@ -1094,9 +1097,6 @@ return array(
       'javelin-uri',
       'javelin-install',
     ),
-    '44b4a289' => array(
-      'phui-theme-css',
-    ),
     '453c5375' => array(
       'javelin-behavior',
       'javelin-dom',

src/__phutil_library_map__.php

@@ -179,12 +179,16 @@ phutil_register_library_map(array(
     'CalendarTimeUtil' => 'applications/calendar/util/CalendarTimeUtil.php',
     'CalendarTimeUtilTestCase' => 'applications/calendar/__tests__/CalendarTimeUtilTestCase.php',
     'CelerityAPI' => 'applications/celerity/CelerityAPI.php',
+    'CelerityDefaultPostprocessor' => 'applications/celerity/postprocessor/CelerityDefaultPostprocessor.php',
+    'CelerityHighContrastPostprocessor' => 'applications/celerity/postprocessor/CelerityHighContrastPostprocessor.php',
     'CelerityManagementMapWorkflow' => 'applications/celerity/management/CelerityManagementMapWorkflow.php',
     'CelerityManagementWorkflow' => 'applications/celerity/management/CelerityManagementWorkflow.php',
     'CelerityPhabricatorResourceController' => 'applications/celerity/controller/CelerityPhabricatorResourceController.php',
     'CelerityPhabricatorResources' => 'applications/celerity/resources/CelerityPhabricatorResources.php',
     'CelerityPhysicalResources' => 'applications/celerity/resources/CelerityPhysicalResources.php',
     'CelerityPhysicalResourcesTestCase' => 'applications/celerity/resources/__tests__/CelerityPhysicalResourcesTestCase.php',
+    'CelerityPostprocessor' => 'applications/celerity/postprocessor/CelerityPostprocessor.php',
+    'CelerityPostprocessorTestCase' => 'applications/celerity/__tests__/CelerityPostprocessorTestCase.php',
     'CelerityResourceController' => 'applications/celerity/controller/CelerityResourceController.php',
     'CelerityResourceGraph' => 'applications/celerity/CelerityResourceGraph.php',
     'CelerityResourceMap' => 'applications/celerity/CelerityResourceMap.php',
@@ -3504,12 +3508,16 @@ phutil_register_library_map(array(
     'CalendarTimeUtil' => 'Phobject',
     'CalendarTimeUtilTestCase' => 'PhabricatorTestCase',
     'CelerityAPI' => 'Phobject',
+    'CelerityDefaultPostprocessor' => 'CelerityPostprocessor',
+    'CelerityHighContrastPostprocessor' => 'CelerityPostprocessor',
     'CelerityManagementMapWorkflow' => 'CelerityManagementWorkflow',
     'CelerityManagementWorkflow' => 'PhabricatorManagementWorkflow',
     'CelerityPhabricatorResourceController' => 'CelerityResourceController',
     'CelerityPhabricatorResources' => 'CelerityResourcesOnDisk',
     'CelerityPhysicalResources' => 'CelerityResources',
     'CelerityPhysicalResourcesTestCase' => 'PhabricatorTestCase',
+    'CelerityPostprocessor' => 'Phobject',
+    'CelerityPostprocessorTestCase' => 'PhabricatorTestCase',
     'CelerityResourceController' => 'PhabricatorController',
     'CelerityResourceGraph' => 'AbstractDirectedGraph',
     'CelerityResourceMap' => 'Phobject',

src/aphront/response/AphrontAjaxResponse.php

@@ -59,6 +59,19 @@ final class AphrontAjaxResponse extends AphrontResponse {
     $this->encodeJSONForHTTPResponse($content);
 
     $response = CelerityAPI::getStaticResourceResponse();
+
+    $request = $this->getRequest();
+    if ($request) {
+      $viewer = $request->getViewer();
+      if ($viewer) {
+        $postprocessor_key = $viewer->getPreference(
+          PhabricatorUserPreferences::PREFERENCE_RESOURCE_POSTPROCESSOR);
+        if (strlen($postprocessor_key)) {
+          $response->setPostprocessorKey($postprocessor_key);
+        }
+      }
+    }
+
     $object = $response->buildAjaxResponse(
       $content['payload'],
       $this->error);

src/applications/celerity/CelerityResourceTransformer.php

@@ -7,6 +7,17 @@ final class CelerityResourceTransformer extends Phobject {
   private $celerityMap;
   private $translateURICallback;
   private $currentPath;
+  private $postprocessorKey;
+  private $variableMap;
+
+  public function setPostprocessorKey($postprocessor_key) {
+    $this->postprocessorKey = $postprocessor_key;
+    return $this;
+  }
+
+  public function getPostprocessorKey() {
+    return $this->postprocessorKey;
+  }
 
   public function setTranslateURICallback($translate_uricallback) {
     $this->translateURICallback = $translate_uricallback;
@@ -169,179 +180,26 @@ final class CelerityResourceTransformer extends Phobject {
       $data);
   }
 
-  public static function getCSSVariableMap() {
+  public function getCSSVariableMap() {
-    return array(
+    $postprocessor_key = $this->getPostprocessorKey();
-      // Fonts
+    $postprocessor = CelerityPostprocessor::getPostprocessor(
-      'basefont' => "13px 'Segoe UI', 'Segoe UI Web Regular', ".
+      $postprocessor_key);
-        "'Segoe UI Symbol', 'Lato', 'Helvetica Neue', Helvetica, ".
-        "Arial, sans-serif",
 
-      'fontfamily' => "'Segoe UI', 'Segoe UI Web Regular', ".
+    if (!$postprocessor) {
-        "'Segoe UI Symbol', 'Lato', 'Helvetica Neue', Helvetica, ".
+      $postprocessor = CelerityPostprocessor::getPostprocessor(
-        "Arial, sans-serif",
+        CelerityDefaultPostprocessor::POSTPROCESSOR_KEY);
+    }
 
-      // Drop Shadow
+    return $postprocessor->getVariables();
-      'dropshadow' => '0 1px 6px rgba(0, 0, 0, .25)',
-      'whitetextshadow' => '0 1px 0 rgba(255, 255, 255, 1)',
-
-      // Anchors
-      'anchor' => '#136CB2',
-
-      // Base Colors
-      'red'           => '#c0392b',
-      'lightred'      => '#f4dddb',
-      'orange'        => '#e67e22',
-      'lightorange'   => '#f7e2d4',
-      'yellow'        => '#f1c40f',
-      'lightyellow'   => '#fdf5d4',
-      'green'         => '#139543',
-      'lightgreen'    => '#d7eddf',
-      'blue'          => '#2980b9',
-      'lightblue'     => '#daeaf3',
-      'sky'           => '#3498db',
-      'lightsky'      => '#ddeef9',
-      'fire'          => '#e62f17',
-      'indigo'        => '#6e5cb6',
-      'lightindigo'   => '#eae6f7',
-      'pink'          => '#da49be',
-      'lightpink'     => '#fbeaf8',
-      'violet'        => '#8e44ad',
-      'lightviolet'   => '#ecdff1',
-      'charcoal'      => '#4b4d51',
-      'backdrop'      => '#dadee7',
-      'hoverwhite'    => 'rgba(255,255,255,.6)',
-      'hovergrey'     => '#c5cbcf',
-      'hoverblue'     => '#eceff5',
-      'hoverborder'   => '#dfe1e9',
-      'hoverselectedgrey' => '#bbc4ca',
-      'hoverselectedblue' => '#e6e9ee',
-      'borderinset' => 'inset 0 0 0 1px rgba(55,55,55,.15)',
-
-      // Base Greys
-      'lightgreyborder'     => '#C7CCD9',
-      'greyborder'          => '#A1A6B0',
-      'darkgreyborder'      => '#676A70',
-      'lightgreytext'       => '#92969D',
-      'greytext'            => '#74777D',
-      'darkgreytext'        => '#4B4D51',
-      'lightgreybackground' => '#F7F7F7',
-      'greybackground'      => '#EBECEE',
-      'darkgreybackground'  => '#DFE0E2',
-
-      // Base Blues
-      'thinblueborder'      => '#DDE8EF',
-      'lightblueborder'     => '#BFCFDA',
-      'blueborder'          => '#8C98B8',
-      'darkblueborder'      => '#626E82',
-      'lightbluebackground' => '#F8F9FC',
-      'bluebackground'      => '#DAE7FF',
-      'lightbluetext'       => '#8C98B8',
-      'bluetext'            => '#6B748C',
-      'darkbluetext'        => '#464C5C',
-
-      // Base Greens
-      'lightgreenborder'      => '#bfdac1',
-      'greenborder'           => '#8cb89c',
-      'greentext'             => '#3e6d35',
-      'lightgreenbackground'  => '#e6f2e4',
-
-      // Base Red
-      'lightredborder'        => '#f4c6c6',
-      'redborder'             => '#eb9797',
-      'redtext'               => '#802b2b',
-      'lightredbackground'    => '#f5e1e1',
-
-      // Base Violet
-      'lightvioletborder'     => '#cfbddb',
-      'violetborder'          => '#b589ba',
-      'violettext'            => '#603c73',
-      'lightvioletbackground' => '#e9dfee',
-
-      // Shades are a more muted set of our base colors
-      // better suited to blending into other UIs.
-
-      // Shade Red
-      'sh-lightredborder'     => '#efcfcf',
-      'sh-redborder'          => '#d1abab',
-      'sh-redicon'            => '#c85a5a',
-      'sh-redtext'            => '#a53737',
-      'sh-redbackground'      => '#f7e6e6',
-
-      // Shade Orange
-      'sh-lightorangeborder'  => '#f8dcc3',
-      'sh-orangeborder'       => '#dbb99e',
-      'sh-orangeicon'         => '#e78331',
-      'sh-orangetext'         => '#ba6016',
-      'sh-orangebackground'   => '#fbede1',
-
-      // Shade Yellow
-      'sh-lightyellowborder'  => '#e9dbcd',
-      'sh-yellowborder'       => '#c9b8a8',
-      'sh-yellowicon'         => '#9b946e',
-      'sh-yellowtext'         => '#726f56',
-      'sh-yellowbackground'   => '#fdf3da',
-
-      // Shade Green
-      'sh-lightgreenborder'   => '#c6e6c7',
-      'sh-greenborder'        => '#a0c4a1',
-      'sh-greenicon'          => '#4ca74e',
-      'sh-greentext'          => '#326d34',
-      'sh-greenbackground'    => '#ddefdd',
-
-      // Shade Blue
-      'sh-lightblueborder'    => '#cfdbe3',
-      'sh-blueborder'         => '#a7b5bf',
-      'sh-blueicon'           => '#6b748c',
-      'sh-bluetext'           => '#464c5c',
-      'sh-bluebackground'     => '#dee7f8',
-
-      // Shade Indigo
-      'sh-lightindigoborder'  => '#d1c9ee',
-      'sh-indigoborder'       => '#bcb4da',
-      'sh-indigoicon'         => '#8672d4',
-      'sh-indigotext'         => '#6e5cb6',
-      'sh-indigobackground'   => '#eae6f7',
-
-      // Shade Violet
-      'sh-lightvioletborder'  => '#e0d1e7',
-      'sh-violetborder'       => '#bcabc5',
-      'sh-violeticon'         => '#9260ad',
-      'sh-violettext'         => '#69427f',
-      'sh-violetbackground'   => '#efe8f3',
-
-      // Shade Pink
-      'sh-lightpinkborder'  => '#f6d5ef',
-      'sh-pinkborder'       => '#d5aecd',
-      'sh-pinkicon'         => '#e26fcb',
-      'sh-pinktext'         => '#da49be',
-      'sh-pinkbackground'   => '#fbeaf8',
-
-      // Shade Grey
-      'sh-lightgreyborder'    => '#d8d8d8',
-      'sh-greyborder'         => '#b2b2b2',
-      'sh-greyicon'           => '#757575',
-      'sh-greytext'           => '#555555',
-      'sh-greybackground'     => '#e7e7e7',
-
-      // Shade Disabled
-      'sh-lightdisabledborder'  => '#e5e5e5',
-      'sh-disabledborder'       => '#cbcbcb',
-      'sh-disabledicon'         => '#bababa',
-      'sh-disabledtext'         => '#a6a6a6',
-      'sh-disabledbackground'   => '#f3f3f3',
-
-    );
   }
 
-
   public function replaceCSSVariable($matches) {
-    static $map;
+    if (!$this->variableMap) {
-    if (!$map) {
+      $this->variableMap = $this->getCSSVariableMap();
-      $map = self::getCSSVariableMap();
     }
 
     $var_name = $matches[1];
-    if (empty($map[$var_name])) {
+    if (empty($this->variableMap[$var_name])) {
       $path = $this->currentPath;
       throw new Exception(
         pht(
@@ -350,7 +208,7 @@ final class CelerityResourceTransformer extends Phobject {
           $var_name));
     }
 
-    return $map[$var_name];
+    return $this->variableMap[$var_name];
   }
 
   public function replaceCSSPrintRule($matches) {

src/applications/celerity/CelerityStaticResourceResponse.php

@@ -15,6 +15,7 @@ final class CelerityStaticResourceResponse extends Phobject {
   private $metadataBlock = 0;
   private $behaviors = array();
   private $hasRendered = array();
+  private $postprocessorKey;
 
   public function __construct() {
     if (isset($_REQUEST['__metablock__'])) {
@@ -32,6 +33,15 @@ final class CelerityStaticResourceResponse extends Phobject {
     return $this->metadataBlock;
   }
 
+  public function setPostprocessorKey($postprocessor_key) {
+    $this->postprocessorKey = $postprocessor_key;
+    return $this;
+  }
+
+  public function getPostprocessorKey() {
+    return $this->postprocessorKey;
+  }
+
   /**
    * Register a behavior for initialization.
    *
@@ -300,6 +310,12 @@ final class CelerityStaticResourceResponse extends Phobject {
 
     $uri = $map->getURIForName($name);
 
+    // If we have a postprocessor selected, add it to the URI.
+    $postprocessor_key = $this->getPostprocessorKey();
+    if ($postprocessor_key) {
+      $uri = preg_replace('@^/res/@', '/res/'.$postprocessor_key.'X/', $uri);
+    }
+
     // In developer mode, we dump file modification times into the URI. When a
     // page is reloaded in the browser, any resources brought in by Ajax calls
     // do not trigger revalidation, so without this it's very difficult to get

src/applications/celerity/__tests__/CelerityPostprocessorTestCase.php

@@ -0,0 +1,10 @@
+<?php
+
+final class CelerityPostprocessorTestCase extends PhabricatorTestCase {
+
+  public function testGetAllCelerityPostprocessors() {
+    CelerityPostprocessor::getAllPostprocessors();
+    $this->assertTrue(true);
+  }
+
+}

src/applications/celerity/application/PhabricatorCelerityApplication.php

@@ -22,6 +22,7 @@ final class PhabricatorCelerityApplication extends PhabricatorApplication {
     return array(
       '/res/' => array(
         '(?:(?P<mtime>[0-9]+)T/)?'.
+        '(?:(?P<postprocessor>[^/]+)X/)?'.
         '(?P<library>[^/]+)/'.
         '(?P<hash>[a-f0-9]{8})/'.
         '(?P<path>.+\.(?:'.$extensions.'))'

src/applications/celerity/controller/CelerityPhabricatorResourceController.php

@@ -11,6 +11,7 @@ final class CelerityPhabricatorResourceController
   private $path;
   private $hash;
   private $library;
+  private $postprocessorKey;
 
   public function getCelerityResourceMap() {
     return CelerityResourceMap::getNamedInstance($this->library);
@@ -20,6 +21,7 @@ final class CelerityPhabricatorResourceController
     $this->path = $data['path'];
     $this->hash = $data['hash'];
     $this->library = $data['library'];
+    $this->postprocessorKey = idx($data, 'postprocessor');
   }
 
   public function processRequest() {
@@ -42,7 +44,12 @@ final class CelerityPhabricatorResourceController
 
     return id(new CelerityResourceTransformer())
       ->setMinify($should_minify)
+      ->setPostprocessorKey($this->postprocessorKey)
       ->setCelerityMap($this->getCelerityResourceMap());
   }
 
+  protected function getCacheKey($path) {
+    return parent::getCacheKey($path.';'.$this->postprocessorKey);
+  }
+
 }

src/applications/celerity/controller/CelerityResourceController.php

@@ -164,7 +164,7 @@ abstract class CelerityResourceController extends PhabricatorController {
     return isset($types[$type]);
   }
 
-  private function getCacheKey($path) {
+  protected function getCacheKey($path) {
     return 'celerity:'.PhabricatorHash::digestToLength($path, 64);
   }
 

src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php

@@ -0,0 +1,190 @@
+<?php
+
+final class CelerityDefaultPostprocessor
+  extends CelerityPostprocessor {
+
+  const POSTPROCESSOR_KEY = 'default';
+
+  public function getPostprocessorKey() {
+    return self::POSTPROCESSOR_KEY;
+  }
+
+  public function getPostprocessorName() {
+    return pht('Use Default Colors');
+  }
+
+  public function buildDefaultPostprocessor() {
+    return null;
+  }
+
+  public function buildVariables() {
+    return array(
+      // Fonts
+      'basefont' => "13px 'Segoe UI', 'Segoe UI Web Regular', ".
+        "'Segoe UI Symbol', 'Lato', 'Helvetica Neue', Helvetica, ".
+        "Arial, sans-serif",
+
+      'fontfamily' => "'Segoe UI', 'Segoe UI Web Regular', ".
+        "'Segoe UI Symbol', 'Lato', 'Helvetica Neue', Helvetica, ".
+        "Arial, sans-serif",
+
+      // Drop Shadow
+      'dropshadow' => '0 1px 6px rgba(0, 0, 0, .25)',
+      'whitetextshadow' => '0 1px 0 rgba(255, 255, 255, 1)',
+
+      // Anchors
+      'anchor' => '#136CB2',
+
+      // Base Colors
+      'red'           => '#c0392b',
+      'lightred'      => '#f4dddb',
+      'orange'        => '#e67e22',
+      'lightorange'   => '#f7e2d4',
+      'yellow'        => '#f1c40f',
+      'lightyellow'   => '#fdf5d4',
+      'green'         => '#139543',
+      'lightgreen'    => '#d7eddf',
+      'blue'          => '#2980b9',
+      'lightblue'     => '#daeaf3',
+      'sky'           => '#3498db',
+      'lightsky'      => '#ddeef9',
+      'fire'          => '#e62f17',
+      'indigo'        => '#6e5cb6',
+      'lightindigo'   => '#eae6f7',
+      'pink'          => '#da49be',
+      'lightpink'     => '#fbeaf8',
+      'violet'        => '#8e44ad',
+      'lightviolet'   => '#ecdff1',
+      'charcoal'      => '#4b4d51',
+      'backdrop'      => '#dadee7',
+      'hoverwhite'    => 'rgba(255,255,255,.6)',
+      'hovergrey'     => '#c5cbcf',
+      'hoverblue'     => '#eceff5',
+      'hoverborder'   => '#dfe1e9',
+      'hoverselectedgrey' => '#bbc4ca',
+      'hoverselectedblue' => '#e6e9ee',
+      'borderinset' => 'inset 0 0 0 1px rgba(55,55,55,.15)',
+
+      // Base Greys
+      'lightgreyborder'     => '#C7CCD9',
+      'greyborder'          => '#A1A6B0',
+      'darkgreyborder'      => '#676A70',
+      'lightgreytext'       => '#92969D',
+      'greytext'            => '#74777D',
+      'darkgreytext'        => '#4B4D51',
+      'lightgreybackground' => '#F7F7F7',
+      'greybackground'      => '#EBECEE',
+      'darkgreybackground'  => '#DFE0E2',
+
+      // Base Blues
+      'thinblueborder'      => '#DDE8EF',
+      'lightblueborder'     => '#BFCFDA',
+      'blueborder'          => '#8C98B8',
+      'darkblueborder'      => '#626E82',
+      'lightbluebackground' => '#F8F9FC',
+      'bluebackground'      => '#DAE7FF',
+      'lightbluetext'       => '#8C98B8',
+      'bluetext'            => '#6B748C',
+      'darkbluetext'        => '#464C5C',
+
+      // Base Greens
+      'lightgreenborder'      => '#bfdac1',
+      'greenborder'           => '#8cb89c',
+      'greentext'             => '#3e6d35',
+      'lightgreenbackground'  => '#e6f2e4',
+
+      // Base Red
+      'lightredborder'        => '#f4c6c6',
+      'redborder'             => '#eb9797',
+      'redtext'               => '#802b2b',
+      'lightredbackground'    => '#f5e1e1',
+
+      // Base Violet
+      'lightvioletborder'     => '#cfbddb',
+      'violetborder'          => '#b589ba',
+      'violettext'            => '#603c73',
+      'lightvioletbackground' => '#e9dfee',
+
+      // Shades are a more muted set of our base colors
+      // better suited to blending into other UIs.
+
+      // Shade Red
+      'sh-lightredborder'     => '#efcfcf',
+      'sh-redborder'          => '#d1abab',
+      'sh-redicon'            => '#c85a5a',
+      'sh-redtext'            => '#a53737',
+      'sh-redbackground'      => '#f7e6e6',
+
+      // Shade Orange
+      'sh-lightorangeborder'  => '#f8dcc3',
+      'sh-orangeborder'       => '#dbb99e',
+      'sh-orangeicon'         => '#e78331',
+      'sh-orangetext'         => '#ba6016',
+      'sh-orangebackground'   => '#fbede1',
+
+      // Shade Yellow
+      'sh-lightyellowborder'  => '#e9dbcd',
+      'sh-yellowborder'       => '#c9b8a8',
+      'sh-yellowicon'         => '#9b946e',
+      'sh-yellowtext'         => '#726f56',
+      'sh-yellowbackground'   => '#fdf3da',
+
+      // Shade Green
+      'sh-lightgreenborder'   => '#c6e6c7',
+      'sh-greenborder'        => '#a0c4a1',
+      'sh-greenicon'          => '#4ca74e',
+      'sh-greentext'          => '#326d34',
+      'sh-greenbackground'    => '#ddefdd',
+
+      // Shade Blue
+      'sh-lightblueborder'    => '#cfdbe3',
+      'sh-blueborder'         => '#a7b5bf',
+      'sh-blueicon'           => '#6b748c',
+      'sh-bluetext'           => '#464c5c',
+      'sh-bluebackground'     => '#dee7f8',
+
+      // Shade Indigo
+      'sh-lightindigoborder'  => '#d1c9ee',
+      'sh-indigoborder'       => '#bcb4da',
+      'sh-indigoicon'         => '#8672d4',
+      'sh-indigotext'         => '#6e5cb6',
+      'sh-indigobackground'   => '#eae6f7',
+
+      // Shade Violet
+      'sh-lightvioletborder'  => '#e0d1e7',
+      'sh-violetborder'       => '#bcabc5',
+      'sh-violeticon'         => '#9260ad',
+      'sh-violettext'         => '#69427f',
+      'sh-violetbackground'   => '#efe8f3',
+
+      // Shade Pink
+      'sh-lightpinkborder'  => '#f6d5ef',
+      'sh-pinkborder'       => '#d5aecd',
+      'sh-pinkicon'         => '#e26fcb',
+      'sh-pinktext'         => '#da49be',
+      'sh-pinkbackground'   => '#fbeaf8',
+
+      // Shade Grey
+      'sh-lightgreyborder'    => '#d8d8d8',
+      'sh-greyborder'         => '#b2b2b2',
+      'sh-greyicon'           => '#757575',
+      'sh-greytext'           => '#555555',
+      'sh-greybackground'     => '#e7e7e7',
+
+      // Shade Disabled
+      'sh-lightdisabledborder'  => '#e5e5e5',
+      'sh-disabledborder'       => '#cbcbcb',
+      'sh-disabledicon'         => '#bababa',
+      'sh-disabledtext'         => '#a6a6a6',
+      'sh-disabledbackground'   => '#f3f3f3',
+
+      // Background color for "light" themes.
+      'page.background.light' => '#f7f7f7',
+
+      // Background color for "dark" themes.
+      'page.background.dark' => '#ebecee',
+
+    );
+  }
+
+}

src/applications/celerity/postprocessor/CelerityHighContrastPostprocessor.php

@@ -0,0 +1,27 @@
+<?php
+
+final class CelerityHighContrastPostprocessor
+  extends CelerityPostprocessor {
+
+  public function getPostprocessorKey() {
+    return 'contrast';
+  }
+
+  public function getPostprocessorName() {
+    return pht('Use High Contrast Colors');
+  }
+
+  public function buildVariables() {
+    return array(
+      'page.background.light' => '#dfdfdf',
+      'page.background.dark' => '#dfdfdf',
+
+      'lightblueborder' => '#000099',
+      'blueborder' => '#000066',
+
+      'lightbluetext' => '#333366',
+      'bluetext' => '#222244',
+    );
+  }
+
+}

src/applications/celerity/postprocessor/CelerityPostprocessor.php

@@ -0,0 +1,69 @@
+<?php
+
+abstract class CelerityPostprocessor
+  extends Phobject {
+
+  private $default;
+
+  abstract public function getPostprocessorKey();
+  abstract public function getPostprocessorName();
+  abstract public function buildVariables();
+
+  public function buildDefaultPostprocessor() {
+    return new CelerityDefaultPostprocessor();
+  }
+
+  final public function getVariables() {
+    $variables = $this->buildVariables();
+
+    $default = $this->getDefault();
+    if ($default) {
+      $variables += $default->getVariables();
+    }
+
+    return $variables;
+  }
+
+  final public function getDefault() {
+    if ($this->default === null) {
+      $this->default = $this->buildDefaultPostprocessor();
+    }
+    return $this->default;
+  }
+
+  final public static function getPostprocessor($key) {
+    return idx(self::getAllPostprocessors(), $key);
+  }
+
+  final public static function getAllPostprocessors() {
+    static $postprocessors;
+
+    if ($postprocessors === null) {
+      $objects = id(new PhutilSymbolLoader())
+        ->setAncestorClass(__CLASS__)
+        ->loadObjects();
+
+      $map = array();
+      foreach ($objects as $object) {
+        $key = $object->getPostprocessorKey();
+        if (empty($map[$key])) {
+          $map[$key] = $object;
+          continue;
+        }
+
+        throw new Exception(
+          pht(
+            'Two postprocessors (of classes "%s" and "%s") define the same '.
+            'postprocessor key ("%s"). Each postprocessor must define a '.
+            'unique key.',
+            get_class($object),
+            get_class($map[$key]),
+            $key));
+      }
+      $postprocessors = $map;
+    }
+
+    return $postprocessors;
+  }
+
+}

src/applications/files/controller/PhabricatorFileComposeController.php

@@ -322,7 +322,9 @@ final class PhabricatorFileComposeController
   private function composeImage($color, $icon_data) {
     $icon_img = imagecreatefromstring($icon_data);
 
-    $map = CelerityResourceTransformer::getCSSVariableMap();
+    $map = id(new CelerityResourceTransformer())
+      ->getCSSVariableMap();
+
     $color_string = idx($map, $color, '#ff00ff');
     $color_const = hexdec(trim($color_string, '#'));
 

src/applications/settings/panel/PhabricatorDisplayPreferencesSettingsPanel.php

@@ -25,6 +25,8 @@ final class PhabricatorDisplayPreferencesSettingsPanel
     $pref_titles       = PhabricatorUserPreferences::PREFERENCE_TITLES;
     $pref_monospaced_textareas =
       PhabricatorUserPreferences::PREFERENCE_MONOSPACED_TEXTAREAS;
+    $pref_postprocessor =
+      PhabricatorUserPreferences::PREFERENCE_RESOURCE_POSTPROCESSOR;
 
     $errors = array();
     $e_editor = null;
@@ -42,6 +44,9 @@ final class PhabricatorDisplayPreferencesSettingsPanel
       $preferences->setPreference(
         $pref_monospaced_textareas,
         $request->getStr($pref_monospaced_textareas));
+      $preferences->setPreference(
+        $pref_postprocessor,
+        $request->getStr($pref_postprocessor));
 
       $editor_pattern = $preferences->getPreference($pref_editor);
       if (strlen($editor_pattern)) {
@@ -106,8 +111,25 @@ EXAMPLE;
       'Input should be valid CSS "font" declaration, such as '.
       '"13px Consolas"');
 
+    $postprocessor_map = CelerityPostprocessor::getAllPostprocessors();
+    $postprocessor_map = mpull($postprocessor_map, 'getPostprocessorName');
+    asort($postprocessor_map);
+    $postprocessor_order = array(
+      CelerityDefaultPostprocessor::POSTPROCESSOR_KEY,
+    );
+
+    $postprocessor_map = array_select_keys(
+      $postprocessor_map,
+      $postprocessor_order) + $postprocessor_map;
+
     $form = id(new AphrontFormView())
       ->setUser($user)
+      ->appendControl(
+        id(new AphrontFormSelectControl())
+          ->setLabel(pht('Accessibility'))
+          ->setName($pref_postprocessor)
+          ->setValue($preferences->getPreference($pref_postprocessor))
+          ->setOptions($postprocessor_map))
       ->appendChild(
         id(new AphrontFormSelectControl())
           ->setLabel(pht('Page Titles'))

src/applications/settings/storage/PhabricatorUserPreferences.php

@@ -38,6 +38,8 @@ final class PhabricatorUserPreferences extends PhabricatorUserDAO {
   const PREFERENCE_CONPH_NOTIFICATIONS = 'conph-notifications';
   const PREFERENCE_CONPHERENCE_COLUMN  = 'conpherence-column';
 
+  const PREFERENCE_RESOURCE_POSTPROCESSOR = 'resource-postprocessor';
+
   // These are in an unusual order for historic reasons.
   const MAILTAG_PREFERENCE_NOTIFY       = 0;
   const MAILTAG_PREFERENCE_EMAIL        = 1;

src/view/page/PhabricatorBarePageView.php

@@ -117,6 +117,17 @@ class PhabricatorBarePageView extends AphrontPageView {
 
     $response = CelerityAPI::getStaticResourceResponse();
 
+    if ($this->getRequest()) {
+      $viewer = $this->getRequest()->getViewer();
+      if ($viewer) {
+        $postprocessor_key = $viewer->getPreference(
+          PhabricatorUserPreferences::PREFERENCE_RESOURCE_POSTPROCESSOR);
+        if (strlen($postprocessor_key)) {
+          $response->setPostProcessorKey($postprocessor_key);
+        }
+      }
+    }
+
     $developer = PhabricatorEnv::getEnvConfig('phabricator.developer-mode');
     return hsprintf(
       '%s%s%s%s%s%s%s%s',

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

@@ -17,7 +17,7 @@
 
 .phabricator-main-menu-background {
   min-height: 43px;
-  background: #ebecee;
+  background-color: #ebecee;
   border-bottom: 1px solid rgba(0,0,0,.1);
 }
 

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

@@ -75,7 +75,7 @@
 /*--- Dark "Classic" ---------------------------------------------------------*/
 
 .phui-theme-dark {
-  background-color: #ebecee;
+  background-color: {$page.background.dark};
 }
 
 .phui-theme-dark .phui-box-border {

webroot/rsrc/css/core/core.css

@@ -47,7 +47,7 @@ body {
   direction: ltr;
   text-align: left;
   unicode-bidi: embed;
-  background: {$lightgreybackground};
+  background: {$page.background.light};
 
   /* By default, the iPhone zooms all text on the page by some percentage when
      you rotate from portrait mode to landscape mode. Disable this, since it