Merge pull request #33 from BlackbirdDigital/feature/handle-mobile-vars

Feature/handle mobile vars

src/styles/base/global/_mobile-vars.scss

@@ -0,0 +1,31 @@
+//
+// Global: mobile-vars.
+//
+// Handles swapping CSS custom property values for their mobile counterparts.
+//
+
+@use 'sass:string';
+
+@use '../../settings/theme';
+@use '../../tools/respond';
+
+@include respond.to( 'desktop', 'max-width' ) {
+	body {
+		// Swap each CSS var with it's mobile counterpoint value, if available.
+		@each $map-key, $map in theme.$custom {
+			$mobile: string.index( $map-key, '-mobile' );
+			@if $mobile {
+				$base: string.slice( $map-key, 1, $mobile - 1 );
+				@if theme.has-map( $base ) {
+					@each $key, $val in theme.get-map( $map-key ) {
+						@include theme.set-var(
+							$base,
+							$key,
+							theme.get-var( $map-key, $key )
+						);
+					}
+				}
+			}
+		}
+	}
+}

src/styles/base/typography/_headings.scss

@@ -5,22 +5,6 @@
 @use '../../settings/theme';
 @use '../../tools/respond';
 
-/**
- * Responsive heading sizes are accomplished via CSS var updates.
- */
-@include respond.to( 'tablet', 'max-width' ) {
-	body {
-		// Swap each heading size CSS var with it's mobile counterpoint value, if available.
-		@each $key, $val in theme.get-map( 'heading-sizes-mobile' ) {
-			@include theme.set-var(
-				'heading-sizes',
-				$key,
-				theme.get-var( 'heading-sizes-mobile', $key )
-			);
-		}
-	}
-}
-
 // These size classes are already provided by WordPress for the Heading and Post Title blocks, but this makes them available to the rest of our theme.
 @each $key, $val in theme.get-map( 'heading-sizes' ) {
 	.has-h-#{$key}-font-size {
@@ -38,33 +22,25 @@
 .has-h-2-font-size,
 .has-h-3-font-size,
 .has-h-4-font-size,
+.has-h-5-font-size,
 .has-h-6-font-size {
 	margin-block: 1em;
-	line-height: 1.5;
+	line-height: 1.25;
 	font-weight: 700;
 	font-family: theme.get-var( 'font-families', 'sans-serif' );
 }
 
-.has-h-1-font-size {
-	line-height: 1.1;
-}
+.has-h-1-font-size {}
 
-.has-h-2-font-size {
-	line-height: 1.15;
-}
+.has-h-2-font-size {}
 
-.has-h-3-font-size {
-	line-height: 1.25;
-}
+.has-h-3-font-size {}
 
-.has-h-4-font-size {
-}
+.has-h-4-font-size {}
 
-.has-h-5-font-size {
-}
+.has-h-5-font-size {}
 
-.has-h-6-font-size {
-}
+.has-h-6-font-size {}
 
 // Apply heading level styles to bare h1-6 tags.
 @for $i from 1 through 6 {

theme.json

@@ -20,7 +20,7 @@
 			},
 			"themeColors": {
 				"primary": "var(--wp--custom--colors--purple)",
-				"secondary": "var(--wp--custom--colors--indigo)",
+				"secondary": "var(--wp--custom--colors--blue)",
 				"tertiary": "var(--wp--custom--colors--grey3)",
 				"error": "var(--wp--custom--colors--red)",
 				"warning": "var(--wp--custom--colors--orange)",
@@ -125,7 +125,11 @@
 		"spacing": {
 			"margin": true,
 			"padding": true,
-			"units": [ "rem", "vh", "vw" ]
+			"units": [
+				"rem",
+				"vh",
+				"vw"
+			]
 		},
 		"typography": {
 			"customFontSize": false,