Remote: add style variations (#5908)

* Remote: add style variations

* Timid Pink
* Mono Bright

* Remote: Fix heading font sizes

* Remote: update typography of Timid Pink variant

* Remote: update typography for Forest Green variant

* Remote: update typography for Mono Bright variant

* Fix design review comments

* Update WP version to 6.0

* fix font sizes for style variations

* introduce tertiary and remove forest-green variation

* add custom style to fix button padding.

* Fix link color in mono-bright variant

* fix typography issues

* fix button font family

* remove typography from patterns

* fix figcaption color

remote/parts/header.html

@@ -5,11 +5,11 @@
 	<!-- wp:group {"layout":{"type":"flex","allowOrientation":false}} -->
 	<div class="wp-block-group">
 		<!-- wp:site-logo /-->
-		<!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"fontSize":"small"} /-->
+		<!-- wp:site-title {"fontSize":"normal"} /-->
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:navigation {"overlayBackgroundColor":"background","overlayTextColor":"foreground","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"blockGap":"37px"}},"fontSize":"small"} -->
+	<!-- wp:navigation {"overlayBackgroundColor":"background","overlayTextColor":"foreground","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"blockGap":"37px"}},"fontSize":"normal"} -->
 	<!-- wp:page-list /-->
 	<!-- /wp:navigation -->
 	

remote/patterns/posts-grid.php

@@ -20,7 +20,7 @@
 
 <!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"220px","style":{"spacing":{"margin":{"top":"0px","bottom":"30px"}}}} /-->
 
-<!-- wp:post-date {"format":"M j","fontSize":"small"} /-->
+<!-- wp:post-date {"format":"M j"} /-->
 
 <!-- wp:post-title {"isLink":true,"style":{"spacing":{"margin":{"top":"0.3em","bottom":"20px"}},"typography":{"lineHeight":"1.17"}},"fontSize":"medium"} /-->
 <!-- /wp:post-template -->

remote/patterns/posts-list.php

@@ -15,12 +15,12 @@
 <!-- /wp:separator -->
 
 <!-- wp:columns {"style":{"spacing":{"padding":{"top":"1em"}}}} -->
-<div class="wp-block-columns" style="padding-top:1em"><!-- wp:column {"verticalAlignment":"top","width":"10%","style":{"spacing":{"padding":{"top":"1em"}}}} -->
-<div class="wp-block-column is-vertically-aligned-top" style="padding-top:1em;flex-basis:10%"><!-- wp:post-date {"format":"M j","fontSize":"small"} /--></div>
+<div class="wp-block-columns" style="padding-top:1em"><!-- wp:column {"verticalAlignment":"top","width":"4.5rem","style":{"spacing":{"padding":{"top":"0.75rem"}}}} -->
+<div class="wp-block-column is-vertically-aligned-top" style="padding-top:0.75rem;flex-basis:4.5rem"><!-- wp:post-date {"format":"M j"} /--></div>
 <!-- /wp:column -->
 
 <!-- wp:column {"verticalAlignment":"center","width":""} -->
-<div class="wp-block-column is-vertically-aligned-center"><!-- wp:post-title {"isLink":true,"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}},"typography":{"fontSize":"min(max(42px, 5vw), 72px)","lineHeight":"1.17"}}} /--></div>
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:post-title {"isLink":true,"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} /--></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->
 <!-- /wp:post-template -->

remote/readme.txt

@@ -1,7 +1,7 @@
 === Remote ===
 Contributors: 
-Requires at least: 5.9
-Tested up to: 5.9
+Requires at least: 6.0
+Tested up to: 6.0
 Requires PHP: 5.7
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html

remote/style.css

@@ -4,8 +4,8 @@ Theme URI: https://wordpress.com/theme/remote
 Author: Automattic
 Author URI: https://automattic.com
 Description: Remote is a dark, minimal block theme ideal for bloggers. Its default styles - a sans-serif font and dark background - contribute for a comfortable, immersive reading experience. It features a set of bold block patterns such as a large posts list and bordered categories and tags.
-Requires at least: 5.8
-Tested up to: 5.9
+Requires at least: 6.0
+Tested up to: 6.0
 Requires PHP: 5.7
 Version: 1.0.4
 License: GNU General Public License v2 or later
@@ -22,6 +22,13 @@ body {
 	-webkit-font-smoothing: antialiased;
 }
 
+/*
+ * Text selection
+ */
+::selection {
+  background: var(--wp--preset--color--tertiary);
+}
+
 /*
  * Links styles.
  */
@@ -108,6 +115,8 @@ body > .is-root-container,
 	background-color: var(--wp--preset--color--primary);
 	color: var(--wp--preset--color--background);
 	border: 1px solid var(--wp--preset--color--primary);
+	letter-spacing: .05rem;
+	font-weight: var(--wp--custom--button--typography--font-weight, 400);
 }
 
 /*
@@ -116,18 +125,11 @@ body > .is-root-container,
  * https://github.com/WordPress/gutenberg/issues/27075
  */
 
-:is(
+ :is(
 	.wp-block-search__button,
 	.wp-block-button__link
-):is(
-	:hover,
-	:active,
-	:focus
-) {
-	border: 1px solid var(--wp--preset--color--foreground);
-	background-color: var(--wp--preset--color--foreground);
-	color: var(--wp--preset--color--background);
-	cursor: pointer;
+){
+	padding: calc(.667em + 2px) calc(1.333em + 2px)
 }
 
 :is(
@@ -138,9 +140,9 @@ body > .is-root-container,
 	:active,
 	:focus
 ) {
-	border: 1px solid var(--wp--preset--color--foreground);
-	background-color: var(--wp--preset--color--foreground);
-	color: var(--wp--preset--color--background);
+	border: 1px solid var(--wp--custom--button--hover--border--color);
+	background-color: var(--wp--custom--button--hover--color--background);
+	color: var(--wp--custom--button--hover--color--text);
 	cursor: pointer;
 }
 
@@ -152,12 +154,26 @@ body > .is-root-container,
 	outline-offset: 3px;
 }
 
+:is(
+  .is-style-outline.wp-block-button,
+  .is-style-outline.wp-block-button__link
+) {
+  color: var(--wp--preset--color--primary)
+}
+
+:is(
+  .is-style-outline>.wp-block-button__link,
+  .is-style-outline.wp-block-button__link
+):not(.has-background):hover {
+  color: var(--wp--custom--button--hover--color--background);
+	background-color: var(--wp--custom--button--hover--color--text);
+}
+
 /*
  * Link Details
  */
 
  a {
-	color: var(--wp--preset--color--foreground);
 	text-decoration-thickness: 0.075ex;
 	text-underline-offset: 0.125em;
 	text-decoration: underline;
@@ -192,27 +208,51 @@ a:not(
 	.wp-block-post-title a
 ):focus {
 	color: var(--wp--preset--color--primary);
-	outline: 1.5px dotted var(--wp--preset--color--primary);
+	outline: 1px dotted var(--wp--preset--color--primary);
+	text-decoration: none;
 	outline-offset: 3px;
 }
 
 /*
  * Comment form styles
  */
- 
- .wp-block-post-comments input:not([type=submit]):not([type=checkbox]),
- .wp-block-post-comments textarea,
- .wp-block-post-comments select {
-	 border-radius: var(--wp--custom--button--border--radius);
-	 background-color: var(--wp--preset--color--background);
-	 color: var(--wp--preset--color--foreground);
-	 border: 1px solid var(--wp--preset--color--foreground);
- }
+
+.wp-block-post-comments .wp-element-button {
+	font-family: inherit;
+}
+
+.wp-block-post-comments input:not([type=submit],[type=checkbox]),
+.wp-block-post-comments textarea,
+.wp-block-post-comments select {
+	border-radius: min(var(--wp--custom--button--border--radius), 10px);
+	background-color: var(--wp--preset--color--background);
+	color: var(--wp--preset--color--foreground);
+	border: 1px solid var(--wp--preset--color--foreground);
+}
+
+.wp-block-post-comments input[type=submit] {
+	border: 1px solid var(--wp--preset--color--primary)
+}
+
+.wp-block-post-comments input[type=submit]:hover {
+	border-color: var(--wp--custom--button--hover--border--color);
+}
 
 /*
  * Needed until https://github.com/WordPress/gutenberg/issues/34196 or something like it.
  */
 .wp-block-tag-cloud.is-style-outline a {
-	border-radius: 10px;
+	border-radius: var(--wp--custom--button--border--radius);
 	padding: .5rem 1.25rem;
 }
+.wp-block-tag-cloud.is-style-outline a:hover {
+	color: var(--wp--preset--color--background);
+	background-color: var(--wp--preset--color--primary);
+}
+
+/*
+ * Need this because gutenberg sets default color to 555
+ */
+:is(.wp-block-image, .wp-block-audio, .wp-block-video) figcaption {
+	color: var(--wp--preset--color--foreground)
+}

remote/styles/mono-bright.json

@@ -0,0 +1,280 @@
+{
+	"version": 2,
+	"title": "Mono Bright",
+	"settings": {
+		"custom": {
+			"button": {
+				"border": {
+					"radius": "0"
+				},
+				"typography": {
+					"fontWeight": "700"
+				},
+				"hover": {
+					"color": {
+						"text": "var(--wp--preset--color--primary)",
+						"background": "var(--wp--preset--color--background)"
+					},
+					"border": {
+						"color": "var(--wp--preset--color--primary)"
+					}
+				}
+			}
+		},
+		"color": {
+			"palette": [
+				{
+					"slug": "primary",
+					"color": "#FBFF4A",
+					"name": "Primary"
+				},
+				{	
+					"slug": "background",
+					"color": "#363F47",
+					"name": "Background"
+				},
+				{
+					"slug": "foreground",
+					"color": "#FFFFFF",
+					"name": "Foreground"
+				},
+				{
+					"slug": "tertiary",
+					"color": "#2B3339",
+					"name": "Tertiary"
+				}
+			],
+			"duotone": [
+				{
+					"colors": [
+						"#363F47",
+						"#FBFF4A"
+					],
+					"slug": "default-filter",
+					"name": "Default filter"
+				}
+			]
+		},
+		"typography": {
+			"fontFamilies": [
+				{
+					"fontFamily": "\"IBM Plex Sans\", sans-serif",
+					"slug": "ibm-plex-sans",
+					"name": "Headings (IBM Plex Sans)",
+					"fontFace": [
+						{
+							"fontFamily": "IBM Plex Sans",
+							"fontDisplay": "block",
+							"fontWeight": "200",
+							"fontStyle": "normal",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/IBMPlexSans-ExtraLight.ttf" ]
+						},
+						{
+							"fontFamily": "IBM Plex Sans",
+							"fontDisplay": "block",
+							"fontWeight": "200",
+							"fontStyle": "italic",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/IBMPlexSans-ExtraLightItalic.ttf" ]
+						},
+						{
+							"fontFamily": "IBM Plex Sans",
+							"fontDisplay": "block",
+							"fontWeight": "300",
+							"fontStyle": "normal",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/IBMPlexSans-Light.ttf" ]
+						},
+						{
+							"fontFamily": "IBM Plex Sans",
+							"fontDisplay": "block",
+							"fontWeight": "300",
+							"fontStyle": "italic",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/IBMPlexSans-LightItalic.ttf" ]
+						}
+					]
+				},
+				{
+					"fontFamily": "\"IBM Plex Mono\", sans-serif",
+					"slug": "ibm-plex-mono",
+					"name": "Body (IBM Plex Mono)",
+					"fontFace": [
+						{
+							"fontFamily": "IBM Plex Mono",
+							"fontDisplay": "block",
+							"fontWeight": "300",
+							"fontStyle": "normal",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/IBMPlexMono-Light.ttf" ]
+						},
+						{
+							"fontFamily": "IBM Plex Mono",
+							"fontDisplay": "block",
+							"fontWeight": "300",
+							"fontStyle": "italic",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/IBMPlexMono-LightItalic.ttf" ]
+						},
+						{
+							"fontFamily": "IBM Plex Mono",
+							"fontDisplay": "block",
+							"fontWeight": "700",
+							"fontStyle": "normal",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/IBMPlexMono-SemiBold.ttf" ]
+						},
+						{
+							"fontFamily": "IBM Plex Mono",
+							"fontDisplay": "block",
+							"fontWeight": "700",
+							"fontStyle": "italic",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/IBMPlexMono-SemiBoldItalic.ttf" ]
+						}
+					]
+				}
+			],
+			"fontSizes": [
+				{
+					"name": "Small",
+					"size": "0.75rem",
+					"slug": "small"
+				},
+				{
+					"name": "Normal",
+					"size": "0.875rem",
+					"slug": "normal"
+				},
+				{
+					"name": "Medium",
+					"size": "1.125rem",
+					"slug": "medium"
+				},
+				{
+					"name": "Large",
+					"size": "1.5rem",
+					"slug": "large"
+				},
+				{
+					"name": "Huge",
+					"size": "1.75rem",
+					"slug": "huge"
+				}
+			]
+		}
+	},
+	"styles": {
+		"blocks": {
+			"core/site-title": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--ibm-plex-mono)",
+					"fontWeight": "700"
+				},
+				"elements": {
+					"link": {
+						"color": {
+							"text": "var(--wp--preset--color--foreground)"
+						}
+					}
+				}
+			},
+			"core/button": {
+				"typography": {
+					"fontWeight": "var(--wp--custom--button--typography--font-weight)"
+				}
+			},
+			"core/cover": {
+				"filter": {
+					"duotone": "var(--wp--preset--duotone--default-filter)"
+				}
+			},
+			"core/image": {
+				"filter": {
+					"duotone": "var(--wp--preset--duotone--default-filter)"
+				}
+			},
+			"core/post-featured-image": {
+				"filter": {
+					"duotone": "var(--wp--preset--duotone--default-filter)"
+				}
+			},
+			"core/post-title": {
+				"typography": {
+					"fontWeight": "200",
+					"lineHeight": "1.17"
+				}
+			},
+			"core/post-date": {
+				"typography": {
+					"textTransform": "uppercase",
+					"fontSize": "var(--wp--preset--font-size--normal)",
+					"lineHeight": "1.125rem"
+				}
+			},
+			"core/heading": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--ibm-plex-sans)",
+					"fontWeight": "0"
+				}
+			},
+			"core/paragraph": {
+				"typography": {
+					"lineHeight": "1.7",
+					"letterSpacing": "0.02rem"
+				}
+			}
+		},
+		"elements": {
+			"h1": {
+				"typography": {
+					"fontWeight": "200",
+					"lineHeight": "1.2"
+				}
+			},
+			"h2": {
+				"typography": {
+					"fontWeight": "200",
+					"lineHeight": "1.2"
+				}
+			},
+			"h3": {
+				"typography": {
+					"fontWeight": "200",
+					"lineHeight": "1.2"
+				}
+			},
+			"h4": {
+				"typography": {
+					"fontWeight": "300",
+					"lineHeight": "1.6"
+				}
+			},
+			"h5": {
+				"typography": {
+					"fontWeight": "300",
+					"lineHeight": "1.6"
+				}
+			},
+			"h6": {
+				"typography": {
+					"fontWeight": "300",
+					"lineHeight": "1.6",
+					"textTransform": "uppercase"
+				}
+			},
+			"link": {
+				"color": {
+					"text": "var(--wp--preset--color--primary)"
+				}
+			}
+		},
+		"typography": {
+			"fontFamily": "var(--wp--preset--font-family--ibm-plex-mono)",
+			"fontSize": "var(--wp--preset--font-size--normal)",
+			"fontWeight": "300",
+			"lineHeight": "1.5"
+		}
+	}
+}

