From 0e5cd478c4bcedbe5eca21d5352f23b199f92b5b Mon Sep 17 00:00:00 2001
From: Chad Little <chad@chadsdomain.com>
Date: Sun, 14 Feb 2016 21:29:56 -0800
Subject: [PATCH] Move rgba rules into CelerityDefaultPostprocessor

Summary: Should make it simpler here to have more `rgba` rules in CSS for things like hovers, selected states. Maybe only use `rgb` colors? Color pallette probably needs an overhaul.

Test Plan: Bounce around random pages, buttons, menus. Everything appears normal.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D15273
---
 resources/celerity/map.php                    | 66 +++++++++----------
 .../CelerityDefaultPostprocessor.php          |  6 ++
 webroot/rsrc/css/aphront/dark-console.css     |  2 +-
 webroot/rsrc/css/aphront/notification.css     |  2 +-
 .../rsrc/css/aphront/phabricator-nav-view.css |  2 +-
 webroot/rsrc/css/aphront/tooltip.css          |  4 +-
 webroot/rsrc/css/aphront/typeahead.css        |  2 +-
 .../css/application/base/main-menu-view.css   |  2 +-
 .../phabricator-application-launch-view.css   |  2 +-
 .../application/base/standard-page-view.css   |  2 +-
 .../conpherence/durable-column.css            |  4 +-
 .../rsrc/css/application/conpherence/menu.css |  6 +-
 .../differential/phui-inline-comment.css      |  4 +-
 .../files/global-drag-and-drop.css            |  2 +-
 .../css/application/people/people-profile.css |  2 +-
 webroot/rsrc/css/application/phame/phame.css  |  8 +--
 .../rsrc/css/application/pholio/pholio.css    | 14 ++--
 .../css/application/ponder/ponder-view.css    |  4 +-
 .../css/application/project/project-view.css  |  4 +-
 webroot/rsrc/css/core/remarkup.css            |  8 +--
 .../css/layout/phabricator-side-menu-view.css |  6 +-
 webroot/rsrc/css/phui/phui-action-panel.css   |  2 +-
 webroot/rsrc/css/phui/phui-badge.css          |  2 +-
 webroot/rsrc/css/phui/phui-box.css            |  4 +-
 webroot/rsrc/css/phui/phui-button.css         | 10 +--
 webroot/rsrc/css/phui/phui-crumbs-view.css    |  2 +-
 webroot/rsrc/css/phui/phui-document-pro.css   |  2 +-
 .../rsrc/css/phui/phui-document-summary.css   |  2 +-
 webroot/rsrc/css/phui/phui-form.css           | 12 ++--
 webroot/rsrc/css/phui/phui-header-view.css    |  4 +-
 webroot/rsrc/css/phui/phui-image-mask.css     |  2 +-
 webroot/rsrc/css/phui/phui-info-view.css      |  2 +-
 webroot/rsrc/css/phui/phui-profile-menu.css   | 10 +--
 webroot/rsrc/css/phui/phui-tag-view.css       |  2 +-
 .../phui/workboards/phui-workboard-color.css  | 10 +--
 .../css/phui/workboards/phui-workcard.css     |  2 +-
 .../css/phui/workboards/phui-workpanel.css    |  8 +--
 37 files changed, 117 insertions(+), 111 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index 856da367e1..791572dac3 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '1972333f',
+    'core.pkg.css' => '7fd6b616',
     'core.pkg.js' => 'd7daa6d8',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
