@lookiero/checkout 14.2.0 → 14.2.2-beta.0

package/src/infrastructure/ui/components/templates/header/checkoutHeader/__snapshots__/CheckoutHeader.test.tsx.snap

@@ -97,6 +97,7 @@ exports[`CheckoutHeader template matches the snapshot 1`] = `
         style={
           [
             {
+              "color": "#0C0A0A",
               "fontFamily": "AreaNormal-Semibold",
               "fontSize": 15,
               "fontStyle": "normal",
@@ -129,6 +130,7 @@ exports[`CheckoutHeader template matches the snapshot 1`] = `
       style={
         [
           {
+            "color": "#0C0A0A",
             "fontFamily": "AreaNormal-Extrabold",
             "fontSize": 15,
             "fontStyle": "normal",

package/src/infrastructure/ui/components/templates/header/itemDetailHeader/ItemDetailHeader.tsx

@@ -18,7 +18,7 @@ const ItemDetailHeader: FC<ItemDetailHeaderProps> = ({ onBack }) => {
   return (
     <Header testID="item-detail-header">
       <ButtonIconPlaceholder />
-      <Text level={3} action>
+      <Text level={3} variant="action">
         {title}
       </Text>
       <ButtonIcon name="close" style={{ button: style.button }} testID="close-button-icon" onPress={onBack} />

package/src/infrastructure/ui/components/templates/header/itemDetailHeader/__snapshots__/ItemDetailHeader.test.tsx.snap

@@ -62,6 +62,7 @@ exports[`ItemDetailHeader template matches the snapshot 1`] = `
       style={
         [
           {
+            "color": "#0C0A0A",
             "fontFamily": "AreaNormal-Extrabold",
             "fontSize": 15,
             "fontStyle": "normal",
@@ -123,6 +124,7 @@ exports[`ItemDetailHeader template matches the snapshot 1`] = `
         style={
           [
             {
+              "color": "#0C0A0A",
               "fontFamily": "AreaNormal-Semibold",
               "fontSize": 15,
               "fontStyle": "normal",

package/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.tsx

@@ -73,7 +73,7 @@ const ItemHeader: FC<ItemHeaderProps> = ({ items, item, onNext, onPrevious }) =>
       ) : (
         <ButtonIconPlaceholder />
       )}
-      <Text level={3} action>
+      <Text level={3} variant="action">
         {title}
       </Text>
       {!isLastItem ? (

package/src/infrastructure/ui/components/templates/header/itemHeader/__snapshots__/ItemHeader.test.tsx.snap

@@ -97,6 +97,7 @@ exports[`ItemHeader template matches the snapshot 1`] = `
         style={
           [
             {
+              "color": "#0C0A0A",
               "fontFamily": "AreaNormal-Semibold",
               "fontSize": 15,
               "fontStyle": "normal",
@@ -129,6 +130,7 @@ exports[`ItemHeader template matches the snapshot 1`] = `
       style={
         [
           {
+            "color": "#0C0A0A",
             "fontFamily": "AreaNormal-Extrabold",
             "fontSize": 15,
             "fontStyle": "normal",
@@ -190,6 +192,7 @@ exports[`ItemHeader template matches the snapshot 1`] = `
         style={
           [
             {
+              "color": "#0C0A0A",
               "fontFamily": "AreaNormal-Semibold",
               "fontSize": 15,
               "fontStyle": "normal",

package/src/infrastructure/ui/views/checkout/Checkout.tsx

@@ -151,7 +151,7 @@ const Checkout: FC<CheckoutProps> = ({ layout: Layout, getAuthToken, useRedirect
                 </View>
               )}
 
-              <Text level={3} style={style.title} heading>
+              <Text level={3} style={style.title} variant="heading">
                 {titleText}
               </Text>
 

package/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.style.ts

@@ -11,6 +11,9 @@ const style = () => {
     smallContainer: {
       marginHorizontal: space6,
     },
+    underlinedText: {
+      textDecorationLine: "underline",
+    },
   });
 };
 

package/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.tsx

@@ -33,7 +33,7 @@ const CustomerDecissionBanner: FC<CustomerDecissionBannerProps> = ({ checkoutIte
     <View style={[style.container, isSmallScreen ? style.smallContainer : null]}>
       <InfoBox text={decissionText}>
         <Pressable testID="customer-decission-banner" onPress={onPress}>
-          <Text level={isSmallScreen ? 2 : 1} detail underlined>
+          <Text level={isSmallScreen ? 2 : 1} style={style.underlinedText} variant="detail">
             {bannerButtonText}
           </Text>
         </Pressable>

package/src/infrastructure/ui/views/item/components/banner/__snapshots__/CustomerDecissionBanner.test.tsx.snap

@@ -141,15 +141,17 @@ exports[`CustomerDecissionBanner component matches the snapshot for a KEPT check
                   style={
                     [
                       {
+                        "color": "#0C0A0A",
                         "fontFamily": "AreaNormal-Semibold",
                         "fontSize": 12,
                         "fontStyle": "normal",
                         "fontWeight": "normal",
                         "letterSpacing": 0.1,
                         "lineHeight": 16,
+                      },
+                      {
                         "textDecorationLine": "underline",
                       },
-                      undefined,
                     ]
                   }
                 >
@@ -306,15 +308,17 @@ exports[`CustomerDecissionBanner component matches the snapshot for a REPLACED c
                   style={
                     [
                       {
+                        "color": "#0C0A0A",
                         "fontFamily": "AreaNormal-Semibold",
                         "fontSize": 12,
                         "fontStyle": "normal",
                         "fontWeight": "normal",
                         "letterSpacing": 0.1,
                         "lineHeight": 16,
+                      },
+                      {
                         "textDecorationLine": "underline",
                       },
-                      undefined,
                     ]
                   }
                 >
@@ -471,15 +475,17 @@ exports[`CustomerDecissionBanner component matches the snapshot for a RETURNED c
                   style={
                     [
                       {
+                        "color": "#0C0A0A",
                         "fontFamily": "AreaNormal-Semibold",
                         "fontSize": 12,
                         "fontStyle": "normal",
                         "fontWeight": "normal",
                         "letterSpacing": 0.1,
                         "lineHeight": 16,
+                      },
+                      {
                         "textDecorationLine": "underline",
                       },
-                      undefined,
                     ]
                   }
                 >

package/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.tsx

@@ -35,12 +35,22 @@ const GetOutOfCheckoutModal: FC<GetOutOfCheckoutModalProps> = ({ visible, onDism
           {descriptionText}
         </Text>
         <Button style={style.button} onPress={onDismiss}>
-          <Text level={3} selectable={false} style={[style.buttonText, { textTransform: "uppercase" }]} action>
+          <Text
+            level={3}
+            selectable={false}
+            style={[style.buttonText, { textTransform: "uppercase" }]}
+            variant="action"
+          >
             {dismissButtonText}
           </Text>
         </Button>
         <Button style={[style.button, style.confirmButton]} variant={BUTTON_VARIANT.SECONDARY} onPress={onConfirm}>
-          <Text level={3} selectable={false} style={[style.buttonText, { textTransform: "uppercase" }]} action>
+          <Text
+            level={3}
+            selectable={false}
+            style={[style.buttonText, { textTransform: "uppercase" }]}
+            variant="action"
+          >
             {confirmButtonText}
           </Text>
         </Button>

package/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/__snapshots__/GetOutOfCheckoutModal.test.tsx.snap

@@ -176,6 +176,7 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                 style={
                   [
                     {
+                      "color": "#0C0A0A",
                       "fontFamily": "AreaNormal-Semibold",
                       "fontSize": 22,
                       "fontStyle": "normal",
@@ -196,6 +197,7 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                 style={
                   [
                     {
+                      "color": "#0C0A0A",
                       "fontFamily": "AreaNormal-Semibold",
                       "fontSize": 15,
                       "fontStyle": "normal",
@@ -354,6 +356,7 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                       style={
                         [
                           {
+                            "color": "#0C0A0A",
                             "fontFamily": "AreaNormal-Extrabold",
                             "fontSize": 15,
                             "fontStyle": "normal",
@@ -528,6 +531,7 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                       style={
                         [
                           {
+                            "color": "#0C0A0A",
                             "fontFamily": "AreaNormal-Extrabold",
                             "fontSize": 15,
                             "fontStyle": "normal",

package/src/infrastructure/ui/views/item/components/itemActions/__snapshots__/ItemActions.test.tsx.snap

@@ -793,6 +793,7 @@ exports[`ItemActions component matches the snapshot 1`] = `
                 style={
                   [
                     {
+                      "color": "#0C0A0A",
                       "fontFamily": "AreaNormal-Semibold",
                       "fontSize": 15,
                       "fontStyle": "normal",
@@ -855,6 +856,7 @@ exports[`ItemActions component matches the snapshot 1`] = `
                     style={
                       [
                         {
+                          "color": "#0C0A0A",
                           "fontFamily": "AreaInktrap-Semibold",
                           "fontSize": 31,
                           "fontStyle": "normal",
@@ -910,6 +912,7 @@ exports[`ItemActions component matches the snapshot 1`] = `
                       style={
                         [
                           {
+                            "color": "#0C0A0A",
                             "fontFamily": "AreaNormal-Semibold",
                             "fontSize": 15,
                             "fontStyle": "normal",
@@ -972,6 +975,7 @@ exports[`ItemActions component matches the snapshot 1`] = `
                       style={
                         [
                           {
+                            "color": "#0C0A0A",
                             "fontFamily": "AreaNormal-Semibold",
                             "fontSize": 15,
                             "fontStyle": "normal",

package/src/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.tsx

@@ -36,16 +36,16 @@ const ProductVariantDescription: FC<ProductVariantDescriptionProps> = ({
     <View style={[style.container, !isDesktopScreen && style.smallContainer]}>
       <View style={style.info}>
         <View style={style.content}>
-          <Text level={1} style={style.brand} detail>
+          <Text level={1} style={style.brand} variant="detail">
             {brand}
           </Text>
-          <Text level={1} detailBold>
+          <Text level={1} variant="detailBold">
             {name}
           </Text>
         </View>
         <Price price={price} withPercentage />
       </View>
-      <Text level={1} detail>
+      <Text level={1} variant="detail">
         {`${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`}
       </Text>
     </View>

package/src/infrastructure/ui/views/item/components/productVariantDescription/__snapshots__/ProductVariantDescription.test.tsx.snap

@@ -62,6 +62,7 @@ exports[`ProductVariantDescription component matches the snapshot for a non-uniq
           style={
             [
               {
+                "color": "#0C0A0A",
                 "fontFamily": "AreaNormal-Semibold",
                 "fontSize": 13,
                 "fontStyle": "normal",
@@ -81,6 +82,7 @@ exports[`ProductVariantDescription component matches the snapshot for a non-uniq
           style={
             [
               {
+                "color": "#0C0A0A",
                 "fontFamily": "AreaNormal-Extrabold",
                 "fontSize": 13,
                 "fontStyle": "normal",
@@ -107,6 +109,7 @@ exports[`ProductVariantDescription component matches the snapshot for a non-uniq
           style={
             [
               {
+                "color": "#0C0A0A",
                 "fontFamily": "AreaNormal-Semibold",
                 "fontSize": 13,
                 "fontStyle": "normal",
@@ -127,6 +130,7 @@ exports[`ProductVariantDescription component matches the snapshot for a non-uniq
       style={
         [
           {
+            "color": "#0C0A0A",
             "fontFamily": "AreaNormal-Semibold",
             "fontSize": 13,
             "fontStyle": "normal",
@@ -206,6 +210,7 @@ exports[`ProductVariantDescription component matches the snapshot for an unique
           style={
             [
               {
+                "color": "#0C0A0A",
                 "fontFamily": "AreaNormal-Semibold",
                 "fontSize": 13,
                 "fontStyle": "normal",
@@ -225,6 +230,7 @@ exports[`ProductVariantDescription component matches the snapshot for an unique
           style={
             [
               {
+                "color": "#0C0A0A",
                 "fontFamily": "AreaNormal-Extrabold",
                 "fontSize": 13,
                 "fontStyle": "normal",
@@ -251,6 +257,7 @@ exports[`ProductVariantDescription component matches the snapshot for an unique
           style={
             [
               {
+                "color": "#0C0A0A",
                 "fontFamily": "AreaNormal-Semibold",
                 "fontSize": 13,
                 "fontStyle": "normal",
@@ -271,6 +278,7 @@ exports[`ProductVariantDescription component matches the snapshot for an unique
       style={
         [
           {
+            "color": "#0C0A0A",
             "fontFamily": "AreaNormal-Semibold",
             "fontSize": 13,
             "fontStyle": "normal",

package/src/infrastructure/ui/views/item/components/selectModal/SelectModal.tsx

@@ -59,7 +59,7 @@ const SelectModal: FC<SelectModalProps> = ({
     >
       <View style={[style.modalContent, customStyle?.modalContent]}>
         {title && (
-          <Text level={3} style={style.modalTitle} heading>
+          <Text level={3} style={style.modalTitle} variant="heading">
             {title}
           </Text>
         )}

package/src/infrastructure/ui/views/item/components/selectModal/__snapshots__/SelecModal.test.tsx.snap

@@ -206,6 +206,7 @@ exports[`SelectField component matches the snapshot 1`] = `
               style={
                 [
                   {
+                    "color": "#0C0A0A",
                     "fontFamily": "AreaNormal-Semibold",
                     "fontSize": 15,
                     "fontStyle": "normal",
@@ -304,6 +305,7 @@ exports[`SelectField component matches the snapshot 1`] = `
                     style={
                       [
                         {
+                          "color": "#0C0A0A",
                           "fontFamily": "AreaNormal-Semibold",
                           "fontSize": 15,
                           "fontStyle": "normal",

package/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.tsx

@@ -20,7 +20,7 @@ const SizeWithoutStockModal: FC<SizeWithoutStockModalProps> = ({ visible, onDism
   return (
     <Modal portalHostName="Checkout" visible={visible} showCloseButton onClose={onDismiss}>
       <View style={style.modalContent}>
-        <Text level={3} style={style.title} heading>
+        <Text level={3} style={style.title} variant="heading">
           {titleText}
         </Text>
         <Text level={3} style={style.description}>

package/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/__snapshots__/SizeWithoutStockModal.test.tsx.snap

@@ -206,6 +206,7 @@ exports[`SizeWithoutStockModal component matches the snapshot 1`] = `
               style={
                 [
                   {
+                    "color": "#0C0A0A",
                     "fontFamily": "AreaNormal-Semibold",
                     "fontSize": 15,
                     "fontStyle": "normal",
@@ -263,6 +264,7 @@ exports[`SizeWithoutStockModal component matches the snapshot 1`] = `
                 style={
                   [
                     {
+                      "color": "#0C0A0A",
                       "fontFamily": "AreaInktrap-Semibold",
                       "fontSize": 31,
                       "fontStyle": "normal",
@@ -283,6 +285,7 @@ exports[`SizeWithoutStockModal component matches the snapshot 1`] = `
                 style={
                   [
                     {
+                      "color": "#0C0A0A",
                       "fontFamily": "AreaNormal-Semibold",
                       "fontSize": 15,
                       "fontStyle": "normal",

package/src/infrastructure/ui/views/item/views/productVariant/__snapshots__/ProductVariant.test.tsx.snap

@@ -596,6 +596,7 @@ exports[`ItemActions component matches the snapshot for a KEPT checkoutItem 1`]
               style={
                 [
                   {
+                    "color": "#0C0A0A",
                     "fontFamily": "AreaNormal-Semibold",
                     "fontSize": 13,
                     "fontStyle": "normal",
@@ -615,6 +616,7 @@ exports[`ItemActions component matches the snapshot for a KEPT checkoutItem 1`]
               style={
                 [
                   {
+                    "color": "#0C0A0A",
                     "fontFamily": "AreaNormal-Extrabold",
                     "fontSize": 13,
                     "fontStyle": "normal",
@@ -641,6 +643,7 @@ exports[`ItemActions component matches the snapshot for a KEPT checkoutItem 1`]
               style={
                 [
                   {
+                    "color": "#0C0A0A",
                     "fontFamily": "AreaNormal-Semibold",
                     "fontSize": 13,
                     "fontStyle": "normal",
@@ -661,6 +664,7 @@ exports[`ItemActions component matches the snapshot for a KEPT checkoutItem 1`]
           style={
             [
               {
+                "color": "#0C0A0A",
                 "fontFamily": "AreaNormal-Semibold",
                 "fontSize": 13,
                 "fontStyle": "normal",
@@ -1276,6 +1280,7 @@ exports[`ItemActions component matches the snapshot for a REPLACED checkoutItem
               style={
                 [
                   {
+                    "color": "#0C0A0A",
                     "fontFamily": "AreaNormal-Semibold",
                     "fontSize": 13,
                     "fontStyle": "normal",
@@ -1295,6 +1300,7 @@ exports[`ItemActions component matches the snapshot for a REPLACED checkoutItem
               style={
                 [
                   {
+                    "color": "#0C0A0A",
                     "fontFamily": "AreaNormal-Extrabold",
                     "fontSize": 13,
                     "fontStyle": "normal",
@@ -1321,6 +1327,7 @@ exports[`ItemActions component matches the snapshot for a REPLACED checkoutItem
               style={
                 [
                   {
+                    "color": "#0C0A0A",
                     "fontFamily": "AreaNormal-Semibold",
                     "fontSize": 13,
                     "fontStyle": "normal",
@@ -1341,6 +1348,7 @@ exports[`ItemActions component matches the snapshot for a REPLACED checkoutItem
           style={
             [
               {
+                "color": "#0C0A0A",
                 "fontFamily": "AreaNormal-Semibold",
                 "fontSize": 13,
                 "fontStyle": "normal",
@@ -1956,6 +1964,7 @@ exports[`ItemActions component matches the snapshot for an INITIAL checkoutItem
               style={
                 [
                   {
+                    "color": "#0C0A0A",
                     "fontFamily": "AreaNormal-Semibold",
                     "fontSize": 13,
                     "fontStyle": "normal",
@@ -1975,6 +1984,7 @@ exports[`ItemActions component matches the snapshot for an INITIAL checkoutItem
               style={
                 [
                   {
+                    "color": "#0C0A0A",
                     "fontFamily": "AreaNormal-Extrabold",
                     "fontSize": 13,
                     "fontStyle": "normal",
@@ -2001,6 +2011,7 @@ exports[`ItemActions component matches the snapshot for an INITIAL checkoutItem
               style={
                 [
                   {
+                    "color": "#0C0A0A",
                     "fontFamily": "AreaNormal-Semibold",
                     "fontSize": 13,
                     "fontStyle": "normal",
@@ -2021,6 +2032,7 @@ exports[`ItemActions component matches the snapshot for an INITIAL checkoutItem
           style={
             [
               {
+                "color": "#0C0A0A",
                 "fontFamily": "AreaNormal-Semibold",
                 "fontSize": 13,
                 "fontStyle": "normal",

package/src/infrastructure/ui/views/return/components/price/Price.style.ts

@@ -14,6 +14,7 @@ const style = () => {
     },
     discountedPriceText: {
       color: colorTextMedium,
+      textDecorationLine: "line-through",
     },
     price: {
       flexDirection: "row",

package/src/infrastructure/ui/views/return/components/price/Price.tsx

@@ -32,16 +32,16 @@ const Price: FC<PriceProps> = ({ price, withPercentage = false }) => {
   return (
     <View style={style.price} testID="price">
       {isDiscounted && (
-        <Text level={1} style={style.discountedPriceText} testID="discounted-price-text" detail lineThrough>
+        <Text level={1} style={style.discountedPriceText} testID="discounted-price-text" variant="detail">
           {productPrice}
         </Text>
       )}
       <View style={style.discountedPriceInfo}>
-        <Text level={1} testID="price-text" detail>
+        <Text level={1} testID="price-text" variant="detail">
           {priceValue}
         </Text>
         {isDiscounted && withPercentage ? (
-          <Text level={1} style={style.discountedPercentage} testID="discounted-percentage-text" detail>
+          <Text level={1} style={style.discountedPercentage} testID="discounted-percentage-text" variant="detail">
             {`-${price.discountedPrice.percentage}%`}
           </Text>
         ) : null}

package/src/infrastructure/ui/views/return/components/price/__snapshots__/Price.test.tsx.snap

@@ -41,16 +41,17 @@ exports[`Price atom matches the snapshot for a discounted price: discounted pric
       style={
         [
           {
+            "color": "#0C0A0A",
             "fontFamily": "AreaNormal-Semibold",
             "fontSize": 13,
             "fontStyle": "normal",
             "fontWeight": "normal",
             "letterSpacing": 0.1,
             "lineHeight": 17,
-            "textDecorationLine": "line-through",
           },
           {
             "color": "#837C7C",
+            "textDecorationLine": "line-through",
           },
         ]
       }
@@ -70,6 +71,7 @@ exports[`Price atom matches the snapshot for a discounted price: discounted pric
         style={
           [
             {
+              "color": "#0C0A0A",
               "fontFamily": "AreaNormal-Semibold",
               "fontSize": 13,
               "fontStyle": "normal",
@@ -138,6 +140,7 @@ exports[`Price atom matches the snapshot for a non-discounted price: non-discoun
         style={
           [
             {
+              "color": "#0C0A0A",
               "fontFamily": "AreaNormal-Semibold",
               "fontSize": 13,
               "fontStyle": "normal",

package/src/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.tsx

@@ -51,13 +51,13 @@ const ProductVariantPreview: FC<ProductVariantPreviewProps> = ({ item, country }
           )}
 
           <View style={style.info}>
-            <Text level={2} style={style.text} detail>
+            <Text level={2} style={style.text} variant="detail">
               {brand}
             </Text>
-            <Text level={2} detail>
+            <Text level={2} variant="detail">
               {name}
             </Text>
-            <Text level={2} style={style.text} detail>
+            <Text level={2} style={style.text} variant="detail">
               {`${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`}
             </Text>
           </View>

package/src/infrastructure/ui/views/return/components/productVariantPreview/__snapshots__/ProductVariantPreview.test.tsx.snap

@@ -106,6 +106,7 @@ exports[`ProductVariantPreview matches the snapshot 1`] = `
             style={
               [
                 {
+                  "color": "#0C0A0A",
                   "fontFamily": "AreaNormal-Semibold",
                   "fontSize": 12,
                   "fontStyle": "normal",
@@ -125,6 +126,7 @@ exports[`ProductVariantPreview matches the snapshot 1`] = `
             style={
               [
                 {
+                  "color": "#0C0A0A",
                   "fontFamily": "AreaNormal-Semibold",
                   "fontSize": 12,
                   "fontStyle": "normal",
@@ -142,6 +144,7 @@ exports[`ProductVariantPreview matches the snapshot 1`] = `
             style={
               [
                 {
+                  "color": "#0C0A0A",
                   "fontFamily": "AreaNormal-Semibold",
                   "fontSize": 12,
                   "fontStyle": "normal",
@@ -185,6 +188,7 @@ exports[`ProductVariantPreview matches the snapshot 1`] = `
                 style={
                   [
                     {
+                      "color": "#0C0A0A",
                       "fontFamily": "AreaNormal-Semibold",
                       "fontSize": 13,
                       "fontStyle": "normal",

package/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.tsx

@@ -183,10 +183,10 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
                     tradename === Tradename.OUTFITTERY && style.infoOutfittery,
                   ]}
                 >
-                  <Text level={3} heading>
+                  <Text level={3} variant="heading">
                     {titleText}
                   </Text>
-                  <Text level={1} style={style.description} detail>
+                  <Text level={1} style={style.description} variant="detail">
                     {descriptionText}
                   </Text>
                 </View>

package/src/infrastructure/ui/views/shared/components/productVariant/ProductVariant.tsx

@@ -69,19 +69,19 @@ const ProductVariant: FC<ProductVariantProps> = ({
 
         <View style={style.descriptionContainer}>
           <View style={style.infoProductVariant}>
-            <Text level={2} style={style.text} detail>
+            <Text level={2} style={style.text} variant="detail">
               {brand}
             </Text>
-            <Text level={2} detail>
+            <Text level={2} variant="detail">
               {name}
             </Text>
-            <Text level={2} style={style.text} detail>
+            <Text level={2} style={style.text} variant="detail">
               {sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })} / {colorLabel}
             </Text>
 
             {status === CheckoutItemStatus.REPLACED && (
               <View style={style.sizeChange}>
-                <Text level={2} detail>
+                <Text level={2} variant="detail">
                   {sizeChangeText}
                 </Text>
               </View>