chore: Update styles in settings pages (#11070)

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/javascript/dashboard/assets/scss/widgets/_base.scss

@@ -1,22 +1,22 @@
 // scss-lint:disable QualifyingElement
 
 // Base typography
+// -------------------------
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  @apply font-medium text-slate-800 dark:text-slate-50;
+  @apply font-medium text-n-slate-12;
 }
 
 p {
   text-rendering: optimizeLegibility;
-
   @apply mb-2 leading-[1.65] text-sm;
 
   a {
-    @apply text-woot-500 dark:text-woot-500 cursor-pointer;
+    @apply text-n-brand dark:text-n-brand cursor-pointer;
   }
 }
 
@@ -41,64 +41,82 @@ dl:not(.reset-base) {
 }
 
 // Form elements
+// -------------------------
 label {
-  @apply text-slate-800 dark:text-slate-200 block m-0 leading-7 text-sm font-medium;
-
-  &.error {
-    input {
-      @apply mb-1;
-    }
-  }
+  @apply text-n-slate-12 block m-0 leading-7 text-sm font-medium;
 }
 
 .input-wrap,
 .help-text {
-  @apply text-slate-800 dark:text-slate-100 text-sm font-medium;
-
-  .help-text {
-    @apply font-normal text-slate-600 dark:text-slate-400;
-  }
+  @apply text-n-slate-11 text-sm font-medium;
 }
 
 // Focus outline removal
 .button,
-textarea,
-input:focus {
+textarea {
   outline: none;
 }
 
-// Inputs
-input[type='text']:not(.reset-base),
-input[type='number']:not(.reset-base),
-input[type='password']:not(.reset-base),
-input[type='date']:not(.reset-base),
-input[type='email']:not(.reset-base),
-input[type='url']:not(.reset-base) {
-  @apply block box-border w-full transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] h-10 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md text-base font-normal bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
+// Field base styles (Input, TextArea, Select)
+@layer components {
+  .field-base {
+    @apply block box-border w-full transition-colors duration-[0.25s] ease-[ease-in-out] focus:outline-n-brand dark:focus:outline-n-brand appearance-none mx-0 mt-0 mb-4 py-2 px-3 rounded-lg text-base font-normal bg-n-alpha-black2 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 border-none outline outline-1 outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6;
+  }
 
-  &[disabled] {
-    @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600 cursor-not-allowed;
+  .field-disabled {
+    @apply opacity-50 outline-n-weak dark:outline-n-weak cursor-not-allowed;
+  }
+
+  .field-error {
+    @apply outline outline-1 outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8;
   }
 }
 
-input[type='file'] {
-  @apply bg-n-background leading-[1.15] mb-4;
+$form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not([type='radio']):not([type='button']):not([type='submit']):not([type='reset']):not(.reset-base):not(.multiselect__input):not(.no-margin)";
+
+#{$form-input-selector} {
+  @apply field-base h-10;
+
+  &[disabled] {
+    @apply field-disabled;
+  }
+
+  &.error {
+    @apply field-error mb-1;
+  }
+}
+
+input[type='file']:not(.multiselect__input) {
+  @apply leading-[1.15] mb-4 border-0 bg-transparent text-sm;
 }
 
 // Select
 select {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
-  background-position: right -1rem center;
   background-size: 9px 6px;
-  @apply h-10 mx-0 mt-0 mb-4 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 pr-6 pl-2 rounded-md w-full text-base font-normal appearance-none transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
+
+  @apply field-base h-10 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 ltr:bg-[right_-1rem_center] rtl:bg-[left_-1rem_center] ltr:pr-6 rtl:pl-6 rtl:pr-3 ltr:pl-3;
+
+  &[disabled] {
+    @apply field-disabled;
+  }
 }
 
 // Textarea
 textarea {
-  @apply block box-border w-full transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] h-16 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md text-base font-normal bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
+  @apply field-base h-16;
 
   &[disabled] {
-    @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600 cursor-not-allowed;
+    @apply field-disabled;
+  }
+}
+
+// Add mb-1 when .help-text exists within the same label container
+label:has(.help-text) {
+  input,
+  textarea,
+  select {
+    margin-bottom: 0.25rem !important;
   }
 }
 
@@ -109,18 +127,41 @@ textarea {
   }
 }
 
+// FormKit support
+.formkit-outer[data-invalid='true'] {
+  #{$form-input-selector},
+  textarea,
+  select {
+    @apply field-error;
+  }
+
+  .formkit-message {
+    @apply text-n-ruby-9 dark:text-n-ruby-9 block text-sm mb-2.5 w-full;
+  }
+}
+
 .error {
-  input,
+  #{$form-input-selector},
   input:not([type]),
   textarea,
   select,
   .multiselect > .multiselect__tags,
   .multiselect:not(.no-margin) {
-    @apply border border-solid border-red-400 dark:border-red-400 mb-1;
+    @apply field-error;
+  }
+
+  // Only add mb-1 when .message exists within the same .error container
+  // And exclude no-margin from the margin-bottom
+  &:has(.message) {
+    input:not(.no-margin),
+    textarea,
+    select {
+      margin-bottom: 0.25rem !important;
+    }
   }
 
   .message {
-    @apply text-red-400 dark:text-red-400 block text-sm mb-2.5 w-full;
+    @apply text-n-ruby-9 dark:text-n-ruby-9 block text-sm mb-2.5 w-full;
   }
 }
 
@@ -130,7 +171,7 @@ textarea {
   }
 
   .error {
-    @apply border-red-400 dark:border-red-400;
+    @apply text-n-ruby-9 dark:text-n-ruby-9;
   }
 }
 
@@ -141,11 +182,11 @@ code {
   @apply text-xs border-0;
 
   &.hljs {
-    @apply bg-n-slate-3 dark:bg-n-solid-3 text-slate-800 dark:text-slate-50 rounded-lg p-5;
+    @apply bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-12 rounded-lg p-5;
 
     .hljs-number,
     .hljs-string {
-      @apply text-red-800 dark:text-red-400;
+      @apply text-n-ruby-9 dark:text-n-ruby-9;
     }
 
     .hljs-name,