[www] Update/consolidate palette, monogram and logo, favicons (gatsby…

…js#3639)

* #744c9e/116,76,158 -> #9966cc/102, 51, 153 (rebeccapurple)

* [WIP] Consolidate palette

* Ditch B100 in favor of B200

* Neutral diagram stripe color at least for now

* Fussing around with saturation

* Adjustting hues (still WIP ;-))

* Roll back all palette colors but brand/„B700“

* Throw in chroma.js, output presets.B*, chroma.js palette at /colors

* B200 -> B100
* B300 -> B200
* colors.b[0] -> B100
  * components/diagram „box“ border
  * layouts/index sidebar border-right

* Grab chroma-js from npm now that 1.3.6 is published

* Add redrawn monogram and logo (monogram + wordmark)

* remove gatsby-calm.svg for now – was only used on the blog page, where we’re for now using the regular monogram
* remove gatsby-negative.png, not in use – will regenerate the favicons that were probably based on this and add them ASAP
* remove gatsby-positive.svg, unused
* rename gatsby-negative.svg to monogram.svg, update it with the redrawn version
* replace logo and <h1> wordmark in components/navigation with the newly added logo.svg

* Update favicons

* fix apple-touch-icon.png, which had a transparent background which iOS resolves to black which looks 😒
* fix non-anti-aliased edges in all favicons
* add a white background for the „G and chopped edge“ shape of the favicon which was transparent before
* fix Safari pinned tab color

* Add hex2rgba, remove presets.shadowColor (matches presets.B500)

* Inherit text color

* Move colors from presets to colors

* Remove orange logo

* Bump favicon.ico

* Optimize favicons, update Windows tile icons

* Update manifest theme/background_color

* Remove some leftover anchors; invert logo for iOS, Windows tile

* Add Windows tile browserconfig.xml

* Oops

* Remove chroma (…), back to descriptive color names

* Make presets.calm pass WCAG AA

* Fix icon colors

* Remove presets.brandDark

* Add colors.gray

* :D

* Make presets.calm pass WCAG AA again

* rebeccapurple links in blog articles

* Fix logo offset

* Ditch colors.brand, add colors.ui, don’t litter colors in presets 🙄

* rename `brand` to `gatsby`
* expose `utils/colors` at `presets.colors`
* move UI colors to `colors.ui`
* add colors.success, colors.warning

* Update logo wordmark, optimize SVGs

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: [
           {

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",

www/src/components/blog-post-preview-item.js

@@ -3,7 +3,7 @@ import Link from "gatsby-link"
 import Img from "gatsby-image"
 
 import typography, { rhythm, scale } from "../utils/typography"
-import presets from "../utils/presets"
+import presets, { colors } from "../utils/presets"
 
 class BlogPostPreviewItem extends React.Component {
   render() {
@@ -40,7 +40,7 @@ class BlogPostPreviewItem extends React.Component {
             css={{
               display: `inline-block`,
               fontFamily: typography.options.headerFontFamily.join(`,`),
-              color: presets.calm,
+              color: colors.gray.calm,
               ...scale(-2 / 5),
               [presets.Mobile]: {
                 ...scale(-1 / 5),
@@ -61,7 +61,7 @@ class BlogPostPreviewItem extends React.Component {
                   "&&": {
                     fontWeight: `normal`,
                     ":hover": {
-                      color: presets.brand,
+                      color: colors.gatsby,
                       background: `transparent`,
                     },
                   },

www/src/components/card.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"
 
@@ -11,18 +11,18 @@ const Card = ({ children }) => (
       [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`,
         },

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: ``,

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 = () => (
     <path
       d="M10 40 L10 -10"
       css={{
-        stroke: presets.brandLight,
+        stroke: colors.lilac,
         strokeWidth: `3`,
         strokeLinecap: `round`,
         strokeDasharray: `0.5 10`,
@@ -88,14 +87,14 @@ 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 }) => (
   <h3
     css={{
-      color: presets.brand,
+      color: colors.gatsby,
       margin: 0,
       fontStyle: `normal`,
       ...scale(0),
@@ -163,7 +162,7 @@ const ItemDescription = ({ 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 }) => (
       </small>
       <span
         css={{
-          color: presets.brand,
+          color: colors.gatsby,
         }}
       >
         <TechWithIcon icon={GraphQLIcon}>GraphQL</TechWithIcon>