Change sass compoent @mixin parameter from $name to $primaryStyleName, fixes #10294

Change-Id: I548fdd3b0295db980bc4d769826e7c149ec0b3b3

32 files changed, 719 insertions, 719 deletions

diff --git a/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss b/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss
index 5d9b4a660f..64190b8820 100644
--- a/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss
+++ b/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss
@@ -1,16 +1,16 @@
-@mixin reindeer-accordion($name : v-accordion) {
+@mixin reindeer-accordion($primaryStyleName : v-accordion) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	border: 1px solid #bebebe;
 	border-radius: 2px;
 	-webkit-border-radius: 2px;
 	-moz-border-radius: 2px;
 	overflow: hidden;
 }
-.#{$name}-item {
+.#{$primaryStyleName}-item {
 	background-color: #fff;
 }
-.#{$name}-item-caption {
+.#{$primaryStyleName}-item-caption {
 	height: 19px;
 	background: #e4e4e4 repeat-x;
 	background-image: url(../tabsheet/img/tabbar-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
@@ -20,31 +20,31 @@
 	text-shadow: #fff 0 1px 0;
 }
 
-.#{$name}-item-caption .v-captiontext{
+.#{$primaryStyleName}-item-caption .v-captiontext{
 	vertical-align:baseline;
 }
 
-.#{$name}-item-first .#{$name}-item-caption {
+.#{$primaryStyleName}-item-first .#{$primaryStyleName}-item-caption {
 	border-top: none;
 }
-.#{$name}-item-caption .v-caption {
+.#{$primaryStyleName}-item-caption .v-caption {
 	padding: 3px 0 5px 10px;
 }
-.v-ie .#{$name}-item-caption .v-caption {
+.v-ie .#{$primaryStyleName}-item-caption .v-caption {
 	padding: 2px 0 6px 10px;
 }
-.#{$name}-item-open .#{$name}-item-caption {
+.#{$primaryStyleName}-item-open .#{$primaryStyleName}-item-caption {
 	background-image: url(../tabsheet/img/tabbar-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	border-bottom: 1px solid #bbb;
 }
-.#{$name}-item-caption .v-icon {
+.#{$primaryStyleName}-item-caption .v-icon {
 	margin-top: -1px;
 }
-.v-ie .#{$name}-item-caption .v-icon {
+.v-ie .#{$primaryStyleName}-item-caption .v-icon {
 	vertical-align: top;
 }
 /* Borderless style */
-.#{$name}-borderless {
+.#{$primaryStyleName}-borderless {
 	border: none;
 	border-radius: 0;
 	-webkit-border-radius: 0;
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-ie.scss b/WebContent/VAADIN/themes/reindeer/button/button-ie.scss
index db39bf5677..e0d6c35091 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-ie.scss
+++ b/WebContent/VAADIN/themes/reindeer/button/button-ie.scss
@@ -1,6 +1,6 @@
-@mixin reindeer-button-ie($name : v-nativebutton) {
+@mixin reindeer-button-ie($primaryStyleName : v-nativebutton) {
 
-.v-ie8 .#{$name}-link {
+.v-ie8 .#{$primaryStyleName}-link {
 	padding: 0;
 	text-align: left;
 }
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss b/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss
index 0d2060ddc6..2064cb1650 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss
@@ -1,15 +1,15 @@
-@mixin reindeer-button-link-style($name : v-button) {
+@mixin reindeer-button-link-style($primaryStyleName : v-button) {
 
-.#{$name}.#{$name}-link,
-.#{$name}.#{$name}-link:focus,
-.#{$name}.#{$name}-link:active,
-.#{$name}-link.v-pressed,
-.v-disabled.#{$name}.#{$name}-link,
-.#{$name}.#{$name}-link .#{$name}-wrap,
-.#{$name}.#{$name}-link:focus .#{$name}-wrap,
-.#{$name}.#{$name}-link:active .#{$name}-wrap,
-.#{$name}-link.v-pressed .#{$name}-wrap,
-.v-disabled.#{$name}.#{$name}-link .#{$name}-wrap {
+.#{$primaryStyleName}.#{$primaryStyleName}-link,
+.#{$primaryStyleName}.#{$primaryStyleName}-link:focus,
+.#{$primaryStyleName}.#{$primaryStyleName}-link:active,
+.#{$primaryStyleName}-link.v-pressed,
+.v-disabled.#{$primaryStyleName}.#{$primaryStyleName}-link,
+.#{$primaryStyleName}.#{$primaryStyleName}-link .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}.#{$primaryStyleName}-link:focus .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}.#{$primaryStyleName}-link:active .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-link.v-pressed .#{$primaryStyleName}-wrap,
+.v-disabled.#{$primaryStyleName}.#{$primaryStyleName}-link .#{$primaryStyleName}-wrap {
 	background: transparent;
 	height: auto;
 	padding: 0;
@@ -17,12 +17,12 @@
 	line-height: inherit;
 	}
 
-.#{$name}.#{$name}-link.v-disabled,
-.#{$name}.#{$name}-link.v-disabled .#{$name}-wrap {
+.#{$primaryStyleName}.#{$primaryStyleName}-link.v-disabled,
+.#{$primaryStyleName}.#{$primaryStyleName}-link.v-disabled .#{$primaryStyleName}-wrap {
 	cursor: default;
 	}
 	
-.#{$name}-link .#{$name}-caption {
+.#{$primaryStyleName}-link .#{$primaryStyleName}-caption {
 	line-height: inherit;
 	font-weight: normal;
 	color: #1b699f;
@@ -30,7 +30,7 @@
 	text-shadow: none;
 	}
 	
-.#{$name}-link:focus .#{$name}-caption {
+.#{$primaryStyleName}-link:focus .#{$primaryStyleName}-caption {
 	outline: 1px dotted #1b699f;
 	}
 
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss b/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss
index f4cd726412..238a694e28 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss
@@ -1,30 +1,30 @@
-@mixin reindeer-button-primary-style($name : v-button) {
+@mixin reindeer-button-primary-style($primaryStyleName : v-button) {
 
-.#{$name}-primary:focus {
+.#{$primaryStyleName}-primary:focus {
 	background-image: url(img/primary-left-focus.png); /** sprite-ref: buttons */
 	}
 	
-.#{$name}-primary:focus .#{$name}-wrap {
+.#{$primaryStyleName}-primary:focus .#{$primaryStyleName}-wrap {
 	background-image: url(img/primary-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
 	}
 	
-.#{$name}-primary:active,
-.#{$name}-primary.v-pressed {
+.#{$primaryStyleName}-primary:active,
+.#{$primaryStyleName}-primary.v-pressed {
 	background-image: url(img/primary-left-pressed.png); /** sprite-ref: buttons */
 	}
 
-.#{$name}-primary:active .#{$name}-wrap,
-.#{$name}-primary.v-pressed .#{$name}-wrap {
+.#{$primaryStyleName}-primary:active .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-primary.v-pressed .#{$primaryStyleName}-wrap {
 	background-image: url(img/primary-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
 	}
 
-.#{$name}-primary,
-.v-disabled.#{$name}-primary {
+.#{$primaryStyleName}-primary,
+.v-disabled.#{$primaryStyleName}-primary {
 	background-image: url(img/primary-left.png); /** sprite-ref: buttons */
 	}
 	
-.#{$name}-primary .#{$name}-wrap,
-.v-disabled.#{$name}-primary .#{$name}-wrap {
+.#{$primaryStyleName}-primary .#{$primaryStyleName}-wrap,
+.v-disabled.#{$primaryStyleName}-primary .#{$primaryStyleName}-wrap {
 	background-image: url(img/primary-right.png); /** sprite-ref: buttons; sprite-alignment: right */
 	}
 	
@@ -34,32 +34,32 @@
 /* Black style */
 
 
-.black .#{$name}-primary:focus {
+.black .#{$primaryStyleName}-primary:focus {
 	background-image: url(img/black/primary-left-focus.png); /** sprite-ref: black-buttons */
 	}
 	
-.black .#{$name}-primary:focus .#{$name}-wrap {
+.black .#{$primaryStyleName}-primary:focus .#{$primaryStyleName}-wrap {
 	background-image: url(img/black/primary-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	color: #eaf4fb;
 	}
 	
-.black .#{$name}-primary:active,
-.black .#{$name}-primary.v-pressed {
+.black .#{$primaryStyleName}-primary:active,
+.black .#{$primaryStyleName}-primary.v-pressed {
 	background-image: url(img/black/primary-left-pressed.png); /** sprite-ref: black-buttons */
 	}
 	
-.black .#{$name}-primary:active .#{$name}-wrap,
-.black .#{$name}-primary.v-pressed .#{$name}-wrap {
+.black .#{$primaryStyleName}-primary:active .#{$primaryStyleName}-wrap,
+.black .#{$primaryStyleName}-primary.v-pressed .#{$primaryStyleName}-wrap {
 	background-image: url(img/black/primary-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	}
 
-.black .#{$name}-primary,
-.black .v-disabled.#{$name}-primary {
+.black .#{$primaryStyleName}-primary,
+.black .v-disabled.#{$primaryStyleName}-primary {
 	background-image: url(img/black/primary-left.png); /** sprite-ref: black-buttons */
 	}
 	
-.black .#{$name}-primary .#{$name}-wrap,
-.black .v-disabled.#{$name}-primary .#{$name}-wrap {
+.black .#{$primaryStyleName}-primary .#{$primaryStyleName}-wrap,
+.black .v-disabled.#{$primaryStyleName}-primary .#{$primaryStyleName}-wrap {
 	background-image: url(img/black/primary-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	}
 
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss b/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss
index b141156ac8..5c9e8a32bb 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss
@@ -1,37 +1,37 @@
-@mixin reindeer-button-small-style($name : v-button) {
+@mixin reindeer-button-small-style($primaryStyleName : v-button) {
 
-.#{$name}-small:focus {
+.#{$primaryStyleName}-small:focus {
 	background-image: url(img/small-left-focus.png); /** sprite-ref: buttons */
 	}
 	
-.#{$name}-small:focus .#{$name}-wrap {
+.#{$primaryStyleName}-small:focus .#{$primaryStyleName}-wrap {
 	background-image: url(img/small-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
 	}
 	
-.#{$name}-small:active,
-.#{$name}-small.v-pressed {
+.#{$primaryStyleName}-small:active,
+.#{$primaryStyleName}-small.v-pressed {
 	background-image: url(img/small-left-pressed.png); /** sprite-ref: buttons */
 	}
 
-.#{$name}-small:active .#{$name}-wrap,
-.#{$name}-small.v-pressed .#{$name}-wrap {
+.#{$primaryStyleName}-small:active .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-small.v-pressed .#{$primaryStyleName}-wrap {
 	background-image: url(img/small-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
 	}
 
-.#{$name}-small,
-.v-disabled.#{$name}-small {
+.#{$primaryStyleName}-small,
+.v-disabled.#{$primaryStyleName}-small {
 	background-image: url(img/small-left.png); /** sprite-ref: buttons */
 	height: 20px;
 	}
 	
-.#{$name}-small .#{$name}-wrap,
-.v-disabled.#{$name}-small .#{$name}-wrap {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-wrap,
+.v-disabled.#{$primaryStyleName}-small .#{$primaryStyleName}-wrap {
 	background-image: url(img/small-right.png); /** sprite-ref: buttons; sprite-alignment: right */
 	height: 19px;
 	padding: 1px 14px 0 8px;
 	}
 
-.#{$name}-small .#{$name}-caption {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-caption {
 	font-weight: normal;
 	}
 	
@@ -40,31 +40,31 @@
 
 /* Black style */
 
-.black .#{$name}-small:focus {
+.black .#{$primaryStyleName}-small:focus {
 	background-image: url(img/black/small-left-focus.png); /** sprite-ref: black-buttons */
 	}
 	
-.black .#{$name}-small:focus .#{$name}-wrap {
+.black .#{$primaryStyleName}-small:focus .#{$primaryStyleName}-wrap {
 	background-image: url(img/black/small-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	}
 	
-.black .#{$name}-small:active,
-.black .#{$name}-small.v-pressed {
+.black .#{$primaryStyleName}-small:active,
+.black .#{$primaryStyleName}-small.v-pressed {
 	background-image: url(img/black/small-left-pressed.png); /** sprite-ref: black-buttons */
 	}
 	
-.black .#{$name}-small:active .#{$name}-wrap,
-.black .#{$name}-small.v-pressed .#{$name}-wrap {
+.black .#{$primaryStyleName}-small:active .#{$primaryStyleName}-wrap,
+.black .#{$primaryStyleName}-small.v-pressed .#{$primaryStyleName}-wrap {
 	background-image: url(img/black/small-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	}
 
-.black .#{$name}-small,
-.black .v-disabled.#{$name}-small {
+.black .#{$primaryStyleName}-small,
+.black .v-disabled.#{$primaryStyleName}-small {
 	background-image: url(img/black/small-left.png); /** sprite-ref: black-buttons */
 	}
 	
-.black .#{$name}-small .#{$name}-wrap,
-.black .v-disabled.#{$name}-small .#{$name}-wrap {
+.black .#{$primaryStyleName}-small .#{$primaryStyleName}-wrap,
+.black .v-disabled.#{$primaryStyleName}-small .#{$primaryStyleName}-wrap {
 	background-image: url(img/black/small-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	}
 
diff --git a/WebContent/VAADIN/themes/reindeer/button/button-standard.scss b/WebContent/VAADIN/themes/reindeer/button/button-standard.scss
index f950060d4a..632340f228 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button-standard.scss
+++ b/WebContent/VAADIN/themes/reindeer/button/button-standard.scss
@@ -1,29 +1,29 @@
-@mixin reindeer-button-standard($name : v-button) {
+@mixin reindeer-button-standard($primaryStyleName : v-button) {
 
-.#{$name}:focus {
+.#{$primaryStyleName}:focus {
 	background-image: url(img/left-focus.png); /** sprite-ref: buttons */
 	outline: none;
 	}
 
-.#{$name}:focus .#{$name}-wrap {
+.#{$primaryStyleName}:focus .#{$primaryStyleName}-wrap {
 	background-image: url(img/right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
 	outline: none;
 	}
 
-.#{$name}:active,
-.#{$name}.v-pressed {
+.#{$primaryStyleName}:active,
+.#{$primaryStyleName}.v-pressed {
 	background-image: url(img/left-pressed.png); /** sprite-ref: buttons */
 	outline: none;
 	}
 
-.#{$name}:active .#{$name}-wrap,
-.#{$name}.v-pressed .#{$name}-wrap {
+.#{$primaryStyleName}:active .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}.v-pressed .#{$primaryStyleName}-wrap {
 	background-image: url(img/right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */
 	outline: none;
 	}
 
-.#{$name},
-.v-disabled.#{$name} {
+.#{$primaryStyleName},
+.v-disabled.#{$primaryStyleName} {
 	height: 26px;
 	padding: 0 0 0 6px;
 	background-color: transparent;
@@ -33,8 +33,8 @@
 	cursor: default;
 	}
 
-.#{$name}-wrap,
-.v-disabled.#{$name} .#{$name}-wrap {
+.#{$primaryStyleName}-wrap,
+.v-disabled.#{$primaryStyleName} .#{$primaryStyleName}-wrap {
 	display: block;
 	height: 22px;
 	padding: 4px 15px 0 9px;
@@ -44,7 +44,7 @@
 	background-image: url(img/right.png);  /** sprite-ref: buttons; sprite-alignment: right */
 	}
 
-.#{$name}-caption {
+.#{$primaryStyleName}-caption {
 	color: #222;
 	text-shadow: #fff 0 1px 0;
 	font-weight: bold;
@@ -58,35 +58,35 @@
 /**************************
  * Black style
  **************************/
-.black .#{$name}:focus {
+.black .#{$primaryStyleName}:focus {
 	background-image: url(img/black/left-focus.png); /** sprite-ref: black-buttons */
 	}
 	
-.black .#{$name}:focus .#{$name}-wrap {
+.black .#{$primaryStyleName}:focus .#{$primaryStyleName}-wrap {
 	background-image: url(img/black/right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	}
 	
-.black .#{$name}:active,
-.black .#{$name}.v-pressed {
+.black .#{$primaryStyleName}:active,
+.black .#{$primaryStyleName}.v-pressed {
 	background-image: url(img/black/left-pressed.png); /** sprite-ref: black-buttons */
 	}
 	
