update svg; move category/tag code to mixins; add utility classes

moderntribe · Sep 27, 2023 · 009e678 · 009e678
1 parent 6c896fe
commit 009e678
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 64 deletions.
diff --git a/wp-content/themes/core/assets/pcss/typography/_mixins.pcss b/wp-content/themes/core/assets/pcss/typography/_mixins.pcss
@@ -111,23 +111,23 @@
  * ------------------------------------------------------------------------- */
 
 @define-mixin t-category {
+	color: var(--color-black);
 	font-family: var(--wp--preset--font-family--roboto);
 	font-size: var(--wp--preset--font-size--10);
 	line-height: 1.6;
 	font-weight: 400;
 	text-transform: uppercase;
-	text-decoration: none;
-}
+	text-decoration: none !important; /* override block editor default */
 
-/* -------------------------------------------------------------------------
- * Tag
- * ------------------------------------------------------------------------- */
+	/* target links for the hover/focus effect */
+	&:is(a) {
 
-@define-mixin t-tag {
-	font-family: var(--wp--preset--font-family--roboto);
-	font-size: var(--wp--preset--font-size--10);
-	line-height: 1.6;
-	font-weight: 700;
+		&:hover,
+		&:focus {
+			color: var(--color-black);
+			text-decoration: underline !important; /* override original state */
+		}
+	}
 }
 
 /* -------------------------------------------------------------------------
@@ -147,8 +147,27 @@
  * ------------------------------------------------------------------------- */
 
 @define-mixin t-tag {
+	display: inline-flex;
+	align-items: center;
+	padding: 4px 16px;
+	background-color: var(--color-neutral-20);
+	border-radius: 100px;
+	color: var(--color-black);
+	text-decoration: none !important; /* override block editor default */
 	font-family: var(--wp--preset--font-family--roboto);
 	font-size: var(--wp--preset--font-size--10);
 	line-height: 1.6;
 	font-weight: 700;
+	transition: var(--transition);
+
+	/* target links for the hover/focus effect */
+	&:is(a) {
+
+		&:hover,
+		&:focus {
+			background-color: var(--color-black);
+			color: var(--color-white);
+			text-decoration: none !important; /* override original state */
+		}
+	}
 }
diff --git a/wp-content/themes/core/assets/pcss/typography/_utilities.pcss b/wp-content/themes/core/assets/pcss/typography/_utilities.pcss
@@ -93,3 +93,22 @@
 
 	@mixin t-category;
 }
