[www] Clean up src/utils/colors.js, consolidate PrismJS syntax highli…

…ghting styles (gatsbyjs#8007) * Bye bye .org/colors * Clean up src/utils/colors.js, consolidate PrismJS styles * move the prism-coy.css contents to typography.js * clean up `www/src/utils/colors.js` — bye-bye cubehelix colors; it’s us, not you; you’ll always be in our hearts <3
gold356 · Sep 10, 2018 · 92773fa · 92773fa
1 parent 0f640dd
commit 92773fa
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 239 deletions.
diff --git a/www/src/components/layout.js b/www/src/components/layout.js
@@ -8,7 +8,6 @@ import Banner from "../components/banner"
 import Navigation from "../components/navigation"
 import MobileNavigation from "../components/navigation-mobile"
 import PageWithSidebar from "../components/page-with-sidebar"
-import "../css/prism-coy.css"
 
 import mousetrap from "mousetrap"
 

diff --git a/www/src/css/prism-coy.css b/www/src/css/prism-coy.css
diff --git a/www/src/pages/colors.js b/www/src/pages/colors.js
diff --git a/www/src/utils/colors.js b/www/src/utils/colors.js
@@ -1,60 +1,6 @@
 import gray from "gray-percentage"
 
-const colorStr = `
-#281505
-#042b1b
-#2e1740
-#3a2407
-#073e2e
-#452054
-#48340a
-#0d4f43
-#5c2965
-#53450e
-#165e5a
-#743272
-#5c5815
-#216c72
-#8a3d7d
-#636a1e
-#2f798a
-#9f4984
-#697d2a
-#4084a1
-#b3568b
-#6f8f39
-#538eb6
-#c36490
-#75a14b
-#6998c9
-#d17494
-#7db15f
-#7fa1d9
-#dd859a
-#86c076
-#96abe6
-#e598a1
-#91ce8e
-#adb6f0
-#ecabaa
-#a0daa6
-#c2c2f7
-#f1beb6
-#b1e5be
-#d6cffb
-#f4d1c6
-#c6eed5
-#e7defe
-#f8e4d9
-#def6ea
-#f5eefe
-#fcf6f0
-`
-
 const colors = {
-  a: [],
-  b: [],
-  c: [],
   // original palette by @SachaG
   // @see https://www.figma.com/file/J6IYJEtdRmwJQOrcZ2DfvxDD/Gatsby
   gatsby: `#663399`, // was #744c9e
@@ -78,34 +24,22 @@ const colors = {
     light: gray(80, 270),
   },
   code: {
-    bg: `#fdfaf6`,
+    bg: `#fdfaf6`, // colors.a[0] #fcf6f0
     border: `#faede5`,
     text: `#866c5b`,
     remove: `#e45c5c`,
     add: `#4a9c59`,
+    selector: `#b3568b`,
+    tag: `#4084a1`,
+    keyword: `#538eb6`,
+    comment: `#6f8f39`,
+    punctuation: `#53450e`,
+    regex: `#d88489`,
+    cssString: `#a2466c`,
+    invisibles: `#e0d7d1`,
+    scrollbarThumb: `#f4d1c6`,
+    lineHighlightBorder: `#f1beb6`,
   },
 }
 
-let pointer = `a`
-colorStr
-  .split(`\n`)
-  .reverse()
-  .forEach(c => {
-    if (c === ``) return
-    colors[pointer].push(c)
-    switch (pointer) {
-      case `a`:
-        pointer = `b`
-        break
-      case `b`:
-        pointer = `c`
-        break
-      case `c`:
-        pointer = `a`
-        break
-      default:
-        break
-    }
-  })
-
 export default colors
diff --git a/www/src/utils/typography.js b/www/src/utils/typography.js
@@ -95,8 +95,7 @@ const _options = {
         backgroundColor: colors.ui.light,
       },
       "tt, code, kbd": {
-        // background: `hsla(23, 60%, 97%, 1)`,
-        background: colors.a[0],
+        background: colors.code.bg,
         paddingTop: `0.1em`,
         paddingBottom: `0.1em`,
       },
@@ -109,9 +108,7 @@ const _options = {
         fontFeatureSettings: `"clig" 0, "calt" 0`,
       },
       ".gatsby-highlight": {
-        //background: colors.a[0],
         background: colors.code.bg,
-        //boxShadow: `inset 0 0 0 1px ${colors.a[1]}`,
         boxShadow: `inset 0 0 0 1px ${colors.code.border}`,
         borderRadius: `${presets.radius}px`,
         padding: rhythm(options.blockMarginBottom),
@@ -136,14 +133,13 @@ const _options = {
         lineHeight: options.baseLineHeight,
       },
       ".gatsby-highlight-code-line": {
-        //background: colors.a[1],
         background: colors.code.border,
         marginRight: `${rhythm(-options.blockMarginBottom)}`,
         marginLeft: `${rhythm(-options.blockMarginBottom)}`,
         paddingRight: rhythm(options.blockMarginBottom),
         paddingLeft: `${rhythm((options.blockMarginBottom / 5) * 4)}`,
         borderLeft: `${rhythm((options.blockMarginBottom / 5) * 1)} solid ${
-          colors.a[3]
+          colors.code.lineHighlightBorder
         }`,
         display: `block`,
       },
@@ -152,10 +148,9 @@ const _options = {
         height: `6px`,
       },
       ".gatsby-highlight::-webkit-scrollbar-thumb": {
-        background: colors.a[2],
+        background: colors.code.scrollbarThumb,
       },
       ".gatsby-highlight::-webkit-scrollbar-track": {
-        //background: colors.a[1],
         background: colors.code.border,
         borderRadius: `0 0 ${presets.radiusLg}px ${presets.radiusLg}px`,
       },
@@ -252,8 +247,9 @@ const _options = {
           borderRight: 0,
         },
         ".gatsby-highlight": {
-          //boxShadow: `inset 0 1px 0 0 ${colors.a[1]}, inset 0 -1px 0 0 ${colors.a[1]}`,
-          boxShadow: `inset 0 1px 0 0 ${colors.code.border}, inset 0 -1px 0 0 ${colors.code.border}`,
+          boxShadow: `inset 0 1px 0 0 ${colors.code.border}, inset 0 -1px 0 0 ${
+            colors.code.border
+          }`,
         },
       },
       video: {
@@ -298,46 +294,65 @@ const _options = {
           )}`,
         },
         ".gatsby-code-title": {
-          padding: `${rhythm(options.blockMarginBottom / 2)} ${rhythm(options.blockMarginBottom * 1.5)}`,
-        }
+          padding: `${rhythm(options.blockMarginBottom / 2)} ${rhythm(
+            options.blockMarginBottom * 1.5
+          )}`,
+        },
       },
       [MIN_LARGER_DISPLAY_MEDIA_QUERY]: {
         html: {
           fontSize: `${(21 / 16) * 100}%`,
         },
       },
-      ".token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata": {
-        // color: `#52ad9f`,
-        color: colors.c[8],
+      // PrismJS syntax highlighting token styles
+      // https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/
+      ".token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata": {
+        color: colors.code.comment,
       },
       ".token.punctuation": {
-        // color: `#5F6364`,
-        // color: `blue`,
-        color: colors.c[12],
-      },
-      ".token.property,.token.tag,.token.boolean,.token.number,.token.function-name,.token.constant,.token.symbol": {
-        // color: `#a285d8`,
-        color: colors.b[9],
+        color: colors.code.punctuation,
       },
-      ".token.selector,.token.attr-name,.token.string,.token.char,.token.function,.token.builtin": {
-        // color: `#a2466c`,
-        color: colors.a[9],
+      ".token.property, .token.tag, .token.boolean, .token.number, .token.function-name, .token.constant, .token.symbol": {
+        color: colors.code.tag,
       },
-      ".token.operator, .token.entity, .token.url, .token.variable": {
-        // color: `#c18b99`,
-        // color: `blue`,
+      ".token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin": {
+        color: colors.code.selector,
       },
+      ".token.operator, .token.entity, .token.url, .token.variable": {},
       ".token.atrule, .token.attr-value, .token.keyword, .token.class-name": {
-        // color: `#a285d8`,
-        // color: `blue`,
-        color: colors.b[8],
+        color: colors.code.keyword,
       },
       ".token.inserted": {
         color: colors.code.add,
       },
       ".token.deleted": {
         color: colors.code.remove,
       },
+      ".token.regex, .token.important": {
+        color: colors.code.regex,
+      },
+      ".language-css .token.string, .style .token.string": {
+        color: colors.code.cssString,
+      },
+      ".token.important": {
+        fontWeight: `normal`,
+      },
+      ".token.bold": {
+        fontWeight: `bold`,
+      },
+      ".token.italic": {
+        fontStyle: `italic`,
+      },
+      ".token.entity": {
+        cursor: `help`,
+      },
+      ".namespace": {
+        opacity: 0.7,
+      },
+      // PrismJS plugin styles
+      ".token.tab:not(:empty):before, .token.cr:before, .token.lf:before": {
+        color: colors.code.invisibles,
+      },
       // Fancy external links in posts, borrowed from
       // https://github.com/comfusion/after-dark/
       // @see https://github.com/comfusion/after-dark/blob/8fdbe2f480ac40315cf0e01cece785d2b5c4b0c3/layouts/partials/critical-theme.css#L36-L39