Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update color palettes when AI is no available (#41880)

This commit is contained in:
Patricia Hillebrandt 2023-12-07 08:39:13 -03:00 committed by GitHub
parent e9ba3d3755 4c62ac23ee
commit c60992e061
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 428 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

368
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/constants.ts
View File

@ -1,5 +1,61 @@
// TODO: Fetch AI-picked color palettes from the backend API
export const COLOR_PALETTES = [
{
title: 'New - Neutral',
version: 2,
settings: {
color: {
palette: {
theme: [
{
color: '#000000',
name: 'Foreground',
slug: 'foreground',
},
{
color: '#ffffff',
name: 'Background',
slug: 'background',
},
{
color: '#000000',
name: 'Primary',
slug: 'primary',
},
{
color: '#ffe2c7',
name: 'Secondary',
slug: 'secondary',
},
{
color: '#F6F6F6',
name: 'Tertiary',
slug: 'tertiary',
},
],
},
},
},
styles: {
color: {
background: 'var(--wp--preset--color--background)',
text: 'var(--wp--preset--color--foreground)',
},
elements: {
button: {
color: {
background: 'var(--wp--preset--color--primary)',
text: 'var(--wp--preset--color--background)',
},
},
link: {
color: {
text: 'var(--wp--preset--color--foreground)',
},
},
},
},
},
{
title: 'Ancient Bronze',
version: 2,
@ -1068,6 +1124,293 @@ export const COLOR_PALETTES = [
},
wpcom_category: 'Dark',
},
{
title: 'Blueberry Sorbet',
version: 2,
settings: {
color: {
palette: {
theme: [
{
color: '#2038B6',
name: 'Primary',
slug: 'primary',
},
{
color: '#BD4089',
name: 'Secondary',
slug: 'secondary',
},
{
color: '#2038B6',
name: 'Foreground',
slug: 'foreground',
},
{
color: '#FDFBEF',
name: 'Background',
slug: 'background',
},
{
color: '#F8F2E2',
name: 'Tertiary',
slug: 'tertiary',
},
],
},
},
},
styles: {
color: {
background: 'var(--wp--preset--color--background)',
text: 'var(--wp--preset--color--foreground)',
},
},
},
{
title: 'Green Thumb',
version: 2,
settings: {
color: {
palette: {
theme: [
{
color: '#164A41',
name: 'Primary',
slug: 'primary',
},
{
color: '#4B7B4D',
name: 'Secondary',
slug: 'secondary',
},
{
color: '#164A41',
name: 'Foreground',
slug: 'foreground',
},
{
color: '#ffffff',
name: 'Background',
slug: 'background',
},
{
color: '#CEEAC4',
name: 'Tertiary',
slug: 'tertiary',
},
],
},
},
},
styles: {
color: {
background: 'var(--wp--preset--color--background)',
text: 'var(--wp--preset--color--foreground)',
},
elements: {
button: {
color: {
background: 'var(--wp--preset--color--primary)',
text: 'var(--wp--preset--color--background)',
},
},
link: {
color: {
text: 'var(--wp--preset--color--secondary)',
},
':hover': {
color: {
text: 'var(--wp--preset--color--foreground)',
},
},
},
},
},
},
{
title: 'Golden Haze',
version: 2,
settings: {
color: {
palette: {
theme: [
{
color: '#232224',
name: 'Primary',
slug: 'primary',
},
{
color: '#EBB54F',
name: 'Secondary',
slug: 'secondary',
},
{
color: '#515151',
name: 'Foreground',
slug: 'foreground',
},
{
color: '#ffffff',
name: 'Background',
slug: 'background',
},
{
color: '#FFF0AE',
name: 'Tertiary',
slug: 'tertiary',
},
],
},
},
},
styles: {
color: {
background: 'var(--wp--preset--color--background)',
text: 'var(--wp--preset--color--foreground)',
},
elements: {
button: {
color: {
background: 'var(--wp--preset--color--secondary)',
text: 'var(--wp--preset--color--foreground)',
},
},
link: {
color: {
text: 'var(--wp--preset--color--secondary)',
},
':hover': {
color: {
text: 'var(--wp--preset--color--foreground)',
},
},
},
},
},
},
{
title: 'Golden Indigo',
version: 2,
settings: {
color: {
palette: {
theme: [
{
color: '#4866C0',
name: 'Primary',
slug: 'primary',
},
{
color: '#C09F50',
name: 'Secondary',
slug: 'secondary',
},
{
color: '#405AA7',
name: 'Foreground',
slug: 'foreground',
},
{
color: '#ffffff',
name: 'Background',
slug: 'background',
},
{
color: '#FBF5EE',
name: 'Tertiary',
slug: 'tertiary',
},
],
},
},
},
styles: {
color: {
background: 'var(--wp--preset--color--background)',
text: 'var(--wp--preset--color--foreground)',
},
elements: {
button: {
color: {
background: 'var(--wp--preset--color--primary)',
text: 'var(--wp--preset--color--background)',
},
},
link: {
color: {
text: 'var(--wp--preset--color--secondary)',
},
':hover': {
color: {
text: 'var(--wp--preset--color--foreground)',
},
},
},
},
},
},
{
title: 'Ice',
version: 2,
settings: {
color: {
palette: {
theme: [
{
slug: 'primary',
color: '#3473FE',
name: 'Primary',
},
{
slug: 'secondary',
color: '#12123F',
name: 'Secondary',
},
{
slug: 'foreground',
color: '#12123F',
name: 'Foreground',
},
{
slug: 'background',
color: '#F1F4FA',
name: 'Background',
},
{
slug: 'tertiary',
color: '#DBE6EE',
name: 'Tertiary',
},
],
},
},
},
styles: {
color: {
background: 'var(--wp--preset--color--background)',
text: 'var(--wp--preset--color--foreground)',
},
elements: {
button: {
color: {
background: 'var(--wp--preset--color--primary)',
text: 'var(--wp--preset--color--background)',
},
},
link: {
color: {
text: 'var(--wp--preset--color--foreground)',
},
':hover': {
color: {
text: 'var(--wp--preset--color--primary)',
},
},
},
},
},
},
].map( ( color ) => {
// Add base styles settings for elements to ensure that the colors are applied correctly since default TT3 theme does not have right styles.
// These styles are referenced in the theme.json file of the creatio-2 theme.
@ -1217,3 +1560,28 @@ export const COLOR_PALETTES = [
},
};
} );
export const DEFAULT_COLOR_PALETTE_TITLES = [
'New - Neutral',
'Blueberry Sorbet',
'Ancient Bronze',
'Crimson Tide',
'Purple Twilight',
'Green Thumb',
'Golden Haze',
'Golden Indigo',
'Arctic Dawn',
'Raspberry Chocolate',
'Canary',
'Ice',
'Rustic Rosewood',
'Cinnamon Latte',
'Lightning',
'Aquamarine Night',
'Charcoal',
'Slate',
];
export const DEFAULT_COLOR_PALETTES = DEFAULT_COLOR_PALETTE_TITLES.map(
( title ) => COLOR_PALETTES.find( ( palette ) => palette.title === title )
);

