@total_onion/onion-library 1.0.82 → 1.0.84

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

@@ -1,4 +1,7 @@
 @use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
+@use 'Assets/scss/modules/library-modules/core-typography-mixins-v3/core-typography-mixins-v3';
+@use 'Assets/scss/modules/library-modules/core-functions-v3/core-functions-v3';
+@use 'Assets/scss/theme/breakpoints';
 @use 'sass:math';
 
 /* Box sizing rules */
@@ -10,7 +13,7 @@
 
 //***** TYPOGRAPHY *****\\
 body {
-	@include core-mixins-v3.fontSecondary();
+	@include core-typography-mixins-v3.fontSecondary();
 }
 
 h1,
@@ -21,7 +24,7 @@ h5,
 h6 {
 	margin: 0; //reset default margin
 	font-weight: unset; //reset default font weight
-	@include core-mixins-v3.fontPrimary();
+	@include core-typography-mixins-v3.fontPrimary();
 	margin-top: unset;
 }
 .override-element-styles {
@@ -57,141 +60,141 @@ h6 {
 	}
 }
 
-h1 {
-	@include core-mixins-v3.h1();
-
-	&:has(.font-tertiary) {
-		line-height: calc(
-			var(--h1-line-height) *
-				var(--global-line-height-multiplier-tertiary)
-		);
-	}
-}
-
-h2 {
-	@include core-mixins-v3.h2();
-
-	&:has(.font-tertiary) {
-		line-height: calc(
-			var(--h2-line-height) *
-				var(--global-line-height-multiplier-tertiary)
-		);
-	}
-}
-
-h3 {
-	@include core-mixins-v3.h3();
-
-	&:has(.font-tertiary) {
-		line-height: calc(
-			var(--h3-line-height) *
-				var(--global-line-height-multiplier-tertiary)
-		);
-	}
-}
-
-h4 {
-	@include core-mixins-v3.h4();
-
-	&:has(.font-tertiary) {
-		line-height: calc(
-			var(--h4-line-height) *
-				var(--global-line-height-multiplier-tertiary)
-		);
-	}
-}
-
-h5 {
-	@include core-mixins-v3.h5();
-
-	&:has(.font-tertiary) {
-		line-height: calc(
-			var(--h5-line-height) *
-				var(--global-line-height-multiplier-tertiary)
-		);
-	}
-}
-
-h6 {
-	@include core-mixins-v3.h6();
-
-	&:has(.font-tertiary) {
-		line-height: calc(
-			var(--h6-line-height) *
-				var(--global-line-height-multiplier-tertiary)
-		);
-	}
-}
-
-.sh1-sizing {
-	@include core-mixins-v3.sh1();
-
-	&:has(.font-tertiary) {
-		line-height: calc(
-			var(--sh1-line-height) *
-				var(--global-line-height-multiplier-tertiary)
-		);
-	}
-}
-
-.sh2-sizing {
-	@include core-mixins-v3.sh2();
-
-	&:has(.font-tertiary) {
-		line-height: calc(
-			var(--h2-line-height) *
-				var(--global-line-height-multiplier-tertiary)
-		);
-	}
-}
-
-.sh3-sizing {
-	@include core-mixins-v3.sh3();
-
-	&:has(.font-tertiary) {
-		line-height: calc(
-			var(--sh3-line-height) *
-				var(--global-line-height-multiplier-tertiary)
-		);
-	}
-}
-
-.sh4-sizing {
-	@include core-mixins-v3.sh4();
-
-	&:has(.font-tertiary) {
-		line-height: calc(
-			var(--sh4-line-height) *
-				var(--global-line-height-multiplier-tertiary)
-		);
-	}
-}
-
-.sh5-sizing {
-	@include core-mixins-v3.sh5();
-
-	&:has(.font-tertiary) {
-		line-height: calc(
-			var(--sh5-line-height) *
-				var(--global-line-height-multiplier-tertiary)
-		);
-	}
-}
-
-.sh6-sizing {
-	@include core-mixins-v3.sh6();
-
-	&:has(.font-tertiary) {
-		line-height: calc(
-			var(--sh6-line-height) *
-				var(--global-line-height-multiplier-tertiary)
-		);
-	}
-}
+// // h1 {
+// // 	@include core-mixins-v3.h1();
+
+// // 	&:has(.font-tertiary) {
+// // 		line-height: calc(
+// // 			var(--h1-line-height) *
+// // 				var(--global-line-height-multiplier-tertiary)
+// // 		);
+// // 	}
+// // }
+
+// // h2 {
+// // 	@include core-mixins-v3.h2();
+
+// // 	&:has(.font-tertiary) {
+// // 		line-height: calc(
+// // 			var(--h2-line-height) *
+// // 				var(--global-line-height-multiplier-tertiary)
+// // 		);
+// // 	}
+// // }
+
+// // h3 {
+// // 	@include core-mixins-v3.h3();
+
+// // 	&:has(.font-tertiary) {
+// // 		line-height: calc(
+// // 			var(--h3-line-height) *
+// // 				var(--global-line-height-multiplier-tertiary)
+// // 		);
+// // 	}
+// // }
+
+// // h4 {
+// // 	@include core-mixins-v3.h4();
+
+// // 	&:has(.font-tertiary) {
+// // 		line-height: calc(
+// // 			var(--h4-line-height) *
+// // 				var(--global-line-height-multiplier-tertiary)
+// // 		);
+// // 	}
+// // }
+
+// // h5 {
+// // 	@include core-mixins-v3.h5();
+
+// // 	&:has(.font-tertiary) {
+// // 		line-height: calc(
+// // 			var(--h5-line-height) *
+// // 				var(--global-line-height-multiplier-tertiary)
+// // 		);
+// // 	}
+// // }
+
+// // h6 {
+// // 	@include core-mixins-v3.h6();
+
+// // 	&:has(.font-tertiary) {
+// // 		line-height: calc(
+// // 			var(--h6-line-height) *
+// // 				var(--global-line-height-multiplier-tertiary)
+// // 		);
+// // 	}
+// // }
+
+// // .sh1-sizing {
+// // 	@include core-mixins-v3.sh1();
+
+// // 	&:has(.font-tertiary) {
+// // 		line-height: calc(
+// // 			var(--sh1-line-height) *
+// // 				var(--global-line-height-multiplier-tertiary)
+// // 		);
+// // 	}
+// // }
+
+// // .sh2-sizing {
+// // 	@include core-mixins-v3.sh2();
+
+// // 	&:has(.font-tertiary) {
+// // 		line-height: calc(
+// // 			var(--h2-line-height) *
+// // 				var(--global-line-height-multiplier-tertiary)
+// // 		);
+// // 	}
+// // }
+
+// // .sh3-sizing {
+// // 	@include core-mixins-v3.sh3();
+
+// // 	&:has(.font-tertiary) {
+// // 		line-height: calc(
+// // 			var(--sh3-line-height) *
+// // 				var(--global-line-height-multiplier-tertiary)
+// // 		);
+// // 	}
+// // }
+
+// // .sh4-sizing {
+// // 	@include core-mixins-v3.sh4();
+
+// // 	&:has(.font-tertiary) {
+// // 		line-height: calc(
+// // 			var(--sh4-line-height) *
+// // 				var(--global-line-height-multiplier-tertiary)
+// // 		);
+// // 	}
+// // }
+
+// // .sh5-sizing {
+// // 	@include core-mixins-v3.sh5();
+
+// // 	&:has(.font-tertiary) {
+// // 		line-height: calc(
+// // 			var(--sh5-line-height) *
+// // 				var(--global-line-height-multiplier-tertiary)
+// // 		);
+// // 	}
+// // }
+
+// // .sh6-sizing {
+// // 	@include core-mixins-v3.sh6();
+
+// // 	&:has(.font-tertiary) {
+// // 		line-height: calc(
+// // 			var(--sh6-line-height) *
+// // 				var(--global-line-height-multiplier-tertiary)
+// // 		);
+// // 	}
+// // }
 
 p {
 	margin: 0; //reset default margin
-	@include core-mixins-v3.p();
+	@include core-typography-mixins-v3.p();
 }
 
 a:not([class*='cmpl-cta-style-']) {
@@ -258,7 +261,7 @@ ul {
 	list-style-type: disc;
 }
 li {
-	@include core-mixins-v3.p-medium();
+	@include core-typography-mixins-v3.p();
 }
 ol {
 	padding: 0; //reset default padding
@@ -279,95 +282,371 @@ ol {
 	}
 }
 .font-primary {
-	@include core-mixins-v3.fontPrimary();
+	@include core-typography-mixins-v3.fontPrimary();
 }
 .font-secondary {
-	@include core-mixins-v3.fontSecondary();
+	@include core-typography-mixins-v3.fontSecondary();
 }
 .font-tertiary {
-	@include core-mixins-v3.fontTertiary();
+	@include core-typography-mixins-v3.fontTertiary();
 }
 .font-quaternary {
-	@include core-mixins-v3.fontQuaternary();
+	@include core-typography-mixins-v3.fontQuaternary();
 }
 .h1-l-sizing,
 .h-extra-large {
-	@include core-mixins-v3.h-x-large();
+	@include core-typography-mixins-v3.h-xl();
+	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.h-xl-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.h-xl-size();
+		}
+	}
+	&-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.h-xl-size();
+		}
+	}
 }
 .h1-sizing,
 .h-large {
-	@include core-mixins-v3.h-large();
+	@include core-typography-mixins-v3.h-l();
+	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.h-l-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.h-l-size();
+		}
+	}
+	&-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.h-l-size();
+		}
+	}
 }