-.black .#{$name}:active .#{$name}-wrap,
-.black .#{$name}.v-pressed .#{$name}-wrap {
+.black .#{$primaryStyleName}:active .#{$primaryStyleName}-wrap,
+.black .#{$primaryStyleName}.v-pressed .#{$primaryStyleName}-wrap {
 	background-image: url(img/black/right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	}
 
-.black .#{$name},
-.black .v-disabled.#{$name} {
+.black .#{$primaryStyleName},
+.black .v-disabled.#{$primaryStyleName} {
 	background-image: url(img/black/left.png); /** sprite-ref: black-buttons */
 	}
 	
-.black .#{$name}-wrap,
-.black .v-disabled.#{$name} .#{$name}-wrap {
+.black .#{$primaryStyleName}-wrap,
+.black .v-disabled.#{$primaryStyleName} .#{$primaryStyleName}-wrap {
 	background-image: url(img/black/right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 	}
 	
-.black .#{$name}-caption {
+.black .#{$primaryStyleName}-caption {
 	color: #c9ccce;
 	text-shadow: #121314 0 -1px 0;
 	}
diff --git a/WebContent/VAADIN/themes/reindeer/button/button.scss b/WebContent/VAADIN/themes/reindeer/button/button.scss
index 7b61d1b213..2fd34ef2c8 100644
--- a/WebContent/VAADIN/themes/reindeer/button/button.scss
+++ b/WebContent/VAADIN/themes/reindeer/button/button.scss
@@ -6,7 +6,7 @@
 @import "button-small-style.scss";
 @import "button-link-style.scss";
 
-@mixin reindeer-button($name : v-button) {
+@mixin reindeer-button($primaryStyleName : v-button) {
 	// TODO use $exclude 
 	@include reindeer-button-standard;
 	@include reindeer-button-primary-style;
diff --git a/WebContent/VAADIN/themes/reindeer/button/nativebutton.scss b/WebContent/VAADIN/themes/reindeer/button/nativebutton.scss
index bd6ca35627..ca7a16e88e 100644
--- a/WebContent/VAADIN/themes/reindeer/button/nativebutton.scss
+++ b/WebContent/VAADIN/themes/reindeer/button/nativebutton.scss
@@ -1,9 +1,9 @@
 /* Browser-specific corrections to the standard implementation */
 @import "button-ie.scss";
 
-@mixin reindeer-nativebutton-link($name : v-nativebutton) {
+@mixin reindeer-nativebutton-link($primaryStyleName : v-nativebutton) {
 
-.#{$name}-link .#{$name}-caption {
+.#{$primaryStyleName}-link .#{$primaryStyleName}-caption {
 	line-height: inherit;
 	font-weight: normal;
 	color: #1b699f;
@@ -11,15 +11,15 @@
 	text-shadow: none;
 	}
 	
-.#{$name}-link:focus .#{$name}-caption {
+.#{$primaryStyleName}-link:focus .#{$primaryStyleName}-caption {
 	outline: 1px dotted #1b699f;
 	}
 
 }
 
-@mixin reindeer-nativebutton($name : v-nativebutton) {
-	@include reindeer-nativebutton-link($name);
+@mixin reindeer-nativebutton($primaryStyleName : v-nativebutton) {
+	@include reindeer-nativebutton-link($primaryStyleName);
 	
 	/* Browser-specific corrections to the standard implementation */
-	@include reindeer-button-ie($name);
+	@include reindeer-button-ie($primaryStyleName);
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss
index 74c65ae4eb..0969be3532 100644
--- a/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss
+++ b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss
@@ -1,30 +1,30 @@
-@mixin reindeer-datefield($name : v-datefield) {
+@mixin reindeer-datefield($primaryStyleName : v-datefield) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	overflow: hidden;
 }
 input.v-textfield-readonly:focus{
 	background-color: transparent;	
 }
-.#{$name}-calendarpanel {
+.#{$primaryStyleName}-calendarpanel {
 	border-collapse: collapse;
 	margin: 0;
 	padding: 0;
 	height: auto !important;
 }
-.#{$name}-year .#{$name}-calendarpanel-prevmonth,
-.#{$name}-year .#{$name}-calendarpanel-nextmonth {
+.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-prevmonth,
+.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-nextmonth {
 	display: none;
 }
-.#{$name}-calendarpanel td {
+.#{$primaryStyleName}-calendarpanel td {
 	vertical-align: top;
 }
-td.#{$name}-calendarpanel-month {
+td.#{$primaryStyleName}-calendarpanel-month {
 	height: 23px;
 	background-repeat: repeat-x;
 	background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-span.#{$name}-calendarpanel-month {
+span.#{$primaryStyleName}-calendarpanel-month {
 	display: block;
 	text-align: center;
 	height: 16px;
@@ -35,36 +35,36 @@ span.#{$name}-calendarpanel-month {
 	overflow: hidden;
 	margin-top: 1px;
 }
-.#{$name}-year .#{$name}-calendarpanel-month {
+.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-month {
 	width: 35px;
 }
-.#{$name}-month .#{$name}-calendarpanel-month,
-.#{$name}-day .#{$name}-calendarpanel-month,
-.#{$name}-full .#{$name}-calendarpanel-month {
+.#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-month,
+.#{$primaryStyleName}-day .#{$primaryStyleName}-calendarpanel-month,
+.#{$primaryStyleName}-full .#{$primaryStyleName}-calendarpanel-month {
 	width: 124px;
 }
-.#{$name}-month,
-.#{$name}-day,
-.#{$name}-full {
+.#{$primaryStyleName}-month,
+.#{$primaryStyleName}-day,
+.#{$primaryStyleName}-full {
 	min-width: 240px;
 }
-.#{$name}-popupcalendar {
+.#{$primaryStyleName}-popupcalendar {
 	min-width: 0;
 	padding-right: 24px;
 }
-.#{$name}-year .#{$name}-calendarpanel {
+.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel {
 	width: 100px;
 }
-td.#{$name}-calendarpanel-prevyear {
+td.#{$primaryStyleName}-calendarpanel-prevyear {
 	text-align: right;
 }
-td.#{$name}-calendarpanel-nextyear {
+td.#{$primaryStyleName}-calendarpanel-nextyear {
 	text-align: left;
 }
-.#{$name}-calendarpanel-prevyear button,
-.#{$name}-calendarpanel-nextyear button,
-.#{$name}-calendarpanel-prevmonth button,
-.#{$name}-calendarpanel-nextmonth button {
+.#{$primaryStyleName}-calendarpanel-prevyear button,
+.#{$primaryStyleName}-calendarpanel-nextyear button,
+.#{$primaryStyleName}-calendarpanel-prevmonth button,
+.#{$primaryStyleName}-calendarpanel-nextmonth button {
 	width: 24px;
 	height: 23px;
 	border: none;
@@ -79,33 +79,33 @@ td.#{$name}-calendarpanel-nextyear {
 	-moz-border-radius: 0;
 	border-radius: 0;
 }
-.v-ie .#{$name}-calendarpanel-prevyear button,
-.v-ie .#{$name}-calendarpanel-nextyear button,
-.v-ie .#{$name}-calendarpanel-prevmonth button,
-.v-ie .#{$name}-calendarpanel-nextmonth button {
+.v-ie .#{$primaryStyleName}-calendarpanel-prevyear button,
+.v-ie .#{$primaryStyleName}-calendarpanel-nextyear button,
+.v-ie .#{$primaryStyleName}-calendarpanel-prevmonth button,
+.v-ie .#{$primaryStyleName}-calendarpanel-nextmonth button {
 	text-indent: 0;
 	font-size: 1px;
 }
-.#{$name}-calendarpanel-nextyear button {
+.#{$primaryStyleName}-calendarpanel-nextyear button {
 	background-position: left top;
 	background-image: url(img/year-next.png); /** sprite-ref: verticals */
 }
-.#{$name}-calendarpanel-prevyear button:active,
-.v-ie .#{$name}-calendarpanel-prevyear button.v-pressed {
+.#{$primaryStyleName}-calendarpanel-prevyear button:active,
+.v-ie .#{$primaryStyleName}-calendarpanel-prevyear button.v-pressed {
 	background-image: url(img/year-prev-pressed.png); /** sprite-ref: verticals */
 }
-.#{$name}-calendarpanel-nextyear button:active,
-.v-ie .#{$name}-calendarpanel-nextyear button.v-pressed  {
+.#{$primaryStyleName}-calendarpanel-nextyear button:active,
+.v-ie .#{$primaryStyleName}-calendarpanel-nextyear button.v-pressed  {
 	background-image: url(img/year-next-pressed.png); /** sprite-ref: verticals */
 }
-.#{$name}-calendarpanel-prevmonth,
-.#{$name}-calendarpanel-nextmonth {
+.#{$primaryStyleName}-calendarpanel-prevmonth,
+.#{$primaryStyleName}-calendarpanel-nextmonth {
 	width: 24px;
 	background-repeat: repeat-x;
 	background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.#{$name}-calendarpanel-prevmonth button,
-.#{$name}-calendarpanel-nextmonth button {
+.#{$primaryStyleName}-calendarpanel-prevmonth button,
+.#{$primaryStyleName}-calendarpanel-nextmonth button {
 	width: 100%;
 	height: 21px;
 	border-left: 1px solid #efefef;
@@ -116,36 +116,36 @@ td.#{$name}-calendarpanel-nextyear {
 	min-width: 24px;
 	margin-top: 1px;
 }
-.v-ie .#{$name}-calendarpanel-prevmonth button,
-.v-ie .#{$name}-calendarpanel-nextmonth button {
+.v-ie .#{$primaryStyleName}-calendarpanel-prevmonth button,
+.v-ie .#{$primaryStyleName}-calendarpanel-nextmonth button {
 	border: none;
 }
-.#{$name}-calendarpanel-nextmonth button {
+.#{$primaryStyleName}-calendarpanel-nextmonth button {
 	background-image: url(img/month-next.png); /** sprite-ref: verticals; sprite-alignment: center */
 }
-.#{$name}-calendarpanel-prevmonth button:active,
-.v-ie .#{$name}-calendarpanel-prevmonth button.v-pressed {
+.#{$primaryStyleName}-calendarpanel-prevmonth button:active,
+.v-ie .#{$primaryStyleName}-calendarpanel-prevmonth button.v-pressed {
 	background-position: center top;
 	background-image: url(img/month-prev-pressed.png); /** sprite-ref: verticals; sprite-alignment: center */
 }
-.#{$name}-calendarpanel-nextmonth button:active,
-.v-ie .#{$name}-calendarpanel-nextmonth button.v-pressed {
+.#{$primaryStyleName}-calendarpanel-nextmonth button:active,
+.v-ie .#{$primaryStyleName}-calendarpanel-nextmonth button.v-pressed {
 	background-position: center top;
 	background-image: url(img/month-next-pressed.png); /** sprite-ref: verticals; sprite-alignment: center */
 }
-.#{$name}-calendarpanel-body,
-.#{$name}-calendarpanel-time {
+.#{$primaryStyleName}-calendarpanel-body,
+.#{$primaryStyleName}-calendarpanel-time {
 	text-align: center;
 	vertical-align: top;
 }
-.#{$name}-calendarpanel-body table {
+.#{$primaryStyleName}-calendarpanel-body table {
 	border-collapse: collapse;
 	margin: 0;
 	padding: 0;
 	width: 220px;
 	margin: 0 auto;
 }
-.#{$name}-calendarpanel-weekdays td {
+.#{$primaryStyleName}-calendarpanel-weekdays td {
 	width: 14.2%;
 	overflow: hidden;
 	background-repeat: repeat-x;
@@ -158,57 +158,57 @@ td.#{$name}-calendarpanel-nextyear {
 	vertical-align: top;
 	padding:0;
 }
-.#{$name}-calendarpanel-weeknumbers td {
+.#{$primaryStyleName}-calendarpanel-weeknumbers td {
 	width: 12.4%;
 }
-.#{$name}-calendarpanel-weekdays strong {
+.#{$primaryStyleName}-calendarpanel-weekdays strong {
 	display: block;
 	text-align: right;
 	padding: 1px 5px 0 0;
 	height: 14px;
 	border-top: 1px solid #596775;
 }
-.#{$name}-calendarpanel-weekdays .v-first {
+.#{$primaryStyleName}-calendarpanel-weekdays .v-first {
 	background-repeat: no-repeat;
 	background-image: url(img/weekday-first.png); /** sprite-ref: verticals; sprite-margin-bottom: 3px */
 }
-.#{$name}-calendarpanel-weekdays .v-last {
+.#{$primaryStyleName}-calendarpanel-weekdays .v-last {
 	background-repeat: no-repeat;
 	background-position: right top;
 	background-image: url(img/weekday-last.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-bottom: 3px */
 }
 /* IE fails to position backgrounds inside table element */
-.v-ie .#{$name}-calendarpanel-weekdays td {
+.v-ie .#{$primaryStyleName}-calendarpanel-weekdays td {
 	background: url(img/weekday-bg.png) repeat-x;
 	background-position: left top;
 }
-.v-ie .#{$name}-calendarpanel .v-first {
+.v-ie .#{$primaryStyleName}-calendarpanel .v-first {
 	background: url(img/weekday-first.png) no-repeat;
 }
-.v-ie .#{$name}-calendarpanel .v-last {
+.v-ie .#{$primaryStyleName}-calendarpanel .v-last {
 	background: url(img/weekday-last.png) no-repeat right top;
 }
-.#{$name}-calendarpanel-body td {
+.#{$primaryStyleName}-calendarpanel-body td {
 	text-align: right;
 	height: 19px;
 }
-.#{$name}-calendarpanel-day,
-.#{$name}-calendarpanel-weeknumber,
-.#{$name}-calendarpanel-day-today {
+.#{$primaryStyleName}-calendarpanel-day,
+.#{$primaryStyleName}-calendarpanel-weeknumber,
+.#{$primaryStyleName}-calendarpanel-day-today {
 	padding: 2px 5px 2px 0;
 	display: block;
 	margin: 1px 0 0 5px;
 }
-.#{$name}-calendarpanel-weeknumber {
+.#{$primaryStyleName}-calendarpanel-weeknumber {
 	margin: 0;
 	padding-top: 4px;
 	padding-bottom: 3px;
 }
-.#{$name}-calendarpanel-day-today {
+.#{$primaryStyleName}-calendarpanel-day-today {
 	color: #4095d1;
 	border: none;
 }
-.#{$name}-calendarpanel-day-selected {
+.#{$primaryStyleName}-calendarpanel-day-selected {
 	background: #507ba3;
 	color: #fff;
 	text-shadow: #3b5b79 0 1px 0;
@@ -216,38 +216,38 @@ td.#{$name}-calendarpanel-nextyear {
 	-webkit-border-radius: 2px;
 	-moz-border-radius: 2px;
 }
-.#{$name}-calendarpanel-time select {
+.#{$primaryStyleName}-calendarpanel-time select {
 	padding: 0;
 	font-size: 11px;
 	margin: 2px;
 }
-.#{$name}-popup {
+.#{$primaryStyleName}-popup {
 	background: #f8f8f9;
 	padding: 8px 4px;
 	border-radius: 3px;
 	-webkit-border-radius: 3px;
 	-moz-border-radius: 3px;
 }
-.v-sa .#{$name}-popup,
-.v-op .#{$name}-popup {
+.v-sa .#{$primaryStyleName}-popup,
+.v-op .#{$primaryStyleName}-popup {
 	background: rgba(255,255,255,.95);
 }
-.v-has-width > input.#{$name}-textfield {
+.v-has-width > input.#{$primaryStyleName}-textfield {
 	width: 100%;
 }
-.#{$name}-year > .#{$name}-textfield {
+.#{$primaryStyleName}-year > .#{$primaryStyleName}-textfield {
 	width: 4.5em;
 }
-.#{$name}-month > .#{$name}-textfield {
+.#{$primaryStyleName}-month > .#{$primaryStyleName}-textfield {
 	width: 5.5em;
 }
-.#{$name}-day > .#{$name}-textfield {
+.#{$primaryStyleName}-day > .#{$primaryStyleName}-textfield {
 	width: 6em;
 }
-.#{$name}-full >.#{$name}-textfield {
+.#{$primaryStyleName}-full >.#{$primaryStyleName}-textfield {
 	width: 12.5em;
 }
