From b665a56e43dd85704f2b7654a1fe358e7854670f 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/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 | 2 +-
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 +++++++-------
17 files changed, 35 insertions(+), 35 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/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 761c16e0af6ee..c4fdb60560dbd 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;
}
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 2b5ce1577fdb5..c753715adec7e 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;
}