feat(App): Lay groundwork for general themeing support

2 files changed, 126 insertions, 24 deletions

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);
diff --git a/src/styles/type-helper.scss b/src/styles/type-helper.scss
new file mode 100644
index 000000000..b1da394b5
--- /dev/null
+++ b/src/styles/type-helper.scss
@@ -0,0 +1,100 @@
+@function str-split($string, $separator) {
+    // empty array/list
+    $split-arr: ();
+    // first index of separator in string
+    $index : str-index($string, $separator);
+    // loop through string
+    @while $index != null {
+        // get the substring from the first character to the separator
+        $item: str-slice($string, 1, $index - 1);
+        // push item to array
+        $split-arr: append($split-arr, $item);
+        // remove item and separator from string
+        $string: str-slice($string, $index + 1);
+        // find new index of separator
+        $index : str-index($string, $separator);
+    }
+    // add the remaining string to list (the last item)
+    $split-arr: append($split-arr, $string);
+
+    @return $split-arr;
+}
+
+// ----
+// Sass (v3.4.13)
+// Compass (v1.0.3)
+// ----
+
+/// String to number converter
+/// @author Hugo Giraudel
+/// @access private
+
+
+/// Casts a string into a number
+///
+/// @param {String | Number} $value - Value to be parsed
+///
+/// @return {Number}
+
+@function to-number($value) {
+  @if type-of($value) == 'number' {
+    @return $value;
+  } @else if type-of($value) != 'string' {
+    $_: log('Value for `to-number` should be a number or a string.');
+  }
+  
+  $result: 0;
+  $digits: 0;
+  $minus: str-slice($value, 1, 1) == '-';
+  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
+  
+  @for $i from if($minus, 2, 1) through str-length($value) {
+    $character: str-slice($value, $i, $i);
+    
+    @if not (index(map-keys($numbers), $character) or $character == '.') {
+      @return to-length(if($minus, -$result, $result), str-slice($value, $i))
+    }
+    
+    @if $character == '.' {
+      $digits: 1; 
+    } @else if $digits == 0 {
+      $result: $result * 10 + map-get($numbers, $character);  
+    } @else {
+      $digits: $digits * 10;
+      $result: $result + map-get($numbers, $character) / $digits;
+    }
+  }
+  
+  @return if($minus, -$result, $result);;
+}
+
+
+/// Add `$unit` to `$value`
+///
+/// @param {Number} $value - Value to add unit to
+/// @param {String} $unit - String representation of the unit
+///
+/// @return {Number} - `$value` expressed in `$unit`
+@function to-length($value, $unit) {
+  $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
+  
+  @if not index(map-keys($units), $unit) {
+    $_: log('Invalid unit `#{$unit}`.');
+  }
+  
+  @return $value * map-get($units, $unit);
+}
+
+
+
+/// converts injectes rgb strings to sass colors 
+@function convert-rgb-string-to-color($string) {
+  $values: str-split($string, ',');
+  $colorList: ();
+  @each $value in $values {
+    $colorList: append($colorList, to-number($value));
+  }
+
+  $rgbaColor: rgb(nth($colorList, 1), nth($colorList, 2), nth($colorList, 3));
+  @return $rgbaColor;
+}
\ No newline at end of file