[REF] *: BS4, review color system

Odoo used to declare two main colors: primary and optional (which are
purple and turquoise in enterprise). Those were respectively assigned
to the 'primary' bootstrap variable and the 'btn-primary' bootstrap
variable.

BS4, however, does not allow to have a different primary color for
buttons. Instead, the 'primary' color is used for all 'primary' related
components and utility classes, same as for all other colors. So, if we
want to keep our enterprise buttons green, our 'optional' colors had to
become our 'primary' color. The old odoo primary is then renamed to the
'odoo' color.

The palette of grays is now larger by default and is numbered from 100 to
900 alongside the $black and $white variables. The equivalence for older
variables and the way we used them is:

$gray-darker          ->  gray 900 (unused before)
$gray-dark            ->  gray 900
$gray                 ->  gray 700
$gray-light           ->  gray 600
$gray-lighter-darker  ->  gray 400 (the old variable was created by us)
$gray-lighter-dark    ->  gray 300 (the old variable was created by us)
$gray-lighter         ->  gray 200

Fortunately, the 'lighter' variations we created fit well in the default
BS4 system ! Unfortunately, our $gray-lighter which carried the same
function as $gray-200 (see above) is very close to the new default
$gray-100 and quite distant from the new $gray-200. This will be handled
in the next commit.

11 files changed, 337 insertions, 315 deletions

