@total_onion/onion-library 1.0.83 → 1.0.85

package/components/block-post-info-v3/post-info-v3.scss

@@ -1,11 +1,10 @@
-// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
 @use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
 @use 'Assets/scss/modules/library-modules/core-functions-v3/core-functions-v3';
 @use 'Assets/scss/theme/breakpoints';
 @use 'Assets/scss/blocks/post-info-v3/post-info-v3-extra';
-@use 'Assets/scss/modules/library-modules/grid-layout-container/grid-layout-container';
-@use 'Assets/scss/modules/library-modules/grid-layout-element/grid-layout-element';
-@use 'Assets/scss/modules/library-modules/element-positioning/element-positioning';
+@use 'Assets/scss/modules/library-modules/grid-layout-container-v3/grid-layout-container-v3';
+@use 'Assets/scss/modules/library-modules/grid-layout-element-v3/grid-layout-element-v3';
+@use 'Assets/scss/modules/library-modules/element-positioning-v3/element-positioning-v3';
 @use 'Assets/scss/modules/library-modules/gradient-overlay/gradient-overlay';
 @use 'Assets/scss/modules/library-modules/social-media-share/social-media-share';
 @use 'Assets/scss/modules/library-modules/better-reviews/better-reviews';
@@ -16,7 +15,7 @@
 	grid-auto-columns: 1fr;
 	grid-template: 'main' / 1fr;
 	@include content-container-settings-v3.contentContainerSettingsV3();
-	@include grid-layout-container.gridLayoutContainer();
+	@include grid-layout-container-v3.gridLayoutContainer();
 	@include social-media-share.social-media-share();
 	@include better-reviews.better-reviews();
 	&__post-cover-link {
@@ -40,7 +39,7 @@
 		border: 0;
 	}
 	&__info-item {
-		@include grid-layout-element.gridLayoutElement();
+		@include grid-layout-element-v3.gridLayoutElement();
 		width: 100%;
 		position: relative;
 	}
@@ -48,22 +47,22 @@
 		width: 100%;
 	}
 	&__cta-selection-container {
-		@include grid-layout-element.gridLayoutElement();
+		@include grid-layout-element-v3.gridLayoutElement();
 	}
 	&__cta {
 		display: flex;
 	}
 	&__cta-style-post-colour,
 	&__cta-style-post-text-colour-style {
-		padding-block: core-functions-v3.fluidSize(10, 'mobile');
-		padding-inline: core-functions-v3.fluidSize(20, 'mobile');
+		padding-block: core-functions-v3.fluidSize(10);
+		padding-inline: core-functions-v3.fluidSize(20);
 		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-			padding-block: core-functions-v3.fluidSize(10, 'portrait');
-			padding-inline: core-functions-v3.fluidSize(20, 'portrait');
+			padding-block: core-functions-v3.fluidSize(10);
+			padding-inline: core-functions-v3.fluidSize(20);
 		}
 		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-			padding-block: core-functions-v3.fluidSize(10, 'desktop');
-			padding-inline: core-functions-v3.fluidSize(20, 'desktop');
+			padding-block: core-functions-v3.fluidSize(10);
+			padding-inline: core-functions-v3.fluidSize(20);
 		}
 	}
 	&__cta-style-post-colour {
@@ -86,7 +85,7 @@
 		pointer-events: none;
 		display: flex;
 		width: auto;
-		@include grid-layout-element.gridLayoutElement();
+		@include grid-layout-element-v3.gridLayoutElement();
 	}
 	&__post-image-container {
 		display: grid;
@@ -96,7 +95,7 @@
 			img,
 			svg {
 				margin: unset;
-				@include element-positioning.elementPositioning();
+				@include element-positioning-v3.elementPositioning();
 			}
 		}
 	}
@@ -110,7 +109,7 @@
 			--image-aspect-ratio-mobile,
 			var(--image-aspect-ratio-desktop)
 		);
