[theme] Add var for webkit autofill color

Author: ludij

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',
         },

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',
         },

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;

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,

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',

packages/mui-material/src/styles/index.d.ts

@@ -141,6 +141,7 @@ export type {
   PaletteColorChannel,
   PaletteCommonChannel,
   PaletteFilledInput,
+  PaletteInput,
   PaletteLinearProgress,
   PaletteSkeleton,
   PaletteSlider,