Color Palette

Summary: Picked a set of standard colors. Based on our current Maniphest color set, but tweaked to the same hue with http://color.hailpixel.com/

Test Plan: Not intended to be end all be all, but a decent first cut. Applied to Maniphest and Tags.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

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

src/__celerity_resource_map__.php

@@ -3233,7 +3233,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-object-item-list-view-css' =>
   array(
-    'uri' => '/res/4ba9eeaf/rsrc/css/layout/phabricator-object-item-list-view.css',
+    'uri' => '/res/2a0eb432/rsrc/css/layout/phabricator-object-item-list-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3410,7 +3410,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-tag-view-css' =>
   array(
-    'uri' => '/res/e10bf844/rsrc/css/layout/phabricator-tag-view.css',
+    'uri' => '/res/148230a5/rsrc/css/layout/phabricator-tag-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -4057,7 +4057,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    'd6a36d96' =>
+    '24fadc3c' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -4105,7 +4105,7 @@ celerity_register_resource_map(array(
         40 => 'phabricator-property-list-view-css',
         41 => 'phabricator-tag-view-css',
       ),
-      'uri' => '/res/pkg/d6a36d96/core.pkg.css',
+      'uri' => '/res/pkg/24fadc3c/core.pkg.css',
       'type' => 'css',
     ),
     'f2ad0683' =>
@@ -4299,16 +4299,16 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => 'a7ca34a9',
-    'aphront-dialog-view-css' => 'd6a36d96',
-    'aphront-error-view-css' => 'd6a36d96',
-    'aphront-form-view-css' => 'd6a36d96',
-    'aphront-list-filter-view-css' => 'd6a36d96',
-    'aphront-pager-view-css' => 'd6a36d96',
-    'aphront-panel-view-css' => 'd6a36d96',
-    'aphront-table-view-css' => 'd6a36d96',
-    'aphront-tokenizer-control-css' => 'd6a36d96',
-    'aphront-tooltip-css' => 'd6a36d96',
-    'aphront-typeahead-control-css' => 'd6a36d96',
+    'aphront-dialog-view-css' => '24fadc3c',
+    'aphront-error-view-css' => '24fadc3c',
+    'aphront-form-view-css' => '24fadc3c',
+    'aphront-list-filter-view-css' => '24fadc3c',
+    'aphront-pager-view-css' => '24fadc3c',
+    'aphront-panel-view-css' => '24fadc3c',
+    'aphront-table-view-css' => '24fadc3c',
+    'aphront-tokenizer-control-css' => '24fadc3c',
+    'aphront-tooltip-css' => '24fadc3c',
+    'aphront-typeahead-control-css' => '24fadc3c',
     'differential-changeset-view-css' => 'dd27a69b',
     'differential-core-view-css' => 'dd27a69b',
     'differential-inline-comment-editor' => '9488bb69',
@@ -4322,7 +4322,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => 'dd27a69b',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => 'd6a36d96',
+    'global-drag-and-drop-css' => '24fadc3c',
     'inline-comment-summary-css' => 'dd27a69b',
     'javelin-aphlict' => 'f2ad0683',
     'javelin-behavior' => 'a9f14d76',
@@ -4396,55 +4396,55 @@ celerity_register_resource_map(array(
     'javelin-util' => 'a9f14d76',
     'javelin-vector' => 'a9f14d76',
     'javelin-workflow' => 'a9f14d76',
-    'lightbox-attachment-css' => 'd6a36d96',
+    'lightbox-attachment-css' => '24fadc3c',
     'maniphest-task-summary-css' => 'a7ca34a9',
     'maniphest-transaction-detail-css' => 'a7ca34a9',
-    'phabricator-action-list-view-css' => 'd6a36d96',
-    'phabricator-application-launch-view-css' => 'd6a36d96',
+    'phabricator-action-list-view-css' => '24fadc3c',
+    'phabricator-application-launch-view-css' => '24fadc3c',
     'phabricator-busy' => 'f2ad0683',
     'phabricator-content-source-view-css' => 'dd27a69b',
-    'phabricator-core-css' => 'd6a36d96',
-    'phabricator-crumbs-view-css' => 'd6a36d96',
+    'phabricator-core-css' => '24fadc3c',
+    'phabricator-crumbs-view-css' => '24fadc3c',
     'phabricator-drag-and-drop-file-upload' => '9488bb69',
     'phabricator-dropdown-menu' => 'f2ad0683',
     'phabricator-file-upload' => 'f2ad0683',
-    'phabricator-filetree-view-css' => 'd6a36d96',
-    'phabricator-flag-css' => 'd6a36d96',
-    'phabricator-form-view-css' => 'd6a36d96',
-    'phabricator-header-view-css' => 'd6a36d96',
+    'phabricator-filetree-view-css' => '24fadc3c',
+    'phabricator-flag-css' => '24fadc3c',
+    'phabricator-form-view-css' => '24fadc3c',
+    'phabricator-header-view-css' => '24fadc3c',
     'phabricator-hovercard' => 'f2ad0683',
-    'phabricator-jump-nav' => 'd6a36d96',
+    'phabricator-jump-nav' => '24fadc3c',
     'phabricator-keyboard-shortcut' => 'f2ad0683',
     'phabricator-keyboard-shortcut-manager' => 'f2ad0683',
-    'phabricator-main-menu-view' => 'd6a36d96',
+    'phabricator-main-menu-view' => '24fadc3c',
     'phabricator-menu-item' => 'f2ad0683',
-    'phabricator-nav-view-css' => 'd6a36d96',
+    'phabricator-nav-view-css' => '24fadc3c',
     'phabricator-notification' => 'f2ad0683',
-    'phabricator-notification-css' => 'd6a36d96',
-    'phabricator-notification-menu-css' => 'd6a36d96',
-    'phabricator-object-item-list-view-css' => 'd6a36d96',
+    'phabricator-notification-css' => '24fadc3c',
+    'phabricator-notification-menu-css' => '24fadc3c',
+    'phabricator-object-item-list-view-css' => '24fadc3c',
     'phabricator-object-selector-css' => 'dd27a69b',
     'phabricator-phtize' => 'f2ad0683',
     'phabricator-prefab' => 'f2ad0683',
     'phabricator-project-tag-css' => 'a7ca34a9',
-    'phabricator-property-list-view-css' => 'd6a36d96',
-    'phabricator-remarkup-css' => 'd6a36d96',
+    'phabricator-property-list-view-css' => '24fadc3c',
+    'phabricator-remarkup-css' => '24fadc3c',
     'phabricator-shaped-request' => '9488bb69',
-    'phabricator-side-menu-view-css' => 'd6a36d96',
-    'phabricator-standard-page-view' => 'd6a36d96',
-    'phabricator-tag-view-css' => 'd6a36d96',
+    'phabricator-side-menu-view-css' => '24fadc3c',
+    'phabricator-standard-page-view' => '24fadc3c',
+    'phabricator-tag-view-css' => '24fadc3c',
     'phabricator-textareautils' => 'f2ad0683',
     'phabricator-tooltip' => 'f2ad0683',
-    'phabricator-transaction-view-css' => 'd6a36d96',
-    'phabricator-zindex-css' => 'd6a36d96',
-    'phui-button-css' => 'd6a36d96',
-    'phui-form-css' => 'd6a36d96',
-    'phui-icon-view-css' => 'd6a36d96',
-    'phui-spacing-css' => 'd6a36d96',
-    'sprite-apps-large-css' => 'd6a36d96',
-    'sprite-gradient-css' => 'd6a36d96',
-    'sprite-icons-css' => 'd6a36d96',
-    'sprite-menu-css' => 'd6a36d96',
-    'syntax-highlighting-css' => 'd6a36d96',
+    'phabricator-transaction-view-css' => '24fadc3c',
+    'phabricator-zindex-css' => '24fadc3c',
+    'phui-button-css' => '24fadc3c',
+    'phui-form-css' => '24fadc3c',
+    'phui-icon-view-css' => '24fadc3c',
+    'phui-spacing-css' => '24fadc3c',
+    'sprite-apps-large-css' => '24fadc3c',
+    'sprite-gradient-css' => '24fadc3c',
+    'sprite-icons-css' => '24fadc3c',
+    'sprite-menu-css' => '24fadc3c',
+    'syntax-highlighting-css' => '24fadc3c',
   ),
 ));

src/__phutil_library_map__.php

@@ -688,6 +688,7 @@ phutil_register_library_map(array(
     'PHUIBoxView' => 'view/phui/PHUIBoxView.php',
     'PHUIButtonExample' => 'applications/uiexample/examples/PHUIButtonExample.php',
     'PHUIButtonView' => 'view/phui/PHUIButtonView.php',
+    'PHUIColorPalletteExample' => 'applications/uiexample/examples/PHUIColorPalletteExample.php',
     'PHUIDocumentExample' => 'applications/uiexample/examples/PHUIDocumentExample.php',
     'PHUIDocumentView' => 'view/phui/PHUIDocumentView.php',
     'PHUIFeedStoryExample' => 'applications/uiexample/examples/PHUIFeedStoryExample.php',
@@ -2562,6 +2563,7 @@ phutil_register_library_map(array(
     'PHUIBoxView' => 'AphrontTagView',
     'PHUIButtonExample' => 'PhabricatorUIExample',
     'PHUIButtonView' => 'AphrontTagView',
+    'PHUIColorPalletteExample' => 'PhabricatorUIExample',
     'PHUIDocumentExample' => 'PhabricatorUIExample',
     'PHUIDocumentView' => 'AphrontTagView',
     'PHUIFeedStoryExample' => 'PhabricatorUIExample',

src/applications/uiexample/examples/PHUIColorPalletteExample.php

@@ -0,0 +1,87 @@
+<?php
+
+final class PHUIColorPalletteExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return 'Colors';
+  }
+
+  public function getDescription() {
+    return 'A Standard Palette of Colors for use.';
+  }
+
+  public function renderExample() {
+
+    $colors = array(
+      'c0392b' => 'Base Red',
+      'd35400' => 'Base Orange',
+      'f1c40f' => 'Base Yellow',
+      '27ae60' => 'Base Green',
+      '298094' => 'Base Blue',
+      'c6539d' => 'Base Indigo',
+      '8e44ad' => 'Base Violet',
+    );
+
+    $darks = array(
+      'ecf0f1',
+      'bdc3c7',
+      '95a5a6',
+      '7f8c8d',
+      '34495e',
+      '2c3e50');
+
+    $d_column = array();
+    foreach ($darks as $dark) {
+      $d_column[] = phutil_tag(
+        'div',
+        array(
+          'style' => 'background-color: #'.$dark.';',
+          'class' => 'pl'),
+        '#'.$dark);
+    }
+
+    $c_column = array();
+    foreach ($colors as $color => $name) {
+      $c_column[] = phutil_tag(
+        'div',
+        array(
+          'style' => 'background-color: #'.$color.';',
+          'class' => 'pl'),
+        $name.' #'.$color);
+    }
+
+    $layout1 = id(new PHUIBoxView())
+      ->appendChild($d_column)
+      ->setShadow(true)
+      ->addPadding(PHUI::PADDING_LARGE);
+
+    $layout2 = id(new PHUIBoxView())
+      ->appendChild($c_column)
+      ->setShadow(true)
+      ->addPadding(PHUI::PADDING_LARGE);
+
+    $head1 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Darks'));
+
+    $wrap1 = id(new PHUIBoxView())
+      ->appendChild($layout1)
+      ->addMargin(PHUI::MARGIN_LARGE);
+
+    $head2 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Colors'));
+
+    $wrap2 = id(new PHUIBoxView())
+      ->appendChild($layout2)
+      ->addMargin(PHUI::MARGIN_LARGE);
+
+    return phutil_tag(
+      'div',
+        array(),
+        array(
+          $head1,
+          $wrap1,
+          $head2,
+          $wrap2
+        ));
+        }
+}

src/applications/uiexample/examples/PhabricatorTagExample.php

@@ -11,79 +11,84 @@ final class PhabricatorTagExample extends PhabricatorUIExample {
   }
 
   public function renderExample() {
-    $tags = array();
+    $intro = array();
 
-    $tags[] = 'Hey, ';
-    $tags[] = id(new PhabricatorTagView())
+    $intro[] = 'Hey, ';
+    $intro[] = id(new PhabricatorTagView())
       ->setType(PhabricatorTagView::TYPE_PERSON)
       ->setName('@alincoln')
       ->setHref('#');
-    $tags[] = ' how is stuff?';
-    $tags[] = hsprintf('<br /><br />');
+    $intro[] = ' how is stuff?';
+    $intro[] = hsprintf('<br /><br />');
 
 
-    $tags[] = 'Did you hear that ';
-    $tags[] = id(new PhabricatorTagView())
+    $intro[] = 'Did you hear that ';
+    $intro[] = id(new PhabricatorTagView())
       ->setType(PhabricatorTagView::TYPE_PERSON)
       ->setName('@gwashington')
       ->setDotColor(PhabricatorTagView::COLOR_RED)
       ->setHref('#');
-    $tags[] = ' is away, ';
-    $tags[] = id(new PhabricatorTagView())
+    $intro[] = ' is away, ';
+    $intro[] = id(new PhabricatorTagView())
       ->setType(PhabricatorTagView::TYPE_PERSON)
       ->setName('@tjefferson')
       ->setDotColor(PhabricatorTagView::COLOR_ORANGE)
       ->setHref('#');
-    $tags[] = ' has some errands, and ';
-    $tags[] = id(new PhabricatorTagView())
+    $intro[] = ' has some errands, and ';
+    $intro[] = id(new PhabricatorTagView())
       ->setType(PhabricatorTagView::TYPE_PERSON)
       ->setName('@rreagan')
       ->setDotColor(PhabricatorTagView::COLOR_GREY)
       ->setHref('#');
-    $tags[] = ' is gone?';
-    $tags[] = hsprintf('<br /><br />');
+    $intro[] = ' is gone?';
+    $intro[] = hsprintf('<br /><br />');
 
-    $tags[] = 'Take a look at ';
-    $tags[] = id(new PhabricatorTagView())
+    $intro[] = 'Take a look at ';
+    $intro[] = id(new PhabricatorTagView())
       ->setType(PhabricatorTagView::TYPE_OBJECT)
       ->setName('D123')
       ->setHref('#');
-    $tags[] = ' when you get a chance.';
-    $tags[] = hsprintf('<br /><br />');
+    $intro[] = ' when you get a chance.';
+    $intro[] = hsprintf('<br /><br />');
 
-    $tags[] = 'Hmm? ';
-    $tags[] = id(new PhabricatorTagView())
+    $intro[] = 'Hmm? ';
+    $intro[] = id(new PhabricatorTagView())
       ->setType(PhabricatorTagView::TYPE_OBJECT)
       ->setName('D123')
       ->setClosed(true)
       ->setHref('#');
-    $tags[] = ' is ';
-    $tags[] = id(new PhabricatorTagView())
+    $intro[] = ' is ';
+    $intro[] = id(new PhabricatorTagView())
       ->setType(PhabricatorTagView::TYPE_STATE)
       ->setBackgroundColor(PhabricatorTagView::COLOR_BLACK)
       ->setName('Abandoned');
-    $tags[] = '.';
-    $tags[] = hsprintf('<br /><br />');
+    $intro[] = '.';
+    $intro[] = hsprintf('<br /><br />');
 
-    $tags[] = 'I hope someone is going to ';
-    $tags[] = id(new PhabricatorTagView())
+    $intro[] = 'I hope someone is going to ';
+    $intro[] = id(new PhabricatorTagView())
       ->setType(PhabricatorTagView::TYPE_OBJECT)
       ->setName('T123: Water The Dog')
-      ->setBarColor(PhabricatorTagView::COLOR_REDORANGE)
+      ->setBarColor(PhabricatorTagView::COLOR_RED)
       ->setHref('#');
-    $tags[] = ' -- that task is ';
-    $tags[] = id(new PhabricatorTagView())
+    $intro[] = ' -- that task is ';
+    $intro[] = id(new PhabricatorTagView())
       ->setType(PhabricatorTagView::TYPE_STATE)
-      ->setBackgroundColor(PhabricatorTagView::COLOR_REDORANGE)
+      ->setBackgroundColor(PhabricatorTagView::COLOR_RED)
       ->setName('High Priority');
-    $tags[] = '!';
-    $tags[] = hsprintf('<br /><br />');
+    $intro[] = '!';
 
+    $intro = id(new PHUIBoxView())
+      ->appendChild($intro)
+      ->setShadow(true)
+      ->addPadding(PHUI::PADDING_LARGE)
+      ->addMargin(PHUI::MARGIN_LARGE);
 
-    $tags[] = id(new PhabricatorHeaderView())
+    $header1 = id(new PhabricatorHeaderView())
       ->setHeader('Colors');
 
     $colors = PhabricatorTagView::getColors();
+    $tags = array();
     foreach ($colors as $color) {
       $tags[] = id(new PhabricatorTagView())
         ->setType(PhabricatorTagView::TYPE_STATE)
@@ -92,9 +97,17 @@ final class PhabricatorTagExample extends PhabricatorUIExample {
       $tags[] = hsprintf('<br /><br />');
     }
 
-    $tags[] = id(new PhabricatorHeaderView())
+    $content1 = id(new PHUIBoxView())
+      ->appendChild($tags)
+      ->setShadow(true)
+      ->addPadding(PHUI::PADDING_LARGE)
+      ->addMargin(PHUI::MARGIN_LARGE);
+
+    $header2 = id(new PhabricatorHeaderView())
       ->setHeader('Holidays?');
 
+
+    $tags = array();
     $tags[] = id(new PhabricatorTagView())
       ->setType(PhabricatorTagView::TYPE_STATE)
       ->setBackgroundColor(PhabricatorTagView::COLOR_GREEN)
@@ -116,9 +129,12 @@ final class PhabricatorTagExample extends PhabricatorUIExample {
       ->setBarColor(PhabricatorTagView::COLOR_BLUE)
       ->setName('Easter');
 
-    return phutil_tag(
-      'div',
-      array('class' => 'ml'),
-      $tags);
+    $content2 = id(new PHUIBoxView())
+      ->appendChild($tags)
+      ->setShadow(true)
+      ->addPadding(PHUI::PADDING_LARGE)
+      ->addMargin(PHUI::MARGIN_LARGE);
+
+    return array($intro, $header1, $content1, $header2, $content2);
   }
 }

src/view/layout/PhabricatorTagView.php

@@ -7,7 +7,6 @@ final class PhabricatorTagView extends AphrontView {
   const TYPE_STATE          = 'state';
 
   const COLOR_RED           = 'red';
-  const COLOR_REDORANGE     = 'redorange';
   const COLOR_ORANGE        = 'orange';
   const COLOR_YELLOW        = 'yellow';
   const COLOR_BLUE          = 'blue';
@@ -165,7 +164,6 @@ final class PhabricatorTagView extends AphrontView {
   public static function getColors() {
     return array(
       self::COLOR_RED,
-      self::COLOR_REDORANGE,
       self::COLOR_ORANGE,
       self::COLOR_YELLOW,
       self::COLOR_BLUE,

webroot/rsrc/css/layout/phabricator-object-item-list-view.css

@@ -294,43 +294,43 @@
 */
 
 .phabricator-object-item-bar-color-red {
-  border-left-color: #cc0000;
+  border-left-color: #c0392b;
 }
 
 .phabricator-object-item-bar-color-orange {
-  border-left-color: #cc7300;
+  border-left-color: #e67e22;
 }
 
 .phabricator-object-item-bar-color-yellow {
-  border-left-color: #ccc000;
+  border-left-color: #f1c40f;
 }
 
 .phabricator-object-item-bar-color-green {
-  border-left-color: #009b2d;
+  border-left-color: #27ae60;
 }
 
 .phabricator-object-item-bar-color-sky {
-  border-left-color: #6498cf;
+  border-left-color: #3498db;
 }
 
 .phabricator-object-item-bar-color-blue {
-  border-left-color: #00659a;
+  border-left-color: #2980b9;
 }
 
-.phabricator-object-item-bar-color-indigo {
+.phabricator-object-item-bar-color-indigo { /* TODO */
   border-left-color: #3a00cc;
 }
 
 .phabricator-object-item-bar-color-violet {
-  border-left-color: #67009b;
+  border-left-color: #8e44ad;
 }
 
 .phabricator-object-item-bar-color-magenta {
-  border-left-color: #cc00c0;
+  border-left-color: #cB4d9f;
 }
 
 .phabricator-object-item-bar-color-grey {
-  border-left-color: #999999;
+  border-left-color: #7f8cbd;
 }
 
 .phabricator-object-item-bar-color-black {

webroot/rsrc/css/layout/phabricator-tag-view.css

@@ -42,7 +42,7 @@ a.phabricator-tag-view:hover {
 
 .phabricator-tag-type-state {
   color: #ffffff;
-  text-shadow: rgba(0, 0, 0, 0.40) 0px -1px 1px;
+  text-shadow: rgba(100, 100, 100, 0.40) 0px -1px 1px;
 }
 
 .phabricator-tag-type-object,
@@ -57,38 +57,33 @@ a.phabricator-tag-type-object:link {
 }
 
 .phabricator-tag-color-red {
-  background-color: #e12320;
-  border-color: #e12320;
-}
-
-.phabricator-tag-color-redorange {
-  background-color: #ff6604;
-  border-color: #ff6604;
+  background-color: #c0392b;
+  border-color: #c0392b;
 }
 
 .phabricator-tag-color-orange {
-  background-color: #fa9400;
-  border-color: #fa9400;
+  background-color: #F39C12;
+  border-color: #F39C12;
 }
 
 .phabricator-tag-color-yellow {
-  background-color: #f2ed5b;
-  border-color: #f2ed5b;
+  background-color: #f1c40f;
+  border-color: #f1c40f;
 }
 
 .phabricator-tag-color-blue {
-  background-color: #0573d2;
-  border-color: #0573d2;
+  background-color: #2980b9;
+  border-color: #2980b9;
 }
 
 .phabricator-tag-color-magenta {
-  background-color: #ce00ce;
+  background-color: #cb4d9f;
   border-color: #ce00ce;
 }
 
 .phabricator-tag-color-green {
-  background-color: #438944;
-  border-color: #438944;
+  background-color: #27ae60;
+  border-color: #27ae60;
 }
 
 .phabricator-tag-color-black {
@@ -102,8 +97,8 @@ a.phabricator-tag-type-object:link {
 }
 
 .phabricator-tag-color-white {
-  background-color: #ffffff;
-  border-color: #ffffff;
+  background-color: #f7f7f7;
+  border-color: #f7f7f7;
 }
 
 .phabricator-tag-color-object {