From e16e85e4dcea81bb8fb5cb0a96fded078a0703b9 Mon Sep 17 00:00:00 2001 From: Matthew Reishus Date: Tue, 3 Nov 2020 16:09:24 -0600 Subject: [PATCH 01/18] Add ectoplasm color scheme - From wp-admin --- .../color-scheme-thumbnail-ectoplasm.svg | 16 +++ .../blocks/color-scheme-picker/constants.js | 9 ++ client/state/preferences/schema.js | 1 + .../src/calypso-color-schemes.scss | 1 + .../src/shared/color-schemes/_ectoplasm.scss | 99 +++++++++++++++++++ 5 files changed, 126 insertions(+) create mode 100644 client/assets/images/color-schemes/color-scheme-thumbnail-ectoplasm.svg create mode 100644 packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss 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 0000000000000..b3d2e0edbec1e --- /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 f272d738217e0..a521938469abb 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' ), + value: 'ectoplasm', + thumbnail: { + cssClass: 'is-ectoplasm', + imageUrl: ectoplasmImg, + }, + }, ] ); } diff --git a/client/state/preferences/schema.js b/client/state/preferences/schema.js index 45c62481f66b4..edc1e18ce2115 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 4ce189d9cc6f2..72e846b1da36c 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 0000000000000..21c59e244486c --- /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 ); +} From cb320110d13f42d73c5037b508fe25b22ffc25ea Mon Sep 17 00:00:00 2001 From: Matthew Reishus Date: Tue, 3 Nov 2020 16:32:57 -0600 Subject: [PATCH 02/18] Add translate context --- client/blocks/color-scheme-picker/constants.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/blocks/color-scheme-picker/constants.js b/client/blocks/color-scheme-picker/constants.js index a521938469abb..ffc81edaa847e 100644 --- a/client/blocks/color-scheme-picker/constants.js +++ b/client/blocks/color-scheme-picker/constants.js @@ -99,7 +99,7 @@ export default function ( translate ) { }, }, { - label: translate( 'Ectoplasm' ), + label: translate( 'Ectoplasm', { context: 'admin color scheme' } ), value: 'ectoplasm', thumbnail: { cssClass: 'is-ectoplasm', From d748b64391c2a9d4b118a0ebbe6cff4df50bee2d Mon Sep 17 00:00:00 2001 From: Matthew Reishus Date: Wed, 4 Nov 2020 15:50:08 -0600 Subject: [PATCH 03/18] Alter ectoplasm to use the wp-admin colors directly Has issues --- .../src/shared/color-schemes/_ectoplasm.scss | 197 +++++++++++------- 1 file changed, 116 insertions(+), 81 deletions(-) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss index 21c59e244486c..5f652f92fb6f3 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss @@ -1,99 +1,134 @@ +/* +WP Admin Unthemed definitions: + +$text-color: #fff !default; +$base-color: #23282d !default; +$icon-color: hsl( hue( $base-color ), 7%, 95% ) !default; +$highlight-color: #0073aa !default; +$notification-color: #d54e21 !default; + +WP Admin Ectoplasm Definition: + +$base-color: #523f6d; +$icon-color: #ece6f6; +$highlight-color: #a3b745; +$notification-color: #d46f15; +*/ + +// Set up variables for Calypso ectoplasm +:root { + --theme-text-color: #ffffff; /* Direct from wp-admin */ + --theme-text-color-rgb: rgb( 255, 255, 255 ); /* Manual conversion */ + --theme-base-color: #523f6d; /* Direct from wp-admin */ + --theme-base-color-rgb: rgb( 82, 63, 109 ); /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */ + --theme-submenu-background-color: #413256; /* darken( $base-color, 7% ), computed: http://scg.ar-ch.org/ + --theme-icon-color: #ece6f6; /* Direct from wp-admin */ + --theme-highlight-color: #a3b745; /* Direct from wp-admin */ + --theme-highlight-color-rgb: rgb( 163, 183, 69 ); /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */ + --theme-notification-color: #d46f15; /* Direct from wp-admin */ +} + .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 ); + // Very Rough: Set all shades to the highlight color from the theme. + // Need a better solution. + --color-primary: var( --theme-highlight-color ); + --color-primary-rgb: var( --theme-highlight-color-rgb ); + --color-primary-dark: var( --theme-highlight-color ); + --color-primary-dark-rgb: var( --theme-highlight-color-rgb ); + --color-primary-light: var( --theme-highlight-color ); + --color-primary-light-rgb: var( --theme-highlight-color-rgb ); + --color-primary-0: var( --theme-highlight-color ); + --color-primary-0-rgb: var( --theme-highlight-color-rgb ); + --color-primary-5: var( --theme-highlight-color ); + --color-primary-5-rgb: var( --theme-highlight-color-rgb ); + --color-primary-10: var( --theme-highlight-color ); + --color-primary-10-rgb: var( --theme-highlight-color-rgb ); + --color-primary-20: var( --theme-highlight-color ); + --color-primary-20-rgb: var( --theme-highlight-color-rgb ); + --color-primary-30: var( --theme-highlight-color ); + --color-primary-30-rgb: var( --theme-highlight-color-rgb ); + --color-primary-40: var( --theme-highlight-color ); + --color-primary-40-rgb: var( --theme-highlight-color-rgb ); + --color-primary-50: var( --theme-highlight-color ); + --color-primary-50-rgb: var( --theme-highlight-color-rgb ); + --color-primary-60: var( --theme-highlight-color ); + --color-primary-60-rgb: var( --theme-highlight-color-rgb ); + --color-primary-70: var( --theme-highlight-color ); + --color-primary-70-rgb: var( --theme-highlight-color-rgb ); + --color-primary-80: var( --theme-highlight-color ); + --color-primary-80-rgb: var( --theme-highlight-color-rgb ); + --color-primary-90: var( --theme-highlight-color ); + --color-primary-90-rgb: var( --theme-highlight-color-rgb ); + --color-primary-100: var( --theme-highlight-color ); + --color-primary-100-rgb: var( --theme-highlight-color-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 ); + // Very Rough: Set all shades to the highlight color from the theme. + // Need a better solution. + --color-accent: var( --theme-highlight-color ); + --color-accent-rgb: var( --theme-highlight-color-rgb ); + --color-accent-dark: var( --theme-highlight-color ); + --color-accent-dark-rgb: var( --theme-highlight-color-rgb ); + --color-accent-light: var( --theme-highlight-color ); + --color-accent-light-rgb: var( --theme-highlight-color-rgb ); + --color-accent-0: var( --theme-highlight-color ); + --color-accent-0-rgb: var( --theme-highlight-color-rgb ); + --color-accent-5: var( --theme-highlight-color ); + --color-accent-5-rgb: var( --theme-highlight-color-rgb ); + --color-accent-10: var( --theme-highlight-color ); + --color-accent-10-rgb: var( --theme-highlight-color-rgb ); + --color-accent-20: var( --theme-highlight-color ); + --color-accent-20-rgb: var( --theme-highlight-color-rgb ); + --color-accent-30: var( --theme-highlight-color ); + --color-accent-30-rgb: var( --theme-highlight-color-rgb ); + --color-accent-40: var( --theme-highlight-color ); + --color-accent-40-rgb: var( --theme-highlight-color-rgb ); + --color-accent-50: var( --theme-highlight-color ); + --color-accent-50-rgb: var( --theme-highlight-color-rgb ); + --color-accent-60: var( --theme-highlight-color ); + --color-accent-60-rgb: var( --theme-highlight-color-rgb ); + --color-accent-70: var( --theme-highlight-color ); + --color-accent-70-rgb: var( --theme-highlight-color-rgb ); + --color-accent-80: var( --theme-highlight-color ); + --color-accent-80-rgb: var( --theme-highlight-color-rgb ); + --color-accent-90: var( --theme-highlight-color ); + --color-accent-90-rgb: var( --theme-highlight-color-rgb ); + --color-accent-100: var( --theme-highlight-color ); + --color-accent-100-rgb: var( --theme-highlight-color-rgb ); /* Masterbar */ - --color-masterbar-background: var( --studio-woocommerce-purple-90 ); - --color-masterbar-border: var( --studio-woocommerce-purple-80 ); + --color-masterbar-background: var( --theme-base-color ); + --color-masterbar-border: var( --theme-base-color-rgb ); --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-item-hover-background: var( --theme-submenu-background-color ); + --color-masterbar-item-active-background: var( --theme-submenu-background-color ); + // --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 ); - --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-background: var( --theme-base-color ); + --color-sidebar-background-rgb: var( --theme-base-color-rgb ); + --color-sidebar-border: var( --theme-submenu-background-color ); + --color-sidebar-text: var( --theme-text-color ); + --color-sidebar-text-rgb: var( --theme-text-color-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 ); + --color-sidebar-menu-selected-background: var( --theme-highlight-color ); + --color-sidebar-menu-selected-background-rgb: var( --theme-highlight-color-rgb ); + --color-sidebar-menu-selected-text: var( --theme-text-color ); + --color-sidebar-menu-selected-text-rgb: var( --theme-text-color-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 ); + --color-sidebar-menu-hover-background: var( --theme-highlight-color ); + --color-sidebar-menu-hover-background-rgb: var( --theme-highlight-color-rgb ); + --color-sidebar-menu-hover-text: var( --theme-text-color ); } From 51136c1c909e26bd640d1a5a26804375b76052cc Mon Sep 17 00:00:00 2001 From: Matthew Reishus Date: Thu, 5 Nov 2020 15:03:30 -0600 Subject: [PATCH 04/18] Include 0-100 shades --- .../src/shared/color-schemes/_ectoplasm.scss | 166 +++++++++++------- 1 file changed, 103 insertions(+), 63 deletions(-) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss index 5f652f92fb6f3..6d3a654c8a107 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss @@ -13,89 +13,129 @@ $base-color: #523f6d; $icon-color: #ece6f6; $highlight-color: #a3b745; $notification-color: #d46f15; + +Created this definition in color-studio to generate 0-100 shades: + { + name: 'Ectoplasm Green', + default: 50, + specs: { + hue_start: 70, + hue_end: 72, + hue_curve: 'easeOutSine', + sat_steps: [ + 8, 27, 56, 80, 100, 100, 100, 100, 100, 100, 100, 100 + ], + lum_steps: [ + 96, 96, 95, 94, 87, 75.1, 61.6, 49, 40.5, 31, 20, 11 + ] + } + } */ // Set up variables for Calypso ectoplasm :root { --theme-text-color: #ffffff; /* Direct from wp-admin */ - --theme-text-color-rgb: rgb( 255, 255, 255 ); /* Manual conversion */ + --theme-text-color-rgb: 255, 255, 255; /* Manual conversion */ --theme-base-color: #523f6d; /* Direct from wp-admin */ - --theme-base-color-rgb: rgb( 82, 63, 109 ); /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */ + --theme-base-color-rgb: 82, 63, 109; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */ --theme-submenu-background-color: #413256; /* darken( $base-color, 7% ), computed: http://scg.ar-ch.org/ --theme-icon-color: #ece6f6; /* Direct from wp-admin */ --theme-highlight-color: #a3b745; /* Direct from wp-admin */ - --theme-highlight-color-rgb: rgb( 163, 183, 69 ); /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */ + --theme-highlight-color-rgb: 163, 183, 69; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */ --theme-notification-color: #d46f15; /* Direct from wp-admin */ + + --ectoplasm-green-0: #f2f5e1; + --ectoplasm-green-5: #e9f5b3; + --ectoplasm-green-10: #daf26b; + --ectoplasm-green-20: #cdf030; + --ectoplasm-green-30: #b5de00; + --ectoplasm-green-40: #9bc000; + --ectoplasm-green-50: #7f9d00; + --ectoplasm-green-60: #647d00; + --ectoplasm-green-70: #536700; + --ectoplasm-green-80: #3f4f00; + --ectoplasm-green-90: #293300; + --ectoplasm-green-100: #161c00; + --ectoplasm-green: #7f9d00; + --ectoplasm-green-0-rgb: 242, 245, 225; + --ectoplasm-green-5-rgb: 233, 245, 179; + --ectoplasm-green-10-rgb: 218, 242, 107; + --ectoplasm-green-20-rgb: 205, 240, 48; + --ectoplasm-green-30-rgb: 181, 222, 0; + --ectoplasm-green-40-rgb: 155, 192, 0; + --ectoplasm-green-50-rgb: 127, 157, 0; + --ectoplasm-green-60-rgb: 100, 125, 0; + --ectoplasm-green-70-rgb: 83, 103, 0; + --ectoplasm-green-80-rgb: 63, 79, 0; + --ectoplasm-green-90-rgb: 41, 51, 0; + --ectoplasm-green-100-rgb: 22, 28, 0; + --ectoplasm-green-rgb: 127, 157, 0; } .color-scheme.is-ectoplasm { /* Primary */ - // Very Rough: Set all shades to the highlight color from the theme. - // Need a better solution. --color-primary: var( --theme-highlight-color ); --color-primary-rgb: var( --theme-highlight-color-rgb ); - --color-primary-dark: var( --theme-highlight-color ); - --color-primary-dark-rgb: var( --theme-highlight-color-rgb ); - --color-primary-light: var( --theme-highlight-color ); - --color-primary-light-rgb: var( --theme-highlight-color-rgb ); - --color-primary-0: var( --theme-highlight-color ); - --color-primary-0-rgb: var( --theme-highlight-color-rgb ); - --color-primary-5: var( --theme-highlight-color ); - --color-primary-5-rgb: var( --theme-highlight-color-rgb ); - --color-primary-10: var( --theme-highlight-color ); - --color-primary-10-rgb: var( --theme-highlight-color-rgb ); - --color-primary-20: var( --theme-highlight-color ); - --color-primary-20-rgb: var( --theme-highlight-color-rgb ); - --color-primary-30: var( --theme-highlight-color ); - --color-primary-30-rgb: var( --theme-highlight-color-rgb ); - --color-primary-40: var( --theme-highlight-color ); - --color-primary-40-rgb: var( --theme-highlight-color-rgb ); - --color-primary-50: var( --theme-highlight-color ); - --color-primary-50-rgb: var( --theme-highlight-color-rgb ); - --color-primary-60: var( --theme-highlight-color ); - --color-primary-60-rgb: var( --theme-highlight-color-rgb ); - --color-primary-70: var( --theme-highlight-color ); - --color-primary-70-rgb: var( --theme-highlight-color-rgb ); - --color-primary-80: var( --theme-highlight-color ); - --color-primary-80-rgb: var( --theme-highlight-color-rgb ); - --color-primary-90: var( --theme-highlight-color ); - --color-primary-90-rgb: var( --theme-highlight-color-rgb ); - --color-primary-100: var( --theme-highlight-color ); - --color-primary-100-rgb: var( --theme-highlight-color-rgb ); + --color-primary-dark: var( --ectoplasm-green-70 ); + --color-primary-dark-rgb: var( --ectoplasm-green-70-rgb ); + --color-primary-light: var( --ectoplasm-green-30 ); + --color-primary-light-rgb: var( --ectoplasm-green-30-rgb ); + --color-primary-0: var( --ectoplasm-green-0 ); + --color-primary-0-rgb: var( --ectoplasm-green-0-rgb ); + --color-primary-5: var( --ectoplasm-green-5 ); + --color-primary-5-rgb: var( --ectoplasm-green-5-rgb ); + --color-primary-10: var( --ectoplasm-green-10 ); + --color-primary-10-rgb: var( --ectoplasm-green-10-rgb ); + --color-primary-20: var( --ectoplasm-green-20 ); + --color-primary-20-rgb: var( --ectoplasm-green-20-rgb ); + --color-primary-30: var( --ectoplasm-green-30 ); + --color-primary-30-rgb: var( --ectoplasm-green-30-rgb ); + --color-primary-40: var( --ectoplasm-green-40 ); + --color-primary-40-rgb: var( --ectoplasm-green-40-rgb ); + --color-primary-50: var( --ectoplasm-green-50 ); + --color-primary-50-rgb: var( --ectoplasm-green-50-rgb ); + --color-primary-60: var( --ectoplasm-green-60 ); + --color-primary-60-rgb: var( --ectoplasm-green-60-rgb ); + --color-primary-70: var( --ectoplasm-green-70 ); + --color-primary-70-rgb: var( --ectoplasm-green-70-rgb ); + --color-primary-80: var( --ectoplasm-green-80 ); + --color-primary-80-rgb: var( --ectoplasm-green-80-rgb ); + --color-primary-90: var( --ectoplasm-green-90 ); + --color-primary-90-rgb: var( --ectoplasm-green-90-rgb ); + --color-primary-100: var( --ectoplasm-green-100 ); + --color-primary-100-rgb: var( --ectoplasm-green-100-rgb ); /* Accent */ - // Very Rough: Set all shades to the highlight color from the theme. - // Need a better solution. --color-accent: var( --theme-highlight-color ); --color-accent-rgb: var( --theme-highlight-color-rgb ); - --color-accent-dark: var( --theme-highlight-color ); - --color-accent-dark-rgb: var( --theme-highlight-color-rgb ); - --color-accent-light: var( --theme-highlight-color ); - --color-accent-light-rgb: var( --theme-highlight-color-rgb ); - --color-accent-0: var( --theme-highlight-color ); - --color-accent-0-rgb: var( --theme-highlight-color-rgb ); - --color-accent-5: var( --theme-highlight-color ); - --color-accent-5-rgb: var( --theme-highlight-color-rgb ); - --color-accent-10: var( --theme-highlight-color ); - --color-accent-10-rgb: var( --theme-highlight-color-rgb ); - --color-accent-20: var( --theme-highlight-color ); - --color-accent-20-rgb: var( --theme-highlight-color-rgb ); - --color-accent-30: var( --theme-highlight-color ); - --color-accent-30-rgb: var( --theme-highlight-color-rgb ); - --color-accent-40: var( --theme-highlight-color ); - --color-accent-40-rgb: var( --theme-highlight-color-rgb ); - --color-accent-50: var( --theme-highlight-color ); - --color-accent-50-rgb: var( --theme-highlight-color-rgb ); - --color-accent-60: var( --theme-highlight-color ); - --color-accent-60-rgb: var( --theme-highlight-color-rgb ); - --color-accent-70: var( --theme-highlight-color ); - --color-accent-70-rgb: var( --theme-highlight-color-rgb ); - --color-accent-80: var( --theme-highlight-color ); - --color-accent-80-rgb: var( --theme-highlight-color-rgb ); - --color-accent-90: var( --theme-highlight-color ); - --color-accent-90-rgb: var( --theme-highlight-color-rgb ); - --color-accent-100: var( --theme-highlight-color ); - --color-accent-100-rgb: var( --theme-highlight-color-rgb ); + --color-accent-dark: var( --ectoplasm-green-70 ); + --color-accent-dark-rgb: var( --ectoplasm-green-70-rgb ); + --color-accent-light: var( --ectoplasm-green-30 ); + --color-accent-light-rgb: var( --ectoplasm-green-30-rgb ); + --color-accent-0: var( --ectoplasm-green-0 ); + --color-accent-0-rgb: var( --ectoplasm-green-0-rgb ); + --color-accent-5: var( --ectoplasm-green-5 ); + --color-accent-5-rgb: var( --ectoplasm-green-5-rgb ); + --color-accent-10: var( --ectoplasm-green-10 ); + --color-accent-10-rgb: var( --ectoplasm-green-10-rgb ); + --color-accent-20: var( --ectoplasm-green-20 ); + --color-accent-20-rgb: var( --ectoplasm-green-20-rgb ); + --color-accent-30: var( --ectoplasm-green-30 ); + --color-accent-30-rgb: var( --ectoplasm-green-30-rgb ); + --color-accent-40: var( --ectoplasm-green-40 ); + --color-accent-40-rgb: var( --ectoplasm-green-40-rgb ); + --color-accent-50: var( --ectoplasm-green-50 ); + --color-accent-50-rgb: var( --ectoplasm-green-50-rgb ); + --color-accent-60: var( --ectoplasm-green-60 ); + --color-accent-60-rgb: var( --ectoplasm-green-60-rgb ); + --color-accent-70: var( --ectoplasm-green-70 ); + --color-accent-70-rgb: var( --ectoplasm-green-70-rgb ); + --color-accent-80: var( --ectoplasm-green-80 ); + --color-accent-80-rgb: var( --ectoplasm-green-80-rgb ); + --color-accent-90: var( --ectoplasm-green-90 ); + --color-accent-90-rgb: var( --ectoplasm-green-90-rgb ); + --color-accent-100: var( --ectoplasm-green-100 ); + --color-accent-100-rgb: var( --ectoplasm-green-100-rgb ); /* Masterbar */ --color-masterbar-background: var( --theme-base-color ); From 6734fcea36f42844c30ec28e6d1d88fb1e199279 Mon Sep 17 00:00:00 2001 From: Matthew Reishus Date: Thu, 5 Nov 2020 15:22:03 -0600 Subject: [PATCH 05/18] Update SVG colors --- .../color-schemes/color-scheme-thumbnail-ectoplasm.svg | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/client/assets/images/color-schemes/color-scheme-thumbnail-ectoplasm.svg b/client/assets/images/color-schemes/color-scheme-thumbnail-ectoplasm.svg index b3d2e0edbec1e..e311dee454243 100644 --- a/client/assets/images/color-schemes/color-scheme-thumbnail-ectoplasm.svg +++ b/client/assets/images/color-schemes/color-scheme-thumbnail-ectoplasm.svg @@ -3,14 +3,14 @@ - - - + + + - + - + From 1f93bfa479ff8ebf9dc755d5646927b7253e5494 Mon Sep 17 00:00:00 2001 From: Matthew Reishus Date: Thu, 5 Nov 2020 17:26:38 -0600 Subject: [PATCH 06/18] Uncomment new editor colors --- .../src/shared/color-schemes/_ectoplasm.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss index 6d3a654c8a107..672688ea409af 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss @@ -144,12 +144,12 @@ Created this definition in color-studio to generate 0-100 shades: --color-masterbar-item-hover-background: var( --theme-submenu-background-color ); --color-masterbar-item-active-background: var( --theme-submenu-background-color ); - // --color-masterbar-item-new-editor-background: var( --studio-gray-50 ); - // --color-masterbar-item-new-editor-hover-background: var( --studio-gray-60 ); + --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 ); + --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 */ From 0f0b7f584510da62fb0a1eb8b702a9fc7fa153da Mon Sep 17 00:00:00 2001 From: Matthew Reishus Date: Fri, 6 Nov 2020 10:47:39 -0600 Subject: [PATCH 07/18] Change theme variable scope --- .../src/shared/color-schemes/_default.scss | 11 +++++++++++ .../src/shared/color-schemes/_ectoplasm.scss | 8 +++----- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_default.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_default.scss index 24031cab3d881..0967a359f0d57 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_default.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_default.scss @@ -325,4 +325,15 @@ /* WP Admin */ --color-wp-admin-button-background: #008ec2; --color-wp-admin-button-border: #006799; + + /* WP Admin Default Theme */ + --theme-text-color: #ffffff; /* Direct from wp-admin */ + --theme-text-color-rgb: 255, 255, 255; + --theme-base-color: #23282d; /* Direct from wp-admin */ + --theme-base-color-rgb: 35, 40, 45; + --theme-submenu-background-color: #131619; /* darken( $base-color, 7% ) */ + --theme-icon-color: #e1eaf2; /* hsl( hue( $base-color ), 7%, 95% )*/ + --theme-highlight-color: #0073aa; /* Direct from wp-admin */ + --theme-highlight-color-rgb: 0, 115, 170; + --theme-notification-color: #d54e21; /* Direct from wp-admin */ } diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss index 672688ea409af..bb79cd7542735 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss @@ -32,13 +32,13 @@ Created this definition in color-studio to generate 0-100 shades: } */ -// Set up variables for Calypso ectoplasm -:root { +.color-scheme.is-ectoplasm { + /* Variables used in Calypso Ectoplasm */ --theme-text-color: #ffffff; /* Direct from wp-admin */ --theme-text-color-rgb: 255, 255, 255; /* Manual conversion */ --theme-base-color: #523f6d; /* Direct from wp-admin */ --theme-base-color-rgb: 82, 63, 109; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */ - --theme-submenu-background-color: #413256; /* darken( $base-color, 7% ), computed: http://scg.ar-ch.org/ + --theme-submenu-background-color: #413256; /* darken( $base-color, 7% ), computed: http://scg.ar-ch.org/ */ --theme-icon-color: #ece6f6; /* Direct from wp-admin */ --theme-highlight-color: #a3b745; /* Direct from wp-admin */ --theme-highlight-color-rgb: 163, 183, 69; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */ @@ -70,9 +70,7 @@ Created this definition in color-studio to generate 0-100 shades: --ectoplasm-green-90-rgb: 41, 51, 0; --ectoplasm-green-100-rgb: 22, 28, 0; --ectoplasm-green-rgb: 127, 157, 0; -} -.color-scheme.is-ectoplasm { /* Primary */ --color-primary: var( --theme-highlight-color ); --color-primary-rgb: var( --theme-highlight-color-rgb ); From 9e74326a17a1d6f61521c39e781f0c14695108cd Mon Sep 17 00:00:00 2001 From: Matthew Reishus Date: Fri, 6 Nov 2020 11:02:20 -0600 Subject: [PATCH 08/18] Change outer menu text to be brighter --- .../src/shared/color-schemes/_ectoplasm.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss index bb79cd7542735..046d872f61ce2 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss @@ -156,7 +156,7 @@ Created this definition in color-studio to generate 0-100 shades: --color-sidebar-border: var( --theme-submenu-background-color ); --color-sidebar-text: var( --theme-text-color ); --color-sidebar-text-rgb: var( --theme-text-color-rgb ); - --color-sidebar-text-alternative: var( --studio-gray-10 ); + --color-sidebar-text-alternative: var( --theme-text-color ); --color-sidebar-gridicon-fill: var( --studio-gray-0 ); /* Sidebar Selected */ From 6af899b4c5ca926f1ea46ea28e443e34c4faa10c Mon Sep 17 00:00:00 2001 From: Matthew Reishus Date: Fri, 6 Nov 2020 11:04:45 -0600 Subject: [PATCH 09/18] Change notification dot color --- .../src/shared/color-schemes/_ectoplasm.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss index 046d872f61ce2..3a87c5741ae8b 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss @@ -139,6 +139,7 @@ Created this definition in color-studio to generate 0-100 shades: --color-masterbar-background: var( --theme-base-color ); --color-masterbar-border: var( --theme-base-color-rgb ); --color-masterbar-text: var( --studio-white ); + --color-masterbar-unread-dot-background: var( --theme-notification-color ); --color-masterbar-item-hover-background: var( --theme-submenu-background-color ); --color-masterbar-item-active-background: var( --theme-submenu-background-color ); From 9af2c1fcfb950e890cf290c7f896629affb71ed5 Mon Sep 17 00:00:00 2001 From: Matthew Reishus Date: Fri, 6 Nov 2020 11:08:04 -0600 Subject: [PATCH 10/18] Change masterbar border color --- .../src/shared/color-schemes/_ectoplasm.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss index 3a87c5741ae8b..c9a761ffec2d9 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss @@ -137,7 +137,7 @@ Created this definition in color-studio to generate 0-100 shades: /* Masterbar */ --color-masterbar-background: var( --theme-base-color ); - --color-masterbar-border: var( --theme-base-color-rgb ); + --color-masterbar-border: var( --theme-submenu-background-color ); --color-masterbar-text: var( --studio-white ); --color-masterbar-unread-dot-background: var( --theme-notification-color ); From 6f8a24e27458c6562bdf15c8b39392c0f467139d Mon Sep 17 00:00:00 2001 From: Matthew Reishus Date: Fri, 6 Nov 2020 11:28:52 -0600 Subject: [PATCH 11/18] Spaces -> tabs --- .../src/shared/color-schemes/_ectoplasm.scss | 72 +++++++++---------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss index c9a761ffec2d9..36d2e808d76bf 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss @@ -33,43 +33,43 @@ Created this definition in color-studio to generate 0-100 shades: */ .color-scheme.is-ectoplasm { - /* Variables used in Calypso Ectoplasm */ - --theme-text-color: #ffffff; /* Direct from wp-admin */ - --theme-text-color-rgb: 255, 255, 255; /* Manual conversion */ - --theme-base-color: #523f6d; /* Direct from wp-admin */ - --theme-base-color-rgb: 82, 63, 109; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */ - --theme-submenu-background-color: #413256; /* darken( $base-color, 7% ), computed: http://scg.ar-ch.org/ */ - --theme-icon-color: #ece6f6; /* Direct from wp-admin */ - --theme-highlight-color: #a3b745; /* Direct from wp-admin */ - --theme-highlight-color-rgb: 163, 183, 69; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */ - --theme-notification-color: #d46f15; /* Direct from wp-admin */ + /* Variables used in Calypso Ectoplasm */ + --theme-text-color: #ffffff; /* Direct from wp-admin */ + --theme-text-color-rgb: 255, 255, 255; /* Manual conversion */ + --theme-base-color: #523f6d; /* Direct from wp-admin */ + --theme-base-color-rgb: 82, 63, 109; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */ + --theme-submenu-background-color: #413256; /* darken( $base-color, 7% ), computed: http://scg.ar-ch.org/ */ + --theme-icon-color: #ece6f6; /* Direct from wp-admin */ + --theme-highlight-color: #a3b745; /* Direct from wp-admin */ + --theme-highlight-color-rgb: 163, 183, 69; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */ + --theme-notification-color: #d46f15; /* Direct from wp-admin */ - --ectoplasm-green-0: #f2f5e1; - --ectoplasm-green-5: #e9f5b3; - --ectoplasm-green-10: #daf26b; - --ectoplasm-green-20: #cdf030; - --ectoplasm-green-30: #b5de00; - --ectoplasm-green-40: #9bc000; - --ectoplasm-green-50: #7f9d00; - --ectoplasm-green-60: #647d00; - --ectoplasm-green-70: #536700; - --ectoplasm-green-80: #3f4f00; - --ectoplasm-green-90: #293300; - --ectoplasm-green-100: #161c00; - --ectoplasm-green: #7f9d00; - --ectoplasm-green-0-rgb: 242, 245, 225; - --ectoplasm-green-5-rgb: 233, 245, 179; - --ectoplasm-green-10-rgb: 218, 242, 107; - --ectoplasm-green-20-rgb: 205, 240, 48; - --ectoplasm-green-30-rgb: 181, 222, 0; - --ectoplasm-green-40-rgb: 155, 192, 0; - --ectoplasm-green-50-rgb: 127, 157, 0; - --ectoplasm-green-60-rgb: 100, 125, 0; - --ectoplasm-green-70-rgb: 83, 103, 0; - --ectoplasm-green-80-rgb: 63, 79, 0; - --ectoplasm-green-90-rgb: 41, 51, 0; - --ectoplasm-green-100-rgb: 22, 28, 0; - --ectoplasm-green-rgb: 127, 157, 0; + --ectoplasm-green-0: #f2f5e1; + --ectoplasm-green-5: #e9f5b3; + --ectoplasm-green-10: #daf26b; + --ectoplasm-green-20: #cdf030; + --ectoplasm-green-30: #b5de00; + --ectoplasm-green-40: #9bc000; + --ectoplasm-green-50: #7f9d00; + --ectoplasm-green-60: #647d00; + --ectoplasm-green-70: #536700; + --ectoplasm-green-80: #3f4f00; + --ectoplasm-green-90: #293300; + --ectoplasm-green-100: #161c00; + --ectoplasm-green: #7f9d00; + --ectoplasm-green-0-rgb: 242, 245, 225; + --ectoplasm-green-5-rgb: 233, 245, 179; + --ectoplasm-green-10-rgb: 218, 242, 107; + --ectoplasm-green-20-rgb: 205, 240, 48; + --ectoplasm-green-30-rgb: 181, 222, 0; + --ectoplasm-green-40-rgb: 155, 192, 0; + --ectoplasm-green-50-rgb: 127, 157, 0; + --ectoplasm-green-60-rgb: 100, 125, 0; + --ectoplasm-green-70-rgb: 83, 103, 0; + --ectoplasm-green-80-rgb: 63, 79, 0; + --ectoplasm-green-90-rgb: 41, 51, 0; + --ectoplasm-green-100-rgb: 22, 28, 0; + --ectoplasm-green-rgb: 127, 157, 0; /* Primary */ --color-primary: var( --theme-highlight-color ); From 0532c7e7094a6ac68a9a571aedb40e852baf537d Mon Sep 17 00:00:00 2001 From: Matthew Reishus Date: Fri, 6 Nov 2020 11:29:38 -0600 Subject: [PATCH 12/18] Spaces -> tabs --- .../src/shared/color-schemes/_default.scss | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_default.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_default.scss index 0967a359f0d57..44e76e755c275 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_default.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_default.scss @@ -326,14 +326,14 @@ --color-wp-admin-button-background: #008ec2; --color-wp-admin-button-border: #006799; - /* WP Admin Default Theme */ - --theme-text-color: #ffffff; /* Direct from wp-admin */ - --theme-text-color-rgb: 255, 255, 255; - --theme-base-color: #23282d; /* Direct from wp-admin */ - --theme-base-color-rgb: 35, 40, 45; - --theme-submenu-background-color: #131619; /* darken( $base-color, 7% ) */ - --theme-icon-color: #e1eaf2; /* hsl( hue( $base-color ), 7%, 95% )*/ - --theme-highlight-color: #0073aa; /* Direct from wp-admin */ - --theme-highlight-color-rgb: 0, 115, 170; - --theme-notification-color: #d54e21; /* Direct from wp-admin */ + /* WP Admin Default Theme */ + --theme-text-color: #ffffff; /* Direct from wp-admin */ + --theme-text-color-rgb: 255, 255, 255; + --theme-base-color: #23282d; /* Direct from wp-admin */ + --theme-base-color-rgb: 35, 40, 45; + --theme-submenu-background-color: #131619; /* darken( $base-color, 7% ) */ + --theme-icon-color: #e1eaf2; /* hsl( hue( $base-color ), 7%, 95% )*/ + --theme-highlight-color: #0073aa; /* Direct from wp-admin */ + --theme-highlight-color-rgb: 0, 115, 170; + --theme-notification-color: #d54e21; /* Direct from wp-admin */ } From c4f06eb4066ba158d220ba7613de425685eb4c58 Mon Sep 17 00:00:00 2001 From: Matthew Reishus Date: Fri, 6 Nov 2020 15:28:11 -0600 Subject: [PATCH 13/18] Change gridicon fill --- .../src/shared/color-schemes/_ectoplasm.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss index 36d2e808d76bf..b32ec8244a7fb 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss @@ -158,7 +158,7 @@ Created this definition in color-studio to generate 0-100 shades: --color-sidebar-text: var( --theme-text-color ); --color-sidebar-text-rgb: var( --theme-text-color-rgb ); --color-sidebar-text-alternative: var( --theme-text-color ); - --color-sidebar-gridicon-fill: var( --studio-gray-0 ); + --color-sidebar-gridicon-fill: var( --theme-icon-color ); /* Sidebar Selected */ --color-sidebar-menu-selected-background: var( --theme-highlight-color ); From 6d4d5f8fa0094aca366a4ed221985a201dbc822e Mon Sep 17 00:00:00 2001 From: Matthew Reishus Date: Fri, 6 Nov 2020 17:12:16 -0600 Subject: [PATCH 14/18] Add is-nav-unification override --- .../src/shared/color-schemes/_ectoplasm.scss | 105 ++++++++++++++++++ 1 file changed, 105 insertions(+) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss index b32ec8244a7fb..4bdee8618e5b4 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss @@ -170,4 +170,109 @@ Created this definition in color-studio to generate 0-100 shades: --color-sidebar-menu-hover-background: var( --theme-highlight-color ); --color-sidebar-menu-hover-background-rgb: var( --theme-highlight-color-rgb ); --color-sidebar-menu-hover-text: var( --theme-text-color ); + + /* Copy of all settings to reset the nav-unification overrides */ + /* Probably a better solution */ + .is-nav-unification { + /* Primary */ + --color-primary: var( --theme-highlight-color ); + --color-primary-rgb: var( --theme-highlight-color-rgb ); + --color-primary-dark: var( --ectoplasm-green-70 ); + --color-primary-dark-rgb: var( --ectoplasm-green-70-rgb ); + --color-primary-light: var( --ectoplasm-green-30 ); + --color-primary-light-rgb: var( --ectoplasm-green-30-rgb ); + --color-primary-0: var( --ectoplasm-green-0 ); + --color-primary-0-rgb: var( --ectoplasm-green-0-rgb ); + --color-primary-5: var( --ectoplasm-green-5 ); + --color-primary-5-rgb: var( --ectoplasm-green-5-rgb ); + --color-primary-10: var( --ectoplasm-green-10 ); + --color-primary-10-rgb: var( --ectoplasm-green-10-rgb ); + --color-primary-20: var( --ectoplasm-green-20 ); + --color-primary-20-rgb: var( --ectoplasm-green-20-rgb ); + --color-primary-30: var( --ectoplasm-green-30 ); + --color-primary-30-rgb: var( --ectoplasm-green-30-rgb ); + --color-primary-40: var( --ectoplasm-green-40 ); + --color-primary-40-rgb: var( --ectoplasm-green-40-rgb ); + --color-primary-50: var( --ectoplasm-green-50 ); + --color-primary-50-rgb: var( --ectoplasm-green-50-rgb ); + --color-primary-60: var( --ectoplasm-green-60 ); + --color-primary-60-rgb: var( --ectoplasm-green-60-rgb ); + --color-primary-70: var( --ectoplasm-green-70 ); + --color-primary-70-rgb: var( --ectoplasm-green-70-rgb ); + --color-primary-80: var( --ectoplasm-green-80 ); + --color-primary-80-rgb: var( --ectoplasm-green-80-rgb ); + --color-primary-90: var( --ectoplasm-green-90 ); + --color-primary-90-rgb: var( --ectoplasm-green-90-rgb ); + --color-primary-100: var( --ectoplasm-green-100 ); + --color-primary-100-rgb: var( --ectoplasm-green-100-rgb ); + + /* Accent */ + --color-accent: var( --theme-highlight-color ); + --color-accent-rgb: var( --theme-highlight-color-rgb ); + --color-accent-dark: var( --ectoplasm-green-70 ); + --color-accent-dark-rgb: var( --ectoplasm-green-70-rgb ); + --color-accent-light: var( --ectoplasm-green-30 ); + --color-accent-light-rgb: var( --ectoplasm-green-30-rgb ); + --color-accent-0: var( --ectoplasm-green-0 ); + --color-accent-0-rgb: var( --ectoplasm-green-0-rgb ); + --color-accent-5: var( --ectoplasm-green-5 ); + --color-accent-5-rgb: var( --ectoplasm-green-5-rgb ); + --color-accent-10: var( --ectoplasm-green-10 ); + --color-accent-10-rgb: var( --ectoplasm-green-10-rgb ); + --color-accent-20: var( --ectoplasm-green-20 ); + --color-accent-20-rgb: var( --ectoplasm-green-20-rgb ); + --color-accent-30: var( --ectoplasm-green-30 ); + --color-accent-30-rgb: var( --ectoplasm-green-30-rgb ); + --color-accent-40: var( --ectoplasm-green-40 ); + --color-accent-40-rgb: var( --ectoplasm-green-40-rgb ); + --color-accent-50: var( --ectoplasm-green-50 ); + --color-accent-50-rgb: var( --ectoplasm-green-50-rgb ); + --color-accent-60: var( --ectoplasm-green-60 ); + --color-accent-60-rgb: var( --ectoplasm-green-60-rgb ); + --color-accent-70: var( --ectoplasm-green-70 ); + --color-accent-70-rgb: var( --ectoplasm-green-70-rgb ); + --color-accent-80: var( --ectoplasm-green-80 ); + --color-accent-80-rgb: var( --ectoplasm-green-80-rgb ); + --color-accent-90: var( --ectoplasm-green-90 ); + --color-accent-90-rgb: var( --ectoplasm-green-90-rgb ); + --color-accent-100: var( --ectoplasm-green-100 ); + --color-accent-100-rgb: var( --ectoplasm-green-100-rgb ); + + /* Masterbar */ + --color-masterbar-background: var( --theme-base-color ); + --color-masterbar-border: var( --theme-submenu-background-color ); + --color-masterbar-text: var( --studio-white ); + --color-masterbar-unread-dot-background: var( --theme-notification-color ); + + --color-masterbar-item-hover-background: var( --theme-submenu-background-color ); + --color-masterbar-item-active-background: var( --theme-submenu-background-color ); + --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( --theme-base-color ); + --color-sidebar-background-rgb: var( --theme-base-color-rgb ); + --color-sidebar-border: var( --theme-submenu-background-color ); + --color-sidebar-text: var( --theme-text-color ); + --color-sidebar-text-rgb: var( --theme-text-color-rgb ); + --color-sidebar-text-alternative: var( --theme-text-color ); + --color-sidebar-gridicon-fill: var( --theme-icon-color ); + + /* Sidebar Selected */ + --color-sidebar-menu-selected-background: var( --theme-highlight-color ); + --color-sidebar-menu-selected-background-rgb: var( --theme-highlight-color-rgb ); + --color-sidebar-menu-selected-text: var( --theme-text-color ); + --color-sidebar-menu-selected-text-rgb: var( --theme-text-color-rgb ); + + /* Sidebar Hover */ + --color-sidebar-menu-hover-background: var( --theme-highlight-color ); + --color-sidebar-menu-hover-background-rgb: var( --theme-highlight-color-rgb ); + --color-sidebar-menu-hover-text: var( --theme-text-color ); + } + } From b67eb0f4d33ce19a21a732b03314f756945f52f8 Mon Sep 17 00:00:00 2001 From: cpap Date: Mon, 9 Nov 2020 11:44:38 +0200 Subject: [PATCH 15/18] Reformats CSS rules --- .../src/shared/color-schemes/_ectoplasm.scss | 109 +----------------- 1 file changed, 2 insertions(+), 107 deletions(-) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss index 4bdee8618e5b4..f537bbc1bc4b8 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss @@ -32,7 +32,8 @@ Created this definition in color-studio to generate 0-100 shades: } */ -.color-scheme.is-ectoplasm { +.color-scheme.is-ectoplasm, +.color-scheme.is-ectoplasm .is-nav-unification { /* Variables used in Calypso Ectoplasm */ --theme-text-color: #ffffff; /* Direct from wp-admin */ --theme-text-color-rgb: 255, 255, 255; /* Manual conversion */ @@ -150,7 +151,6 @@ Created this definition in color-studio to generate 0-100 shades: --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( --theme-base-color ); --color-sidebar-background-rgb: var( --theme-base-color-rgb ); @@ -170,109 +170,4 @@ Created this definition in color-studio to generate 0-100 shades: --color-sidebar-menu-hover-background: var( --theme-highlight-color ); --color-sidebar-menu-hover-background-rgb: var( --theme-highlight-color-rgb ); --color-sidebar-menu-hover-text: var( --theme-text-color ); - - /* Copy of all settings to reset the nav-unification overrides */ - /* Probably a better solution */ - .is-nav-unification { - /* Primary */ - --color-primary: var( --theme-highlight-color ); - --color-primary-rgb: var( --theme-highlight-color-rgb ); - --color-primary-dark: var( --ectoplasm-green-70 ); - --color-primary-dark-rgb: var( --ectoplasm-green-70-rgb ); - --color-primary-light: var( --ectoplasm-green-30 ); - --color-primary-light-rgb: var( --ectoplasm-green-30-rgb ); - --color-primary-0: var( --ectoplasm-green-0 ); - --color-primary-0-rgb: var( --ectoplasm-green-0-rgb ); - --color-primary-5: var( --ectoplasm-green-5 ); - --color-primary-5-rgb: var( --ectoplasm-green-5-rgb ); - --color-primary-10: var( --ectoplasm-green-10 ); - --color-primary-10-rgb: var( --ectoplasm-green-10-rgb ); - --color-primary-20: var( --ectoplasm-green-20 ); - --color-primary-20-rgb: var( --ectoplasm-green-20-rgb ); - --color-primary-30: var( --ectoplasm-green-30 ); - --color-primary-30-rgb: var( --ectoplasm-green-30-rgb ); - --color-primary-40: var( --ectoplasm-green-40 ); - --color-primary-40-rgb: var( --ectoplasm-green-40-rgb ); - --color-primary-50: var( --ectoplasm-green-50 ); - --color-primary-50-rgb: var( --ectoplasm-green-50-rgb ); - --color-primary-60: var( --ectoplasm-green-60 ); - --color-primary-60-rgb: var( --ectoplasm-green-60-rgb ); - --color-primary-70: var( --ectoplasm-green-70 ); - --color-primary-70-rgb: var( --ectoplasm-green-70-rgb ); - --color-primary-80: var( --ectoplasm-green-80 ); - --color-primary-80-rgb: var( --ectoplasm-green-80-rgb ); - --color-primary-90: var( --ectoplasm-green-90 ); - --color-primary-90-rgb: var( --ectoplasm-green-90-rgb ); - --color-primary-100: var( --ectoplasm-green-100 ); - --color-primary-100-rgb: var( --ectoplasm-green-100-rgb ); - - /* Accent */ - --color-accent: var( --theme-highlight-color ); - --color-accent-rgb: var( --theme-highlight-color-rgb ); - --color-accent-dark: var( --ectoplasm-green-70 ); - --color-accent-dark-rgb: var( --ectoplasm-green-70-rgb ); - --color-accent-light: var( --ectoplasm-green-30 ); - --color-accent-light-rgb: var( --ectoplasm-green-30-rgb ); - --color-accent-0: var( --ectoplasm-green-0 ); - --color-accent-0-rgb: var( --ectoplasm-green-0-rgb ); - --color-accent-5: var( --ectoplasm-green-5 ); - --color-accent-5-rgb: var( --ectoplasm-green-5-rgb ); - --color-accent-10: var( --ectoplasm-green-10 ); - --color-accent-10-rgb: var( --ectoplasm-green-10-rgb ); - --color-accent-20: var( --ectoplasm-green-20 ); - --color-accent-20-rgb: var( --ectoplasm-green-20-rgb ); - --color-accent-30: var( --ectoplasm-green-30 ); - --color-accent-30-rgb: var( --ectoplasm-green-30-rgb ); - --color-accent-40: var( --ectoplasm-green-40 ); - --color-accent-40-rgb: var( --ectoplasm-green-40-rgb ); - --color-accent-50: var( --ectoplasm-green-50 ); - --color-accent-50-rgb: var( --ectoplasm-green-50-rgb ); - --color-accent-60: var( --ectoplasm-green-60 ); - --color-accent-60-rgb: var( --ectoplasm-green-60-rgb ); - --color-accent-70: var( --ectoplasm-green-70 ); - --color-accent-70-rgb: var( --ectoplasm-green-70-rgb ); - --color-accent-80: var( --ectoplasm-green-80 ); - --color-accent-80-rgb: var( --ectoplasm-green-80-rgb ); - --color-accent-90: var( --ectoplasm-green-90 ); - --color-accent-90-rgb: var( --ectoplasm-green-90-rgb ); - --color-accent-100: var( --ectoplasm-green-100 ); - --color-accent-100-rgb: var( --ectoplasm-green-100-rgb ); - - /* Masterbar */ - --color-masterbar-background: var( --theme-base-color ); - --color-masterbar-border: var( --theme-submenu-background-color ); - --color-masterbar-text: var( --studio-white ); - --color-masterbar-unread-dot-background: var( --theme-notification-color ); - - --color-masterbar-item-hover-background: var( --theme-submenu-background-color ); - --color-masterbar-item-active-background: var( --theme-submenu-background-color ); - --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( --theme-base-color ); - --color-sidebar-background-rgb: var( --theme-base-color-rgb ); - --color-sidebar-border: var( --theme-submenu-background-color ); - --color-sidebar-text: var( --theme-text-color ); - --color-sidebar-text-rgb: var( --theme-text-color-rgb ); - --color-sidebar-text-alternative: var( --theme-text-color ); - --color-sidebar-gridicon-fill: var( --theme-icon-color ); - - /* Sidebar Selected */ - --color-sidebar-menu-selected-background: var( --theme-highlight-color ); - --color-sidebar-menu-selected-background-rgb: var( --theme-highlight-color-rgb ); - --color-sidebar-menu-selected-text: var( --theme-text-color ); - --color-sidebar-menu-selected-text-rgb: var( --theme-text-color-rgb ); - - /* Sidebar Hover */ - --color-sidebar-menu-hover-background: var( --theme-highlight-color ); - --color-sidebar-menu-hover-background-rgb: var( --theme-highlight-color-rgb ); - --color-sidebar-menu-hover-text: var( --theme-text-color ); - } - } From 702d77b7bdde1c629cce8b3c33b43142f9da2a27 Mon Sep 17 00:00:00 2001 From: Matthew Reishus Date: Mon, 9 Nov 2020 12:57:16 -0600 Subject: [PATCH 16/18] Fix sidebar colors under nav unification --- .../src/shared/color-schemes/_ectoplasm.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss index f537bbc1bc4b8..4c7191827154a 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss @@ -170,4 +170,8 @@ Created this definition in color-studio to generate 0-100 shades: --color-sidebar-menu-hover-background: var( --theme-highlight-color ); --color-sidebar-menu-hover-background-rgb: var( --theme-highlight-color-rgb ); --color-sidebar-menu-hover-text: var( --theme-text-color ); + + /* Sidebar Hover - Nav unification */ + --color-sidebar-menu-hover-background: var( --theme-highlight-color ); + --color-sidebar-menu-hover: var( --theme-text-color ); } From 765d4de7290fd46054dfae6b8afaee7b8e213a5f Mon Sep 17 00:00:00 2001 From: Matthew Reishus Date: Mon, 9 Nov 2020 14:16:09 -0600 Subject: [PATCH 17/18] Update for nav unification submenu --- .../src/shared/color-schemes/_ectoplasm.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss index 4c7191827154a..8e920aa16721a 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss @@ -39,6 +39,7 @@ Created this definition in color-studio to generate 0-100 shades: --theme-text-color-rgb: 255, 255, 255; /* Manual conversion */ --theme-base-color: #523f6d; /* Direct from wp-admin */ --theme-base-color-rgb: 82, 63, 109; /* Manually computed https://www.rapidtables.com/convert/color/hex-to-rgb.html */ + --theme-submenu-text-color: #cbc5d3; /* mix( $base-color, $text-color, 30% ) */ --theme-submenu-background-color: #413256; /* darken( $base-color, 7% ), computed: http://scg.ar-ch.org/ */ --theme-icon-color: #ece6f6; /* Direct from wp-admin */ --theme-highlight-color: #a3b745; /* Direct from wp-admin */ @@ -174,4 +175,10 @@ Created this definition in color-studio to generate 0-100 shades: /* Sidebar Hover - Nav unification */ --color-sidebar-menu-hover-background: var( --theme-highlight-color ); --color-sidebar-menu-hover: var( --theme-text-color ); + + /* Sidebar Submenu - Nav Unification */ + --color-sidebar-submenu-background: var( --theme-submenu-background-color ); + --color-sidebar-submenu-text: var( --theme-submenu-text-color ); + --color-sidebar-submenu-hover-background: transparent; + --color-sidebar-submenu-hover-text: var( --theme-highlight-color ); } From 37404c73144500d45643cb716529578744c063af Mon Sep 17 00:00:00 2001 From: Matthew Reishus Date: Mon, 9 Nov 2020 15:33:58 -0600 Subject: [PATCH 18/18] Fix hover over headings --- .../src/shared/color-schemes/_ectoplasm.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss index 8e920aa16721a..f93141a0d204c 100644 --- a/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss +++ b/packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss @@ -175,6 +175,7 @@ Created this definition in color-studio to generate 0-100 shades: /* Sidebar Hover - Nav unification */ --color-sidebar-menu-hover-background: var( --theme-highlight-color ); --color-sidebar-menu-hover: var( --theme-text-color ); + --color-sidebar-menu-hover-heading-background: var( --theme-highlight-color ); /* Sidebar Submenu - Nav Unification */ --color-sidebar-submenu-background: var( --theme-submenu-background-color );