-.#{$name}-popupcalendar input.#{$name}-textfield {
+.#{$primaryStyleName}-popupcalendar input.#{$primaryStyleName}-textfield {
 	border-right-width: 0;
 	-moz-border-radius-topright: 0;
 	-moz-border-radius-bottomright: 0;
@@ -258,17 +258,17 @@ td.#{$name}-calendarpanel-nextyear {
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-.#{$name}.v-readonly input.#{$name}-textfield {
+.#{$primaryStyleName}.v-readonly input.#{$primaryStyleName}-textfield {
 	border-right-width: 1px;
 	border-radius: 3px;
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
 }
-.#{$name}-prompt .#{$name}-textfield {
+.#{$primaryStyleName}-prompt .#{$primaryStyleName}-textfield {
 	color: #999;
 	font-style: normal;
 }
-.#{$name}-popupcalendar .#{$name}-button {
+.#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button {
 	width: 24px;
 	margin-right: -24px;
 	height: 23px;
@@ -281,15 +281,15 @@ td.#{$name}-calendarpanel-nextyear {
 	-moz-border-radius: 0;
 	border-radius: 0;
 }
-.#{$name}-popupcalendar .#{$name}-button:active {
+.#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button:active {
 	background-image: url(img/popup-btn-pressed.png); /** sprite-ref: verticals */
 }
 
 /* over black background */
-.black .#{$name}-popupcalendar .#{$name}-button {
+.black .#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button {
 	background-image: url(img/popup-btn-black.png); /** sprite-ref: black-verticals */
 }
-.black .#{$name}-popupcalendar .#{$name}-button:active {
+.black .#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button:active {
 	background-image: url(img/popup-btn-black-pressed.png); /** sprite-ref: black-verticals */
 }
 
@@ -298,11 +298,11 @@ td.#{$name}-calendarpanel-nextyear {
 * on black background
 */
 
-.black td.#{$name}-calendarpanel-month {
+.black td.#{$primaryStyleName}-calendarpanel-month {
 	background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
 	height: 21px;
 }
-.black span.#{$name}-calendarpanel-month {
+.black span.#{$primaryStyleName}-calendarpanel-month {
 	border-left: 1px solid #333638;
 	border-right: 1px solid #232527;
 	color: #c9ccce;
@@ -310,65 +310,65 @@ td.#{$name}-calendarpanel-nextyear {
 	padding: 4px 10px 1px 10px;
 	margin-top: 0;
 }
-.black .#{$name}-calendarpanel-prevyear button,
-.black .#{$name}-calendarpanel-nextyear button,
-.black .#{$name}-calendarpanel-prevmonth button,
-.black .#{$name}-calendarpanel-nextmonth button {
+.black .#{$primaryStyleName}-calendarpanel-prevyear button,
+.black .#{$primaryStyleName}-calendarpanel-nextyear button,
+.black .#{$primaryStyleName}-calendarpanel-prevmonth button,
+.black .#{$primaryStyleName}-calendarpanel-nextmonth button {
 	background-image: url(img/year-prev-black.png); /** sprite-ref: black-verticals */
 	height: 21px;
 }
-.black .#{$name}-calendarpanel-nextyear button {
+.black .#{$primaryStyleName}-calendarpanel-nextyear button {
 	background-image: url(img/year-next-black.png); /** sprite-ref: black-verticals */
 }
-.black .#{$name}-calendarpanel-prevyear button:active,
-.v-ie .black .#{$name}-calendarpanel-prevyear button.v-pressed {
+.black .#{$primaryStyleName}-calendarpanel-prevyear button:active,
+.v-ie .black .#{$primaryStyleName}-calendarpanel-prevyear button.v-pressed {
 	background-image: url(img/year-prev-black-pressed.png); /** sprite-ref: black-verticals */
 }
-.black .#{$name}-calendarpanel-nextyear button:active,
-.v-ie .black .#{$name}-calendarpanel-nextyear button.v-pressed  {
+.black .#{$primaryStyleName}-calendarpanel-nextyear button:active,
+.v-ie .black .#{$primaryStyleName}-calendarpanel-nextyear button.v-pressed  {
 	background-image: url(img/year-next-black-pressed.png); /** sprite-ref: black-verticals */
 }
-.black .#{$name}-calendarpanel-prevmonth,
-.black .#{$name}-calendarpanel-nextmonth {
+.black .#{$primaryStyleName}-calendarpanel-prevmonth,
+.black .#{$primaryStyleName}-calendarpanel-nextmonth {
 	background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
 }
-.black .#{$name}-calendarpanel-prevmonth button,
-.black .#{$name}-calendarpanel-nextmonth button {
+.black .#{$primaryStyleName}-calendarpanel-prevmonth button,
+.black .#{$primaryStyleName}-calendarpanel-nextmonth button {
 	border-left: 1px solid #333638;
 	border-right: 1px solid #232527;
 	background-image: url(img/month-prev-black.png); /** sprite-ref: black-verticals; sprite-alignment: center */
 	margin-top: 0;
 }
-.black .#{$name}-calendarpanel-nextmonth button {
+.black .#{$primaryStyleName}-calendarpanel-nextmonth button {
 	background-image: url(img/month-next-black.png); /** sprite-ref: black-verticals; sprite-alignment: center */
 }
-.black .#{$name}-calendarpanel-prevmonth button:active,
-.v-ie .black .#{$name}-calendarpanel-prevmonth button.v-pressed {
+.black .#{$primaryStyleName}-calendarpanel-prevmonth button:active,
+.v-ie .black .#{$primaryStyleName}-calendarpanel-prevmonth button.v-pressed {
 	background-image: url(img/month-prev-black-pressed.png); /** sprite-ref: black-verticals; sprite-alignment: center */
 }
-.black .#{$name}-calendarpanel-nextmonth button:active,
-.v-ie .black .#{$name}-calendarpanel-nextmonth button.v-pressed {
+.black .#{$primaryStyleName}-calendarpanel-nextmonth button:active,
+.v-ie .black .#{$primaryStyleName}-calendarpanel-nextmonth button.v-pressed {
 	background-image: url(img/month-next-black-pressed.png); /** sprite-ref: black-verticals; sprite-alignment: center */
 }
-.v-ie .black .#{$name}-calendarpanel-prevmonth button,
-.v-ie .black .#{$name}-calendarpanel-nextmonth button {
+.v-ie .black .#{$primaryStyleName}-calendarpanel-prevmonth button,
+.v-ie .black .#{$primaryStyleName}-calendarpanel-nextmonth button {
 	border: none;
 }
-.black .#{$name}-calendarpanel-weekdays td {
+.black .#{$primaryStyleName}-calendarpanel-weekdays td {
 	background-image: url(img/weekday-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 3px */
 	color: #0a0b0b;
 	text-shadow: #5a5c5e 0 1px 0;
 }
-.black .#{$name}-calendarpanel-weekdays strong {
+.black .#{$primaryStyleName}-calendarpanel-weekdays strong {
 	border-top-color: #1b1c1d;
 }
-.black .#{$name}-calendarpanel .v-first {
+.black .#{$primaryStyleName}-calendarpanel .v-first {
 	background-image: url(img/weekday-first-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 3px */
 }
-.black .#{$name}-calendarpanel .v-last {
+.black .#{$primaryStyleName}-calendarpanel .v-last {
 	background-image: url(img/weekday-last-black.png); /** sprite-ref: black-verticals; sprite-alignment: right */
 }
-.black .#{$name}-prompt .#{$name}-textfield {
+.black .#{$primaryStyleName}-prompt .#{$primaryStyleName}-textfield {
 	color: #5f6366;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss b/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss
index cecc439b09..51b8a96b60 100644
--- a/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss
+++ b/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss
@@ -1,36 +1,36 @@
-@mixin reindeer-formlayout($name : v-formlayout) {
+@mixin reindeer-formlayout($primaryStyleName : v-formlayout) {
 
-.#{$name}-errorcell {
+.#{$primaryStyleName}-errorcell {
 	width: 13px;
 }
-.#{$name}-cell .v-errorindicator {
+.#{$primaryStyleName}-cell .v-errorindicator {
 	width: 13px;
 	height: 16px;
 	background: transparent url(../common/icons/error.png) no-repeat 50%;
 }
-.#{$name}-captioncell {
+.#{$primaryStyleName}-captioncell {
 	text-align: right;
 	white-space: nowrap;
 }
-.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-captioncell, 
-.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-contentcell,
-.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-errorcell {
+.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-captioncell, 
+.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-contentcell,
+.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-errorcell {
 	padding-top: 8px;
 }
-.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-captioncell, 
-.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-contentcell,
-.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-errorcell {
+.#{$primaryStyleName}-margin-top > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-captioncell, 
+.#{$primaryStyleName}-margin-top > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-contentcell,
+.#{$primaryStyleName}-margin-top > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-errorcell {
 	padding-top: 15px;
 }
-.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-captioncell,
-.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-contentcell,
-.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-errorcell {
+.#{$primaryStyleName}-margin-bottom > tbody > .#{$primaryStyleName}-lastrow > .#{$primaryStyleName}-captioncell,
+.#{$primaryStyleName}-margin-bottom > tbody > .#{$primaryStyleName}-lastrow > .#{$primaryStyleName}-contentcell,
+.#{$primaryStyleName}-margin-bottom > tbody > .#{$primaryStyleName}-lastrow > .#{$primaryStyleName}-errorcell {
 	padding-bottom: 15px;
 }
-.#{$name}-margin-left > tbody > .#{$name}-row > .#{$name}-captioncell {
+.#{$primaryStyleName}-margin-left > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-captioncell {
 	padding-left: 18px;
 } 
-.#{$name}-margin-right > tbody > .#{$name}-row > .#{$name}-contentcell {
+.#{$primaryStyleName}-margin-right > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-contentcell {
 	padding-right: 18px;
 }
 /* form */
diff --git a/WebContent/VAADIN/themes/reindeer/inlinedatefield/inlinedatefield.scss b/WebContent/VAADIN/themes/reindeer/inlinedatefield/inlinedatefield.scss
index 19402f8208..8ad3c1a012 100644
--- a/WebContent/VAADIN/themes/reindeer/inlinedatefield/inlinedatefield.scss
+++ b/WebContent/VAADIN/themes/reindeer/inlinedatefield/inlinedatefield.scss
@@ -1,8 +1,8 @@
-@mixin reindeer-inlinedatefield ($name : v-inline-datefield) {
+@mixin reindeer-inlinedatefield ($primaryStyleName : v-inline-datefield) {
     
     @include reindeer-datefield(v-inline-datefield);
     
-    .#{$name} {
+    .#{$primaryStyleName} {
         line-height:14px; /* Override popup datefields line-height:0 to get correct line heights */
     }        
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/label/label.scss b/WebContent/VAADIN/themes/reindeer/label/label.scss
index 44abf64e36..68b0d58eb0 100644
--- a/WebContent/VAADIN/themes/reindeer/label/label.scss
+++ b/WebContent/VAADIN/themes/reindeer/label/label.scss
@@ -1,6 +1,6 @@
-@mixin reindeer-label($name : v-label) {
+@mixin reindeer-label($primaryStyleName : v-label) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	line-height: 18px;
 }
 
@@ -12,27 +12,27 @@
 	color: #C9CCCE;
 	text-shadow: 0 0 1px #000;
 }
-.black .#{$name}-h1,
-.black .#{$name}-h2,
+.black .#{$primaryStyleName}-h1,
+.black .#{$primaryStyleName}-h2,
 .black .v-caption-h1,
 .black .v-caption-h2,
-.white .black .#{$name}-h1,
-.white .black .#{$name}-h2,
+.white .black .#{$primaryStyleName}-h1,
+.white .black .#{$primaryStyleName}-h2,
 .white .black .v-caption-h1,
 .white .black .v-caption-h2,
-.blue .black .#{$name}-h1,
-.blue .black .#{$name}-h2,
+.blue .black .#{$primaryStyleName}-h1,
+.blue .black .#{$primaryStyleName}-h2,
 .blue .black .v-caption-h1,
 .blue .black .v-caption-h2 {
 	color: #fff;
 	text-shadow: rgba(0,0,0,.8) 0 2px 2px;
 }
-.black .#{$name}-light,
-.white .black .#{$name}-light {
+.black .#{$primaryStyleName}-light,
+.white .black .#{$primaryStyleName}-light {
 	color: #72787c;
 }
-.black .#{$name} hr,
-.white .black .#{$name} hr {
+.black .#{$primaryStyleName} hr,
+.white .black .#{$primaryStyleName} hr {
 	background: #0c0d0e;
 	color: #0c0d0e;
 	border-bottom-color: #292b2e;
@@ -48,23 +48,23 @@
 	color: #222;
 	text-shadow: none;
 }
-.blue .#{$name}-h1,
-.blue .#{$name}-h2,
+.blue .#{$primaryStyleName}-h1,
+.blue .#{$primaryStyleName}-h2,
 .blue .v-caption-h1,
 .blue .v-caption-h2,
-.white .blue .#{$name}-h1,
-.white .blue .#{$name}-h2,
+.white .blue .#{$primaryStyleName}-h1,
+.white .blue .#{$primaryStyleName}-h2,
 .white .blue .v-caption-h1,
 .white .blue .v-caption-h2 {
 	color: #fff;
 	text-shadow: rgba(0,0,0,.3) 0 1px 1px;
 }
-.blue .#{$name}-light,
-.white .blue .#{$name}-light {
+.blue .#{$primaryStyleName}-light,
+.white .blue .#{$primaryStyleName}-light {
 	color: #6e7c83;
 }
-.blue .#{$name} hr,
-.white .blue .#{$name} hr {
+.blue .#{$primaryStyleName} hr,
+.white .blue .#{$primaryStyleName} hr {
 	background: #a3bcc9;
 	color: #a3bcc9;
 	border-bottom-color: #cfe2eb;
@@ -73,12 +73,12 @@
 /**********************
  * Default & white styles
  **********************/
-.#{$name}-h1,
-.#{$name}-h2,
+.#{$primaryStyleName}-h1,
+.#{$primaryStyleName}-h2,
 .v-caption-h1,
 .v-caption-h2,
-.white .#{$name}-h1,
-.white .#{$name}-h2,
+.white .#{$primaryStyleName}-h1,
+.white .#{$primaryStyleName}-h2,
 .white .v-caption-h1,
 .white .v-caption-h2 {
 	font-family: Helvetica, Arial, "Lucida Grande", Geneva, Tahoma, Verdana, sans-serif;
@@ -89,22 +89,22 @@
 	letter-spacing: -0.02em;
 	text-shadow: #fff 0 -1px 1px;
 }
-.#{$name}-h2,
+.#{$primaryStyleName}-h2,
 .v-caption-h2,
-.white .#{$name}-h2,
+.white .#{$primaryStyleName}-h2,
 .white .v-caption-h2 {
 	font-size: 16px;
 	line-height: 22px;
 }
-.#{$name}-light,
-.white .#{$name}-light {
+.#{$primaryStyleName}-light,
+.white .#{$primaryStyleName}-light {
 	font-size: 11px;
 	line-height: 13px;
 	color: #707070;
 }
 
-.#{$name} hr,
-.white .#{$name} hr {
+.#{$primaryStyleName} hr,
+.white .#{$primaryStyleName} hr {
 	height: 2px;
 	overflow: hidden;
 	background: #dcdcdc;
@@ -113,13 +113,13 @@
 	border-bottom: 1px solid #fff;
 }
 
-.v-sa .#{$name} hr,
-.v-ie8 .#{$name} hr {
+.v-sa .#{$primaryStyleName} hr,
+.v-ie8 .#{$primaryStyleName} hr {
 	height: 1px;
 }
 
 /* Labels inside Table don't need a line-height */
-.v-table .#{$name} {
+.v-table .#{$primaryStyleName} {
 	line-height: normal;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/link/link.scss b/WebContent/VAADIN/themes/reindeer/link/link.scss
index 99233dfe39..f1d2a31d83 100644
--- a/WebContent/VAADIN/themes/reindeer/link/link.scss
+++ b/WebContent/VAADIN/themes/reindeer/link/link.scss
@@ -1,12 +1,12 @@
-@mixin reindeer-link($name : v-link) {
+@mixin reindeer-link($primaryStyleName : v-link) {
 
-.#{$name} a:link span {
+.#{$primaryStyleName} a:link span {
 	color: #1b699f;
 }
-.#{$name} a:visited span {
+.#{$primaryStyleName} a:visited span {
 	color: #5c7485;
 }
