Refactoring, forgotten files

src/services/color_convert/color_convert.js

@@ -1,9 +1,16 @@
-import { map } from 'lodash'
+import { invertLightness, convert, contrastRatio } from 'chromatism'
 
 // useful for visualizing color when debugging
 export const consoleColor = (color) => console.log('%c##########', 'background: ' + color + '; color: ' + color)
 
-const rgb2hex = (r, g, b) => {
+/**
+ * Convert r, g, b values into hex notation. All components are [0-255]
+ *
+ * @param {Number|String|Object} r - Either red component, {r,g,b} object, or hex string
+ * @param {Number} [g] - Green component
+ * @param {Number} [b] - Blue component
+ */
+export const rgb2hex = (r, g, b) => {
   if (r === null || typeof r === 'undefined') {
     return undefined
   }
@@ -14,7 +21,7 @@ const rgb2hex = (r, g, b) => {
   if (typeof r === 'object') {
     ({ r, g, b } = r)
   }
-  [r, g, b] = map([r, g, b], (val) => {
+  [r, g, b] = [r, g, b].map(val => {
     val = Math.ceil(val)
     val = val < 0 ? 0 : val
     val = val > 255 ? 255 : val
@@ -82,6 +89,7 @@ const getContrastRatio = (a, b) => {
 
   return (l1 + 0.05) / (l2 + 0.05)
 }
+
 /**
  * Same as `getContrastRatio` but for multiple layers in-between
  *
@@ -101,7 +109,7 @@ export const getContrastRatioLayers = (text, layers, bedrock) => {
  * @param {Object} bg - bottom layer color
  * @returns {Object} sRGB of resulting color
  */
-const alphaBlend = (fg, fga, bg) => {
+export const alphaBlend = (fg, fga, bg) => {
   if (fga === 1 || typeof fga === 'undefined') return fg
   return 'rgb'.split('').reduce((acc, c) => {
     // Simplified https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
@@ -121,14 +129,20 @@ export const alphaBlendLayers = (bedrock, layers) => layers.reduce((acc, [color,
   return alphaBlend(color, opacity, acc)
 }, bedrock)
 
-const invert = (rgb) => {
+export const invert = (rgb) => {
   return 'rgb'.split('').reduce((acc, c) => {
     acc[c] = 255 - rgb[c]
     return acc
   }, {})
 }
 
-const hex2rgb = (hex) => {
+/**
+ * Converts #rrggbb hex notation into an {r, g, b} object
+ *
+ * @param {String} hex - #rrggbb string
+ * @returns {Object} rgb representation of the color, values are 0-255
+ */
+export const hex2rgb = (hex) => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
   return result ? {
     r: parseInt(result[1], 16),
@@ -137,18 +151,75 @@ const hex2rgb = (hex) => {
   } : null
 }
 
-const mixrgb = (a, b) => {
+/**
+ * Old somewhat weird function for mixing two colors together
+ *
+ * @param {Object} a - one color (rgb)
+ * @param {Object} b - other color (rgb)
+ * @returns {Object} result
+ */
+export const mixrgb = (a, b) => {
   return Object.keys(a).reduce((acc, k) => {
     acc[k] = (a[k] + b[k]) / 2
     return acc
   }, {})
 }
-
-export {
-  rgb2hex,
-  hex2rgb,
-  mixrgb,
-  invert,
-  getContrastRatio,
-  alphaBlend
+/**
+ * Converts rgb object into a CSS rgba() color
+ *
+ * @param {Object} color - rgb
+ * @returns {String} CSS rgba() color
+ */
+export const rgba2css = function (rgba) {
+  return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`
+}
+
+/**
+ * Get text color for given background color and intended text color
+ * This checks if text and background don't have enough color and inverts
+ * text color's lightness if needed. If text color is still not enough it
+ * will fall back to black or white
+ *
+ * @param {Object} bg - background color
+ * @param {Object} text - intended text color
+ * @param {Boolean} preserve - try to preserve intended text color's hue/saturation (i.e. no BW)
+ */
+export const getTextColor = function (bg, text, preserve) {
+  const bgIsLight = convert(bg).hsl.l > 50
+  const textIsLight = convert(text).hsl.l > 50
+
+  if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
+    const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
+    const result = Object.assign(base, invertLightness(text).rgb)
+    if (!preserve && getContrastRatio(bg, result) < 4.5) {
+      // B&W
+      return contrastRatio(bg, text).rgb
+    }
+    // Inverted color
+    return result
+  }
+  return text
+}
+
+/**
+ * Converts color to CSS Color value
+ *
+ * @param {Object|String} input - color
+ * @param {Number} [a] - alpha value
+ * @returns {String} a CSS Color value
+ */
+export const getCssColor = (input, a) => {
+  let rgb = {}
+  if (typeof input === 'object') {
+    rgb = input
+  } else if (typeof input === 'string') {
+    if (input.startsWith('#')) {
+      rgb = hex2rgb(input)
+    } else if (input.startsWith('--')) {
+      return `var(${input})`
+    } else {
+      return input
+    }
+  }
+  return rgba2css({ ...rgb, a })
 }