Blocks: update base-styles dependency (#16687)

Co-authored-by: Filipe Varela <keoshi@keoshi.com>
Automattic · Aug 24, 2020 · e996569 · e996569
1 parent 34914f8
commit e996569
Show file tree

Hide file tree

Showing 22 changed files with 60 additions and 60 deletions.
diff --git a/extensions/blocks/contact-form/editor.scss b/extensions/blocks/contact-form/editor.scss
@@ -197,7 +197,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 rgba( 0, 0, 0, 0.4 );
 		border-radius: 4px;
 		padding: 4px;
 	}

diff --git a/extensions/blocks/donations/common.scss b/extensions/blocks/donations/common.scss
@@ -21,7 +21,7 @@
 		border: none;
 		border-left: 1px solid $light-gray-700;
 		background: $white;
-		color: $dark-gray-800;
+		color: $gray-900;
 		cursor: pointer;
 		border-radius: 0;
 		text-transform: none;
@@ -37,12 +37,12 @@
 		}
 
 		&:hover {
-			background: $light-gray-100;
-			color: $dark-gray-800;
+			background: $white;
+			color: $gray-900;
 		}
 
 		&.is-active {
-			background: $blue-wordpress-700;
+			background: var(--wp-admin-theme-color);
 			color: $white;
 			cursor: default;
 		}
@@ -62,7 +62,7 @@
 		display: inline-block;
 		padding: 16px 24px;
 		background-color: $white;
-		color: $dark-gray-800;
+		color: $gray-900;
 		border: 1px solid $light-gray-700;
 		margin-right: 8px;
 		margin-bottom: 8px;
@@ -71,7 +71,7 @@
 		white-space: nowrap;
 
 		&.has-focus {
-			box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-wordpress-700;
+			box-shadow: 0 0 0 1px $white, 0 0 0 3px var(--wp-admin-theme-color);
 			outline: 2px solid transparent;
 			outline-offset: -2px;
 		}

diff --git a/extensions/blocks/donations/view.scss b/extensions/blocks/donations/view.scss
@@ -74,11 +74,11 @@
 		cursor: pointer;
 
 		&:hover {
-			background-color: $light-gray-100;
+			background-color: $white;
 		}
 
 		&.is-selected {
-			background-color: $blue-wordpress-700;
+			background-color: var(--wp-admin-theme-color);
 			color: $white;
 		}
 	}

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

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/social-previews/modal.scss b/extensions/blocks/social-previews/modal.scss
@@ -39,19 +39,19 @@
 			}
 
 			&.is-active {
-				box-shadow: 0px 0px 0px 2px $blue-medium-focus;
+				box-shadow: 0px 0px 0px 2px var(--wp-admin-theme-color);
 			}
 
 			&:not( :disabled ):not( [aria-disabled='true'] ):not( .is-secondary ):not( .is-primary ):not( .is-tertiary ):not( .is-link ):hover {
-				box-shadow: 0px 0px 0px 2px $blue-medium-focus;
+				box-shadow: 0px 0px 0px 2px var(--wp-admin-theme-color);
 			}
 		}
 
 	}
 
 	.components-tab-panel__tab-content {
 		padding: 10px;
-		background-color: $light-gray-100;
+		background-color: $white;
 		flex: 1;
 	}
 
@@ -60,7 +60,7 @@
 		width: 900px;
 		min-height: 500px;
 
-		.components-tab-panel__tabs { 
+		.components-tab-panel__tabs {
 			flex-direction: column;
 			justify-content: flex-start;
 			padding: 24px;
@@ -93,23 +93,23 @@
 	.jetpack-social-previews__upgrade-description {
 		margin-bottom: 1em;
 	}
-	
+
 	.jetpack-social-previews__upgrade-heading {
 		font-size: 2em;
 		line-height: 1.15;
 	}
-	
+
 	.jetpack-social-previews__upgrade-feature-list {
 		list-style: none;
 		margin-bottom: 2em;
 		padding-left: 1em;
 		font-size: 1.1em;
 		line-height: 1.4;
-	
+
 		li {
 			position: relative;
 			margin-bottom: 12px;
-	
+
 			&:before {
 				content:  "\2713 ";
 				position: absolute;
@@ -126,7 +126,7 @@
 		grid-gap: 3em;
 		grid-template-columns: 1fr 1fr;
 		padding-top: 4em;
-	
+
 		.jetpack-social-previews__upgrade-illustration {
 			grid-column: 2;
 			grid-row: 1;
@@ -144,7 +144,7 @@
 		.jetpack-social-previews__upgrade-heading {
 			margin-top: 0;
 		}
-	
+
 		.jetpack-social-previews__upgrade-feature-list {
 			padding-left: 0;
 		}
@@ -154,5 +154,5 @@
 		.jetpack-social-previews__upgrade-description {
 			padding: 0 2em 2em;
 		}
-	}	
-}
+	}
+}
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 {