automatically show light or dark logos when using simple-icons (#2833)

closes #2431 refs #2510
badges · Jan 23, 2019 · eaa64a8 · eaa64a8
1 parent 1ac208e
commit eaa64a8
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 10 deletions.
diff --git a/core/base-service/base.js b/core/base-service/base.js
@@ -441,6 +441,7 @@ class BaseService {
         // the color.
         overrideNamedLogo ? undefined : serviceLogoColor
       ),
+      style,
     })
 
     return {

diff --git a/lib/logos.js b/lib/logos.js
@@ -54,28 +54,54 @@ function getShieldsIcon({ name, color }) {
   }
 }
 
-function getSimpleIcon({ name, color }) {
+function brightness({ r, g, b }) {
+  return +((r * 299 + g * 587 + b * 114) / 255000).toFixed(2)
+}
+
+const hexColorRegex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i
+
+function hexToRgb(hex) {
+  const result = hexColorRegex.exec(hex)
+  return {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16),
+  }
+}
+
+function getSimpleIconColor({ icon, style }) {
+  const { hex } = icon
+  if (style !== 'social' && brightness(hexToRgb(hex)) <= 0.4) {
+    return 'whitesmoke'
+  }
+  if (style === 'social' && brightness(hexToRgb(hex)) >= 0.6) {
+    return '#333'
+  }
+  return hex
+}
+
+function getSimpleIcon({ name, color, style }) {
   const key = name.toLowerCase().replace(/ /g, '-')
 
   if (!(key in simpleIcons)) {
     return undefined
   }
 
-  const { svg, base64 } = simpleIcons[key]
-  const svgColor = toSvgColor(color)
-  if (svgColor) {
-    return svg2base64(svg.replace('<svg', `<svg fill="${svgColor}"`))
-  } else {
-    return base64
-  }
+  const { svg } = simpleIcons[key]
+  const svgColor =
+    toSvgColor(color) ||
+    toSvgColor(getSimpleIconColor({ icon: simpleIcons[key], style }))
+  return svg2base64(svg.replace('<svg', `<svg fill="${svgColor}"`))
 }
 
-function prepareNamedLogo({ name, color }) {
+function prepareNamedLogo({ name, color, style }) {
   if (typeof name !== 'string') {
     return undefined
   }
 
-  return getShieldsIcon({ name, color }) || getSimpleIcon({ name, color })
+  return (
+    getShieldsIcon({ name, color }) || getSimpleIcon({ name, color, style })
+  )
 }
 
 function makeLogo(defaultNamedLogo, overrides) {
@@ -86,6 +112,7 @@ function makeLogo(defaultNamedLogo, overrides) {
     return prepareNamedLogo({
       name: coalesce(overrides.logo, defaultNamedLogo),
       color: overrides.logoColor,
+      style: overrides.style,
     })
   }
 }

diff --git a/lib/logos.spec.js b/lib/logos.spec.js
@@ -1,5 +1,6 @@
 'use strict'
 
+const { expect } = require('chai')
 const { test, given, forCases } = require('sazerac')
 const {
   prependPrefix,
@@ -31,6 +32,57 @@ describe('Logo helpers', function() {
     given({ name: 'github', color: 'blue' }).expect(
       'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMTIgMTIgNDAgNDAiPgo8cGF0aCBmaWxsPSIjMDA3ZWM2IiBkPSJNMzIsMTMuNGMtMTAuNSwwLTE5LDguNS0xOSwxOWMwLDguNCw1LjUsMTUuNSwxMywxOGMxLDAuMiwxLjMtMC40LDEuMy0wLjljMC0wLjUsMC0xLjcsMC0zLjIgYy01LjMsMS4xLTYuNC0yLjYtNi40LTIuNkMyMCw0MS42LDE4LjgsNDEsMTguOCw0MWMtMS43LTEuMiwwLjEtMS4xLDAuMS0xLjFjMS45LDAuMSwyLjksMiwyLjksMmMxLjcsMi45LDQuNSwyLjEsNS41LDEuNiBjMC4yLTEuMiwwLjctMi4xLDEuMi0yLjZjLTQuMi0wLjUtOC43LTIuMS04LjctOS40YzAtMi4xLDAuNy0zLjcsMi01LjFjLTAuMi0wLjUtMC44LTIuNCwwLjItNWMwLDAsMS42LTAuNSw1LjIsMiBjMS41LTAuNCwzLjEtMC43LDQuOC0wLjdjMS42LDAsMy4zLDAuMiw0LjcsMC43YzMuNi0yLjQsNS4yLTIsNS4yLTJjMSwyLjYsMC40LDQuNiwwLjIsNWMxLjIsMS4zLDIsMywyLDUuMWMwLDcuMy00LjUsOC45LTguNyw5LjQgYzAuNywwLjYsMS4zLDEuNywxLjMsMy41YzAsMi42LDAsNC42LDAsNS4yYzAsMC41LDAuNCwxLjEsMS4zLDAuOWM3LjUtMi42LDEzLTkuNywxMy0xOC4xQzUxLDIxLjksNDIuNSwxMy40LDMyLDEzLjR6Ii8+Cjwvc3ZnPgo='
     )
+
+    it('preserves color if light logo on dark background', function() {
+      const logo = prepareNamedLogo({ name: 'javascript' })
+      const decodedLogo = Buffer.from(
+        logo.replace('data:image/svg+xml;base64,', ''),
+        'base64'
+      ).toString('ascii')
+      expect(decodedLogo).to.contain('fill="#f7df1e"')
+    })
+    it('recolors logo if light logo on light background', function() {
+      const logo = prepareNamedLogo({ name: 'javascript', style: 'social' })
+      const decodedLogo = Buffer.from(
+        logo.replace('data:image/svg+xml;base64,', ''),
+        'base64'
+      ).toString('ascii')
+      expect(decodedLogo).to.contain('fill="#333"')
+    })
+
+    it('preserves color if dark logo on light background', function() {
+      const logo = prepareNamedLogo({ name: 'nuget', style: 'social' })
+      const decodedLogo = Buffer.from(
+        logo.replace('data:image/svg+xml;base64,', ''),
+        'base64'
+      ).toString('ascii')
+      expect(decodedLogo).to.contain('fill="#004880"')
+    })
+    it('recolors logo if dark logo on dark background', function() {
+      const logo = prepareNamedLogo({ name: 'nuget' })
+      const decodedLogo = Buffer.from(
+        logo.replace('data:image/svg+xml;base64,', ''),
+        'base64'
+      ).toString('ascii')
+      expect(decodedLogo).to.contain('fill="whitesmoke"')
+    })
+
+    it('preserves color if medium logo on dark background', function() {
+      const logo = prepareNamedLogo({ name: 'skype' })
+      const decodedLogo = Buffer.from(
+        logo.replace('data:image/svg+xml;base64,', ''),
+        'base64'
+      ).toString('ascii')
+      expect(decodedLogo).to.contain('fill="#00aff0"')
+    })
+    it('preserves color if medium logo on light background', function() {
+      const logo = prepareNamedLogo({ name: 'skype', style: 'social' })
+      const decodedLogo = Buffer.from(
+        logo.replace('data:image/svg+xml;base64,', ''),
+        'base64'
+      ).toString('ascii')
+      expect(decodedLogo).to.contain('fill="#00aff0"')
+    })
   })
 
   test(makeLogo, () => {