Remove injectGlobal, introduce global component(s), add colors and gl…

…obal style exports, raise styled-components dependency to 4+

.npmignore

@@ -4,9 +4,9 @@ node_modules
 src
 dev
 .storybook
-.babelrc
+.editorconfig
 .eslintignore
-.eslintrc
-.nojekyl
+.eslintrc.js
+.nojekyll
 stories
 scripts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@corllete/material-styled",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Styled Components implementation of Material Design",
   "main": "lib/index.js",
   "scripts": {
@@ -63,6 +63,6 @@
     "prop-types": ">= 15",
     "react": ">= 16.8",
     "react-dom": ">= 16.8",
-    "styled-components": ">= 3"
+    "styled-components": ">= 4"
   }
 }

src/Drawer.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled, { injectGlobal, css } from 'styled-components';
+import styled, { createGlobalStyle, css } from 'styled-components';
 import classNames from 'classnames';
 import elevation from './mixins/elevation';
 import Portal from './Portal';
@@ -9,8 +9,7 @@ const drawerSizing = css`
   width: 240px;
 `;
 
-// eslint-disable-next-line no-unused-expressions
-injectGlobal`
+const GlobalStyle = createGlobalStyle`
   body {
     &.shift {
       &.right {
@@ -111,19 +110,22 @@ const Drawer = ({
   temporary,
   attachment,
 }) => (
-  <Portal
-    open={open}
-    shift={!temporary}
-    attachment={attachment}
-    onRequestClose={handleRequestClose}
-    renderContents={() => (
-      <StyledDrawer
-        attachment={attachment}
-        open={open}
-        temporary={temporary}>
-        {children}
-      </StyledDrawer>
+  <React.Fragment>
+    <GlobalStyle />
+    <Portal
+      open={open}
+      shift={!temporary}
+      attachment={attachment}
+      onRequestClose={handleRequestClose}
+      renderContents={() => (
+        <StyledDrawer
+          attachment={attachment}
+          open={open}
+          temporary={temporary}>
+          {children}
+        </StyledDrawer>
     )} />
+  </React.Fragment>
 );
 
 Drawer.propTypes = {

src/index.js

@@ -22,3 +22,5 @@ export { default as withRipple } from './mixins/ripple';
 
 export { default as ThemeProvider } from './theme/ThemeProvider';
 export { default as defaultTheme } from './theme/defaultTheme';
+export { default as GlobalStyle } from './theme/injectGlobal';
+export * from './theme/colors';

src/theme/colors.js

@@ -1,4 +1,5 @@
 import Color from 'color';
 
+export { Color };
 export const black = Color('#000');
 export const white = Color('#fff');

src/theme/injectGlobal.js

@@ -1,7 +1,7 @@
-import { injectGlobal } from 'styled-components';
+import { createGlobalStyle } from 'styled-components';
 
 /* eslint-disable no-unused-expressions */
-injectGlobal`
+const GlobalStyle = createGlobalStyle`
   body {
     margin: 0;
     padding: 0;
@@ -11,3 +11,6 @@ injectGlobal`
     font-family: Roboto,sans-serif;
   }
 `;
+
+export default GlobalStyle;
+