diff --git a/package-lock.json b/package-lock.json index 678bee9a..6e579b92 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2418,6 +2418,29 @@ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz", "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0=" }, + "clean-tag": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/clean-tag/-/clean-tag-1.0.4.tgz", + "integrity": "sha512-PlYwlA+mfgGLf7NLfNm2KxmjNSNo7gJqDVqf8o4tSphqKQ4ZRYlZeMzh9Op04bl+HRIvxe+lMQMKDHYlR7phpA==", + "requires": { + "html-tags": "^2.0.0", + "react": ">=16.0.0", + "styled-system": ">=1.1 || >=2.0" + }, + "dependencies": { + "react": { + "version": "16.3.2", + "resolved": "https://registry.npmjs.org/react/-/react-16.3.2.tgz", + "integrity": "sha512-o5GPdkhciQ3cEph6qgvYB7LTOHw/GB0qRI6ZFNugj49qJCFfgHwVNjZ5u+b7nif4vOeMIOuYj3CeYe2IBD74lg==", + "requires": { + "fbjs": "^0.8.16", + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.0" + } + } + } + }, "cli-boxes": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz", @@ -6343,6 +6366,16 @@ "styled-components": "^2.2.0", "styled-system": "^1.0.2", "tag-hoc": "^1.0.0" + }, + "dependencies": { + "styled-system": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-1.1.7.tgz", + "integrity": "sha512-OV+OrU83pfwxlvs7JGWisS9esa9rkmGM6z3v1/JG+fn+PSoqDBmdoV2sWEbQF0mOFxyxgoXcu3R6Q0RtUgcTMw==", + "requires": { + "prop-types": "^15.6.0" + } + } } }, "gzip-size": { @@ -6594,6 +6627,11 @@ "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.2.1.tgz", "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=" }, + "html-tags": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz", + "integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=" + }, "htmlparser2": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.3.0.tgz", @@ -10865,6 +10903,11 @@ } } }, + "react-is": { + "version": "16.3.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.3.2.tgz", + "integrity": "sha512-ybEM7YOr4yBgFd6w8dJqwxegqZGJNBZl6U27HnGKuTZmDvVrD5quWOK/wAnMywiZzW+Qsk+l4X2c70+thp/A8Q==" + }, "react-proxy": { "version": "3.0.0-alpha.1", "resolved": "https://registry.npmjs.org/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz", @@ -11023,6 +11066,16 @@ "styled-components": "^2.1.2", "styled-system": "^1.0.0-12", "tag-hoc": "^1.0.0" + }, + "dependencies": { + "styled-system": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-1.1.7.tgz", + "integrity": "sha512-OV+OrU83pfwxlvs7JGWisS9esa9rkmGM6z3v1/JG+fn+PSoqDBmdoV2sWEbQF0mOFxyxgoXcu3R6Q0RtUgcTMw==", + "requires": { + "prop-types": "^15.6.0" + } + } } }, "rechoir": { @@ -12768,9 +12821,9 @@ } }, "styled-system": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-1.1.1.tgz", - "integrity": "sha512-jTmGIaQ6oQfhcOSdtGRMn+IhOvOv1dy1Ao2/7wzlOu2efGMzEfymmu3LXZ45yT9XUYd1lxqexF3XB+IT348hpQ==", + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-2.2.5.tgz", + "integrity": "sha512-/KJxEzd+mPQxTdr85l7K3b6ac97R4G0M2SlTm9sM48dGkg1CjTIURIvvSV3Y92kE+9GUfrPsG2MpeV8QnmSIQg==", "requires": { "prop-types": "^15.6.0" } @@ -12780,6 +12833,11 @@ "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.4.4.tgz", "integrity": "sha512-uXl6YTDHN+bC1IuCWomQ6p+XzL0EpDfVVeZYiThscyc0r5mEQVriwquT7rZ8xO4MY1TaZEZHCtByXHWlICeVqA==" }, + "stylis-rule-sheet": { + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" + }, "supports-color": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", @@ -12809,6 +12867,65 @@ "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.4.tgz", "integrity": "sha1-Kb9hXUqnEhvdiYsi1LP5vE4qoD0=" }, + "system-components": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/system-components/-/system-components-2.0.3.tgz", + "integrity": "sha512-6SSV146Tc9BIp7C8s1TAVjcTU2wUvXIfEniK4pAI5Vk1qVBMNXGYKIF9yG/Bhy9m+rlQKkYJMLynli2c+Us/KA==", + "requires": { + "clean-tag": "^1.0.3", + "styled-components": ">=3.0.0", + "styled-system": ">=2.0.1" + }, + "dependencies": { + "buffer": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.1.0.tgz", + "integrity": "sha512-YkIRgwsZwJWTnyQrsBTWefizHh+8GYj3kbL1BTiAQ/9pwpino0G7B2gp5tx/FUBqUlvtxV85KNR3mwfAtv15Yw==", + "requires": { + "base64-js": "^1.0.2", + "ieee754": "^1.1.4" + } + }, + "styled-components": { + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-3.2.6.tgz", + "integrity": "sha1-mebnWnRr3t0pWhfgPdFJMFWhzDs=", + "requires": { + "buffer": "^5.0.3", + "css-to-react-native": "^2.0.3", + "fbjs": "^0.8.16", + "hoist-non-react-statics": "^2.5.0", + "is-plain-object": "^2.0.1", + "prop-types": "^15.5.4", + "react-is": "^16.3.1", + "stylis": "^3.5.0", + "stylis-rule-sheet": "^0.0.10", + "supports-color": "^3.2.3" + } + }, + "styled-system": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-2.2.5.tgz", + "integrity": "sha512-/KJxEzd+mPQxTdr85l7K3b6ac97R4G0M2SlTm9sM48dGkg1CjTIURIvvSV3Y92kE+9GUfrPsG2MpeV8QnmSIQg==", + "requires": { + "prop-types": "^15.6.0" + } + }, + "stylis": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.0.tgz", + "integrity": "sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw==" + }, + "supports-color": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", + "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", + "requires": { + "has-flag": "^1.0.0" + } + } + } + }, "systemjs": { "version": "0.21.3", "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-0.21.3.tgz", diff --git a/package.json b/package.json index cfc434e4..3797f77d 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,8 @@ "react-helmet": "5.2.0", "rebass": "1.0.4", "styled-components": "2.4.0", - "styled-system": "1.1.1" + "styled-system": "^2.2.5", + "system-components": "^2.0.3" }, "devDependencies": { "babel-eslint": "8.2.1", diff --git a/src/components/Container.js b/src/components/Container.js index 86f86847..a1320be5 100644 --- a/src/components/Container.js +++ b/src/components/Container.js @@ -1,4 +1,9 @@ -import React from 'react' -import { Container } from 'rebass' +import system from 'system-components' -export default props => +const Container = system({ + is: 'div', + width: 0.85, + mx: 'auto', +}) + +export default Container diff --git a/src/globalCss.js b/src/globalCss.js new file mode 100644 index 00000000..f1e7a8a7 --- /dev/null +++ b/src/globalCss.js @@ -0,0 +1,25 @@ +/* eslint-disable no-unused-expressions */ +import { injectGlobal } from 'styled-components' +import { fonts } from './theme' + +injectGlobal` + *, + *:before, + *:after { + box-sizing: inherit; + } + + body { + box-sizing: border-box; + margin: 0; + font-family: ${fonts.sans}; + } + + a { + text-decoration: none; + } + + button::-moz-focus-inner { + border: 0; + } +` diff --git a/src/layouts/index.js b/src/layouts/index.js index 2b60eab6..d5caacb9 100644 --- a/src/layouts/index.js +++ b/src/layouts/index.js @@ -1,12 +1,11 @@ -import React from 'react' import { func, shape, string } from 'prop-types' +import React from 'react' import Helmet from 'react-helmet' -import { injectGlobal } from 'styled-components' -import { Provider } from 'rebass' - -import theme from '../theme' -import Header from '../components/Header' +import { ThemeProvider } from 'styled-components' import Footer from '../components/Footer' +import Header from '../components/Header' +import '../globalCss' +import theme from '../theme' const propTypes = { children: func.isRequired, @@ -21,33 +20,12 @@ const propTypes = { }).isRequired, } -/* eslint-disable no-unused-expressions */ - -injectGlobal` - *, - *:before, - *:after { - transition: inherit; - } - - body { - margin: 0; - transition: color 0.15s, background-color 0.15s, box-shadow 0.15s; - } - - a { - text-decoration: none; - } -` - -/* eslint-enable no-unused-expressions */ - function Template({ children, data: { site: { siteMetadata: { title, description, siteUrl } } }, }) { return ( - +
@@ -80,7 +58,7 @@ function Template({
{children()}
- + ) } diff --git a/src/theme.js b/src/theme.js index 6357adf9..be7f5324 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,20 +1,34 @@ -const space = [0, 4, 8, 12, 16, 24, 32, 64, 128, 256, 512] +export const space = [0, 4, 8, 12, 16, 24, 32, 64, 128, 256, 512] -const font = - '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' +export const fonts = { + sans: [ + 'system-ui', + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + '"Roboto"', + '"Oxygen"', + '"Ubuntu"', + '"Cantarell"', + '"Fira Sans"', + '"Droid Sans"', + '"Helvetica Neue"', + 'sans-serif', + ].join(', '), +} -const fontSizes = [12, 14, 16, 20, 24, 32, 48, 64] +export const fontSizes = [12, 14, 16, 20, 24, 32, 48, 64] -const weights = [400, 500] +export const weights = [400, 500] -const lineHeights = { +export const lineHeights = { none: 1, tight: 1.25, normal: 1.5, loose: 2, } -const colors = { +export const colors = { base: '#06f', black: '#000', white: '#fff', @@ -32,18 +46,18 @@ const colors = { gray9: '#393f49', } -const shadows = { +export const shadows = { none: 'none', small: '0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1)', medium: '0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.1)', outline: `0 0 0 3px ${colors.base}`, } -const radius = 4 +export const radius = 4 export default { space, - font, + fonts, fontSizes, weights, lineHeights,