@@ -17,19 +17,19 @@ return array(
     'maniphest.pkg.css' => '4845691a',
     'maniphest.pkg.js' => '949a7498',
     'rsrc/css/aphront/aphront-bars.css' => '231ac33c',
-    'rsrc/css/aphront/dark-console.css' => '6378ef3d',
+    'rsrc/css/aphront/dark-console.css' => 'f54bf286',
     'rsrc/css/aphront/dialog-view.css' => 'b4334e08',
     'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d',
     'rsrc/css/aphront/list-filter-view.css' => '5d6f0526',
     'rsrc/css/aphront/multi-column.css' => 'fd18389d',
-    'rsrc/css/aphront/notification.css' => '9c279160',
+    'rsrc/css/aphront/notification.css' => '7f684b62',
     'rsrc/css/aphront/panel-view.css' => '8427b78d',
-    'rsrc/css/aphront/phabricator-nav-view.css' => 'a24cb589',
+    'rsrc/css/aphront/phabricator-nav-view.css' => 'ac79a758',
     'rsrc/css/aphront/table-view.css' => '6d01d468',
     'rsrc/css/aphront/tokenizer.css' => '056da01b',
-    'rsrc/css/aphront/tooltip.css' => '7672b60f',
+    'rsrc/css/aphront/tooltip.css' => '1a07aea8',
     'rsrc/css/aphront/typeahead-browse.css' => 'd8581d2c',
-    'rsrc/css/aphront/typeahead.css' => '0e403212',
+    'rsrc/css/aphront/typeahead.css' => 'd4f16145',
     'rsrc/css/application/almanac/almanac.css' => 'dbb9b3af',
     'rsrc/css/application/auth/auth.css' => '0877ed6e',
     'rsrc/css/application/base/main-menu-view.css' => 'd00a795a',
@@ -68,7 +68,7 @@ return array(
     'rsrc/css/application/diffusion/diffusion-readme.css' => '2106ea08',
     'rsrc/css/application/diffusion/diffusion-source.css' => '075ba788',
     'rsrc/css/application/feed/feed.css' => 'ecd4ec57',
-    'rsrc/css/application/files/global-drag-and-drop.css' => '697324ad',
+    'rsrc/css/application/files/global-drag-and-drop.css' => '5c1b47c2',
     'rsrc/css/application/flag/flag.css' => '5337623f',
     'rsrc/css/application/harbormaster/harbormaster.css' => 'b0758ca5',
     'rsrc/css/application/herald/herald-test.css' => 'a52e323e',
@@ -81,10 +81,10 @@ return array(
     'rsrc/css/application/owners/owners-path-editor.css' => '2f00933b',
     'rsrc/css/application/paste/paste.css' => 'a5157c48',
     'rsrc/css/application/people/people-profile.css' => '2473d929',
-    'rsrc/css/application/phame/phame.css' => '1dbbacf9',
+    'rsrc/css/application/phame/phame.css' => '4ca6fd6c',
     'rsrc/css/application/pholio/pholio-edit.css' => '3ad9d1ee',
     'rsrc/css/application/pholio/pholio-inline-comments.css' => '8e545e49',
-    'rsrc/css/application/pholio/pholio.css' => '95174bdd',
+    'rsrc/css/application/pholio/pholio.css' => 'ca89d380',
     'rsrc/css/application/phortune/phortune-credit-card-form.css' => '8391eb02',
     'rsrc/css/application/phortune/phortune.css' => '9149f103',
     'rsrc/css/application/phrequent/phrequent.css' => 'ffc185ad',
@@ -92,7 +92,7 @@ return array(
     'rsrc/css/application/policy/policy-edit.css' => '815c66f7',
     'rsrc/css/application/policy/policy-transaction-detail.css' => '82100a43',
     'rsrc/css/application/policy/policy.css' => '957ea14c',
-    'rsrc/css/application/ponder/ponder-view.css' => '7b0df4da',
+    'rsrc/css/application/ponder/ponder-view.css' => '4486434b',
     'rsrc/css/application/project/project-card-view.css' => '9418c97d',
     'rsrc/css/application/project/project-view.css' => '4c832c27',
     'rsrc/css/application/releeph/releeph-core.css' => '9b3c5733',
@@ -104,7 +104,7 @@ return array(
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => '5b3563c8',
-    'rsrc/css/core/remarkup.css' => '2c913a06',
+    'rsrc/css/core/remarkup.css' => 'fc228f08',
     'rsrc/css/core/syntax.css' => '9fd11da8',
     'rsrc/css/core/z-index.css' => '5b6fcf3f',
     'rsrc/css/diviner/diviner-shared.css' => 'aa3656aa',
@@ -124,21 +124,21 @@ return array(
     'rsrc/css/phui/phui-badge.css' => 'f25c3476',
     'rsrc/css/phui/phui-big-info-view.css' => 'bd903741',
     'rsrc/css/phui/phui-box.css' => 'dd1294d3',
-    'rsrc/css/phui/phui-button.css' => 'd04a0eb7',
+    'rsrc/css/phui/phui-button.css' => 'edf464e9',
     'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
     'rsrc/css/phui/phui-crumbs-view.css' => '79d536e5',
-    'rsrc/css/phui/phui-document-pro.css' => '8799acf7',
+    'rsrc/css/phui/phui-document-pro.css' => 'a8872307',
     'rsrc/css/phui/phui-document-summary.css' => '9ca48bdf',
     'rsrc/css/phui/phui-document.css' => '9c71d2bf',
     'rsrc/css/phui/phui-feed-story.css' => '04aec08f',
     'rsrc/css/phui/phui-fontkit.css' => '9cda225e',
     'rsrc/css/phui/phui-form-view.css' => '4a1a0f5e',
-    'rsrc/css/phui/phui-form.css' => '0b98e572',
-    'rsrc/css/phui/phui-header-view.css' => 'd53cc835',
+    'rsrc/css/phui/phui-form.css' => 'aac1d51d',
+    'rsrc/css/phui/phui-header-view.css' => '50c5cb6a',
     'rsrc/css/phui/phui-hovercard.css' => 'de1a2119',
     'rsrc/css/phui/phui-icon-set-selector.css' => '1ab67aad',
     'rsrc/css/phui/phui-icon.css' => '3f33ab57',
-    'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
+    'rsrc/css/phui/phui-image-mask.css' => 'a8498f9c',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-info-view.css' => '6d7c3509',
     'rsrc/css/phui/phui-list.css' => '9da2aa00',
@@ -146,7 +146,7 @@ return array(
     'rsrc/css/phui/phui-object-item-list-view.css' => '18b2ce8e',
     'rsrc/css/phui/phui-pager.css' => 'bea33d23',
     'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
-    'rsrc/css/phui/phui-profile-menu.css' => 'f709256c',
+    'rsrc/css/phui/phui-profile-menu.css' => 'f42bedb6',
     'rsrc/css/phui/phui-property-list-view.css' => '27b2849e',
     'rsrc/css/phui/phui-remarkup-preview.css' => '1a8f2591',
     'rsrc/css/phui/phui-segment-bar-view.css' => '46342871',
@@ -518,15 +518,15 @@ return array(
   'symbols' => array(
     'almanac-css' => 'dbb9b3af',
     'aphront-bars' => '231ac33c',
-    'aphront-dark-console-css' => '6378ef3d',
+    'aphront-dark-console-css' => 'f54bf286',
     'aphront-dialog-view-css' => 'b4334e08',
     'aphront-list-filter-view-css' => '5d6f0526',
     'aphront-multi-column-view-css' => 'fd18389d',
     'aphront-panel-view-css' => '8427b78d',
     'aphront-table-view-css' => '6d01d468',
     'aphront-tokenizer-control-css' => '056da01b',
-    'aphront-tooltip-css' => '7672b60f',
-    'aphront-typeahead-control-css' => '0e403212',
+    'aphront-tooltip-css' => '1a07aea8',
+    'aphront-typeahead-control-css' => 'd4f16145',
     'auth-css' => '0877ed6e',
     'bulk-job-css' => 'df9c1d4a',
     'changeset-view-manager' => 'a2828756',
@@ -557,7 +557,7 @@ return array(
     'font-aleo' => '8bdb2835',
     'font-fontawesome' => 'c43323c5',
     'font-lato' => 'c7ccd872',
-    'global-drag-and-drop-css' => '697324ad',
+    'global-drag-and-drop-css' => '5c1b47c2',
     'harbormaster-css' => 'b0758ca5',
     'herald-css' => '826075fa',
     'herald-rule-editor' => '746ca158',
@@ -761,14 +761,14 @@ return array(
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => 'c1700f6f',
     'phabricator-main-menu-view' => 'd00a795a',
-    'phabricator-nav-view-css' => 'a24cb589',
+    'phabricator-nav-view-css' => 'ac79a758',
     'phabricator-notification' => 'ccf1cbf8',
-    'phabricator-notification-css' => '9c279160',
+    'phabricator-notification-css' => '7f684b62',
     'phabricator-notification-menu-css' => 'f31c0bde',
     'phabricator-object-selector-css' => '85ee8ce6',
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => 'e67df814',
-    'phabricator-remarkup-css' => '2c913a06',
+    'phabricator-remarkup-css' => 'fc228f08',
     'phabricator-search-results-css' => '7dea472c',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-side-menu-view-css' => '3a3d9f41',
@@ -790,8 +790,8 @@ return array(
     'phabricator-uiexample-reactor-sendclass' => '1def2711',
     'phabricator-uiexample-reactor-sendproperties' => 'b1f0ccee',
     'phabricator-zindex-css' => '5b6fcf3f',
-    'phame-css' => '1dbbacf9',
-    'pholio-css' => '95174bdd',
+    'phame-css' => '4ca6fd6c',
+    'pholio-css' => 'ca89d380',
     'pholio-edit-css' => '3ad9d1ee',
     'pholio-inline-comments-css' => '8e545e49',
     'phortune-credit-card-form' => '2290aeef',
@@ -803,7 +803,7 @@ return array(
     'phui-badge-view-css' => 'f25c3476',
     'phui-big-info-view-css' => 'bd903741',
     'phui-box-css' => 'dd1294d3',
-    'phui-button-css' => 'd04a0eb7',
+    'phui-button-css' => 'edf464e9',
     'phui-calendar-css' => 'ccabe893',
     'phui-calendar-day-css' => 'd1cf6f93',
     'phui-calendar-list-css' => 'c1c7f338',
@@ -812,18 +812,18 @@ return array(
     'phui-crumbs-view-css' => '79d536e5',
     'phui-document-summary-view-css' => '9ca48bdf',
     'phui-document-view-css' => '9c71d2bf',
-    'phui-document-view-pro-css' => '8799acf7',
+    'phui-document-view-pro-css' => 'a8872307',
     'phui-feed-story-css' => '04aec08f',
     'phui-font-icon-base-css' => 'ecbbb4c2',
     'phui-fontkit-css' => '9cda225e',
-    'phui-form-css' => '0b98e572',
+    'phui-form-css' => 'aac1d51d',
     'phui-form-view-css' => '4a1a0f5e',
-    'phui-header-view-css' => 'd53cc835',
+    'phui-header-view-css' => '50c5cb6a',
     'phui-hovercard' => '1bd28176',
     'phui-hovercard-view-css' => 'de1a2119',
     'phui-icon-set-selector-css' => '1ab67aad',
     'phui-icon-view-css' => '3f33ab57',
-    'phui-image-mask-css' => '5a8b09c8',
+    'phui-image-mask-css' => 'a8498f9c',
     'phui-info-panel-css' => '27ea50a1',
     'phui-info-view-css' => '6d7c3509',
     'phui-inline-comment-view-css' => '0fdb3667',
@@ -832,7 +832,7 @@ return array(
     'phui-object-item-list-view-css' => '18b2ce8e',
     'phui-pager-css' => 'bea33d23',
     'phui-pinboard-view-css' => '2495140e',
-    'phui-profile-menu-css' => 'f709256c',
+    'phui-profile-menu-css' => 'f42bedb6',
     'phui-property-list-view-css' => '27b2849e',
     'phui-remarkup-preview-css' => '1a8f2591',
     'phui-segment-bar-view-css' => '46342871',
@@ -855,7 +855,7 @@ return array(
     'policy-css' => '957ea14c',
     'policy-edit-css' => '815c66f7',
     'policy-transaction-detail-css' => '82100a43',
-    'ponder-view-css' => '7b0df4da',
+    'ponder-view-css' => '4486434b',
     'project-card-view-css' => '9418c97d',
     'project-view-css' => '4c832c27',
     'releeph-core' => '9b3c5733',
diff --git a/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php b/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php
index a47d4a65e4..4fdeaeccb1 100644
--- a/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php
+++ b/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php
@@ -72,6 +72,12 @@ final class CelerityDefaultPostprocessor
       'hoverselectedblue' => '#e6e9ee',
       'borderinset' => 'inset 0 0 0 1px rgba(55,55,55,.15)',
 
+      // Alphas
+      'alphawhite'          => '255,255,255',
+      'alphagrey'           => '55,55,55',
+      'alphablue'           => '71,87,120',
+      'alphablack'          => '0,0,0',
+
       // Base Greys
       'lightgreyborder'     => '#C7CCD9',
       'greyborder'          => '#A1A6B0',
diff --git a/webroot/rsrc/css/aphront/dark-console.css b/webroot/rsrc/css/aphront/dark-console.css
index e1df876dac..40dabd7bf6 100644
--- a/webroot/rsrc/css/aphront/dark-console.css
+++ b/webroot/rsrc/css/aphront/dark-console.css
@@ -31,7 +31,7 @@
 .dark-console-panel,
 .dark-console-load {
   border-left: 1px solid #111111;
-  box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.25);
+  box-shadow: -2px 0px 2px rgba({$alphablack}, 0.25);
 }
 
 .dark-console-requests {
diff --git a/webroot/rsrc/css/aphront/notification.css b/webroot/rsrc/css/aphront/notification.css
index 406f3a3143..1940309569 100644
--- a/webroot/rsrc/css/aphront/notification.css
+++ b/webroot/rsrc/css/aphront/notification.css
@@ -23,7 +23,7 @@
   cursor: pointer;
 
   border-radius: 3px;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+  box-shadow: 0px 1px 2px rgba({$alphablack}, 0.25);
   margin-top: 4px;
 }
 
diff --git a/webroot/rsrc/css/aphront/phabricator-nav-view.css b/webroot/rsrc/css/aphront/phabricator-nav-view.css
index 52a977c13e..7dbb56da07 100644
--- a/webroot/rsrc/css/aphront/phabricator-nav-view.css
+++ b/webroot/rsrc/css/aphront/phabricator-nav-view.css
@@ -52,7 +52,7 @@
   border-width: 0 1px 0 1px;
   border-color: #fff #999c9e #fff #999c9e;
 
-  box-shadow: inset -1px 0px 1px rgba(0, 0, 0, 0.15);
+  box-shadow: inset -1px 0px 1px rgba({$alphablack}, 0.15);
 
   background-image: url(/rsrc/image/divot.png);
   background-position: center;
diff --git a/webroot/rsrc/css/aphront/tooltip.css b/webroot/rsrc/css/aphront/tooltip.css
index caa21415d1..f2c3151373 100644
--- a/webroot/rsrc/css/aphront/tooltip.css
+++ b/webroot/rsrc/css/aphront/tooltip.css
@@ -9,7 +9,7 @@
 
 .jx-tooltip-inner {
   position: relative;
-  background: rgba(0,0,0, .9);
+  background: rgba({$alphablack}, .9);
   border-radius: 3px;
 }
 
@@ -28,7 +28,7 @@
   width: 0;
   position: absolute;
   pointer-events: none;
-  border-color: rgba(0, 0, 0, 0);
+  border-color: rgba({$alphablack}, 0);
   border-width: 5px;
 }
 
diff --git a/webroot/rsrc/css/aphront/typeahead.css b/webroot/rsrc/css/aphront/typeahead.css
index 30ff456d74..0f63918e40 100644
--- a/webroot/rsrc/css/aphront/typeahead.css
+++ b/webroot/rsrc/css/aphront/typeahead.css
@@ -14,7 +14,7 @@ div.jx-typeahead-results {
   padding: 0;
   background: #fefefe;
   width: 98%;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 1px 2px rgba({$alphablack}, 0.2);
   margin: -1px 1% 0;
 }
 
diff --git a/webroot/rsrc/css/application/base/main-menu-view.css b/webroot/rsrc/css/application/base/main-menu-view.css
index 92385e6dc2..2b8fcb1a0b 100644
--- a/webroot/rsrc/css/application/base/main-menu-view.css
+++ b/webroot/rsrc/css/application/base/main-menu-view.css
@@ -65,7 +65,7 @@
 }
 
 .device-desktop .phabricator-main-menu-brand:hover {
-  background-color: rgba(55,55,55,.2);
+  background-color: rgba({$alphagrey},.2);
   cursor: hand;
 }
 
diff --git a/webroot/rsrc/css/application/base/phabricator-application-launch-view.css b/webroot/rsrc/css/application/base/phabricator-application-launch-view.css
index a4b97ce83f..714fa849e6 100644
--- a/webroot/rsrc/css/application/base/phabricator-application-launch-view.css
+++ b/webroot/rsrc/css/application/base/phabricator-application-launch-view.css
@@ -52,7 +52,7 @@ div.phabricator-application-launch-container {
 }
 
 .device-desktop a.phabricator-application-launch-container:hover {
-  background-color: rgba(0,0,0,.07);
+  background-color: rgba({$alphablack},.07);
   text-decoration: none;
 }
 
diff --git a/webroot/rsrc/css/application/base/standard-page-view.css b/webroot/rsrc/css/application/base/standard-page-view.css
index 4b53f61a6a..05686898b6 100644
--- a/webroot/rsrc/css/application/base/standard-page-view.css
+++ b/webroot/rsrc/css/application/base/standard-page-view.css
@@ -21,7 +21,7 @@
   text-align: right;
   margin: 44px 16px 16px;
   padding: 12px 0;
-  border-top: 1px solid rgba(55,55,55,.1);
+  border-top: 1px solid rgba({$alphagrey},.1);
   color: {$greytext};
 }
 
diff --git a/webroot/rsrc/css/application/conpherence/durable-column.css b/webroot/rsrc/css/application/conpherence/durable-column.css
index a416813fc3..d204592cf3 100644
--- a/webroot/rsrc/css/application/conpherence/durable-column.css
+++ b/webroot/rsrc/css/application/conpherence/durable-column.css
@@ -108,8 +108,8 @@
 }
 
 .conpherence-durable-column-header {
-  border-left: 1px solid rgba(0,0,0,.1);
-  border-right: 1px solid rgba(0,0,0,.1);
+  border-left: 1px solid rgba({$alphablack},.1);
+  border-right: 1px solid rgba({$alphablack},.1);
 }
 
 .conpherence-durable-column-header-text {
diff --git a/webroot/rsrc/css/application/conpherence/menu.css b/webroot/rsrc/css/application/conpherence/menu.css
index 9918b89c71..49549c5738 100644
--- a/webroot/rsrc/css/application/conpherence/menu.css
+++ b/webroot/rsrc/css/application/conpherence/menu.css
@@ -117,7 +117,7 @@
 }
 
 .conpherence-menu .conpherence-selected {
-  background: rgba(0,0,0,0.05);
+  background: rgba({$alphablack},0.05);
   border-left: 4px solid {$sky};
 }
 
@@ -127,7 +127,7 @@
 
 .device-desktop .conpherence-menu
  .conpherence-selected.conpherence-menu-item-view:hover {
-  background-color: rgba(0,0,0,0.07);
+  background-color: rgba({$alphablack},0.07);
 }
 
 .conpherence-menu .loading {
@@ -135,7 +135,7 @@
 }
 
 .device-desktop .conpherence-menu .conpherence-menu-item-view:hover {
-  background-color: rgba(0,0,0,0.05);
+  background-color: rgba({$alphablack},0.05);
 }
 
 .conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-image {
diff --git a/webroot/rsrc/css/application/differential/phui-inline-comment.css b/webroot/rsrc/css/application/differential/phui-inline-comment.css
index 02998aaaf0..0055f25699 100644
--- a/webroot/rsrc/css/application/differential/phui-inline-comment.css
+++ b/webroot/rsrc/css/application/differential/phui-inline-comment.css
@@ -340,7 +340,7 @@
 }
 
 .ghost-icon {
-  background: rgba(55,55,55,.07);
+  background: rgba({$alphagrey},.07);
   float: left;
   padding: 2px 4px 2px 2px;
   position: absolute;
@@ -389,7 +389,7 @@
 }
 
 .inline-button-divider {
-  border-left: 1px solid rgba(55,55,55,.25);
+  border-left: 1px solid rgba({$alphagrey},.25);
   margin-left: 8px;
 }
 
diff --git a/webroot/rsrc/css/application/files/global-drag-and-drop.css b/webroot/rsrc/css/application/files/global-drag-and-drop.css
index 7539a046fb..e338b987b0 100644
--- a/webroot/rsrc/css/application/files/global-drag-and-drop.css
+++ b/webroot/rsrc/css/application/files/global-drag-and-drop.css
@@ -15,7 +15,7 @@
   padding: 18px 0;
 
   color: #ffffff;
-  background: rgba(0, 0, 0, 0.8);
+  background: rgba({$alphablack}, 0.8);
   border-radius: 18px;
 
 }
diff --git a/webroot/rsrc/css/application/people/people-profile.css b/webroot/rsrc/css/application/people/people-profile.css
index d73b94fb97..c5ec73551a 100644
--- a/webroot/rsrc/css/application/people/people-profile.css
+++ b/webroot/rsrc/css/application/people/people-profile.css
@@ -38,7 +38,7 @@ form.compose-dialog {
 }
 
 .compose-dialog .compose-icon-bg {
-  color: rgba(255,255,255,0.8);
+  color: rgba({$alphawhite},0.8);
   line-height: 50px;
   width: 50px;
   text-align: center;
diff --git a/webroot/rsrc/css/application/phame/phame.css b/webroot/rsrc/css/application/phame/phame.css
index 3d151426d6..299474fee1 100644
--- a/webroot/rsrc/css/application/phame/phame.css
+++ b/webroot/rsrc/css/application/phame/phame.css
@@ -23,7 +23,7 @@
   display: inline-block;
   background-repeat: no-repeat;
   background-size: 100%;
-  box-shadow: inset 0 0 0 1px rgba(55,55,55,.15);
+  box-shadow: inset 0 0 0 1px rgba({$alphagrey},.15);
   width: 40px;
   height: 40px;
   border-radius: 3px;
@@ -31,7 +31,7 @@
 }
 
 .phame-blog-description + .phui-property-list-section {
-  border-top: 1px solid rgba(71, 87, 120, 0.20);
+  border-top: 1px solid rgba({$alphablue}, 0.20);
   padding-top: 16px;
 }
 
@@ -45,7 +45,7 @@
 
 .phame-home-view {
   background-color: #fff;
-  border-bottom: 1px solid rgba(55,55,55,.1);
+  border-bottom: 1px solid rgba({$alphagrey},.1);
 }
 
 .phame-home-view .phame-home-container {
@@ -100,7 +100,7 @@
   display: inline-block;
   background-repeat: no-repeat;
   background-size: 100%;
-  box-shadow: inset 0 0 0 1px rgba(55,55,55,.15);
+  box-shadow: inset 0 0 0 1px rgba({$alphagrey},.15);
   width: 24px;
   height: 24px;
   border-radius: 3px;
diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css
index 1cd8e604a1..52ff4ca5bd 100644
--- a/webroot/rsrc/css/application/pholio/pholio.css
+++ b/webroot/rsrc/css/application/pholio/pholio.css
@@ -116,8 +116,8 @@
 }
 
 .pholio-mock-reticle-selection {
-  border: 1px solid rgba(0,0,0,.5);
-  box-shadow: 0 0 0 4px rgba(255,255,255,.5);
+  border: 1px solid rgba({$alphablack},.5);
+  box-shadow: 0 0 0 4px rgba({$alphawhite},.5);
 }
 
 .pholio-mock-comment-icon {
@@ -132,21 +132,21 @@
 .pholio-mock-reticle-draft .pholio-mock-comment-icon {
   font-size: 2.2em;
   color: {$yellow};
-  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
+  text-shadow: 0 3px 8px rgba({$alphablack}, 0.35);
   -webkit-text-stroke: 1px white;
 }
 
 .pholio-mock-reticle-final .pholio-mock-comment-icon {
   font-size: 2.2em;
   color: {$pink};
-  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
+  text-shadow: 0 3px 8px rgba({$alphablack}, 0.35);
   -webkit-text-stroke: 1px white;
 }
 
 .pholio-mock-reticle-draft:hover,
 .pholio-mock-reticle-final:hover {
-  border: 1px solid rgba(0,0,0,.5);
-  box-shadow: 0 0 0 4px rgba(255,255,255,.5);
+  border: 1px solid rgba({$alphablack},.5);
+  box-shadow: 0 0 0 4px rgba({$alphawhite},.5);
   cursor: pointer;
 }
 
@@ -170,7 +170,7 @@
   right: 0;
   font-size: 14px;
   padding: 4px 8px;
-  background: rgba(255,255,255,.6);
+  background: rgba({$alphawhite},.6);
   color: {$greytext};
 }
 
diff --git a/webroot/rsrc/css/application/ponder/ponder-view.css b/webroot/rsrc/css/application/ponder/ponder-view.css
index f1182d531c..565a6af83f 100644
--- a/webroot/rsrc/css/application/ponder/ponder-view.css
+++ b/webroot/rsrc/css/application/ponder/ponder-view.css
@@ -63,7 +63,7 @@
   margin-right: 8px;
   color: {$anchor};
   display: inline-block;
-  background-color: rgba(71, 87, 120, 0.06);
+  background-color: rgba({$alphablue}, 0.06);
 }
 
 .ponder-footer-view .ponder-footer-action.ponder-footer-action-helpful {
@@ -82,5 +82,5 @@
 
 .ponder-footer-view a:hover {
   text-decoration: none;
-  background-color: rgba(71, 87, 120, 0.10);
+  background-color: rgba({$alphablue}, 0.10);
 }
diff --git a/webroot/rsrc/css/application/project/project-view.css b/webroot/rsrc/css/application/project/project-view.css
index 5573780672..f46af0bc74 100644
--- a/webroot/rsrc/css/application/project/project-view.css
+++ b/webroot/rsrc/css/application/project/project-view.css
@@ -27,7 +27,7 @@
 .project-view-home .phui-box.project-view-properties {
   margin: 0 16px 16px 16px;
   padding: 4px 12px;
-  border: 2px solid rgba(55,55,55,.1);
+  border: 2px solid rgba({$alphagrey},.1);
   background-color: #F7F7F9;
 }
 
@@ -37,7 +37,7 @@
 
 .project-view-properties .phui-property-list-container +
   .phui-property-list-text-content {
-  border-color: rgba(55,55,55,.15);
+  border-color: rgba({$alphagrey},.15);
 }
 
 .project-view-properties .phui-property-list-key {
diff --git a/webroot/rsrc/css/core/remarkup.css b/webroot/rsrc/css/core/remarkup.css
index 511d646f8e..7b537f5d67 100644
--- a/webroot/rsrc/css/core/remarkup.css
+++ b/webroot/rsrc/css/core/remarkup.css
@@ -30,7 +30,7 @@
   padding: 6px 12px;
   font-size: 13px;
   font-weight: bold;
-  background: rgba(71,87,120,0.08);
+  background: rgba({$alphablue},0.08);
   display: inline-block;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
@@ -45,7 +45,7 @@
 }
 
 .phabricator-remarkup .remarkup-code-block pre {
-  background: rgba(71,87,120,0.08);
+  background: rgba({$alphablue},0.08);
   display: block;
   color: #000;
   overflow: auto;
@@ -59,7 +59,7 @@
 
 .phabricator-remarkup tt.remarkup-monospaced {
   color: #000;
-  background: rgba(71,87,120,0.1);
+  background: rgba({$alphablue},0.1);
   padding: 1px 4px;
   border-radius: 3px;
   white-space: pre-wrap;
@@ -330,7 +330,7 @@
 .phabricator-remarkup-embed-image {
   display: inline-block;
   border: 3px solid white;
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.20);
+  box-shadow: 1px 1px 2px rgba({$alphablack}, 0.20);
 }
 
 .phabricator-remarkup-embed-image-full {
diff --git a/webroot/rsrc/css/layout/phabricator-side-menu-view.css b/webroot/rsrc/css/layout/phabricator-side-menu-view.css
index 5b425c2a5f..77c0b7cf39 100644
--- a/webroot/rsrc/css/layout/phabricator-side-menu-view.css
+++ b/webroot/rsrc/css/layout/phabricator-side-menu-view.css
@@ -19,7 +19,7 @@
 }
 
 .phabricator-basic-nav .phabricator-side-menu .phui-list-item-selected {
-  background-color: rgba(0,0,0,.05);
+  background-color: rgba({$alphablack},.05);
   border-left: 4px solid {$sky};
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -29,7 +29,7 @@
 .device-desktop .phabricator-basic-nav .phabricator-side-menu
   .phui-list-item-selected
   a.phui-list-item-href:hover {
-  background-color: rgba(0,0,0,.05);
+  background-color: rgba({$alphablack},.05);
 }
 
 .phabricator-basic-nav .phabricator-side-menu .phui-list-item-selected
@@ -49,5 +49,5 @@
 .device-desktop .phabricator-basic-nav .phabricator-side-menu
   a.phui-list-item-href:hover {
   text-decoration: none;
-  background-color: rgba(0,0,0,.07);
+  background-color: rgba({$alphablack},.07);
 }
diff --git a/webroot/rsrc/css/phui/phui-action-panel.css b/webroot/rsrc/css/phui/phui-action-panel.css
index 6d7c566de7..8cfd69a94f 100644
--- a/webroot/rsrc/css/phui/phui-action-panel.css
+++ b/webroot/rsrc/css/phui/phui-action-panel.css
@@ -22,7 +22,7 @@
 
 .device-desktop .phui-action-panel-hitarea:hover {
   text-decoration: none;
-  background-color: rgba(255,255,255,.25);
+  background-color: rgba({$alphawhite},.25);
 }
 
 .device-desktop .phui-action-panel-hitarea:hover .phui-icon-view {
diff --git a/webroot/rsrc/css/phui/phui-badge.css b/webroot/rsrc/css/phui/phui-badge.css
index f45a88f258..fdb396b539 100644
--- a/webroot/rsrc/css/phui/phui-badge.css
+++ b/webroot/rsrc/css/phui/phui-badge.css
@@ -88,7 +88,7 @@
 
 .phui-badge-illustration {
   background-color: #fff;
-  box-shadow: inset 0 -1px 1px 0 rgba(0,0,0,.1);
+  box-shadow: inset 0 -1px 1px 0 rgba({$alphablack},.1);
   text-align: center;
   height: 100px;
   width: 100%;
diff --git a/webroot/rsrc/css/phui/phui-box.css b/webroot/rsrc/css/phui/phui-box.css
index ce95924c72..1516285cf8 100644
--- a/webroot/rsrc/css/phui/phui-box.css
+++ b/webroot/rsrc/css/phui/phui-box.css
@@ -15,7 +15,7 @@
 .phui-box-grey {
   background-color: #F7F7F9;
   border-radius: 3px;
-  border-color: rgba(55,55,55,.1);
+  border-color: rgba({$alphagrey},.1);
 }
 
 .phui-box-blue {
@@ -44,7 +44,7 @@
 }
 
 .phui-box-grey .phui-header-shell {
-  border-color: rgba(55,55,55,.1);
+  border-color: rgba({$alphagrey},.1);
 }
 
 .phui-object-box.phui-box-blue div.phui-info-severity-nodata,
diff --git a/webroot/rsrc/css/phui/phui-button.css b/webroot/rsrc/css/phui/phui-button.css
index f4cf9ac6aa..0ba3007e5f 100644
--- a/webroot/rsrc/css/phui/phui-button.css
+++ b/webroot/rsrc/css/phui/phui-button.css
@@ -60,7 +60,7 @@ input[type="submit"].grey,
 a.grey,
 a.grey:visited {
   background-color: #F7F7F9;
-  border: 1px solid rgba(55,55,55,.1);
+  border: 1px solid rgba({$alphagrey},.1);
   color: {$darkgreytext};
 }
 
@@ -106,8 +106,8 @@ button:hover {
 
 a.button.grey:hover,
 button.grey:hover {
-  background-color: rgba(71, 87, 120, 0.1);
-  border-color: rgba(71, 87, 120, 0.15);
+  background-color: rgba({$alphablue}, 0.1);
+  border-color: rgba({$alphablue}, 0.15);
   transition: 0.1s;
 }
 
@@ -315,7 +315,7 @@ a.policy-control .caret {
 
 .phui-button-bar-borderless .button .phui-icon-view {
   font-size: 15px;
-  color: rgba(55,55,55,.4);
+  color: rgba({$alphagrey},.4);
 }
 
 .phui-button-bar-borderless .button:hover {
@@ -324,7 +324,7 @@ a.policy-control .caret {
 }
 
 .phui-button-bar-borderless .button:hover .phui-icon-view {
-  color: rgba(55,55,55,.9);
+  color: rgba({$alphagrey},.9);
 }
 
 .phui-button-bar-borderless .button {
diff --git a/webroot/rsrc/css/phui/phui-crumbs-view.css b/webroot/rsrc/css/phui/phui-crumbs-view.css
index 81c8471c4f..47fd0a4da9 100644
--- a/webroot/rsrc/css/phui/phui-crumbs-view.css
+++ b/webroot/rsrc/css/phui/phui-crumbs-view.css
@@ -105,7 +105,7 @@ a.phui-crumbs-action .phui-crumbs-action-name {
 }
 
 .phui-crumbs-view.phui-crumbs-border {
-  border-bottom: 1px solid rgba(55,55,55,.1);
+  border-bottom: 1px solid rgba({$alphagrey},.1);
 }
 
 body .phui-crumbs-view + .phui-object-box {
diff --git a/webroot/rsrc/css/phui/phui-document-pro.css b/webroot/rsrc/css/phui/phui-document-pro.css
index 90f268cf66..138eec0955 100644
--- a/webroot/rsrc/css/phui/phui-document-pro.css
+++ b/webroot/rsrc/css/phui/phui-document-pro.css
@@ -140,7 +140,7 @@ a.button.phui-document-toc {
 .phui-document-view-pro-box .phui-timeline-view {
   padding: 16px 0 0 0;
   background: none;
-  border-top: 1px solid rgba(71, 87, 120, 0.20);
+  border-top: 1px solid rgba({$alphablue}, 0.20);
 }
 
 .phui-document-view-pro-box .phui-timeline-image {
diff --git a/webroot/rsrc/css/phui/phui-document-summary.css b/webroot/rsrc/css/phui/phui-document-summary.css
index 5b09bb9c7f..736efe9d20 100644
--- a/webroot/rsrc/css/phui/phui-document-summary.css
+++ b/webroot/rsrc/css/phui/phui-document-summary.css
@@ -4,7 +4,7 @@
 
 .phui-document-summary-view {
   margin-top: 8px;
-  border-bottom: 1px solid rgba(55,55,55,.1);
+  border-bottom: 1px solid rgba({$alphagrey},.1);
 }
 
 .phui-document-summary-view.is-draft {
diff --git a/webroot/rsrc/css/phui/phui-form.css b/webroot/rsrc/css/phui/phui-form.css
index 52f41e4ab6..5c2ef38446 100644
--- a/webroot/rsrc/css/phui/phui-form.css
+++ b/webroot/rsrc/css/phui/phui-form.css
@@ -48,9 +48,9 @@ div.jx-tokenizer-container {
   background-color: #ffffff;
   border: 1px solid {$blueborder};
 
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-box-shadow: inset 0 1px 1px rgba({$alphablack}, 0.075);
+  -moz-box-shadow: inset 0 1px 1px rgba({$alphablack}, 0.075);
+  box-shadow: inset 0 1px 1px rgba({$alphablack}, 0.075);
 
   -webkit-transition: border linear .05s, box-shadow linear .05s;
   -moz-transition: border linear .05s, box-shadow linear .05s;
@@ -87,13 +87,13 @@ div.jx-tokenizer-container-focused {
   /* IE6-9 */
 
   -webkit-box-shadow:
-    inset 0 1px 1px rgba(0,0,0,.075),
+    inset 0 1px 1px rgba({$alphablack},.075),
     0 0 8px rgba(82,168,236,.6);
   -moz-box-shadow:
-    inset 0 1px 1px rgba(0,0,0,.075),
+    inset 0 1px 1px rgba({$alphablack},.075),
     0 0 8px rgba(82,168,236,.6);
   box-shadow:
-    inset 0 1px 1px rgba(0,0,0,.075),
+    inset 0 1px 1px rgba({$alphablack},.075),
     0 0 8px rgba(82,168,236,.6);
 }
 input[type="radio"],
diff --git a/webroot/rsrc/css/phui/phui-header-view.css b/webroot/rsrc/css/phui/phui-header-view.css
index 63852820df..5dc0586667 100644
--- a/webroot/rsrc/css/phui/phui-header-view.css
+++ b/webroot/rsrc/css/phui/phui-header-view.css
@@ -146,7 +146,7 @@ body .phui-header-shell.phui-bleed-header
   display: block;
   position: absolute;
   left: 0;
-  background: rgba(0,0,0,0.4);
+  background: rgba({$alphablack},0.4);
   color: #fff;
   font-weight: normal;
   bottom: 4px;
@@ -179,7 +179,7 @@ body .phui-header-shell.phui-bleed-header
 .phui-header-subheader .phui-header-status {
   padding: 3px 9px;
   border-radius: 3px;
-  background: rgba(71, 87, 120, 0.06);
+  background: rgba({$alphablue}, 0.06);
   margin-right: 8px;
 }
 
diff --git a/webroot/rsrc/css/phui/phui-image-mask.css b/webroot/rsrc/css/phui/phui-image-mask.css
index a8b2212ce4..70350aa488 100644
--- a/webroot/rsrc/css/phui/phui-image-mask.css
+++ b/webroot/rsrc/css/phui/phui-image-mask.css
@@ -17,7 +17,7 @@
 }
 
 .phui-image-mask-mask {
-  border: 300px solid rgba(0, 0, 0, 0.5);
+  border: 300px solid rgba({$alphablack}, 0.5);
   background-clip: content-box;
   position: absolute;
 }
diff --git a/webroot/rsrc/css/phui/phui-info-view.css b/webroot/rsrc/css/phui/phui-info-view.css
index cb7c7e77ba..59405995a5 100644
--- a/webroot/rsrc/css/phui/phui-info-view.css
+++ b/webroot/rsrc/css/phui/phui-info-view.css
@@ -24,7 +24,7 @@
 
 .phui-info-view-body tt {
   padding: 0 2px;
-  background-color: rgba(55,55,55,.1);
+  background-color: rgba({$alphagrey},.1);
 }
 
 .phui-info-view-actions {
diff --git a/webroot/rsrc/css/phui/phui-profile-menu.css b/webroot/rsrc/css/phui/phui-profile-menu.css
index 76a51d9130..80e0c04691 100644
--- a/webroot/rsrc/css/phui/phui-profile-menu.css
+++ b/webroot/rsrc/css/phui/phui-profile-menu.css
@@ -34,7 +34,7 @@
 
 .phui-profile-menu .phabricator-side-menu {
   background: #525867;
-  box-shadow: inset -2px 0 2px rgba(0, 0, 0, 0.150);
+  box-shadow: inset -2px 0 2px rgba({$alphablack}, 0.150);
   width: 240px;
 }
 
@@ -107,7 +107,7 @@
 
 .device-desktop .phui-profile-menu .phabricator-side-menu
   .phui-list-item-href:hover {
-  background-color: rgba(0,0,0,0.15);
+  background-color: rgba({$alphablack},0.15);
   color: {$menu.profile.text.selected};
 }
 
@@ -122,18 +122,18 @@
 
 .phui-profile-menu .phabricator-side-menu .phui-list-item-selected
   .phui-list-item-href {
-  background-color: rgba(0,0,0,0.3);
+  background-color: rgba({$alphablack},0.3);
   color: {$menu.profile.text.selected};
 }
 
 .phui-profile-menu .phabricator-side-menu .phui-list-item-selected
   .phui-list-item-href:hover {
-  background-color: rgba(0,0,0,0.45);
+  background-color: rgba({$alphablack},0.45);
 }
 
 .phui-profile-menu .phabricator-side-menu .phui-divider {
   margin: 4px 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  border-bottom: 1px solid rgba({$alphablack}, 0.2);
 }
 
 .phui-profile-menu .phabricator-side-menu .phui-motivator {
diff --git a/webroot/rsrc/css/phui/phui-tag-view.css b/webroot/rsrc/css/phui/phui-tag-view.css
index c6bb18ed0a..a68ed19484 100644
--- a/webroot/rsrc/css/phui/phui-tag-view.css
+++ b/webroot/rsrc/css/phui/phui-tag-view.css
@@ -16,7 +16,7 @@ a.phui-tag-view:hover {
 
 .phui-tag-core-closed {
   text-decoration: line-through;
-  color: rgba(0,0,0,0.5);
+  color: rgba({$alphablack},0.5);
 }
 
 .phui-tag-core-closed:hover {
diff --git a/webroot/rsrc/css/phui/workboards/phui-workboard-color.css b/webroot/rsrc/css/phui/workboards/phui-workboard-color.css
index 8d5584d903..d7f95c841c 100644
--- a/webroot/rsrc/css/phui/workboards/phui-workboard-color.css
+++ b/webroot/rsrc/css/phui/workboards/phui-workboard-color.css
@@ -7,14 +7,14 @@
 }
 
 .phui-workboard-color .phui-crumbs-view {
-  background-color: rgba(55,55,55,.15);
+  background-color: rgba({$alphagrey},.15);
   border: none;
-  color: rgba(255,255,255,.8);
+  color: rgba({$alphawhite},.8);
 }
 
 .phui-workboard-color .phui-crumbs-view a,
 .phui-workboard-color .phui-crumbs-view .phui-icon-view {
-    color: rgba(255,255,255,.85);
+    color: rgba({$alphawhite},.85);
 }
 
 .phui-workboard-color .phui-crumbs-view a:hover,
@@ -23,11 +23,11 @@
 }
 
 .phui-workboard-color .phuix-dropdown-menu {
-  background-color: rgba(255,255,255,.9);
+  background-color: rgba({$alphawhite},.9);
 }
 
 .phui-workboard-color .phui-workpanel-view .phui-box-grey {
-  background-color: rgba(255,255,255,.6);
+  background-color: rgba({$alphawhite},.6);
 }
 
 .phui-workboard-color-preview {
diff --git a/webroot/rsrc/css/phui/workboards/phui-workcard.css b/webroot/rsrc/css/phui/workboards/phui-workcard.css
index d35ac11628..f3d92d63e5 100644
--- a/webroot/rsrc/css/phui/workboards/phui-workcard.css
+++ b/webroot/rsrc/css/phui/workboards/phui-workcard.css
@@ -42,7 +42,7 @@
 }
 
 .phui-object-item-disabled.phui-workcard {
-  background-color: rgba(255,255,255,.67);
+  background-color: rgba({$alphawhite},.67);
 }
 
 .phui-object-item-disabled.phui-workcard .phui-object-item-link {
diff --git a/webroot/rsrc/css/phui/workboards/phui-workpanel.css b/webroot/rsrc/css/phui/workboards/phui-workpanel.css
index 86c48bb7dd..899c6f74eb 100644
--- a/webroot/rsrc/css/phui/workboards/phui-workpanel.css
+++ b/webroot/rsrc/css/phui/workboards/phui-workpanel.css
@@ -36,7 +36,7 @@
 }
 
 .phui-workpanel-view .phui-box-grey {
-  background-color: rgba(71,87,120,0.1);
+  background-color: rgba({$alphablue},0.1);
 }
 
 .phui-workpanel-view.phui-workboard-column-milestone .phui-box-grey {
@@ -106,12 +106,12 @@
 .device-desktop .phui-workpanel-body-content::-webkit-scrollbar {
   height: 8px;
   width: 8px;
-  background: rgba(71,87,120,0.2);
+  background: rgba({$alphablue},0.2);
   border-radius: 4px;
 }
 
 .device-desktop .phui-workpanel-body-content::-webkit-scrollbar-thumb {
-  background: rgba(71,87,120,0.4);
+  background: rgba({$alphablue},0.4);
   border-radius: 4px;
 }
 
@@ -127,7 +127,7 @@
 }
 
 .project-panel-empty .phui-object-item-list-view.drag-target-list {
-  background: rgba(255,255,255,.7);
+  background: rgba({$alphawhite},.7);
 }
 
 .phui-workpanel-view.project-panel-over-limit .phui-header-header {