From 76ea67819f215c313ccb8b8711322313836c1814 Mon Sep 17 00:00:00 2001
From: Chad Little <chad@chadsdomain.com>
Date: Sun, 14 Feb 2016 16:12:24 -0800
Subject: [PATCH] Add base colors as workboard color choices

Summary: Our base color pallette is good here as well. Updating CSS classes accordingly. We have 22 choices total now.

Test Plan:
Fake via dom inspector.

{F1111310}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D15271
---
 resources/celerity/map.php                    |  4 +-
 .../phui/workboards/phui-workboard-color.css  | 86 ++++++++++++++-----
 2 files changed, 68 insertions(+), 22 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index bd466223c7..3dd8a542b8 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -155,7 +155,7 @@ return array(
     'rsrc/css/phui/phui-tag-view.css' => '9d5d4400',
     'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
     'rsrc/css/phui/phui-two-column-view.css' => 'c75bfc5b',
-    'rsrc/css/phui/workboards/phui-workboard-color.css' => 'd30ae971',
+    'rsrc/css/phui/workboards/phui-workboard-color.css' => '543432b9',
     'rsrc/css/phui/workboards/phui-workboard.css' => 'e6d89647',
     'rsrc/css/phui/workboards/phui-workcard.css' => '3646fb96',
     'rsrc/css/phui/workboards/phui-workpanel.css' => '92197373',
@@ -842,7 +842,7 @@ return array(
     'phui-theme-css' => 'ab7b848c',
     'phui-timeline-view-css' => '2efceff8',
     'phui-two-column-view-css' => 'c75bfc5b',
-    'phui-workboard-color-css' => 'd30ae971',
+    'phui-workboard-color-css' => '543432b9',
     'phui-workboard-view-css' => 'e6d89647',
     'phui-workcard-view-css' => '3646fb96',
     'phui-workpanel-view-css' => '92197373',
diff --git a/webroot/rsrc/css/phui/workboards/phui-workboard-color.css b/webroot/rsrc/css/phui/workboards/phui-workboard-color.css
index 903080e68f..280f79782c 100644
--- a/webroot/rsrc/css/phui/workboards/phui-workboard-color.css
+++ b/webroot/rsrc/css/phui/workboards/phui-workboard-color.css
@@ -30,59 +30,105 @@
   background-color: rgba(255,255,255,.6);
 }
 
-/* Colors */
+/* Gradients */
 
-.phui-workboard-red {
+.phui-workboard-gradient-red {
   background-color: #e53935;
   background-image: linear-gradient(to left, #e53935, #e35d5b);
 }
 
-.phui-workboard-orange {
+.phui-workboard-gradient-orange {
   background-color: #f46b45;
   background-image: linear-gradient(to left, #f46b45, #eea849);
 }
 
-.phui-workboard-yellow {
+.phui-workboard-gradient-yellow {
   background-color: #FF8008;
   background-image: linear-gradient(to left, #FF8008, #FFC837);
 }
 
-.phui-workboard-blue {
-  background-color: #73a5c3;
-  background-image: linear-gradient(90deg, #73a5c3 0, #6875be);
-}
-
-.phui-workboard-bluegrey {
-  background-color: #517fa4;
-  background-image: linear-gradient(to left, #517fa4, #243949);
-}
-
-.phui-workboard-green {
+.phui-workboard-gradient-green {
   background-color: #2fa0ac;
   background-image: linear-gradient(90deg, #2fa0ac 0, #58cca6);
 }
 
-.phui-workboard-indigo {
+.phui-workboard-gradient-blue {
+  background-color: #73a5c3;
+  background-image: linear-gradient(90deg, #73a5c3 0, #6875be);
+}
+
+.phui-workboard-gradient-bluegrey {
+  background-color: #517fa4;
+  background-image: linear-gradient(to left, #517fa4, #243949);
+}
+
+.phui-workboard-gradient-indigo {
   background-color: #4776E6;
   background-image: linear-gradient(to left, #4776E6, #8E54E9);
 }
 
-.phui-workboard-violet {
+.phui-workboard-gradient-violet {
   background-color: #9f73c3;
   background-image: linear-gradient(90deg, #9f73c3 0, #6875be);
 }
 
-.phui-workboard-sky {
+.phui-workboard-gradient-sky {
   background-color: #7474BF;
   background-image: linear-gradient(to left, #7474BF, #348AC7);
 }
 
-.phui-workboard-pink {
+.phui-workboard-gradient-pink {
   background-color: #EA2A90;
   background-image: linear-gradient(to left, #EA2A90, #79164B);
 }
 
-.phui-workboard-grey {
+.phui-workboard-gradient-grey {
   background-color: #283048;
   background-image: linear-gradient(to left, #283048, #859398);
 }
+
+/* Colors */
+
+.phui-workboard-red {
+  background-color: {$red};
+}
+
+.phui-workboard-orange {
+  background-color: {$orange};
+}
+
+.phui-workboard-yellow {
+  background-color: {$yellow};
+}
+
+.phui-workboard-green {
+  background-color: {$green};
+}
+
+.phui-workboard-blue {
+  background-color: {$blue};
+}
+
+.phui-workboard-indigo {
+  background-color: {$indigo};
+}
+
+.phui-workboard-violet {
+  background-color: {$violet};
+}
+
+.phui-workboard-sky {
+  background-color: {$sky};
+}
+
+.phui-workboard-pink {
+  background-color: {$pink};
+}
+
+.phui-workboard-fire {
+  background-color: {$fire};
+}
+
+.phui-workboard-grey {
+  background-color: {$greytext};
+}