Styled calendar block per design (#3835)

* Styled calendar block per design

* Added the scss for the style changes

quadrat/assets/theme.css

@@ -51,6 +51,20 @@
 	padding: calc(0.667em + 2px) calc(1.333em + 2px);
 }
 
+.wp-block-calendar table caption {
+	color: var(--wp--custom--color--primary);
+}
+
+.wp-block-calendar table th {
+	background-color: var(--wp--custom--color--secondary);
+	border-color: var(--wp--custom--color--secondary);
+}
+
+.wp-block-calendar table td {
+	color: var(--wp--custom--color--primary);
+	border-color: var(--wp--custom--color--secondary);
+}
+
 .wp-block-cover.is-style-quadrat-cover-diamond::after {
 	background-image: url(rotated.svg);
 	background-position: center;

quadrat/sass/blocks/_calendar.scss

@@ -0,0 +1,15 @@
+.wp-block-calendar {
+	table {
+		caption {
+			color: var(--wp--custom--color--primary);
+		}
+		th {
+			background-color: var(--wp--custom--color--secondary);
+			border-color: var(--wp--custom--color--secondary);
+		}
+		td {
+			color: var(--wp--custom--color--primary);
+			border-color: var(--wp--custom--color--secondary);
+		}
+	}
+}

quadrat/sass/theme.scss

@@ -3,6 +3,7 @@
 @import "block-patterns/headlines";
 @import "block-patterns/join";
 @import "blocks/buttons";
+@import "blocks/calendar";
 @import "blocks/cover";
 @import "blocks/list";
 @import "blocks/media-text";