theme

packages/web/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/colors": "^5.0.0",
     "@dbgate/datalib": "^0.1.0",
     "@dbgate/engines": "^0.1.0",
     "@dbgate/sqltree": "^0.1.0",

packages/web/src/Screen.js

@@ -22,7 +22,7 @@ const BodyDiv = styled.div`
   left: ${(props) => props.contentLeft}px;
   bottom: ${dimensions.statusBar.height}px;
   right: 0;
-  background-color: ${(props) => props.theme.mainAreaBackground};
+  background-color: ${(props) => props.theme.content_background};
 `;
 
 const ToolBarDiv = styled.div`
@@ -30,7 +30,7 @@ const ToolBarDiv = styled.div`
   top: 0;
   left: 0;
   right: 0;
-  background-color: ${(props) => props.theme.toolBarBackground};
+  background-color: ${(props) => props.theme.toolbar_background};
   height: ${dimensions.toolBar.height}px;
 `;
 
@@ -40,7 +40,7 @@ const IconBar = styled.div`
   left: 0;
   bottom: ${dimensions.statusBar.height}px;
   width: ${dimensions.widgetMenu.iconSize}px;
-  background-color: ${(props) => props.theme.widgetBackground};
+  background-color: ${(props) => props.theme.widget_background};
 `;
 
 const LeftPanel = styled.div`
@@ -48,7 +48,7 @@ const LeftPanel = styled.div`
   top: ${dimensions.toolBar.height}px;
   left: ${dimensions.widgetMenu.iconSize}px;
   bottom: ${dimensions.statusBar.height}px;
-  background-color: ${(props) => props.theme.leftPanelBackground};
+  background-color: ${(props) => props.theme.left_background};
   display: flex;
 `;
 
@@ -59,7 +59,7 @@ const TabsPanelContainer = styled.div`
   left: ${(props) => props.contentLeft}px;
   height: ${dimensions.tabsPanel.height}px;
   right: 0;
-  background-color: ${(props) => props.theme.tabsPanelBackground};
+  background-color: ${(props) => props.theme.tabs_background2};
   border-top: 1px solid #ccc;
 
   overflow-x: auto;

packages/web/src/TabsPanel.js

@@ -8,6 +8,7 @@ import { showMenu } from './modals/DropDownMenu';
 import { getConnectionInfo } from './utility/metadataLoaders';
 import { FontIcon } from './icons';
 import useTheme from './theme/useTheme';
+import usePropsCompare from './utility/usePropsCompare';
 
 // const files = [
 //   { name: 'app.js' },
@@ -43,11 +44,11 @@ const DbNameWrapper = styled.div`
   // height: 15px;
 
   &:hover {
-    background-color: #aaa;
+    background-color: ${(props) => props.theme.tabs_background3};
   }
   background-color: ${(props) =>
     // @ts-ignore
-    props.selected ? props.theme.tabsPanelSelectedBackground : 'inherit'};
+    props.selected ? props.theme.tabs_background1 : 'inherit'};
 `;
 
 // const DbNameWrapperInner = styled.div`
@@ -67,11 +68,11 @@ const FileTabItem = styled.div`
   cursor: pointer;
   user-select: none;
   &:hover {
-    color: ${(props) => props.theme.tabsPanelHoverFont};
+    color: ${(props) => props.theme.tabs_font_hover};
   }
   background-color: ${(props) =>
     // @ts-ignore
-    props.selected ? props.theme.tabsPanelSelectedBackground : 'inherit'};
+    props.selected ? props.theme.tabs_background1 : 'inherit'};
 `;
 
 const FileNameWrapper = styled.span`
@@ -82,7 +83,7 @@ const CloseButton = styled(FontIcon)`
   margin-left: 5px;
   color: gray;
   &:hover {
-    color: ${(props) => props.theme.tabsPanelHoverFont};
+    color: ${(props) => props.theme.tabs_font2};
   }
 `;
 

packages/web/src/celldata/CellDataView.js

@@ -5,10 +5,11 @@ import ErrorInfo from '../widgets/ErrorInfo';
 import styled from 'styled-components';
 import { TextCellViewWrap, TextCellViewNoWrap } from './TextCellView';
 import JsonCellView from './JsonCellDataView';
+import useTheme from '../theme/useTheme';
 
 const Toolbar = styled.div`
   display: flex;
