@proximus/lavender-styling 2.0.0-alpha.21 → 2.0.0-alpha.210

package/dist/js/scarlet/themesTokens.js

@@ -23,209 +23,211 @@ export const ColorBackgroundDataRed = "#B30000";
 export const ColorBackgroundDataMagenta = "#FF418C";
 export const ColorBackgroundDataBlue = "#016BC1";
 export const ColorBackgroundDataTurquoise = "#66D2CC";
+export const ColorBackgroundFooterSitemapDefault = "rgba(230, 31, 19, 0.80)";
+export const ColorBackgroundFooterSitemapInverted = "#ffffff";
 export const ColorBackgroundGradientPurpleTopRed = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#EE2E5D", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleTopMagenta = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#FF418C", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleTopOrange = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#F39200", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleTopBlue = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#00BCEE", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleTopTurquoise = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#66D2CC", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleTopGreen = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#81C747", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleRightRed = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#EE2E5D", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleRightMagenta = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#FF418C", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleRightOrange = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#F39200", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleRightBlue = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#00BCEE", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleRightTurquoise = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#66D2CC", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleRightGreen = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#81C747", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleTopRightRed = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#EE2E5D", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleTopRightMagenta = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#FF418C", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleTopRightOrange = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#F39200", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleTopRightBlue = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#00BCEE", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleTopRightTurquoise = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#66D2CC", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleTopRightGreen = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#81C747", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleBottomRightRed = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#EE2E5D", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleBottomRightMagenta = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#FF418C", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleBottomRightOrange = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#F39200", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleBottomRightBlue = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#00BCEE", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleBottomRightTurquoise = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#66D2CC", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientPurpleBottomRightGreen = [
