[REF] theme_default: adapt the scss convertion for everything to work

20 files changed, 289 insertions, 362 deletions

diff --git a/addons/theme_default/static/src/scss/bootstrap_overridden.scss b/addons/theme_default/static/src/scss/bootstrap_overridden.scss
new file mode 100644
index 00000000000..b396442df02
--- /dev/null
+++ b/addons/theme_default/static/src/scss/bootstrap_overridden.scss
@@ -0,0 +1,5 @@
+$gray-darker:          lighten(#000, 20%);
+$gray-dark:            lighten(#000, 40%);
+$gray:                 lighten(#000, 55%);
+$gray-light:           lighten(#000, 70%);
+$gray-lighter:         lighten(#000, 80%);
diff --git a/addons/theme_default/static/src/scss/colors.scss b/addons/theme_default/static/src/scss/colors.scss
index e893f5de84e..5e58c0f4c73 100644
--- a/addons/theme_default/static/src/scss/colors.scss
+++ b/addons/theme_default/static/src/scss/colors.scss
@@ -1,79 +1,3 @@
-/* Clean Colors */
-
-$color-blue: #3498DB;
-$color-turquoise: #1ABC9C;
-$color-green: #2ECC71;
-$color-yellow: #F1C40F;
-$color-orange: #E67E22;
-$color-red: #E74C3C;
-$color-pink: #f74b94;
-$color-purple: #9B59B6;
-$color-brown: #7b5844;  
-
-$color-blue-dark: #2980B9;
-$color-turquoise-dark: #16A085;
-$color-green-dark: #27AE60;
-$color-yellow-dark: #f3ac12;
-$color-orange-dark: #D35400;
-$color-red-dark: #C0392B;
-$color-pink-dark: #ea3884;
-$color-purple-dark: #8E44AD;
-$color-brown-dark: #604434;
-
-$color-blue-light: lighten($color-blue, 20%);
-$color-turquoise-light: lighten($color-turquoise, 20%);
-$color-green-light: lighten($color-green, 20%);
-$color-yellow-light: lighten($color-yellow, 20%);
-$color-orange-light: lighten($color-orange, 20%);
-$color-red-light: lighten($color-red, 20%);
-$color-pink-light: lighten($color-pink, 20%);
-$color-purple-light: lighten($color-purple, 20%);
-$color-brown-light: lighten($color-brown, 20%);
-
-$color-clouds: #ECF0F1;
-$color-silver: #BDC3C7;
-$color-concrete: #95A5A6;
-$color-stone: #7F8C8D;
-$color-asphalt: #34495E;
-$color-midnight: #2C3E50;  
-
-
-$color-concrete-dark: #445b5c;
-
-/* +++++ NEW COLORS +++++ */ 
-
-$color-wind: #f7f7f7;
-$color-clay: #e1dcd5; 
-$color-sand: #c5bcb1;
-$color-beach: #f3bf91;
-$color-forest: #254c3a;
-$color-twilight: #3b2c50;
-$color-burgundy: #8e362d;
-$color-marine: #212d3a;
-
-/* GRAYS --------------------------------------------------------- */ 
-
-$gray-darker:          lighten(#000, 20%);
-$gray-dark:            lighten(#000, 40%);
-$gray:                 lighten(#000, 55%);
-$gray-light:           lighten(#000, 70%);
-$gray-lighter:         lighten(#000, 80%);
-
-/* Backgrounds Colors ------------------------------------------------*/
-
-$bg-blue: background($color-blue);
-$bg-turquoise: background($color-turquoise);
-$bg-green: background($color-green); 
-$bg-yellow: background($color-yellow); 
-$bg-orange: background($color-orange); 
-$bg-red: background($color-red); 
-$bg-pink: background($color-pink);
-$bg-purple: background($color-purple); 
-$bg-brown: background($color-brown);
-
-
-/* ---- Default Color HTML Class ---- */
-
 .bg-blue      { background-color: $color-blue;}
 .bg-turquoise { background-color: $color-turquoise;}
 .bg-green     { background-color: $color-green;}
@@ -92,4 +16,4 @@ $bg-brown: background($color-brown);
 .text-red       { color: $color-red;}
 .text-pink      { color: $color-pink;}
 .text-purple    { color: $color-purple;}
-.text-brown     { color: $color-brown;}
\ No newline at end of file
+.text-brown     { color: $color-brown;}
diff --git a/addons/theme_default/static/src/scss/option_color_amethyst.scss b/addons/theme_default/static/src/scss/option_color_amethyst.scss
index ed66abd08ac..a0a7c914930 100644
--- a/addons/theme_default/static/src/scss/option_color_amethyst.scss
+++ b/addons/theme_default/static/src/scss/option_color_amethyst.scss
@@ -1,16 +1,4 @@
-/* GRAYS --------------------------------------------------------- */ 
-
-$gray-darker:            lighten(#000, 30%); 
-
-/* COLORS --------------------------------------------------------- */
-
-$color-primary:         $color-purple;
-$color-success:         $color-purple-dark;	
-$color-info:            $color-twilight;	
-$color-warning:         $color-red-dark;	 
-$color-danger:          $color-midnight;	 
-
-/* COLORED BG -------------------------------------------------------- */ 
+/* COLORED BG -------------------------------------------------------- */
 
 .bg-primary {
     background-color: $color-clouds;
@@ -19,7 +7,7 @@ $color-danger:          $color-midnight;
     background-color: $color-purple;
 }
 .bg-info {
-    background-color: $color-twilight; 
+    background-color: $color-twilight;
 }
 .bg-warning {
     background-color: $color-purple-dark;
@@ -28,20 +16,6 @@ $color-danger:          $color-midnight;
     background-color: $color-midnight;
 }
 
-/* TEXTS & LINKS --------------------------------------------------- */	
-
-$text-muted:        $color-primary;
-$link-color:        $color-primary;
-$link-hover-color:  $color-success;
-
-/* BUTTONS --------------------------------------------------------- */
-
-$btn-primary-bg:                 $color-silver;
-$btn-success-bg:                 $color-concrete;
-$btn-info-bg:                    $color-purple;
-$btn-warning-bg:                 $color-purple-light;
-$btn-danger-bg:                  $color-red;
-
 .btn .fa {
 	color: white;}
 
@@ -51,27 +25,27 @@ $btn-danger-bg:                  $color-red;
 /* TRANSPARENT BG --------------------------------------------------- */
 /* Used in snippets Prx Image Color and Prx Image Shade ------------- */
 
-.bg-transparent-color 		{ background: $color-twilight; opacity: 0.85;} 
-.bg-transparent-shade		{ background: black; opacity: 0.5;} 
+.bg-transparent-color 		{ background: $color-twilight; opacity: 0.85;}
+.bg-transparent-shade		{ background: black; opacity: 0.5;}
 
 /* Footer ----------------------------------------------------------- */
 
 #wrapwrap footer {
    background-color: $color-concrete-dark;
     color: $gray-light;
-    }	
+    }
 footer ul li a {
 	color: $color-clouds;
-	}	
+	}
 footer ul li a:hover {
 	color: white;
     text-decoration: none;
-	}   
+	}
 footer h4 {
 	color: $gray-lighter;
 	padding-bottom: 12px;
     text-transform: uppercase;
     }
 footer .fa {
-    color: $color-concrete; 
-  }
\ No newline at end of file
+    color: $color-concrete;
+  }
diff --git a/addons/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss
new file mode 100644
index 00000000000..a50fa8aaf78
--- /dev/null
+++ b/addons/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss
@@ -0,0 +1,17 @@
+/* GRAYS --------------------------------------------------------- */
+
+$gray-darker:            lighten(#000, 30%);
+
+/* TEXTS & LINKS --------------------------------------------------- */
+
+$text-muted:        $color-primary;
+$link-color:        $color-primary;
+$link-hover-color:  $color-success;
+
+/* BUTTONS --------------------------------------------------------- */
+
+$btn-primary-bg:                 $color-silver;
+$btn-success-bg:                 $color-concrete;
+$btn-info-bg:                    $color-purple;
+$btn-warning-bg:                 $color-purple-light;
+$btn-danger-bg:                  $color-red;
diff --git a/addons/theme_default/static/src/scss/option_color_amethyst_variables.scss b/addons/theme_default/static/src/scss/option_color_amethyst_variables.scss
new file mode 100644
index 00000000000..b770aadd105
--- /dev/null
+++ b/addons/theme_default/static/src/scss/option_color_amethyst_variables.scss
@@ -0,0 +1,7 @@
+/* COLORS --------------------------------------------------------- */
+
+$color-primary:         $color-purple;
+$color-success:         $color-purple-dark;
+$color-info:            $color-twilight;
+$color-warning:         $color-red-dark;
+$color-danger:          $color-midnight;
diff --git a/addons/theme_default/static/src/scss/option_color_cobalt.scss b/addons/theme_default/static/src/scss/option_color_cobalt.scss
index 5c8eae78d53..ed3c6efb5c4 100644
--- a/addons/theme_default/static/src/scss/option_color_cobalt.scss
+++ b/addons/theme_default/static/src/scss/option_color_cobalt.scss
@@ -1,12 +1,4 @@
-/* COLORS --------------------------------------------------------- */
-
-$color-primary:         $color-blue;
-$color-success:         $color-turquoise;
-$color-info:            $color-green;
-$color-warning:         $color-asphalt;
-$color-danger:          $color-midnight;
-
-/* COLORED BG -------------------------------------------------------- */ 
+/* COLORED BG -------------------------------------------------------- */
 
 .bg-primary {
     background-color: $color-wind;
@@ -24,20 +16,6 @@ $color-danger:          $color-midnight;
     background-color: $color-asphalt;
 }
 
-/* TEXTS & LINKS --------------------------------------------------- */  
-
-$text-muted:        $color-primary;
-$link-color:        $color-primary;
-$link-hover-color:  $color-info;
-
-/* BUTTONS --------------------------------------------------------- */
-
-$btn-primary-bg:                 $color-blue;
-$btn-success-bg:                 $color-turquoise;
-$btn-info-bg:                    $color-green;
-$btn-warning-bg:                 $color-orange;
-$btn-danger-bg:                  $color-red;
-
 .btn .fa {
 	color: white;}
 
diff --git a/addons/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss
new file mode 100644
index 00000000000..ab87820cddb
--- /dev/null
+++ b/addons/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss
@@ -0,0 +1,13 @@
+/* TEXTS & LINKS --------------------------------------------------- */
+
+$text-muted:        $color-primary;
+$link-color:        $color-primary;
+$link-hover-color:  $color-info;
+
+/* BUTTONS --------------------------------------------------------- */
+
+$btn-primary-bg:                 $color-blue;
+$btn-success-bg:                 $color-turquoise;
+$btn-info-bg:                    $color-green;
+$btn-warning-bg:                 $color-orange;
+$btn-danger-bg:                  $color-red;
diff --git a/addons/theme_default/static/src/scss/option_color_cobalt_variables.scss b/addons/theme_default/static/src/scss/option_color_cobalt_variables.scss
new file mode 100644
index 00000000000..d2aec3a8772
--- /dev/null
+++ b/addons/theme_default/static/src/scss/option_color_cobalt_variables.scss
@@ -0,0 +1,7 @@
+/* COLORS --------------------------------------------------------- */
+
+$color-primary:         $color-blue;
+$color-success:         $color-turquoise;
+$color-info:            $color-green;
+$color-warning:         $color-asphalt;
+$color-danger:          $color-midnight;
diff --git a/addons/theme_default/static/src/scss/option_color_emerald.scss b/addons/theme_default/static/src/scss/option_color_emerald.scss
index ab1dc35b132..d936425e1f2 100644
--- a/addons/theme_default/static/src/scss/option_color_emerald.scss
+++ b/addons/theme_default/static/src/scss/option_color_emerald.scss
@@ -1,12 +1,4 @@
-/* COLORS --------------------------------------------------------- */
-
-$color-primary:         $color-green;
-$color-success:         $color-turquoise;
-$color-info:            $color-turquoise-dark;
-$color-warning:         $color-asphalt;
-$color-danger:          $color-midnight;
-
-/* COLORED BG -------------------------------------------------------- */ 
+/* COLORED BG -------------------------------------------------------- */
 
 .bg-primary {
     background-color: $color-wind;
@@ -24,20 +16,6 @@ $color-danger:          $color-midnight;
     background-color: $color-forest;
 }
 
-/* TEXTS & LINKS --------------------------------------------------- */  
-
-$text-muted:        $color-success;
-$link-color:        $color-success;
-$link-hover-color:  $color-primary;
-
-/* BUTTONS --------------------------------------------------------- */
-
-$btn-primary-bg:                 $color-green;
-$btn-success-bg:                 $color-turquoise;
-$btn-info-bg:                    $color-blue;
-$btn-warning-bg:                 $color-orange;
-$btn-danger-bg:                  $color-red;
-
 .btn .fa {
 	color: white;}
 
@@ -47,27 +25,27 @@ $btn-danger-bg:                  $color-red;
 /* TRANSPARENT BG --------------------------------------------------- */
 /* Used in snippets Prx Image Color and Prx Image Shade ------------- */
 
-.bg-transparent-color 		{ background: $color-green-dark; opacity: 0.9;} 
-.bg-transparent-shade		{ background: black; opacity: 0.5;} 
+.bg-transparent-color 		{ background: $color-green-dark; opacity: 0.9;}
+.bg-transparent-shade		{ background: black; opacity: 0.5;}
 
 /* Footer ----------------------------------------------------------- */
 
 #wrapwrap footer {
    background-color: $color-concrete-dark;
     color: $gray;
-    }	
+    }
 footer ul li a {
 	color: $color-clouds;
-	}	
+	}
 footer ul li a:hover {
 	color: white;
     text-decoration: none;
-	}   
+	}
 footer h4 {
 	color: $color-silver;
 	padding-bottom: 12px;
     text-transform: uppercase;
     }
 footer .fa {
-    color: $color-clouds; 
-  }	
+    color: $color-clouds;
+  }
diff --git a/addons/theme_default/static/src/scss/option_color_emerald_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_emerald_bs_variables.scss
new file mode 100644
index 00000000000..9b8dec0f38e
--- /dev/null
+++ b/addons/theme_default/static/src/scss/option_color_emerald_bs_variables.scss
@@ -0,0 +1,13 @@
+/* TEXTS & LINKS --------------------------------------------------- */
+
+$text-muted:        $color-success;
+$link-color:        $color-success;
+$link-hover-color:  $color-primary;
+
+/* BUTTONS --------------------------------------------------------- */
+
+$btn-primary-bg:                 $color-green;
+$btn-success-bg:                 $color-turquoise;
+$btn-info-bg:                    $color-blue;
+$btn-warning-bg:                 $color-orange;
+$btn-danger-bg:                  $color-red;
diff --git a/addons/theme_default/static/src/scss/option_color_emerald_variables.scss b/addons/theme_default/static/src/scss/option_color_emerald_variables.scss
new file mode 100644
index 00000000000..73f73b12dd3
--- /dev/null
+++ b/addons/theme_default/static/src/scss/option_color_emerald_variables.scss
@@ -0,0 +1,7 @@
+/* COLORS --------------------------------------------------------- */
+
+$color-primary:         $color-green;
+$color-success:         $color-turquoise;
+$color-info:            $color-turquoise-dark;
+$color-warning:         $color-asphalt;
+$color-danger:          $color-midnight;
diff --git a/addons/theme_default/static/src/scss/option_color_gold.scss b/addons/theme_default/static/src/scss/option_color_gold.scss
index 3cc62a3f1a3..ba6fa843ec5 100644
--- a/addons/theme_default/static/src/scss/option_color_gold.scss
+++ b/addons/theme_default/static/src/scss/option_color_gold.scss
@@ -1,12 +1,4 @@
-/* COLORS --------------------------------------------------------- */
-
-$color-primary:         $color-orange;	
-$color-success:         $color-red;	
-$color-info:            $color-yellow-dark;	
-$color-warning:         $color-red-dark;	 
-$color-danger:          $color-orange-dark;
-
-/* COLORED BG -------------------------------------------------------- */ 
+/* COLORED BG -------------------------------------------------------- */
 
 .bg-primary {
     background-color: $color-sand;
@@ -24,20 +16,6 @@ $color-danger:          $color-orange-dark;
     background-color: $color-orange-dark;
 }
 
-/* TEXTS & LINKS ------------------------------------------------------- */ 
-
-$text-muted:        $gray;
-$link-color:        $color-info;
-$link-hover-color:  $color-primary;
-
-/* BUTTONS --------------------------------------------------------- */
-
-$btn-primary-bg:                 $color-yellow;
-$btn-success-bg:                 $color-orange;
-$btn-info-bg:                    $color-yellow-dark;
-$btn-warning-bg:                 $color-orange-dark;
-$btn-danger-bg:                  $color-red-dark;
-
 .btn .fa {
 	color: white;}
 
@@ -47,22 +25,22 @@ $btn-danger-bg:                  $color-red-dark;
 /* TRANSPARENT BG --------------------------------------------------- */
 /* Used in snippets Prx Image Color and Prx Image Shade ------------- */
 
-.bg-transparent-color 		{ background: $color-orange-dark; opacity: 0.85;} 
-.bg-transparent-shade		{ background: black; opacity: 0.5;} 
+.bg-transparent-color 		{ background: $color-orange-dark; opacity: 0.85;}
+.bg-transparent-shade		{ background: black; opacity: 0.5;}
 
 /* Footer ----------------------------------------------------------- */
 
 #wrapwrap footer {
    background-color: $color-orange-dark;
    color: white;
-    }	
+    }
 footer ul li a {
 	color: $color-beach;
-	}	
+	}
 footer ul li a:hover {
 	color:  $color-yellow;
     text-decoration: none;
-	}   
+	}
 footer h4 {
 	color:  $color-beach;
 	padding-bottom: 12px;
@@ -71,7 +49,3 @@ footer h4 {
 footer .fa {
     color:  $color-beach;
   }	
-
-
-
-
diff --git a/addons/theme_default/static/src/scss/option_color_gold_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_gold_bs_variables.scss
new file mode 100644
index 00000000000..eb10f308be8
--- /dev/null
+++ b/addons/theme_default/static/src/scss/option_color_gold_bs_variables.scss
@@ -0,0 +1,13 @@
+/* TEXTS & LINKS ------------------------------------------------------- */
+
+$text-muted:        $gray;
+$link-color:        $color-info;
+$link-hover-color:  $color-primary;
+
+/* BUTTONS --------------------------------------------------------- */
+
+$btn-primary-bg:                 $color-yellow;
+$btn-success-bg:                 $color-orange;
+$btn-info-bg:                    $color-yellow-dark;
+$btn-warning-bg:                 $color-orange-dark;
+$btn-danger-bg:                  $color-red-dark;
diff --git a/addons/theme_default/static/src/scss/option_color_gold_variables.scss b/addons/theme_default/static/src/scss/option_color_gold_variables.scss
new file mode 100644
index 00000000000..596423eeef0
--- /dev/null
+++ b/addons/theme_default/static/src/scss/option_color_gold_variables.scss
@@ -0,0 +1,7 @@
+/* COLORS --------------------------------------------------------- */
+
+$color-primary:         $color-orange;
+$color-success:         $color-red;
+$color-info:            $color-yellow-dark;
+$color-warning:         $color-red-dark;
+$color-danger:          $color-orange-dark;
diff --git a/addons/theme_default/static/src/scss/option_color_ruby.scss b/addons/theme_default/static/src/scss/option_color_ruby.scss
index 12fce8ea4e6..e87f7168391 100644
--- a/addons/theme_default/static/src/scss/option_color_ruby.scss
+++ b/addons/theme_default/static/src/scss/option_color_ruby.scss
@@ -1,16 +1,4 @@
-/* GRAYS --------------------------------------------------------- */ 
-
-$gray:                   lighten(#000, 50%);
-
-/* COLORS --------------------------------------------------------- */
-
-$color-primary:         $color-red;
-$color-success:         $color-red-dark;
-$color-info:            $color-orange;
-$color-warning:         $color-purple;
-$color-danger:          $color-orange-dark;
-
-/* COLORED BG -------------------------------------------------------- */ 
+/* COLORED BG -------------------------------------------------------- */
 
 .bg-primary {
     background-color: $color-sand;
@@ -28,20 +16,6 @@ $color-danger:          $color-orange-dark;
     background-color: $color-orange-dark;
 }
 
-/* TEXT & LINKS -------------------------------------------------------- */ 
-
-$text-muted:        $gray;
-$link-color:        $color-primary;
-$link-hover-color:  $color-success;
-
-/* BUTTONS --------------------------------------------------------- */
-
-$btn-primary-bg:                 $color-red;
-$btn-success-bg:                 $color-orange;
-$btn-info-bg:                    $color-yellow-dark;
-$btn-warning-bg:                 $color-orange-dark;
-$btn-danger-bg:                  $color-red-dark;
-
 .btn .fa {
 	color: white;}
 
@@ -51,22 +25,22 @@ $btn-danger-bg:                  $color-red-dark;
 /* TRANSPARENT BG --------------------------------------------------- */
 /* Used in snippets Prx Image Color and Prx Image Shade ------------- */
 
-.bg-transparent-color 		{ background: $color-red-dark; opacity: 0.85;} 
-.bg-transparent-shade		{ background: black; opacity: 0.5;} 
+.bg-transparent-color 		{ background: $color-red-dark; opacity: 0.85;}
+.bg-transparent-shade		{ background: black; opacity: 0.5;}
 
 /* Footer ----------------------------------------------------------- */
 
 #wrapwrap footer {
    background-color: $color-burgundy;
    color: $gray-lighter;
-    }	
+    }
 footer ul li a {
 	color: white;
-	}	
+	}
 footer ul li a:hover {
 	color: $color-orange;
     text-decoration: none;
-	}   
+	}
 footer h4 {
 	color: $color-sand;
     padding-bottom: 12px;
@@ -74,5 +48,4 @@ footer h4 {
     }
 footer .fa {
     color: $color-red;
-  }	
-
+  }
diff --git a/addons/theme_default/static/src/scss/option_color_ruby_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_ruby_bs_variables.scss
new file mode 100644
index 00000000000..7fd168c8bd7
--- /dev/null
+++ b/addons/theme_default/static/src/scss/option_color_ruby_bs_variables.scss
@@ -0,0 +1,17 @@
+/* GRAYS --------------------------------------------------------- */
+
+$gray:                   lighten(#000, 50%);
+
+/* TEXT & LINKS -------------------------------------------------------- */
+
+$text-muted:        $gray;
+$link-color:        $color-primary;
+$link-hover-color:  $color-success;
+
+/* BUTTONS --------------------------------------------------------- */
+
+$btn-primary-bg:                 $color-red;
+$btn-success-bg:                 $color-orange;
+$btn-info-bg:                    $color-yellow-dark;
+$btn-warning-bg:                 $color-orange-dark;
+$btn-danger-bg:                  $color-red-dark;
diff --git a/addons/theme_default/static/src/scss/option_color_ruby_variables.scss b/addons/theme_default/static/src/scss/option_color_ruby_variables.scss
new file mode 100644
index 00000000000..c780d477bda
--- /dev/null
+++ b/addons/theme_default/static/src/scss/option_color_ruby_variables.scss
@@ -0,0 +1,7 @@
+/* COLORS --------------------------------------------------------- */
+
+$color-primary:         $color-red;
+$color-success:         $color-red-dark;
+$color-info:            $color-orange;
+$color-warning:         $color-purple;
+$color-danger:          $color-orange-dark;
diff --git a/addons/theme_default/static/src/scss/option_color_stone.scss b/addons/theme_default/static/src/scss/option_color_stone.scss
deleted file mode 100644
index 42c9937270d..00000000000
--- a/addons/theme_default/static/src/scss/option_color_stone.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-/* COLORS --------------------------------------------------------- */
-
-$color-primary:         $color-concrete;	
-$color-success:         $color-turquoise;	
-$color-info:            $color-stone;	
-$color-warning:         $color-concrete-dark;	
-$color-danger:          $color-midnight;	 
-
-/* COLORED BG -------------------------------------------------------- */ 
-
-.bg-primary {
-    background-color: $color-clouds;
-}
-.bg-success {
-    background-color: $color-silver;
-}
-.bg-info {
-    background-color: $color-stone; 
-}
-.bg-warning {
-    background-color: $color-concrete-dark;
-}
-.bg-danger {
-    background-color: $color-asphalt; 
-}
-
-/* TEXT & LINKS -------------------------------------------------------- */ 
-
-$text-muted:        $color-primary;
-$link-color:        $color-primary;
-$link-hover-color:  $color-info;
-
-/* BUTTONS --------------------------------------------------------- */ 
-
-$btn-primary-bg:                 $color-concrete;
-$btn-success-bg:                 $color-blue;
-$btn-info-bg:                    $color-asphalt;
-$btn-warning-bg:                 $color-red;
-$btn-danger-bg:                  $color-red-dark;
-
-.btn .fa {
-	color: white;}
-
-.btn-default .fa {
-	color: $gray-dark;}
-
-/* TRANSPARENT BG --------------------------------------------------- */
-/* Used in snippets Prx Image Color and Prx Image Shade ------------- */
-
-.bg-transparent-color 		{ background: $color-stone; opacity: 0.9;} 
-.bg-transparent-shade		{ background: black; opacity: 0.5;} 
-
-/* Footer ----------------------------------------------------------- */
-
-#wrapwrap footer {
-   background-color: $color-concrete-dark;
-   color: $color-concrete;
-    }
-footer ul li a {
-	color: $color-clouds;
-	}	
-footer ul li a:hover {
-	color: white;
-    text-decoration: none;
-	}
-footer h4 {
-	color: $color-silver;
-	padding-bottom: 12px;
-    text-transform: uppercase;
-    }  
-footer .fa {
-    color: $color-clouds; 
-  }
-
-
-
diff --git a/addons/theme_default/static/src/scss/primary_variables.scss b/addons/theme_default/static/src/scss/primary_variables.scss
new file mode 100644
index 00000000000..bb7cdef0818
--- /dev/null
+++ b/addons/theme_default/static/src/scss/primary_variables.scss
@@ -0,0 +1,47 @@
+$color-blue: #3498DB;
+$color-turquoise: #1ABC9C;
+$color-green: #2ECC71;
+$color-yellow: #F1C40F;
+$color-orange: #E67E22;
+$color-red: #E74C3C;
+$color-pink: #f74b94;
+$color-purple: #9B59B6;
+$color-brown: #7b5844;
+
+$color-blue-dark: #2980B9;
+$color-turquoise-dark: #16A085;
+$color-green-dark: #27AE60;
+$color-yellow-dark: #f3ac12;
+$color-orange-dark: #D35400;
+$color-red-dark: #C0392B;
+$color-pink-dark: #ea3884;
+$color-purple-dark: #8E44AD;
+$color-brown-dark: #604434;
+
+$color-blue-light: lighten($color-blue, 20%);
+$color-turquoise-light: lighten($color-turquoise, 20%);
+$color-green-light: lighten($color-green, 20%);
+$color-yellow-light: lighten($color-yellow, 20%);
+$color-orange-light: lighten($color-orange, 20%);
+$color-red-light: lighten($color-red, 20%);
+$color-pink-light: lighten($color-pink, 20%);
+$color-purple-light: lighten($color-purple, 20%);
+$color-brown-light: lighten($color-brown, 20%);
+
+$color-clouds: #ECF0F1;
+$color-silver: #BDC3C7;
+$color-concrete: #95A5A6;
+$color-stone: #7F8C8D;
+$color-asphalt: #34495E;
+$color-midnight: #2C3E50;
+
+$color-concrete-dark: #445b5c;
+
+$color-wind: #f7f7f7;
+$color-clay: #e1dcd5;
+$color-sand: #c5bcb1;
+$color-beach: #f3bf91;
+$color-forest: #254c3a;
+$color-twilight: #3b2c50;
+$color-burgundy: #8e362d;
+$color-marine: #212d3a;
diff --git a/addons/theme_default/views/theme_default_templates.xml b/addons/theme_default/views/theme_default_templates.xml
index 3c23a080aa3..5b98ef506d5 100644
--- a/addons/theme_default/views/theme_default_templates.xml
+++ b/addons/theme_default/views/theme_default_templates.xml
@@ -1,9 +1,20 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-<template id="assets_frontend" inherit_id="website.assets_frontend" name="Theme Default Assets Frontend">
-  <xpath expr="link[last()]" position="after">
-    <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/customize_modal.scss"/>
-  </xpath>
+<template id="_assets_primary_variables" inherit_id="web._assets_primary_variables">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/primary_variables.scss"/>
+    </xpath>
+</template>
+<template id="_assets_frontend_helpers" inherit_id="web._assets_frontend_helpers">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/bootstrap_overridden.scss"/>
+    </xpath>
+</template>
+<template id="assets_frontend" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/colors.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/customize_modal.scss"/>
+    </xpath>
 </template>
 
 <template id="customize_modal" inherit_id="website.theme_customize" name="theme_default modal">