-
 .h2-sizing,
 .h-medium {
-	@include core-mixins-v3.h-medium();
+	@include core-typography-mixins-v3.h-m();
 	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.h-m-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.h-m-size();
+		}
+	}
+	&-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.h-m-size();
+		}
 	}
 }
 .h3-sizing,
 .h-small {
-	@include core-mixins-v3.h-small();
+	@include core-typography-mixins-v3.h-s();
+	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.h-s-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.h-s-size();
+		}
+	}
+	&-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.h-s-size();
+		}
+	}
 }
 .h4-sizing,
 .h-xsmall {
-	@include core-mixins-v3.h-x-small();
+	@include core-typography-mixins-v3.h-xs();
+	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.h-xs-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.h-xs-size();
+		}
+	}
+	&-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.h-xs-size();
+		}
+	}
 }
 .h5-sizing,
 .h-xxsmall {
-	@include core-mixins-v3.h-xx-small();
+	@include core-typography-mixins-v3.h-xxs();
+	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.h-xxs-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.h-xxs-size();
+		}
+	}
+	&-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.h-xxs-size();
+		}
+	}
 }
 .h6-sizing,
 .h-xxxsmall {
-	@include core-mixins-v3.h-xxx-small();
+	@include core-typography-mixins-v3.h-xxxs();
+	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.h-xxxs-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.h-xxxs-size();
+		}
+	}
+	&-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.h-xxxs-size();
+		}
+	}
 }
 .sh1-sizing,
 .sh-extra-large {
-	@include core-mixins-v3.sh-x-large();
+	@include core-typography-mixins-v3.sh-xl();
+	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.sh-xl-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.sh-xl-size();
+		}
+	}
+	&-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.sh-xl-size();
+		}
+	}
 }
 
 .sh2-sizing,
 .sh-large {
-	@include core-mixins-v3.sh-large();
+	@include core-typography-mixins-v3.sh-l();
+	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.sh-l-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.sh-l-size();
+		}
+	}
+	&-desktop {
+		@media (#{breakpoints.$tabLandscape} <= width) {
+			// @include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.sh-l-size();
+		}
+	}
 }