-  background: #ccc;
+  background: ${(props) => props.theme.toolbar_background};
   align-items: center;
 `;
 
@@ -53,6 +54,7 @@ function autodetect(selection, grider, value) {
 
 export default function CellDataView({ selection, grider }) {
   const [selectedFormatType, setSelectedFormatType] = React.useState('autodetect');
+  const theme = useTheme();
   let value = null;
   if (grider && selection.length == 1) {
     const rowData = grider.getRowData(selection[0].row);
@@ -69,7 +71,7 @@ export default function CellDataView({ selection, grider }) {
 
   return (
     <MainWrapper>
-      <Toolbar>
+      <Toolbar theme={theme}>
         Format:
         <SelectField value={selectedFormatType} onChange={(e) => setSelectedFormatType(e.target.value)}>
           <option value="autodetect">Autodetect - {autodetectFormat.title}</option>

packages/web/src/datagrid/DataGrid.js

@@ -7,9 +7,10 @@ import { HorizontalSplitter } from '../widgets/Splitter';
 import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar';
 import CellDataView from '../celldata/CellDataView';
 import { FreeTableGridDisplay } from '@dbgate/datalib';
+import useTheme from '../theme/useTheme';
 
 const LeftContainer = styled.div`
-  background-color: white;
+  background-color: ${(props) => props.theme.manager_background};
   display: flex;
   flex: 1;
 `;
@@ -21,12 +22,13 @@ const DataGridContainer = styled.div`
 
 export default function DataGrid(props) {
   const { GridCore } = props;
+  const theme = useTheme();
   const [managerSize, setManagerSize] = React.useState(0);
   const [selection, setSelection] = React.useState([]);
   const [grider, setGrider] = React.useState(null);
   return (
     <HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>
-      <LeftContainer>
+      <LeftContainer theme={theme}>
         <WidgetColumnBar>
           <WidgetColumnBarItem title="Columns" name="columns" height={props.showReferences ? '40%' : '60%'}>
             <ColumnManager {...props} managerSize={managerSize} />

packages/web/src/datagrid/DataGridCore.js

@@ -70,7 +70,7 @@ const TableHeaderCell = styled.td`
   padding: 0;
   // padding: 2px;
   margin: 0;
-  background-color: ${(props) => props.theme.gridHeaderBackground};
+  background-color: ${(props) => props.theme.gridheader_background};
   overflow: hidden;
 `;
 const TableFilterCell = styled.td`
@@ -89,7 +89,7 @@ const FocusField = styled.input`
 
 const RowCountLabel = styled.div`
   position: absolute;
-  background-color: ${(props) => props.theme.gridRowCountLabel};
+  background-color: ${(props) => props.theme.gridbody_background_yellow[1]};
   right: 40px;
   bottom: 20px;
 `;

packages/web/src/datagrid/DataGridRow.js

@@ -22,20 +22,20 @@ const TableBodyCell = styled.td`
     !props.isFocusedColumn &&
     `
     background: initial;
-    background-color: ${props.theme.gridSelectionBackground};
+    background-color: ${props.theme.gridbody_selection[4]};
-    color: ${props.theme.gridSelectionFont};`}
+    color: ${props.theme.gridbody_invfont1};`}
 
   ${(props) =>
     props.isFrameSelected &&
     `
-      outline: 3px solid ${props.theme.gridSelectionBackground};
+      outline: 3px solid ${props.theme.gridbody_selection[4]};
       outline-offset: -3px;`}
   
   ${(props) =>
     props.isAutofillSelected &&
     !props.isFocusedColumn &&
     `
-      outline: 3px solid ${props.theme.gridSelectionBackground};
+      outline: 3px solid ${props.theme.gridbody_selection[4]};
       outline-offset: -3px;`}
 
     ${(props) =>
@@ -46,7 +46,7 @@ const TableBodyCell = styled.td`
     !props.isModifiedCell &&
     !props.isFocusedColumn &&
     `
-  background-color: ${props.theme.gridModifiedRowBackground};`}
+  background-color: ${props.theme.gridbody_background_gold[1]};`}
   ${(props) =>
     !props.isSelected &&
     !props.isAutofillSelected &&
@@ -54,7 +54,7 @@ const TableBodyCell = styled.td`
     !props.isFocusedColumn &&
     props.isModifiedCell &&
     `
-      background-color: ${props.theme.gridModifiedCellBackground};`}
+      background-color: ${props.theme.gridbody_background_orange[1]};`}
 
   ${(props) =>
     !props.isSelected &&
@@ -62,7 +62,7 @@ const TableBodyCell = styled.td`
     !props.isFocusedColumn &&
     props.isInsertedRow &&
     `
-      background-color: ${props.theme.gridInsertedRowBackground};`}
+      background-color: ${props.theme.gridbody_background_green[1]};`}
 
   ${(props) =>
     !props.isSelected &&
@@ -70,13 +70,13 @@ const TableBodyCell = styled.td`
     !props.isFocusedColumn &&
     props.isDeletedRow &&
     `
-      background-color: ${props.theme.gridDeletedRowBackground};
+      background-color: ${props.theme.gridbody_background_volcano[1]};
   `}
 
   ${(props) =>
     props.isFocusedColumn &&
     `
-    background-color: ${props.theme.gridFocusedColumnBackground};
+    background-color: ${props.theme.gridbody_background_yellow[0]};
   `}
   
     ${(props) =>
@@ -99,12 +99,12 @@ const NullSpan = styled.span`
 
 const TableBodyRow = styled.tr`
   // height: 35px;
-  background-color: ${(props) => props.theme.gridRowBackground};
+  background-color: ${(props) => props.theme.gridbody_background};
   &:nth-child(6n + 3) {
-    background-color: ${(props) => props.theme.gridRowBackground2};
+    background-color: ${(props) => props.theme.gridbody_background_alt2};
   }
   &:nth-child(6n + 6) {
-    background-color: ${(props) => props.theme.gridRowBackground3};
+    background-color: ${(props) => props.theme.gridbody_background_alt3};
   }
 `;
 
@@ -112,14 +112,14 @@ const TableHeaderCell = styled.td`
   border: 1px solid ${(props) => props.theme.border};
   text-align: left;
   padding: 2px;
-  background-color: ${(props) => props.theme.gridHeaderBackground};
+  background-color: ${(props) => props.theme.gridheader_background};
   overflow: hidden;
 `;
 
 const AutoFillPoint = styled.div`
   width: 8px;
   height: 8px;
-  background-color: ${(props) => props.theme.gridAutoFillBackground};
+  background-color: ${(props) => props.theme.gridbody_selection[6]};
   position: absolute;
   right: 0px;
   bottom: 0px;

packages/web/src/theme/colorUtil.js

@@ -0,0 +1,152 @@
+// https://css-tricks.com/using-javascript-to-adjust-saturation-and-brightness-of-rgb-colors/
+
+export function hexToRgb(rgb) {
+  return (rgb = [rgb.substring(1, 3), rgb.substring(3, 5), rgb.substring(5, 7)].map((x) => parseInt(x, 16)));
+}
+
+function componentToHex(c) {
+  let num = Math.round(c);
+  if (num < 0) num = 0;
+  if (num > 255) num = 255;
+  var hex = num.toString(16);
+  return hex.length == 1 ? '0' + hex : hex;
+}
+
+export function rgbToHex(r, g, b) {
+  return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
+
+export function getLightnessOfRGB(rgb) {
+  // First convert to an array of integers by removing the whitespace, taking the 3rd char to the 2nd last then splitting by ','
+  const rgbIntArray = hexToRgb(rgb);
+
+  // Get the highest and lowest out of red green and blue
+  const highest = Math.max(...rgbIntArray);
+  const lowest = Math.min(...rgbIntArray);
+
+  // Return the average divided by 255
+  return (highest + lowest) / 2 / 255;
+}
+
+export function saturateByTenth(rgb) {
+  const rgbIntArray = hexToRgb(rgb);
+  const grayVal = getLightnessOfRGB(rgb) * 255;
+  const [lowest, middle, highest] = getLowestMiddleHighest(rgbIntArray);
+
+  if (lowest.val === highest.val) {
+    return rgb;
+  }
+
+  const saturationRange = Math.round(Math.min(255 - grayVal, grayVal));
+  const maxChange = Math.min(255 - highest.val, lowest.val);
+  const changeAmount = Math.min(saturationRange / 10, maxChange);
+  const middleValueRatio = (grayVal - middle.val) / (grayVal - highest.val);
+
+  const returnArray = [];
+  returnArray[highest.index] = Math.round(highest.val + changeAmount);
+  returnArray[lowest.index] = Math.round(lowest.val - changeAmount);
+  returnArray[middle.index] = Math.round(grayVal + (returnArray[highest.index] - grayVal) * middleValueRatio);
+  return `rgb(${[returnArray].join()})`;
+}
+
+function getLowestMiddleHighest(rgbIntArray) {
+  let highest = { val: -1, index: -1 };
+  let lowest = { val: Infinity, index: -1 };
+
+  rgbIntArray.map((val, index) => {
+    if (val > highest.val) {
+      highest = { val: val, index: index };
+    }
+    if (val < lowest.val) {
+      lowest = { val: val, index: index };
+    }
+  });
+
+  if (lowest.index === highest.index) {
+    lowest.index = highest.index + 1;
+  }
+
+  let middle = { index: 3 - highest.index - lowest.index };
+  middle.val = rgbIntArray[middle.index];
+  return [lowest, middle, highest];
+}
+
+export function lightenByTenth(rgb, ratio = 0.1) {
+  const rgbIntArray = hexToRgb(rgb);
+  // Grab the values in order of magnitude
+  // This uses the getLowestMiddleHighest function from the saturate section
+  const [lowest, middle, highest] = getLowestMiddleHighest(rgbIntArray);
+
+  if (lowest.val === 255) {
+    return rgb;
+  }
+
+  const returnArray = [];
+
+  // First work out increase on lower value
+  returnArray[lowest.index] = Math.round(lowest.val + Math.min(255 - lowest.val, 255 * ratio));
+
+  // Then apply to the middle and higher values
+  const increaseFraction = (returnArray[lowest.index] - lowest.val) / (255 - lowest.val);
+  returnArray[middle.index] = middle.val + (255 - middle.val) * increaseFraction;
+  returnArray[highest.index] = highest.val + (255 - highest.val) * increaseFraction;
+
+  // Convert the array back into an rgb string
+  return rgbToHex(...returnArray);
+}
+
+export function darkenByTenth(rgb, ratio = 0.1) {
+  // Our rgb to int array function again
+  const rgbIntArray = hexToRgb(rgb);
+  //grab the values in order of magnitude
+  //this uses the function from the saturate function
+  const [lowest, middle, highest] = getLowestMiddleHighest(rgbIntArray);
+
+  if (highest.val === 0) {
+    return rgb;
+  }
+
+  const returnArray = [];
+
+  returnArray[highest.index] = highest.val - Math.min(highest.val, 255 * ratio);
+  const decreaseFraction = (highest.val - returnArray[highest.index]) / highest.val;
+  returnArray[middle.index] = middle.val - middle.val * decreaseFraction;
+  returnArray[lowest.index] = lowest.val - lowest.val * decreaseFraction;
+
+  // Convert the array back into an rgb string
+  return rgbToHex(...returnArray);
+}
+
+export function desaturateByTenth(rgb) {
+  const rgbIntArray = hexToRgb(rgb);
+  //grab the values in order of magnitude
+  //this uses the getLowestMiddleHighest function from the saturate section
+  const [lowest, middle, highest] = getLowestMiddleHighest(rgbIntArray);
+  const grayVal = getLightnessOfRGB(rgb) * 255;
+
+  if (lowest.val === highest.val) {
+    return rgb;
+  }
+
+  const saturationRange = Math.round(Math.min(255 - grayVal, grayVal));
+  const maxChange = grayVal - lowest.val;
+  const changeAmount = Math.min(saturationRange / 10, maxChange);
+
+  const middleValueRatio = (grayVal - middle.val) / (grayVal - highest.val);
+
+  const returnArray = [];
+  returnArray[highest.index] = Math.round(highest.val - changeAmount);
+  returnArray[lowest.index] = Math.round(lowest.val + changeAmount);
+  returnArray[middle.index] = Math.round(grayVal + (returnArray[highest.index] - grayVal) * middleValueRatio);
+  return rgbToHex(...returnArray);
+}
+
+export function accentColor(rgb, index, ratio = 0.1) {
+  const rgbIntArray = hexToRgb(rgb);
+  const returnArray = rgbIntArray.map((v, i) => {
+    if (i == index) return v + 255 * ratio;
+    return v - 128 * ratio;
+  });
+
+  return rgbToHex(...returnArray);
+}

packages/web/src/theme/fillTheme.js

@@ -0,0 +1,90 @@
+import _ from 'lodash';
+import { accentColor, darkenByTenth, lightenByTenth } from './colorUtil';
+import { generate, presetPalettes, presetDarkPalettes, presetPrimaryColors } from '@ant-design/colors';
+
+function fillOne(theme, name, type, add, background, fontName, invFontName, changeLightFunc, fontPalettes) {
+  add[`${name}_font1`] = add[`${fontName}1`];
+  add[`${name}_font2`] = add[`${fontName}2`];
+  add[`${name}_font3`] = add[`${fontName}3`];
+
+  add[`${name}_invfont1`] = add[`${invFontName}1`];
+  add[`${name}_invfont2`] = add[`${invFontName}2`];
+  add[`${name}_invfont3`] = add[`${invFontName}3`];
+  // add[`${name}_fontDisabled`] = add.fontBlack3;
+
+  if (background) {
+    add[`${name}_background1`] = background;
+    add[`${name}_background2`] = changeLightFunc(add[`${name}_background1`]);
+    add[`${name}_background3`] = changeLightFunc(add[`${name}_background2`]);
+  }
+
+  for (const colorName in presetPrimaryColors) {
+    add[`${name}_font_${colorName}`] = fontPalettes[colorName];
+    if (background) {
+      add[`${name}_background_${colorName}`] = generate(presetPrimaryColors[colorName], {
+        theme: type,
+        backgroundColor: background,
+      });
+
+      add[`${name}_selection`] = generate(
+        theme.selectionAntName ? presetPrimaryColors[theme.selectionAntName] : theme.selectionBaseColor,
+        {
+          theme: type,
+          backgroundColor: background,
+        }
+      );
+    }
+  }
+
+  add[`${name}_font_hover`] = add[`${name}_font_geekblue`][8];
+  add[`${name}_font_link`] = add[`${name}_font_geekblue`][7];
+
+  if (background) {
+    add[`${name}_background_alt2`] = changeLightFunc(add[`${name}_background1`], 0.05);
+    add[`${name}_background_alt3`] = add[`${name}_background_geekblue`][0];
+  }
+}
+
+export default function fillTheme(theme) {
+  const add = {};
+  add.fontWhite1 = theme.fontWhite1 || '#FFFFFF';
+  add.fontWhite2 = theme.fontWhite2 || darkenByTenth(add.fontWhite1, 0.3);
+  add.fontWhite3 = theme.fontWhite3 || darkenByTenth(add.fontWhite2, 0.2);
+
+  add.fontBlack1 = theme.fontBlack1 || '#000000';
+  add.fontBlack2 = theme.fontBlack2 || lightenByTenth(add.fontBlack1, 0.3);
+  add.fontBlack3 = theme.fontBlack3 || lightenByTenth(add.fontBlack2, 0.2);
+
+  for (const key of _.keys(theme)) {
+    const match = key.match(/(.*)_type/);
+    if (!match) continue;
+    const name = match[1];
+    const type = theme[key];
+    if (type != 'light' && type != 'dark') continue;
+
+    const background = theme[`${name}_background`];
+    if (type == 'light') {
+      fillOne(theme, name, type, add, background, 'fontBlack', 'fontWhite', darkenByTenth, presetPalettes);
+    }
+    if (type == 'dark') {
+      fillOne(theme, name, type, add, background, 'fontWhite', 'fontBlack', lightenByTenth, presetDarkPalettes);
+    }
+    // add[`${name}_fontr`] = accentColor(add[`${name}_font1`], 0, 0.6);
+    // add[`${name}_fontg`] = accentColor(add[`${name}_font1`], 1, 0.6);
+    // add[`${name}_fontb`] = accentColor(add[`${name}_font1`], 2, 0.6);
+
+    // if (background) {
+    //   add[`${name}_backgroundr`] = accentColor(add[`${name}_background1`], 0);
+    //   add[`${name}_backgroundg`] = accentColor(add[`${name}_background1`], 1);
+    //   add[`${name}_backgroundb`] = accentColor(add[`${name}_background1`], 2);
+    // }
+  }
+  console.log('COLORS', {
+    ...add,
+    ...theme,
+  });
+  return {
+    ...add,
+    ...theme,
+  };
+}

packages/web/src/theme/light.js

@@ -1,39 +1,79 @@
-export default {
+import fillTheme from './fillTheme';
+
+const theme = {
+  main_type: 'light',
+  selectionAntName: 'blue',
+  // main_background:
+
+  // fontWhite1: '#FFFFFF',
+  // fontWhite2: '#CCCCCC',
+  // fontWhite3: '#AAAAAA',
+
+  // fontBlack1: '#000000',
+  // fontBlack2: '#333333',
+  // fontBlack3: '#666666',
+
   border: '#ccc',
 
-  mainAreaBackground: '#eee',
+  toolbar_background: '#eeeeee',
-  mainFont: 'black',
+  toolbar_type: 'light',
-  mainFontGray: 'gray',
-  mainFontActive: 'blue',
 
-  leftPanelBackground: '#ccc',
+  content_background: '#eee',
+  content_type: 'light',
+  // mainAreaBackground: '#eee',
+  // mainFont: 'black',
+  // mainFontGray: 'gray',
+  // mainFontActive: 'blue',
 
-  widgetBackground: '#222',
+  left_background: '#cccccc',
-  widgetIconFontColor: '#eee',
+  left_type: 'light',
-  widgetBackgroundHover: '#555',
-  widgetBackgroundSelected: '#4CAF50',
-  widgetTitleBackground: 'gray',
 
-  tabsPanelBackground: '#ddd',
+  // leftPanelBackground: '#ccc',
-  tabsPanelBackgroundHover: '#ccc',
+
-  tabsPanelBackgroundHoverClick: '#aaa',
+  widget_type: 'dark',
-  tabsPanelSelectedBackground: '#eee',
+  widget_background: '#222222',
-  tabsPanelHoverFont: '#338',
+
+  // widgetBackground: '#222',
+  // widgetIconFontColor: '#eee',
+  // widgetBackgroundHover: '#555',
+  // widgetBackgroundSelected: '#4CAF50',
+  // widgetTitleBackground: 'gray',
+
+  title_type: 'dark',
+  title_background: '#888888',
+
+  manager_type: 'light',
+  manager_background: '#ffffff',
+
+  tabs_type: 'light',
+  tabs_background: '#eeeeee',
+  // tabsPanelBackground: '#ddd',
+  // tabsPanelBackgroundHover: '#ccc',
+  // tabsPanelBackgroundHoverClick: '#aaa',
+  // tabsPanelSelectedBackground: '#eee',
+  // tabsPanelHoverFont: '#338',
 
   statusBarBackground: '#00c',
-  toolBarBackground: '#eee',
 
-  gridHeaderBackground: '#f6f7f9',
+  gridheader_background: '#f6f7f9',
-  gridRowCountLabel: 'lightgoldenrodyellow',
+  gridheader_type: 'light',
-  gridSelectionBackground: 'deepskyblue',
+
-  gridSelectionFont: 'white',
+  gridbody_type: 'light',
-  gridModifiedRowBackground: '#FFFFDB',
+  gridbody_background: '#ffffff',
-  gridModifiedCellBackground: 'bisque',
+  // TRADITIONAL ALTERNATIVES:
-  gridInsertedRowBackground: '#DBFFDB',
+  // gridbody_background_alt2: '#ebebeb',
-  gridDeletedRowBackground: '#FFDBFF',
+  // gridbody_background_alt3: '#ebf5ff',
-  gridFocusedColumnBackground: 'lightgoldenrodyellow',
+
-  gridRowBackground: '#ffffff',
+  // gridHeaderBackground: '#f6f7f9',
-  gridRowBackground2: '#ebebeb',
+  // gridRowCountLabel: 'lightgoldenrodyellow',
-  gridRowBackground3: '#ebf5ff',
+  // gridSelectionBackground: 'deepskyblue',
-  gridAutoFillBackground: '#1a73e8',
+  // gridSelectionFont: 'white',
+  // gridModifiedRowBackground: '#FFFFDB',
+  // gridModifiedCellBackground: 'bisque',
+  // gridInsertedRowBackground: '#DBFFDB',
+  // gridDeletedRowBackground: '#FFDBFF',
+  // gridFocusedColumnBackground: 'lightgoldenrodyellow',
+  // gridAutoFillBackground: '#1a73e8',
 };
+
+export default fillTheme(theme);

packages/web/src/themes/ThemeHelmet.js

@@ -18,7 +18,7 @@ export default function ThemeHelmet() {
         .color-green-icon { color: #0A3; }
 
         body {
-          color: ${theme.mainFont};
+          color: ${theme.main_font1};
         }
         `}</style>
     </Helmet>

packages/web/src/widgets/TabControl.js

@@ -12,11 +12,11 @@ const TabItem = styled.div`
   align-items: center;
   cursor: pointer;
   &:hover {
-    color: ${(props) => props.theme.tabsPanelHoverFont};
+    color: ${(props) => props.theme.tabs_font_hover};
   }
   background-color: ${(props) =>
     // @ts-ignore
-    props.selected ? props.theme.mainAreaBackground : 'inherit'};
+    props.selected ? props.theme.tabs_background1 : 'inherit'};
 `;
 
 const TabNameWrapper = styled.span`
@@ -44,7 +44,7 @@ const TabsContainer = styled.div`
   display: flex;
   height: ${dimensions.tabsPanel.height}px;
   right: 0;
-  background-color: ${(props) => props.theme.tabsPanelBackground};
+  background-color: ${(props) => props.theme.tabs_background2};
 `;
 
 const TabContentContainer = styled.div`

packages/web/src/widgets/ToolbarButton.js

@@ -8,7 +8,7 @@ import useTheme from '../theme/useTheme';
 const ButtonDiv = styled.div`
   padding: 5px 15px;
   // margin: 2px;
-  color: ${(props) => props.theme.mainFont};
+  color: ${(props) => props.theme.main_font1};
   border: 0;
   border-right: 1px solid ${(props) => props.theme.border};
   height: ${dimensions.toolBar.height}px;
@@ -17,25 +17,25 @@ const ButtonDiv = styled.div`
     !props.disabled &&
     `
   &:hover {
-    background-color: ${props.theme.tabsPanelBackgroundHover} ;
+    background-color: ${props.theme.toolbar_background2} ;
   }
 
   &:active:hover {
-    background-color: ${props.theme.tabsPanelBackgroundHoverClick};
+    background-color: ${props.theme.toolbar_background3};
   }
   `}
 
   ${(props) =>
     props.disabled &&
     `
-    color: ${props.theme.mainFontGray};
+    color: ${props.theme.main_font3};
   `}
 `;
 
 const StyledIconSpan = styled.span`
   margin-right: 5px;
   // font-size: 18px;
