make text-field outline style consistent with the select

mui · Feb 10, 2022 · 132a538 · 132a538
1 parent 6a1746c
commit 132a538
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 8 deletions.
diff --git a/docs/data/material/components/text-fields/UnstyledInput.js b/docs/data/material/components/text-fields/UnstyledInput.js
@@ -3,8 +3,10 @@ import InputUnstyled from '@mui/base/InputUnstyled';
 import { styled } from '@mui/system';
 
 const blue = {
+  100: '#DAECFF',
   200: '#80BFFF',
   400: '#3399FF',
+  600: '#0072E5',
 };
 
 const grey = {
@@ -39,8 +41,7 @@ const StyledInputElement = styled('input')(
   }
 
   &:focus {
-    outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]};
-    outline-offset: 2px;
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
   }
 `,
 );

diff --git a/docs/data/material/components/text-fields/UnstyledInput.tsx b/docs/data/material/components/text-fields/UnstyledInput.tsx
@@ -3,8 +3,10 @@ import InputUnstyled, { InputUnstyledProps } from '@mui/base/InputUnstyled';
 import { styled } from '@mui/system';
 
 const blue = {
+  100: '#DAECFF',
   200: '#80BFFF',
   400: '#3399FF',
+  600: '#0072E5',
 };
 
 const grey = {
@@ -39,8 +41,7 @@ const StyledInputElement = styled('input')(
   }
 
   &:focus {
-    outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]};
-    outline-offset: 2px;
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
   }
 `,
 );

diff --git a/docs/data/material/components/text-fields/UseInput.js b/docs/data/material/components/text-fields/UseInput.js
@@ -3,8 +3,10 @@ import { useInput } from '@mui/base';
 import { styled } from '@mui/system';
 
 const blue = {
+  100: '#DAECFF',
   200: '#80BFFF',
   400: '#3399FF',
+  600: '#0072E5',
 };
 
 const grey = {
@@ -39,8 +41,7 @@ const StyledInputElement = styled('input')(
   }
 
   &:focus {
-    outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]};
-    outline-offset: 2px;
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
   }
 `,
 );

diff --git a/docs/data/material/components/text-fields/UseInput.tsx b/docs/data/material/components/text-fields/UseInput.tsx
@@ -3,8 +3,10 @@ import { useInput } from '@mui/base';
 import { styled } from '@mui/system';
 
 const blue = {
+  100: '#DAECFF',
   200: '#80BFFF',
   400: '#3399FF',
+  600: '#0072E5',
 };
 
 const grey = {
@@ -39,8 +41,7 @@ const StyledInputElement = styled('input')(
   }
 
   &:focus {
-    outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]};
-    outline-offset: 2px;
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
   }
 `,
 );