frontend/src/components/TextInput/TextInput.tsx

@@ -83,12 +83,17 @@ export default function TextInput({
             style={widthStyle}
         >
             {icon && (
-                <div className="flex items-center justify-center shrink-0 text-base-ink-placeholder" style={iconContainerStyles[size]}>
+                <div
-                    {isValidElement<{ style?: CSSProperties }>(icon) ? cloneElement(icon, { style: iconStyles[size] }) : icon}
+                    className="flex items-center justify-center shrink-0 text-base-ink-placeholder"
+                    style={iconContainerStyles[size]}
+                >
+                    {isValidElement<{ style?: CSSProperties }>(icon)
+                        ? cloneElement(icon, { style: iconStyles[size] })
+                        : icon}
                 </div>
             )}
             <input
-                className={`flex-1 min-w-0 h-full bg-transparent border-none outline-none text-base-ink-strong placeholder:text-base-ink-placeholder ${inputPadding} ${textClasses[size]}`}
+                className={`flex-1 min-w-0 h-full bg-transparent border-none outline-none text-base-ink-max placeholder:text-base-ink-placeholder ${inputPadding} ${textClasses[size]}`}
                 {...props}
             />
         </div>

frontend/src/index.css

@@ -70,6 +70,7 @@
   --color-sky-70: #c7e8ed;
   --color-sky-35: #e4f4f7;
   --color-sky-20: #eff9fa;
+  --color-base-ink-max: #000000;
   --color-base-ink-strong: #4b4b4b;
   --color-base-ink-medium: #bababa;
   --color-base-ink-soft: #dadada;
@@ -141,6 +142,7 @@
   --color-sky-70: #2d2b2b;
   --color-sky-35: #1f1e1e;
   --color-sky-20: #141414;
+  --color-base-ink-max: #ffffff;
   --color-base-ink-strong: #ffffff;
   --color-base-ink-medium: #636363;
   --color-base-ink-soft: #555555;