Merge pull request #137 from unix/styles

fix: fix input styles and baseline

components/auto-complete/__tests__/__snapshots__/search.test.tsx.snap

@@ -149,6 +149,13 @@ initialize {
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       ",
                   "next": null,
                   "parent": [Circular],
@@ -255,6 +262,13 @@ initialize {
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       ",
                 "next": null,
                 "parent": [Circular],
@@ -548,6 +562,13 @@ initialize {
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       ",
                     "next": null,
                     "parent": [Circular],
@@ -654,6 +675,13 @@ initialize {
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       ",
                   "next": null,
                   "parent": [Circular],
@@ -943,6 +971,13 @@ initialize {
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       ",
                   "next": null,
                   "parent": [Circular],
@@ -1049,6 +1084,13 @@ initialize {
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       ",
                 "next": null,
                 "parent": [Circular],
@@ -1342,6 +1384,13 @@ initialize {
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       ",
                     "next": null,
                     "parent": [Circular],
@@ -1448,6 +1497,13 @@ initialize {
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       ",
                   "next": null,
                   "parent": [Circular],

components/input/__tests__/__snapshots__/index.test.tsx.snap

@@ -91,6 +91,13 @@ exports[`Input should be work with icon 1`] = `
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       </style></div><div class=\\"with-label\\"><div class=\\"input-container \\"><div class=\\"input-wrapper   \\"><input type=\\"text\\" class=\\" right-icon\\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"><span class=\\"input-icon\\"><span>test-icon</span><style>
         .input-icon {
           box-sizing: content-box;
@@ -181,6 +188,13 @@ exports[`Input should be work with icon 1`] = `
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       </style></div></div>"
 `;
 
@@ -289,6 +303,13 @@ exports[`Input should be work with label 1`] = `
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       </style></div><div class=\\"with-label\\"><div class=\\"input-container \\"><div class=\\"input-wrapper   right-label\\"><input type=\\"text\\" class=\\" \\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"></div><span class=\\"right\\">label<style>
         span {
           display: inline-flex;
@@ -393,6 +414,13 @@ exports[`Input should be work with label 1`] = `
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       </style></div><div class=\\"with-label\\"><label><span>Block Label</span><style>
         label {
           display: block;
@@ -487,6 +515,13 @@ exports[`Input should be work with label 1`] = `
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       </style></div></div>"
 `;
 
@@ -567,6 +602,13 @@ exports[`Input should work with different sizes 1`] = `
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       </style></div><div class=\\"with-label\\"><div class=\\"input-container \\"><div class=\\"input-wrapper   \\"><input type=\\"text\\" class=\\" \\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"></div></div><style>
         .with-label {
           display: inline-block;
@@ -643,6 +685,13 @@ exports[`Input should work with different sizes 1`] = `
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       </style></div><div class=\\"with-label\\"><div class=\\"input-container \\"><div class=\\"input-wrapper   \\"><input type=\\"text\\" class=\\" \\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"></div></div><style>
         .with-label {
           display: inline-block;
@@ -719,6 +768,13 @@ exports[`Input should work with different sizes 1`] = `
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       </style></div><div class=\\"with-label\\"><div class=\\"input-container \\"><div class=\\"input-wrapper   \\"><input type=\\"text\\" class=\\" \\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"></div></div><style>
         .with-label {
           display: inline-block;
@@ -795,6 +851,13 @@ exports[`Input should work with different sizes 1`] = `
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       </style></div></div>"
 `;
 
@@ -875,6 +938,13 @@ exports[`Input should work with different status 1`] = `
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       </style></div><div class=\\"with-label\\"><div class=\\"input-container \\"><div class=\\"input-wrapper   \\"><input type=\\"text\\" class=\\" \\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"></div></div><style>
         .with-label {
           display: inline-block;
@@ -951,6 +1021,13 @@ exports[`Input should work with different status 1`] = `
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       </style></div><div class=\\"with-label\\"><div class=\\"input-container \\"><div class=\\"input-wrapper   \\"><input type=\\"text\\" class=\\" \\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"></div></div><style>
         .with-label {
           display: inline-block;
@@ -1027,5 +1104,12 @@ exports[`Input should work with different status 1`] = `
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: #999;
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       </style></div></div>"
 `;

components/input/input.tsx

@@ -215,6 +215,13 @@ const Input: React.FC<React.PropsWithChildren<InputProps>> = ({
         ::placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder {
           color: ${theme.palette.accents_3};
         }
+        
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:active,
+        input:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px ${theme.palette.background} inset !important;
+        }
       `}</style>
     </div>
   )

components/styles/__tests__/__snapshots__/baseline.test.tsx.snap

@@ -26,9 +26,14 @@ initialize {
           padding: 0;
           min-height: 100%;
           position: relative;
+          overflow-x: hidden;
           font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
         }
         
+        #__next {
+          overflow-x: hidden;
+        }
+        
         *, *:before, *:after {
           box-sizing: inherit;
           text-rendering: geometricPrecision;
@@ -51,7 +56,7 @@ initialize {
         small {
           margin: 0;
           line-height: 1.5;
-          font-size: 14px;
+          font-size: .875rem;
         }
         
         b {
@@ -109,7 +114,6 @@ initialize {
         }
         
         h1, h2, h3, h4, h5, h6 {
-          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
           color: inherit;
           margin: 0 0 .625rem 0;
         }
@@ -151,10 +155,6 @@ initialize {
           font-weight: 600;
         }
         
-        input-webkit-autofill {
-          box-shadow: 0 0 0 100px var(--geist-background) inset;
-        }
-        
         button, input, select, textarea {
           font-family: inherit;
           font-size: inherit;
@@ -162,7 +162,7 @@ initialize {
           color: inherit;
           margin: 0;
         }
-        
+
         button:focus, input:focus, select:focus, textarea:focus {
           outline: none;
         }
@@ -318,9 +318,14 @@ initialize {
           padding: 0;
           min-height: 100%;
           position: relative;
+          overflow-x: hidden;
           font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
         }
         
+        #__next {
+          overflow-x: hidden;
+        }
+        
         *, *:before, *:after {
           box-sizing: inherit;
           text-rendering: geometricPrecision;
@@ -343,7 +348,7 @@ initialize {
         small {
           margin: 0;
           line-height: 1.5;
-          font-size: 14px;
+          font-size: .875rem;
         }
         
         b {
@@ -401,7 +406,6 @@ initialize {
         }
         
         h1, h2, h3, h4, h5, h6 {
-          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
           color: inherit;
           margin: 0 0 .625rem 0;
         }
@@ -443,10 +447,6 @@ initialize {
           font-weight: 600;
         }
         
-        input-webkit-autofill {
-          box-shadow: 0 0 0 100px var(--geist-background) inset;
-        }
-        
         button, input, select, textarea {
           font-family: inherit;
           font-size: inherit;
@@ -454,7 +454,7 @@ initialize {
           color: inherit;
           margin: 0;
         }
-        
+
         button:focus, input:focus, select:focus, textarea:focus {
           outline: none;
         }

components/styles/css-baseline/css-baseline.tsx

@@ -31,9 +31,14 @@ const CSSBaseline: React.FC<React.PropsWithChildren<{}>> = React.memo(({
           padding: 0;
           min-height: 100%;
           position: relative;
+          overflow-x: hidden;
           font-family: ${theme.font.sans};
         }
         
+        #__next {
+          overflow-x: hidden;
+        }
+        
         *, *:before, *:after {
           box-sizing: inherit;
           text-rendering: geometricPrecision;
@@ -56,7 +61,7 @@ const CSSBaseline: React.FC<React.PropsWithChildren<{}>> = React.memo(({
         small {
           margin: 0;
           line-height: 1.5;
-          font-size: 14px;
+          font-size: .875rem;
         }
         
         b {
@@ -114,7 +119,6 @@ const CSSBaseline: React.FC<React.PropsWithChildren<{}>> = React.memo(({
         }
         
         h1, h2, h3, h4, h5, h6 {
-          font-family: ${theme.font.sans};
           color: inherit;
           margin: 0 0 .625rem 0;
         }
@@ -156,10 +160,6 @@ const CSSBaseline: React.FC<React.PropsWithChildren<{}>> = React.memo(({
           font-weight: 600;
         }
         
-        input-webkit-autofill {
-          box-shadow: 0 0 0 100px var(--geist-background) inset;
-        }
-        
         button, input, select, textarea {
           font-family: inherit;
           font-size: inherit;
@@ -167,7 +167,7 @@ const CSSBaseline: React.FC<React.PropsWithChildren<{}>> = React.memo(({
           color: inherit;
           margin: 0;
         }
-        
+
         button:focus, input:focus, select:focus, textarea:focus {
           outline: none;
         }

components/textarea/__tests__/__snapshots__/index.test.tsx.snap

@@ -44,6 +44,13 @@ exports[`Textarea should render correctly 1`] = `
         .disabled > textarea {
           cursor: not-allowed;
         }
+        
+        textarea:-webkit-autofill,
+        textarea:-webkit-autofill:hover,
+        textarea:-webkit-autofill:active,
+        textarea:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       </style></div>"
 `;
 
@@ -91,6 +98,13 @@ exports[`Textarea should work with different styles 1`] = `
         .disabled > textarea {
           cursor: not-allowed;
         }
+        
+        textarea:-webkit-autofill,
+        textarea:-webkit-autofill:hover,
+        textarea:-webkit-autofill:active,
+        textarea:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       </style></div><div class=\\"wrapper   \\"><textarea></textarea><style>
         .wrapper {
           display: inline-flex;
@@ -134,6 +148,13 @@ exports[`Textarea should work with different styles 1`] = `
         .disabled > textarea {
           cursor: not-allowed;
         }
+        
+        textarea:-webkit-autofill,
+        textarea:-webkit-autofill:hover,
+        textarea:-webkit-autofill:active,
+        textarea:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       </style></div><div class=\\"wrapper   \\"><textarea></textarea><style>
         .wrapper {
           display: inline-flex;
@@ -177,5 +198,12 @@ exports[`Textarea should work with different styles 1`] = `
         .disabled > textarea {
           cursor: not-allowed;
         }
+        
+        textarea:-webkit-autofill,
+        textarea:-webkit-autofill:hover,
+        textarea:-webkit-autofill:active,
+        textarea:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+        }
       </style></div></div>"
 `;

components/textarea/textarea.tsx

@@ -115,6 +115,13 @@ const Textarea: React.FC<React.PropsWithChildren<TextareaProps>> = ({
         .disabled > textarea {
           cursor: not-allowed;
         }
+        
+        textarea:-webkit-autofill,
+        textarea:-webkit-autofill:hover,
+        textarea:-webkit-autofill:active,
+        textarea:-webkit-autofill:focus {
+          -webkit-box-shadow: 0 0 0 30px ${theme.palette.background} inset !important;
+        }
       `}</style>
     </div>
   )

pages/_app.tsx

@@ -88,10 +88,6 @@ const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
             color: ${theme.palette.accents_3};
           }
           
-          body {
-            overflow-x: hidden;
-          }
-          
           body::-webkit-scrollbar {
             width: 0;
             background-color: ${theme.palette.accents_1};