@scaleflex/widget-core 0.0.1

package/lib/SassKeyRenewer.js

@@ -0,0 +1,332 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { RESPONSE_CODES } from '@scaleflex/widget-utils/lib/constants';
+import { saveUserSassKey, selectUserSessionUuid, userLogout } from './slices/user.slice';
+
+/**
+ * Spec: https://scaleflexhq.atlassian.net/wiki/spaces/SHARED/pages/34570620/Session+handling
+ * Task: https://scaleflexhq.atlassian.net/browse/FRA-3494
+ *
+ * Notice!
+ *  SassKeyRenewer works only when there is defined a session uuid:
+ *    - Hub case
+ *    - standalone Widget with enabled auth
+ *  Doesn't work for Widget with security template (for this case is used logic to regenerate sass key from sec template user.slice.js:generateUserKey())
+ */
+
+export var TIMER_DELAY_STORAGE_NAME = 'sassKeyRenewerTimerDelay';
+var LAST_RENEW_TIMESTAMP_STORAGE_NAME = 'keyRenewLastUpdateTimestamp';
+var EMPTY_KEY_TIMER_DELAY_STORAGE_NAME = 'sassKeyRenewerEmptyKeyTimerDelay';
+var LOG_ENABLED_STORAGE_NAME = 'sassKeyRenewerLogEnabled';
+var TIMER_DELAY = 60 * 60 * 1000;
+
+// If no sass key from renew API, need to send request again in 1min
+var EMPTY_SASS_KEY_TIMER_DELAY = 60 * 1000;
+var SassKeyRenewer = /*#__PURE__*/_createClass(function SassKeyRenewer(filerobot, client) {
+  var _this = this;
+  var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  _classCallCheck(this, SassKeyRenewer);
+  _defineProperty(this, "resetProps", function () {
+    _this.log('Run resetProps()');
+    _this.isSending = false;
+    _this.isOffline = false;
+    _this.isBrowserTabVisible = true;
+    _this.isPaused = false;
+    _this.successHandlersQueue = [];
+  });
+  _defineProperty(this, "reset", function () {
+    _this.log('Run reset()');
+    _this.resetProps();
+    _this.clearTimers();
+  });
+  _defineProperty(this, "getStorageItemName", function (name) {
+    return "".concat(_this.storageNamePrefix || '').concat(name);
+  });
+  _defineProperty(this, "getItemFromStorage", function (name) {
+    return localStorage.getItem(_this.getStorageItemName(name));
+  });
+  _defineProperty(this, "removeItemFromStorage", function (name) {
+    return localStorage.removeItem(_this.getStorageItemName(name));
+  });
+  _defineProperty(this, "setItemToStorage", function (name, value) {
+    return localStorage.setItem(_this.getStorageItemName(name), value);
+  });
+  _defineProperty(this, "log", function (message) {
+    if (_this.opts.logEnabled) {
+      var _console;
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+      (_console = console).log.apply(_console, ["".concat(_this.opts.namePrefix, "[SassKeyRenewer] ").concat(message || '')].concat(args));
+    }
+  });
+  _defineProperty(this, "logDir", function () {
+    if (_this.opts.logEnabled) {
+      var _console2;
+      (_console2 = console).dir.apply(_console2, arguments);
+    }
+  });
+  _defineProperty(this, "sendRenewRequestForce", function (successHandler, requestId) {
+    _this.log('Run sendRenewRequestForce()', {
+      requestId: requestId
+    });
+    _this.removeItemFromStorage(LAST_RENEW_TIMESTAMP_STORAGE_NAME);
+    _this.clearTimers();
+    _this.successHandlersQueue = [];
+    _this.addSuccessHandlerToTheQueue(function () {
+      return _this.sendRenewRequestsWithDelay();
+    }, 'sendRenewRequestsWithDelay');
+    _this.sendRenewRequest(successHandler, requestId);
+  });
+  _defineProperty(this, "sendRenewRequest", function (successHandler, requestId) {
+    _this.log('Run sendRenewRequest()', {
+      requestId: requestId,
+      isSending: _this.isSending
+    });
+    _this.addSuccessHandlerToTheQueue(successHandler, requestId);
+    if (_this.isSending) {
+      _this.log('Request rejected as previous one is still sending');
+      return;
+    }
+    var state = _this.filerobot.store.getState();
+    var sessionUuid = selectUserSessionUuid(state);
+    if (!sessionUuid) {
+      _this.log('Request rejected as sessionUuid doesn\'t exist');
+      return;
+    }
+
+    // const { securityTemplateId } = this.filerobot?.opts || {} // TODO: Uncomment when it will be supported by BE
+    var headers = {};
+    if (sessionUuid) {
+      headers['X-Session-Token'] = sessionUuid;
+    }
+    // TODO: Uncomment when it will be supported by BE
+    // else if (securityTemplateId) {
+    //   headers['X-Security-Template'] = securityTemplateId
+    // }
+
+    _this.log('headers', headers, {
+      sessionUuid: sessionUuid
+    });
+    var handleError = function handleError(error) {
+      clearTimeout(_this.noKeyResendTimer);
+      if (!_this.isPaused) {
+        var codesForLogout = [RESPONSE_CODES.ERR_SASS_INVALID, RESPONSE_CODES.KEY_EXPIRED, RESPONSE_CODES.ERR_SESSION_INVALID, RESPONSE_CODES.INVALID_UUID];
+        var code = codesForLogout.includes(error === null || error === void 0 ? void 0 : error.code) ? error.code : codesForLogout.includes(error === null || error === void 0 ? void 0 : error.codeLabel) ? error.codeLabel : null;
+        _this.log('Sass key renewal error', {
+          error: error,
+          code: code
+        });
+        _this.logDir(error);
+        if (code) {
+          _this.log("Sass key renewal returned code includes in: ".concat(codesForLogout.join('/'), ", need to logout"), headers, {
+            sessionUuid: sessionUuid,
+            code: code
+          });
+          _this.unsubscribe();
+          _this.filerobot.dispatch(userLogout());
+          return;
+        }
+        _this.log('Handling missing sass key error. Run timer', {
+          delay: _this.opts.emptySassKeyTimerDelay
+        });
+        _this.noKeyResendTimer = setTimeout(function () {
+          _this.sendRenewRequest();
+        }, _this.opts.emptySassKeyTimerDelay);
+      }
+    };
+    _this.isSending = true;
+    var lastRequestTimestamp = Date.now();
+    _this.log('Send request key/renew', {
+      headers: headers,
+      lastRequestTimestamp: lastRequestTimestamp
+    });
+    _this.setItemToStorage(LAST_RENEW_TIMESTAMP_STORAGE_NAME, lastRequestTimestamp);
+    _this.client.post('key/renew', {
+      headers: headers
+    }).then(function (response) {
+      _this.log('Response', response);
+      if (response.key) {
+        _this.filerobot.dispatch(saveUserSassKey(response.key));
+        _this.successHandlersQueue.forEach(function (_ref) {
+          var successHandler = _ref.successHandler;
+          successHandler(response);
+        });
+        _this.successHandlersQueue = [];
+      } else {
+        handleError(response);
+      }
+    })["catch"](function (error) {
+      _this.log('Error', error);
+      handleError(error);
+    })["finally"](function () {
+      _this.isSending = false;
+    });
+  });
+  /**
+   * @param {function} cb - Call back function
+   * @param {string} [requestId] - Optional. Should be used in cases when need to cancel previous simil request handler that has same ID.
+   */
+  _defineProperty(this, "addSuccessHandlerToTheQueue", function (cb, requestId) {
+    _this.log('Run addSuccessHandlerToTheQueue()', {
+      cb: cb,
+      requestId: requestId
+    });
+    if (typeof cb === 'function') {
+      // Remove similar requests
+      if (requestId) {
+        var similarRequestIndex = _this.successHandlersQueue.findIndex(function (request) {
+          return (request === null || request === void 0 ? void 0 : request.requestId) === requestId;
+        });
+        if (similarRequestIndex > -1) {
+          // Similar request exists in the queue
+          _this.log('Remove success handler from queue', {
+            similarRequestIndex: similarRequestIndex,
+            handler: _this.successHandlersQueue[similarRequestIndex]
+          });
+          var newSuccessHandlersQueue = _toConsumableArray(_this.successHandlersQueue);
+          newSuccessHandlersQueue.splice(similarRequestIndex, 1);
+          _this.successHandlersQueue = newSuccessHandlersQueue;
+        }
+      }
+      _this.successHandlersQueue.push({
+        requestId: requestId,
+        successHandler: cb
+      });
+      _this.log('Added success handler to queue', _toConsumableArray(_this.successHandlersQueue));
+    }
+  });
+  // Run refresh request every hour
+  _defineProperty(this, "sendRenewRequestsWithDelay", function (_delay) {
+    var delay = _delay || _this.opts.timerDelay;
+    _this.timer = setTimeout(function () {
+      _this.sendRenewRequest(function () {
+        return _this.sendRenewRequestsWithDelay();
+      }, 'sendRenewRequestsWithDelay');
+    }, delay);
+    _this.log('Run sendRenewRequestsWithDelay()', {
+      delay: delay,
+      timer: _this.timer
+    });
+  });
+  _defineProperty(this, "clearTimers", function () {
+    _this.log('Run clearTimers()', {
+      timer: _this.timer,
+      noKeyResendTimer: _this.noKeyResendTimer
+    });
+    clearTimeout(_this.timer);
+    clearTimeout(_this.noKeyResendTimer);
+  });
+  _defineProperty(this, "pause", function () {
+    _this.log('Paused');
+    _this.isSending = false;
+    _this.isPaused = true;
+    _this.clearTimers();
+  });
+  _defineProperty(this, "continue", function () {
+    _this.isPaused = false;
+    _this.log('Continue', {
+      isSubscribed: _this.isSubscribed,
+      isOffline: _this.isOffline,
+      isBrowserTabVisible: _this.isBrowserTabVisible,
+      isPaused: _this.isPaused,
+      isSending: _this.isSending,
+      successHandlersQueue: _this.successHandlersQueue
+    });
+    if (_this.isSubscribed && !_this.isOffline && _this.isBrowserTabVisible) {
+      var lastRequestTimestamp = +(_this.getItemFromStorage(LAST_RENEW_TIMESTAMP_STORAGE_NAME) || 0);
+      _this.log('lastRequestTimestamp = ', lastRequestTimestamp);
+      if (Number.isFinite(lastRequestTimestamp) && lastRequestTimestamp > 0) {
+        var dateNow = Date.now();
+        var delayMsec = _this.opts.timerDelay - (dateNow - lastRequestTimestamp);
+        _this.log('Delay milliseconds', {
+          delayMsec: delayMsec,
+          timerDelay: _this.opts.timerDelay,
+          lastRequestTimestamp: lastRequestTimestamp,
+          dateNow: dateNow
+        });
+        if (delayMsec > 1000) {
+          return _this.sendRenewRequestsWithDelay(delayMsec);
+        }
+      }
+      _this.sendRenewRequest(function () {
+        return _this.sendRenewRequestsWithDelay();
+      }, 'sendRenewRequestsWithDelay');
+    }
+  });
+  _defineProperty(this, "onlineHandler", function () {
+    _this.log('Online');
+    _this.isOffline = false;
+    _this["continue"]();
+  });
+  _defineProperty(this, "offlineHandler", function () {
+    _this.log('Offline');
+    _this.isOffline = true;
+    _this.pause();
+  });
+  _defineProperty(this, "visibilityChangeHandler", function () {
+    if (document.hidden) {
+      _this.log('Tab not active');
+      _this.isBrowserTabVisible = false;
+      _this.pause();
+    } else {
+      _this.log('Tab active');
+      _this.isBrowserTabVisible = true;
+      _this["continue"]();
+    }
+  });
+  _defineProperty(this, "subscribe", function () {
+    _this.log('Run subscribe()');
+    _this.reset();
+    _this.sendRenewRequestsWithDelay();
+    if (!_this.isSubscribed) {
+      var offlineHandler = _this.offlineHandler.bind(_this);
+      var onlineHandler = _this.onlineHandler.bind(_this);
+      var visibilityChangeHandler = _this.visibilityChangeHandler.bind(_this);
+      _this.log('Add listeners');
+      window.addEventListener('offline', offlineHandler);
+      window.addEventListener('online', onlineHandler);
+      document.addEventListener('visibilitychange', visibilityChangeHandler);
+      _this.unsubscribe = function () {
+        _this.log('Run unsubscribe()');
+        _this.reset();
+        _this.isSubscribed = false;
+        _this.log('Remove listeners');
+        window.removeEventListener('offline', offlineHandler);
+        window.removeEventListener('online', onlineHandler);
+        document.removeEventListener('visibilitychange', visibilityChangeHandler);
+      };
+    }
+    _this.isSubscribed = true;
+    return _this.unsubscribe.bind(_this);
+  });
+  this.filerobot = filerobot;
+  this.client = client;
+  this.timer = null;
+  this.noKeyResendTimer = null;
+  this.storageNamePrefix = (opts === null || opts === void 0 ? void 0 : opts.namePrefix) || ''; // User for tests only. Solve problem with parallel async tests running when one test override localStorage value for another test.
+  this.opts = _objectSpread({
+    logEnabled: this.getItemFromStorage(LOG_ENABLED_STORAGE_NAME) === 'true',
+    timerDelay: +(this.getItemFromStorage(TIMER_DELAY_STORAGE_NAME) || TIMER_DELAY),
+    emptySassKeyTimerDelay: +(this.getItemFromStorage(EMPTY_KEY_TIMER_DELAY_STORAGE_NAME) || EMPTY_SASS_KEY_TIMER_DELAY),
+    namePrefix: ''
+  }, opts);
+  this.isSubscribed = false;
+  this.unsubscribe = function () {};
+  this.resetProps();
+  this.log('Inited');
+});
+export default SassKeyRenewer;

