From 4ea044ae6b2e27e48d45bc3be1c366f4882bbda5 Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Sat, 24 Nov 2018 20:15:39 +0100
Subject: feat(App): Lay groundwork for general themeing support

---
 src/styles/colors.scss | 50 ++++++++++++++++++++++++++------------------------
 1 file changed, 26 insertions(+), 24 deletions(-)

(limited to 'src/styles/colors.scss')

diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 4411a0e81..80c2fb633 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -1,38 +1,40 @@
-$theme-brand-primary:        #3498db;
-$theme-brand-success:        #5cb85c;
-$theme-brand-info:           #5bc0de;
-$theme-brand-warning:        #FF9F00;
-$theme-brand-danger:         #d9534f;
+@import "./type-helper";
 
-$theme-gray-dark:            #373a3c;
-$theme-gray:                 #55595c;
-$theme-gray-light:           #818a91;
-$theme-gray-lighter:         #eceeef;
-$theme-gray-lightest:        #f7f7f9;
+$theme-brand-primary:        convert-rgb-string-to-color($raw-theme-brand-primary);
+$theme-brand-success:        convert-rgb-string-to-color($raw-theme-brand-success);
+$theme-brand-info:           convert-rgb-string-to-color($raw-theme-brand-info);
+$theme-brand-warning:        convert-rgb-string-to-color($raw-theme-brand-warning);
+$theme-brand-danger:         convert-rgb-string-to-color($raw-theme-brand-danger);
 
-$theme-border-radius:        6px;
-$theme-border-radius-small:  3px;
+$theme-gray-dark:            convert-rgb-string-to-color($raw-theme-gray-dark);
+$theme-gray:                 convert-rgb-string-to-color($raw-theme-gray);
+$theme-gray-light:           convert-rgb-string-to-color($raw-theme-gray-light);
+$theme-gray-lighter:         convert-rgb-string-to-color($raw-theme-gray-lighter);
+$theme-gray-lightest:        convert-rgb-string-to-color($raw-theme-gray-lightest);
 
-$theme-sidebar-width:        68px;
+$theme-border-radius:        to-number($raw-theme-border-radius);
+$theme-border-radius-small:  to-number($raw-theme-border-radius-small);
 
-$theme-text-color:           $theme-gray-dark;
+$theme-sidebar-width:        to-number($raw-theme-sidebar-width);
+
+$theme-text-color:           convert-rgb-string-to-color($raw-theme-gray-dark);
 
 $theme-transition-time:      .5s;
 
 $theme-inset-shadow:         inset 0 2px 5px rgba(0, 0, 0, .03);
 
 // Dark Theme
-$dark-theme-black:           #1A1A1A;
+$dark-theme-black:           convert-rgb-string-to-color($raw-dark-theme-black);
 
-$dark-theme-gray-darkest:    #1E1E1E;
-$dark-theme-gray-darker:     #2D2F31;
-$dark-theme-gray-dark:       #383A3B;
+$dark-theme-gray-darkest:    convert-rgb-string-to-color($raw-dark-theme-gray-darkest);
+$dark-theme-gray-darker:     convert-rgb-string-to-color($raw-dark-theme-gray-darker);
+$dark-theme-gray-dark:       convert-rgb-string-to-color($raw-dark-theme-gray-dark);
 
-$dark-theme-gray:            #47494B;
+$dark-theme-gray:            convert-rgb-string-to-color($raw-dark-theme-gray);
 
-$dark-theme-gray-light:      #515355;
-$dark-theme-gray-lighter:    #8a8b8b;
-$dark-theme-gray-lightest:   #FFF;
+$dark-theme-gray-light:      convert-rgb-string-to-color($raw-dark-theme-gray-light);
+$dark-theme-gray-lighter:    convert-rgb-string-to-color($raw-dark-theme-gray-lighter);
+$dark-theme-gray-lightest:   convert-rgb-string-to-color($raw-dark-theme-gray-lightest);
 
-$dark-theme-gray-smoke:      #CED0D1;
-$dark-theme-text-color:      #FFF;
+$dark-theme-gray-smoke:      convert-rgb-string-to-color($raw-dark-theme-gray-smoke);
+$dark-theme-text-color:      convert-rgb-string-to-color($raw-dark-theme-text-color);
-- 
cgit v1.2.3-70-g09d2