Implement dark mode (#25)

* Improve components

* Add chroma-js

* Implement dark mode

* Add icons

* Fix tsc error

* Update snapshot

.storybook/config.js

@@ -4,7 +4,7 @@ import { ThemeProvider } from 'styled-components';
 import { withScreenshot } from 'zisui';
 import pkg from '../package.json';
 import GlobalStyle from '../src/styles/GlobalStyle';
-import theme from '../src/styles/theme';
+import { darkTheme } from '../src/styles/theme';
 
 // automatically import all files ending in *.stories.js
 const req = require.context('../src', true, /.stories.(ts|tsx)$/);
@@ -33,7 +33,7 @@ addParameters({
 addDecorator(withScreenshot());
 
 addDecorator(story => (
-  <ThemeProvider theme={theme}>
+  <ThemeProvider theme={darkTheme}>
     <GlobalStyle />
     {story()}
   </ThemeProvider>

gatsby-config.js

@@ -16,7 +16,7 @@ module.exports = {
       resolve: `gatsby-source-filesystem`,
       options: {
         name: `icon`,
-        path: `${__dirname}/src/assets/icon`,
+        path: `${__dirname}/src/assets/images`,
       },
     },
     {
@@ -57,7 +57,7 @@ module.exports = {
         background_color: `#111`,
         theme_color: `#111`,
         display: `minimal-ui`,
-        icon: `src/assets/icon/logo.png`,
+        icon: `src/assets/images/logo.png`,
       },
     },
     `gatsby-plugin-offline`,

package.json

@@ -13,7 +13,7 @@
     "format": "prettier --write 'src/**/*.{ts,tsx,js,jsx}'",
     "format:ci": "prettier 'src/**/*.{tsx,ts}'",
     "serve": "gatsby serve",
-    "svg": "svgo {src/assets,static}/**/*.svg --enable=removeDimensions",
+    "svg": "svgo src/assets/**/*.svg --enable=removeDimensions",
     "test": "jest --watch",
     "test:ci": "jest",
     "tsc": "tsc -p tsconfig.json --skipLibCheck",
@@ -24,9 +24,9 @@
     "screenshot": "zisui --serverCmd 'start-storybook -p 6006 -s ./public' http://localhost:6006 --serverTimeout 1000000 --viewport '1280x800'"
   },
   "dependencies": {
-    "@primer/octicons-react": "^9.2.0",
     "@storybook/react": "^5.2.5",
     "@types/react": "^16.9.9",
+    "chroma-js": "^2.1.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "enzyme-to-json": "^3.4.3",
@@ -64,6 +64,7 @@
     "@storybook/addon-viewport": "^5.2.5",
     "@storybook/addons": "^5.2.5",
     "@storybook/source-loader": "^5.2.5",
+    "@types/chroma-js": "^1.4.3",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/enzyme-to-json": "^1.5.3",

src/components/atoms/Button/index.tsx

@@ -13,30 +13,29 @@ const StyledButton = styled.button`
   text-decoration: none;
   user-select: none;
   white-space: nowrap;
-  background-color: transparent;
-  color: ${props => props.theme.colors.baseText[0]};
+  background-color: ${({ theme }) => theme.colors.button.bg};
+  color: ${({ theme }) => theme.colors.baseText[0]};
   font-weight: normal;
-  font-family: ${props => props.theme.fonts.avantGarde};
-  font-size: ${props => props.theme.fontSizes[1]};
-  padding: 0 ${props => props.theme.spaces[4]};
-  height: 40px;
-  border: 2px solid ${props => props.theme.colors.baseText[0]};
+  font-size: ${({ theme }) => theme.fontSizes[1]};
+  padding: 0 ${({ theme }) => theme.spaces[4]};
+  height: ${({ theme }) => theme.control.height};
+  border: 2px solid ${({ theme }) => theme.colors.button.border};
   cursor: pointer;
   opacity: 1;
   pointer-events: auto;
   text-transform: uppercase;
   text-decoration: none;
   letter-spacing: 0.5em;
   text-indent: 0.5em;
-  transition: background-color 0.4s;
+  transition: background-color ${({ theme }) => theme.transition};
 
   &:last-child {
     margin-right: 0;
   }
   &:hover,
   &:focus,
   &:active {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: ${({ theme }) => theme.colors.button.forcus.bg};
   }
 `;
 

src/components/atoms/Container/__snapshots__/index.spec.tsx.snap

@@ -1,7 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Container snapshot 1`] = `
-<styled.section>
+<StyledComponent
+  forwardedComponent={
+    Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "attrs": Array [],
+      "componentStyle": ComponentStyle {
+        "componentId": "sc-bdVaJa",
+        "isStatic": false,
+        "rules": Array [
+          "
+  margin: 0 auto;
+  max-width: 984px;
+  padding: 0px ",
+          [Function],
+          ";
+  padding-top: 0;
+",
+        ],
+      },
+      "displayName": "styled.div",
+      "foldedComponentIds": Array [],
+      "render": [Function],
+      "styledComponentId": "sc-bdVaJa",
+      "target": "div",
+      "toString": [Function],
+      "warnTooManyClasses": [Function],
+      "withComponent": [Function],
+    }
+  }
+  forwardedRef={null}
+>
   ...
-</styled.section>
+</StyledComponent>
 `;

src/components/atoms/Container/index.tsx

@@ -1,17 +1,10 @@
-import * as React from 'react';
 import styled from 'styled-components';
 
-const Wrapper = styled.section`
+const Container = styled.div`
   margin: 0 auto;
   max-width: 984px;
-  padding: 0px ${props => props.theme.spaces[5]} ${props => props.theme.spaces[4]};
+  padding: 0px ${props => props.theme.spaces[5]};
   padding-top: 0;
 `;
 
-export interface ContainerProps {
-  children: React.ReactNode;
-}
-
-const Container = ({ children }: ContainerProps) => <Wrapper>{children}</Wrapper>;
-
 export default Container;

src/components/atoms/Input/__snapshots__/index.spec.tsx.snap

@@ -14,16 +14,16 @@ exports[`Input snapshot 1`] = `
   ",
           "
   width: 100%;
+  padding: 0 ",
+          [Function],
+          ";
   font-size: ",
           [Function],
           ";
   color: ",
           [Function],
           ";
-  background: transparent;
-  outline: none;
-  box-shadow: none;
-  padding: 0 ",
+  background-color: ",
           [Function],
           ";
   border-top: 0;
@@ -32,18 +32,26 @@ exports[`Input snapshot 1`] = `
   border-bottom: 1px solid ",
           [Function],
           ";
-  transition: background, border-bottom 0.2s;
+  outline: none;
+  box-shadow: none;
+  transition: background, border-bottom ",
+          [Function],
+          ";
 
   &:focus {
     border-bottom: 1px solid ",
           [Function],
           ";
-    background: rgba(61, 16, 107, 0.15);
+    background-color: ",
+          [Function],
+          ";
   }
 ",
           "
 
-  height: 40px;
+  height: ",
+          [Function],
+          ";
 ",
         ],
       },

src/components/atoms/Input/index.tsx

@@ -2,28 +2,28 @@ import styled, { css } from 'styled-components';
 
 export const inputStyle = css`
   width: 100%;
-  font-size: ${props => props.theme.fontSizes[2]};
-  color: ${props => props.theme.colors.baseText[0]};
-  background: transparent;
-  outline: none;
-  box-shadow: none;
-  padding: 0 ${props => props.theme.spaces[1]};
+  padding: 0 ${({ theme }) => theme.spaces[1]};
+  font-size: ${({ theme }) => theme.fontSizes[2]};
+  color: ${({ theme }) => theme.colors.baseText[0]};
+  background-color: ${({ theme }) => theme.colors.input.bg};
   border-top: 0;
   border-left: 0;
   border-right: 0;
-  border-bottom: 1px solid ${props => props.theme.colors.baseText[1]};
-  transition: background, border-bottom 0.2s;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.input.border};
+  outline: none;
+  box-shadow: none;
+  transition: background, border-bottom ${({ theme }) => theme.transition};
 
   &:focus {
-    border-bottom: 1px solid ${props => props.theme.colors.baseText[0]};
-    background: rgba(61, 16, 107, 0.15);
+    border-bottom: 1px solid ${({ theme }) => theme.colors.input.forcus.border};
+    background-color: ${({ theme }) => theme.colors.input.forcus.bg};
   }
 `;
 
 const Input = styled.input`
   ${inputStyle}
 
-  height: 40px;
+  height: ${({ theme }) => theme.control.height};
 `;
 
 export default Input;

src/components/atoms/Logo/index.tsx

@@ -6,7 +6,7 @@ const PathLeft = styled.path`
 `;
 
 const PathRight = styled.path`
-  fill: ${props => props.theme.colors.bg};
+  fill: ${({ theme }) => theme.colors.logo};
 `;
 
 const Logo = () => {

src/components/atoms/Textarea/__snapshots__/index.spec.tsx.snap

@@ -14,16 +14,16 @@ exports[`Textarea snapshot 1`] = `
   ",
           "
   width: 100%;
+  padding: 0 ",
+          [Function],
+          ";
   font-size: ",
           [Function],
           ";
   color: ",
           [Function],
           ";
-  background: transparent;
-  outline: none;
-  box-shadow: none;
-  padding: 0 ",
+  background-color: ",
           [Function],
           ";
   border-top: 0;
@@ -32,13 +32,19 @@ exports[`Textarea snapshot 1`] = `
   border-bottom: 1px solid ",
           [Function],
           ";
-  transition: background, border-bottom 0.2s;
+  outline: none;
+  box-shadow: none;
+  transition: background, border-bottom ",
+          [Function],
+          ";
 
   &:focus {
     border-bottom: 1px solid ",
           [Function],
           ";
-    background: rgba(61, 16, 107, 0.15);
+    background-color: ",
+          [Function],
+          ";
   }
 ",
           ";

src/components/molecules/ContentBlock/__snapshots__/index.spec.tsx.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ContentBlock snapshot 1`] = `
-<div>
-  <Container>
+<styled.section>
+  <styled.div>
     <styled.div>
       <styled.div>
         <styled.h1 />
@@ -11,6 +11,6 @@ exports[`ContentBlock snapshot 1`] = `
         ...
       </styled.div>
     </styled.div>
-  </Container>
-</div>
+  </styled.div>
+</styled.section>
 `;

src/components/molecules/ContentBlock/index.tsx

@@ -1,14 +1,17 @@
 import * as React from 'react';
 import styled, { css } from 'styled-components';
+
 import Container from '../../atoms/Container';
 
+const Wrapper = styled.section``;
+
 const Flex = styled.div<ContentBlockProps>`
   display: flex;
   padding-bottom: 20vh;
   ${props =>
     props.logo &&
     css`
-      padding-top: 30vh;
+      padding-top: 15vh;
       padding-bottom: 30vh;
     `}
 
@@ -59,14 +62,14 @@ interface ContentBlockProps {
 }
 
 const ContentBlock = ({ id, title, logo, children }: ContentBlockProps) => (
-  <div id={id}>
+  <Wrapper id={id}>
     <Container>
       <Flex logo={logo}>
         <TitleColumn>{logo || <H1>{title}</H1>}</TitleColumn>
         <MainColumn>{children}</MainColumn>
       </Flex>
     </Container>
-  </div>
+  </Wrapper>
 );
 
 export default ContentBlock;

src/components/molecules/InputItem/__snapshots__/index.spec.tsx.snap → src/components/molecules/FormItem/__snapshots__/index.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InputItem snapshot 1`] = `
+exports[`FormItem snapshot 1`] = `
 <P>
   <styled.label>
     title

src/components/molecules/InputItem/index.spec.tsx → src/components/molecules/FormItem/index.spec.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
-import InputItem from '.';
+import FormItem from '.';
 
-describe('InputItem', () => {
+describe('FormItem', () => {
   it('snapshot', () => {
-    const tree = shallow(<InputItem title="title">...</InputItem>);
+    const tree = shallow(<FormItem title="title">...</FormItem>);
     expect(toJson(tree)).toMatchSnapshot();
   });
 });