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