$primaryStyleName functionality to Chameleon, fixes #9881

Change-Id: I3d75184acb7d2625a3edea35b1c8d2a86b7313eb

16 files changed, 342 insertions, 342 deletions

diff --git a/WebContent/VAADIN/themes/chameleon/components/accordion/accordion.scss b/WebContent/VAADIN/themes/chameleon/components/accordion/accordion.scss
index f33577db9e..2fe0307fe0 100644
--- a/WebContent/VAADIN/themes/chameleon/components/accordion/accordion.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/accordion/accordion.scss
@@ -1,31 +1,31 @@
-@mixin chameleon-accordion {
+@mixin chameleon-accordion($primaryStyleName : v-accordion) {
 
-.v-accordion {
+.#{$primaryStyleName} {
 	border: 1px solid #b3b3b3;
 	}
 
-.v-accordion-item-open {
+.#{$primaryStyleName}-item-open {
 	border-bottom: 1px solid #b3b3be;
 	}
 
-.v-accordion-item-caption,
-.v-accordion-item-open .v-accordion-item-caption:active {
+.#{$primaryStyleName}-item-caption,
+.#{$primaryStyleName}-item-open .#{$primaryStyleName}-item-caption:active {
 	padding: 0;
 	background: transparent url(../../img/grad-light-top.png) repeat-x;
 	border-width: 0 0 1px 0;
 	border-style: solid none;
 	}
 	
-div.v-accordion-item-caption,
-div.v-accordion-item-open .v-accordion-item-caption:active {
+div.#{$primaryStyleName}-item-caption,
+div.#{$primaryStyleName}-item-open .#{$primaryStyleName}-item-caption:active {
 	background-color: transparent;
 	}
 
-.v-accordion-item-caption .v-caption {
+.#{$primaryStyleName}-item-caption .v-caption {
 	padding: .2em .9em;
 	}
 
-.v-accordion-item-caption:active {
+.#{$primaryStyleName}-item-caption:active {
 	background-image: url(../../img/grad-dark-bottom.png);
 	background-position: left bottom;
 	}
@@ -33,28 +33,28 @@ div.v-accordion-item-open .v-accordion-item-caption:active {
 /*******************************************************************************
  * Opaque
  ******************************************************************************/
-.v-accordion-opaque {
+.#{$primaryStyleName}-opaque {
 	border-radius: 4px;
 	-webkit-border-radius: 4px;
 	-moz-border-radius: 4px;
 	}
 
-.v-accordion-opaque .v-accordion-item-caption,
-.v-accordion-opaque .v-accordion-item-open {
+.#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-caption,
+.#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-open {
 	border: none;
 	}
 
-.v-accordion-opaque .v-accordion-item-caption,
-.v-accordion-opaque .v-accordion-item-open .v-accordion-item-caption:active {
+.#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-caption,
+.#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-open .#{$primaryStyleName}-item-caption:active {
 	background-color: #b8b8b8;
 	}
 
-.v-accordion-opaque .v-accordion-item-open {
+.#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-open {
 	background-color: #fff;
 	}
 
-.v-accordion-opaque .v-accordion-item-first,
-.v-accordion-opaque .v-accordion-item-first .v-accordion-item-caption {
+.#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-first,
+.#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-first .#{$primaryStyleName}-item-caption {
 	-webkit-border-top-left-radius: 3px;
 	-webkit-border-top-right-radius: 3px;
 	-moz-border-radius-topleft: 3px;
@@ -66,12 +66,12 @@ div.v-accordion-item-open .v-accordion-item-caption:active {
 /*******************************************************************************
  * Borderless
  ******************************************************************************/
-.v-accordion-borderless {
+.#{$primaryStyleName}-borderless {
 	border: none;
 	}
 
-.v-accordion-opaque.borderless,
-.v-accordion-opaque.borderless .v-accordion-item-first .v-accordion-item-caption {
+.#{$primaryStyleName}-opaque.borderless,
+.#{$primaryStyleName}-opaque.borderless .#{$primaryStyleName}-item-first .#{$primaryStyleName}-item-caption {
 	border-radius: 0;
 	-webkit-border-radius: 0;
 	-moz-border-radius: 0;
diff --git a/WebContent/VAADIN/themes/chameleon/components/button/button.scss b/WebContent/VAADIN/themes/chameleon/components/button/button.scss
index 28d96991a7..75970cdac7 100644
--- a/WebContent/VAADIN/themes/chameleon/components/button/button.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/button/button.scss
@@ -1,15 +1,15 @@
-@mixin chameleon-button {
+@mixin chameleon-button($primaryStyleName : v-button) {
 
-.v-button:active,
-.v-ie8 & .v-pressed.v-button,
-div.v-button-down {
+.#{$primaryStyleName}:active,
+.v-ie8 & .v-pressed.#{$primaryStyleName},
+div.#{$primaryStyleName}-down {
 	background-image: url(../../img/grad-dark-bottom2.png);
 	background-color: #afafaf;
 	}
 
-.v-button:active .v-button-wrap,
-.v-ie8 & .v-pressed.v-button .v-button-wrap,
-.v-button-down .v-button-wrap {
+.#{$primaryStyleName}:active .#{$primaryStyleName}-wrap,
+.v-ie8 & .v-pressed.#{$primaryStyleName} .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-down .#{$primaryStyleName}-wrap {
 	background-image: url(../../img/grad-dark-top2.png);
 	border: 1px solid #888;
 	padding: 3px 12px;
@@ -18,17 +18,17 @@ div.v-button-down {
 	-moz-border-radius: 2px;
 	}
 
-div.v-button-down .v-button-wrap {
+div.#{$primaryStyleName}-down .#{$primaryStyleName}-wrap {
 	background-image: url(../../img/grad-dark-top2.png);
 	}
 
-.v-button {
+.#{$primaryStyleName} {
 	overflow: hidden;
 	}
 
-.v-button,
-.v-disabled.v-button:focus,
-.v-disabled.v-button:active {
+.#{$primaryStyleName},
+.v-disabled.#{$primaryStyleName}:focus,
+.v-disabled.#{$primaryStyleName}:active {
 	border: 1px solid #8b8b8b;
 	background: #c9c9c9;
 	border-radius: 3px;
@@ -41,8 +41,8 @@ div.v-button-down .v-button-wrap {
 	padding: 0;
 	}
 
-.v-button-wrap,
-.v-disabled:active .v-button-wrap {
+.#{$primaryStyleName}-wrap,
+.v-disabled:active .#{$primaryStyleName}-wrap {
 	display: block;
 	padding: 4px 13px;
 	border: none;
@@ -55,22 +55,22 @@ div.v-button-down .v-button-wrap {
 	-ms-text-overflow: ellipsis;
 	}
 
-.v-sa & .v-button,
-.v-sa & .v-button-wrap,
-.v-ff & .v-button,
-.v-ff & .v-button-wrap {
+.v-sa & .#{$primaryStyleName},
+.v-sa & .#{$primaryStyleName}-wrap,
+.v-ff & .#{$primaryStyleName},
+.v-ff & .#{$primaryStyleName}-wrap {
 	overflow: hidden;
 	}
 	
-.v-button:focus {
+.#{$primaryStyleName}:focus {
 	outline: none;
 	}
 
-.v-button .v-icon {
+.#{$primaryStyleName} .v-icon {
 	margin-left: -0.5em;
 	}
 
-.v-button .v-button-caption {
+.#{$primaryStyleName} .#{$primaryStyleName}-caption {
 	line-height: 1.26;
 	}
 
@@ -78,7 +78,7 @@ div.v-button-down .v-button-wrap {
 /*******************************************************************************
  * Big
  ******************************************************************************/
-.v-button-big {
+.#{$primaryStyleName}-big {
 	font-size: 1.2em;
 	}
 
@@ -86,22 +86,22 @@ div.v-button-down .v-button-wrap {
 /*******************************************************************************
  * Small
  ******************************************************************************/
-.v-button-small {
+.#{$primaryStyleName}-small {
 	font-size: 0.85em;
 	font-weight: normal;
 	}
 
-.v-button-small .v-button-wrap {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-wrap {
 	padding: 3px 11px;
 	}
 
-.v-button-small:active .v-button-wrap,
-.v-ie8 & .v-button-small.v-pressed .v-button-wrap,
-.v-button-down.small .v-button-wrap {
+.#{$primaryStyleName}-small:active .#{$primaryStyleName}-wrap,
+.v-ie8 & .#{$primaryStyleName}-small.v-pressed .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-down.small .#{$primaryStyleName}-wrap {
 	padding: 2px 10px;
 	}
 
-.v-button-small .v-icon {
+.#{$primaryStyleName}-small .v-icon {
 	margin-top: -4px;
 	margin-bottom: -4px;
 	}
@@ -110,13 +110,13 @@ div.v-button-down .v-button-wrap {
 /*******************************************************************************
  * Wide
  ******************************************************************************/
-.v-button-wide .v-button-wrap {
+.#{$primaryStyleName}-wide .#{$primaryStyleName}-wrap {
 	padding-left: 26px;
 	padding-right: 26px;
 	}
 
-.v-button-wide:active .v-button-wrap,
-.v-ie8 & .v-button-wide.v-pressed .v-button-wrap {
+.#{$primaryStyleName}-wide:active .#{$primaryStyleName}-wrap,
+.v-ie8 & .#{$primaryStyleName}-wide.v-pressed .#{$primaryStyleName}-wrap {
 	padding-left: 25px;
 	padding-right: 25px;
 	}
@@ -125,13 +125,13 @@ div.v-button-down .v-button-wrap {
 /*******************************************************************************
  * Tall
  ******************************************************************************/
-.v-button-tall .v-button-wrap {
+.#{$primaryStyleName}-tall .#{$primaryStyleName}-wrap {
 	padding-top: 13px;
 	padding-bottom: 13px;
 	}
 
-.v-button-tall:active .v-button-wrap,
-.v-ie8 & .v-button-tall.v-pressed .v-button-wrap {
+.#{$primaryStyleName}-tall:active .#{$primaryStyleName}-wrap,
+.v-ie8 & .#{$primaryStyleName}-tall.v-pressed .#{$primaryStyleName}-wrap {
 	padding-top: 12px;
 	padding-bottom: 12px;
 	}
@@ -140,8 +140,8 @@ div.v-button-down .v-button-wrap {
 /*******************************************************************************
  * Default
  ******************************************************************************/
-.v-button-default,
-.v-disabled.v-button-default:focus {
+.#{$primaryStyleName}-default,
+.v-disabled.#{$primaryStyleName}-default:focus {
 	font-weight: bold;
 	}
 
@@ -149,18 +149,18 @@ div.v-button-down .v-button-wrap {
 /*******************************************************************************
  * Link & borderless
  ******************************************************************************/
-div.v-button-link,
-div.v-button-link:focus,
-.v-button-link:active,
-div.v-disabled.v-button-link,
-div.v-disabled.v-button-link:focus,
-body.v-ie & .v-pressed.v-button-link,
-div.v-button-borderless,
-div.v-button-borderless:focus,
-.v-button-borderless:active,
-div.v-disabled.v-button-borderless,
-div.v-disabled.v-button-borderless:focus,
-body.v-ie & .v-pressed.v-button-borderless {
+div.#{$primaryStyleName}-link,
+div.#{$primaryStyleName}-link:focus,
+.#{$primaryStyleName}-link:active,
+div.v-disabled.#{$primaryStyleName}-link,
+div.v-disabled.#{$primaryStyleName}-link:focus,
+body.v-ie & .v-pressed.#{$primaryStyleName}-link,
+div.#{$primaryStyleName}-borderless,
+div.#{$primaryStyleName}-borderless:focus,
+.#{$primaryStyleName}-borderless:active,
+div.v-disabled.#{$primaryStyleName}-borderless,
+div.v-disabled.#{$primaryStyleName}-borderless:focus,
+body.v-ie & .v-pressed.#{$primaryStyleName}-borderless {
 	background: transparent;
 	font-weight: normal;
 	text-shadow: none;
@@ -170,23 +170,23 @@ body.v-ie & .v-pressed.v-button-borderless {
 	-moz-box-shadow: none;
 	}
 
-.v-button-link .v-button-wrap,
-.v-button-borderless .v-button-wrap {
+.#{$primaryStyleName}-link .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-wrap {
 	display: inline;
 	}
 
-div.v-button-link .v-button-wrap,
-div.v-button-link:focus .v-button-wrap,
-.v-button-link:active .v-button-wrap,
-div.v-disabled.v-button-link .v-button-wrap,
-div.v-disabled.v-button-link:focus .v-button-wrap,
-body.v-ie & .v-pressed.v-button-link .v-button-wrap,
-div.v-button-borderless .v-button-wrap,
-div.v-button-borderless:focus .v-button-wrap,
-.v-button-borderless:active .v-button-wrap,
-div.v-disabled.v-button-borderless .v-button-wrap,
-div.v-disabled.v-button-borderless:focus .v-button-wrap,
-body.v-ie & .v-pressed.v-button-borderless .v-button-wrap {
+div.#{$primaryStyleName}-link .#{$primaryStyleName}-wrap,
+div.#{$primaryStyleName}-link:focus .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-link:active .#{$primaryStyleName}-wrap,
+div.v-disabled.#{$primaryStyleName}-link .#{$primaryStyleName}-wrap,
+div.v-disabled.#{$primaryStyleName}-link:focus .#{$primaryStyleName}-wrap,
+body.v-ie & .v-pressed.#{$primaryStyleName}-link .#{$primaryStyleName}-wrap,
+div.#{$primaryStyleName}-borderless .#{$primaryStyleName}-wrap,
+div.#{$primaryStyleName}-borderless:focus .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-borderless:active .#{$primaryStyleName}-wrap,
+div.v-disabled.#{$primaryStyleName}-borderless .#{$primaryStyleName}-wrap,
+div.v-disabled.#{$primaryStyleName}-borderless:focus .#{$primaryStyleName}-wrap,
+body.v-ie & .v-pressed.#{$primaryStyleName}-borderless .#{$primaryStyleName}-wrap {
 	background: transparent;
 	font-weight: normal;
 	text-shadow: none;
@@ -196,24 +196,24 @@ body.v-ie & .v-pressed.v-button-borderless .v-button-wrap {
 	-moz-box-shadow: none;
 	}
 
-.v-button-link:focus .v-button-caption,
-.v-button-borderless:focus .v-button-caption {
+.#{$primaryStyleName}-link:focus .#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-borderless:focus .#{$primaryStyleName}-caption {
 	border: 1px dotted gray;
 	margin: -1px;
 	}
 
-.v-button-link:active .v-button-caption,
-.v-button-borderless:active .v-button-caption {
+.#{$primaryStyleName}-link:active .#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-borderless:active .#{$primaryStyleName}-caption {
 	border: none;
 	margin: 0;
 	}
 
-.v-button-borderless:active .v-icon {
+.#{$primaryStyleName}-borderless:active .v-icon {
 	opacity: .6;
 	}
 
-.v-button-link .v-icon,
-.v-button-borderless .v-icon {
+.#{$primaryStyleName}-link .v-icon,
+.#{$primaryStyleName}-borderless .v-icon {
 	margin-left: 0;
 	}
 
@@ -221,18 +221,18 @@ body.v-ie & .v-pressed.v-button-borderless .v-button-wrap {
 /*******************************************************************************
  * Icon-on-top
  ******************************************************************************/
-.v-button-icon-on-top.v-button-borderless:focus .v-button-caption {
+.#{$primaryStyleName}-icon-on-top.#{$primaryStyleName}-borderless:focus .#{$primaryStyleName}-caption {
 	margin-top: 1px;
 	}
 
-.v-button-icon-on-top .v-button-caption,
-.v-button-icon-on-top:focus .v-button-caption,
-.v-button-icon-on-top.v-button-borderless:active .v-button-caption {
+.#{$primaryStyleName}-icon-on-top .#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-icon-on-top:focus .#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-icon-on-top.#{$primaryStyleName}-borderless:active .#{$primaryStyleName}-caption {
 	display: block;
 	margin-top: 2px;
 	}
 
-.v-button-icon-on-top .v-icon {
+.#{$primaryStyleName}-icon-on-top .v-icon {
 	margin: 0;
 	}
 
@@ -240,7 +240,7 @@ body.v-ie & .v-pressed.v-button-borderless .v-button-wrap {
 /*******************************************************************************
  * Icon-on-right
  ******************************************************************************/
-.v-button-icon-on-right .v-icon {
+.#{$primaryStyleName}-icon-on-right .v-icon {
 	float: right;
 	margin-left: 3px;
 	margin-right: -0.5em;
@@ -250,11 +250,11 @@ body.v-ie & .v-pressed.v-button-borderless .v-button-wrap {
 /*******************************************************************************
  * Icon-only
  ******************************************************************************/
-.v-button-icon-only .v-button-caption {
+.#{$primaryStyleName}-icon-only .#{$primaryStyleName}-caption {
 	display: none;
 	}
 
-.v-button-icon-only .v-icon {
+.#{$primaryStyleName}-icon-only .v-icon {
 	margin-right: -.5em;
 	}
 
diff --git a/WebContent/VAADIN/themes/chameleon/components/label/label.scss b/WebContent/VAADIN/themes/chameleon/components/label/label.scss
index a1c75ad2f1..5952ee2802 100644
--- a/WebContent/VAADIN/themes/chameleon/components/label/label.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/label/label.scss
@@ -1,40 +1,40 @@
-@mixin chameleon-label {
+@mixin chameleon-label($primaryStyleName : v-label) {
 
 /*******************************************************************************
  * Different headers
  ******************************************************************************/
-.v-label-h1,
-.v-label h1,
-.v-label-h2,
-.v-label h2,
-.v-label-h3,
-.v-label h3,
-.v-label-h4,
-.v-label h4 {
+.#{$primaryStyleName}-h1,
+.#{$primaryStyleName} h1,
+.#{$primaryStyleName}-h2,
+.#{$primaryStyleName} h2,
+.#{$primaryStyleName}-h3,
+.#{$primaryStyleName} h3,
+.#{$primaryStyleName}-h4,
+.#{$primaryStyleName} h4 {
 	margin: 0;
 	font-weight: bold;
 	}
 
-.v-label-h1,
-.v-label h1 {
+.#{$primaryStyleName}-h1,
+.#{$primaryStyleName} h1 {
 	padding: .75em 0 .5em 0;
 	font-size: 1.85em;
 	}
 
-.v-label-h2,
-.v-label h2 {
+.#{$primaryStyleName}-h2,
+.#{$primaryStyleName} h2 {
 	padding: .67em 0 .33em 0;
 	font-size: 1.4em;
 	}
 
-.v-label-h3,
-.v-label h3 {
+.#{$primaryStyleName}-h3,
+.#{$primaryStyleName} h3 {
 	margin: .71em 0 .29em 0;
 	font-size: 1.1em;
 	}
 
-.v-label-h4,
-.v-label h4 {
+.#{$primaryStyleName}-h4,
+.#{$primaryStyleName} h4 {
 	padding: .23em 0;
 	font-size: 1em;
 	}
@@ -43,7 +43,7 @@
 /*******************************************************************************
  * Big
  ******************************************************************************/
-.v-label-big {
+.#{$primaryStyleName}-big {
 	font-size: 1.2em;
 	}
 
@@ -51,7 +51,7 @@
 /*******************************************************************************
  * Small
  ******************************************************************************/
-.v-label-small {
+.#{$primaryStyleName}-small {
 	font-size: 0.9em;
 	line-height: 1.3;
 	opacity: .8;
@@ -62,7 +62,7 @@
 /*******************************************************************************
  * Tiny
  ******************************************************************************/
-.v-label-tiny {
+.#{$primaryStyleName}-tiny {
 	font-size: 0.85em;
 	line-height: 1.2;
 	opacity: .7;
@@ -73,8 +73,8 @@
 /*******************************************************************************
  * Warning & error
  ******************************************************************************/
-&.v-app .v-label-warning,
-&.v-app .v-label-error {
+&.v-app .#{$primaryStyleName}-warning,
+&.v-app .#{$primaryStyleName}-error {
 	color: #574734;
 	background: #fffec8 url(../../img/label-warning-icon.png) no-repeat .2em 50%;
 	white-space: nowrap;
@@ -87,7 +87,7 @@
 	text-shadow: none;
 	}
 
-&.v-app .v-label-error {
+&.v-app .#{$primaryStyleName}-error {
 	color: #fff;
 	font-weight: bold;
 	background: #c22f24 url(../../img/label-error-icon.png) no-repeat .2em 50%;
@@ -98,14 +98,14 @@
 /*******************************************************************************
  * Big warning & big error
  ******************************************************************************/
-.v-label-big.v-label-warning,
-.v-label-big.v-label-error {
+.#{$primaryStyleName}-big.#{$primaryStyleName}-warning,
+.#{$primaryStyleName}-big.#{$primaryStyleName}-error {
 	background-image: url(../../img/label-warning-icon-big.png);
 	background-position: 0 50%;
 	padding: .5em 1em .5em 3em;
 	}
 
-.v-label-big.v-label-error {
+.#{$primaryStyleName}-big.#{$primaryStyleName}-error {
 	background-image: url(../../img/label-error-icon-big.png);
 	}
 
@@ -113,7 +113,7 @@
 /*******************************************************************************
  * Loading
  ******************************************************************************/
-&.v-app .v-label-loading {
+&.v-app .#{$primaryStyleName}-loading {
 	height: 32px;
 	line-height: 32px;
 	background-image: url(../../../base/common/img/loading-indicator.gif);
diff --git a/WebContent/VAADIN/themes/chameleon/components/menubar/menubar.scss b/WebContent/VAADIN/themes/chameleon/components/menubar/menubar.scss
index 55ade4c060..b2cba85067 100644
--- a/WebContent/VAADIN/themes/chameleon/components/menubar/menubar.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/menubar/menubar.scss
@@ -1,26 +1,26 @@
-@mixin chameleon-menubar {
+@mixin chameleon-menubar($primaryStyleName : v-menubar) {
 
-.v-menubar {
+.#{$primaryStyleName} {
 	padding: 0 .4em;
 	background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x;
 	border: 1px solid #b3b3b3;
 	border-width: 1px 0;
 	}
 
-.v-menubar .v-menubar-menuitem {
+.#{$primaryStyleName} .#{$primaryStyleName}-menuitem {
 	padding: .2em .5em;
 	line-height: normal;
 	}
 
-.v-menubar-submenu .v-menubar-menuitem {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem {
 	padding-right:1.5em;
 	}
 
-.v-menubar-submenu .v-menubar-submenu-indicator {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-submenu-indicator {
 	margin-top: .1em;
 	}
 
-.v-menubar-submenu .v-menubar-menuitem-selected {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-selected {
 	background-image: url(../../img/grad-light-top2.png);
 	background-position: 0 -1px;
 	}
diff --git a/WebContent/VAADIN/themes/chameleon/components/notification/notification.scss b/WebContent/VAADIN/themes/chameleon/components/notification/notification.scss
index 020c29ed09..1218b476f5 100644
--- a/WebContent/VAADIN/themes/chameleon/components/notification/notification.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/notification/notification.scss
@@ -1,6 +1,6 @@
-@mixin chameleon-notification {
+@mixin chameleon-notification($primaryStyleName : v-Notification) {
 
-div.v-Notification {
+div.#{$primaryStyleName} {
 	-moz-border-radius: 0;
 	-webkit-border-radius: 0;
 	border-radius: 0;
@@ -10,34 +10,34 @@ div.v-Notification {
 	box-shadow: 0 2px 5px rgba(0,0,0,.7);
 	}
 
-.v-Notification p {
+.#{$primaryStyleName} p {
 	line-height: 1.3;
 	}
 
-div.v-Notification-warning {
+div.#{$primaryStyleName}-warning {
 	background-color: #fffec8;
 	color: #574734;
 	border: 2px solid #fee3af;
 	}
 
-div.v-Notification-warning h1 {
+div.#{$primaryStyleName}-warning h1 {
 	padding-left: 44px;
 	background: transparent url(../../img/label-warning-icon-big.png) no-repeat 0 50%;
 	}
 
-div.v-Notification-error {
+div.#{$primaryStyleName}-error {
 	color: #fff;
 	text-shadow: 0 1px 2px rgba(0,0,0,.3);
 	background: #c22f24 url(../../img/error-close.png) no-repeat right top;
 	border: 2px solid #ca3030;
 	}
 
-div.v-Notification-error h1 {
+div.#{$primaryStyleName}-error h1 {
 	padding-left: 44px;
 	background: transparent url(../../img/label-error-icon-big.png) no-repeat 0 50%;
 	}
 
-div.v-Notification-tray {
+div.#{$primaryStyleName}-tray {
 	color: #fff;
 	margin: 0 5px 5px 0;
 	background: #3b3b3b url(../../img/grad-light-top2.png) repeat-x;
@@ -49,17 +49,17 @@ div.v-Notification-tray {
 	text-shadow: 0 1px 1px rgba(0,0,0,.5);
 	}
 
-.v-Notification-tray h1 {
+.#{$primaryStyleName}-tray h1 {
 	font-size: 14px;
 	line-height: 18px;
 	}
 
-.v-Notification-tray p {
+.#{$primaryStyleName}-tray p {
 	font-size: 12px;
 	font-weight: normal;
 	}
 
-div.v-Notification-system {
+div.#{$primaryStyleName}-system {
 	color: #fff;
 	border: none;
 	background-color: #b40000;
diff --git a/WebContent/VAADIN/themes/chameleon/components/panel/panel.scss b/WebContent/VAADIN/themes/chameleon/components/panel/panel.scss
index 88b3d7b804..bc6a8f555c 100644
--- a/WebContent/VAADIN/themes/chameleon/components/panel/panel.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/panel/panel.scss
@@ -1,6 +1,6 @@
-@mixin chameleon-panel {
+@mixin chameleon-panel($primaryStyleName : v-panel) {
 
-.v-panel-caption {
+.#{$primaryStyleName}-caption {
 	background: #b9dcff;
 	font-size: 1.2em;
 	border: 1px solid #b3b3b3;
@@ -8,21 +8,21 @@
 	padding: .2em .6em;
 	}
 
-.v-panel-nocaption {
+.#{$primaryStyleName}-nocaption {
 	padding: 0;
 	height: 0;
 	overflow: hidden;
 	border-top: 1px solid #b3b3b3;
 	}
 
-.v-panel-content {
+.#{$primaryStyleName}-content {
 	background: #fff;
 	border: 1px solid #b3b3b3;
 	border-top: none;
 	border-bottom: none;
 	}
 
-.v-panel-deco {
+.#{$primaryStyleName}-deco {
 	height: 0;
 	overflow: hidden;
 	border-top: 1px solid #b3b3b3;
@@ -32,13 +32,13 @@
 /*******************************************************************************
  * Borderless
  ******************************************************************************/
-div.v-panel-caption-borderless {
+div.#{$primaryStyleName}-caption-borderless {
 	border: none;
 	}
 
-div.v-panel-nocaption-borderless,
-div.v-panel-content-borderless,
-div.v-panel-deco-borderless {
+div.#{$primaryStyleName}-nocaption-borderless,
+div.#{$primaryStyleName}-content-borderless,
+div.#{$primaryStyleName}-deco-borderless {
 	border: none;
 	background: transparent;
 	}
@@ -47,13 +47,13 @@ div.v-panel-deco-borderless {
 /*******************************************************************************
  * Light
  ******************************************************************************/
-.v-panel-light .v-panel-caption-light {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-caption-light {
 	background: transparent;
 	font-weight: normal;
 	border-bottom: 1px solid #b3b3b3;
 	}
 
-div.v-panel-content-light {
+div.#{$primaryStyleName}-content-light {
 	background: transparent;
 	}
 
@@ -61,7 +61,7 @@ div.v-panel-content-light {
 /*******************************************************************************
  * Bubble
  ******************************************************************************/
-.v-panel-bubble .v-panel-captionwrap {
+.#{$primaryStyleName}-bubble .#{$primaryStyleName}-captionwrap {
 	border: 1px solid #b3b3b3;
 	border-bottom: none;
 	background: #fff;
@@ -73,7 +73,7 @@ div.v-panel-content-light {
 	overflow: hidden;
 	}
 
-.v-panel-bubble .v-panel-caption-bubble {
+.#{$primaryStyleName}-bubble .#{$primaryStyleName}-caption-bubble {
 	border: none;
 	background-image: url(../../img/grad-light-top.png);
 	background-repeat: repeat-x;
@@ -89,13 +89,13 @@ div.v-panel-content-light {
 	padding: .3em .6em;
 	}
 
-.v-panel-nocaption-bubble {
+.#{$primaryStyleName}-nocaption-bubble {
 	padding: 0;
 	margin: 0;
 	border: none;
 	}
 
-.v-panel-deco-bubble {
+.#{$primaryStyleName}-deco-bubble {
 	height: 2px;
 	border: 1px solid #b3b3b3;
 	border-top: none;
@@ -110,14 +110,14 @@ div.v-panel-content-light {
 /*******************************************************************************
  * Borderless Bubble
  ******************************************************************************/
-div.v-panel-borderless .v-panel-captionwrap,
-div.v-panel-borderless .v-panel-deco-bubble {
+div.#{$primaryStyleName}-borderless .#{$primaryStyleName}-captionwrap,
+div.#{$primaryStyleName}-borderless .#{$primaryStyleName}-deco-bubble {
 	border: none;
 	padding: 0;
 	background: transparent;
 	}
 
-div.v-panel-borderless .v-panel-content-bubble {
+div.#{$primaryStyleName}-borderless .#{$primaryStyleName}-content-bubble {
 	background: transparent;
 	}
 
diff --git a/WebContent/VAADIN/themes/chameleon/components/popupview/popupview.scss b/WebContent/VAADIN/themes/chameleon/components/popupview/popupview.scss
index 88e13cb46d..978ca56391 100644
--- a/WebContent/VAADIN/themes/chameleon/components/popupview/popupview.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/popupview/popupview.scss
@@ -1,6 +1,6 @@
-@mixin chameleon-popupview {
+@mixin chameleon-popupview($primaryStyleName : v-popupview)  {
 
-.v-popupview-popup {
+.#{$primaryStyleName}-popup {
 	padding: .3em .4em;
 	}
 
diff --git a/WebContent/VAADIN/themes/chameleon/components/progressindicator/progressindicator.scss b/WebContent/VAADIN/themes/chameleon/components/progressindicator/progressindicator.scss
index 6bacf31e3e..56eb2cc6c9 100644
--- a/WebContent/VAADIN/themes/chameleon/components/progressindicator/progressindicator.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/progressindicator/progressindicator.scss
@@ -1,6 +1,6 @@
-@mixin chameleon-progressindicator {
+@mixin chameleon-progressindicator($primaryStyleName : v-progressindicator) {
 
-.v-progressindicator-wrapper {
+.#{$primaryStyleName}-wrapper {
 	border-radius: 2px;
 	-webkit-border-radius: 2px;
 	-moz-border-radius: 2px;
@@ -10,7 +10,7 @@
 	line-height: 1px;
 	}
 
-.v-progressindicator-indicator {
+.#{$primaryStyleName}-indicator {
 	border-radius: 2px;
 	-webkit-border-radius: 2px;
 	-moz-border-radius: 2px;
@@ -24,12 +24,12 @@
 /*******************************************************************************
  * Small
  ******************************************************************************/
-.v-progressindicator-small {
+.#{$primaryStyleName}-small {
 	width: 110px;
 	}
 
-.v-progressindicator-small .v-progressindicator-wrapper,
-.v-progressindicator-small .v-progressindicator-indicator {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-wrapper,
+.#{$primaryStyleName}-small .#{$primaryStyleName}-indicator {
 	height: 2px;
 	border-radius: 1px;
 	-webkit-border-radius: 1px;
@@ -40,12 +40,12 @@
 /*******************************************************************************
  * Big
  ******************************************************************************/
-.v-progressindicator-big {
+.#{$primaryStyleName}-big {
 	width: 250px;
 	}
 
-.v-progressindicator-big .v-progressindicator-wrapper,
-.v-progressindicator-big .v-progressindicator-indicator {
+.#{$primaryStyleName}-big .#{$primaryStyleName}-wrapper,
+.#{$primaryStyleName}-big .#{$primaryStyleName}-indicator {
 	height: 14px;
 	border-radius: 4px;
 	-webkit-border-radius: 4px;
@@ -56,17 +56,17 @@
 /*******************************************************************************
  * Indeterminates
  ******************************************************************************/
-.v-progressindicator-indeterminate.v-progressindicator-big {
+.#{$primaryStyleName}-indeterminate.#{$primaryStyleName}-big {
 	width: 42px;
 	height: 42px;
 	background: #fff url(../../../base/common/img/ajax-loader-big.gif) no-repeat 50%;
 	}
 
-.v-progressindicator-indeterminate.v-disabled {
+.#{$primaryStyleName}-indeterminate.v-disabled {
 	display: none;
 	}
 
-.v-progressindicator-indeterminate.v-progressindicator-bar {
+.#{$primaryStyleName}-indeterminate.#{$primaryStyleName}-bar {
 	display: block;
 	width: 150px;
 	height: 9px;
@@ -75,17 +75,17 @@
 	-moz-border-radius: 2px;
 	}
 
-.v-progressindicator-indeterminate.bar.v-progressindicator-small {
+.#{$primaryStyleName}-indeterminate.bar.#{$primaryStyleName}-small {
 	width: 110px;
 	height: 4px;
 	}
 
-.v-progressindicator-indeterminate.bar.v-progressindicator-big {
+.#{$primaryStyleName}-indeterminate.bar.#{$primaryStyleName}-big {
 	width: 200px;
 	height: 16px;
 	}
 
-.v-progressindicator-indeterminate.bar .v-progressindicator-wrapper {
+.#{$primaryStyleName}-indeterminate.bar .#{$primaryStyleName}-wrapper {
 	display: block;
 	background: #fff url(../../img/indeterminate-progress.gif);
 	border-radius: 3px;
@@ -94,7 +94,7 @@
 	overflow: hidden;
 	}
 
-.v-progressindicator-indeterminate.bar .v-progressindicator-indicator {
+.#{$primaryStyleName}-indeterminate.bar .#{$primaryStyleName}-indicator {
 	display: block;
 	background: transparent url(../../img/grad-light-top.png) repeat-x;
 	border: none;
@@ -105,11 +105,11 @@
 	overflow: hidden;
 	}
 
-.v-progressindicator-indeterminate.bar.v-progressindicator-small .v-progressindicator-indicator {
+.#{$primaryStyleName}-indeterminate.bar.#{$primaryStyleName}-small .#{$primaryStyleName}-indicator {
 	background: transparent;
 	}
 
-.v-progressindicator-indeterminate.bar.v-disabled .v-progressindicator-indicator {
+.#{$primaryStyleName}-indeterminate.bar.v-disabled .#{$primaryStyleName}-indicator {
 	background: #fff;
 	}
 
diff --git a/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss b/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss
index bc0d75e35b..7810e818bf 100644
--- a/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss
@@ -1,10 +1,10 @@
-@mixin chameleon-selects {
+@mixin chameleon-selects($primaryStyleName : v-filterselect) {
 
-.v-filterselect {
+.#{$primaryStyleName} {
 	overflow: hidden;
 	}
 
-&.v-app input.v-filterselect-input {
+&.v-app input.#{$primaryStyleName}-input {
 	margin: 0;
 	padding: 0;
 	border: none;
@@ -12,72 +12,72 @@
 	line-height: normal;
 	}
 
-&.v-app input.v-filterselect-input[type=text] {
+&.v-app input.#{$primaryStyleName}-input[type=text] {
 	padding: 0;
 	}
 
-.v-filterselect-focus .v-filterselect-input,
-.v-filterselect .v-filterselect-input:focus {
+.#{$primaryStyleName}-focus .#{$primaryStyleName}-input,
+.#{$primaryStyleName} .#{$primaryStyleName}-input:focus {
 	outline: none;
 	}
 
-.v-filterselect-big.v-filterselect-search {
+.#{$primaryStyleName}-big.#{$primaryStyleName}-search {
 	padding-left: 22px;
 	}
 
-.v-filterselect-button {
+.#{$primaryStyleName}-button {
 	width: 16px;
 	height: 1.2em;
 	background-position: -5px -11px;
 	opacity: .4;
 	}
 
-.v-filterselect-button:hover {
+.#{$primaryStyleName}-button:hover {
 	opacity: .7;
 	}
 
-.v-filterselect-button:active {
+.#{$primaryStyleName}-button:active {
 	opacity: 1;
 	}
 
-.v-filterselect-small .v-filterselect-button {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-button {
 	height: 0.95em;
 	background-position: -5px -12px;
 	}
 
-.v-filterselect-suggestpopup {
+.#{$primaryStyleName}-suggestpopup {
 	margin-top: .4em;
 	}
-.v-filterselect-suggestmenu tr {
+.#{$primaryStyleName}-suggestmenu tr {
     line-height:1.4em;
 }	
 
-&.v-app .v-filterselect-suggestpopup-small td {
+&.v-app .#{$primaryStyleName}-suggestpopup-small td {
 	font-size: .85em;
 	}
 
-&.v-app .v-filterselect-suggestpopup-big td {
+&.v-app .#{$primaryStyleName}-suggestpopup-big td {
 	font-size: 1.1em;
 	}
 
-.v-filterselect-big .v-filterselect-button {
+.#{$primaryStyleName}-big .#{$primaryStyleName}-button {
 	height: 1.4em;
 	background-position: -5px -9px;
 	}
 
-.v-filterselect-search .v-filterselect-button {
+.#{$primaryStyleName}-search .#{$primaryStyleName}-button {
 	width: 0;
 	overflow: hidden;
 	}
 
-.v-filterselect-prompt .v-filterselect-input {
+.#{$primaryStyleName}-prompt .#{$primaryStyleName}-input {
 	font-style: normal;
 	}
 
-.v-filterselect-prevpage-off,
-.v-filterselect-nextpage-off,
-.v-filterselect-prevpage,
-.v-filterselect-nextpage {
+.#{$primaryStyleName}-prevpage-off,
+.#{$primaryStyleName}-nextpage-off,
+.#{$primaryStyleName}-prevpage,
+.#{$primaryStyleName}-nextpage {
 	border-style: solid;
 	border-width: 1px 0;
 	border-color: #b3b3b3;
@@ -89,29 +89,29 @@
 	-ms-user-select: none;
 	}
 
-.v-filterselect-prevpage:active,
-.v-filterselect-nextpage:active {
+.#{$primaryStyleName}-prevpage:active,
+.#{$primaryStyleName}-nextpage:active {
 	// TODO check - was missing a part of the rule
 	background-image: #c9c9c9 url(../../img/grad-dark-bottom2.png);
 	background-position: left bottom;
 	}
 
-.v-filterselect-prevpage-off span,
-.v-filterselect-nextpage-off span,
-.v-filterselect-prevpage span,
-.v-filterselect-nextpage span {
+.#{$primaryStyleName}-prevpage-off span,
+.#{$primaryStyleName}-nextpage-off span,
+.#{$primaryStyleName}-prevpage span,
+.#{$primaryStyleName}-nextpage span {
 	display: block;
 	text-indent: -9999px;
 	height: 12px;
 	background: transparent url(../../../base/common/img/sprites.png) no-repeat 50% 3px;
 	}
 
-.v-filterselect-nextpage-off span,
-.v-filterselect-nextpage span {
+.#{$primaryStyleName}-nextpage-off span,
+.#{$primaryStyleName}-nextpage span {
 	background-position: 50% -12px;
 	}
 
-.v-filterselect-status {
+.#{$primaryStyleName}-status {
 	font-size: .85em;
 	margin: 1px 0 -3px;
 	user-select: none;
@@ -120,16 +120,16 @@
 	-ms-user-select: none;
 	}
 
-.v-filterselect-suggestmenu .gwt-menuItem-selected {
+.#{$primaryStyleName}-suggestmenu .gwt-menuItem-selected {
 	background-image: url(../../img/grad-light-top2.png);
 	background-position: 0 -1px;
 	}
 
-.v-filterselect-suggestpopup-small .v-filterselect-status {
+.#{$primaryStyleName}-suggestpopup-small .#{$primaryStyleName}-status {
 	font-size: .8em;
 	}
 
-.v-filterselect-suggestpopup-big .v-filterselect-status {
+.#{$primaryStyleName}-suggestpopup-big .#{$primaryStyleName}-status {
 	font-size: .9em;
 	}
 
@@ -145,13 +145,13 @@
 /*******************************************************************************
  * Non-editable combobox (i.e. themable select)
  ******************************************************************************/
-.v-filterselect-select-button {
+.#{$primaryStyleName}-select-button {
 	background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x;
 	position: relative;
 	padding: .3em .5em;
 	}
 
-.v-filterselect-select-button .v-filterselect-input {
+.#{$primaryStyleName}-select-button .#{$primaryStyleName}-input {
 	display: block;
 	width: 100% !important;
 	user-select: none;
@@ -159,7 +159,7 @@
 	-webkit-user-select: none;
 	}
 
-.v-filterselect-select-button .v-filterselect-button {
+.#{$primaryStyleName}-select-button .#{$primaryStyleName}-button {
 	position: absolute;
 	width: 100%;
 	top: 0;
diff --git a/WebContent/VAADIN/themes/chameleon/components/slider/slider.scss b/WebContent/VAADIN/themes/chameleon/components/slider/slider.scss
index bef69b3472..30c5eb85cb 100644
--- a/WebContent/VAADIN/themes/chameleon/components/slider/slider.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/slider/slider.scss
@@ -1,6 +1,6 @@
-@mixin chameleon-slider {
+@mixin chameleon-slider($primaryStyleName : v-slider) {
 
-.v-slider {
+.#{$primaryStyleName} {
 	border-top: 1px solid #9a9c9e;
 	border-bottom: 1px solid #bdbfc1;
 	margin: 3px 0;
@@ -9,7 +9,7 @@
 	-moz-border-radius: 3px;
 	}
 
-.v-slider-base {
+.#{$primaryStyleName}-base {
 	height: 4px;
 	background: #e0e2e2 url(../../img/grad-dark-top2.png) repeat-x;
 	border-top: 1px solid #adb0b1;
@@ -20,7 +20,7 @@
 	-moz-border-radius: 2px;
 	}
 
-.v-slider-handle {
+.#{$primaryStyleName}-handle {
 	background: #c9c9c9 url(../../img/grad-dark-bottom2.png) repeat-x left bottom;
 	border: 1px solid #b3b3b3;
 	width: 10px;
@@ -34,23 +34,23 @@
 	cursor: pointer;
 	}
 
-.v-slider-handle-active {
+.#{$primaryStyleName}-handle-active {
 	background-color: #afafaf;
 	}
 
-.v-slider-vertical {
+.#{$primaryStyleName}-vertical {
 	width: auto;
 	margin: 0 4px;
 	border-width: 0 1px;
 	}
 
-.v-slider-vertical .v-slider-base {
+.#{$primaryStyleName}-vertical .#{$primaryStyleName}-base {
 	background-image: none;
 	width: 4px;
 	border-width: 1px 1px 0;
 	}
 
-.v-slider-vertical .v-slider-handle {
+.#{$primaryStyleName}-vertical .#{$primaryStyleName}-handle {
 	width: 10px;
 	height: 10px;
 	margin: 0;
diff --git a/WebContent/VAADIN/themes/chameleon/components/splitpanel/splitpanel.scss b/WebContent/VAADIN/themes/chameleon/components/splitpanel/splitpanel.scss
index e2bcf0a909..2496be6513 100644
--- a/WebContent/VAADIN/themes/chameleon/components/splitpanel/splitpanel.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/splitpanel/splitpanel.scss
@@ -1,21 +1,21 @@
-@mixin chameleon-splitpanel {
+@mixin chameleon-splitpanel($primaryStyleName : v-splitpanel) {
 
-.v-splitpanel-hsplitter div,
-.v-splitpanel-vsplitter div {
+.#{$primaryStyleName}-hsplitter div,
+.#{$primaryStyleName}-vsplitter div {
 	background: transparent url(../../img/split-handle.png) no-repeat 2px 50%;
 	margin: 0 -1px;
 	width: 9px;
 	}
 
-.v-splitpanel-vsplitter div {
+.#{$primaryStyleName}-vsplitter div {
 	background-position: 50% 2px;
 	margin: -1px 0;
 	width: auto;
 	height: 9px;
 	}
 
-.v-splitpanel-hsplitter,
-.v-splitpanel-hsplitter-locked {
+.#{$primaryStyleName}-hsplitter,
+.#{$primaryStyleName}-hsplitter-locked {
 	border-style: solid;
 	border-width: 0 1px;
 	border-color: #b0b0b0;
@@ -23,8 +23,8 @@
 	background: #b3b3b3 url(../../img/grad-light-left.png) repeat-y;
 	}
 
-.v-splitpanel-vsplitter,
-.v-splitpanel-vsplitter-locked {
+.#{$primaryStyleName}-vsplitter,
+.#{$primaryStyleName}-vsplitter-locked {
 	border-style: solid;
 	border-width: 1px 0;
 	border-color: #b0b0b0;
@@ -35,15 +35,15 @@
 /*******************************************************************************
  * Small
  ******************************************************************************/
-&.v-app .v-splitpanel-hsplitter-small,
-&.v-app .v-splitpanel-hsplitter-small-locked {
+&.v-app .#{$primaryStyleName}-hsplitter-small,
+&.v-app .#{$primaryStyleName}-hsplitter-small-locked {
 	width: 1px;
 	border: none;
 	background-image: none;
 	}
 
-&.v-app .v-splitpanel-vsplitter-small,
-&.v-app .v-splitpanel-vsplitter-small-locked {
+&.v-app .#{$primaryStyleName}-vsplitter-small,
+&.v-app .#{$primaryStyleName}-vsplitter-small-locked {
 	height: 1px;
 	border: none;
 	background-image: none;
@@ -51,13 +51,13 @@
 	line-height: 1px;
 	}
 
-.v-splitpanel-hsplitter-small div {
+.#{$primaryStyleName}-hsplitter-small div {
 	width: 7px;
 	margin-left: -2px;
 	background: transparent;
 	}
 
-.v-splitpanel-vsplitter-small div {
+.#{$primaryStyleName}-vsplitter-small div {
 	height: 7px;
 	margin-top: -2px;
 	background: transparent;
diff --git a/WebContent/VAADIN/themes/chameleon/components/table/table.scss b/WebContent/VAADIN/themes/chameleon/components/table/table.scss
index 8ecc1878ae..9a90222c86 100644
--- a/WebContent/VAADIN/themes/chameleon/components/table/table.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/table/table.scss
@@ -1,31 +1,31 @@
-@mixin chameleon-table {
+@mixin chameleon-table($primaryStyleName : v-table) {
 
-.v-table-header-wrap,
-.v-table-header-drag {
+.#{$primaryStyleName}-header-wrap,
+.#{$primaryStyleName}-header-drag {
 	background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x;
 	height: 1.4em;
 	line-height: normal;
 	}
 
-.v-table-caption-container,
-.v-table-header-drag {
+.#{$primaryStyleName}-caption-container,
+.#{$primaryStyleName}-header-drag {
 	padding-top: .2em;
 	padding-right: 4px;
 	}
 
-.v-table-header-drag {
+.#{$primaryStyleName}-header-drag {
 	padding-left: .3em;
 	}
 
-.v-table-resizer {
+.#{$primaryStyleName}-resizer {
 	background: transparent;
 	border-right: 1px solid #b3b3b3;
 	padding-left: 1px;
 	height: 1.4em;
 	}
 
-/* Targets the same element as .v-table-resizer */
-div.v-table-focus-slot-left {
+/* Targets the same element as .#{$primaryStyleName}-resizer */
+div.#{$primaryStyleName}-focus-slot-left {
 	background: transparent;
 	border-left: 2px solid #b3b3b3;
 	border-right: none;
@@ -35,42 +35,42 @@ div.v-table-focus-slot-left {
 	margin: 0;
 	}
 
-.v-table-row,
-.v-table-row-odd {
+.#{$primaryStyleName}-row,
+.#{$primaryStyleName}-row-odd {
 	background: transparent;
 	}
 
-.v-table-generated-row {
+.#{$primaryStyleName}-generated-row {
     background: #c9c9c9;
     }
 
-.v-table tr.v-selected {
+.#{$primaryStyleName} tr.v-selected {
 	background-image: url(../../img/grad-light-top2.png);
 	background-position: 0 -1px;
 	}
 
-div.v-table-focus-slot-right {
+div.#{$primaryStyleName}-focus-slot-right {
 	background: transparent;
 	border-right: 2px solid #b3b3b3;
 	padding-left: 0;
 	margin: 0;
 	}
 
-.v-table-column-selector {
+.#{$primaryStyleName}-column-selector {
 	margin-top: -1.35em;
 	}
 
-.v-table-cell-content {
+.#{$primaryStyleName}-cell-content {
 	border-right: none;
 	padding-right: 7px;
 	}
 	
-.v-table-caption-container .v-icon {
+.#{$primaryStyleName}-caption-container .v-icon {
 	vertical-align: middle;
 	margin: -0.37em 2px 0 0;
 	}
 
-.v-table-header-drag .v-icon {
+.#{$primaryStyleName}-header-drag .v-icon {
 	vertical-align: middle;
 	}
 
@@ -91,7 +91,7 @@ div.v-table-focus-slot-right {
 	background-image: url(../../icons/bullet-white.png);
 	}
 
-.v-table-scrollposition {
+.#{$primaryStyleName}-scrollposition {
 	font-size: 0.9em;
 	opacity: .85;
 	filter: alpha(opacity=85);
@@ -100,17 +100,17 @@ div.v-table-focus-slot-right {
 /*******************************************************************************
  * Small
  ******************************************************************************/
-.v-table-small .v-table-caption-container,
-.v-table-small .v-table-body {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-caption-container,
+.#{$primaryStyleName}-small .#{$primaryStyleName}-body {
 	font-size: 0.85em;
 	}
 
-.v-table-small .v-table-resizer, 
-.v-table-small .v-table-header-wrap {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-resizer, 
+.#{$primaryStyleName}-small .#{$primaryStyleName}-header-wrap {
 	height: 1.2em;
 	}
 
-.v-table-small .v-table-column-selector {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-column-selector {
 	margin-top: -1.2em;
 	}
 
@@ -118,28 +118,28 @@ div.v-table-focus-slot-right {
 /*******************************************************************************
  * Big
  ******************************************************************************/
-.v-table-big .v-table-caption-container,
-.v-table-big .v-table-body {
+.#{$primaryStyleName}-big .#{$primaryStyleName}-caption-container,
+.#{$primaryStyleName}-big .#{$primaryStyleName}-body {
 	font-size: 1.2em;
 	}
 
-.v-table-big .v-table-caption-container {
+.#{$primaryStyleName}-big .#{$primaryStyleName}-caption-container {
 	padding-top: .3em;
 	}
 
-.v-table-big .v-table-resizer, 
-.v-table-big .v-table-header-wrap {
+.#{$primaryStyleName}-big .#{$primaryStyleName}-resizer, 
+.#{$primaryStyleName}-big .#{$primaryStyleName}-header-wrap {
 	height: 1.8em;
 	}
 
-.v-table-big .v-table-column-selector {
+.#{$primaryStyleName}-big .#{$primaryStyleName}-column-selector {
 	margin-top: -1.5em;
 	}
 
 /*******************************************************************************
  * Striped
  ******************************************************************************/
-.v-table-striped .v-table-row-odd {
+.#{$primaryStyleName}-striped .#{$primaryStyleName}-row-odd {
 	background-color: #e6e6e6;
 	}
 
@@ -147,7 +147,7 @@ div.v-table-focus-slot-right {
 /*******************************************************************************
  * Strong
  ******************************************************************************/
-.v-table-strong .v-table-caption-container {
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-caption-container {
 	font-weight: bold;
 	}
 
@@ -155,12 +155,12 @@ div.v-table-focus-slot-right {
 /*******************************************************************************
  * Borderless
  ******************************************************************************/
-.v-table-borderless .v-table-header-wrap,
-.v-table-borderless .v-table-body {
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-header-wrap,
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-body {
 	border: none;
 	}
 
-div.v-table-borderless .v-table-body {
+div.#{$primaryStyleName}-borderless .#{$primaryStyleName}-body {
 	background: transparent;
 	}
 
diff --git a/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.scss b/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.scss
index 258df79922..dfa1c51c3a 100644
--- a/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.scss
@@ -1,23 +1,23 @@
-@mixin chameleon-tabsheet {
+@mixin chameleon-tabsheet($primaryStyleName : v-tabsheet) {
 
-.v-tabsheet-spacertd div {
+.#{$primaryStyleName}-spacertd div {
 	border-color: #b3b3b3;
 	border-left: none;
 	}
 
-.v-tabsheet-tabitem {
+.#{$primaryStyleName}-tabitem {
 	border: none;
 	border-bottom: 1px solid #b3b3b3;
 	padding: 0;
 	}
 
-.v-tabsheet-tabitem .v-caption {
+.#{$primaryStyleName}-tabitem .v-caption {
 	padding: .2em .8em;
 	margin: 1px;
 	margin-bottom: 0;
 	}
 
-.v-tabsheet-tabitem-selected {
+.#{$primaryStyleName}-tabitem-selected {
 	background-color: #c9c9c9;
 	border: 1px solid #b3b3b3;
 	border-bottom: none;
@@ -28,7 +28,7 @@
 	overflow: hidden;
 	}
 
-.v-tabsheet-tabitem-selected .v-caption {
+.#{$primaryStyleName}-tabitem-selected .v-caption {
 	background: transparent url(../../img/grad-light-top.png) repeat-x;
 	margin: 0;
 	padding-bottom: .25em;
@@ -38,18 +38,18 @@
 	-moz-border-radius-topright: 2px;
 	}
 
-.v-tabsheet-content {
+.#{$primaryStyleName}-content {
 	background: #fff;
 	border-color: #b3b3b3;
 	}
 
-.v-tabsheet-deco {
+.#{$primaryStyleName}-deco {
 	height: 0;
 	background: transparent;
 	border-top: 1px solid #b3b3b3;
 	}
 
-.v-tabsheet-caption-close {
+.#{$primaryStyleName}-caption-close {
 	width: 14px;
 	height: 15px;
 	overflow: hidden;
@@ -60,18 +60,18 @@
 	margin: .2em 0 0 0;
 	}
 
-.v-tabsheet-caption-close:hover {
+.#{$primaryStyleName}-caption-close:hover {
 	background-position: .5em -25px;
 	}
 
-.v-tabsheet-caption-close:active {
+.#{$primaryStyleName}-caption-close:active {
 	background-position: .5em -50px;
 	}
 
 /*******************************************************************************
  * Scroller
  ******************************************************************************/
-.v-tabsheet-scroller {
+.#{$primaryStyleName}-scroller {
 	height: 14px;
 	margin-top: -1.6em;
 	position: relative;
@@ -83,12 +83,12 @@
 	-moz-border-radius: 6px;
 	}
 
-.v-tabsheet-scrollerPrev,
-.v-tabsheet-scrollerNext,
-.v-tabsheet-scrollerPrev-disabled,
-.v-tabsheet-scrollerNext-disabled,
-.v-tabsheet-scrollerPrev-disabled:active,
-.v-tabsheet-scrollerNext-disabled:active {
+.#{$primaryStyleName}-scrollerPrev,
+.#{$primaryStyleName}-scrollerNext,
+.#{$primaryStyleName}-scrollerPrev-disabled,
+.#{$primaryStyleName}-scrollerNext-disabled,
+.#{$primaryStyleName}-scrollerPrev-disabled:active,
+.#{$primaryStyleName}-scrollerNext-disabled:active {
 	border: 1px solid #b3b3b3;
 	border-width: 0;
 	background: transparent url(../../img/tab-arrows.png) no-repeat 6px 50%;
@@ -99,34 +99,34 @@
 	filter: alpha(opacity=50);
 	}
 
-.v-tabsheet-scroller button::-moz-focus-inner {
+.#{$primaryStyleName}-scroller button::-moz-focus-inner {
 	border: none;
 	padding: 0;
 	}
 
-.v-tabsheet-scrollerNext,
-.v-tabsheet-scrollerNext-disabled,
-.v-tabsheet-scrollerNext-disabled:active {
+.#{$primaryStyleName}-scrollerNext,
+.#{$primaryStyleName}-scrollerNext-disabled,
+.#{$primaryStyleName}-scrollerNext-disabled:active {
 	background-position: -10px 50%;
 	border-left-width: 1px;
 	}
 
-.v-tabsheet-scrollerPrev:hover,
-.v-tabsheet-scrollerNext:hover {
+.#{$primaryStyleName}-scrollerPrev:hover,
+.#{$primaryStyleName}-scrollerNext:hover {
 	opacity: .75;
 	filter: alpha(opacity=75);
 	}
 
-.v-tabsheet-scrollerPrev:active,
-.v-tabsheet-scrollerNext:active {
+.#{$primaryStyleName}-scrollerPrev:active,
+.#{$primaryStyleName}-scrollerNext:active {
 	opacity: 1;
 	filter: none;
 	}
 
-.v-tabsheet-scrollerPrev-disabled,
-.v-tabsheet-scrollerNext-disabled,
-.v-tabsheet-scrollerPrev-disabled:active,
-.v-tabsheet-scrollerNext-disabled:active {
+.#{$primaryStyleName}-scrollerPrev-disabled,
+.#{$primaryStyleName}-scrollerNext-disabled,
+.#{$primaryStyleName}-scrollerPrev-disabled:active,
+.#{$primaryStyleName}-scrollerNext-disabled:active {
 	opacity: .1;
 	filter: alpha(opacity=10);
 	}
@@ -136,11 +136,11 @@
 /*******************************************************************************
  * open-only-closable
  ******************************************************************************/
-.v-tabsheet-open-only-closable .v-tabsheet-caption-close {
+.#{$primaryStyleName}-open-only-closable .#{$primaryStyleName}-caption-close {
 	visibility: hidden;
 	}
 
-.v-tabsheet-open-only-closable .v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
+.#{$primaryStyleName}-open-only-closable .#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close {
 	visibility: visible;
 	}
 
@@ -148,14 +148,14 @@
 /*******************************************************************************
  * Borderless
  ******************************************************************************/
-.v-tabsheet-borderless .v-tabsheet-content-borderless,
-.v-tabsheet-deco-borderless {
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-content-borderless,
+.#{$primaryStyleName}-deco-borderless {
 	border: none;
 	background: transparent;
 	}
 
-.v-tabsheet-tabs-borderless .v-tabsheet-tabitem-selected,
-.v-tabsheet-tabs-borderless .v-tabsheet-tabitem-selected .v-caption {
+.#{$primaryStyleName}-tabs-borderless .#{$primaryStyleName}-tabitem-selected,
+.#{$primaryStyleName}-tabs-borderless .#{$primaryStyleName}-tabitem-selected .v-caption {
 	background-color: transparent;
 	}
 
diff --git a/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss b/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss
index 026a7e5bfe..860d91a6e7 100644
--- a/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss
@@ -1,6 +1,6 @@
-@mixin chameleon-textfield {
+@mixin chameleon-textfield($primaryStyleName : v-textfield) {
 
-input.v-textfield,
+input.#{$primaryStyleName},
 textarea.v-textarea,
 .v-filterselect {
 	line-height: normal;
@@ -17,40 +17,40 @@ textarea.v-textarea,
 	margin: 0;
 	}
 
-input.v-textfield[type="text"],
+input.#{$primaryStyleName}[type="text"],
 textarea.v-textarea,
 .v-filterselect {
 	padding: .2em;
 	}
 
-input.v-textfield[type="text"] {
+input.#{$primaryStyleName}[type="text"] {
 	height: 1.2em;
 	}
 
-input.v-widget.v-textfield[type="text"],
+input.v-widget.#{$primaryStyleName}[type="text"],
 .v-filterselect {
 	height: 1.6em;
 	}
 
-&.v-app input.v-textfield,
+&.v-app input.#{$primaryStyleName},
 &.v-app textarea.v-textarea,
 &.v-app input.v-filterselect-input {
 	color: #222;
 	}
 
-.v-ie & input.v-textfield,
+.v-ie & input.#{$primaryStyleName},
 .v-ie & textarea.v-textarea,
 .v-ie & .v-filterselect {
 	border-top-color: #808080;
 	}
 
-&.v-app input.v-textfield-prompt,
+&.v-app input.#{$primaryStyleName}-prompt,
 &.v-app textarea.v-textarea-prompt {
 	font-style: normal;
 	color: #999;
 	}
 
-input.v-textfield-focus,
+input.#{$primaryStyleName}-focus,
 textarea.v-textarea-focus {
 	background-color: #fffce1;
 	}
@@ -59,7 +59,7 @@ textarea.v-textarea-focus {
 /*******************************************************************************
  * Readonly
  ******************************************************************************/
-input.v-textfield-readonly,
+input.#{$primaryStyleName}-readonly,
 textarea.v-textarea-readonly {
 	border: none;
 	background: transparent;
@@ -69,7 +69,7 @@ textarea.v-textarea-readonly {
 /*******************************************************************************
  * Small
  ******************************************************************************/
-&.v-app input.v-textfield-small,
+&.v-app input.#{$primaryStyleName}-small,
 &.v-app textarea.v-textarea-small,
 .v-datefield-small .v-datefield-textfield,
 .v-datefield-small .v-datefield-button,
@@ -81,7 +81,7 @@ textarea.v-textarea-readonly {
 /*******************************************************************************
  * Big (and big search)
  ******************************************************************************/
-&.v-app input.v-textfield-big,
+&.v-app input.#{$primaryStyleName}-big,
 &.v-app textarea.v-textarea-big,
 .v-datefield-big .v-datefield-textfield,
 .v-datefield-big .v-datefield-button,
@@ -89,7 +89,7 @@ textarea.v-textarea-readonly {
 	font-size: 1.2em;
 	}
 
-input.v-textfield-big[type=text],
+input.#{$primaryStyleName}-big[type=text],
 .v-datefield-big input.v-datefield-textfield[type=text] {
 	padding: .3em;
 	}
@@ -99,14 +99,14 @@ textarea.v-textarea,
 	padding: .3em;
 	}
 
-input.v-textfield-big.v-textfield-search,
+input.#{$primaryStyleName}-big.#{$primaryStyleName}-search,
 .v-filterselect-search.v-filterselect-big {
 	background-image: url(../../img/magnifier-big.png);
 	background-repeat: no-repeat;
 	background-position: 4px 50%;
 	}
 
-input.v-textfield-big.v-textfield-search[type=text] {
+input.#{$primaryStyleName}-big.#{$primaryStyleName}-search[type=text] {
 	padding-left: 26px;
 	}
 
@@ -118,14 +118,14 @@ input.v-textfield-big.v-textfield-search[type=text] {
 /*******************************************************************************
  * Search
  ******************************************************************************/
-input.v-textfield-search,
+input.#{$primaryStyleName}-search,
 .v-filterselect-search {
 	background-image: url(../../img/magnifier.png);
 	background-repeat: no-repeat;
 	background-position: 3px 50%;
 	}
 
-input.v-textfield-search[type=text],
+input.#{$primaryStyleName}-search[type=text],
 .v-filterselect-search {
 	padding-left: 17px;
 	}
diff --git a/WebContent/VAADIN/themes/chameleon/components/tree/tree.scss b/WebContent/VAADIN/themes/chameleon/components/tree/tree.scss
index fc80f51a2a..9b33cd0155 100644
--- a/WebContent/VAADIN/themes/chameleon/components/tree/tree.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/tree/tree.scss
@@ -1,25 +1,25 @@
-@mixin chameleon-tree {
+@mixin chameleon-tree($primaryStyleName : v-tree) {
 
-.v-tree-node-caption {
+.#{$primaryStyleName}-node-caption {
 	margin-left: 16px;
 	}
 
-.v-tree-node span {
+.#{$primaryStyleName}-node span {
 	padding: .1em .3em;
 	border-radius: 2px;
 	-webkit-border-radius: 2px;
 	-moz-border-radius: 2px;
 	}
 
-.v-tree-node-children {
+.#{$primaryStyleName}-node-children {
 	padding-left: 16px;
 	}
 
-.v-tree-node-selected span {
+.#{$primaryStyleName}-node-selected span {
 	background-color: #333;
 	}
 
-.v-tree-connectors .v-tree-node-caption {
+.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-caption {
 	padding-bottom: 1px;
 	}
 
diff --git a/WebContent/VAADIN/themes/chameleon/components/window/window.scss b/WebContent/VAADIN/themes/chameleon/components/window/window.scss
index f1a6b5e529..e9524745f8 100644
--- a/WebContent/VAADIN/themes/chameleon/components/window/window.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/window/window.scss
@@ -1,6 +1,6 @@
-@mixin chameleon-window {
+@mixin chameleon-window($primaryStyleName : v-window) {
 
-.v-window-closebox {
+.#{$primaryStyleName}-closebox {
 	width: 14px;
 	height: 15px;
 	overflow: hidden;
@@ -13,41 +13,41 @@
 	z-index: 2;
 	}
 
-.v-window-closebox:hover {
+.#{$primaryStyleName}-closebox:hover {
 	background-position: 0 -25px;
 	}
 
-.v-window-closebox:active {
+.#{$primaryStyleName}-closebox:active {
 	background-position: 0 -50px;
 	}
 
-.v-window {
+.#{$primaryStyleName} {
 	background-image: none;
 	}
 
-.v-window-wrap {
+.#{$primaryStyleName}-wrap {
 	border-radius: 3px;
 	-webkit-border-radius: 3px;
 	-moz-border-radius: 3px;
 	background-image: url(../../img/grad-light-top.png);
 	background-repeat: repeat-x;
 	}
-.v-window-outerheader {
+.#{$primaryStyleName}-outerheader {
 	padding: .2em 1.7em .5em 1.2em;
 	height: auto;
 	text-align: center;
 	}
 
-.v-window-header {
+.#{$primaryStyleName}-header {
 	font-weight: normal;
 	}
 
-.v-window-footer {
+.#{$primaryStyleName}-footer {
 	height: 0;
 	position: static;
 	}
 
-.v-window-resizebox {
+.#{$primaryStyleName}-resizebox {
 	background: transparent url(../../img/resize.png) no-repeat;
 	width: 14px;
 	height: 14px;