[theme] Add var for webkit autofill color

Author: ludij

packages/mui-material/src/FilledInput/FilledInput.js

@@ -203,80 +203,73 @@ const FilledInputInput = styled(InputBaseInput, {
   slot: 'Input',
   overridesResolver: inputBaseInputOverridesResolver,
 })(
-  memoTheme(({ theme }) => ({
-    paddingTop: 25,
-    paddingRight: 12,
-    paddingBottom: 8,
-    paddingLeft: 12,
-    ...(!theme.vars && {
-      '&:-webkit-autofill': {
-        WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
-        WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
-        caretColor: theme.palette.mode === 'light' ? null : '#fff',
-        borderTopLeftRadius: 'inherit',
-        borderTopRightRadius: 'inherit',
-      },
-    }),
-    ...(theme.vars && {
+  memoTheme(({ theme }) => {
+    const light = theme.palette.mode === 'light';
+    const webkitShadowBox = light ? 'unset' : '0 0 0 100px #266798 inset';
+    const webkitTextFillColor = light ? 'unset' : '#fff';
+    const caretColor = light ? 'unset' : '#fff';
+    return {
+      paddingTop: 25,
+      paddingRight: 12,
+      paddingBottom: 8,
+      paddingLeft: 12,
       '&:-webkit-autofill': {
+        WebkitBoxShadow: theme.vars
+          ? theme.vars.palette.FilledInput.autofillWebkitShadowBox
+          : webkitShadowBox,
+        WebkitTextFillColor: webkitTextFillColor,
+        caretColor,
         borderTopLeftRadius: 'inherit',
         borderTopRightRadius: 'inherit',
       },
-      [theme.getColorSchemeSelector('dark')]: {
-        '&:-webkit-autofill': {
-          WebkitBoxShadow: '0 0 0 100px #266798 inset',
-          WebkitTextFillColor: '#fff',
-          caretColor: '#fff',
-        },
-      },
-    }),
-    variants: [
-      {
-        props: {
-          size: 'small',
-        },
-        style: {
-          paddingTop: 21,
-          paddingBottom: 4,
+      variants: [
+        {
+          props: {
+            size: 'small',
+          },
+          style: {
+            paddingTop: 21,
+            paddingBottom: 4,
+          },
         },
-      },
-      {
-        props: ({ ownerState }) => ownerState.hiddenLabel,
-        style: {
-          paddingTop: 16,
-          paddingBottom: 17,
+        {
+          props: ({ ownerState }) => ownerState.hiddenLabel,
+          style: {
+            paddingTop: 16,
+            paddingBottom: 17,
+          },
         },
-      },
-      {
-        props: ({ ownerState }) => ownerState.startAdornment,
-        style: {
-          paddingLeft: 0,
+        {
+          props: ({ ownerState }) => ownerState.startAdornment,
+          style: {
+            paddingLeft: 0,
+          },
         },
-      },
-      {
-        props: ({ ownerState }) => ownerState.endAdornment,
-        style: {
-          paddingRight: 0,
+        {
+          props: ({ ownerState }) => ownerState.endAdornment,
+          style: {
+            paddingRight: 0,
+          },
         },
-      },
-      {
-        props: ({ ownerState }) => ownerState.hiddenLabel && ownerState.size === 'small',
-        style: {
-          paddingTop: 8,
-          paddingBottom: 9,
+        {
+          props: ({ ownerState }) => ownerState.hiddenLabel && ownerState.size === 'small',
+          style: {
+            paddingTop: 8,
+            paddingBottom: 9,
+          },
         },
-      },
-      {
-        props: ({ ownerState }) => ownerState.multiline,
-        style: {
-          paddingTop: 0,
-          paddingBottom: 0,
-          paddingLeft: 0,
-          paddingRight: 0,
+        {
+          props: ({ ownerState }) => ownerState.multiline,
+          style: {
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingLeft: 0,
+            paddingRight: 0,
+          },
         },
-      },
-    ],
-  })),
+      ],
+    };
+  }),
 );
 
 const FilledInput = React.forwardRef(function FilledInput(inProps, ref) {

packages/mui-material/src/OutlinedInput/OutlinedInput.js

@@ -134,57 +134,51 @@ const OutlinedInputInput = styled(InputBaseInput, {
   slot: 'Input',
   overridesResolver: inputBaseInputOverridesResolver,
 })(
-  memoTheme(({ theme }) => ({
-    padding: '16.5px 14px',
-    ...(!theme.vars && {
-      '&:-webkit-autofill': {
-        WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
-        WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
-        caretColor: theme.palette.mode === 'light' ? null : '#fff',
-        borderRadius: 'inherit',
-      },
-    }),
-    ...(theme.vars && {
+  memoTheme(({ theme }) => {
+    const light = theme.palette.mode === 'light';
+    const webkitShadowBox = light ? 'unset' : '0 0 0 100px #266798 inset';
+    const webkitTextFillColor = light ? 'unset' : '#fff';
+    const caretColor = light ? 'unset' : '#fff';
+    return {
+      padding: '16.5px 14px',
       '&:-webkit-autofill': {
+        WebkitBoxShadow: theme.vars
+          ? theme.vars.palette.OutlinedInput.autofillWebkitShadowBox
+          : webkitShadowBox,
+        WebkitTextFillColor: webkitTextFillColor,
+        caretColor,
         borderRadius: 'inherit',
       },
-      [theme.getColorSchemeSelector('dark')]: {
-        '&:-webkit-autofill': {
-          WebkitBoxShadow: '0 0 0 100px #266798 inset',
-          WebkitTextFillColor: '#fff',
-          caretColor: '#fff',
-        },
-      },
-    }),
-    variants: [
-      {
-        props: {
-          size: 'small',
-        },
-        style: {
-          padding: '8.5px 14px',
+      variants: [
+        {
+          props: {
+            size: 'small',
+          },
+          style: {
+            padding: '8.5px 14px',
+          },
         },
-      },
-      {
-        props: ({ ownerState }) => ownerState.multiline,
-        style: {
-          padding: 0,
+        {
+          props: ({ ownerState }) => ownerState.multiline,
+          style: {
+            padding: 0,
+          },
         },
-      },
-      {
-        props: ({ ownerState }) => ownerState.startAdornment,
-        style: {
-          paddingLeft: 0,
+        {
+          props: ({ ownerState }) => ownerState.startAdornment,
+          style: {
+            paddingLeft: 0,
+          },
         },
-      },
-      {
-        props: ({ ownerState }) => ownerState.endAdornment,
-        style: {
-          paddingRight: 0,
+        {
+          props: ({ ownerState }) => ownerState.endAdornment,
+          style: {
+            paddingRight: 0,
+          },
         },
-      },
-    ],
-  })),
+      ],
+    };
+  }),
 );
 
 const OutlinedInput = React.forwardRef(function OutlinedInput(inProps, ref) {

packages/mui-material/src/styles/createThemeFoundation.ts

@@ -153,6 +153,7 @@ export interface PaletteFilledInput {
   bg: string;
   hoverBg: string;
   disabledBg: string;
+  autofillWebkitShadowBox: string;
 }
 
 export interface PaletteLinearProgress {
@@ -164,6 +165,10 @@ export interface PaletteLinearProgress {
   warningBg: string;
 }
 
+export interface PaletteOutlinedInput {
+  autofillWebkitShadowBox: string;
+}
+
 export interface PaletteSkeleton {
   bg: string;
 }
@@ -237,6 +242,7 @@ export interface ColorSystemOptions {
     Chip?: Partial<PaletteChip>;
     FilledInput?: Partial<PaletteFilledInput>;
     LinearProgress?: Partial<PaletteLinearProgress>;
+    OutlinedInput?: Partial<PaletteOutlinedInput>;
     Skeleton?: Partial<PaletteSkeleton>;
     Slider?: Partial<PaletteSlider>;
     SnackbarContent?: Partial<PaletteSnackbarContent>;
@@ -270,6 +276,7 @@ export interface CssVarsPalette {
   Chip: PaletteChip;
   FilledInput: PaletteFilledInput;
   LinearProgress: PaletteLinearProgress;
+  OutlinedInput: PaletteOutlinedInput;
   Skeleton: PaletteSkeleton;
   Slider: PaletteSlider;
   SnackbarContent: PaletteSnackbarContent;

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

@@ -19,6 +19,7 @@ import {
   PaletteChip,
   PaletteFilledInput,
   PaletteLinearProgress,
+  PaletteOutlinedInput,
   PaletteSkeleton,
   PaletteSlider,
   PaletteSnackbarContent,
@@ -59,6 +60,7 @@ export type {
   PaletteChip,
   PaletteFilledInput,
   PaletteLinearProgress,
+  PaletteOutlinedInput,
   PaletteSkeleton,
   PaletteSlider,
   PaletteSnackbarContent,

packages/mui-material/src/styles/createThemeWithVars.js

@@ -247,6 +247,7 @@ export default function createThemeWithVars(options = {}, ...args) {
       'Chip',
       'FilledInput',
       'LinearProgress',
+      'OutlinedInput',
       'Skeleton',
       'Slider',
       'SnackbarContent',
@@ -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.FilledInput, 'autofillWebkitShadowBox', 'unset');
       setColor(
         palette.LinearProgress,
         'primaryBg',
@@ -334,6 +336,7 @@ export default function createThemeWithVars(options = {}, ...args) {
         'warningBg',
         colorMix(safeLighten, palette.warning.main, 0.62),
       );
+      setColor(palette.OutlinedInput, 'autofillWebkitShadowBox', 'unset');
       setColor(
         palette.Skeleton,
         'bg',
@@ -461,6 +464,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.FilledInput, 'autofillWebkitShadowBox', '0 0 0 100px #266798 inset');
       setColor(
         palette.LinearProgress,
         'primaryBg',
@@ -483,6 +487,7 @@ export default function createThemeWithVars(options = {}, ...args) {
         'warningBg',
         colorMix(safeDarken, palette.warning.main, 0.5),
       );
+      setColor(palette.OutlinedInput, 'autofillWebkitShadowBox', '0 0 0 100px #266798 inset');
       setColor(
         palette.Skeleton,
         'bg',

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

@@ -142,6 +142,7 @@ export type {
   PaletteCommonChannel,
   PaletteFilledInput,
   PaletteLinearProgress,
+  PaletteOutlinedInput,
   PaletteSkeleton,
   PaletteSlider,
   PaletteSnackbarContent,