Fix regression with placeholder text color. (#10288)

* Fix regression with placeholder text color.

Recently we increased the contrast of text color in placeholder text.

As part of this, we changed from using opacity, to using rgba, to provide not-fully-opaque placeholder text. This caused a regression in contexts that did not have a light background, because the RGBA obviously adds a color, it doesn't just change the opacity.

For example placeholder text in a Cover Image block was suddenly dark, and if you added a dark editor style, placeholder text was not legible.

This PR changes that back, with a few tweaks, so it relies on opacity again. The benefit to this is that any block or editor style that provides its own text color for elements can use the placeholder aspect without having to also worry about the placeholder text color in various background environments.

This PR ensures there is sufficient (4.7+ contrast ratios) for placeholder text in:

- Cover Image
- Image captions
- Empty paragraphs in dark editor styles

* Refactor, and address feedback.

packages/block-library/src/gallery/editor.scss

@@ -78,11 +78,6 @@
 		&:focus a[data-mce-selected] {
 			color: rgba(0, 0, 0, 0.2);
 		}
-
-		// Caption placeholder text.
-		&[data-is-placeholder-visible="true"] + .editor-rich-text__tinymce {
-			opacity: 0.8;
-		}
 	}
 }
 

packages/editor/src/components/rich-text/style.scss

@@ -90,19 +90,23 @@
 	}
 
 	// Placeholder text.
-	& + .editor-rich-text__tinymce, {
+	& + .editor-rich-text__tinymce {
 		pointer-events: none;
 
 		// Use opacity to work in various editor styles.
+		// We don't specify the color here, because blocks or editor styles might provide their own.
 		&,
 		p {
-			color: $dark-opacity-300;
-			.is-dark-theme & {
-				color: $light-opacity-300;
-			}
+			opacity: 0.62;
 		}
 	}
 
+	// Captions may have lighter (gray) text, or be shown on a range of different background luminosites.
+	// To ensure legibility, we increase the default placeholder opacity to ensure contrast.
+	&[data-is-placeholder-visible="true"] + figcaption.editor-rich-text__tinymce {
+		opacity: 0.8;
+	}
+
 	&.mce-content-body {
 		line-height: $editor-line-height;
 	}