@carto/kepler.gl 0.0.80 → 0.1.0-alpha.1

package/src/styles/base.ts

@@ -0,0 +1,1642 @@
+// 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';
+
+type InputProps = {
+  active: boolean;
+  disabled: boolean;
+  error: string;
+  size: string;
+  type: string;
+};
+
+type SecondaryInputProps = {
+  error: string;
+};
+
+type SwitchableProps = {
+  checked: boolean;
+};
+
+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;
+
+export const layerPanelToggleOptionColor = '#6A7485';
+export const layerPanelToggleOptionColorActive = '#F0F0F0';
+
+// 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<InputProps>`
+  ::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<SecondaryInputProps>`
+  ${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<SwitchableProps>`
+  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<SwitchableProps>`
+  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<SwitchableProps>`
+  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<SwitchableProps>`
+  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<SwitchableProps>`
+  ${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,
+
+  layerPanelToggleOptionColor,
+  layerPanelToggleOptionColorActive,
+
+  // 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'
+};