@total_onion/onion-library 3.0.37 → 3.0.40

package/components/component-block-padding-v3/block-padding-v3.scss

@@ -3,60 +3,60 @@
 @use '../../breakpoints';
 
 @mixin blockPadding() {
-	@layer base-styles {
+	@layer components {
 		.cmpl-block-padding {
 			padding: calc(
 					var(--global-inline-spacing) *
-						var(--padding-block-multiplier-mobile-top)
+						var(--padding-block-multiplier-mobile-top, 0)
 				)
 				calc(
 					var(--global-inline-spacing) *
-						var(--padding-inline-multiplier-mobile-right)
+						var(--padding-inline-multiplier-mobile-right, 0)
 				)
 				calc(
 					var(--global-inline-spacing) *
-						var(--padding-block-multiplier-mobile-bottom)
+						var(--padding-block-multiplier-mobile-bottom, 0)
 				)
 				calc(
 					var(--global-inline-spacing) *
-						var(--padding-inline-multiplier-mobile-left)
+						var(--padding-inline-multiplier-mobile-left, 0)
 				);
 
 			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
 				padding: calc(
 						var(--global-inline-spacing) *
-							var(--padding-block-multiplier-portrait-top)
+							var(--padding-block-multiplier-portrait-top, 0)
 					)
 					calc(
 						var(--global-inline-spacing) *
-							var(--padding-inline-multiplier-portrait-right)
+							var(--padding-inline-multiplier-portrait-right, 0)
 					)
 					calc(
 						var(--global-inline-spacing) *
-							var(--padding-block-multiplier-portrait-bottom)
+							var(--padding-block-multiplier-portrait-bottom, 0)
 					)
 					calc(
 						var(--global-inline-spacing) *
-							var(--padding-inline-multiplier-portrait-left)
+							var(--padding-inline-multiplier-portrait-left, 0)
 					);
 			}
 
 			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
 				padding: calc(
 						var(--global-inline-spacing) *
-							var(--padding-block-multiplier-desktop-top)
+							var(--padding-block-multiplier-desktop-top, 0)
 					)
 					calc(
 						var(--global-inline-spacing) *
-							var(--padding-inline-multiplier-desktop-right)
+							var(--padding-inline-multiplier-desktop-right, 0)
 					)
 					calc(
 						var(--global-inline-spacing) *
-							var(--padding-block-multiplier-desktop-bottom)
+							var(--padding-block-multiplier-desktop-bottom, 0)
 					)
 					calc(
 						var(--global-inline-spacing) *
-							var(--padding-inline-multiplier-desktop-left)
+							var(--padding-inline-multiplier-desktop-left, 0)
 					);
 			}
 		}

package/components/component-block-settings-v3/block-settings-v3.scss

@@ -6,38 +6,38 @@
 	@layer components {
 		.cmpl-block-settings {
 			min-height: core-functions-v3.fluidSize(
-				var(--block-min-height-mobile),
+				var(--block-min-height-mobile, 0),
 				'mobile'
 			);
 			height: var(--block-height-mobile, auto);
 			overflow: var(--block-overflow, hidden);
 			border-radius: var(--block-border-radius);
 			position: var(--block-position-type, relative);
-			z-index: var(--block-z-index);
-			top: var(--block-position-top);
-			right: var(--block-position-right);
-			bottom: var(--block-position-bottom);
-			left: var(--block-position-left);
-			background-color: var(--block-background-colour);
-			pointer-events: var(--block-pointer-events);
-			aspect-ratio: var(--block-aspect-ratio-mobile);
+			z-index: var(--block-z-index, 5);
+			top: var(--block-position-top, unset);
+			right: var(--block-position-right, unset);
+			bottom: var(--block-position-bottom, unset);
+			left: var(--block-position-left, unset);
+			background-color: var(--block-background-colour, transparent);
+			pointer-events: var(--block-pointer-events, all);
+			aspect-ratio: var(--block-aspect-ratio-mobile, unset);
 			.wp-admin & {
 				position: relative;
 			}
 
 			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
 				height: var(--block-height-portrait, auto);
-				aspect-ratio: var(--block-aspect-ratio-portrait);
+				aspect-ratio: var(--block-aspect-ratio-portrait, unset);
 				min-height: core-functions-v3.fluidSize(
-					var(--block-min-height-portrait),
+					var(--block-min-height-portrait, 0),
 					'portrait'
 				);
 			}
 			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
 				height: var(--block-height-desktop, auto);
-				aspect-ratio: var(--block-aspect-ratio);
+				aspect-ratio: var(--block-aspect-ratio, unset);
 				min-height: core-functions-v3.fluidSize(
-					var(--block-min-height-desktop),
+					var(--block-min-height-desktop, 0),
 					'landscape'
 				);
 			}

package/components/fields-core-typography-mixins-v3/core-typography-mixins-v3.scss

@@ -800,7 +800,7 @@
 	);
 }
 @mixin p-s {
-	line-height: var(--paragraph-line-height);
+	line-height: var(--paragraph-small-line-height);
 	letter-spacing: var(--paragraph-letter-spacing);
 	font-family: var(--paragraph-font-family);
 
@@ -854,9 +854,9 @@
 	);
 }
 @mixin p-xs {
-	line-height: var(--paragraph-line-height);
+	line-height: var(--paragraph-extra-small-line-height);
 	letter-spacing: var(--paragraph-letter-spacing);
-	font-family: var(--paragraph-font-family);
+	font-family: var(--paragraph-extra-small-line-height);
 
 	strong,
 	b {
@@ -865,7 +865,7 @@
 
 	&:has(.font-tertiary) {
 		line-height: calc(
-			var(--paragraph-line-height) *
+			var(--paragraph-extra-small-line-height) *
 				var(--global-line-height-multiplier-tertiary)
 		);
 	}
@@ -908,7 +908,7 @@
 	);
 }
 @mixin p-xs {
-	line-height: var(--paragraph-line-height);
+	line-height: var(--paragraph-extra-small-line-height);
 	letter-spacing: var(--paragraph-letter-spacing);
 	font-family: var(--paragraph-font-family);
 
@@ -919,7 +919,7 @@
 
 	&:has(.font-tertiary) {
 		line-height: calc(
-			var(--paragraph-line-height) *
+			var(--paragraph-extra-small-line-height) *
 				var(--global-line-height-multiplier-tertiary)
 		);
 	}
@@ -962,7 +962,7 @@
 	);
 }
 @mixin p-xxs {
-	line-height: var(--paragraph-line-height);
+	line-height: var(--paragraph-extra-extra-small-line-height);
 	letter-spacing: var(--paragraph-letter-spacing);
 	font-family: var(--paragraph-font-family);
 

package/onion-utils.mjs

@@ -114,6 +114,64 @@ export function checkDevice() {
 	try {
 		const deviceAgent = navigator.userAgent.toLowerCase();
 		const htmlElement = document.querySelector("html");
+
+		if (!htmlElement) return;
+
+		const platformRaw = navigator.platform?.toLowerCase() || "";
+		const isDesktop =
+			deviceAgent.includes("windows") ||
+			deviceAgent.includes("macintosh") ||
+			platformRaw.includes("win") ||
+			platformRaw.includes("mac");
+
+		function browserCheck() {
+			if (navigator.userAgent.search("MSIE") >= 0) {
+				htmlElement.classList.add("ie");
+			} else if (navigator.userAgent.search("Edge") >= 0) {
+				htmlElement.classList.add("edge-legacy");
+			} else if (navigator.userAgent.search("Chrome") >= 0) {
+				htmlElement.classList.add("chrome");
+			} else if (navigator.userAgent.search("Firefox") >= 0) {
+				htmlElement.classList.add("firefox");
+			} else if (
+				navigator.userAgent.search("Safari") >= 0 &&
+				navigator.userAgent.search("Chrome") < 0
+			) {
+				htmlElement.classList.add("safari");
+			} else if (navigator.userAgent.search("Opera") >= 0) {
+				htmlElement.classList.add("opera");
+			}
+		}
+
+		if (isDesktop) {
+			// add platform classes (e.g. macintel, win32)
+			if (navigator.platform) {
+				let platform = navigator.platform.toLowerCase();
+				let platformArray = [platform];
+
+				if (platform.includes("-")) {
+					platformArray = platform.split("-");
+				}
+
+				if (platform.includes(" ")) {
+					platformArray = platform.split(" ");
+				}
+
+				htmlElement.classList.add(...platformArray);
+			}
+
+			if (deviceAgent.match(/(windows)/)) {
+				htmlElement.classList.add("windows");
+			}
+
+			if (deviceAgent.match(/(macintosh)/)) {
+				htmlElement.classList.add("mac");
+			}
+
+			browserCheck();
+			return;
+		}
+
 		if (
 			"ontouchstart" in globalThis &&
 			window.screen.width * window.devicePixelRatio >= 2048 &&
@@ -121,52 +179,40 @@ export function checkDevice() {
 		) {
 			htmlElement.classList.add("highResTabletPortrait");
 		}
+
 		if ("ontouchstart" in globalThis) {
 			htmlElement.classList.add("touch");
 		}
+
 		if (navigator.connection) {
 			htmlElement.classList.add(navigator.connection.effectiveType);
 		}
+
 		if (navigator.platform) {
 			let platform = navigator.platform.toLowerCase();
 			let platformArray = [platform];
-			if (platform.search("-")) {
+
+			if (platform.includes("-")) {
 				platformArray = platform.split("-");
 			}
-			if (platform.search(" ")) {
+
+			if (platform.includes(" ")) {
 				platformArray = platform.split(" ");
 			}
+
 			htmlElement.classList.add(...platformArray);
 		}
+
 		if (deviceAgent.match(/(iphone|ipod|ipad)/)) {
 			htmlElement.classList.add("ios");
 			htmlElement.classList.add("mobile");
 		}
-		if (deviceAgent.match(/(windows)/)) {
-			htmlElement.classList.add("windows");
-		}
-		if (deviceAgent.match(/(macintosh)/)) {
-			htmlElement.classList.add("mac");
-		}
+
 		if (deviceAgent.match(/(android)/)) {
 			htmlElement.classList.add("android");
 		}
-		if (navigator.userAgent.search("MSIE") >= 0) {
-			htmlElement.classList.add("ie");
-		} else if (navigator.userAgent.search("Edge") >= 0) {
-			htmlElement.classList.add("edge-legacy");
-		} else if (navigator.userAgent.search("Chrome") >= 0) {
-			htmlElement.classList.add("chrome");
-		} else if (navigator.userAgent.search("Firefox") >= 0) {
-			htmlElement.classList.add("firefox");
-		} else if (
-			navigator.userAgent.search("Safari") >= 0 &&
-			navigator.userAgent.search("Chrome") < 0
-		) {
-			htmlElement.classList.add("safari");
-		} else if (navigator.userAgent.search("Opera") >= 0) {
-			htmlElement.classList.add("opera");
-		}
+
+		browserCheck();
 	} catch (error) {
 		console.error(error);
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@total_onion/onion-library",
-	"version": "3.0.37",
+	"version": "3.0.40",
 	"description": "Component library",
 	"main": "index.js",
 	"scripts": {