Creating a new package to deal with auth and a login form

Packages/ohif-design/package.js

@@ -33,6 +33,7 @@ Package.onUse(function(api) {
         'styles/common/webfonts.styl',
         'styles/common/keyframes.styl',
         'styles/common/global.styl',
+        'styles/common/form.styl',
         'styles/common/spacings.styl'
     ], 'client');
 

Packages/ohif-design/styles/common/form.styl

@@ -0,0 +1,39 @@
+@import "{ohif:design}/app"
+
+label.wrapperLabel
+  cursor: pointer
+  display: flex
+  flex-direction: column
+
+  .wrapperText
+    display: block
+    order: -1
+    transition(color 0.3s ease)
+
+.form-themed
+
+  input[type=text], input[type=password]
+    theme('background-color', '$uiGray')
+    theme('border-color', '$uiBorderColor')
+    theme('color', '$textPrimaryColor')
+    font-weight: normal
+    transition(background-color 0.3s ease\, border-color 0.3s ease)
+
+    &:active, &:focus
+      theme('background-color', '$uiGrayDark')
+      theme('border-color', '$activeColor')
+      box-shadow: none
+
+      & + .wrapperText
+        theme('color', '$activeColor')
+
+  .btn-primary
+    theme('background-color', '$activeColor')
+    theme('border-color', '$uiBorderColorActive')
+    theme('color', '$textColorActive')
+    transition(background-color 0.3s ease\, border-color 0.3s ease)
+
+    &:hover, &:active, &:focus, &:focus:active
+      theme('background-color', '$activeColor', 0.8)
+      theme('border-color', '$uiBorderColorActive', 0.8)
+      theme('color', '$textColorActive')

Packages/ohif-design/styles/components/states.styl

@@ -1,6 +1,10 @@
 @import "{ohif:design}/app"
 
-.state-error
+.form-themed .state-error, .state-error
+
+    &.wrapperLabel input + .wrapperText
+        theme('color', '$uiStateErrorText')
+
     &+.tooltip
 
         .tooltip-inner
@@ -21,9 +25,7 @@
         &.form-control, .form-control
             theme('background-color', '$uiStateError')
             theme('border-color', '$uiStateErrorBorder')
-            theme('color', '$uiStateErrorText')
 
         .select2-selection
             theme('background-color', '$uiStateError')
             theme('border-color', '$uiStateErrorBorder')
-            theme('color', '$uiStateErrorText')