Update Gutenberg colors

Following these changes: - WordPress/gutenberg#23454 - WordPress/gutenberg#23648 - WordPress/gutenberg#23048
Automattic · Aug 3, 2020 · 5d60035 · 5d60035
1 parent d99669c
commit 5d60035
Show file tree

Hide file tree

Showing 18 changed files with 40 additions and 40 deletions.
diff --git 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
@@ -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;
 		}
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,20 +86,20 @@
 		// 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;
 		}
 
 		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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 			}