-.#{$name} a:hover span {
+.#{$primaryStyleName} a:hover span {
 	color: #2483c4;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss b/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss
index 8d81a12a5b..277fb1732d 100644
--- a/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss
+++ b/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss
@@ -1,6 +1,6 @@
-@mixin reindeer-menubar($name : v-menubar) {
+@mixin reindeer-menubar($primaryStyleName : v-menubar) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	height: 23px;
 	background: #323336 repeat-x;
 	background-image: url(img/bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
@@ -8,15 +8,15 @@
 	text-shadow: rgba(0,0,0,.9) 0 1px 0;
 	padding: 0 8px;
 }
-.#{$name} .#{$name}-menuitem {
+.#{$primaryStyleName} .#{$primaryStyleName}-menuitem {
 	padding: 3px 8px;
 	height: 17px;
 	line-height: 16px;
 }
-.#{$name} .#{$name}-menuitem:hover {
+.#{$primaryStyleName} .#{$primaryStyleName}-menuitem:hover {
 	color: #fff;
 }
-.#{$name}-submenu {
+.#{$primaryStyleName}-submenu {
 	background: #f8f8f9;
 	border: none;
 	border-radius: 3px;
@@ -26,50 +26,50 @@
 	overflow: hidden;
 	padding: 4px 0;
 }
-.#{$name}-submenu .#{$name}-menuitem {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem {
 	padding: 1px 26px 1px 10px;
 	line-height: 16px;
 }
-.#{$name}-submenu .#{$name}-menuitem-caption .v-icon { 
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-caption .v-icon { 
 	vertical-align: middle;
 }
-.#{$name} .#{$name}-menuitem-selected,
-.#{$name}-submenu .#{$name}-menuitem-selected {
+.#{$primaryStyleName} .#{$primaryStyleName}-menuitem-selected,
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-selected {
 	background: #4d749f repeat-x;
 	background-image: url(../common/img/sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	color: #fff;
 	text-shadow: 0 1px 0 #3b5a7a;
 }
-.#{$name} .#{$name}-menuitem-selected {
+.#{$primaryStyleName} .#{$primaryStyleName}-menuitem-selected {
 	background-image: url(img/menu-sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px  */
 }
-.#{$name}-submenu .#{$name}-submenu-indicator {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-submenu-indicator {
 	background: transparent url(img/submenu-icon.png) no-repeat right 70%;
 	width: 26px;
 	height: 16px;
 	text-indent: -9999px;
 }
-.#{$name}-submenu .#{$name}-menuitem-selected .#{$name}-submenu-indicator {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-selected .#{$primaryStyleName}-submenu-indicator {
 	background-image: url(img/submenu-icon-hover.png);
 }
 
 /* Checkboxes for checkable/checked menu items */
-.#{$name}-submenu-check-column .#{$name}-menuitem {
+.#{$primaryStyleName}-submenu-check-column .#{$primaryStyleName}-menuitem {
 	padding-left: 6px;
 }
-.#{$name}-submenu-check-column .#{$name}-menuitem-caption {
+.#{$primaryStyleName}-submenu-check-column .#{$primaryStyleName}-menuitem-caption {
 	padding-left: 18px;
 }
-.#{$name}-submenu .#{$name}-menuitem-checked .#{$name}-menuitem-caption { 
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-checked .#{$primaryStyleName}-menuitem-caption { 
 	background: transparent url(img/checked.png) no-repeat left;
 }
-.#{$name}-submenu .#{$name}-menuitem-unchecked .#{$name}-menuitem-caption {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-unchecked .#{$primaryStyleName}-menuitem-caption {
 	background: transparent url(img/unchecked.png) no-repeat left;
 }
-.#{$name}-submenu .#{$name}-menuitem-selected-checked .#{$name}-menuitem-caption { 
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-selected-checked .#{$primaryStyleName}-menuitem-caption { 
 	background: transparent url(img/checked-selected.png) no-repeat left;
 }
-.#{$name}-submenu .#{$name}-menuitem-selected-unchecked .#{$name}-menuitem-caption {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-selected-unchecked .#{$primaryStyleName}-menuitem-caption {
 	background: transparent url(img/unchecked-selected.png) no-repeat left;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/notification/notification.scss b/WebContent/VAADIN/themes/reindeer/notification/notification.scss
index aafff47e96..6eb53dc70a 100644
--- a/WebContent/VAADIN/themes/reindeer/notification/notification.scss
+++ b/WebContent/VAADIN/themes/reindeer/notification/notification.scss
@@ -1,6 +1,6 @@
-@mixin reindeer-notification($name : v-Notification) {
+@mixin reindeer-notification($primaryStyleName : v-Notification) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	color: #fff;
 	border-radius: 4px;
 	-moz-border-radius: 4px;
@@ -10,38 +10,38 @@
 	font-weight: bold;
 }
 
-.v-ie9 .#{$name} H1 {
+.v-ie9 .#{$primaryStyleName} H1 {
 	/* Fix for #6793 */
 	font-weight: bold;
 }
 	
-.#{$name} p {
+.#{$primaryStyleName} p {
 	line-height: 1.3;
 }
-.#{$name}-warning {
+.#{$primaryStyleName}-warning {
 	background: #fdf3b5;
 	color: #ca9a61;
 	border: 3px solid #fee3af;
 }
-.#{$name}-error {
+.#{$primaryStyleName}-error {
 	background: #b40000 url(img/error-close.png) no-repeat right top;
 	border: 3px solid #ca3030;
 }
-.#{$name}-tray {
+.#{$primaryStyleName}-tray {
 	margin: 0 5px 5px 0;
 	background: #3b3c3e;
 	border: 2px solid #585b5c;
 	padding: 0.8em 0.9em;
 }
-.#{$name}-tray h1 {
+.#{$primaryStyleName}-tray h1 {
 	font-size: 14px;
 	line-height: 18px;
 }
-.#{$name}-tray p {
+.#{$primaryStyleName}-tray p {
 	font-size: 12px;
 	font-weight: normal;
 }
-.#{$name}-system {
+.#{$primaryStyleName}-system {
 	background-color: #b40000;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/panel/panel.scss b/WebContent/VAADIN/themes/reindeer/panel/panel.scss
index e692ba90a9..8de6ea7f62 100644
--- a/WebContent/VAADIN/themes/reindeer/panel/panel.scss
+++ b/WebContent/VAADIN/themes/reindeer/panel/panel.scss
@@ -1,58 +1,58 @@
-@mixin reindeer-panel($name : v-panel) {
+@mixin reindeer-panel($primaryStyleName : v-panel) {
 
-.blue .#{$name}-caption,
-.blue .#{$name}-nocaption,
-.blue .#{$name}-content {
+.blue .#{$primaryStyleName}-caption,
+.blue .#{$primaryStyleName}-nocaption,
+.blue .#{$primaryStyleName}-content {
 	border-color: #a8bcc5;
 }
-.#{$name}-caption,
-.#{$name}-nocaption,
-.white .#{$name}-caption,
-.white .#{$name}-nocaption {
+.#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-nocaption,
+.white .#{$primaryStyleName}-caption,
+.white .#{$primaryStyleName}-nocaption {
 	border-bottom: 1px solid #e5e5e5;
 	line-height: 16px; /* accommodate minimum icon size */
 }
-.v-webkit .#{$name}-caption,
-.v-webkit .#{$name}-nocaption,
-.v-gecko .#{$name}-caption,
-.v-gecko .#{$name}-nocaption,
-.v-ie9 .#{$name}-caption,
-.v-ie9 .#{$name}-nocaption {
+.v-webkit .#{$primaryStyleName}-caption,
+.v-webkit .#{$primaryStyleName}-nocaption,
+.v-gecko .#{$primaryStyleName}-caption,
+.v-gecko .#{$primaryStyleName}-nocaption,
+.v-ie9 .#{$primaryStyleName}-caption,
+.v-ie9 .#{$primaryStyleName}-nocaption {
 	border-bottom-color: rgba(0,0,0,.08);
 }
-.#{$name}-caption {
+.#{$primaryStyleName}-caption {
 	padding-bottom: 2px;
 }
-.#{$name}-content,
-.white .#{$name}-content {
+.#{$primaryStyleName}-content,
+.white .#{$primaryStyleName}-content {
 	background: #fff;
 	border: 1px solid #dcdcdc;
 	border-bottom: none;
 	border-top: none;
 }
-.v-webkit .#{$name}-content,
-.v-gecko .#{$name}-content,
-.v-ie9 .#{$name}-content {
+.v-webkit .#{$primaryStyleName}-content,
+.v-gecko .#{$primaryStyleName}-content,
+.v-ie9 .#{$primaryStyleName}-content {
 	border-top-color: rgba(0,0,0,.07);
 }
-.blue .#{$name}-deco {
+.blue .#{$primaryStyleName}-deco {
 	border-color: #92a3ac;
 	background: #adc2cd;
 }
-.#{$name}-deco,
-.white .#{$name}-deco {
+.#{$primaryStyleName}-deco,
+.white .#{$primaryStyleName}-deco {
 	height: 1px;
 	border-top: 1px solid #bebebe;
 	background: #e2e2e2;
 	overflow: hidden;
 }
-.v-webkit .#{$name}-deco,
-.v-gecko .#{$name}-deco,
-.v-ie9 .#{$name}-deco {
+.v-webkit .#{$primaryStyleName}-deco,
+.v-gecko .#{$primaryStyleName}-deco,
+.v-ie9 .#{$primaryStyleName}-deco {
 	border-top-color: rgba(0,0,0,.1);
 	background: rgba(0,0,0,.08);
 }
-.#{$name}-caption .v-errorindicator {
+.#{$primaryStyleName}-caption .v-errorindicator {
 	height: 16px;
 	width: 13px;
 	background: url(../common/icons/error.png) no-repeat 50%;
@@ -62,15 +62,15 @@
 }
 
 /* Light style */
-.#{$name}-light .#{$name}-caption-light,
-.#{$name}-light .#{$name}-nocaption-light {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-caption-light,
+.#{$primaryStyleName}-light .#{$primaryStyleName}-nocaption-light {
 	border: none;
 }
-.#{$name}-light .#{$name}-content-light {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-content-light {
 	border: none;
 	background: transparent;
 }
-.#{$name}-light .#{$name}-deco-light {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-deco-light {
 	height: 0;
 	border: none;
 }
diff --git a/WebContent/VAADIN/themes/reindeer/popupview/popupview.scss b/WebContent/VAADIN/themes/reindeer/popupview/popupview.scss
index f30f059bef..a6e7ad9843 100644
--- a/WebContent/VAADIN/themes/reindeer/popupview/popupview.scss
+++ b/WebContent/VAADIN/themes/reindeer/popupview/popupview.scss
@@ -1,12 +1,12 @@
-@mixin reindeer-popupview($name : v-popupview) {
+@mixin reindeer-popupview($primaryStyleName : v-popupview) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	color: #1b699f;
 }
-.#{$name}:hover {
+.#{$primaryStyleName}:hover {
 	color: #2483c4;
 }
-.#{$name}-popup {
+.#{$primaryStyleName}-popup {
 	background: #fff;
 	padding: 3px;
 }
diff --git a/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss b/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss
index 62be029670..52e4239752 100644
--- a/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss
+++ b/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss
@@ -1,13 +1,13 @@
-@mixin reindeer-progressindicator($name : v-progressindicator) {
+@mixin reindeer-progressindicator($primaryStyleName : v-progressindicator) {
 
-.#{$name}-wrapper {
+.#{$primaryStyleName}-wrapper {
 	background: #dfe2e4 url(img/base.gif) repeat-x;
 	border: 1px solid #bfbfbf;
 }
-.v-disabled .#{$name}-wrapper {
+.v-disabled .#{$primaryStyleName}-wrapper {
 	background-image: url(img/disabled.gif);
 }
-.#{$name}-indicator {
+.#{$primaryStyleName}-indicator {
 	background: #f7f9f9 url(img/progress.png);
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/select/select.scss b/WebContent/VAADIN/themes/reindeer/select/select.scss
index 3ab415f813..1785a367e6 100644
--- a/WebContent/VAADIN/themes/reindeer/select/select.scss
+++ b/WebContent/VAADIN/themes/reindeer/select/select.scss
@@ -1,42 +1,42 @@
-@mixin reindeer-select($name : v-filterselect) {
+@mixin reindeer-select($primaryStyleName : v-filterselect) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	height: 24px;
 	background-repeat: no-repeat;
 	background-image: url(img/left.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */
 	padding-left: 2px;
 	padding-right: 25px; /* Space for the button */
 }
-&.v-app .#{$name}-input,
-.v-window .#{$name}-input,
-.v-popupview-popup .#{$name}-input {
+&.v-app .#{$primaryStyleName}-input,
+.v-window .#{$primaryStyleName}-input,
+.v-popupview-popup .#{$primaryStyleName}-input {
 	background: transparent repeat-x;
 	background-image: url(img/center.png); /** sprite-ref: verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */
 	border: none;
 	height: 24px;
 }
 /* More specific selector to override padding */
-&.v-app input.#{$name}-input,
-.v-window input.#{$name}-input,
-.v-popupview-popup input.#{$name}-input {
+&.v-app input.#{$primaryStyleName}-input,
+.v-window input.#{$primaryStyleName}-input,
+.v-popupview-popup input.#{$primaryStyleName}-input {
 	padding: 4px 0 4px 2px;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-.#{$name}-prompt .#{$name}-input {
+.#{$primaryStyleName}-prompt .#{$primaryStyleName}-input {
 	font-style: normal;
 }
-.#{$name}-input:focus {
+.#{$primaryStyleName}-input:focus {
 	outline: none;
 }
-.#{$name}-focus {
+.#{$primaryStyleName}-focus {
 	background-image: url(img/left-focus.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */
 }
-.#{$name}-focus .#{$name}-input {
+.#{$primaryStyleName}-focus .#{$primaryStyleName}-input {
 	background-image: url(img/center-focus.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.#{$name}-button {
+.#{$primaryStyleName}-button {
 	overflow: hidden;
 	width: 25px;
 	height: 24px;
@@ -45,26 +45,26 @@
 	cursor: default;
 	margin-right: -25px;
 }
-.#{$name}-button:hover {
+.#{$primaryStyleName}-button:hover {
 	background-image: url(img/right-hover.png); /** sprite-ref: verticals */
 }
-.#{$name}-button:active {
+.#{$primaryStyleName}-button:active {
 	background-image: url(img/right-pressed.png); /** sprite-ref: verticals */
 }
-.#{$name}-focus .#{$name}-button {
+.#{$primaryStyleName}-focus .#{$primaryStyleName}-button {
 	background-image: url(img/right-focus.png); /** sprite-ref: verticals */
 }
-.#{$name}-focus .#{$name}-button:hover {
+.#{$primaryStyleName}-focus .#{$primaryStyleName}-button:hover {
 	background-image: url(img/right-focus-hover.png); /** sprite-ref: verticals */
 }
-.#{$name}-focus .#{$name}-button:active {
+.#{$primaryStyleName}-focus .#{$primaryStyleName}-button:active {
 	background-image: url(img/right-focus-pressed.png); /** sprite-ref: verticals */
 }
-.v-disabled .#{$name}-button:hover,
-.v-readonly .#{$name}-button:hover {
+.v-disabled .#{$primaryStyleName}-button:hover,
+.v-readonly .#{$primaryStyleName}-button:hover {
 	background-image: url(img/right.png); /** sprite-ref: verticals */
 }
-.#{$name}-suggestpopup {
+.#{$primaryStyleName}-suggestpopup {
 	background: #f8f8f9;
 	border: none;
 	border-radius: 3px;
@@ -73,10 +73,10 @@
 	-o-border-radius: 3px;
 	overflow: hidden;
 }
-.#{$name}-suggestmenu {
+.#{$primaryStyleName}-suggestmenu {
 	margin: 4px 0;
 }
-.#{$name}-suggestmenu .gwt-MenuItem {
+.#{$primaryStyleName}-suggestmenu .gwt-MenuItem {
 	padding: 1px 8px;
 	height: 16px;
 	user-select: none;
@@ -84,53 +84,53 @@
 	-webkit-user-select: none;
 	cursor: default;
 }
