Merge pull request #2605 from Automattic/add/block-pattern-links

Spearhead block patterns for podcast links

seedlet/assets/sass/blocks/navigation/_style.scss

@@ -1,84 +1,88 @@
 .wp-block-navigation {
-    .wp-block-navigation-link {
-        padding: 0;
+	.wp-block-navigation-link {
+		padding: 0;
 
-        .wp-block-navigation-link__content {
-            padding: var(--primary-nav--padding);
-        }
+		.wp-block-navigation-link__content {
+			padding: var(--primary-nav--padding);
+		}
 
-        .wp-block-navigation-link__label {
-            font-family: var(--primary-nav--font-family);
-            font-size: var(--primary-nav--font-size);
-            font-weight: var(--primary-nav--font-weight);
-        }
-    }
+		.wp-block-navigation-link__label {
+			font-family: var(--primary-nav--font-family);
+			font-size: var(--primary-nav--font-size);
+			font-weight: var(--primary-nav--font-weight);
+		}
+	}
 
-    .wp-block-navigation-link__submenu-icon {
-        padding: 0;
-    }
+	.wp-block-navigation-link__submenu-icon {
+		padding: 0;
+	}
 
-    // Top level navigation container.
-    > .wp-block-navigation__container {
-        .has-child {
-            .wp-block-navigation-link {
-                display: inherit;
-            }
+	// Top level navigation container.
+	> .wp-block-navigation__container {
+		.has-child {
+			.wp-block-navigation-link {
+				display: inherit;
+			}
 
-            .wp-block-navigation__container {
-                border: none;
-                left: 0;
-                margin-left: var(--primary-nav--padding);
-                min-width: max-content;
-                opacity: 0; 
-                padding: 0;
-                position: inherit;
-                top: inherit;
+			.wp-block-navigation__container {
+				border: none;
+				left: 0;
+				margin-left: var(--primary-nav--padding);
+				//min-width: max-content;
+				opacity: 0;
+				padding: 0;
+				position: inherit;
+				top: inherit;
 
-                .wp-block-navigation-link {
-                    .wp-block-navigation-link__content {
-                        display: inline-block;
-                        padding: calc( 0.5 * var(--primary-nav--padding) ) var(--primary-nav--padding);
-                    }
-                }
+				.wp-block-navigation-link {
+					.wp-block-navigation-link__content {
+						display: inline-block;
+						padding: calc( 0.5 * var(--primary-nav--padding) ) var(--primary-nav--padding);
+					}
+				}
 
-                .wp-block-navigation-link__submenu-icon {
-                    display: none;
-                }
-            }
-            &:hover, &:focus-within {
-                .wp-block-navigation__container {
-                    display: block;
-                    opacity: 1;
-                    visibility: visible;
-                }
-            }
-        }
-    }
+				.wp-block-navigation-link__submenu-icon {
+					display: none;
+				}
+			}
+			&:hover, &:focus-within {
+				.wp-block-navigation__container {
+					display: block;
+					opacity: 1;
+					visibility: visible;
+				}
+			}
+		}
+	}
 
-    > .wp-block-navigation__container {
-        > .has-child {
-            > .wp-block-navigation__container {
-                background: var(--global--color-background);
-                box-shadow: var(--global--elevation);
-                margin: 0;
-                padding: 0;
-                position: absolute;
-                top: 100%;
-            }
-        }
-    }
-    
-    &:not(.has-text-color){
-        .wp-block-navigation-link {
-            > a {
-                &:hover, &:focus {
-                    color: var(--primary-nav--color-link-hover);
-                }
-            }
-        }
+	> .wp-block-navigation__container {
+		> .has-child {
+			> .wp-block-navigation__container {
+				background: var(--global--color-background);
+				box-shadow: var(--global--elevation);
+				margin: 0;
+				padding: 0;
+				position: absolute;
+				top: 100%;
+			}
+		}
+	}
 
-        .wp-block-navigation-link__content {
-            color: currentColor;
-        }
-    }
-}
+	&:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link:not(.has-text-color) {
+		color: var(--primary-nav--color-link);
+	}
+
+	&:not(.has-text-color){
+		.wp-block-navigation-link {
+			> a {
+				&:hover, &:focus {
+					color: var(--primary-nav--color-link-hover);
+				}
+			}
+		}
+
+		.wp-block-navigation-link__content {
+			color: currentColor;
+		}
+	}
+}

seedlet/style-rtl.css

