Merge pull request #243 from paperless-ngx/css-variables

Custom color theming

src-ui/src/app/utils/color.ts

@@ -1,3 +1,4 @@
+import { HSL } from "ngx-color"
 
 function componentToHex(c) {
   var hex = Math.floor(c).toString(16)
@@ -5,8 +6,8 @@ function componentToHex(c) {
 }
 
 /**
- * https://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
  *
+ * https://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
  * Converts an HSL color value to RGB. Conversion formula
  * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
  * Assumes h, s, and l are contained in the set [0, 1] and
@@ -42,6 +43,46 @@ function hslToRgb(h, s, l){
   return [r * 255, g * 255, b * 255]
 }
 
+/**
+ * https://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
+ * Converts an RGB color value to HSL. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ * Assumes r, g, and b are contained in the set [0, 255] and
+ * returns h, s, and l in the set [0, 1].
+ *
+ * @param   Number  r       The red color value
+ * @param   Number  g       The green color value
+ * @param   Number  b       The blue color value
+ * @return  Array           The HSL representation
+ */
+ export function rgbToHsl(r, g, b){
+  r /= 255, g /= 255, b /= 255;
+  var max = Math.max(r, g, b), min = Math.min(r, g, b);
+  var h, s, l = (max + min) / 2;
+
+  if(max == min){
+      h = s = 0; // achromatic
+  }else{
+      var d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch(max){
+          case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+          case g: h = (b - r) / d + 2; break;
+          case b: h = (r - g) / d + 4; break;
+      }
+      h /= 6;
+  }
+
+  return [h, s, l];
+}
+
+export function hexToHsl(hex: string): HSL {
+  hex = hex.replace('#', '')
+  let aRgbHex = hex.match(/.{1,2}/g)
+  const hsl = rgbToHsl(parseInt(aRgbHex[0], 16), parseInt(aRgbHex[1], 16), parseInt(aRgbHex[2], 16))
+  return { h: hsl[0], s: hsl[1], l: hsl[2] }
+}
+
 export function randomColor() {
   let rgb = hslToRgb(Math.random(), 0.6, Math.random() * 0.4 + 0.4)
   return `#${componentToHex(rgb[0])}${componentToHex(rgb[1])}${componentToHex(rgb[2])}`