@@ -50,31 +61,31 @@
                           <td>
                               <label class="chd-color-combi">
                                   <img src="/theme_default/static/src/img/theme/variant-emerald.gif" alt="Emerald" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_emerald"/>
+                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_emerald_variables,theme_default.option_color_emerald_bs_variables,theme_default.option_color_emerald"/>
                               </label>
                           </td>
                           <td>
                               <label class="chd-color-combi">
                                   <img src="/theme_default/static/src/img/theme/variant-cobalt.gif" alt="Cobalt" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_cobalt"/>
+                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_cobalt_variables,theme_default.option_color_cobalt_bs_variables,theme_default.option_color_cobalt"/>
                               </label>
                           </td>
                           <td>
                               <label class="chd-color-combi">
                                   <img src="/theme_default/static/src/img/theme/variant-amethyst.gif" alt="Amethyst" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_amethyst"/>
+                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_amethyst_variables,theme_default.option_color_amethyst_bs_variables,theme_default.option_color_amethyst"/>
                               </label>
                           </td>
                           <td>
                               <label class="chd-color-combi">
                                   <img src="/theme_default/static/src/img/theme/variant-ruby.gif" alt="Blue" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_ruby"/>
+                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_ruby_variables,theme_default.option_color_ruby_bs_variables,theme_default.option_color_ruby"/>
                               </label>
                           </td>
                           <td>
                               <label class="chd-color-combi">
                                   <img src="/theme_default/static/src/img/theme/variant-gold.gif" alt="Gold" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_gold"/>
