diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspectorMonitor.tsx b/packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspectorMonitor.tsx index 8df18219..07b4ab86 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspectorMonitor.tsx +++ b/packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspectorMonitor.tsx @@ -12,11 +12,10 @@ import { createThemeState, StyleUtils, StyleUtilsContext, - base16Themes, } from './styles/createStylingFromTheme'; interface DefaultProps { - theme: keyof typeof base16Themes; + theme: string; invertTheme: boolean; } @@ -43,7 +42,7 @@ class RtkQueryInspectorMonitor> extends Component< }; static defaultProps = { - theme: 'inspector', + theme: 'nicinabox', invertTheme: false, }; diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/src/styles/createStylingFromTheme.ts b/packages/redux-devtools-rtk-query-inspector-monitor/src/styles/createStylingFromTheme.ts index 200c414e..d384aee7 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/src/styles/createStylingFromTheme.ts +++ b/packages/redux-devtools-rtk-query-inspector-monitor/src/styles/createStylingFromTheme.ts @@ -1,15 +1,13 @@ import jss, { StyleSheet } from 'jss'; import preset from 'jss-preset-default'; -import { StylingConfig } from 'react-base16-styling'; import { createStyling, getBase16Theme, invertTheme, StylingFunction, + StylingConfig, } from 'react-base16-styling'; import rgba from 'hex-rgba'; -import { Base16Theme } from 'redux-devtools-themes'; -import { rtkInspectorTheme } from './theme'; import * as reduxThemes from 'redux-devtools-themes'; import { Action } from 'redux'; import { RtkQueryInspectorMonitorProps } from '../types'; @@ -17,7 +15,7 @@ import { createContext } from 'react'; jss.setup(preset()); -export const colorMap = (theme: Base16Theme) => ({ +export const colorMap = (theme: reduxThemes.Base16Theme) => ({ TEXT_COLOR: theme.base06, TEXT_PLACEHOLDER_COLOR: rgba(theme.base06, 60), BACKGROUND_COLOR: theme.base00, @@ -304,7 +302,7 @@ const getSheetFromColorMap = (map: ColorMap) => ({ let themeSheet: StyleSheet; -const getDefaultThemeStyling = (theme: Base16Theme) => { +const getDefaultThemeStyling = (theme: reduxThemes.Base16Theme) => { if (themeSheet) { themeSheet.detach(); } @@ -316,15 +314,13 @@ const getDefaultThemeStyling = (theme: Base16Theme) => { return themeSheet.classes; }; -export const base16Themes = { ...reduxThemes }; - export const createStylingFromTheme = createStyling(getDefaultThemeStyling, { - defaultBase16: rtkInspectorTheme, - base16Themes, + defaultBase16: reduxThemes.nicinabox, + base16Themes: { ...reduxThemes }, }); export interface StyleUtils { - base16Theme: Base16Theme; + base16Theme: reduxThemes.Base16Theme; styling: StylingFunction; invertTheme: boolean; } @@ -333,7 +329,7 @@ export function createThemeState>( props: RtkQueryInspectorMonitorProps ): StyleUtils { const base16Theme = - getBase16Theme(props.theme, base16Themes) ?? rtkInspectorTheme; + getBase16Theme(props.theme, { ...reduxThemes }) ?? reduxThemes.nicinabox; const theme = props.invertTheme ? invertTheme(props.theme) : props.theme; const styling = createStylingFromTheme(theme); @@ -341,15 +337,17 @@ export function createThemeState>( return { base16Theme, styling, invertTheme: !!props.invertTheme }; } -const mockStyling = (...args: any[]) => ({ className: '', style: {} }); +const mockStyling = () => ({ className: '', style: {} }); export const StyleUtilsContext = createContext({ - base16Theme: rtkInspectorTheme, + base16Theme: reduxThemes.nicinabox, invertTheme: false, styling: mockStyling, }); -export function getJsonTreeTheme(base16Theme: Base16Theme): StylingConfig { +export function getJsonTreeTheme( + base16Theme: reduxThemes.Base16Theme +): StylingConfig { return { extend: base16Theme, nestedNode: ({ style }, keyPath, nodeType, expanded) => ({ diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/src/styles/theme.ts b/packages/redux-devtools-rtk-query-inspector-monitor/src/styles/theme.ts deleted file mode 100644 index 882c8c44..00000000 --- a/packages/redux-devtools-rtk-query-inspector-monitor/src/styles/theme.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Base16Theme } from 'react-base16-styling'; - -/** - * Lifted from `packages/redux-devtools-inspector-monitor/src/themes/inspector.ts` - */ -export const rtkInspectorTheme: Base16Theme = { - scheme: 'rtk-inspector', - author: 'Alexander Kuznetsov (alexkuz@gmail.com)', - base00: '#181818', - base01: '#282828', - base02: '#383838', - base03: '#585858', - base04: '#b8b8b8', - base05: '#d8d8d8', - base06: '#e8e8e8', - base07: '#FFFFFF', - base08: '#E92F28', - base09: '#dc9656', - base0A: '#f7ca88', - base0B: '#65AD00', - base0C: '#86c1b9', - base0D: '#347BD9', - base0E: '#EC31C0', - base0F: '#a16946', -};