-		@include grid-layout-element.gridLayoutElement();
+		@include grid-layout-element-v3.gridLayoutElement();
 		width: var(--post-image-width-mobile);
 
 		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
@@ -171,7 +170,7 @@
 	}
 	&__post-text-alternative-style {
 		width: auto;
-		@include grid-layout-element.gridLayoutElement();
+		@include grid-layout-element-v3.gridLayoutElement();
 	}
 	@include post-info-v3-extra.additionalStyles();
 }

package/components/block-section-separator-v3/section-separator-v3.scss

@@ -1,10 +1,9 @@
-// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
-@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
-@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+@use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
+@use 'Assets/scss/modules/library-modules/core-functions-v3/core-functions-v3';
 @use 'Assets/scss/theme/breakpoints';
 
 .section-separator-v3 {
-	@include core-mixins.responsiveShowHide(grid);
+	@include core-mixins-v3.responsiveShowHide(grid);
 
 	&__separator-image {
 		width: 100%;
@@ -20,15 +19,18 @@
 		place-self: center var(--horizontal-position);
 		translate: var(--horizontal-offset) var(--vertical-offset);
 		top: 0;
-		max-width: core-functions.fluidSize(var(--max-width-mobile), 'mobile');
+		max-width: core-functions-v3.fluidSize(
+			var(--max-width-mobile),
+			'mobile'
+		);
 
-		@include core-mixins.device(breakpoints.$tabPortrait) {
-			max-width: core-functions.fluidSize(
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			max-width: core-functions-v3.fluidSize(
 				var(--max-width-portrait),
 				'portrait'
 			);
-			@include core-mixins.device(breakpoints.$tabLandscape) {
-				max-width: core-functions.fluidSize(
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				max-width: core-functions-v3.fluidSize(
 					var(--max-width-desktop),
 					'desktop'
 				);

package/components/block-single-responsive-image-v3/single-responsive-image-v3.scss

@@ -1,9 +1,7 @@
 @use 'Assets/scss/modules/library-modules/responsive-image/responsive-image';
 @use 'Assets/scss/blocks/single-responsive-image-v3/single-responsive-image-v3-extra';
-@use 'Assets/scss/modules/library-modules/cover-link/cover-link';
 
 .single-responsive-image-v3 {
 	@include responsive-image.responsiveImage();
-	@include cover-link.coverLink();
 	@include single-responsive-image-v3-extra.additionalStyles();
 }

package/components/block-standard-content-v3/standard-content-v3.scss

@@ -1,4 +1,3 @@
-// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
 @use 'Assets/scss/blocks/standard-content-v3/standard-content-v3-extra';
 @use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
 @use 'Assets/scss/modules/library-modules/content-container-v3/content-container-v3';

package/components/block-sub-group-container-v3/sub-group-container-v3.scss

@@ -1,26 +1,20 @@
-// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
-@use 'Assets/scss/modules/library-modules/grid-layout-element/grid-layout-element';
-@use 'Assets/scss/modules/library-modules/grid-layout-container/grid-layout-container';
-@use 'Assets/scss/modules/library-modules/responsive-image/responsive-image';
-// @use 'Assets/scss/modules/library-modules/animations/animations';
+@use 'Assets/scss/modules/library-modules/grid-layout-element-v3/grid-layout-element-v3';
+@use 'Assets/scss/modules/library-modules/grid-layout-container-v3/grid-layout-container-v3';
+@use 'Assets/scss/modules/library-modules/animations-v3/animations-v3';
 @use 'Assets/scss/blocks/sub-group-container-v3/sub-group-container-v3-extra';
-@use 'Assets/scss/modules/library-modules/cover-link/cover-link';
 .sub-group-container-v3 {
-	@include responsive-image.responsiveImage();
-	// @include animations.animations();
-	@include cover-link.coverLink();
-
 	display: grid;
 	grid-template: 'main' / 1fr;
 	place-items: center;
+	@include animations-v3.animations();
 	&__grid-container {
 		grid-area: main;
 		place-self: stretch;
-		@include grid-layout-container.gridLayoutContainer();
+		@include grid-layout-container-v3.gridLayoutContainer();
 	}
 	&__block-container {
-		@include grid-layout-element.gridLayoutElement();
 		z-index: 5;
+		@include grid-layout-element-v3.gridLayoutElement();
 	}
 	@include sub-group-container-v3-extra.additionalStyles();
 }

package/components/component-animations-v3/animations-v3.scss

@@ -0,0 +1,117 @@
+@use 'Assets/scss/modules/library-modules/core-functions-v3/core-functions-v3';
+@mixin animations() {
+	.cmpl-block-animations {
+		--slide-distance-default: 50;
+		@keyframes rotate {
+			from {
+				opacity: 1;
+				rotate: 0deg;
+			}
+			to {
+				opacity: 1;
+				rotate: 360deg;
+			}
+		}
+		@keyframes fade-in {
+			from {
+				opacity: 0;
+			}
+			100% {
+				opacity: 1;
+			}
+		}
+		@keyframes fade-in-left {
+			from {
+				transform: translateX(
+					calc(
+						core-functions-v3.fluidSize(
+							calc(
+								var(
+										--slide-distance,
+										var(--slide-distance-default)
+									) *
+									-1
+							)
+						)
+					)
+				);
+				opacity: 0;
+			}
+			100% {
+				transform: translateX(0%);
+				opacity: 1;
+			}
+		}
+		@keyframes fade-in-right {
+			from {
+				transform: translateX(
+					calc(
+						core-functions-v3.fluidSize(
+							var(--slide-distance, var(--slide-distance-default))
+						)
+					)
+				);
+				opacity: 0;
+			}
+			100% {
+				transform: translateX(0%);
+				opacity: 1;
+			}
+		}
+		@keyframes fade-in-up {
+			from {
+				transform: translateY(
+					calc(
+						core-functions-v3.fluidSize(
+							var(--slide-distance, var(--slide-distance-default))
+						)
+					)
+				);
+				opacity: 0;
+			}
+			100% {
+				transform: translateY(0%);
+				opacity: 1;
+			}
+		}
+		@keyframes fade-in-down {
+			from {
+				transform: translateY(
+					calc(
+						core-functions-v3.fluidSize(
+							calc(
+								var(
+										--slide-distance,
+										var(--slide-distance-default)
+									) *
+									-1
+							)
+						)
+					)
+				);
+				opacity: 0;
+			}
+			100% {
+				transform: translateY(0%);
+				opacity: 1;
+			}
+		}
+		@keyframes scale-in {
+			from {
+				opacity: 1;
+				scale: 0;
+			}
+			100% {
+				opacity: 1;
+				scale: 1;
+			}
+		}
+
+		&.loaded {
+			animation: var(--animation-name) var(--animation-duration)
+				var(--animation-delay) var(--animation-easing)
+				var(--animation-repeat) var(--animation-fill-mode)
+				var(--animation-direction);
+		}
+	}
+}

package/components/component-athena-head-v3/athena-head-v3.twig

@@ -0,0 +1,4 @@
+{{ include('components/noscript.twig', ignore_missing = true) }}
+{{ include('components/core-design-settings-v3.twig', ignore_missing = true) }}
+{{ include('components/speculation-api.twig', ignore_missing = true) }}
+{{ include('components/global-preload.twig', ignore_missing = true) }}

package/components/component-content-container-settings-v3/content-container-settings-v3.scss

@@ -1,6 +1,6 @@
 @use 'Assets/scss/theme/breakpoints';
 @use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
-@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+@use 'Assets/scss/modules/library-modules/core-functions-v3/core-functions-v3';
 @use 'Assets/scss/modules/library-modules/box-shadow/box-shadow';
 
 @mixin contentContainerSettingsV3() {
@@ -22,19 +22,19 @@
 		align-items: center;
 		background-color: var(--cb-bg-colour);
 		padding: calc(
-				var(--global-content-box-padding-block) *
+				var(--global-inline-spacing) *
 					var(--content-box-top-padding-mult-mobile)
 			)
 			calc(
-				var(--global-content-box-padding-inline) *
+				var(--global-inline-spacing) *
 					var(--content-box-right-padding-mult-mobile)
 			)
 			calc(
-				var(--global-content-box-padding-inline) *
+				var(--global-inline-spacing) *
 					var(--content-box-bottom-padding-mult-mobile)
 			)
 			calc(
-				var(--global-content-box-padding-inline) *
+				var(--global-inline-spacing) *
 					var(--content-box-left-padding-mult-mobile)
 			);
 		margin: calc(
@@ -62,19 +62,19 @@
 			place-self: var(--content-box-vert-align-portrait)
 				var(--content-box-horiz-align-portrait);
 			padding: calc(
-					var(--global-content-box-padding-block) *
+					var(--global-inline-spacing) *
 						var(--content-box-top-padding-mult-portrait)
 				)
 				calc(
-					var(--global-content-box-padding-inline) *
+					var(--global-inline-spacing) *
 						var(--content-box-right-padding-mult-portrait)
 				)
 				calc(
-					var(--global-content-box-padding-inline) *
+					var(--global-inline-spacing) *
 						var(--content-box-bottom-padding-mult-portrait)
 				)
 				calc(
-					var(--global-content-box-padding-inline) *
+					var(--global-inline-spacing) *
 						var(--content-box-left-padding-mult-portrait)
 				);
 			margin: calc(
@@ -112,15 +112,15 @@
 						var(--content-box-top-padding-mult)
 				)
 				calc(
-					var(--global-content-box-padding-inline) *
+					var(--global-inline-spacing) *
 						var(--content-box-right-padding-mult)
 				)
 				calc(
-					var(--global-content-box-padding-inline) *
+					var(--global-inline-spacing) *
 						var(--content-box-bottom-padding-mult)
 				)
 				calc(
-					var(--global-content-box-padding-inline) *
+					var(--global-inline-spacing) *
 						var(--content-box-left-padding-mult)
 				);
 			margin: calc(
@@ -149,11 +149,14 @@
 		display: grid;
 		word-break: normal;
 		width: var(--content-container-width, 100%);
-		-webkit-text-stroke: core-functions.fontSize(
+		-webkit-text-stroke: core-functions-v3.fontSize(
 				var(--text-stroke-width),
 				'static'
 			)
 			var(--text-stroke-colour);
+		&:last-child {
+			margin-bottom: 0;
+		}
 		@include core-mixins-v3.defaultThemeTextColours();
 		@include core-mixins-v3.defaultTextTransform();
 		@include core-mixins-v3.defaultTextAlign();
@@ -172,10 +175,6 @@
 			@include core-mixins-v3.defaultFontStyle();
 		}
 
-		&:last-child {
-			margin-bottom: 0;
-		}
-
 		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
 			max-width: var(--wysiwyg-max-width-portrait);
 		}

package/components/component-element-positioning-v3/element-positioning-v3.scss

@@ -1,6 +1,5 @@
 @use 'Assets/scss/theme/breakpoints';
-@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
-@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+@use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
 
 @mixin elementPositioning() {
 	position: var(--element-position, relative);
@@ -11,7 +10,7 @@
 		var(--element-vertical-offset-mobile, 0);
 	rotate: var(--element-rotation-mobile, 0deg);
 
-	@include core-mixins.device(breakpoints.$tabLandscape) {
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
 		place-self: var(--desktop-vertical-placement)
 			var(--desktop-horizontal-placement);
 		translate: var(--element-horizontal-offset-desktop, 0)

package/components/component-gradient-overlay-v3/gradient-overlay-v3.scss

@@ -0,0 +1,45 @@
+// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
+// This is the new version the older mixins should be removed and the blocks use Gradient Overlay mixin instead
+@mixin gradientOverlay() {
+	--spread: calc(100% - var(--gradient-spread));
+	&__gradient-overlay-element {
+		position: absolute;
+		inset: 0;
+		z-index: var(--gradient-zindex);
+		grid-area: var(--gradient-grid-area);
+		&::before,
+		&:after {
+			content: '';
+			pointer-events: none;
+			position: absolute;
+			inset: 0;
+			opacity: var(--gradient-opacity);
+		}
+		&::before {
+			background: linear-gradient(
+				var(--gradient-origin-before),
+				rgba(255, 255, 255, 0) 0%,
+				rgba(255, 255, 255, 0)
+					calc(var(--spread) - var(--gradient-amount)),
+				var(--gradient-colour) calc(100% - var(--gradient-amount))
+			);
+		}
+		&::after {
+			content: var(--enable-after);
+			background: linear-gradient(
+				var(--gradient-origin-after),
+				rgba(255, 255, 255, 0) 0%,
+				rgba(255, 255, 255, 0)
+					calc(var(--spread) - var(--gradient-amount)),
+				var(--gradient-colour) calc(100% - var(--gradient-amount))
+			);
+		}
+	}
+	&__blur-overlay-element {
+		background: var(--blur-colour);
+		backdrop-filter: blur(var(--blur-value));
+		position: absolute;
+		inset: 0;
+		z-index: var(--blur-zindex);
+	}
+}

package/components/component-grid-layout-container-v3/grid-layout-container-v3.scss

@@ -1,12 +1,12 @@
 @use 'Assets/scss/theme/breakpoints';
-@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
-@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+@use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
+@use 'Assets/scss/modules/library-modules/core-functions-v3/core-functions-v3';
 
 @mixin gridLayoutContainer() {
 	display: grid;
 	position: relative;
 	grid-auto-flow: var(--grid-auto-flow-mobile, row);
-	--grid-auto-columns-custom-size: #{core-functions.fluidSize(
+	--grid-auto-columns-custom-size: #{core-functions-v3.fluidSize(
 			var(--grid-auto-columns-custom),
 			'static'
 		)};
@@ -23,7 +23,7 @@
 	grid-template-rows: var(--grid-template-rows-custom-mobile);
 	grid-auto-rows: var(--grid-auto-rows);
 
-	@include core-mixins.device(breakpoints.$tabPortrait) {
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
 		grid-gap: calc(
 				var(--global-inline-spacing) * var(--row-gap-mult-portrait, 0)
 			)
@@ -44,7 +44,7 @@
 		grid-template-rows: var(--grid-template-rows-custom-portrait);
 	}
 
-	@include core-mixins.device(breakpoints.$tabLandscape) {
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
 		grid-gap: calc(
 				var(--global-inline-spacing) * var(--row-gap-mult-desktop, 0)
 			)

package/components/component-grid-layout-element-v3/grid-layout-element-v3.scss

@@ -0,0 +1,25 @@
+@use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
+@use 'Assets/scss/theme/breakpoints';
+
+@mixin gridLayoutElement() {
+	display: grid;
+	grid-row: var(--grid-row-start-mobile) / span var(--grid-row-span-mobile);
+	grid-column: var(--grid-column-start-mobile) / span
+		var(--grid-column-span-mobile);
+	place-self: var(--grid-vertical-placement-mobile)
+		var(--grid-horizontal-placement-mobile);
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		grid-row: var(--grid-row-start-portrait) / span
+			var(--grid-row-span-portrait);
+		grid-column: var(--grid-column-start-portrait) / span
+			var(--grid-column-span-portrait);
+		place-self: var(--grid-vertical-placement-portrait)
+			var(--grid-horizontal-placement-portrait);
+	}
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		grid-row: var(--grid-row-start) / span var(--grid-row-span);
+		grid-column: var(--grid-column-start) / span var(--grid-column-span);
+		place-self: var(--grid-vertical-placement-desktop)
+			var(--grid-horizontal-placement-desktop);
+	}
+}

package/components/fields-block-editor-assets-v3/block-editor-assets-v3.php

@@ -0,0 +1,17 @@
+<?php
+add_action('enqueue_block_assets', 'add_block_editor_assets_v3', 10, true);
+function add_block_editor_assets_v3(): void
+{
+    if (is_admin()) {
+        wp_enqueue_style('core-wordpress-block-editor-previews', gtp_get_asset_uri('corewordpressblockeditorpreviewcss.css'), array(), null);
+        wp_enqueue_script('editorstyles', gtp_get_asset_uri('corewordpressblockeditorpreview.js'), array(), null, true);
+        wp_localize_script('editorstyles', 'previewvars', core_design_system());
+        wp_localize_script('editorstyles', 'corecta', core_cta());
+        wp_localize_script('editorstyles', 'coretypography', core_typography_v3());
+        wp_localize_script('editorstyles', 'corefontmodifiers', core_font_modifiers());
+        wp_localize_script('editorstyles', 'ctastylenames', []);
+        wp_localize_script('editorstyles', 'themenames', []);
+        wp_localize_script('editorstyles', 'corethemes', core_themes());
+        wp_localize_script('editorstyles', 'colourconfig', create_colour_data());
+    }
+}

package/components/fields-core-css-sizing-vars-v3/core-css-sizing-vars-v3.scss

@@ -1,162 +1,96 @@
 // LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
 @use 'Assets/scss/theme/breakpoints';
-@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
-@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
-
-// Do not edit this file directly as it is a library module and
-// any changes will be overwritten by future updates.
+@use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
+@use 'Assets/scss/modules/library-modules/core-functions-v3/core-functions-v3';
 
 body {
 	--screen-width: var(--screen-width-mobile);
 	--font-reference: var(--font-reference-mobile);
 	--design-reference: var(--mobile-design-reference);
-	@include core-mixins.device(breakpoints.$tabPortrait) {
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
 		--screen-width: var(--screen-width-portrait);
 		--font-reference: var(--font-reference-portrait);
 		--design-reference: var(--portrait-design-reference);
 	}
-	@include core-mixins.device(breakpoints.$tabLandscape) {
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
 		--screen-width: var(--screen-width-landscape);
 		--font-reference: var(--font-reference-landscape);
 		--design-reference: var(--landscape-design-reference);
 	}
-	@include core-mixins.device(breakpoints.$desktop) {
+	@include core-mixins-v3.device(breakpoints.$desktop) {
 		--screen-width: var(--screen-width-desktop);
 		--font-reference: var(--font-reference-desktop);
 		--design-reference: var(--desktop-design-reference);
 	}
-	@include core-mixins.device(breakpoints.$desktop-fullhd) {
+	@include core-mixins-v3.device(breakpoints.$desktop-fullhd) {
 		--screen-width: var(--screen-width-fullhd);
 		--font-reference: var(--font-reference-fullhd);
 		--design-reference: var(--fullhd-design-reference);
 	}
 }
 body {
-	//**SPACING VARS**\\
-
-	//Global Inline Spacing
-	--global-inline-spacing: #{core-functions.fluidSize(
+	--global-inline-spacing: #{core-functions-v3.fluidSize(
 			var(--mobile-inline),
 			'mobile'
 		)};
 
-	@include core-mixins.device(breakpoints.$tabPortrait) {
-		--global-inline-spacing: #{core-functions.fluidSize(
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		--global-inline-spacing: #{core-functions-v3.fluidSize(
 				var(--portrait-inline),
 				'portrait'
 			)};
 	}
 
-	@include core-mixins.device(breakpoints.$tabLandscape) {
-		--global-inline-spacing: #{core-functions.fluidSize(
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		--global-inline-spacing: #{core-functions-v3.fluidSize(
 				var(--landscape-inline),
 				'landscape'
 			)};
 	}
 
-	@include core-mixins.device(breakpoints.$desktop) {
-		--global-inline-spacing: #{core-functions.fluidSize(
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		--global-inline-spacing: #{core-functions-v3.fluidSize(
 				var(--desktop-inline),
 				'desktop'
 			)};
 	}
 }
-body {
-	// Content box padding - inline - This setting is intentionally set to the global inline size.
-	// You can override it if you need it to be different (like in Chivas which has a stupid inline size)
-	--global-content-box-padding-inline: #{core-functions.fluidSize(
-			var(--mobile-inline),
-			'mobile'
-		)};
-
-	@include core-mixins.device(breakpoints.$tabPortrait) {
-		--global-content-box-padding-inline: #{core-functions.fluidSize(
-				var(--portrait-inline),
-				'portrait'
-			)};
-	}
 
