@rio-cloud/rio-uikit 0.16.1 → 0.16.2-beta.2

package/ColorScheme.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/ColorScheme' {
+    export function getColorScheme(): string;
+    export function setColorScheme(scheme: 'dark' | 'light' | 'default' | 'system'): void;
+}

package/ColorScheme.js

@@ -0,0 +1,2 @@
+import { getColorScheme as _getColorScheme, setColorScheme as _setColorScheme } from './utils/colorScheme';
+export { _getColorScheme as getColorScheme, _setColorScheme as setColorScheme };

package/Colors.js

@@ -1,2 +1,2 @@
-import _colors from './styles/shared/colors.json';
+import _colors from './styles/variables/colors.json';
 export { _colors as default };

package/components/charts/chartHelper.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import colors from '../../styles/shared/colors.json';
+import colors from '../../styles/variables/colors.json';
 var brightColors = ['color-warmup-corn', 'color-coldplay-khaki'];
 export var defaultChartColors = Object.keys(colors).reverse().filter(function (key) {
   return !brightColors.includes(key);

package/components/mapMarker/ClusterMapMarker.js

@@ -26,9 +26,9 @@ var ClusterMapMarker = function ClusterMapMarker(props) {
   var classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-center-center', !clickable && 'pointer-events-none');
   var clusterClasses = classNames('rio-map-cluster-cirlce', colorClass);
   var baseColor = getColorMapping(colorClass) || markerColor;
-  var markerBackgroundColor = active ? 'bg-white' : baseColor;
+  var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
   var markerBorderColor = baseColor.replace('bg-', 'border-color-');
-  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-white';
+  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
   return /*#__PURE__*/React.createElement("div", {
     className: classes
   }, /*#__PURE__*/React.createElement("div", {

package/components/mapMarker/SingleMapMarker.js

@@ -52,9 +52,9 @@ var SingleMapMarker = function SingleMapMarker(props) {
   };
   var mapDirection = getMapDirection(moving, bearing, rotationStyle);
   var baseColor = getColorMapping(colorClass, markerColor);
-  var markerBackgroundColor = active ? 'bg-white' : baseColor;
+  var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
   var markerBorderColor = baseColor.replace('bg-', 'border-color-');
-  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-white';
+  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
   return /*#__PURE__*/React.createElement("div", {
     className: classes
   }, /*#__PURE__*/React.createElement("div", {

package/components/sidebars/Sidebar.js

@@ -234,7 +234,7 @@ var Sidebar = /*#__PURE__*/function (_Component) {
       var headerClassNames = classNames('SidebarHeader', headerClassName && headerClassName, showHeaderBorder && 'show-border');
       var titleClassNames = classNames('SidebarTitle', titleClassName && titleClassName);
       var bodyClassNames = classNames('SidebarBody', bodyClassName && bodyClassName);
-      var backdropClassNames = classNames('SidebarBackdrop', makeBackdropVisible && 'bg-black opacity-50', backdropClassName && backdropClassName);
+      var backdropClassNames = classNames('SidebarBackdrop', makeBackdropVisible && 'sidebar-backdrop-bg', backdropClassName && backdropClassName);
       var fullscreenIconClasses = classNames('rioglyph', isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full');
       var resizeLimitClasses = classNames('SidebarResizeLimit', isResize && 'display-block');
       var isRight = position === Sidebar.RIGHT;

package/hooks/useScrollPosition.js

@@ -0,0 +1,72 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState, useEffect } from 'react';
+var getModuleContent = function getModuleContent() {
+  return document.getElementsByClassName('module-content')[0];
+};
+
+// "target" can be "window", "document.body", a "ref" or undefiend
+// where in later case the module-content is taken as default
+
+var useScrollPosition = function useScrollPosition(target) {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    targetElement = _useState2[0],
+    setTargetElement = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scrollPosition = _useState4[0],
+    setScrollPosition = _useState4[1];
+  useEffect(function () {
+    var checkForModuleContent = null;
+
+    // In cae the target is undefined it might be that the module-content is not rendered yet,
+    // hence check periodically for the existence
+    if (!target) {
+      checkForModuleContent = setInterval(function () {
+        var element = getModuleContent();
+        if (element) {
+          setTargetElement(element);
+        }
+      }, 300);
+    } else if (target && checkForModuleContent) {
+      console.log('clearInterval');
+      clearInterval(checkForModuleContent);
+    }
+
+    // In case the target is a "ref" - set the targetElement when current is defined
+    else if (target !== null && target !== void 0 && target.current && !checkForModuleContent) {
+      setTargetElement(target.current);
+    }
+
+    // In case it's "wondow" or "document.body"
+    else {
+      setTargetElement(target);
+    }
+    return {
+      "if": function _if(checkForModuleContent) {
+        clearInterval(check);
+      }
+    };
+  }, [target]);
+  var handleScroll = function handleScroll() {
+    requestAnimationFrame(function () {
+      if (targetElement === window) {
+        setScrollPosition(targetElement.scrollY);
+      } else {
+        setScrollPosition(targetElement.scrollTop);
+      }
+    });
+  };
+  useEffect(function () {
+    if (targetElement) {
+      targetElement.addEventListener('scroll', handleScroll);
+    }
+    return function () {
+      if (targetElement) {
+        targetElement.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, [targetElement]);
+  return scrollPosition;
+};
+export default useScrollPosition;

package/index.js

@@ -4,7 +4,7 @@ import versionJson from './version.json';
 var VERSION = versionJson.version;
 export { VERSION };
 export * from 'framer-motion';
-import _colors from './styles/shared/colors.json';
+import _colors from './styles/variables/colors.json';
 export { _colors as colors };
 import { default as _Button } from './components/button/Button';
 export { _Button as Button };
@@ -153,8 +153,11 @@ export { default as useInterval } from './hooks/useInterval';
 export { default as useClickOutside } from './hooks/useClickOutside';
 export { default as useClipboard } from './hooks/useClipboard';
 export { default as useElementSize } from './hooks/useElementSize';
+export { default as useScrollPosition } from './hooks/useScrollPosition';
 import { hasTouch as _hasTouch, inIframe as _inIframe, isDesktop as _isDesktop } from './utils/deviceUtils';
 export { _hasTouch as hasTouch, _inIframe as inIframe, _isDesktop as isDesktop };
+import { getColorScheme as _getColorScheme, setColorScheme as _setColorScheme } from './utils/colorScheme';
+export { _getColorScheme as getColorScheme, _setColorScheme as setColorScheme };
 import { getNewGroupedSelected as _getNewGroupedSelected } from './utils/GroupSelectionUtil';
 export { _getNewGroupedSelected as getNewGroupedSelected };
 import { default as _ExpanderPanel } from './components/expander/ExpanderPanel';

package/lib/es/ColorScheme.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/lib/es/ColorScheme' {
+    export function getColorScheme(): string;
+    export function setColorScheme(scheme: 'dark' | 'light' | 'default' | 'system'): void;
+}

package/lib/es/ColorScheme.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getColorScheme", {
+  enumerable: true,
+  get: function get() {
+    return _colorScheme.getColorScheme;
+  }
+});
+Object.defineProperty(exports, "setColorScheme", {
+  enumerable: true,
+  get: function get() {
+    return _colorScheme.setColorScheme;
+  }
+});
+var _colorScheme = require("./utils/colorScheme");

package/lib/es/Colors.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "default", {
     return _colors2["default"];
   }
 });
-var _colors2 = _interopRequireDefault(require("./styles/shared/colors.json"));
+var _colors2 = _interopRequireDefault(require("./styles/variables/colors.json"));

package/lib/es/components/charts/chartHelper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mapGridOptions = exports.getFromDefaultColors = exports.getColor = exports.defaultChartColors = exports.CURSOR_BACKGROUND_COLOR = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _colors = _interopRequireDefault(require("../../styles/shared/colors.json"));
+var _colors = _interopRequireDefault(require("../../styles/variables/colors.json"));
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var brightColors = ['color-warmup-corn', 'color-coldplay-khaki'];

package/lib/es/components/mapMarker/ClusterMapMarker.js

@@ -33,9 +33,9 @@ var ClusterMapMarker = function ClusterMapMarker(props) {
   var classes = (0, _classnames["default"])(active && 'active', 'rio-map-marker', 'rio-map-marker-center-center', !clickable && 'pointer-events-none');
   var clusterClasses = (0, _classnames["default"])('rio-map-cluster-cirlce', colorClass);
   var baseColor = getColorMapping(colorClass) || markerColor;
-  var markerBackgroundColor = active ? 'bg-white' : baseColor;
+  var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
   var markerBorderColor = baseColor.replace('bg-', 'border-color-');
-  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-white';
+  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes
   }, /*#__PURE__*/_react["default"].createElement("div", {

package/lib/es/components/mapMarker/SingleMapMarker.js

@@ -59,9 +59,9 @@ var SingleMapMarker = function SingleMapMarker(props) {
   };
   var mapDirection = getMapDirection(moving, bearing, rotationStyle);
   var baseColor = getColorMapping(colorClass, markerColor);
-  var markerBackgroundColor = active ? 'bg-white' : baseColor;
+  var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
   var markerBorderColor = baseColor.replace('bg-', 'border-color-');
-  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-white';
+  var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes
   }, /*#__PURE__*/_react["default"].createElement("div", {

package/lib/es/components/sidebars/Sidebar.js

@@ -243,7 +243,7 @@ var Sidebar = /*#__PURE__*/function (_Component) {
       var headerClassNames = (0, _classnames["default"])('SidebarHeader', headerClassName && headerClassName, showHeaderBorder && 'show-border');
       var titleClassNames = (0, _classnames["default"])('SidebarTitle', titleClassName && titleClassName);
       var bodyClassNames = (0, _classnames["default"])('SidebarBody', bodyClassName && bodyClassName);
-      var backdropClassNames = (0, _classnames["default"])('SidebarBackdrop', makeBackdropVisible && 'bg-black opacity-50', backdropClassName && backdropClassName);
+      var backdropClassNames = (0, _classnames["default"])('SidebarBackdrop', makeBackdropVisible && 'sidebar-backdrop-bg', backdropClassName && backdropClassName);
       var fullscreenIconClasses = (0, _classnames["default"])('rioglyph', isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full');
       var resizeLimitClasses = (0, _classnames["default"])('SidebarResizeLimit', isResize && 'display-block');
       var isRight = position === Sidebar.RIGHT;

package/lib/es/hooks/useScrollPosition.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var getModuleContent = function getModuleContent() {
+  return document.getElementsByClassName('module-content')[0];
+};
+
+// "target" can be "window", "document.body", a "ref" or undefiend
+// where in later case the module-content is taken as default
+
+var useScrollPosition = function useScrollPosition(target) {
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    targetElement = _useState2[0],
+    setTargetElement = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    scrollPosition = _useState4[0],
+    setScrollPosition = _useState4[1];
+  (0, _react.useEffect)(function () {
+    var checkForModuleContent = null;
+
+    // In cae the target is undefined it might be that the module-content is not rendered yet,
+    // hence check periodically for the existence
+    if (!target) {
+      checkForModuleContent = setInterval(function () {
+        var element = getModuleContent();
+        if (element) {
+          setTargetElement(element);
+        }
+      }, 300);
+    } else if (target && checkForModuleContent) {
+      console.log('clearInterval');
+      clearInterval(checkForModuleContent);
+    }
+
+    // In case the target is a "ref" - set the targetElement when current is defined
+    else if (target !== null && target !== void 0 && target.current && !checkForModuleContent) {
+      setTargetElement(target.current);
+    }
+
+    // In case it's "wondow" or "document.body"
+    else {
+      setTargetElement(target);
+    }
+    return {
+      "if": function _if(checkForModuleContent) {
+        clearInterval(check);
+      }
+    };
+  }, [target]);
+  var handleScroll = function handleScroll() {
+    requestAnimationFrame(function () {
+      if (targetElement === window) {
+        setScrollPosition(targetElement.scrollY);
+      } else {
+        setScrollPosition(targetElement.scrollTop);
+      }
+    });
+  };
+  (0, _react.useEffect)(function () {
+    if (targetElement) {
+      targetElement.addEventListener('scroll', handleScroll);
+    }
+    return function () {
+      if (targetElement) {
+        targetElement.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, [targetElement]);
+  return scrollPosition;
+};
+var _default = useScrollPosition;
+exports["default"] = _default;

package/lib/es/index.js

@@ -94,9 +94,12 @@ var _exportNames = {
   useClickOutside: true,
   useClipboard: true,
   useElementSize: true,
+  useScrollPosition: true,
   hasTouch: true,
   inIframe: true,
   isDesktop: true,
+  getColorScheme: true,
+  setColorScheme: true,
   getNewGroupedSelected: true,
   ExpanderPanel: true,
   ExpanderList: true,
@@ -829,6 +832,12 @@ Object.defineProperty(exports, "enableSupportMarker", {
     return _toggleSupportMarker2.enableSupportMarker;
   }
 });
+Object.defineProperty(exports, "getColorScheme", {
+  enumerable: true,
+  get: function get() {
+    return _colorScheme.getColorScheme;
+  }
+});
 Object.defineProperty(exports, "getNewGroupedSelected", {
   enumerable: true,
   get: function get() {
@@ -883,6 +892,12 @@ Object.defineProperty(exports, "parseSorting", {
     return _routeUtils.parseSorting;
   }
 });
+Object.defineProperty(exports, "setColorScheme", {
+  enumerable: true,
+  get: function get() {
+    return _colorScheme.setColorScheme;
+  }
+});
 Object.defineProperty(exports, "sortByProperty", {
   enumerable: true,
   get: function get() {
@@ -955,6 +970,12 @@ Object.defineProperty(exports, "useOnMount", {
     return _useOnMount["default"];
   }
 });
+Object.defineProperty(exports, "useScrollPosition", {
+  enumerable: true,
+  get: function get() {
+    return _useScrollPosition["default"];
+  }
+});
 Object.defineProperty(exports, "useTimeout", {
   enumerable: true,
   get: function get() {
@@ -980,7 +1001,7 @@ Object.keys(_framerMotion).forEach(function (key) {
     }
   });
 });
-var _colors2 = _interopRequireDefault(require("./styles/shared/colors.json"));
+var _colors2 = _interopRequireDefault(require("./styles/variables/colors.json"));
 var _Button2 = _interopRequireDefault(require("./components/button/Button"));
 var _AutoSuggest2 = _interopRequireDefault(require("./components/autosuggest/AutoSuggest"));
 var _ToggleButton2 = _interopRequireDefault(require("./components/button/ToggleButton"));
@@ -1061,7 +1082,9 @@ var _useInterval = _interopRequireDefault(require("./hooks/useInterval"));
 var _useClickOutside = _interopRequireDefault(require("./hooks/useClickOutside"));
 var _useClipboard = _interopRequireDefault(require("./hooks/useClipboard"));
 var _useElementSize = _interopRequireDefault(require("./hooks/useElementSize"));
+var _useScrollPosition = _interopRequireDefault(require("./hooks/useScrollPosition"));
 var _deviceUtils = require("./utils/deviceUtils");
+var _colorScheme = require("./utils/colorScheme");
 var _GroupSelectionUtil = require("./utils/GroupSelectionUtil");
 var _ExpanderPanel2 = _interopRequireDefault(require("./components/expander/ExpanderPanel"));
 var _ExpanderList2 = _interopRequireDefault(require("./components/expander/ExpanderList"));

package/lib/es/styles/components/Activity.less

@@ -1,7 +1,7 @@
 .activity {
   align-items: center;
   border-radius: @border-radius-round;
-  color: @color-white;
+  color: var(--color-white);
   display: inline-flex;
   font-weight: @font-normal;
 
@@ -23,34 +23,33 @@
   }
 
   &.activity-available {
-    background: darken(@color-status-available, 5%);
-
+    background-color: .hslb(@color-status-available-hsl, '-', '5%')[@result];
     .activity-icon {
-      background: @color-status-available;
+      background: var(--color-status-available);
     }
   }
 
   &.activity-driving {
-    background: darken(@color-status-driving, 5%);
+    background-color: .hslb(@color-status-driving-hsl, '-', '5%')[@result];
 
     .activity-icon {
-      background: @color-status-driving;
+      background: var(--color-status-driving);
     }
   }
 
   &.activity-resting {
-    background: darken(@color-status-resting, 5%);
+    background-color: .hslb(@color-status-resting-hsl, '-', '5%')[@result];
 
     .activity-icon {
-      background: @color-status-resting;
+      background: var(--color-status-resting);
     }
   }
 
   &.activity-working {
-    background: darken(@color-status-working, 5%);
+    background-color: .hslb(@color-status-working-hsl, '-', '5%')[@result];
 
     .activity-icon {
-      background: @color-status-working;
+      background: var(--color-status-working);
     }
   }
 

package/lib/es/styles/components/ApplicationHeader.less

@@ -1,5 +1,5 @@
 .ApplicationHeader {
-  background-color: @color-white;
+  background-color: var(--color-white);
   border: none;
   display: flex;
   float: none !important;
@@ -14,7 +14,7 @@
     right: 0;
     bottom: 0;
     height: 1px;
-    background-color:@gray-light;
+    background-color:var(--gray-light);
     z-index: 1;
   }
 
@@ -48,15 +48,15 @@
 
     .CollapsedDropdown > .dropdown-menu {
       > .ApplicationActionBar {
-        background-color: @gray-lightest;
-        //border-bottom: 1px solid @gray-lighter;
-        border-top: 1px solid @gray-lighter;
+        background-color: var(--gray-lightest);
+        //border-bottom: 1px solid var(--gray-lighter);
+        border-top: 1px solid var(--gray-lighter);
         justify-content: flex-end;
         position: relative;
         width: 100%;
 
         .ActionBarItemIcon .badge {
-          border-color: @gray-lightest;
+          border-color: var(--gray-lightest);
         }
       }
     }
@@ -82,7 +82,7 @@
 
   .navbar-brand {
     background-color: transparent !important;
-    background-image: @brand-icon-rio !important;
+    background-image: var(--brand-icon-rio) !important;
     background-size: cover;
     display: block;
     height: @ApplicationLayoutHeaderHeighticon-height;
@@ -92,7 +92,7 @@
     width: @ApplicationLayoutHeaderHeight;
 
     &:after {
-      background: @color-black;
+      background: var(--color-black);
       bottom: 0;
       content: '';
       display: block;
@@ -104,7 +104,7 @@
     }
 
     &.home-icon {
-      background-image: @brand-icon-home !important;
+      background-image: var(--brand-icon-home) !important;
     }
 
     > a,
@@ -116,28 +116,23 @@
   }
 
   .ApplicationActionBar {
-    background-color: @color-white;
+    background-color: var(--color-white);
     cursor: auto;
     display: flex;
 
-    // position: absolute;
-    // right: 0;
-    // top: 0;
-
     > .navigationItem {
       align-items: center;
-      color: @gray-dark;
+      color: var(--gray);
       cursor: pointer;
       display: flex;
-      fill: @gray-dark;
+      fill: var(--gray-darkest);
       height: @ApplicationLayoutHeaderHeightWithoutBorder;
       justify-content: center;
       position: relative;
-      //text-align: center;
 
       &:hover .icon {
-        color: @gray-darker;
-        fill: @gray-darker;
+        color: var(--color-black);
+        fill: var(--color-black);
       }
 
       > .ActionBarItem {
@@ -203,7 +198,7 @@
 
     &Icon {
       margin-top: 2px;
-      color: @gray-dark;
+      color: var(--gray-darkest);
       font-size: 16px;
     }
 
@@ -239,8 +234,8 @@
   max-width: calc(~'100% - @{ApplicationLayoutHeaderHeight}');
 
   // NOTE: enforce it with important so all services look similar
-  background-color: @color-white !important;
-  color: @color-black !important;
+  // background-color: var(--color-white) !important;
+  color: var(--color-black) !important;
 
   .dropdown {
     width: 300px;
@@ -271,7 +266,7 @@
 
     // Style the separator between main dropdown and submodules
     &:after {
-      background-color: @gray-lighter;
+      background-color: var(--gray-lighter);
       bottom: 15px;
       content: '';
       display: block;
@@ -328,7 +323,7 @@
     overflow-y: auto;
 
     > li > a {
-      color: @color-black;
+      color: var(--color-black);
       font-size: 14px;
       font-weight: @font-medium;
       padding: 5px @ApplicationLayoutHeaderHeightpadding-horizontal;
@@ -397,7 +392,7 @@
 
     > a {
       background-color: transparent;
-      color: @gray;
+      color: var(--gray);
       cursor: pointer;
       font-size: 14px;
       margin: 0 15px;
@@ -419,7 +414,7 @@
     &.disabled,
     &:disabled {
       > a {
-        color: @gray-light
+        color: var(--gray-light)
       }
     }
 
@@ -430,11 +425,11 @@
       &:hover > a {
         &:not(.disabled):not(:disabled) {
           background-color: transparent;
-          box-shadow: inset 0 -4px 0 @color-black, 0 0px 0 @color-black;
-          color: @color-black;
+          box-shadow: inset 0 -4px 0 var(--color-black), 0 0px 0 var(--color-black);
+          color: var(--color-black);
 
           &:after {
-            background-color: @color-black;
+            background-color: var(--color-black);
             height: 3px;
             width: 100%;
             z-index: 1;

package/lib/es/styles/components/ApplicationLayout.less

@@ -56,8 +56,8 @@
     .ApplicationLayoutBodyNavigation {
       &:not(.unstyled) {
         align-items: center;
-        background: @color-white;
-        border-bottom: 1px solid @gray-light;
+        background: var(--color-white);
+        border-bottom: 1px solid var(--gray-light);
         display: flex;
         justify-content: space-between;
         // padding: 0 @ApplicationLayoutBodyPadding*0.25 0 @ApplicationLayoutBodyPadding*0.5;
@@ -85,14 +85,14 @@
 
               &:hover,
               &:focus {
-                box-shadow: inset 0px -2px 0px 0px @color-black;
+                box-shadow: inset 0px -2px 0px 0px var(--color-black);
               }
             }
 
             &.active,
             &:active {
               > a, > span, > div {
-                box-shadow: inset 0px -3px 0px 0px @color-black;
+                box-shadow: inset 0px -3px 0px 0px var(--color-black);
               }
             }
           }
@@ -175,10 +175,10 @@
 
   .ApplicationLayoutBodyBottomBar {
     align-items: center;
-    background-color: @color-white;
-    border-top: 1px solid @gray-light;
+    background-color: var(--color-white);
+    border-top: 1px solid var(--gray-light);
     display: flex;
-    height: @footer-height;
+    height: @ApplicationLayoutBodyBottomBarHeight;
     padding: 10px;
 
     &.use-body-padding {