Input style

docs/pages/components/Input.md

@@ -0,0 +1,7 @@
+# Input
+
+Primitive Input component with variants
+
+```.jsx
+  <Input />
+```

docs/theme.js

@@ -28,6 +28,7 @@ export default {
     background: 'white',
     borderGray: '#ddd',
     lightGray: '#00000080',
+    darkGray: '#888',
   },
 
   buttons: {
@@ -64,7 +65,7 @@ export default {
   },
   placeholderVariants: {
     primary: {
-      color: 'red',
+      color: 'darkGray',
     },
   },
   breakpoints: [
@@ -106,4 +107,11 @@ export default {
       color: 'white',
     },
   },
+  forms: {
+    input: {
+      p: 3,
+      borderColor: 'border',
+      borderRadius: 2,
+    }
+  }
 };

src/components/input.js

@@ -1,4 +1,8 @@
 import { Input } from 'theme-ui';
+import styled from '@emotion/styled';
 import withPlaceholderVariant from '../utils/placeholderVariant';
+import { applyFocus } from '../utils/getStyles';
 
-export default withPlaceholderVariant(Input);
+export default styled(withPlaceholderVariant(Input))`
+  ${({theme}) => applyFocus(theme)}
+`;

src/components/modal/components.js

@@ -14,23 +14,34 @@ export const Overlay = styled(Fixed)(
     left: 0,
     width: '100%',
     height: '100%',
-    background: 'rgba(0, 0, 0, 0.5)',
+    background: 'rgba(0, 0, 0, 0.7)',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     '&.modal-enter': {
       opacity: 0,
+      '> div': {
+        transform: 'scale(0.95)',
+        transition: 'all 200ms linear',
+      },
     },
     '&.modal-enter-active': {
       opacity: 1,
       transition: 'all 200ms ease-in',
+      '> div': {
+        transform: 'scale(1)',
+      },
     },
     '&.modal-exit': {
       opacity: 1,
     },
     '&.modal-exit-active': {
       opacity: 0,
       transition: 'all 200ms ease-out',
+      '> div': {
+        transform: 'scale(0.95)',
+        transition: 'all 200ms linear',
+      },
     },
   },
   getStyleForVariant('overlay'),
@@ -42,6 +53,7 @@ export const ContentContainer = styled(Relative)(
     width: '60%',
     minHeight: '40%',
     borderRadius: 1,
+    boxShadow: '0 1px 15px rgba(0,0,0,.75)',
   })(theme),
   getStyleForVariant('contentContainer'),
 );

src/components/select.js

@@ -1,4 +1,8 @@
+import styled from '@emotion/styled';
 import { Select } from 'theme-ui';
 import withPlaceholderVariant from '../utils/placeholderVariant';
+import { applyFocus } from '../utils/getStyles';
 
-export default withPlaceholderVariant(Select);
+export default styled(withPlaceholderVariant(Select))`
+  ${({theme}) => applyFocus(theme)}
+`;

src/components/textArea.js

@@ -1,4 +1,8 @@
+import styled from '@emotion/styled';
 import { Textarea } from 'theme-ui';
 import withPlaceholderVariant from '../utils/placeholderVariant';
+import { applyFocus } from '../utils/getStyles';
 
-export default withPlaceholderVariant(Textarea);
+export default styled(withPlaceholderVariant(Textarea))`
+  ${({theme}) => applyFocus(theme)}
+`;

src/utils/getVariations.js → src/utils/getStyles.js

@@ -3,6 +3,15 @@ import { css, get } from 'theme-ui';
 const applyVariation = (theme, variant, themeKey) =>
   css(get(theme, themeKey + '.' + variant, get(theme, variant)));
 
+const applyFocus = (theme) => css({
+  '&:focus': {
+    boxShadow: '#add9f5 0px 0px 0px 2px',
+    outline: 'none',
+    borderColor: 'info',
+  },
+})(theme);
+
 export {
   applyVariation,
+  applyFocus,
 };

src/utils/placeholderVariant.js

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import {
   applyVariation,
-} from './getVariations';
+} from './getStyles';
 
 export default (comp) => {
   const variantStyles = ({