[Update ] Edit warna yang tak sevariabel

resources/css/app.css

@@ -10,9 +10,16 @@
         'Segoe UI Symbol', 'Noto Color Emoji';
 }
 
-@theme {
+/* @theme {
   --color-A: #F8F0E5;
   --color-B: #EADBC8;
   --color-C: #DAC0A3;
   --color-D: #024768;
-}
+} */
+
+@theme {
+  --color-A: #EBF1F5;
+  --color-B: #AFE5FF;
+  --color-C: #77C7EE;
+  --color-D: #024768;
+}

resources/js/components/CreateKategori.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="isOpen" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+    <div v-if="isOpen" class="fixed inset-0 flex items-center justify-center bg-black/75 z-50">
       <div class="bg-white rounded-lg shadow-lg w-96 p-6 relative">
         <!-- Header -->
         <div class="flex justify-between items-center mb-4">
@@ -16,7 +16,7 @@
             v-model="form.nama"
             type="text"
             placeholder="Masukkan nama kategori"
-            class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:ring focus:ring-[#c6a77d]"
+            class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:ring focus:ring-C"
           />
         </div>
 
@@ -31,7 +31,7 @@
           <button
             @click="saveKategori"
             :disabled="!form.nama"
-            class="px-4 py-2 bg-[#c6a77d] text-white rounded hover:bg-[#b09065] disabled:opacity-50"
+            class="px-4 py-2 bg-C text-white rounded hover:bg-B disabled:opacity-50"
           >
             Simpan
           </button>

resources/js/components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-    <footer class="bg-[#f9f3eb] border-t border-gray-200 py-4 px-6 flex flex-col md:flex-row items-center justify-between">
+    <footer class="bg-B border-t border-D py-4 px-6 flex flex-col md:flex-row items-center justify-between">
       <!-- Left: Logo -->
       <div class="flex items-center gap-2">
         <img :src="logo" alt="Logo" class="h-10">

resources/js/components/TrayList.vue

@@ -4,7 +4,7 @@
 
     <div v-else-if="error" class="text-center text-red-500 py-6">{{ error }}</div>
 
-    <div v-else-if="filteredTrays.length === 0" class="text-center text-gray-500 py-6">
+    <div v-else-if="filteredTrays.length === 0" class="text-center text-gray-500 py-30">
       Nampan tidak ditemukan.
     </div>
 

resources/js/pages/Kategori.vue

@@ -9,7 +9,7 @@
 			<div class="flex justify-between items-center mb-6">
 				<h1 class="text-2xl font-bold text-gray-800">Kategori</h1>
 				<button @click="tambahKategori"
-					class="px-4 py-2 bg-[#c6a77d] text-white rounded-md hover:bg-[#b09065] transition duration-200 flex items-center gap-2">
+					class="px-4 py-2 bg-C text-black rounded-md hover:bg-B transition duration-200 flex items-center gap-2">
 					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
 					</svg>
@@ -21,11 +21,11 @@
 			<div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden">
 				<table class="w-full">
 					<thead>
-						<tr class="bg-[#c6a77d] text-white">
+						<tr class="bg-C text-black">
-							<th class="px-6 py-4 text-left font-semibold border-r border-[#b09065]">
+							<th class="px-6 py-4 text-left font-semibold border-r border-C">
 								No
 							</th>
-							<th class="px-6 py-4 text-left font-semibold border-r border-[#b09065]">
+							<th class="px-6 py-4 text-left font-semibold border-r border-C">
 								Nama Kategori
 							</th>
 							<th class="px-6 py-4 text-center font-semibold">
@@ -35,7 +35,7 @@
 					</thead>
 					<tbody>
 						<tr v-for="(item, index) in kategori" :key="item.id"
-							class="border-b border-gray-200 hover:bg-gray-50 transition duration-150"
+							class="border-b border-gray-200 hover:bg-A transition duration-150"
 							:class="{ 'bg-gray-50': index % 2 === 1 }">
 							<td class="px-6 py-4 border-r border-gray-200 font-medium text-gray-900">
 								{{ index + 1 }}
@@ -74,8 +74,8 @@
 			</div>
 
 			<!-- Loading State -->
-			<div v-if="loading" class="flex justify-center items-center py-8">
+			<div v-if="loading" class="flex justify-center items-center h-screen">
-				<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-[#c6a77d]"></div>
+				<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>
 				<span class="ml-2 text-gray-600">Memuat data...</span>
 			</div>
 		</div>
@@ -159,10 +159,3 @@ onMounted(() => {
 	fetchKategoris();
 });
 </script>
-
-<style scoped>
-/* Custom styles jika diperlukan */
-.table-hover-row:hover {
-	background-color: #f9fafb;
-}
-</style>

resources/js/pages/Tray.vue

@@ -20,8 +20,7 @@
     <!-- Tambah Nampan -->
     <button 
       @click="openModal" 
-      class="px-4 py-2 hover:bg-green-700 rounded-md shadow font-semibold"
+      class="px-4 py-2 hover:bg-B bg-C rounded-md shadow font-semibold" >
-      style="background-color: #DAC0A3; color: #102C57;">
       Tambah Nampan
     </button>