From 132a5389f2cd1039d5baf4d39c3fc56e749e3a4d Mon Sep 17 00:00:00 2001
From: danilo leal <daniloleal09@gmail.com>
Date: Thu, 10 Feb 2022 08:32:35 -0300
Subject: [PATCH] make text-field outline style consistent with the select

---
 docs/data/material/components/text-fields/UnstyledInput.js  | 5 +++--
 docs/data/material/components/text-fields/UnstyledInput.tsx | 5 +++--
 docs/data/material/components/text-fields/UseInput.js       | 5 +++--
 docs/data/material/components/text-fields/UseInput.tsx      | 5 +++--
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/docs/data/material/components/text-fields/UnstyledInput.js b/docs/data/material/components/text-fields/UnstyledInput.js
index 82254a98e30456..1e73317bd29bac 100644
--- 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
index 5f58e2fbb94ab4..3a0b4279973828 100644
--- 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
index 8feda8f3dee273..22b6115c184608 100644
--- 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
index 037aa39b88d441..855dfe0adef6e7 100644
--- 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]};
   }
 `,
 );