diff --git a/client/assets/images/color-schemes/color-scheme-thumbnail-ectoplasm.svg b/client/assets/images/color-schemes/color-scheme-thumbnail-ectoplasm.svg new file mode 100644 index 00000000000000..b3d2e0edbec1e8 --- /dev/null +++ b/client/assets/images/color-schemes/color-scheme-thumbnail-ectoplasm.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/client/blocks/color-scheme-picker/constants.js b/client/blocks/color-scheme-picker/constants.js index f272d738217e0c..ffc81edaa847ec 100644 --- a/client/blocks/color-scheme-picker/constants.js +++ b/client/blocks/color-scheme-picker/constants.js @@ -15,6 +15,7 @@ import oceanImg from 'calypso/assets/images/color-schemes/color-scheme-thumbnail import sunsetImg from 'calypso/assets/images/color-schemes/color-scheme-thumbnail-sunset.svg'; import midnightImg from 'calypso/assets/images/color-schemes/color-scheme-thumbnail-midnight.svg'; import contrastImg from 'calypso/assets/images/color-schemes/color-scheme-thumbnail-contrast.svg'; +import ectoplasmImg from 'calypso/assets/images/color-schemes/color-scheme-thumbnail-ectoplasm.svg'; /** * !! Note !! @@ -97,5 +98,13 @@ export default function ( translate ) { imageUrl: contrastImg, }, }, + { + label: translate( 'Ectoplasm', { context: 'admin color scheme' } ), + value: 'ectoplasm', + thumbnail: { + cssClass: 'is-ectoplasm', + imageUrl: ectoplasmImg, + }, + }, ] ); } diff --git a/client/state/preferences/schema.js b/client/state/preferences/schema.js index 45c62481f66b4d..edc1e18ce2115a 100644 --- a/client/state/preferences/schema.js +++ b/client/state/preferences/schema.js @@ -50,6 +50,7 @@ export const remoteValuesSchema = { 'classic-blue', 'classic-bright', 'contrast', + 'ectoplasm', 'midnight', 'nightfall', 'ocean', diff --git a/packages/calypso-color-schemes/src/calypso-color-schemes.scss b/packages/calypso-color-schemes/src/calypso-color-schemes.scss index 4ce189d9cc6f25..72e846b1da36cf 100644 --- a/packages/calypso-color-schemes/src/calypso-color-schemes.scss +++ b/packages/calypso-color-schemes/src/calypso-color-schemes.scss @@ -6,6 +6,7 @@ // Color schemes that override default properties @import 'shared/color-schemes/classic-blue'; @import 'shared/color-schemes/contrast'; +@import 'shared/color-schemes/ectoplasm'; @import 'shared/color-schemes/midnight'; @import 'shared/color-schemes/nightfall'; @import 'shared/color-schemes/ocean'; diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss new file mode 100644 index 00000000000000..21c59e244486c6 --- /dev/null +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss @@ -0,0 +1,99 @@ +.color-scheme.is-ectoplasm { + /* Primary */ + --color-primary: var( --studio-jetpack-green-50 ); + --color-primary-rgb: var( --studio-jetpack-green-50-rgb ); + --color-primary-dark: var( --studio-jetpack-green-70 ); + --color-primary-dark-rgb: var( --studio-jetpack-green-70-rgb ); + --color-primary-light: var( --studio-jetpack-green-30 ); + --color-primary-light-rgb: var( --studio-jetpack-green-30-rgb ); + --color-primary-0: var( --studio-jetpack-green-0 ); + --color-primary-0-rgb: var( --studio-jetpack-green-0-rgb ); + --color-primary-5: var( --studio-jetpack-green-5 ); + --color-primary-5-rgb: var( --studio-jetpack-green-5-rgb ); + --color-primary-10: var( --studio-jetpack-green-10 ); + --color-primary-10-rgb: var( --studio-jetpack-green-10-rgb ); + --color-primary-20: var( --studio-jetpack-green-20 ); + --color-primary-20-rgb: var( --studio-jetpack-green-20-rgb ); + --color-primary-30: var( --studio-jetpack-green-30 ); + --color-primary-30-rgb: var( --studio-jetpack-green-30-rgb ); + --color-primary-40: var( --studio-jetpack-green-40 ); + --color-primary-40-rgb: var( --studio-jetpack-green-40-rgb ); + --color-primary-50: var( --studio-jetpack-green-50 ); + --color-primary-50-rgb: var( --studio-jetpack-green-50-rgb ); + --color-primary-60: var( --studio-jetpack-green-60 ); + --color-primary-60-rgb: var( --studio-jetpack-green-60-rgb ); + --color-primary-70: var( --studio-jetpack-green-70 ); + --color-primary-70-rgb: var( --studio-jetpack-green-70-rgb ); + --color-primary-80: var( --studio-jetpack-green-80 ); + --color-primary-80-rgb: var( --studio-jetpack-green-80-rgb ); + --color-primary-90: var( --studio-jetpack-green-90 ); + --color-primary-90-rgb: var( --studio-jetpack-green-90-rgb ); + --color-primary-100: var( --studio-jetpack-green-100 ); + --color-primary-100-rgb: var( --studio-jetpack-green-100-rgb ); + + /* Accent */ + --color-accent: var( --studio-jetpack-green-50 ); + --color-accent-rgb: var( --studio-jetpack-green-50-rgb ); + --color-accent-dark: var( --studio-jetpack-green-70 ); + --color-accent-dark-rgb: var( --studio-jetpack-green-70-rgb ); + --color-accent-light: var( --studio-jetpack-green-30 ); + --color-accent-light-rgb: var( --studio-jetpack-green-30-rgb ); + --color-accent-0: var( --studio-jetpack-green-0 ); + --color-accent-0-rgb: var( --studio-jetpack-green-0-rgb ); + --color-accent-5: var( --studio-jetpack-green-5 ); + --color-accent-5-rgb: var( --studio-jetpack-green-5-rgb ); + --color-accent-10: var( --studio-jetpack-green-10 ); + --color-accent-10-rgb: var( --studio-jetpack-green-10-rgb ); + --color-accent-20: var( --studio-jetpack-green-20 ); + --color-accent-20-rgb: var( --studio-jetpack-green-20-rgb ); + --color-accent-30: var( --studio-jetpack-green-30 ); + --color-accent-30-rgb: var( --studio-jetpack-green-30-rgb ); + --color-accent-40: var( --studio-jetpack-green-40 ); + --color-accent-40-rgb: var( --studio-jetpack-green-40-rgb ); + --color-accent-50: var( --studio-jetpack-green-50 ); + --color-accent-50-rgb: var( --studio-jetpack-green-50-rgb ); + --color-accent-60: var( --studio-jetpack-green-60 ); + --color-accent-60-rgb: var( --studio-jetpack-green-60-rgb ); + --color-accent-70: var( --studio-jetpack-green-70 ); + --color-accent-70-rgb: var( --studio-jetpack-green-70-rgb ); + --color-accent-80: var( --studio-jetpack-green-80 ); + --color-accent-80-rgb: var( --studio-jetpack-green-80-rgb ); + --color-accent-90: var( --studio-jetpack-green-90 ); + --color-accent-90-rgb: var( --studio-jetpack-green-90-rgb ); + --color-accent-100: var( --studio-jetpack-green-100 ); + --color-accent-100-rgb: var( --studio-jetpack-green-100-rgb ); + + /* Masterbar */ + --color-masterbar-background: var( --studio-woocommerce-purple-90 ); + --color-masterbar-border: var( --studio-woocommerce-purple-80 ); + --color-masterbar-text: var( --studio-white ); + + --color-masterbar-item-hover-background: var( --studio-woocommerce-purple-90 ); + --color-masterbar-item-active-background: var( --studio-woocommerce-purple-100 ); + --color-masterbar-item-new-editor-background: var( --studio-gray-50 ); + --color-masterbar-item-new-editor-hover-background: var( --studio-gray-60 ); + + --color-masterbar-toggle-drafts-editor-background: var( --studio-gray-60 ); + --color-masterbar-toggle-drafts-editor-hover-background: var( --studio-gray-40 ); + --color-masterbar-toggle-drafts-editor-border: var( --studio-gray-10 ); + + /* Sidebar */ + --color-sidebar-background: var( --studio-woocommerce-purple-80 ); + --color-sidebar-background-rgb: var( --studio-woocommerce-purple-80-rgb ); + --color-sidebar-border: var( --studio-woocommerce-purple-70 ); + --color-sidebar-text: var( --studio-gray-0 ); + --color-sidebar-text-rgb: var( --studio-gray-0-rgb ); + --color-sidebar-text-alternative: var( --studio-gray-10 ); + --color-sidebar-gridicon-fill: var( --studio-gray-0 ); + + /* Sidebar Selected */ + --color-sidebar-menu-selected-background: var( --studio-jetpack-green-10 ); + --color-sidebar-menu-selected-background-rgb: var( --studio-jetpack-green-10-rgb ); + --color-sidebar-menu-selected-text: var( --studio-gray-100 ); + --color-sidebar-menu-selected-text-rgb: var( --studio-gray-100-rgb ); + + /* Sidebar Hover */ + --color-sidebar-menu-hover-background: var( --studio-jetpack-green-10 ); + --color-sidebar-menu-hover-background-rgb: var( --studio-jetpack-green-10-rgb ); + --color-sidebar-menu-hover-text: var( --studio-gray-100 ); +}