remote/styles/timid-pink.json

@@ -0,0 +1,256 @@
+{
+	"version": 2,
+	"title": "Timid Pink",
+	"settings": {
+		"custom": {
+			"button": {
+				"border": {
+					"radius": "56px"
+				},
+				"hover": {
+					"color": {
+						"text": "var(--wp--preset--color--foreground)",
+						"background": "var(--wp--preset--color--background)"
+					},
+					"border": {
+						"color": "var(--wp--preset--color--foreground)"
+					}
+				}
+			}
+		},
+		"color": {
+			"palette": [
+				{
+					"slug": "primary",
+					"color": "#B7127F",
+					"name": "Primary"
+				},
+				{
+					"slug": "background",
+					"color": "#F7EDF6",
+					"name": "Background"
+				},
+				{
+					"slug": "foreground",
+					"color": "#B7127F",
+					"name": "Foreground"
+				},
+				{
+					"slug": "tertiary",
+					"color": "#FFFFFF",
+					"name": "Tertiary"
+				}
+			],
+			"duotone": [
+				{
+					"colors": [
+						"#B7127F",
+						"#F7EDF6"
+					],
+					"slug": "default-filter",
+					"name": "Default filter"
+				}
+			]
+		},
+		"typography": {
+			"fontFamilies": [
+				{
+					"fontFamily": "Newsreader, sans-serif",
+					"slug": "newsreader",
+					"name": "Headings (Newsreader)",
+					"fontFace": [
+						{
+							"fontFamily": "Newsreader",
+							"fontDisplay": "block",
+							"fontWeight": "300",
+							"fontStyle": "normal",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/Newsreader-Light.ttf" ]
+						},
+						{
+							"fontFamily": "Newsreader",
+							"fontDisplay": "block",
+							"fontWeight": "300",
+							"fontStyle": "italic",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/Newsreader-LightItalic.ttf" ]
+						}
+					]
+				},
+				{
+					"fontFamily": "\"Source Sans Pro\", sans-serif",
+					"slug": "source-sans-pro",
+					"name": "Body (Source Sans Pro)",
+					"fontFace": [
+						{
+							"fontFamily": "Source Sans Pro",
+							"fontDisplay": "block",
+							"fontWeight": "400",
+							"fontStyle": "normal",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/SourceSansPro-Regular.ttf" ]
+						},
+						{
+							"fontFamily": "Source Sans Pro",
+							"fontDisplay": "block",
+							"fontWeight": "400",
+							"fontStyle": "italic",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/SourceSansPro-Italic.ttf" ]
+						},
+						{
+							"fontFamily": "Source Sans Pro",
+							"fontDisplay": "block",
+							"fontWeight": "700",
+							"fontStyle": "normal",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/SourceSansPro-Bold.ttf" ]
+						},
+						{
+							"fontFamily": "Source Sans Pro",
+							"fontDisplay": "block",
+							"fontWeight": "700",
+							"fontStyle": "italic",
+							"fontStretch": "normal",
+							"src": [ "file:./assets/fonts/SourceSansPro-BoldItalic.ttf" ]
+						}
+					]
+				}
+			],
+			"fontSizes": [
+				{
+					"name": "Small",
+					"size": "1rem",
+					"slug": "small"
+				},
+				{
+					"name": "Normal",
+					"size": "1.125rem",
+					"slug": "normal"
+				},
+				{
+					"name": "Medium",
+					"size": "1.5rem",
+					"slug": "medium"
+				},
+				{
+					"name": "Large",
+					"size": "1.75rem",
+					"slug": "large"
+				},
+				{
+					"name": "Huge",
+					"size": "min(max(2rem, 5vw), 2.25rem)",
+					"slug": "huge"
+				}
+			]
+		}
+	},
+	"styles": {
+		"blocks": {
+			"core/site-title": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--source-sans-pro)",
+					"fontWeight": "400",
+					"textTransform": "uppercase"
+				}
+			},
+			"core/separator": {
+				"border": {
+					"color": "var(--wp--preset--color--primary)",
+					"width": "0.5px"
+				}
+			},
+			"core/button": {
+				"hover": {
+					"color": {
+						"background": "transparent",
+						"text": "green"
+					}
+				}
+			},
+			"core/cover": {
+				"filter": {
+					"duotone": "var(--wp--preset--duotone--default-filter)"
+				}
+			},
+			"core/image": {
+				"filter": {
+					"duotone": "var(--wp--preset--duotone--default-filter)"
+				}
+			},
+			"core/post-featured-image": {
+				"filter": {
+					"duotone": "var(--wp--preset--duotone--default-filter)"
+				}
+			},
+			"core/heading": {
+				"typography": {
+					"fontWeight": "0"
+				}
+			}
+		},
+		"elements": {
+			"h1": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--newsreader)",
+					"fontWeight": "300",
+					"letterSpacing": "normal",
+					"lineHeight": "1.2"
+				}
+			},
+			"h2": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--newsreader)",
+					"fontWeight": "300",
+					"letterSpacing": "normal",
+					"lineHeight": "1.2"
+				}
+			},
+			"h3": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--newsreader)",
+					"fontWeight": "300",
+					"letterSpacing": "normal",
+					"lineHeight": "1.2"
+				}
+			},
+			"h4": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--newsreader)",
+					"fontWeight": "300",
+					"letterSpacing": "normal",
+					"lineHeight": "1.6"
+				}
+			},
+			"h5": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--newsreader)",
+					"fontWeight": "300",
+					"letterSpacing": "normal",
+					"lineHeight": "1.6"
+				}
+			},
+			"h6": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--source-sans-pro)",
+					"fontWeight": "400",
+					"textTransform": "uppercase",
+					"lineHeight": "1.6"
+				}
+			},
+			"link": {
+				"color": {
+					"text": "var(--wp--preset--color--foreground)"
+				}
+			}
+		},
+		"typography": {
+			"fontFamily": "var(--wp--preset--font-family--source-sans-pro)",
+			"fontSize": "var(--wp--preset--font-size--normal)",
+			"fontWeight": "400",
+			"lineHeight": "1.5",
+			"letterSpacing": ".05rem"
+		}
+	}
+}