-  { color: "#5C2D91", position: 0.66 },
-  { color: "#81C747", position: 1 },
+  { color: "#E61F13", position: 0.66 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientColorTopRed = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#EE2E5D", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorTopMagenta = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#FF418C", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorTopOrange = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#F39200", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorTopBlue = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#00BCEE", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorTopTurquoise = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#66D2CC", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorTopGreen = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#81C747", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorRightRed = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#EE2E5D", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorRightMagenta = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#FF418C", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorRightOrange = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#F39200", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorRightBlue = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#00BCEE", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorRightTurquoise = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#66D2CC", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorRightGreen = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#81C747", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorTopRightRed = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#EE2E5D", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorTopRightMagenta = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#FF418C", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorTopRightOrange = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#F39200", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorTopRightBlue = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#00BCEE", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorTopRightTurquoise = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#66D2CC", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorTopRightGreen = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#81C747", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorBottomRightRed = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#EE2E5D", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorBottomRightMagenta = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#FF418C", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorBottomRightOrange = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#F39200", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorBottomRightBlue = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#00BCEE", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorBottomRightTurquoise = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#66D2CC", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientColorBottomRightGreen = [
-  { color: "#5C2D91", position: 0.03 },
-  { color: "#81C747", position: 0.66 },
+  { color: "#E61F13", position: 0.03 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundGradientPickx = [
   { color: "#000000", position: 0.66 },
-  { color: "#5C2D91", position: 1 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientNxt = [
   { color: "#000000", position: 0.66 },
-  { color: "#5C2D91", position: 1 },
+  { color: "#E61F13", position: 1 },
 ];
 export const ColorBackgroundGradientSme = [
   { color: "#000000", position: 0.03 },
-  { color: "#5C2D91", position: 0.66 },
+  { color: "#E61F13", position: 0.66 },
 ];
 export const ColorBackgroundNone = "rgba(255, 255, 255, 0.00)";
 export const ColorBackgroundOverlayMain = "rgba(0, 0, 0, 0.80)";
@@ -248,9 +250,9 @@ export const ColorBackgroundPurposeNotificationInverted = "#DE2A56";
 export const ColorBackgroundStateHoverDefault = "rgba(0, 0, 0, 0.12)";
 export const ColorBackgroundStateHoverInverted = "rgba(255, 255, 255, 0.16)";
 export const ColorBackgroundStateHoverBorderedDefault = "#ffffff";
-export const ColorBackgroundStateHoverBorderedInverted = "#464646";
-export const ColorBackgroundStateActiveDefault = "#464646";
-export const ColorBackgroundStateActiveInverted = "rgba(255, 255, 255, 0.80)";
+export const ColorBackgroundStateHoverBorderedInverted = "rgba(0, 0, 0, 0.12)";
+export const ColorBackgroundStateActiveDefault = "rgba(230, 31, 19, 0.80)";
+export const ColorBackgroundStateActiveInverted = "#ffffff";
 export const ColorBackgroundStateDisabledDefault = "rgba(0, 0, 0, 0.04)";
 export const ColorBackgroundStateDisabledInverted = "rgba(255, 255, 255, 0.08)";
 export const ColorBackgroundSurfaceLight = "#ffffff";
@@ -282,8 +284,8 @@ export const ColorBorderPurposeUnlimitedDefault = "#016BC1";
 export const ColorBorderPurposeUnlimitedInverted = "#0088F5";
 export const ColorBorderStateHoverDefault = "#E61F13";
 export const ColorBorderStateHoverInverted = "#ffffff";
-export const ColorBorderStateActiveDefault = "#464646";
-export const ColorBorderStateActiveInverted = "rgba(255, 255, 255, 0.80)";
+export const ColorBorderStateActiveDefault = "#E61F13";
+export const ColorBorderStateActiveInverted = "#ffffff";
 export const ColorIconBrandDefault = "#464646";
 export const ColorIconBrandInverted = "#ffffff";
 export const ColorIconAccentDefault = "#E61F13";
@@ -305,7 +307,7 @@ export const ColorIconPurposePromoInverted = "#DE2A56";
 export const ColorIconStateHoverDefault = "#E61F13";
 export const ColorIconStateHoverInverted = "rgba(255, 255, 255, 0.80)";
 export const ColorIconStateActiveDefault = "#E61F13";
-export const ColorIconStateActiveInverted = "rgba(255, 255, 255, 0.80)";
+export const ColorIconStateActiveInverted = "#ffffff";
 export const ColorIconStateDisabledDefault = "rgba(0, 0, 0, 0.12)";
 export const ColorIconStateDisabledInverted = "rgba(255, 255, 255, 0.16)";
 export const ColorTextBrandDefault = "#464646";
@@ -327,7 +329,7 @@ export const ColorTextPurposePromoInverted = "#E61F13";
 export const ColorTextStateHoverDefault = "#E61F13";
 export const ColorTextStateHoverInverted = "rgba(255, 255, 255, 0.80)";
 export const ColorTextStateActiveDefault = "#E61F13";
-export const ColorTextStateActiveInverted = "rgba(255, 255, 255, 0.80)";
+export const ColorTextStateActiveInverted = "#ffffff";
 export const ColorTextStateDisabledDefault = "rgba(0, 0, 0, 0.12)";
 export const ColorTextStateDisabledInverted = "rgba(255, 255, 255, 0.16)";
 export const FontFamily = "DINNextW05, Verdana, Helvetica, sans-serif";
@@ -550,6 +552,18 @@ export const SizeIconXl = {
   decimal: 0.48,
   scale: 768,
 };
+export const SizeM = {
+  original: "24rem",
+  number: 24,
+  decimal: 0.24,
+  scale: 384,
+};
+export const SizeL = {
+  original: "44rem",
+  number: 44,
+  decimal: 0.44,
+  scale: 704,
+};
 export const UtilitySizeS = {
   original: "2rem",
   number: 2,
@@ -1163,16 +1177,16 @@ export const PriceSizeSignLDesktop = {
   scale: 448,
 };
 export const PriceSizeUnitSMobile = {
-  original: "18rem",
-  number: 18,
-  decimal: 0.18,
-  scale: 288,
+  original: "16rem",
+  number: 16,
+  decimal: 0.16,
+  scale: 256,
 };
 export const PriceSizeUnitSTablet = {
-  original: "18rem",
-  number: 18,
-  decimal: 0.18,
-  scale: 288,
+  original: "16rem",
+  number: 16,
+  decimal: 0.16,
+  scale: 256,
 };
 export const PriceSizeUnitSLaptop = {
   original: "20rem",
@@ -1199,29 +1213,29 @@ export const PriceSizeUnitMTablet = {
   scale: 320,
 };
 export const PriceSizeUnitMLaptop = {
-  original: "24rem",
-  number: 24,
-  decimal: 0.24,
-  scale: 384,
-};
-export const PriceSizeUnitMDesktop = {
-  original: "24rem",
-  number: 24,
-  decimal: 0.24,
-  scale: 384,
-};
-export const PriceSizeUnitLMobile = {
   original: "28rem",
   number: 28,
   decimal: 0.28,
   scale: 448,
 };
-export const PriceSizeUnitLTablet = {
+export const PriceSizeUnitMDesktop = {
   original: "28rem",
   number: 28,
   decimal: 0.28,
   scale: 448,
 };
+export const PriceSizeUnitLMobile = {
+  original: "24rem",
+  number: 24,
+  decimal: 0.24,
+  scale: 384,
+};
+export const PriceSizeUnitLTablet = {
+  original: "24rem",
+  number: 24,
+  decimal: 0.24,
+  scale: 384,
+};
 export const PriceSizeUnitLLaptop = {
   original: "32rem",
   number: 32,
@@ -1282,10 +1296,30 @@ export const SpacingHeadingToContentDesktop = {
   decimal: 0.24,
   scale: 384,
 };
-export const NoneMobile = { original: 0, number: 0, decimal: 0, scale: 0 };
-export const NoneTablet = { original: 0, number: 0, decimal: 0, scale: 0 };
-export const NoneLaptop = { original: 0, number: 0, decimal: 0, scale: 0 };
-export const NoneDesktop = { original: 0, number: 0, decimal: 0, scale: 0 };
+export const SpacingNoneMobile = {
+  original: 0,
+  number: 0,
+  decimal: 0,
+  scale: 0,
+};
+export const SpacingNoneTablet = {
+  original: 0,
+  number: 0,
+  decimal: 0,
+  scale: 0,
+};
+export const SpacingNoneLaptop = {
+  original: 0,
+  number: 0,
+  decimal: 0,
+  scale: 0,
+};
+export const SpacingNoneDesktop = {
+  original: 0,
+  number: 0,
+  decimal: 0,
+  scale: 0,
+};
 export const Spacing2xsMobile = {
   original: "4rem",
   number: 4,
@@ -1430,6 +1464,126 @@ export const OverlappedDesktop = {
   decimal: -0.4,
   scale: -640,
 };
+export const SpacingTopPatchMobile = {
+  original: "14rem",
+  number: 14,
+  decimal: 0.14,
+  scale: 224,
+};
+export const SpacingTopPatchTablet = {
+  original: "14rem",
+  number: 14,
+  decimal: 0.14,
+  scale: 224,
+};
+export const SpacingTopPatchLaptop = {
+  original: "14rem",
+  number: 14,
+  decimal: 0.14,
+  scale: 224,
+};
+export const SpacingTopPatchDesktop = {
+  original: "14rem",
+  number: 14,
+  decimal: 0.14,
+  scale: 224,
+};
+export const SpacingTopNeighborPatchMobile = {
+  original: 0,
+  number: 0,
+  decimal: 0,
+  scale: 0,
+};
+export const SpacingTopNeighborPatchTablet = {
+  original: 0,
+  number: 0,
+  decimal: 0,
+  scale: 0,
+};
+export const SpacingTopNeighborPatchLaptop = {
+  original: "14rem",
+  number: 14,
+  decimal: 0.14,
+  scale: 224,
+};
+export const SpacingTopNeighborPatchDesktop = {
+  original: "14rem",
+  number: 14,
+  decimal: 0.14,
+  scale: 224,
+};
+export const SpacingTopRibbonMobile = {
+  original: "40rem",
+  number: 40,
+  decimal: 0.4,
+  scale: 640,
+};
+export const SpacingTopRibbonTablet = {
+  original: "40rem",
+  number: 40,
+  decimal: 0.4,
+  scale: 640,
+};
+export const SpacingTopRibbonLaptop = {
+  original: "40rem",
+  number: 40,
+  decimal: 0.4,
+  scale: 640,
+};
+export const SpacingTopRibbonDesktop = {
+  original: "40rem",
+  number: 40,
+  decimal: 0.4,
+  scale: 640,
+};
+export const SpacingTopNeighborRibbonMobile = {
+  original: 0,
+  number: 0,
+  decimal: 0,
+  scale: 0,
+};
+export const SpacingTopNeighborRibbonTablet = {
+  original: 0,
+  number: 0,
+  decimal: 0,
+  scale: 0,
+};
+export const SpacingTopNeighborRibbonLaptop = {
+  original: "40rem",
+  number: 40,
+  decimal: 0.4,
+  scale: 640,
+};
+export const SpacingTopNeighborRibbonDesktop = {
+  original: "40rem",
+  number: 40,
+  decimal: 0.4,
+  scale: 640,
+};
+export const SpacingTopPatchAndNeighborRibbonMobile = {
+  original: "14rem",
+  number: 14,
+  decimal: 0.14,
+  scale: 224,
+};
+export const SpacingTopPatchAndNeighborRibbonTablet = {
+  original: "14rem",
+  number: 14,
+  decimal: 0.14,
+  scale: 224,
+};
+export const SpacingTopPatchAndNeighborRibbonLaptop = {
+  original: "40rem",
+  number: 40,
+  decimal: 0.4,
+  scale: 640,
+};
+export const SpacingTopPatchAndNeighborRibbonDesktop = {
+  original: "40rem",
+  number: 40,
+  decimal: 0.4,
+  scale: 640,
+};
 export const SpacingPageLayoutBetweenSectionsMobile = {
   original: "40rem",
   number: 40,
@@ -1454,6 +1608,222 @@ export const SpacingPageLayoutBetweenSectionsDesktop = {
   decimal: 0.8,
   scale: 1280,
 };
+export const TextLineHeightBodyLMobile = {
+  original: "24rem",
+  number: 24,
+  decimal: 0.24,
+  scale: 384,
+};
+export const TextLineHeightBodyLDesktop = {
+  original: "27rem",
+  number: 27,
+  decimal: 0.27,
+  scale: 432,
+};
+export const TextLineHeightBodyMMobile = {
+  original: "21rem",
+  number: 21,
+  decimal: 0.21,
+  scale: 336,
+};
+export const TextLineHeightBodyMDesktop = {
+  original: "24rem",
+  number: 24,
+  decimal: 0.24,
+  scale: 384,
+};
+export const TextLineHeightBodySMobile = {
+  original: "18rem",
+  number: 18,
+  decimal: 0.18,
+  scale: 288,
+};
+export const TextLineHeightBodySDesktop = {
+  original: "21rem",
+  number: 21,
+  decimal: 0.21,
+  scale: 336,
+};
+export const TextLineHeightBodyXsMobile = {
+  original: "15rem",
+  number: 15,
+  decimal: 0.15,
+  scale: 240,
+};
+export const TextLineHeightBodyXsDesktop = {
+  original: "18rem",
+  number: 18,
+  decimal: 0.18,
+  scale: 288,
+};
+export const TextLineHeightHeading5xlMobile = {
+  original: "52rem",
+  number: 52,
+  decimal: 0.52,
+  scale: 832,
+};
+export const TextLineHeightHeading5xlDesktop = {
+  original: "62rem",
+  number: 62,
+  decimal: 0.62,
+  scale: 992,
+};
+export const TextLineHeightHeading4xlMobile = {
+  original: "46rem",
+  number: 46,
+  decimal: 0.46,
+  scale: 736,
+};
+export const TextLineHeightHeading4xlDesktop = {
+  original: "62rem",
+  number: 62,
+  decimal: 0.62,
+  scale: 992,
+};
+export const TextLineHeightHeading3xlMobile = {
+  original: "40rem",
+  number: 40,
+  decimal: 0.4,
+  scale: 640,
+};
+export const TextLineHeightHeading3xlDesktop = {
+  original: "52rem",
+  number: 52,
+  decimal: 0.52,
+  scale: 832,
+};
+export const TextLineHeightHeading2xlMobile = {
+  original: "36rem",
+  number: 36,
+  decimal: 0.36,
+  scale: 576,
+};
+export const TextLineHeightHeading2xlDesktop = {
+  original: "40rem",
+  number: 40,
+  decimal: 0.4,
+  scale: 640,
+};
+export const TextLineHeightHeadingXlMobile = {
+  original: "30rem",
+  number: 30,
+  decimal: 0.3,
+  scale: 480,
+};
+export const TextLineHeightHeadingXlDesktop = {
+  original: "36rem",
+  number: 36,
+  decimal: 0.36,
+  scale: 576,
+};
+export const TextLineHeightHeadingLMobile = {
+  original: "27rem",
+  number: 27,
+  decimal: 0.27,
+  scale: 432,
+};
+export const TextLineHeightHeadingLDesktop = {
+  original: "30rem",
+  number: 30,
+  decimal: 0.3,
+  scale: 480,
+};
+export const TextLineHeightHeadingMMobile = {
+  original: "24rem",
+  number: 24,
+  decimal: 0.24,
+  scale: 384,
+};
+export const TextLineHeightHeadingMDesktop = {
+  original: "27rem",
+  number: 27,
+  decimal: 0.27,
+  scale: 432,
+};
+export const TextLineHeightHeadingSMobile = {
+  original: "21rem",
+  number: 21,
+  decimal: 0.21,
+  scale: 336,
+};
+export const TextLineHeightHeadingSDesktop = {
+  original: "24rem",
+  number: 24,
+  decimal: 0.24,
+  scale: 384,
+};
+export const TextLineHeightLabelLMobile = {
+  original: "24rem",
+  number: 24,
+  decimal: 0.24,
+  scale: 384,
+};
+export const TextLineHeightLabelLDesktop = {
+  original: "27rem",
+  number: 27,
+  decimal: 0.27,
+  scale: 432,
+};
+export const TextLineHeightLabelMMobile = {
+  original: "21rem",
+  number: 21,
+  decimal: 0.21,
+  scale: 336,
+};
+export const TextLineHeightLabelMDesktop = {
+  original: "24rem",
+  number: 24,
+  decimal: 0.24,
+  scale: 384,
+};
+export const TextLineHeightLabelSMobile = {
+  original: "18rem",
+  number: 18,
+  decimal: 0.18,
+  scale: 288,
+};
+export const TextLineHeightLabelSDesktop = {
+  original: "21rem",
+  number: 21,
+  decimal: 0.21,
+  scale: 336,
+};
+export const TextLineHeightLabelXsMobile = {
+  original: "15rem",
+  number: 15,
+  decimal: 0.15,
+  scale: 240,
+};
+export const TextLineHeightLabelXsDesktop = {
+  original: "18rem",
+  number: 18,
+  decimal: 0.18,
+  scale: 288,
+};
+export const TextLineHeightLinkMMobile = {
+  original: "21rem",
+  number: 21,
+  decimal: 0.21,
+  scale: 336,
+};
+export const TextLineHeightLinkMDesktop = {
+  original: "24rem",
+  number: 24,
+  decimal: 0.24,
+  scale: 384,
+};
+export const TextLineHeightLinkSMobile = {
+  original: "18rem",
+  number: 18,
+  decimal: 0.18,
+  scale: 288,
+};
+export const TextLineHeightLinkSDesktop = {
+  original: "21rem",
+  number: 21,
+  decimal: 0.21,
+  scale: 336,
+};
 export const TextSizeBodyLMobile = {
   original: "16rem",
   number: 16,