From b63bc26e51a72768b868bf6921943849049286ce Mon Sep 17 00:00:00 2001
From: Jeremy Herve <jeremy@jeremy.hu>
Date: Mon, 3 Aug 2020 13:54:31 +0200
Subject: [PATCH] [not verified] Update Gutenberg colors

Following these changes:
- https://github.com/WordPress/gutenberg/pull/23454
- https://github.com/WordPress/gutenberg/pull/23648
- https://github.com/WordPress/gutenberg/pull/23048
---
 extensions/blocks/contact-form/editor.scss       |  2 +-
 extensions/blocks/donations/editor.scss          |  8 ++++----
 extensions/blocks/gif/editor.scss                |  6 +++---
 extensions/blocks/gif/style.scss                 |  2 +-
 extensions/blocks/map/add-point/style.scss       |  2 +-
 extensions/blocks/map/style.scss                 |  2 +-
 extensions/blocks/markdown/editor.scss           |  8 ++++----
 extensions/blocks/podcast-player/style.scss      |  2 +-
 extensions/blocks/publicize/editor.scss          |  4 ++--
 extensions/blocks/rating-star/style.scss         |  2 +-
 extensions/blocks/recurring-payments/editor.scss |  4 ++--
 extensions/blocks/seo/editor.scss                |  2 +-
 extensions/blocks/slideshow/editor.scss          |  2 +-
 extensions/blocks/story/editor.scss              |  2 +-
 extensions/blocks/tiled-gallery/editor.scss      | 12 ++++++------
 extensions/blocks/wordads/editor.scss            |  4 ++--
 extensions/shared/components/style.scss          |  2 +-
 extensions/shared/external-media/editor.scss     | 14 +++++++-------
 18 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/extensions/blocks/contact-form/editor.scss b/extensions/blocks/contact-form/editor.scss
index 8f419c7049bf1..48d53f39cc42d 100644
--- a/extensions/blocks/contact-form/editor.scss
+++ b/extensions/blocks/contact-form/editor.scss
@@ -192,7 +192,7 @@ input.components-text-control__input {
 
 	// TODO: make this a class, @enej
 	[data-type='jetpack/field-select'] & {
-		border: 1px solid $dark-gray-150;
+		border: 1px solid $gray-200;
 		border-radius: 4px;
 		padding: 4px;
 	}
diff --git a/extensions/blocks/donations/editor.scss b/extensions/blocks/donations/editor.scss
index c56a4d3611770..dc05b8c9e39ea 100644
--- a/extensions/blocks/donations/editor.scss
+++ b/extensions/blocks/donations/editor.scss
@@ -19,7 +19,7 @@
 				border-radius: 0;
 				border-left: 1px solid $light-gray-700;
 				background-color: $white;
-				color: $dark-gray-800;
+				color: $gray-900;
 				box-shadow: none;
 
 				&:first-child {
@@ -28,14 +28,14 @@
 
 				// Complex selector needed to override specificity.
 				&:not(:disabled):not([aria-disabled=true]):not(.is-secondary):not(.is-primary):not(.is-tertiary):not(.is-link):hover {
-					background-color: $light-gray-100;
+					background-color: $white;
 					box-shadow: none;
 				}
 
 				// Complex selector needed to override specificity.
 				&.is-active,
 				&.is-active:not(:disabled):not([aria-disabled=true]):not(.is-secondary):not(.is-primary):not(.is-tertiary):not(.is-link):hover {
-					background-color: $blue-wordpress-700;
+					background-color: var(--wp-admin-theme-color);
 					box-shadow: none;
 					color: $white;
 				}
@@ -58,7 +58,7 @@
 
 		.donations__amount .wp-block-button__link {
 			background-color: $white;
-			color: $dark-gray-800;
+			color: $gray-900;
 			border: 1px solid $light-gray-700;
 			cursor: text;
 
diff --git a/extensions/blocks/gif/editor.scss b/extensions/blocks/gif/editor.scss
index 22521b44dd90e..654fd7d87c2c5 100644
--- a/extensions/blocks/gif/editor.scss
+++ b/extensions/blocks/gif/editor.scss
@@ -60,10 +60,10 @@
 		padding-bottom: calc( 100% / 10 - 4px );
 		width: calc( 100% / 10 - 4px );
 		&:hover {
-			box-shadow: 0 0 0 1px $dark-gray-500;
+			box-shadow: 0 0 0 1px $gray-600;
 		}
 		&:focus {
-			box-shadow: 0 0 0 2px $blue-medium-500;
+			box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
 			outline: 0;
 		}
 	}
@@ -75,6 +75,6 @@
 		max-width: 200px;
 	}
 	svg path {
-		fill: $dark-gray-150;
+		fill: $gray-200;
 	}
 }
