From 7a1246b5d9186930951ad168389244ba43baa74f Mon Sep 17 00:00:00 2001 From: Andre Klapper Date: Fri, 17 Oct 2025 21:43:22 +0200 Subject: [PATCH] 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 --- resources/celerity/map.php | 38 +++++++++---------- .../CelerityDarkModePostprocessor.php | 12 ++++++ .../CelerityDefaultPostprocessor.php | 12 ++++++ .../differential/changeset-view.css | 12 +++++- .../css/application/pholio/pholio-edit.css | 4 +- .../rsrc/css/application/pholio/pholio.css | 8 ++-- webroot/rsrc/css/core/remarkup.css | 24 ++++++++---- webroot/rsrc/css/phui/phui-image-mask.css | 6 +-- .../rsrc/css/phui/phui-property-list-view.css | 16 ++++++++ webroot/rsrc/css/phui/phui-tag-view.css | 12 ++++-- 10 files changed, 102 insertions(+), 42 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index c2df62d55f..a67e3bc9d2 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -9,10 +9,10 @@ return array( 'names' => array( 'conpherence.pkg.css' => 'beb13d57', 'conpherence.pkg.js' => '020aebcf', - 'core.pkg.css' => '9fa10710', + 'core.pkg.css' => '9816be88', 'core.pkg.js' => '83580d78', 'dark-console.pkg.js' => '187792c2', - 'differential.pkg.css' => '6691591b', + 'differential.pkg.css' => 'abdb4fe9', 'differential.pkg.js' => '46fcb3af', 'diffusion.pkg.css' => '91e57dc1', 'diffusion.pkg.js' => 'd06aa1f7', @@ -61,7 +61,7 @@ return array( 'rsrc/css/application/diff/diff-tree-view.css' => '9bd306c2', 'rsrc/css/application/diff/inline-comment-summary.css' => '81eb368d', 'rsrc/css/application/differential/add-comment.css' => '7e5900d9', - 'rsrc/css/application/differential/changeset-view.css' => '979e688c', + 'rsrc/css/application/differential/changeset-view.css' => '0e0a956c', 'rsrc/css/application/differential/core.css' => '7300a73e', 'rsrc/css/application/differential/phui-inline-comment.css' => '066c3341', 'rsrc/css/application/differential/revision-history.css' => '237a2979', @@ -83,9 +83,9 @@ return array( 'rsrc/css/application/people/people-picture-menu-item.css' => 'fe8e07cf', 'rsrc/css/application/people/people-profile.css' => 'd1cb9c2e', 'rsrc/css/application/phame/phame.css' => '209125c7', - 'rsrc/css/application/pholio/pholio-edit.css' => 'e241b005', + 'rsrc/css/application/pholio/pholio-edit.css' => 'ea13cd28', 'rsrc/css/application/pholio/pholio-inline-comments.css' => '722b48c2', - 'rsrc/css/application/pholio/pholio.css' => 'c82315da', + 'rsrc/css/application/pholio/pholio.css' => 'f0cd31a4', 'rsrc/css/application/phortune/phortune-credit-card-form.css' => '3b9868a8', 'rsrc/css/application/phortune/phortune-invoice.css' => '4436b241', 'rsrc/css/application/phortune/phortune.css' => '508a1a5e', @@ -103,7 +103,7 @@ return array( 'rsrc/css/application/tokens/tokens.css' => 'cba3965f', 'rsrc/css/application/uiexample/example.css' => '69d6682f', 'rsrc/css/core/core.css' => '37f19649', - 'rsrc/css/core/remarkup.css' => '6ab3c4aa', + 'rsrc/css/core/remarkup.css' => '09e1f35c', 'rsrc/css/core/syntax.css' => '548567f6', 'rsrc/css/core/z-index.css' => '56fbe5ba', 'rsrc/css/diviner/diviner-shared.css' => '4bd263b0', @@ -155,7 +155,7 @@ return array( 'rsrc/css/phui/phui-hovercard.css' => '7ffb4e0c', 'rsrc/css/phui/phui-icon-set-selector.css' => '19e0253b', 'rsrc/css/phui/phui-icon.css' => '084ac612', - 'rsrc/css/phui/phui-image-mask.css' => 'aaea005e', + 'rsrc/css/phui/phui-image-mask.css' => '724396b6', 'rsrc/css/phui/phui-info-view.css' => 'a10a909b', 'rsrc/css/phui/phui-invisible-character-view.css' => 'c694c4a4', 'rsrc/css/phui/phui-left-right.css' => '68513c34', @@ -165,12 +165,12 @@ return array( 'rsrc/css/phui/phui-pager.css' => 'd022c7ad', 'rsrc/css/phui/phui-pinboard-view.css' => '1f08f5d8', 'rsrc/css/phui/phui-policy-section-view.css' => '139fdc64', - 'rsrc/css/phui/phui-property-list-view.css' => '3415f8c4', + 'rsrc/css/phui/phui-property-list-view.css' => '01bc9f97', 'rsrc/css/phui/phui-remarkup-preview.css' => '3c0e5e4f', 'rsrc/css/phui/phui-segment-bar-view.css' => '5166b370', 'rsrc/css/phui/phui-spacing.css' => 'b05cadc3', 'rsrc/css/phui/phui-status.css' => '293b5dad', - 'rsrc/css/phui/phui-tag-view.css' => 'ef373d9a', + 'rsrc/css/phui/phui-tag-view.css' => 'eb17b97f', 'rsrc/css/phui/phui-timeline-view.css' => '0277217e', 'rsrc/css/phui/phui-two-column-view.css' => '54fb9794', 'rsrc/css/phui/workboards/phui-workboard-color.css' => '27fbe0ac', @@ -512,7 +512,7 @@ return array( 'conpherence-transaction-css' => '3a3f5e7e', 'd3' => 'e97b4b78', 'diff-tree-view-css' => '9bd306c2', - 'differential-changeset-view-css' => '979e688c', + 'differential-changeset-view-css' => '0e0a956c', 'differential-core-view-css' => '7300a73e', 'differential-revision-add-comment-css' => '7e5900d9', 'differential-revision-history-css' => '237a2979', @@ -746,7 +746,7 @@ return array( 'phabricator-object-selector-css' => 'ee77366f', 'phabricator-phtize' => '2f1db1ed', 'phabricator-prefab' => '5793d835', - 'phabricator-remarkup-css' => '6ab3c4aa', + 'phabricator-remarkup-css' => '09e1f35c', 'phabricator-remarkup-metadata' => 'e40c4991', 'phabricator-search-results-css' => '9ea70ace', 'phabricator-shaped-request' => '995f5102', @@ -759,8 +759,8 @@ return array( 'phabricator-ui-example-css' => '69d6682f', 'phabricator-zindex-css' => '56fbe5ba', 'phame-css' => '209125c7', - 'pholio-css' => 'c82315da', - 'pholio-edit-css' => 'e241b005', + 'pholio-css' => 'f0cd31a4', + 'pholio-edit-css' => 'ea13cd28', 'pholio-inline-comments-css' => '722b48c2', 'phortune-credit-card-form' => 'd12d214f', 'phortune-credit-card-form-css' => '3b9868a8', @@ -803,7 +803,7 @@ return array( 'phui-hovercard-view-css' => '7ffb4e0c', 'phui-icon-set-selector-css' => '19e0253b', 'phui-icon-view-css' => '084ac612', - 'phui-image-mask-css' => 'aaea005e', + 'phui-image-mask-css' => '724396b6', 'phui-info-view-css' => 'a10a909b', 'phui-inline-comment-view-css' => '066c3341', 'phui-invisible-character-view-css' => 'c694c4a4', @@ -820,12 +820,12 @@ return array( 'phui-pager-css' => 'd022c7ad', 'phui-pinboard-view-css' => '1f08f5d8', 'phui-policy-section-view-css' => '139fdc64', - 'phui-property-list-view-css' => '3415f8c4', + 'phui-property-list-view-css' => '01bc9f97', 'phui-remarkup-preview-css' => '3c0e5e4f', 'phui-segment-bar-view-css' => '5166b370', 'phui-spacing-css' => 'b05cadc3', 'phui-status-list-view-css' => '293b5dad', - 'phui-tag-view-css' => 'ef373d9a', + 'phui-tag-view-css' => 'eb17b97f', 'phui-theme-css' => '35883b37', 'phui-timeline-view-css' => '0277217e', 'phui-two-column-view-css' => '54fb9794', @@ -957,6 +957,9 @@ return array( '0d2490ce' => array( 'javelin-install', ), + '0e0a956c' => array( + 'phui-inline-comment-view-css', + ), '0eaa33a9' => array( 'javelin-behavior', 'javelin-dom', @@ -1685,9 +1688,6 @@ return array( 'javelin-stratcom', 'phabricator-notification', ), - '979e688c' => array( - 'phui-inline-comment-view-css', - ), '98ef467f' => array( 'javelin-behavior', 'javelin-dom', diff --git a/src/applications/celerity/postprocessor/CelerityDarkModePostprocessor.php b/src/applications/celerity/postprocessor/CelerityDarkModePostprocessor.php index 254d757bcc..b80730f773 100644 --- a/src/applications/celerity/postprocessor/CelerityDarkModePostprocessor.php +++ b/src/applications/celerity/postprocessor/CelerityDarkModePostprocessor.php @@ -191,6 +191,10 @@ final class CelerityDarkModePostprocessor 'sh-disabledtext' => '#737373', 'sh-disabledbackground' => '#223144', + // Shade Checkered + 'sh-checkeredtext' => '#bbbbbb', + 'sh-checkeredicon' => '#979db4', + // Diffs 'diff.background' => '#121b27', 'new-background' => 'rgba(213, 246, 213, .2)', @@ -241,6 +245,14 @@ final class CelerityDarkModePostprocessor 'grey.button.gradient' => 'linear-gradient(to bottom, #223246, #223246)', 'grey.button.hover' => 'linear-gradient(to bottom, #1c293b, #1c293b)', + // Checkerboard patterns + 'checker.light-one' => '#223246', + 'checker.light-two' => '#0d0d0d', + 'checker.lighter-one' => '#292929', + 'checker.lighter-two' => '#26374c', + 'checker.dark-one' => '#cccccc', + 'checker.dark-two' => '#f3f3f3', + // Codeblock syntax highlighting 'syntax.highlighted-line' => '#fa8', 'syntax.comment' => '#6d6', diff --git a/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php b/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php index 8065f0538a..ff0f5972fa 100644 --- a/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php +++ b/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php @@ -204,6 +204,10 @@ final class CelerityDefaultPostprocessor 'sh-disabledtext' => '#a6a6a6', 'sh-disabledbackground' => '#f3f3f3', + // Shade Checkered + 'sh-checkeredtext' => '#555555', + 'sh-checkeredicon' => '#757575', + // Diffs 'diff.background' => '#fff', 'new-background' => 'rgba(151, 234, 151, .3)', @@ -270,6 +274,14 @@ final class CelerityDefaultPostprocessor 'delete-color' => '#c0392b', 'create-color' => '#139543', + // Checkerboard patterns + 'checker.light-one' => '#cccccc', + 'checker.light-two' => '#f3f3f3', + 'checker.lighter-one' => '#ebebeb', + 'checker.lighter-two' => '#fafafa', + 'checker.dark-one' => '#343434', + 'checker.dark-two' => '#0d0d0d', + // Codeblock syntax highlighting 'syntax.highlighted-line' => '#ffffcc', 'syntax.comment' => '#74777d', diff --git a/webroot/rsrc/css/application/differential/changeset-view.css b/webroot/rsrc/css/application/differential/changeset-view.css index f41bd8a167..190c96e07f 100644 --- a/webroot/rsrc/css/application/differential/changeset-view.css +++ b/webroot/rsrc/css/application/differential/changeset-view.css @@ -288,12 +288,20 @@ td.cov-I { .differential-diff td.diff-image-cell { background-color: transparent; - background-image: url(/rsrc/image/checker_light.png); + /* TODO: Remove static image for old browsers some day; see D26155 */ + background: url('/rsrc/image/checker_light.png'); + background: repeating-conic-gradient( + {$checker.light-one} 0% 25%, + {$checker.light-two} 0% 50%) 0 0/20px 20px; padding: 8px; } .device-desktop .differential-diff .diff-image-cell:hover { - background-image: url(/rsrc/image/checker_dark.png); + /* TODO: Remove static image for old browsers some day; see D26155 */ + background: url('/rsrc/image/checker_dark.png'); + background: repeating-conic-gradient( + {$checker.dark-one} 0% 25%, + {$checker.dark-two} 0% 50%) 0 0/20px 20px; } .differential-image-stage { diff --git a/webroot/rsrc/css/application/pholio/pholio-edit.css b/webroot/rsrc/css/application/pholio/pholio-edit.css index 1b709990e2..70a10136f8 100644 --- a/webroot/rsrc/css/application/pholio/pholio-edit.css +++ b/webroot/rsrc/css/application/pholio/pholio-edit.css @@ -52,8 +52,8 @@ /* TODO: Remove static image for old browsers some day; see D26155 */ background: url('/rsrc/image/checker_lighter.png'); background: repeating-conic-gradient( - {$lightgreybackground} 0% 25%, - {$page.content} 0% 50%) 0 0/20px 20px; + {$checker.lighter-one} 0% 25%, + {$checker.lighter-two} 0% 50%) 0 0/20px 20px; } .device .pholio-thumb-frame { diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css index 98e1cf4a1f..748c63577a 100644 --- a/webroot/rsrc/css/application/pholio/pholio.css +++ b/webroot/rsrc/css/application/pholio/pholio.css @@ -8,8 +8,8 @@ /* TODO: Remove static image for old browsers some day; see D26155 */ background: url('/rsrc/image/checker_lighter.png'); background: repeating-conic-gradient( - {$lightgreybackground} 0% 25%, - {$page.content} 0% 50%) 0 0/20px 20px; + {$checker.lighter-one} 0% 25%, + {$checker.lighter-two} 0% 50%) 0 0/20px 20px; } .pholio-mock-thumb-grid-container { @@ -35,8 +35,8 @@ /* TODO: Remove static image for old browsers some day; see D26155 */ background: url('/rsrc/image/checker_lighter.png'); background: repeating-conic-gradient( - {$lightgreybackground} 0% 25%, - {$page.content} 0% 50%) 0 0/20px 20px; + {$checker.lighter-one} 0% 25%, + {$checker.lighter-two} 0% 50%) 0 0/20px 20px; } .device-desktop .pholio-mock-thumb-grid-item:hover { diff --git a/webroot/rsrc/css/core/remarkup.css b/webroot/rsrc/css/core/remarkup.css index 326ad01132..846c131223 100644 --- a/webroot/rsrc/css/core/remarkup.css +++ b/webroot/rsrc/css/core/remarkup.css @@ -422,17 +422,25 @@ video.phabricator-media { .phabricator-remarkup-embed-image { display: inline-block; - border: 3px solid white; + border: 3px solid {$page.content}; box-shadow: 1px 1px 2px rgba({$alphablack}, 0.20); } -.phabricator-remarkup-embed-image > img { - background: url('/rsrc/image/checker_light.png'); -} - -.device-desktop .phabricator-remarkup-embed-image > img:hover { - background: url('/rsrc/image/checker_dark.png'); -} + .phabricator-remarkup-embed-image > img { + /* TODO: Remove static image for old browsers some day; see D26155 */ + background: url('/rsrc/image/checker_light.png'); + background: repeating-conic-gradient( + {$checker.light-one} 0% 25%, + {$checker.light-two} 0% 50%) 0 0/20px 20px; + } + + .device-desktop .phabricator-remarkup-embed-image > img:hover { + /* TODO: Remove static image for old browsers some day; see D26155 */ + background: url('/rsrc/image/checker_dark.png'); + background: repeating-conic-gradient( + {$checker.dark-one} 0% 25%, + {$checker.dark-two} 0% 50%) 0 0/20px 20px; + } .phabricator-remarkup-embed-image-full, .phabricator-remarkup-embed-image-wide { diff --git a/webroot/rsrc/css/phui/phui-image-mask.css b/webroot/rsrc/css/phui/phui-image-mask.css index 969ba26e4b..27ffd3cc2e 100644 --- a/webroot/rsrc/css/phui/phui-image-mask.css +++ b/webroot/rsrc/css/phui/phui-image-mask.css @@ -5,10 +5,10 @@ .phui-image-mask { /* TODO: Remove static image for old browsers some day; see D26155 */ - background: url('/rsrc/image/checker_light.png'); + background: url('/rsrc/image/checker_lighter.png'); background: repeating-conic-gradient( - {$lightgreybackground} 0% 25%, - {$page.content} 0% 50%) 0 0/20px 20px; + {$checker.lighter-one} 0% 25%, + {$checker.lighter-two} 0% 50%) 0 0/20px 20px; display: inline-block; border: 1px solid {$lightblueborder}; padding: 4px; diff --git a/webroot/rsrc/css/phui/phui-property-list-view.css b/webroot/rsrc/css/phui/phui-property-list-view.css index 5c950332f9..e25aa7c956 100644 --- a/webroot/rsrc/css/phui/phui-property-list-view.css +++ b/webroot/rsrc/css/phui/phui-property-list-view.css @@ -171,11 +171,19 @@ div.phui-property-list-stacked .phui-property-list-properties .phui-property-list-image-content img { margin: 20px auto; + /* TODO: Remove static image for old browsers some day; see D26155 */ background: url('/rsrc/image/checker_light.png'); + background: repeating-conic-gradient( + {$checker.light-one} 0% 25%, + {$checker.light-two} 0% 50%) 0 0/20px 20px; } .device-desktop .phui-property-list-image-content img:hover { + /* TODO: Remove static image for old browsers some day; see D26155 */ background: url('/rsrc/image/checker_dark.png'); + background: repeating-conic-gradient( + {$checker.dark-one} 0% 25%, + {$checker.dark-two} 0% 50%) 0 0/20px 20px; } /* - Dashboards ------------------------------------------------------------ */ @@ -188,12 +196,20 @@ div.phui-property-list-stacked .phui-property-list-properties .document-engine-image img { margin: 20px auto; + /* TODO: Remove static image for old browsers some day; see D26155 */ background: url('/rsrc/image/checker_light.png'); + background: repeating-conic-gradient( + {$checker.light-one} 0% 25%, + {$checker.light-two} 0% 50%) 0 0/20px 20px; max-width: 100%; } .device-desktop .document-engine-image img:hover { + /* TODO: Remove static image for old browsers some day; see D26155 */ background: url('/rsrc/image/checker_dark.png'); + background: repeating-conic-gradient( + {$checker.dark-one} 0% 25%, + {$checker.dark-two} 0% 50%) 0 0/20px 20px; } .document-engine-video video { diff --git a/webroot/rsrc/css/phui/phui-tag-view.css b/webroot/rsrc/css/phui/phui-tag-view.css index 8ae908a702..4ed34f54bb 100644 --- a/webroot/rsrc/css/phui/phui-tag-view.css +++ b/webroot/rsrc/css/phui/phui-tag-view.css @@ -405,17 +405,21 @@ a.phui-tag-view:hover.phui-tag-grey .phui-tag-core, .phui-tag-checkered .phui-tag-core, .jx-tokenizer-token.checkered { - background: url(/rsrc/image/checker_lighter.png); + /* TODO: Remove static image for old browsers some day; see D26155 */ + background: url('/rsrc/image/checker_lighter.png'); + background: repeating-conic-gradient( + {$checker.lighter-one} 0% 25%, + {$checker.lighter-two} 0% 50%) 0 0/20px 20px; border-style: dashed; border-color: {$sh-greyborder}; - color: {$sh-greytext}; - text-shadow: 1px 1px #fff; + color: {$sh-checkeredtext}; + text-shadow: 1px 1px {$page.content}; } .phui-tag-checkered .phui-icon-view, .jx-tokenizer-token.checkered .phui-icon-view, .jx-tokenizer-token.checkered .jx-tokenizer-x { - color: {$sh-greyicon}; + color: {$sh-checkeredicon}; } a.phui-tag-view:hover.phui-tag-checkered .phui-tag-core, -- 2.51.2