color without spectra dep

backend/setup.py

@@ -43,7 +43,6 @@ requires = [
     'rq',
     # frontend file serve
     'pyramid_mako',
-    'spectra',
 ]
 
 tests_require = [

backend/tracim_backend/lib/utils/utils.py

@@ -3,6 +3,7 @@ import datetime
 import random
 import string
 from enum import Enum
+import colorsys
 
 from redis import Redis
 from rq import Queue
@@ -124,3 +125,61 @@ def password_generator(
     """
     return ''.join(random.choice(chars) for char_number in range(length))
 
+
+def clamp(val: float, minimum: float = 0.0, maximum: float= 255.0) -> int:
+    """ Fix value between min an max"""
+    if val < minimum:
+        return minimum
+    if val > maximum:
+        return maximum
+    return int(val)
+
+
+COLOR_DARKEN_SCALE_FACTOR = 0.85
+COLOR_LIGHTEN_SCALE_FACTOR = 1.15
+
+class Color(object):
+    def __init__(self, base_hex_code: str):
+        """
+        :param base_hex_code: hex color like '#FFFFFF'
+        """
+
+        assert len(base_hex_code) == 7
+        self._base_hex_code = base_hex_code
+
+    # INFO - G.M - 2018-08-10 - get_hexcolor, inspired by
+    # https://thadeusb.com/weblog/2010/10/10/python_scale_hex_color/
+
+    def get_hexcolor(self, scalefactor: float) -> str:
+        """
+
+        :param scalefactor: factor of scaling,
+        value between 0 and 1 darken the color,
+        value >1 lighten the color.
+        :return: new hex_color
+        """
+
+        hex_color = self._base_hex_code.strip('#')
+        assert scalefactor > 0
+
+        r = int(hex_color[:2], 16)
+        g = int(hex_color[2:4], 16)
+        b = int(hex_color[4:], 16)
+
+        h, l, s = colorsys.rgb_to_hls(r, g, b)
+        l = scalefactor * l
+        r, g, b = colorsys.hls_to_rgb(h, l, s)
+
+        return "#%02x%02x%02x" % (clamp(r), clamp(g), clamp(b))
+
+    @property
+    def normal(self):
+        return self._base_hex_code
+
+    @property
+    def darken(self):
+        return self.get_hexcolor(COLOR_DARKEN_SCALE_FACTOR)
+
+    @property
+    def lighten(self):
+        return self.get_hexcolor(COLOR_LIGHTEN_SCALE_FACTOR)

backend/tracim_backend/views/frontend.py

@@ -5,6 +5,7 @@ from pyramid.config import Configurator
 from tracim_backend.extensions import APP_LIST
 from tracim_backend.exceptions import PageNotFound
 from tracim_backend.lib.core.application import ApplicationApi
+from tracim_backend.lib.utils.utils import Color
 from tracim_backend.views import BASE_API_V2
 from tracim_backend.lib.utils.request import TracimRequest
 from tracim_backend.views.controllers import Controller
@@ -51,7 +52,7 @@ class FrontendController(Controller):
             self._get_index_file_path(),
             {
                 'colors': {
-                    'primary': spectra.html(app_config.APPS_COLORS['primary']),
+                    'primary': Color(app_config.APPS_COLORS['primary']),
                 },
                 'applications': frontend_apps,
             }

color.json.sample

@@ -1,6 +1,6 @@
 {
   "primary": "#7d4e24",
-  "html-document": "#3f52e3",
-  "thread": "#ad4cf9",
-  "file": "#ff9900"
+  "contents/html-document": "#3f52e3",
+  "contents/thread": "#ad4cf9",
+  "contents/file": "#ff9900"
 }

frontend/dist/index.mak

@@ -21,37 +21,37 @@
         param = 'color'
         color_change_value = 15
       %>
-      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
-      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
-      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.normal}; }
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken}; }
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.lighten}; }
       <% html_class = '.primaryColorFont{state}Hover:hover' %>
-      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
-      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
-      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.normal}; }
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken}; }
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.lighten}; }
 
       <%
         html_class = '.primaryColorBg{state}'
         param = 'background-color'
       %>
-      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
-      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
-      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.normal}; }
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken}; }
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.lighten}; }
       <% html_class = '.primaryColorBg{state}Hover:hover'%>
-      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
-      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
-      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.normal}; }
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken}; }
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.lighten}; }
 
       <%
         param = 'border-color'
         html_class = '.primaryColorBorder{state}'
       %>
-      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
-      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
-      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.normal}; }
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken}; }
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.lighten}; }
       <% html_class = '.primaryColorBorder{state}Hover:hover' %>
-      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
-      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
-      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.normal}; }
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken}; }
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.lighten}; }
     </style>
   </head>