replace darken and lighten by autogenerated color

backend/setup.py

     'rq',
     # frontend file serve
     'pyramid_mako',
+    'spectra',
 ]
 
 tests_require = [

backend/tracim_backend/views/frontend.py

 from tracim_backend.views import BASE_API_V2
 from tracim_backend.lib.utils.request import TracimRequest
 from tracim_backend.views.controllers import Controller
+import spectra
 
 INDEX_PAGE_NAME = 'index.mak'
 
     def index(self, context, request: TracimRequest):
         return render_to_response(
             self._get_index_file_path(),
-            {}
+            {'primary': spectra.html('#7d4e24')}
         )
 
     def bind(self, configurator: Configurator) -> None:

frontend/dist/index.mak

     <link rel="stylesheet" type="text/css" href="/asset/bootstrap/bootstrap-4.0.0-beta.css">
 
     <style>
-      /* code bellow will be generated by backend */
-      .primaryColorFont { color: #7d4e24; }
-      .primaryColorFontDarken { color: #572800; }
-      .primaryColorFontLighten { color: #a3744a; }
+      <%
+        html_class = '.primaryColorFont{state}'
+        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 = '.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}; }
 
-      .primaryColorFontHover:hover { color: #7d4e24; }
-      .primaryColorFontDarkenHover:hover { color: #572800; }
-      .primaryColorFontLightenHover:hover { color: #a3744a; }
-
-      .primaryColorBg { background-color: #7d4e24; }
-      .primaryColorBgDarken { background-color: #572800; }
-      .primaryColorBgLighten { background-color: #a3744a; }
-
-      .primaryColorBgHover:hover { background-color: #7d4e24; }
-      .primaryColorBgDarkenHover:hover { background-color: #572800; }
-      .primaryColorBgLightenHover:hover { background-color: #a3744a; }
-
-      .primaryColorBorder { border-color: #7d4e24; }
-      .primaryColorBorderDarken { border-color: #572800; }
-      .primaryColorBorderLighten { border-color: #a3744a; }
-
-      .primaryColorBorderHover:hover { border-color: #7d4e24; }
-      .primaryColorBorderDarkenHover:hover { border-color: #572800; }
-      .primaryColorBorderLightenHover:hover { border-color: #a3744a; }
+      <%
+        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 = '.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}; }
 
+      <%
+        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 = '.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}; }
     </style>
   </head>