fix(theme): safari autofill styling for dark mode readability in Input component (#5909)

* fix: add Safari autofill styling for dark mode readability in NumberInput & Input components

* chore: add changeset for Safari autofill dark mode fix in NumberInput & Input components

Author: hasegawa-101

.changeset/eleven-taxis-camp.md

@@ -0,0 +1,5 @@
+---
+"@heroui/theme": patch
+---
+
+fix Safari autofill styling for dark mode readability in NumberInput & Input components (#4657)

packages/core/theme/src/components/input.ts

@@ -48,6 +48,8 @@ const input = tv({
       "data-[type=color]:rounded-none",
       "file:cursor-pointer file:bg-transparent file:border-0",
       "autofill:bg-transparent bg-clip-text",
+      // Safari autofill styling fix - ensures text color is visible in dark mode
+      "dark:autofill:[-webkit-text-fill-color:hsl(var(--heroui-foreground))]",
     ],
     clearButton: [
       "p-2",

packages/core/theme/src/components/number-input.ts

@@ -46,6 +46,8 @@ const numberInput = tv({
       "data-[has-start-content=true]:ps-1.5",
       "data-[has-end-content=true]:pe-1.5",
       "autofill:bg-transparent bg-clip-text",
+      // Safari autofill styling fix - ensures text color is visible in dark mode
+      "dark:autofill:[-webkit-text-fill-color:hsl(var(--heroui-foreground))]",
     ],
     clearButton: [
       "p-2",