Add Base Grey set of colors

Summary: This adds a set of standard grey colors for use in shading objects and importance. I'll follow up and start implementing in another diff.

Test Plan: Color UI Examples, Adobe Kuler

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, aran

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

src/applications/uiexample/examples/PHUIColorPalletteExample.php

@@ -13,40 +13,43 @@ final class PHUIColorPalletteExample extends PhabricatorUIExample {
   public function renderExample() {
 
     $colors = array(
-      'c0392b' => 'Base Red',
-      'f4dddb' => '83% Red',
-      'e67e22' => 'Base Orange',
-      'f7e2d4' => '83% Orange',
-      'f1c40f' => 'Base Yellow',
-      'fdf5d4' => '83% Yellow',
-      '139543' => 'Base Green',
-      'd7eddf' => '83% Green',
-      '2980b9' => 'Base Blue',
-      'daeaf3' => '83% Blue',
-      '3498db' => 'Sky Base',
-      'ddeef9' => '83% Sky',
-      'c6539d' => 'Base Indigo',
-      'f5e2ef' => '83% Indigo',
-      '8e44ad' => 'Base Violet',
-      'ecdff1' => '83% Violet'
+      'c0392b' => 'Base Red {$red}',
+      'f4dddb' => '83% Red {$lightred}',
+      'e67e22' => 'Base Orange {$orange}',
+      'f7e2d4' => '83% Orange {$lightorange}',
+      'f1c40f' => 'Base Yellow {$yellow}',
+      'fdf5d4' => '83% Yellow {$lightyellow}',
+      '139543' => 'Base Green {$green}',
+      'd7eddf' => '83% Green {$lightgreen}',
+      '2980b9' => 'Base Blue {$blue}',
+      'daeaf3' => '83% Blue {$lightblue}',
+      '3498db' => 'Sky Base {$sky}',
+      'ddeef9' => '83% Sky {$lightsky}',
+      'c6539d' => 'Base Indigo {$indigo}',
+      'f5e2ef' => '83% Indigo {$lightindigo}',
+      '8e44ad' => 'Base Violet {$violet}',
+      'ecdff1' => '83% Violet {$lightviolet}'
     );
 
-    $darks = array(
-      'ecf0f1',
-      'bdc3c7',
-      '95a5a6',
-      '7f8c8d',
-      '34495e',
-      '2c3e50');
+    $greys = array(
+      'BBC0CC' => 'Light Grey Border {$lightgreyborder}',
+      'A2A6B0' => 'Grey Border {$greyborder}',
+      '676A70' => 'Dark Grey Border {$darkgreyborder}',
+      '92969D' => 'Light Grey Text {$lightgreytext}',
+      '57595E' => 'Grey Text {$greytext}',
+      '4B4D51' => 'Dark Grey Text [$darkgreytext}',
+      'F7F7F7' => 'Light Grey Background {$lightgreybackground}',
+      'EBECEE' => 'Grey Background {$greybackground}',
+    );
 
     $d_column = array();
-    foreach ($darks as $dark) {
+    foreach ($greys as $color => $name) {
       $d_column[] = phutil_tag(
         'div',
         array(
-          'style' => 'background-color: #'.$dark.';',
+          'style' => 'background-color: #'.$color.';',
           'class' => 'pl'),
-        '#'.$dark);
+        $name.' #'.$color);
     }
 
     $c_column = array();
@@ -80,7 +83,7 @@ final class PHUIColorPalletteExample extends PhabricatorUIExample {
       ->addPadding(PHUI::PADDING_LARGE);
 
     $head1 = id(new PhabricatorHeaderView())
-      ->setHeader(pht('Darks'));
+      ->setHeader(pht('Greys'));
 
     $wrap1 = id(new PHUIBoxView())
       ->appendChild($layout1)

src/infrastructure/celerity/CelerityResourceTransformer.php

@@ -131,6 +131,7 @@ final class CelerityResourceTransformer {
 
   public function replaceCSSVariable($matches) {
     static $map = array(
+      // Base Colors
       'red'           => '#c0392b',
       'lightred'      => '#f4dddb',
       'orange'        => '#e67e22',
@@ -147,6 +148,16 @@ final class CelerityResourceTransformer {
       'lightindigo'   => '#f5e2ef',
       'violet'        => '#8e44ad',
       'lightviolet'   => '#ecdff1',
+
+      // Base Greys
+      'lightgreyborder'     => '#BBC0CC',
+      'greyborder'          => '#A2A6B0',
+      'darkgreyborder'      => '#676A70',
+      'lightgreytext'       => '#92969D',
+      'greytext'            => '#57595E',
+      'darkgreytext'        => '#4B4D51',
+      'lightgreybackground' => '#F7F7F7',
+      'greybackground'      => '#EBECEE',
     );
 
     $var_name = $matches[1];