LT-67: Creating data parser and styling components with validation error

Packages/design/package.js

@@ -37,7 +37,8 @@ Package.onUse(function(api) {
     api.addFiles([
         'styles/components/radio.styl',
         'styles/components/select2.styl',
-        'styles/components/selectTree.styl'
+        'styles/components/selectTree.styl',
+        'styles/components/states.styl'
     ], 'client');
 
     // Rounded Button Group

Packages/design/styles/components/states.styl

@@ -0,0 +1,7 @@
+@import "{design}/app"
+
+.state-error:not(.component-group)
+    &.form-control, .form-control
+        theme('background-color', '$uiStateError')
+        theme('border-color', '$uiStateErrorBorder')
+        theme('color', '$uiStateErrorText')

Packages/design/styles/imports/theme-tide.styl

@@ -3,6 +3,11 @@ $themes['tide'] = {
   $uiYellow: #E29E4A
   $uiSkyBlue: #6FBDE2
 
+  // State pallete
+  $uiStateError: #FFCCCC
+  $uiStateErrorBorder: #993333
+  $uiStateErrorText: #661111
+
   $uiLightGray: #516873
   $uiGray: #263340
   $uiGrayDark: #16202B

Packages/design/styles/imports/theme-tigerlilly.styl

@@ -3,6 +3,11 @@ $themes['tigerlilly'] = {
   $uiYellow: #E29E4A
   $uiSkyBlue: #6FBDE2
 
+  // State pallete
+  $uiStateError: #FFCCCC
+  $uiStateErrorBorder: #CC6666
+  $uiStateErrorText: #661111
+
   $uiLightGray: #516873
   $uiGray: #263340
   $uiGrayDark: #16202B