[#4] updating base theme per review

[#4] Updating code formatting [#4] update package name [#4] updating spacing unit and removing defaults we don't need [#4] styling the outline button [#4] setting up spacing and header
Good-Bids · Dec 7, 2023 · b1fbda3 · b1fbda3
1 parent 76080b6
commit b1fbda3
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 61 deletions.
diff --git a/themes/goodbids-nonprofit/assets/css/theme.css b/themes/goodbids-nonprofit/assets/css/theme.css
@@ -0,0 +1,10 @@
+/**
+ * Hover style for core/button -> variations -> outline
+ * Colors vars are set in theme.json
+ */
+
+.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color, .has-background):hover,
+.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color, .has-background):focus{
+	background-color: var(--wp--preset--color--contrast);
+	color: var(--wp--preset--color--contrast-4);
+}
diff --git a/themes/goodbids-nonprofit/functions.php b/themes/goodbids-nonprofit/functions.php
@@ -0,0 +1,10 @@
+<?php
+/**
+ * Theme Functions File
+ *
+ * @package GoodBids_Nonprofit
+ *
+ * @since 1.0
+ */
+
+ require_once get_stylesheet_directory() . '/inc/assets.php';
diff --git a/themes/goodbids-nonprofit/inc/assets.php b/themes/goodbids-nonprofit/inc/assets.php
@@ -0,0 +1,27 @@
+<?php
+/**
+ * Pulls in custom assets for the GoodBids child theme.
+ *
+ * @package GoodBids_Nonprofit
+ */
+
+namespace GoodBids_Nonprofit\Assets;
+
+/**
+ * Enqueue Theme Styles.
+ *
+ * @since 1.0.0
+ *
+ * @return void
+ */
+
+function enqueue_styles(): void {
+	wp_enqueue_style(
+		'goodbids-nonprofit',
+		get_stylesheet_directory_uri() . '/assets/css/theme.css',
+		array(),
+		wp_get_theme()->get( 'Version' )
+	);
+}
+
+add_action( 'wp_enqueue_scripts', 'GoodBids_Nonprofit\Assets\enqueue_styles' );
diff --git a/themes/goodbids-nonprofit/parts/header.html b/themes/goodbids-nonprofit/parts/header.html
@@ -0,0 +1,22 @@
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"20px","bottom":"20px"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignwide has-background"
+	style="padding-top:20px;padding-bottom:20px">
+	<!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between","flexWrap":"wrap"}} -->
+	<div class="wp-block-group alignwide">
+		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"},"layout":{"selfStretch":"fit","flexSize":null}},"layout":{"type":"flex"}} -->
+		<div class="wp-block-group">
+			<!-- wp:site-logo {"width":60 } /-->
+
+			<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}}} -->
+			<div class="wp-block-group">
+				<!-- wp:site-title {"level":0} /-->
+			</div>
+			<!-- /wp:group -->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:navigation {"layout":{"type":"flex","justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"var:preset|spacing|20"},"layout":{"selfStretch":"fit","flexSize":null}}} /-->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
diff --git a/themes/goodbids-nonprofit/style.css b/themes/goodbids-nonprofit/style.css
@@ -3,7 +3,7 @@ Theme Name: GoodBids Non-profit
 Theme URI: https://goodbids.org
 Author: Viget
 Author URI: https://viget.com
-Description: Twenty Twenty-Four child theme for GoodBids Non-profit sites.
+Description: Twenty Twenty-Four child theme for GoodBids Charity sites.
 Version: 1.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html

diff --git a/themes/goodbids-nonprofit/theme.json b/themes/goodbids-nonprofit/theme.json
@@ -2,89 +2,54 @@
 	"$schema": "https://schemas.wp.org/trunk/theme.json",
 	"version": 2,
 	"settings": {
-		"appearanceTools": false,
 		"color": {
 			"background": true,
 			"text": true,
 			"palette": [
 				{
 					"color": "#D9FFD2",
-					"name": "Primary",
+					"name": "Base",
 					"slug": "base"
 				},
 				{
 					"color": "#FFFFFF",
-					"name": "Secondary",
+					"name": "Base / Two",
 					"slug": "base-2"
 				},
 				{
 					"color": "#CED7d3",
-					"name": "Tertiary / Border",
+					"name": "Base / Three",
 					"slug": "base-3"
 				},
 				{
 					"color": "#0A3624",
-					"name": "Contrast Primary",
+					"name": "Contrast",
 					"slug": "contrast"
 				},
 				{
 					"color": "#232826",
-					"name": "Contrast Secondary",
+					"name": "Contrast / Two",
 					"slug": "contrast-2"
 				},
 				{
 					"color": "#919493",
-					"name": "Contrast Tertiary",
+					"name": "Contrast / Three",
 					"slug": "contrast-3"
 				},
 				{
 					"color": "#70FF8F",
-					"name": "Screaming Green",
-					"slug": "screaming-green"
+					"name": "Contrast / Four",
+					"slug": "contrast-4"
 				}
 			]
 		},
 		"spacing": {
-			"margin": false,
-			"padding": false,
-			"blockGap": null,
-			"units": ["px", "em", "rem", "vh", "vw"]
+			"margin": true,
+			"padding": true,
+			"units": ["%", "px", "em", "rem", "vh", "vw"]
 		},
 		"typography": {
-			"customFontSize": true,
 			"lineHeight": false,
-			"fluid": true,
-			"fontStyle": true,
-			"fontWeight": true,
-			"textDecoration": true,
-			"fontFamilies": [
-				{
-					"fontFace": [
-						{
-							"fontFamily": "Inter",
-							"fontStretch": "normal",
-							"fontStyle": "normal",
-							"fontWeight": "300 400 700 900",
-							"src": [
-								"file:./assets/fonts/inter/Inter-VariableFont_slnt,wght.woff2"
-							]
-						}
-					],
-					"fontFamily": "\"Inter\", sans-serif",
-					"name": "Inter",
-					"slug": "body"
-				},
-				{
-					"fontFamily": "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif",
-					"name": "System Sans-serif",
-					"slug": "system-sans-serif"
-				},
-				{
-					"fontFamily": "Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
-					"name": "System Serif",
-					"slug": "system-serif"
-				}
-			],
 			"fontSizes": [
 				{
 					"fluid": false,
@@ -132,41 +97,83 @@
 		}
 	},
 	"styles": {
+		"color": {
+			"background": "var(--wp--preset--color--base-2)"
+		},
 		"blocks": {
-			"core/buttons": {
+			"core/button": {
 				"variations": {
-					"secondary": {
-
-					},
 					"outline": {
-
+						"spacing": {
+							"padding": {
+								"bottom": "calc(0.7rem - 1px)",
+								"left": "calc(1.8rem - 1px)",
+								"right": "calc(1.8rem - 1px)",
+								"top": "calc(0.7rem - 1px)"
+							}
+						}
 					}
 				}
 			},
-			"core/paragraph": {
-				"typography": {
-					"fontWeight": "400",
-					"fontSize": "1rem"
+			"core/quote": {
+				"variations": {
+					"plain": {
+						"border": {
+							"color": "var(--wp--preset--color--contrast-4)"
+						}
+					}
 				}
 			}
 		},
 		"elements": {
 			"heading": {
 				"typography": {
 					"fontWeight": "900",
-					"textTransform": "uppercase"
+					"textTransform": "uppercase",
+					"fontFamily": "Inter"
 				}
 			},
 			"button": {
+				":active": {
+					"color": {
+						"background": "var(--wp--preset--color--contrast-4)",
+						"text": "var(--wp--preset--color--contrast)"
+					}
+				},
+				":focus": {
+					"color": {
+						"background": "var(--wp--preset--color--contrast-4)",
+						"text": "var(--wp--preset--color--contrast)"
+					},
+					"outline": {
+						"color": "var(--wp--preset--color--contrast)"
+					},
+					"border": {
+						"color": "var(--wp--preset--color--contrast)"
+					}
+				},
+				":hover": {
+					"color": {
+						"background": "var(--wp--preset--color--contrast-4)",
+						"text": "var(--wp--preset--color--contrast)"
+					},
+					"border": {
+						"color": "var(--wp--preset--color--contrast)"
+					}
+				},
 				"border": {
 					"radius": "100px"
 				},
+				"color": {
+					"background": "var(--wp--preset--color--contrast)",
+					"text": "var(--wp--preset--color--base-2)"
+				},
 				"spacing": {
 					"padding": {
-						"bottom": "calc(1rem - 1px)",
-						"left": "calc(2rem - 1px)",
-						"right": "calc(2rem - 1px)",
-						"top": "calc(1rem - 1px)"
+						"bottom": "0.7rem",
+						"left": "1.8rem",
+						"right": "1.8rem",
+						"top": "0.7rem"
 					}
 				},
 				"typography": {