LT-281: Replacing variables for theme calls

Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.styl

@@ -3,15 +3,15 @@
 $timepointButtonHeight = 55px
 
 .studyTimepointBrowser
-  background-color: $primaryBackgroundColor
+  theme('background-color', '$primaryBackgroundColor')
   float: left
   height: 100%
   position: relative
   width: 100%
 
   .timepointButtonContainer
-    background-color: $primaryBackgroundColor
-    border-bottom: 1px solid $uiBorderColor
+    theme('background-color', '$primaryBackgroundColor')
+    theme('border-bottom', '1px solid $uiBorderColor')
     display: none
     height: $timepointButtonHeight
     left: 10px
@@ -38,7 +38,7 @@ $timepointButtonHeight = 55px
         transform: rotateX(180deg)
       .timepointFollowupTitle
         font-size: 14px
-        color: $textSecondaryColor
+        theme('color', '$textSecondaryColor')
         text-transform: uppercase
 
   .timepointHeader
@@ -50,7 +50,7 @@ $timepointButtonHeight = 55px
     .timepointFollowupTitle
     .timepointDate
     .timepointModalities
-      color: $textSecondaryColor
+      theme('color', '$textSecondaryColor')
       transition($sidebarTransition)
 
     &:hover
@@ -59,7 +59,7 @@ $timepointButtonHeight = 55px
       .expandIcon i
       .timepointDate
       .timepointModalities
-        color: $textPrimaryColor !important
+        theme('color', '$textPrimaryColor') !important
 
     .timepointDetails
     .timepointModalities
@@ -70,10 +70,10 @@ $timepointButtonHeight = 55px
       overflow: hidden
 
     .expandIcon i
-      color: $defaultColor
+      theme('color', '$defaultColor')
 
     .timepointFollowupTitle
-      color: $textPrimaryColor
+      theme('color', '$textPrimaryColor')
       padding-top: 2px
 
   .studyTimepointScrollArea
@@ -91,7 +91,7 @@ $timepointButtonHeight = 55px
       margin-right: 16px
 
   .studySidebarTimepoint .thumbnailEntry.active:before
-    background-color: $activeColor
+    theme('background-color', '$activeColor')
     border-top-right-radius: 7px
     border-bottom-right-radius: 7px
     content: ''

Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl

@@ -3,8 +3,6 @@
 $boxBorderColor = transparent
 $boxHoverBackgroundColor = #14191E
 $boxHoverBorderColor = #2d4660
-$boxActiveBackgroundColor = $activeColor
-$boxActiveTextColor = $primaryBackgroundColor
 $boxActiveBorderColor = #131D29
 $boxWidth = 50px
 $borderThickness = 2px
@@ -41,11 +39,11 @@ $spacerY = 12px
   &.active
     .studyModality
       .studyModalityBox
-        color: $boxActiveTextColor
+        theme('color', '$primaryBackgroundColor')
         &
         &:before
         &:after
-          background-color: $boxActiveBackgroundColor
+          theme('background-color', '$activeColor')
           border-color: $boxActiveBorderColor
 
   &:not(.active) .studyTimepointThumbnails
@@ -69,10 +67,10 @@ $spacerY = 12px
     border-color: $boxHoverBorderColor
 
     &.additional
-      color: $textSecondaryColor
+      theme('color', '$textSecondaryColor')
 
   &.additional
-    color: $textPrimaryColor
+    theme('color', '$textPrimaryColor')
     font-size: 16px
     font-weight: normal
     height: 91px
@@ -89,13 +87,13 @@ $spacerY = 12px
     top: $spacerY
     .studyDate
       margin-top: 8px
-      color: $textSecondaryColor
+      theme('color', '$textSecondaryColor')
     .studyDescription
       margin-top: 8px
-      color: $textPrimaryColor
+      theme('color', '$textPrimaryColor')
 
   .studyModalityBox
-    color: $textSecondaryColor
+    theme('color', '$textSecondaryColor')
     line-height: $boxWidth
     margin-left: $nestingMargin * 2
     margin-top: $nestingMargin * 2
@@ -109,8 +107,8 @@ $spacerY = 12px
     &
     &:before
     &:after
-      background-color: $boxBackgroundColor
-      border: $borderThickness solid $primaryBackgroundColor
+      theme('border', '$borderThickness solid $primaryBackgroundColor')
+      theme('background-color', '$boxBackgroundColor')
       border-radius: $boxBorderRadius
       height: $boxWidth + ($borderThickness * 2)
       transition($sidebarTransition)