Placeholder: Add blurred background to work in nested cases. (#43379)

WordPress · Aug 18, 2022 · 2b99bd3 · 2b99bd3
1 parent 29d6801
commit 2b99bd3
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
@@ -176,9 +176,18 @@
 	border-radius: inherit;
 	display: flex;
 	box-shadow: none;
-	background: none;
 	min-width: 100px;
 
+	// Blur the background so layered dashed placeholders are still visually separate.
+	// We also provide a semitransparent background so as to allow duotones to sheen through.
+	backdrop-filter: blur(100px);
+	background-color: rgba($white, 0.1);
+
+	// Invert the colors in themes deemed dark.
+	.is-dark-theme & {
+		background-color: rgba($black, 0.1);
+	}
+
 	.components-placeholder__fieldset {
 		width: auto;
 	}