6
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/index.tsx
View File

@ -13,7 +13,7 @@ import { useState, useEffect } from '@wordpress/element';
/**
* Internal dependencies
*/
import { COLOR_PALETTES } from './constants';
import { COLOR_PALETTES, DEFAULT_COLOR_PALETTES } from './constants';
import { VariationContainer } from '../variation-container';
import { ColorPaletteVariationPreview } from './preview';
import { ColorPaletteResponse } from '~/customize-store/design-with-ai/types';
@ -54,7 +54,9 @@ export const ColorPalette = () => {
);
} else {
// seems that aiSuggestions weren't correctly populated, we'll just use the first 9
setColorPalettes( COLOR_PALETTES.slice( 0, 9 ) );
setColorPalettes(
DEFAULT_COLOR_PALETTES as typeof COLOR_PALETTES
);
}
}
}, [ isLoading, aiSuggestions?.defaultColorPalette ] );

95
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx
View File

@ -16,6 +16,7 @@ import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
/**
* Internal dependencies
*/
import { CustomizeStoreContext } from '../';
import { SidebarNavigationScreen } from './sidebar-navigation-screen';
import { ADMIN_URL } from '~/utils/admin-settings';
import { ColorPalette, ColorPanel } from './global-styles';
@ -54,53 +55,61 @@ const SidebarNavigationScreenColorPaletteContent = () => {
};
export const SidebarNavigationScreenColorPalette = () => {
const {
context: { aiOnline },
} = useContext( CustomizeStoreContext );
const description = aiOnline
? __(
'Based on the info you shared, our AI tool recommends using this color palette. Want to change it? You can select or add new colors below, or update them later in <EditorLink>Editor</EditorLink> | <StyleLink>Styles</StyleLink>.',
'woocommerce'
)
: __(
'Choose the color palette that best suits your brand. Want to change it? Create your custom color palette below, or update it later in <EditorLink>Editor</EditorLink> | <StyleLink>Styles</StyleLink>.',
'woocommerce'
);
return (
<SidebarNavigationScreen
title={ __( 'Change the color palette', 'woocommerce' ) }
description={ createInterpolateElement(
__(
'Based on the info you shared, our AI tool recommends using this color palette. Want to change it? You can select or add new colors below, or update them later in <EditorLink>Editor</EditorLink> | <StyleLink>Styles</StyleLink>.',
'woocommerce'
description={ createInterpolateElement( description, {
EditorLink: (
<Link
onClick={ () => {
recordEvent(
'customize_your_store_assembler_hub_editor_link_click',
{
source: 'color-palette',
}
);
window.open(
`${ ADMIN_URL }site-editor.php`,
'_blank'
);
return false;
} }
href=""
/>
),
{
EditorLink: (
<Link
onClick={ () => {
recordEvent(
'customize_your_store_assembler_hub_editor_link_click',
{
source: 'color-palette',
}
);
window.open(
`${ ADMIN_URL }site-editor.php`,
'_blank'
);
return false;
} }
href=""
/>
),
StyleLink: (
<Link
onClick={ () => {
recordEvent(
'customize_your_store_assembler_hub_style_link_click',
{
source: 'color-palette',
}
);
window.open(
`${ ADMIN_URL }site-editor.php?path=%2Fwp_global_styles&canvas=edit`,
'_blank'
);
return false;
} }
href=""
/>
),
}
) }
StyleLink: (
<Link
onClick={ () => {
recordEvent(
'customize_your_store_assembler_hub_style_link_click',
{
source: 'color-palette',
}
);
window.open(
`${ ADMIN_URL }site-editor.php?path=%2Fwp_global_styles&canvas=edit`,
'_blank'
);
return false;
} }
href=""
/>
),
} ) }
content={ <SidebarNavigationScreenColorPaletteContent /> }
/>
);

4
plugins/woocommerce/changelog/41880-update-color-palettes-no-ai Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: enhancement
Display more color palettes when AI is not available and update the copy.