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

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

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],

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

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",

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],

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],

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.