@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
Fix Dark Mode for remaining elements with checkerboard backgrounds
Summary:
* Replace remaining checkerboard images with repeating-conic-gradient CSS. Note that this is a trade-off between improved Dark Mode and browser compatibility: Such CSS is only supported since Chrome 69/Opera 56 (09/2018), Firefox 83 (11/2020), Safari 12.1 (03/2019), and Edge 79 (01/2020) according to https://caniuse.com/?search=repeating-conic-gradient. Older browsers should see the PNG image file instead, with no Dark Mode improvement here. In the special case of a checkered tag this may lead to decreased readability on such older browsers.
* Introduce Checkerboard patterns variables in CelerityPostprocessors to use the very same two colors for the three checkerboard patterns as the PNG files do.
* Introduce separate text and icon colors `sh-checkeredtext`, `sh-checkeredicon` for checkered tags (was using grey before) to keep text readable on a dark checkerboard pattern background.
* Do not hardcode text-shadow color for checkered tags but use a variable.
* Replace hardcoded white border color with a variable.
* Ignore `alphablack` shadow for now - looks okay.
See similar rP03e8c8ab0cdb.
Refs T15056
Test Plan:
* Go to http://phorge.localhost/settings/panel/display/ and set `Accessibility` to `Dark Mode (Experimental)`
* Go to PNG image with transparency http://phorge.localhost/F1 and hover over it
* Embed a PNG image file with transparency via `{F1}` markup and hover over it.
* Go to the "Shades" section of http://phorge.localhost/uiexample/view/PHUITagExample/ and look at Checkered tag
Reviewers: O1 Blessed Committers, mainframe98
Reviewed By: O1 Blessed Committers, mainframe98
Subscribers: mainframe98, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno
Maniphest Tasks: T15056
Differential Revision: https://we.phorge.it/D26426
+101
-41
+19
-19
resources/celerity/map.php
+19
-19
resources/celerity/map.php
···
9
9
'names' => array(
10
10
'conpherence.pkg.css' => 'beb13d57',
11
11
'conpherence.pkg.js' => '020aebcf',
12
-
'core.pkg.css' => '9fa10710',
12
+
'core.pkg.css' => '9816be88',
13
13
'core.pkg.js' => '83580d78',
14
14
'dark-console.pkg.js' => '187792c2',
15
-
'differential.pkg.css' => '6691591b',
15
+
'differential.pkg.css' => 'abdb4fe9',
16
16
'differential.pkg.js' => '46fcb3af',
17
17
'diffusion.pkg.css' => '91e57dc1',
18
18
'diffusion.pkg.js' => 'd06aa1f7',
···
61
61
'rsrc/css/application/diff/diff-tree-view.css' => '9bd306c2',
62
62
'rsrc/css/application/diff/inline-comment-summary.css' => '81eb368d',
63
63
'rsrc/css/application/differential/add-comment.css' => '7e5900d9',
64
-
'rsrc/css/application/differential/changeset-view.css' => '979e688c',
64
+
'rsrc/css/application/differential/changeset-view.css' => '0e0a956c',
65
65
'rsrc/css/application/differential/core.css' => '7300a73e',
66
66
'rsrc/css/application/differential/phui-inline-comment.css' => '066c3341',
67
67
'rsrc/css/application/differential/revision-history.css' => '237a2979',
···
83
83
'rsrc/css/application/people/people-picture-menu-item.css' => 'fe8e07cf',
84
84
'rsrc/css/application/people/people-profile.css' => 'd1cb9c2e',
85
85
'rsrc/css/application/phame/phame.css' => '209125c7',
86
-
'rsrc/css/application/pholio/pholio-edit.css' => 'e241b005',
86
+
'rsrc/css/application/pholio/pholio-edit.css' => 'ea13cd28',
87
87
'rsrc/css/application/pholio/pholio-inline-comments.css' => '722b48c2',
88
-
'rsrc/css/application/pholio/pholio.css' => 'c82315da',
88
+
'rsrc/css/application/pholio/pholio.css' => 'f0cd31a4',
89
89
'rsrc/css/application/phortune/phortune-credit-card-form.css' => '3b9868a8',
90
90
'rsrc/css/application/phortune/phortune-invoice.css' => '4436b241',
91
91
'rsrc/css/application/phortune/phortune.css' => '508a1a5e',
···
103
103
'rsrc/css/application/tokens/tokens.css' => 'cba3965f',
104
104
'rsrc/css/application/uiexample/example.css' => '69d6682f',
105
105
'rsrc/css/core/core.css' => '37f19649',
106
-
'rsrc/css/core/remarkup.css' => '6ab3c4aa',
106
+
'rsrc/css/core/remarkup.css' => '09e1f35c',
107
107
'rsrc/css/core/syntax.css' => '548567f6',
108
108
'rsrc/css/core/z-index.css' => '56fbe5ba',
109
109
'rsrc/css/diviner/diviner-shared.css' => '4bd263b0',
···
155
155
'rsrc/css/phui/phui-hovercard.css' => '7ffb4e0c',
156
156
'rsrc/css/phui/phui-icon-set-selector.css' => '19e0253b',
157
157
'rsrc/css/phui/phui-icon.css' => '084ac612',
158
-
'rsrc/css/phui/phui-image-mask.css' => 'aaea005e',
158
+
'rsrc/css/phui/phui-image-mask.css' => '724396b6',
159
159
'rsrc/css/phui/phui-info-view.css' => 'a10a909b',
160
160
'rsrc/css/phui/phui-invisible-character-view.css' => 'c694c4a4',
161
161
'rsrc/css/phui/phui-left-right.css' => '68513c34',
···
165
165
'rsrc/css/phui/phui-pager.css' => 'd022c7ad',
166
166
'rsrc/css/phui/phui-pinboard-view.css' => '1f08f5d8',
167
167
'rsrc/css/phui/phui-policy-section-view.css' => '139fdc64',
168
-
'rsrc/css/phui/phui-property-list-view.css' => '3415f8c4',
168
+
'rsrc/css/phui/phui-property-list-view.css' => '01bc9f97',
169
169
'rsrc/css/phui/phui-remarkup-preview.css' => '3c0e5e4f',
170
170
'rsrc/css/phui/phui-segment-bar-view.css' => '5166b370',
171
171
'rsrc/css/phui/phui-spacing.css' => 'b05cadc3',
172
172
'rsrc/css/phui/phui-status.css' => '293b5dad',
173
-
'rsrc/css/phui/phui-tag-view.css' => 'ef373d9a',
173
+
'rsrc/css/phui/phui-tag-view.css' => 'eb17b97f',
174
174
'rsrc/css/phui/phui-timeline-view.css' => '0277217e',
175
175
'rsrc/css/phui/phui-two-column-view.css' => '54fb9794',
176
176
'rsrc/css/phui/workboards/phui-workboard-color.css' => '27fbe0ac',
···
512
512
'conpherence-transaction-css' => '3a3f5e7e',
513
513
'd3' => 'e97b4b78',
514
514
'diff-tree-view-css' => '9bd306c2',
515
-
'differential-changeset-view-css' => '979e688c',
515
+
'differential-changeset-view-css' => '0e0a956c',
516
516
'differential-core-view-css' => '7300a73e',
517
517
'differential-revision-add-comment-css' => '7e5900d9',
518
518
'differential-revision-history-css' => '237a2979',
···
746
746
'phabricator-object-selector-css' => 'ee77366f',
747
747
'phabricator-phtize' => '2f1db1ed',
748
748
'phabricator-prefab' => '5793d835',
749
-
'phabricator-remarkup-css' => '6ab3c4aa',
749
+
'phabricator-remarkup-css' => '09e1f35c',
750
750
'phabricator-remarkup-metadata' => 'e40c4991',
751
751
'phabricator-search-results-css' => '9ea70ace',
752
752
'phabricator-shaped-request' => '995f5102',
···
759
759
'phabricator-ui-example-css' => '69d6682f',
760
760
'phabricator-zindex-css' => '56fbe5ba',
761
761
'phame-css' => '209125c7',
762
-
'pholio-css' => 'c82315da',
763
-
'pholio-edit-css' => 'e241b005',
762
+
'pholio-css' => 'f0cd31a4',
763
+
'pholio-edit-css' => 'ea13cd28',
764
764
'pholio-inline-comments-css' => '722b48c2',
765
765
'phortune-credit-card-form' => 'd12d214f',
766
766
'phortune-credit-card-form-css' => '3b9868a8',
···
803
803
'phui-hovercard-view-css' => '7ffb4e0c',
804
804
'phui-icon-set-selector-css' => '19e0253b',
805
805
'phui-icon-view-css' => '084ac612',
806
-
'phui-image-mask-css' => 'aaea005e',
806
+
'phui-image-mask-css' => '724396b6',
807
807
'phui-info-view-css' => 'a10a909b',
808
808
'phui-inline-comment-view-css' => '066c3341',
809
809
'phui-invisible-character-view-css' => 'c694c4a4',
···
820
820
'phui-pager-css' => 'd022c7ad',
821
821
'phui-pinboard-view-css' => '1f08f5d8',
822
822
'phui-policy-section-view-css' => '139fdc64',
823
-
'phui-property-list-view-css' => '3415f8c4',
823
+
'phui-property-list-view-css' => '01bc9f97',
824
824
'phui-remarkup-preview-css' => '3c0e5e4f',
825
825
'phui-segment-bar-view-css' => '5166b370',
826
826
'phui-spacing-css' => 'b05cadc3',
827
827
'phui-status-list-view-css' => '293b5dad',
828
-
'phui-tag-view-css' => 'ef373d9a',
828
+
'phui-tag-view-css' => 'eb17b97f',
829
829
'phui-theme-css' => '35883b37',
830
830
'phui-timeline-view-css' => '0277217e',
831
831
'phui-two-column-view-css' => '54fb9794',
···
956
956
),
957
957
'0d2490ce' => array(
958
958
'javelin-install',
959
+
),
960
+
'0e0a956c' => array(
961
+
'phui-inline-comment-view-css',
959
962
),
960
963
'0eaa33a9' => array(
961
964
'javelin-behavior',
···
1684
1687
'javelin-dom',
1685
1688
'javelin-stratcom',
1686
1689
'phabricator-notification',
1687
-
),
1688
-
'979e688c' => array(
1689
-
'phui-inline-comment-view-css',
1690
1690
),
1691
1691
'98ef467f' => array(
1692
1692
'javelin-behavior',
+12
src/applications/celerity/postprocessor/CelerityDarkModePostprocessor.php
+12
src/applications/celerity/postprocessor/CelerityDarkModePostprocessor.php
···
191
191
'sh-disabledtext' => '#737373',
192
192
'sh-disabledbackground' => '#223144',
193
193
194
+
// Shade Checkered
195
+
'sh-checkeredtext' => '#bbbbbb',
196
+
'sh-checkeredicon' => '#979db4',
197
+
194
198
// Diffs
195
199
'diff.background' => '#121b27',
196
200
'new-background' => 'rgba(213, 246, 213, .2)',
···
240
244
'grey.button.color' => '#223246',
241
245
'grey.button.gradient' => 'linear-gradient(to bottom, #223246, #223246)',
242
246
'grey.button.hover' => 'linear-gradient(to bottom, #1c293b, #1c293b)',
247
+
248
+
// Checkerboard patterns
249
+
'checker.light-one' => '#223246',
250
+
'checker.light-two' => '#0d0d0d',
251
+
'checker.lighter-one' => '#292929',
252
+
'checker.lighter-two' => '#26374c',
253
+
'checker.dark-one' => '#cccccc',
254
+
'checker.dark-two' => '#f3f3f3',
243
255
244
256
// Codeblock syntax highlighting
245
257
'syntax.highlighted-line' => '#fa8',
+12
src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php
+12
src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php
···
204
204
'sh-disabledtext' => '#a6a6a6',
205
205
'sh-disabledbackground' => '#f3f3f3',
206
206
207
+
// Shade Checkered
208
+
'sh-checkeredtext' => '#555555',
209
+
'sh-checkeredicon' => '#757575',
210
+
207
211
// Diffs
208
212
'diff.background' => '#fff',
209
213
'new-background' => 'rgba(151, 234, 151, .3)',
···
269
273
270
274
'delete-color' => '#c0392b',
271
275
'create-color' => '#139543',
276
+
277
+
// Checkerboard patterns
278
+
'checker.light-one' => '#cccccc',
279
+
'checker.light-two' => '#f3f3f3',
280
+
'checker.lighter-one' => '#ebebeb',
281
+
'checker.lighter-two' => '#fafafa',
282
+
'checker.dark-one' => '#343434',
283
+
'checker.dark-two' => '#0d0d0d',
272
284
273
285
// Codeblock syntax highlighting
274
286
'syntax.highlighted-line' => '#ffffcc',
+10
-2
webroot/rsrc/css/application/differential/changeset-view.css
+10
-2
webroot/rsrc/css/application/differential/changeset-view.css
···
288
288
289
289
.differential-diff td.diff-image-cell {
290
290
background-color: transparent;
291
-
background-image: url(/rsrc/image/checker_light.png);
291
+
/* TODO: Remove static image for old browsers some day; see D26155 */
292
+
background: url('/rsrc/image/checker_light.png');
293
+
background: repeating-conic-gradient(
294
+
{$checker.light-one} 0% 25%,
295
+
{$checker.light-two} 0% 50%) 0 0/20px 20px;
292
296
padding: 8px;
293
297
}
294
298
295
299
.device-desktop .differential-diff .diff-image-cell:hover {
296
-
background-image: url(/rsrc/image/checker_dark.png);
300
+
/* TODO: Remove static image for old browsers some day; see D26155 */
301
+
background: url('/rsrc/image/checker_dark.png');
302
+
background: repeating-conic-gradient(
303
+
{$checker.dark-one} 0% 25%,
304
+
{$checker.dark-two} 0% 50%) 0 0/20px 20px;
297
305
}
298
306
299
307
.differential-image-stage {
+2
-2
webroot/rsrc/css/application/pholio/pholio-edit.css
+2
-2
webroot/rsrc/css/application/pholio/pholio-edit.css
···
52
52
/* TODO: Remove static image for old browsers some day; see D26155 */
53
53
background: url('/rsrc/image/checker_lighter.png');
54
54
background: repeating-conic-gradient(
55
-
{$lightgreybackground} 0% 25%,
56
-
{$page.content} 0% 50%) 0 0/20px 20px;
55
+
{$checker.lighter-one} 0% 25%,
56
+
{$checker.lighter-two} 0% 50%) 0 0/20px 20px;
57
57
}
58
58
59
59
.device .pholio-thumb-frame {
+4
-4
webroot/rsrc/css/application/pholio/pholio.css
+4
-4
webroot/rsrc/css/application/pholio/pholio.css
···
8
8
/* TODO: Remove static image for old browsers some day; see D26155 */
9
9
background: url('/rsrc/image/checker_lighter.png');
10
10
background: repeating-conic-gradient(
11
-
{$lightgreybackground} 0% 25%,
12
-
{$page.content} 0% 50%) 0 0/20px 20px;
11
+
{$checker.lighter-one} 0% 25%,
12
+
{$checker.lighter-two} 0% 50%) 0 0/20px 20px;
13
13
}
14
14
15
15
.pholio-mock-thumb-grid-container {
···
35
35
/* TODO: Remove static image for old browsers some day; see D26155 */
36
36
background: url('/rsrc/image/checker_lighter.png');
37
37
background: repeating-conic-gradient(
38
-
{$lightgreybackground} 0% 25%,
39
-
{$page.content} 0% 50%) 0 0/20px 20px;
38
+
{$checker.lighter-one} 0% 25%,
39
+
{$checker.lighter-two} 0% 50%) 0 0/20px 20px;
40
40
}
41
41
42
42
.device-desktop .pholio-mock-thumb-grid-item:hover {
+15
-7
webroot/rsrc/css/core/remarkup.css
+15
-7
webroot/rsrc/css/core/remarkup.css
···
422
422
423
423
.phabricator-remarkup-embed-image {
424
424
display: inline-block;
425
-
border: 3px solid white;
425
+
border: 3px solid {$page.content};
426
426
box-shadow: 1px 1px 2px rgba({$alphablack}, 0.20);
427
427
}
428
428
429
-
.phabricator-remarkup-embed-image > img {
430
-
background: url('/rsrc/image/checker_light.png');
431
-
}
429
+
.phabricator-remarkup-embed-image > img {
430
+
/* TODO: Remove static image for old browsers some day; see D26155 */
431
+
background: url('/rsrc/image/checker_light.png');
432
+
background: repeating-conic-gradient(
433
+
{$checker.light-one} 0% 25%,
434
+
{$checker.light-two} 0% 50%) 0 0/20px 20px;
435
+
}
432
436
433
-
.device-desktop .phabricator-remarkup-embed-image > img:hover {
434
-
background: url('/rsrc/image/checker_dark.png');
435
-
}
437
+
.device-desktop .phabricator-remarkup-embed-image > img:hover {
438
+
/* TODO: Remove static image for old browsers some day; see D26155 */
439
+
background: url('/rsrc/image/checker_dark.png');
440
+
background: repeating-conic-gradient(
441
+
{$checker.dark-one} 0% 25%,
442
+
{$checker.dark-two} 0% 50%) 0 0/20px 20px;
443
+
}
436
444
437
445
.phabricator-remarkup-embed-image-full,
438
446
.phabricator-remarkup-embed-image-wide {
+3
-3
webroot/rsrc/css/phui/phui-image-mask.css
+3
-3
webroot/rsrc/css/phui/phui-image-mask.css
···
5
5
6
6
.phui-image-mask {
7
7
/* TODO: Remove static image for old browsers some day; see D26155 */
8
-
background: url('/rsrc/image/checker_light.png');
8
+
background: url('/rsrc/image/checker_lighter.png');
9
9
background: repeating-conic-gradient(
10
-
{$lightgreybackground} 0% 25%,
11
-
{$page.content} 0% 50%) 0 0/20px 20px;
10
+
{$checker.lighter-one} 0% 25%,
11
+
{$checker.lighter-two} 0% 50%) 0 0/20px 20px;
12
12
display: inline-block;
13
13
border: 1px solid {$lightblueborder};
14
14
padding: 4px;
+16
webroot/rsrc/css/phui/phui-property-list-view.css
+16
webroot/rsrc/css/phui/phui-property-list-view.css
···
171
171
172
172
.phui-property-list-image-content img {
173
173
margin: 20px auto;
174
+
/* TODO: Remove static image for old browsers some day; see D26155 */
174
175
background: url('/rsrc/image/checker_light.png');
176
+
background: repeating-conic-gradient(
177
+
{$checker.light-one} 0% 25%,
178
+
{$checker.light-two} 0% 50%) 0 0/20px 20px;
175
179
}
176
180
177
181
.device-desktop .phui-property-list-image-content img:hover {
182
+
/* TODO: Remove static image for old browsers some day; see D26155 */
178
183
background: url('/rsrc/image/checker_dark.png');
184
+
background: repeating-conic-gradient(
185
+
{$checker.dark-one} 0% 25%,
186
+
{$checker.dark-two} 0% 50%) 0 0/20px 20px;
179
187
}
180
188
181
189
/* - Dashboards ------------------------------------------------------------ */
···
188
196
189
197
.document-engine-image img {
190
198
margin: 20px auto;
199
+
/* TODO: Remove static image for old browsers some day; see D26155 */
191
200
background: url('/rsrc/image/checker_light.png');
201
+
background: repeating-conic-gradient(
202
+
{$checker.light-one} 0% 25%,
203
+
{$checker.light-two} 0% 50%) 0 0/20px 20px;
192
204
max-width: 100%;
193
205
}
194
206
195
207
.device-desktop .document-engine-image img:hover {
208
+
/* TODO: Remove static image for old browsers some day; see D26155 */
196
209
background: url('/rsrc/image/checker_dark.png');
210
+
background: repeating-conic-gradient(
211
+
{$checker.dark-one} 0% 25%,
212
+
{$checker.dark-two} 0% 50%) 0 0/20px 20px;
197
213
}
198
214
199
215
.document-engine-video video {
+8
-4
webroot/rsrc/css/phui/phui-tag-view.css
+8
-4
webroot/rsrc/css/phui/phui-tag-view.css
···
405
405
406
406
.phui-tag-checkered .phui-tag-core,
407
407
.jx-tokenizer-token.checkered {
408
-
background: url(/rsrc/image/checker_lighter.png);
408
+
/* TODO: Remove static image for old browsers some day; see D26155 */
409
+
background: url('/rsrc/image/checker_lighter.png');
410
+
background: repeating-conic-gradient(
411
+
{$checker.lighter-one} 0% 25%,
412
+
{$checker.lighter-two} 0% 50%) 0 0/20px 20px;
409
413
border-style: dashed;
410
414
border-color: {$sh-greyborder};
411
-
color: {$sh-greytext};
412
-
text-shadow: 1px 1px #fff;
415
+
color: {$sh-checkeredtext};
416
+
text-shadow: 1px 1px {$page.content};
413
417
}
414
418
415
419
.phui-tag-checkered .phui-icon-view,
416
420
.jx-tokenizer-token.checkered .phui-icon-view,
417
421
.jx-tokenizer-token.checkered .jx-tokenizer-x {
418
-
color: {$sh-greyicon};
422
+
color: {$sh-checkeredicon};
419
423
}
420
424
421
425
a.phui-tag-view:hover.phui-tag-checkered .phui-tag-core,