-
 .sh3-sizing,
 .sh-medium {
-	@include core-mixins-v3.sh-medium();
+	@include core-typography-mixins-v3.sh-m();
+	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.sh-m-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.sh-m-size();
+		}
+	}
+	&-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.sh-m-size();
+		}
+	}
 }
-
 .sh4-sizing,
 .sh-small {
-	@include core-mixins-v3.sh-small();
+	@include core-typography-mixins-v3.sh-s();
+	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.sh-s-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.sh-s-size();
+		}
+	}
+	&-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.sh-s-size();
+		}
+	}
 }
-
 .sh5-sizing,
 .sh-xsmall {
-	@include core-mixins-v3.sh-x-small();
+	@include core-typography-mixins-v3.sh-xs();
+	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.sh-xs-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.sh-xs-size();
+		}
+	}
+	&-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.sh-xs-size();
+		}
+	}
 }
-
 .sh6-sizing,
 .sh-xxsmall {
-	@include core-mixins-v3.sh-xx-small();
+	@include core-typography-mixins-v3.sh-xxs();
+	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.sh-xxs-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.sh-xxs-size();
+		}
+	}
+	&-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.sh-xxs-size();
+		}
+	}
 }
-
 .p-l-sizing {
-	@include core-mixins-v3.p-large();
+	@include core-typography-mixins-v3.p-l();
+	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.p-l-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.p-l-size();
+		}
+	}
+	&-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.p-l-size();
+		}
+	}
 }
 .p-sizing {
-	@include core-mixins-v3.p-medium();
+	@include core-typography-mixins-v3.p();
+	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.p-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.p-size();
+		}
+	}
+	&-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.p-size();
+		}
+	}
 }
 .p-s-sizing {
-	@include core-mixins-v3.p-small();
+	@include core-typography-mixins-v3.p-s();
+	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.p-s-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.p-s-size();
+		}
+	}
+	&-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.p-s-size();
+		}
+	}
 }
 .p-xs-sizing {
-	@include core-mixins-v3.p-x-small();
+	@include core-typography-mixins-v3.p-xs();
+	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.p-xs-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.p-xs-size();
+		}
+	}
+	&-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.p-xs-size();
+		}
+	}
 }
-
 .p-xxs-sizing {
-	@include core-mixins-v3.p-xxs();
+	@include core-typography-mixins-v3.p-xxs();
+	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.p-xxs-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.p-xxs-size();
+		}
+	}
+	&-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.p-xxs-size();
+		}
+	}
 }
-
 .p-xxxs-sizing {
-	@include core-mixins-v3.p-xxxs();
+	@include core-typography-mixins-v3.p-xxxs();
+	&-mobile {
+		@media ( width <= #{breakpoints.$tabPortrait}) {
+			@include core-typography-mixins-v3.p-xxxs-size();
+		}
+	}
+	&-portrait {
+		@media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
+			@include core-typography-mixins-v3.p-xxxs-size();
+		}
+	}
+	&-desktop {
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			@include core-typography-mixins-v3.p-xxxs-size();
+		}
+	}
 }