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
2024-11-26 16:52:41 +01:00 · 2013-06-18 15:35:14 -07:00 · 2013-06-18 15:35:14 -07:00 · c42f986e1a
commit c42f986e1a
parent 26944e2876
7 changed files with 212 additions and 114 deletions
--- a/src/__celerity_resource_map__.php
+++ b/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',
  ),
 ));
--- a/src/__phutil_library_map__.php
+++ b/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',
--- a/src/applications/uiexample/examples/PHUIColorPalletteExample.php
+++ b/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
+        ));
+        }
+}
--- a/src/applications/uiexample/examples/PhabricatorTagExample.php
+++ b/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);
  }
 }
--- a/src/view/layout/PhabricatorTagView.php
+++ b/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,
--- a/webroot/rsrc/css/layout/phabricator-object-item-list-view.css
+++ b/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 {
--- a/webroot/rsrc/css/layout/phabricator-tag-view.css
+++ b/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 {