1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-22 23:02:42 +01:00

Implement color variables in CSS.

Summary: Added in color variables in most used places. Tweaked green to be a bit more serious.

Test Plan: Tested Tags, Error View, Timeline, Object Views, and Color Palette.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D6244
This commit is contained in:
Chad Little 2013-06-19 20:25:41 -07:00
parent 32f6c88896
commit e2f0003ff9
15 changed files with 156 additions and 136 deletions

View file

@ -2850,7 +2850,7 @@ celerity_register_resource_map(array(
),
'maniphest-transaction-detail-css' =>
array(
'uri' => '/res/fb430d3e/rsrc/css/application/maniphest/transaction-detail.css',
'uri' => '/res/30242771/rsrc/css/application/maniphest/transaction-detail.css',
'type' => 'css',
'requires' =>
array(
@ -3215,7 +3215,7 @@ celerity_register_resource_map(array(
),
'phabricator-notification-css' =>
array(
'uri' => '/res/3b18922a/rsrc/css/aphront/notification.css',
'uri' => '/res/829210bd/rsrc/css/aphront/notification.css',
'type' => 'css',
'requires' =>
array(
@ -3233,7 +3233,7 @@ celerity_register_resource_map(array(
),
'phabricator-object-item-list-view-css' =>
array(
'uri' => '/res/2acf1b18/rsrc/css/layout/phabricator-object-item-list-view.css',
'uri' => '/res/a66cc93b/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/148230a5/rsrc/css/layout/phabricator-tag-view.css',
'uri' => '/res/21a0a5d6/rsrc/css/layout/phabricator-tag-view.css',
'type' => 'css',
'requires' =>
array(
@ -3429,7 +3429,7 @@ celerity_register_resource_map(array(
),
'phabricator-timeline-view-css' =>
array(
'uri' => '/res/642a9f44/rsrc/css/layout/phabricator-timeline-view.css',
'uri' => '/res/3b85450f/rsrc/css/layout/phabricator-timeline-view.css',
'type' => 'css',
'requires' =>
array(
@ -3759,7 +3759,7 @@ celerity_register_resource_map(array(
),
'phui-text-css' =>
array(
'uri' => '/res/ca884ca6/rsrc/css/phui/phui-text.css',
'uri' => '/res/63e53cac/rsrc/css/phui/phui-text.css',
'type' => 'css',
'requires' =>
array(
@ -4057,7 +4057,7 @@ celerity_register_resource_map(array(
), array(
'packages' =>
array(
'e2cfbfd3' =>
'e229c250' =>
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/e2cfbfd3/core.pkg.css',
'uri' => '/res/pkg/e229c250/core.pkg.css',
'type' => 'css',
),
'f2ad0683' =>
@ -4268,7 +4268,7 @@ celerity_register_resource_map(array(
'uri' => '/res/pkg/a9f14d76/javelin.pkg.js',
'type' => 'js',
),
'a7ca34a9' =>
'adc3c36d' =>
array(
'name' => 'maniphest.pkg.css',
'symbols' =>
@ -4278,7 +4278,7 @@ celerity_register_resource_map(array(
2 => 'aphront-attached-file-view-css',
3 => 'phabricator-project-tag-css',
),
'uri' => '/res/pkg/a7ca34a9/maniphest.pkg.css',
'uri' => '/res/pkg/adc3c36d/maniphest.pkg.css',
'type' => 'css',
),
'98f64f07' =>
@ -4298,17 +4298,17 @@ celerity_register_resource_map(array(
),
'reverse' =>
array(
'aphront-attached-file-view-css' => 'a7ca34a9',
'aphront-dialog-view-css' => 'e2cfbfd3',
'aphront-error-view-css' => 'e2cfbfd3',
'aphront-form-view-css' => 'e2cfbfd3',
'aphront-list-filter-view-css' => 'e2cfbfd3',
'aphront-pager-view-css' => 'e2cfbfd3',
'aphront-panel-view-css' => 'e2cfbfd3',
'aphront-table-view-css' => 'e2cfbfd3',
'aphront-tokenizer-control-css' => 'e2cfbfd3',
'aphront-tooltip-css' => 'e2cfbfd3',
'aphront-typeahead-control-css' => 'e2cfbfd3',
'aphront-attached-file-view-css' => 'adc3c36d',
'aphront-dialog-view-css' => 'e229c250',
'aphront-error-view-css' => 'e229c250',
'aphront-form-view-css' => 'e229c250',
'aphront-list-filter-view-css' => 'e229c250',
'aphront-pager-view-css' => 'e229c250',
'aphront-panel-view-css' => 'e229c250',
'aphront-table-view-css' => 'e229c250',
'aphront-tokenizer-control-css' => 'e229c250',
'aphront-tooltip-css' => 'e229c250',
'aphront-typeahead-control-css' => 'e229c250',
'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' => 'e2cfbfd3',
'global-drag-and-drop-css' => 'e229c250',
'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' => 'e2cfbfd3',
'maniphest-task-summary-css' => 'a7ca34a9',
'maniphest-transaction-detail-css' => 'a7ca34a9',
'phabricator-action-list-view-css' => 'e2cfbfd3',
'phabricator-application-launch-view-css' => 'e2cfbfd3',
'lightbox-attachment-css' => 'e229c250',
'maniphest-task-summary-css' => 'adc3c36d',
'maniphest-transaction-detail-css' => 'adc3c36d',
'phabricator-action-list-view-css' => 'e229c250',
'phabricator-application-launch-view-css' => 'e229c250',
'phabricator-busy' => 'f2ad0683',
'phabricator-content-source-view-css' => 'dd27a69b',
'phabricator-core-css' => 'e2cfbfd3',
'phabricator-crumbs-view-css' => 'e2cfbfd3',
'phabricator-core-css' => 'e229c250',
'phabricator-crumbs-view-css' => 'e229c250',
'phabricator-drag-and-drop-file-upload' => '9488bb69',
'phabricator-dropdown-menu' => 'f2ad0683',
'phabricator-file-upload' => 'f2ad0683',
'phabricator-filetree-view-css' => 'e2cfbfd3',
'phabricator-flag-css' => 'e2cfbfd3',
'phabricator-form-view-css' => 'e2cfbfd3',
'phabricator-header-view-css' => 'e2cfbfd3',
'phabricator-filetree-view-css' => 'e229c250',
'phabricator-flag-css' => 'e229c250',
'phabricator-form-view-css' => 'e229c250',
'phabricator-header-view-css' => 'e229c250',
'phabricator-hovercard' => 'f2ad0683',
'phabricator-jump-nav' => 'e2cfbfd3',
'phabricator-jump-nav' => 'e229c250',
'phabricator-keyboard-shortcut' => 'f2ad0683',
'phabricator-keyboard-shortcut-manager' => 'f2ad0683',
'phabricator-main-menu-view' => 'e2cfbfd3',
'phabricator-main-menu-view' => 'e229c250',
'phabricator-menu-item' => 'f2ad0683',
'phabricator-nav-view-css' => 'e2cfbfd3',
'phabricator-nav-view-css' => 'e229c250',
'phabricator-notification' => 'f2ad0683',
'phabricator-notification-css' => 'e2cfbfd3',
'phabricator-notification-menu-css' => 'e2cfbfd3',
'phabricator-object-item-list-view-css' => 'e2cfbfd3',
'phabricator-notification-css' => 'e229c250',
'phabricator-notification-menu-css' => 'e229c250',
'phabricator-object-item-list-view-css' => 'e229c250',
'phabricator-object-selector-css' => 'dd27a69b',
'phabricator-phtize' => 'f2ad0683',
'phabricator-prefab' => 'f2ad0683',
'phabricator-project-tag-css' => 'a7ca34a9',
'phabricator-property-list-view-css' => 'e2cfbfd3',
'phabricator-remarkup-css' => 'e2cfbfd3',
'phabricator-project-tag-css' => 'adc3c36d',
'phabricator-property-list-view-css' => 'e229c250',
'phabricator-remarkup-css' => 'e229c250',
'phabricator-shaped-request' => '9488bb69',
'phabricator-side-menu-view-css' => 'e2cfbfd3',
'phabricator-standard-page-view' => 'e2cfbfd3',
'phabricator-tag-view-css' => 'e2cfbfd3',
'phabricator-side-menu-view-css' => 'e229c250',
'phabricator-standard-page-view' => 'e229c250',
'phabricator-tag-view-css' => 'e229c250',
'phabricator-textareautils' => 'f2ad0683',
'phabricator-tooltip' => 'f2ad0683',
'phabricator-transaction-view-css' => 'e2cfbfd3',
'phabricator-zindex-css' => 'e2cfbfd3',
'phui-button-css' => 'e2cfbfd3',
'phui-form-css' => 'e2cfbfd3',
'phui-icon-view-css' => 'e2cfbfd3',
'phui-spacing-css' => 'e2cfbfd3',
'sprite-apps-large-css' => 'e2cfbfd3',
'sprite-gradient-css' => 'e2cfbfd3',
'sprite-icons-css' => 'e2cfbfd3',
'sprite-menu-css' => 'e2cfbfd3',
'syntax-highlighting-css' => 'e2cfbfd3',
'phabricator-transaction-view-css' => 'e229c250',
'phabricator-zindex-css' => 'e229c250',
'phui-button-css' => 'e229c250',
'phui-form-css' => 'e229c250',
'phui-icon-view-css' => 'e229c250',
'phui-spacing-css' => 'e229c250',
'sprite-apps-large-css' => 'e229c250',
'sprite-gradient-css' => 'e229c250',
'sprite-icons-css' => 'e229c250',
'sprite-menu-css' => 'e229c250',
'syntax-highlighting-css' => 'e229c250',
),
));

View file

@ -44,7 +44,7 @@ final class ManiphestTaskStatus extends ManiphestConstants {
self::STATUS_CLOSED_WONTFIX => PhabricatorTagView::COLOR_BLACK,
self::STATUS_CLOSED_INVALID => PhabricatorTagView::COLOR_BLACK,
self::STATUS_CLOSED_DUPLICATE => PhabricatorTagView::COLOR_BLACK,
self::STATUS_CLOSED_SPITE => PhabricatorTagView::COLOR_MAGENTA,
self::STATUS_CLOSED_SPITE => PhabricatorTagView::COLOR_INDIGO,
);
return idx($map, $status, $default);
}

View file

@ -41,7 +41,7 @@ final class ManiphestTaskListView extends ManiphestView {
$status_map = ManiphestTaskStatus::getTaskStatusMap();
$color_map = array(
ManiphestTaskPriority::PRIORITY_UNBREAK_NOW => 'magenta',
ManiphestTaskPriority::PRIORITY_UNBREAK_NOW => 'indigo',
ManiphestTaskPriority::PRIORITY_TRIAGE => 'violet',
ManiphestTaskPriority::PRIORITY_HIGH => 'red',
ManiphestTaskPriority::PRIORITY_NORMAL => 'orange',

View file

@ -15,14 +15,16 @@ final class PHUIColorPalletteExample extends PhabricatorUIExample {
$colors = array(
'c0392b' => 'Base Red',
'f4dddb' => '83% Red',
'd35400' => 'Base Orange',
'e67e22' => 'Base Orange',
'f7e2d4' => '83% Orange',
'f1c40f' => 'Base Yellow',
'fdf5d4' => '83% Yellow',
'27ae60' => 'Base Green',
'dbf2e4' => '83% Green',
'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',

View file

@ -122,7 +122,7 @@ final class PhabricatorObjectItemListExample extends PhabricatorUIExample {
'some other parts; most of these parts are pretty squishy'))
->addFootIcon('search-white', pht('Respiration!'))
->addHandleIcon($handle, pht('You have a cardiovascular system!'))
->setBarColor('magenta'));
->setBarColor('indigo'));
$out[] = array($head, $list);

View file

@ -124,7 +124,7 @@ final class PhabricatorTagExample extends PhabricatorUIExample {
$tags[] = hsprintf('<br /><br />');
$tags[] = id(new PhabricatorTagView())
->setType(PhabricatorTagView::TYPE_STATE)
->setBackgroundColor(PhabricatorTagView::COLOR_MAGENTA)
->setBackgroundColor(PhabricatorTagView::COLOR_INDIGO)
->setDotColor(PhabricatorTagView::COLOR_YELLOW)
->setBarColor(PhabricatorTagView::COLOR_BLUE)
->setName('Easter');

View file

@ -132,6 +132,21 @@ final class CelerityResourceTransformer {
public function replaceCSSVariable($matches) {
static $map = array(
'red' => '#c0392b',
'lightred' => '#f4dddb',
'orange' => '#e67e22',
'lightorange' => '#f7e2d4',
'yellow' => '#f1c40f',
'lightyellow' => '#fdf5d4',
'green' => '#139543',
'lightgreen' => '#d7eddf',
'blue' => '#2980b9',
'lightblue' => '#daeaf3',
'sky' => '#3498db',
'lightsky' => '#ddeef9',
'indigo' => '#c6539d',
'lightindigo' => '#f5e2ef',
'violet' => '#8e44ad',
'lightviolet' => '#ecdff1',
);
$var_name = $matches[1];

View file

@ -10,7 +10,8 @@ final class PhabricatorTagView extends AphrontView {
const COLOR_ORANGE = 'orange';
const COLOR_YELLOW = 'yellow';
const COLOR_BLUE = 'blue';
const COLOR_MAGENTA = 'magenta';
const COLOR_INDIGO = 'indigo';
const COLOR_VIOLET = 'violet';
const COLOR_GREEN = 'green';
const COLOR_BLACK = 'black';
const COLOR_GREY = 'grey';
@ -167,7 +168,8 @@ final class PhabricatorTagView extends AphrontView {
self::COLOR_ORANGE,
self::COLOR_YELLOW,
self::COLOR_BLUE,
self::COLOR_MAGENTA,
self::COLOR_INDIGO,
self::COLOR_VIOLET,
self::COLOR_GREEN,
self::COLOR_BLACK,
self::COLOR_GREY,

View file

@ -36,19 +36,19 @@
}
.aphront-error-severity-error {
color: #c0392b;
border-color: #c0392b;
background: #f4dddb;
color: {$red};
border-color: {$red};
background: {$lightred};
}
.aphront-error-severity-error .aphront-error-view-head {
color: #c0392b;
color: {$red};
}
.aphront-error-severity-warning {
color: #bc7837;
border-color: #f1c40f;
background: #fdf5d4;
border-color: {$yellow};
background: {$lightyellow};
}
.aphront-error-severity-warning .aphront-error-view-head {
@ -56,13 +56,13 @@
}
.aphront-error-severity-notice {
color: #2980b9;
border-color: #2980b9;
background: #daeaf3;
color: {$blue};
border-color: {$blue};
background: {$lightblue};
}
.aphront-error-severity-notice .aphront-error-view-head {
color: #2980b9;
color: {$blue};
}
.aphront-error-severity-nodata {

View file

@ -16,9 +16,9 @@
font-size: 11px;
overflow: hidden;
background: #daeaf3;
background: {$lightsky};
color: #444444;
border: 1px solid #2980b9;
border: 1px solid {$sky};
cursor: pointer;
@ -28,21 +28,21 @@
}
.jx-notification-alert {
background: #fdf5d4;
border: 1px solid #f1c40f;
background: {$lightyellow};
border: 1px solid {$yellow};
}
.jx-notification-debug {
background: #f5e2ef;
border: 1px solid #c6539d;
background: {$lightindigo};
border: 1px solid {$indigo};
}
.jx-notification-done {
background: #dbf2e4;
border: 1px solid #27ae60;
background: {$lightgreen};
border: 1px solid {$green};
}
.jx-notification-error {
background: #f4dddb;
border: 1px solid #c0392b;
background: {$lightred};
border: 1px solid {$red};
}

View file

@ -3,7 +3,7 @@
*/
.maniphest-transaction-list-view {
padding: 0 20px;;
padding: 0 20px;
}
.device-phone .maniphest-transaction-list-view {

View file

@ -294,39 +294,35 @@
*/
.phabricator-object-item-bar-color-red {
border-left-color: #c0392b;
border-left-color: {$red};
}
.phabricator-object-item-bar-color-orange {
border-left-color: #e67e22;
border-left-color: {$orange};
}
.phabricator-object-item-bar-color-yellow {
border-left-color: #f1c40f;
border-left-color: {$yellow};
}
.phabricator-object-item-bar-color-green {
border-left-color: #27ae60;
border-left-color: {$green};
}
.phabricator-object-item-bar-color-sky {
border-left-color: #3498db;
border-left-color: {$sky};
}
.phabricator-object-item-bar-color-blue {
border-left-color: #2980b9;
border-left-color: {$blue};
}
.phabricator-object-item-bar-color-indigo { /* TODO */
border-left-color: #3a00cc;
.phabricator-object-item-bar-color-indigo {
border-left-color: {$indigo};
}
.phabricator-object-item-bar-color-violet {
border-left-color: #8e44ad;
}
.phabricator-object-item-bar-color-magenta {
border-left-color: #cB4d9f;
border-left-color: {$violet};
}
.phabricator-object-item-bar-color-grey {
@ -345,7 +341,7 @@
*/
.phabricator-object-item-highlighted {
background: #fdf5d4;
background: {$lightyellow};
}
.phabricator-object-list-cards
@ -355,7 +351,7 @@
}
.phabricator-object-item-selected {
background: #daeaf3;
background: {$lightblue};
}
.phabricator-object-list-flush .aphront-error-view {

View file

@ -57,33 +57,38 @@ a.phabricator-tag-type-object:link {
}
.phabricator-tag-color-red {
background-color: #c0392b;
border-color: #c0392b;
background-color: {$red};
border-color: {$red};
}
.phabricator-tag-color-orange {
background-color: #F39C12;
border-color: #F39C12;
background-color: {$orange};
border-color: {$orange};
}
.phabricator-tag-color-yellow {
background-color: #f1c40f;
border-color: #f1c40f;
background-color: {$yellow};
border-color: {$yellow};
}
.phabricator-tag-color-blue {
background-color: #2980b9;
border-color: #2980b9;
background-color: {$blue};
border-color: {$blue};
}
.phabricator-tag-color-magenta {
background-color: #cb4d9f;
border-color: #ce00ce;
.phabricator-tag-color-indigo {
background-color: {$indigo};
border-color: {$indigo};
}
.phabricator-tag-color-green {
background-color: #27ae60;
border-color: #27ae60;
background-color: {$green};
border-color: {$green};
}
.phabricator-tag-color-violet {
background-color: {$violet};
border-color: {$violet};
}
.phabricator-tag-color-black {

View file

@ -164,31 +164,31 @@
}
.phabricator-timeline-orange .phabricator-timeline-border {
border-color: #d35400;
border-color: {$orange};
}
.phabricator-timeline-yellow .phabricator-timeline-border {
border-color: #f1c40f;
border-color: {$yellow};
}
.phabricator-timeline-green .phabricator-timeline-border {
border-color: #27ae60;
border-color: {$green};
}
.phabricator-timeline-sky .phabricator-timeline-border {
border-color: #3498db;
border-color: {$sky};
}
.phabricator-timeline-blue .phabricator-timeline-border {
border-color: #2980b9;
border-color: {$blue};
}
.phabricator-timeline-indigo .phabricator-timeline-border {
border-color: #c6539d;
border-color: {$indigo};
}
.phabricator-timeline-violet .phabricator-timeline-border {
border-color: #8e44ad;
border-color: {$violet};
}
.phabricator-timeline-grey .phabricator-timeline-border {
@ -204,31 +204,31 @@
}
.phabricator-timeline-orange .phabricator-timeline-icon-fill {
background-color: #d35400;
background-color: {$orange};
}
.phabricator-timeline-yellow .phabricator-timeline-icon-fill {
background-color: #f1c40f;
background-color: {$yellow};
}
.phabricator-timeline-green .phabricator-timeline-icon-fill {
background-color: #27ae60;
background-color: {$green};
}
.phabricator-timeline-sky .phabricator-timeline-icon-fill {
background-color: #3498db;
background-color: {$sky};
}
.phabricator-timeline-blue .phabricator-timeline-icon-fill {
background-color: #2980b9;
background-color: {$blue};
}
.phabricator-timeline-indigo .phabricator-timeline-icon-fill {
background-color: #c6539d;
background-color: {$indigo};
}
.phabricator-timeline-violet .phabricator-timeline-icon-fill {
background-color: #8e44ad;
background-color: {$violet};
}
.phabricator-timeline-grey .phabricator-timeline-icon-fill {

View file

@ -19,31 +19,31 @@
/* Colors */
.phui-text-red {
color: #E41C2B;
color: {$red};
}
.phui-text-orange {
color: #EA921D;
color: {$orange};
}
.phui-text-yellow {
color: #EABB1D;
color: {$yellow};
}
.phui-text-green {
color: #2FC118
color: {$green}
}
.phui-text-blue {
color: #1D5998;
color: {$blue};
}
.phui-text-indigo {
color: #BD1772;
color: {$indigo};
}
.phui-text-violet {
color: #701A9C;
color: {$violet};
}
.phui-text-white {