Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ectoplasm color scheme (Method A) #47122

Merged
merged 21 commits into from
Nov 9, 2020
Merged

Add ectoplasm color scheme (Method A) #47122

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
e16e85e
Add ectoplasm color scheme
mreishus Nov 3, 2020
cb32011
Add translate context
mreishus Nov 3, 2020
d748b64
Alter ectoplasm to use the wp-admin colors directly
mreishus Nov 4, 2020
51136c1
Include 0-100 shades
mreishus Nov 5, 2020
6734fce
Update SVG colors
mreishus Nov 5, 2020
1f93bfa
Uncomment new editor colors
mreishus Nov 5, 2020
63ed93a
Merge branch 'master' into add/color-scheme-ectoplasm-alt
mreishus Nov 6, 2020
0f0b7f5
Change theme variable scope
mreishus Nov 6, 2020
9e74326
Change outer menu text to be brighter
mreishus Nov 6, 2020
6af899b
Change notification dot color
mreishus Nov 6, 2020
9af2c1f
Change masterbar border color
mreishus Nov 6, 2020
6f8a24e
Spaces -> tabs
mreishus Nov 6, 2020
0532c7e
Spaces -> tabs
mreishus Nov 6, 2020
c4f06eb
Change gridicon fill
mreishus Nov 6, 2020
6d4d5f8
Add is-nav-unification override
mreishus Nov 6, 2020
b67eb0f
Reformats CSS rules
Nov 9, 2020
e190339
Merge branch 'master' into add/color-scheme-ectoplasm-alt
mreishus Nov 9, 2020
702d77b
Fix sidebar colors under nav unification
mreishus Nov 9, 2020
a130cae
Merge branch 'master' into add/color-scheme-ectoplasm-alt
mreishus Nov 9, 2020
765d4de
Update for nav unification submenu
mreishus Nov 9, 2020
37404c7
Fix hover over headings
mreishus Nov 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions client/assets/images/color-schemes/color-scheme-thumbnail-ectoplasm.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions client/blocks/color-scheme-picker/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 !!
Expand Down Expand Up @@ -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,
},
},
] );
}
1 change: 1 addition & 0 deletions client/state/preferences/schema.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export const remoteValuesSchema = {
'classic-blue',
'classic-bright',
'contrast',
'ectoplasm',
'midnight',
'nightfall',
'ocean',
Expand Down
1 change: 1 addition & 0 deletions packages/calypso-color-schemes/src/calypso-color-schemes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
11 changes: 11 additions & 0 deletions packages/calypso-color-schemes/src/shared/color-schemes/_default.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
}
278 changes: 278 additions & 0 deletions packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,278 @@
/*
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;

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
]
}
}
*/

.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 */

--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 );
--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 );

/* 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 );
}

}