diff --git a/src/components/Themes/lib/themeCreatorContext.ts b/src/components/Themes/lib/themeCreatorContext.ts index 8d40fd25fe7f..94b36631d9e2 100644 --- a/src/components/Themes/lib/themeCreatorContext.ts +++ b/src/components/Themes/lib/themeCreatorContext.ts @@ -16,7 +16,7 @@ import type { UpdateFontFamilyParams, UpdateFontFamilyTypeTitleParams, } from './themeCreatorUtils'; -import type {ColorsSettingsType, ThemeCreatorState} from './types'; +import type {AdvancedColorType, ColorsSettingsType, ThemeCreatorState} from './types'; export const ThemeCreatorContext = createContext( initThemeCreator(DEFAULT_THEME), @@ -39,6 +39,7 @@ export interface ThemeCreatorMethodsContextType { updateAdvancedTypography: () => void; openMainSettings: () => void; setAdvancedMode: (enabled: boolean) => void; + setAdvancedColorType: (type: AdvancedColorType) => void; importTheme: (theme: GravityTheme) => void; setColorsSettingsType: (type: ColorsSettingsType) => void; } @@ -60,6 +61,7 @@ export const ThemeCreatorMethodsContext = createContext { const {t} = useTranslation('themes'); - const [activeTab, setActiveTab] = useState('basic-palette'); + const {advancedColorType} = useThemeCreator(); + const {setAdvancedColorType} = useThemeCreatorMethods(); const tags: TagItem[] = useMemo( () => [ @@ -63,12 +65,12 @@ export const AdvancedSettings = () => { - + ); }; diff --git a/src/components/Themes/ui/ThemeCreatorContextProvider.tsx b/src/components/Themes/ui/ThemeCreatorContextProvider.tsx index e9b16ac4974d..a2a6c6907f93 100644 --- a/src/components/Themes/ui/ThemeCreatorContextProvider.tsx +++ b/src/components/Themes/ui/ThemeCreatorContextProvider.tsx @@ -35,7 +35,7 @@ import { updateFontFamilyInTheme, updateFontFamilyTypeTitleInTheme, } from '../lib/themeCreatorUtils'; -import type {ColorsSettingsType, ThemeCreatorState} from '../lib/types'; +import type {AdvancedColorType, ColorsSettingsType, ThemeCreatorState} from '../lib/types'; type ThemeCreatorAction = | { @@ -104,6 +104,10 @@ type ThemeCreatorAction = type: 'setAdvancedMode'; payload: boolean; } + | { + type: 'setAdvancedColorType'; + payload: AdvancedColorType; + } | { type: 'setColorsSettingsType'; payload: ColorsSettingsType; @@ -157,6 +161,11 @@ const themeCreatorReducer = ( ...newState, advancedModeEnabled: action.payload, }; + case 'setAdvancedColorType': + return { + ...newState, + advancedColorType: action.payload, + }; case 'reinitialize': return initThemeCreator(action.payload); case 'setColorsSettingsType': @@ -336,6 +345,13 @@ export const ThemeCreatorContextProvider: React.FC = ({ }); }, []); + const setAdvancedColorType = React.useCallback((type: AdvancedColorType) => { + dispatchThemeCreator({ + type: 'setAdvancedColorType', + payload: type, + }); + }, []); + const importTheme = React.useCallback((gravityTheme: GravityTheme) => { dispatchThemeCreator({ type: 'reinitialize', @@ -370,6 +386,7 @@ export const ThemeCreatorContextProvider: React.FC = ({ updateFontFamily, openMainSettings, setAdvancedMode, + setAdvancedColorType, importTheme, setColorsSettingsType, }), @@ -390,6 +407,7 @@ export const ThemeCreatorContextProvider: React.FC = ({ updateFontFamilyTypeTitle, openMainSettings, setAdvancedMode, + setAdvancedColorType, importTheme, setColorsSettingsType, ],