remote/templates/page.html

@@ -15,8 +15,8 @@
 		<!-- /wp:separator -->
 
 		<!-- wp:columns {"align":"wide","style":{"spacing":{"padding":{"top":"1em","bottom":"2em"}}}} -->
-		<div class="wp-block-columns alignwide" style="padding-top:1em;padding-bottom:2em;"><!-- wp:column {"verticalAlignment":"top","width":"10%","style":{"spacing":{"padding":{"top":"0.5em"}}}} -->
-			<div class="wp-block-column is-vertically-aligned-top" style="padding-top:0.5em;flex-basis:10%"><!-- wp:post-date {"format":"M j","fontSize":"small"} /--></div>
+		<div class="wp-block-columns alignwide" style="padding-top:1em;padding-bottom:2em;"><!-- wp:column {"verticalAlignment":"top","width":"4.5rem","style":{"spacing":{"padding":{"top":"0.75rem"}}}} -->
+			<div class="wp-block-column is-vertically-aligned-top" style="padding-top:0.75rem;flex-basis:4.5rem"><!-- wp:post-date {"format":"M j"} /--></div>
 			<!-- /wp:column -->
 
 			<!-- wp:column {"verticalAlignment":"center","width":""} -->
@@ -27,8 +27,8 @@
 		<!-- wp:post-featured-image {"align":"wide","style":{"spacing":{"margin":{"top":"0em","bottom":"2.5em"}}}} /-->
 
 		<!-- wp:columns {"align":"wide"} -->
