DS-35: Adding colors

styles/core/core-variables/colors/_backgrounds.scss

@@ -0,0 +1,20 @@
+//  -----------------------------------
+//  Core - Core Variables | Colors - Backgrounds
+//  -----------------------------------
+
+$background-xx-dark:              $grey-xx-dark !default;
+$background-x-dark:               $grey-x-dark !default;
+$background-dark:                 $grey-dark !default;
+$background-medium:               $grey-medium !default;
+$background-light:                $grey-light !default;
+$background-x-light:              $grey-x-light !default;
+$background-xx-light:             $grey-xx-light !default;
+
+$background-default:              $white !default;
+$background-error:                $red-light !default;
+$background-warning:              $yellow-light !default;
+$background-success:              $green-light !default;
+$background-blue:                 $blue-light !default;
+
+$background-hover:                $blue-x-light !default;
+$background-hover-active:         $background-blue !default;

styles/core/core-variables/colors/_borders.scss

@@ -0,0 +1,17 @@
+//  -----------------------------------
+//  Core - Core Variables | Colors - Borders
+//  -----------------------------------
+
+$border-x-light:             			$grey-x-light !default;
+$border-light:               			darken($border-x-light, $hover-color-darken) !default;
+$border-medium:              			$background-medium !default;
+$border-dark:                			$background-dark !default;
+$border-x-dark:                   $text-dark !default;
+$border-error:                    $text-error !default;
+$border-warning:                  $icon-warning !default;
+$border-success:                  $text-success !default;
+$border-focus:                    $brand-blue-gray !default;
+
+$border-color-default:            $border-x-light !default;
+$border-color-input:              $border-medium !default;
+$border-color-header:             $border-x-light !default;

styles/core/core-variables/colors/_core.scss

@@ -0,0 +1,39 @@
+//  -----------------------------------
+//  Core - Core Variables | Colors - Core
+//  -----------------------------------
+  //  Neutral Palette
+  //  Brand Palette
+  //  Interactive Palette
+
+//  Neutral Palette
+// -------------------------
+$black:                           #000000 !default;
+$grey-xx-dark:                    #333333 !default;
+$grey-x-dark:                     lighten($grey-xx-dark, 30%) !default;
+$grey-dark:                       #999999 !default;
+$grey-medium:                     #c7c7c7 !default;
+$grey-light:                      #dddddd !default;
+$grey-x-light:                    #e9e9e9 !default;
+$grey-xx-light:                   #f4f4f4 !default;
+$white:                           #ffffff !default;
+
+//  Brand Palette
+// -------------------------
+$brand-blue-gray:                 #27618a !default;
+
+//  Interactive Palette
+// -------------------------
+$red:                             #cb323b !default;
+$red-medium:                      #e15554 !default;
+$red-light:                       #fae8ee !default;
+$yellow-dark:                     #af8828 !default;
+$yellow-medium:                   #e5b92a !default;
+$yellow-light:                    #faf4d6 !default;
+$yellow-highlight:                #ffff00 !default;
+$green:                           #478951 !default;
+$green-light:                     #d7eed0 !default;
+$blue:                            $brand-blue-gray !default;
+$blue-light:                      #d7ebfa !default;
+$blue-x-light:                    lighten($blue-light, 4%) !default;
+
+$hover-color-darken:              10% !default;

styles/core/core-variables/colors/_icons.scss

@@ -0,0 +1,10 @@
+//  -----------------------------------
+//  Core - Core Variables | Colors - Icons
+//  -----------------------------------
+
+$icon-dark:                       $background-xx-dark !default;
+$icon-light:                      $text-light !default;
+$icon-inverse:                    $text-inverse !default;
+$icon-success:                    $text-success !default;
+$icon-warning:                    $yellow-medium !default;
+$icon-error:                      $text-error !default;

styles/core/core-variables/colors/_text.scss

@@ -0,0 +1,15 @@
+//  -----------------------------------
+//  Core - Core Variables | Colors - Text
+//  -----------------------------------
+
+$text-dark:                       $grey-xx-dark !default;
+$text-light:                      $grey-dark !default;
+$text-inverse:                    $white !default;
+$text-error:                      $red !default;
+$text-warning:                    $yellow-dark !default;
+$text-success:                    $green !default;
+$text-blue:                       $brand-blue-gray !default;
+
+$text-disabled:                   $text-light !default;
+$text-link:                       $brand-blue-gray !default;
+$text-link-hover:                 darken($brand-blue-gray, $hover-color-darken) !default;

styles/core/core-variables/colors/index.scss

@@ -0,0 +1,9 @@
+//  -----------------------------------
+//  Core Variables | Colors - Index
+//  -----------------------------------
+
+@import 'core';
+@import 'backgrounds';
+@import 'borders';
+@import 'icons';
+@import 'text';