update theme color

22 files changed, 74 insertions, 83 deletions

diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
index a4669ee0..86519147 100644
--- a/src/lib/address/components/CreateAddress.jsx
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -105,7 +105,7 @@ const CreateAddress = () => {
                   <HookFormSelect {...props} isSearchable={false} options={types} />
                 )}
               />
-              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.type?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.type?.message}</div>
             </div>
 
             <div>
@@ -116,7 +116,7 @@ const CreateAddress = () => {
                 type='text'
                 className='form-input'
               />
-              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.name?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.message}</div>
             </div>
 
             <div>
@@ -127,7 +127,7 @@ const CreateAddress = () => {
                 type='email'
                 className='form-input'
               />
-              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.email?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
             </div>
 
             <div>
@@ -138,7 +138,7 @@ const CreateAddress = () => {
                 type='tel'
                 className='form-input'
               />
-              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.mobile?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.message}</div>
             </div>
 
             <div>
@@ -149,7 +149,7 @@ const CreateAddress = () => {
                 type='text'
                 className='form-input'
               />
-              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.street?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.street?.message}</div>
             </div>
 
             <div>
@@ -160,7 +160,7 @@ const CreateAddress = () => {
                 type='number'
                 className='form-input'
               />
-              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.zip?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.zip?.message}</div>
             </div>
 
             <div>
@@ -170,7 +170,7 @@ const CreateAddress = () => {
                 control={control}
                 render={(props) => <HookFormSelect {...props} options={cities} />}
               />
-              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.city?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.city?.message}</div>
             </div>
 
             <div>
@@ -182,7 +182,7 @@ const CreateAddress = () => {
                   <HookFormSelect {...props} options={districts} disabled={!watchCity} />
                 )}
               />
-               <div className='text-caption-2 text-red_r-11 mt-1'>{errors.district?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.district?.message}</div>
             </div>
 
             <div>
diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx
index 006ea407..30555ecd 100644
--- a/src/lib/address/components/EditAddress.jsx
+++ b/src/lib/address/components/EditAddress.jsx
@@ -120,7 +120,7 @@ const EditAddress = ({ id, defaultValues }) => {
                   <HookFormSelect {...props} isSearchable={false} options={types} />
                 )}
               />
-              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.type?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.type?.message}</div>
             </div>
 
             <div>
@@ -131,7 +131,7 @@ const EditAddress = ({ id, defaultValues }) => {
                 type='text'
                 className='form-input'
               />
-              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.name?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.message}</div>
             </div>
 
             <div>
