LT-281: Replacing variables for theme calls

Packages/viewerbase/client/components/basic/aboutModal/aboutModal.styl

@@ -6,7 +6,7 @@
       display: inline-block
       font-family: $logoFontFamily
       font-weight: $logoFontWeight
-      color: $textPrimaryColor
+      theme('color', '$textPrimaryColor')
       font-size: 20pt
       line-height: 45px
       text-decoration: none

Packages/viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.styl

@@ -1,15 +1,15 @@
 @import "{design}/app"
 
 .thumbnailEntry.active .imageThumbnail
-  border-color: $activeColor
+  theme('border-color', '$activeColor')
   box-shadow: none
   transition($sidebarTransition)
 
 .imageThumbnail
-  background-color: $primaryBackgroundColor
+  theme('box-shadow', 'inset 0 0 0 1px $uiBorderColorDark')
+  theme('background-color', '$primaryBackgroundColor')
   border: 5px solid transparent
   border-radius: 12px
-  box-shadow: inset 0 0 0 1px $uiBorderColorDark
   height: 135px
   margin: 0 auto
   padding 1px 7px
@@ -18,7 +18,7 @@
   width: 217px
 
   &:hover
-    border-color: $hoverColor
+    theme('border-color', '$hoverColor')
     box-shadow: none
 
 .imageThumbnailCanvas
@@ -28,7 +28,7 @@
 .thumbnailLoadingIndicator
   display: none
   pointer-events: none
-  color: $textSecondaryColor
+  theme('color', '$textSecondaryColor')
   height: 20px
   width: 100%
   top: 0

Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl

@@ -13,7 +13,7 @@ $seriesCountBackgroundColor = #678696
     cursor: -moz-grab
 
   .seriesDetails
-    color: $textPrimaryColor
+    theme('color', '$textPrimaryColor')
     font-size: 14px
     line-height: 1.3em
     min-height: 36px
@@ -33,7 +33,7 @@ $seriesCountBackgroundColor = #678696
       margin-right: 4px
 
     .seriesInformationNumbers
-      color: $textSecondaryColor
+      theme('color', '$textSecondaryColor')
       float: left
       font-size: 12px
 
@@ -42,7 +42,7 @@ $seriesCountBackgroundColor = #678696
       text-align: right
 
       strong
-        color: $activeColor
+        theme('color', '$activeColor')
         font-size: 10px
         font-weight: 900
 
@@ -52,7 +52,7 @@ $seriesCountBackgroundColor = #678696
         position: relative
 
         &:after
-          background-color: $activeColor
+          theme('background-color', '$activeColor')
           box-shadow: 1px 1px rgba(0, 0, 0, .115)
           left: -5px
           position: absolute
@@ -60,7 +60,7 @@ $seriesCountBackgroundColor = #678696
 
         &
         &:after
-          border: 1px solid $primaryBackgroundColor
+          theme('border', '1px solid $primaryBackgroundColor')
           content: ''
           display: block
           height: 11px

Packages/viewerbase/client/components/viewer/annotationDialogs/annotationDialogs.styl

@@ -1,6 +1,9 @@
 @import "{design}/app.styl"
 
 .annotationDialog
+  theme('border', '1px solid $uiBorderColor')
+  theme('background', '$uiGrayDarkest')
+  theme('color', '$textSecondaryColor')
   display: none
   z-index: 1000
   position: absolute
@@ -9,17 +12,12 @@
   left: 0
   right: 0
   margin: auto
-
   overflow: hidden
   padding: 10px
   width: 300px
   height: 140px
-
   opacity: 0.95
   border-radius: 8px
-  border: 1px solid $uiBorderColor
-  background: $uiGrayDarkest
-  color: $textSecondaryColor
 
   h5, label
     font-weight: 400
@@ -31,4 +29,4 @@
     margin-left: 5px
 
   .annotationDialogConfirm
-    float: right
+    float: right

Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl

@@ -1,6 +1,9 @@
 @import "{design}/app.styl"
 
 #cineDialog
