revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2025-01-11 23:31:03 +01:00
Code Issues Releases Wiki Activity

Add Base Grey set of colors

Browse source 
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
This commit is contained in:
Chad Little 2013-08-30 14:40:46 -07:00
parent 480a17f6e0
commit fb7c7de519
2 changed files with 41 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/applications/uiexample/examples/PHUIColorPalletteExample.php
View file

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

11
src/infrastructure/celerity/CelerityResourceTransformer.php
View file

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