created exceptions bof black and white

Automattic · Apr 23, 2021 · 965f0ed · 965f0ed
1 parent f89b509
commit 965f0ed
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 0 deletions.
diff --git a/quadrat/assets/theme.css b/quadrat/assets/theme.css
diff --git a/quadrat/child-experimental-theme.json b/quadrat/child-experimental-theme.json
@@ -4,6 +4,16 @@
 			"color": {
 				"gradients": [ ],
 				"palette": [
+					{
+						"slug": "black",
+						"color": "#000000",
+						"name": "Black"
+					},
+					{
+						"slug": "white",
+						"color": "#ffffff",
+						"name": "White"
+					},
 					{
 						"slug": "pink",
 						"color": "#FFD1D1",

diff --git a/quadrat/experimental-theme.json b/quadrat/experimental-theme.json
@@ -18,6 +18,16 @@
 			"color": {
 				"gradients": [],
 				"palette": [
+					{
+						"slug": "black",
+						"color": "#000000",
+						"name": "Black"
+					},
+					{
+						"slug": "white",
+						"color": "#ffffff",
+						"name": "White"
+					},
 					{
 						"slug": "pink",
 						"color": "#FFD1D1",

diff --git a/quadrat/sass/blocks/_cover.scss b/quadrat/sass/blocks/_cover.scss
@@ -13,4 +13,23 @@
 		right: 0;
 		z-index: 0 !important; //this avoids weird interactions on the editor
 	}
+	&.has-white-background-color,
+	&.has-black-background-color {
+		&.wp-block-cover.has-background-dim:not(.has-background-gradient)::before {
+			opacity: 0;
+		}
+		&:after {
+			mix-blend-mode: normal;
+			mask-image: url(rotated.svg);
+			mask-repeat: no-repeat;
+			mask-size: contain;
+			mask-position: center;
+		}
+	}
+	&.has-white-background-color:after {
+		background: black;
+	}
+	&.has-black-background-color:after {
+		background: white;
+	}
 }