diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/auto-block-preview.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/auto-block-preview.tsx index c530007e837..739d86c8df8 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/auto-block-preview.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/auto-block-preview.tsx @@ -259,13 +259,10 @@ function ScaledBlockPreview( { ` } - { /* Only load font families when there are two font families (font-paring selection). Otherwise, it is not needed. */ } - { externalFontFamilies.length === 2 && ( - - ) } + ); diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/constants.ts b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/constants.ts index b9e51562832..032c29e0652 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/constants.ts +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/constants.ts @@ -8,7 +8,7 @@ export const COLOR_PALETTES = [ palette: { theme: [ { - color: '#11163d', + color: '#323856', name: 'Primary', slug: 'primary', }, @@ -18,7 +18,7 @@ export const COLOR_PALETTES = [ slug: 'secondary', }, { - color: '#11163d', + color: '#323856', name: 'Foreground', slug: 'foreground', }, @@ -41,46 +41,28 @@ export const COLOR_PALETTES = [ 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)', - }, - }, - }, - }, }, wpcom_category: 'Neutral', }, { - title: 'Crimson Tide', + title: 'Arctic Dawn', version: 2, settings: { color: { palette: { theme: [ { - color: '#A02040', + color: '#1E226F', name: 'Primary', slug: 'primary', }, { - color: '#234B57', + color: '#DD301D', name: 'Secondary', slug: 'secondary', }, { - color: '#871C37', + color: '#0D1263', name: 'Foreground', slug: 'foreground', }, @@ -90,7 +72,7 @@ export const COLOR_PALETTES = [ slug: 'background', }, { - color: '#FCE5DF', + color: '#F0F1F5', name: 'Tertiary', slug: 'tertiary', }, @@ -103,25 +85,51 @@ export const COLOR_PALETTES = [ 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--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--secondary)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--foreground)', + }, + wpcom_category: 'Neutral', + }, + { + title: 'Bronze Serenity', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + color: '#1e4b4b', + name: 'Primary', + slug: 'primary', }, - }, + { + color: '#9e7047', + name: 'Secondary', + slug: 'secondary', + }, + { + color: '#1e4b4b', + name: 'Foreground', + slug: 'foreground', + }, + { + color: '#ffffff', + name: 'Background', + slug: 'background', + }, + { + color: '#e9eded', + name: 'Tertiary', + slug: 'tertiary', + }, + ], }, }, }, + styles: { + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, + }, wpcom_category: 'Neutral', }, { @@ -165,21 +173,72 @@ export const COLOR_PALETTES = [ background: 'var(--wp--preset--color--background)', text: 'var(--wp--preset--color--foreground)', }, + }, + wpcom_category: 'Neutral', + }, + { + title: 'Candy Store', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + color: '#293852', + name: 'Primary', + slug: 'primary', + }, + { + color: '#f1bea7', + name: 'Secondary', + slug: 'secondary', + }, + { + color: '#293852', + name: 'Foreground', + slug: 'foreground', + }, + { + color: '#ffffff', + name: 'Background', + slug: 'background', + }, + { + color: '#fffddb', + name: 'Tertiary', + slug: 'tertiary', + }, + ], + }, + }, + }, + styles: { + blocks: { + 'core/button': { + color: { + background: 'var(--wp--preset--color--secondary)', + }, + variations: { + outline: { + border: { + color: 'var(--wp--preset--color--secondary)', + }, + color: { + text: 'var(--wp--preset--color--primary)', + }, + }, + }, + }, + }, + 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)', - }, + background: 'var(--wp--preset--color--secondary)', + text: 'var(--wp--preset--color--primary)', }, }, }, @@ -194,17 +253,17 @@ export const COLOR_PALETTES = [ palette: { theme: [ { - color: '#1B1736', + color: '#222222', name: 'Primary', slug: 'primary', }, { - color: '#7E76A3', + color: '#c0f500', name: 'Secondary', slug: 'secondary', }, { - color: '#1B1736', + color: '#222222', name: 'Foreground', slug: 'foreground', }, @@ -214,7 +273,7 @@ export const COLOR_PALETTES = [ slug: 'background', }, { - color: '#E9FC5F', + color: '#f7faed', name: 'Tertiary', slug: 'tertiary', }, @@ -223,370 +282,161 @@ export const COLOR_PALETTES = [ }, }, 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)', - }, - }, - }, - }, - }, - wpcom_category: 'Neutral', - }, - { - 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)', - }, - }, - }, - }, - }, - wpcom_category: 'Neutral', - }, - { - 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: { + blocks: { + 'core/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)', + variations: { + outline: { + border: { + color: 'var(--wp--preset--color--secondary)', + }, + color: { + text: 'var(--wp--preset--color--primary)', + }, }, }, }, }, - }, - wpcom_category: 'Neutral', - }, - { - 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)', - }, - }, - }, - }, - }, - wpcom_category: 'Neutral', - }, - { - title: 'Arctic Dawn', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#243156', - name: 'Primary', - slug: 'primary', - }, - { - color: '#DE5853', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#243156', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#ffffff', - name: 'Background', - slug: 'background', - }, - { - color: '#E7E7E7', - 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)', - }, - }, - }, - }, - }, - wpcom_category: 'Neutral', - }, - { - title: 'Jungle Sunrise', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#1a4435', - name: 'Primary', - slug: 'primary', - }, - { - color: '#ed774e', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#0a271d', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#fefbec', - name: 'Background', - slug: 'background', - }, - { - color: '#f7decb', - 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)', - }, ':hover': { color: { + background: 'var(--wp--preset--color--secondary)', text: 'var(--wp--preset--color--primary)', }, }, + color: { + background: 'var(--wp--preset--color--secondary)', + text: 'var(--wp--preset--color--primary)', + }, }, }, }, + wpcom_category: 'Neutral', + }, + { + title: 'Crimson Tide', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + color: '#101317', + name: 'Primary', + slug: 'primary', + }, + { + color: '#EC5E3F', + name: 'Secondary', + slug: 'secondary', + }, + { + color: '#101317', + name: 'Foreground', + slug: 'foreground', + }, + { + color: '#ffffff', + name: 'Background', + slug: 'background', + }, + { + color: '#EEEEEE', + name: 'Tertiary', + slug: 'tertiary', + }, + ], + }, + }, + }, + styles: { + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, + }, + wpcom_category: 'Neutral', + }, + { + title: 'Raspberry Chocolate', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + color: '#42332e', + name: 'Primary', + slug: 'primary', + }, + { + color: '#d64d68', + name: 'Secondary', + slug: 'secondary', + }, + { + color: '#241d1a', + name: 'Foreground', + slug: 'foreground', + }, + { + color: '#eeeae6', + name: 'Background', + slug: 'background', + }, + { + color: '#D6CCC2', + name: 'Tertiary', + slug: 'tertiary', + }, + ], + }, + }, + }, + styles: { + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, + }, wpcom_category: 'Bright', }, { - title: 'Berry Grove', + title: 'Gumtree Sunset', version: 2, settings: { color: { palette: { theme: [ { - color: '#1F351A', + color: '#8699A1', name: 'Primary', slug: 'primary', }, { - color: '#DE76DE', + color: '#BB6154', name: 'Secondary', slug: 'secondary', }, { - color: '#1f351a', + color: '#476C77', name: 'Foreground', slug: 'foreground', }, { - color: '#fdfaf1', + color: '#F4F7F7', name: 'Background', slug: 'background', }, { - color: '#ecf6eb', + color: '#ffffff', name: 'Tertiary', slug: 'tertiary', }, @@ -599,24 +449,6 @@ export const COLOR_PALETTES = [ 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)', - }, - }, - }, - }, }, wpcom_category: 'Bright', }, @@ -661,56 +493,38 @@ export const COLOR_PALETTES = [ background: 'var(--wp--preset--color--background)', text: 'var(--wp--preset--color--foreground)', }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--foreground)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, }, wpcom_category: 'Bright', }, { - title: 'Raspberry Chocolate', + title: 'Cinder', version: 2, settings: { color: { palette: { theme: [ { - color: '#42332e', + color: '#c14420', name: 'Primary', slug: 'primary', }, { - color: '#d64d68', + color: '#2F2D2D', name: 'Secondary', slug: 'secondary', }, { - color: '#241d1a', + color: '#c14420', name: 'Foreground', slug: 'foreground', }, { - color: '#eeeae6', + color: '#f1f2f2', name: 'Background', slug: 'background', }, { - color: '#D6CCC2', + color: '#DCDCDC', name: 'Tertiary', slug: 'tertiary', }, @@ -723,24 +537,6 @@ export const COLOR_PALETTES = [ 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--primary)', - }, - }, - }, - }, }, wpcom_category: 'Bright', }, @@ -757,7 +553,7 @@ export const COLOR_PALETTES = [ slug: 'primary', }, { - color: '#353535', + color: '#666666', name: 'Secondary', slug: 'secondary', }, @@ -785,213 +581,6 @@ export const COLOR_PALETTES = [ background: 'var(--wp--preset--color--background)', text: 'var(--wp--preset--color--foreground)', }, - elements: { - button: { - color: { - background: 'var(--wp--preset--color--foreground)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, - }, - wpcom_category: 'Bright', - }, - { - title: 'Gumtree Sunset', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#476C77', - name: 'Primary', - slug: 'primary', - }, - { - color: '#EFB071', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#476C77', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#edf4f4', - name: 'Background', - slug: 'background', - }, - { - color: '#ffffff', - 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--tertiary)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, - }, - wpcom_category: 'Bright', - }, - { - title: 'Ice', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - slug: 'primary', - color: '#12123F', - name: 'Primary', - }, - { - slug: 'secondary', - color: '#3473FE', - 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)', - }, - }, - }, - }, - }, - wpcom_category: 'Bright', - }, - { - title: 'Cinder', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#c14420', - name: 'Primary', - slug: 'primary', - }, - { - color: '#2F2D2D', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#863119', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#f1f2f2', - name: 'Background', - slug: 'background', - }, - { - color: '#DCDCDC', - name: 'Tertiary', - slug: 'tertiary', - }, - ], - }, - }, - }, - styles: { - color: { - background: 'var(--wp--preset--color--background)', - text: 'var(--wp--preset--color--foreground)', - }, - elements: { - button: { - border: { - radius: '0', - }, - 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)', - }, - }, - }, - }, }, wpcom_category: 'Bright', }, @@ -1036,153 +625,11 @@ export const COLOR_PALETTES = [ 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--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--secondary)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - }, - }, - }, }, wpcom_category: 'Bright', }, { - title: 'Sandalwood Oasis', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#F0EBE3', - name: 'Primary', - slug: 'primary', - }, - { - color: '#DF9785', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#ffffff', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#2a2a16', - name: 'Background', - slug: 'background', - }, - { - color: '#434323', - 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--primary)', - }, - }, - }, - }, - }, - wpcom_category: 'Dark', - }, - { - title: 'Rustic Rosewood', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#F4F4F2', - name: 'Primary', - slug: 'primary', - }, - { - color: '#EE797C', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#ffffff', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#1A1A1A', - name: 'Background', - slug: 'background', - }, - { - color: '#3B3939', - 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)', - }, - }, - }, - }, - }, - wpcom_category: 'Dark', - }, - { - title: 'Cinnamon Latte', + title: 'Vibrant Berry', version: 2, settings: { color: { @@ -1190,27 +637,27 @@ export const COLOR_PALETTES = [ theme: [ { slug: 'primary', - color: '#D9CAB3', + color: '#7C1D6F', name: 'Primary', }, { slug: 'secondary', - color: '#BC8034', + color: '#C62FB2', name: 'Secondary', }, { slug: 'foreground', - color: '#FFFFFF', + color: '#7C1D6F', name: 'Foreground', }, { slug: 'background', - color: '#3C3F4D', + color: '#FFEED6', name: 'Background', }, { slug: 'tertiary', - color: '#2B2D36', + color: '#FDD8DE', name: 'Tertiary', }, ], @@ -1222,150 +669,8 @@ export const COLOR_PALETTES = [ 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)', - }, - }, - }, - }, }, - wpcom_category: 'Dark', - }, - { - title: 'Lilac Nightshade', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#f5d6ff', - name: 'Primary', - slug: 'primary', - }, - { - color: '#C48DDA', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#ffffff', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#000000', - name: 'Background', - slug: 'background', - }, - { - color: '#462749', - 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)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, - }, - wpcom_category: 'Dark', - }, - { - title: 'Lightning', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#ebffd2', - name: 'Primary', - slug: 'primary', - }, - { - color: '#fefefe', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#ebffd2', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#0e1fb5', - name: 'Background', - slug: 'background', - }, - { - color: '#0A1680', - 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--foreground)', - text: 'var(--wp--preset--color--background)', - }, - }, - link: { - color: { - text: 'var(--wp--preset--color--foreground)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, - }, - wpcom_category: 'Dark', + wpcom_category: 'Bright', }, { title: 'Aquamarine Night', @@ -1408,86 +713,6 @@ export const COLOR_PALETTES = [ 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)', - }, - }, - }, - }, - }, - wpcom_category: 'Dark', - }, - { - title: 'Charcoal', - version: 2, - settings: { - color: { - palette: { - theme: [ - { - color: '#dbdbdb', - name: 'Primary', - slug: 'primary', - }, - { - color: '#efefef', - name: 'Secondary', - slug: 'secondary', - }, - { - color: '#dbdbdb', - name: 'Foreground', - slug: 'foreground', - }, - { - color: '#1e1e1e', - name: 'Background', - slug: 'background', - }, - { - color: '#000000', - 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)', - }, - ':hover': { - color: { - text: 'var(--wp--preset--color--primary)', - }, - }, - }, - }, }, wpcom_category: 'Dark', }, @@ -1532,25 +757,271 @@ export const COLOR_PALETTES = [ 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)', + }, + wpcom_category: 'Dark', + }, + { + title: 'Cinnamon Latte', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + slug: 'primary', + color: '#D9CAB3', + name: 'Primary', }, - }, + { + slug: 'secondary', + color: '#BC8034', + name: 'Secondary', + }, + { + slug: 'foreground', + color: '#FFFFFF', + name: 'Foreground', + }, + { + slug: 'background', + color: '#3C3F4D', + name: 'Background', + }, + { + slug: 'tertiary', + color: '#2B2D36', + name: 'Tertiary', + }, + ], }, }, }, + styles: { + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, + }, + wpcom_category: 'Dark', + }, + { + title: 'Lightning', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + color: '#ebffd2', + name: 'Primary', + slug: 'primary', + }, + { + color: '#fefefe', + name: 'Secondary', + slug: 'secondary', + }, + { + color: '#ebffd2', + name: 'Foreground', + slug: 'foreground', + }, + { + color: '#0e1fb5', + name: 'Background', + slug: 'background', + }, + { + color: '#0A1680', + name: 'Tertiary', + slug: 'tertiary', + }, + ], + }, + }, + }, + styles: { + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, + }, + wpcom_category: 'Dark', + }, + { + title: 'Lilac Nightshade', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + color: '#f5d6ff', + name: 'Primary', + slug: 'primary', + }, + { + color: '#C48DDA', + name: 'Secondary', + slug: 'secondary', + }, + { + color: '#ffffff', + name: 'Foreground', + slug: 'foreground', + }, + { + color: '#000000', + name: 'Background', + slug: 'background', + }, + { + color: '#462749', + name: 'Tertiary', + slug: 'tertiary', + }, + ], + }, + }, + }, + styles: { + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, + }, + wpcom_category: 'Dark', + }, + { + title: 'Charcoal', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + color: '#dbdbdb', + name: 'Primary', + slug: 'primary', + }, + { + color: '#efefef', + name: 'Secondary', + slug: 'secondary', + }, + { + color: '#dbdbdb', + name: 'Foreground', + slug: 'foreground', + }, + { + color: '#1e1e1e', + name: 'Background', + slug: 'background', + }, + { + color: '#000000', + name: 'Tertiary', + slug: 'tertiary', + }, + ], + }, + }, + }, + styles: { + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, + }, + wpcom_category: 'Dark', + }, + { + title: 'Rustic Rosewood', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + color: '#F4F4F2', + name: 'Primary', + slug: 'primary', + }, + { + color: '#EE797C', + name: 'Secondary', + slug: 'secondary', + }, + { + color: '#ffffff', + name: 'Foreground', + slug: 'foreground', + }, + { + color: '#1A1A1A', + name: 'Background', + slug: 'background', + }, + { + color: '#3B3939', + name: 'Tertiary', + slug: 'tertiary', + }, + ], + }, + }, + }, + styles: { + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, + }, + wpcom_category: 'Dark', + }, + { + title: 'Sandalwood Oasis', + version: 2, + settings: { + color: { + palette: { + theme: [ + { + color: '#F0EBE3', + name: 'Primary', + slug: 'primary', + }, + { + color: '#DF9785', + name: 'Secondary', + slug: 'secondary', + }, + { + color: '#ffffff', + name: 'Foreground', + slug: 'foreground', + }, + { + color: '#2a2a16', + name: 'Background', + slug: 'background', + }, + { + color: '#434323', + name: 'Tertiary', + slug: 'tertiary', + }, + ], + }, + }, + }, + styles: { + color: { + background: 'var(--wp--preset--color--background)', + text: 'var(--wp--preset--color--foreground)', + }, + }, wpcom_category: 'Dark', }, { @@ -1594,25 +1065,148 @@ export const COLOR_PALETTES = [ background: 'var(--wp--preset--color--background)', text: 'var(--wp--preset--color--foreground)', }, + }, + wpcom_category: 'Dark', + }, +].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. + // https://github.com/Automattic/themes/blob/trunk/creatio-2/theme.json + return { + ...color, + styles: { + ...color.styles, + blocks: { + 'core/button': { + color: { + background: 'var(--wp--preset--color--secondary)', + }, + variations: { + outline: { + border: { + color: 'var(--wp--preset--color--secondary)', + }, + color: { + text: 'var(--wp--preset--color--secondary)', + }, + }, + }, + }, + 'core/heading': { + color: { + text: 'var(--wp--preset--color--foreground)', + }, + elements: { + link: { + color: { + text: 'var(--wp--preset--color--foreground)', + }, + }, + }, + }, + 'core/post-date': { + color: { + text: 'var(--wp--preset--color--foreground)', + }, + }, + 'core/post-title': { + color: { + text: 'var(--wp--preset--color--foreground)', + }, + elements: { + link: { + ':hover': { + color: { + text: 'var(--wp--preset--color--primary)', + }, + }, + color: { + text: 'var(--wp--preset--color--foreground)', + }, + }, + }, + }, + 'core/pullquote': { + border: { + color: 'var(--wp--preset--color--foreground)', + style: 'solid', + width: '1px 0', + }, + }, + 'core/quote': { + border: { + color: 'var(--wp--preset--color--foreground)', + style: 'solid', + width: '0 0 0 5px', + }, + }, + 'core/separator': { + color: { + text: 'var(--wp--preset--color--foreground)', + }, + }, + 'core/site-title': { + elements: { + link: { + ':hover': { + color: { + text: 'var(--wp--preset--color--foreground)', + }, + }, + color: { + text: 'var(--wp--preset--color--foreground)', + }, + }, + }, + }, + ...color.styles.blocks, + }, elements: { button: { + ':active': { + color: { + background: 'var(--wp--preset--color--foreground)', + text: 'var(--wp--preset--color--background)', + }, + }, + ':focus': { + color: { + background: 'var(--wp--preset--color--foreground)', + text: 'var(--wp--preset--color--background)', + }, + outline: { + color: 'var(--wp--preset--color--primary)', + offset: '2px', + style: 'dotted', + width: '1px', + }, + }, + ':hover': { + color: { + background: 'var(--wp--preset--color--secondary)', + text: 'var(--wp--preset--color--background)', + }, + }, 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)', }, + typography: { + textDecoration: 'none', + }, + }, + color: { + text: 'var(--wp--preset--color--foreground)', }, }, + ...color.styles.elements, }, }, - wpcom_category: 'Dark', - }, -]; + }; +} ); diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts index 9b6d68fd63e..fbc04ee3c62 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts @@ -69,6 +69,45 @@ export const FONT_PAIRINGS = [ }, }, }, + { + title: 'Albert Sans + Lora', + version: 2, + lookAndFeel: [ 'Contemporary', 'Bold' ] as Look[], + settings: { + typography: { + fontFamilies: { + theme: [ + { + fontFamily: 'Albert Sans', + slug: 'albert-sans', + }, + { + fontFamily: 'Lora', + slug: 'lora', + }, + ], + }, + }, + }, + styles: { + elements: { + heading: { + typography: { + fontFamily: + 'var(--wp--preset--font-family--albert-sans)', + fontStyle: 'normal', + fontWeight: '700', + }, + }, + }, + typography: { + fontFamily: 'var(--wp--preset--font-family--lora)', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '1.67', + }, + }, + }, { title: 'Bodoni Moda + Overpass', version: 2, @@ -193,10 +232,120 @@ export const FONT_PAIRINGS = [ }, }, }, + { + title: 'Cormorant + Work Sans', + version: 2, + lookAndFeel: [] as Look[], + settings: { + typography: { + fontFamilies: { + theme: [ + { + fontFamily: 'Cormorant', + slug: 'cormorant', + }, + { + fontFamily: 'Work Sans', + slug: 'work-sans', + }, + ], + }, + }, + }, + styles: { + elements: { + heading: { + typography: { + fontFamily: 'var(--wp--preset--font-family--cormorant)', + fontStyle: 'normal', + fontWeight: '500', + }, + }, + }, + typography: { + fontFamily: 'var(--wp--preset--font-family--work-sans)', + }, + }, + }, + { + title: 'DM Sans + IBM Plex Mono', + version: 2, + lookAndFeel: [] as Look[], + settings: { + typography: { + fontFamilies: { + theme: [ + { + fontFamily: 'DM Sans', + slug: 'dm-sans', + }, + { + fontFamily: 'IBM Plex Mono', + slug: 'ibm-plex-mono', + }, + ], + }, + }, + }, + styles: { + elements: { + heading: { + typography: { + fontFamily: 'var(--wp--preset--font-family--dm-sans)', + fontStyle: 'normal', + fontWeight: '700', + }, + }, + }, + typography: { + fontFamily: 'var(--wp--preset--font-family--ibm-plex-mono)', + fontSize: 'var(--wp--preset--font-size--small)', + fontStyle: 'normal', + fontWeight: '300', + lineHeight: '1.67', + }, + }, + }, + { + title: 'Fraunces + Libre Franklin', + version: 2, + lookAndFeel: [ 'Classic' ] as Look[], + settings: { + typography: { + fontFamilies: { + theme: [ + { + fontFamily: 'Fraunces', + slug: 'fraunces', + }, + { + fontFamily: 'Libre Franklin', + slug: 'libre-franklin', + }, + ], + }, + }, + }, + styles: { + elements: { + heading: { + typography: { + fontFamily: 'var(--wp--preset--font-family--fraunces)', + fontStyle: 'normal', + fontWeight: '500', + }, + }, + }, + typography: { + fontFamily: 'var(--wp--preset--font-family--libre-franklin)', + lineHeight: '1.67', + }, + }, + }, { title: 'Libre Baskerville + DM Sans', version: 2, - lookAndFeel: [ 'Classic', 'Bold' ] as Look[], + lookAndFeel: [] as Look[], settings: { typography: { fontFamilies: { @@ -257,7 +406,7 @@ export const FONT_PAIRINGS = [ { title: 'Libre Franklin + EB Garamond', version: 2, - lookAndFeel: [ 'Contemporary', 'Classic', 'Bold' ] as Look[], + lookAndFeel: [ 'Classic' ] as Look[], settings: { typography: { fontFamilies: { @@ -382,6 +531,40 @@ export const FONT_PAIRINGS = [ }, }, }, + { + title: 'Newsreader + Newsreader', + version: 2, + lookAndFeel: [ 'Classic' ] as Look[], + settings: { + typography: { + fontFamilies: { + theme: [ + { + fontFamily: 'Newsreader', + slug: 'newsreader', + }, + ], + }, + }, + }, + styles: { + elements: { + heading: { + typography: { + fontFamily: + 'var(--wp--preset--font-family--newsreader)', + fontStyle: 'normal', + fontWeight: '400', + }, + }, + }, + typography: { + fontFamily: 'var(--wp--preset--font-family--newsreader)', + fontSize: 'var(--wp--preset--font-size--medium)', + lineHeight: '1.67', + }, + }, + }, { title: 'Playfair Display + Fira Sans', version: 2, @@ -448,9 +631,79 @@ export const FONT_PAIRINGS = [ }, }, { - title: 'Rubik + Inter', + title: 'Plus Jakarta Sans + Plus Jakarta Sans', version: 2, lookAndFeel: [ 'Contemporary', 'Bold' ] as Look[], + settings: { + typography: { + fontFamilies: { + theme: [ + { + fontFamily: 'Plus Jakarta Sans', + slug: 'plus-jakarta-sans', + }, + ], + }, + }, + }, + styles: { + elements: { + heading: { + typography: { + fontFamily: + 'var(--wp--preset--font-family--plus-jakarta-sans)', + fontStyle: 'normal', + fontWeight: '700', + }, + }, + }, + typography: { + fontFamily: 'var(--wp--preset--font-family--plus-jakarta-sans)', + lineHeight: '1.67', + }, + }, + }, + { + title: 'Raleway + Cormorant', + version: 2, + lookAndFeel: [ 'Classic', 'Bold' ] as Look[], + settings: { + typography: { + fontFamilies: { + theme: [ + { + fontFamily: 'Raleway', + slug: 'raleway', + }, + { + fontFamily: 'Cormorant', + slug: 'cormorant', + }, + ], + }, + }, + }, + styles: { + elements: { + heading: { + typography: { + fontFamily: 'var(--wp--preset--font-family--raleway)', + fontStyle: 'normal', + fontWeight: '700', + }, + }, + }, + typography: { + fontFamily: 'var(--wp--preset--font-family--cormorant)', + fontSize: 'var(--wp--preset--font-size--medium)', + lineHeight: '1.67', + }, + }, + }, + { + title: 'Rubik + Inter', + version: 2, + lookAndFeel: [ 'Bold' ] as Look[], settings: { typography: { fontFamilies: { @@ -506,10 +759,41 @@ export const FONT_PAIRINGS = [ }, }, }, + { + title: 'Rubik + Rubik', + version: 2, + lookAndFeel: [ 'Contemporary' ] as Look[], + settings: { + typography: { + fontFamilies: { + theme: [ + { + fontFamily: 'Rubik', + slug: 'rubik', + }, + ], + }, + }, + }, + styles: { + elements: { + heading: { + typography: { + fontFamily: 'var(--wp--preset--font-family--rubik)', + }, + }, + }, + typography: { + fontFamily: 'var(--wp--preset--font-family--rubik)', + fontWeight: '400', + lineHeight: '1.67', + }, + }, + }, { title: 'Space Mono + Roboto', version: 2, - lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], + lookAndFeel: [] as Look[], settings: { typography: { fontFamilies: { diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts b/plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts index 357620220af..216fc10bdae 100644 --- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts +++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts @@ -116,7 +116,7 @@ const assignFontPairing = assign< fontPairing = 'Bodoni Moda + Overpass'; break; case choice === 'Bold': - fontPairing = 'Rubik + Inter'; + fontPairing = 'Plus Jakarta Sans + Plus Jakarta Sans'; break; } diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/colorChoices.ts b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/colorChoices.ts index 1e43a759129..f89948eb523 100644 --- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/colorChoices.ts +++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/colorChoices.ts @@ -17,12 +17,20 @@ const colorChoices: ColorPalette[] = [ lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], }, { - name: 'Crimson Tide', - primary: '#A02040', - secondary: '#234B57', - foreground: '#871C37', + name: 'Arctic Dawn', + primary: '#243156', + secondary: '#DE5853', + foreground: '#243156', background: '#ffffff', - lookAndFeel: [ 'Bold' ] as Look[], + lookAndFeel: [ 'Contemporary' ] as Look[], + }, + { + name: 'Bronze Serenity', + primary: '#1e4b4b', + secondary: '#9e7047', + foreground: '#1e4b4b', + background: '#ffffff', + lookAndFeel: [ 'Classic' ], }, { name: 'Purple Twilight', @@ -32,68 +40,28 @@ const colorChoices: ColorPalette[] = [ background: '#fefbff', lookAndFeel: [ 'Bold' ] as Look[], }, + { + name: 'Candy Store', + primary: '#293852', + secondary: '#f1bea7', + foreground: '#293852', + background: '#ffffff', + lookAndFeel: [ 'Classic' ], + }, { name: 'Midnight Citrus', primary: '#1B1736', secondary: '#7E76A3', foreground: '#1B1736', background: '#ffffff', - lookAndFeel: [ 'Bold' ] as Look[], + lookAndFeel: [ 'Bold', 'Contemporary' ] as Look[], }, { - name: 'Green Thumb', - primary: '#164A41', - secondary: '#4B7B4D', - foreground: '#164A41', + name: 'Crimson Tide', + primary: '#A02040', + secondary: '#234B57', + foreground: '#871C37', background: '#ffffff', - lookAndFeel: [ 'Contemporary' ] as Look[], - }, - { - name: 'Golden Haze', - primary: '#232224', - secondary: '#EBB54F', - foreground: '#515151', - background: '#ffffff', - lookAndFeel: [ 'Contemporary', 'Bold' ] as Look[], - }, - { - name: 'Golden Indigo', - primary: '#4866C0', - secondary: '#C09F50', - foreground: '#405AA7', - background: '#ffffff', - lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], - }, - { - name: 'Arctic Dawn', - primary: '#243156', - secondary: '#DE5853', - foreground: '#243156', - background: '#ffffff', - lookAndFeel: [ 'Contemporary' ] as Look[], - }, - { - name: 'Jungle Sunrise', - primary: '#1a4435', - secondary: '#ed774e', - foreground: '#0a271d', - background: '#fefbec', - lookAndFeel: [ 'Classic' ] as Look[], - }, - { - name: 'Berry Grove', - primary: '#1F351A', - secondary: '#DE76DE', - foreground: '#1f351a', - background: '#fdfaf1', - lookAndFeel: [ 'Classic' ] as Look[], - }, - { - name: 'Fuchsia', - primary: '#b7127f', - secondary: '#18020C', - foreground: '#b7127f', - background: '#f7edf6', lookAndFeel: [ 'Bold' ] as Look[], }, { @@ -104,29 +72,21 @@ const colorChoices: ColorPalette[] = [ background: '#eeeae6', lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], }, - { - name: 'Canary', - primary: '#0F0F05', - secondary: '#353535', - foreground: '#0F0F05', - background: '#FCFF9B', - lookAndFeel: [ 'Bold' ] as Look[], - }, { name: 'Gumtree Sunset', primary: '#476C77', secondary: '#EFB071', foreground: '#476C77', background: '#edf4f4', - lookAndFeel: [ 'Contemporary' ] as Look[], + lookAndFeel: [ 'Classic' ] as Look[], }, { - name: 'Ice', - primary: '#12123F', - secondary: '#3473FE', - foreground: '#12123F', - background: '#F1F4FA', - lookAndFeel: [ 'Contemporary' ] as Look[], + name: 'Fuchsia', + primary: '#b7127f', + secondary: '#18020C', + foreground: '#b7127f', + background: '#f7edf6', + lookAndFeel: [ 'Bold' ] as Look[], }, { name: 'Cinder', @@ -136,6 +96,14 @@ const colorChoices: ColorPalette[] = [ background: '#f1f2f2', lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], }, + { + name: 'Canary', + primary: '#0F0F05', + secondary: '#353535', + foreground: '#0F0F05', + background: '#FCFF9B', + lookAndFeel: [ 'Bold' ] as Look[], + }, { name: 'Blue Lagoon', primary: '#004DE5', @@ -145,19 +113,27 @@ const colorChoices: ColorPalette[] = [ lookAndFeel: [ 'Bold', 'Contemporary' ] as Look[], }, { - name: 'Sandalwood Oasis', - primary: '#F0EBE3', - secondary: '#DF9785', - foreground: '#ffffff', - background: '#2a2a16', - lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], + name: 'Vibrant Berry', + primary: '#7C1D6F', + secondary: '#C62FB2', + foreground: '#7C1D6F', + background: '#FFEED6', + lookAndFeel: [ 'Classic', 'Bold' ], }, { - name: 'Rustic Rosewood', - primary: '#F4F4F2', - secondary: '#EE797C', + name: 'Aquamarine Night', + primary: '#deffef', + secondary: '#56fbb9', foreground: '#ffffff', - background: '#1A1A1A', + background: '#091C48', + lookAndFeel: [ 'Bold' ] as Look[], + }, + { + name: 'Evergreen Twilight', + primary: '#ffffff', + secondary: '#8EE978', + foreground: '#ffffff', + background: '#181818', lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], }, { @@ -168,14 +144,6 @@ const colorChoices: ColorPalette[] = [ background: '#3C3F4D', lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], }, - { - name: 'Lilac Nightshade', - primary: '#f5d6ff', - secondary: '#C48DDA', - foreground: '#ffffff', - background: '#000000', - lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], - }, { name: 'Lightning', primary: '#ebffd2', @@ -185,12 +153,12 @@ const colorChoices: ColorPalette[] = [ lookAndFeel: [ 'Bold' ] as Look[], }, { - name: 'Aquamarine Night', - primary: '#deffef', - secondary: '#56fbb9', + name: 'Lilac Nightshade', + primary: '#f5d6ff', + secondary: '#C48DDA', foreground: '#ffffff', - background: '#091C48', - lookAndFeel: [ 'Bold' ] as Look[], + background: '#000000', + lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], }, { name: 'Charcoal', @@ -201,11 +169,19 @@ const colorChoices: ColorPalette[] = [ lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], }, { - name: 'Evergreen Twilight', - primary: '#ffffff', - secondary: '#8EE978', + name: 'Rustic Rosewood', + primary: '#F4F4F2', + secondary: '#EE797C', foreground: '#ffffff', - background: '#181818', + background: '#1A1A1A', + lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], + }, + { + name: 'Sandalwood Oasis', + primary: '#F0EBE3', + secondary: '#DF9785', + foreground: '#ffffff', + background: '#2a2a16', lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], }, { @@ -217,6 +193,7 @@ const colorChoices: ColorPalette[] = [ lookAndFeel: [ 'Contemporary', 'Classic' ] as Look[], }, ]; + const allowedNames: string[] = colorChoices.map( ( palette ) => palette.name ); const hexColorRegex = /^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/; const colorPaletteNameValidator = z diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/colorChoices.test.ts b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/colorChoices.test.ts index cff531b7838..2878bd2243c 100644 --- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/colorChoices.test.ts +++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/colorChoices.test.ts @@ -186,8 +186,8 @@ describe( 'colorPaletteResponseValidator', () => { 'Lightning', 'Midnight Citrus', 'Purple Twilight', - 'Crimson Tide', - 'Ice', + 'Fuchsia', + 'Charcoal', ], }; it( 'should validate a correct color palette response', () => { diff --git a/plugins/woocommerce/changelog/update-cys-font-color-choices b/plugins/woocommerce/changelog/update-cys-font-color-choices new file mode 100644 index 00000000000..742ae3563f9 --- /dev/null +++ b/plugins/woocommerce/changelog/update-cys-font-color-choices @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +Update cys color/font choices