+                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_gold_variables,theme_default.option_color_gold_bs_variables,theme_default.option_color_gold"/>
                               </label>
                           </td>
                       </tr>
@@ -110,63 +121,94 @@
   </xpath>
 </template>
 
-<template id="colors" name="Colors" inherit_id="website.assets_frontend">
-  <xpath expr="." position="inside">
-    <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/colors.scss"/>
-  </xpath>
-</template>
-
 <!-- Option layout -->
-
-<template id="option_layout_boxed" name="option_layout_boxed" inherit_id="website.assets_frontend" active="False" customize_show="False">
-  <xpath expr="." position="inside">
-      <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_layout_boxed.scss"/>
-  </xpath>
+<template id="option_layout_boxed" inherit_id="theme_default.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_layout_boxed.scss"/>
+    </xpath>
 </template>
 
 <!-- Option color -->
-
-<template id="option_color_stone" name="option_color_stone" inherit_id="website.assets_frontend" active="False" customize_show="False">
-  <xpath expr="." position="inside">
-    <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_stone.scss"/>
-  </xpath>
+<template id="option_color_emerald_variables" inherit_id="theme_default._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_emerald_variables.scss"/>
+    </xpath>
 </template>
-
-<template id="option_color_emerald" name="option_color_emerald" inherit_id="website.assets_frontend" active="False" customize_show="False">
-  <xpath expr="." position="inside">
-    <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_emerald.scss"/>
-  </xpath>
+<template id="option_color_emerald_bs_variables" inherit_id="theme_default._assets_frontend_helpers" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_emerald_bs_variables.scss"/>
+    </xpath>
 </template>
