From 7d8367a5529cf32f741776f2355856f322c862b5 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Tue, 3 Sep 2013 07:00:06 -0700 Subject: [PATCH] Color tweaks for action list, headers Summary: Starting to roll out the standard colors and spacing to action list, headers, and property views. Also softened the grey borders a hex. Test Plan: Review Maniphest and Differential on desktop and mobile. Felt the flow of standardization waft over me. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: Korvin, aran Differential Revision: https://secure.phabricator.com/D6869 --- src/__celerity_resource_map__.php | 114 +++++++++--------- .../examples/PHUIColorPalletteExample.php | 6 +- .../celerity/CelerityResourceTransformer.php | 7 +- webroot/rsrc/css/aphront/list-filter-view.css | 3 +- .../layout/phabricator-action-list-view.css | 12 +- .../css/layout/phabricator-header-view.css | 4 +- .../layout/phabricator-property-list-view.css | 40 +++--- 7 files changed, 91 insertions(+), 95 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 0b93441623..e1c19e5b8e 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -845,7 +845,7 @@ celerity_register_resource_map(array( ), 'aphront-error-view-css' => array( - 'uri' => '/res/1601ba5e/rsrc/css/aphront/error-view.css', + 'uri' => '/res/07a74e07/rsrc/css/aphront/error-view.css', 'type' => 'css', 'requires' => array( @@ -854,7 +854,7 @@ celerity_register_resource_map(array( ), 'aphront-list-filter-view-css' => array( - 'uri' => '/res/357f5269/rsrc/css/aphront/list-filter-view.css', + 'uri' => '/res/b770e0da/rsrc/css/aphront/list-filter-view.css', 'type' => 'css', 'requires' => array( @@ -890,7 +890,7 @@ celerity_register_resource_map(array( ), 'aphront-panel-view-css' => array( - 'uri' => '/res/167130e5/rsrc/css/aphront/panel-view.css', + 'uri' => '/res/915e0a4b/rsrc/css/aphront/panel-view.css', 'type' => 'css', 'requires' => array( @@ -2917,7 +2917,7 @@ celerity_register_resource_map(array( ), 'maniphest-task-summary-css' => array( - 'uri' => '/res/8483d7a1/rsrc/css/application/maniphest/task-summary.css', + 'uri' => '/res/5de3b188/rsrc/css/application/maniphest/task-summary.css', 'type' => 'css', 'requires' => array( @@ -3014,7 +3014,7 @@ celerity_register_resource_map(array( ), 'phabricator-action-list-view-css' => array( - 'uri' => '/res/20af36ac/rsrc/css/layout/phabricator-action-list-view.css', + 'uri' => '/res/3241ad81/rsrc/css/layout/phabricator-action-list-view.css', 'type' => 'css', 'requires' => array( @@ -3182,7 +3182,7 @@ celerity_register_resource_map(array( ), 'phabricator-header-view-css' => array( - 'uri' => '/res/4edf619d/rsrc/css/layout/phabricator-header-view.css', + 'uri' => '/res/822a9fc1/rsrc/css/layout/phabricator-header-view.css', 'type' => 'css', 'requires' => array( @@ -3310,7 +3310,7 @@ celerity_register_resource_map(array( ), 'phabricator-object-item-list-view-css' => array( - 'uri' => '/res/ba78d92c/rsrc/css/layout/phabricator-object-item-list-view.css', + 'uri' => '/res/40378532/rsrc/css/layout/phabricator-object-item-list-view.css', 'type' => 'css', 'requires' => array( @@ -3385,7 +3385,7 @@ celerity_register_resource_map(array( ), 'phabricator-property-list-view-css' => array( - 'uri' => '/res/86d920c9/rsrc/css/layout/phabricator-property-list-view.css', + 'uri' => '/res/34213162/rsrc/css/layout/phabricator-property-list-view.css', 'type' => 'css', 'requires' => array( @@ -3765,7 +3765,7 @@ celerity_register_resource_map(array( ), 'phui-button-css' => array( - 'uri' => '/res/dd0c4a0d/rsrc/css/phui/phui-button.css', + 'uri' => '/res/311f796b/rsrc/css/phui/phui-button.css', 'type' => 'css', 'requires' => array( @@ -4171,7 +4171,7 @@ celerity_register_resource_map(array( ), array( 'packages' => array( - 'bec5f683' => + '6362e5b3' => array( 'name' => 'core.pkg.css', 'symbols' => @@ -4218,7 +4218,7 @@ celerity_register_resource_map(array( 39 => 'phabricator-property-list-view-css', 40 => 'phabricator-tag-view-css', ), - 'uri' => '/res/pkg/bec5f683/core.pkg.css', + 'uri' => '/res/pkg/6362e5b3/core.pkg.css', 'type' => 'css', ), '8977e356' => @@ -4380,7 +4380,7 @@ celerity_register_resource_map(array( 'uri' => '/res/pkg/2dbbb7d1/javelin.pkg.js', 'type' => 'js', ), - 'a766ec27' => + '0a9e494f' => array( 'name' => 'maniphest.pkg.css', 'symbols' => @@ -4389,7 +4389,7 @@ celerity_register_resource_map(array( 1 => 'maniphest-transaction-detail-css', 2 => 'phabricator-project-tag-css', ), - 'uri' => '/res/pkg/a766ec27/maniphest.pkg.css', + 'uri' => '/res/pkg/0a9e494f/maniphest.pkg.css', 'type' => 'css', ), '98f64f07' => @@ -4409,15 +4409,15 @@ celerity_register_resource_map(array( ), 'reverse' => array( - 'aphront-dialog-view-css' => 'bec5f683', - 'aphront-error-view-css' => 'bec5f683', - 'aphront-list-filter-view-css' => 'bec5f683', - 'aphront-pager-view-css' => 'bec5f683', - 'aphront-panel-view-css' => 'bec5f683', - 'aphront-table-view-css' => 'bec5f683', - 'aphront-tokenizer-control-css' => 'bec5f683', - 'aphront-tooltip-css' => 'bec5f683', - 'aphront-typeahead-control-css' => 'bec5f683', + 'aphront-dialog-view-css' => '6362e5b3', + 'aphront-error-view-css' => '6362e5b3', + 'aphront-list-filter-view-css' => '6362e5b3', + 'aphront-pager-view-css' => '6362e5b3', + 'aphront-panel-view-css' => '6362e5b3', + 'aphront-table-view-css' => '6362e5b3', + 'aphront-tokenizer-control-css' => '6362e5b3', + 'aphront-tooltip-css' => '6362e5b3', + 'aphront-typeahead-control-css' => '6362e5b3', 'differential-changeset-view-css' => '44bfe40c', 'differential-core-view-css' => '44bfe40c', 'differential-inline-comment-editor' => 'd07a3bc2', @@ -4431,7 +4431,7 @@ celerity_register_resource_map(array( 'differential-table-of-contents-css' => '44bfe40c', 'diffusion-commit-view-css' => 'c8ce2d88', 'diffusion-icons-css' => 'c8ce2d88', - 'global-drag-and-drop-css' => 'bec5f683', + 'global-drag-and-drop-css' => '6362e5b3', 'inline-comment-summary-css' => '44bfe40c', 'javelin-aphlict' => '8977e356', 'javelin-behavior' => '2dbbb7d1', @@ -4504,55 +4504,55 @@ celerity_register_resource_map(array( 'javelin-util' => '2dbbb7d1', 'javelin-vector' => '2dbbb7d1', 'javelin-workflow' => '2dbbb7d1', - 'lightbox-attachment-css' => 'bec5f683', - 'maniphest-task-summary-css' => 'a766ec27', - 'maniphest-transaction-detail-css' => 'a766ec27', - 'phabricator-action-list-view-css' => 'bec5f683', - 'phabricator-application-launch-view-css' => 'bec5f683', + 'lightbox-attachment-css' => '6362e5b3', + 'maniphest-task-summary-css' => '0a9e494f', + 'maniphest-transaction-detail-css' => '0a9e494f', + 'phabricator-action-list-view-css' => '6362e5b3', + 'phabricator-application-launch-view-css' => '6362e5b3', 'phabricator-busy' => '8977e356', 'phabricator-content-source-view-css' => '44bfe40c', - 'phabricator-core-css' => 'bec5f683', - 'phabricator-crumbs-view-css' => 'bec5f683', + 'phabricator-core-css' => '6362e5b3', + 'phabricator-crumbs-view-css' => '6362e5b3', 'phabricator-drag-and-drop-file-upload' => 'd07a3bc2', 'phabricator-dropdown-menu' => '8977e356', 'phabricator-file-upload' => '8977e356', - 'phabricator-filetree-view-css' => 'bec5f683', - 'phabricator-flag-css' => 'bec5f683', - 'phabricator-header-view-css' => 'bec5f683', + 'phabricator-filetree-view-css' => '6362e5b3', + 'phabricator-flag-css' => '6362e5b3', + 'phabricator-header-view-css' => '6362e5b3', 'phabricator-hovercard' => '8977e356', - 'phabricator-jump-nav' => 'bec5f683', + 'phabricator-jump-nav' => '6362e5b3', 'phabricator-keyboard-shortcut' => '8977e356', 'phabricator-keyboard-shortcut-manager' => '8977e356', - 'phabricator-main-menu-view' => 'bec5f683', + 'phabricator-main-menu-view' => '6362e5b3', 'phabricator-menu-item' => '8977e356', - 'phabricator-nav-view-css' => 'bec5f683', + 'phabricator-nav-view-css' => '6362e5b3', 'phabricator-notification' => '8977e356', - 'phabricator-notification-css' => 'bec5f683', - 'phabricator-notification-menu-css' => 'bec5f683', - 'phabricator-object-item-list-view-css' => 'bec5f683', + 'phabricator-notification-css' => '6362e5b3', + 'phabricator-notification-menu-css' => '6362e5b3', + 'phabricator-object-item-list-view-css' => '6362e5b3', 'phabricator-object-selector-css' => '44bfe40c', 'phabricator-phtize' => '8977e356', 'phabricator-prefab' => '8977e356', - 'phabricator-project-tag-css' => 'a766ec27', - 'phabricator-property-list-view-css' => 'bec5f683', - 'phabricator-remarkup-css' => 'bec5f683', + 'phabricator-project-tag-css' => '0a9e494f', + 'phabricator-property-list-view-css' => '6362e5b3', + 'phabricator-remarkup-css' => '6362e5b3', 'phabricator-shaped-request' => 'd07a3bc2', - 'phabricator-side-menu-view-css' => 'bec5f683', - 'phabricator-standard-page-view' => 'bec5f683', - 'phabricator-tag-view-css' => 'bec5f683', + 'phabricator-side-menu-view-css' => '6362e5b3', + 'phabricator-standard-page-view' => '6362e5b3', + 'phabricator-tag-view-css' => '6362e5b3', 'phabricator-textareautils' => '8977e356', 'phabricator-tooltip' => '8977e356', - 'phabricator-transaction-view-css' => 'bec5f683', - 'phabricator-zindex-css' => 'bec5f683', - 'phui-button-css' => 'bec5f683', - 'phui-form-css' => 'bec5f683', - 'phui-form-view-css' => 'bec5f683', - 'phui-icon-view-css' => 'bec5f683', - 'phui-spacing-css' => 'bec5f683', - 'sprite-apps-large-css' => 'bec5f683', - 'sprite-gradient-css' => 'bec5f683', - 'sprite-icons-css' => 'bec5f683', - 'sprite-menu-css' => 'bec5f683', - 'syntax-highlighting-css' => 'bec5f683', + 'phabricator-transaction-view-css' => '6362e5b3', + 'phabricator-zindex-css' => '6362e5b3', + 'phui-button-css' => '6362e5b3', + 'phui-form-css' => '6362e5b3', + 'phui-form-view-css' => '6362e5b3', + 'phui-icon-view-css' => '6362e5b3', + 'phui-spacing-css' => '6362e5b3', + 'sprite-apps-large-css' => '6362e5b3', + 'sprite-gradient-css' => '6362e5b3', + 'sprite-icons-css' => '6362e5b3', + 'sprite-menu-css' => '6362e5b3', + 'syntax-highlighting-css' => '6362e5b3', ), )); diff --git a/src/applications/uiexample/examples/PHUIColorPalletteExample.php b/src/applications/uiexample/examples/PHUIColorPalletteExample.php index a567981e89..f8ee07e924 100644 --- a/src/applications/uiexample/examples/PHUIColorPalletteExample.php +++ b/src/applications/uiexample/examples/PHUIColorPalletteExample.php @@ -32,8 +32,8 @@ final class PHUIColorPalletteExample extends PhabricatorUIExample { ); $greys = array( - 'BBC0CC' => 'Light Grey Border {$lightgreyborder}', - 'A2A6B0' => 'Grey Border {$greyborder}', + 'C7CCD9' => 'Light Grey Border {$lightgreyborder}', + 'A1A6B0' => 'Grey Border {$greyborder}', '676A70' => 'Dark Grey Border {$darkgreyborder}', '92969D' => 'Light Grey Text {$lightgreytext}', '74777D' => 'Grey Text {$greytext}', @@ -50,7 +50,7 @@ final class PHUIColorPalletteExample extends PhabricatorUIExample { 'DFE0E2' => 'Blue Background {$bluebackground}', '8C98B8' => 'Light Blue Text {$lightbluetext}', '6B748C' => 'Blue Text {$bluetext}', - '585F72' => 'Dark Blue Text {$darkbluetext}', + '464C5C' => 'Dark Blue Text {$darkbluetext}', ); $d_column = array(); diff --git a/src/infrastructure/celerity/CelerityResourceTransformer.php b/src/infrastructure/celerity/CelerityResourceTransformer.php index 18a3d32cda..d45e500d25 100644 --- a/src/infrastructure/celerity/CelerityResourceTransformer.php +++ b/src/infrastructure/celerity/CelerityResourceTransformer.php @@ -150,8 +150,8 @@ final class CelerityResourceTransformer { 'lightviolet' => '#ecdff1', // Base Greys - 'lightgreyborder' => '#BBC0CC', - 'greyborder' => '#A2A6B0', + 'lightgreyborder' => '#C7CCD9', + 'greyborder' => '#A1A6B0', 'darkgreyborder' => '#676A70', 'lightgreytext' => '#92969D', 'greytext' => '#74777D', @@ -165,6 +165,9 @@ final class CelerityResourceTransformer { 'darkblueborder' => '#626E82', 'lightbluebackground' => '#F8F9FC', 'bluebackground' => '#DAE7FF', + 'lightbluetext' => '#8C98B8', + 'bluetext' => '#6B748C', + 'darkbluetext' => '#464C5C', ); $var_name = $matches[1]; diff --git a/webroot/rsrc/css/aphront/list-filter-view.css b/webroot/rsrc/css/aphront/list-filter-view.css index 0ef56742b6..ddec174473 100644 --- a/webroot/rsrc/css/aphront/list-filter-view.css +++ b/webroot/rsrc/css/aphront/list-filter-view.css @@ -3,7 +3,8 @@ */ .aphront-list-filter-wrap { - border: 1px solid {$lightgreyborder}; + border-left: 1px solid {$lightgreyborder}; + border-right: 1px solid {$lightgreyborder}; border-bottom: 1px solid {$greyborder}; margin: 0 20px; } diff --git a/webroot/rsrc/css/layout/phabricator-action-list-view.css b/webroot/rsrc/css/layout/phabricator-action-list-view.css index 8f4f8618cd..fea2d58445 100644 --- a/webroot/rsrc/css/layout/phabricator-action-list-view.css +++ b/webroot/rsrc/css/layout/phabricator-action-list-view.css @@ -7,17 +7,14 @@ } .device-desktop .phabricator-action-list-view { - border: 1px solid #c0c5d1; - padding: .5em 0; - + border: 1px solid {$lightblueborder}; + border-bottom: 1px solid {$blueborder}; + padding: 4px 0; float: right; margin-top: 0px; margin-right: 1%; width: 20%; - border-radius: 3px; font-size: 12px; - - box-shadow: 0 0 1px 1px rgba(192, 197, 209, 0.5); } .device-desktop .phabricator-header-shell + .phabricator-action-list-view { @@ -35,7 +32,7 @@ .device .phabricator-action-list-view { border-top: 1px solid #dcdcdc; - padding: .5em 0; + padding: 4px 0; } .device .phabricator-action-list-view { @@ -84,6 +81,7 @@ display: block; font-size: 12px; text-decoration: none; + color: {$darkgreytext}; } .phabricator-action-view-icon { diff --git a/webroot/rsrc/css/layout/phabricator-header-view.css b/webroot/rsrc/css/layout/phabricator-header-view.css index a06b39aa96..bdf802c66f 100644 --- a/webroot/rsrc/css/layout/phabricator-header-view.css +++ b/webroot/rsrc/css/layout/phabricator-header-view.css @@ -15,9 +15,9 @@ } .phabricator-header-view { - padding: 1.25em 2%; + padding: 16px; font-size: 15px; - color: #111111; + color: {$darkbluetext}; } .device-desktop .phabricator-header-view { diff --git a/webroot/rsrc/css/layout/phabricator-property-list-view.css b/webroot/rsrc/css/layout/phabricator-property-list-view.css index d1d8999dcc..2b3f5f9866 100644 --- a/webroot/rsrc/css/layout/phabricator-property-list-view.css +++ b/webroot/rsrc/css/layout/phabricator-property-list-view.css @@ -3,12 +3,7 @@ */ .phabricator-property-list-view { - border-color: #c0c5d1; - border-style: solid; - border-width: 1px 0 0 0; - - box-shadow: 0 0 1px 1px rgba(192, 197, 209, 0.3); - margin-top: -1px; + background-color: {$lightgreybackground}; } .phabricator-property-list-view .keyboard-shortcuts-available { @@ -25,22 +20,21 @@ } .phabricator-property-list-container { - border-color: #c0c5d1; + border-color: {$lightgreyborder}; border-style: solid; border-width: 0 0 1px; - background-color: #F7F7F8; } .device-desktop .phabricator-property-list-container { - padding: 1em 0 0.5em; + padding: 12px 0 4px 0; } .device .phabricator-property-list-container { - padding: .5em 0; + padding: 12px 0 0 0; } .phabricator-property-list-key { - color: #333333; + color: {$darkbluetext}; font-weight: bold; overflow: hidden; white-space: nowrap; @@ -52,15 +46,15 @@ text-align: right; float: left; clear: left; - margin-bottom: .5em; + margin-bottom: 4px; } .device .phabricator-property-list-key { - padding-left: .5em; + padding-left: 16px; } .phabricator-property-list-value { - color: #333333; + color: {$darkgreytext}; overflow: hidden; } @@ -72,8 +66,8 @@ } .device .phabricator-property-list-value { - padding-left: 1.5em; - margin-bottom: .5em; + padding-left: 16px; + margin-bottom: 8px; } .phabriator-property-list-view-end { @@ -81,16 +75,16 @@ } .phabricator-property-list-section-header { - background: #f0f0f0; - color: {$greytext}; - padding: 4px 18px; - border-bottom: 1px solid #dbdbdb; + color: #9CA5B5; + padding: 12px 16px 0px; + text-transform: uppercase; + font-weight: 700; } .phabricator-property-list-text-content { - padding: 12px 18px; - background: #fdfdfd; - border-bottom: 1px solid #dbdbdb; + padding: 12px 16px; + background: {$lightgreybackground}; + border-bottom: 1px solid {$lightgreyborder}; overflow: hidden; }