From 57d10c7047cf2b0c606bd701db18be7567ef7323 Mon Sep 17 00:00:00 2001
From: Laurel Fulford <laurel.fulford@automattic.com>
Date: Tue, 16 May 2023 14:02:41 -0700
Subject: [PATCH] feat: adding desktop header MVP

---
 parts/desktop-header.html | 22 ++++++++++-----
 theme.json                | 56 ++++++++++++++++++++++++++++++++-------
 2 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/parts/desktop-header.html b/parts/desktop-header.html
index 7d9ddfd0..9067a823 100644
--- a/parts/desktop-header.html
+++ b/parts/desktop-header.html
@@ -1,17 +1,27 @@
 <!-- wp:group {"style":{"spacing":{"padding":{"right":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|60","top":"var:preset|spacing|60","right":"0","left":"0"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--60);padding-right:0;padding-bottom:var(--wp--preset--spacing--60);padding-left:0"><!-- wp:group {"layout":{"type":"flex"}} -->
-<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
+<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|20","top":"var:preset|spacing|60","right":"0","left":"0"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--60);padding-right:0;padding-bottom:var(--wp--preset--spacing--20);padding-left:0"><!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null}},"layout":{"type":"flex"}} -->
+<div class="wp-block-group"><!-- wp:site-logo {"width":65} /-->
+
+<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
 <div class="wp-block-group"><!-- wp:site-title /-->
 
 <!-- wp:site-tagline /--></div>
 <!-- /wp:group --></div>
 <!-- /wp:group -->
 
-<!-- wp:navigation {"ref":13,"overlayMenu":"never","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"}}}} /--></div>
+<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"style":{"spacing":{"padding":{"left":"var:preset|spacing|40","right":"var:preset|spacing|40","top":"0.27rem","bottom":"0.27rem"}}},"fontSize":"small"} -->
+<div class="wp-block-button has-custom-font-size has-small-font-size"><a class="wp-block-button__link wp-element-button" style="padding-top:0.27rem;padding-right:var(--wp--preset--spacing--40);padding-bottom:0.27rem;padding-left:var(--wp--preset--spacing--40)">Donate</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignwide"><!-- wp:navigation {"ref":13,"overlayMenu":"never","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"}}}} /--></div>
 <!-- /wp:group --></div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d80)"} -->
-<div style="height:var(--wp--preset--spacing--80)" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- wp:spacer {"height":"3.33rem"} -->
+<div style="height:3.33rem" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
\ No newline at end of file
diff --git a/theme.json b/theme.json
index bea68878..d8372359 100644
--- a/theme.json
+++ b/theme.json
@@ -119,6 +119,28 @@
 	},
 	"styles": {
 		"blocks": {
+			"core/button": {
+				"variations": {
+					"outline": {
+						"border": {
+							"width": "1.5px"
+						},
+						"spacing": {
+							"padding": {
+								"bottom": "calc( 0.6em - 2px )",
+								"left": "calc( 1.8em - 2px )",
+								"right": "calc( 1.8em - 2px )",
+								"top": "calc( 0.6em - 2px )"
+							}
+						}
+					}
+				}
+			},
+			"core/buttons": {
+				"spacing": {
+					"blockGap": "1rem"
+				}
+			},
 			"core/code": {
 				"border": {
 					"color": "var(--wp--preset--color--contrast)",
@@ -175,15 +197,17 @@
 			"core/navigation": {
 				"elements": {
 					"link": {
-						":hover": {
-							"typography": {
-								"textDecoration": "underline"
-							}
-						},
 						"typography": {
 							"textDecoration": "none"
 						}
 					}
+				},
+				"spacing": {
+					"blockGap": "2rem"
+				},
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--small)",
+					"lineHeight": 1.5
 				}
 			},
 			"core/post-author-name": {
@@ -338,13 +362,13 @@
 			"button": {
 				":active": {
 					"color": {
-						"background": "var(--wp--preset--color--primary)",
+						"background": "var(--wp--preset--color--contrast)",
 						"text": "var(--wp--preset--color--base)"
 					}
 				},
 				":focus": {
 					"color": {
-						"background": "var(--wp--preset--color--primary)",
+						"background": "var(--wp--preset--color--contrast)",
 						"text": "var(--wp--preset--color--base)"
 					},
 					"outline": {
@@ -356,16 +380,28 @@
 				},
 				":hover": {
 					"color": {
-						"background": "var(--wp--preset--color--secondary)",
+						"background": "var(--wp--preset--color--contrast)",
 						"text": "var(--wp--preset--color--base)"
 					}
 				},
 				"border": {
-					"radius": "0.25rem"
+					"radius": "0.33rem"
 				},
 				"color": {
 					"background": "var(--wp--preset--color--primary)",
 					"text": "var(--wp--preset--color--base)"
+				},
+				"spacing": {
+					"padding": {
+						"bottom": "0.6em",
+						"left": "1.8em",
+						"right": "1.8em",
+						"top": "0.6em"
+					}
+				},
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--medium)",
+					"lineHeight": "1.6667"
 				}
 			},
 			"h1": {
@@ -430,7 +466,7 @@
 				"bottom": "var(--wp--preset--spacing--50)",
 				"left": "var(--wp--preset--spacing--50)",
 				"right": "var(--wp--preset--spacing--50)",
-				"top": "var(--wp--preset--spacing--50)"
+				"top": "0"
 			}
 		},
 		"typography": {