LT-281: Replacing variables for theme calls

Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl

@@ -1,7 +1,7 @@
 @import "{design}/app"
 
 $height = 25px
-$textColorActive = #2D2D2D
+$textColorButtonActive = #2D2D2D
 
 .roundedButtonGroup
 
@@ -15,9 +15,9 @@ $textColorActive = #2D2D2D
 
     .roundedButton
       align-items: center
-      background-color: $uiGrayDark
-      border: 2px $uiBorderColorDark solid
-      color: $textSecondaryColor
+      theme('background-color', '$uiGrayDark')
+      theme('border', '2px solid $uiBorderColorDark')
+      theme('color', '$textSecondaryColor')
       display: flex
       font-size: 11px
       font-weight: 500
@@ -29,19 +29,19 @@ $textColorActive = #2D2D2D
       transition: transition($sidebarTransition)
 
       svg
-        fill: $defaultColor
-        stroke: $defaultColor
+        theme('fill', '$defaultColor')
+        theme('stroke', '$defaultColor')
 
       svg
       span
         margin: 0 2px
-        
+
       i
         line-height: 15px
         font-size: 15px
 
     .bottomLabel
-      color: $textSecondaryColor
+      theme('color', '$textSecondaryColor')
       font-size: 12px
       font-weight: 500
       line-height: 12px
@@ -58,16 +58,16 @@ $textColorActive = #2D2D2D
       border-top-right-radius: $height
 
     &:hover .roundedButton
-      background-color: $boxBackgroundColor
-      color: $uiGrayDark
+      theme('color', '$uiGrayDark')
+      theme('background-color', '$boxBackgroundColor')
 
     &.active .roundedButton
-      background-color: $activeColor
-      border-color: $uiBorderColorActive
-      color: $textColorActive
+      theme('background-color', '$activeColor')
+      theme('border-color', '$uiBorderColorActive')
+      color: $textColorButtonActive
 
     &:hover .roundedButton
     &.active .roundedButton
       svg
-        fill: $uiGrayDark
-        stroke: $uiGrayDark
+        theme('fill', '$uiGrayDark')
+        theme('stroke', '$uiGrayDark')

Packages/design/styles/common/global.styl

@@ -2,11 +2,9 @@
 
 html body
   font-family: 'Roboto', 'OpenSans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
-  // Try to fix LT-273, need a monitor to test on though.
-  //text-rendering: optimizeLegibility
 
 html hr
-  border-top: 1px solid $uiBorderColor
+  theme('border-top', '1px solid $uiBorderColor')
 
 label.form-group
   width: 100%
@@ -49,9 +47,9 @@ label.form-group
 
 .modal-dialog
   .modal-content
-    background: $primaryBackgroundColor
-    border-color: $uiBorderColor
-    color: $textSecondaryColor
+    theme('background', '$primaryBackgroundColor')
+    theme('border-color', '$uiBorderColor')
+    theme('color', '$textSecondaryColor')
 
     .modal-header, .modal-footer
-      border-color: $uiBorderColor
+      theme('border-color', '$uiBorderColor')

Packages/design/styles/components/radio.styl

@@ -3,12 +3,12 @@
 .group-radio
   label
     cursor: pointer
-    
+
     input
       height: 0
       width: 0
       visibility: hidden
-      
+
     span
       padding-left: 23px
       position: relative
@@ -23,14 +23,14 @@
         top: 50%
         transform(translateY(-50%))
         width: 16px
-    
+
     input:focus + span:before
       // TODO: [design] define a outline for the design
+      theme('box-shadow', '0 0 2px 2px $textSecondaryColor')
       outline: none
-      box-shadow: 0 0 2px 2px $textSecondaryColor
-    
+
     input:checked + span:after
-      background: $uiBorderColorDark
+      theme('background', '$uiBorderColorDark')
       border-radius: 5px
       content: ''
       height: 10px

Packages/design/styles/components/select2.styl

@@ -22,8 +22,8 @@ span.select2.select2-container
     padding-left: 11px
 
   span.select2-selection__arrow
+    theme('border-left', '1px solid $primaryBackgroundColor')
     background-color: $gray1
-    border-left: 1px solid $primaryBackgroundColor
     border-top-right-radius: $borderRadius
     border-bottom-right-radius: $borderRadius
     right: 0
@@ -42,8 +42,8 @@ span.select2.select2-container
       placeholder-color($gray4)
 
     li.select2-selection__choice
+      theme('border-color', '$uiGray')
       background-color: #FFF
-      border-color: $uiGray
       border-radius: $borderRadius
       color: $gray4
       font-size: 12px

Packages/design/styles/imports/theme-tide.styl