+
+/* -------------------------------------------------------------------------
+ * Caption
+ * ------------------------------------------------------------------------- */
+
+.t-caption {
+
+	@mixin t-caption;
+}
+
+
+/* -------------------------------------------------------------------------
+ * Tag
+ * ------------------------------------------------------------------------- */
+
+.t-tag {
+
+	@mixin t-tag;
+}
diff --git a/wp-content/themes/core/blocks/tribe/terms/index.js b/wp-content/themes/core/blocks/tribe/terms/index.js
@@ -31,30 +31,13 @@ registerBlockType( metadata.name, {
 	icon: {
 		src: (
 			<svg
+				xmlns="http://www.w3.org/2000/svg"
 				width="200"
 				height="200"
 				viewBox="0 0 200 200"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
+				fill="#000"
 			>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M157.458 4C161.876 4 165.458 7.58172 165.458 12V77.7122C165.458 79.8339 164.615 81.8688 163.115 83.369L86.4713 160.012C84.2927 162.191 81.7062 163.92 78.8597 165.099C76.0131 166.278 72.9621 166.885 69.881 166.885C66.7999 166.885 63.7489 166.278 60.9023 165.099C58.0557 163.92 55.4692 162.191 53.2906 160.012L9.44543 116.167C7.26669 113.989 5.53841 111.402 4.35927 108.556C3.18013 105.709 2.57324 102.658 2.57324 99.5769C2.57324 96.4958 3.18013 93.4449 4.35927 90.5983C5.53841 87.7517 7.26669 85.1652 9.44544 82.9866L86.0889 6.34315C87.5892 4.84285 89.624 4 91.7458 4L157.458 4ZM149.458 20L95.0594 20L20.759 94.3005C20.0661 94.9933 19.5163 95.8161 19.1413 96.7214C18.7663 97.6267 18.5732 98.597 18.5732 99.577C18.5732 100.557 18.7663 101.527 19.1413 102.433C19.5163 103.338 20.0659 104.16 20.7589 104.853L64.6045 148.699C65.2974 149.392 66.1201 149.942 67.0254 150.317C67.9307 150.692 68.9011 150.885 69.881 150.885C70.8609 150.885 71.8312 150.692 72.7365 150.317C73.6418 149.942 74.4644 149.392 75.1573 148.699L149.458 74.3985V20Z"
-					fill="currentcolor"
-				/>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M189 34.8835C193.418 34.8835 197 38.4652 197 42.8835V93.0196C197 95.1413 196.157 97.1762 194.657 98.6764L99.7925 193.54C96.6683 196.665 91.603 196.665 88.4788 193.54C85.3546 190.416 85.3546 185.351 88.4788 182.227L181 89.7059V42.8835C181 38.4652 184.581 34.8835 189 34.8835Z"
-					fill="currentcolor"
-				/>
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M119 53.5C119 50.4624 116.537 48 113.5 48C110.462 48 108 50.4624 108 53.5C108 56.5376 110.462 59 113.5 59C116.537 59 119 56.5376 119 53.5ZM113.5 32C125.374 32 135 41.6259 135 53.5C135 65.3741 125.374 75 113.5 75C101.626 75 91.9997 65.3741 91.9997 53.5C91.9997 41.6259 101.626 32 113.5 32Z"
-					fill="currentcolor"
-				/>
+				<path d="M157.458 4a8 8 0 0 1 8 8v65.712a8 8 0 0 1-2.343 5.657l-76.644 76.643a23.46 23.46 0 0 1-7.612 5.087 23.47 23.47 0 0 1-17.958 0 23.46 23.46 0 0 1-7.612-5.087L9.445 116.167a23.46 23.46 0 0 1-5.086-7.611 23.47 23.47 0 0 1-1.786-8.979 23.46 23.46 0 0 1 6.872-16.59L86.089 6.343A8 8 0 0 1 91.746 4h65.712zm-8 16H95.059l-74.3 74.301a7.46 7.46 0 0 0-2.186 5.276c0 .98.193 1.95.568 2.856a7.46 7.46 0 0 0 1.618 2.42l43.846 43.846a7.46 7.46 0 0 0 10.552 0l74.301-74.301V20zM189 34.884a8 8 0 0 1 8 8V93.02a8 8 0 0 1-2.343 5.657L99.793 193.54a8 8 0 0 1-11.314-11.313L181 89.706V42.884a8 8 0 0 1 8-8zM119 53.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 1 0 11 0zM113.5 32c11.874 0 21.5 9.626 21.5 21.5S125.374 75 113.5 75 92 65.374 92 53.5 101.626 32 113.5 32z" />
 			</svg>
 		),
 	},

diff --git a/wp-content/themes/core/blocks/tribe/terms/render.php b/wp-content/themes/core/blocks/tribe/terms/render.php
@@ -35,13 +35,13 @@
 
 	if ( $terms_block->display_as_links() ) {
 		echo sprintf(
-			'<a href="%s" class="wp-block-tribe-terms__link">%s</a>',
+			'<a href="%s" class="wp-block-tribe-terms__link t-category">%s</a>',
 			esc_url( get_term_link( $term ) ),
 			esc_html( $term->name )
 		);
 	} else {
 		echo sprintf(
-			'<span class="wp-block-tribe-terms__link">%s</span>',
+			'<span class="wp-block-tribe-terms__link t-category">%s</span>',
 			esc_html( $term->name )
 		);
 	}

diff --git a/wp-content/themes/core/blocks/tribe/terms/style.pcss b/wp-content/themes/core/blocks/tribe/terms/style.pcss
@@ -42,41 +42,9 @@
 
 .wp-block-tribe-terms__link {
 
-	@mixin t-category;
-	color: var(--color-black);
-
-	/* target links for the hover/focus effect */
-	&:is(a) {
-
-		&:hover,
-		&:focus {
-			color: var(--color-black);
-			text-decoration: underline;
-		}
-	}
-
 	/* style pills differently */
 	.is-style-pills & {
 
 		@mixin t-tag;
-		display: inline-flex;
-		padding: 4px 16px;
-		align-items: center;
-		background-color: var(--color-neutral-20);
-		border-radius: 100px;
-		color: var(--color-black);
-		text-decoration: none;
-		transition: var(--transition);
-
-		/* target links for the hover/focus effect */
-		&:is(a) {
-
-			&:hover,
-			&:focus {
-				background-color: var(--color-black);
-				color: var(--color-white);
-				text-decoration: none;
-			}
-		}
 	}
 }