-		<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"top","width":"10%","style":{"spacing":{"padding":{"top":"1.2em"}}}} -->
-			<div class="wp-block-column is-vertically-aligned-top" style="padding-top:1.2em;flex-basis:10%"></div>
+		<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"top","width":"4.5rem","style":{"spacing":{"padding":{"top":"1.2em"}}}} -->
+			<div class="wp-block-column is-vertically-aligned-top" style="padding-top:1.2em;flex-basis:4.5rem"></div>
 			<!-- /wp:column -->
 
 			<!-- wp:column {"verticalAlignment":"center","width":"652px"} -->

remote/templates/single.html

@@ -15,20 +15,20 @@
 		<!-- /wp:separator -->
 
 		<!-- wp:columns {"align":"wide","style":{"spacing":{"padding":{"top":"1em","bottom":"2em"}}}} -->
-		<div class="wp-block-columns alignwide" style="padding-top:1em;padding-bottom:2em;"><!-- wp:column {"verticalAlignment":"top","width":"10%","style":{"spacing":{"padding":{"top":"0.5em"}}}} -->
-			<div class="wp-block-column is-vertically-aligned-top" style="padding-top:0.5em;flex-basis:10%"><!-- wp:post-date {"format":"M j","style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} /--></div>
+		<div class="wp-block-columns alignwide" style="padding-top:1em;padding-bottom:2em;"><!-- wp:column {"verticalAlignment":"top","width":"4.5rem","style":{"spacing":{"padding":{"top":"0.75rem"}}}} -->
+			<div class="wp-block-column is-vertically-aligned-top" style="padding-top:0.75rem;flex-basis:4.5rem"><!-- wp:post-date {"format":"M j"} /--></div>
 			<!-- /wp:column -->
 		
 			<!-- wp:column {"verticalAlignment":"center","width":""} -->
-			<div class="wp-block-column is-vertically-aligned-center"><!-- wp:post-title {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}},"typography":{"fontSize":"min(max(42px, 5vw), 72px)","lineHeight":"1.17"}}} /--></div>
+			<div class="wp-block-column is-vertically-aligned-center"><!-- wp:post-title {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} /--></div>
 		<!-- /wp:column --></div>
 		<!-- /wp:columns -->
 
 		<!-- wp:post-featured-image {"align":"wide","style":{"spacing":{"margin":{"top":"0em","bottom":"2.5em"}}}} /-->
 
 		<!-- wp:columns {"align":"wide"} -->