@@ -18,7 +18,6 @@ $themes['tide'] = {
   $uiBorderColorActive: #00a4d9
   $primaryBackgroundColor: #000000
   $boxBackgroundColor: #344a61
-  $boxBackgroundColorDark: #22374D
 
   // Text Colors
   $textColorActive: black //#89bae5
@@ -26,86 +25,5 @@ $themes['tide'] = {
   $textSecondaryColor: #6a8fb1
 
   // Other Colors
-  $menuBackgroundColor: #F2F2F2
   $imageSliderColor: #163239
-
-  // Viewport Settings
-  $viewportBorderThickness: 1px
-  $viewportBorderColor: $uiBorderColorDark
-  $viewportBorderColorHover: $uiBorderColor
-  $viewportBorderColorActive: $uiBorderColorActive
-
-  // Sizes
-  $topBarHeight: 40px
-  $toolbarHeight: 78px
-  $toolbarDrawerHeight: 62px
-
-  // Thicknesses
-  $uiBorderThickness: 1px
-
-  // Fonts
-  $logoFontFamily: "Sanchez"
-  $logoFontWeight: 300
-
-  // Transitions
-  $transitionDuration: 0.3s
-  $transitionEffect: ease
-  $sidebarTransition: all $transitionDuration $transitionEffect
-  $studiesSidebarMenuWidth: 307px
-  $lesionsSidebarMenuWidth: 323px
 }
-
-// Common pallete
-$uiYellow = #E29E4A
-$uiSkyBlue = #6FBDE2
-
-$uiLightGray = #516873
-$uiGray = #263340
-$uiGrayDark = #16202B
-$uiGrayDarker = #151A1F
-$uiGrayDarkest = #14191E
-
-// Interface UI Colors
-$defaultColor = #9cd0fe
-$hoverColor = #ffffff
-$activeColor = #00a4d9
-$uiBorderColor = #436270
-$uiBorderColorDark = #3C5D80
-$uiBorderColorActive = #00a4d9
-$primaryBackgroundColor = #000000
-$boxBackgroundColor = #344a61
-$boxBackgroundColorDark = #22374D
-
-// Text Colors
-$textColorActive = black //#89bae5
-$textPrimaryColor = #ffffff
-$textSecondaryColor = #6a8fb1
-
-// Other Colors
-$menuBackgroundColor = #F2F2F2
-$imageSliderColor = #163239
-
-// Viewport Settings
-$viewportBorderThickness = 1px
-$viewportBorderColor = $uiBorderColorDark
-$viewportBorderColorHover = $uiBorderColor
-$viewportBorderColorActive = $uiBorderColorActive
-
-// Sizes
-$topBarHeight = 40px
-$toolbarHeight = 78px
-$toolbarDrawerHeight = 62px
-
-// Thicknesses
-$uiBorderThickness = 1px
-
-// Fonts
-$logoFontFamily = "Sanchez"
-$logoFontWeight = 300
-
-// Transitions
-$transitionDuration = 0.3s
-$transitionEffect = ease
-$sidebarTransition = all $transitionDuration $transitionEffect
-$studiesSidebarMenuWidth = 307px
-$lesionsSidebarMenuWidth = 323px

Packages/design/styles/imports/theme-tigerlilly.styl

@@ -18,7 +18,6 @@ $themes['tigerlilly'] = {
   $uiBorderColorActive: #ff8a3d
   $primaryBackgroundColor: #000000
   $boxBackgroundColor: #5b3a59
-  $boxBackgroundColorDark: #4b2f40
 
   // Text Colors
   $textColorActive: black
@@ -26,31 +25,5 @@ $themes['tigerlilly'] = {
   $textSecondaryColor: #6a8fb1
 
   // Other Colors
-  $menuBackgroundColor: #F2F2F2
   $imageSliderColor: #4b2c3c //#163239
-
-  // Viewport Settings
-  $viewportBorderThickness: 1px
-  $viewportBorderColor: $uiBorderColorDark
-  $viewportBorderColorHover: $uiBorderColor
-  $viewportBorderColorActive: $uiBorderColorActive
-
-  // Sizes
-  $topBarHeight: 40px
-  $toolbarHeight: 78px
-  $toolbarDrawerHeight: 62px
-
-  // Thicknesses
-  $uiBorderThickness: 1px
-
-  // Fonts
-  $logoFontFamily: "Sanchez"
-  $logoFontWeight: 300
-
-  // Transitions
-  $transitionDuration: 0.3s
-  $transitionEffect: ease
-  $sidebarTransition: all $transitionDuration $transitionEffect
-  $studiesSidebarMenuWidth: 307px
-  $lesionsSidebarMenuWidth: 323px
 }

Packages/design/styles/imports/theming.styl

@@ -1,3 +1,9 @@
+$themes = {}
+$defaultTheme = 'tide'
+
+@import "./theme-tide.styl"
+@import "./theme-tigerlilly.styl"
+
 parseSpaceVars($theme, $value)
   $valueSplit = split(' ', $value)
   $list = ''
@@ -21,5 +27,6 @@ theme($property, $value)
   / {selector()}
     {$property}: parseCommaVars($themes[$defaultTheme], $value)
   for $themeName, $theme in $themes
-    / body.theme-{$themeName} {selector()}
-      {$property}: parseCommaVars($theme, $value)
+    for $selectorPiece in split(',', selector())
+      / body.theme-{$themeName} {$selectorPiece}
+        {$property}: parseCommaVars($theme, $value)

Packages/design/styles/imports/variables.styl

@@ -1,7 +1,22 @@
-$themes = {}
-$defaultTheme = 'tide'
-
 @import "./theming.styl"
 
-@import "./theme-tide.styl"
-@import "./theme-tigerlilly.styl"
+// Sizes
+$topBarHeight = 40px
+$toolbarHeight = 78px
+$toolbarDrawerHeight = 62px
+$studiesSidebarMenuWidth = 307px
+$lesionsSidebarMenuWidth = 323px
+
+// Fonts
+$logoFontFamily = "Sanchez"
+$logoFontWeight = 300
+
+// Transitions
+$transitionDuration = 0.3s
+$transitionEffect = ease
+$sidebarTransition = all $transitionDuration $transitionEffect
+
+
+// Thicknesses
+$viewportBorderThickness = 1px
+$uiBorderThickness = 1px