Skip to content

Commit

Permalink
Add ectoplasm color scheme (Method A) (#47122)
Browse files Browse the repository at this point in the history 
* Add ectoplasm color scheme

- From wp-admin

Co-authored-by: cpap <[email protected]>
  • Loading branch information
@mreishus
mreishus and cpap authored Nov 9, 2020
1 parent 3d46a9a commit 232ea97
Show file tree
Hide file tree
Showing 6 changed files with 223 additions and 0 deletions.
16 changes: 16 additions & 0 deletions client/assets/images/color-schemes/color-scheme-thumbnail-ectoplasm.svg
View file
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
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
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
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
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 */
}
185 changes: 185 additions & 0 deletions packages/calypso-color-schemes/src/shared/color-schemes/_ectoplasm.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
/*
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,
.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 */
--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 */
--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 );

/* 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 );
--color-sidebar-submenu-text: var( --theme-submenu-text-color );
--color-sidebar-submenu-hover-background: transparent;
--color-sidebar-submenu-hover-text: var( --theme-highlight-color );
}

0 comments on commit 232ea97

Please sign in to comment.