diff --git a/configs/localConfig.json b/configs/localConfig.json
index cf39f28d4..531a2cb56 100644
--- a/configs/localConfig.json
+++ b/configs/localConfig.json
@@ -18,6 +18,7 @@
       "enabled": true,
       "contextOnly": true
     },
+    "stylesheetUri": "",
     "header": {
       "height": 90,
       "url": "/header/",
@@ -265,7 +266,7 @@
       "homePath": "/home"
     },
     "plugins": {
-        "mobile": ["Header", {
+        "mobile": ["Header", "Easytheming", {
                 "name": "Map",
                 "cfg": {
                     "mapOptions": {
@@ -393,7 +394,7 @@
             "GlobeViewSwitcher"
         ],
         "desktop": [
-          "Header",
+          "Header", "Easytheming",
           "Details",
           {
             "name": "Map",
@@ -1072,7 +1073,7 @@
           "ContextExport"
         ],
         "context": [
-          "Header"
+          "Header", "Easytheming"
         ]
     }
 }
diff --git a/js/plugins.js b/js/plugins.js
index 5f95d455c..41239b774 100644
--- a/js/plugins.js
+++ b/js/plugins.js
@@ -10,6 +10,7 @@ import productPlugins from '@mapstore/product/plugins';
 
 import NotAllowedPlugin from "@js/plugins/NotAllowed";
 import HeaderPlugin from "@js/plugins/Header";
+import EasyTheming from "@js/plugins/EasyTheming";
 import UserSessionPlugin from "@js/plugins/UserSession";
 import VersionPlugin from "@js/plugins/Version";
 import BackgroundSelectorPlugin from '@mapstore/plugins/BackgroundSelector';
@@ -30,6 +31,7 @@ export default {
         // georchestra plugins2
         NotAllowedPlugin,
         HeaderPlugin,
+        EasyTheming,
         UserSessionPlugin,
         VersionPlugin,
         BackgroundSelectorPlugin // This is not lazy loaded because of this issue. https://github.com/georchestra/mapstore2-georchestra/issues/573
diff --git a/js/plugins/EasyTheming.jsx b/js/plugins/EasyTheming.jsx
new file mode 100644
index 000000000..fcf3f8a49
--- /dev/null
+++ b/js/plugins/EasyTheming.jsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2019, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import {useEffect} from "react";
+import {createPlugin, connect} from "@mapstore/utils/PluginsUtils";
+
+export const Easytheming = ({stylesheet = ""}) => {
+    useEffect(() => {
+        if (stylesheet) {
+            const link = document.createElement("link");
+            link.setAttribute("rel", "stylesheet");
+            link.setAttribute("type", "text/css");
+            link.setAttribute("href", stylesheet);
+            document.head.appendChild(link);
+        }
+    }, []);
+    return null;
+};
+
+export default createPlugin('Easytheming', {
+    component: connect((state) => ({
+        stylesheet: state.localConfig && state.localConfig.stylesheetUri
+    }))(Easytheming)
+});
diff --git a/themes/default/variables.less b/themes/default/variables.less
index ed7147f4b..624aa3810 100644
--- a/themes/default/variables.less
+++ b/themes/default/variables.less
@@ -1 +1,420 @@
 /* mapstore2 variables */
+//
+// Copyright 2021, GeoSolutions Sas.
+// All rights reserved.
+//
+// This source code is licensed under the BSD-style license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// ******************************************
+// Deprecated MapStore Variables
+// ******************************************
+
+@ms2-color-background: #ffffff;
+@ms2-color-code: #85127e;
+
+@ms2-color-text-primary: #ffffff;
+@ms2-color-text: #333333;
+
+@ms2-color-disabled: #eee;
+@ms2-color-text-disabled: #999;
+
+@ms2-color-primary: #85127e;
+@ms2-color-info: #5a9aab;
+@ms2-color-success: #398439;
+@ms2-color-warning: #ebbc35;
+@ms2-color-danger: #bb4940;
+
+@ms2-color-shade-lighter: #dddddd;
+
+// ******************************************
+// MapStore Theme Variables
+// ******************************************
+
+// hints:
+// bg -> background color
+// color -> text color
+
+@ms-main-color: @ms2-color-text;
+@ms-main-bg: @ms2-color-background;
+@ms-mask-bg: #00000088;
+@ms-main-border-color: @ms2-color-shade-lighter;
+
+@ms-main-variant-color: @ms-main-color;
+@ms-main-variant-bg: darken(@ms-main-bg, 10%);
+
+@ms-main-hover-color: @ms-main-color;
+@ms-main-hover-bg: darken(@ms-main-bg, 12%);
+
+@ms-code-color: @ms2-color-code;
+@ms-code-bg: @ms2-color-background;
+
+@ms-primary: @ms2-color-primary;
+@ms-info: @ms2-color-info;
+@ms-success: @ms2-color-success;
+@ms-warning: @ms2-color-warning;
+@ms-danger: @ms2-color-danger;
+
+@ms-focus-color: rgba(@ms-primary, 0.4);
+@ms-placeholder-color: lighten(@ms-main-color, 30%);
+
+@ms-jumbotron-color: @ms-main-color;
+@ms-jumbotron-bg: rgba(@ms-main-bg, 0.75);
+
+@ms-disabled-color: @ms2-color-text-disabled;
+@ms-disabled-bg: @ms2-color-disabled;
+
+@ms-link-color: @ms-primary;
+@ms-link-hover-color: darken(@ms-primary, 8%);
+
+@ms-primary-contrast: @ms2-color-text-primary;
+@ms-info-contrast: @ms-primary-contrast;
+@ms-success-contrast: @ms-primary-contrast;
+@ms-warning-contrast: @ms-primary-contrast;
+@ms-danger-contrast: @ms-primary-contrast;
+
+@ms-tray-bg: @ms-main-bg;
+@ms-tray-color: lighten(@ms-main-color, 10%);
+@ms-tray-border: lighten(@ms-primary, 10%);
+
+@ms-font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+@ms-font-family-serif: Georgia, 'Times New Roman', Times, serif;
+@ms-font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
+@ms-font-family-base: 'Noto Sans', sans-serif;
+
+// ******************************************
+// MapStore Theme Variables Ruleset
+// ******************************************
+
+@ms-theme-vars: {
+    // **************
+    // fonts
+    font-family-sans-serif: --ms-font-family-sans-serif, var(--georchestra-ms-font-family-sans-serif, @ms-font-family-sans-serif);
+    font-family-serif: --ms-font-family-serif, var(--georchestra-ms-font-family-serif, @ms-font-family-serif);
+    font-family-monospace: --ms-font-family-monospace, var(--georchestra-ms-font-family-monospace, @ms-font-family-monospace);
+    font-family-base: --ms-font-family-base, var(--georchestra-ms-font-family-base, @ms-font-family-base);
+
+    // **************
+    // color for the base page and components
+    main-bg: --ms-main-bg, var(--georchestra-ms-main-bg, @ms-main-bg);
+    mask-bg: --ms-mask-bg, var(--georchestra-ms-mask-bg, @ms-mask-bg);
+    main-color: --ms-main-color, var(--georchestra-ms-main-color, @ms-main-color);
+    main-border-color: --ms-main-border-color, var(--georchestra-ms-main-border-color, @ms-main-border-color);
+
+    main-variant-color: --ms-main-variant-color, var(--georchestra-ms-main-variant-color, @ms-main-variant-color);
+    main-variant-bg: --ms-main-variant-bg, var(--georchestra-ms-main-variant-bg, @ms-main-variant-bg);
+
+    main-hover-color: --ms-main-hover-color, var(--georchestra-ms-main-hover-color, @ms-main-hover-color);
+    main-hover-bg: --ms-main-hover-bg, var(--georchestra-ms-main-hover-bg, @ms-main-hover-bg);
+
+    // **************
+    // color for codes (not used only for bootstrap code tag)
+    code-color: --ms-code-color, var(--georchestra-ms-code-color, @ms-code-color);
+    code-bg: --ms-code-color, var(--georchestra-ms-code-color, @ms-code-color);
+
+    // **************
+    // outline color or border color for focused element
+    focus-color: --ms-focus-color, var(--georchestra-ms-focus-color, @ms-focus-color);
+
+    // **************
+    // text color for placeholders
+    placeholder-color: --ms-placeholder-color, var(--georchestra-ms-placeholder-color, @ms-placeholder-color);
+
+    // **************
+    // text and background color for disabled fields
+    disabled-color: --ms-disabled-color, var(--georchestra-ms-disabled-color, @ms-disabled-color);
+    disabled-bg: --ms-disabled-bg, var(--georchestra-ms-disabled-bg, @ms-disabled-bg);
+
+    // **************
+    // colors for links
+    link-color: --ms-link-color, var(--georchestra-ms-link-color, @ms-link-color);
+    link-hover-color: --ms-link-hover-color, var(--georchestra-ms-link-hover-color, @ms-link-hover-color);
+
+    // **************
+    // colors variant based on bootstrap categorization
+    // used mainly for buttons
+    primary: --ms-primary, var(--georchestra-ms-primary, @ms-primary);
+    primary-contrast: --ms-primary-contrast, var(--georchestra-ms-primary-contrast, @ms-primary-contrast);
+    info: --ms-info, var(--georchestra-ms-info, @ms-info);
+    info-contrast: --ms-info-contrast, var(--georchestra-ms-info-contrast, @ms-info-contrast);
+    success: --ms-success, var(--georchestra-ms-success, @ms-success);
+    success-contrast: --ms-success-contrast, var(--georchestra-ms-success-contrast, @ms-success-contrast);
+    warning: --ms-warning, var(--georchestra-ms-warning, @ms-warning);
+    warning-contrast: --ms-warning-contrast, var(--georchestra-ms-warning-contrast, @ms-warning-contrast);
+    danger: --ms-danger, var(--georchestra-ms-danger, @ms-danger);
+    danger-contrast: --ms-danger-contrast, var(--georchestra-ms-danger-contrast, @ms-danger-contrast);
+
+    // **************
+    // loader colors
+    loader-color: --ms-loader-color, var(--georchestra-ms-loader-color, @ms-main-color);
+    loader-fade-color: --ms-loader-fade-color, var(--georchestra-ms-loader-fade-color, rgba(@ms-main-color, 0.2));
+    loader-primary-color: --ms-loader-primary-color, var(--georchestra-ms-loader-primary-color, @ms-primary);
+    loader-primary-fade-color: --ms-loader-primary-fade-color, var(--georchestra-ms-loader-primary-fade-color, rgba(@ms-primary, 0.2));
+    loader-primary-contrast-color: --ms-loader-primary-contrast-color, var(--georchestra-ms-loader-primary-contrast-color, @ms-primary-contrast);
+    loader-primary-contrast-fade-color: --ms-loader-primary-contrast-fade-color, var(--georchestra-ms-loader-primary-contrast-fade-color, rgba(@ms-primary-contrast, 0.2));
+
+    // **************
+    // buttons states colors variants
+    @button-default: {
+        button-color: --ms-button-color, var(--georchestra-ms-button-color, @ms-primary);
+        button-bg: --ms-button-bg, var(--georchestra-ms-button-bg, @ms-main-bg);
+        button-border-color: --ms-button-border-color, var(--georchestra-ms-button-border-color, @ms-primary);
+        button-focus-color: --ms-button-focus-color, var(--georchestra-ms-button-focus-color, @ms-primary);
+        button-focus-bg: --ms-button-focus-bg, var(--georchestra-ms-button-focus-bg, @ms-main-bg);
+        button-focus-border-color: --ms-button-focus-border-color, var(--georchestra-ms-button-focus-border-color, @ms-primary);
+        button-hover-color: --ms-button-hover-color, var(--georchestra-ms-button-hover-color, lighten(@ms-primary, 10%));
+        button-hover-bg: --ms-button-hover-bg, var(--georchestra-ms-button-hover-bg, darken(@ms-main-bg, 10%));
+        button-hover-border-color: --ms-button-hover-border-color, var(--georchestra-ms-button-hover-border-color, @ms-primary);
+        button-active-color: --ms-button-active-color, var(--georchestra-ms-button-active-color, lighten(@ms-primary, 10%));
+        button-active-bg: --ms-button-active-bg, var(--georchestra-ms-button-active-bg, darken(@ms-main-bg, 10%));
+        button-active-border-color: --ms-button-active-border-color, var(--georchestra-ms-button-active-border-color, @ms-primary);
+        button-active-hover-color: --ms-button-active-hover-color, var(--georchestra-ms-button-active-hover-color, lighten(@ms-primary, 10%));
+        button-active-hover-bg: --ms-button-active-hover-bg, var(--georchestra-ms-button-active-hover-bg, darken(@ms-main-bg, 17%));
+        button-active-hover-border-color: --ms-button-active-hover-border-color, var(--georchestra-ms-button-active-hover-border-color, @ms-primary);
+        button-disabled-color: --ms-button-disabled-color, var(--georchestra-ms-button-disabled-color, @ms-disabled-color);
+        button-disabled-bg: --ms-button-disabled-bg, var(--georchestra-ms-button-disabled-bg, @ms-disabled-bg);
+        button-disabled-border-color: --ms-button-disabled-border-color, var(--georchestra-ms-button-disabled-border-color, @ms-disabled-bg);
+        button-badge-color: --ms-button-badge-color, var(--georchestra-ms-button-badge-color, @ms-primary);
+        button-badge-bg: --ms-button-badge-bg, var(--georchestra-ms-button-badge-bg, @ms-main-bg);
+    }
+
+    @button-primary: {
+        button-color: --ms-button-primary-color, var(--georchestra-ms-button-primary-color, @ms-primary-contrast);
+        button-bg: --ms-button-primary-bg, var(--georchestra-ms-button-primary-bg, @ms-primary);
+        button-border-color: --ms-button-primary-border-color, var(--georchestra-ms-button-primary-border-color, darken(@ms-primary, 4%));
+        button-focus-color: --ms-button-primary-focus-color, var(--georchestra-ms-button-primary-focus-color, @ms-primary-contrast);
+        button-focus-bg: --ms-button-primary-focus-bg, var(--georchestra-ms-button-primary-focus-bg, @ms-primary);
+        button-focus-border-color: --ms-button-primary-focus-border-color, var(--georchestra-ms-button-primary-focus-border-color, darken(@ms-primary, 4%));
+        button-hover-color: --ms-button-primary-hover-color, var(--georchestra-ms-button-primary-hover-color, @ms-primary-contrast);
+        button-hover-bg: --ms-button-primary-hover-bg, var(--georchestra-ms-button-primary-hover-bg, darken(@ms-primary, 10%));
+        button-hover-border-color: --ms-button-primary-hover-border-color, var(--georchestra-ms-button-primary-hover-border-color, darken(@ms-primary, 12%));
+        button-active-color: --ms-button-primary-active-color, var(--georchestra-ms-button-primary-active-color, @ms-primary-contrast);
+        button-active-bg: --ms-button-primary-active-bg, var(--georchestra-ms-button-primary-active-bg, darken(@ms-primary, 10%));
+        button-active-border-color: --ms-button-primary-active-border-color, var(--georchestra-ms-button-primary-active-border-color, darken(@ms-primary, 12%));
+        button-active-hover-color: --ms-button-primary-active-hover-color, var(--georchestra-ms-button-primary-active-hover-color, @ms-primary-contrast);
+        button-active-hover-bg: --ms-button-primary-active-hover-bg, var(--georchestra-ms-button-primary-active-hover-bg, darken(@ms-primary, 17%));
+        button-active-hover-border-color: --ms-button-primary-active-hover-border-color, var(--georchestra-ms-button-primary-active-hover-border-color, darken(@ms-primary, 25%));
+        button-disabled-color: --ms-button-primary-disabled-color, var(--georchestra-ms-button-primary-disabled-color, @ms-primary-contrast);
+        button-disabled-bg: --ms-button-primary-disabled-bg, var(--georchestra-ms-button-primary-disabled-bg, lighten(desaturate(@ms-primary, 50%), 20%));
+        button-disabled-border-color: --ms-button-primary-disabled-border-color, var(--georchestra-ms-button-primary-disabled-border-color, lighten(desaturate(@ms-primary, 50%), 20%));
+        button-badge-color: --ms-button-primary-badge-color, var(--georchestra-ms-button-primary-badge-color, @ms-primary);
+        button-badge-bg: --ms-button-primary-badge-bg, var(--georchestra-ms-button-primary-badge-bg, @ms-primary-contrast);
+    }
+
+    @button-info: {
+        button-color: --ms-button-info-color, var(--georchestra-ms-button-info-color, @ms-info-contrast);
+        button-bg: --ms-button-info-bg, var(--georchestra-ms-button-info-bg, @ms-info);
+        button-border-color: --ms-button-info-border-color, var(--georchestra-ms-button-info-border-color, darken(@ms-info, 4%));
+        button-focus-color: --ms-button-info-focus-color, var(--georchestra-ms-button-info-focus-color, @ms-info-contrast);
+        button-focus-bg: --ms-button-info-focus-bg, var(--georchestra-ms-button-info-focus-bg, @ms-info);
+        button-focus-border-color: --ms-button-info-focus-border-color, var(--georchestra-ms-button-info-focus-border-color, darken(@ms-info, 4%));
+        button-hover-color: --ms-button-info-hover-color, var(--georchestra-ms-button-info-hover-color, @ms-info-contrast);
+        button-hover-bg: --ms-button-info-hover-bg, var(--georchestra-ms-button-info-hover-bg, darken(@ms-info, 10%));
+        button-hover-border-color: --ms-button-info-hover-border-color, var(--georchestra-ms-button-info-hover-border-color, darken(@ms-info, 12%));
+        button-active-color: --ms-button-info-active-color, var(--georchestra-ms-button-info-active-color, @ms-info-contrast);
+        button-active-bg: --ms-button-info-active-bg, var(--georchestra-ms-button-info-active-bg, darken(@ms-info, 10%));
+        button-active-border-color: --ms-button-info-active-border-color, var(--georchestra-ms-button-info-active-border-color, darken(@ms-info, 12%));
+        button-active-hover-color: --ms-button-info-active-hover-color, var(--georchestra-ms-button-info-active-hover-color, @ms-info-contrast);
+        button-active-hover-bg: --ms-button-info-active-hover-bg, var(--georchestra-ms-button-info-active-hover-bg, darken(@ms-info, 17%));
+        button-active-hover-border-color: --ms-button-info-active-hover-border-color, var(--georchestra-ms-button-info-active-hover-border-color, darken(@ms-info, 25%));
+        button-disabled-color: --ms-button-info-disabled-color, var(--georchestra-ms-button-info-disabled-color, @ms-info-contrast);
+        button-disabled-bg: --ms-button-info-disabled-bg, var(--georchestra-ms-button-info-disabled-bg, lighten(desaturate(@ms-info, 50%), 20%));
+        button-disabled-border-color: --ms-button-info-disabled-border-color, var(--georchestra-ms-button-info-disabled-border-color, lighten(desaturate(@ms-info, 50%), 20%));
+        button-badge-color: --ms-button-info-badge-color, var(--georchestra-ms-button-info-badge-color, @ms-info);
+        button-badge-bg: --ms-button-info-badge-bg, var(--georchestra-ms-button-info-badge-bg, @ms-info-contrast);
+    }
+
+    @button-success: {
+        button-color: --ms-button-success-color, var(--georchestra-ms-button-success-color, @ms-success-contrast);
+        button-bg: --ms-button-success-bg, var(--georchestra-ms-button-success-bg, @ms-success);
+        button-border-color: --ms-button-success-border-color, var(--georchestra-ms-button-success-border-color, darken(@ms-success, 8%));
+        button-focus-color: --ms-button-success-focus-color, var(--georchestra-ms-button-success-focus-color, @ms-success-contrast);
+        button-focus-bg: --ms-button-success-focus-bg, var(--georchestra-ms-button-success-focus-bg, @ms-success);
+        button-focus-border-color: --ms-button-success-focus-border-color, var(--georchestra-ms-button-success-focus-border-color, darken(@ms-success, 8%));
+        button-hover-color: --ms-button-success-hover-color, var(--georchestra-ms-button-success-hover-color, @ms-success-contrast);
+        button-hover-bg: --ms-button-success-hover-bg, var(--georchestra-ms-button-success-hover-bg, darken(@ms-success, 10%));
+        button-hover-border-color: --ms-button-success-hover-border-color, var(--georchestra-ms-button-success-hover-border-color, darken(@ms-success, 12%));
+        button-active-color: --ms-button-success-active-color, var(--georchestra-ms-button-success-active-color, @ms-success-contrast);
+        button-active-bg: --ms-button-success-active-bg, var(--georchestra-ms-button-success-active-bg, darken(@ms-success, 10%));
+        button-active-border-color: --ms-button-success-active-border-color, var(--georchestra-ms-button-success-active-border-color, darken(@ms-success, 12%));
+        button-active-hover-color: --ms-button-success-active-hover-color, var(--georchestra-ms-button-success-active-hover-color, @ms-success-contrast);
+        button-active-hover-bg: --ms-button-success-active-hover-bg, var(--georchestra-ms-button-success-active-hover-bg, darken(@ms-success, 17%));
+        button-active-hover-border-color: --ms-button-success-active-hover-border-color, var(--georchestra-ms-button-success-active-hover-border-color, darken(@ms-success, 25%));
+        button-disabled-color: --ms-button-success-disabled-color, var(--georchestra-ms-button-success-disabled-color, @ms-success-contrast);
+        button-disabled-bg: --ms-button-success-disabled-bg, var(--georchestra-ms-button-success-disabled-bg, lighten(desaturate(@ms-success, 50%), 20%));
+        button-disabled-border-color: --ms-button-success-disabled-border-color, var(--georchestra-ms-button-success-disabled-border-color, lighten(desaturate(@ms-success, 50%), 20%));
+        button-badge-color: --ms-button-success-badge-color, var(--georchestra-ms-button-success-badge-color, @ms-success);
+        button-badge-bg: --ms-button-success-badge-bg, var(--georchestra-ms-button-success-badge-bg, @ms-success-contrast);
+    }
+
+    @button-warning: {
+        button-color: --ms-button-warning-color, var(--georchestra-ms-button-warning-color, @ms-warning-contrast);
+        button-bg: --ms-button-warning-bg, var(--georchestra-ms-button-warning-bg, @ms-warning);
+        button-border-color: --ms-button-warning-border-color, var(--georchestra-ms-button-warning-border-color, darken(@ms-warning, 4%));
+        button-focus-color: --ms-button-warning-focus-color, var(--georchestra-ms-button-warning-focus-color, @ms-warning-contrast);
+        button-focus-bg: --ms-button-warning-focus-bg, var(--georchestra-ms-button-warning-focus-bg, @ms-warning);
+        button-focus-border-color: --ms-button-warning-focus-border-color, var(--georchestra-ms-button-warning-focus-border-color, darken(@ms-warning, 4%));
+        button-hover-color: --ms-button-warning-hover-color, var(--georchestra-ms-button-warning-hover-color, @ms-warning-contrast);
+        button-hover-bg: --ms-button-warning-hover-bg, var(--georchestra-ms-button-warning-hover-bg, darken(@ms-warning, 10%));
+        button-hover-border-color: --ms-button-warning-hover-border-color, var(--georchestra-ms-button-warning-hover-border-color, darken(@ms-warning, 12%));
+        button-active-color: --ms-button-warning-active-color, var(--georchestra-ms-button-warning-active-color, @ms-warning-contrast);
+        button-active-bg: --ms-button-warning-active-bg, var(--georchestra-ms-button-warning-active-bg, darken(@ms-warning, 10%));
+        button-active-border-color: --ms-button-warning-active-border-color, var(--georchestra-ms-button-warning-active-border-color, darken(@ms-warning, 12%));
+        button-active-hover-color: --ms-button-warning-active-hover-color, var(--georchestra-ms-button-warning-active-hover-color, @ms-warning-contrast);
+        button-active-hover-bg: --ms-button-warning-active-hover-bg, var(--georchestra-ms-button-warning-active-hover-bg, darken(@ms-warning, 17%));
+        button-active-hover-border-color: --ms-button-warning-active-hover-border-color, var(--georchestra-ms-button-warning-active-hover-border-color, darken(@ms-warning, 25%));
+        button-disabled-color: --ms-button-warning-disabled-color, var(--georchestra-ms-button-warning-disabled-color, @ms-warning-contrast);
+        button-disabled-bg: --ms-button-warning-disabled-bg, var(--georchestra-ms-button-warning-disabled-bg, lighten(desaturate(@ms-warning, 50%), 20%));
+        button-disabled-border-color: --ms-button-warning-disabled-border-color, var(--georchestra-ms-button-warning-disabled-border-color, lighten(desaturate(@ms-warning, 50%), 20%));
+        button-badge-color: --ms-button-warning-badge-color, var(--georchestra-ms-button-warning-badge-color, @ms-warning);
+        button-badge-bg: --ms-button-warning-badge-bg, var(--georchestra-ms-button-warning-badge-bg, @ms-warning-contrast);
+    }
+
+    @button-danger: {
+        button-color: --ms-button-danger-color, var(--georchestra-ms-button-danger-color, @ms-danger-contrast);
+        button-bg: --ms-button-danger-bg, var(--georchestra-ms-button-danger-bg, @ms-danger);
+        button-border-color: --ms-button-danger-border-color, var(--georchestra-ms-button-danger-border-color, darken(@ms-danger, 4%));
+        button-focus-color: --ms-button-danger-focus-color, var(--georchestra-ms-button-danger-focus-color, @ms-danger-contrast);
+        button-focus-bg: --ms-button-danger-focus-bg, var(--georchestra-ms-button-danger-focus-bg, @ms-danger);
+        button-focus-border-color: --ms-button-danger-focus-border-color, var(--georchestra-ms-button-danger-focus-border-color, darken(@ms-danger, 4%));
+        button-hover-color: --ms-button-danger-hover-color, var(--georchestra-ms-button-danger-hover-color, @ms-danger-contrast);
+        button-hover-bg: --ms-button-danger-hover-bg, var(--georchestra-ms-button-danger-hover-bg, darken(@ms-danger, 10%));
+        button-hover-border-color: --ms-button-danger-hover-border-color, var(--georchestra-ms-button-danger-hover-border-color, darken(@ms-danger, 12%));
+        button-active-color: --ms-button-danger-active-color, var(--georchestra-ms-button-danger-active-color, @ms-danger-contrast);
+        button-active-bg: --ms-button-danger-active-bg, var(--georchestra-ms-button-danger-active-bg, darken(@ms-danger, 10%));
+        button-active-border-color: --ms-button-danger-active-border-color, var(--georchestra-ms-button-danger-active-border-color, darken(@ms-danger, 12%));
+        button-active-hover-color: --ms-button-danger-active-hover-color, var(--georchestra-ms-button-danger-active-hover-color, @ms-danger-contrast);
+        button-active-hover-bg: --ms-button-danger-active-hover-bg, var(--georchestra-ms-button-danger-active-hover-bg, darken(@ms-danger, 17%));
+        button-active-hover-border-color: --ms-button-danger-active-hover-border-color, var(--georchestra-ms-button-danger-active-hover-border-color, darken(@ms-danger, 25%));
+        button-disabled-color: --ms-button-danger-disabled-color, var(--georchestra-ms-button-danger-disabled-color, @ms-danger-contrast);
+        button-disabled-bg: --ms-button-danger-disabled-bg, var(--georchestra-ms-button-danger-disabled-bg, lighten(desaturate(@ms-danger, 50%), 20%));
+        button-disabled-border-color: --ms-button-danger-disabled-border-color, var(--georchestra-ms-button-danger-disabled-border-color, lighten(desaturate(@ms-danger, 50%), 20%));
+        button-badge-color: --ms-button-danger-badge-color, var(--georchestra-ms-button-danger-badge-color, @ms-danger);
+        button-badge-bg: --ms-button-danger-badge-bg, var(--georchestra-ms-button-danger-badge-bg, @ms-danger-contrast);
+    }
+
+    @button-tray: {
+        button-color: --ms-button-tray-color, var(--georchestra-ms-button-tray-color, @ms-tray-color);
+        button-bg: --ms-button-tray-bg, var(--georchestra-ms-button-tray-bg, @ms-tray-bg);
+        button-border-color: --ms-button-tray-border-color, var(--georchestra-ms-button-tray-border-color, darken(@ms-tray-border, 8%));
+        button-focus-color: --ms-button-tray-focus-color, var(--georchestra-ms-button-tray-focus-color, @ms-tray-color);
+        button-focus-bg: --ms-button-tray-focus-bg, var(--georchestra-ms-button-tray-focus-bg, darken(@ms-tray-bg, 10%));
+        button-focus-border-color: --ms-button-tray-focus-border-color, var(--georchestra-ms-button-tray-focus-border-color, darken(@ms-tray-border, 25%));
+        button-hover-color: --ms-button-tray-hover-color, var(--georchestra-ms-button-tray-hover-color, @ms-tray-color);
+        button-hover-bg: --ms-button-tray-hover-bg, var(--georchestra-ms-button-tray-hover-bg, darken(@ms-tray-bg, 10%));
+        button-hover-border-color: --ms-button-tray-hover-border-color, var(--georchestra-ms-button-tray-hover-border-color, darken(@ms-tray-border, 12%));
+        button-active-color: --ms-button-tray-active-color, var(--georchestra-ms-button-tray-active-color, @ms-tray-color);
+        button-active-bg: --ms-button-tray-active-bg, var(--georchestra-ms-button-tray-active-bg, darken(@ms-tray-bg, 10%));
+        button-active-border-color: --ms-button-tray-active-border-color, var(--georchestra-ms-button-tray-active-border-color, darken(@ms-tray-border, 12%));
+        button-active-hover-color: --ms-button-tray-active-hover-color, var(--georchestra-ms-button-tray-active-hover-color, @ms-tray-color);
+        button-active-hover-bg: --ms-button-tray-active-hover-bg, var(--georchestra-ms-button-tray-active-hover-bg, darken(@ms-tray-bg, 17%));
+        button-active-hover-border-color: --ms-button-tray-active-hover-border-color, var(--georchestra-ms-button-tray-active-hover-border-color, darken(@ms-tray-border, 25%));
+        button-disabled-color: --ms-button-tray-disabled-color, var(--georchestra-ms-button-tray-disabled-color, @ms-tray-color);
+        button-disabled-bg: --ms-button-tray-disabled-bg, var(--georchestra-ms-button-tray-disabled-bg, lighten(desaturate(@ms-tray-bg, 50%), 20%));
+        button-disabled-border-color: --ms-button-tray-disabled-border-color, var(--georchestra-ms-button-tray-disabled-border-color, lighten(desaturate(@ms-tray-bg, 50%), 20%));
+        button-badge-color: --ms-button-tray-badge-color, var(--georchestra-ms-button-tray-badge-color, @ms-tray-bg);
+        button-badge-bg: --ms-button-tray-badge-bg, var(--georchestra-ms-button-tray-badge-bg, @ms-tray-color);
+    }
+
+    // **************
+    // text and background colors for the homepage jumbotron description
+    jumbotron-color: --ms-jumbotron-color, var(--georchestra-ms-jumbotron-color, @ms-jumbotron-color);
+    jumbotron-bg: --ms-jumbotron-bg, var(--georchestra-ms-jumbotron-bg, @ms-jumbotron-bg); // apply a transparent color
+
+    // **************
+    // colors for timeline range bar and histograms elements
+    timeline-selected-bg: --ms-timeline-selected-bg, var(--georchestra-ms-timeline-selected-bg, rgba(@ms-primary, 0.05));
+    timeline-histogram-bg: --ms-timeline-histogram-bg, var(--georchestra-ms-timeline-histogram-bg, rgba(@ms-primary, 0.5));
+    timeline-histogram-border-color: --ms-timeline-histogram-color, var(--georchestra-ms-timeline-histogram-color, darken(@ms-primary, 10%));
+    timeline-range-bg: --ms-timeline-range-bg, var(--georchestra-ms-timeline-range-bg, rgba(@ms-main-color, 0.2));
+    timeline-playback-range-bg: --ms-timeline-playback-range-bg, var(--georchestra-ms-timeline-playback-range-bg, rgba(lighten(@ms-success, 10%), 0.2));
+}
+
+// ******************************************
+// MapStore Size Variables
+// ******************************************
+@small-icon-size: 14px;
+
+@icon-size: 24px;
+@square-btn-size: 40px;
+@padding-left-square: floor(((@square-btn-size - @icon-size) / 2));
+
+@icon-size-md: 15px;
+@square-btn-medium-size: 30px;
+@padding-left-square-md: floor(((@square-btn-medium-size - @icon-size-md) / 2));
+
+@icon-size-sm: 14px;
+@square-btn-small-size: 22px;
+@padding-left-square-sm: floor(((@square-btn-small-size - @icon-size-sm) / 2));
+
+@grid-icon-size: 16px;
+@grid-btn-size: 32px;
+@grid-btn-padding-left: floor(((@grid-btn-size - @grid-icon-size) / 2));
+
+@card-height: 52px;
+
+
+
+// ******************************************
+// Helpers
+// ******************************************
+
+// @theme-vars: ruleset of mapstore theme variables, see @ms-theme-vars in variables.less file
+// return all the css variables used by the mapstore theme
+.extract-css-variables(@theme-vars) {
+    // exclude nested rule sets, eg: @button-default
+    @rules: {
+        @theme-vars();
+    };
+    each(@rules, {
+        @css-var-key: extract(@value, 1);
+        @css-var-value: extract(@value, 2);
+            @{css-var-key}: @css-var-value;
+    })
+    each(@theme-vars[@button-default], {
+        @css-var-key: extract(@value, 1);
+        @css-var-value: extract(@value, 2);
+            @{css-var-key}: @css-var-value;
+    })
+    each(@theme-vars[@button-primary], {
+        @css-var-key: extract(@value, 1);
+        @css-var-value: extract(@value, 2);
+            @{css-var-key}: @css-var-value;
+    })
+    each(@theme-vars[@button-info], {
+        @css-var-key: extract(@value, 1);
+        @css-var-value: extract(@value, 2);
+            @{css-var-key}: @css-var-value;
+    })
+    each(@theme-vars[@button-success], {
+        @css-var-key: extract(@value, 1);
+        @css-var-value: extract(@value, 2);
+            @{css-var-key}: @css-var-value;
+    })
+    each(@theme-vars[@button-warning], {
+        @css-var-key: extract(@value, 1);
+        @css-var-value: extract(@value, 2);
+            @{css-var-key}: @css-var-value;
+    })
+    each(@theme-vars[@button-danger], {
+        @css-var-key: extract(@value, 1);
+        @css-var-value: extract(@value, 2);
+            @{css-var-key}: @css-var-value;
+    })
+    each(@theme-vars[@button-tray], {
+        @css-var-key: extract(@value, 1);
+        @css-var-value: extract(@value, 2);
+            @{css-var-key}: @css-var-value;
+    })
+}
+
+// @theme-vars: ruleset of mapstore theme variables, see @ms-theme-vars in variables.less file
+// return the root selector with all the css variables used by the mapstore theme
+.get-root-css-variables(@theme-vars) {
+    :root {
+        .extract-css-variables(@theme-vars);
+    }
+}
+
+