diff --git a/includes/Data/Themes/Colors.php b/includes/Data/Themes/Colors.php index 2e36e94cf..a00054c74 100644 --- a/includes/Data/Themes/Colors.php +++ b/includes/Data/Themes/Colors.php @@ -14,126 +14,139 @@ final class Colors { */ protected static $theme_colors = array( 'yith-wonder' => array( - 'calm' => array( - 'header-background' => '#1A4733', - 'header-foreground' => '#FFFFFF', - 'header-title' => '#FFFFFF', - 'secondary-background' => '#1A4733', - 'secondary-foreground' => '#FFF', - 'tertiary' => '#C7DBFF', - 'secondary' => '#344A77', - 'primary' => '#1A4733', - 'base' => '#FFFFFF', + 'tailored' => array( + 'calm' => array( + 'header-background' => '#1A4733', + 'header-foreground' => '#FFFFFF', + 'header-titles' => '#FFFFFF', + 'secondary-background' => '#1A4733', + 'secondary-foreground' => '#FFF', + 'tertiary' => '#C7DBFF', + 'secondary' => '#344A77', + 'primary' => '#1A4733', + 'base' => '#FFFFFF', + ), + 'cool' => array( + 'header-background' => '#C7DBFF', + 'header-foreground' => '#21447B', + 'header-titles' => '#21447B', + 'secondary-background' => '#C7DBFF', + 'secondary-foreground' => '#21447B', + 'tertiary' => '#C7DBFF', + 'secondary' => '#3764B4', + 'primary' => '#21447B', + 'base' => '#FFFFFF', + ), + 'warm' => array( + 'header-background' => '#FDE5D0', + 'header-foreground' => '#7A3921', + 'header-titles' => '#7A3921', + 'secondary-background' => '#FDE5D0', + 'secondary-foreground' => '#7A3921', + 'tertiary' => '#FFEDED', + 'secondary' => '#B97040', + 'primary' => '#7A3921', + 'base' => '#FFFFFF', + ), + 'radiant' => array( + 'header-background' => '#63156A', + 'header-foreground' => '#E3F7FF', + 'header-titles' => '#E3F7FF', + 'secondary-background' => '#781980', + 'secondary-foreground' => '#E3F7FF', + 'tertiary' => '#C7F0FF', + 'secondary' => '#64288C', + 'primary' => '#63156A', + 'base' => '#FFFFFF', + ), + 'bold' => array( + 'header-background' => '#FFD7F1', + 'header-foreground' => '#09857C', + 'header-titles' => '#09857C', + 'secondary-background' => '#ffddf3', + 'secondary-foreground' => '#09857C', + 'tertiary' => '#F2A3D6', + 'secondary' => '#076D66', + 'primary' => '#09857C', + 'base' => '#FFFFFF', + ), + 'retro' => array( + 'header-background' => '#096385', + 'header-foreground' => '#F2E6A2', + 'header-titles' => '#F2E6A2', + 'secondary-background' => '#096385', + 'secondary-foreground' => '#F2E6A2', + 'tertiary' => '#F2E6A2', + 'secondary' => '#BE9E00', + 'primary' => '#096385', + 'base' => '#FFFFFF', + ), + 'professional' => array( + 'header-background' => '#6D8258', + 'header-foreground' => '#F5FAFF', + 'header-titles' => '#D2E0F5', + 'secondary-background' => '#6D8258', + 'secondary-foreground' => '#F5FAFF', + 'tertiary' => '#d6e4f9', + 'secondary' => '#405F1C', + 'primary' => '#558320', + 'base' => '#FFFFFF', + ), + 'crisp' => array( + 'header-background' => '#ccc', + 'header-foreground' => '#333', + 'header-titles' => '#234', + 'secondary-background' => '#ccc', + 'secondary-foreground' => '#333', + 'tertiary' => '#777', + 'secondary' => '#17222E', + 'primary' => '#223344', + 'base' => '#FFFFFF', + ), + 'polished' => array( + 'header-background' => '#313131', + 'header-foreground' => '#fff', + 'header-titles' => '#6B69EA', + 'secondary-background' => '#444', + 'secondary-foreground' => '#ddd', + 'tertiary' => '#313131', + 'secondary' => '#6B69EA', + 'primary' => '#5100FA', + 'base' => '#FFFFFF', + ), + 'nightowl' => array( + 'header-background' => '#06080A', + 'header-foreground' => '#fff', + 'header-titles' => '#FAAA14', + 'secondary-background' => '#0A0C0E', + 'secondary-foreground' => '#fff', + 'tertiary' => '#FFDFA3', + 'secondary' => '#06080A', + 'primary' => '#B97900', + 'base' => '#FFFFFF', + ), + 'subtle' => array( + 'header-background' => '#C7ADBB', + 'header-foreground' => '#5A3C4B', + 'header-titles' => '#5A3C4B', + 'secondary-background' => '#C7ADBB', + 'secondary-foreground' => '#5A3C4B', + 'tertiary' => '#D4C9CF', + 'secondary' => '#57203c', + 'primary' => '#5A3C4B', + 'base' => '#FFFFFF', + ), ), - 'cool' => array( - 'header-background' => '#C7DBFF', - 'header-foreground' => '#21447B', - 'header-titles' => '#21447B', - 'secondary-background' => '#C7DBFF', - 'secondary-foreground' => '#21447B', - 'tertiary' => '#C7DBFF', - 'secondary' => '#3764B4', - 'primary' => '#21447B', - 'base' => '#FFFFFF', - ), - 'warm' => array( - 'header-background' => '#FDE5D0', - 'header-foreground' => '#7A3921', - 'header-titles' => '#7A3921', - 'secondary-background' => '#FDE5D0', - 'secondary-foreground' => '#7A3921', - 'tertiary' => '#FFEDED', - 'secondary' => '#B97040', - 'primary' => '#7A3921', - 'base' => '#FFFFFF', - ), - 'radiant' => array( - 'header-background' => '#63156A', - 'header-foreground' => '#E3F7FF', - 'header-titles' => '#E3F7FF', - 'secondary-background' => '#781980', - 'secondary-foreground' => '#E3F7FF', - 'tertiary' => '#C7F0FF', - 'secondary' => '#64288C', - 'primary' => '#63156A', - 'base' => '#FFFFFF', - ), - 'bold' => array( - 'header-background' => '#FFD7F1', - 'header-foreground' => '#09857C', - 'header-titles' => '#09857C', - 'secondary-background' => '#ffddf3', - 'secondary-foreground' => '#09857C', - 'tertiary' => '#F2A3D6', - 'secondary' => '#076D66', - 'primary' => '#09857C', - 'base' => '#FFFFFF', - ), - 'retro' => array( - 'header-background' => '#096385', - 'header-foreground' => '#F2E6A2', - 'header-titles' => '#F2E6A2', - 'secondary-background' => '#096385', - 'secondary-foreground' => '#F2E6A2', - 'tertiary' => '#F2E6A2', - 'secondary' => '#BE9E00', - 'primary' => '#096385', - 'base' => '#FFFFFF', - ), - 'professional' => array( - 'header-background' => '#6D8258', - 'header-foreground' => '#F5FAFF', - 'header-titles' => '#D2E0F5', - 'secondary-background' => '#6D8258', - 'secondary-foreground' => '#F5FAFF', - 'tertiary' => '#d6e4f9', - 'secondary' => '#405F1C', - 'primary' => '#558320', - 'base' => '#FFFFFF', - ), - 'crisp' => array( - 'header-background' => '#ccc', - 'header-foreground' => '#333', - 'header-titles' => '#234', - 'secondary-background' => '#ccc', - 'secondary-foreground' => '#333', - 'tertiary' => '#777', - 'secondary' => '#17222E', - 'primary' => '#223344', - 'base' => '#FFFFFF', - ), - 'polished' => array( - 'header-background' => '#313131', - 'header-foreground' => '#fff', - 'header-titles' => '#6B69EA', - 'secondary-background' => '#444', - 'secondary-foreground' => '#ddd', - 'tertiary' => '#313131', - 'secondary' => '#6B69EA', - 'primary' => '#5100FA', - 'base' => '#FFFFFF', - ), - 'nightowl' => array( - 'header-background' => '#06080A', - 'header-foreground' => '#fff', - 'header-titles' => '#FAAA14', - 'secondary-background' => '#0A0C0E', - 'secondary-foreground' => '#fff', - 'tertiary' => '#FFDFA3', - 'secondary' => '#06080A', - 'primary' => '#B97900', - 'base' => '#FFFFFF', - ), - 'subtle' => array( - 'header-background' => '#C7ADBB', - 'header-foreground' => '#5A3C4B', - 'header-titles' => '#5A3C4B', - 'secondary-background' => '#C7ADBB', - 'secondary-foreground' => '#5A3C4B', - 'tertiary' => '#D4C9CF', - 'secondary' => '#57203c', - 'primary' => '#5A3C4B', - 'base' => '#FFFFFF', + 'custom-picker-grouping' => array( + 'base' => array( + 'header-foreground', + 'header-titles', + 'secondary-foreground', + ), + 'tertiary' => array( + 'header-background', + 'secondary-background', + ), ), ), ); diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js index 591fd4c44..1eefe78f7 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js @@ -1,16 +1,19 @@ import { __ } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; -import { useState, useEffect } from '@wordpress/element'; import { Popover, ColorPicker } from '@wordpress/components'; +import { useState, useEffect, useRef } from '@wordpress/element'; import { store as nfdOnboardingStore } from '../../../store'; import { getGlobalStyles, getThemeColors } from '../../../utils/api/themes'; import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; +import { GlobalStylesProvider } from '../../LivePreview'; import { THEME_STATUS_ACTIVE, THEME_STATUS_INIT } from '../../../../constants'; import Animate from '../../Animate'; const DesignColors = () => { + const customColorsResetRef = useRef( null ); const [ isLoaded, setIsLoaded ] = useState( false ); + const [ customColorsMap, setCustomColorsMap ] = useState(); const [ selectedColors, setSelectedColors ] = useState(); const [ showColorPicker, setShowColorPicker ] = useState( false ); const [ isAccordionClosed, setIsAccordionClosed ] = useState( true ); @@ -103,7 +106,8 @@ const DesignColors = () => { const slug = selectedThemeColorPalette[ idx ]?.slug; if ( isCustomStyle && - selectedColorsLocalTemp?.[ slug ] !== '' + selectedColorsLocalTemp?.[ slug ] != '' && + selectedColorsLocalTemp?.[ slug ] != undefined ) selectedThemeColorPalette[ idx ].color = selectedColorsLocalTemp[ slug ]; @@ -122,6 +126,23 @@ const DesignColors = () => { selectedThemeColorPalette[ idx ].color = colorPalettesTemp[ colorStyle ][ slug ]; } + + if ( customColorsMap ) { + const colorVariant = customColorsMap[ slug ]; + if ( colorVariant ) { + colorVariant.forEach( ( variant ) => { + if ( + customColors && + customColors[ slug ] !== undefined + ) { + selectedThemeColorPalette[ + findInCustomColors( variant, slug ) + ].color = customColors[ slug ]; + } + } ); + } + } + break; } } @@ -139,6 +160,19 @@ const DesignColors = () => { } } + function findInCustomColors( slugName, colorPickerCalledBy ) { + const selectedThemeColorPalette = + storedPreviewSettings?.settings?.color?.palette; + const res = selectedThemeColorPalette.findIndex( + ( { slug } ) => slug === slugName + ); + if ( res === -1 ) + return selectedThemeColorPalette.findIndex( + ( { slug } ) => slug === colorPickerCalledBy + ); + return res; + } + async function saveCustomColors() { const selectedGlobalStyle = storedPreviewSettings; const selectedThemeColorPalette = @@ -146,39 +180,31 @@ const DesignColors = () => { if ( selectedThemeColorPalette ) { for ( let idx = 0; idx < selectedThemeColorPalette.length; idx++ ) { - switch ( selectedThemeColorPalette[ idx ]?.slug ) { - case 'base': - if ( - colorPickerCalledBy === 'base' && - customColors?.base - ) - selectedThemeColorPalette[ idx ].color = - customColors?.base; - break; - case 'primary': - if ( - colorPickerCalledBy === 'primary' && - customColors?.primary - ) - selectedThemeColorPalette[ idx ].color = - customColors?.primary; - break; - case 'secondary': - if ( - colorPickerCalledBy === 'secondary' && - customColors?.secondary - ) - selectedThemeColorPalette[ idx ].color = - customColors?.secondary; - break; - case 'tertiary': + const slug = selectedThemeColorPalette[ idx ]?.slug; + if ( + colorPickerCalledBy === slug && + customColors && + customColors[ slug ] !== undefined + ) + selectedThemeColorPalette[ idx ].color = + customColors[ slug ]; + } + if ( customColorsMap ) { + const colorVariant = customColorsMap[ colorPickerCalledBy ]; + if ( colorVariant ) { + colorVariant.forEach( ( variant ) => { if ( - colorPickerCalledBy === 'tertiary' && - customColors?.tertiary - ) - selectedThemeColorPalette[ idx ].color = - customColors?.tertiary; - break; + customColors && + customColors[ colorPickerCalledBy ] !== undefined + ) { + selectedThemeColorPalette[ + findInCustomColors( + variant, + colorPickerCalledBy + ) + ].color = customColors[ colorPickerCalledBy ]; + } + } ); } } @@ -198,7 +224,8 @@ const DesignColors = () => { if ( colorPalettes?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); } - setColorPalettes( colorPalettes?.body ); + setColorPalettes( colorPalettes?.body.tailored ); + setCustomColorsMap( colorPalettes?.body[ 'custom-picker-grouping' ] ); let selectedColors; let selectedColorsLocal; if ( ! currentData?.data?.palette?.slug === '' ) { @@ -215,18 +242,19 @@ const DesignColors = () => { } } setSelectedColors( selectedColors ); - saveThemeColorPalette( - currentData?.data?.palette.slug, - colorPalettes?.body, - selectedColorsLocal, - storedPreviewSettings - ); setIsLoaded( true ); }; useEffect( () => { if ( ! isLoaded && THEME_STATUS_ACTIVE === themeStatus ) getColorStylesAndPatterns(); + if ( isCustomColorActive() ) { + setIsAccordionClosed( false ); + customColorsResetRef.current.scrollIntoView( { + behavior: 'smooth', + block: 'end', + } ); + } }, [ isLoaded, themeStatus ] ); const handleClick = ( colorStyle ) => { @@ -258,7 +286,7 @@ const DesignColors = () => { }; async function resetColors() { - const globalStyles = await getGlobalStyles(); + const globalStyles = await getGlobalStyles( true ); let selectedGlobalStyle; if ( currentData?.data?.theme?.variation ) { selectedGlobalStyle = globalStyles.body.filter( @@ -326,19 +354,27 @@ const DesignColors = () => { return paletteRenderedList; } + function isCustomColorActive() { + for ( const custom in customColors ) + if ( customColors[ custom ] != '' ) return true; + + return false; + } + function buildCustomPalette() { + const defaultColor = '#fff'; const primaryColorTemp = customColors && customColors?.primary !== '' ? customColors?.primary - : selectedColorsLocal?.primary ?? '#fff'; + : selectedColorsLocal?.primary ?? defaultColor; const secondaryColorTemp = customColors && customColors?.secondary !== '' ? customColors?.secondary - : selectedColorsLocal?.secondary ?? '#fff'; + : selectedColorsLocal?.secondary ?? defaultColor; const tertiaryColorTemp = customColors && customColors?.tertiary !== '' ? customColors?.tertiary - : selectedColorsLocal?.tertiary ?? '#fff'; + : selectedColorsLocal?.tertiary ?? defaultColor; return (
@@ -379,7 +415,7 @@ const DesignColors = () => { }` } style={ { backgroundColor: `${ - customColors?.base ?? '#FFF' + customColors?.base ?? defaultColor }`, } } > @@ -447,6 +483,17 @@ const DesignColors = () => {
+ { isCustomColorActive() && ( + +
+
Reset
+
+ + ) } { showColorPicker && (
{ return (

{ __( 'Color Palettes', 'wp-module-onboarding' ) }

- { /* {selectedColors?.slug && -
-
Reset Button
-
- } */ } { colorPalettes && buildPalettes() } { colorPalettes && buildCustomPalette() }
diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss index da439f438..db5aecf45 100644 --- a/src/OnboardingSPA/components/Drawer/stylesheet.scss +++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss @@ -343,19 +343,20 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); padding: 0 4px; &--reset { - width: 40%; + width: 30%; height: 30px; display: flex; - color: black; cursor: pointer; - margin-left: 4px; + margin-top: 12px; text-align: center; align-items: center; justify-content: center; background-color: white; + color: var(--nfd-onboarding-primary); &:hover { - background-color: var(--nfd-onboarding-drawer-icon-fill); + color: $black; + background-color: #ededed; } } }