From 8538424c7f9116a3ff95190fdf27cbf69861cd00 Mon Sep 17 00:00:00 2001
From: desrosj <desrosj@git.wordpress.org>
Date: Thu, 4 Mar 2021 17:00:03 +0000
Subject: [PATCH] Twenty Twenty-One: Make text readable when dark background is
 selected for the Media & Text block.

This change ensures that the text in the Media & Text block is readable when dark background colors are selected.

This is a regression that was introduced in [49987].

Props hellofromTonya, poena, paaljoachim, ryelle.
Merges [50493] to the 5.7 branch.
Fixes #52702.
Built from https://develop.svn.wordpress.org/branches/5.7@50494


git-svn-id: http://core.svn.wordpress.org/branches/5.7@50107 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 .../themes/twentytwentyone/assets/css/ie.css  | 40 +++++++++++++++++++
 .../assets/css/style-editor.css               | 16 ++++++++
 .../sass/07-utilities/color-palette.scss      |  4 ++
 .../themes/twentytwentyone/package-lock.json  | 14 +++----
 .../themes/twentytwentyone/style-rtl.css      | 16 ++++++++
 wp-content/themes/twentytwentyone/style.css   | 16 ++++++++
 wp-includes/version.php                       |  2 +-
 7 files changed, 99 insertions(+), 9 deletions(-)

diff --git a/wp-content/themes/twentytwentyone/assets/css/ie.css b/wp-content/themes/twentytwentyone/assets/css/ie.css
index c2a61489eb..79982ec28c 100644
--- a/wp-content/themes/twentytwentyone/assets/css/ie.css
+++ b/wp-content/themes/twentytwentyone/assets/css/ie.css
@@ -7649,6 +7649,18 @@ h1.page-title {
 	background-color: #fff;
 }
 
+.has-background:not(.has-text-color).has-black-background-color[class] {
+	color: #fff;
+}
+
+.has-background:not(.has-text-color).has-gray-background-color[class] {
+	color: #fff;
+}
+
+.has-background:not(.has-text-color).has-dark-gray-background-color[class] {
+	color: #fff;
+}
+
 .has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container] {
 	color: #28303d;
 }
@@ -7661,6 +7673,34 @@ h1.page-title {
 	color: #28303d;
 }
 
+.has-background:not(.has-text-color).has-green-background-color[class] {
+	color: #28303d;
+}
+
+.has-background:not(.has-text-color).has-blue-background-color[class] {
+	color: #28303d;
+}
+
+.has-background:not(.has-text-color).has-purple-background-color[class] {
+	color: #28303d;
+}
+
+.has-background:not(.has-text-color).has-red-background-color[class] {
+	color: #28303d;
+}
+
+.has-background:not(.has-text-color).has-orange-background-color[class] {
+	color: #28303d;
+}
+
+.has-background:not(.has-text-color).has-yellow-background-color[class] {
+	color: #28303d;
+}
+
+.has-background:not(.has-text-color).has-white-background-color[class] {
+	color: #28303d;
+}
+
 .has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container] {
 	color: #28303d;
 }
diff --git a/wp-content/themes/twentytwentyone/assets/css/style-editor.css b/wp-content/themes/twentytwentyone/assets/css/style-editor.css
index cc95adf131..dd4834a25b 100644
--- a/wp-content/themes/twentytwentyone/assets/css/style-editor.css
+++ b/wp-content/themes/twentytwentyone/assets/css/style-editor.css
@@ -2535,6 +2535,12 @@ a {
 	background-color: var(--local--color-background);
 }
 
+.has-background:not(.has-text-color).has-black-background-color[class],
+.has-background:not(.has-text-color).has-gray-background-color[class],
+.has-background:not(.has-text-color).has-dark-gray-background-color[class] {
+	color: var(--global--color-white);
+}
+
 .has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container],
 .has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container],
 .has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] {
@@ -2548,6 +2554,16 @@ a {
 	--local--color-primary: var(--global--color-primary, #000);
 }
 
+.has-background:not(.has-text-color).has-green-background-color[class],
+.has-background:not(.has-text-color).has-blue-background-color[class],
+.has-background:not(.has-text-color).has-purple-background-color[class],
+.has-background:not(.has-text-color).has-red-background-color[class],
+.has-background:not(.has-text-color).has-orange-background-color[class],
+.has-background:not(.has-text-color).has-yellow-background-color[class],
+.has-background:not(.has-text-color).has-white-background-color[class] {
+	color: var(--global--color-dark-gray);
+}
+
 .has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container],
 .has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container],
 .has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container],
