Lots of little fixes for Dark Mode (Experimental)

Summary: Cleans up a bunch of Differential odd/special colors. Adds some basic "highlight" colors instead of pure yellow.

Test Plan: Test each color change in normal and dark modes.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D18239

resources/celerity/map.php

@@ -9,10 +9,10 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'e68cf1fa',
     'conpherence.pkg.js' => 'b5b51108',
-    'core.pkg.css' => '2cac901b',
+    'core.pkg.css' => 'a1b6f35e',
     'core.pkg.js' => '5d80e0db',
     'darkconsole.pkg.js' => '1f9a31bc',
-    'differential.pkg.css' => '0cdef299',
+    'differential.pkg.css' => '45951e9e',
     'differential.pkg.js' => '1d80ecc6',
     'diffusion.pkg.css' => 'a2d17c7d',
     'diffusion.pkg.js' => '6134c5a1',
@@ -45,7 +45,7 @@ return array(
     'rsrc/css/application/base/standard-page-view.css' => 'eb5b80c5',
     'rsrc/css/application/chatlog/chatlog.css' => 'd295b020',
     'rsrc/css/application/conduit/conduit-api.css' => '7bc725c4',
-    'rsrc/css/application/config/config-options.css' => 'c5aac7b0',
+    'rsrc/css/application/config/config-options.css' => 'd55ed093',
     'rsrc/css/application/config/config-page.css' => 'c1d5121b',
     'rsrc/css/application/config/config-template.css' => '8f18fa41',
     'rsrc/css/application/config/setup-issue.css' => 'f794cfc3',
@@ -64,9 +64,9 @@ return array(
     'rsrc/css/application/dashboard/dashboard.css' => 'fe5b1869',
     'rsrc/css/application/diff/inline-comment-summary.css' => 'f23d4e8f',
     'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
-    'rsrc/css/application/differential/changeset-view.css' => 'bf1a41d8',
+    'rsrc/css/application/differential/changeset-view.css' => 'bf84345b',
     'rsrc/css/application/differential/core.css' => '5b7b8ff4',
-    'rsrc/css/application/differential/phui-inline-comment.css' => 'c4036846',
+    'rsrc/css/application/differential/phui-inline-comment.css' => '65ae3bc2',
     'rsrc/css/application/differential/revision-comment.css' => '14b8565a',
     'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
     'rsrc/css/application/differential/revision-list.css' => 'f3c47d33',
@@ -116,7 +116,7 @@ return array(
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => '1760853c',
-    'rsrc/css/core/remarkup.css' => '279e409c',
+    'rsrc/css/core/remarkup.css' => '25dc9ace',
     'rsrc/css/core/syntax.css' => 'cae95e89',
     'rsrc/css/core/z-index.css' => '9d8f7c4b',
     'rsrc/css/diviner/diviner-shared.css' => '896f1d43',
@@ -125,7 +125,7 @@ return array(
     'rsrc/css/font/phui-font-icon-base.css' => '870a7360',
     'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
     'rsrc/css/layout/phabricator-source-code-view.css' => 'aea41829',
-    'rsrc/css/phui/button/phui-button-bar.css' => '39fe680c',
+    'rsrc/css/phui/button/phui-button-bar.css' => 'f1ff5494',
     'rsrc/css/phui/button/phui-button-simple.css' => '8e1baf68',
     'rsrc/css/phui/button/phui-button.css' => '022581b4',
     'rsrc/css/phui/calendar/phui-calendar-day.css' => '572b1893',
@@ -146,7 +146,7 @@ return array(
     'rsrc/css/phui/phui-box.css' => '745e881d',
     'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
     'rsrc/css/phui/phui-cms.css' => '504b4b23',
-    'rsrc/css/phui/phui-comment-form.css' => '62836121',
+    'rsrc/css/phui/phui-comment-form.css' => 'ac68149f',
     'rsrc/css/phui/phui-comment-panel.css' => 'f50152ad',
     'rsrc/css/phui/phui-crumbs-view.css' => '6ece3bbb',
     'rsrc/css/phui/phui-curtain-view.css' => '55dd0e59',
@@ -178,7 +178,7 @@ return array(
     'rsrc/css/phui/phui-spacing.css' => '042804d6',
     'rsrc/css/phui/phui-status.css' => 'd5263e49',
     'rsrc/css/phui/phui-tag-view.css' => 'b4719c50',
-    'rsrc/css/phui/phui-timeline-view.css' => 'c4700486',
+    'rsrc/css/phui/phui-timeline-view.css' => 'f21db7ca',
     'rsrc/css/phui/phui-two-column-view.css' => '5b8cd553',
     'rsrc/css/phui/workboards/phui-workboard-color.css' => '783cdff5',
     'rsrc/css/phui/workboards/phui-workboard.css' => '3bc85455',
@@ -552,7 +552,7 @@ return array(
     'auth-css' => '0877ed6e',
     'bulk-job-css' => 'df9c1d4a',
     'conduit-api-css' => '7bc725c4',
-    'config-options-css' => 'c5aac7b0',
+    'config-options-css' => 'd55ed093',
     'config-page-css' => 'c1d5121b',
     'conpherence-color-css' => 'abb4c358',
     'conpherence-durable-column-view' => '89ea6bef',
@@ -564,7 +564,7 @@ return array(
     'conpherence-thread-manager' => '4d863052',
     'conpherence-transaction-css' => '85129c68',
     'd3' => 'a11a5ff2',
-    'differential-changeset-view-css' => 'bf1a41d8',
+    'differential-changeset-view-css' => 'bf84345b',
     'differential-core-view-css' => '5b7b8ff4',
     'differential-revision-add-comment-css' => 'c47f8c40',
     'differential-revision-comment-css' => '14b8565a',
@@ -798,7 +798,7 @@ return array(
     'phabricator-object-selector-css' => '85ee8ce6',
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => 'c5af80a2',
-    'phabricator-remarkup-css' => '279e409c',
+    'phabricator-remarkup-css' => '25dc9ace',
     'phabricator-search-results-css' => '8f8e08ed',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-slowvote-css' => 'a94b7230',
@@ -824,7 +824,7 @@ return array(
     'phui-basic-nav-view-css' => 'a0705f53',
     'phui-big-info-view-css' => 'd13afcde',
     'phui-box-css' => '745e881d',
-    'phui-button-bar-css' => '39fe680c',
+    'phui-button-bar-css' => 'f1ff5494',
     'phui-button-css' => '022581b4',
     'phui-button-simple-css' => '8e1baf68',
     'phui-calendar-css' => 'f1ddf11c',
@@ -833,7 +833,7 @@ return array(
     'phui-calendar-month-css' => '21154caf',
     'phui-chart-css' => '6bf6f78e',
     'phui-cms-css' => '504b4b23',
-    'phui-comment-form-css' => '62836121',
+    'phui-comment-form-css' => 'ac68149f',
     'phui-comment-panel-css' => 'f50152ad',
     'phui-crumbs-view-css' => '6ece3bbb',
     'phui-curtain-view-css' => '55dd0e59',
@@ -854,7 +854,7 @@ return array(
     'phui-image-mask-css' => 'a8498f9c',
     'phui-info-panel-css' => '27ea50a1',
     'phui-info-view-css' => 'e1b4ec37',
-    'phui-inline-comment-view-css' => 'c4036846',
+    'phui-inline-comment-view-css' => '65ae3bc2',
     'phui-invisible-character-view-css' => '6993d9f0',
     'phui-left-right-css' => 'f60c67e7',
     'phui-lightbox-css' => '0a035e40',
@@ -875,7 +875,7 @@ return array(
     'phui-status-list-view-css' => 'd5263e49',
     'phui-tag-view-css' => 'b4719c50',
     'phui-theme-css' => '9f261c6b',
-    'phui-timeline-view-css' => 'c4700486',
+    'phui-timeline-view-css' => 'f21db7ca',
     'phui-two-column-view-css' => '5b8cd553',
     'phui-workboard-color-css' => '783cdff5',
     'phui-workboard-view-css' => '3bc85455',
@@ -1112,10 +1112,6 @@ return array(
       'javelin-dom',
       'javelin-vector',
     ),
-    '39fe680c' => array(
-      'phui-button-css',
-      'phui-button-simple-css',
-    ),
     '3ab51e2c' => array(
       'javelin-behavior',
       'javelin-behavior-device',
@@ -1867,14 +1863,14 @@ return array(
       'phabricator-drag-and-drop-file-upload',
       'phabricator-draggable-list',
     ),
-    'bf1a41d8' => array(
-      'phui-inline-comment-view-css',
-    ),
     'bf5374ef' => array(
       'javelin-behavior',
       'javelin-stratcom',
       'javelin-dom',
     ),
+    'bf84345b' => array(
+      'phui-inline-comment-view-css',
+    ),
     'bff6884b' => array(
       'javelin-install',
       'javelin-dom',
@@ -2120,6 +2116,10 @@ return array(
       'javelin-workflow',
       'javelin-json',
     ),
+    'f1ff5494' => array(
+      'phui-button-css',
+      'phui-button-simple-css',
+    ),
     'f50152ad' => array(
       'phui-timeline-view-css',
     ),

src/applications/celerity/postprocessor/CelerityDarkModePostprocessor.php

@@ -32,15 +32,15 @@ final class CelerityDarkModePostprocessor
 
       // Base Colors
       'red'           => '#c0392b',
-      'lightred'      => '#f4dddb',
+      'lightred'      => '#7f261c',
       'orange'        => '#e67e22',
       'lightorange'   => '#f7e2d4',
       'yellow'        => '#f1c40f',
-      'lightyellow'   => '#fdf5d4',
+      'lightyellow'   => '#a4850a',
       'green'         => '#139543',
-      'lightgreen'    => '#d7eddf',
+      'lightgreen'    => '#0e7032',
       'blue'          => '#2980b9',
-      'lightblue'     => '#daeaf3',
+      'lightblue'     => '#1d5981',
       'sky'           => '#3498db',
       'lightsky'      => '#ddeef9',
       'fire'          => '#e62f17',
@@ -49,7 +49,7 @@ final class CelerityDarkModePostprocessor
       'pink'          => '#da49be',
       'lightpink'     => '#fbeaf8',
       'violet'        => '#8e44ad',
-      'lightviolet'   => '#ecdff1',
+      'lightviolet'   => '#622f78',
       'charcoal'      => '#4b4d51',
       'backdrop'      => '#c4cde0',
       'hoverwhite'    => 'rgba(255,255,255,.6)',
@@ -60,6 +60,7 @@ final class CelerityDarkModePostprocessor
       'hoverselectedblue' => '#e6e9ee',
       'borderinset' => 'inset 0 0 0 1px rgba(55,55,55,.15)',
       'timeline'    => '#4e6078',
+      'timeline.icon.background' => '#416086',
       'bluepropertybackground' => '#2d435f',
 
       // Alphas
@@ -183,13 +184,18 @@ final class CelerityDarkModePostprocessor
       'sh-disabledbackground'   => '#f3f3f3',
 
       // Diffs
-      'new-background' => 'rgba(151, 234, 151, .3)',
-      'new-bright' => 'rgba(151, 234, 151, .6)',
-      'old-background' => 'rgba(251, 175, 175, .3)',
-      'old-bright' => 'rgba(251, 175, 175, .7)',
-      'move-background' => '#fdf5d4',
+      'diff.background' => '#121b27',
+      'new-background' => 'rgba(151, 234, 151, .55)',
+      'new-bright' => 'rgba(151, 234, 151, .75)',
+      'old-background' => 'rgba(251, 175, 175, .55)',
+      'old-bright' => 'rgba(251, 175, 175, .8)',
+      'move-background' => '#faca00',
       'copy-background' => '#f1c40f',
 
+      // Usually light yellow
+      'gentle.highlight' => '#26c1c9',
+      'gentle.highlight.border' => '#21a9b0',
+
       'paste.content' => '#222222',
       'paste.border' => '#000000',
       'paste.highlight' => '#121212',

src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php

@@ -72,6 +72,7 @@ final class CelerityDefaultPostprocessor
       'hoverselectedblue' => '#e6e9ee',
       'borderinset' => 'inset 0 0 0 1px rgba(55,55,55,.15)',
       'timeline'    => '#d5d8e1',
+      'timeline.icon.background' => '#E6E9F1',
       'bluepropertybackground' => '#eff3fc',
 
       // Alphas
@@ -195,6 +196,7 @@ final class CelerityDefaultPostprocessor
       'sh-disabledbackground'   => '#f3f3f3',
 
       // Diffs
+      'diff.background' => '#fff',
       'new-background' => 'rgba(151, 234, 151, .3)',
       'new-bright' => 'rgba(151, 234, 151, .6)',
       'old-background' => 'rgba(251, 175, 175, .3)',
@@ -202,6 +204,10 @@ final class CelerityDefaultPostprocessor
       'move-background' => '#fdf5d4',
       'copy-background' => '#f1c40f',
 
+      // Usually light yellow
+      'gentle.highlight' => '#fdf3da',
+      'gentle.highlight.border' => '#c9b8a8',
+
       'paste.content' => '#fffef5',
       'paste.border' => '#e9dbcd',
       'paste.highlight' => '#fdf3da',

webroot/rsrc/css/application/config/config-options.css

@@ -52,5 +52,5 @@
 
 .config-options-effective-value,
 .config-option-table .config-options-effective-value th {
-  background: {$lightyellow};
+  background: {$gentle.highlight};
 }

webroot/rsrc/css/application/differential/changeset-view.css

@@ -20,7 +20,7 @@
 }
 
 .differential-diff {
-  background: {$page.content};
+  background: {$diff.background};
   width: 100%;
   border-top: 1px solid {$lightblueborder};
   border-bottom: 1px solid {$lightblueborder};
@@ -266,9 +266,9 @@ td.cov-I {
 }
 
 .differential-meta-notice {
-  border-top: 1px solid {$sh-lightyellowborder};
-  border-bottom: 1px solid {$sh-lightyellowborder};
-  background-color: {$sh-yellowbackground};
+  border-top: 1px solid {$gentle.highlight.border};
+  border-bottom: 1px solid {$gentle.highlight.border};
+  background-color: {$gentle.highlight};
   padding: 12px;
 }
 
@@ -304,9 +304,9 @@ td.cov-I {
 }
 
 .differential-loading {
-  border-top: 1px solid {$yellow};
-  border-bottom: 1px solid {$yellow};
-  background-color: {$lightyellow};
+  border-top: 1px solid {$gentle.highlight.border};
+  border-bottom: 1px solid {$gentle.highlight.border};
+  background-color: {$gentle.highlight};
   padding: 12px;
   text-align: center;
 }
@@ -405,7 +405,7 @@ tr.differential-inline-loading {
 .diff-banner-has-unsaved,
 .diff-banner-has-unsubmitted,
 .diff-banner-has-draft-done {
-  background: {$sh-yellowbackground};
+  background: {$gentle.highlight};
 }
 
 .diff-banner-buttons {

webroot/rsrc/css/application/differential/phui-inline-comment.css

@@ -26,7 +26,7 @@
 .differential-inline-comment,
 .differential-inline-comment-edit {
   background: {$page.content};
-  border: 1px solid {$sh-yellowborder};
+  border: 1px solid {$gentle.highlight.border};
   font: {$basefont};
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -48,9 +48,9 @@
 .differential-inline-comment-head {
   font-weight:  bold;
   color: {$darkbluetext};
-  border-bottom: 1px solid {$sh-lightyellowborder};
+  border-bottom: 1px solid {$gentle.highlight.border};
   padding: 4px 5px 4px 8px;
-  background-color: {$sh-yellowbackground};
+  background-color: {$gentle.highlight};
 }
 
 .differential-inline-comment-content {
@@ -209,8 +209,8 @@
 */
 
 .differential-inline-comment .differential-inline-done-label {
-  border-color: {$sh-yellowborder};
-  color: {$sh-yellowicon};
+  border-color: {$gentle.highlight.border};
+  color: {$bluetext};
 }
 
 .differential-inline-comment.inline-state-is-draft

webroot/rsrc/css/core/remarkup.css

@@ -3,7 +3,7 @@
  */
 
 .phabricator-remarkup {
-  line-height: 1.51em;
+  line-height: 1.61em;
   word-break: break-word;
   color: {$darkbluetext};
 }

webroot/rsrc/css/diviner/diviner-shared.css

@@ -66,7 +66,7 @@
 }
 
 .phui-header-shell.diviner-section-header .phui-header-header {
-  color: #000;
+  color: {$blacktext};
   font-size: 20px;
 }
 

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

@@ -14,7 +14,7 @@
 
 .phui-button-bar-borderless .button .phui-icon-view {
   font-size: 15px;
-  color: rgba({$alphagrey},.4);
+  color: {$bluetext};
 }
 
 .phui-button-bar-borderless .button:hover {
@@ -24,7 +24,7 @@
 }
 
 .phui-button-bar-borderless .button:hover .phui-icon-view {
-  color: rgba({$alphagrey},.9);
+  color: {$sky};
 }
 
 .phui-button-bar-borderless .button {

webroot/rsrc/css/phui/phui-basic-nav-view.css

@@ -48,7 +48,7 @@
 }
 
 .phui-two-column-view .phui-basic-nav .phabricator-side-menu {
-  background-color: #fff;
+  background-color: {$page.content};
 }
 
 .phui-basic-nav .phabricator-side-menu {

webroot/rsrc/css/phui/phui-comment-form.css

@@ -90,7 +90,7 @@ body.device .phui-box.phui-object-box.phui-comment-form-view {
 }
 
 .phui-comment-action {
-  background-color: rgba(239, 243, 252, .75);
+  background-color: rgba({$alphablue}, .1);
   border-radius: 3px;
   margin: 0px 16px 8px;
   padding: 6px;

webroot/rsrc/css/phui/phui-timeline-view.css

@@ -221,7 +221,7 @@
 }
 
 .phui-timeline-icon {
-  color: {$sh-blueicon};
+  color: {$bluetext};
 }
 
 .phui-icon-view.phui-timeline-icon {
@@ -232,7 +232,7 @@
   height: 26px;
   width: 26px;
   border-radius: 3px;
-  background-color: #E6E9F1;
+  background-color: {$timeline.icon.background};
 }
 
 .phui-timeline-major-event .phui-timeline-icon-fill {