-  color: ${(props) => (props.disabled ? props.theme.mainFontGray : props.theme.mainFontActive)};
+  color: ${(props) => (props.disabled ? props.theme.main_font3 : props.theme.main_font_link)};
 `;
 
 const ButtonDivInner = styled.div`

packages/web/src/widgets/WidgetIconPanel.js

@@ -6,17 +6,26 @@ import { FontIcon } from '../icons';
 import useTheme from '../theme/useTheme';
 
 const IconWrapper = styled.div`
-  color: ${(props) => props.theme.widgetIconFontColor};
+  color: ${(props) => props.theme.widget_font2};
   font-size: ${dimensions.widgetMenu.iconFontSize};
   height: ${dimensions.widgetMenu.iconSize}px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: ${(props) =>
+
+  ${(props) =>
     // @ts-ignore
-    props.isSelected ? props.theme.widgetBackgroundSelected : 'inherit'};
+    props.isSelected &&
+    `
+    background-color: ${props.theme.widget_background3};
+    // position: relative;
+    // border-left: 3px solid ${props.theme.widget_font1};
+    // left: -3px;
+    color: ${props.theme.widget_font1};
+    `}
+
   &:hover {
-    background-color: ${(props) => props.theme.widgetBackgroundHover};
+    color: ${(props) => props.theme.widget_font1};
   }
 `;
 

