theme

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};
 `;