-.v-ff .#{$name}-suggestmenu .gwt-MenuItem {
+.v-ff .#{$primaryStyleName}-suggestmenu .gwt-MenuItem {
 	height: 18px;
 }
-.#{$name}-suggestmenu .gwt-MenuItem .v-icon {
+.#{$primaryStyleName}-suggestmenu .gwt-MenuItem .v-icon {
 	margin-right: 3px;
 }
-.#{$name}-suggestmenu .gwt-MenuItem-selected {
+.#{$primaryStyleName}-suggestmenu .gwt-MenuItem-selected {
 	background: transparent repeat-x;
 	background-image: url(../common/img/sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	color: #fff;
 	text-shadow: #3b5a7a 0 1px 0;
 }
-.#{$name}-nextpage,
-.#{$name}-nextpage-off,
-.#{$name}-prevpage-off,
-.#{$name}-prevpage {
+.#{$primaryStyleName}-nextpage,
+.#{$primaryStyleName}-nextpage-off,
+.#{$primaryStyleName}-prevpage-off,
+.#{$primaryStyleName}-prevpage {
 	height: 11px;
 	width: 100%;
 	background: transparent;
 	margin-bottom: -4px;
 }
-.#{$name}-nextpage,
-.#{$name}-nextpage-off {
+.#{$primaryStyleName}-nextpage,
+.#{$primaryStyleName}-nextpage-off {
 	margin: -4px 0 0;
 }
-.#{$name}-nextpage:hover {
+.#{$primaryStyleName}-nextpage:hover {
 	background-repeat: repeat-x;
 	background-image: url(img/page-down-hover.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.#{$name}-prevpage:hover {
+.#{$primaryStyleName}-prevpage:hover {
 	background-repeat: repeat-x;
 	background-image: url(img/page-up-hover.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.#{$name}-nextpage:active {
+.#{$primaryStyleName}-nextpage:active {
 	background-repeat: repeat-x;
 	background-image: url(img/page-down-pressed.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.#{$name}-prevpage:active {
+.#{$primaryStyleName}-prevpage:active {
 	background-repeat: repeat-x;
 	background-image: url(img/page-up-pressed.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.#{$name}-nextpage-off span,
-.#{$name}-prevpage-off span {
+.#{$primaryStyleName}-nextpage-off span,
+.#{$primaryStyleName}-prevpage-off span {
 	display: none;
 }
-.#{$name}-nextpage span,
-.#{$name}-prevpage span {
+.#{$primaryStyleName}-nextpage span,
+.#{$primaryStyleName}-prevpage span {
 	display: block;
 	height: 11px;
 	width: 100%;
@@ -142,16 +142,16 @@
 	-moz-user-select: none;
 	-webkit-user-select: none;
 }
-.#{$name}-prevpage span {
+.#{$primaryStyleName}-prevpage span {
 	background-image: url(img/arrow-up.png); /** sprite-ref: verticals; sprite-margin-top: 3px; sprite-margin-bottom: 3px; sprite-alignment: center */
 }
-.#{$name}-nextpage:hover span {
+.#{$primaryStyleName}-nextpage:hover span {
 	background-image: url(img/arrow-down-hover.png); /** sprite-ref: verticals; sprite-margin-top: 3px; sprite-margin-bottom: 3px; sprite-alignment: center */
 }
-.#{$name}-prevpage:hover span {
+.#{$primaryStyleName}-prevpage:hover span {
 	background-image: url(img/arrow-up-hover.png); /** sprite-ref: verticals; sprite-margin-top: 3px; sprite-margin-bottom: 3px; sprite-alignment: center */
 }
-.#{$name}-status {
+.#{$primaryStyleName}-status {
 	text-shadow: #e9eaeb 0 1px 0;
 	font-size: 11px;
 	line-height: normal;
@@ -170,36 +170,36 @@
 	-webkit-user-select: none;
 }
 /* IE fails to position background images properly inside table elements */
-.v-ie .#{$name}-suggestmenu .gwt-MenuItem-selected {
+.v-ie .#{$primaryStyleName}-suggestmenu .gwt-MenuItem-selected {
 	background: transparent url(../common/img/sel-bg.png) repeat-x;
 }
-.v-ie .#{$name}-nextpage:hover {
+.v-ie .#{$primaryStyleName}-nextpage:hover {
 	background: transparent url(img/page-down-hover.png) repeat-x;
 }
-.v-ie .#{$name}-prevpage:hover {
+.v-ie .#{$primaryStyleName}-prevpage:hover {
 	background: transparent url(img/page-up-hover.png) repeat-x;
 }
-.v-ie .#{$name}-prevpage span {
+.v-ie .#{$primaryStyleName}-prevpage span {
 	background: transparent url(img/arrow-up.png) no-repeat center 3px;
 }
-.v-ie .#{$name}-nextpage span {
+.v-ie .#{$primaryStyleName}-nextpage span {
 	background: transparent url(img/arrow-down.png) no-repeat center 3px;
 }
-.v-ie .#{$name}-prevpage:hover span {
+.v-ie .#{$primaryStyleName}-prevpage:hover span {
 	background: transparent url(img/arrow-up-hover.png) no-repeat center 3px;
 }
-.v-ie .#{$name}-nextpage:hover span {
+.v-ie .#{$primaryStyleName}-nextpage:hover span {
 	background: transparent url(img/arrow-down-hover.png) no-repeat center 3px;
 }
-.v-ie .#{$name}-status {
+.v-ie .#{$primaryStyleName}-status {
 	background: transparent url(img/status-bg.png) repeat-x;
 }
 /* Filterselect with icon needs a similar fix than in buttons */
-.#{$name} .v-icon {
+.#{$primaryStyleName} .v-icon {
 	width: 16px;
 	position: relative;
 }
-.#{$name} .v-icon + .#{$name}-input {
+.#{$primaryStyleName} .v-icon + .#{$primaryStyleName}-input {
 	margin-left: -16px;
 	padding-left: 18px;
 }
@@ -208,45 +208,45 @@
 
 
 /* Combobox on black background */
-.black .#{$name} {
+.black .#{$primaryStyleName} {
 	background-image: url(img/black/left-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-&.v-app .black .#{$name}-input,
-.v-window .black .#{$name}-input,
-.v-window-black .#{$name}-input,
-.v-popupview-popup .black .#{$name}-input {
+&.v-app .black .#{$primaryStyleName}-input,
+.v-window .black .#{$primaryStyleName}-input,
+.v-window-black .#{$primaryStyleName}-input,
+.v-popupview-popup .black .#{$primaryStyleName}-input {
 	color: #c9ccce;
 	background-image: url(img/black/center-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */
 }
-.black .#{$name}-focus {
+.black .#{$primaryStyleName}-focus {
 	background-image: url(img/black/left-black-focus.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.black .#{$name}-focus .#{$name}-input {
+.black .#{$primaryStyleName}-focus .#{$primaryStyleName}-input {
 	background-image: url(img/black/center-black-focus.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */
 }
-.black .#{$name}-button {
+.black .#{$primaryStyleName}-button {
 	background-image: url(img/black/right-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.black .#{$name}-button:hover {
+.black .#{$primaryStyleName}-button:hover {
 	background-image: url(img/black/right-black-hover.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.black .#{$name}-button:active {
+.black .#{$primaryStyleName}-button:active {
 	background-image: url(img/black/right-black-pressed.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.black .#{$name}-focus .#{$name}-button {
+.black .#{$primaryStyleName}-focus .#{$primaryStyleName}-button {
 	background-image: url(img/black/right-black-focus.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.black .#{$name}-focus .#{$name}-button:hover {
+.black .#{$primaryStyleName}-focus .#{$primaryStyleName}-button:hover {
 	background-image: url(img/black/right-black-focus-hover.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.black .#{$name}-focus .#{$name}-button:active {
+.black .#{$primaryStyleName}-focus .#{$primaryStyleName}-button:active {
 	background-image: url(img/black/right-black-focus-pressed.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.black .v-disabled .#{$name}-button:hover,
-.black .v-readonly .#{$name}-button:hover {
+.black .v-disabled .#{$primaryStyleName}-button:hover,
+.black .v-readonly .#{$primaryStyleName}-button:hover {
 	background-image: url(img/black/right-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */
 }
-.black .#{$name}-prompt .#{$name}-input {
+.black .#{$primaryStyleName}-prompt .#{$primaryStyleName}-input {
 	color: #5f6366;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/slider/slider.scss b/WebContent/VAADIN/themes/reindeer/slider/slider.scss
index 725f717543..ed286d7c68 100644
--- a/WebContent/VAADIN/themes/reindeer/slider/slider.scss
+++ b/WebContent/VAADIN/themes/reindeer/slider/slider.scss
@@ -1,42 +1,42 @@
-@mixin reindeer-slider($name : v-slider) {
+@mixin reindeer-slider($primaryStyleName : v-slider) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	border-top: 1px solid #9a9c9e;
 	border-bottom: 1px solid #bdbfc1;
 	margin: 4px 0;
 }
-.#{$name}-base {
+.#{$primaryStyleName}-base {
 	height: 1px;
 	background: #e0e2e2;
 	border-top: 1px solid #adb0b1;
 	border-left: 1px solid #a0a3a6;
 	border-right: 1px solid #a0a3a6;
 }
-.#{$name}-handle {
+.#{$primaryStyleName}-handle {
 	background: transparent;
 	background-image: url(img/knob.png); /** sprite-ref: verticals */
 	width: 10px;
 	height: 10px;
 	margin-top: -5px;
 }
-.#{$name}-handle-active {
+.#{$primaryStyleName}-handle-active {
 	background-image: url(img/knob-pressed.png); /** sprite-ref: verticals */
 }
-.#{$name}-vertical {
+.#{$primaryStyleName}-vertical {
 	width: 2px;
 	margin: 0 5px;
 	border: none;
 	border-left: 1px solid #9a9c9e;
 	border-right: 1px solid #bdbfc1;
 }
-.#{$name}-vertical .#{$name}-base {
+.#{$primaryStyleName}-vertical .#{$primaryStyleName}-base {
 	width: 2px;
 	border-left: 1px solid #adb0b1;
 	border-right: none;
 	border-top: 1px solid #adb0b1;
 	border-bottom: 1px solid #adb0b1;	
 }
-.#{$name}-vertical .#{$name}-handle {
+.#{$primaryStyleName}-vertical .#{$primaryStyleName}-handle {
 	width: 10px;
 	height: 10px;
 	margin-left: -5px;
diff --git a/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss b/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss
index c837688387..2e612e2e21 100644
--- a/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss
+++ b/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss
@@ -1,12 +1,12 @@
-@mixin reindeer-splitpanel($name : v-splitpanel) {
+@mixin reindeer-splitpanel($primaryStyleName : v-splitpanel) {
 
-.#{$name}-hsplitter,
-.#{$name}-hsplitter-locked {
+.#{$primaryStyleName}-hsplitter,
+.#{$primaryStyleName}-hsplitter-locked {
 	width: 7px;
 	background-repeat: repeat-y;
 	background-image: url(img/hor-bg.png); /** sprite-ref: horizontals; sprite-alignment: repeat */
 }
-.#{$name}-hsplitter div {
+.#{$primaryStyleName}-hsplitter div {
 	width: 7px;
 	height: 100%; /* for Opera */
 	background: transparent;
@@ -14,13 +14,13 @@
 	background-position: 50%;
 	background-image: url(img/hor-handle.png); /** sprite-ref: horizontals; sprite-alignment: center */
 }
-.#{$name}-vsplitter,
-.#{$name}-vsplitter-locked {
+.#{$primaryStyleName}-vsplitter,
+.#{$primaryStyleName}-vsplitter-locked {
 	height: 7px;
 	background-repeat: repeat-x;
 	background-image: url(img/ver-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.#{$name}-vsplitter div {
+.#{$primaryStyleName}-vsplitter div {
 	height: 7px;
 	background: transparent;
 	background-repeat: no-repeat;
@@ -30,38 +30,38 @@
 
 
 /* Splitpanels on blue background */
-.blue .#{$name}-hsplitter-small,
-.blue .#{$name}-hsplitter-small-locked {
+.blue .#{$primaryStyleName}-hsplitter-small,
+.blue .#{$primaryStyleName}-hsplitter-small-locked {
 	background: #7c8a91;
 }
 
 /* Splitpanels on black background */
-.black .#{$name}-hsplitter-small,
-.black .#{$name}-hsplitter-small-locked {
+.black .#{$primaryStyleName}-hsplitter-small,
+.black .#{$primaryStyleName}-hsplitter-small-locked {
 	background: #4e5253;
 }
 
 /* Small style */
-.#{$name}-hsplitter-small,
-.#{$name}-hsplitter-small-locked,
-.white .#{$name}-hsplitter-small,
-.white .#{$name}-hsplitter-small-locked {
+.#{$primaryStyleName}-hsplitter-small,
+.#{$primaryStyleName}-hsplitter-small-locked,
+.white .#{$primaryStyleName}-hsplitter-small,
+.white .#{$primaryStyleName}-hsplitter-small-locked {
 	width: 1px;
 	background: #949698;
 }
-.#{$name}-vsplitter-small,
-.#{$name}-vsplitter-small-locked,
-.white .#{$name}-vsplitter-small,
-.white .#{$name}-vsplitter-small-locked {
+.#{$primaryStyleName}-vsplitter-small,
+.#{$primaryStyleName}-vsplitter-small-locked,
+.white .#{$primaryStyleName}-vsplitter-small,
+.white .#{$primaryStyleName}-vsplitter-small-locked {
 	height: 1px;
 	background: #949698;
 }
-.#{$name}-hsplitter-small div {
+.#{$primaryStyleName}-hsplitter-small div {
 	width: 5px;
 	margin-left: -2px;
 	background: transparent;
 }
-.#{$name}-vsplitter-small div {
+.#{$primaryStyleName}-vsplitter-small div {
 	height: 5px;
 	margin-top: -2px;
 	background: transparent;
diff --git a/WebContent/VAADIN/themes/reindeer/table/table.scss b/WebContent/VAADIN/themes/reindeer/table/table.scss
index a26b4f616b..c2ada54e34 100644
--- a/WebContent/VAADIN/themes/reindeer/table/table.scss
+++ b/WebContent/VAADIN/themes/reindeer/table/table.scss
@@ -1,20 +1,20 @@
-@mixin reindeer-table($name : v-table) {
+@mixin reindeer-table($primaryStyleName : v-table) {
 
 /* Table on blue background */
-.blue .#{$name}-header-wrap {
+.blue .#{$primaryStyleName}-header-wrap {
 	border-color: #92a2aa;
 }
-.blue .#{$name}-body {
+.blue .#{$primaryStyleName}-body {
 	border-color: #92a2aa;
 	border-top-color: #c2c3c4;
 }
 
 /* Default & white style */
-.#{$name}-header-wrap,
-.white .#{$name}-header-wrap,
-.#{$name}-footer-wrap,
-.white .#{$name}-footer-wrap,
-.#{$name}-header-drag {
+.#{$primaryStyleName}-header-wrap,
+.white .#{$primaryStyleName}-header-wrap,
+.#{$primaryStyleName}-footer-wrap,
+.white .#{$primaryStyleName}-footer-wrap,
+.#{$primaryStyleName}-header-drag {
 	border-color: #c2c3c4;
 	background: transparent repeat-x;
 	background-image: url(img/header-bg-light.png); /** sprite-ref: verticals; sprite-alignment: repeat */
@@ -27,85 +27,85 @@
 	line-height: normal;
 }
 
-.#{$name}-footer-wrap,
-.white .#{$name}-footer-wrap {
+.#{$primaryStyleName}-footer-wrap,
+.white .#{$primaryStyleName}-footer-wrap {
 	text-transform: none;
 	font-size: 12px;
 	font-weight: normal;
 }
 
-.#{$name}-footer td,
-.white .#{$name}-footer td {
+.#{$primaryStyleName}-footer td,
+.white .#{$primaryStyleName}-footer td {
 	border-color: #c2c3c4;
 }
 
-.#{$name}-footer-container {
+.#{$primaryStyleName}-footer-container {
 	padding-right: 7px;
 }
 
 
-.#{$name}-header,
-.#{$name}-footer,
-.#{$name}-footer table {
+.#{$primaryStyleName}-header,
+.#{$primaryStyleName}-footer,
+.#{$primaryStyleName}-footer table {
 	height: 20px;
 }
 
