From bcfac70e2ae79006440565e72d303bce97e89959 Mon Sep 17 00:00:00 2001
From: maulanasdqn <maulanasdqn@gmail.com>
Date: Sat, 11 Apr 2026 10:44:04 +0700
Subject: [PATCH] fix: remove all dark mode styles from shared UI components

Stripped dark: classes from Input, Textarea, Button, and InputField
components. These were causing black/dark backgrounds in modals and
forms across all apps (backoffice, gacha, dimentorin, etc).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/backoffice/src/app/404.tsx                   | 6 +++---
 libs/ui/src/atoms/button/button.tsx               | 8 ++++----
 libs/ui/src/atoms/input/input.tsx                 | 2 +-
 libs/ui/src/atoms/textarea/textarea.tsx           | 2 +-
 libs/ui/src/molecules/input-field/input-field.tsx | 2 +-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/backoffice/src/app/404.tsx b/apps/backoffice/src/app/404.tsx
index f1e1736..5eda28b 100644
--- a/apps/backoffice/src/app/404.tsx
+++ b/apps/backoffice/src/app/404.tsx
@@ -2,13 +2,13 @@ import { Link } from 'react-router-dom';
 
 export default function NotFoundPage() {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950">
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
       <div className="text-center">
         <h1 className="text-9xl font-bold text-gray-200 mb-4">404</h1>
-        <h2 className="text-3xl font-semibold text-gray-900 dark:text-gray-300 mb-4">
+        <h2 className="text-3xl font-semibold text-gray-900 mb-4">
           Page Not Found
         </h2>
-        <p className="text-gray-600 dark:text-gray-400 mb-8">
+        <p className="text-gray-600 mb-8">
           The page you are looking for doesn't exist or has been moved.
         </p>
         <Link
diff --git a/libs/ui/src/atoms/button/button.tsx b/libs/ui/src/atoms/button/button.tsx
index 89b34cb..0d5da12 100644
--- a/libs/ui/src/atoms/button/button.tsx
+++ b/libs/ui/src/atoms/button/button.tsx
@@ -14,13 +14,13 @@ export const buttonVariants = cva(
       variant: {
         primary: 'bg-primary-500 hover:bg-primary-600 text-white shadow-md',
         secondary:
-          'bg-white dark:bg-gray-800 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-gray-50 dark:hover:bg-gray-700 text-primary-500 dark:text-primary-400 shadow-md dark:shadow-gray-900/50 border dark:border-gray-700',
-        text: 'bg-transparent hover:text-primary-600 dark:hover:text-primary-400 hover:bg-gray-50 dark:hover:bg-gray-800 text-primary-500 dark:text-primary-400',
+          'bg-white hover:text-primary-600 hover:bg-gray-50 text-primary-500 shadow-md border',
+        text: 'bg-transparent hover:text-primary-600 hover:bg-gray-50 text-primary-500',
         bordered:
-          'border border-primary-500 dark:border-primary-400 hover:border-primary-600 dark:hover:border-primary-300 bg-transparent hover:text-primary-600 dark:hover:text-primary-300 hover:bg-gray-50 dark:hover:bg-gray-800 text-primary-500 dark:text-primary-400',
+          'border border-primary-500 hover:border-primary-600 bg-transparent hover:text-primary-600 hover:bg-gray-50 text-primary-500',
         success: 'bg-success-500 hover:bg-success-600 text-white shadow-md',
         danger:
-          'bg-danger-100 dark:bg-danger-500/20 hover:bg-danger-200 dark:hover:bg-danger-500/30 text-danger-500 shadow-md dark:shadow-gray-900/50',
+          'bg-danger-100 hover:bg-danger-200 text-danger-500 shadow-md',
       },
       size: {
         sm: 'text-[12px] max-h-[36px]',
diff --git a/libs/ui/src/atoms/input/input.tsx b/libs/ui/src/atoms/input/input.tsx
index 5959720..28ac185 100644
--- a/libs/ui/src/atoms/input/input.tsx
+++ b/libs/ui/src/atoms/input/input.tsx
@@ -58,7 +58,7 @@ export const Input: FC<TInputProps> = ({
   };
 
   const mergedClassName = cn(
-    `px-[12px] py-[8px] text-neutral-800 dark:text-white bg-white dark:bg-gray-800 placeholder:text-neutral-300 dark:placeholder:text-neutral-500 border border-neutral-200 dark:border-neutral-600 hover:border-blue-300 dark:hover:border-blue-500 focus:outline-1 focus:outline-blue-500 dark:focus:outline-primary-500 rounded-md font-bai-jamjuree w-full ${
+    `px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree w-full ${
       widthform === 'standard' ? 'min-w-70' : ''
     }`,
     sizeClasses[size].textSize,
diff --git a/libs/ui/src/atoms/textarea/textarea.tsx b/libs/ui/src/atoms/textarea/textarea.tsx
index 44acd65..b685148 100644
--- a/libs/ui/src/atoms/textarea/textarea.tsx
+++ b/libs/ui/src/atoms/textarea/textarea.tsx
@@ -38,7 +38,7 @@ export const Textarea: FC<TTextareaProps> = ({
   ...rest
 }): ReactElement => {
   const mergedClassName = cn(
-    'rounded-md border border-neutral-200 dark:border-neutral-600 hover:border-blue-300 dark:hover:border-blue-500 focus:outline-1 focus:outline-blue-500 dark:focus:outline-primary-500 px-[12px] py-[8px] bg-white dark:bg-gray-800 text-neutral-800 dark:text-white placeholder:text-neutral-300 dark:placeholder:text-neutral-500 invalid:border-danger-500 invalid:text-danger-500',
+    'rounded-md border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 px-[12px] py-[8px] bg-white text-neutral-800 placeholder:text-neutral-300 invalid:border-danger-500 invalid:text-danger-500',
     sizeClasses[size],
     disabled && disabledClass,
     error && errorClass,
diff --git a/libs/ui/src/molecules/input-field/input-field.tsx b/libs/ui/src/molecules/input-field/input-field.tsx
index bd1fbf3..11f803f 100644
--- a/libs/ui/src/molecules/input-field/input-field.tsx
+++ b/libs/ui/src/molecules/input-field/input-field.tsx
@@ -56,7 +56,7 @@ export const InputField: FC<TInputFieldProps> = ({
       <label
         htmlFor={htmlFor}
         className={cn(
-          'items-start justify-item-start text-start text-neutral-800! dark:text-neutral-300!',
+          'items-start justify-item-start text-start text-neutral-800!',
           sizeClasses[size].label
         )}
       >