diff --git a/extensions/blocks/gif/style.scss b/extensions/blocks/gif/style.scss
index 1a1d0024bc6b1..b1d9ec88b8c60 100644
--- a/extensions/blocks/gif/style.scss
+++ b/extensions/blocks/gif/style.scss
@@ -19,7 +19,7 @@
 	.wp-block-jetpack-gif-caption {
 		margin-top: 0.5em;
 		margin-bottom: 1em;
-		color: $dark-gray-500;
+		color: $gray-600;
 		text-align: center;
 	}
 	.wp-block-jetpack-gif-wrapper {
diff --git a/extensions/blocks/map/add-point/style.scss b/extensions/blocks/map/add-point/style.scss
index ef7145f7f04da..dadcbb8fbece5 100644
--- a/extensions/blocks/map/add-point/style.scss
+++ b/extensions/blocks/map/add-point/style.scss
@@ -41,6 +41,6 @@
 	box-shadow: none;
 	float: right;
 	path {
-		color: $dark-gray-150;
+		color: $gray-200;
 	}
 }
diff --git a/extensions/blocks/map/style.scss b/extensions/blocks/map/style.scss
index 953e48ee16e04..62ff4e5fa5d21 100644
--- a/extensions/blocks/map/style.scss
+++ b/extensions/blocks/map/style.scss
@@ -4,7 +4,7 @@
 	.wp-block-jetpack-map__gm-container {
 		width: 100%;
 		overflow: hidden;
-		background: $light-gray-500;
+		background: $gray-200;
 		min-height: 400px;
 		text-align: left;
 	}
diff --git a/extensions/blocks/markdown/editor.scss b/extensions/blocks/markdown/editor.scss
index b30eb10415c02..158545cd470ed 100644
--- a/extensions/blocks/markdown/editor.scss
+++ b/extensions/blocks/markdown/editor.scss
@@ -50,7 +50,7 @@
 
 		hr {
 			border: none;
-			border-bottom: 2px solid $dark-gray-100;
+			border-bottom: 2px solid $gray-100;
 			margin: 2em auto;
 			max-width: 100px;
 		}
