General: update colors to match upcoming WP 5.7 color changes (#18916)

See https://core.trac.wordpress.org/ticket/49999
Automattic · Feb 25, 2021 · 12c1ec9 · 12c1ec9
1 parent 3eaa2c3
commit 12c1ec9
Show file tree

Hide file tree

Showing 74 changed files with 217 additions and 217 deletions.
diff --git a/projects/packages/jitm/src/css/jetpack-admin-jitm.scss b/projects/packages/jitm/src/css/jetpack-admin-jitm.scss
@@ -26,8 +26,8 @@
 }
 
 // New JITMS - modified calypso banner styles
-$blue-grey-light:        #f3f5f6;
-$blue-medium-dark:       #0071a1;
+$blue-grey-light:        #f6f7f7;
+$blue-medium-dark:       #2271b1;
 
 .jitm-button {
 	background: $blue-grey-light;
@@ -52,9 +52,9 @@ $blue-medium-dark:       #0071a1;
 	appearance: none;
 	text-align: center;
 	min-width: 90px;
-	
+
 	&:hover {
-		background: #f1f1f1;
+		background: #f0f0f1;
 		border-color: $blue-grey-dark;
 		color: $blue-grey-dark;
 	}

diff --git a/projects/plugins/beta/admin/admin.css b/projects/plugins/beta/admin/admin.css
@@ -114,13 +114,13 @@ html {
 }
 
 .dops-card-title {
-	background-color: #f9f9f9;
+	background-color: #f6f7f7;
 	color: black;
 	font-family: Helvetica, Arial, sans-serif;
 	font-size: 12px;
 	font-weight: normal;
 	text-transform: uppercase;
-	border-bottom: 1px solid #dddddd;
+	border-bottom: 1px solid #dcdcde;
 	padding: 10px 16px;
 	margin: 0;
 }
@@ -132,14 +132,14 @@ html {
 }
 
 .dops-card-title .dops-card-meta {
-	color: #aaaaaa;
+	color: #a7aaad;
 	float: right;
 }
 
 .dops-card-section {
 	font-size: 14px;
 	padding: 16px;
-	border-bottom: 1px solid #dddddd;
+	border-bottom: 1px solid #dcdcde;
 }
 
 .dops-card-section:after {
@@ -197,7 +197,7 @@ html {
 }
 
 .dops-card-footer {
-	background: #f9f9f9;
+	background: #f6f7f7;
 	padding: 15px 20px;
 }
 
@@ -548,7 +548,7 @@ button.dops-foldable-card__action {
 .dops-foldable-card__header-text {
 	font-size: 1.125rem;
 	width: 100%;
-	color: #23282d;
+	color: #1d2327;
 }
 
 .dops-foldable-card__header-text small {

diff --git a/projects/plugins/jetpack/_inc/client/at-a-glance/style.scss b/projects/plugins/jetpack/_inc/client/at-a-glance/style.scss
@@ -223,14 +223,14 @@
 	&.is-current,
 	&:visited.is-current,
 	&:focus.is-current {
-		color: #23282d;
+		color: #1d2327;
 		text-decoration: none;
 	}
 }
 
 .jp-at-a-glance__stats-view-link:focus {
 	outline: 0;
-	box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
+	box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(30, 140, 190, 0.8);
 
 }
 

diff --git a/projects/plugins/jetpack/_inc/client/components/about-page/style.scss b/projects/plugins/jetpack/_inc/client/components/about-page/style.scss
@@ -1,5 +1,5 @@
-$color__border: #e5e5e5;
-$color__back-link: #6c7781;
+$color__border: #dcdcde;
+$color__back-link: #787c82;
 
 .jetpack-about__link-back,
 .jetpack-about__main,

diff --git a/projects/plugins/jetpack/_inc/client/components/button/style.scss b/projects/plugins/jetpack/_inc/client/components/button/style.scss
@@ -29,7 +29,7 @@
 	appearance: none;
 
 	&:hover {
-		background: #f1f1f1;
+		background: #f0f0f1;
 		border-color: $blue-grey-dark;
 		color: $blue-grey-dark;
 	}

diff --git a/projects/plugins/jetpack/_inc/client/components/card/style.scss b/projects/plugins/jetpack/_inc/client/components/card/style.scss
@@ -3,10 +3,10 @@
 @import '../../scss/calypso-colors';
 @import '../../scss/functions/rem';
 
-$title: #f9f9f9;
-$meta: #AAAAAA;
-$border: #DDDDDD;
-$section-border: #DDDDDD;
+$title: #f6f7f7;
+$meta: #a7aaad;
+$border: #dcdcde;
+$section-border: #dcdcde;
 
 /* Card */
 

diff --git a/projects/plugins/jetpack/_inc/client/components/form/style.scss b/projects/plugins/jetpack/_inc/client/components/form/style.scss
@@ -18,7 +18,7 @@ input[type=radio] + span {
 .dops-form-section-title {
 	font-weight: bold;
 	color: #333;
-	border-bottom: 1px solid #DDD;
+	border-bottom: 1px solid #dcdcde;
 	padding-bottom: 3px;
 	margin-bottom: 5px;
 	margin-top: 15px;
@@ -93,7 +93,7 @@ input[type=radio] + span {
 
 .dops-form-errormessage {
 	border: 1px solid #dd3d36;
-	color: #a00;
+	color: #d63638;
 	display: block;
 	margin: 5px 0 0 0;
 	padding: 5px;
@@ -123,7 +123,7 @@ input[type=radio] + span {
 			padding: 10px 12px;
 			margin: 0;
 		}
-		
+
 		&.floating--floated {
 			color: #333;
 			z-index: 0;
@@ -149,8 +149,8 @@ input[type=radio] + span {
 }
 
 .dops-form-actionbar {
-	background: #f9f9f9;
-	color: #aaa;
+	background: #f6f7f7;
+	color: #a7aaad;
 	padding: 15px 20px 15px 20px;
 }
 

diff --git a/projects/plugins/jetpack/_inc/client/components/masthead/style.scss b/projects/plugins/jetpack/_inc/client/components/masthead/style.scss
@@ -80,7 +80,7 @@
 }
 
 #sandbox-domain-badge {
-	background: #d54e21;
+	background: #d63638;
 	text-transform: uppercase;
 	letter-spacing: 0.2em;
 	text-shadow: none;

diff --git a/projects/plugins/jetpack/_inc/client/components/popover/docs/example.jsx b/projects/plugins/jetpack/_inc/client/components/popover/docs/example.jsx
@@ -186,8 +186,8 @@ const Popovers = createReactClass( {
 						lineHeight: `${ width / 3 }px`,
 						textAlign: 'center',
 						float: 'left',
-						backgroundColor: '#eee',
-						border: '1px solid #ddd',
+						backgroundColor: '#f0f0f1',
+						border: '1px solid #dcdcde',
 						boxSixing: 'border-box',
 					} }
 					key={ `rubic-${ i }` }

diff --git a/projects/plugins/jetpack/_inc/client/dashboard-widget/style.scss b/projects/plugins/jetpack/_inc/client/dashboard-widget/style.scss
@@ -62,7 +62,7 @@
 			}
 
 			#stats-info {
-				border-top: 1px solid #dfdfdf;
+				border-top: 1px solid #dcdcde;
 				margin: 7px -10px 0 -10px;
 				padding: 10px;
 				background: #fcfcfc;
@@ -71,7 +71,7 @@
 				border-radius: 0 0 2px 2px;
 
 				div#active {
-					border-top: 1px solid #dfdfdf;
+					border-top: 1px solid #dcdcde;
 					margin: 0 -10px;
 					padding: 10px 10px 0 10px;
 					-moz-box-shadow:inset 0 1px 0 #fff;
@@ -132,7 +132,7 @@
 	}
 
 	.wpcom-connect {
-		background: #fafafa;
+		background: #f6f7f7;
 		text-align: center;
 
 		.jp-emblem {
@@ -192,7 +192,7 @@
 
 		&:focus {
 			box-shadow: inset 0 1px 0 lighten( $green-primary, 10% ),
-			0 0 0 1px #5b9dd9,
+			0 0 0 1px #4f94d4,
 			0 0 2px 1px rgba( 30, 140, 190, .8 );
 		}
 
@@ -201,7 +201,7 @@
 			border-color: darken( $green-primary, 15% );
 			color: $white;
 			box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
-			0 0 0 1px #5b9dd9,
+			0 0 0 1px #4f94d4,
 			0 0 2px 1px rgba( 30, 140, 190, .8 );
 		}
 
@@ -217,7 +217,7 @@
 	}
 
 	footer {
-		background: #fafafa;
+		background: #f6f7f7;
 		padding: .75em .75em 0 .75em;
 		overflow: hidden;
 		border-top: 1px solid #ccc;

diff --git a/projects/plugins/jetpack/_inc/client/scss/calypso-colors.scss b/projects/plugins/jetpack/_inc/client/scss/calypso-colors.scss
@@ -1,12 +1,12 @@
 // Blues
 $blue-wordpress:         #0087be;
 $blue-light:             #78dcfa;
-$blue-medium:            #007cba;
+$blue-medium:            #3582c4;
 $blue-dark:              #005082;
-$blue-medium-dark:       #0071a1;
-$blue-grey-light:        #f3f5f6;
-$blue-grey-dark:         #016087;
-$light-gray-700:         #ccd0d4;
+$blue-medium-dark:       #2271b1;
+$blue-grey-light:        #f6f7f7;
+$blue-grey-dark:         #0a4b78;
+$light-gray-700:         #c3c4c7;
 
 
 // Grays
@@ -42,7 +42,7 @@ $gray-darken-30:  darken( $gray, 30% );  // #3d596d
 
 // Oranges
 $orange-jazzy:           #f0821e;
-$orange-fire:            #d54e21;
+$orange-fire:            #d63638;
 
 // Alerts
 $alert-yellow:           #f0b849;

diff --git a/projects/plugins/jetpack/_inc/client/scss/variables/_colors.scss b/projects/plugins/jetpack/_inc/client/scss/variables/_colors.scss
@@ -7,7 +7,7 @@
 // Primary Accent (Blues)
 $blue-wordpress: #0087be;
 $blue-light: #78dcfa;
-$blue-medium: #007cba;
+$blue-medium: #3582c4;
 $blue-dark: #005082;
 
 // Grays
@@ -45,7 +45,7 @@ $color-plan-dark: #007117; // $studio-jetpack-green-60
 
 // Secondary Accent (Oranges)
 $orange-jazzy: #f0821e;
-$orange-fire: #d54e21;
+$orange-fire: #d63638;
 
 // Alerts
 $alert-yellow: #f0b849;
@@ -107,6 +107,6 @@ $green-dark: #008b1d;
 // full color list here: http://codepen.io/hugobaeta/full/RNOzoV/
 // ==========================================================================
 
-$wpui-gray-light: #f5f5f5;
-$wpui-dark-medium-gray: #555d66;
-$wpui-header-dark: #23282d;
+$wpui-gray-light: #f6f7f7;
+$wpui-dark-medium-gray: #50575e;
+$wpui-header-dark: #1d2327;
diff --git a/projects/plugins/jetpack/_inc/lib/debugger/class-jetpack-debugger.php b/projects/plugins/jetpack/_inc/lib/debugger/class-jetpack-debugger.php
@@ -316,10 +316,10 @@ public static function jetpack_debug_admin_head() {
 			}
 
 			.formbox input[type="text"], .formbox input[type="email"], .formbox input[type="url"], .formbox textarea, #debug_info_div {
-				border: 1px solid #e5e5e5;
+				border: 1px solid #dcdcde;
 				border-radius: 11px;
 				box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
-				color: #666;
+				color: #646970;
 				font-size: 14px;
 				padding: 10px;
 				width: 97%;
@@ -339,7 +339,7 @@ public static function jetpack_debug_admin_head() {
 				height: auto !important;
 				margin: 0 0 2em 10px !important;
 				padding: 8px 16px !important;
-				background-color: #ddd;
+				background-color: #dcdcde;
 				border: 1px solid rgba(0,0,0,0.05);
 				border-top-color: rgba(255,255,255,0.1);
 				border-bottom-color: rgba(0,0,0,0.15);

diff --git a/projects/plugins/jetpack/class.jetpack-gutenberg.php b/projects/plugins/jetpack/class.jetpack-gutenberg.php
@@ -1008,17 +1008,17 @@ public static function notice( $message, $status = 'info', $classes = '' ) {
 		$color = '';
 		switch ( $status ) {
 			case 'success':
-				$color = '#46b450';
+				$color = '#00a32a';
 				break;
 			case 'warning':
-				$color = '#ffb900';
+				$color = '#dba617';
 				break;
 			case 'error':
-				$color = '#dc3232';
+				$color = '#d63638';
 				break;
 			case 'info':
 			default:
-				$color = '#00a0d2';
+				$color = '#72aee6';
 				break;
 		}
 

diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/editor.scss b/projects/plugins/jetpack/extensions/blocks/contact-form/editor.scss
@@ -154,7 +154,7 @@ input.components-text-control__input {
 	}
 	input.components-text-control__input,
 	textarea.components-textarea-control__input {
-		color: #72777c;
+		color: #787c82;
 		padding: 12px 8px;
 		border-color: rgba( 0, 0, 0, 0.4 );
 		box-shadow: unset;

diff --git a/projects/plugins/jetpack/extensions/blocks/revue/editor.scss b/projects/plugins/jetpack/extensions/blocks/revue/editor.scss
@@ -12,6 +12,6 @@
 	}
 
 	.components-text-control__input {
-		color: #72777c;
+		color: #787c82;
 	}
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/revue/view.scss b/projects/plugins/jetpack/extensions/blocks/revue/view.scss
@@ -29,7 +29,7 @@
 	}
 
 	.required {
-		color: #aaaaaa;
+		color: #a7aaad;
 		font-weight: normal;
 	}
 }

diff --git a/...ects/plugins/jetpack/extensions/blocks/social-previews/upgrade-illustration.svg b/...ects/plugins/jetpack/extensions/blocks/social-previews/upgrade-illustration.svg
diff --git a/projects/plugins/jetpack/extensions/blocks/story/editor.scss b/projects/plugins/jetpack/extensions/blocks/story/editor.scss
@@ -38,13 +38,13 @@
 		button {
 			width: 36px !important;
 			height: 36px !important;
-			color: #555d66;
-			border: 1px solid #555d66;
+			color: #50575e;
+			border: 1px solid #50575e;
 			outline: 0;
 			background-color: transparent;
 
 			&:hover {
-				border: 1px solid #555d66;
+				border: 1px solid #50575e;
 				background-color: transparent;
 				i {
 					color: rgb(51, 129, 184);