-	@include core-mixins.device(breakpoints.$tabLandscape) {
-		--global-content-box-padding-inline: #{core-functions.fluidSize(
-				var(--landscape-inline),
-				'landscape'
-			)};
-	}
-
-	@include core-mixins.device(breakpoints.$desktop) {
-		--global-content-box-padding-inline: #{core-functions.fluidSize(
-				var(--desktop-inline),
-				'desktop'
-			)};
-	}
-}
-body {
-	//Content box padding - block
-	--global-content-box-padding-block: #{core-functions.fluidSize(
-			var(--mobile-inline),
-			'mobile'
-		)};
-
-	@include core-mixins.device(breakpoints.$tabPortrait) {
-		--global-content-box-padding-block: #{core-functions.fluidSize(
-				var(--portrait-inline),
-				'portrait'
-			)};
-	}
-
-	@include core-mixins.device(breakpoints.$tabLandscape) {
-		--global-content-box-padding-block: #{core-functions.fluidSize(
-				var(--landscape-inline),
-				'landscape'
-			)};
-	}
-
-	@include core-mixins.device(breakpoints.$desktop) {
-		--global-content-box-padding-block: #{core-functions.fluidSize(
-				var(--desktop-inline),
-				'desktop'
-			)};
-	}
-}
 body {
-	//Heading block Spacing
 	--heading-block-spacing: var(--heading-block-spacing-mobile);
 
-	@include core-mixins.device(breakpoints.$tabPortrait) {
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
 		--heading-block-spacing: var(--heading-block-spacing-portrait);
 	}
 
-	@include core-mixins.device(breakpoints.$tabLandscape) {
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
 		--heading-block-spacing: var(--heading-block-spacing-desktop);
 	}
 }
 body {
-	//Paragraph block spacing
 	--paragraph-block-spacing: var(--paragraph-block-spacing-mobile);
 
-	@include core-mixins.device(breakpoints.$tabPortrait) {
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
 		--paragraph-block-spacing: var(--paragraph-block-spacing-portrait);
 	}
 
-	@include core-mixins.device(breakpoints.$tabLandscape) {
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
 		--paragraph-block-spacing: var(--paragraph-block-spacing-desktop);
 	}
 }
 body {
-	//List Item block spacing
 	--list-item-block-spacing: var(--list-item-block-spacing-mobile);
 
-	@include core-mixins.device(breakpoints.$tabPortrait) {
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
 		--list-item-block-spacing: var(--list-item-block-spacing-portrait);
 	}
 
-	@include core-mixins.device(breakpoints.$tabLandscape) {
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
 		--list-item-block-spacing: var(--list-item-block-spacing-desktop);
 	}
 }
 body {
-	//Max width to restrict the main container if desired.
-	--global-content-max-width: #{core-functions.fluidSize(
+	--global-content-max-width: #{core-functions-v3.fluidSize(
 			var(--global-content-max-width-setting),
 			'static'
 		)};

