badge-maker - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

CHANGELOG.md

 # Changelog
 
+## 3.3.0
+
+- Readability improvements: a dark font color is automatically used when the badge's background is too light. For example: ![](https://img.shields.io/badge/hello-world-white)
+- Better CSS color compliance: thanks to a switch from _is-css-color_ to _[css-color-converter](https://www.npmjs.com/package/css-color-converter)_, you can use a wider range of color formats from the latest CSS specification, for example `rgb(0 255 0)`
+- Less dependencies: _badge-maker_ no longer depends on _camelcase_
+
 ## 3.2.0
@@ -4,0 +10,0 @@

lib/badge-renderers.js

 'use strict'
 
 const anafanafo = require('anafanafo')
+const { brightness } = require('./color')
 
@@ -8,2 +9,3 @@ const fontFamily = 'font-family="Verdana,Geneva,DejaVu Sans,sans-serif"'
   'font-family="Helvetica Neue,Helvetica,Arial,sans-serif"'
+const brightnessThreshold = 0.69
 
@@ -14,2 +16,15 @@ function capitalize(s) {
 
+function colorsForBackground(color) {
+  if (brightness(color) <= brightnessThreshold) {
+    return {
+      textColor: '#fff',
+      shadowColor: '#010101',
+    }
+  }
+  return {
+    textColor: '#333',
+    shadowColor: '#ccc',
+  }
+}
+
 function escapeXml(s) {
@@ -123,2 +138,3 @@ if (s === undefined || typeof s !== 'string') {
   shadow = false,
+  color,
 }) {
@@ -139,6 +155,7 @@ if (!content.length) {
   let renderedText = ''
+  const { textColor, shadowColor } = colorsForBackground(color)
   if (shadow) {
-    renderedText = `<text aria-hidden="true" x="${x}" y="${shadowMargin}" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="${outTextLength}">${escapedContent}</text>`
+    renderedText = `<text aria-hidden="true" x="${x}" y="${shadowMargin}" fill="${shadowColor}" fill-opacity=".3" transform="scale(.1)" textLength="${outTextLength}">${escapedContent}</text>`
   }
-  renderedText += `<text x="${x}" y="${textMargin}" transform="scale(.1)" fill="#fff" textLength="${outTextLength}">${escapedContent}</text>`
+  renderedText += `<text x="${x}" y="${textMargin}" transform="scale(.1)" fill="${textColor}" textLength="${outTextLength}">${escapedContent}</text>`
 
@@ -241,2 +258,3 @@ return {
       shadow: this.constructor.shadow,
+      color: labelColor,
     })
@@ -265,2 +283,3 @@
       shadow: this.constructor.shadow,
+      color,
     })
@@ -661,6 +680,7 @@
   function renderLabelText() {
+    const { textColor } = colorsForBackground(labelColor)
     const labelTextX = ((labelWidth + totalLogoWidth) / 2) * 10
     const labelTextLength = (labelWidth - (24 + totalLogoWidth)) * 10
     const escapedLabel = escapeXml(label)
-    const text = `<text fill="#fff" x="${labelTextX}" y="175" transform="scale(.1)" textLength="${labelTextLength}">${escapedLabel}</text>`
+    const text = `<text fill="${textColor}" x="${labelTextX}" y="175" transform="scale(.1)" textLength="${labelTextLength}">${escapedLabel}</text>`
     if (hasLeftLink && !shouldWrapBodyWithLink({ links })) {
@@ -678,3 +698,4 @@ return `
   function renderMessageText() {
-    const text = `<text fill="#fff" x="${
+    const { textColor } = colorsForBackground(color)
+    const text = `<text fill="${textColor}" x="${
       (labelWidth + messageWidth / 2) * 10
@@ -722,2 +743,8 @@ }" y="175" font-weight="bold" transform="scale(.1)" textLength="${
 
-module.exports = { plastic, flat, flatSquare, social, forTheBadge }
+module.exports = {
+  plastic,
+  flat,
+  social,
+  'flat-square': flatSquare,
+  'for-the-badge': forTheBadge,
+}

lib/color.js

 'use strict'
 
-const isCSSColor = require('is-css-color')
+const { fromString } = require('css-color-converter')
 
@@ -40,2 +40,6 @@ // When updating these, be sure also to update the list in `badge-maker/README.md`.
 
+function isCSSColor(color) {
+  return typeof color === 'string' && fromString(color.trim())
+}
+
 function normalizeColor(color) {
@@ -68,2 +72,13 @@ if (color === undefined) {
 
+function brightness(color) {
+  if (color) {
+    const cssColor = fromString(color)
+    if (cssColor) {
+      const rgb = cssColor.toRgbaArray()
+      return +((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 255000).toFixed(2)
+    }
+  }
+  return 0
+}
+
 module.exports = {
@@ -74,2 +89,3 @@ namedColors,
   toSvgColor,
+  brightness,
 }

lib/make-badge.js

 'use strict'
 
-const camelcase = require('camelcase')
 const { normalizeColor, toSvgColor } = require('./color')
@@ -27,5 +26,2 @@ const badgeRenderers = require('./badge-renderers')
 
-  color = normalizeColor(color)
-  labelColor = normalizeColor(labelColor)
-
   // This ought to be the responsibility of the server, not `makeBadge`.
@@ -37,4 +33,6 @@ if (format === 'json') {
       logoWidth,
-      color,
-      labelColor,
+      // Only call normalizeColor for the JSON case: this is handled
+      // internally by toSvgColor in the SVG case.
+      color: normalizeColor(color),
+      labelColor: normalizeColor(labelColor),
       link: links,
@@ -46,7 +44,6 @@ name: label,
 
-  const methodName = camelcase(template)
-  if (!(methodName in badgeRenderers)) {
+  const render = badgeRenderers[template]
+  if (!render) {
     throw new Error(`Unknown template: '${template}'`)
   }
-  const render = badgeRenderers[methodName]
 
@@ -53,0 +50,0 @@ logoWidth = +logoWidth || (logo ? 14 : 0)

package.json

 {
   "name": "badge-maker",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Shields.io badge library",
@@ -39,4 +39,3 @@ "keywords": [
     "anafanafo": "^1.0.0",
-    "camelcase": "^6.0.0",
-    "is-css-color": "^1.0.0"
+    "css-color-converter": "^2.0.0"
   },
@@ -43,0 +42,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46323

increased by3.23%

Dependency count

2

decreased by-33.33%

Lines of code

923

increased by4.29%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedcss-color-converter@^2.0.0

• + Addedcolor-convert@0.5.3(transitive)

• + Addedcolor-name@1.1.4(transitive)

• + Addedcss-color-converter@2.0.0(transitive)

• + Addedcss-unit-converter@1.1.2(transitive)

• - Removedcamelcase@^6.0.0

• - Removedis-css-color@^1.0.0

• - Removedcamelcase@6.3.0(transitive)

• - Removedis-css-color@1.0.0(transitive)