LT-281: Replacing variables for theme calls

OHIFViewer/client/components/flexboxLayout/flexboxLayout.styl

@@ -27,11 +27,11 @@ $lesionsSidebarMenuWidth = 450px
         transform(translateX(0%))
 
   .sidebar-left
-    max-width: $studiesSidebarMenuWidth
-    order: 1
+    theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness)
     flex: 1
     margin-left: - $studiesSidebarMenuWidth
-    border-right: $uiBorderThickness $uiBorderColor solid
+    max-width: $studiesSidebarMenuWidth
+    order: 1
 
     &.sidebar-open
       margin-left: 0
@@ -62,7 +62,7 @@ $lesionsSidebarMenuWidth = 450px
       max-width: $lesionsSidebarMenuWidth + 270px
 
     &:before
-      background-color: $uiBorderColor
+      theme('background-color', '$uiBorderColor')
       content: ''
       display: block
       height: 100%
@@ -75,6 +75,6 @@ $lesionsSidebarMenuWidth = 450px
       margin-right: 0
 
   .studiesListedChanger
+    theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
     padding: 20px 10px
     text-align: center
-    border-bottom: $uiBorderThickness $uiBorderColor solid

OHIFViewer/client/components/ohifViewer/ohifViewer.styl

@@ -9,8 +9,8 @@ $expandedHeight = 160px
 
 .topBar
   height: $topBarHeight
-  color: $textPrimaryColor
-  background-color: $primaryBackgroundColor
+  theme('color', '$textPrimaryColor')
+  theme('background-color', '$primaryBackgroundColor')
   transition(all 0.5s ease)
 
   .brandSection
@@ -26,14 +26,14 @@ $expandedHeight = 160px
       display: inline-block
       font-family: $logoFontFamily
       font-weight: $logoFontWeight
-      color: $textPrimaryColor
+      theme('color', '$textPrimaryColor')
       line-height: 30px
 
   .studyListLinkSection
-    border-left: $uiBorderThickness solid $uiBorderColor;
-    
+    theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
+
   .btn
-    color: $textSecondaryColor
+    theme('color', '$textSecondaryColor')
     cursor: pointer
     font-size: 13px
     font-weight: 500
@@ -41,10 +41,10 @@ $expandedHeight = 160px
     margin-top: 3px
 
     &:hover
-      color: $hoverColor
+      theme('color', '$hoverColor')
 
     &:active
-      color: $activeColor
+      theme('color', '$activeColor')
 
   &.studyList
     background-color: rgba(21, 25, 30, 0.7)
@@ -75,5 +75,5 @@ $expandedHeight = 160px
   .tab-pane
     .viewerContainer
       .loadingTextDiv
-        color: $textSecondaryColor
-        font-size: 30px
+        theme('color', '$textSecondaryColor')
+        font-size: 30px

OHIFViewer/client/components/toolbarSection/toolbarSection.styl

@@ -1,7 +1,7 @@
 @import "{design}/app"
 
 .toolbarSection
-  border-bottom: $uiBorderColor $uiBorderThickness solid
+  theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
   flex: 0 0 auto
   height: $toolbarHeight
   overflow: hidden
@@ -11,4 +11,4 @@
   width: 100%
 
   &.expanded
-    height: $toolbarHeight + $toolbarDrawerHeight
+    height: $toolbarHeight + $toolbarDrawerHeight

OHIFViewer/client/components/viewer/viewer.styl

@@ -6,5 +6,5 @@
   width: 100%
 
 .loadingTextDiv
-  color: $textSecondaryColor
+  theme('color', '$textSecondaryColor')
   font-size: 30px