package/lib/_common.scss

@@ -0,0 +1,240 @@
+/**
+* General Scaleflex styles that apply to everything inside the .filerobot-Root container
+*/
+
+.filerobot-Root {
+  overflow: hidden;
+  box-sizing: border-box;
+  font-family: $font-family-base;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: left;
+  position: relative;
+  color: $gray-800;
+
+  :disabled {
+    cursor: not-allowed;
+  }
+}
+
+
+.SfxModal-Wrapper, .filerobot-Root *, #SfxPopper * {
+ font-family: $font-family-base;
+}
+
+.SfxModal-Wrapper *, .filerobot-Root *, #SfxPopper * {
+  scrollbar-color: auto !important;
+
+  &::-webkit-scrollbar {
+    width: 12px !important;
+    height: 12px !important;
+  }
+
+  /* Track */
+  &::-webkit-scrollbar-track {
+    background: transparent !important;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    background: #CCD6DE;
+    border: 4px solid #FFFFFF;
+    border-radius: 99px;
+    padding: 4px 6px;
+  }
+}
+
+.filerobot-Root *, .filerobot-Root *:before, .filerobot-Root *:after {
+  box-sizing: inherit;
+}
+
+.filerobot-Root [hidden] {
+  display: none;
+}
+
+// Utilities
+
+// used in a few places
+.filerobot-u-reset {
+  -webkit-appearance: none;
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  color: inherit;
+  backface-visibility: visible;
+  background: none;
+  border: medium none currentColor;
+  border-collapse: separate;
+  border-image: none;
+  border-radius: 0;
+  border-spacing: 0;
+  box-shadow: none;
+  clear: none;
+  cursor: auto;
+  display: inline;
+  empty-cells: show;
+  float: none;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  hyphens: none;
+  left: auto;
+  letter-spacing: normal;
+  list-style: none;
+  margin: 0;
+  max-height: none;
+  max-width: none;
+  min-height: 0;
+  min-width: 0;
+  opacity: 1;
+  outline: medium none invert;
+  overflow: visible;
+  overflow-x: visible;
+  overflow-y: visible;
+  text-align: left;
+  text-decoration: none;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  top: auto;
+  transform: none;
+  transform-origin: 50% 50% 0;
+  transform-style: flat;
+  transition: none 0s ease 0s;
+  unicode-bidi: normal;
+  vertical-align: baseline;
+  visibility: visible;
+  white-space: normal;
+  z-index: auto;
+
+  span {
+    max-width: 250px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    :not(:disabled) {
+      :active {
+        background-color: #eceef2;
+      }
+    }
+  }
+}
+
+//.filerobot-c-separator {
+//  height: 60%;
+//  border-left: 1px solid $border-primary-stateless;
+//  width: 1px;
+//  display: inline;
+//  margin: 0 8px;
+//}
+
+.filerobot-c-horizontal-separator {
+  width: 100%;
+  border-bottom: 1px solid $border;
+  height: 1px;
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
+// Icon
+
+// https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
+// used in a few places
+.filerobot-c-icon {
+  max-width: 100%;
+  max-height: 100%;
+  fill: currentColor;
+  display: inline-block;
+  overflow: hidden;
+}
+
+// Buttons
+
+.filerobot-c-btn {
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  font-family: inherit;
+  font-size: 16px;
+  line-height: 1;
+  font-weight: 500;
+  transition-property: background-color, color;
+  transition-duration: 0.3s;
+  user-select: none;
+}
+
+  .filerobot-c-btn:not(:disabled):not(.disabled) {
+    cursor: pointer;
+  }
+
+  .filerobot-c-btn::-moz-focus-inner {
+    border: 0;
+  }
+
+.filerobot-c-btn-primary {
+  font-size: 14px;
+  padding: 10px 18px;
+  border-radius: 4px;
+  background-color: $blue;
+  color: $white;
+
+  &:hover {
+    background-color: darken($blue, 10%);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba($blue, 0.4);
+  }
+
+  .filerobot-size--md & {
+    padding: 13px 22px;
+  }
+
+  [data-filerobot-theme="dark"] & {
+    color: $gray-200;
+    @include blue-border-focus--dark;
+  }
+}
+
+.filerobot-c-empty {
+  &-wrapper {
+    display: flex;
+    height: 100%;
+  }
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: column wrap;
+  flex: 1;
+  color: $gray-500;
+  background-color: #ffffff;
+  line-height: 14px;
+  font-size: 12px;
+
+  &.left {
+    align-items: flex-start;
+  }
+  &.right {
+    align-items: flex-end;
+  }
+ }
+
+.filerobot-c-empty {
+  align-items: flex-start;
+  color: $light-txt-secondary;
+}
+
+svg {
+  outline: none;
+}

package/lib/_utils.scss

@@ -0,0 +1,38 @@
+// Utility Mixins
+
+@mixin reset-button() {
+  background: none;
+  -webkit-appearance: none;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  color: inherit;
+}
+
+@mixin blue-border-focus() {
+  @include clear-focus();
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba($blue, 0.5);
+  }
+}
+
+@mixin blue-border-focus--dark() {
+  @include clear-focus();
+
+  &:focus {
+    box-shadow: 0 0 0 2px rgba($lightblue, 0.85);
+  }
+}
+
+@mixin clear-focus() {
+  &:focus {
+    outline: none;
+  }
+  &::-moz-focus-inner {
+    border: 0;
+  }
+}

