Add semantic color keywords and improve formatting of color examples (#2869)

* Add semantic color keywords

This is based on the list I proposed at https://github.com/badges/shields/issues/1522#issuecomment-456455618. As I started documenting `default` I realized it didn't feel quite right. It's not semantic in relation to the content the way the others are, and it's also not the default left color. I changed it to `disabled` which isn't perfect, but seems better. I'm open to other suggestions.

I updated the documentation but the colors won't render correctly until this is deployed

Close #1522

* Reformat the aliases

* Pretty up the docs

* Reset whitespace changes

* Clean lint

frontend/components/usage.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import { Link } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
@@ -63,38 +63,27 @@ EscapingConversion.propTypes = {
   rhs: PropTypes.element.isRequired,
 }
 
+const ColorExamples = ({ baseUrl, colors }) => (
+  <span>
+    {colors.map((color, i) => (
+      <Badge
+        key={color}
+        src={staticBadgeUrl(baseUrl, '', color, color)}
+        alt={color}
+      />
+    ))}
+  </span>
+)
+ColorExamples.propTypes = {
+  baseUrl: PropTypes.string.isRequired,
+  colors: PropTypes.array.isRequired,
+}
+
 export default class Usage extends React.PureComponent {
   static propTypes = {
     baseUrl: PropTypes.string.isRequired,
   }
 
-  renderColorExamples() {
-    const { baseUrl } = this.props
-    const colors = [
-      'brightgreen',
-      'green',
-      'yellowgreen',
-      'yellow',
-      'orange',
-      'red',
-      'lightgrey',
-      'blue',
-      'ff69b4',
-    ]
-    return (
-      <p>
-        {colors.map((color, i) => (
-          <Fragment key={i}>
-            <Badge
-              src={staticBadgeUrl(baseUrl, 'color', color, color)}
-              alt={color}
-            />
-          </Fragment>
-        ))}
-      </p>
-    )
-  }
-
   renderStyleExamples() {
     const { baseUrl } = this.props
     return (
@@ -192,7 +181,39 @@ export default class Usage extends React.PureComponent {
           />
         </p>
         {this.constructor.renderStaticBadgeEscapingRules()}
-        {this.renderColorExamples()}
+
+        <H3 id="colors">Colors</H3>
+        <p>
+          <ColorExamples
+            baseUrl={baseUrl}
+            colors={[
+              'brightgreen',
+              'green',
+              'yellowgreen',
+              'yellow',
+              'orange',
+              'red',
+              'blue',
+              'lightgrey',
+            ]}
+          />
+          <br />
+          <ColorExamples
+            baseUrl={baseUrl}
+            colors={[
+              'success',
+              'important',
+              'critical',
+              'informational',
+              'inactive',
+            ]}
+          />
+          <br />
+          <ColorExamples
+            baseUrl={baseUrl}
+            colors={['blueviolet', 'ff69b4', '9cf']}
+          />
+        </p>
 
         <H3 id="endpoint">Endpoint (Beta)</H3>
 

gh-badges/README.md

@@ -78,9 +78,15 @@ There are three ways to specify `color` and `labelColor`:
 - ![][grey] ![][gray] – the default `labelColor`
 - ![][lightgrey] ![][lightgray] – the default `color`
 
+- ![][success]
+- ![][important]
+- ![][critical]
+- ![][informational]
+- ![][inactive] – the default `color`
+
 2. A three- or six-character hex color, optionally prefixed with `#`:
 
-- ![][4c1]
+- ![][9cf]
 - ![][#007fff]
 - etc.
 
@@ -91,17 +97,22 @@ There are three ways to specify `color` and `labelColor`:
 - ![][aqua] ![][fuchsia] ![][lightslategray] etc.
 
 [brightgreen]: https://img.shields.io/badge/brightgreen-brightgreen.svg
+[success]: https://img.shields.io/badge/success-success.svg
 [green]: https://img.shields.io/badge/green-green.svg
 [yellow]: https://img.shields.io/badge/yellow-yellow.svg
 [yellowgreen]: https://img.shields.io/badge/yellowgreen-yellowgreen.svg
 [orange]: https://img.shields.io/badge/orange-orange.svg
+[important]: https://img.shields.io/badge/important-important.svg
 [red]: https://img.shields.io/badge/red-red.svg
+[critical]: https://img.shields.io/badge/critical-critical.svg
 [blue]: https://img.shields.io/badge/blue-blue.svg
+[informational]: https://img.shields.io/badge/informational-informational.svg
 [grey]: https://img.shields.io/badge/grey-grey.svg
 [gray]: https://img.shields.io/badge/gray-gray.svg
 [lightgrey]: https://img.shields.io/badge/lightgrey-lightgrey.svg
 [lightgray]: https://img.shields.io/badge/lightgray-lightgray.svg
-[4c1]: https://img.shields.io/badge/4c1-4c1.svg
+[inactive]: https://img.shields.io/badge/inactive-inactive.svg
+[9cf]: https://img.shields.io/badge/9cf-9cf.svg
 [#007fff]: https://img.shields.io/badge/%23007fff-007fff.svg
 [aqua]: https://img.shields.io/badge/aqua-aqua.svg
 [fuchsia]: https://img.shields.io/badge/fuchsia-fuchsia.svg

gh-badges/lib/color.js

@@ -5,18 +5,31 @@ const isCSSColor = require('is-css-color')
 // When updating these, be sure also to update the list in `gh-badges/README.md`.
 const namedColors = {
   brightgreen: '#4c1',
-  green: '#97CA00',
+  green: '#97ca00',
   yellow: '#dfb317',
   yellowgreen: '#a4a61d',
   orange: '#fe7d37',
   red: '#e05d44',
   blue: '#007ec6',
   grey: '#555',
-  gray: '#555',
   lightgrey: '#9f9f9f',
-  lightgray: '#9f9f9f',
 }
 
+const aliases = {
+  gray: 'grey',
+  lightgray: 'lightgrey',
+  critical: 'red',
+  important: 'orange',
+  success: 'brightgreen',
+  informational: 'blue',
+  inactive: 'lightgrey',
+}
+
+const resolvedAliases = {}
+Object.entries(aliases).forEach(([alias, original]) => {
+  resolvedAliases[alias] = namedColors[original]
+})
+
 // This function returns false for `#ccc`. However `isCSSColor('#ccc')` is
 // true.
 const hexColorRegex = /^([\da-f]{3}){1,2}$/i
@@ -29,6 +42,8 @@ function normalizeColor(color) {
     return undefined
   } else if (color in namedColors) {
     return color
+  } else if (color in aliases) {
+    return aliases[color]
   } else if (isHexColor(color)) {
     return `#${color.toLowerCase()}`
   } else if (isCSSColor(color)) {
@@ -40,7 +55,13 @@ function normalizeColor(color) {
 
 function toSvgColor(color) {
   const normalized = normalizeColor(color)
-  return normalized in namedColors ? namedColors[color] : normalized
+  if (normalized in namedColors) {
+    return namedColors[normalized]
+  } else if (normalized in resolvedAliases) {
+    return resolvedAliases[normalized]
+  } else {
+    return normalized
+  }
 }
 
 module.exports = {

gh-badges/lib/color.spec.js

@@ -20,6 +20,8 @@ test(normalizeColor, () => {
   forCases([given(''), given(undefined), given('not-a-color')]).expect(
     undefined
   )
+  given('lightgray').expect('lightgrey')
+  given('informational').expect('blue')
 })
 
 test(toSvgColor, () => {
@@ -34,4 +36,6 @@ test(toSvgColor, () => {
   forCases([given(''), given(undefined), given('not-a-color')]).expect(
     undefined
   )
+  given('lightgray').expect('#9f9f9f')
+  given('informational').expect('#007ec6')
 })