+  theme('border', '1px solid $uiBorderColor')
+  theme('background', '$uiGrayDarkest')
+  theme('color', '$textSecondaryColor')
   display: none
   z-index: 1000
   position: absolute
@@ -8,17 +11,12 @@
   left: auto
   bottom: 3px
   right: 3px
-
   overflow: hidden
   padding: 10px
   width: 300px
   height: 175px
-
   opacity: 0.95
   border-radius: 8px
-  border: 1px solid $uiBorderColor
-  background: $uiGrayDarkest
-  color: $textSecondaryColor
 
   h5, label
     font-weight: 400
@@ -26,18 +24,18 @@
   box-sizing: border-box
 
   .btn
-    background: $uiGrayDarkest
-    color: $textSecondaryColor
+    theme('background', '$uiGrayDarkest')
+    theme('color', '$textSecondaryColor')
 
     &:hover
-      color: $hoverColor
+      theme('color', '$hoverColor')
 
     &:active, &.active
-      color: $activeColor
+      theme('color', '$activeColor')
 
   #cineOptions
     padding: 5px 0
     overflow: auto
 
     #loopSection
-      padding-right: 12px
+      padding-right: 12px

Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl

@@ -75,7 +75,7 @@ $imageSliderCursor = grab
       // --- Style the range thumb --- //
       &::-webkit-slider-thumb
         -webkit-appearance: none !important
-        background-color: $imageSliderColor
+        theme('background-color', '$imageSliderColor')
         border-radius: $imageSliderBorderRadius
         border: $imageSliderBorder
         height: $imageSliderWidth
@@ -84,10 +84,10 @@ $imageSliderCursor = grab
         margin-top: -7px
 
         &:active
-          background-color: $activeColor
+          theme('background-color', '$activeColor')
 
       &::-moz-range-thumb
-        background-color: $imageSliderColor
+        theme('background-color', '$imageSliderColor')
         border-radius: $imageSliderBorderRadius
         border: $imageSliderBorder
         height: $imageSliderWidth
@@ -96,10 +96,10 @@ $imageSliderCursor = grab
         z-index: 7
 
         &:active
-          background-color: $activeColor
+          theme('background-color', '$activeColor')
 
       &::-ms-thumb
-        background-color: $imageSliderColor
+        theme('background-color', '$imageSliderColor')
         border-radius: $imageSliderBorderRadius
         border: $imageSliderBorder
         height: $imageSliderWidth
@@ -107,7 +107,7 @@ $imageSliderCursor = grab
         cursor: $imageSliderCursor
 
         &:active
-          background-color: $activeColor
+          theme('background-color', '$activeColor')
 
 // Set left position in IE, border-width attribute breaks left position of imageSlider
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)

Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.styl

@@ -15,7 +15,7 @@
 .viewportInstructions
   display: none
   font-size: 13px
-  color: $textSecondaryColor
+  theme('color', '$textSecondaryColor')
   line-height: 18px
   pointer-events: none // Necessary for drag/drop through to cornerstone element below
   text-align: center

Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.styl

@@ -3,29 +3,28 @@
 $borderColor = rgba(77, 99, 110, 0.81)
 
 .layoutChooser
+  theme('background', '$uiGrayDarkest')
   width: 92px
   height: 92px
   min-width: 92px // to override bootstrap's dropdown-menu class
   min-height: 92px
-
-  //background-color: $primaryBackgroundColor
+  // theme('background-color', '$primaryBackgroundColor')
   opacity: 0.95
   border-radius: 8px
   border: 1px solid $borderColor;
-  background: $uiGrayDarkest
 
   &.open
     display: block
 
   table
     margin: 0 auto
-    
+
     td
+      theme('border', '1px solid $uiBorderColorDark')
       cursor: pointer
-      border: 1px solid $uiBorderColorDark
-      width: 20px
       height: 20px
       transition(background-color 0.1s ease)
-      
+      width: 20px
+
       &:hover, &.hover // Add the hover class here to be triggered by mouseenter/mouseleave
