Added tide and tigerlilly themes (OHIF-49)

Packages/design/package.js

@@ -17,7 +17,8 @@ Package.onUse(function(api) {
         'app.styl',
         'styles/imports/mixins.styl',
         'styles/imports/spacings.styl',
-        'styles/imports/variables.styl'
+        'styles/imports/variables.styl',
+        'styles/imports/theme-tide.styl',
     ], 'client', {
         isImport: true
     });

Packages/design/styles/imports/mixins.styl

@@ -1,3 +1,15 @@
+/*
+    Basic mixin which vendorizes a propery. Usage:
+
+    vendorize(box-sizing, border-box)
+*/
+vendorize(property, value)
+  -webkit-{property} value
+  -moz-{property} value
+  -ms-{property} value
+  -o-{property} value
+  {property} value
+
 animation(a)
   -webkit-animation: a
   -moz-animation: a

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

@@ -0,0 +1,54 @@
+// 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 = #3C8074
+$primaryBackgroundColor = #000000
+$boxBackgroundColor = #344a61
+$boxBackgroundColorDark = #22374D
+
+// Text Colors
+$textColorActive = #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

@@ -0,0 +1,54 @@
+// Common pallete
+$uiYellow = #E29E4A
+$uiSkyBlue = #6FBDE2
+
+$uiLightGray = #516873
+$uiGray = #263340
+$uiGrayDark = #16202B
+$uiGrayDarker = #151A1F
+$uiGrayDarkest = #14191E
+
+// Interface UI Colors
+$defaultColor = #98ceff
+$hoverColor = #ffffff
+$activeColor = #ff8a3d
+$uiBorderColor = #744b71
+$uiBorderColorDark = #744b71
+$uiBorderColorActive = #ff8a3d
+$primaryBackgroundColor = #000000
+$boxBackgroundColor = #5b3a59
+$boxBackgroundColorDark = #4b2f40
+
+// Text Colors
+$textColorActive = #ff8a3d
+$textPrimaryColor = #ffffff
+$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/variables.styl

@@ -1,52 +1,2 @@
-// Common pallete
-$uiYellow = #E29E4A
-$uiSkyBlue = #6FBDE2
-
-$uiGray = #263340
-$uiGrayDark = #16202B
-$uiGrayDarker = #151A1F
-$uiGrayDarkest = #14191E
-
-// Interface UI Colors
-$defaultColor = #94A8B3
-$hoverColor = #ffffff
-$activeColor = #40D9B8
-$uiBorderColor = #436270
-$uiBorderColorDark = #3C5D80
-$uiBorderColorActive = #3C8074
-$primaryBackgroundColor = #000000
-$boxBackgroundColor = #3E5975
-$boxBackgroundColorDark = #22374D
-
-// Text Colors
-$textColorActive = #2D2D2D
-$textPrimaryColor = #ffffff
-$textSecondaryColor = #91B9CD
-
-// Other Colors
-$menuBackgroundColor = #F2F2F2
-
-// 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
+@import "./theme-tigerlilly.styl"
+//@import "./theme-tide.styl"