Client build: update style tools: grunt-contrib-less to 1.0, grunt-sp…

…ritesmith to 4.7, fixes NameError with grunt style on node > 0.10, update galaxy_bootstrap/variables for different(?) lighten/saturate

client/galaxy/style/less/base.less

@@ -1447,9 +1447,6 @@ div.permissionContainer {
 }
 
 // ============================================================================ History
-@import "sprite-history-states.less";
-@import "sprite-history-buttons.less";
-
 @import "ui/icon-btn.less";
 @import "list-item.less";
 @import "history.less";
@@ -1628,7 +1625,7 @@ div.toolTitleNoSection
     .sprite(@tags);
 }
 .icon-button.tag--plus {
-    .sprite(@tag--plus);
+    .sprite(@tag-plus);
 }
 .icon-button.toggle-expand {
     .sprite(@toggle-expand);
@@ -1676,10 +1673,10 @@ div.toolTitleNoSection
     .sprite(@chart);
 }
 .icon-button.disk--arrow {
-    .sprite(@disk--arrow-bw);
+    .sprite(@disk-arrow-bw);
 }
 .icon-button.disk--arrow:hover {
-    .sprite(@disk--arrow);
+    .sprite(@disk-arrow);
 }
 .icon-button.cross-circle {
     .sprite(@cross-circle-bw);

client/galaxy/style/less/galaxy_bootstrap/variables.less

@@ -15,13 +15,13 @@
 // Default border bolor, this is between gray-light and gray-lighter -- classic Galaxy border color
 @border-default-color: lighten(black, 75%);
 
-// When making borders for components with other colors, how much to darken 
+// When making borders for components with other colors, how much to darken
 @border-darken-percent: 40%;
 
 // For making state colors, how much to darken and lighten
 @state-text-darken-percent: 15%;
-@state-bg-lighten-percent: 40%;
-@state-bg-saturate-percent: 30%;
+@state-bg-lighten-percent: 66%;
+@state-bg-saturate-percent: 22%;
 
 // Why bootstrap stopped defining these as variables I don't know
 @white: #fff;
@@ -422,19 +422,19 @@
 // -------------------------
 
 @state-warning-text:             darken(@brand-warning, @state-text-darken-percent);
-@state-warning-bg:               saturate(lighten(@brand-warning, @state-bg-lighten-percent),@state-bg-saturate-percent);
+@state-warning-bg:               saturate(lighten(@brand-warning, @state-bg-lighten-percent),@state-bg-saturate-percent, relative);
 @state-warning-border:           darken(@state-warning-bg, @border-darken-percent);
 
 @state-danger-text:              darken(@brand-danger, @state-text-darken-percent);
-@state-danger-bg:                saturate(lighten(@brand-danger, @state-bg-lighten-percent),@state-bg-saturate-percent);
+@state-danger-bg:                saturate(lighten(@brand-danger, @state-bg-lighten-percent),@state-bg-saturate-percent, relative);
 @state-danger-border:            darken(@state-danger-bg, @border-darken-percent);
 
 @state-success-text:             darken(@brand-success, @state-text-darken-percent);
-@state-success-bg:               saturate(lighten(@brand-success, @state-bg-lighten-percent),@state-bg-saturate-percent);
+@state-success-bg:               saturate(lighten(@brand-success, @state-bg-lighten-percent, relative),@state-bg-saturate-percent, relative);
 @state-success-border:           darken(@state-success-bg, @border-darken-percent);
 
 @state-info-text:                darken(@brand-info, @state-text-darken-percent);
-@state-info-bg:                  saturate(lighten(@brand-info, @state-bg-lighten-percent),@state-bg-saturate-percent);
+@state-info-bg:                  saturate(lighten(@brand-info, @state-bg-lighten-percent),@state-bg-saturate-percent, relative);
 @state-info-border:              darken(@state-info-bg, @border-darken-percent);
 
 

client/galaxy/style/less/history.less

@@ -1,3 +1,6 @@
+@import "sprite-history-states.less";
+@import "sprite-history-buttons.less";
+
 // ---------------------------------------------------------------------------- panel header buttons
 .history-panel-header {
     .panel-header-button {
@@ -862,14 +865,14 @@ div.historyItem-failed_metadata {
 div.historyItem-error {
     background: @state-danger-bg;
     .state-icon {
-        .sprite(@data_error);
+        .sprite(@data-error);
     }
 }
 
 div.historyItem-empty {
     background: @state-danger-bg;
     .state-icon {
-        .sprite(@data_empty);
+        .sprite(@data-empty);
     }
 }
 
@@ -897,7 +900,7 @@ div.historyItem-upload {
 div.historyItem-queued {
     background: @state-default-bg;
     .state-icon {
-        .sprite(@data_queued);
+        .sprite(@data-queued);
     }
 }
 
@@ -945,31 +948,31 @@ div.historyItemButtons {
     float: right;
 
     .icon-button.display {
-        .sprite(@eye_icon);
+        .sprite(@eye-icon);
     }
     .icon-button.display:hover {
-        .sprite(@eye_icon_dark);
+        .sprite(@eye-icon-dark);
     }
     .icon-button.display_disabled {
-        .sprite(@eye_icon_grey);
+        .sprite(@eye-icon-grey);
     }
     .icon-button.delete {
-        .sprite(@delete_icon);
+        .sprite(@delete-icon);
     }
     .icon-button.delete:hover {
-        .sprite(@delete_icon_dark);
+        .sprite(@delete-icon-dark);
     }
     .icon-button.delete_disabled {
-        .sprite(@delete_icon_grey);
+        .sprite(@delete-icon-grey);
     }
     .icon-button.edit {
-        .sprite(@pencil_icon);
+        .sprite(@pencil-icon);
     }
     .icon-button.edit:hover {
-        .sprite(@pencil_icon_dark);
+        .sprite(@pencil-icon-dark);
     }
     .icon-button.edit_disabled {
-        .sprite(@pencil_icon_grey);
+        .sprite(@pencil-icon-grey);
     }
 }
 

client/grunt-tasks/style.js

@@ -31,33 +31,36 @@ module.exports = function( grunt ){
         },
         'history-buttons': {
             src: fmt( '%s/history-buttons/*.png', imagesPath ),
-            destImg: fmt( '%s/sprite-history-buttons.png', styleDistPath ),
+            dest: fmt( '%s/sprite-history-buttons.png', styleDistPath ),
             imgPath: fmt( 'sprite-history-buttons.png' ),
-            destCSS: fmt( '%s/sprite-history-buttons.less', lessPath )
+            destCss: fmt( '%s/sprite-history-buttons.less', lessPath )
         },
         'history-states': {
             src: fmt( '%s/history-states/*.png', imagesPath ),
-            destImg: fmt( '%s/sprite-history-states.png', styleDistPath ),
+            dest: fmt( '%s/sprite-history-states.png', styleDistPath ),
             imgPath: fmt( 'sprite-history-states.png' ),
-            destCSS: fmt( '%s/sprite-history-states.less', lessPath )
+            destCss: fmt( '%s/sprite-history-states.less', lessPath )
         },
         'fugue': {
             src: fmt( '%s/fugue/*.png', imagesPath ),
-            destImg: fmt( '%s/sprite-fugue.png', styleDistPath ),
+            dest: fmt( '%s/sprite-fugue.png', styleDistPath ),
             imgPath: fmt( 'sprite-fugue.png' ),
-            destCSS: fmt( '%s/sprite-fugue.less', lessPath )
+            destCss: fmt( '%s/sprite-fugue.less', lessPath )
         }
     });
 
     // Compile less files
     grunt.config( 'less', {
         options: {
             compress: true,
-            paths: [ styleDistPath ]
+            paths: [ lessPath ],
+            strictImports: true
         },
         dist: {
             files: _.reduce( lessFiles, function( d, s ) {
-                d[ fmt( '%s/%s.css', styleDistPath, s ) ] = [ fmt( '%s/%s.less', lessPath, s ) ]; return d;
+                var output = fmt( '%s/%s.css', styleDistPath, s ),
+                    input = fmt( '%s/%s.less', lessPath, s );
+                d[ output ] = [ input ]; return d;
             }, {} )
         }
     });

client/package.json

@@ -11,11 +11,11 @@
     "grunt-cli": "^0.1.13",
     "grunt-contrib-clean": "^0.6.0",
     "grunt-contrib-copy": "^0.5.0",
-    "grunt-contrib-less": "~0.7.0",
+    "grunt-contrib-less": "^1.0.1",
     "grunt-contrib-uglify": "^0.8.0",
     "grunt-contrib-watch": "^0.6.1",
     "grunt-exec": "^0.4.6",
-    "grunt-spritesmith": "~1.7.0",
+    "grunt-spritesmith": "^4.7.1",
     "grunt-webpack": "^1.0.8",
     "i18n-webpack-plugin": "^0.2.7",
     "webpack": "^1.5.1",