@carto/kepler.gl 0.0.76 → 0.0.78-0

package/src/styles/base.js

@@ -1,1620 +0,0 @@
-// Copyright (c) 2022 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-import {css} from 'styled-components';
-import {DIMENSIONS} from 'constants/default-settings';
-
-export const transition = 'all .4s ease';
-export const transitionFast = 'all .2s ease';
-export const transitionSlow = 'all .8s ease';
-
-export const boxShadow = '0 1px 2px 0 rgba(0,0,0,0.10)';
-export const boxSizing = 'border-box';
-export const borderRadius = '1px';
-export const borderColor = '#3A414C';
-export const borderColorLT = '#F1F1F1';
-
-// TEXT
-export const fontFamily = `ff-clan-web-pro, 'Helvetica Neue', Helvetica, sans-serif`;
-export const fontWeight = 400;
-export const fontSize = '0.875em';
-export const lineHeight = 1.71429;
-export const labelColor = '#6A7485';
-export const labelHoverColor = '#C6C6C6';
-export const labelColorLT = '#6A7485';
-
-export const textColor = '#A0A7B4';
-export const textColorLT = '#3A414C';
-export const dataTableTextColor = textColorLT;
-export const titleColorLT = '#29323C';
-
-export const subtextColor = '#6A7485';
-export const subtextColorLT = '#A0A7B4';
-export const subtextColorActive = '#FFFFFF';
-export const panelToggleBorderColor = '#FFFFFF';
-export const panelTabWidth = '30px';
-
-export const titleTextColor = '#FFFFFF';
-export const textColorHl = '#F0F0F0';
-export const textColorHlLT = '#000000';
-export const activeColor = '#1FBAD6';
-export const activeColorLT = '#2473BD';
-export const activeColorHover = '#108188';
-export const errorColor = '#F9042C';
-export const logoColor = activeColor;
-
-// Button
-export const btnFontFamily = fontFamily;
-export const primaryBtnBgd = '#0F9668';
-export const primaryBtnActBgd = '#13B17B';
-export const primaryBtnColor = '#FFFFFF';
-export const primaryBtnActColor = '#FFFFFF';
-export const primaryBtnBgdHover = '#13B17B';
-export const primaryBtnRadius = '2px';
-export const primaryBtnFontSizeDefault = '11px';
-export const primaryBtnFontSizeSmall = '10px';
-export const primaryBtnFontSizeLarge = '14px';
-export const primaryBtnBorder = '0';
-
-export const secondaryBtnBgd = '#6A7485';
-export const secondaryBtnActBgd = '#A0A7B4';
-export const secondaryBtnColor = '#FFFFFF';
-export const secondaryBtnActColor = '#FFFFFF';
-export const secondaryBtnBgdHover = '#A0A7B4';
-export const secondaryBtnBorder = '0';
-
-export const ctaBtnBgd = '#0F9668';
-export const ctaBtnBgdHover = '#13B17B';
-export const ctaBtnActBgd = '#13B17B';
-export const ctaBtnColor = '#FFFFFF';
-export const ctaBtnActColor = '#FFFFFF';
-
-export const linkBtnBgd = 'transparent';
-export const linkBtnActBgd = linkBtnBgd;
-export const linkBtnColor = '#A0A7B4';
-export const linkBtnActColor = '#F1F1F1';
-export const linkBtnActBgdHover = linkBtnBgd;
-export const linkBtnBorder = '0';
-
-export const negativeBtnBgd = errorColor;
-export const negativeBtnActBgd = '#FF193E';
-export const negativeBtnBgdHover = '#FF193E';
-export const negativeBtnBorder = '0';
-export const negativeBtnColor = '#FFFFFF';
-export const negativeBtnActColor = '#FFFFFF';
-
-export const floatingBtnBgd = '#29323C';
-export const floatingBtnActBgd = '#3A4552';
-export const floatingBtnBgdHover = '#3A4552';
-export const floatingBtnBorder = '0';
-export const floatingBtnBorderHover = '0';
-export const floatingBtnColor = subtextColor;
-export const floatingBtnActColor = subtextColorActive;
-
-export const selectionBtnBgd = 'transparent';
-export const selectionBtnActBgd = 'transparent';
-export const selectionBtnColor = '#D3D8E0';
-export const selectionBtnActColor = '#0F9668';
-export const selectionBtnBgdHover = '#0F9668';
-export const selectionBtnBorder = '1';
-export const selectionBtnBorderColor = '#D3D8E0';
-export const selectionBtnBorderActColor = '#0F9668';
-
-// Input
-export const inputBoxHeight = '34px';
-export const inputBoxHeightSmall = '24px';
-export const inputBoxHeightTiny = '18px';
-export const inputPadding = '4px 10px';
-export const inputPaddingSmall = '4px 6px';
-export const inputPaddingTiny = '2px 4px';
-export const inputFontSize = '11px';
-export const inputFontSizeSmall = '10px';
-export const inputFontWeight = 500;
-export const inputBgd = '#29323C';
-export const inputBgdHover = '#3A414C';
-export const inputBgdActive = '#3A414C';
-export const inputBgdActiveLT = '#FFFFFF';
-
-export const inputBorderColor = '#29323C';
-export const inputBorderHoverColor = '#3A414C';
-export const inputBorderHoverColorLT = subtextColor;
-export const inputBorderActiveColor = '#3A414C';
-export const inputBorderActiveColorLT = textColorLT;
-
-export const inputColor = '#A0A7B4';
-export const inputBorderRadius = '1px';
-export const inputPlaceholderColor = '#6A7485';
-export const inputPlaceholderColorLT = subtextColorLT;
-export const inputPlaceholderFontWeight = 400;
-export const inputBoxShadow = 'none';
-export const inputBoxShadowActive = 'none';
-export const inputBoxShadowActiveLT = 'none';
-export const secondaryInputBgd = '#242730';
-export const secondaryInputBgdHover = '#3A414C';
-export const secondaryInputBgdActive = '#3A414C';
-export const secondaryInputColor = '#A0A7B4';
-export const secondaryInputBorderColor = '#242730';
-export const secondaryInputBorderActiveColor = '#D3D8E0';
-export const dropdownSelectHeight = 30;
-
-// Select
-export const selectColor = inputColor;
-export const selectColorLT = titleColorLT;
-
-export const selectActiveBorderColor = '#D3D8E0';
-export const selectFontSize = '11px';
-export const selectFontWeight = '400';
-export const selectFontWeightBold = '500';
-
-export const selectColorPlaceHolder = '#6A7485';
-export const selectColorPlaceHolderLT = selectColorLT;
-export const selectBackground = inputBgd;
-export const selectBackgroundHover = inputBgdHover;
-export const selectBackgroundLT = '#FFFFFF';
-export const selectBackgroundHoverLT = '#F8F8F9';
-export const selectBorderColor = '#D3D8E0';
-export const selectBorderColorLT = '#D3D8E0';
-export const selectBorderRadius = '1px';
-export const selectBorder = 0;
-export const panelTabColor = subtextColor;
-export const dropdownListHighlightBg = '#6A7485';
-export const dropdownListHighlightBgLT = '#F8F8F9';
-export const dropdownListShadow = '0 6px 12px 0 rgba(0,0,0,0.16)';
-export const dropdownListBgd = '#29323C';
-export const toolbarItemBgdHover = '#3A4552';
-export const toolbarItemIconHover = textColorHl;
-export const toolbarItemBorderHover = 'transparent';
-export const toolbarItemBorderRaddius = '0px';
-export const dropdownListBgdLT = '#FFFFFF';
-export const dropdownListBorderTop = '#242730';
-export const dropdownListBorderTopLT = '#D3D8E0';
-export const dropdownListLineHeight = 20;
-export const dropdownWrapperZ = 100;
-export const dropdownWapperMargin = 4;
-
-// Switch
-export const switchWidth = 24;
-export const switchHeight = 12;
-export const switchLabelMargin = 12;
-
-export const switchTrackBgd = '#29323C';
-export const switchTrackBgdActive = activeColor;
-export const switchTrackBorderRadius = '1px';
-export const switchBtnBgd = '#6A7485';
-export const switchBtnBgdActive = '#D3D8E0';
-export const switchBtnBoxShadow = '0 2px 4px 0 rgba(0,0,0,0.40)';
-export const switchBtnBorderRadius = '0';
-export const switchBtnWidth = 12;
-export const switchBtnHeight = 12;
-
-export const secondarySwitchTrackBgd = '#242730';
-export const secondarySwitchBtnBgd = '#3A414C';
-
-// Checkbox
-export const checkboxWidth = 16;
-export const checkboxHeight = 16;
-export const checkboxMargin = 12;
-export const checkboxBorderColor = selectBorderColor;
-export const checkboxBorderRadius = '2px';
-export const checkboxBorderColorLT = selectBorderColorLT;
-export const checkboxBoxBgd = 'white';
-export const checkboxBoxBgdChecked = primaryBtnBgd;
-
-// Radio
-export const radioRadius = 8;
-export const radioBorderRadius = 100;
-export const radioBorderColor = 'transparent';
-export const radioButtonRadius = 4;
-export const radioButtonBgdColor = switchBtnBgdActive;
-
-// Side Panel
-export const sidePanelHeaderBg = '#29323C';
-export const sidePanelHeaderBorder = 'transparent';
-export const layerConfigGroupMarginBottom = 12;
-export const layerConfigGroupPaddingLeft = 18;
-
-export const sidePanelInnerPadding = 16;
-export const sidePanelBorder = 0;
-export const sidePanelBorderColor = 'transparent';
-export const sidePanelBg = '#242730';
-export const sidePanelScrollBarWidth = 10;
-export const sidePanelScrollBarHeight = 10;
-export const sideBarCloseBtnBgd = secondaryBtnBgd;
-export const sideBarCloseBtnColor = '#29323C';
-export const sideBarCloseBtnBgdHover = secondaryBtnActBgd;
-export const sidePanelTitleFontsize = '20px';
-export const sidePanelTitleLineHeight = '1.71429';
-export const panelBackground = '#29323C';
-export const panelContentBackground = '#292E36';
-export const panelBackgroundHover = '#3A4552';
-export const panelHeaderBorderRadius = '0px';
-export const chickletBgd = '#3A4552';
-export const chickletBgdLT = '#D3D8E0';
-export const panelHeaderIcon = '#6A7485';
-export const panelHeaderIconActive = '#A0A7B4';
-export const panelHeaderIconHover = textColorHl;
-export const panelHeaderHeight = 48;
-export const layerPanelHeaderHeight = 48;
-export const panelBoxShadow = '0 6px 12px 0 rgba(0,0,0,0.16)';
-export const panelBorderRadius = '2px';
-export const panelBackgroundLT = '#F8F8F9';
-export const panelToggleMarginRight = 12;
-export const panelToggleBottomPadding = 6;
-
-export const panelBorderColor = '#3A414C';
-export const panelBorder = `1px solid ${borderColor}`;
-export const panelBorderLT = `1px solid ${borderColorLT}`;
-
-export const mapPanelBackgroundColor = '#242730';
-export const mapPanelHeaderBackgroundColor = '#29323C';
-export const tooltipBg = '#3A414C';
-export const tooltipColor = textColorHl;
-export const tooltipBoxShadow = boxShadow;
-export const tooltipFontSize = '10px';
-
-export const layerTypeIconSizeL = 50;
-export const layerTypeIconPdL = 12;
-export const layerTypeIconSizeSM = 28;
-
-// Sidepanel divider
-export const sidepanelDividerBorder = '1px';
-export const sidepanelDividerMargin = 12;
-export const sidepanelDividerHeight = 12;
-
-// Bottom Panel
-export const bottomInnerPdSide = 32;
-export const bottomInnerPdVert = 6;
-export const bottomPanelGap = 20;
-export const bottomWidgetPaddingTop = 20;
-export const bottomWidgetPaddingRight = 20;
-export const bottomWidgetPaddingBottom = 30;
-export const bottomWidgetPaddingLeft = 20;
-export const bottomWidgetBgd = '#29323C';
-// Modal
-export const modalTitleColor = '#3A414C';
-export const modalTitleFontSize = '24px';
-export const modalTitleFontSizeSmaller = '18px';
-export const modalFooterBgd = '#F8F8F9';
-export const modalImagePlaceHolder = '#DDDFE3';
-export const modalPadding = '10px 0';
-export const modalLateralPadding = '72px';
-export const modalPortableLateralPadding = '36px';
-
-export const modalOverLayZ = 1001;
-export const modalOverlayBgd = 'rgba(0, 0, 0, 0.5)';
-export const modalContentZ = 10002;
-export const modalFooterZ = 10001;
-export const modalTitleZ = 10003;
-export const modalButtonZ = 10005;
-export const modalDropdownBackground = '#FFFFFF';
-
-// Modal Dialog (Dark)
-export const modalDialogBgd = '#3A414C';
-export const modalDialogColor = textColorHl;
-
-// Slider
-export const sliderBarColor = '#6A7485';
-export const sliderBarBgd = '#3A414C';
-export const sliderBarHoverColor = '#D3D8E0';
-export const sliderBarRadius = '1px';
-export const sliderBarHeight = 4;
-export const sliderHandleHeight = 12;
-export const sliderHandleWidth = 12;
-export const sliderHandleColor = '#D3D8E0';
-export const sliderHandleTextColor = sliderHandleColor;
-export const sliderInactiveBorderColor = sliderHandleColor;
-export const sliderBorderRadius = '0';
-
-export const sliderHandleHoverColor = '#FFFFFF';
-export const sliderHandleAfterContent = '';
-export const sliderHandleShadow = '0 2px 4px 0 rgba(0,0,0,0.40)';
-export const sliderInputHeight = 24;
-export const sliderInputWidth = 56;
-export const sliderInputFontSize = '10px';
-export const sliderInputPadding = '4px 6px';
-export const sliderMarginTopIsTime = -12;
-export const sliderMarginTop = 12;
-export const sliderMarginBottom = 12;
-
-// Geocoder
-export const geocoderWidth = 360;
-export const geocoderTop = 20;
-export const geocoderRight = 12;
-export const geocoderInputHeight = 36;
-
-// Plot
-export const rangeBrushBgd = '#3A414C';
-export const histogramFillInRange = activeColor;
-export const histogramFillOutRange = sliderBarColor;
-export const axisFontSize = '10px';
-export const axisFontColor = textColor;
-export const timeTitleFontSize = '10px';
-export const rangePlotMargin = {top: 12, bottom: 0, left: 0, right: 0};
-export const rangePlotMarginLarge = {top: 18, bottom: 0, left: 0, right: 0};
-export const rangePlotH = 62;
-export const rangePlotContainerH = 78;
-export const rangePlotHLarge = 102;
-export const rangePlotContainerHLarge = 120;
-
-// Notification
-export const notificationColors = {
-  info: '#276ef1',
-  error: '#f25138',
-  success: '#47b275',
-  warning: '#ffc043'
-};
-
-export const notificationPanelWidth = 240;
-export const notificationPanelItemWidth = notificationPanelWidth - 60;
-export const notificationPanelItemHeight = 60;
-
-// Data Table
-const headerRowHeight = 70;
-const rowHeight = 32;
-const headerPaddingTop = 6;
-const headerPaddingBottom = 8;
-const cellPaddingSide = 10;
-const edgeCellPaddingSide = 10;
-const cellFontSize = 10;
-const gridPaddingSide = 24;
-const headerCellBackground = '#FFFFFF';
-const headerCellBorderColor = '#E0E0E0';
-const headerCellIconColor = '#666666';
-const cellBorderColor = '#E0E0E0';
-const evenRowBackground = '#FFFFFF';
-const oddRowBackground = '#F7F7F7';
-const optionButtonColor = '#6A7485';
-const pinnedGridBorderColor = '#E0E0E0';
-
-// Floating Time display
-const timeDisplayBorderRadius = 32;
-const timeDisplayHeight = 64;
-const timeDisplayMinWidth = 176;
-const timeDisplayOpacity = 0.8;
-const timeDisplayPadding = '0 24px';
-
-// Export map modal
-const exportIntraSectionMargin = '8';
-
-// progress bar
-const progressBarColor = primaryBtnBgd;
-const progressBarTrackColor = '#E8E8E8';
-// Action Panel
-export const actionPanelWidth = 110;
-export const actionPanelHeight = 32;
-
-// Styled Token
-export const fieldTokenRightMargin = 4;
-
-export const textTruncate = {
-  maxWidth: '100%',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  wordWrap: 'normal'
-};
-
-// layerConfigGroupLabel
-export const layerConfigGroupLabelBorderLeft = '2px';
-export const layerConfigGroupLabelMargin = '-12px';
-export const layerConfigGroupLabelPadding = '10px';
-export const layerConfigGroupColor = 'transparent';
-
-// layerConfigGroupLabel label
-export const layerConfigGroupLabelLabelMargin = '0';
-export const layerConfigGroupLabelLabelFontSize = '12px';
-
-// styledConfigGroupHeader
-export const styledConfigGroupHeaderBorder = '2px';
-
-// layerConfigurator
-
-export const layerConfiguratorBorder = '0';
-export const layerConfiguratorBorderColor = '';
-export const layerConfiguratorMargin = '12px';
-export const layerConfiguratorPadding = '12px 0 8px 0';
-// This breakpoints are used for responsive design
-export const breakPoints = {
-  palm: 588,
-  desk: 768
-};
-
-// theme is passed to kepler.gl when it's mounted,
-// it is used by styled-components to pass along to
-// all child components
-
-const input = css`
-  ::placeholder {
-    color: ${props => props.theme.inputPlaceholderColor};
-    font-weight: ${props => props.theme.inputPlaceholderFontWeight};
-  }
-
-  /* Disable Arrows on Number Inputs */
-  ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  align-items: center;
-  background-color: ${props => props.theme.inputBgd};
-  border: 1px solid
-    ${props =>
-      props.active
-        ? props.theme.inputBorderActiveColor
-        : props.error
-        ? props.theme.errorColor
-        : props.theme.inputBgd};
-  border-radius: 2px;
-  caret-color: ${props => props.theme.inputBorderActiveColor};
-  color: ${props => props.theme.inputColor};
-  display: flex;
-  font-size: ${props =>
-    ['small', 'tiny'].includes(props.size)
-      ? props.theme.inputFontSizeSmall
-      : props.theme.inputFontSize};
-  font-weight: ${props => props.theme.inputFontWeight};
-  font-family: ${props => props.theme.fontFamily};
-  height: ${props =>
-    props.size === 'small'
-      ? props.theme.inputBoxHeightSmall
-      : props.size === 'tiny'
-      ? props.theme.inputBoxHeightTiny
-      : props.theme.inputBoxHeight};
-  justify-content: space-between;
-  outline: none;
-  overflow: hidden;
-  padding: ${props =>
-    props.size === 'small'
-      ? props.theme.inputPaddingSmall
-      : props.size === 'tiny'
-      ? props.theme.inputPaddingTiny
-      : props.theme.inputPadding};
-  text-overflow: ellipsis;
-  transition: ${props => props.theme.transition};
-  white-space: nowrap;
-  width: 100%;
-  word-wrap: normal;
-  pointer-events: ${props => (props.disabled ? 'none' : 'all')};
-  opacity: ${props => (props.disabled ? 0.5 : 1)};
-  box-shadow: ${props => props.theme.inputBoxShadow};
-
-  :hover {
-    cursor: ${props => (props.type === 'number' || props.type === 'text' ? 'text' : 'pointer')};
-    background-color: ${props =>
-      props.active ? props.theme.inputBgdActive : props.theme.inputBgdHover};
-    border-color: ${props =>
-      props.active ? props.theme.inputBorderActiveColor : props.theme.inputBorderHoverColor};
-  }
-
-  :active,
-  :focus,
-  &.focus,
-  &.active {
-    background-color: ${props => props.theme.inputBgdActive};
-    border-color: ${props => props.theme.inputBorderActiveColor};
-    box-shadow: ${props => props.theme.inputBoxShadowActive};
-  }
-`;
-
-const inputLT = css`
-  ::placeholder {
-    color: ${props => props.theme.inputPlaceholderColorLT};
-    font-weight: 400;
-  }
-  ${input}
-
-  background-color: ${props => props.theme.selectBackgroundLT};
-  border: 1px solid
-  ${props =>
-    props.active
-      ? props.theme.selectActiveBorderColor
-      : props.error
-      ? props.theme.errorColor
-      : props.theme.selectBorderColorLT};
-  color: ${props => props.theme.selectColorLT};
-  caret-color: ${props => props.theme.inputBorderActiveColorLT};
-
-  :hover {
-    background-color: ${props => props.theme.inputBgdActiveLT};
-    cursor: ${props => (['number', 'text'].includes(props.type) ? 'text' : 'pointer')};
-    border-color: ${props =>
-      props.active ? props.theme.inputBorderActiveColorLT : props.theme.inputBorderHoverColorLT};
-  }
-
-  :active,
-  :focus,
-  &.focus,
-  &.active {
-    background-color: ${props => props.theme.inputBgdActiveLT};
-    border-color: ${props => props.theme.inputBorderActiveColorLT};
-    box-shadow: ${props => props.theme.inputBoxShadowActiveLT};
-  }
-`;
-
-const secondaryInput = css`
-  ${props => props.theme.input}
-  color: ${props => props.theme.secondaryInputColor};
-  background-color: ${props => props.theme.secondaryInputBgd};
-  border: 1px solid
-    ${props => (props.error ? props.theme.errorColor : props.theme.secondaryInputBorderColor)};
-
-  :hover {
-    cursor: pointer;
-    background-color: ${props => props.theme.secondaryInputBgdHover};
-    border-color: ${props => props.theme.secondaryInputBgdHover};
-  }
-
-  :active,
-  &.active {
-    background-color: ${props => props.theme.secondaryInputBgdActive};
-    border-color: ${props => props.theme.secondaryInputBorderActiveColor};
-  }
-`;
-
-const chickletedInputContainer = css`
-  cursor: pointer;
-  flex-wrap: wrap;
-  height: auto;
-  justify-content: start;
-  margin-bottom: 2px;
-  padding: 0px 7px 0px 4px;
-  white-space: normal;
-
-  .chickleted-input__placeholder {
-    line-height: 24px;
-    margin: 4px;
-  }
-`;
-
-const chickletedInput = css`
-  ${props => props.theme.input} ${props => props.theme.chickletedInputContainer};
-`;
-
-const chickletedInputLT = css`
-  ${props => props.theme.inputLT} ${props => props.theme.chickletedInputContainer};
-`;
-
-const secondaryChickletedInput = css`
-  ${props => props.theme.secondaryInput} ${props => props.theme.chickletedInputContainer};
-`;
-
-const inlineInput = css`
-  ${props => props.theme.input} color: ${props => props.theme.textColor};
-  font-size: 13px;
-  letter-spacing: 0.43px;
-  line-height: 18px;
-  height: 24px;
-  font-weight: 400;
-  padding-left: 4px;
-  margin-left: -4px;
-  background-color: transparent;
-  border: 1px solid transparent;
-
-  :hover {
-    height: 24px;
-    cursor: text;
-    background-color: transparent;
-    border: 1px solid ${props => props.theme.labelColor};
-  }
-
-  :active,
-  .active,
-  :focus {
-    background-color: transparent;
-    border: 1px solid ${props => props.theme.inputBorderActiveColor};
-  }
-`;
-
-const switchTrack = css`
-  background: ${props =>
-    props.checked ? props.theme.switchTrackBgdActive : props.theme.switchTrackBgd};
-  position: absolute;
-  top: 0;
-  left: ${props => -props.theme.switchLabelMargin}px;
-  content: '';
-  display: block;
-  width: ${props => props.theme.switchWidth}px;
-  height: ${props => props.theme.switchHeight}px;
-  border-radius: ${props => props.theme.switchTrackBorderRadius};
-`;
-
-const switchButton = css`
-  transition: ${props => props.theme.transition};
-  position: absolute;
-  top: ${props => (props.theme.switchHeight - props.theme.switchBtnHeight) / 2}px;
-  left: ${props =>
-    (props.checked
-      ? props.theme.switchWidth / 2
-      : (props.theme.switchHeight - props.theme.switchBtnHeight) / 2) -
-    props.theme.switchLabelMargin}px;
-  content: '';
-  display: block;
-  height: ${props => props.theme.switchBtnHeight}px;
-  width: ${props => props.theme.switchBtnWidth}px;
-  background: ${props =>
-    props.checked ? props.theme.switchBtnBgdActive : props.theme.switchBtnBgd};
-  box-shadow: ${props => props.theme.switchBtnBoxShadow};
-  border-radius: ${props => props.theme.switchBtnBorderRadius};
-`;
-
-const inputSwitch = css`
-  user-select: none;
-  cursor: pointer;
-  line-height: ${props => props.theme.switchHeight}px;
-  font-weight: 500;
-  font-size: 12px;
-  color: ${props => props.theme.labelColor};
-  position: relative;
-  display: inline-block;
-  padding-top: 0;
-  padding-right: 0;
-  padding-bottom: 0;
-  padding-left: ${props => props.theme.switchWidth}px;
-
-  :before {
-    ${props => props.theme.switchTrack};
-  }
-
-  :after {
-    ${props => props.theme.switchButton};
-  }
-`;
-
-// This is a light version checkbox
-const checkboxBox = css`
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: ${props => props.theme.checkboxWidth}px;
-  height: ${props => props.theme.checkboxHeight}px;
-  background: ${props =>
-    props.checked ? props.theme.checkboxBoxBgdChecked : props.theme.checkboxBoxBgd};
-  border: 1px solid
-    ${props =>
-      props.checked ? props.theme.checkboxBoxBgdChecked : props.theme.checkboxBorderColor};
-  border-radius: 2px;
-  content: '';
-`;
-
-const checkboxCheck = css`
-  width: 10px;
-  height: 5px;
-  border-bottom: 2px solid white;
-  border-left: 2px solid white;
-  top: 4px;
-  left: 3px;
-  transform: rotate(-45deg);
-  display: block;
-  position: absolute;
-  opacity: ${props => (props.checked ? 1 : 0)};
-  content: '';
-`;
-
-const inputCheckbox = css`
-  display: inline-block;
-  position: relative;
-  padding-left: 32px;
-  margin-bottom: 24px;
-  line-height: 20px;
-  vertical-align: middle;
-  cursor: pointer;
-  font-size: 12px;
-  color: ${props => props.theme.labelColor};
-  margin-left: -${props => props.theme.switchLabelMargin}px;
-
-  :before {
-    ${props => props.theme.checkboxBox};
-  }
-
-  :after {
-    ${props => props.theme.checkboxCheck};
-  }
-`;
-
-const inputRadio = css`
-  ${props => props.theme.inputCheckbox}
-  padding-left: ${props => props.theme.radioRadius * 2 + 8}px;
-  margin-bottom: 0;
-  margin-left: 0;
-  line-height: ${props => props.theme.radioRadius * 2}px;
-  color: ${props => props.theme.textColorHl};
-  cursor: pointer;
-
-  :before {
-    ${props => props.theme.checkboxBox}
-    width: ${props => props.theme.radioRadius * 2}px;
-    height: ${props => props.theme.radioRadius * 2}px;
-    border-radius: ${props => props.theme.radioBorderRadius}px;
-    background-color: ${props => props.theme.switchTrackBgd};
-    border-color: ${props => props.theme.radioBorderColor};
-  }
-
-  :after {
-    top: ${props => props.theme.radioRadius - props.theme.radioButtonRadius}px;
-    left: ${props => props.theme.radioRadius - props.theme.radioButtonRadius}px;
-    display: table;
-    width: ${props => props.theme.radioButtonRadius * 2}px;
-    height: ${props => props.theme.radioButtonRadius * 2}px;
-    border-radius: ${props => props.theme.radioButtonRadius * 2}px;
-    border: 0;
-    background-color: ${props => props.theme.radioButtonBgdColor};
-  }
-`;
-
-const secondarySwitch = css`
-  ${props => props.theme.inputSwitch}
-
-  :before {
-    ${props => props.theme.switchTrack} background: ${props =>
-  props.checked ? props.theme.switchTrackBgdActive : props.theme.secondarySwitchTrackBgd};
-  }
-
-  :after {
-    ${props => props.theme.switchButton}
-    background: ${props =>
-      props.checked ? props.theme.switchBtnBgdActive : props.theme.secondarySwitchBtnBgd};
-  }
-`;
-
-const dropdownScrollBar = css`
-  ::-webkit-scrollbar {
-    height: 10px;
-    width: 10px;
-  }
-
-  ::-webkit-scrollbar-corner {
-    background: ${props => props.theme.dropdownListBgd};
-  }
-
-  ::-webkit-scrollbar-track {
-    background: ${props => props.theme.dropdownListBgd};
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: ${props => props.theme.labelColor};
-    border: 3px solid ${props => props.theme.dropdownListBgd};
-  }
-
-  :vertical:hover {
-    background: ${props => props.theme.textColorHl};
-    cursor: pointer;
-  }
-`;
-
-const dropdownScrollBarLT = css`
-  ${dropdownScrollBar} ::-webkit-scrollbar-corner {
-    background: ${props => props.theme.dropdownListBgdLT};
-  }
-
-  ::-webkit-scrollbar-track {
-    background: ${props => props.theme.dropdownListBgdLT};
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: ${props => props.theme.labelColorLT};
-    border: 3px solid ${props => props.theme.dropdownListBgdLT};
-  }
-
-  :vertical:hover {
-    background: ${props => props.theme.textColorHlLT};
-    cursor: pointer;
-  }
-`;
-
-const dropdownListAnchor = css`
-  color: ${props => props.theme.selectColor};
-  padding-left: 3px;
-  font-size: ${props => props.theme.selectFontSize};
-  line-height: ${props => props.theme.dropdownListLineHeight}px;
-`;
-
-const dropdownListAnchorLT = css`
-  ${dropdownListAnchor}
-  color: ${props => props.theme.selectColorLT};
-`;
-
-const dropdownListSize = css`
-  display: flex;
-  align-items: center;
-  font-size: 11px;
-  padding: 3px 9px;
-  font-weight: 500;
-  white-space: nowrap;
-  height: 32px;
-`;
-
-const dropdownListItem = css`
-  ${dropdownListSize} &.hover,
-  &:hover {
-    cursor: pointer;
-    background-color: ${props => props.theme.dropdownListHighlightBg};
-
-    .list__item__anchor {
-      color: ${props => props.theme.textColorHl};
-    }
-  }
-`;
-
-const dropdownListItemLT = css`
-  ${dropdownListSize}
-  color: ${props => props.theme.textColorLT};
-
-  &.hover,
-  &:hover {
-    cursor: pointer;
-    color: ${props => props.theme.textColorHlLT};
-    background-color: ${props => props.theme.dropdownListHighlightBgLT};
-
-    .list__item__anchor {
-      color: ${props => props.theme.selectColorLT};
-    }
-  }
-`;
-
-const dropdownListHeader = css`
-  font-size: 11px;
-  padding: 5px 9px;
-  color: ${props => props.theme.labelColor};
-`;
-
-const dropdownListSection = css`
-  padding: 0 0 4px 0;
-  margin-bottom: 4px;
-  border-bottom: 1px solid ${props => props.theme.labelColor};
-`;
-
-const dropdownList = css`
-  overflow-y: auto;
-  max-height: 280px;
-  box-shadow: ${props => props.theme.dropdownListShadow};
-  border-radius: 2px;
-
-  .list__section {
-    ${props => props.theme.dropdownListSection};
-  }
-  .list__header {
-    ${props => props.theme.dropdownListHeader};
-  }
-
-  .list__item {
-    ${props => props.theme.dropdownListItem};
-    ${dropdownListItem};
-  }
-
-  .list__item__anchor {
-    ${props => props.theme.dropdownListAnchor};
-  }
-
-  ${props => props.theme.dropdownScrollBar};
-`;
-
-const dropdownListLT = css`
-  ${dropdownList} .list__item {
-    ${props => props.theme.dropdownListItemLT};
-  }
-
-  .list__item__anchor {
-    ${props => props.theme.dropdownListAnchorLT};
-  }
-
-  ${props => props.theme.dropdownScrollBarLT};
-`;
-const sidePanelScrollBar = css`
-  ::-webkit-scrollbar {
-    height: ${props => props.theme.sidePanelScrollBarHeight}px;
-    width: ${props => props.theme.sidePanelScrollBarWidth}px;
-  }
-
-  ::-webkit-scrollbar-corner {
-    background: ${props => props.theme.sidePanelBg};
-  }
-
-  ::-webkit-scrollbar-track {
-    background: ${props => props.theme.sidePanelBg};
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: ${props => props.theme.panelBackgroundHover};
-    border: 3px solid ${props => props.theme.sidePanelBg};
-
-    :hover {
-      background: ${props => props.theme.labelColor};
-      cursor: pointer;
-    }
-  }
-`;
-
-const panelDropdownScrollBar = css`
-  ::-webkit-scrollbar {
-    height: 10px;
-    width: 10px;
-  }
-
-  ::-webkit-scrollbar-corner {
-    background: ${props => props.theme.panelBackground};
-  }
-
-  ::-webkit-scrollbar-track {
-    background: ${props => props.theme.panelBackground};
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: ${props => props.theme.panelBackgroundHover};
-    border: 3px solid ${props => props.theme.panelBackground};
-    :hover {
-      background: ${props => props.theme.labelColor};
-      cursor: pointer;
-    }
-  }
-`;
-
-const scrollBar = css`
-  ::-webkit-scrollbar {
-    height: 10px;
-    width: 10px;
-  }
-
-  ::-webkit-scrollbar-corner {
-    background: ${props => props.theme.panelBackground};
-  }
-
-  ::-webkit-scrollbar-track {
-    background: ${props => props.theme.panelBackground};
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: ${props => props.theme.labelColor};
-    border: 3px solid ${props => props.theme.panelBackground}
-
-    :vertical:hover {
-      background: ${props => props.theme.textColorHl};
-      cursor: pointer;
-    }
-
-    :horizontal:hover {
-      background: ${props => props.theme.textColorHl};
-      cursor: pointer;
-    }
-  }
-`;
-
-export const modalScrollBar = css`
-  ::-webkit-scrollbar {
-    width: 14px;
-    height: 16px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: white;
-  }
-  ::-webkit-scrollbar-track:horizontal {
-    background: ${props => props.theme.textColorHl};
-  }
-  ::-webkit-scrollbar-thumb {
-    background: ${props => props.theme.labelColorLT};
-    border: 4px solid white;
-  }
-
-  ::-webkit-scrollbar-corner {
-    background: ${props => props.theme.textColorHl};
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: #969da9;
-  }
-
-  ::-webkit-scrollbar-thumb:vertical {
-    border-radius: 7px;
-  }
-
-  ::-webkit-scrollbar-thumb:horizontal {
-    border-radius: 9px;
-    border: 4px solid ${props => props.theme.textColorHl};
-  }
-`;
-
-export const theme = {
-  ...DIMENSIONS,
-  // templates
-  input,
-  inputLT,
-  inlineInput,
-  chickletedInput,
-  chickletedInputLT,
-  chickletedInputContainer,
-  secondaryChickletedInput,
-
-  borderColor,
-  borderColorLT,
-
-  secondaryInput,
-  dropdownScrollBar,
-  dropdownScrollBarLT,
-  dropdownList,
-  dropdownListLT,
-  dropdownListItem,
-  dropdownListItemLT,
-  dropdownListAnchor,
-  dropdownListAnchorLT,
-  dropdownListHeader,
-  dropdownListSection,
-  dropdownListShadow,
-  dropdownWrapperZ,
-  dropdownWapperMargin,
-  modalScrollBar,
-  scrollBar,
-  sidePanelScrollBar,
-  inputSwitch,
-  secondarySwitch,
-  switchTrack,
-  switchButton,
-  inputCheckbox,
-  inputRadio,
-  checkboxBox,
-  checkboxCheck,
-
-  // Transitions
-  transition,
-  transitionFast,
-  transitionSlow,
-
-  // styles
-  activeColor,
-  activeColorHover,
-  borderRadius,
-  boxShadow,
-  errorColor,
-  dropdownListHighlightBg,
-  dropdownListHighlightBgLT,
-  dropdownListBgd,
-  toolbarItemBgdHover,
-  toolbarItemBorderHover,
-  toolbarItemIconHover,
-  toolbarItemBorderRaddius,
-  dropdownListBgdLT,
-  dropdownListBorderTop,
-  dropdownListBorderTopLT,
-  dropdownListLineHeight,
-
-  labelColor,
-  labelColorLT,
-  labelHoverColor,
-  mapPanelBackgroundColor,
-  mapPanelHeaderBackgroundColor,
-
-  // Select
-  selectActiveBorderColor,
-  selectBackground,
-  selectBackgroundLT,
-  selectBackgroundHover,
-  selectBackgroundHoverLT,
-  selectBorder,
-  selectBorderColor,
-  selectBorderRadius,
-  selectBorderColorLT,
-  selectColor,
-  selectColorPlaceHolder,
-  selectColorPlaceHolderLT,
-  selectFontSize,
-  selectFontWeight,
-  selectColorLT,
-  selectFontWeightBold,
-  panelTabColor,
-
-  // Input
-  inputBgd,
-  inputBgdHover,
-  inputBgdActive,
-  inputBgdActiveLT,
-  inputBoxHeight,
-  inputBoxHeightSmall,
-  inputBoxHeightTiny,
-  inputBorderColor,
-  inputBorderActiveColor,
-  inputBorderHoverColor,
-  inputBorderRadius,
-  inputColor,
-  inputPadding,
-  inputPaddingSmall,
-  inputPaddingTiny,
-  inputFontSize,
-  inputFontSizeSmall,
-  inputFontWeight,
-  inputPlaceholderColor,
-  inputPlaceholderColorLT,
-  inputPlaceholderFontWeight,
-  inputBoxShadow,
-  inputBoxShadowActive,
-  inputBoxShadowActiveLT,
-  secondaryInputBgd,
-  secondaryInputBgdHover,
-  secondaryInputBgdActive,
-  secondaryInputColor,
-  secondaryInputBorderColor,
-  secondaryInputBorderActiveColor,
-  dropdownSelectHeight,
-
-  // Switch
-  switchWidth,
-  switchHeight,
-  switchTrackBgd,
-  switchTrackBgdActive,
-  switchTrackBorderRadius,
-  switchBtnBgd,
-  switchBtnBgdActive,
-  switchBtnBoxShadow,
-  switchBtnBorderRadius,
-  switchBtnWidth,
-  switchBtnHeight,
-  switchLabelMargin,
-
-  secondarySwitchTrackBgd,
-  secondarySwitchBtnBgd,
-
-  // Checkbox
-  checkboxWidth,
-  checkboxHeight,
-  checkboxMargin,
-  checkboxBorderColor,
-  checkboxBorderRadius,
-  checkboxBorderColorLT,
-  checkboxBoxBgd,
-  checkboxBoxBgdChecked,
-
-  // Radio
-  radioRadius,
-  radioBorderRadius,
-  radioBorderColor,
-  radioButtonRadius,
-  radioButtonBgdColor,
-
-  // Button
-  btnFontFamily,
-  primaryBtnBgd,
-  primaryBtnActBgd,
-  primaryBtnColor,
-  primaryBtnActColor,
-  primaryBtnBgdHover,
-  primaryBtnRadius,
-  primaryBtnFontSizeDefault,
-  primaryBtnFontSizeSmall,
-  primaryBtnFontSizeLarge,
-  primaryBtnBorder,
-
-  secondaryBtnBgd,
-  secondaryBtnActBgd,
-  secondaryBtnBgdHover,
-  secondaryBtnColor,
-  secondaryBtnActColor,
-  secondaryBtnBorder,
-
-  negativeBtnBgd,
-  negativeBtnActBgd,
-  negativeBtnBgdHover,
-  negativeBtnBorder,
-  negativeBtnColor,
-  negativeBtnActColor,
-
-  linkBtnBgd,
-  linkBtnActBgd,
-  linkBtnColor,
-  linkBtnActColor,
-  linkBtnActBgdHover,
-  linkBtnBorder,
-
-  floatingBtnBgd,
-  floatingBtnActBgd,
-  floatingBtnBgdHover,
-  floatingBtnBorder,
-  floatingBtnBorderHover,
-  floatingBtnColor,
-  floatingBtnActColor,
-
-  ctaBtnBgd,
-  ctaBtnBgdHover,
-  ctaBtnActBgd,
-  ctaBtnColor,
-  ctaBtnActColor,
-
-  selectionBtnBgd,
-  selectionBtnActBgd,
-  selectionBtnColor,
-  selectionBtnActColor,
-  selectionBtnBgdHover,
-  selectionBtnBorder,
-  selectionBtnBorderColor,
-  selectionBtnBorderActColor,
-
-  // Modal
-  modalTitleColor,
-  modalTitleFontSize,
-  modalTitleFontSizeSmaller,
-  modalFooterBgd,
-  modalImagePlaceHolder,
-  modalPadding,
-
-  modalDialogBgd,
-  modalDialogColor,
-
-  modalLateralPadding,
-  modalPortableLateralPadding,
-  modalOverLayZ,
-  modalOverlayBgd,
-  modalContentZ,
-  modalFooterZ,
-  modalTitleZ,
-  modalButtonZ,
-  modalDropdownBackground,
-
-  // Side Panel
-  sidePanelBg,
-  sidePanelInnerPadding,
-  sideBarCloseBtnBgd,
-  sideBarCloseBtnColor,
-  sideBarCloseBtnBgdHover,
-  sidePanelHeaderBg,
-  sidePanelHeaderBorder,
-  sidePanelScrollBarWidth,
-  sidePanelScrollBarHeight,
-  sidePanelTitleFontsize,
-  sidePanelTitleLineHeight,
-  panelHeaderBorderRadius,
-  sidePanelBorder,
-  sidePanelBorderColor,
-
-  layerConfigGroupLabelLabelFontSize,
-  layerConfigGroupMarginBottom,
-  layerConfigGroupPaddingLeft,
-
-  // Side Panel Panel
-  chickletBgd,
-  chickletBgdLT,
-  panelBackground,
-  panelContentBackground,
-  panelBackgroundHover,
-  panelBackgroundLT,
-  panelToggleMarginRight,
-  panelToggleBottomPadding,
-  panelBoxShadow,
-  panelBorderRadius,
-  panelBorder,
-  panelBorderColor,
-  panelBorderLT,
-  panelHeaderIcon,
-  panelHeaderIconActive,
-  panelHeaderIconHover,
-  panelHeaderHeight,
-  layerPanelHeaderHeight,
-  panelDropdownScrollBar,
-
-  layerTypeIconSizeL,
-  layerTypeIconPdL,
-  layerTypeIconSizeSM,
-
-  // Text
-  fontFamily,
-  fontWeight,
-  fontSize,
-  lineHeight,
-  textColor,
-  textColorLT,
-  dataTableTextColor,
-  textColorHl,
-  titleTextColor,
-  subtextColor,
-  subtextColorLT,
-  subtextColorActive,
-  panelToggleBorderColor,
-  panelTabWidth,
-  textTruncate,
-  titleColorLT,
-  tooltipBg,
-  tooltipColor,
-  tooltipBoxShadow,
-  tooltipFontSize,
-  logoColor,
-
-  // Sidepanel divider
-  sidepanelDividerBorder,
-  sidepanelDividerMargin,
-  sidepanelDividerHeight,
-
-  // Bottom Panel
-  bottomInnerPdSide,
-  bottomInnerPdVert,
-  bottomPanelGap,
-  bottomWidgetPaddingTop,
-  bottomWidgetPaddingRight,
-  bottomWidgetPaddingBottom,
-  bottomWidgetPaddingLeft,
-  bottomWidgetBgd,
-
-  // Slider
-  sliderBarColor,
-  sliderBarBgd,
-  sliderBarHoverColor,
-  sliderBarRadius,
-  sliderBarHeight,
-  sliderHandleHeight,
-  sliderHandleWidth,
-  sliderHandleColor,
-  sliderHandleTextColor,
-  sliderInactiveBorderColor,
-  sliderBorderRadius,
-  sliderHandleHoverColor,
-  sliderHandleAfterContent,
-  sliderHandleShadow,
-  sliderInputHeight,
-  sliderInputWidth,
-  sliderMarginTopIsTime,
-  sliderMarginTop,
-  sliderMarginBottom,
-
-  // Geocoder
-  geocoderWidth,
-  geocoderTop,
-  geocoderRight,
-  geocoderInputHeight,
-
-  // Plot
-  rangeBrushBgd,
-  histogramFillInRange,
-  histogramFillOutRange,
-  axisFontSize,
-  axisFontColor,
-  timeTitleFontSize,
-  rangePlotMargin,
-  rangePlotMarginLarge,
-  rangePlotH,
-  rangePlotHLarge,
-  rangePlotContainerH,
-  rangePlotContainerHLarge,
-
-  // Notifications
-  notificationColors,
-  notificationPanelWidth,
-  notificationPanelItemWidth,
-  notificationPanelItemHeight,
-
-  // Data Table
-  headerRowHeight,
-  rowHeight,
-  headerPaddingTop,
-  headerPaddingBottom,
-  cellPaddingSide,
-  edgeCellPaddingSide,
-  cellFontSize,
-  gridPaddingSide,
-  optionButtonColor,
-  headerCellBackground,
-  headerCellBorderColor,
-  headerCellIconColor,
-  cellBorderColor,
-  evenRowBackground,
-  oddRowBackground,
-  pinnedGridBorderColor,
-  // time display
-  timeDisplayBorderRadius,
-  timeDisplayHeight,
-  timeDisplayMinWidth,
-  timeDisplayOpacity,
-  timeDisplayPadding,
-
-  // export map
-  exportIntraSectionMargin,
-
-  // Action Panel
-  actionPanelWidth,
-  actionPanelHeight,
-
-  // Breakpoints
-  breakPoints,
-
-  // progressbar
-  progressBarColor,
-  progressBarTrackColor,
-
-  // layerConfigGroupLabel
-  layerConfigGroupLabelBorderLeft,
-  layerConfigGroupLabelMargin,
-  layerConfigGroupLabelPadding,
-  layerConfigGroupColor,
-
-  // layerConfigGroupLabel label
-  layerConfigGroupLabelLabelMargin,
-
-  // StyledConfigGroupHeader
-  styledConfigGroupHeaderBorder,
-
-  // layerConfigurator
-  layerConfiguratorBorder,
-  layerConfiguratorBorderColor,
-  layerConfiguratorMargin,
-  layerConfiguratorPadding,
-
-  // Styled token
-  fieldTokenRightMargin
-};
-
-export const themeLT = {
-  ...theme,
-  // template
-  activeColor: activeColorLT,
-  input: inputLT,
-  textColor: textColorLT,
-  sidePanelBg: '#FFFFFF',
-  selectColor: selectColorLT,
-  titleTextColor: '#000000',
-  sidePanelHeaderBg: '#F7F7F7',
-  subtextColorActive: activeColorLT,
-  tooltipBg: '#1869B5',
-  tooltipColor: '#FFFFFF',
-  dropdownListBgd: '#FFFFFF',
-  toolbarItemBgdHover: '#F7F7F7',
-  textColorHl: activeColorLT,
-
-  inputBgd: '#F7F7F7',
-  inputBgdHover: '#FFFFFF',
-  inputBgdActive: '#FFFFFF',
-  inputBgdActiveLT: '#FFFFFF',
-  dropdownListHighlightBg: '#F0F0F0',
-  toolbarItemIconHover: activeColorLT,
-  panelBackground: '#F7F7F7',
-  panelContentBackground: '#F7F7F7',
-  bottomWidgetBgd: '#F7F7F7',
-  panelBackgroundHover: '#F7F7F7',
-  panelBorderColor: '#D3D8E0',
-  panelHeaderIconActive: '#000000',
-  panelHeaderIconHover: '#000000',
-  sideBarCloseBtnBgd: '#F7F7F7',
-  sideBarCloseBtnColor: textColorLT,
-  sideBarCloseBtnBgdHover: '#F7F7F7',
-
-  secondaryInputBgd: '#F7F7F7',
-  secondaryInputBgdActive: '#F7F7F7',
-  secondaryInputBgdHover: '#FFFFFF',
-  secondaryInputBorderActiveColor: '#000000',
-  secondaryInputBorderColor: 'none',
-  secondaryInputColor: '#545454',
-
-  chickletBgd: '#F7F7F7',
-  mapPanelBackgroundColor: '#FFFFFF',
-  mapPanelHeaderBackgroundColor: '#F7F7F7',
-
-  sliderBarColor: '#A0A7B4',
-  sliderBarBgd: '#D3D8E0',
-  sliderHandleColor: '#F7F7F7',
-  sliderInactiveBorderColor: '#F7F7F7',
-  sliderHandleTextColor: '#F7F7F7',
-  sliderHandleHoverColor: '#F7F7F7',
-
-  subtextColor: subtextColorLT,
-  switchBtnBgd: '#F7F7F7',
-  secondarySwitchBtnBgd: '#F7F7F7',
-  secondarySwitchTrackBgd: '#D3D8E0',
-  switchBtnBgdActive: '#F7F7F7',
-  switchTrackBgd: '#D3D8E0',
-  switchTrackBgdActive: activeColorLT,
-
-  // button switch background and hover color
-  primaryBtnBgd: primaryBtnActBgd,
-  primaryBtnActBgd: primaryBtnBgd,
-  primaryBtnBgdHover: primaryBtnBgd,
-
-  secondaryBtnBgd: secondaryBtnActBgd,
-  secondaryBtnActBgd: secondaryBtnBgd,
-  secondaryBtnBgdHover: secondaryBtnBgd,
-
-  floatingBtnBgd: '#F7F7F7',
-  floatingBtnActBgd: '#F7F7F7',
-  floatingBtnBgdHover: '#F7F7F7',
-  floatingBtnColor: subtextColor,
-  floatingBtnActColor: activeColorLT,
-
-  linkBtnActColor: textColorLT,
-
-  rangeBrushBgd: '#D3D8E0',
-  histogramFillInRange: activeColorLT,
-  histogramFillOutRange: '#A0A7B4',
-  axisFontColor: textColorLT
-};
-
-export const themeBS = {
-  ...theme,
-  activeColor: '#E2E2E2',
-  dropdownListBgd: '#FFFFFF',
-  toolbarItemBgdHover: '#F7F7F7',
-  dropdownListBorderTop: 'none',
-  dropdownListHighlightBg: '#F6F6F6',
-  toolbarItemIconHover: '#000000',
-  inputBgd: '#E2E2E2',
-  inputBgdActive: '#E2E2E2',
-  inputBgdHover: 'inherit',
-  inputBorderActiveColor: '#000000',
-  inputColor: '#000000',
-  chickletBgd: '#E2E2E2',
-  panelBackground: '#FFFFFF',
-  panelBackgroundHover: '#EEEEEE',
-  panelContentBackground: '#FFFFFF',
-  bottomWidgetBgd: '#F7F7F7',
-  panelHeaderIconActive: '#000000',
-  panelHeaderIconHover: '#000000',
-  panelBorderColor: '#E2E2E2',
-  primaryBtnBgd: '#E2E2E2',
-  primaryBtnBgdHover: '#333333',
-  primaryBtnColor: '#000000',
-  secondaryBtnActBgd: '#EEEEEE',
-  secondaryBtnActColor: '#000000',
-  secondaryBtnBgd: '#E2E2E2',
-  secondaryBtnBgdHover: '#CBCBCB',
-  ctnBtnBgd: '#E2E2E2',
-  ctnBtnBgdHover: '333333',
-  ctnBtnColor: '#000000',
-  ctnBtnActColor: '#000000',
-
-  sideBarCloseBtnBgd: '#E2E2E2',
-  sideBarCloseBtnColor: '#000000',
-  sideBarCloseBtnBgdHover: '#FFFFFF',
-
-  floatingBtnBgd: '#FFFFFF',
-  floatingBtnActBgd: '#EEEEEE',
-  floatingBtnBgdHover: '#EEEEEE',
-  floatingBtnColor: '#757575',
-  floatingBtnActColor: '#000000',
-
-  secondaryBtnColor: '#000000',
-  secondaryInputBgd: '#F6F6F6',
-  secondaryInputBgdActive: '#F6F6F6',
-  secondaryInputBgdHover: '#F6F6F6',
-  secondaryInputBorderActiveColor: '#000000',
-  secondaryInputBorderColor: 'none',
-  secondaryInputColor: '#545454',
-  sidePanelBg: '#F6F6F6',
-  sidePanelHeaderBg: '#FFFFFF',
-  subtextColor: '#AFAFAF',
-  panelTabColor: '#AFAFAF',
-  subtextColorActive: '#000000',
-  textColor: '#000000',
-  textColorHl: '#545454',
-  mapPanelBackgroundColor: '#F6F6F6',
-  mapPanelHeaderBackgroundColor: '#FFFFFF',
-  titleTextColor: '#000000',
-  switchBtnBgdActive: '#000000',
-  switchBtnBgd: '#FFFFFF',
-  switchTrackBgdActive: '#E2E2E2',
-  secondarySwitchTrackBgd: '#E2E2E2',
-  switchTrackBgd: '#E2E2E2',
-  secondarySwitchBtnBgd: '#FFFFFF',
-  histogramFillInRange: '#000000',
-  histogramFillOutRange: '#E2E2E2',
-  rangeBrushBgd: '#E2E2E2',
-  sliderBarBgd: '#E2E2E2',
-  sliderHandleColor: '#FFFFFF',
-  sliderInactiveBorderColor: '#FFFFFF',
-  sliderHandleTextColor: '#FFFFFF',
-  sliderBarColor: '#000000'
-};