From f44cda66e6ed33c46bb65cbaec7bafcd53878c0c Mon Sep 17 00:00:00 2001
From: Harvey Kandola <harvey@documize.com>
Date: Tue, 4 Dec 2018 17:36:59 +0000
Subject: [PATCH] Updated themes to use new color framework

---
 gui/app/styles/themes/blue.scss        | 34 ++++++++++++++------------
 gui/app/styles/themes/deep-orange.scss | 34 ++++++++++++++------------
 gui/app/styles/themes/teal.scss        | 34 ++++++++++++++------------
 3 files changed, 57 insertions(+), 45 deletions(-)

diff --git a/gui/app/styles/themes/blue.scss b/gui/app/styles/themes/blue.scss
index 34d322cb..6a2dce0d 100644
--- a/gui/app/styles/themes/blue.scss
+++ b/gui/app/styles/themes/blue.scss
@@ -11,21 +11,25 @@
 
 @import "../colors.scss";
 
-$color-primary: #176091;
-$color-primary-light: #E6F1F8;
-$color-link: #348A37;
+/**************************************************************
+* Theme colors.
+*
+* We go from 100 (lightest) to 900 (darkest).
+*
+* Base shade is 500 and is used prominmently as the
+* left-side navigation sidebar color.
+**************************************************************/
+$theme-900: #071C2A;
+$theme-800: #0B2F48;
+$theme-700: #104365;
+$theme-600: #124D74;
+$theme-500: #176091;
+$theme-400: #2087CC;
+$theme-300: #5CAEE5;
+$theme-200: #B4DAF3;
+$theme-100: #EEF7FC;
 
-.color-primary {
-	color: $color-primary !important;
-}
-.color-link {
-	color: $color-link !important;
-}
-.background-color-theme {
-	background-color: $color-primary !important;
-}
-.background-color-theme-light {
-	background-color: $color-primary-light !important;
-}
+// Set hyperlink color for theme
+$color-link: map-get($green-shades, 700);
 
 @import "../core/all.scss";
diff --git a/gui/app/styles/themes/deep-orange.scss b/gui/app/styles/themes/deep-orange.scss
index b5b644bd..6e97b9c0 100644
--- a/gui/app/styles/themes/deep-orange.scss
+++ b/gui/app/styles/themes/deep-orange.scss
@@ -11,21 +11,25 @@
 
 @import "../colors.scss";
 
-$color-primary: #BF360C;
-$color-primary-light: #FBE9E7;
-$color-link: #FF8A65;
+/**************************************************************
+* Theme colors.
+*
+* We go from 100 (lightest) to 900 (darkest).
+*
+* Base shade is 500 and is used prominmently as the
+* left-side navigation sidebar color.
+**************************************************************/
+$theme-900: #1F0902;
+$theme-800: #4F1605;
+$theme-700: #6F1F07;
+$theme-600: #9F2D0A;
+$theme-500: #BF360C;
+$theme-400: #F25C2E;
+$theme-300: #F68E6E;
+$theme-200: #F9B39E;
+$theme-100: #FEF2EE;
 
-.color-primary {
-	color: $color-primary !important;
-}
-.color-link {
-	color: $color-link !important;
-}
-.background-color-theme {
-	background-color: $color-primary !important;
-}
-.background-color-theme-light {
-	background-color: $color-primary-light !important;
-}
+// Set hyperlink color for theme
+$color-link: map-get($green-shades, 700);
 
 @import "../core/all.scss";
diff --git a/gui/app/styles/themes/teal.scss b/gui/app/styles/themes/teal.scss
index 32d2f961..ce706211 100644
--- a/gui/app/styles/themes/teal.scss
+++ b/gui/app/styles/themes/teal.scss
@@ -11,21 +11,25 @@
 
 @import "../colors.scss";
 
-$color-primary: #00695C;
-$color-primary-light: #E0F2F1;
-$color-link: #348A37;
+/**************************************************************
+* Theme colors.
+*
+* We go from 100 (lightest) to 900 (darkest).
+*
+* Base shade is 500 and is used prominmently as the
+* left-side navigation sidebar color.
+**************************************************************/
+$theme-900: #001412;
+$theme-800: #00362F;
+$theme-700: #00473E;
+$theme-600: #00584D;
+$theme-500: #00695C;
+$theme-400: #00AD98;
+$theme-300: #ADFFF5;
+$theme-200: #CFFFF9;
+$theme-100: #F1FFFD;
 
-.color-primary {
-	color: $color-primary !important;
-}
-.color-link {
-	color: $color-link !important;
-}
-.background-color-theme {
-	background-color: $color-primary !important;
-}
-.background-color-theme-light {
-	background-color: $color-primary-light !important;
-}
+// Set hyperlink color for theme
+$color-link: map-get($green-shades, 700);
 
 @import "../core/all.scss";