Merge branch 'master' into development_tri/condition_page_detail_product

# Conflicts:
#	src/lib/product/components/Product/ProductDesktop.jsx

1 files changed, 36 insertions, 43 deletions

diff --git a/src/styles/globals.css b/src/styles/globals.css
index d43dad1f..551ff057 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,30 @@ 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
+            hover:bg-danger-600
             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 +325,7 @@ button {
 }
 
 .swiper-pagination-bullet-active {
-    @apply !bg-red_r-11;
+    @apply !bg-danger-500;
 }
 
 .pagination {
@@ -359,8 +351,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 +384,7 @@ button {
 }
 
 .form-select__control--menu-is-open {
-    @apply !border-yellow_r-9;
+    @apply !border-warning-500;
 }
 
 .table-specification {
@@ -492,11 +485,11 @@ button {
         gap-x-2
         p-4
         items-center
-        bg-red_r-11
+        bg-danger-500
         font-medium
         !text-gray_r-1
         rounded-none
-        rounded-tr-xl;
+        rounded-t-xl;
 }
 
 .navbar-user-dropdown-button span {
@@ -594,7 +587,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 +596,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