moved reset css to js file

.storybook/config.js

@@ -2,9 +2,10 @@ import { configure, addDecorator } from "@storybook/react";
 import { withInfo } from "@storybook/addon-info";
 import { withThemesProvider } from "storybook-addon-styled-component-theme";
 
-import "../src/components/index.css";
 import themes from "../src/components/common/themes";
 
+import GlobalStyle from "./decorators/globalStyle";
+
 const demoThemes = [
   themes.default,
   themes.lilacRoseDark,
@@ -29,7 +30,7 @@ addDecorator(
     })
   })
 );
-
+addDecorator(GlobalStyle);
 const req = require.context("../src", true, /\.stories\.js$/);
 function loadStories() {
   req.keys().forEach(filename => req(filename));

.storybook/decorators/globalStyle.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { createGlobalStyle } from "styled-components";
+
+import reset from "../../src/components/common/reset";
+
+const GlobalStyle = createGlobalStyle`
+  ${reset}
+`;
+
+export default storyFn => (
+  <>
+    <GlobalStyle />
+    {storyFn()}
+  </>
+);

src/components/Bar/Bar.js

@@ -5,6 +5,7 @@ import { blockSizes } from "../common/theme.variables";
 
 const StyledBar = styled.div`
   display: inline-block;
+  box-sizing: border-box;
   height: ${props => blockSizes[props.size]};
   width: 5px;
   border-top: 2px solid ${({ theme }) => theme.borderLightest};

src/components/Fab/Fab.css

@@ -1,47 +0,0 @@
-button {
-  outline: none;
-}
-
-.Fab {
-  display: inline-block;
-  width: 60px;
-  height: 60px;
-  transform: translate(-50%, 50%);
-  border-radius: 50%;
-
-  /* violet */
-  background: #b96ac9;
-  /* background: radial-gradient(#6f2dbd, #b96ac9); */
-  border-top: 4px solid #e980fc;
-  border-left: 4px solid #e980fc;
-  border-bottom: 4px solid #6f2dbd;
-  border-right: 4px solid #6f2dbd;
-
-  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.45);
-}
-.Fab--square {
-  border-radius: 0;
-}
-
-.Fab:not(.Fab--disabled):active {
-  border-bottom: 4px solid #e980fc;
-  border-right: 4px solid #e980fc;
-  border-top: 4px solid #6f2dbd;
-  border-left: 4px solid #6f2dbd;
-  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.55);
-}
-
-.Fab:not(.Fab--disabled):active .Fab__content {
-  padding-top: 2px;
-}
-
-.Fab__content {
-  display: inline-block;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 24px;
-  line-height: 24px;
-  font-weight: bold;
-}

src/components/Fab/Fab.js

@@ -1,63 +0,0 @@
-import React from "react";
-import propTypes from "prop-types";
-import cx from "classnames";
-
-import "./Fab.css";
-
-const Fab = ({
-  type,
-  size,
-  onClick,
-  className,
-  style,
-  disabled,
-  active,
-  children,
-  square,
-  ...otherProps
-}) => {
-  const baseClass = "Fab";
-
-  const rootClass = cx(baseClass, className, {
-    [`${baseClass}--${size}`]: size,
-    [`${baseClass}--disabled`]: disabled,
-    [`${baseClass}--active`]: active,
-    [`${baseClass}--square`]: square
-  });
-
-  return (
-    <button
-      className={rootClass}
-      type={type}
-      style={style}
-      onClick={!disabled && onClick}
-      {...otherProps}
-    >
-      <span className={`${baseClass}__content`}>{children}</span>
-    </button>
-  );
-};
-
-Fab.defaultProps = {
-  type: "button",
-  onClick: null,
-  style: {},
-  disabled: false,
-  size: "m",
-  square: false,
-  active: false
-};
-
-Fab.propTypes = {
-  type: propTypes.string,
-  size: propTypes.oneOf(["s", "m", "l", "xl"]),
-  onClick: propTypes.func,
-  className: propTypes.string,
-  style: propTypes.object,
-  disabled: propTypes.bool,
-  active: propTypes.bool,
-  square: propTypes.bool,
-  children: propTypes.node
-};
-
-export default Fab;

src/components/Fab/Fab.stories.js

@@ -1,31 +0,0 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { action } from "@storybook/addon-actions";
-
-import Fab from "./Fab";
-
-const props = {
-  type: "button",
-  onClick: null,
-  style: {}
-};
-
-export const actions = { onClick: action("onClick") };
-
-storiesOf("Fab", module)
-  .addDecorator(story => (
-    <div
-      style={{
-        padding: "5rem",
-        background: "teal"
-      }}
-    >
-      {story()}
-    </div>
-  ))
-  .add("default", () => <Fab {...actions}>+</Fab>)
-  .add("square", () => (
-    <Fab square {...actions}>
-      +
-    </Fab>
-  ));

src/components/InputBase/InputBase.js

@@ -3,9 +3,10 @@ import propTypes from "prop-types";
 
 import styled from "styled-components";
 import { StyledTextInput, StyledCutout } from "../common";
+import { Cutout } from "../";
 import { blockSizes } from "../common/theme.variables";
 
-const StyledInputWrapper = styled(StyledCutout)`
+const StyledInputWrapper = styled(Cutout)`
   height: ${blockSizes.md};
   padding: 2px;
   background: ${({ theme, isDisabled }) =>

src/components/List/List.js

@@ -16,6 +16,8 @@ const createListPositionStyles = ({
     transform: translate(0, ${verticalAlign === "top" ? "-100%" : "100%"})
   `;
 const StyledList = styled.ul`
+  box-sizing: border-box;
+
   width: ${props => (props.fullWidth ? "100%" : "auto")};
   padding: 2px 4px 4px 2px;
   ${createBorderStyles()}

src/components/ListItem/ListItem.js

@@ -6,6 +6,8 @@ import { createDisabledTextStyles } from "../common";
 import { padding, blockSizes } from "../common/theme.variables";
 
 const StyledListItem = styled.li`
+  box-sizing: border-box;
+
   display: block;
   position: relative;
   height: ${props => blockSizes[props.size]};

src/components/Select/Select.js

@@ -50,6 +50,8 @@ const StyledDropdownIcon = styled.span`
 `;
 
 const StyledDropdownList = styled.ul`
+  box-sizing: border-box;
+
   font-size: ${fontSizes.md};
   position: absolute;
   bottom: -2px;
@@ -64,11 +66,13 @@ const StyledDropdownList = styled.ul`
   z-index: 99;
 `;
 const StyledDropdownListItem = styled.li`
-  height: calc(${blockSizes.md} - 8px);
+  box-sizing: border-box;
+
   width: 100%;
   padding-left: ${padding.sm};
 
-  line-height: calc(${blockSizes.md} - 8px);
+  height: calc(${blockSizes.md} - 4px);
+  line-height: calc(${blockSizes.md} - 4px);
   font-size: ${fontSizes.md};
   white-space: nowrap;
   color: ${({ theme }) => theme.inputText};

src/components/TextArea/TextArea.js

@@ -20,6 +20,7 @@ const StyledTextAreaWrapper = styled(StyledCutout)`
 const StyledTextArea = styled.textarea`
   width: 100%;
   height: 100%;
+  box-sizing: border-box;
   padding: ${padding.sm};
   outline: none;
   border: none;

src/components/common/reset.js

@@ -0,0 +1,160 @@
+export default `
+  html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+ul,
+li {
+  list-style-type: none;
+}
+button {
+  outline: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  color: black;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+`;

src/components/index.js

@@ -1,4 +1,5 @@
 import themes from "./common/themes";
+import reset from "./common/reset";
 
 import Anchor from "./Anchor/Anchor";
 import AppBar from "./AppBar/AppBar";
@@ -40,6 +41,7 @@ import WindowHeader from "./WindowHeader/WindowHeader";
 
 export {
   themes,
+  reset,
   Anchor,
   AppBar,
   Bar,

website/src/App.js

@@ -1,6 +1,5 @@
 import React, { Component } from "react";
 import styled, { ThemeProvider } from "styled-components";
-import "./components/index.css";
 
 import { themes, Button } from "./components";
 import { BrowserRouter as Router, Route } from "react-router-dom";

website/src/index.js

@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "./index.css";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";