diff --git a/packages/web/package.json b/packages/web/package.json index db3b53791..d194484f4 100644 --- a/packages/web/package.json +++ b/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", diff --git a/packages/web/src/Screen.js b/packages/web/src/Screen.js index 531fe78be..aa5d8ad04 100644 --- a/packages/web/src/Screen.js +++ b/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; diff --git a/packages/web/src/TabsPanel.js b/packages/web/src/TabsPanel.js index a29ecae84..c70c3f6e6 100644 --- a/packages/web/src/TabsPanel.js +++ b/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}; } `; diff --git a/packages/web/src/celldata/CellDataView.js b/packages/web/src/celldata/CellDataView.js index a68b8419d..9f8aa7739 100644 --- a/packages/web/src/celldata/CellDataView.js +++ b/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 ( - + Format: setSelectedFormatType(e.target.value)}> diff --git a/packages/web/src/datagrid/DataGrid.js b/packages/web/src/datagrid/DataGrid.js index 46d20b0ab..9a4433bfd 100644 --- a/packages/web/src/datagrid/DataGrid.js +++ b/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 ( - + diff --git a/packages/web/src/datagrid/DataGridCore.js b/packages/web/src/datagrid/DataGridCore.js index cdc7c2e57..fc8435553 100644 --- a/packages/web/src/datagrid/DataGridCore.js +++ b/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; `; diff --git a/packages/web/src/datagrid/DataGridRow.js b/packages/web/src/datagrid/DataGridRow.js index 127604767..a7695e71e 100644 --- a/packages/web/src/datagrid/DataGridRow.js +++ b/packages/web/src/datagrid/DataGridRow.js @@ -22,20 +22,20 @@ const TableBodyCell = styled.td` !props.isFocusedColumn && ` background: initial; - background-color: ${props.theme.gridSelectionBackground}; - color: ${props.theme.gridSelectionFont};`} + background-color: ${props.theme.gridbody_selection[4]}; + 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; diff --git a/packages/web/src/theme/colorUtil.js b/packages/web/src/theme/colorUtil.js new file mode 100644 index 000000000..10a2d9237 --- /dev/null +++ b/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); +} diff --git a/packages/web/src/theme/fillTheme.js b/packages/web/src/theme/fillTheme.js new file mode 100644 index 000000000..09072c2f1 --- /dev/null +++ b/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, + }; +} diff --git a/packages/web/src/theme/light.js b/packages/web/src/theme/light.js index 62f0afe80..b4f9768f0 100644 --- a/packages/web/src/theme/light.js +++ b/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', - mainFont: 'black', - mainFontGray: 'gray', - mainFontActive: 'blue', + toolbar_background: '#eeeeee', + toolbar_type: 'light', - leftPanelBackground: '#ccc', + content_background: '#eee', + content_type: 'light', + // mainAreaBackground: '#eee', + // mainFont: 'black', + // mainFontGray: 'gray', + // mainFontActive: 'blue', - widgetBackground: '#222', - widgetIconFontColor: '#eee', - widgetBackgroundHover: '#555', - widgetBackgroundSelected: '#4CAF50', - widgetTitleBackground: 'gray', + left_background: '#cccccc', + left_type: 'light', - tabsPanelBackground: '#ddd', - tabsPanelBackgroundHover: '#ccc', - tabsPanelBackgroundHoverClick: '#aaa', - tabsPanelSelectedBackground: '#eee', - tabsPanelHoverFont: '#338', + // leftPanelBackground: '#ccc', + + widget_type: 'dark', + widget_background: '#222222', + + // 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', - gridRowCountLabel: 'lightgoldenrodyellow', - gridSelectionBackground: 'deepskyblue', - gridSelectionFont: 'white', - gridModifiedRowBackground: '#FFFFDB', - gridModifiedCellBackground: 'bisque', - gridInsertedRowBackground: '#DBFFDB', - gridDeletedRowBackground: '#FFDBFF', - gridFocusedColumnBackground: 'lightgoldenrodyellow', - gridRowBackground: '#ffffff', - gridRowBackground2: '#ebebeb', - gridRowBackground3: '#ebf5ff', - gridAutoFillBackground: '#1a73e8', + gridheader_background: '#f6f7f9', + gridheader_type: 'light', + + gridbody_type: 'light', + gridbody_background: '#ffffff', + // TRADITIONAL ALTERNATIVES: + // gridbody_background_alt2: '#ebebeb', + // gridbody_background_alt3: '#ebf5ff', + + // gridHeaderBackground: '#f6f7f9', + // gridRowCountLabel: 'lightgoldenrodyellow', + // gridSelectionBackground: 'deepskyblue', + // gridSelectionFont: 'white', + // gridModifiedRowBackground: '#FFFFDB', + // gridModifiedCellBackground: 'bisque', + // gridInsertedRowBackground: '#DBFFDB', + // gridDeletedRowBackground: '#FFDBFF', + // gridFocusedColumnBackground: 'lightgoldenrodyellow', + // gridAutoFillBackground: '#1a73e8', }; + +export default fillTheme(theme); diff --git a/packages/web/src/themes/ThemeHelmet.js b/packages/web/src/themes/ThemeHelmet.js index aca2858e6..b1024e95d 100644 --- a/packages/web/src/themes/ThemeHelmet.js +++ b/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}; } `} diff --git a/packages/web/src/widgets/TabControl.js b/packages/web/src/widgets/TabControl.js index 253a3d431..6e490f85c 100644 --- a/packages/web/src/widgets/TabControl.js +++ b/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` diff --git a/packages/web/src/widgets/ToolbarButton.js b/packages/web/src/widgets/ToolbarButton.js index aeb9d3a85..ff54f12a6 100644 --- a/packages/web/src/widgets/ToolbarButton.js +++ b/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` diff --git a/packages/web/src/widgets/WidgetIconPanel.js b/packages/web/src/widgets/WidgetIconPanel.js index eac053062..ce78fd5c5 100644 --- a/packages/web/src/widgets/WidgetIconPanel.js +++ b/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}; } `; diff --git a/packages/web/src/widgets/WidgetStyles.js b/packages/web/src/widgets/WidgetStyles.js index 069a05f4b..0497aa706 100644 --- a/packages/web/src/widgets/WidgetStyles.js +++ b/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}; `; diff --git a/yarn.lock b/yarn.lock index a99ee5ea8..7221e45ce 100644 --- a/yarn.lock +++ b/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"