-.#{$name}-caption-container,
-.#{$name}-header-drag {
+.#{$primaryStyleName}-caption-container,
+.#{$primaryStyleName}-header-drag {
 	padding-top: 4px;
 	padding-right: 4px;
 }
-.#{$name}-caption-container .v-icon,
-.#{$name}-header-drag .v-icon {
+.#{$primaryStyleName}-caption-container .v-icon,
+.#{$primaryStyleName}-header-drag .v-icon {
 	height: 16px;
 	margin: -4px 3px 0 0;
 	vertical-align: middle;
 }
-.v-ie .#{$name}-caption-container .v-icon,
-.v-ie .#{$name}-header-drag .v-icon {
+.v-ie .#{$primaryStyleName}-caption-container .v-icon,
+.v-ie .#{$primaryStyleName}-header-drag .v-icon {
 	margin-top: -3px;
 }
-.#{$name}-resizer {
+.#{$primaryStyleName}-resizer {
 	height: 20px;
 	width: 2px;
 	background: transparent;
 	border-right: 1px solid #c2c3c4;
 }
 
-.#{$name}-sort-indicator {
+.#{$primaryStyleName}-sort-indicator {
 	background: transparent;
 	width: 0px;
 	height: 20px;
 }
 
-.#{$name}-header-cell-asc .#{$name}-sort-indicator {
+.#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator {
 	background: transparent no-repeat right 7px;
 	background-image: url(img/asc-light.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 	width: 16px;
 }
-.#{$name}-header-cell-desc .#{$name}-sort-indicator {
+.#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator {
 	background: transparent no-repeat right 7px;
 	background-image: url(img/desc-light.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 	width: 16px;
 }
-.#{$name}-body,
-.white .#{$name}-body {
+.#{$primaryStyleName}-body,
+.white .#{$primaryStyleName}-body {
 	border-color: #c2c3c4;
 	background: #fff;
 }
-.#{$name}-cell-content {
+.#{$primaryStyleName}-cell-content {
 	padding-top: 0;
 	border-right-color: #d3d4d5;
 	vertical-align: top;
 }
-.#{$name}-cell-wrapper {
+.#{$primaryStyleName}-cell-wrapper {
 	padding-top: 3px;
 	padding-bottom: 3px;
 }
-.#{$name}-row-odd {
+.#{$primaryStyleName}-row-odd {
 	background: #eff0f1;
 }
-.#{$name}-generated-row {
+.#{$primaryStyleName}-generated-row {
     background: #dcdee0;
     text-transform: uppercase;
     font-size: 10px;
@@ -114,55 +114,55 @@
     text-shadow: #f3f5f8 0 1px 0;
     line-height: normal;
 }
-.#{$name}-generated-row .#{$name}-cell-wrapper {
+.#{$primaryStyleName}-generated-row .#{$primaryStyleName}-cell-wrapper {
     padding-top: 4px;
     padding-bottom: 5px;
 }
-.#{$name}-cell-content:last-child {
+.#{$primaryStyleName}-cell-content:last-child {
 	border-right-color: transparent;
 }
-.#{$name} .v-selected,
-.black .#{$name} .v-selected {
+.#{$primaryStyleName} .v-selected,
+.black .#{$primaryStyleName} .v-selected {
 	background: #4d749f url(../common/img/sel-bg.png) repeat-x; /* We can't include this in the sprite, since we don't know the row height */
 	color: #fff;
 	text-shadow: #3b5a7a 0 1px 0;
 }
-.#{$name} .v-selected .#{$name}-cell-content {
+.#{$primaryStyleName} .v-selected .#{$primaryStyleName}-cell-content {
 	border-right-color: #466c90;
 }
-.#{$name}-column-selector {
+.#{$primaryStyleName}-column-selector {
 	width: 16px;
 	height: 20px;
 	margin-top: -20px;
 	background: transparent no-repeat;
 	background-image: url(img/col-sel-light.png); /** sprite-ref: verticals */
 }
-.#{$name}-column-selector:active {
+.#{$primaryStyleName}-column-selector:active {
 	background-image: url(img/col-sel-light-pressed.png); /** sprite-ref: verticals */
 }
-.#{$name}-focus-slot-left {
+.#{$primaryStyleName}-focus-slot-left {
 	border-left: 1px solid #222;
 	margin-bottom: -20px;
 	width: auto;
 }
-.#{$name}-focus-slot-right {
+.#{$primaryStyleName}-focus-slot-right {
 	border-right-color: #222;
 	margin-right: 0;
 }
-.#{$name}-header-drag {
+.#{$primaryStyleName}-header-drag {
 	padding-left: 6px;
 	height: 16px;
 }
-.#{$name}-header-drag img {
+.#{$primaryStyleName}-header-drag img {
 	height: 16px;
 	margin: -3px 3px 0 0;
 }
-.#{$name}-scrollposition {
+.#{$primaryStyleName}-scrollposition {
 	width: auto;
 	background: transparent;
 	border: none;
 }
-.#{$name}-scrollposition span {
+.#{$primaryStyleName}-scrollposition span {
 	background: transparent repeat-x;
 	background-image: url(img/scroll-indic-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	border: 1px solid #939494;
@@ -183,7 +183,7 @@
 	-webkit-box-shadow: rgba(0,0,0,.5) 0 1px 2px;
 	-moz-box-shadow: rgba(0,0,0,.5) 0 1px 2px;
 }
-.#{$name}-borderless .#{$name}-scrollposition span {
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-scrollposition span {
 	top: 0;
 }
 /* row in column selector */
@@ -206,87 +206,87 @@
 
 
 /* Strong style */
-.#{$name}-strong .#{$name}-header-wrap,
-.#{$name}-strong .#{$name}-header-drag {
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-header-wrap,
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-header-drag {
 	border-color: #2b3033;
 	border-top-color: #2b3033;
 	background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	color: #e7e9ea;
 	text-shadow: #000 0 -1px 0;
 }
-.#{$name}-strong .#{$name}-body {
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-body {
 	border-top-color: #2b3033;
 }
-.#{$name}-strong .#{$name}-resizer {
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-resizer {
 	border-right-color: #1c1f21;
 }
-.#{$name}-strong .#{$name}-header-cell-asc .#{$name}-sort-indicator {
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator {
 	background-image: url(img/asc.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 }
-.#{$name}-strong .#{$name}-header-cell-desc .#{$name}-sort-indicator {
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator {
 	background-image: url(img/desc.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 }
-.#{$name}-strong .#{$name}-column-selector {
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-column-selector {
 	background-image: url(img/col-sel.png); /** sprite-ref: verticals */
 }
-.#{$name}-strong .#{$name}-column-selector:active {
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-column-selector:active {
 	background-image: url(img/col-sel-pressed.png); /** sprite-ref: verticals */
 }
-.#{$name}-strong .#{$name}-focus-slot-left,
-.#{$name}-strong .#{$name}-focus-slot-right {
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-focus-slot-left,
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-focus-slot-right {
 	border-color: #9ca1a5;
 }
 
 
 /* Table on black background (normal style) */
-.black .#{$name}-header-wrap,
-.black .#{$name}-header-drag {
+.black .#{$primaryStyleName}-header-wrap,
+.black .#{$primaryStyleName}-header-drag {
 	border-color: #252729;
 	background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
 	color: #e7eaee;
 	text-shadow: #000 0 -1px 0;
 }
-.black .#{$name}-resizer {
+.black .#{$primaryStyleName}-resizer {
 	border-right-color: #252729;
 }
-.black .#{$name}-header-cell-asc .#{$name}-sort-indicator {
+.black .#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator {
 	background-image: url(img/asc.png); /** sprite-ref: black-verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 }
-.black .#{$name}-header-cell-desc .#{$name}-sort-indicator {
+.black .#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator {
 	background-image: url(img/desc.png); /** sprite-ref: black-verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 }
-.black .#{$name}-column-selector {
+.black .#{$primaryStyleName}-column-selector {
 	background-image: url(img/col-sel-black.png); /** sprite-ref: black-verticals */
 }
-.black .#{$name}-column-selector:active {
+.black .#{$primaryStyleName}-column-selector:active {
 	background-image: url(img/col-sel-black-pressed.png); /** sprite-ref: black-verticals */
 }
-.black .#{$name}-focus-slot-left,
-.black .#{$name}-focus-slot-right {
+.black .#{$primaryStyleName}-focus-slot-left,
+.black .#{$primaryStyleName}-focus-slot-right {
 	border-color: #9ca1a5;
 }
-.black .#{$name}-body {
+.black .#{$primaryStyleName}-body {
 	border-color: #252729;
 	background: transparent;
 }
-.black .#{$name}-cell-content {
+.black .#{$primaryStyleName}-cell-content {
 	border-right-color: #252729;
 	border-bottom: 1px solid #252729;
 }
-.black .#{$name}-cell-wrapper {
+.black .#{$primaryStyleName}-cell-wrapper {
 	padding-bottom: 2px;
 }
-.black .#{$name}-row-odd {
+.black .#{$primaryStyleName}-row-odd {
 	background: transparent;
 }
 /* Selection background-color combined with the default (white) style selector, so we don't have to duplicate the sprite image in the final sprite collection */
-.black .#{$name} .v-selected .#{$name}-cell-content {
+.black .#{$primaryStyleName} .v-selected .#{$primaryStyleName}-cell-content {
 	border-bottom: 1px solid #4d749f;
 }
 
 /* Borderless style */
-.#{$name}-borderless .#{$name}-header-wrap,
-.#{$name}-borderless .#{$name}-body {
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-header-wrap,
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-body {
 	border: none;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss
index 40c6713bcd..e2a92730b4 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss
@@ -1,22 +1,22 @@
-@mixin reindeer-tabsheet-borderless-style($name : v-tabsheet-borderless) {
+@mixin reindeer-tabsheet-borderless-style($primaryStyleName : v-tabsheet-borderless) {
 
-.#{$name} .v-tabsheet-tabitemcell-first {
+.#{$primaryStyleName} .v-tabsheet-tabitemcell-first {
 	padding-left: 7px;
 	background: url(img/framed/tab-first-left.png) no-repeat -3px 0;
 }
-.#{$name} .v-tabsheet-tabitemcell-selected-first {
+.#{$primaryStyleName} .v-tabsheet-tabitemcell-selected-first {
 	background: url(img/framed/tab-first-left-sel.png) no-repeat -3px 0;
 }
-.#{$name} .v-tabsheet-spacertd div {
+.#{$primaryStyleName} .v-tabsheet-spacertd div {
 	margin-right: 0;
 }
-.#{$name} .v-tabsheet-spacertd {
+.#{$primaryStyleName} .v-tabsheet-spacertd {
 	background: transparent;
 }
-.#{$name} .v-tabsheet-content {
+.#{$primaryStyleName} .v-tabsheet-content {
 	border: none;
 }
-.#{$name} .v-tabsheet-deco {
+.#{$primaryStyleName} .v-tabsheet-deco {
 	height: 0;
 	border-top: none;
 }
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss
index f8e1a16335..706aea151b 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss
@@ -1,9 +1,9 @@
-@mixin reindeer-tabsheet-hover-closable-style($name : v-tabsheet) {
+@mixin reindeer-tabsheet-hover-closable-style($primaryStyleName : v-tabsheet) {
 
-.#{$name}-tabs-hover-closable .#{$name}-caption-close {
+.#{$primaryStyleName}-tabs-hover-closable .#{$primaryStyleName}-caption-close {
 	visibility: hidden;
 }
-.#{$name}-tabs-hover-closable .#{$name}-tabitem:hover .#{$name}-caption-close {
+.#{$primaryStyleName}-tabs-hover-closable .#{$primaryStyleName}-tabitem:hover .#{$primaryStyleName}-caption-close {
 	visibility: visible;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
index 7d21b3b2a8..7b6ed54c02 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss
@@ -1,41 +1,41 @@
-@mixin reindeer-tabsheet-minimal-style($name : v-tabsheet) {
+@mixin reindeer-tabsheet-minimal-style($primaryStyleName : v-tabsheet) {
 
 /**
  * Tabsheet "minimal" style --------------
  */
 
 /* Minimal tabsheet on blue background */
-.blue .#{$name}-tabs-minimal .#{$name}-spacertd div,
-.blue .#{$name}-tabs-minimal .#{$name}-tabitem,
-.blue .#{$name}-tabs-minimal .#{$name}-tabitem-selected  {
+.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div,
+.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem,
+.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected  {
 	border-color: #7c8a91;
 }
-.blue .#{$name}-tabs-minimal .#{$name}-caption-close {
+.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close {
 	color: #7c8a91;
 }
-.blue .#{$name}-tabs-minimal .#{$name}-caption-close:hover {
+.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover {
 	color: #BCD3DE;
 	background: #778d98;
 }
-.blue .#{$name}-tabs-minimal .#{$name}-caption-close:active {
+.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active {
 	background: #4f6874;
 }
 
 /* Default & white styles */
-.#{$name}-tabs-minimal .#{$name}-spacertd div,
-.white .#{$name}-tabs-minimal .#{$name}-spacertd div {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div,
+.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div {
 	border-bottom: 1px solid #bfbfbf;
 	height: auto;
 	background: transparent;
 }
-.#{$name}-tabs-minimal .#{$name}-tabitemcell,
-.#{$name}-tabs-minimal .#{$name}-spacertd {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitemcell,
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd {
 	height: auto;
 	background: transparent;
 	padding-left: 0;
 }
-.#{$name}-tabs-minimal .#{$name}-tabitem,
-.white .#{$name}-tabs-minimal .#{$name}-tabitem {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem,
+.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem {
 	border: none;
 	border-bottom: 1px solid #bfbfbf;
 	color: #4d748f;
@@ -44,54 +44,54 @@
 	background: transparent;
 	text-shadow: none;
 }
-.#{$name}-tabs-minimal .#{$name}-tabitem .v-caption {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem .v-caption {
 	padding: 5px 16px;
 	height: auto;
 	background: transparent;
 }
-.#{$name}-tabs-minimal .#{$name}-tabitemcell-selected {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitemcell-selected {
 	background: transparent;
 }
-.#{$name}-tabs-minimal .#{$name}-tabitem-selected,
-.white .#{$name}-tabs-minimal .#{$name}-tabitem-selected {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected,
+.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected {
 	background: transparent;
 	border: 1px solid #bfbfbf;
 	border-bottom: none;
 	color: #222;
 }
-.#{$name}-tabs-minimal .#{$name}-tabitem-selected .v-caption {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected .v-caption {
 	background: transparent;
 	padding: 4px 15px 6px 15px;
 }
-.#{$name}-tabs-minimal .#{$name}-tabitem .v-caption-closable,
-.#{$name}-tabs-minimal .#{$name}-tabitem-selected .v-caption-closable {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem .v-caption-closable,
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected .v-caption-closable {
 	padding-right: 6px;
 }
-.#{$name}-content-minimal,
-.white .#{$name}-content-minimal {
+.#{$primaryStyleName}-content-minimal,
+.white .#{$primaryStyleName}-content-minimal {
 	border: none;
 }
-.#{$name}-content-minimal .#{$name}-tabsheetpanel {
+.#{$primaryStyleName}-content-minimal .#{$primaryStyleName}-tabsheetpanel {
 	background: transparent;
 }
-.#{$name}-deco-minimal,
-.white .#{$name}-deco-minimal {
+.#{$primaryStyleName}-deco-minimal,
+.white .#{$primaryStyleName}-deco-minimal {
 	height: 0;
 	border: none;
 }
-.#{$name}-tabcontainer-minimal .#{$name}-scroller {
+.#{$primaryStyleName}-tabcontainer-minimal .#{$primaryStyleName}-scroller {
 	margin-top: -20px;
 	height: 17px;
 	padding: 0;
 	border: none;
 	background: transparent;
 }
-.#{$name}-tabcontainer-minimal .#{$name}-scroller button {
+.#{$primaryStyleName}-tabcontainer-minimal .#{$primaryStyleName}-scroller button {
 	margin-top: 0;
 }
-.#{$name}-tabs-minimal .#{$name}-caption-close,
-.#{$name}-tabs-minimal .#{$name}-caption-close:hover,
-.#{$name}-tabs-minimal .#{$name}-caption-close:active {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close,
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover,
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active {
 	text-indent: 0;
 	background: transparent;
 	margin-left: 3px;
@@ -104,45 +104,45 @@
 	-webkit-border-radius: 7px;
 	-moz-border-radius: 7px;
 }
