From 413af770d7b032d05bfbadf7542d70d64c60e86d Mon Sep 17 00:00:00 2001
From: Luutzen Dijkstra <luutzen.dijkstra@gmail.com>
Date: Sun, 21 Dec 2025 22:44:59 +0100
Subject: [PATCH] [theme] Add var for webkit autofill color

---
 packages/mui-material/src/FilledInput/FilledInput.js      | 7 ++++++-
 packages/mui-material/src/OutlinedInput/OutlinedInput.js  | 7 ++++++-
 packages/mui-material/src/styles/createThemeFoundation.ts | 6 ++++++
 packages/mui-material/src/styles/createThemeWithVars.d.ts | 2 ++
 packages/mui-material/src/styles/createThemeWithVars.js   | 3 +++
 packages/mui-material/src/styles/index.d.ts               | 1 +
 6 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js
index e80b834e33fedf..e63445f71f73fe 100644
--- a/packages/mui-material/src/FilledInput/FilledInput.js
+++ b/packages/mui-material/src/FilledInput/FilledInput.js
@@ -222,9 +222,14 @@ const FilledInputInput = styled(InputBaseInput, {
         borderTopLeftRadius: 'inherit',
         borderTopRightRadius: 'inherit',
       },
+      [theme.getColorSchemeSelector('light')]: {
+        '&:-webkit-autofill': {
+          WebkitBoxShadow: theme.vars.palette.Input.autofillWebkitShadowBox,
+        },
+      },
       [theme.getColorSchemeSelector('dark')]: {
         '&:-webkit-autofill': {
-          WebkitBoxShadow: '0 0 0 100px #266798 inset',
+          WebkitBoxShadow: theme.vars.palette.Input.autofillWebkitShadowBox,
           WebkitTextFillColor: '#fff',
           caretColor: '#fff',
         },
diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.js b/packages/mui-material/src/OutlinedInput/OutlinedInput.js
index 83fb638a7640f7..6c6b8cba88d1c2 100644
--- a/packages/mui-material/src/OutlinedInput/OutlinedInput.js
+++ b/packages/mui-material/src/OutlinedInput/OutlinedInput.js
@@ -148,9 +148,14 @@ const OutlinedInputInput = styled(InputBaseInput, {
       '&:-webkit-autofill': {
         borderRadius: 'inherit',
       },
+      [theme.getColorSchemeSelector('light')]: {
+        '&:-webkit-autofill': {
+          WebkitBoxShadow: theme.vars.palette.Input.autofillWebkitShadowBox,
+        },
+      },
       [theme.getColorSchemeSelector('dark')]: {
         '&:-webkit-autofill': {
-          WebkitBoxShadow: '0 0 0 100px #266798 inset',
+          WebkitBoxShadow: theme.vars.palette.Input.autofillWebkitShadowBox,
           WebkitTextFillColor: '#fff',
           caretColor: '#fff',
         },
diff --git a/packages/mui-material/src/styles/createThemeFoundation.ts b/packages/mui-material/src/styles/createThemeFoundation.ts
index eaca3a4ff938f8..81780537d702b0 100644
--- a/packages/mui-material/src/styles/createThemeFoundation.ts
+++ b/packages/mui-material/src/styles/createThemeFoundation.ts
@@ -155,6 +155,10 @@ export interface PaletteFilledInput {
   disabledBg: string;
 }
 
+export interface PaletteInput {
+  autofillWebkitShadowBox: string;
+}
+
 export interface PaletteLinearProgress {
   primaryBg: string;
   secondaryBg: string;
@@ -236,6 +240,7 @@ export interface ColorSystemOptions {
     Button?: Partial<PaletteButton>;
     Chip?: Partial<PaletteChip>;
     FilledInput?: Partial<PaletteFilledInput>;
+    Input?: Partial<PaletteInput>;
     LinearProgress?: Partial<PaletteLinearProgress>;
     Skeleton?: Partial<PaletteSkeleton>;
     Slider?: Partial<PaletteSlider>;
@@ -269,6 +274,7 @@ export interface CssVarsPalette {
   Button: PaletteButton;
   Chip: PaletteChip;
   FilledInput: PaletteFilledInput;
+  Input: Partial<PaletteInput>;
   LinearProgress: PaletteLinearProgress;
   Skeleton: PaletteSkeleton;
   Slider: PaletteSlider;
diff --git a/packages/mui-material/src/styles/createThemeWithVars.d.ts b/packages/mui-material/src/styles/createThemeWithVars.d.ts
index ccba03bcbdd918..2c3cdbbcfd538d 100644
--- a/packages/mui-material/src/styles/createThemeWithVars.d.ts
+++ b/packages/mui-material/src/styles/createThemeWithVars.d.ts
@@ -18,6 +18,7 @@ import {
   PaletteButton,
   PaletteChip,
   PaletteFilledInput,
+  PaletteInput,
   PaletteLinearProgress,
   PaletteSkeleton,
   PaletteSlider,
@@ -58,6 +59,7 @@ export type {
   PaletteButton,
   PaletteChip,
   PaletteFilledInput,
+  PaletteInput,
   PaletteLinearProgress,
   PaletteSkeleton,
   PaletteSlider,
diff --git a/packages/mui-material/src/styles/createThemeWithVars.js b/packages/mui-material/src/styles/createThemeWithVars.js
index 0a2ba6d4c0c36f..d254945ec5a393 100644
--- a/packages/mui-material/src/styles/createThemeWithVars.js
+++ b/packages/mui-material/src/styles/createThemeWithVars.js
@@ -246,6 +246,7 @@ export default function createThemeWithVars(options = {}, ...args) {
       'Button',
       'Chip',
       'FilledInput',
+      'Input',
       'LinearProgress',
       'Skeleton',
       'Slider',
@@ -312,6 +313,7 @@ export default function createThemeWithVars(options = {}, ...args) {
       setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
       setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
       setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
+      setColor(palette.Input, 'autofillWebkitShadowBox', 'unset');
       setColor(
         palette.LinearProgress,
         'primaryBg',
@@ -461,6 +463,7 @@ export default function createThemeWithVars(options = {}, ...args) {
       setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
       setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
       setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
+      setColor(palette.Input, 'autofillWebkitShadowBox', '0 0 0 100px #266798 inset');
       setColor(
         palette.LinearProgress,
         'primaryBg',
diff --git a/packages/mui-material/src/styles/index.d.ts b/packages/mui-material/src/styles/index.d.ts
index 3dc722e2fea780..9d46581a765935 100644
--- a/packages/mui-material/src/styles/index.d.ts
+++ b/packages/mui-material/src/styles/index.d.ts
@@ -141,6 +141,7 @@ export type {
   PaletteColorChannel,
   PaletteCommonChannel,
   PaletteFilledInput,
+  PaletteInput,
   PaletteLinearProgress,
   PaletteSkeleton,
   PaletteSlider,