@@ -1966,7 +1966,6 @@ dd {
 	border: none;
 	right: 0;
 	margin-right: var(--primary-nav--padding);
-	min-width: max-content;
 	opacity: 0;
 	padding: 0;
 	position: inherit;
@@ -1997,6 +1996,10 @@ dd {
 	top: 100%;
 }
 
+.wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link:not(.has-text-color) {
+	color: var(--primary-nav--color-link);
+}
+
 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover, .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus {
 	color: var(--primary-nav--color-link-hover);
 }

seedlet/style.css

@@ -1966,7 +1966,6 @@ dd {
 	border: none;
 	left: 0;
 	margin-left: var(--primary-nav--padding);
-	min-width: max-content;
 	opacity: 0;
 	padding: 0;
 	position: inherit;
@@ -1997,6 +1996,10 @@ dd {
 	top: 100%;
 }
 
+.wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link:not(.has-text-color) {
+	color: var(--primary-nav--color-link);
+}
+
 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover, .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus {
 	color: var(--primary-nav--color-link-hover);
 }

spearhead/assets/sass/_block-extends.scss

@@ -1,5 +1,7 @@
 // Import the block extends
-@import "block-extends/search";
+@import "block-extends/categories";
 @import "block-extends/latest-posts";
+@import "block-extends/links";
+@import "block-extends/navigation";
 @import "block-extends/related-posts";
-@import "block-extends/categories";
+@import "block-extends/search";

spearhead/assets/sass/_header.scss

@@ -92,8 +92,8 @@ $site-branding-height: 68px;
 
 	.primary-navigation > div > ul li, .woo-navigation > div > ul li {
 		color: var(--global--color-secondary);
-		margin: 6px 8px;
-		padding: var(--social-nav--padding);
+		//margin: 6px 8px;
+		//padding: var(--social-nav--padding);
 
 		a:hover {
 			border-color: transparent;

spearhead/assets/sass/_text.scss

@@ -9,5 +9,5 @@
 }
 
 .entry-content a {
-    font-weight: 500;
+    font-weight: var(--global--link-font-weight);
 }

spearhead/assets/sass/block-extends/_links.scss

@@ -0,0 +1,11 @@
+.podcast-links-list-block {
+    color: var(--entry-header--color);
+
+    a {
+        margin: 0 3px 0 7px;
+
+        &:first-child {
+            margin-left: 0;
+        }
+    }
+}

spearhead/assets/sass/block-extends/_navigation.scss

@@ -0,0 +1,21 @@
+.wp-block-navigation {
+	.wp-block-navigation__container {
+		p {
+			line-height: 2.5;
+		}
+
+		.wp-block-navigation-link {
+			.wp-block-navigation-link__content {
+				color: var(--wp--style--color--link, var(--global--color-primary));
+				line-height: 1;
+				margin: calc( var(--primary-nav--padding) - 1px );
+				padding: 0;
+
+				.wp-block-navigation-link__label {
+					font-size: var(--global--font-size-root);
+					font-weight: var(--global--link-font-weight);
+				}
+			}
+		}
+	}
+}

spearhead/inc/block-patterns.php

@@ -50,6 +50,35 @@ if ( ! function_exists( 'spearhead_register_block_patterns' ) ) :
 					<!-- wp:categories /-->',
 				)
 			);
+
+			register_block_pattern(
+				'spearhead/podcast-links',
+				array(
+					'title'      => __( 'Podcast links', 'spearhead' ),
+					'categories' => array( 'spearhead' ),
+					'content'    => '
+						<!-- wp:navigation {"orientation":"horizontal"} -->
+						<!-- wp:paragraph --><p>' . __( 'Podcast available on:', 'spearhead' ) . '</p><!-- /wp:paragraph -->
+						<!-- wp:navigation-link {"label":"Apple","url":"https://www.apple.com/"} /-->
+						<!-- wp:navigation-link {"label":"Breaker","url":"https://www.breaker.audio/"} /-->
+						<!-- wp:navigation-link {"label":"Google","url":"https://www.google.com/"} /-->
+						<!-- wp:navigation-link {"label":"LinkedIn","url":"https://www.linkedin.com/"} /-->
+						<!-- wp:navigation-link {"label":"Overcast","url":"https://overcast.fm/"} /-->
+						<!-- wp:navigation-link {"label":"Spotify","url":"https://spotify.com/"} /-->
+						<!-- wp:navigation-link {"label":"Twitter","url":"https://twitter.com/"} /-->
+						<!-- wp:navigation-link {"label":"YouTube","url":"https://youtube.com/"} /-->
+						<!-- /wp:navigation -->',
+				)
+			);
+
+			register_block_pattern(
+				'spearhead/podcast-links-list',
+				array(
+					'title'      => __( 'Podcast links list', 'spearhead' ),
+					'categories' => array( 'spearhead' ),
+					'content'    => '<!-- wp:paragraph {"className":"podcast-links-list-block","style":{"typography":{"fontSize":18}}} --><p class="podcast-links-list-block" style="font-size:18px"><a rel="noreferrer noopener" target="_blank" href="https://www.apple.com/">Apple </a>•<a rel="noreferrer noopener" target="_blank" href="https://www.breaker.audio/">Breaker </a>•<a rel="noreferrer noopener" target="_blank" href="https://www.google.com/">Google </a>•<a rel="noreferrer noopener" target="_blank" href="https://www.linkedin.com/">LinkedIn </a>•<a rel="noreferrer noopener" target="_blank" href="https://overcast.fm/">Overcast </a>•<a rel="noreferrer noopener" target="_blank" href="https://www.spotify.com/">Spotify </a>•<a rel="noreferrer noopener" target="_blank" href="https://twitter.com/">Twitter </a>•<a href="https://www.youtube.com/" target="_blank" rel="noreferrer noopener">YouTube</a></p><!-- /wp:paragraph -->',
+				)
+			);
 		}
 
 		/**

spearhead/style-rtl.css

@@ -133,7 +133,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .entry-content a {
-	font-weight: 500;
+	font-weight: var(--global--link-font-weight);
 }
 
 .has-main-navigation .site-header {
@@ -227,8 +227,6 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header .primary-navigation > div > ul li, .site-header .woo-navigation > div > ul li {
 	color: var(--global--color-secondary);
-	margin: 6px 8px;
-	padding: var(--social-nav--padding);
 }
 
 .site-header .primary-navigation > div > ul li a:hover, .site-header .woo-navigation > div > ul li a:hover {
@@ -320,59 +318,25 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin-top: 0;
 }
 
-.wp-block-search.wp-block-search__icon-button.wp-block-search__button-inside .wp-block-search__button {
-	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
-}
-
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__inside-wrapper {
-	flex-direction: row-reverse;
-	padding-right: 0;
-	border: none;
-	border-bottom: var(--form--border-width) solid var(--form--border-color);
-}
-
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__input {
-	border: none;
-	padding: 0 10px 0 0;
-	font-size: var(--global--font-size-sm);
-}
-
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon {
-	margin-right: 0;
-	background: transparent;
-	color: var(--entry-header--color);
+ul.wp-block-categories,
+.wp-block-categories ul {
+	list-style-type: none;
+	margin-top: 0;
 	padding: 0;
-	border: none;
-	transform: scaleX(-1);
-	min-width: 14px;
-}
-
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon svg {
-	width: 14px;
-	height: 14px;
 }
 
-.wp-block-search .wp-block-search__button {
-	border: none;
-	box-shadow: none;
-}
-
-.wp-block-search .wp-block-search__button.has-icon svg {
-	width: 24px;
-	height: 24px;
+.wp-block-categories .cat-item {
+	margin: calc( 0.3 * var(--global--spacing-vertical)) 0;
 }
 
-.wp-block-search .wp-block-search__inside-wrapper {
-	background: transparent;
-	color: var(--global--color-secondary);
-	align-items: center;
+.wp-block-categories a {
+	color: var(--entry-header--color);
+	font-size: var(--global--font-size-lg);
 }
 
-.wp-block-search .wp-block-search__input {
-	background: transparent;
-	color: var(--global--color-secondary);
-	border: none;
-	border-bottom: var(--form--border-width) solid var(--form--border-color);
+.wp-block-categories a:hover {
+	border-color: transparent;
+	color: var(--global--color-primary);
 }
 
 .wp-block-latest-posts > li:not(.is-grid) {
@@ -390,6 +354,34 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	color: var(--global--color-primary);
 }
 
+.podcast-links-list-block {
+	color: var(--entry-header--color);
+}
+
+.podcast-links-list-block a {
+	margin: 0 7px 0 3px;
+}
+
+.podcast-links-list-block a:first-child {
+	margin-right: 0;
+}
+
+.wp-block-navigation .wp-block-navigation__container p {
+	line-height: 2.5;
+}
+
+.wp-block-navigation .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content {
+	color: var(--wp--style--color--link, var(--global--color-primary));
+	line-height: 1;
+	margin: calc( var(--primary-nav--padding) - 1px);
+	padding: 0;
+}
+
+.wp-block-navigation .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content .wp-block-navigation-link__label {
+	font-size: var(--global--font-size-root);
+	font-weight: var(--global--link-font-weight);
+}
+
 .wp-block-jetpack-related-posts .jp-related-posts-i2__post {
 	margin: 0 0 0 var(--global--spacing-horizontal);
 }
@@ -412,25 +404,59 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	text-transform: uppercase;
 }
 
-ul.wp-block-categories,
-.wp-block-categories ul {
-	list-style-type: none;
-	margin-top: 0;
-	padding: 0;
+.wp-block-search.wp-block-search__icon-button.wp-block-search__button-inside .wp-block-search__button {
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 }
 
-.wp-block-categories .cat-item {
-	margin: calc( 0.3 * var(--global--spacing-vertical)) 0;
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	flex-direction: row-reverse;
+	padding-right: 0;
+	border: none;
+	border-bottom: var(--form--border-width) solid var(--form--border-color);
 }
 
-.wp-block-categories a {
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__input {
+	border: none;
+	padding: 0 10px 0 0;
+	font-size: var(--global--font-size-sm);
+}
+
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon {
+	margin-right: 0;
+	background: transparent;
 	color: var(--entry-header--color);
-	font-size: var(--global--font-size-lg);
+	padding: 0;
+	border: none;
+	transform: scaleX(-1);
+	min-width: 14px;
 }
 
-.wp-block-categories a:hover {
-	border-color: transparent;
-	color: var(--global--color-primary);
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon svg {
+	width: 14px;
+	height: 14px;
+}
+
+.wp-block-search .wp-block-search__button {
+	border: none;
+	box-shadow: none;
+}
+
+.wp-block-search .wp-block-search__button.has-icon svg {
+	width: 24px;
+	height: 24px;
+}
+
+.wp-block-search .wp-block-search__inside-wrapper {
+	background: transparent;
+	color: var(--global--color-secondary);
+	align-items: center;
+}
+
+.wp-block-search .wp-block-search__input {
+	background: transparent;
+	color: var(--global--color-secondary);
+	border: none;
+	border-bottom: var(--form--border-width) solid var(--form--border-color);
 }
 
 .screen-reader-text, .search-form input[type="submit"] {

spearhead/style.css

@@ -133,7 +133,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .entry-content a {
-	font-weight: 500;
+	font-weight: var(--global--link-font-weight);
 }
 
 .has-main-navigation .site-header {
@@ -227,8 +227,6 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header .primary-navigation > div > ul li, .site-header .woo-navigation > div > ul li {
 	color: var(--global--color-secondary);
-	margin: 6px 8px;
-	padding: var(--social-nav--padding);
 }
 
 .site-header .primary-navigation > div > ul li a:hover, .site-header .woo-navigation > div > ul li a:hover {
@@ -320,59 +318,25 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin-top: 0;
 }
 
-.wp-block-search.wp-block-search__icon-button.wp-block-search__button-inside .wp-block-search__button {
-	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
-}
-
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__inside-wrapper {
-	flex-direction: row-reverse;
-	padding-left: 0;
-	border: none;
-	border-bottom: var(--form--border-width) solid var(--form--border-color);
-}
-
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__input {
-	border: none;
-	padding: 0 0 0 10px;
-	font-size: var(--global--font-size-sm);
-}
-
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon {
-	margin-left: 0;
-	background: transparent;
-	color: var(--entry-header--color);
+ul.wp-block-categories,
+.wp-block-categories ul {
+	list-style-type: none;
+	margin-top: 0;
 	padding: 0;
-	border: none;
-	transform: scaleX(-1);
-	min-width: 14px;
-}
-
-.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon svg {
-	width: 14px;
-	height: 14px;
 }
 
-.wp-block-search .wp-block-search__button {
-	border: none;
-	box-shadow: none;
-}
-
-.wp-block-search .wp-block-search__button.has-icon svg {
-	width: 24px;
-	height: 24px;
+.wp-block-categories .cat-item {
+	margin: calc( 0.3 * var(--global--spacing-vertical)) 0;
 }
 
-.wp-block-search .wp-block-search__inside-wrapper {
-	background: transparent;
-	color: var(--global--color-secondary);
-	align-items: center;
+.wp-block-categories a {
+	color: var(--entry-header--color);
+	font-size: var(--global--font-size-lg);
 }
 
-.wp-block-search .wp-block-search__input {
-	background: transparent;
-	color: var(--global--color-secondary);
-	border: none;
-	border-bottom: var(--form--border-width) solid var(--form--border-color);
+.wp-block-categories a:hover {
+	border-color: transparent;
+	color: var(--global--color-primary);
 }
 
 .wp-block-latest-posts > li:not(.is-grid) {
@@ -390,6 +354,34 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	color: var(--global--color-primary);
 }
 
+.podcast-links-list-block {
+	color: var(--entry-header--color);
+}
+
+.podcast-links-list-block a {
+	margin: 0 3px 0 7px;
+}
+
+.podcast-links-list-block a:first-child {
+	margin-left: 0;
+}
+
+.wp-block-navigation .wp-block-navigation__container p {
+	line-height: 2.5;
+}
+
+.wp-block-navigation .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content {
+	color: var(--wp--style--color--link, var(--global--color-primary));
+	line-height: 1;
+	margin: calc( var(--primary-nav--padding) - 1px);
+	padding: 0;
+}
+
+.wp-block-navigation .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content .wp-block-navigation-link__label {
+	font-size: var(--global--font-size-root);
+	font-weight: var(--global--link-font-weight);
+}
+
 .wp-block-jetpack-related-posts .jp-related-posts-i2__post {
 	margin: 0 var(--global--spacing-horizontal) 0 0;
 }
@@ -412,25 +404,59 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	text-transform: uppercase;
 }
 
-ul.wp-block-categories,
-.wp-block-categories ul {
-	list-style-type: none;
-	margin-top: 0;
-	padding: 0;
+.wp-block-search.wp-block-search__icon-button.wp-block-search__button-inside .wp-block-search__button {
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 }
 
-.wp-block-categories .cat-item {
-	margin: calc( 0.3 * var(--global--spacing-vertical)) 0;
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	flex-direction: row-reverse;
+	padding-left: 0;
+	border: none;
+	border-bottom: var(--form--border-width) solid var(--form--border-color);
 }
 
-.wp-block-categories a {
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__input {
+	border: none;
+	padding: 0 0 0 10px;
+	font-size: var(--global--font-size-sm);
+}
+
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon {
+	margin-left: 0;
+	background: transparent;
 	color: var(--entry-header--color);
-	font-size: var(--global--font-size-lg);
+	padding: 0;
+	border: none;
+	transform: scaleX(-1);
+	min-width: 14px;
 }
 
-.wp-block-categories a:hover {
-	border-color: transparent;
-	color: var(--global--color-primary);
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon svg {
+	width: 14px;
+	height: 14px;
+}
+
+.wp-block-search .wp-block-search__button {
+	border: none;
+	box-shadow: none;
+}
+
+.wp-block-search .wp-block-search__button.has-icon svg {
+	width: 24px;
+	height: 24px;
+}
+
+.wp-block-search .wp-block-search__inside-wrapper {
+	background: transparent;
+	color: var(--global--color-secondary);
+	align-items: center;
+}
+
+.wp-block-search .wp-block-search__input {
+	background: transparent;
+	color: var(--global--color-secondary);
+	border: none;
+	border-bottom: var(--form--border-width) solid var(--form--border-color);
 }
 
 .screen-reader-text, .search-form input[type="submit"] {

spearhead/variables.css

@@ -27,6 +27,10 @@
 	--global--line-height-base: 1;
 	--global--line-height-body: 1.8;
 	--global--line-height-heading: 1.3;
+
+	--global--link-font-weight: 500;
+
+	/* Headings*/
 	--heading--font-family: var(--global--font-secondary);
 	--heading--font-weight: bold;
 	--heading--font-size-h1: 48px;
@@ -64,7 +68,7 @@
 	--primary-nav--justify-content: flex-end;
 	--primary-nav--color-link: var(--global--color-secondary);
 	--primary-nav--color-background: var(--global--color-foreground);
-	--primary-nav--padding: 0px;
+	--primary-nav--padding: 6px;
 	--primary-nav--font-family-mobile: var(--global--font-family-secondary);
 	--primary-nav--font-size-mobile: var(--global--font-size-sm);
 	--primary-nav--font-size-sub-menu-mobile: var( --primary-nav--font-size-mobile );