package/components/fields-core-design-settings-v3/core-design-settings-v3.twig

@@ -0,0 +1,6 @@
+{{function('core_critical_css').0}}
+{{function('core_design_system').0}}
+{{function('core_typography_v3').0}}
+{{function('core_font_modifiers').0}}
+{{function('core_themes').0}}
+{{function('core_cta').0}}

package/components/fields-core-design-system-v3/core-design-system-v3.php

@@ -0,0 +1,44 @@
+<?php
+// @codingStandardsIgnoreStart
+function core_design_system_v3()
+{
+    $output = '';
+    $current_post = [];
+    if (isset($GLOBALS['post'])) {
+        $current_post = Timber::get_post($GLOBALS['post']->ID);
+    }
+    if (defined('GLOBAL_SETTINGS') && is_array(GLOBAL_SETTINGS)) {
+        $options = GLOBAL_SETTINGS;
+        if ($options) {
+            $output = '
+            <style id="core-design-system">
+            :root { 
+                --mobile-inline:' . ($options['mobile_inline'] ?? 0) . '; 
+                --portrait-inline:' . ($options['portrait_inline'] ?? 0) . '; 
+                --landscape-inline:' . ($options['landscape_inline'] ?? 0) . '; 
+                --desktop-inline:' . ($options['desktop_inline'] ?? 0) . '; 
+                --screen-width-fullhd:' . ($options['screen_width_full_hd'] ?? 1920) . ';
+                --font-reference-fullhd:' . ($options['font_reference_full_hd'] ?? 1920) . ';
+                --screen-width-desktop:' . ($options['screen_width_desktop'] ?? 1440) . ';
+                --font-reference-desktop:' . ($options['font_reference_desktop'] ?? 1440) . ';
+                --screen-width-landscape:' . ($options['screen_width_landscape'] ?? 1024) . ';
+                --font-reference-landscape:' . ($options['font_reference_landscape'] ?? 1024) . ';
+                --screen-width-portrait:' . ($options['screen_width_portrait'] ?? 768) . ';
+                --font-reference-portrait:' . ($options['font_reference_portrait'] ?? 768) . ';
+                --font-reference-mobile:' . ($options['font_reference_mobile'] ?? 375) . ';
+                --screen-width-mobile:' . ($options['screen_width_mobile'] ?? 375) . ';
+                --screen-width-static:' . ($options['desktop_design_reference'] ?? 1920) . 'px;
+                --fullhd-design-reference:' . ($options['full_hd_design_reference'] ?? 1920) . ';
+                --desktop-design-reference:' . ($options['desktop_design_reference'] ?? 1440) . ';
+                --landscape-design-reference:' . ($options['landscape_design_reference'] ?? 1024) . ';
+                --portrait-design-reference:' . ($options['portrait_design_reference'] ?? 1024) . ';
+                --mobile-design-reference:' . ($options['mobile_design_reference'] ?? 1024) . ';
+                --global-content-max-width-setting:' . ($options['global_content_max_width_setting'] ?? 1024) . ';
+                --post-colour:' . ($current_post && (property_exists($current_post, 'meta') && isset($current_post->meta['post_colour'])) ? $current_post->meta['post_colour'] : '') . ';
+                --post-text-colour-style:' .  ($current_post && (property_exists($current_post, 'meta') && isset($current_post->meta['post_text_colour_style'])) ? remove_underscore($current_post->meta['post_text_colour_style']) : '') . ';
+                }</style>';
+        }
+    }
+    return [$output];
+} // END function core_design_vars
+// @codingStandardsIgnoreEnd

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

@@ -24,8 +24,8 @@ h5,
 h6 {
 	margin: 0; //reset default margin
 	font-weight: unset; //reset default font weight
-	@include core-typography-mixins-v3.fontPrimary();
 	margin-top: unset;
+	@include core-typography-mixins-v3.fontPrimary();
 }
 .override-element-styles {
 	h1,

package/package.json

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