@@ -142,7 +142,7 @@ const EditAddress = ({ id, defaultValues }) => {
                 type='email'
                 className='form-input'
               />
-              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.email?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
             </div>
 
             <div>
@@ -153,7 +153,7 @@ const EditAddress = ({ id, defaultValues }) => {
                 type='tel'
                 className='form-input'
               />
-              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.mobile?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.message}</div>
             </div>
 
             <div>
@@ -164,7 +164,7 @@ const EditAddress = ({ id, defaultValues }) => {
                 type='text'
                 className='form-input'
               />
-              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.street?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.street?.message}</div>
             </div>
 
             <div>
@@ -175,7 +175,7 @@ const EditAddress = ({ id, defaultValues }) => {
                 type='number'
                 className='form-input'
               />
-              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.zip?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.zip?.message}</div>
             </div>
 
             <div>
@@ -185,7 +185,7 @@ const EditAddress = ({ id, defaultValues }) => {
                 control={control}
                 render={(props) => <HookFormSelect {...props} options={cities} />}
               />
-              <div className='text-caption-2 text-red_r-11 mt-1'>{errors.city?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>{errors.city?.message}</div>
             </div>
 
             <div>
@@ -197,7 +197,7 @@ const EditAddress = ({ id, defaultValues }) => {
                   <HookFormSelect {...props} options={districts} disabled={!watchCity} />
                 )}
               />
-               <div className='text-caption-2 text-red_r-11 mt-1'>{errors.district?.message}</div>
+               <div className='text-caption-2 text-danger-500 mt-1'>{errors.district?.message}</div>
             </div>
 
             <div>
diff --git a/src/lib/auth/components/RegisterDesktop.jsx b/src/lib/auth/components/RegisterDesktop.jsx
index 5f0caf73..ac6ac960 100644
--- a/src/lib/auth/components/RegisterDesktop.jsx
+++ b/src/lib/auth/components/RegisterDesktop.jsx
@@ -91,14 +91,14 @@ const RegisterDesktop = () => {
               </div>
               <div class="flex items-center mt-4 ">
                 <input type="checkbox" id='sdk' className='form-input flex items-start w-fit mr-2' required />
-                <label onClick={() => setTnd(true)}  className='inline cursor-pointer text-red_r-10'>Syarat dan Ketentuan</label>
+                <label onClick={() => setTnd(true)}  className='inline cursor-pointer text-danger-500'>Syarat dan Ketentuan</label>
               </div>
               <button
                 type='submit'
                 className='btn-yellow w-full mt-2'
                 disabled={!isValid || isLoading}
               >
-                {!isLoading ? 'Masuk' : 'Loading...'}
+                {!isLoading ? 'Daftar' : 'Loading...'}
               </button>
             </form>
 
diff --git a/src/lib/auth/components/RegisterMobile.jsx b/src/lib/auth/components/RegisterMobile.jsx
index 11935439..214584f4 100644
--- a/src/lib/auth/components/RegisterMobile.jsx
+++ b/src/lib/auth/components/RegisterMobile.jsx
@@ -100,7 +100,7 @@ const RegisterMobile = () => {
               className='form-input flex items-start w-fit mr-2'
               required
             />
-            <label onClick={() => setTnd(true)} className='inline cursor-pointer text-red_r-10'>
+            <label onClick={() => setTnd(true)} className='inline cursor-pointer text-danger-500'>
               Syarat dan Ketentuan
             </label>
           </div>
diff --git a/src/lib/brand/components/Brand.jsx b/src/lib/brand/components/Brand.jsx
index 6e156b8e..6ebb8aa7 100644
--- a/src/lib/brand/components/Brand.jsx
+++ b/src/lib/brand/components/Brand.jsx
@@ -58,7 +58,7 @@ const Brand = ({ id }) => {
                     />
                   )}
                   {!brand?.data?.logo && (
-                    <div className='bg-red_r-10 text-white text-center text-caption-1 py-2 px-4 rounded w-fit'>
+                    <div className='bg-danger-500 text-white text-center text-caption-1 py-2 px-4 rounded w-fit'>
                       {brand?.data?.name}
                     </div>
                   )}
@@ -102,7 +102,7 @@ const Brand = ({ id }) => {
                     />
                   )}
                   {!brand?.data?.logo && (
-                    <div className='bg-red_r-10 text-white text-center text-caption-1 py-2 px-4 rounded w-fit'>
+                    <div className='bg-danger-500 text-white text-center text-body-1 py-2 px-4 rounded w-fit'>
                       {brand?.data?.name}
                     </div>
                   )}
diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx
index 984a9fa6..f8c01e6d 100644
--- a/src/lib/brand/components/BrandCard.jsx
+++ b/src/lib/brand/components/BrandCard.jsx
@@ -20,7 +20,7 @@ const BrandCard = ({ brand }) => {
       {!brand.logo && (
         <span
           className='text-center'
-          style={{ fontSize: `${14 - brand.name.length * 0.5}px` }}
+          style={{ fontSize: `${16 - brand.name.length * 0.5}px` }}
         >
           {brand.name}
         </span>
diff --git a/src/lib/brand/components/Brands.jsx b/src/lib/brand/components/Brands.jsx
index 777e05ac..25fb1c67 100644
--- a/src/lib/brand/components/Brands.jsx
+++ b/src/lib/brand/components/Brands.jsx
@@ -56,7 +56,7 @@ const Brands = () => {
             key={index}
             className={
               'p-2 py-1 border bg-white border-gray_r-6 rounded w-10 flex-shrink-0' +
-              (startWith == alphabet ? ' !bg-yellow_r-9 border-yellow_r-9 ' : '')
+              (startWith == alphabet ? ' !bg-warning-500 border-warning-500 ' : '')
             }
             type='button'
             onClick={() => toggleStartWith(alphabet)}
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 1131fed7..5b8a4690 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -170,16 +170,13 @@ const Cart = () => {
 
             {products?.map((product) => (
               <div key={product?.id} className='flex mx-4'>
-                <button
-                  type='button'
-                  className='flex items-center mr-2'
+                <input
+                  type='checkbox'
                   onClick={() => toggleSelected(product.id)}
-                >
-                  {!product?.selected && (
-                    <div className='w-5 h-5 border border-gray_r-11 rounded' />
-                  )}
-                  {product?.selected && <CheckIcon className='border bg-red_r-10 w-5 text-white' />}
-                </button>
+                  checked={product?.selected}
+                  className='mr-2 accent-danger-500 w-4'
+                />
+
                 <Link
                   href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)}
                   className='w-[30%] flex-shrink-0'
@@ -213,7 +210,7 @@ const Cart = () => {
                     {currencyFormat(product?.price?.priceDiscount)}
                   </div>
                   <div className='flex justify-between items-center mt-1'>
-                    <div className='text-red_r-11 font-medium'>
+                    <div className='text-danger-500 font-medium'>
                       {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
                     </div>
                     <div className='flex gap-x-1'>
@@ -255,7 +252,7 @@ const Cart = () => {
               <div className='flex justify-between mb-4'>
                 <div className='text-gray_r-11'>
                   Total:
-                  <span className='text-red_r-11 font-semibold'>
+                  <span className='text-danger-500 font-semibold'>
                     &nbsp;
                     {selectedProduct().length > 0
                       ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount)
@@ -319,18 +316,12 @@ const Cart = () => {
                 {products?.map((product) => (
                   <tr key={product.id}>
                     <td>
-                      <button
-                        type='button'
-                        className='flex items-center mr-2'
+                      <input
+                        type='checkbox'
                         onClick={() => toggleSelected(product.id)}
-                      >
-                        {!product?.selected && (
-                          <div className='w-5 h-5 border border-gray_r-11 rounded' />
-                        )}
-                        {product?.selected && (
-                          <CheckIcon className='border bg-red_r-10 w-5 text-white' />
-                        )}
-                      </button>
+                        checked={product?.selected}
+                        className='accent-danger-500 w-4'
+                      />
                     </td>
                     <td className='flex'>
                       <Link
@@ -339,12 +330,12 @@ const Cart = () => {
                           product?.parent.name,
                           product?.parent.id
                         )}
-                        className='w-[30%] flex-shrink-0'
+                        className='w-[20%] flex-shrink-0'
                       >
                         <Image
                           src={product?.parent?.image}
                           alt={product?.name}
-                          className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
+                          className='object-contain object-center border border-gray_r-6 h-28 w-full rounded-md'
                         />
                       </Link>
                       <div className='px-2 text-left'>
@@ -391,7 +382,7 @@ const Cart = () => {
                       </div>
                     </td>
                     <td>
-                      <div className='text-red_r-11 font-medium'>
+                      <div className='text-danger-500 font-medium'>
                         {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
                       </div>
                     </td>
@@ -429,7 +420,7 @@ const Cart = () => {
               <div className='flex justify-between mb-4'>
                 <div className='text-gray_r-11'>
                   Total:
-                  <span className='text-red_r-11 font-semibold'>
+                  <span className='text-danger-500 font-semibold'>
                     &nbsp;
                     {selectedProduct().length > 0
                       ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount)
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index c9e0556b..17ac20e1 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -184,7 +184,7 @@ const Checkout = () => {
             </div>
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>Total Diskon</div>
-              <div className='text-red_r-11'>- {currencyFormat(totalDiscountAmount)}</div>
+              <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
             </div>
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>Subtotal</div>
@@ -313,7 +313,7 @@ const Checkout = () => {
                         </div>
                       </td>
                       <td>
-                        <div className='text-red_r-11 font-medium'>
+                        <div className='text-danger-500 font-medium'>
                           {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
                         </div>
                       </td>
@@ -340,7 +340,7 @@ const Checkout = () => {
                 </div>
                 <div className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>Total Diskon</div>
-                  <div className='text-red_r-11'>- {currencyFormat(totalDiscountAmount)}</div>
+                  <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
                 </div>
                 <div className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>Subtotal</div>
diff --git a/src/lib/checkout/components/FinishCheckout.jsx b/src/lib/checkout/components/FinishCheckout.jsx
index 4af39e91..cd93e3a4 100644
--- a/src/lib/checkout/components/FinishCheckout.jsx
+++ b/src/lib/checkout/components/FinishCheckout.jsx
@@ -3,19 +3,19 @@ import Link from '@/core/components/elements/Link/Link'
 const FinishCheckout = ({ query }) => {
   return (
     <div className='mx-auto container p-4 md:p-0 mt-0 md:mt-10'>
-      <div className='rounded-xl bg-yellow_r-4 text-center border border-yellow_r-7'>
-        <div className='px-4 py-6 text-yellow_r-12'>
+      <div className='rounded-xl bg-warning-100 text-center border border-warning-300 w-full md:w-1/2 mx-auto'>
+        <div className='px-4 py-6 text-warning-900'>
           <p className='font-semibold mb-2'>Terima Kasih atas Pembelian Anda</p>
-          <p className='text-yellow_r-11 mb-4 leading-6'>
+          <p className='text-warning-800 mb-4 leading-6'>
             Rincian belanja sudah kami kirimkan ke email anda. Mohon dicek kembali. jika tidak
             menerima email, anda dapat menghubungi kami disini.
           </p>
           <p className='mb-2 font-medium'>{query?.order_id?.replaceAll('-', '/')}</p>
-          <p className='text-caption-2 text-yellow_r-11'>No. Transaksi</p>
+          <p className='text-caption-2 text-warning-800'>No. Transaksi</p>
         </div>
         <Link
           href='/my/transactions'
-          className='bg-yellow_r-6 text-yellow_r-12 rounded-b-xl py-4 block'
+          className='bg-warning-400 text-warning-900 rounded-b-xl py-4 block'
         >
           Lihat detail pembelian Anda disini
         </Link>
diff --git a/src/lib/content/components/PageContent.jsx b/src/lib/content/components/PageContent.jsx
index bb44dd92..8b07cbfb 100644
--- a/src/lib/content/components/PageContent.jsx
+++ b/src/lib/content/components/PageContent.jsx
@@ -15,7 +15,7 @@ const PageContent = ({ path }) => {
     const contentClassNames = ` 
       prose 
       prose-gray 
-      prose-a:text-red_r-10 
+      prose-a:text-danger-500 
       prose-p:my-0 
       prose-headings:my-0
       prose-headings:mb-1
diff --git a/src/lib/home/components/CategoryHome.jsx b/src/lib/home/components/CategoryHome.jsx
index 05f0ca28..8fe3788c 100644
--- a/src/lib/home/components/CategoryHome.jsx
+++ b/src/lib/home/components/CategoryHome.jsx
@@ -6,7 +6,7 @@ const CategoryHome = ({ id }) => {
   const { categoryHome } = useCategoryHome({ id })
 
   return (
-    <div className='p-4 sm:py-8 relative bg-yellow_r-2 border border-yellow_r-5'>
+    <div className='p-4 sm:py-8 relative bg-warning-100 border border-warning-300'>
       {categoryHome.data ? (
         <ProductSlider
           products={{
diff --git a/src/lib/invoice/components/Invoice.jsx b/src/lib/invoice/components/Invoice.jsx
index 6012e4ea..1094e2e4 100644
--- a/src/lib/invoice/components/Invoice.jsx
+++ b/src/lib/invoice/components/Invoice.jsx
@@ -167,7 +167,7 @@ const Invoice = ({ id }) => {
                     {invoice.data?.efaktur ? (
                       <button
                         type='button'
-                        className='inline-block text-red_r-11'
+                        className='inline-block text-danger-500'
                         onClick={() => downloadTaxInvoice(invoice?.data)}
                       >
                         Download
diff --git a/src/lib/invoice/components/Invoices.jsx b/src/lib/invoice/components/Invoices.jsx
index 51041316..6f7d54a0 100644
--- a/src/lib/invoice/components/Invoices.jsx
+++ b/src/lib/invoice/components/Invoices.jsx
@@ -80,7 +80,7 @@ const Invoices = () => {
               <div className='grid grid-cols-2'>
                 <Link href={`/my/invoice/${invoice.id}`}>
                   <span className='text-caption-2 text-gray_r-11'>No. Invoice</span>
-                  <h2 className='text-red_r-11 mt-1'>{invoice.name}</h2>
+                  <h2 className='text-danger-500 mt-1'>{invoice.name}</h2>
                 </Link>
                 <div className='flex gap-x-1 justify-end'>
                   {invoice.amountResidual > 0 ? (
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index e0d2a959..faff375f 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -125,7 +125,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 <div className='w-3/4'>
                   {product?.weight > 0 && <span>{product?.weight} KG</span>}
                   {product?.weight == 0 && (
-                    <a href='https://wa.me' className='text-red_r-11 font-medium'>
+                    <a href='https://wa.me' className='text-danger-500 font-medium'>
                       Tanya Berat
                     </a>
                   )}
@@ -149,13 +149,13 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 </div>
               </div>
             )}
-            <h3 className='text-red_r-11 font-semibold mt-1 text-title-md'>
+            <h3 className='text-danger-500 font-semibold mt-1 text-title-md'>
               {lowestPrice?.priceDiscount > 0 ? (
                 currencyFormat(lowestPrice?.priceDiscount)
               ) : (
                 <span className='text-gray_r-12/90 font-normal text-h-sm'>
                   Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-                  <a href='https://wa.me/' className='text-red_r-11 underline'>
+                  <a href='https://wa.me/' className='text-danger-500 underline'>
                     klik disini
                   </a>
                 </span>
@@ -173,7 +173,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
             <div className='flex mt-4'>
               <button className='flex items-center gap-x-1' onClick={toggleWishlist}>
                 {wishlist.data?.productTotal > 0 ? (
-                  <HeartIcon className='w-6 fill-red_r-11 text-red_r-11' />
+                  <HeartIcon className='w-6 fill-danger-500 text-danger-500' />
                 ) : (
                   <HeartIcon className='w-6' />
                 )}
@@ -213,7 +213,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                         {variant.price.priceDiscount > 0 ? (
                           currencyFormat(variant.price.priceDiscount)
                         ) : (
-                          <a href='https://wa.me/' className='text-red_r-11'>
+                          <a href='https://wa.me/' className='text-danger-500'>
                             Call for price
                           </a>
                         )}
@@ -301,7 +301,7 @@ const informationTabOptions = [
 
 const TabButton = ({ children, active, ...props }) => {
   const activeClassName = active
-    ? 'text-red_r-11 underline underline-offset-4'
+    ? 'text-danger-500 underline underline-offset-4'
     : 'text-gray_r-12/80'
   return (
     <button {...props} type='button' className={`font-medium ${activeClassName}`}>
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 13b02354..493fcbf7 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -122,7 +122,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
           )}
           <button type='button' className='ml-auto' onClick={toggleWishlist}>
             {wishlist.data?.productTotal > 0 ? (
-              <HeartIcon className='w-6 fill-red_r-11 text-red_r-11' />
+              <HeartIcon className='w-6 fill-danger-500 text-danger-500' />
             ) : (
               <HeartIcon className='w-6' />
             )}
@@ -142,13 +142,13 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
             <div className='badge-solid-red'>{activeVariant?.price?.discountPercentage}%</div>
           </div>
         )}
-        <h3 className='text-red_r-11 font-semibold mt-1'>
+        <h3 className='text-danger-500 font-semibold mt-1'>
           {activeVariant?.price?.priceDiscount > 0 ? (
             currencyFormat(activeVariant?.price?.priceDiscount)
           ) : (
             <span className='text-gray_r-11 leading-6 font-normal'>
               Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-              <a href='https://wa.me/' className='text-red_r-11 underline'>
+              <a href='https://wa.me/' className='text-danger-500 underline'>
                 klik disini
               </a>
             </span>
@@ -232,7 +232,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
               </span>
             )}
             {activeVariant?.stock == 0 && (
-              <a href='https://wa.me' className='text-red_r-11 font-medium'>
+              <a href='https://wa.me' className='text-danger-500 font-medium'>
                 Tanya Stok
               </a>
             )}
@@ -240,7 +240,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
           <SpecificationContent label='Berat Barang'>
             {activeVariant?.weight > 0 && <span>{activeVariant?.weight} KG</span>}
             {activeVariant?.weight == 0 && (
-              <a href='https://wa.me' className='text-red_r-11 font-medium'>
+              <a href='https://wa.me' className='text-danger-500 font-medium'>
                 Tanya Berat
               </a>
             )}
@@ -275,7 +275,7 @@ const informationTabOptions = [
 ]
 
 const TabButton = ({ children, active, ...props }) => {
-  const activeClassName = active ? 'text-red_r-11 underline underline-offset-4' : 'text-gray_r-11'
+  const activeClassName = active ? 'text-danger-500 underline underline-offset-4' : 'text-gray_r-11'
   return (
     <button {...props} type='button' className={`font-medium pb-1 ${activeClassName}`}>
       {children}
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index df709394..f85a0b03 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -54,7 +54,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             </div>
           )}
 
-          <div className='text-red_r-11 font-semibold mb-2'>
+          <div className='text-danger-500 font-semibold mb-2'>
             {product?.lowestPrice.priceDiscount > 0 ? (
               currencyFormat(product?.lowestPrice.priceDiscount)
             ) : (
@@ -126,7 +126,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             </div>
           )}
 
-          <div className='text-red_r-11 font-semibold mb-2'>
+          <div className='text-danger-500 font-semibold mb-2'>
             {product?.lowestPrice?.priceDiscount > 0 ? (
               currencyFormat(product?.lowestPrice?.priceDiscount)
             ) : (
diff --git a/src/lib/product/components/ProductFilter.jsx b/src/lib/product/components/ProductFilter.jsx
index eca95f74..be1edd18 100644
--- a/src/lib/product/components/ProductFilter.jsx
+++ b/src/lib/product/components/ProductFilter.jsx
@@ -88,7 +88,7 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
               <button
                 key={orderOption.value}
                 className={`btn-light px-3 font-normal flex-shrink-0 ${
-                  order == orderOption.value ? 'bg-yellow_r-10' : 'bg-transparent'
+                  order == orderOption.value ? 'bg-warning-500' : 'bg-transparent'
                 }`}
                 onClick={() => setOrder(orderOption.value)}
               >
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 8e68d62d..0010a88a 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -200,7 +200,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                 <div className='text-gray_r-12/90'>
                   <span>
                     Barang yang anda cari tidak ada?{' '}
-                    <a href='#' className='text-red_r-9'>
+                    <a href='#' className='text-danger-500'>
                       Hubungi Kami
                     </a>
                   </span>
diff --git a/src/lib/quotation/components/Quotation.jsx b/src/lib/quotation/components/Quotation.jsx
index a95a149a..e233efd1 100644
--- a/src/lib/quotation/components/Quotation.jsx
+++ b/src/lib/quotation/components/Quotation.jsx
@@ -129,7 +129,7 @@ const Quotation = () => {
             </div>
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>Total Diskon</div>
-              <div className='text-red_r-11'>- {currencyFormat(totalDiscountAmount)}</div>
+              <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
             </div>
             <div className='flex gap-x-2 justify-between'>
               <div className='text-gray_r-11'>Subtotal</div>
@@ -226,7 +226,7 @@ const Quotation = () => {
                       </div>
                     </td>
                     <td>
-                      <div className='text-red_r-11 font-medium'>
+                      <div className='text-danger-500 font-medium'>
                         {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
                       </div>
                     </td>
@@ -252,7 +252,7 @@ const Quotation = () => {
                 </div>
                 <div className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>Total Diskon</div>
-                  <div className='text-red_r-11'>- {currencyFormat(totalDiscountAmount)}</div>
+                  <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
                 </div>
                 <div className='flex gap-x-2 justify-between'>
                   <div className='text-gray_r-11'>Subtotal</div>
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index c8956d80..a0455c27 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -318,7 +318,7 @@ const Transaction = ({ id }) => {
                     : {transaction?.data?.purchaseOrderName}{' '}
                     <button
                       type='button'
-                      className='inline-block text-red_r-11'
+                      className='inline-block text-danger-500'
                       onClick={
                         transaction.data?.purchaseOrderFile
                           ? () => downloadPurchaseOrder(transaction.data)
@@ -421,7 +421,7 @@ const Transaction = ({ id }) => {
                   <div className='text-right font-medium'>{currencyFormat(totalAmount)}</div>
 
                   <div className='text-right'>Total Diskon</div>
-                  <div className='text-right font-medium text-red_r-11'>
+                  <div className='text-right font-medium text-danger-500'>
                     {currencyFormat(-totalDiscountAmount)}
                   </div>
 
diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
index 30c670ae..13417707 100644
--- a/src/lib/transaction/components/Transactions.jsx
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -91,7 +91,7 @@ const Transactions = () => {
               <div className='grid grid-cols-2'>
                 <Link href={`/my/transaction/${saleOrder.id}`}>
                   <span className='text-caption-2 text-gray_r-11'>No. Transaksi</span>
-                  <h2 className='text-red_r-11 mt-1'>{saleOrder.name}</h2>
+                  <h2 className='text-danger-500 mt-1'>{saleOrder.name}</h2>
                 </Link>
                 <div className='flex gap-x-1 justify-end'>
                   <TransactionStatusBadge status={saleOrder.status} />