@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
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
+91
-95
+57
-57
src/__celerity_resource_map__.php
+57
-57
src/__celerity_resource_map__.php
···
845
845
),
846
846
'aphront-error-view-css' =>
847
847
array(
848
-
'uri' => '/res/1601ba5e/rsrc/css/aphront/error-view.css',
848
+
'uri' => '/res/07a74e07/rsrc/css/aphront/error-view.css',
849
849
'type' => 'css',
850
850
'requires' =>
851
851
array(
···
854
854
),
855
855
'aphront-list-filter-view-css' =>
856
856
array(
857
-
'uri' => '/res/357f5269/rsrc/css/aphront/list-filter-view.css',
857
+
'uri' => '/res/b770e0da/rsrc/css/aphront/list-filter-view.css',
858
858
'type' => 'css',
859
859
'requires' =>
860
860
array(
···
890
890
),
891
891
'aphront-panel-view-css' =>
892
892
array(
893
-
'uri' => '/res/167130e5/rsrc/css/aphront/panel-view.css',
893
+
'uri' => '/res/915e0a4b/rsrc/css/aphront/panel-view.css',
894
894
'type' => 'css',
895
895
'requires' =>
896
896
array(
···
2917
2917
),
2918
2918
'maniphest-task-summary-css' =>
2919
2919
array(
2920
-
'uri' => '/res/8483d7a1/rsrc/css/application/maniphest/task-summary.css',
2920
+
'uri' => '/res/5de3b188/rsrc/css/application/maniphest/task-summary.css',
2921
2921
'type' => 'css',
2922
2922
'requires' =>
2923
2923
array(
···
3014
3014
),
3015
3015
'phabricator-action-list-view-css' =>
3016
3016
array(
3017
-
'uri' => '/res/20af36ac/rsrc/css/layout/phabricator-action-list-view.css',
3017
+
'uri' => '/res/3241ad81/rsrc/css/layout/phabricator-action-list-view.css',
3018
3018
'type' => 'css',
3019
3019
'requires' =>
3020
3020
array(
···
3182
3182
),
3183
3183
'phabricator-header-view-css' =>
3184
3184
array(
3185
-
'uri' => '/res/4edf619d/rsrc/css/layout/phabricator-header-view.css',
3185
+
'uri' => '/res/822a9fc1/rsrc/css/layout/phabricator-header-view.css',
3186
3186
'type' => 'css',
3187
3187
'requires' =>
3188
3188
array(
···
3310
3310
),
3311
3311
'phabricator-object-item-list-view-css' =>
3312
3312
array(
3313
-
'uri' => '/res/ba78d92c/rsrc/css/layout/phabricator-object-item-list-view.css',
3313
+
'uri' => '/res/40378532/rsrc/css/layout/phabricator-object-item-list-view.css',
3314
3314
'type' => 'css',
3315
3315
'requires' =>
3316
3316
array(
···
3385
3385
),
3386
3386
'phabricator-property-list-view-css' =>
3387
3387
array(
3388
-
'uri' => '/res/86d920c9/rsrc/css/layout/phabricator-property-list-view.css',
3388
+
'uri' => '/res/34213162/rsrc/css/layout/phabricator-property-list-view.css',
3389
3389
'type' => 'css',
3390
3390
'requires' =>
3391
3391
array(
···
3765
3765
),
3766
3766
'phui-button-css' =>
3767
3767
array(
3768
-
'uri' => '/res/dd0c4a0d/rsrc/css/phui/phui-button.css',
3768
+
'uri' => '/res/311f796b/rsrc/css/phui/phui-button.css',
3769
3769
'type' => 'css',
3770
3770
'requires' =>
3771
3771
array(
···
4171
4171
), array(
4172
4172
'packages' =>
4173
4173
array(
4174
-
'bec5f683' =>
4174
+
'6362e5b3' =>
4175
4175
array(
4176
4176
'name' => 'core.pkg.css',
4177
4177
'symbols' =>
···
4218
4218
39 => 'phabricator-property-list-view-css',
4219
4219
40 => 'phabricator-tag-view-css',
4220
4220
),
4221
-
'uri' => '/res/pkg/bec5f683/core.pkg.css',
4221
+
'uri' => '/res/pkg/6362e5b3/core.pkg.css',
4222
4222
'type' => 'css',
4223
4223
),
4224
4224
'8977e356' =>
···
4380
4380
'uri' => '/res/pkg/2dbbb7d1/javelin.pkg.js',
4381
4381
'type' => 'js',
4382
4382
),
4383
-
'a766ec27' =>
4383
+
'0a9e494f' =>
4384
4384
array(
4385
4385
'name' => 'maniphest.pkg.css',
4386
4386
'symbols' =>
···
4389
4389
1 => 'maniphest-transaction-detail-css',
4390
4390
2 => 'phabricator-project-tag-css',
4391
4391
),
4392
-
'uri' => '/res/pkg/a766ec27/maniphest.pkg.css',
4392
+
'uri' => '/res/pkg/0a9e494f/maniphest.pkg.css',
4393
4393
'type' => 'css',
4394
4394
),
4395
4395
'98f64f07' =>
···
4409
4409
),
4410
4410
'reverse' =>
4411
4411
array(
4412
-
'aphront-dialog-view-css' => 'bec5f683',
4413
-
'aphront-error-view-css' => 'bec5f683',
4414
-
'aphront-list-filter-view-css' => 'bec5f683',
4415
-
'aphront-pager-view-css' => 'bec5f683',
4416
-
'aphront-panel-view-css' => 'bec5f683',
4417
-
'aphront-table-view-css' => 'bec5f683',
4418
-
'aphront-tokenizer-control-css' => 'bec5f683',
4419
-
'aphront-tooltip-css' => 'bec5f683',
4420
-
'aphront-typeahead-control-css' => 'bec5f683',
4412
+
'aphront-dialog-view-css' => '6362e5b3',
4413
+
'aphront-error-view-css' => '6362e5b3',
4414
+
'aphront-list-filter-view-css' => '6362e5b3',
4415
+
'aphront-pager-view-css' => '6362e5b3',
4416
+
'aphront-panel-view-css' => '6362e5b3',
4417
+
'aphront-table-view-css' => '6362e5b3',
4418
+
'aphront-tokenizer-control-css' => '6362e5b3',
4419
+
'aphront-tooltip-css' => '6362e5b3',
4420
+
'aphront-typeahead-control-css' => '6362e5b3',
4421
4421
'differential-changeset-view-css' => '44bfe40c',
4422
4422
'differential-core-view-css' => '44bfe40c',
4423
4423
'differential-inline-comment-editor' => 'd07a3bc2',
···
4431
4431
'differential-table-of-contents-css' => '44bfe40c',
4432
4432
'diffusion-commit-view-css' => 'c8ce2d88',
4433
4433
'diffusion-icons-css' => 'c8ce2d88',
4434
-
'global-drag-and-drop-css' => 'bec5f683',
4434
+
'global-drag-and-drop-css' => '6362e5b3',
4435
4435
'inline-comment-summary-css' => '44bfe40c',
4436
4436
'javelin-aphlict' => '8977e356',
4437
4437
'javelin-behavior' => '2dbbb7d1',
···
4504
4504
'javelin-util' => '2dbbb7d1',
4505
4505
'javelin-vector' => '2dbbb7d1',
4506
4506
'javelin-workflow' => '2dbbb7d1',
4507
-
'lightbox-attachment-css' => 'bec5f683',
4508
-
'maniphest-task-summary-css' => 'a766ec27',
4509
-
'maniphest-transaction-detail-css' => 'a766ec27',
4510
-
'phabricator-action-list-view-css' => 'bec5f683',
4511
-
'phabricator-application-launch-view-css' => 'bec5f683',
4507
+
'lightbox-attachment-css' => '6362e5b3',
4508
+
'maniphest-task-summary-css' => '0a9e494f',
4509
+
'maniphest-transaction-detail-css' => '0a9e494f',
4510
+
'phabricator-action-list-view-css' => '6362e5b3',
4511
+
'phabricator-application-launch-view-css' => '6362e5b3',
4512
4512
'phabricator-busy' => '8977e356',
4513
4513
'phabricator-content-source-view-css' => '44bfe40c',
4514
-
'phabricator-core-css' => 'bec5f683',
4515
-
'phabricator-crumbs-view-css' => 'bec5f683',
4514
+
'phabricator-core-css' => '6362e5b3',
4515
+
'phabricator-crumbs-view-css' => '6362e5b3',
4516
4516
'phabricator-drag-and-drop-file-upload' => 'd07a3bc2',
4517
4517
'phabricator-dropdown-menu' => '8977e356',
4518
4518
'phabricator-file-upload' => '8977e356',
4519
-
'phabricator-filetree-view-css' => 'bec5f683',
4520
-
'phabricator-flag-css' => 'bec5f683',
4521
-
'phabricator-header-view-css' => 'bec5f683',
4519
+
'phabricator-filetree-view-css' => '6362e5b3',
4520
+
'phabricator-flag-css' => '6362e5b3',
4521
+
'phabricator-header-view-css' => '6362e5b3',
4522
4522
'phabricator-hovercard' => '8977e356',
4523
-
'phabricator-jump-nav' => 'bec5f683',
4523
+
'phabricator-jump-nav' => '6362e5b3',
4524
4524
'phabricator-keyboard-shortcut' => '8977e356',
4525
4525
'phabricator-keyboard-shortcut-manager' => '8977e356',
4526
-
'phabricator-main-menu-view' => 'bec5f683',
4526
+
'phabricator-main-menu-view' => '6362e5b3',
4527
4527
'phabricator-menu-item' => '8977e356',
4528
-
'phabricator-nav-view-css' => 'bec5f683',
4528
+
'phabricator-nav-view-css' => '6362e5b3',
4529
4529
'phabricator-notification' => '8977e356',
4530
-
'phabricator-notification-css' => 'bec5f683',
4531
-
'phabricator-notification-menu-css' => 'bec5f683',
4532
-
'phabricator-object-item-list-view-css' => 'bec5f683',
4530
+
'phabricator-notification-css' => '6362e5b3',
4531
+
'phabricator-notification-menu-css' => '6362e5b3',
4532
+
'phabricator-object-item-list-view-css' => '6362e5b3',
4533
4533
'phabricator-object-selector-css' => '44bfe40c',
4534
4534
'phabricator-phtize' => '8977e356',
4535
4535
'phabricator-prefab' => '8977e356',
4536
-
'phabricator-project-tag-css' => 'a766ec27',
4537
-
'phabricator-property-list-view-css' => 'bec5f683',
4538
-
'phabricator-remarkup-css' => 'bec5f683',
4536
+
'phabricator-project-tag-css' => '0a9e494f',
4537
+
'phabricator-property-list-view-css' => '6362e5b3',
4538
+
'phabricator-remarkup-css' => '6362e5b3',
4539
4539
'phabricator-shaped-request' => 'd07a3bc2',
4540
-
'phabricator-side-menu-view-css' => 'bec5f683',
4541
-
'phabricator-standard-page-view' => 'bec5f683',
4542
-
'phabricator-tag-view-css' => 'bec5f683',
4540
+
'phabricator-side-menu-view-css' => '6362e5b3',
4541
+
'phabricator-standard-page-view' => '6362e5b3',
4542
+
'phabricator-tag-view-css' => '6362e5b3',
4543
4543
'phabricator-textareautils' => '8977e356',
4544
4544
'phabricator-tooltip' => '8977e356',
4545
-
'phabricator-transaction-view-css' => 'bec5f683',
4546
-
'phabricator-zindex-css' => 'bec5f683',
4547
-
'phui-button-css' => 'bec5f683',
4548
-
'phui-form-css' => 'bec5f683',
4549
-
'phui-form-view-css' => 'bec5f683',
4550
-
'phui-icon-view-css' => 'bec5f683',
4551
-
'phui-spacing-css' => 'bec5f683',
4552
-
'sprite-apps-large-css' => 'bec5f683',
4553
-
'sprite-gradient-css' => 'bec5f683',
4554
-
'sprite-icons-css' => 'bec5f683',
4555
-
'sprite-menu-css' => 'bec5f683',
4556
-
'syntax-highlighting-css' => 'bec5f683',
4545
+
'phabricator-transaction-view-css' => '6362e5b3',
4546
+
'phabricator-zindex-css' => '6362e5b3',
4547
+
'phui-button-css' => '6362e5b3',
4548
+
'phui-form-css' => '6362e5b3',
4549
+
'phui-form-view-css' => '6362e5b3',
4550
+
'phui-icon-view-css' => '6362e5b3',
4551
+
'phui-spacing-css' => '6362e5b3',
4552
+
'sprite-apps-large-css' => '6362e5b3',
4553
+
'sprite-gradient-css' => '6362e5b3',
4554
+
'sprite-icons-css' => '6362e5b3',
4555
+
'sprite-menu-css' => '6362e5b3',
4556
+
'syntax-highlighting-css' => '6362e5b3',
4557
4557
),
4558
4558
));
+3
-3
src/applications/uiexample/examples/PHUIColorPalletteExample.php
+3
-3
src/applications/uiexample/examples/PHUIColorPalletteExample.php
···
32
32
);
33
33
34
34
$greys = array(
35
-
'BBC0CC' => 'Light Grey Border {$lightgreyborder}',
36
-
'A2A6B0' => 'Grey Border {$greyborder}',
35
+
'C7CCD9' => 'Light Grey Border {$lightgreyborder}',
36
+
'A1A6B0' => 'Grey Border {$greyborder}',
37
37
'676A70' => 'Dark Grey Border {$darkgreyborder}',
38
38
'92969D' => 'Light Grey Text {$lightgreytext}',
39
39
'74777D' => 'Grey Text {$greytext}',
···
50
50
'DFE0E2' => 'Blue Background {$bluebackground}',
51
51
'8C98B8' => 'Light Blue Text {$lightbluetext}',
52
52
'6B748C' => 'Blue Text {$bluetext}',
53
-
'585F72' => 'Dark Blue Text {$darkbluetext}',
53
+
'464C5C' => 'Dark Blue Text {$darkbluetext}',
54
54
);
55
55
56
56
$d_column = array();
+5
-2
src/infrastructure/celerity/CelerityResourceTransformer.php
+5
-2
src/infrastructure/celerity/CelerityResourceTransformer.php
···
150
150
'lightviolet' => '#ecdff1',
151
151
152
152
// Base Greys
153
-
'lightgreyborder' => '#BBC0CC',
154
-
'greyborder' => '#A2A6B0',
153
+
'lightgreyborder' => '#C7CCD9',
154
+
'greyborder' => '#A1A6B0',
155
155
'darkgreyborder' => '#676A70',
156
156
'lightgreytext' => '#92969D',
157
157
'greytext' => '#74777D',
···
165
165
'darkblueborder' => '#626E82',
166
166
'lightbluebackground' => '#F8F9FC',
167
167
'bluebackground' => '#DAE7FF',
168
+
'lightbluetext' => '#8C98B8',
169
+
'bluetext' => '#6B748C',
170
+
'darkbluetext' => '#464C5C',
168
171
);
169
172
170
173
$var_name = $matches[1];
+2
-1
webroot/rsrc/css/aphront/list-filter-view.css
+2
-1
webroot/rsrc/css/aphront/list-filter-view.css
+5
-7
webroot/rsrc/css/layout/phabricator-action-list-view.css
+5
-7
webroot/rsrc/css/layout/phabricator-action-list-view.css
···
7
7
}
8
8
9
9
.device-desktop .phabricator-action-list-view {
10
-
border: 1px solid #c0c5d1;
11
-
padding: .5em 0;
12
-
10
+
border: 1px solid {$lightblueborder};
11
+
border-bottom: 1px solid {$blueborder};
12
+
padding: 4px 0;
13
13
float: right;
14
14
margin-top: 0px;
15
15
margin-right: 1%;
16
16
width: 20%;
17
-
border-radius: 3px;
18
17
font-size: 12px;
19
-
20
-
box-shadow: 0 0 1px 1px rgba(192, 197, 209, 0.5);
21
18
}
22
19
23
20
.device-desktop .phabricator-header-shell + .phabricator-action-list-view {
···
35
32
36
33
.device .phabricator-action-list-view {
37
34
border-top: 1px solid #dcdcdc;
38
-
padding: .5em 0;
35
+
padding: 4px 0;
39
36
}
40
37
41
38
.device .phabricator-action-list-view {
···
84
81
display: block;
85
82
font-size: 12px;
86
83
text-decoration: none;
84
+
color: {$darkgreytext};
87
85
}
88
86
89
87
.phabricator-action-view-icon {
+2
-2
webroot/rsrc/css/layout/phabricator-header-view.css
+2
-2
webroot/rsrc/css/layout/phabricator-header-view.css
+17
-23
webroot/rsrc/css/layout/phabricator-property-list-view.css
+17
-23
webroot/rsrc/css/layout/phabricator-property-list-view.css
···
3
3
*/
4
4
5
5
.phabricator-property-list-view {
6
-
border-color: #c0c5d1;
7
-
border-style: solid;
8
-
border-width: 1px 0 0 0;
9
-
10
-
box-shadow: 0 0 1px 1px rgba(192, 197, 209, 0.3);
11
-
margin-top: -1px;
6
+
background-color: {$lightgreybackground};
12
7
}
13
8
14
9
.phabricator-property-list-view .keyboard-shortcuts-available {
···
25
20
}
26
21
27
22
.phabricator-property-list-container {
28
-
border-color: #c0c5d1;
23
+
border-color: {$lightgreyborder};
29
24
border-style: solid;
30
25
border-width: 0 0 1px;
31
-
background-color: #F7F7F8;
32
26
}
33
27
34
28
.device-desktop .phabricator-property-list-container {
35
-
padding: 1em 0 0.5em;
29
+
padding: 12px 0 4px 0;
36
30
}
37
31
38
32
.device .phabricator-property-list-container {
39
-
padding: .5em 0;
33
+
padding: 12px 0 0 0;
40
34
}
41
35
42
36
.phabricator-property-list-key {
43
-
color: #333333;
37
+
color: {$darkbluetext};
44
38
font-weight: bold;
45
39
overflow: hidden;
46
40
white-space: nowrap;
···
52
46
text-align: right;
53
47
float: left;
54
48
clear: left;
55
-
margin-bottom: .5em;
49
+
margin-bottom: 4px;
56
50
}
57
51
58
52
.device .phabricator-property-list-key {
59
-
padding-left: .5em;
53
+
padding-left: 16px;
60
54
}
61
55
62
56
.phabricator-property-list-value {
63
-
color: #333333;
57
+
color: {$darkgreytext};
64
58
overflow: hidden;
65
59
}
66
60
···
72
66
}
73
67
74
68
.device .phabricator-property-list-value {
75
-
padding-left: 1.5em;
76
-
margin-bottom: .5em;
69
+
padding-left: 16px;
70
+
margin-bottom: 8px;
77
71
}
78
72
79
73
.phabriator-property-list-view-end {
···
81
75
}
82
76
83
77
.phabricator-property-list-section-header {
84
-
background: #f0f0f0;
85
-
color: {$greytext};
86
-
padding: 4px 18px;
87
-
border-bottom: 1px solid #dbdbdb;
78
+
color: #9CA5B5;
79
+
padding: 12px 16px 0px;
80
+
text-transform: uppercase;
81
+
font-weight: 700;
88
82
}
89
83
90
84
.phabricator-property-list-text-content {
91
-
padding: 12px 18px;
92
-
background: #fdfdfd;
93
-
border-bottom: 1px solid #dbdbdb;
85
+
padding: 12px 16px;
86
+
background: {$lightgreybackground};
87
+
border-bottom: 1px solid {$lightgreyborder};
94
88
overflow: hidden;
95
89
}
96
90