-		<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"top","width":"10%","style":{"spacing":{"padding":{"top":"1.2em"}}}} -->
-			<div class="wp-block-column is-vertically-aligned-top" style="padding-top:1.2em;flex-basis:10%"></div>
+		<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"top","width":"4.5rem","style":{"spacing":{"padding":{"top":"1.2em"}}}} -->
+			<div class="wp-block-column is-vertically-aligned-top" style="padding-top:1.2em;flex-basis:4.5rem"></div>
 			<!-- /wp:column -->
 
 			<!-- wp:column {"verticalAlignment":"center","width":"652px"} -->
@@ -46,8 +46,8 @@
 			<!-- wp:post-author-name {"style":{"typography":{"textTransform":"uppercase"}}} /--></div>
 			<!-- /wp:group -->
 
-			<!-- wp:group {"style":{"spacing":{"blockGap":"0.5em"}},"layout":{"type":"flex","allowOrientation":false},"fontSize":"small"} -->
-			<div class="wp-block-group has-small-font-size"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase"}}} -->
+			<!-- wp:group {"style":{"spacing":{"blockGap":"0.5em","margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"flex","allowOrientation":false},"fontSize":"small"} -->
+			<div class="wp-block-group has-small-font-size" style="margin-top:0px;margin-bottom:0px"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase"}}} -->
 			<p style="text-transform:uppercase">Posted in:</p>
 			<!-- /wp:paragraph -->
 			
@@ -69,8 +69,8 @@
 		<!-- /wp:spacer -->
 
 		<!-- wp:columns {"align":"wide"} -->
-		<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"top","width":"10%","style":{"spacing":{"padding":{"top":"1.2em"}}}} -->
-			<div class="wp-block-column is-vertically-aligned-top" style="padding-top:1.2em;flex-basis:10%"></div>
+		<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"top","width":"4.5rem","style":{"spacing":{"padding":{"top":"1.2em"}}}} -->
+			<div class="wp-block-column is-vertically-aligned-top" style="padding-top:1.2em;flex-basis:4.5rem"></div>
 			<!-- /wp:column -->
 
 			<!-- wp:column {"verticalAlignment":"center","width":"652px"} -->

remote/theme.json

@@ -13,6 +13,15 @@
 			"button": {
 				"border": {
 					"radius": "6px"
+				},
+				"hover": {
+					"color": {
+						"text": "var(--wp--preset--color--background)",
+						"background": "var(--wp--preset--color--foreground)"
+					},
+					"border": {
+						"color": "var(--wp--preset--color--foreground)"
+					}
 				}
 			}
 		},
