@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
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Improve Dark Mode support for shade tags and base colors

Summary:
Introduce dark colors for tags and shade tags to better integrate into the Dark Mode scheme. These are used for project tags, as a background color in project hovercards, as a background color when dragging a card on a workboard, and in other places.

These colors seem reasonably okay.

Also note that `lightyellowbackground`, `lightgreenbackground`, `lightvioletbackground` are currently not used in the codebase.

Refs T15056

Test Plan:
* Go to http://phorge.localhost/settings/panel/display/ and set `Accessibility` to `Dark Mode (Experimental)`
* Install http://phorge.localhost/applications/view/PhabricatorUIExamplesApplication/
* Look at the "Shades" section of http://phorge.localhost/uiexample/view/PHUITagExample/ (fixing Checkered with its background image is out of scope for this patch), hover over each tag to check that the border color is brighter than on non-hover
* Look at the colors of buttons in the "Simple Buttons" section of http://phorge.localhost/uiexample/view/PHUIButtonExample/
* Look at the tag colors on http://phorge.localhost/uiexample/view/PHUITypeaheadExample/
* For `{$lightredbackground}`, create a task with a restricted View Policy, add a comment `@username` with a user not allowed to see the task, look at the tag color and hover over the user to see their card - this one is not perfect but there's not much we can do given the red text color having to be standard red.
* Look at project tag colors on http://phorge.localhost/maniphest/query/all/
* Go to http://phorge.localhost/maniphest/task/edit/1/ and look at the colors in the "Tags" field
* Go to http://phorge.localhost/project/board/1/ and look at project tag colors
* Go to http://phorge.localhost/project/board/1/ and look at points in column headers
* Go to http://phorge.localhost/project/board/1/ and drag cards with different priorities, look at the card background color when dragging
* Go to http://phorge.localhost/T1 and look at project tag colors under "Tags"
* Go to http://phorge.localhost/T1 and hover over a tag under "Tags" and look at top part background color in the project hovercard
* Go to http://phorge.localhost/T1 and hover over a user with no verified email address under "Authored By" or "Subscribers" and look at the color of the "Email Not Verified" box
* Go to http://phorge.localhost/p/user/ and look at tags below the username such as "Administrator" or "Has MFA" or "Email Not Verified"
* Go to http://phorge.localhost/uiexample/view/PHUIObjectItemListExample/ and look colors under "Extra Things and Stuff" - this is not perfect but good enough for now
* Go to an EditEngine Form like http://phorge.localhost/transactions/editengine/projects.project/view/24/, select "Change Field Order", drag items and see better colors which allow you to read text

Reviewers: O1 Blessed Committers, mainframe98

Reviewed By: O1 Blessed Committers, mainframe98

Subscribers: tobiaswiese, valerio.bozzolan, Matthew, Cigaryno

Maniphest Tasks: T15056

Differential Revision: https://we.phorge.it/D26370

