update theme color

33 files changed, 232 insertions, 217 deletions

diff --git a/src/core/components/elements/Badge/Badge.jsx b/src/core/components/elements/Badge/Badge.jsx
deleted file mode 100644
index e50cdc78..00000000
--- a/src/core/components/elements/Badge/Badge.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-const Badge = ({ children, type, ...props }) => {
-  return (
-    <div
-      {...props}
-      className={`${badgeStyle(type)} ${props?.className}`}
-    >
-      {children}
-    </div>
-  )
-}
-
-Badge.defaultProps = {
-  className: ''
-}
-
-const badgeStyle = (type) => {
-  let className = ['rounded px-1 text-[11px]']
-  switch (type) {
-    case 'solid-red':
-      className.push('bg-red_r-11 text-white')
-      break
-    case 'light':
-      className.push('bg-gray_r-4 text-gray_r-11')
-      break
-  }
-  return className.join(' ')
-}
-
-export default Badge
diff --git a/src/core/components/elements/Link/Link.jsx b/src/core/components/elements/Link/Link.jsx
index 05859639..360444a6 100644
--- a/src/core/components/elements/Link/Link.jsx
+++ b/src/core/components/elements/Link/Link.jsx
@@ -13,7 +13,7 @@ const Link = ({ children, ...props }) => {
     <NextLink
       {...props}
       scroll={false}
-      className={`block font-medium text-red_r-11 ${props?.className || ''}`}
+      className={`block font-medium text-danger-500 ${props?.className || ''}`}
     >
       {children}
     </NextLink>
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index c01cb777..0bc9e967 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -22,7 +22,7 @@ const NavbarDesktop = () => {
 
   return (
     <DesktopView>
-      <div className='py-3 bg-yellow_r-10/80' id='desktop-nav-top'>
+      <div className='py-3 bg-warning-400' id='desktop-nav-top'>
         <div className='container mx-auto flex justify-between'>
           <Link href='/' className='!text-gray_r-12'>
             Tentang Indoteknik.com
@@ -129,13 +129,13 @@ const NavbarDesktop = () => {
               <>
                 <Link
                   href='/login'
-                  className='flex-1 flex justify-center items-center bg-red_r-11 !text-gray_r-1 rounded-none'
+                  className='flex-1 flex justify-center items-center bg-danger-500 !text-gray_r-1 rounded-none'
                 >
                   Masuk
                 </Link>
                 <Link
                   href='/register'
-                  className='flex-1 flex justify-center items-center bg-red_r-11 !text-gray_r-1 rounded-none rounded-tr-xl'
+                  className='flex-1 flex justify-center items-center bg-danger-500 !text-gray_r-1 rounded-none rounded-tr-xl'
                 >
                   Daftar
                 </Link>
diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx
index 32a8d170..d0627b24 100644
--- a/src/core/components/elements/Navbar/Search.jsx
+++ b/src/core/components/elements/Navbar/Search.jsx
@@ -73,7 +73,7 @@ const Search = () => {
                 <Link
                   href={`/shop/search?q=${suggestion.term}`}
                   key={index}
-                  className='px-3 py-3 !text-gray_r-12 font-normal hover:bg-yellow_r-4'
+                  className='px-3 py-3 !text-gray_r-12 font-normal'
                 >
                   {suggestion.term}
                 </Link>
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} />
diff --git a/src/pages/blog/[slug].jsx b/src/pages/blog/[slug].jsx
index 39f10b79..9305411d 100644
--- a/src/pages/blog/[slug].jsx
+++ b/src/pages/blog/[slug].jsx
@@ -20,7 +20,7 @@ export default function BlogDetail() {
   const contentClassNames = ` 
       prose 
       prose-gray 
-      prose-a:text-red_r-10 
+      prose-a:text-danger-500 
       prose-a:no-underline
       prose-p:my-4
       prose-headings:mt-6
diff --git a/src/pages/shop/quotation/finish.jsx b/src/pages/shop/quotation/finish.jsx
index 52e03cf6..f6c0ac6b 100644
--- a/src/pages/shop/quotation/finish.jsx
+++ b/src/pages/shop/quotation/finish.jsx
@@ -19,8 +19,8 @@ export default function FinishQuotation() {
         <div className='mx-auto container'>
           <div className='m-4 md:m-0 md:mt-10 px-4 py-6 shadow-md border border-gray_r-3'>
             <div className='flex'>
-              <span className='p-3 mx-auto bg-yellow_r-3 border border-yellow_r-6 rounded'>
-                <EnvelopeIcon className='w-8 text-yellow_r-11' />
+              <span className='p-3 mx-auto bg-warning-100 border border-warning-300 rounded'>
+                <EnvelopeIcon className='w-8 text-warning-800' />
               </span>
             </div>
             <p className='h2 text-center mt-6'>Terima Kasih {auth?.name}</p>
diff --git a/src/pages/sitemap/products.xml.js b/src/pages/sitemap/products.xml.js
new file mode 100644
index 00000000..e5fc8029
--- /dev/null
+++ b/src/pages/sitemap/products.xml.js
@@ -0,0 +1,30 @@
+import productSearchApi from '@/lib/product/api/productSearchApi'
+import { create } from 'xmlbuilder'
+import _ from 'lodash-contrib'
+
+export async function getServerSideProps({ res }) {
+  const baseUrl = process.env.SELF_HOST + '/sitemap/products'
+  const limit = 2500
+  const query = { limit }
+  const products = await productSearchApi({ query: _.toQuery(query) })
+  const pageCount = Math.ceil(products.response.numFound / limit)
+  const pages = Array.from({ length: pageCount }, (_, i) => i + 1)
+  const sitemapIndex = create('sitemapindex', { encoding: 'UTF-8' })
+
+  const date = new Date()
+  pages.forEach((page) => {
+    const sitemap = sitemapIndex.ele('sitemap')
+    sitemap.ele('loc', `${baseUrl}/${page}.xml`)
+    sitemap.ele('lastmod', date.toISOString().slice(0, 10))
+  })
+
+  res.setHeader('Content-Type', 'text/xml')
+  res.write(sitemapIndex.end())
+  res.end()
+
+  return { props: {} }
+}
+
+export default function SitemapProducts() {
+  return null
+}
diff --git a/src/pages/sitemap/products/[id].xml.js b/src/pages/sitemap/products/[id].xml.js
new file mode 100644
index 00000000..e9caaa00
--- /dev/null
+++ b/src/pages/sitemap/products/[id].xml.js
@@ -0,0 +1,32 @@
+import productSearchApi from '@/lib/product/api/productSearchApi'
+import { create } from 'xmlbuilder'
+import _ from 'lodash-contrib'
+import { createSlug } from '@/core/utils/slug'
+
+export async function getServerSideProps({ res }) {
+  const baseUrl = process.env.SELF_HOST + '/shop/product'
+  const limit = 2500
+  const query = { limit }
+  const products = await productSearchApi({ query: _.toQuery(query) })
+  console.log(products);
+  // const sitemap = create('urlset', { encoding: 'UTF-8' })
+
+  // const date = new Date()
+  // pages.forEach((page) => {
+  //   const url = sitemap.ele('url')
+  //   url.ele('loc', createSlug(baseUrl, '', ''))
+  //   url.ele('lastmod', date.toISOString().slice(0, 10))
+  //   url.ele('changefreq', 'weekly')
+  //   url.ele('priority', '0.8')
+  // })
+
+  // res.setHeader('Content-Type', 'text/xml')
+  // res.write(sitemap.end())
+  // res.end()
+
+  return { props: {} }
+}
+
+export default function SitemapProducts() {
+  return <></>
+}
diff --git a/src/pages/video.jsx b/src/pages/video.jsx
index 7a2a5ecc..708c3368 100644
--- a/src/pages/video.jsx
+++ b/src/pages/video.jsx
@@ -45,7 +45,7 @@ export default function Video() {
                 <div className='p-3'>
                   <a
                     href='https://www.youtube.com/@indoteknikb2bindustriale-c778'
-                    className='text-red_r-11 mb-2 block'
+                    className='text-danger-500 mb-2 block'
                   >
                     {video.channelName}
                   </a>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index d43dad1f..d27913a2 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -55,12 +55,12 @@ button {
     }
 
     .badge-red {
-        @apply bg-red_r-5
-            text-red_r-10;
+        @apply bg-danger-100
+            text-danger-600;
     }
 
     .badge-solid-red {
-        @apply bg-red_r-10
+        @apply bg-danger-500
             text-white;
     }
 
@@ -70,8 +70,8 @@ button {
     }
 
     .badge-yellow {
-        @apply bg-yellow_r-3
-            text-yellow_r-11;
+        @apply bg-warning-200
+            text-warning-900;
     }
 
     .badge-blue {
@@ -80,12 +80,12 @@ button {
     }
 
     .badge-green {
-        @apply bg-green_r-5
-            text-green_r-10;
+        @apply bg-success-100
+            text-success-600;
     }
 
     .badge-solid-green {
-        @apply bg-green_r-10
+        @apply bg-success-500
             text-white;
     }
 
@@ -105,20 +105,19 @@ button {
             w-full
             leading-none
             focus:outline-none
-            focus:border-yellow_r-9
+            focus:border-warning-500
             disabled:bg-gray_r-5;
     }
 
     .form-input[aria-invalid] {
-        @apply border-red_r-10
-            focus:border-red_r-10;
+        @apply border-danger-500
+            focus:border-danger-500;
     }
 
     .btn-yellow,
     .btn-light,
     .btn-red,
-    .btn-solid-red,
-    .btn-green {
+    .btn-solid-red {
         @apply block
             w-fit
             py-3
@@ -132,37 +131,29 @@ button {
     }
 
     .btn-yellow {
-        @apply bg-yellow_r-9
-            border-yellow_r-9
-            hover:bg-yellow_r-10
+        @apply bg-warning-500
+            border-warning-500
+            hover:bg-warning-600
             disabled:text-gray_r-10
-            disabled:bg-yellow_r-7
-            disabled:border-yellow_r-7;
+            disabled:bg-warning-200
+            disabled:border-warning-200;
     }
 
     .btn-red {
-        @apply bg-red_r-3
-            border-red_r-6
-            text-red_r-11
-            disabled:text-red_r-10
-            disabled:bg-red_r-6;
+        @apply bg-danger-100
+            border-danger-300
+            text-danger-500
+            disabled:text-danger-400
+            disabled:bg-danger-200;
     }
 
     .btn-solid-red {
-        @apply bg-red_r-11
-            border-red_r-11
+        @apply bg-danger-500
+            border-danger-500
             text-gray_r-1
             disabled:text-gray_r-1
-            disabled:bg-red_r-8
-            disabled:border-red_r-8;
-    }
-
-    .btn-green {
-        @apply bg-green_r-3
-            border-green_r-6
-            text-green_r-11
-            disabled:text-green_r-10
-            disabled:bg-green_r-6;
+            disabled:bg-danger-200
+            disabled:border-danger-200;
     }
 
     .btn-light {
@@ -333,7 +324,7 @@ button {
 }
 
 .swiper-pagination-bullet-active {
-    @apply !bg-red_r-11;
+    @apply !bg-danger-500;
 }
 
 .pagination {
@@ -359,8 +350,9 @@ button {
 }
 
 .pagination-item--active {
-    @apply border-yellow_r-9
-        bg-yellow_r-9;
+    @apply border-warning-500
+        bg-warning-500
+        hover:bg-warning-500;
 }
 
 .pagination-dots {
@@ -391,7 +383,7 @@ button {
 }
 
 .form-select__control--menu-is-open {
-    @apply !border-yellow_r-9;
+    @apply !border-warning-500;
 }
 
 .table-specification {
@@ -492,7 +484,7 @@ button {
         gap-x-2
         p-4
         items-center
-        bg-red_r-11
+        bg-danger-500
         font-medium
         !text-gray_r-1
         rounded-none
@@ -594,7 +586,7 @@ button {
 
 .category-mega-box__child-one {
     @apply text-gray_r-12/80 
-        hover:text-red_r-11 
+        hover:text-danger-500 
         transition-colors 
         ease-linear 
         duration-100 
@@ -603,7 +595,7 @@ button {
 
 .category-mega-box__child-two {
     @apply text-gray_r-12/80 
-        hover:text-red_r-11 
+        hover:text-danger-500 
         transition-colors 
         ease-linear 
         duration-100 
diff --git a/tailwind.config.js b/tailwind.config.js
index a679272e..a3a8a54e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -40,34 +40,6 @@ module.exports = {
         'caption-2': ['12px', '121%']
       },
       colors: {
-        green_r: {
-          1: '#fbfefc',
-          2: '#f2fcf5',
-          3: '#e9f9ee',
-          4: '#ddf3e4',
-          5: '#ccebd7',
-          6: '#b4dfc4',
-          7: '#92ceac',
-          8: '#5bb98c',
-          9: '#30a46c',
-          10: '#299764',
-          11: '#18794e',
-          12: '#153226'
-        },
-        yellow_r: {
-          1: '#fdfdf9',
-          2: '#fffce8',
-          3: '#fffbd1',
-          4: '#fff8bb',
-          5: '#fef2a4',
-          6: '#f9e68c',
-          7: '#efd36c',
-          8: '#ebbc00',
-          9: '#f5d90a',
-          10: '#f7ce00',
-          11: '#946800',
-          12: '#35290f'
-        },
         gray_r: {
           1: '#fcfcfc',
           2: '#f8f8f8',
@@ -82,33 +54,60 @@ module.exports = {
           11: '#6f6f6f',
           12: '#171717'
         },
-        red_r: {
-          1: '#fffcfc',
-          2: '#fff8f8',
-          3: '#ffefef',
-          4: '#ffe5e5',
-          5: '#fdd8d8',
-          6: '#f9c6c6',
-          7: '#f3aeaf',
-          8: '#eb9091',
-          9: '#e5484d',
-          10: '#dc3d43',
-          11: '#cd2b31',
-          12: '#381316'
+        primary: {
+          100: "#FDDACC",
+          200: "#FCAE99",
+          300: "#F67766",
+          400: "#ED4540",
+          500: "#E20613",
+          600: "#C20420",
+          700: "#A20329",
+          800: "#83012C",
+          900: "#6C012D",
+        },
+        success: {
+          100: "#ECFBD2",
+          200: "#D4F8A6",
+          300: "#B1EB77",
+          400: "#8ED853",
+          500: "#5EBF22",
+          600: "#45A418",
+          700: "#308911",
+          800: "#1E6E0A",
+          900: "#125B06",
+        },
+        info: {
+          100: "#CAFDF8",
+          200: "#97FBF9",
+          300: "#62EDF5",
+          400: "#3BD5EC",
+          500: "#00B3E0",
+          600: "#008BC0",
+          700: "#0068A1",
+          800: "#004A81",
+          900: "#00356B",
+        },
+        warning: {
+          100: "#FEF8CD",
+          200: "#FEEF9C",
+          300: "#FCE26B",
+          400: "#FAD646",
+          500: "#F8C20A",
+          600: "#D5A107",
+          700: "#B28305",
+          800: "#8F6503",
+          900: "#775101",
         },
-        sand_r: {
-          1: '#fdfdfc',
-          2: '#f9f9f8',
-          3: '#f3f3f2',
-          4: '#eeeeec',
-          5: '#e9e9e6',
-          6: '#e3e3e0',
-          7: '#dbdbd7',
-          8: '#c8c7c1',
-          9: '#90908c',
-          10: '#868682',
-          11: '#706f6c',
-          12: '#1b1b18'
+        danger: {
+          100: "#FCE0D1",
+          200: "#F9BBA5",
+          300: "#EF8B76",
+          400: "#E05E52",
+          500: "#CC2020",
+          600: "#AF1724",
+          700: "#921026",
+          800: "#760A26",
+          900: "#610625"
         }
       }
     }