@@ -32,6 +41,11 @@
 					"slug": "foreground",
 					"color": "#FFFFFF",
 					"name": "Foreground"
+				},
+				{
+					"slug": "tertiary",
+					"color": "#24231D",
+					"name": "Tertiary"
 				}
 			]
 		},
@@ -99,22 +113,22 @@
 				},
 				{
 					"name": "Normal",
-					"size": "1.25rem",
+					"size": "1.125rem",
 					"slug": "normal"
 				},
 				{
 					"name": "Medium",
-					"size": "min(max(2rem, 5vw), 2.625rem)",
+					"size": "1.5rem",
 					"slug": "medium"
 				},
 				{
 					"name": "Large",
-					"size": "min(max(2.25rem, 5vw), 3.375rem)",
+					"size": "1.75rem",
 					"slug": "large"
 				},
 				{
 					"name": "Huge",
-					"size": "min(max(2.625rem, 5vw), 4.5rem)",
+					"size": "min(max(2rem, 5vw), 2.625rem)",
 					"slug": "huge"
 				}
 			]
@@ -139,14 +153,34 @@
 					"fontWeight": "400"
 				}
 			},
+			"core/paragraph": {
+				"typography": {
+					"lineHeight": "1.6"
+				}
+			},
+			"core/site-title": {
+				"typography": {
+					"fontWeight": "400"
+				}
+			},
+			"core/post-title": {
+				"typography": {
+					"fontSize": "min(max(2.625rem, 5vw), 4.5rem)",
+					"lineHeight": "1.17",
+					"fontWeight": "400"
+				}
+			},
 			"core/post-date": {
 				"typography": {
-					"textTransform": "uppercase"
+					"textTransform": "uppercase",
+					"fontSize": "var(--wp--preset--font-size--small)",
+					"lineHeight": "1.25rem"
 				}
 			},
 			"core/separator": {
 				"border": {
-					"color": "var(--wp--preset--color--primary)"
+					"color": "var(--wp--preset--color--primary)",
+					"width": "1px"
 				}
 			},
 			"core/post-comments": {
@@ -164,14 +198,40 @@
 			"text": "var(--wp--preset--color--foreground)"
 		},
 		"elements": {
-			"headings": {
-				"color": {
-					"text": "var(--wp--preset--color--foreground)"
+			"h1": {
+				"typography": {
+					"fontSize": "min(max(2.625rem, 5vw), 4.5rem)",
+					"lineHeight": "1.1"
 				}
 			},
-			"h1": {
+			"h2": {
+				"typography": {
+					"fontSize": "min(max(2.25rem, 5vw), 3.375rem)",
+					"lineHeight": "1.1"
+				}
+			},
+			"h3": {
+				"typography": {
+					"fontSize": "min(max(2rem, 5vw), 2.625rem)",
+					"lineHeight": "1.2"
+				}
+			},
+			"h4": {
+				"typography": {
+					"fontSize": "1.75rem",
+					"lineHeight": "1.6"
+				}
+			},
+			"h5": {
+				"typography": {
+					"fontSize": "1.25rem",
+					"lineHeight": "1.6"
+				}
+			},
+			"h6": {
 				"typography": {
-					"fontSize": "min(max(4.5rem, 5vw), 2.625rem)"
+					"fontSize": "1rem",
+					"lineHeight": "1.6"
 				}
 			},
 			"link": {