@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
Add Base Grey set of colors
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
+41
-27
+30
-27
src/applications/uiexample/examples/PHUIColorPalletteExample.php
+30
-27
src/applications/uiexample/examples/PHUIColorPalletteExample.php
···
13
13
public function renderExample() {
14
14
15
15
$colors = array(
16
-
'c0392b' => 'Base Red',
17
-
'f4dddb' => '83% Red',
18
-
'e67e22' => 'Base Orange',
19
-
'f7e2d4' => '83% Orange',
20
-
'f1c40f' => 'Base Yellow',
21
-
'fdf5d4' => '83% Yellow',
22
-
'139543' => 'Base Green',
23
-
'd7eddf' => '83% Green',
24
-
'2980b9' => 'Base Blue',
25
-
'daeaf3' => '83% Blue',
26
-
'3498db' => 'Sky Base',
27
-
'ddeef9' => '83% Sky',
28
-
'c6539d' => 'Base Indigo',
29
-
'f5e2ef' => '83% Indigo',
30
-
'8e44ad' => 'Base Violet',
31
-
'ecdff1' => '83% Violet'
16
+
'c0392b' => 'Base Red {$red}',
17
+
'f4dddb' => '83% Red {$lightred}',
18
+
'e67e22' => 'Base Orange {$orange}',
19
+
'f7e2d4' => '83% Orange {$lightorange}',
20
+
'f1c40f' => 'Base Yellow {$yellow}',
21
+
'fdf5d4' => '83% Yellow {$lightyellow}',
22
+
'139543' => 'Base Green {$green}',
23
+
'd7eddf' => '83% Green {$lightgreen}',
24
+
'2980b9' => 'Base Blue {$blue}',
25
+
'daeaf3' => '83% Blue {$lightblue}',
26
+
'3498db' => 'Sky Base {$sky}',
27
+
'ddeef9' => '83% Sky {$lightsky}',
28
+
'c6539d' => 'Base Indigo {$indigo}',
29
+
'f5e2ef' => '83% Indigo {$lightindigo}',
30
+
'8e44ad' => 'Base Violet {$violet}',
31
+
'ecdff1' => '83% Violet {$lightviolet}'
32
32
);
33
33
34
-
$darks = array(
35
-
'ecf0f1',
36
-
'bdc3c7',
37
-
'95a5a6',
38
-
'7f8c8d',
39
-
'34495e',
40
-
'2c3e50');
34
+
$greys = array(
35
+
'BBC0CC' => 'Light Grey Border {$lightgreyborder}',
36
+
'A2A6B0' => 'Grey Border {$greyborder}',
37
+
'676A70' => 'Dark Grey Border {$darkgreyborder}',
38
+
'92969D' => 'Light Grey Text {$lightgreytext}',
39
+
'57595E' => 'Grey Text {$greytext}',
40
+
'4B4D51' => 'Dark Grey Text [$darkgreytext}',
41
+
'F7F7F7' => 'Light Grey Background {$lightgreybackground}',
42
+
'EBECEE' => 'Grey Background {$greybackground}',
43
+
);
41
44
42
45
$d_column = array();
43
-
foreach ($darks as $dark) {
46
+
foreach ($greys as $color => $name) {
44
47
$d_column[] = phutil_tag(
45
48
'div',
46
49
array(
47
-
'style' => 'background-color: #'.$dark.';',
50
+
'style' => 'background-color: #'.$color.';',
48
51
'class' => 'pl'),
49
-
'#'.$dark);
52
+
$name.' #'.$color);
50
53
}
51
54
52
55
$c_column = array();
···
80
83
->addPadding(PHUI::PADDING_LARGE);
81
84
82
85
$head1 = id(new PhabricatorHeaderView())
83
-
->setHeader(pht('Darks'));
86
+
->setHeader(pht('Greys'));
84
87
85
88
$wrap1 = id(new PHUIBoxView())
86
89
->appendChild($layout1)
+11
src/infrastructure/celerity/CelerityResourceTransformer.php
+11
src/infrastructure/celerity/CelerityResourceTransformer.php
···
131
131
132
132
public function replaceCSSVariable($matches) {
133
133
static $map = array(
134
+
// Base Colors
134
135
'red' => '#c0392b',
135
136
'lightred' => '#f4dddb',
136
137
'orange' => '#e67e22',
···
147
148
'lightindigo' => '#f5e2ef',
148
149
'violet' => '#8e44ad',
149
150
'lightviolet' => '#ecdff1',
151
+
152
+
// Base Greys
153
+
'lightgreyborder' => '#BBC0CC',
154
+
'greyborder' => '#A2A6B0',
155
+
'darkgreyborder' => '#676A70',
156
+
'lightgreytext' => '#92969D',
157
+
'greytext' => '#57595E',
158
+
'darkgreytext' => '#4B4D51',
159
+
'lightgreybackground' => '#F7F7F7',
160
+
'greybackground' => '#EBECEE',
150
161
);
151
162
152
163
$var_name = $matches[1];