chore: Remove older UI (#11720)

app/javascript/dashboard/components-next/textarea/TextArea.story.vue

@@ -9,19 +9,19 @@ const description = ref('');
 <template>
   <Story title="Components/TextArea" :layout="{ type: 'grid', width: '400' }">
     <Variant title="Default">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <TextArea placeholder="Default TextArea" />
       </div>
     </Variant>
 
     <Variant title="With Label">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <TextArea label="Description" placeholder="Enter your description" />
       </div>
     </Variant>
 
     <Variant title="Disabled">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <TextArea
           label="Disabled TextArea"
           placeholder="Can't type here"
@@ -31,7 +31,7 @@ const description = ref('');
     </Variant>
 
     <Variant title="With Character Count">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <TextArea
           v-model="bio"
           label="Bio"
@@ -43,7 +43,7 @@ const description = ref('');
     </Variant>
 
     <Variant title="Custom Max Length">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <TextArea
           v-model="description"
           label="Long Description"
@@ -55,11 +55,11 @@ const description = ref('');
     </Variant>
 
     <Variant title="Custom TextArea Class">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <TextArea
           label="Custom Style"
           placeholder="Custom textarea class"
-          custom-text-area-class="border-yellow-500 dark:border-yellow-700"
+          custom-text-area-class="border-n-amber-5 dark:border-n-amber-5"
         />
       </div>
     </Variant>

app/javascript/dashboard/components-next/textarea/TextArea.vue

@@ -47,7 +47,7 @@ const messageClass = computed(() => {
     case 'error':
       return 'text-n-ruby-9 dark:text-n-ruby-9';
     case 'success':
-      return 'text-green-500 dark:text-green-400';
+      return 'text-n-teal-10 dark:text-n-teal-10';
     default:
       return 'text-n-slate-11 dark:text-n-slate-11';
   }
@@ -179,7 +179,7 @@ onMounted(() => {
         }"
         :disabled="disabled"
         rows="1"
-        class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !outline-0 !mb-0 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 dark:text-n-slate-12 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
+        class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !outline-0 !mb-0 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 dark:text-n-slate-12 disabled:cursor-not-allowed disabled:opacity-50"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"