@@ -86,12 +86,12 @@
 		// See https://github.com/WordPress/gutenberg/blob/db7decd27f7c476684bc8edde381ffab4c916cb2/packages/block-editor/src/components/rich-text/style.scss#L28-L39
 		code,
 		pre {
-			color: $dark-gray-800;
+			color: $gray-900;
 			font-family: $editor-html-font;
 		}
 
 		code {
-			background: $light-gray-200;
+			background: $gray-100;
 			border-radius: 2px;
 			font-size: inherit; // This is necessary to override upstream CSS.
 			padding: 2px;
@@ -99,7 +99,7 @@
 
 		pre {
 			border-radius: 4px;
-			border: 1px solid $light-gray-500;
+			border: 1px solid $gray-200;
 			font-size: $text-editor-font-size;
 			padding: 0.8em 1em;
 
diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index 70bdb6c7fa7ad..c058e7e28468d 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -11,7 +11,7 @@ $current-track-title-font-size: 24px;
 $current-track-title-icon-size: 27px;
 $track-status-icon-size: 22px;
 $jetpack-podcast-player-primary: $black;
-$jetpack-podcast-player-secondary: $dark-gray-300;
+$jetpack-podcast-player-secondary: $gray-400;
 $jetpack-podcast-player-background: $white;
 $jetpack-podcast-player-error: $alert-red;
 
diff --git a/extensions/blocks/publicize/editor.scss b/extensions/blocks/publicize/editor.scss
index 71b958e937041..c03dc4c406ee6 100644
--- a/extensions/blocks/publicize/editor.scss
+++ b/extensions/blocks/publicize/editor.scss
@@ -1,7 +1,7 @@
 @import '../../shared/styles/gutenberg-base-styles.scss';
 
 .jetpack-publicize-message-box {
-	background-color: $light-gray-300;
+	background-color: $gray-200;
 	border-radius: 4px;
 }
 
@@ -24,7 +24,7 @@
 }
 
 .jetpack-publicize-gutenberg-social-icon {
-	fill: $dark-gray-500;
+	fill: $gray-600;
 	margin-right: 5px;
 
 	&.is-facebook {
diff --git a/extensions/blocks/rating-star/style.scss b/extensions/blocks/rating-star/style.scss
index ece957d272a4b..cc20e7c583103 100644
--- a/extensions/blocks/rating-star/style.scss
+++ b/extensions/blocks/rating-star/style.scss
@@ -16,7 +16,7 @@
 		margin-right: 0.3em;
 
 		// Mimic core focus style.
-		border-radius: $radius-round-rectangle;
+		border-radius: $radius-block-ui;
 
 		&:focus {
 			box-shadow: 0 0 0 1px currentColor;
diff --git a/extensions/blocks/recurring-payments/editor.scss b/extensions/blocks/recurring-payments/editor.scss
index b031d5627e9e8..759357600694d 100644
--- a/extensions/blocks/recurring-payments/editor.scss
+++ b/extensions/blocks/recurring-payments/editor.scss
@@ -78,10 +78,10 @@
 		transform: translateY( 14px );
 
 		// Use opacity to work in various editor styles.
-		background: $dark-opacity-light-200;
+		background: $dark-gray-placeholder;
 
 		.is-dark-theme & {
-			background: $light-opacity-light-200;
+			background: $light-gray-placeholder;
 		}
 	}
 
diff --git a/extensions/blocks/seo/editor.scss b/extensions/blocks/seo/editor.scss
index ec7f1193e37a7..0ab8c281b4bfe 100644
--- a/extensions/blocks/seo/editor.scss
+++ b/extensions/blocks/seo/editor.scss
@@ -1,7 +1,7 @@
 @import '../../shared/styles/gutenberg-base-styles.scss';
 
 .jetpack-seo-message-box {
-	background-color: $light-gray-300;
+	background-color: $gray-200;
 	border-radius: 4px;
 }
 
diff --git a/extensions/blocks/slideshow/editor.scss b/extensions/blocks/slideshow/editor.scss
index fe101b2f298fb..3576a2e2eb508 100644
--- a/extensions/blocks/slideshow/editor.scss
+++ b/extensions/blocks/slideshow/editor.scss
@@ -25,7 +25,7 @@
 
 		&:hover,
 		&:focus {
-			border: 1px solid $dark-gray-500;
+			border: 1px solid $gray-600;
 		}
 	}
 }
diff --git a/extensions/blocks/story/editor.scss b/extensions/blocks/story/editor.scss
index 2376397fa42ef..dff2d90d354c5 100644
--- a/extensions/blocks/story/editor.scss
+++ b/extensions/blocks/story/editor.scss
@@ -26,7 +26,7 @@
 
 		&:hover,
 		&:focus {
-			border: 1px solid $dark-gray-500;
+			border: 1px solid $gray-600;
 		}
 	}
 }
diff --git a/extensions/blocks/tiled-gallery/editor.scss b/extensions/blocks/tiled-gallery/editor.scss
index 14a96551b397c..b876220fff8bd 100644
--- a/extensions/blocks/tiled-gallery/editor.scss
+++ b/extensions/blocks/tiled-gallery/editor.scss
@@ -67,8 +67,8 @@
 		&.is-selected .tiled-gallery__item__move-menu,
 		&.is-selected .tiled-gallery__item__inline-menu {
 			background: $white;
-			border: 1px solid $dark-opacity-light-800;
-			border-radius: $radius-round-rectangle;
+			border: 1px solid $dark-gray-placeholder;
+			border-radius: $radius-block-ui;
 			transition: box-shadow 0.2s ease-out;
 			@include reduce-motion("transition");
 
@@ -77,7 +77,7 @@
 			}
 
 			.components-button {
-				color: $dark-opacity-300;
+				color: $dark-gray-placeholder;
 				padding: 2px;
 				height: $button-size-small;
 
@@ -128,7 +128,7 @@
 
 			&:hover,
 			&:focus {
-				border: 1px solid $dark-gray-500;
+				border: 1px solid $gray-600;
 			}
 		}
 	}
