style: format code

src/app/(home)/components/ContentCustomerOrderModal/components/FlavorQuantitySelectorGroup/index.tsx

@@ -65,10 +65,10 @@ export const FlavorQuantitySelectorGroup = ({
           <Fragment key={option.id}>
             <div className="flex-nowrap jc-between ai-start row-full g-16">
               <div className="col-full">
-                <h4 className="text-14 font-700 uppercase text-primary-500">
+                <h4 className="fw-700 uppercase text-primary-500 fs-14">
                   {option.name}
                 </h4>
-                <p className="text-14">{option.description}</p>
+                <p className="fs-14">{option.description}</p>
               </div>
               <div className="jc-end ai-end col g-8">
                 <QuantityCounterButton
@@ -79,7 +79,7 @@ export const FlavorQuantitySelectorGroup = ({
                   }
                   isContractible
                 />
-                <p className="whitespace-nowrap pr-3 text-14 font-600 text-dark">
+                <p className="fw-600 whitespace-nowrap pr-3 text-dark fs-14">
                   {formattedPrice}
                 </p>
               </div>

src/app/(home)/components/ContentCustomerOrderModal/components/HeaderProduct/index.tsx

@@ -12,7 +12,7 @@ export const HeaderProduct = ({
   <>
     {!!img && (
       <div className="relative mb-12 aspect-600/317 overflow-hidden">
-        <FavoriteButton className="absolute right-8 top-8 z-base" />
+        <FavoriteButton className="absolute z-base t-8 r-8" />
         <Image
           src={img}
           alt={product}
@@ -25,7 +25,7 @@ export const HeaderProduct = ({
     )}
     <section className="px-16 py-8 col g-16 sm:px-24 sm:py-12">
       <h2 className="underlined-title">{product}</h2>
-      <p className="pb-12 text-16 font-500 text-grey-dark">{description}</p>
+      <p className="fw-500 pb-12 text-grey-dark fs-16">{description}</p>
     </section>
   </>
 )

src/app/(home)/components/ContentCustomerOrderModal/components/RadioButtonGroup/index.tsx

@@ -29,7 +29,7 @@ export const RadioButtonGroup = ({
               onChange={() => setSelectedRadioButtonGroupValue(option)}
               value={option.id}
             />
-            <p className="whitespace-nowrap text-14 font-600 text-dark">
+            <p className="fw-600 whitespace-nowrap text-dark fs-14">
               {formattedPrice}
             </p>
           </div>

src/app/(home)/components/ContentCustomerOrderModal/components/SectionProduct/index.tsx

@@ -15,15 +15,15 @@ export const SectionProduct = ({
 
   return (
     <section className="col-full">
-      <div className="sticky top-0 z-base border-y border-white bg-soft-white-blue px-16 py-8 ai-start col-full g-4 sm:px-24 sm:py-12">
+      <div className="sticky z-base border-y border-white bg-soft-white-blue px-16 py-8 ai-start col-full g-4 t-0 sm:px-24 sm:py-12">
         <div className="flex-nowrap jc-between ai-center row-full g-16">
-          <h3 className="text-16 font-700 uppercase text-primary-500 sm:text-18">
+          <h3 className="fw-700 uppercase text-primary-500 fs-16 sm:fs-18">
             {title}
           </h3>
           <Badge label={completed} color={colorCompleted} />
         </div>
         {description && (
-          <p className="text-12 font-600 text-grey-dark">{description}</p>
+          <p className="fw-600 text-grey-dark fs-12">{description}</p>
         )}
       </div>
       <div className="px-16 py-12 col-full g-12 sm:px-24 sm:py-12">

src/app/(home)/components/ProductListingSection/index.tsx

@@ -14,7 +14,7 @@ const ProductListingSection = async () => {
     <>
       {availableProducts?.map(({ id, category, items }) => (
         <section key={id} className="col-full g-20 sm:g-32">
-          <h2 className="underlined-title sm:text-28 md:text-32">{category}</h2>
+          <h2 className="underlined-title sm:fs-28 md:fs-32">{category}</h2>
           <div className="grid w-full grid-cols-[repeat(auto-fill,minmax(200px,1fr))] g-20 sm:grid-cols-[repeat(auto-fill,minmax(210px,1fr))] sm:g-24 lg:grid-cols-[repeat(auto-fill,minmax(240px,1fr))]">
             {items.map(item => (
               <CardProduct key={item.id} category={category} {...item} />

src/app/error.tsx

@@ -33,14 +33,14 @@ export const Error = ({
           />
         </div>
 
-        <p className="mx-auto mb-20 w-full max-w-[800px] pb-12 text-center text-20">
+        <p className="mx-auto mb-20 w-full max-w-[800px] pb-12 text-center fs-20">
           Página não encontrada! Por favor, verifique a url acessada.
           <br />
           <br />
           Caso prefira, clique no botão abaixo e retorne para a página inicial:
         </p>
         <button
-          className="bg-secondary-500 text-16 uppercase"
+          className="bg-secondary-500 uppercase fs-16"
           onClick={() => push('/')}
         >
           Ir para a página inicial

src/app/global-error.tsx

@@ -48,15 +48,15 @@ const GlobalError = ({ error, reset }: ErrorProps) => {
             />
           </div>
 
-          <p className="mx-auto mb-20 w-full max-w-[800px] pb-12 text-center text-20">
+          <p className="mx-auto mb-20 w-full max-w-[800px] pb-12 text-center fs-20">
             Página não encontrada! Por favor, verifique a url acessada.
             <br />
             <br />
             Caso prefira, clique no botão abaixo e retorne para a página
             inicial:
           </p>
           <button
-            className="bg-secondary-500 text-16 uppercase"
+            className="bg-secondary-500 uppercase fs-16"
             onClick={() => push('/')}
           >
             Página Inicial

src/app/not-found.tsx

@@ -21,14 +21,14 @@ const NotFound = () => {
           />
         </div>
 
-        <p className="mx-auto mb-20 w-full max-w-[800px] pb-12 text-center text-20">
+        <p className="mx-auto mb-20 w-full max-w-[800px] pb-12 text-center fs-20">
           Página não encontrada! Por favor, verifique a url acessada.
           <br />
           <br />
           Caso prefira, clique no botão abaixo e retorne para a página inicial:
         </p>
         <button
-          className="bg-secondary-500 text-16 uppercase"
+          className="bg-secondary-500 uppercase fs-16"
           onClick={() => push('/')}
         >
           Página Inicial

src/components/atoms/Avatar/index.tsx

@@ -24,7 +24,7 @@ const Content = ({ imageUrl, name }: AvatarProps) =>
       className="size-full object-cover"
     />
   ) : (
-    <p className="text-14 font-700 text-dark">
+    <p className="fw-700 text-dark fs-14">
       {getFirstAndLastInitialsUpperCase(name)}
     </p>
   )

src/components/atoms/Badge/index.tsx

@@ -11,7 +11,7 @@ const colors = (color: Colors) => ({
 export const Badge = ({ label, color = 'grey' }: BadgeProps) => (
   <span
     className={clsx(
-      'flex max-h-fit max-w-fit flex-nowrap whitespace-nowrap rounded-20 px-6 py-1 text-12 font-600 uppercase',
+      'fw-600 flex max-h-fit max-w-fit flex-nowrap whitespace-nowrap rounded-20 px-6 py-1 uppercase fs-12',
       colors(color)
     )}
   >

src/components/atoms/Button/index.tsx

@@ -6,12 +6,12 @@ import { GoSync as IconSync } from 'react-icons/go'
 import type { ButtonProps } from './types'
 
 const btn =
-  'flex items-center justify-center rounded-8 bg-secondary-500 font-700 shadow-[0_4px_16px_#aeaebed4] transition-all duration-150  ease-linear hover:translate-y-[-1.5px] hover:shadow-[0_5px_18px_#aeaebed4] active:translate-y-[1.5px] active:shadow-[0_1px_3px_#aeaebed4] disabled:cursor-not-allowed disabled:bg-secondary-500 disabled:shadow-[0_4px_16px_#aeaebed4]'
+  'flex items-center justify-center rounded-8 bg-secondary-500 fw-700 shadow-[0_4px_16px_#aeaebed4] transition-all duration-150  ease-linear hover:translate-y-[-1.5px] hover:shadow-[0_5px_18px_#aeaebed4] active:translate-y-[1.5px] active:shadow-[0_1px_3px_#aeaebed4] disabled:cursor-not-allowed disabled:bg-secondary-500 disabled:shadow-[0_4px_16px_#aeaebed4]'
 
 const btnSize = {
-  small: 'py-4 px-12 g-4 text-12',
-  medium: 'py-12 px-28 g-12 text-14',
-  large: 'py-16 px-40 g-12 text-16'
+  small: 'py-4 px-12 g-4 fs-12',
+  medium: 'py-12 px-28 g-12 fs-14',
+  large: 'py-16 px-40 g-12 fs-16'
 }
 
 export const Button = ({

src/components/atoms/CartButton/index.tsx

@@ -18,7 +18,7 @@ export const CartButton = ({ label }: CartButtonProps) => {
 
   return (
     <button
-      className="flex max-w-fit rounded-60 bg-secondary-500 px-12 py-6 text-14 font-600 transition-all duration-150 ease-linear center g-8 hover:bg-green"
+      className="fw-600 flex max-w-fit rounded-60 bg-secondary-500 px-12 py-6 transition-all duration-150 ease-linear center g-8 fs-14 hover:bg-green"
       aria-label="Abrir carrinho de compras"
     >
       <img

src/components/atoms/InfoMessage/index.tsx

@@ -11,8 +11,8 @@ import {
 import type { InfoMessageProps, TypeMessage } from './types'
 
 const sizes = {
-  small: 'g-4 [&>svg]:size-16 [&>span]:text-12',
-  medium: 'g-8 [&>svg]:size-20 [&>span]:text-14'
+  small: 'g-4 [&>svg]:size-16 [&>span]:fs-12',
+  medium: 'g-8 [&>svg]:size-20 [&>span]:fs-14'
 }
 
 const types = {
@@ -43,6 +43,6 @@ export const InfoMessage = ({
     role="alert"
   >
     {icons[type]}
-    <span className="message font-600">{message}</span>
+    <span className="message fw-600">{message}</span>
   </div>
 )

src/components/atoms/LabeledRadioButton/index.tsx

@@ -13,7 +13,7 @@ export const LabeledRadioButton = ({
 }: LabeledRadioButtonProps) => (
   <label
     className={clsx(
-      'max-h-fit max-w-fit text-14 jc-start ai-start row g-8',
+      'max-h-fit max-w-fit jc-start ai-start row g-8 fs-14',
       disabled ? 'cursor-not-allowed opacity-[0.6]' : 'cursor-pointer'
     )}
   >

src/components/molecules/CardProduct/index.tsx

@@ -31,14 +31,14 @@ export const CardProduct = ({
           fill
         />
       </div>
-      <div className="flex-1 flex-nowrap gap-x-4 gap-y-8 jc-between col-full">
-        <h3 className="line-clamp-2 text-16 font-700 uppercase text-primary-500">
+      <div className="flex-1 flex-nowrap jc-between col-full gx-4 gy-8">
+        <h3 className="fw-700 line-clamp-2 uppercase text-primary-500 fs-16">
           {product}
         </h3>
         <div className="flex-wrap jc-between ai-end row">
-          <p className="text-12 lg:text-14">
+          <p className="fs-12 lg:fs-14">
             {!hasFixedPrice && 'A partir de '}
-            <b className="text-14 font-600 lg:text-16">{formattedCurrency}</b>
+            <b className="fw-600 fs-14 lg:fs-16">{formattedCurrency}</b>
           </p>
           <ViewButton id={id} product={product} category={category} />
         </div>

src/components/molecules/CookieWarning/index.tsx

@@ -21,8 +21,8 @@ export const CookieWarning = () => {
   return (
     <>
       {isActive && (
-        <div className="invisible fixed inset-x-0 bottom-0 z-elevation mx-auto max-w-fit animate-[visibility_0.1s_3s_linear_forwards,_move-up_0.4s_3s_ease-in-out_forwards] flex-nowrap bg-soft-white-blue p-16 text-left opacity-0 shadow-elevation-card center row g-16 xs:px-24 xs:py-16 sm:rounded-8">
-          <p className="text-12 xs:text-16">
+        <div className="invisible fixed inset-x-0 z-elevation mx-auto max-w-fit animate-[visibility_0.1s_3s_linear_forwards,_move-up_0.4s_3s_ease-in-out_forwards] flex-nowrap bg-soft-white-blue p-16 text-left opacity-0 shadow-elevation-card center row g-16 b-0 xs:px-24 xs:py-16 sm:rounded-8">
+          <p className="fs-12 xs:fs-16">
             Ao navegar neste site, você aceita os cookies que usamos para
             melhorar a sua experiência.
           </p>

src/components/molecules/Modal/index.tsx

@@ -42,14 +42,14 @@ const Modal = ({
     <Portal>
       <div
         className={clsx(
-          'fixed left-0 top-0 z-overlay flex size-full backdrop-blur-[2px]',
+          'fixed z-overlay flex size-full backdrop-blur-[2px] t-0 l-0',
           fullscreenMobile ? 'p-0' : 'p-16'
         )}
         ref={modalRef}
       >
         <div
           className={clsx(
-            'absolute left-0 top-0 flex size-full',
+            'absolute flex size-full t-0 l-0',
             isVisible
               ? 'visible bg-dark opacity-[0.6]'
               : 'hidden bg-transparent opacity-0'
@@ -84,15 +84,15 @@ const Modal = ({
                 onClick={handleHiddenComponent}
                 ariaLabel="Voltar"
                 icon={<IconBack color="#374151" size={24} />}
-                className="absolute left-12 top-0"
+                className="absolute t-0 l-12"
                 isTransparent
                 isDisableTransform
                 isDisableBoxShadow
                 size="small"
               />
             )}
             {titleHeader && (
-              <h2 className="px-[54px] text-16 font-600 uppercase">
+              <h2 className="fw-600 px-[54px] uppercase fs-16">
                 {titleHeader}
               </h2>
             )}
@@ -102,7 +102,7 @@ const Modal = ({
                 onClick={handleHiddenComponent}
                 ariaLabel="Fechar Modal"
                 icon={<IconClose color="#374151" size={24} />}
-                className="absolute right-12 top-0"
+                className="absolute t-0 r-12"
                 isTransparent
                 isDisableTransform
                 isDisableBoxShadow
@@ -113,7 +113,7 @@ const Modal = ({
           <div className="h-full overflow-y-auto col-full sm:max-h-[80vh]">
             {title}
             {description && (
-              <p className="mt-8 text-16 sm:mt-16">{description}</p>
+              <p className="mt-8 fs-16 sm:mt-16">{description}</p>
             )}
             {children}
           </div>

src/components/molecules/PopupInstallPwa/index.tsx

@@ -60,7 +60,7 @@ export const PopupInstallPwa = () => {
   return (
     <>
       {isShowPopup && (
-        <div className="invisible fixed left-auto right-0 top-60 z-elevation mx-16 h-fit max-w-[360px] animate-[visibility_0.1s_4s_linear_forwards,_move-up_0.4s_4s_ease-in_forwards] rounded-16 bg-white px-20 pb-28 pt-20 opacity-0 shadow-[0_0_24px_#00000054] container-col g-8">
+        <div className="invisible fixed left-auto z-elevation mx-16 h-fit max-w-[360px] animate-[visibility_0.1s_4s_linear_forwards,_move-up_0.4s_4s_ease-in_forwards] rounded-16 bg-white px-20 pb-28 pt-20 opacity-0 shadow-[0_0_24px_#00000054] container-col g-8 r-0 t-60">
           <div className="relative flex-nowrap center row">
             <button
               aria-label="Fechar alerta"
@@ -83,7 +83,7 @@ export const PopupInstallPwa = () => {
               height="40"
             />
           </div>
-          <p className="mx-0 my-10 text-center text-18 font-600">
+          <p className="fw-600 mx-0 my-10 text-center fs-18">
             Adicione nosso App à tela inicial!
           </p>
           <Button

src/components/molecules/QuantityCounterButton/index.tsx

@@ -32,7 +32,7 @@ export const QuantityCounterButton = ({
           >
             <IconMinus className="size-12 min-h-12 min-w-12 fill-primary-500" />
           </button>
-          <span className="flex h-full flex-1 text-center text-16 font-600 center">
+          <span className="fw-600 flex h-full flex-1 text-center center fs-16">
             {quantity}
           </span>
         </>

src/components/molecules/Textarea/index.tsx

@@ -20,13 +20,13 @@ export const Textarea = ({
   return (
     <div className="col-full g-4">
       {label && (
-        <label className="text-12 font-600 text-grey-dark" htmlFor={id}>
+        <label className="fw-600 text-grey-dark fs-12" htmlFor={id}>
           {label}
         </label>
       )}
       <textarea
         className={clsx(
-          'resize-none rounded-8 border border-solid px-16 py-8 text-16 font-600 text-grey-dark row-full placeholder:font-500 placeholder:text-grey-light-500 hover:border hover:border-solid focus:border focus:border-solid focus:border-grey-light-500 focus:outline-[1.5px] focus:outline-offset-[-2px]',
+          'fw-600 placeholder:fw-500 resize-none rounded-8 border border-solid px-16 py-8 text-grey-dark row-full fs-16 placeholder:text-grey-light-500 hover:border hover:border-solid focus:border focus:border-solid focus:border-grey-light-500 focus:outline-[1.5px] focus:outline-offset-[-2px]',
           isErrored
             ? 'border-error outline-error focus:outline-error'
             : 'border-grey-light-500 hover:border-grey-dark focus:outline-secondary-500'
@@ -46,7 +46,7 @@ export const Textarea = ({
           {!!maxLength && (
             <small
               className={clsx(
-                'ml-auto whitespace-nowrap text-12 font-600',
+                'fw-600 ml-auto whitespace-nowrap fs-12',
                 isErrored ? 'text-error' : 'text-grey-500'
               )}
             >

src/components/molecules/Toast/index.tsx

@@ -29,7 +29,7 @@ const Toast = () => {
     <div
       aria-live="polite"
       aria-atomic="true"
-      className="fixed right-16 top-72 z-always-on-top ml-16 h-fit w-[100%-32px] max-w-full col xs:max-w-[320px]"
+      className="fixed z-always-on-top ml-16 h-fit w-[100%-32px] max-w-full col r-16 t-72 xs:max-w-[320px]"
     >
       {stateToast.toastList.map(
         ({ status, description, id, animationClass }) => (
@@ -46,21 +46,21 @@ const Toast = () => {
             <div className="grow p-6 row g-12">
               <Icon status={status} />
               <div className="grow col">
-                <p className="pr-20 text-14 font-600 text-grey-dark">
+                <p className="fw-600 pr-20 text-grey-dark fs-14">
                   {description}
                 </p>
               </div>
             </div>
             <button
               aria-label="Fechar alerta"
               onClick={() => handleClickRemoveToast(id)}
-              className="absolute right-0 top-0 flex size-[38px] min-h-[38px] min-w-[38px] cursor-pointer rounded-4 border-0 bg-transparent center"
+              className="absolute flex size-[38px] min-h-[38px] min-w-[38px] cursor-pointer rounded-4 border-0 bg-transparent center t-0 r-0"
             >
               <IconClose className="size-20 min-h-20 min-w-20 fill-grey-dark" />
             </button>
             <span
               className={clsx(
-                'absolute bottom-0 left-0 block h-4 w-full animate-[progress_7s_linear_forwards]',
+                'absolute block h-4 w-full animate-[progress_7s_linear_forwards] b-0 l-0',
                 progressStatusBgColor[status]
               )}
             />

src/components/organisms/Banner/index.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image'
 
 export const Banner = () => (
-  <div className="relative h-[calc(100vh-50px)] jc-center row-full before-base before:absolute before:left-0 before:top-0 before:z-base before:size-full before:bg-gradient-to-r before:from-[#000000b2_76%] before:to-[#00000078] md:before:from-[#0000007a_76%] md:before:to-transparent">
+  <div className="relative h-[calc(100vh-50px)] jc-center row-full before-base before:absolute before:z-base before:size-full before:bg-gradient-to-r before:from-[#000000b2_76%] before:to-[#00000078] before:t-0 before:l-0 md:before:from-[#0000007a_76%] md:before:to-transparent">
     <div className="z-base h-full jc-center container-col">
       <Image
         src="/img/logos/logo-vertical.png"
@@ -12,7 +12,7 @@ export const Banner = () => (
         className="h-auto max-h-[40vh] w-full max-w-[300px] -translate-y-full animate-[move-y_0.4s_0.2s_cubic-bezier(0,_0.55,_0.45,_1)_forwards,_fade-in-blur_0.4s_0.2s_linear_forwards] object-contain object-left opacity-0 xs:max-w-[400px] lg:max-w-[500px]"
         priority
       />
-      <h1 className="mt-12 max-w-[400px] translate-y-full animate-[move-y_0.6s_0.5s_cubic-bezier(0,_0.55,_0.45,_1)_forwards,_fade-in-blur_0.5s_0.4s_linear_forwards] text-balance text-20 font-500 leading-[1.5] text-white opacity-0 xs:mt-20 xs:max-w-[500px] xs:text-[calc(15px+1.3vh)] lg:mt-24 lg:max-w-[600px] lg:text-28">
+      <h1 className="fw-500 mt-12 max-w-[400px] translate-y-full animate-[move-y_0.6s_0.5s_cubic-bezier(0,_0.55,_0.45,_1)_forwards,_fade-in-blur_0.5s_0.4s_linear_forwards] text-balance leading-[1.5] text-white opacity-0 fs-20 xs:mt-20 xs:max-w-[500px] xs:text-[calc(15px+1.3vh)] lg:mt-24 lg:max-w-[600px] lg:fs-28">
         Pizzas exageradamente recheadas e saborosas, feitas em forno a lenha
         como manda a tradição italiana
       </h1>