diff --git a/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss b/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss
index c5ede483b6..5454e0cac8 100644
--- a/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss
+++ b/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss
@@ -209,6 +209,8 @@
 	&.has-black-background-color[class],
 	&.has-gray-background-color[class],
 	&.has-dark-gray-background-color[class] {
+	  	color: var(--global--color-white);
+
 		// Localize CSS-variables to limit relationship scope
 		> [class*="__inner-container"] {
 			--local--color-primary: var(--global--color-background, #FFFFFF);
@@ -227,6 +229,8 @@
 	&.has-orange-background-color[class],
 	&.has-yellow-background-color[class],
 	&.has-white-background-color[class] {
+	  	color: var(--global--color-dark-gray);
+
 		// Localize CSS-variables to limit relationship scope
 		> [class*="__inner-container"] {
 			--local--color-primary: var(--global--color-primary, #000000);
diff --git a/wp-content/themes/twentytwentyone/package-lock.json b/wp-content/themes/twentytwentyone/package-lock.json
index 1de7cf539d..c1e9a85beb 100644
--- a/wp-content/themes/twentytwentyone/package-lock.json
+++ b/wp-content/themes/twentytwentyone/package-lock.json
@@ -456,14 +456,6 @@
 				"globals": "^12.0.0",
 				"prettier": "npm:wp-prettier@2.2.1-beta-1",
 				"requireindex": "^1.2.0"
-			},
-			"dependencies": {
-				"prettier": {
-					"version": "npm:wp-prettier@2.2.1-beta-1",
-					"resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.2.1-beta-1.tgz",
-					"integrity": "sha512-+JHkqs9LC/JPp51yy1hzs3lQ7qeuWCwOcSzpQNeeY/G7oSpnF61vxt7hRh87zNRTr6ob2ndy0W8rVzhgrcA+Gw==",
-					"dev": true
-				}
 			}
 		},
 		"@wordpress/prettier-config": {
@@ -3488,6 +3480,12 @@
 			"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
 			"dev": true
 		},
+		"prettier": {
+			"version": "npm:wp-prettier@2.2.1-beta-1",
+			"resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.2.1-beta-1.tgz",
+			"integrity": "sha512-+JHkqs9LC/JPp51yy1hzs3lQ7qeuWCwOcSzpQNeeY/G7oSpnF61vxt7hRh87zNRTr6ob2ndy0W8rVzhgrcA+Gw==",
+			"dev": true
+		},
 		"prettier-linter-helpers": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
diff --git a/wp-content/themes/twentytwentyone/style-rtl.css b/wp-content/themes/twentytwentyone/style-rtl.css
index 3c046cd98b..8deb824b4d 100644
--- a/wp-content/themes/twentytwentyone/style-rtl.css
+++ b/wp-content/themes/twentytwentyone/style-rtl.css
@@ -5740,6 +5740,12 @@ h1.page-title {
 	background-color: var(--local--color-background);
 }
 
+.has-background:not(.has-text-color).has-black-background-color[class],
+.has-background:not(.has-text-color).has-gray-background-color[class],
+.has-background:not(.has-text-color).has-dark-gray-background-color[class] {
+	color: var(--global--color-white);
+}
+
 .has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container],
 .has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container],
 .has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] {
@@ -5753,6 +5759,16 @@ h1.page-title {
 	--local--color-primary: var(--global--color-primary, #000);
 }
 
+.has-background:not(.has-text-color).has-green-background-color[class],
+.has-background:not(.has-text-color).has-blue-background-color[class],
+.has-background:not(.has-text-color).has-purple-background-color[class],
+.has-background:not(.has-text-color).has-red-background-color[class],
+.has-background:not(.has-text-color).has-orange-background-color[class],
+.has-background:not(.has-text-color).has-yellow-background-color[class],
+.has-background:not(.has-text-color).has-white-background-color[class] {
+	color: var(--global--color-dark-gray);
+}
+
 .has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container],
 .has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container],
 .has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container],
diff --git a/wp-content/themes/twentytwentyone/style.css b/wp-content/themes/twentytwentyone/style.css
index 0f28be35c1..326da71b50 100644
--- a/wp-content/themes/twentytwentyone/style.css
+++ b/wp-content/themes/twentytwentyone/style.css
@@ -5776,6 +5776,12 @@ h1.page-title {
 	background-color: var(--local--color-background);
 }
 
+.has-background:not(.has-text-color).has-black-background-color[class],
+.has-background:not(.has-text-color).has-gray-background-color[class],
+.has-background:not(.has-text-color).has-dark-gray-background-color[class] {
+	color: var(--global--color-white);
+}
+
 .has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container],
 .has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container],
 .has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] {
@@ -5789,6 +5795,16 @@ h1.page-title {
 	--local--color-primary: var(--global--color-primary, #000);
 }
 
+.has-background:not(.has-text-color).has-green-background-color[class],
+.has-background:not(.has-text-color).has-blue-background-color[class],
+.has-background:not(.has-text-color).has-purple-background-color[class],
+.has-background:not(.has-text-color).has-red-background-color[class],
+.has-background:not(.has-text-color).has-orange-background-color[class],
+.has-background:not(.has-text-color).has-yellow-background-color[class],
+.has-background:not(.has-text-color).has-white-background-color[class] {
+	color: var(--global--color-dark-gray);
+}
+
 .has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container],
 .has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container],
 .has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container],
diff --git a/wp-includes/version.php b/wp-includes/version.php
index 5337efee08..7b9b1e3eb3 100644
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.7-RC2-50492';
+$wp_version = '5.7-RC2-50494';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.