diff --git a/www/gatsby-config.js b/www/gatsby-config.js index 14a42bf90836a..a417b06dc4c9f 100644 --- a/www/gatsby-config.js +++ b/www/gatsby-config.js @@ -79,8 +79,8 @@ module.exports = { name: `GatsbyJS`, short_name: `GatsbyJS`, start_url: `/`, - background_color: `#f7f0eb`, - theme_color: `#5c2965`, + background_color: `#ffffff`, + theme_color: `#663399`, display: `minimal-ui`, icons: [ { diff --git a/www/package.json b/www/package.json index d3eb9323227b2..ab6967af925fa 100644 --- a/www/package.json +++ b/www/package.json @@ -39,6 +39,7 @@ "gatsby-transformer-yaml": "^1.5.7", "graphql-request": "^1.4.0", "gray-percentage": "^2.0.0", + "hex2rgba": "^0.0.1", "jsonp": "^0.2.1", "limax": "^1.5.0", "lodash": "^4.16.6", diff --git a/www/src/assets/blog.svg b/www/src/assets/blog.svg index 5cc33216ae6a6..733ec3c8af2c0 100644 --- a/www/src/assets/blog.svg +++ b/www/src/assets/blog.svg @@ -3,10 +3,10 @@ diff --git a/www/src/assets/community.svg b/www/src/assets/community.svg index ed912afdd46ed..d618f834d3c59 100644 --- a/www/src/assets/community.svg +++ b/www/src/assets/community.svg @@ -3,8 +3,8 @@ diff --git a/www/src/assets/docs.svg b/www/src/assets/docs.svg index 21d661e856ca3..5345697f6a880 100644 --- a/www/src/assets/docs.svg +++ b/www/src/assets/docs.svg @@ -3,12 +3,12 @@ @@ -27,13 +27,13 @@ - - + + - - + + @@ -41,8 +41,8 @@ - - + + diff --git a/www/src/assets/graphql.svg b/www/src/assets/graphql.svg index be89c781481f0..d2392a57a1fac 100644 --- a/www/src/assets/graphql.svg +++ b/www/src/assets/graphql.svg @@ -3,8 +3,8 @@ graphql logo - - + + diff --git a/www/src/assets/react.svg b/www/src/assets/react.svg index be398a96e2056..a7bfd1f3c0c2d 100644 --- a/www/src/assets/react.svg +++ b/www/src/assets/react.svg @@ -3,9 +3,9 @@ react js logo - - - + + + diff --git a/www/src/assets/tutorial.svg b/www/src/assets/tutorial.svg index 05fe0f536a872..e6e05db6b9eb1 100644 --- a/www/src/assets/tutorial.svg +++ b/www/src/assets/tutorial.svg @@ -5,9 +5,9 @@ diff --git a/www/src/assets/webpack.svg b/www/src/assets/webpack.svg index a518dc869ea2b..53edf34ee28f5 100644 --- a/www/src/assets/webpack.svg +++ b/www/src/assets/webpack.svg @@ -1,6 +1,6 @@ - + ( [presets.Tablet]: { flex: `0 0 50%`, maxWidth: `50%`, - boxShadow: `0 1px 0 0 ${presets.veryLightPurple}`, + boxShadow: `0 1px 0 0 ${colors.ui.light}`, "&:nth-child(5),&:nth-child(6)": { boxShadow: `none`, }, "&:nth-child(2n)": { - borderLeft: `1px solid ${presets.veryLightPurple}`, + borderLeft: `1px solid ${colors.ui.light}`, }, }, [presets.Hd]: { flex: `0 0 33.33333333%`, maxWidth: `33.33333333%`, - borderLeft: `1px solid ${presets.veryLightPurple}`, + borderLeft: `1px solid ${colors.ui.light}`, "&:nth-child(4)": { boxShadow: `none`, }, diff --git a/www/src/components/cta-button.js b/www/src/components/cta-button.js index 64e0f83aa20ae..c10ccfb046fec 100644 --- a/www/src/components/cta-button.js +++ b/www/src/components/cta-button.js @@ -1,6 +1,7 @@ import Link from "gatsby-link" import { rhythm, scale, options } from "../utils/typography" -import presets from "../utils/presets" +import presets, { colors } from "../utils/presets" +import hex2rgba from "hex2rgba" import { css } from "glamor" @@ -27,9 +28,9 @@ const CtaButton = ({ to, overrideCSS, children }) => ( }, // Increase specificity "&&": { - border: `1px solid ${presets.brand}`, + border: `1px solid ${colors.gatsby}`, boxShadow: `none`, - color: presets.brand, + color: colors.gatsby, fontWeight: `normal`, backgroundColor: `transparent`, backgroundSize: `30px 30px`, @@ -38,14 +39,14 @@ const CtaButton = ({ to, overrideCSS, children }) => ( }`, ":hover, &:focus": { backgroundSize: `30px 30px`, - backgroundColor: presets.brand, + backgroundColor: colors.gatsby, backgroundImage: `linear-gradient(45deg, rgba(0,0,0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.1) 75%, transparent 75%, transparent)`, color: `#fff`, animation: `${stripeAnimation} 2.8s linear infinite`, }, ":focus": { outline: 0, - boxShadow: `0 0 0 0.2rem rgba(${presets.shadowColor}, .25)`, + boxShadow: `0 0 0 0.2rem ${hex2rgba(colors.lilac, 0.25)}`, }, ":after": { content: ``, diff --git a/www/src/components/diagram.js b/www/src/components/diagram.js index 356735ca5f546..08259f7b8552a 100644 --- a/www/src/components/diagram.js +++ b/www/src/components/diagram.js @@ -2,15 +2,14 @@ import React from "react" import { css } from "glamor" import { rhythm, scale, options } from "../utils/typography" -import colors from "../utils/colors" -import presets from "../utils/presets" -import logo from "../gatsby-negative.svg" +import presets, { colors } from "../utils/presets" +import logo from "../monogram.svg" import { GraphQLIcon, ReactJSIcon } from "../assets/logos" import { vP, vPHd, vPVHd, vPVVHd } from "../components/gutters" import FuturaParagraph from "../components/futura-paragraph" import TechWithIcon from "../components/tech-with-icon" -const stripeColor = `249, 245, 255, 1` +const stripeColor = `255, 255, 255, 0.9` const stripeSize = 15 const stripeAnimation = css.keyframes({ "0%": { @@ -19,7 +18,7 @@ const stripeAnimation = css.keyframes({ "100%": { backgroundPosition: `0 0` }, }) const stripeBg = { - backgroundColor: presets.sidebar, + backgroundColor: colors.ui.whisper, backgroundSize: `${rhythm(stripeSize)} ${rhythm(stripeSize)}`, backgroundImage: `linear-gradient(45deg, rgba(${stripeColor}) 25%, transparent 25%, transparent 50%, rgba(${stripeColor}) 50%, rgba(${stripeColor}) 75%, transparent 75%, transparent)`, animation: `${stripeAnimation} 14s linear infinite`, @@ -48,7 +47,7 @@ const SegmentTitle = ({ children }) => ( className="Segment-title" css={{ display: `inline`, - background: presets.accent, + background: colors.accent, color: `#fff`, borderRadius: presets.radius, margin: `0 auto`, @@ -77,7 +76,7 @@ const VerticalLine = () => ( ( ) const box = { - border: `1px solid ${colors.b[0]}`, + border: `1px solid ${colors.ui.light}`, borderRadius: presets.radiusLg, padding: `${rhythm(1)} ${rhythm(1)} 0`, - background: presets.sidebar, + background: colors.ui.whisper, } const borderAndBoxShadow = { - border: `1px solid ${presets.veryLightPurple}`, + border: `1px solid ${colors.ui.light}`, background: `#fff`, width: `100%`, boxShadow: `0 5px 15px rgba(0,0,0,0.035)`, @@ -148,7 +147,7 @@ const SourceItem = ({ children }) => ( const ItemTitle = ({ children }) => (

( css={{ lineHeight: 1.2, display: `block`, - color: presets.brandLight, + color: colors.lilac, [presets.Hd]: { fontSize: scale(-1 / 5).fontSize, }, @@ -213,7 +212,7 @@ const Gatsby = ({ children }) => ( GraphQL diff --git a/www/src/components/email-capture-form.js b/www/src/components/email-capture-form.js index 73bb5f2bb06ef..c0962b1d8343b 100644 --- a/www/src/components/email-capture-form.js +++ b/www/src/components/email-capture-form.js @@ -1,9 +1,10 @@ import React from "react" import { rhythm, options } from "../utils/typography" -import presets from "../utils/presets" +import presets, { colors } from "../utils/presets" import jsonp from "jsonp" import { validate } from "email-validator" import { css } from "glamor" +import hex2rgba from "hex2rgba" let stripeAnimation = css.keyframes({ "0%": { backgroundPosition: `0 0` }, @@ -12,9 +13,9 @@ let stripeAnimation = css.keyframes({ const formInputDefaultStyles = { backgroundColor: `#fff`, - border: `1px solid ${presets.lightPurple}`, + border: `1px solid ${colors.ui.bright}`, borderRadius: presets.radius, - color: presets.bodyColor, + color: colors.brand, fontFamily: options.headerFontFamily.join(`,`), padding: rhythm(1 / 2), verticalAlign: `middle`, @@ -22,7 +23,7 @@ const formInputDefaultStyles = { presets.animation.curveDefault }`, "::placeholder": { - color: presets.brandLight, + color: colors.lilac, opacity: 1, }, } @@ -111,7 +112,7 @@ class EmailCaptureForm extends React.Component { return (
@@ -151,23 +149,21 @@ class EmailCaptureForm extends React.Component { onClick={this._handleFormSubmit} css={{ ...formInputDefaultStyles, - borderColor: presets.brand, - color: presets.brand, + borderColor: colors.gatsby, + color: colors.gatsby, cursor: `pointer`, fontWeight: `bold`, marginLeft: rhythm(1 / 2), ":hover, &:focus": { backgroundSize: `30px 30px`, - backgroundColor: presets.brand, + backgroundColor: colors.gatsby, backgroundImage: `linear-gradient(45deg, rgba(0,0,0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.1) 75%, transparent 75%, transparent)`, color: `#fff`, animation: `${stripeAnimation} 2.8s linear infinite`, }, ":focus": { outline: 0, - boxShadow: `0 0 0 0.2rem rgba(${ - presets.shadowColor - },.25)`, + boxShadow: `0 0 0 0.2rem ${hex2rgba(colors.lilac, 0.25)}`, }, }} > diff --git a/www/src/components/evaluation-cell.js b/www/src/components/evaluation-cell.js index c27f38f0cfd29..ab5e52faa7de9 100644 --- a/www/src/components/evaluation-cell.js +++ b/www/src/components/evaluation-cell.js @@ -1,11 +1,11 @@ import React, { Component } from "react" import { rhythm } from "../utils/typography" -import presets from "../utils/presets" +import presets, { colors } from "../utils/presets" class EvaluationCell extends Component { render() { const bgDefault = `#edebf0` - const bgFeatureAvailability = presets.accent + const bgFeatureAvailability = colors.accent const getBackground = num => { switch (num) { @@ -42,7 +42,6 @@ class EvaluationCell extends Component {
( key={i} css={{ display: `table-cell`, - background: `${presets.sidebar}`, - // borderLeft: i > 0 ? `1px solid ${presets.brandLighter}` : `none`, - // borderRight: i === 5 ? `1px solid ${presets.brandLighter}` : `none`, + background: `${colors.ui.whisper}`, + // borderLeft: i > 0 ? `1px solid ${colors.ui.light}` : `none`, + // borderRight: i === 5 ? `1px solid ${colors.ui.light}` : `none`, fontWeight: 600, ...scale(-1 / 9), lineHeight: 1.3, textAlign: `left`, verticalAlign: `middle`, fontFamily: options.headerFontFamily.join(`,`), - borderColor: presets.veryLightPurple, + borderColor: colors.ui.light, "&&": { paddingTop: rhythm(1 / 4), paddingLeft: rhythm(1 / 4), diff --git a/www/src/components/evaluation-table-section-header-top.js b/www/src/components/evaluation-table-section-header-top.js index ad5440a827b79..ed75b59a674be 100644 --- a/www/src/components/evaluation-table-section-header-top.js +++ b/www/src/components/evaluation-table-section-header-top.js @@ -1,5 +1,5 @@ import React from "react" -import presets from "../utils/presets" +import presets, { colors } from "../utils/presets" import { scale, rhythm, options } from "../utils/typography" const superHeaderTitles = [ @@ -29,8 +29,8 @@ const superHeader = () => ( width: i === 0 ? 120 : `inherit`, border: 0, // fontFamily: options.headerFontFamily.join(`,`), - color: presets.calm, - background: presets.sidebar, + color: colors.gray.calm, + background: colors.ui.whisper, "&:first-child": { borderTopLeftRadius: presets.radiusLg, textAlign: `left`, diff --git a/www/src/components/evaluation-table.js b/www/src/components/evaluation-table.js index 44a3100c15865..a3e3d88af4804 100644 --- a/www/src/components/evaluation-table.js +++ b/www/src/components/evaluation-table.js @@ -1,5 +1,5 @@ import React, { Component } from "react" -import presets from "../utils/presets" +import presets, { colors } from "../utils/presets" import EvaluationCell from "./evaluation-cell" import Link from "gatsby-link" import infoIcon from "../assets/info-icon.svg" @@ -26,7 +26,7 @@ class EvaluationTable extends Component { // wordBreak: `break-all`, // display: `inline-block`, "&:hover": { - background: presets.lightPurple, + background: colors.ui.bright, }, }} > @@ -133,7 +133,7 @@ class EvaluationTable extends Component { cursor: j >= 0 ? `pointer` : `inherit`, }, borderBottom: !showTooltip(s, i) - ? `1px solid ${presets.veryLightPurple}` + ? `1px solid ${colors.ui.light}` : `none`, minWidth: 40, paddingRight: 0, diff --git a/www/src/components/markdown-page-footer.js b/www/src/components/markdown-page-footer.js index bb04204795ff2..32ce0a7bce06f 100644 --- a/www/src/components/markdown-page-footer.js +++ b/www/src/components/markdown-page-footer.js @@ -1,11 +1,11 @@ import React from "react" -import gray from "gray-percentage" import EditIcon from "react-icons/lib/md/create" import CheckIcon from "react-icons/lib/md/thumb-up" import CrossIcon from "react-icons/lib/md/thumb-down" import { GraphQLClient } from "graphql-request" import { rhythm, scale } from "../utils/typography" +import presets, { colors } from "../utils/presets" const client = new GraphQLClient( `https://api.graph.cool/relay/v1/cj8xuo77f0a3a0164y7jketkr` @@ -30,11 +30,12 @@ export default class MarkdownPageFooter extends React.Component { } render() { return [ -
, +
,
{this.state.feedbackSubmitted ? ( Thank you! @@ -47,7 +48,7 @@ export default class MarkdownPageFooter extends React.Component { this.setState({ feedbackSubmitted: true }) }} css={{ - color: `#37b635`, + color: colors.success, fontSize: rhythm(1.3), padding: rhythm(0.2), position: `relative`, @@ -63,7 +64,7 @@ export default class MarkdownPageFooter extends React.Component { this.setState({ feedbackSubmitted: true }) }} css={{ - color: `#ec1818`, + color: colors.warning, fontSize: rhythm(1.3), padding: rhythm(0.2), cursor: `pointer`, @@ -76,13 +77,15 @@ export default class MarkdownPageFooter extends React.Component { "&&": { float: `right`, display: `block`, - color: gray(60, 270), + color: colors.gray.calm, fontSize: scale(-1 / 5).fontSize, + fontWeight: "normal", border: `none`, boxShadow: `none`, padding: rhythm(1 / 2), "&:hover": { - background: gray(90), + background: "transparent", + color: colors.gatsby, }, }, }} diff --git a/www/src/components/masthead-bg.js b/www/src/components/masthead-bg.js index 3e9293fd818cb..b612bc6e1a765 100644 --- a/www/src/components/masthead-bg.js +++ b/www/src/components/masthead-bg.js @@ -1,4 +1,4 @@ -import presets from "../utils/presets" +import presets, { colors } from "../utils/presets" import { rhythm, scale, options } from "../utils/typography" import { vP, vPHd, vPVHd, vPVVHd } from "../components/gutters" @@ -31,7 +31,7 @@ const MastheadBg = () => ( right: `auto`, width: vPOff, zIndex: -10, - background: presets.brandLighter, + background: colors.ui.light, [presets.Hd]: { width: vPHdOff, }, @@ -64,12 +64,12 @@ const MastheadBg = () => ( height: `100%`, }} > - + \ No newline at end of file diff --git a/www/src/monogram.svg b/www/src/monogram.svg new file mode 100644 index 0000000000000..f9abc546c3949 --- /dev/null +++ b/www/src/monogram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/www/src/pages/blog/index.js b/www/src/pages/blog/index.js index e90407d6b8f9b..9593b0367b41b 100644 --- a/www/src/pages/blog/index.js +++ b/www/src/pages/blog/index.js @@ -4,9 +4,9 @@ import Helmet from "react-helmet" import Container from "../../components/container" import BlogPostPreviewItem from "../../components/blog-post-preview-item" -import presets from "../../utils/presets" +import presets, { colors } from "../../utils/presets" import { rhythm, scale, options } from "../../utils/typography" -import footerLogo from "../../gatsby-calm.svg" +import logo from "../../monogram.svg" class BlogPostsIndex extends React.Component { render() { @@ -16,7 +16,7 @@ class BlogPostsIndex extends React.Component {
( css={{ height: 30, width: 30, - textAlign: `center`, fontWeight: `bold`, fontFamily: options.headerFontFamily.join(`,`), }} diff --git a/www/src/pages/features.js b/www/src/pages/features.js index 42d795abac7f3..9d815966eab8c 100644 --- a/www/src/pages/features.js +++ b/www/src/pages/features.js @@ -6,9 +6,9 @@ import EvaluationCell from "../components/evaluation-cell" import FuturaParagraph from "../components/futura-paragraph" import Container from "../components/container" import { options, rhythm } from "../utils/typography" -import presets from "../utils/presets" +import presets, { colors } from "../utils/presets" -const legendBorderColor = presets.veryLightPurple +const legendBorderColor = colors.ui.light const LegendTable = () => { const legendBallStyle = { diff --git a/www/src/pages/index.js b/www/src/pages/index.js index 2118c8e5a13d2..1246e51cb4433 100644 --- a/www/src/pages/index.js +++ b/www/src/pages/index.js @@ -1,8 +1,7 @@ import React from "react" import Link from "gatsby-link" -import presets from "../utils/presets" -import colors from "../utils/colors" +import presets, { colors } from "../utils/presets" import { rhythm, scale, options } from "../utils/typography" import { JSIcon, WebpackIcon, ReactJSIcon, GraphQLIcon } from "../assets/logos" import { vP, vPHd, vPVHd, vPVVHd } from "../components/gutters" @@ -79,9 +78,7 @@ class IndexRoute extends React.Component { - - Future-proof your website - + Future-proof your website Don't build a website with last decade's tech. The future of the web is mobile, JavaScript and APIs—the {` `} @@ -92,7 +89,7 @@ class IndexRoute extends React.Component { - + Static {` `} @@ -122,7 +119,7 @@ class IndexRoute extends React.Component { borderTopLeftRadius: 0, borderTopRightRadius: 0, flex: `1 1 100%`, - borderTop: `1px solid ${presets.veryLightPurple}`, + borderTop: `1px solid ${colors.ui.light}`, }} /> @@ -147,7 +144,7 @@ class IndexRoute extends React.Component {
+ + + + + #663399 + + + diff --git a/www/static/favicon-16x16.png b/www/static/favicon-16x16.png index 8c48e077049bb..e8143d309203c 100644 Binary files a/www/static/favicon-16x16.png and b/www/static/favicon-16x16.png differ diff --git a/www/static/favicon-32x32.png b/www/static/favicon-32x32.png index 33bc62f65fba4..058c1985224d3 100644 Binary files a/www/static/favicon-32x32.png and b/www/static/favicon-32x32.png differ diff --git a/www/static/favicon.ico b/www/static/favicon.ico index 70bdd903859a4..eba9bc7a02f19 100644 Binary files a/www/static/favicon.ico and b/www/static/favicon.ico differ diff --git a/www/static/gatsby-negative.svg b/www/static/gatsby-negative.svg deleted file mode 100644 index 1eafdc235e21d..0000000000000 --- a/www/static/gatsby-negative.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - diff --git a/www/static/images/gatsby-monogram.jpg b/www/static/images/gatsby-monogram.jpg deleted file mode 100644 index 38254751d9736..0000000000000 Binary files a/www/static/images/gatsby-monogram.jpg and /dev/null differ diff --git a/www/static/mstile-150x150.png b/www/static/mstile-150x150.png index 25b7ab40c70ff..88cbd63f13f0a 100644 Binary files a/www/static/mstile-150x150.png and b/www/static/mstile-150x150.png differ diff --git a/www/static/safari-pinned-tab.svg b/www/static/safari-pinned-tab.svg index 1a914aa9636d7..6b2689f364fdf 100644 --- a/www/static/safari-pinned-tab.svg +++ b/www/static/safari-pinned-tab.svg @@ -1,75 +1 @@ - - - - -Created by potrace 1.11, written by Peter Selinger 2001-2013 - - - - - + \ No newline at end of file diff --git a/www/static/search.svg b/www/static/search.svg index b9faa8c07133e..0a5e697dd7b26 100644 --- a/www/static/search.svg +++ b/www/static/search.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file