Allowing themes overriding by each project needs

Packages/ohif-design/app.styl

@@ -3,3 +3,4 @@
 @import "{ohif:design}/styles/imports/spacings"
 @import "{ohif:design}/styles/imports/variables"
 @import "{ohif:design}/styles/imports/theme-icons"
+@import "{ohif:design}/styles/imports/theming"

Packages/ohif-design/package.js

@@ -5,13 +5,15 @@ Package.describe({
 });
 
 Package.onUse(function(api) {
-    api.versionsFrom('1.3.5.1');
+    api.versionsFrom('1.4.2.3');
 
     api.use('ecmascript');
     api.use('standard-app-packages');
     api.use('jquery');
     api.use('stylus');
 
+    api.use('ohif:themes');
+
     api.addAssets('assets/theme-icons.png', 'client');
 
     // Importable colors / typography settings
@@ -21,14 +23,7 @@ Package.onUse(function(api) {
         'styles/imports/spacings.styl',
         'styles/imports/variables.styl',
         'styles/imports/theming.styl',
-        'styles/imports/theme-icons.styl',
-        'styles/imports/themes/theme-tide.styl',
-        'styles/imports/themes/theme-tigerlily.styl',
-        'styles/imports/themes/theme-crickets.styl',
-        'styles/imports/themes/theme-honeycomb.styl',
-        'styles/imports/themes/theme-mint.styl',
-        'styles/imports/themes/theme-overcast.styl',
-        'styles/imports/themes/theme-quartz.styl'
+        'styles/imports/theme-icons.styl'
     ], 'client', {
         isImport: true
     });

Packages/ohif-design/styles/imports/theming.styl

@@ -1,14 +1,4 @@
-$themes = {}
-$defaultTheme = 'tide'
-
-// Import the theme variables
-@import "./themes/theme-tide.styl"
-@import "./themes/theme-tigerlily.styl"
-@import "./themes/theme-crickets.styl"
-@import "./themes/theme-honeycomb.styl"
-@import "./themes/theme-mint.styl"
-@import "./themes/theme-overcast.styl"
-@import "./themes/theme-quartz.styl"
+@require "{ohif:themes}/themes"
 
 /*
  * Process each theme variable in the given value, splitting it by space

Packages/ohif-themes-common/package.js

@@ -0,0 +1,25 @@
+Package.describe({
+    name: 'ohif:themes-common',
+    summary: 'OHIF Common Themes',
+    version: '0.0.1'
+});
+
+Package.onUse(function(api) {
+    api.versionsFrom('1.4.2.3');
+
+    api.use('stylus');
+
+    // Importable themes
+    api.addFiles([
+        'themes.styl',
+        'themes/theme-tide.styl',
+        'themes/theme-tigerlily.styl',
+        'themes/theme-crickets.styl',
+        'themes/theme-honeycomb.styl',
+        'themes/theme-mint.styl',
+        'themes/theme-overcast.styl',
+        'themes/theme-quartz.styl'
+    ], 'client', {
+        isImport: true
+    });
+});

Packages/ohif-themes-common/themes.styl

@@ -0,0 +1,10 @@
+$ohifThemesCommon = {}
+
+// Import the theme variables
+@import "{ohif:themes-common}/themes/theme-tide.styl"
+@import "{ohif:themes-common}/themes/theme-tigerlily.styl"
+@import "{ohif:themes-common}/themes/theme-crickets.styl"
+@import "{ohif:themes-common}/themes/theme-honeycomb.styl"
+@import "{ohif:themes-common}/themes/theme-mint.styl"
+@import "{ohif:themes-common}/themes/theme-overcast.styl"
+@import "{ohif:themes-common}/themes/theme-quartz.styl"

Packages/ohif-themes-common/themes/theme-crickets.styl

@@ -1,9 +1,9 @@
-$themes['crickets'] = {
-  // Common pallete
+$ohifThemesCommon['crickets'] = {
+  // Common palette
   $uiYellow: #E29E4A
   $uiSkyBlue: #6FBDE2
 
-  // State pallete
+  // State palette
   $uiStateError: #FFCCCC
   $uiStateErrorBorder: #993333
   $uiStateErrorText: #661111
@@ -25,7 +25,7 @@ $themes['crickets'] = {
   $boxBackgroundColor: #344a61
 
   // Text Colors
-  $textColorActive: black
+  $textColorActive: #000000
   $textPrimaryColor: #ffffff
   $textSecondaryColor: #8BE7B5
   $largeNumbersColor: #D47C66

Packages/ohif-themes-common/themes/theme-honeycomb.styl

@@ -1,9 +1,9 @@
-$themes['honeycomb'] = {
-  // Common pallete
+$ohifThemesCommon['honeycomb'] = {
+  // Common palette
   $uiYellow: #E29E4A
   $uiSkyBlue: #6FBDE2
 
-  // State pallete
+  // State palette
   $uiStateError: #FFCCCC
   $uiStateErrorBorder: #993333
   $uiStateErrorText: #661111
@@ -25,11 +25,11 @@ $themes['honeycomb'] = {
   $boxBackgroundColor: #344a61
 
   // Text Colors
-  $textColorActive: black
+  $textColorActive: #000000
   $textPrimaryColor: #ffffff
   $textSecondaryColor: #FAB797
   $largeNumbersColor: #D47C66
-  
+
   // Other Colors
   $imageSliderColor: #163239
 }

Packages/ohif-themes-common/themes/theme-mint.styl

@@ -1,9 +1,9 @@
-$themes['mint'] = {
-  // Common pallete
+$ohifThemesCommon['mint'] = {
+  // Common palette
   $uiYellow: #E29E4A
   $uiSkyBlue: #6FBDE2
 
-  // State pallete
+  // State palette
   $uiStateError: #FFCCCC
   $uiStateErrorBorder: #993333
   $uiStateErrorText: #661111
@@ -25,7 +25,7 @@ $themes['mint'] = {
   $boxBackgroundColor: #344a61
 
   // Text Colors
-  $textColorActive: black
+  $textColorActive: #000000
   $textPrimaryColor: #ffffff
   $textSecondaryColor: #A7E9B3
   $largeNumbersColor: #76D27D

Packages/ohif-themes-common/themes/theme-overcast.styl

@@ -1,9 +1,9 @@
-$themes['overcast'] = {
-  // Common pallete
+$ohifThemesCommon['overcast'] = {
+  // Common palette
   $uiYellow: #E29E4A
   $uiSkyBlue: #6FBDE2
 
-  // State pallete
+  // State palette
   $uiStateError: #FFCCCC
   $uiStateErrorBorder: #993333
   $uiStateErrorText: #661111
@@ -25,7 +25,7 @@ $themes['overcast'] = {
   $boxBackgroundColor: #344a61
 
   // Text Colors
-  $textColorActive: black
+  $textColorActive: #000000
   $textPrimaryColor: #ffffff
   $textSecondaryColor: #73F2FC
   $largeNumbersColor: #74F1FA

Packages/ohif-themes-common/themes/theme-quartz.styl

@@ -1,9 +1,9 @@
-$themes['quartz'] = {
-  // Common pallete
+$ohifThemesCommon['quartz'] = {
+  // Common palette
   $uiYellow: #E29E4A
   $uiSkyBlue: #6FBDE2
 
-  // State pallete
+  // State palette
   $uiStateError: #FFCCCC
   $uiStateErrorBorder: #993333
   $uiStateErrorText: #661111
@@ -25,7 +25,7 @@ $themes['quartz'] = {
   $boxBackgroundColor: #344a61
 
   // Text Colors
-  $textColorActive: black
+  $textColorActive: #000000
   $textPrimaryColor: #ffffff
   $textSecondaryColor: #D7E8FE
   $largeNumbersColor: #ABCDF6

Packages/ohif-themes-common/themes/theme-tide.styl

@@ -1,9 +1,9 @@
-$themes['tide'] = {
-  // Common pallete
+$ohifThemesCommon['tide'] = {
+  // Common palette
   $uiYellow: #E29E4A
   $uiSkyBlue: #6FBDE2
 
-  // State pallete
+  // State palette
   $uiStateError: #FFCCCC
   $uiStateErrorBorder: #993333
   $uiStateErrorText: #661111
@@ -25,7 +25,7 @@ $themes['tide'] = {
   $boxBackgroundColor: #344a61
 
   // Text Colors
-  $textColorActive: black
+  $textColorActive: #000000
   $textPrimaryColor: #ffffff
   $textSecondaryColor: #91B9CD
   $largeNumbersColor: #6FBDE2

Packages/ohif-themes-common/themes/theme-tigerlily.styl

@@ -1,9 +1,9 @@
-$themes['tigerlily'] = {
-  // Common pallete
+$ohifThemesCommon['tigerlily'] = {
+  // Common palette
   $uiYellow: #E29E4A
   $uiSkyBlue: #6FBDE2
 
-  // State pallete
+  // State palette
   $uiStateError: #FFCCCC
   $uiStateErrorBorder: #CC6666
   $uiStateErrorText: #661111
@@ -25,7 +25,7 @@ $themes['tigerlily'] = {
   $boxBackgroundColor: #5b3a59
 
   // Text Colors
-  $textColorActive: black
+  $textColorActive: #000000
   $textPrimaryColor: #ffffff
   $textSecondaryColor: #9CCDF8
   $largeNumbersColor: #D47C66

Packages/ohif-themes/package.js

@@ -0,0 +1,16 @@
+Package.describe({
+    name: 'ohif:themes',
+    summary: 'OHIF Themes overridable package',
+    version: '0.0.1'
+});
+
+Package.onUse(function(api) {
+    api.versionsFrom('1.4.2.3');
+
+    api.use('stylus');
+
+    api.use('ohif:themes-common');
+
+    // Importable themes related variables
+    api.addFiles('themes.styl', 'client', { isImport: true });
+});

Packages/ohif-themes/themes.styl

@@ -0,0 +1,4 @@
+@require "{ohif:themes-common}/themes"
+
+$themes = $ohifThemesCommon
+$defaultTheme = 'tide'