diff --git a/addons/theme_default/static/src/scss/bootstrap_overridden.scss b/addons/theme_default/static/src/scss/bootstrap_overridden.scss
index b396442df02..172790fc0b7 100644
--- a/addons/theme_default/static/src/scss/bootstrap_overridden.scss
+++ b/addons/theme_default/static/src/scss/bootstrap_overridden.scss
@@ -1,5 +1,7 @@
-$gray-darker:          lighten(#000, 20%);
-$gray-dark:            lighten(#000, 40%);
-$gray:                 lighten(#000, 55%);
-$gray-light:           lighten(#000, 70%);
-$gray-lighter:         lighten(#000, 80%);
+
+// TODO review BS4 gray palette for theme default
+// $gray-900: lighten(#000, 20%);
+// $gray-800: lighten(#000, 40%);
+// $gray-700: lighten(#000, 55%);
+// $gray-600: lighten(#000, 70%);
+// $gray-200: lighten(#000, 80%);
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 a5c9dbbac11..790d345ece7 100644
--- a/addons/theme_default/static/src/scss/option_color_amethyst.scss
+++ b/addons/theme_default/static/src/scss/option_color_amethyst.scss
@@ -1,51 +1,53 @@
-/* COLORED BG -------------------------------------------------------- */
-
-.bg-primary {
-    background-color: $color-clouds;
-}
-.bg-success {
-    background-color: $color-purple;
-}
-.bg-info {
-    background-color: $color-twilight;
-}
-.bg-warning {
-    background-color: $color-purple-dark;
-}
-.bg-danger {
-    background-color: $color-midnight;
-}
-
-.btn .fa {
-	color: white;}
-
-.btn-secondary .fa {
-	color: $gray-dark;}
-
-/* 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;}
-
-/* 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;
-  }
+// TODO review BS4 custo for theme default
+
+// /* COLORED BG -------------------------------------------------------- */
+
+// .bg-primary {
+//     background-color: $color-clouds;
+// }
+// .bg-success {
+//     background-color: $color-purple;
+// }
+// .bg-info {
+//     background-color: $color-twilight;
+// }
+// .bg-warning {
+//     background-color: $color-purple-dark;
+// }
+// .bg-danger {
+//     background-color: $color-midnight;
+// }
+
+// .btn .fa {
+// 	color: white;}
+
+// .btn-secondary .fa {
+// 	color: gray('900');}
+
+// /* 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;}
+
+// /* Footer ----------------------------------------------------------- */
+
+// #wrapwrap footer {
+//    background-color: $color-concrete-dark;
+//     color: gray('600');
+//     }
+// footer ul li a {
+// 	color: $color-clouds;
+// 	}
+// footer ul li a:hover {
+// 	color: white;
+//     text-decoration: none;
+// 	}
+// footer h4 {
+// 	color: gray('200');
+// 	padding-bottom: 12px;
+//     text-transform: uppercase;
+//     }
+// footer .fa {
+//     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
index a50fa8aaf78..5c35da75b02 100644
--- 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
@@ -1,17 +1,19 @@
-/* GRAYS --------------------------------------------------------- */
+// TODO review BS4 custo for theme default
 
-$gray-darker:            lighten(#000, 30%);
+// /* GRAYS --------------------------------------------------------- */
 
-/* TEXTS & LINKS --------------------------------------------------- */
+// $gray-900: lighten(#000, 30%);
 
-$text-muted:        $color-primary;
-$link-color:        $color-primary;
-$link-hover-color:  $color-success;
+// /* TEXTS & LINKS --------------------------------------------------- */
 
-/* BUTTONS --------------------------------------------------------- */
+// $text-muted: $color-primary;
+// $link-color: $color-primary;
+// $link-hover-color: $color-success;
 
-$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;
+// /* 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_cobalt.scss b/addons/theme_default/static/src/scss/option_color_cobalt.scss
index 74d4f5cf00e..25fda624a32 100644
--- a/addons/theme_default/static/src/scss/option_color_cobalt.scss
+++ b/addons/theme_default/static/src/scss/option_color_cobalt.scss
@@ -1,52 +1,54 @@
-/* COLORED BG -------------------------------------------------------- */
-
-.bg-primary {
-    background-color: $color-wind;
-}
-.bg-success {
-    background-color: $color-silver;
-}
-.bg-info {
-    background-color: $color-blue;
-}
-.bg-warning {
-    background-color: $color-blue-dark;
-}
-.bg-danger {
-    background-color: $color-asphalt;
-}
-
-.btn .fa {
-	color: white;}
-
-.btn-secondary .fa {
-	color: $gray-dark;}
-
-/* TRANSPARENT BG --------------------------------------------------- */
-/* Used in snippets Prx Image Color and Prx Image Shade ------------- */
-
-.bg-transparent-color { background: $color-blue-dark; opacity: 0.9;}
-.bg-transparent-shade { background: black; opacity: 0.5;}
-
-/* Footer ----------------------------------------------------------- */
-
-#wrapwrap footer {
-   background-color: $color-midnight;
-   color: $gray;
-}
-footer ul li a {
-	color: $color-silver;
-}
-
-footer ul li a:hover {
-	color: $color-clouds;
-    text-decoration: none;
-}
-footer h4 {
-	color: $color-stone;
-	padding-bottom: 12px;
-    text-transform: uppercase;
-}
-footer .fa {
-    color: $gray-light;
-}
+// TODO review BS4 custo for theme default
+
+// /* COLORED BG -------------------------------------------------------- */
+
+// .bg-primary {
+//     background-color: $color-wind;
+// }
+// .bg-success {
+//     background-color: $color-silver;
+// }
+// .bg-info {
+//     background-color: $color-blue;
+// }
+// .bg-warning {
+//     background-color: $color-blue-dark;
+// }
+// .bg-danger {
+//     background-color: $color-asphalt;
+// }
+
+// .btn .fa {
+// 	color: white;}
+
+// .btn-secondary .fa {
+// 	color: gray('900');}
+
+// /* TRANSPARENT BG --------------------------------------------------- */
+// Used in snippets Prx Image Color and Prx Image Shade -------------
+
+// .bg-transparent-color { background: $color-blue-dark; opacity: 0.9;}
+// .bg-transparent-shade { background: black; opacity: 0.5;}
+
+// /* Footer ----------------------------------------------------------- */
+
+// #wrapwrap footer {
+//    background-color: $color-midnight;
+//    color: gray('700');
+// }
+// footer ul li a {
+// 	color: $color-silver;
+// }
+
+// footer ul li a:hover {
+// 	color: $color-clouds;
+//     text-decoration: none;
+// }
+// footer h4 {
+// 	color: $color-stone;
+// 	padding-bottom: 12px;
+//     text-transform: uppercase;
+// }
+// footer .fa {
+//     color: gray('600');
+// }
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
index ab87820cddb..a5faaf2411c 100644
--- 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
@@ -1,13 +1,15 @@
-/* TEXTS & LINKS --------------------------------------------------- */
+// TODO review BS4 custo for theme default
 
-$text-muted:        $color-primary;
-$link-color:        $color-primary;
-$link-hover-color:  $color-info;
+// /* TEXTS & LINKS --------------------------------------------------- */
 
-/* BUTTONS --------------------------------------------------------- */
+// $text-muted:        $color-primary;
+// $link-color:        $color-primary;
+// $link-hover-color:  $color-info;
 
-$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;
+// 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_emerald.scss b/addons/theme_default/static/src/scss/option_color_emerald.scss
index 0c9fc0b47db..f1dba7d287f 100644
--- a/addons/theme_default/static/src/scss/option_color_emerald.scss
+++ b/addons/theme_default/static/src/scss/option_color_emerald.scss
@@ -1,51 +1,53 @@
-/* COLORED BG -------------------------------------------------------- */
-
-.bg-primary {
-    background-color: $color-wind;
-}
-.bg-success {
-    background-color: $color-silver;
-}
-.bg-info {
-    background-color: $color-green-dark;
-}
-.bg-warning {
-    background-color: $color-green;
-}
-.bg-danger {
-    background-color: $color-forest;
-}
-
-.btn .fa {
-	color: white;}
-
-.btn-secondary .fa {
-	color: $gray-dark;}
-
-/* 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;}
-
-/* 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;
-  }
+// TODO review BS4 custo for theme default
+
+// /* COLORED BG -------------------------------------------------------- */
+
+// .bg-primary {
+//     background-color: $color-wind;
+// }
+// .bg-success {
+//     background-color: $color-silver;
+// }
+// .bg-info {
+//     background-color: $color-green-dark;
+// }
+// .bg-warning {
+//     background-color: $color-green;
+// }
+// .bg-danger {
+//     background-color: $color-forest;
+// }
+
+// .btn .fa {
+// 	color: white;}
+
+// .btn-secondary .fa {
+// 	color: gray('900');}
+
+// /* 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;}
+
+// /* Footer ----------------------------------------------------------- */
+
+// #wrapwrap footer {
+//    background-color: $color-concrete-dark;
+//     color: gray('700');
+//     }
+// 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/option_color_emerald_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_emerald_bs_variables.scss
index 9b8dec0f38e..4ff78669b81 100644
--- 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
@@ -1,13 +1,15 @@
-/* TEXTS & LINKS --------------------------------------------------- */
+// TODO review BS4 custo for theme default
 
-$text-muted:        $color-success;
-$link-color:        $color-success;
-$link-hover-color:  $color-primary;
+// /* TEXTS & LINKS --------------------------------------------------- */
 
-/* BUTTONS --------------------------------------------------------- */
+// $text-muted:        $color-success;
+// $link-color:        $color-success;
+// $link-hover-color:  $color-primary;
 
-$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;
+// 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_gold.scss b/addons/theme_default/static/src/scss/option_color_gold.scss
index 9f27adff25f..ee3b64c3de5 100644
--- a/addons/theme_default/static/src/scss/option_color_gold.scss
+++ b/addons/theme_default/static/src/scss/option_color_gold.scss
@@ -1,51 +1,53 @@
-/* COLORED BG -------------------------------------------------------- */
-
-.bg-primary {
-    background-color: $color-sand;
-}
-.bg-success {
-    background-color: $color-yellow;
-}
-.bg-info {
-    background-color: $color-orange;
-}
-.bg-warning {
-    background-color: $color-yellow-dark;
-}
-.bg-danger {
-    background-color: $color-orange-dark;
-}
-
-.btn .fa {
-	color: white;}
-
-.btn-secondary .fa {
-	color: $gray-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;}
-
-/* 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;
-    text-transform: uppercase;
-    }
-footer .fa {
-    color:  $color-beach;
-  }	
+// TODO review BS4 custo for theme default
+
+// /* COLORED BG -------------------------------------------------------- */
+
+// .bg-primary {
+//     background-color: $color-sand;
+// }
+// .bg-success {
+//     background-color: $color-yellow;
+// }
+// .bg-info {
+//     background-color: $color-orange;
+// }
+// .bg-warning {
+//     background-color: $color-yellow-dark;
+// }
+// .bg-danger {
+//     background-color: $color-orange-dark;
+// }
+
+// .btn .fa {
+// 	color: white;}
+
+// .btn-secondary .fa {
+// 	color: gray('900');}
+
+// /* 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;}
+
+// /* 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;
+//     text-transform: uppercase;
+//     }
+// 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
index eb10f308be8..21a94e8ffe1 100644
--- 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
@@ -1,13 +1,15 @@
-/* TEXTS & LINKS ------------------------------------------------------- */
+// TODO review BS4 custo for theme default
 
-$text-muted:        $gray;
-$link-color:        $color-info;
-$link-hover-color:  $color-primary;
+// /* TEXTS & LINKS ------------------------------------------------------- */
 
-/* BUTTONS --------------------------------------------------------- */
+// $text-muted:        gray('700');
+// $link-color:        $color-info;
+// $link-hover-color:  $color-primary;
 
-$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;
+// /* 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_ruby.scss b/addons/theme_default/static/src/scss/option_color_ruby.scss
index f1883a2e60f..d652a80518e 100644
--- a/addons/theme_default/static/src/scss/option_color_ruby.scss
+++ b/addons/theme_default/static/src/scss/option_color_ruby.scss
@@ -1,51 +1,53 @@
-/* COLORED BG -------------------------------------------------------- */
-
-.bg-primary {
-    background-color: $color-sand;
-}
-.bg-success {
-    background-color: $color-red;
-}
-.bg-info {
-    background-color: $color-red-dark;
-}
-.bg-warning {
-    background-color: $color-orange;
-}
-.bg-danger {
-    background-color: $color-orange-dark;
-}
-
-.btn .fa {
-	color: white;}
-
-.btn-secondary .fa {
-	color: $gray-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;}
-
-/* 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;
-    text-transform: uppercase;
-    }
-footer .fa {
-    color: $color-red;
-  }
+// TODO review BS4 custo for theme default
+
+// /* COLORED BG -------------------------------------------------------- */
+
+// .bg-primary {
+//     background-color: $color-sand;
+// }
+// .bg-success {
+//     background-color: $color-red;
+// }
+// .bg-info {
+//     background-color: $color-red-dark;
+// }
+// .bg-warning {
+//     background-color: $color-orange;
+// }
+// .bg-danger {
+//     background-color: $color-orange-dark;
+// }
+
+// .btn .fa {
+// 	color: white;}
+
+// .btn-secondary .fa {
+// 	color: gray('900');}
+
+// /* 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;}
+
+// /* Footer ----------------------------------------------------------- */
+
+// #wrapwrap footer {
+//    background-color: $color-burgundy;
+//    color: gray('200');
+//     }
+// 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;
+//     text-transform: uppercase;
+//     }
+// 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
index 7fd168c8bd7..174bedbb4ec 100644
--- 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
@@ -1,17 +1,19 @@
-/* GRAYS --------------------------------------------------------- */
+// TODO review BS4 custo for theme default
 
-$gray:                   lighten(#000, 50%);
+// /* GRAYS --------------------------------------------------------- */
 
-/* TEXT & LINKS -------------------------------------------------------- */
+// $gray-700:                   lighten(#000, 50%);
 
-$text-muted:        $gray;
-$link-color:        $color-primary;
-$link-hover-color:  $color-success;
+// /* TEXT & LINKS -------------------------------------------------------- */
 
-/* BUTTONS --------------------------------------------------------- */
+// $text-muted:        gray('700');
+// $link-color:        $color-primary;
+// $link-hover-color:  $color-success;
 
-$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;
+// 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;