@@ -196,7 +196,7 @@
 	}
 
 	.components-menu-item__button.is-active {
-		color: $dark-gray-900;
-		box-shadow: 0 0 0 $active-item-outline-width $dark-gray-500 !important;
+		color: $gray-900;
+		box-shadow: 0 0 0 $active-item-outline-width $gray-600 !important;
 	}
 }
diff --git a/extensions/blocks/wordads/editor.scss b/extensions/blocks/wordads/editor.scss
index 2900659ea6f47..4c56eab2ad5ce 100644
--- a/extensions/blocks/wordads/editor.scss
+++ b/extensions/blocks/wordads/editor.scss
@@ -34,8 +34,8 @@
 	}
 
 	.components-menu-item__button.is-active {
-		color: $dark-gray-900;
-		box-shadow: 0 0 0 $active-item-outline-width $dark-gray-500 !important;
+		color: $gray-900;
+		box-shadow: 0 0 0 $active-item-outline-width $gray-600 !important;
 	}
 }
 
diff --git a/extensions/shared/components/style.scss b/extensions/shared/components/style.scss
index a4132b7b0bdf4..29599b16c845f 100644
--- a/extensions/shared/components/style.scss
+++ b/extensions/shared/components/style.scss
@@ -3,7 +3,7 @@
 // Styling copied from Gutenberg's `@wordpress/block-editor` styling for the Warning component
 // so we can use it on the frontend.
 .block-editor-warning {
-	border: $border-width solid $light-gray-500;
+	border: $border-width solid $gray-200;
 	padding: 10px 14px;
 
 	.block-editor-warning__message {
diff --git a/extensions/shared/external-media/editor.scss b/extensions/shared/external-media/editor.scss
index 08df270de63b7..3a2458d287726 100644
--- a/extensions/shared/external-media/editor.scss
+++ b/extensions/shared/external-media/editor.scss
@@ -162,18 +162,18 @@ $grid-size: 8px;
 
 		&:focus {
 			outline: none;
-			box-shadow: inset 0 0 0 2px $blue-medium-focus;
+			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
 			border-radius: 2px + $border-width; // Add the 4px from the transparent.
 		}
 
 		&__selected {
-			box-shadow: inset 0 0 0 6px $blue-medium-focus;
+			box-shadow: inset 0 0 0 6px var(--wp-admin-theme-color);
 			border-radius: 2px + $border-width; // Add the 4px from the transparent.
 		}
 
 		&__selected:focus {
-			box-shadow: inset 0 0 0 2px $blue-medium-focus, inset 0 0 0 3px white,
-				inset 0 0 0 6px $blue-medium-focus;
+			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color), inset 0 0 0 3px white,
+				inset 0 0 0 6px var(--wp-admin-theme-color);
 		}
 	}
 
@@ -183,7 +183,7 @@ $grid-size: 8px;
 		height: 100px;
 		margin: $grid-size * 2;
 		animation: jetpack-external-media-loading-fade 1.6s ease-in-out infinite;
-		background-color: $light-gray-secondary;
+		background-color: $gray-400;
 		border: 0;
 	}
 
@@ -261,7 +261,7 @@ $grid-size: 8px;
 	justify-content: flex-start;
 
 	@media only screen and ( min-width: 600px ) {
-		border-left: 1px solid $light-gray-secondary;
+		border-left: 1px solid $gray-400;
 		margin-left: $grid-size * 2;
 		padding-left: $grid-size * 2;
 	}
@@ -286,7 +286,7 @@ $grid-size: 8px;
 			}
 
 			.components-input-control__backdrop {
-				border-color: $dark-gray-200;
+				border-color: $gray-200;
 				border-radius: 3px;
 			}