-
-<template id="option_color_cobalt" name="option_color_cobalt" inherit_id="website.assets_frontend" active="False" customize_show="False">
-  <xpath expr="." position="inside">
-    <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_cobalt.scss"/>
-  </xpath>
+<template id="option_color_emerald" inherit_id="theme_default.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_emerald.scss"/>
+    </xpath>
 </template>
-
-<template id="option_color_amethyst" name="option_color_amethyst" inherit_id="website.assets_frontend" active="False" customize_show="False">
-  <xpath expr="." position="inside">
-    <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_amethyst.scss"/>
-  </xpath>
+<template id="option_color_cobalt_variables" inherit_id="theme_default._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_cobalt_variables.scss"/>
+    </xpath>
 </template>
-
-<template id="option_color_ruby" name="option_color_ruby" inherit_id="website.assets_frontend" active="False" customize_show="False">
-  <xpath expr="." position="inside">
-    <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_ruby.scss"/>
-  </xpath>
+<template id="option_color_cobalt_bs_variables" inherit_id="theme_default._assets_frontend_helpers" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss"/>
+    </xpath>
 </template>
-
-<template id="option_color_gold" name="option_color_gold" inherit_id="website.assets_frontend" active="False" customize_show="False">
-  <xpath expr="." position="inside">
-    <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_gold.scss"/>
-  </xpath>
+<template id="option_color_cobalt" inherit_id="theme_default.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_cobalt.scss"/>
+    </xpath>
+</template>
+<template id="option_color_amethyst_variables" inherit_id="theme_default._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_amethyst_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_color_amethyst_bs_variables" inherit_id="theme_default._assets_frontend_helpers" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_color_amethyst" inherit_id="theme_default.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_amethyst.scss"/>
+    </xpath>
+</template>
+<template id="option_color_ruby_variables" inherit_id="theme_default._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_ruby_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_color_ruby_bs_variables" inherit_id="theme_default._assets_frontend_helpers" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_ruby_bs_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_color_ruby" inherit_id="theme_default.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_ruby.scss"/>
+    </xpath>
+</template>
+<template id="option_color_gold_variables" inherit_id="theme_default._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_gold_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_color_gold_bs_variables" inherit_id="theme_default._assets_frontend_helpers" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_gold_bs_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_color_gold" inherit_id="theme_default.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_color_gold.scss"/>
+    </xpath>
 </template>
 
 <!-- Option font -->
-
-<template id="option_font" name="option_font" inherit_id="website.assets_frontend" active="False" customize_show="False">
-  <xpath expr="." position="inside">
-    <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_font.scss"/>
-  </xpath>
+<template id="option_font" inherit_id="theme_default._assets_frontend_helpers" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/theme_default/static/src/scss/option_font.scss"/>
+    </xpath>
 </template>
 </odoo>