-.#{$name}-tabs-minimal .#{$name}-caption-close {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close {
 	margin-top: 1px;
 }
-.v-ff .#{$name}-tabs-minimal .#{$name}-caption-close {
+.v-ff .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close {
 	margin-top: -15px;
 }
-.#{$name}-tabs-minimal .#{$name}-caption-close:hover,
-.white .#{$name}-tabs-minimal .#{$name}-caption-close:hover {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover,
+.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover {
 	color: #fff;
 	background: #aaa;
 }
-.#{$name}-tabs-minimal .#{$name}-caption-close:active,
-.white .#{$name}-tabs-minimal .#{$name}-caption-close:active {
+.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active,
+.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active {
 	background: #777;
 }
 
 /* Minimal tabsheet on black background */
-.black .#{$name}-tabs-minimal .#{$name}-spacertd div,
-.black .#{$name}-tabs-minimal .#{$name}-tabitem,
-.black .#{$name}-tabs-minimal .#{$name}-tabitem-selected  {
+.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div,
+.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem,
+.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected  {
 	border-color: #3e4044;
 	color: #6a7f89;
 }
-.black .#{$name}-tabs-minimal .#{$name}-tabitem-selected {
+.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected {
 	color: #c9ccce;
 }
-.black .#{$name}-content-minimal,
-.black .#{$name}-content-bar {
+.black .#{$primaryStyleName}-content-minimal,
+.black .#{$primaryStyleName}-content-bar {
 	color: #c9ccce;
 	text-shadow: #000 0 0 1px;
 }
-.black .#{$name}-tabs-minimal .#{$name}-caption-close {
+.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close {
 	color: #72787c;
 }
-.black .#{$name}-tabs-minimal .#{$name}-caption-close:hover {
+.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover {
 	color: #1d2021;
 	background: #4d5154;
 }
-.black .#{$name}-tabs-minimal .#{$name}-caption-close:active {
+.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active {
 	background: #626669;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss
index 5147f608ab..c13bb6f025 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss
@@ -1,22 +1,22 @@
-@mixin reindeer-tabsheet-normal-style($name : v-tabsheet) {
+@mixin reindeer-tabsheet-normal-style($primaryStyleName : v-tabsheet) {
 
 /* Default Tabsheet styles */
 
-.#{$name}-tabitemcell,
-.#{$name}-spacertd {
+.#{$primaryStyleName}-tabitemcell,
+.#{$primaryStyleName}-spacertd {
 	height: 32px;
 }
-.#{$name}-tabitemcell {
+.#{$primaryStyleName}-tabitemcell {
 	background: no-repeat;
 	background-image: url(img/framed/tab-left.png); /** sprite-ref: verticals */
 	padding-left: 3px;
 }
-.#{$name}-tabitemcell-first {
+.#{$primaryStyleName}-tabitemcell-first {
 	padding-left: 10px;
 	background-image: url(img/framed/tab-first-left.png); /** sprite-ref: verticals */
 }
-.#{$name}-tabitem,
-.#{$name}-spacertd div {
+.#{$primaryStyleName}-tabitem,
+.#{$primaryStyleName}-spacertd div {
 	border: none;
 	height: 32px;
 	background: transparent repeat-x;
@@ -25,23 +25,23 @@
 	color: #222;
 	text-shadow: #fff 0 1px 0;
 }
-.#{$name}-tabitem .v-caption {
+.#{$primaryStyleName}-tabitem .v-caption {
 	border: none;
 	height: 23px;
 	background: no-repeat right top;
 	background-image: url(img/framed/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */
 	padding: 9px 8px 0 6px;
 }
-.#{$name}-tabitem .v-caption-closable {
+.#{$primaryStyleName}-tabitem .v-caption-closable {
 	padding-right: 0;
 	padding-left: 17px;
 }
-.#{$name}-tabitem .v-captiontext {
+.#{$primaryStyleName}-tabitem .v-captiontext {
 	height: 16px;
 	line-height: 16px;
 	vertical-align:baseline;
 }
-.#{$name}-caption-close {
+.#{$primaryStyleName}-caption-close {
 	float: right;
 	width: 19px;
 	height: 18px;
@@ -55,70 +55,70 @@
 	font-size: 14px;
 	font-weight: normal;
 }
-.#{$name}-caption-close:hover {
+.#{$primaryStyleName}-caption-close:hover {
 	background-image: url(img/close-btn-hover.png); /** sprite-ref: verticals */
 }
-.#{$name}-caption-close:active {
+.#{$primaryStyleName}-caption-close:active {
 	background-image: url(img/close-btn-pressed.png); /** sprite-ref: verticals */
 }
-.#{$name}-tabitem-selected .#{$name}-caption-close {
+.#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close {
 	background-image: url(img/close-btn-sel.png); /** sprite-ref: verticals */
 }
-.#{$name}-tabitem-selected .#{$name}-caption-close:hover {
+.#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close:hover {
 	background-image: url(img/close-btn-sel-hover.png); /** sprite-ref: verticals */
 }
-.#{$name}-tabitem-selected .#{$name}-caption-close:active {
+.#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close:active {
 	background-image: url(img/close-btn-sel-pressed.png); /** sprite-ref: verticals */
 }
-.#{$name}-tabitemcell-selected {
+.#{$primaryStyleName}-tabitemcell-selected {
 	background-image: url(img/framed/tab-left-sel.png); /** sprite-ref: verticals */
 }
-.#{$name}-tabitemcell-selected-first {
+.#{$primaryStyleName}-tabitemcell-selected-first {
 	background-image: url(img/framed/tab-first-left-sel.png); /** sprite-ref: verticals */
 }
-.#{$name}-tabitem-selected {
+.#{$primaryStyleName}-tabitem-selected {
 	background-image: url(img/framed/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	color: #232930;
 }
-.#{$name}-tabitem-selected .v-caption {
+.#{$primaryStyleName}-tabitem-selected .v-caption {
 	background-image: url(img/framed/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */
 }
-.#{$name}-spacertd div {
+.#{$primaryStyleName}-spacertd div {
 	margin-right: 4px;
 }
-.#{$name}-spacertd {
+.#{$primaryStyleName}-spacertd {
 	background: transparent no-repeat right top;
 	background-image: url(img/framed/tab-spacer-right.png); /** sprite-ref: verticals; sprite-alignment: right */
 }
-.blue .#{$name}-content {
+.blue .#{$primaryStyleName}-content {
 	border-color: #a8bcc5;
 }
-.#{$name}-content,
-.white .#{$name}-content {
+.#{$primaryStyleName}-content,
+.white .#{$primaryStyleName}-content {
 	border: 1px solid #dcdcdc;
 	border-bottom: none;
 	border-top: none;
 	color: #222;
 	text-shadow: none;
 }
-.#{$name}-tabsheetpanel {
+.#{$primaryStyleName}-tabsheetpanel {
 	background: #fff;
 }
-.v-sa .#{$name}-content {
+.v-sa .#{$primaryStyleName}-content {
 	border-color: rgba(0,0,0,.1);
 }
-.blue .#{$name}-deco {
+.blue .#{$primaryStyleName}-deco {
 	border-color: #92a3ac;
 	background: #adc2cd;
 }
-.#{$name}-deco,
-.white .#{$name}-deco {
+.#{$primaryStyleName}-deco,
+.white .#{$primaryStyleName}-deco {
 	height: 1px;
 	border-top: 1px solid #bebebe;
 	background: #e2e2e2;
 	overflow: hidden;
 }
-.v-sa .#{$name}-deco {
+.v-sa .#{$primaryStyleName}-deco {
 	border-top-color: rgba(0,0,0,.1);
 	background: rgba(0,0,0,.08);
 }
@@ -126,31 +126,31 @@
 
 /* Icons & error indicators */
 
-.#{$name}-tabs .v-icon,
-.#{$name}-tabs .v-captiontext,
-.#{$name}-tabs .v-errorindicator {
+.#{$primaryStyleName}-tabs .v-icon,
+.#{$primaryStyleName}-tabs .v-captiontext,
+.#{$primaryStyleName}-tabs .v-errorindicator {
 	display: inline;
 	float: none;
 }
-.v-sa .#{$name}-tabs .v-captiontext {
+.v-sa .#{$primaryStyleName}-tabs .v-captiontext {
 	display: inline-block;
 }
-.#{$name}-tabs .v-icon {
+.#{$primaryStyleName}-tabs .v-icon {
 	width: 16px !important;
 	height: 16px !important;
 }
-.#{$name}-tabs .v-errorindicator {
+.#{$primaryStyleName}-tabs .v-errorindicator {
 	display: inline-block;
 	width: 13px;
 	height: 16px;
 	background: transparent url(../common/icons/error.png) no-repeat 50%;
 }
-.v-ie .#{$name}-tabs .v-errorindicator {
+.v-ie .#{$primaryStyleName}-tabs .v-errorindicator {
 	zoom: 1;
 	display: inline;
 }
-.v-ie8 .#{$name}-tabs .v-errorindicator,
-.v-ie9 .#{$name}-tabs .v-errorindicator {
+.v-ie8 .#{$primaryStyleName}-tabs .v-errorindicator,
+.v-ie9 .#{$primaryStyleName}-tabs .v-errorindicator {
 	display: inline-block;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss
index b3f98098ef..070bb2d724 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss
@@ -1,8 +1,8 @@
-@mixin reindeer-tabsheet-scroller($name : v-tabsheet) {
+@mixin reindeer-tabsheet-scroller($primaryStyleName : v-tabsheet) {
 
 /* Tabsheet scroller styles */
 
-.#{$name}-scroller {
+.#{$primaryStyleName}-scroller {
 	height: 31px;
 	margin-top: -31px;
 	padding: 0 3px 0 4px;
@@ -13,13 +13,13 @@
 	background: transparent url(img/framed/tab-bg.png) repeat-x left -1px;
 	width: 36px;
 }
-.#{$name}-scroller button {
+.#{$primaryStyleName}-scroller button {
 	margin-top: 7px;
 }
-.#{$name}-scrollerPrev,
-.#{$name}-scrollerNext,
-.#{$name}-scrollerPrev-disabled,
-.#{$name}-scrollerNext-disabled {
+.#{$primaryStyleName}-scrollerPrev,
+.#{$primaryStyleName}-scrollerNext,
+.#{$primaryStyleName}-scrollerPrev-disabled,
+.#{$primaryStyleName}-scrollerNext-disabled {
 	border: none;
 	background: transparent;
 	background-image: url(img/tab-prev.png); /** sprite-ref: verticals */
@@ -27,26 +27,26 @@
 	height: 17px;
 	overflow: hidden;
 }
-.#{$name}-scroller button::-moz-focus-inner {
+.#{$primaryStyleName}-scroller button::-moz-focus-inner {
 	border: none;
 }
-.#{$name}-scrollerNext {
+.#{$primaryStyleName}-scrollerNext {
 	background-image: url(img/tab-next.png); /** sprite-ref: verticals */
 }
-.#{$name}-scrollerPrev:active {
+.#{$primaryStyleName}-scrollerPrev:active {
 	background-image: url(img/tab-prev-pressed.png); /** sprite-ref: verticals */
 }
-.#{$name}-scrollerNext:active {
+.#{$primaryStyleName}-scrollerNext:active {
 	background-image: url(img/tab-next-pressed.png); /** sprite-ref: verticals */
 }
-.#{$name}-scrollerPrev-disabled,
-.#{$name}-scrollerPrev-disabled:active {
+.#{$primaryStyleName}-scrollerPrev-disabled,
+.#{$primaryStyleName}-scrollerPrev-disabled:active {
 	background-image: url(img/tab-prev-disabled.png); /** sprite-ref: verticals */
 	opacity: 1;
 	filter: none;
 }
-.#{$name}-scrollerNext-disabled,
-.#{$name}-scrollerNext-disabled:active {
+.#{$primaryStyleName}-scrollerNext-disabled,
+.#{$primaryStyleName}-scrollerNext-disabled:active {
 	background-image: url(img/tab-next-disabled.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */
 	opacity: 1;
 	filter: none;
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss
index 75ac111ec7..ed1ddcd693 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss
@@ -1,11 +1,11 @@
-@mixin reindeer-tabsheet-selected-closable-style($name : v-tabsheet) {
+@mixin reindeer-tabsheet-selected-closable-style($primaryStyleName : v-tabsheet) {
 
-.#{$name}-tabs-selected-closable .#{$name}-tabitem .#{$name}-caption-close,
-.#{$name}-tabs-selected-closable .#{$name}-tabitem:hover .#{$name}-caption-close {
+.#{$primaryStyleName}-tabs-selected-closable .#{$primaryStyleName}-tabitem .#{$primaryStyleName}-caption-close,
+.#{$primaryStyleName}-tabs-selected-closable .#{$primaryStyleName}-tabitem:hover .#{$primaryStyleName}-caption-close {
 	visibility: hidden;
 }
-.#{$name}-tabs-selected-closable .#{$name}-tabitem-selected .#{$name}-caption-close,
-.#{$name}-tabs-selected-closable .#{$name}-tabitem-selected:hover .#{$name}-caption-close {
+.#{$primaryStyleName}-tabs-selected-closable .#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close,
+.#{$primaryStyleName}-tabs-selected-closable .#{$primaryStyleName}-tabitem-selected:hover .#{$primaryStyleName}-caption-close {
 	visibility: visible;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
index 61358b3723..de0c29d516 100644
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss
@@ -1,42 +1,42 @@
-@mixin reindeer-tabsheet-small-style($name : v-tabsheet) {
+@mixin reindeer-tabsheet-small-style($primaryStyleName : v-tabsheet) {
 
 /**
  * Tabsheet bar style ---------------
  */
-.#{$name}-tabs-bar .#{$name}-tabitemcell,
-.#{$name}-tabs-bar .#{$name}-spacertd {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell,
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-spacertd {
 	height: 20px;
 }
-.#{$name}-tabs-bar .#{$name}-spacertd {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-spacertd {
 	background: transparent;
 }
-.#{$name}-tabs-bar .#{$name}-tabitemcell {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell {
 	background-image: url(img/bar/tab-left.png); /** sprite-ref: verticals */
 }
-.#{$name}-tabs-bar .#{$name}-tabitemcell-first {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell-first {
 	padding-left: 6px;
 	background-image: url(img/bar/tab-first-left.png); /** sprite-ref: verticals */
 }
-.#{$name}-tabs-bar .#{$name}-tabitem,
-.#{$name}-tabs-bar .#{$name}-spacertd div {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem,
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-spacertd div {
 	height: 20px;
 	background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	font-size: 11px;
 	margin: 0;
 }
-.#{$name}-tabs-bar .#{$name}-tabitem .v-caption {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem .v-caption {
 	height: 18px;
 	background-image: url(img/bar/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */
 	padding: 2px 12px 0 10px;
 }
-.#{$name}-tabs-bar .#{$name}-tabitem .v-caption-closable,
-.#{$name}-tabs-bar .#{$name}-tabitem-selected .v-caption-closable {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem .v-caption-closable,
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .v-caption-closable {
 	padding-right: 8px;
 	padding-left: 14px;
 }
-.#{$name}-tabs-bar .#{$name}-caption-close,
-.#{$name}-tabs-bar .#{$name}-caption-close:hover,
-.#{$name}-tabs-bar .#{$name}-caption-close:active {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close,
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:hover,
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:active {
 	text-indent: 0;
 	background: transparent;
 	margin-left: 3px;
@@ -49,62 +49,62 @@
 	-webkit-border-radius: 7px;
 	-moz-border-radius: 7px;
 }
-.#{$name}-tabs-bar .#{$name}-caption-close {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close {
 	margin-top: 1px;
 }
-.v-ff .#{$name}-tabs-bar .#{$name}-caption-close {
+.v-ff .#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close {
 	margin-top: -14px;
 }
-.#{$name}-tabs-bar .#{$name}-caption-close:hover {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:hover {
 	background: #bfbfbf;
 	-webkit-box-shadow: 0 1px 0 #fff;
 }
-.#{$name}-tabs-bar .#{$name}-caption-close:active {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:active {
 	background: #a9a9a9;
 }
-.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close {
 	color: #404142;
 }
