Remove chromatism, #439

app/soapbox/utils/theme.js

@@ -1,13 +1,72 @@
 import { Map as ImmutableMap } from 'immutable';
-import { convert } from 'chromatism';
 
 export const generateThemeCss = brandColor => {
   if (!brandColor) return null;
   return themeDataToCss(brandColorToThemeData(brandColor));
 };
 
+// https://stackoverflow.com/a/5624139
+function hexToRgb(hex) {
+  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, (m, r, g, b) => (
+    r + r + g + g + b + b
+  ));
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16),
+  } : {
+    // fall back to Azure
+    r: 4,
+    g: 130,
+    b: 216,
+  };
+}
+
+// Taken from chromatism.js
+// https://github.com/graypegg/chromatism/blob/master/src/conversions/rgb.js
+const rgbToHsl = value => {
+  var r = value.r / 255;
+  var g = value.g / 255;
+  var b = value.b / 255;
+  var rgbOrdered = [ r, g, b ].sort();
+  var l = ((rgbOrdered[0] + rgbOrdered[2]) / 2) * 100;
+  var s, h;
+  if (rgbOrdered[0] === rgbOrdered[2]) {
+    s = 0;
+    h = 0;
+  } else {
+    if (l >= 50) {
+      s = ((rgbOrdered[2] - rgbOrdered[0]) / ((2.0 - rgbOrdered[2]) - rgbOrdered[0])) * 100;
+    } else {
+      s = ((rgbOrdered[2] - rgbOrdered[0]) / (rgbOrdered[2] + rgbOrdered[0])) * 100;
+    }
+    if (rgbOrdered[2] === r) {
+      h = ((g - b) / (rgbOrdered[2] - rgbOrdered[0])) * 60;
+    } else if (rgbOrdered[2] === g) {
+      h = (2 + ((b - r) / (rgbOrdered[2] - rgbOrdered[0]))) * 60;
+    } else {
+      h = (4 + ((r - g) / (rgbOrdered[2] - rgbOrdered[0]))) * 60;
+    }
+    if (h < 0) {
+      h += 360;
+    } else if (h > 360) {
+      h = h % 360;
+    }
+  }
+
+  return {
+    h: h,
+    s: s,
+    l: l,
+  };
+};
+
 export const brandColorToThemeData = brandColor => {
-  const { h, s, l } = convert(brandColor).hsl;
+  const { h, s, l } = rgbToHsl(hexToRgb(brandColor));
   return ImmutableMap({
     'brand-color_h': h,
     'brand-color_s': `${s}%`,

package.json

@@ -57,7 +57,6 @@
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-runtime": "^6.26.0",
     "blurhash": "^1.0.0",
-    "chromatism": "^3.0.0",
     "classnames": "^2.2.5",
     "compression-webpack-plugin": "^3.0.0",
     "cross-env": "^6.0.0",

yarn.lock

@@ -3072,11 +3072,6 @@ chownr@^1.1.1:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
   integrity sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==
 
-chromatism@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/chromatism/-/chromatism-3.0.0.tgz#a7249d353c1e4f3577e444ac41171c4e2e624b12"
-  integrity sha1-pySdNTweTzV35ESsQRccTi5iSxI=
-
 chrome-trace-event@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"