package/lib/_variables.scss

@@ -0,0 +1,64 @@
+// Fonts
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
+$font-family-base: 'Roboto', sans-serif, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
+
+// Colors
+
+$white: #fff !default;
+$black: #000 !default;
+$red: #e32437 !default;
+$blue: #5282DB !default;
+$lightblue: #aae1ff !default;
+$darkgrey: #37414B !default;
+$light-icons-primary: #768A9F;
+$light-icons-secondary: #97A6B6 !default;
+$light-txt-secondary: #768A9F;
+
+$primary: #4D4E4E !default;
+$secondary: #768184 !default;
+$accent: #6879EB !default;
+$accent-hover: #606FD1 !default;
+$accent-active: #4958BC !default;
+$error: #E85B46 !default;
+
+$background-primary: #F8FAFB !default;
+$background-secondary: #FFFFFF !default;
+$background-light-hover: #F9FBFC !default;
+$background-light-active: #F3F7FA !default;
+$hover: #EFF3F6 !default;
+$active: #5D6D7E !default;
+$active-transition: #d9dde0 !default;
+$active-secondary: #E9EEF2 !default;
+$border: #DFE7ED !default;
+$border-primary-stateless: #CCD6DE;
+$link-active: #92A6BC !default;
+
+$gray-50: #fafafa !default;
+$gray-100: #f4f4f4 !default;
+$gray-100--highlighted: #f1f3f6 !default;
+$gray-200: #eaeaea !default;
+$gray-400: #bbb !default;
+$gray-500: #939393 !default;
+$gray-600: #757575 !default;
+$gray-800: #333 !default;
+$gray-900: #1f1f1f !default;
+
+$highlight: #eceef2;
+$highlight--dark: #02baf2;
+
+$shadow-color: rgba(0, 0, 0, 0.25);
+
+// Z-index
+
+$zIndex-0: 100 !default;
+$zIndex-1: 1001 !default;
+$zIndex-2: 1002 !default;
+$zIndex-3: 1003 !default;
+$zIndex-5: 1005 !default;
+$zIndex-highest-1: 1199 !default;
+$zIndex-highest: 1200 !default;
+$zIndex-modal: 100000 !default;
+
+// Media Queries
+$screen-medium: 'only screen and (min-width: 820px)' !default;
+$screen-xxl: 'only screen and (min-width: 1601px)' !default;