Changes to quadrat table styles to match design and ensure editor and view are the same. (#4139)

* Changes to quadrat table styles to match design and ensure editor and view are the same.

* Involved Blockbase in some of the table changes necessary for Quadrat.

blockbase/assets/ponyfill.css

@@ -644,12 +644,21 @@ p.has-drop-cap:not(:focus):first-letter {
 	fill: var(--wp--custom--button--color--text);
 }
 
+.wp-block-table.is-style-stripes,
+.wp-block-table {
+	margin-bottom: 1em;
+	border-bottom: none;
+}
+
+.wp-block-table.is-style-stripes figcaption,
 .wp-block-table figcaption {
 	font-size: var(--wp--custom--table--figcaption--typography--font-size);
 	text-align: center;
 }
 
-.wp-block-table td, .wp-block-table th {
+.wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th,
+.wp-block-table td,
+.wp-block-table th {
 	border: 1px solid;
 	padding: calc(0.5*var(--wp--custom--margin--vertical)) calc(0.5*var(--wp--custom--margin--horizontal));
 }

blockbase/sass/blocks/_table.scss

@@ -1,3 +1,4 @@
+.wp-block-table.is-style-stripes,
 .wp-block-table {
 	figcaption {
 		font-size: var(--wp--custom--table--figcaption--typography--font-size);
@@ -8,4 +9,7 @@
 		border: 1px solid;
 		padding: calc(0.5*var(--wp--custom--margin--vertical)) calc(0.5*var(--wp--custom--margin--horizontal));
 	}
+
+	margin-bottom: 1em;
+	border-bottom: none;
 }

quadrat/assets/theme.css

@@ -418,24 +418,38 @@ ul ul {
 	border: none;
 }
 
+.wp-block-table.is-style-stripes th,
 .wp-block-table th {
 	font-weight: 400;
 }
 
+.wp-block-table.is-style-stripes tbody td,
 .wp-block-table tbody td {
 	border-bottom-width: 0;
 	border-top-width: 0;
 	vertical-align: top;
+	border-color: var(--wp--preset--color--primary);
 }
 
+.wp-block-table.is-style-stripes tr:first-child td,
 .wp-block-table tr:first-child td {
 	border-top-width: 1px;
 }
 
+.wp-block-table.is-style-stripes tr:last-child td,
 .wp-block-table tr:last-child td {
 	border-bottom-width: 1px;
 }
 
+.wp-block-table.is-style-stripes figcaption,
+.wp-block-table figcaption {
+	color: var(--wp--preset--color--primary);
+}
+
+.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
+	background-color: var(--wp--preset--color--secondary);
+}
+
 .wp-block-pullquote.is-style-solid-color {
 	padding: var(--wp--custom--margin--horizontal);
 }

quadrat/sass/blocks/_table.scss

@@ -1,4 +1,6 @@
+.wp-block-table.is-style-stripes,
 .wp-block-table {
+
 	th {
 		font-weight: 400;
 	}
@@ -7,6 +9,7 @@
 		border-bottom-width: 0;
 		border-top-width: 0;
 		vertical-align: top;
+		border-color: var(--wp--preset--color--primary);
 	}
 
 	tr:first-child td {
@@ -16,4 +19,17 @@
 	tr:last-child td {
 		border-bottom-width: 1px;
 	}
+
+	figcaption {
+		color: var(--wp--preset--color--primary);
+	}
+
 }
+
+.wp-block-table.is-style-stripes {
+	tbody {
+		tr:nth-child(odd) {
+			background-color: var(--wp--preset--color--secondary);
+		}
+	}
+}