Update Vue components styles

Author: daniel-cintra

stubs/resources/js/Components/Form/AppCombobox.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="w-48">
         <AppButton
-            class="btn btn-primary flex w-full justify-between align-middle"
+            class="mt-1 flex w-full justify-between rounded-md border-0 bg-skin-neutral-1 px-3 py-2 align-middle text-skin-neutral-12 placeholder-skin-neutral-9 shadow-sm ring-1 ring-inset ring-skin-neutral-7 focus:ring-2 focus:ring-inset focus:ring-skin-neutral-7 sm:text-sm sm:leading-6"
             aria-haspopup="true"
             :aria-expanded="isOpen"
             @click="toggleState"
@@ -10,10 +10,10 @@
 
             <span>
                 <i
-                    class="ri-close-circle-line mr-2 inline-block hover:text-skin-primary-6"
+                    class="ri-close-circle-line mr-2 inline-block hover:text-skin-neutral-9"
                     @click.prevent="clearSelection"
                 ></i>
-                <i class="ri-arrow-down-line hover:text-skin-primary-6"></i>
+                <i class="ri-arrow-down-line hover:text-skin-neutral-9"></i>
             </span>
         </AppButton>
 

stubs/resources/js/Components/Form/AppInputDate.vue

@@ -7,7 +7,7 @@
         type="date"
         :name="name"
         :value="modelValue"
-        class="date-picker text-skin-base-neutral-12 focus:ring-skin-primary-focus mt-1 block w-full rounded-md border-0 bg-skin-neutral-1 px-3 py-2 placeholder-skin-neutral-9 shadow-sm ring-1 ring-inset ring-skin-neutral-7 focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6"
+        class="date-picker text-skin-neutral-12 focus:ring-skin-primary-focus mt-1 block w-full rounded-md border-0 bg-skin-neutral-1 px-3 py-2 placeholder-skin-neutral-9 shadow-sm ring-1 ring-inset ring-skin-neutral-7 focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6"
         @input="$emit('update:modelValue', $event.target.value)"
     />
 </template>

stubs/resources/js/Components/Form/AppInputPassword.vue

@@ -3,7 +3,7 @@
         <input
             :value="modelValue"
             v-bind="$attrs"
-            class="text-skin-base-neutral-12 focus:ring-skin-primary-focus mt-1 block w-full rounded-md border-0 bg-skin-neutral-1 px-3 py-2 placeholder-skin-neutral-6 shadow-sm ring-1 ring-inset ring-skin-neutral-7 focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6"
+            class="mt-1 block w-full rounded-md border-0 bg-skin-neutral-1 px-3 py-2 text-skin-neutral-12 placeholder-skin-neutral-6 shadow-sm ring-1 ring-inset ring-skin-neutral-7 focus:ring-2 focus:ring-inset focus:ring-skin-neutral-7 sm:text-sm sm:leading-6"
             :type="inputType"
             @input="$emit('update:modelValue', $event.target.value)"
         />

stubs/resources/js/Components/Form/AppInputText.vue

@@ -2,7 +2,7 @@
     <input
         ref="inputRef"
         :value="modelValue"
-        class="text-skin-base-neutral-12 focus:ring-skin-primary-focus mt-1 block w-full rounded-md border-0 bg-skin-neutral-1 px-3 py-2 placeholder-skin-neutral-9 shadow-sm ring-1 ring-inset ring-skin-neutral-7 focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6"
+        class="mt-1 block w-full rounded-md border-0 bg-skin-neutral-1 px-3 py-2 text-skin-neutral-12 placeholder-skin-neutral-9 shadow-sm ring-1 ring-inset ring-skin-neutral-7 focus:ring-2 focus:ring-inset focus:ring-skin-neutral-7 sm:text-sm sm:leading-6"
         @input="$emit('update:modelValue', $event.target.value)"
     />
 </template>

stubs/resources/js/Components/Form/AppTextArea.vue

@@ -2,7 +2,7 @@
     <textarea
         ref="textarea"
         placeholder="Enter your message here"
-        class="text-skin-base-neutral-12 focus:ring-skin-primary-focus mt-1 block w-full rounded-md border-0 bg-skin-neutral-1 px-3 py-2 placeholder-skin-neutral-9 shadow-sm ring-1 ring-inset ring-skin-neutral-7 focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6"
+        class="mt-1 block w-full rounded-md border-0 bg-skin-neutral-1 px-3 py-2 text-skin-neutral-12 placeholder-skin-neutral-9 shadow-sm ring-1 ring-inset ring-skin-neutral-7 focus:ring-2 focus:ring-inset focus:ring-skin-neutral-7 sm:text-sm sm:leading-6"
         :class="{ 'overflow-y-hidden': autoResize }"
         :value="modelValue"
         @input="handleInput"