Themeroller: Fix opacityOverlay computation

ThemeRoller sometimes gets post-processed `vars` in `options`, e.g. in
`buildPackages` in `Gruntfile.js`. To avoid dividing `opacityOverlay` by 100
twice, resulting in invalid values for `opacity` of the `ui-widget-overlay`
class, record original percentage values with the `Perc` suffix and use those
for computation inputs.

Author: mgol

lib/themeroller.js

@@ -88,7 +88,7 @@ function ThemeRoller( options ) {
 	vars = options.vars;
 	if ( vars === false || vars === null ) {
 		this.isNull = true;
-		this.vars = {};
+		vars = {};
 		return;
 	} else if ( vars ) {
 		vars = { ...vars };
@@ -115,13 +115,24 @@ function ThemeRoller( options ) {
 	}
 	oldImagesBackCompat( vars || {} );
 	this.serializedVars = querystring.stringify( vars );
-	vars = this.vars = Object.assign( {}, ThemeRoller.defaults, vars );
+	vars = this.vars = {
+		...ThemeRoller.defaults,
+		...vars
+	};
 	this.images = [];
 
-	// Opacity fix
-	// TODO: Remove `filter` style when dropping support for IE8 and earlier.
-	vars.opacityOverlayPerc = vars.opacityOverlay;
-	vars.opacityShadowPerc = vars.opacityShadow;
+	// Opacity fix.
+	// ThemeRoller sometimes gets post-processed `vars` in `options`,
+	// e.g. in `buildPackages` in `Gruntfile.js`. To avoid dividing
+	// `opacityOverlay` by 100 twice, resulting in invalid values,
+	// record original percentage values with the `Perc` suffix and
+	// use those for computation inputs.
+	if ( !( "opacityOverlayPerc" in vars ) ) {
+		vars.opacityOverlayPerc = vars.opacityOverlay;
+	}
+	if ( !( "opacityShadowPerc" in vars ) ) {
+		vars.opacityShadowPerc = vars.opacityShadow;
+	}
 	if ( semver.lt( this.jqueryUi.pkg.version, "1.13.0-a" ) ) {
 
 		// For version <1.13.0, `filter` has its own separate line
@@ -134,8 +145,8 @@ function ThemeRoller( options ) {
 		};
 		vars.opacityFilterOverlay = opacityFilter( vars.opacityOverlay );
 		vars.opacityFilterShadow = opacityFilter( vars.opacityShadow );
-		vars.opacityOverlay = opacityFix( vars.opacityOverlay );
-		vars.opacityShadow = opacityFix( vars.opacityShadow );
+		vars.opacityOverlay = opacityFix( vars.opacityOverlayPerc );
+		vars.opacityShadow = opacityFix( vars.opacityShadowPerc );
 	} else if ( semver.lt( this.jqueryUi.pkg.version, "1.14.0-a" ) ) {
 
 		// For version >=1.13.0 <1.14.0, `-ms-filter` has its own separate line
@@ -148,17 +159,17 @@ function ThemeRoller( options ) {
 		};
 		vars.opacityFilterOverlay = opacityFilter( vars.opacityOverlay );
 		vars.opacityFilterShadow = opacityFilter( vars.opacityShadow );
-		vars.opacityOverlay = opacityFix( vars.opacityOverlay );
-		vars.opacityShadow = opacityFix( vars.opacityShadow );
+		vars.opacityOverlay = opacityFix( vars.opacityOverlayPerc );
+		vars.opacityShadow = opacityFix( vars.opacityShadowPerc );
 	} else {
 
 		// For version >=1.14.0, IE is not supported so there's no `filter`
 		// or `-ms-filter`.
 		opacityFix = function( opacity ) {
 			return ( opacity / 100 ).toString().replace( /^0\./, "." );
 		};
-		vars.opacityOverlay = opacityFix( vars.opacityOverlay );
-		vars.opacityShadow = opacityFix( vars.opacityShadow );
+		vars.opacityOverlay = opacityFix( vars.opacityOverlayPerc );
+		vars.opacityShadow = opacityFix( vars.opacityShadowPerc );
 	}
 
 	// Add '#' in the beginning of the colors if needed