LT-281: Replacing variables for theme calls

Packages/worklist/client/components/worklistResult/worklistResult.styl

@@ -1,20 +1,19 @@
 @import "{design}/app"
 
-$hoverColor = #2c363f
-$textPrimaryColor = white
-$textSecondaryColor = #91b9cd
+$tableHoverColor = #2c363f
+$tableTextPrimaryColor = white
+$tableTextSecondaryColor = #91b9cd
 
 $inputBackgroundColor = #2c363f
 $inputPlaceholderColor = lightgray
 
 $studyListToolbarHeight = 75px
-$theadBackgroundColor =  $uiGrayDarker
 $tablePadding = 8%
 $bodyCellHeight = 40px
 
 .studyListToolbar
+  theme('background', '$uiGrayDarker')
   height: $studyListToolbarHeight
-  background: $uiGrayDarker
   border-bottom: 2px solid black
   padding: 0 30px
 
@@ -24,7 +23,7 @@ $bodyCellHeight = 40px
   .header
     font-size: 22px
     font-weight: 300
-    color: $textSecondaryColor
+    color: $tableTextSecondaryColor
     padding: 0 10px
     line-height: $studyListToolbarHeight
 
@@ -33,14 +32,14 @@ $bodyCellHeight = 40px
     line-height: $studyListToolbarHeight
 
   .studyCount
+    theme('color', '$uiSkyBlue')
     font-size: 40px
     font-weight: 100
-    color: $uiSkyBlue
     padding: 0 10px
     line-height: $studyListToolbarHeight
 
 .theadBackground
-  background-color: $theadBackgroundColor
+  theme('background-color', '$uiGrayDarker')
   width: 100%
   height: 122px
   position: absolute
@@ -54,18 +53,18 @@ $bodyCellHeight = 40px
   z-index: 2
 
   .loadingTextDiv
-    color: $textSecondaryColor
+    color: $tableTextSecondaryColor
     font-size: 30px
 
   .notFound
-    color: $textSecondaryColor
+    color: $tableTextSecondaryColor
     font-size: 30px
     font-weight: 200
     text-align: center
 
   table#tblStudyList
     thead
-      background-color: $theadBackgroundColor
+      theme('background-color', '$uiGrayDarker')
       white-space: nowrap
 
       tr
@@ -85,7 +84,7 @@ $bodyCellHeight = 40px
             width: 100%
             min-width: 95px
             margin: 0 auto
-            color: $textPrimaryColor
+            color: $tableTextPrimaryColor
             font-weight: 400
             padding: 20px
 
@@ -97,10 +96,10 @@ $bodyCellHeight = 40px
               margin: 0 5px
 
             &:hover
-              color: $activeColor
+              theme('color', '$activeColor')
 
             &.active, &:active
-              color: $activeColor
+              theme('color', '$activeColor')
 
           input.worklist-search
             height: 34px
@@ -136,16 +135,15 @@ $bodyCellHeight = 40px
         background-color: black
 
         &:nth-child(even)
-          background-color: $uiGrayDarker
+          theme('background-color', '$uiGrayDarker')
 
         td
           height: $bodyCellHeight
           line-height: $bodyCellHeight
-          color: $textPrimaryColor
+          color: $tableTextPrimaryColor
           font-weight: 300
           border-top: 1px solid #436270
           white-space: nowrap
-
           transition(all 0.1s ease)
 
           &:first-child
@@ -155,15 +153,14 @@ $bodyCellHeight = 40px
             padding-right: $tablePadding
 
         &:hover, &:active, &.active
-          background-color: $hoverColor
+          background-color: $tableHoverColor
           color: white
 
           td
             // This selector is necessary to override bootstrap's 'table' class
             border-top: 1px solid #436270
             border-bottom: 1px solid #436270
-            background-color: $hoverColor
-
+            background-color: $tableHoverColor
 
 @media only screen and (max-width: 1000px)
   $tablePaddingMediumScreen = 10px
@@ -188,4 +185,4 @@ $bodyCellHeight = 40px
       th.accessionNumber, td.accessionNumber,
       th.modalities, td.modalities,
       th.numberOfStudyRelatedInstances, td.numberOfStudyRelatedInstances
-        display: none
+        display: none