Celerity: Add Base Yellow variables for button theming consistency

Summary:
The Basic, Red, and Green "Simple Button" on http://phorge.localhost/uiexample/view/PHUIButtonExample/ have their separate "Base" colors defined.
The Yellow "Simple Button" instead takes its colors from "Shade Yellow" and thus shares them.
That makes skinning harder and more surprising when you try to have a usable Dark Mode (fixing Dark Mode is a separate patch though).

Refs T15056

Test Plan:
* Look at the four colors in `phui-button-simple.css`, compare variables, and dramatically raise an eyebrow
* Go to http://phorge.localhost/settings/panel/display/ and set `Accessibility` to `Default (Use Standard Colors)`
* Look at Yellow Buttons. They are shy but some sometimes they graze on http://phorge.localhost/uiexample/view/PHUIButtonExample/ so watch out!

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/D26374

Andre Klapper 8 months ago 5fef5e56 d505dd23

+20 -8

4 changed files

expand all

resources

celerity

map.php

src

applications

celerity

postprocessor

CelerityDarkModePostprocessor.php

CelerityDefaultPostprocessor.php

webroot

rsrc

css

phui

button

phui-button-simple.css

+6 -6

resources/celerity/map.php

··· 9 9 'names' => array( 10 10 'conpherence.pkg.css' => 'beb13d57', 11 11 'conpherence.pkg.js' => '020aebcf', 12 - 'core.pkg.css' => '1bfee9a9', 12 + 'core.pkg.css' => 'b6b76664', 13 13 'core.pkg.js' => '83580d78', 14 14 'dark-console.pkg.js' => '187792c2', 15 15 'differential.pkg.css' => '77189aae', ··· 116 116 'rsrc/css/fuel/fuel-menu.css' => '21f5d199', 117 117 'rsrc/css/layout/phabricator-source-code-view.css' => 'e994d13f', 118 118 'rsrc/css/phui/button/phui-button-bar.css' => 'a4aa75c4', 119 - 'rsrc/css/phui/button/phui-button-simple.css' => '1ff278aa', 119 + 'rsrc/css/phui/button/phui-button-simple.css' => 'a9da7b2a', 120 120 'rsrc/css/phui/button/phui-button.css' => 'bca9bfe3', 121 121 'rsrc/css/phui/calendar/phui-calendar-day.css' => '9597d706', 122 122 'rsrc/css/phui/calendar/phui-calendar-list.css' => 'ccd7e4e2', ··· 775 775 'phui-bulk-editor-css' => '374d5e30', 776 776 'phui-button-bar-css' => 'a4aa75c4', 777 777 'phui-button-css' => 'bca9bfe3', 778 - 'phui-button-simple-css' => '1ff278aa', 778 + 'phui-button-simple-css' => 'a9da7b2a', 779 779 'phui-calendar-css' => '5dfee96b', 780 780 'phui-calendar-day-css' => '9597d706', 781 781 'phui-calendar-list-css' => 'ccd7e4e2', ··· 1014 1014 'javelin-behavior', 1015 1015 'javelin-dom', 1016 1016 ), 1017 - '1ff278aa' => array( 1018 - 'phui-button-css', 1019 - ), 1020 1017 '202a2e85' => array( 1021 1018 'javelin-install', 1022 1019 'javelin-reactornode', ··· 1775 1772 'javelin-stratcom', 1776 1773 'javelin-util', 1777 1774 'phabricator-notification-css', 1775 + ), 1776 + 'a9da7b2a' => array( 1777 + 'phui-button-css', 1778 1778 ), 1779 1779 'aa371860' => array( 1780 1780 'javelin-behavior',

src/applications/celerity/postprocessor/CelerityDarkModePostprocessor.php

··· 104 104 'redtext' => '#802b2b', 105 105 'lightredbackground' => '#f5e1e1', 106 106 107 + // Base Yellow 108 + 'lightyellowborder' => '#dbdbbd', 109 + 'yellowborder' => '#b9b988', 110 + 'yellowtext' => '#72723c', 111 + 'lightyellowbackground' => '#ededde', 112 + 107 113 // Base Violet 108 114 'lightvioletborder' => '#cfbddb', 109 115 'violetborder' => '#b589ba',

src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php

··· 117 117 'redtext' => '#802b2b', 118 118 'lightredbackground' => '#f5e1e1', 119 119 120 + // Base Yellow 121 + 'lightyellowborder' => '#dbdbbd', 122 + 'yellowborder' => '#b9b988', 123 + 'yellowtext' => '#72723c', 124 + 'lightyellowbackground' => '#ededde', 125 + 120 126 // Base Violet 121 127 'lightvioletborder' => '#cfbddb', 122 128 'violetborder' => '#b589ba',

+2 -2

webroot/rsrc/css/phui/button/phui-button-simple.css

··· 94 94 a.phui-button-simple.button-yellow, 95 95 a.phui-button-simple.button-yellow:visited { 96 96 background-color: {$sh-yellowbackground}; 97 - color: {$sh-yellowtext}; 97 + color: {$yellowtext}; 98 98 border: 1px solid {$sh-yellowborder}; 99 99 } 100 100 ··· 102 102 input[type="submit"].phui-button-simple.button-yellow .phui-icon-view, 103 103 a.phui-button-simple.button-yellow .phui-icon-view, 104 104 a.phui-button-simple.button-yellow:visited .phui-icon-view { 105 - color: {$sh-yellowicon}; 105 + color: {$yellowtext}; 106 106 } 107 107 108 108 a.button.phui-button-simple.button-yellow:hover,

Configure Feed

Configure Feed