+70 -70
+2 -2
resources/celerity/map.php
··· 94 94 'rsrc/css/application/policy/policy-transaction-detail.css' => 'c02b8384', 95 95 'rsrc/css/application/policy/policy.css' => 'ceb56a08', 96 96 'rsrc/css/application/ponder/ponder-view.css' => 'f6391bfa', 97 - 'rsrc/css/application/project/project-card-view.css' => 'a9f2c2dd', 97 + 'rsrc/css/application/project/project-card-view.css' => '7294b671', 98 98 'rsrc/css/application/project/project-triggers.css' => 'cd9c8bb9', 99 99 'rsrc/css/application/project/project-view.css' => '2650c4c0', 100 100 'rsrc/css/application/search/application-search-view.css' => '0f7c06d8', ··· 847 847 'policy-edit-css' => '8794e2ed', 848 848 'policy-transaction-detail-css' => 'c02b8384', 849 849 'ponder-view-css' => 'f6391bfa', 850 - 'project-card-view-css' => 'a9f2c2dd', 850 + 'project-card-view-css' => '7294b671', 851 851 'project-triggers-css' => 'cd9c8bb9', 852 852 'project-view-css' => '2650c4c0', 853 853 'setup-issue-css' => '512adefd',
+67 -67
src/applications/celerity/postprocessor/CelerityDarkModePostprocessor.php
··· 92 92 'blacktext' => 'rgba(255,255,255,.9)', 93 93 94 94 // Base Greens 95 - 'lightgreenborder' => '#bfdac1', 96 - 'greenborder' => '#8cb89c', 97 - 'greentext' => '#3e6d35', 98 - 'lightgreenbackground' => '#e6f2e4', 95 + 'lightgreenborder' => '#105610', 96 + 'greenborder' => '#446f54', 97 + 'greentext' => '#e0eedd', 98 + 'lightgreenbackground' => '#132211', 99 99 100 100 // Base Red 101 - 'lightredborder' => '#f4c6c6', 102 - 'redborder' => '#eb9797', 103 - 'redtext' => '#802b2b', 104 - 'lightredbackground' => '#f5e1e1', 101 + 'lightredborder' => '#561010', 102 + 'redborder' => '#6b1414', 103 + 'redtext' => '#f2d9d9', 104 + 'lightredbackground' => '#260d0d', 105 105 106 106 // Base Yellow 107 - 'lightyellowborder' => '#dbdbbd', 108 - 'yellowborder' => '#b9b988', 109 - 'yellowtext' => '#72723c', 110 - 'lightyellowbackground' => '#ededde', 107 + 'lightyellowborder' => '#565610', 108 + 'yellowborder' => '#707042', 109 + 'yellowtext' => '#ededde', 110 + 'lightyellowbackground' => '#31311b', 111 111 112 112 // Base Violet 113 - 'lightvioletborder' => '#cfbddb', 114 - 'violetborder' => '#b589ba', 115 - 'violettext' => '#603c73', 116 - 'lightvioletbackground' => '#e9dfee', 113 + 'lightvioletborder' => '#331056', 114 + 'violetborder' => '#6c4270', 115 + 'violettext' => '#e8deed', 116 + 'lightvioletbackground' => '#2a1a32', 117 117 118 118 // Shades are a more muted set of our base colors 119 119 // better suited to blending into other UIs. 120 120 121 121 // Shade Red 122 - 'sh-lightredborder' => '#efcfcf', 123 - 'sh-redborder' => '#d1abab', 124 - 'sh-redicon' => '#c85a5a', 125 - 'sh-redtext' => '#a53737', 126 - 'sh-redbackground' => '#f7e6e6', 122 + 'sh-lightredborder' => '#7b1e1e', 123 + 'sh-redborder' => '#8d3f3f', 124 + 'sh-redicon' => '#ff9999', 125 + 'sh-redtext' => '#ffcccc', 126 + 'sh-redbackground' => '#563636', 127 127 128 128 // Shade Orange 129 - 'sh-lightorangeborder' => '#f8dcc3', 130 - 'sh-orangeborder' => '#dbb99e', 131 - 'sh-orangeicon' => '#e78331', 132 - 'sh-orangetext' => '#ba6016', 133 - 'sh-orangebackground' => '#fbede1', 129 + 'sh-lightorangeborder' => '#7b4d1e', 130 + 'sh-orangeborder' => '#8d663f', 131 + 'sh-orangeicon' => '#ffcc99', 132 + 'sh-orangetext' => '#ffe6cc', 133 + 'sh-orangebackground' => '#554535', 134 134 135 135 // Shade Yellow 136 - 'sh-lightyellowborder' => '#e9dbcd', 137 - 'sh-yellowborder' => '#c9b8a8', 138 - 'sh-yellowicon' => '#9b946e', 139 - 'sh-yellowtext' => '#726f56', 140 - 'sh-yellowbackground' => '#fdf3da', 136 + 'sh-lightyellowborder' => '#7b7b1e', 137 + 'sh-yellowborder' => '#8d8d3f', 138 + 'sh-yellowicon' => '#ffff99', 139 + 'sh-yellowtext' => '#ffffcc', 140 + 'sh-yellowbackground' => '#555535', 141 141 142 142 // Shade Green 143 - 'sh-lightgreenborder' => '#c6e6c7', 144 - 'sh-greenborder' => '#a0c4a1', 145 - 'sh-greenicon' => '#4ca74e', 146 - 'sh-greentext' => '#326d34', 147 - 'sh-greenbackground' => '#ddefdd', 143 + 'sh-lightgreenborder' => '#357b1e', 144 + 'sh-greenborder' => '#538d3f', 145 + 'sh-greenicon' => '#99ff99', 146 + 'sh-greentext' => '#d9ffcc', 147 + 'sh-greenbackground' => '#355535', 148 148 149 149 // Shade Blue 150 - 'sh-lightblueborder' => '#cfdbe3', 151 - 'sh-blueborder' => '#a7b5bf', 152 - 'sh-blueicon' => '#6b748c', 153 - 'sh-bluetext' => '#464c5c', 154 - 'sh-bluebackground' => '#dee7f8', 150 + 'sh-lightblueborder' => '#1e4d7b', 151 + 'sh-blueborder' => '#3f668d', 152 + 'sh-blueicon' => '#99ccff', 153 + 'sh-bluetext' => '#cce6ff', 154 + 'sh-bluebackground' => '#353d55', 155 155 156 156 // Shade Sky (mostly re-uses Blue colors above) 157 - 'sh-skybackground' => '#e0f0fa', 157 + 'sh-skybackground' => '#354d55', 158 158 159 159 // Shade Indigo 160 - 'sh-lightindigoborder' => '#d1c9ee', 161 - 'sh-indigoborder' => '#bcb4da', 162 - 'sh-indigoicon' => '#8672d4', 163 - 'sh-indigotext' => '#6e5cb6', 164 - 'sh-indigobackground' => '#eae6f7', 160 + 'sh-lightindigoborder' => '#1e1e7b', 161 + 'sh-indigoborder' => '#3f3f8d', 162 + 'sh-indigoicon' => '#9999ff', 163 + 'sh-indigotext' => '#ccccff', 164 + 'sh-indigobackground' => '#3d3555', 165 165 166 166 // Shade Violet 167 - 'sh-lightvioletborder' => '#e0d1e7', 168 - 'sh-violetborder' => '#bcabc5', 169 - 'sh-violeticon' => '#9260ad', 170 - 'sh-violettext' => '#69427f', 171 - 'sh-violetbackground' => '#efe8f3', 167 + 'sh-lightvioletborder' => '#4d1e7b', 168 + 'sh-violetborder' => '#663f8d', 169 + 'sh-violeticon' => '#cc99ff', 170 + 'sh-violettext' => '#e6ccff', 171 + 'sh-violetbackground' => '#4d3555', 172 172 173 173 // Shade Pink 174 - 'sh-lightpinkborder' => '#f6d5ef', 175 - 'sh-pinkborder' => '#d5aecd', 176 - 'sh-pinkicon' => '#e26fcb', 177 - 'sh-pinktext' => '#da49be', 178 - 'sh-pinkbackground' => '#fbeaf8', 174 + 'sh-lightpinkborder' => '#7b1e7b', 175 + 'sh-pinkborder' => '#8d3f8d', 176 + 'sh-pinkicon' => '#ff99ff', 177 + 'sh-pinktext' => '#ffccff', 178 + 'sh-pinkbackground' => '#553555', 179 179 180 180 // Shade Grey 181 - 'sh-lightgreyborder' => '#e3e4e8', 182 - 'sh-greyborder' => '#b2b2b2', 183 - 'sh-greyicon' => '#757575', 184 - 'sh-greytext' => '#555555', 185 - 'sh-greybackground' => '#edeef2', 181 + 'sh-lightgreyborder' => '#737373', 182 + 'sh-greyborder' => '#b9bbc6', 183 + 'sh-greyicon' => '#4d4d4d', 184 + 'sh-greytext' => '#262626', 185 + 'sh-greybackground' => '#979db4', 186 186 187 187 // Shade Disabled 188 - 'sh-lightdisabledborder' => '#e5e5e5', 189 - 'sh-disabledborder' => '#cbcbcb', 190 - 'sh-disabledicon' => '#bababa', 191 - 'sh-disabledtext' => '#a6a6a6', 192 - 'sh-disabledbackground' => '#f3f3f3', 188 + 'sh-lightdisabledborder' => '#1a1a1a', 189 + 'sh-disabledborder' => '#333333', 190 + 'sh-disabledicon' => '#595959', 191 + 'sh-disabledtext' => '#737373', 192 + 'sh-disabledbackground' => '#223144', 193 193 194 194 // Diffs 195 195 'diff.background' => '#121b27',
+1 -1
webroot/rsrc/css/application/project/project-card-view.css
··· 80 80 } 81 81 82 82 .project-card-view .project-card-item-exiled .project-card-item-text { 83 - color: {$red}; 83 + color: {$redtext}; 84 84 } 85 85 86 86 .project-card-view .project-card-item-icon {