Merapihkan tampilan

1 files changed, 37 insertions, 30 deletions

diff --git a/src/styles/globals.css b/src/styles/globals.css
index 5033a220..d9f33913 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -7,25 +7,31 @@
 html, body {
     @apply 
         w-screen
-        text-base
-        text-gray-900
-        bg-gray-50
+        text-body
+        text-gray_r-12
+        bg-gray_r-1
     ;
 }
 
 @layer base {
     h1, .h1 {
         @apply
-            text-lg
+            text-h6
+            font-semibold
+        ;
+    }
+
+    h2, .h2 {
+        @apply
+            text-body
             font-semibold
-            text-gray-900
         ;
     }
 
     a {
         @apply 
             font-medium
-            text-yellow-900
+            text-yellow_r-11
         ;
     }
 }
@@ -37,9 +43,10 @@ html, body {
     .badge-green {
         @apply
             text-xs
+            leading-none
             font-medium
             px-1
-            py-0.5
+            py-1
             rounded
             w-fit
         ;
@@ -47,36 +54,35 @@ html, body {
 
     .badge-red {
         @apply
-            bg-red-300
-            text-red-900
+            bg-red_r-6
+            text-red_r-11
         ;
     }
 
     .badge-gray {
         @apply
-            bg-gray-200
-            text-gray-700
+            bg-gray_r-6
+            text-gray_r-11
         ;
     }
 
     .badge-yellow {
         @apply
-            bg-yellow-300
-            text-yellow-900
+            bg-yellow_r-6
+            text-yellow_r-11
         ;
     }
 
     .badge-green {
         @apply
-            bg-green-200 
-            text-green-700
+            bg-green-100 
+            text-green-800
         ;
     }
 
     .form-label {
         @apply
-            text-sm
-            mb-1
+            font-medium
             block
         ;
     }
@@ -86,13 +92,14 @@ html, body {
             p-3
             rounded
             border
-            border-gray-300
+            text-gray_r-11
+            border-gray_r-7
             bg-transparent
             w-full
             leading-none
             focus:outline-none
             focus:ring-1 
-            focus:ring-yellow-900
+            focus:ring-yellow_r-9
         ;
     }
 
@@ -101,15 +108,14 @@ html, body {
             block
             w-fit
             p-3
-            bg-yellow-900
-            border-yellow-900
+            bg-yellow_r-9
+            border-yellow_r-9
             rounded
             border
-            text-gray-900
             text-center
-            disabled:text-gray-700
-            disabled:bg-yellow-700
-            disabled:border-yellow-700
+            disabled:text-gray_r-10
+            disabled:bg-yellow_r-7
+            disabled:border-yellow_r-7
             ease-linear
             duration-150
         ;
@@ -134,7 +140,8 @@ html, body {
             w-full
             h-full
             border
-            border-gray-300
+            border-gray_r-6
+            bg-gray_r-2
             rounded
             relative
             flex
@@ -164,13 +171,13 @@ html, body {
 
     .product-card__title {
         @apply
-            text-sm
-            text-gray-900
+            text-caption-p
+            text-gray_r-12
         ;
     }
 
     .product-card__brand {
-        @apply text-sm;
+        @apply text-caption-p;
     }
 }
 
@@ -339,7 +346,7 @@ html, body {
         rounded 
         ease-linear 
         bg-gray-100
-        text-sm
+        text-caption
     ;
 }