Rainfall: style buttons and links (#6317)

* Style nav links

* Tweak active link style

* Tweak post title styles

* Add light grey to colour palette

* Add button state styles

rainfall/style.css

@@ -97,6 +97,59 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 	width: inherit;
 }
 
+/*
+* Button hover styles.
+* Necessary until the following issue is resolved in Gutenberg:
+* https://github.com/WordPress/gutenberg/issues/38277
+*/
+.wp-block-file .wp-block-file__button:hover,
+.wp-block-button__link:hover,
+.wp-block-file .wp-block-file__button:focus,
+.wp-block-button__link:focus {
+	background-color: var(--wp--preset--color--orange);
+	color: var(--wp--preset--color--black);
+}
+
+.has-black-background-color .wp-block-file .wp-block-file__button,
+.has-black-background-color .wp-block-button__link {
+	background-color: var(--wp--preset--color--white);
+	color: var(--wp--preset--color--black);
+}
+
+.has-black-background-color .wp-block-file .wp-block-file__button:hover,
+.has-black-background-color .wp-block-button__link:hover,
+.has-black-background-color .wp-block-file .wp-block-file__button:focus,
+.has-black-background-color .wp-block-button__link:focus {
+	background-color: var(--wp--preset--color--dark-grey);
+	color: var(--wp--preset--color--white);
+}
+
+.has-black-background-color .wp-block-file .wp-block-file__button:active,
+.has-black-background-color .wp-block-button__link:active {
+	background-color: var(--wp--preset--color--light-grey);
+	color: var(--wp--preset--color--black);
+}
+
+.wp-block-search__button:hover,
+.wp-block-search__button:focus {
+	color: var(--wp--preset--color--orange);
+}
+
+/* Navigation Links: focus/active states */
+a:focus:not(.wp-block-button__link),
+.wp-block-post-date a:focus {
+	text-decoration-line: underline;
+	text-decoration-style: dotted;
+}
+
+.wp-block-post-title a:focus {
+	text-decoration-style: solid;
+}
+
+.wp-block-navigation__responsive-container.has-white-color.has-black-background-color a:active {
+	color: var(--wp--preset--color--orange);
+}
+
 /* Footer Navigation */
 footer .wp-block-navigation__container {
 	row-gap: 1rem;

rainfall/theme.json

@@ -32,6 +32,11 @@
 					"name": "Dark Grey",
 					"slug": "dark-grey"
 				},
+				{
+					"color": "#DFDFDF",
+					"name": "Light Grey",
+					"slug": "light-grey"
+				},
 				{
 					"color": "#FFF",
 					"name": "White",
@@ -116,6 +121,23 @@
 	"styles": {
 		"blocks": {
 			"core/navigation": {
+				"elements": {
+					"link": {
+						":hover": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						},
+						":active": {
+							"color": {
+								"text": "var(--wp--preset--color--brown)"
+							},
+							"typography": {
+								"textDecoration": "underline"
+							}
+						}
+					}
+				},
 				"typography": {
 					"fontSize": "16px",
 					"textTransform": "uppercase"
@@ -173,6 +195,26 @@
 					"link": {
 						"typography": {
 							"textDecoration": "none"
+						},
+						":hover": {
+							"color": {
+								"text": {
+									"ref": "styles.color.text"
+								}
+							},
+							"typography": {
+								"textDecoration": "underline"
+							}
+						},
+						":active": {
+							"color": {
+								"text": {
+									"ref": "styles.color.text"
+								}
+							},
+							"typography": {
+								"textDecoration": "underline"
+							}
 						}
 					}
 				},
@@ -322,6 +364,9 @@
 				":active": {
 					"color": {
 						"text": "var(--wp--preset--color--brown)"
+					},
+					"typography": {
+						"textDecoration": "none"
 					}
 				},
 				":hover": {