[IMP] *: make customize dialog generic and improve options

* web, web_editor, website, website_theme_install, portal,
  theme_default, theme_bootswatch

The purpose of this task is to make the customize dialog as generic as
possible, that is theme-independant:

1) The design is now totally generic (Odoo visuals)
2) The XML definition is form-view like. This allows themes to extend
   the dialog without any risk of breaking the style and also allows to
   not care about lots of technical details.
3) New options have been included. Those were themes options that are
   now generic and which themes can simply adapt without touching the
   customize modal (navbar colors, footer color, navbar layout, fonts,
   body background, ...).

The color palette can now also be customized with user colors.

Using sass functionnalities, color palettes and fonts integration is now
a lot better.

Thanks to @qha-odoo for the original design.

task-31677

29 files changed, 0 insertions, 483 deletions

diff --git a/addons/theme_default/static/src/img/theme/layout-boxed.gif b/addons/theme_default/static/src/img/theme/layout-boxed.gif
deleted file mode 100644
index 57e41958208..00000000000
--- a/addons/theme_default/static/src/img/theme/layout-boxed.gif
+++ /dev/null
diff --git a/addons/theme_default/static/src/img/theme/layout-full.gif b/addons/theme_default/static/src/img/theme/layout-full.gif
deleted file mode 100644
index 7b7cdf73919..00000000000
--- a/addons/theme_default/static/src/img/theme/layout-full.gif
+++ /dev/null
diff --git a/addons/theme_default/static/src/img/theme/variant-amethyst.gif b/addons/theme_default/static/src/img/theme/variant-amethyst.gif
deleted file mode 100644
index 42dd89f4f34..00000000000
--- a/addons/theme_default/static/src/img/theme/variant-amethyst.gif
+++ /dev/null
diff --git a/addons/theme_default/static/src/img/theme/variant-cobalt.gif b/addons/theme_default/static/src/img/theme/variant-cobalt.gif
deleted file mode 100644
index c7237049e18..00000000000
--- a/addons/theme_default/static/src/img/theme/variant-cobalt.gif
+++ /dev/null
diff --git a/addons/theme_default/static/src/img/theme/variant-emerald.gif b/addons/theme_default/static/src/img/theme/variant-emerald.gif
deleted file mode 100644
index 6ca27b08e36..00000000000
--- a/addons/theme_default/static/src/img/theme/variant-emerald.gif
+++ /dev/null
diff --git a/addons/theme_default/static/src/img/theme/variant-gold.gif b/addons/theme_default/static/src/img/theme/variant-gold.gif
deleted file mode 100644
index b9a2782c051..00000000000
--- a/addons/theme_default/static/src/img/theme/variant-gold.gif
+++ /dev/null
diff --git a/addons/theme_default/static/src/img/theme/variant-ruby.gif b/addons/theme_default/static/src/img/theme/variant-ruby.gif
deleted file mode 100644
index b6a06a60cb7..00000000000
--- a/addons/theme_default/static/src/img/theme/variant-ruby.gif
+++ /dev/null
diff --git a/addons/theme_default/static/src/img/theme/variant-stone.gif b/addons/theme_default/static/src/img/theme/variant-stone.gif
deleted file mode 100644
index 6ae3a649a6c..00000000000
--- a/addons/theme_default/static/src/img/theme/variant-stone.gif
+++ /dev/null
diff --git a/addons/theme_default/static/src/scss/bootstrap_overridden.scss b/addons/theme_default/static/src/scss/bootstrap_overridden.scss
deleted file mode 100644
index 172790fc0b7..00000000000
--- a/addons/theme_default/static/src/scss/bootstrap_overridden.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-
-// 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/colors.scss b/addons/theme_default/static/src/scss/colors.scss
deleted file mode 100644
index 5e58c0f4c73..00000000000
--- a/addons/theme_default/static/src/scss/colors.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.bg-blue      { background-color: $color-blue;}
-.bg-turquoise { background-color: $color-turquoise;}
-.bg-green     { background-color: $color-green;}
-.bg-yellow    { background-color: $color-yellow;}
-.bg-orange    { background-color: $color-orange;}
-.bg-red       { background-color: $color-red;}
-.bg-pink      { background-color: $color-pink;}
-.bg-purple    { background-color: $color-purple;}
-.bg-brown     { background-color: $color-brown;}
-
-.text-blue      { color: $color-blue;}
-.text-turquoise { color: $color-turquoise;}
-.text-green     { color: $color-green;}
-.text-yellow    { color: $color-yellow;}
-.text-orange    { color: $color-orange;}
-.text-red       { color: $color-red;}
-.text-pink      { color: $color-pink;}
-.text-purple    { color: $color-purple;}
-.text-brown     { color: $color-brown;}
diff --git a/addons/theme_default/static/src/scss/customize_modal.scss b/addons/theme_default/static/src/scss/customize_modal.scss
deleted file mode 100644
index ce963f659a3..00000000000
--- a/addons/theme_default/static/src/scss/customize_modal.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-
-#theme_customize_modal {
-    .modal-h5 {
-        color: #ffffff;
-        font-family: "Lato-Regular";
-        font-weight: normal;
-        text-transform: uppercase;
-        letter-spacing: normal;
-        font-size: 14px;
-        color: white;
-        padding: 4px 0 4px 4px;
-        background-color: #bdc3c7;
-    }
-    table {
-        width: 100%;
-        margin-bottom: 8px;
-    }
-}
diff --git a/addons/theme_default/static/src/scss/option_color_amethyst.scss b/addons/theme_default/static/src/scss/option_color_amethyst.scss
deleted file mode 100644
index 790d345ece7..00000000000
--- a/addons/theme_default/static/src/scss/option_color_amethyst.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-// 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
deleted file mode 100644
index 5c35da75b02..00000000000
--- a/addons/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// TODO review BS4 custo for theme default
-
-// /* GRAYS --------------------------------------------------------- */
-
-// $gray-900: 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
deleted file mode 100644
index b770aadd105..00000000000
--- a/addons/theme_default/static/src/scss/option_color_amethyst_variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/* 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
deleted file mode 100644
index 25fda624a32..00000000000
--- a/addons/theme_default/static/src/scss/option_color_cobalt.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-// 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
deleted file mode 100644
index a5faaf2411c..00000000000
--- a/addons/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// TODO review BS4 custo for theme default
-
-// /* 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
deleted file mode 100644
index d2aec3a8772..00000000000
--- a/addons/theme_default/static/src/scss/option_color_cobalt_variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/* 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
deleted file mode 100644
index f1dba7d287f..00000000000
--- a/addons/theme_default/static/src/scss/option_color_emerald.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-// 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
deleted file mode 100644
index 4ff78669b81..00000000000
--- a/addons/theme_default/static/src/scss/option_color_emerald_bs_variables.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// TODO review BS4 custo for theme default
-
-// /* 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
deleted file mode 100644
index 73f73b12dd3..00000000000
--- a/addons/theme_default/static/src/scss/option_color_emerald_variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/* 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
deleted file mode 100644
index ee3b64c3de5..00000000000
--- a/addons/theme_default/static/src/scss/option_color_gold.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-// 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
deleted file mode 100644
index 21a94e8ffe1..00000000000
--- a/addons/theme_default/static/src/scss/option_color_gold_bs_variables.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// TODO review BS4 custo for theme default
-
-// /* TEXTS & LINKS ------------------------------------------------------- */
-
-// $text-muted:        gray('700');
-// $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
deleted file mode 100644
index 596423eeef0..00000000000
--- a/addons/theme_default/static/src/scss/option_color_gold_variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/* 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
deleted file mode 100644
index d652a80518e..00000000000
--- a/addons/theme_default/static/src/scss/option_color_ruby.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-// 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
deleted file mode 100644
index 174bedbb4ec..00000000000
--- a/addons/theme_default/static/src/scss/option_color_ruby_bs_variables.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// TODO review BS4 custo for theme default
-
-// /* GRAYS --------------------------------------------------------- */
-
-// $gray-700:                   lighten(#000, 50%);
-
-// /* TEXT & LINKS -------------------------------------------------------- */
-
-// $text-muted:        gray('700');
-// $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
deleted file mode 100644
index c780d477bda..00000000000
--- a/addons/theme_default/static/src/scss/option_color_ruby_variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/* 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_font.scss b/addons/theme_default/static/src/scss/option_font.scss
deleted file mode 100644
index c62716313f5..00000000000
--- a/addons/theme_default/static/src/scss/option_font.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$font-family-sans-serif: Georgia, "Times New Roman", Times, serif;
-$font-family-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
diff --git a/addons/theme_default/static/src/scss/option_layout_boxed.scss b/addons/theme_default/static/src/scss/option_layout_boxed.scss
deleted file mode 100644
index eda53e8a6c0..00000000000
--- a/addons/theme_default/static/src/scss/option_layout_boxed.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-#wrapwrap {
-    @include media-breakpoint-up(md) {
-        width: 85%;
-        margin: 0 auto;
-    }
-}
diff --git a/addons/theme_default/static/src/scss/primary_variables.scss b/addons/theme_default/static/src/scss/primary_variables.scss
deleted file mode 100644
index bb7cdef0818..00000000000
--- a/addons/theme_default/static/src/scss/primary_variables.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-$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;