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

Update CYS color palettes and fonts based on the new Dotcom release (#40989) 

* Update font pairings

* Remove font loader check

* Update default fonts

* Update color palette choices

* Add changelog

* Add default color styles config

* Add comment

* Fix tests

* Fix test
This commit is contained in:
Chi-Hsuan Huang 2023-10-26 14:15:53 +08:00 committed by GitHub
parent cfc44be57b
commit 7142f80534
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 1004 additions and 1148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
plugins/woocommerce-admin/client/customize-store/assembler-hub/auto-block-preview.tsx
View File

@ -259,13 +259,10 @@ function ScaledBlockPreview( {
` }
</style>
<MemoizedBlockList renderAppender={ false } />
{ /* Only load font families when there are two font families (font-paring selection). Otherwise, it is not needed. */ }
{ externalFontFamilies.length === 2 && (
<FontFamiliesLoader
fontFamilies={ externalFontFamilies }
onLoad={ noop }
/>
) }
<FontFamiliesLoader
fontFamilies={ externalFontFamilies }
onLoad={ noop }
/>
</Iframe>
</DisabledProvider>
);

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

File diff suppressed because it is too large Load Diff

292
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts
View File

@ -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: {

2
plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts
View File

@ -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;
}

177
plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/colorChoices.ts
View File

@ -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

4
plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/test/colorChoices.test.ts
View File

@ -186,8 +186,8 @@ describe( 'colorPaletteResponseValidator', () => {
'Lightning',
'Midnight Citrus',
'Purple Twilight',
'Crimson Tide',
'Ice',
'Fuchsia',
'Charcoal',
],
};
it( 'should validate a correct color palette response', () => {

4
plugins/woocommerce/changelog/update-cys-font-color-choices Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: update
Update cys color/font choices