packages/web/src/widgets/WidgetStyles.js

@@ -63,7 +63,10 @@ const StyledWidgetTitle = styled.div`
   padding: 5px;
   font-weight: bold;
   text-transform: uppercase;
-  background-color: ${(props) => props.theme.widgetTitleBackground};
+  background-color: ${(props) => props.theme.title_background};
+  &:hover {
+    background-color: ${(props) => props.theme.title_background2};
+  }
   border: 1px solid ${(props) => props.theme.border};
 `;
 

yarn.lock

@@ -2,6 +2,13 @@
 # yarn lockfile v1
 
 
+"@ant-design/colors@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-5.0.0.tgz#46b73b4cc6935b35fc8b84555e8e42c8cfc190e6"
+  integrity sha512-Pe1rYorgVC1v4f+InDXvIlQH715pO1g7BsOhy/ehX/U6ebPKqojmkYJKU3lF+84Zmvyar7ngZ28hesAa1nWjLg==
+  dependencies:
+    "@ctrl/tinycolor" "^3.1.6"
+
 "@azure/ms-rest-azure-env@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@azure/ms-rest-azure-env/-/ms-rest-azure-env-1.1.2.tgz#8505873afd4a1227ec040894a64fdd736b4a101f"
@@ -962,6 +969,11 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
+"@ctrl/tinycolor@^3.1.6":
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.1.6.tgz#2d0ea7d433a34b1682e2e312e8a04812210fcc60"
+  integrity sha512-9RUTT3omv+5mSYFVsX143R7cTDQmT1FibCzoUVmO294mRIT0Sc8dk5srN27BTH0JKzQDWKkNCKh6q/+EkNfpkA==
+
 "@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
   version "10.0.29"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"