-        background-color: $activeColor
+        theme('background-color', '$activeColor')

Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl

@@ -1,21 +1,21 @@
 @import "{design}/app.styl"
 
 .imageViewerLoadingIndicator
-  color: $textSecondaryColor
+  theme('color', '$textSecondaryColor')
 
 .faded
   opacity: 0.5
 
 .imageViewerErrorLoadingIndicator
-  color: $uiYellow
-  
+  theme('color', '$uiYellow')
+
   p, h4
     text-align: center
     padding: 4px 0
-    
+
   p
     font-size: 11pt
-      
+
 .loadingIndicator
   display: none
   pointer-events: none // Necessary for click-through to cornerstone element below
@@ -26,11 +26,11 @@
   font-size: 18px
   z-index: 100
   background-color: rgba(0,0,0,0.75)
-  
+
   .indicatorContents
     position: absolute
     top: 40%
     width: 100%
     font-size: 30px
     font-weight: 300
-    text-align: center
+    text-align: center

Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl

@@ -2,9 +2,9 @@
 
 .toolbarSectionButton
   display: inline-block
-  color: $defaultColor
-  fill: $defaultColor
-  stroke: $defaultColor
+  theme('color', '$defaultColor')
+  theme('fill', '$defaultColor')
+  theme('stroke', '$defaultColor')
   min-width: 30px
   cursor: pointer
   text-align: center
@@ -14,7 +14,7 @@
     cursor: not-allowed
 
   .buttonLabel
-    color: $textSecondaryColor
+    theme('color', '$textSecondaryColor')
     font-size: 12px
     font-weight: 500
 
@@ -34,22 +34,22 @@
 
   &:hover
     .buttonLabel
-      color: $hoverColor
+      theme('color', '$hoverColor')
 
     svg
-      fill: $hoverColor
-      stroke: $hoverColor
+      theme('fill', '$hoverColor')
+      theme('stroke', '$hoverColor')
       
     i
-      color: $hoverColor
+      theme('color', '$hoverColor')
 
   &:active, &.active
     .buttonLabel
-      color: $activeColor
+      theme('color', '$activeColor')
 
     svg
-      fill: $activeColor
-      stroke: $activeColor
+      theme('fill', '$activeColor')
+      theme('stroke', '$activeColor')
       
     i
-      color: $activeColor
+      theme('color', '$activeColor')

Packages/viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl

@@ -14,9 +14,9 @@ $distance = 12px
     white-space: nowrap
 
     .toolbarSectionDrawer
-      background-color: $uiGrayDarker
+      theme('background-color', '$uiGrayDarker')
       border-radius: 7px
-      color: $textPrimaryColor
+      theme('color', '$textPrimaryColor')
       content: ''
       display: block
       font-size: 18px

Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.styl

@@ -11,8 +11,8 @@
 
     #imageViewerViewports
       .viewportContainer
+        theme('border', '%s solid $uiBorderColorDark' % $viewportBorderThickness)
         float: left
-        border: $viewportBorderThickness solid $viewportBorderColor
 
         outline: 0 // Prevent blue outline in Chrome
 
@@ -22,12 +22,12 @@
           outline: 0 // Prevent blue outline in Chrome
 
         &:hover
-          border: $viewportBorderThickness solid $viewportBorderColorHover
-          
+          theme('border', '%s solid $uiBorderColor' % $viewportBorderThickness)
+
         &.active, &:hover.active
-          border: $viewportBorderThickness solid $viewportBorderColorActive
+          theme('border', '%s solid $uiBorderColorActive' % $viewportBorderThickness)
 
         .removable
           width: 100%
           height: 100%
-          position: relative // Necessary so that the viewportOverlay is on top of the viewports
+          position: relative // Necessary so that the viewportOverlay is on top of the viewports

Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl

@@ -3,7 +3,7 @@
 $viewportTagPadding = 20px
 
 .imageViewerViewportOverlay
-  color: $textSecondaryColor
+  theme('color', '$textSecondaryColor')
 
   .dicomTag
     position: absolute