-.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close:hover {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close:hover {
 	background: #5e666e;
 	color: #fff;
 	text-shadow: 0 -1px 0 #222;
 }
-.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close:active {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close:active {
 	background: #404142;
 }
 
-.#{$name}-tabs-bar .#{$name}-tabitemcell-selected {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell-selected {
 	background-image: url(img/bar/tab-left-sel.png); /** sprite-ref: verticals */
 }
-.#{$name}-tabs-bar .#{$name}-tabitemcell-selected-first {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell-selected-first {
 	background-image: url(img/bar/tab-first-left-sel.png); /** sprite-ref: verticals */
 }
-.#{$name}-tabs-bar .#{$name}-tabitem-selected {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected {
 	background-image: url(img/bar/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	color: #232930;
 }
-.#{$name}-tabs-bar .#{$name}-tabitem-selected .v-caption {
+.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .v-caption {
 	background-image: url(img/bar/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */
 }
-.#{$name}-tabcontainer-bar .#{$name}-scroller {
+.#{$primaryStyleName}-tabcontainer-bar .#{$primaryStyleName}-scroller {
 	margin-top: -20px;
 	height: 19px;
 	border-right: none;
 	background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.#{$name}-tabcontainer-bar .#{$name}-scroller button {
+.#{$primaryStyleName}-tabcontainer-bar .#{$primaryStyleName}-scroller button {
 	margin-top: 1px;
 }
-.#{$name}-content-bar,
-.white .#{$name}-content-bar {
+.#{$primaryStyleName}-content-bar,
+.white .#{$primaryStyleName}-content-bar {
 	border: none;
 }
-.#{$name}-content-bar .#{$name}-tabsheetpanel {
+.#{$primaryStyleName}-content-bar .#{$primaryStyleName}-tabsheetpanel {
 	background: transparent;
 }
-.#{$name}-deco-bar,
-.white .#{$name}-deco-bar {
+.#{$primaryStyleName}-deco-bar,
+.white .#{$primaryStyleName}-deco-bar {
 	height: 0;
 	border: none;
 }
diff --git a/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss b/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss
index 6c3d4000fa..4bca7dbeb6 100644
--- a/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss
+++ b/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss
@@ -1,16 +1,16 @@
-@mixin reindeer-textfield($name : v-textfield) {
+@mixin reindeer-textfield($primaryStyleName : v-textfield) {
 
 /* Textfield on blue background */
-.blue .#{$name},
+.blue .#{$primaryStyleName},
 .blue .v-textarea {
 	border-color: #92a2aa;
 	border-top-color: #7c8a90;
 	border-bottom-color: #a1b3bc;
 }
 /* Default & white background */
-.#{$name},
+.#{$primaryStyleName},
 .v-textarea,
-.white .#{$name},
+.white .#{$primaryStyleName},
 .white .v-textarea {
 	border: 1px solid #bcbdbe;
 	border-top-color: #a2a3a4;
@@ -31,19 +31,19 @@
 	height: auto;
 }
 /* Need more specific selector because of #2384 fixes in base/common/common.css */
-&.v-app input.#{$name},
-.v-window input.#{$name},
+&.v-app input.#{$primaryStyleName},
+.v-window input.#{$primaryStyleName},
 &.v-app textarea.v-textarea,
 .v-window textarea.v-textarea  {
 	padding: 3px 3px 4px;
 }
-&.v-app input.#{$name}.v-widget,
-.v-window input.#{$name}.v-widget {
+&.v-app input.#{$primaryStyleName}.v-widget,
+.v-window input.#{$primaryStyleName}.v-widget {
 	height: 24px;
 }
-&.v-app .#{$name}-focus,
-.v-window .#{$name}-focus,
-.v-popupview-popup .#{$name}-focus,
+&.v-app .#{$primaryStyleName}-focus,
+.v-window .#{$primaryStyleName}-focus,
+.v-popupview-popup .#{$primaryStyleName}-focus,
 &.v-app .v-textarea-focus,
 .v-window .v-textarea-focus,
 .v-popupview-popup .v-textarea-focus {
@@ -53,13 +53,13 @@
 	outline: none;
 	background-color: #fff;
 }
-input.#{$name}-prompt,
+input.#{$primaryStyleName}-prompt,
 textarea.v-textarea-prompt {
 	font-style: normal;
 	color: #999;
 }
 /* Small style textfield */
-&.v-app input.#{$name}-small {
+&.v-app input.#{$primaryStyleName}-small {
 	font-size: 11px;
 	line-height: normal;
 	height: auto;
@@ -68,18 +68,18 @@ textarea.v-textarea-prompt {
 &.v-app textarea.v-textarea-small {
 	font-size: 11px;
 }
-&.v-app .v-table  input.#{$name}.v-widget,
-.v-window .v-table input.#{$name}.v-widget {
+&.v-app .v-table  input.#{$primaryStyleName}.v-widget,
+.v-window .v-table input.#{$primaryStyleName}.v-widget {
 	padding: 1px 2px;
 	height: auto;
 	line-height: normal;
 }
-.v-table-cell-wrapper > input.#{$name} {
+.v-table-cell-wrapper > input.#{$primaryStyleName} {
 	margin-top: -2px;
 	margin-bottom: -2px;
 }
 /* Textfield on black background */
-.black .#{$name},
+.black .#{$primaryStyleName},
 .black .v-textarea {
 	border-color: #38393a;
 	border-top-color: #2c2d2e;
@@ -92,10 +92,10 @@ textarea.v-textarea-prompt {
 .black .v-textarea {
 	background-image: none;
 }
-&.v-app .black .#{$name}-focus,
-.v-window-black .#{$name}-focus,
-.v-window .black .#{$name}-focus,
-.v-popupview-popup .black .#{$name}-focus,
+&.v-app .black .#{$primaryStyleName}-focus,
+.v-window-black .#{$primaryStyleName}-focus,
+.v-window .black .#{$primaryStyleName}-focus,
+.v-popupview-popup .black .#{$primaryStyleName}-focus,
 &.v-app .black .v-textarea-focus,
 .v-window-black .v-textarea-focus,
 .v-window .black .v-textarea-focus,
@@ -105,12 +105,12 @@ textarea.v-textarea-prompt {
 	border-bottom-color: #507596;
 	background-color: #151717;
 }
-.black input.#{$name}-prompt {
+.black input.#{$primaryStyleName}-prompt {
 	color: #5f6366;
 }
 /* Readonly */
-input.#{$name}-readonly,
-.black input.#{$name}-readonly,
+input.#{$primaryStyleName}-readonly,
+.black input.#{$primaryStyleName}-readonly,
 textarea.v-textarea-readonly,
 .black textarea.v-textarea-readonly {
 	border: none;
diff --git a/WebContent/VAADIN/themes/reindeer/tree/tree.scss b/WebContent/VAADIN/themes/reindeer/tree/tree.scss
index da3b46dc65..15e7092dd6 100644
--- a/WebContent/VAADIN/themes/reindeer/tree/tree.scss
+++ b/WebContent/VAADIN/themes/reindeer/tree/tree.scss
@@ -1,20 +1,20 @@
-@mixin reindeer-tree($name : v-tree) {
+@mixin reindeer-tree($primaryStyleName : v-tree) {
 
-.#{$name}-node {
+.#{$primaryStyleName}-node {
 	background: transparent url(img/arrows.png) no-repeat 6px -10px;
 }
-.#{$name}-node-expanded {
+.#{$primaryStyleName}-node-expanded {
 	background-position: -7px 5px;
 }
-.#{$name}-node-caption {
+.#{$primaryStyleName}-node-caption {
 	margin-left: 16px;
 	padding-bottom: 1px;
 }
-.#{$name}-node span {
+.#{$primaryStyleName}-node span {
 	padding: 1px 2px;
 	display: inline-block;
 }
-.#{$name}-node-selected span {
+.#{$primaryStyleName}-node-selected span {
 	background: #4d749f repeat-x;
 	background-image: url(../common/img/sel-bg.png); /* sprite-ref: verticals; sprite-alignment: repeat */
 	color: #fff;
@@ -24,31 +24,31 @@
 	text-shadow: #2b425a 0 1px 0;
 	display: inline-block;
 }
-.#{$name}-node-children {
+.#{$primaryStyleName}-node-children {
 	padding-left: 16px;
 }
-.#{$name}-node-caption.#{$name}-node-focused span{
+.#{$primaryStyleName}-node-caption.#{$primaryStyleName}-node-focused span{
 	padding-left: 1px;
 	padding-top: 0px;
 	padding-bottom: 0px;
 }
-.#{$name}-node-focused span{
+.#{$primaryStyleName}-node-focused span{
 	border: 1px dotted black;	
 }
 /***************************************
  * Drag'n'drop styles
  ***************************************/
-.#{$name} .#{$name}-node-drag-top {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top {
 	background-position: 6px -11px;
 }
-.#{$name} .#{$name}-node-drag-top.#{$name}-node-expanded {
+.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-expanded {
 	background-position: -7px 4px;
 }
-.#{$name}-connectors .#{$name}-node-drag-top,
-.#{$name}-connectors .#{$name}-node-expanded.#{$name}-node-drag-top {
+.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top,
+.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded.#{$primaryStyleName}-node-drag-top {
 	background-position: 2px -53px;
 }
-.#{$name}-connectors .#{$name}-node-drag-top.#{$name}-node-leaf {
+.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-leaf {
 	background-position: 2px 50%;
 }
 
diff --git a/WebContent/VAADIN/themes/reindeer/window/window.scss b/WebContent/VAADIN/themes/reindeer/window/window.scss
index c3ad0fc9be..7ba6b01675 100644
--- a/WebContent/VAADIN/themes/reindeer/window/window.scss
+++ b/WebContent/VAADIN/themes/reindeer/window/window.scss
@@ -1,25 +1,25 @@
-@mixin reindeer-window($name : v-window) {
+@mixin reindeer-window($primaryStyleName : v-window) {
 
-.#{$name} {
+.#{$primaryStyleName} {
 	background: transparent;
 }
-.#{$name}-wrap {
+.#{$primaryStyleName}-wrap {
 	border: 1px solid #808386;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-.v-sa .#{$name}-wrap,
-.v-op .#{$name}-wrap {
+.v-sa .#{$primaryStyleName}-wrap,
+.v-op .#{$primaryStyleName}-wrap {
 	border-color: rgba(0,0,0,.2);
 }
-.#{$name}-outerheader {
+.#{$primaryStyleName}-outerheader {
 	padding: 12px 32px 0 14px;
 	height: 37px;
 	background: black repeat-x;
 	background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.#{$name}-header {
+.#{$primaryStyleName}-header {
 	font-weight: bold;
 	font-size: 12px;
 	line-height: normal;
@@ -30,24 +30,24 @@
 	text-overflow: ellipsis;
 	-ms-text-overflow: ellipsis;
 }
-.#{$name}-error .#{$name}-header {
+.#{$primaryStyleName}-error .#{$primaryStyleName}-header {
 	padding-left: 13px;
 	background: transparent url(../common/icons/error.png) no-repeat 0 50%;
 }
-.#{$name}-resizebox {
+.#{$primaryStyleName}-resizebox {
 	width: 15px;
 	height: 15px;
 	cursor: se-resize;
 	background: transparent;
 	background-image: url(img/resize.png); /** sprite-ref: verticals */
 }
-.#{$name}-footer {
+.#{$primaryStyleName}-footer {
 	background-color:white;
 	background-repeat: repeat-x;
 	background-image: url(img/footer-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	height: 15px;
 }
-.#{$name}-closebox {
+.#{$primaryStyleName}-closebox {
 	top: 12px;
 	right: 10px;
 	width: 15px;
@@ -55,16 +55,16 @@
 	background: transparent;
 	background-image: url(img/close.png); /** sprite-ref: verticals */
 }
-.#{$name}-closebox:hover {
+.#{$primaryStyleName}-closebox:hover {
 	background-image: url(img/close-hover.png); /** sprite-ref: verticals */
 }
-.#{$name}-closebox:active {
+.#{$primaryStyleName}-closebox:active {
 	background-image: url(img/close-pressed.png); /** sprite-ref: verticals */
 }
-.#{$name}-contents {
+.#{$primaryStyleName}-contents {
 	background: #fff;
 }
-.#{$name}-modalitycurtain {
+.#{$primaryStyleName}-modalitycurtain {
 	background: #56595b;
 }
 
@@ -77,43 +77,43 @@
  Light style window -----------------------------
 **/
 
-.#{$name}-light .#{$name}-outerheader {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-outerheader {
 	background: transparent;
 	padding: 15px 32px 0 18px;
 	height: 23px;
 }
-.#{$name}-light .#{$name}-header {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-header {
 	font-size: 16px;
 	color: #292e34;
 	text-shadow: none;
 }
-.#{$name}-light .#{$name}-resizebox {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-resizebox {
 	width: 12px;
 	height: 12px;
 	background-image: url(img/resize-light.png); /** sprite-ref: verticals */
 }
-.#{$name}-light .#{$name}-footer {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-footer {
 	background: transparent;
 	height: 12px;
 }
-.#{$name}-light .#{$name}-closebox {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-closebox {
 	right: 1px;
 	top: 17px;
 	width: 19px;
 	height: 15px;
 	background-image: url(img/close-light.png); /** sprite-ref: verticals */
 }
-.#{$name}-light .#{$name}-closebox:hover {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-closebox:hover {
 	background-image: url(img/close-light-hover.png); /** sprite-ref: verticals */
 }
-.#{$name}-light .#{$name}-closebox:active {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-closebox:active {
 	background-image: url(img/close-light-pressed.png); /** sprite-ref: verticals */
 }
-.#{$name}-light .#{$name}-contents {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-contents {
 	background: transparent;
 }
 /* This must be the last sprite added to the verticals-sprite image */
-.#{$name}-light .#{$name}-wrap2 {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-wrap2 {
 	background: #f7f7f8 repeat-x;
 	background-image: url(img/content-bg-light.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
@@ -123,27 +123,27 @@
  Black style window -----------------------------
 **/
 
-.#{$name}-black .#{$name}-wrap {
+.#{$primaryStyleName}-black .#{$primaryStyleName}-wrap {
 	border-color: #2e3030;
 	border-radius: 8px;
 	-webkit-border-radius: 8px;
 	-moz-border-radius: 8px;
 	overflow: hidden;
 }
-.v-sa .#{$name}-black .#{$name}-wrap,
-.v-op .#{$name}-black .#{$name}-wrap {
+.v-sa .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap,
+.v-op .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap {
 	border-color: rgba(0,0,0,.8);
 }
-.#{$name}-black .#{$name}-wrap2 {
+.#{$primaryStyleName}-black .#{$primaryStyleName}-wrap2 {
 	background-color: #1d2021;
 	-moz-border-radius: 7px;
 	-webkit-border-radius: 7px;
 }
-.v-sa .#{$name}-black .#{$name}-wrap2,
-.v-op .#{$name}-black .#{$name}-wrap2 {
+.v-sa .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap2,
+.v-op .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap2 {
 	background-color: rgba(29,32,33,.9);
 }
-.#{$name}-black .#{$name}-outerheader {
+.#{$primaryStyleName}-black .#{$primaryStyleName}-outerheader {
 	height: auto;
 	padding: 7px 14px;
 	height: 15px;
@@ -157,27 +157,27 @@
 	overflow: hidden;
 	border: none;
 }
-.#{$name}-black .#{$name}-header {
+.#{$primaryStyleName}-black .#{$primaryStyleName}-header {
 	font-size: 12px;
 	font-weight: normal;
 	color: #dddfe1;
 }
-.#{$name}-black .#{$name}-closebox {
+.#{$primaryStyleName}-black .#{$primaryStyleName}-closebox {
 	top: 8px;
 }
-.#{$name}-black .#{$name}-footer {
+.#{$primaryStyleName}-black .#{$primaryStyleName}-footer {
 	background: transparent;
 	border: none;
 	height: 14px;
 }
-.#{$name}-black .#{$name}-resizebox {
+.#{$primaryStyleName}-black .#{$primaryStyleName}-resizebox {
 	background: transparent no-repeat;
 	background-image: url(img/black/resize.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 4px */
 	width: 14px;
 	height: 14px;
 }
 /* Must be last to make this image last in the sprites */
-.#{$name}-black .#{$name}-contents {
+.#{$primaryStyleName}-black .#{$primaryStyleName}-contents {
 	border: none;
 	background: transparent repeat-x;
 	background-image: url(img/black/content-bg.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */