diff --git a/package.json b/package.json index 66be3bdb..9c0cea04 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@qoretechnologies/reqore", - "version": "0.1.44", + "version": "0.1.45", "description": "ReQore is a UI library of components for Qorus connected apps", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx index 31013855..542d8620 100644 --- a/src/components/Sidebar/index.tsx +++ b/src/components/Sidebar/index.tsx @@ -62,9 +62,10 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>` undefined, true )}; + background-color: ${({ theme }) => theme.sidebar?.main || theme.main}; border-right: 1px solid ${({ theme }) => - theme.sidebar?.border || darken(0.09, getMainColor(theme, 'sidebar'))}; + theme.sidebar?.border || darken(0.1, getMainColor(theme, 'sidebar'))}; // Custom scrollbar .sidebarScroll { @@ -142,25 +143,42 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>` .sidebarItem.active { color: ${({ theme }) => theme.sidebar?.item?.activeColor || + theme.sidebar?.item?.color || getReadableColor(getMainColor(theme, 'sidebar'), undefined, undefined)}; + background-color: ${({ theme }) => theme.sidebar?.item?.activeBackground || + theme.sidebar?.item?.background || darken(0.08, getMainColor(theme, 'sidebar'))}; + span.bp3-icon:not(.favorite) { - color: ${({ theme }) => theme.sidebar?.item?.activeColor || 'inherit'}; + color: ${({ theme }) => + theme.sidebar?.icon?.activeColor || + theme.sidebar?.icon?.color || + theme.sidebar?.item?.activeColor || + theme.sidebar?.item?.color || + 'inherit'}; } } .sidebarSubItem.active { color: ${({ theme }) => theme.sidebar?.subItem?.activeColor || + theme.sidebar?.subItem?.color || getReadableColor(getMainColor(theme, 'sidebar'), undefined, undefined)}; background-color: ${({ theme }) => theme.sidebar?.subItem?.activeBackground || + theme.sidebar?.subItem?.background || darken(0.1, getMainColor(theme, 'sidebar'))}; span.bp3-icon:not(.favorite) { color: ${({ theme }) => - theme.sidebar?.subItem?.activeColor || 'inherit'}; + theme.sidebar?.icon?.activeColor || + theme.sidebar?.icon?.color || + theme.sidebar?.subItem?.activeColor || + theme.sidebar?.subItem?.color || + theme.sidebar?.item?.activeColor || + theme.sidebar?.item?.color || + 'inherit'}; } } @@ -191,13 +209,22 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>` } &:hover { - color: ${({ theme }) => theme.sidebar?.item?.hoverColor || 'inherit'}; + color: ${({ theme }) => + theme.sidebar?.item?.hoverColor || + theme.sidebar?.item?.color || + 'inherit'}; background-color: ${({ theme }) => theme.sidebar?.item?.hoverBackground || + theme.sidebar?.item?.background || darken(0.03, getMainColor(theme, 'sidebar'))}; span.bp3-icon:not(.favorite) { - color: ${({ theme }) => theme.sidebar?.item?.hoverColor || 'inherit'}; + color: ${({ theme }) => + theme.sidebar?.icon?.hoverColor || + theme.sidebar?.icon?.color || + theme.sidebar?.item?.hoverColor || + theme.sidebar?.item?.color || + 'inherit'}; } } } @@ -226,14 +253,21 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>` &:hover { color: ${({ theme }) => - theme.sidebar?.subItem?.hoverColor || 'inherit'}; + theme.sidebar?.subItem?.hoverColor || + theme.sidebar?.subItem?.color || + 'inherit'}; background-color: ${({ theme }) => theme.sidebar?.subItem?.hoverBackground || + theme.sidebar?.subItem?.background || darken(0.08, getMainColor(theme, 'sidebar'))}; span.bp3-icon:not(.favorite) { color: ${({ theme }) => - theme.sidebar?.subItem?.hoverColor || 'inherit'}; + theme.sidebar?.icon?.hoverColor || + theme.sidebar?.icon?.color || + theme.sidebar?.subItem?.hoverColor || + theme.sidebar?.subItem?.color || + 'inherit'}; } } } @@ -262,7 +296,7 @@ const StyledDivider = styled.div<{ theme?: any }>` background-color: ${({ theme }) => theme.sidebar?.section?.background || - darken(0.09, getMainColor(theme, 'sidebar'))}; + darken(0.15, getMainColor(theme, 'sidebar'))}; color: inherit; `; diff --git a/src/constants/theme.ts b/src/constants/theme.ts index fc0db2b8..d4a5f54d 100644 --- a/src/constants/theme.ts +++ b/src/constants/theme.ts @@ -24,6 +24,8 @@ export interface IReqoreTheme { }; icon?: { color?: string; + hoverColor?: string; + activeColor?: string; }; section?: { background?: string; diff --git a/src/stories/Sidebar/Sidebar.stories.tsx b/src/stories/Sidebar/Sidebar.stories.tsx index 3cc725ca..c3fb8aaf 100644 --- a/src/stories/Sidebar/Sidebar.stories.tsx +++ b/src/stories/Sidebar/Sidebar.stories.tsx @@ -91,26 +91,7 @@ export const WithCustomColors = Template.bind({}); WithCustomColors.args = { theme: { main: '#fff', - sidebar: { - main: '#fff', - icon: { - color: '#8227a3', - }, - item: { - color: '#8227a3', - hoverBackground: '#8227a3', - hoverColor: '#fff', - activeBackground: '#9751b0', - activeColor: '#fff', - }, - subItem: { - color: '#8227a3', - hoverBackground: '#8227a3', - hoverColor: '#fff', - activeBackground: '#9751b0', - activeColor: '#fff', - }, - }, + sidebar: { icon: { color: '#115e68' } }, }, path: '/item-3/item-2', } as IReqoreUIProviderProps & IQorusSidebarProps;