[Enhancement] extend template for light theme (#1305)

* extend template for light theme
keplergl · Oct 29, 2020 · 334f0b7 · 334f0b7
1 parent abbe032
commit 334f0b7
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 7 deletions.
diff --git a/src/components/common/data-table/index.js b/src/components/common/data-table/index.js
@@ -51,7 +51,7 @@ export const Container = styled.div`
   display: flex;
   font-size: 11px;
   flex-grow: 1;
-  color: ${props => props.theme.textColorLT};
+  color: ${props => props.theme.dataTableTextColor};
   width: 100%;
 
   .ReactVirtualized__Grid:focus,

diff --git a/src/components/common/item-selector/chickleted-input.js b/src/components/common/item-selector/chickleted-input.js
@@ -85,7 +85,7 @@ const ChickletedInputContainer = styled.div`
       : props.inputTheme === 'light'
       ? props.theme.chickletedInputLT
       : props.theme.chickletedInput}
-
+      
   color: ${props =>
     props.hasPlaceholder ? props.theme.selectColorPlaceHolder : props.theme.selectColor};
   overflow: hidden;

diff --git a/src/components/common/slider/slider-handle.js b/src/components/common/slider/slider-handle.js
@@ -46,7 +46,7 @@ const StyledSliderHandle = styled.span`
   border-radius: ${props => props.theme.sliderBorderRadius};
   border-style: solid;
   border-color: ${props =>
-    props.active ? props.theme.selectBorderColor : props.theme.sliderHandleColor};
+    props.active ? props.theme.selectBorderColor : props.theme.sliderInactiveBorderColor};
 
   :hover {
     background-color: ${props => props.theme.sliderHandleHoverColor};

diff --git a/src/components/index.js b/src/components/index.js
@@ -60,7 +60,7 @@ export {default as LayerPanelFactory} from './side-panel/layer-panel/layer-panel
 export {default as LayerPanelHeaderFactory} from './side-panel/layer-panel/layer-panel-header';
 export {default as LayerConfiguratorFactory} from './side-panel/layer-panel/layer-configurator';
 export {default as TextLabelPanelFactory} from './side-panel/layer-panel/text-label-panel';
-export {default as LayerConfigGroupLabelFactory} from './side-panel/layer-panel/layer-config-group';
+export {LayerConfigGroupLabelFactory} from './side-panel/layer-panel/layer-config-group';
 
 export {default as SourceDataCatalogFactory} from './side-panel/common/source-data-catalog';
 export {default as SourceDataSelectorFactory} from './side-panel/common/source-data-selector';

diff --git a/src/components/side-panel/panel-toggle.js b/src/components/side-panel/panel-toggle.js
@@ -48,7 +48,7 @@ const PanelTab = styled.div.attrs({
   border-bottom-width: 2px;
   border-bottom-color: ${props =>
     props.active ? props.theme.panelToggleBorderColor : 'transparent'};
-  color: ${props => (props.active ? props.theme.subtextColorActive : props.theme.subtextColor)};
+  color: ${props => (props.active ? props.theme.subtextColorActive : props.theme.panelTabColor)};
   display: flex;
   justify-content: center;
   margin-right: ${props => props.theme.panelToggleMarginRight}px;

diff --git a/src/styles/base.js b/src/styles/base.js
@@ -42,6 +42,7 @@ export const labelColorLT = '#6A7485';
 
 export const textColor = '#A0A7B4';
 export const textColorLT = '#3A414C';
+export const dataTableTextColor = textColorLT;
 export const titleColorLT = '#29323C';
 
 export const subtextColor = '#6A7485';
@@ -170,7 +171,7 @@ 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)';
@@ -316,7 +317,7 @@ 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';
@@ -1115,6 +1116,7 @@ export const theme = {
   selectFontWeight,
   selectColorLT,
   selectFontWeightBold,
+  panelTabColor,
 
   // Input
   inputBgd,
@@ -1311,6 +1313,7 @@ export const theme = {
   lineHeight,
   textColor,
   textColorLT,
+  dataTableTextColor,
   textColorHl,
   titleTextColor,
   subtextColor,
@@ -1351,6 +1354,7 @@ export const theme = {
   sliderHandleWidth,
   sliderHandleColor,
   sliderHandleTextColor,
+  sliderInactiveBorderColor,
   sliderBorderRadius,
   sliderHandleHoverColor,
   sliderHandleAfterContent,
@@ -1495,6 +1499,8 @@ export const themeLT = {
   sliderBarColor: '#A0A7B4',
   sliderBarBgd: '#D3D8E0',
   sliderHandleColor: '#F7F7F7',
+  sliderInactiveBorderColor: '#F7F7F7',
+  sliderHandleTextColor: '#F7F7F7',
   sliderHandleHoverColor: '#F7F7F7',
 
   subtextColor: subtextColorLT,
@@ -1581,6 +1587,7 @@ export const themeBS = {
   sidePanelBg: '#F6F6F6',
   sidePanelHeaderBg: '#FFFFFF',
   subtextColor: '#AFAFAF',
+  panelTabColor: '#AFAFAF',
   subtextColorActive: '#000000',
   textColor: '#000000',
   textColorHl: '#545454',
@@ -1598,5 +1605,7 @@ export const themeBS = {
   rangeBrushBgd: '#E2E2E2',
   sliderBarBgd: '#E2E2E2',
   sliderHandleColor: '#FFFFFF',
+  sliderInactiveBorderColor: '#FFFFFF',
+  sliderHandleTextColor: '#FFFFFF',
   sliderBarColor: '#000000'
 };