@total_onion/onion-library 1.0.83 → 1.0.84

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-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,7 +149,7 @@
 		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'
 			)

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-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-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/package.json

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