From 526818e8587fb2cf6dd3782fb9162d683b51ecf5 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Wed, 18 Dec 2019 21:26:31 +0100
Subject: [PATCH] charts refactor, libs refactor

---
 .editorconfig                          |   9 +-
 build/copy-libs.js                     |  21 +-
 js/tabler-charts.js                    | 269 ++++++++++++-------------
 js/tabler.js                           |  59 ------
 pages/_data/charts.yml                 |  95 ++-------
 pages/_data/colors.yml                 | 123 +++++++++++
 pages/_data/libs.json                  |  63 +++---
 pages/_data/maps.yml                   |   2 +-
 pages/_includes/layout/css.html        |  12 +-
 pages/_includes/layout/js-capture.html |   2 +-
 pages/_includes/layout/js.html         |  20 +-
 pages/_includes/ui/chart.html          | 237 +++++++++++-----------
 pages/_includes/ui/map.html            |   5 +-
 pages/_includes/ui/sparkline.html      |   3 +-
 pages/_layouts/base.html               |   6 +-
 pages/_plugins/jekyll-capture.rb       |  34 +++-
 pages/_plugins/jekyll-filters.rb       |  19 +-
 pages/tmp.html                         |   7 +
 scss/_debug.scss                       |  32 +++
 scss/_variables.scss                   |   2 +
 scss/mixins/_functions.scss            |  14 +-
 scss/tabler.scss                       |   4 +
 scss/utils/_colors.scss                |   2 -
 23 files changed, 573 insertions(+), 467 deletions(-)
 create mode 100644 pages/_data/colors.yml
 create mode 100644 scss/_debug.scss

diff --git a/.editorconfig b/.editorconfig
index 76891716d..f19cdc738 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -2,8 +2,9 @@
 charset=utf-8
 end_of_line=lf
 insert_final_newline=true
-indent_style=space
-indent_size=2
+indent_style=tab
+indent_size=3
+max_line_length=off
 
 [*.svg]
 indent_style=tab
@@ -18,6 +19,10 @@ insert_final_newline=false
 indent_style=tab
 tab_width=3
 
+[{*.rb,*.yml}]
+indent_style=space
+indent_size=2
+
 [*.js.map]
 indent_style=tab
 indent_size=3
diff --git a/build/copy-libs.js b/build/copy-libs.js
index 362d0a41f..11994d451 100755
--- a/build/copy-libs.js
+++ b/build/copy-libs.js
@@ -1,11 +1,22 @@
-const libs = require('../pages/_data/libs'),
+const all_libs = require('../pages/_data/libs'),
   path = require('path'),
   { exec } = require('child_process');
 
-const all_libs = libs.js.concat(libs.css);
+let files = [];
+
+Object.keys(all_libs.js).forEach(function (lib) {
+  files.push(Array.isArray(all_libs.js[lib]) ? all_libs.js[lib] : [all_libs.js[lib]]);
+});
+
+Object.keys(all_libs.css).forEach(function (lib) {
+  files.push(Array.isArray(all_libs.css[lib]) ? all_libs.css[lib] : [all_libs.css[lib]]);
+});
+
+files = files.flat();
+
+files.forEach(function (file) {
+  let dirname = path.dirname(file).replace('@', '');
+  let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${file} dist/libs/${file.replace('@', '')}`;
 
-all_libs.forEach(function (lib) {
-  let dirname = path.dirname(lib).replace('@', '');
-  let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${lib} dist/libs/${lib.replace('@', '')}`;
   exec(cmd)
 });
diff --git a/js/tabler-charts.js b/js/tabler-charts.js
index 5d47d081c..e201ef75f 100644
--- a/js/tabler-charts.js
+++ b/js/tabler-charts.js
@@ -5,20 +5,20 @@
       const $this = $(this),
         data = $this.attr('data-spark'),
         color = $this.attr('data-spark-color') || 'blue',
+        bgColor = $this.attr('data-spark-color-bg') || 'blue',
         type = $this.attr('data-spark-type') || 'line';
 
       const $div = $('<div/>').html(data);
       $this.append($div);
 
-      let strokeColor = tabler.colors[color],
-        fillColor = tabler.colors[color];
+      let fillColor;
 
       if (type === 'donut' || type === 'pie') {
-        fillColor = [fillColor, tabler.hexToRgbA(fillColor, 0.1)];
+        fillColor = [color, bgColor];
       } else if (type === 'bar') {
-        fillColor = [fillColor];
+        fillColor = [color];
       } else if (type === 'line') {
-        fillColor = tabler.hexToRgbA(fillColor, 0.1);
+        fillColor = bgColor;
       }
 
       $div.peity(type, {
@@ -26,7 +26,7 @@
         height: $this.height(),
         // max: 100,
         // min: 0,
-        stroke: strokeColor,
+        stroke: color,
         strokeWidth: 2,
         fill: fillColor,
         padding: 0.2,
@@ -40,135 +40,134 @@
 charts default configuration
  */
 if (window.Apex) {
-  const borderColor = 'rgba(0, 0, 0, 0.09)';
-  const mutedColor = '#888e9a';
+  // const borderColor = 'rgba(0, 0, 0, 0.09)';
+  // const mutedColor = '#888e9a';
 
-  window.Apex = {
-    chart: {
-      fontFamily: 'inherit',
-      foreColor: 'currentColor',
-      toolbar: {
-        show: false,
-      },
-      zoom: {
-        enabled: false,
-      },
-      animations: {
-        enabled: false,
-      },
-    },
+  // window.Apex = {
+  //   chart: {
+  //     // fontFamily: 'inherit',
+  //     // foreColor: 'currentColor',
+  //     toolbar: {
+  //       show: false,
+  //     },
+  //     zoom: {
+  //       enabled: false,
+  //     },
+  //     animations: {
+  //       enabled: false,
+  //     },
+  //   },
+  //
+  //   grid: {
+  //     show: true,
+  //     borderColor: borderColor,
+  //     padding: {
+  //       right: 0,
+  //       bottom: 0,
+  //         left: 0,
+  //       top: 0,
+  //     },
+  //   },
+  //
+  //   dataLabels: {
+  //     enabled: false,
+  //     dropShadow: {
+  //       enabled: false,
+  //     },
+  //   },
+  //
+  //   plotOptions: {
+  //     pie: {
+  //       customScale: 1,
+  //       expandOnClick: false,
+  //       dataLabels: {
+  //         minAngleToShowLabel: 10,
+  //       },
+  //       donut: {
+  //         size: '80%'
+  //       }
+  //     },
+  //   },
+  //
+  //   stroke: {
+  //     width: 2,
+  //     curve: 'smooth',
+  //     lineCap: "round",
+  //   },
+  //
+  //   fill: {
+  //     type: 'solid',
+  //     opacity: 1,
+  //   },
+  //
+  //   markers: {
+  //     size: 0,
+  //     strokeWidth: 1,
+  //     radius: 2,
+  //     hover: {
+  //       size: 4,
+  //     },
+  //   },
+  //
+  //   legend: {
+  //     show: true,
+  //     fontSize: '14px',
+  //     markers: {
+  //       width: 8,
+  //       height: 8,
+  //     },
+  //     itemMargin: {
+  //       horizontal: 0,
+  //       vertical: 8,
+  //     },
+  //   },
+  //
+  //   title: {
+  //     margin: 0,
+  //     floating: true,
+  //     offsetX: 10,
+  //     style: {
+  //       fontSize: '18px',
+  //     },
+  //   },
+  //
+  //   subtitle: {
+  //     margin: 0,
+  //   },
+  //
+  //   tooltip: {
+  //     fillSeriesColor: false,
+  //   },
 
-    grid: {
-      show: false,
-      position: 'back',
-      borderColor: borderColor,
-      padding: {
-        right: 0,
-        left: 0,
-        bottom: 0,
-        top: 0,
-      },
-    },
-
-    dataLabels: {
-      enabled: false,
-      dropShadow: {
-        enabled: false,
-      },
-    },
-
-    plotOptions: {
-      pie: {
-        customScale: 1,
-        expandOnClick: false,
-        dataLabels: {
-          minAngleToShowLabel: 10,
-        },
-        donut: {
-          size: '80%'
-        }
-      },
-    },
-
-    stroke: {
-      width: 2,
-      curve: 'smooth',
-      lineCap: "round",
-    },
-
-    fill: {
-      type: 'solid',
-      opacity: 1,
-    },
-
-    markers: {
-      size: 0,
-      strokeWidth: 1,
-      radius: 2,
-      hover: {
-        size: 4,
-      },
-    },
-
-    legend: {
-      show: true,
-      fontSize: '14px',
-      markers: {
-        width: 8,
-        height: 8,
-      },
-      itemMargin: {
-        horizontal: 0,
-        vertical: 8,
-      },
-    },
-
-    title: {
-      margin: 0,
-      floating: true,
-      offsetX: 10,
-      style: {
-        fontSize: '18px',
-      },
-    },
-
-    subtitle: {
-      margin: 0,
-    },
-
-    tooltip: {
-      fillSeriesColor: false,
-    },
-
-    xaxis: {
-      labels: {
-        style: {
-          colors: mutedColor,
-          fontSize: '12px',
-        },
-        datetimeFormatter: {
-          year: 'yyyy',
-          month: 'MMM \'yy',
-          day: 'd MMM',
-          hour: 'HH:mm'
-        }
-      },
-      tooltip: {
-        enabled: false,
-      },
-      axisBorder: {
-        color: borderColor,
-        height: 0,
-      },
-      axisTicks: {
-        show: true,
-        height: 4,
-        color: borderColor,
-      },
-    },
-
-    yaxis: {
-      show: false,
-    },
-  };
+    // xaxis: {
+    //   labels: {
+    //     style: {
+    //       colors: mutedColor,
+    //       fontSize: '12px',
+    //     },
+    //     datetimeFormatter: {
+    //       year: 'yyyy',
+    //       month: 'MMM \'yy',
+    //       day: 'd MMM',
+    //       hour: 'HH:mm'
+    //     }
+    //   },
+    //   tooltip: {
+    //     enabled: false,
+    //   },
+    //   axisBorder: {
+    //     color: borderColor,
+    //     height: 0,
+    //   },
+    //   axisTicks: {
+    //     show: true,
+    //     height: 4,
+    //     color: borderColor,
+    //   },
+    // },
+    //
+    // yaxis: {
+    //   show: true,
+    // },
+  // };
 }
diff --git a/js/tabler.js b/js/tabler.js
index 9a514118f..3a6464afb 100644
--- a/js/tabler.js
+++ b/js/tabler.js
@@ -1,29 +1,4 @@
 const tabler = {
-  colorVariation: function(color, variation) {
-    const colorValue = this.colors[color];
-
-    if (colorValue) {
-      switch (variation) {
-        case 'light':
-          return this.mixColors(colorValue, '#ffffff', 70);
-        case 'lighten':
-          return this.mixColors(colorValue, '#ffffff', 30);
-        case 'lightest':
-          return this.mixColors(colorValue, '#ffffff', 10);
-        case 'dark':
-          return this.mixColors(colorValue, '#000000', 80);
-        case 'darken':
-          return this.mixColors(colorValue, '#000000', 40);
-        case 'darkest':
-          return this.mixColors(colorValue, '#000000', 20);
-      }
-
-      return colorValue;
-    }
-
-    throw new Error('Wrong color: ' + color);
-  },
-
   hexToRgbA: function(hex, opacity) {
     let c;
 
@@ -40,40 +15,6 @@ const tabler = {
     throw new Error('Bad Hex');
   },
 
-  mixColors: function(color_1, color_2, weight) {
-    color_1 = color_1.substr(1);
-    color_2 = color_2.substr(1);
-
-    function d2h(d) {
-      return d.toString(16);
-    }
-
-    function h2d(h) {
-      return parseInt(h, 16);
-    }
-
-    weight = typeof weight !== 'undefined' ? weight : 50;
-
-    let color = '#';
-
-    for (let i = 0; i <= 5; i += 2) {
-      let v1 = h2d(color_1.substr(i, 2)),
-        v2 = h2d(color_2.substr(i, 2));
-
-      let val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));
-
-      while (val.length < 2) {
-        val = '0' + val;
-      }
-
-      color += val;
-    }
-
-    return color;
-  },
-
-  colors: (window.tabler_colors || []),
-
   toggleFullscreen: function(elem) {
     elem = elem || document.documentElement;
     if (
diff --git a/pages/_data/charts.yml b/pages/_data/charts.yml
index b4f6ba251..9c6219f5b 100644
--- a/pages/_data/charts.yml
+++ b/pages/_data/charts.yml
@@ -1,6 +1,16 @@
+completion-tasks:
+  type: bar
+  days-labels-count: 7
+  debug: true
+  series:
+    - name: Tasks completion
+      data: [155, 65, 465, 265, 225, 325, 80]
+
+
 tasks-overview:
   type: bar
-  categories: ['Sprint 1','Sprint 2','Sprint 3','Sprint 4','Sprint 5','Sprint 6','Sprint 7','Sprint 8','Sprint 9','Sprint 10','Sprint 11','Sprint 12','Sprint 13','Sprint 14','Sprint 15','Sprint 16','Sprint 17','Sprint 18','Sprint 19','Sprint 20','Sprint 21','Sprint 22','Sprint 23','Sprint 24']
+  debug: true
+  categories: ['Sprint 1', 'Sprint 2', 'Sprint 3', 'Sprint 4', 'Sprint 5', 'Sprint 6', 'Sprint 7', 'Sprint 8', 'Sprint 9', 'Sprint 10', 'Sprint 11', 'Sprint 12', 'Sprint 13', 'Sprint 14', 'Sprint 15', 'Sprint 16', 'Sprint 17', 'Sprint 18', 'Sprint 19', 'Sprint 20', 'Sprint 21', 'Sprint 22', 'Sprint 23', 'Sprint 24']
   series:
     - name: A
       data: [44, 32, 48, 72, 60, 16, 44, 32, 78, 50, 68, 34, 26, 48, 72, 60, 84, 64, 74, 52, 62, 50, 32, 22]
@@ -36,10 +46,10 @@ campaigns:
       color: blue
       data: 44
     - name: Reached
-      color: blue-light
+      color: blue-300
       data: 36
     - name: Opened
-      color: blue-lighten
+      color: blue-100
       data: 18
 
 tasks:
@@ -211,67 +221,6 @@ spline:
       data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
 
 
-spline-rotated:
-  name: Lorem ipsum
-  demo: true
-  type: line
-  spline: true
-  rotated: true
-  hide-legend: true
-  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
-  series:
-    - name: Maximum
-      color: blue
-      data: [11, 8, 15, 18, 19, 17]
-    - name: Minimum
-      color: pink
-      data: [7, 7, 5, 7, 9, 12]
-
-
-bar:
-  name: Lorem ipsum
-  demo: true
-  type: bar
-  hide-legend: true
-  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
-  series:
-    - name: Maximum
-      color: blue
-      data: [11, 8, 15, 18, 19, 17]
-    - name: Minimum
-      color: pink
-      data: [7, 7, 5, 7, 9, 12]
-
-bar-rotated:
-  name: Lorem ipsum
-  demo: true
-  type: bar
-  rotated: true
-  hide-legend: true
-  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
-  series:
-    - name: Maximum
-      color: blue
-      data: [11, 8, 15, 18, 19, 17]
-    - name: Minimum
-      color: pink
-      data: [7, 7, 5, 7, 9, 12]
-
-
-bar-stacked:
-  name: Lorem ipsum
-  demo: true
-  type: bar
-  stacked: true
-  hide-legend: true
-  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
-  series:
-    - name: Maximum
-      color: blue
-      data: [11, 8, 15, 18, 19, 17]
-    - name: Minimum
-      color: pink
-      data: [7, 7, 5, 7, 9, 12]
 
 
 pie:
@@ -283,16 +232,16 @@ pie:
   sparkline: true
   series:
     - name: A
-      color: blue-darker
+      color: blue-700
       data: 63
     - name: B
       color: blue
       data: 44
     - name: C
-      color: blue-light
+      color: blue-300
       data: 12
     - name: D
-      color: blue-lighter
+      color: blue-100
       data: 14
 
 donut:
@@ -306,7 +255,7 @@ donut:
       color: green
       data: 63
     - name: Minimum
-      color: green-light
+      color: green-300
       data: 37
 
 
@@ -361,14 +310,15 @@ new-clients:
   type: line
   days-labels-count: 30
   sparkline: true
-  dashed-history: true
+  stroke-width: [2, 1]
+  stroke-dash: [0, 3]
   hide-legend: true
   series:
     - name: May
       color: blue
       data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 4, 46, 39, 62, 51, 35, 41, 67]
     - name: April
-      color: gray
+      color: gray-600
       data: [93, 54, 51, 24, 35, 35, 31, 67, 19, 43, 28, 36, 62, 61, 27, 39, 35, 41, 27, 35, 51, 46, 62, 37, 44, 53, 41, 65, 39, 37]
 
 active-users:
@@ -408,7 +358,6 @@ traffic-out:
 usd-eur:
   type: line
   days-labels-count: 30
-  auto-min: true
   stroke-curve: straight
   series:
     - name: USD/EUR
@@ -421,11 +370,11 @@ devices:
   hide-legend: true
   series:
     - name: a
-      color: blue-dark
+      color: blue-700
       data: 23
     - name: b
       color: blue
       data: 54
     - name: c
-      color: blue-light
+      color: blue-300
       data: 34
diff --git a/pages/_data/colors.yml b/pages/_data/colors.yml
new file mode 100644
index 000000000..24d89163f
--- /dev/null
+++ b/pages/_data/colors.yml
@@ -0,0 +1,123 @@
+blue: '#206bc4'
+blue-100: '#d2e1f3'
+blue-200: '#a6c4e7'
+blue-300: '#79a6dc'
+blue-400: '#4d89d0'
+blue-500: '#206bc4'
+blue-600: '#1a569d'
+blue-700: '#134076'
+blue-800: '#0d2b4e'
+blue-900: '#061527'
+
+indigo: '#6574cd'
+indigo-100: '#e0e3f5'
+indigo-200: '#c1c7eb'
+indigo-300: '#a3ace1'
+indigo-400: '#8490d7'
+indigo-500: '#6574cd'
+indigo-600: '#515da4'
+indigo-700: '#3d467b'
+indigo-800: '#282e52'
+indigo-900: '#141729'
+
+purple: '#a55eea'
+purple-100: '#eddffb'
+purple-200: '#dbbff7'
+purple-300: '#c99ef2'
+purple-400: '#b77eee'
+purple-500: '#a55eea'
+purple-600: '#844bbb'
+purple-700: '#63388c'
+purple-800: '#42265e'
+purple-900: '#21132f'
+
+pink: '#f66d9b'
+pink-100: '#fde2eb'
+pink-200: '#fbc5d7'
+pink-300: '#faa7c3'
+pink-400: '#f88aaf'
+pink-500: '#f66d9b'
+pink-600: '#c5577c'
+pink-700: '#94415d'
+pink-800: '#622c3e'
+pink-900: '#31161f'
+
+red: '#fa4654'
+red-100: '#fedadd'
+red-200: '#fdb5bb'
+red-300: '#fc9098'
+red-400: '#fb6b76'
+red-500: '#fa4654'
+red-600: '#c83843'
+red-700: '#962a32'
+red-800: '#641c22'
+red-900: '#320e11'
+
+orange: '#ff922b'
+orange-100: '#ffe9d5'
+orange-200: '#ffd3aa'
+orange-300: '#ffbe80'
+orange-400: '#ffa855'
+orange-500: '#ff922b'
+orange-600: '#cc7522'
+orange-700: '#99581a'
+orange-800: '#663a11'
+orange-900: '#331d09'
+
+yellow: '#fab005'
+yellow-100: '#feefcd'
+yellow-200: '#fddf9b'
+yellow-300: '#fcd069'
+yellow-400: '#fbc037'
+yellow-500: '#fab005'
+yellow-600: '#c88d04'
+yellow-700: '#966a03'
+yellow-800: '#644602'
+yellow-900: '#322301'
+
+green: '#5eba00'
+green-100: '#dff1cc'
+green-200: '#bfe399'
+green-300: '#9ed666'
+green-400: '#7ec833'
+green-500: '#5eba00'
+green-600: '#4b9500'
+green-700: '#387000'
+green-800: '#264a00'
+green-900: '#132500'
+
+teal: '#2bcbba'
+teal-100: '#d5f5f1'
+teal-200: '#aaeae3'
+teal-300: '#80e0d6'
+teal-400: '#55d5c8'
+teal-500: '#2bcbba'
+teal-600: '#22a295'
+teal-700: '#1a7a70'
+teal-800: '#11514a'
+teal-900: '#092925'
+
+cyan: '#17a2b8'
+cyan-100: '#d1ecf1'
+cyan-200: '#a2dae3'
+cyan-300: '#74c7d4'
+cyan-400: '#45b5c6'
+cyan-500: '#17a2b8'
+cyan-600: '#128293'
+cyan-700: '#0e616e'
+cyan-800: '#09414a'
+cyan-900: '#052025'
+
+gray: '#adb5bd'
+gray-100: '#f8f9fa'
+gray-200: '#e9ecef'
+gray-300: '#dee2e6'
+gray-400: '#ced4da'
+gray-500: '#adb5bd'
+gray-600: '#868e96'
+gray-700: '#495057'
+gray-800: '#343a40'
+gray-900: '#212529'
+
+border-color: '#dce3e9'
+text-muted: '#8a91a5'
diff --git a/pages/_data/libs.json b/pages/_data/libs.json
index 899d3e094..da96e90ff 100644
--- a/pages/_data/libs.json
+++ b/pages/_data/libs.json
@@ -1,32 +1,37 @@
 {
-  "js": [
-    "jquery/dist/jquery.min.js",
-    "bootstrap/dist/js/bootstrap.bundle.min.js",
-    "autosize/dist/autosize.min.js",
-    "imask/dist/imask.min.js",
-
-    "selectize/dist/js/standalone/selectize.min.js",
-    "apexcharts/dist/apexcharts.min.js",
-    "jqvmap/dist/jquery.vmap.min.js",
-    "jqvmap/dist/maps/jquery.vmap.world.js",
-    "jqvmap/dist/maps/jquery.vmap.usa.js",
-    "jqvmap/dist/maps/continents/jquery.vmap.europe.js",
-    "peity/jquery.peity.min.js",
-    "selectize/dist/js/selectize.min.js",
-
-    "@fullcalendar/core/main.min.js",
-    "@fullcalendar/daygrid/main.min.js",
-    "@fullcalendar/interaction/main.min.js",
-    "@fullcalendar/timegrid/main.min.js",
-    "@fullcalendar/list/main.min.js"
+  "global-libs": [
+    "jquery", "bootstrap"
   ],
-  "css": [
-    "jqvmap/dist/jqvmap.min.css",
-    "selectize/dist/css/selectize.css",
-
-    "@fullcalendar/core/main.min.css",
-    "@fullcalendar/daygrid/main.min.css",
-    "@fullcalendar/timegrid/main.min.css",
-    "@fullcalendar/list/main.min.css"
-  ]
+  "js": {
+    "jquery": "jquery/dist/jquery.min.js",
+    "bootstrap": "bootstrap/dist/js/bootstrap.bundle.min.js",
+    "autosize": "autosize/dist/autosize.min.js",
+    "imask": "imask/dist/imask.min.js",
+    "selectize": "selectize/dist/js/standalone/selectize.min.js",
+    "apexcharts": "apexcharts/dist/apexcharts.min.js",
+    "jqvmap": [
+      "jqvmap/dist/jquery.vmap.min.js",
+      "jqvmap/dist/maps/jquery.vmap.world.js",
+      "jqvmap/dist/maps/jquery.vmap.usa.js",
+      "jqvmap/dist/maps/continents/jquery.vmap.europe.js"
+    ],
+    "peity": "peity/jquery.peity.min.js",
+    "fullcalendar": [
+      "@fullcalendar/core/main.min.js",
+      "@fullcalendar/daygrid/main.min.js",
+      "@fullcalendar/interaction/main.min.js",
+      "@fullcalendar/timegrid/main.min.js",
+      "@fullcalendar/list/main.min.js"
+    ]
+  },
+  "css": {
+    "jqvmap": "jqvmap/dist/jqvmap.min.css",
+    "selectize": "selectize/dist/css/selectize.css",
+    "fullcalendar": [
+      "@fullcalendar/core/main.min.css",
+      "@fullcalendar/daygrid/main.min.css",
+      "@fullcalendar/timegrid/main.min.css",
+      "@fullcalendar/list/main.min.css"
+    ]
+  }
 }
diff --git a/pages/_data/maps.yml b/pages/_data/maps.yml
index 903220127..56d041859 100644
--- a/pages/_data/maps.yml
+++ b/pages/_data/maps.yml
@@ -1,7 +1,7 @@
 world:
   title: World map
   map: world_en
-  values: '{"af":16,"al":11,"dz":158,"ao":85,"ag":1,"ar":351,"am":8,"au":1219,"at":366,"az":52,"bs":7,"bh":21,"bd":105,"bb":3,"by":52,"be":461,"bz":1,"bj":6,"bt":1,"bo":19,"ba":16,"bw":12,"br":2023,"bn":11,"bg":44,"bf":8,"bi":1,"kh":11,"cm":21,"ca":1563,"cv":1,"cf":2,"td":7,"cl":199,"cn":5745,"co":283,"km":0,"cd":12,"cg":11,"cr":35,"ci":22,"hr":59,"cy":22,"cz":195,"dk":304,"dj":1,"dm":0,"do":50,"ec":61,"eg":216,"sv":21,"gq":14,"er":2,"ee":19,"et":30,"fj":3,"fi":231,"fr":2555,"ga":12,"gm":1,"ge":11,"de":3305,"gh":18,"gr":305,"gd":0,"gt":40,"gn":4,"gw":0,"gy":2,"ht":6,"hn":15,"hk":226,"hu":132,"is":12,"in":1430,"id":695,"ir":337,"iq":84,"ie":204,"il":201,"it":2036,"jm":13,"jp":5390,"jo":27,"kz":129,"ke":32,"ki":0,"kr":986,"undefined":5,"kw":117,"kg":4,"la":6,"lv":23,"lb":39,"ls":1,"lr":0,"ly":77,"lt":35,"lu":52,"mk":9,"mg":8,"mw":5,"my":218,"mv":1,"ml":9,"mt":7,"mr":3,"mu":9,"mx":1004,"md":5,"mn":5,"me":3,"ma":91,"mz":10,"mm":35,"na":11,"np":15,"nl":770,"nz":138,"ni":6,"ne":5,"ng":206,"no":413,"om":53,"pk":174,"pa":27,"pg":8,"py":17,"pe":153,"ph":189,"pl":438,"pt":223,"qa":126,"ro":158,"ru":1476,"rw":5,"ws":0,"st":0,"sa":434,"sn":12,"rs":38,"sc":0,"sl":1,"sg":217,"sk":86,"si":46,"sb":0,"za":354,"es":1374,"lk":48,"kn":0,"lc":1,"vc":0,"sd":65,"sr":3,"sz":3,"se":444,"ch":522,"sy":59,"tw":426,"tj":5,"tz":22,"th":312,"tl":0,"tg":3,"to":0,"tt":21,"tn":43,"tr":729,"tm":0,"ug":17,"ua":136,"ae":239,"gb":2258,"us":4624,"uy":40,"uz":37,"vu":0,"ve":285,"vn":101,"ye":30,"zm":15,"zw":5}'
+  values: '{"af":16, "al":11, "dz":158, "ao":85, "ag":1, "ar":351, "am":8, "au":1219, "at":366, "az":52, "bs":7, "bh":21, "bd":105, "bb":3, "by":52, "be":461, "bz":1, "bj":6, "bt":1, "bo":19, "ba":16, "bw":12, "br":2023, "bn":11, "bg":44, "bf":8, "bi":1, "kh":11, "cm":21, "ca":1563, "cv":1, "cf":2, "td":7, "cl":199, "cn":5745, "co":283, "km":0, "cd":12, "cg":11, "cr":35, "ci":22, "hr":59, "cy":22, "cz":195, "dk":304, "dj":1, "dm":0, "do":50, "ec":61, "eg":216, "sv":21, "gq":14, "er":2, "ee":19, "et":30, "fj":3, "fi":231, "fr":2555, "ga":12, "gm":1, "ge":11, "de":3305, "gh":18, "gr":305, "gd":0, "gt":40, "gn":4, "gw":0, "gy":2, "ht":6, "hn":15, "hk":226, "hu":132, "is":12, "in":1430, "id":695, "ir":337, "iq":84, "ie":204, "il":201, "it":2036, "jm":13, "jp":5390, "jo":27, "kz":129, "ke":32, "ki":0, "kr":986, "undefined":5, "kw":117, "kg":4, "la":6, "lv":23, "lb":39, "ls":1, "lr":0, "ly":77, "lt":35, "lu":52, "mk":9, "mg":8, "mw":5, "my":218, "mv":1, "ml":9, "mt":7, "mr":3, "mu":9, "mx":1004, "md":5, "mn":5, "me":3, "ma":91, "mz":10, "mm":35, "na":11, "np":15, "nl":770, "nz":138, "ni":6, "ne":5, "ng":206, "no":413, "om":53, "pk":174, "pa":27, "pg":8, "py":17, "pe":153, "ph":189, "pl":438, "pt":223, "qa":126, "ro":158, "ru":1476, "rw":5, "ws":0, "st":0, "sa":434, "sn":12, "rs":38, "sc":0, "sl":1, "sg":217, "sk":86, "si":46, "sb":0, "za":354, "es":1374, "lk":48, "kn":0, "lc":1, "vc":0, "sd":65, "sr":3, "sz":3, "se":444, "ch":522, "sy":59, "tw":426, "tj":5, "tz":22, "th":312, "tl":0, "tg":3, "to":0, "tt":21, "tn":43, "tr":729, "tm":0, "ug":17, "ua":136, "ae":239, "gb":2258, "us":4624, "uy":40, "uz":37, "vu":0, "ve":285, "vn":101, "ye":30, "zm":15, "zw":5}'
 
 europe:
   title: Map of Europe
diff --git a/pages/_includes/layout/css.html b/pages/_includes/layout/css.html
index c34c5f648..7cc1f8bea 100644
--- a/pages/_includes/layout/css.html
+++ b/pages/_includes/layout/css.html
@@ -1,8 +1,10 @@
-{% if site.data.libs %}
-   <!-- Libs CSS -->
-   {% for lib in site.data.libs.css %}
-   <link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet"/>
-   {% endfor %}
+{% if site.data.libs.css %}
+<!-- Libs CSS -->
+{% for lib in site.data.libs.css %}
+{% for file in lib[1] %}
+<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet"/>
+{% endfor %}
+{% endfor %}
 {% endif %}
 
 <!-- Tabler Core -->
diff --git a/pages/_includes/layout/js-capture.html b/pages/_includes/layout/js-capture.html
index d9e388d2f..2c99d1603 100644
--- a/pages/_includes/layout/js-capture.html
+++ b/pages/_includes/layout/js-capture.html
@@ -1,3 +1,3 @@
 {% removeemptylines %}
-{{ site.capture_global.scripts }}
+{{ site.captured_global.scripts }}
 {% endremoveemptylines %}
diff --git a/pages/_includes/layout/js.html b/pages/_includes/layout/js.html
index c228f044d..367d4bb12 100644
--- a/pages/_includes/layout/js.html
+++ b/pages/_includes/layout/js.html
@@ -1,14 +1,12 @@
-<script>
-	window.tabler_colors = { {% for color in site.colors %}
-	'{{ color[0] }}': '{{ color[1].hex }}',{% endfor %}
-	};
-</script>
-
-{% if site.data.libs %}
-   <!-- Libs JS -->
-   {% for lib in site.data.libs.js %}
-   <script src="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}"></script>
-   {% endfor %}
+{% if site.data.libs.js and site.captured_libs %}
+<!-- Libs JS -->
+{% for lib in site.data.libs.js %}
+{% if site.captured_libs contains lib[0] or site.data.libs.global-libs contains lib[0] %}
+{% for file in lib[1] %}
+<script src="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}?{{ site.time | date: '%s' }}"></script>
+{% endfor %}
+{% endif %}
+{% endfor %}
 {% endif %}
 
 <!-- Tabler Core -->
diff --git a/pages/_includes/ui/chart.html b/pages/_includes/ui/chart.html
index 9c30e075d..3fc5b6c10 100644
--- a/pages/_includes/ui/chart.html
+++ b/pages/_includes/ui/chart.html
@@ -4,147 +4,158 @@
 {% assign class = include.class | default: '' %}
 
 {% if include['size'] == 'sm' %}
-   {% assign class = class | append: ' chart-sm' | strip %}
-   {% assign height = 2.5 %}
+{% assign class = class | append: ' chart-sm' | strip %}
+{% assign height = 2.5 %}
 {% endif %}
 
 {% if data %}
-<div id="chart-{{ id }}"{% if class %} class="{{ class }}"{% endif %}></div>
+<div id="chart-{{ id }}" {% if class %} class="{{ class }}" {% endif %}{% if data.debug %}
+     style="outline: 1px solid red" {% endif %}></div>
 
+{% append_lib apexcharts %}
 {% capture script %}
 <script>
-   document.addEventListener("DOMContentLoaded", function(event) {
-      {% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
+	// @formatter:off
+	document.addEventListener("DOMContentLoaded", function (event) {
+		{% if jekyll.environment == 'development' %}
+		window.tabler_chart = window.tabler_chart || {};
+		{% endif %}
 
-      window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
-         chart: {
-            type: '{{ data.type }}',
-            height: {{ height | times: 16 }},
-         {% if data.sparkline %}
-         sparkline: {
-            enabled: true
-         },
-         {% endif %}
-         {% if data.stacked %}
-         stacked: true,
-         {% endif %}
-         },
+		window.ApexCharts && ({% if jekyll.environment == 'development' %}
+		window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}
+		new ApexCharts(document.getElementById('chart-{{ id }}'), {
+			chart: {
+				type: "{{ data.type }}",
+				{% if data.title %}
+				fontFamily: 'inherit',
+				{% endif %}
+				height: {{ height | times: 16 }},
 
-         {% if data.type == 'area' %}
-         fill: {
-            opacity: .16
-         },
-         {% endif %}
+				{% if data.sparkline %}
+				sparkline: {
+					enabled: true
+				},
+				{% else %}
+				toolbar: {
+					show: true,
+				},
+				{% endif %}
 
-         {% if data.title %}
-         title: {
-            text: '{{ data.title | escape }}'
-         },
-         {% endif %}
+				{% unless data.animations %}
+				animations: {
+					enabled: false
+				},
+				{% endunless %}
 
-         {% if data.dashed-history or data.stroke-curve %}
-         stroke: {
-            {% if data.dashed-history %}
-            width: [2, 1],
-               dashArray: [0, 3],
-            {% endif %}
-            {% if data.stroke-curve %}
-            curve: '{{ data.stroke-curve }}',
-            {% endif %}
-         },
-         {% endif %}
+				{% if data.stacked %}
+				stacked: true,
+				{% endif %}
+			},
 
-         {% if data.series %}
-         {% if data.type == 'pie' or data.type == 'donut' or data.type == 'radialBar' %}
-         series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
-         labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %},{% endunless %}{% endfor %}],
+			fill: {
+				opacity: {% if data.type == 'area' %}.16{% else %}1{% endif %},
+				{% if data.type == 'area' %}type: 'solid'{% endif %}
+			},
 
-         {% else %}
-         series: [{% for serie in data.series %}{
-            name: '{{ serie.name }}',
-            data: [{{ serie.data | join: ', '}}]
-         }{% unless forloop.last %},{% endunless %}{% endfor %}],
-         {% endif %}
-         {% endif %}
+			{% if data.title %}
+			title: {
+				text: "{{ data.title | escape }}",
+				margin: 0,
+				floating: true,
+				offsetX: 10,
+				style: {
+					fontSize: '18px',
+				},
+			},
+			{% endif %}
 
-         {% if data.show-grid %}
-         grid: {
-            show: true,
-         },
-         {% endif %}
+			{% if data.type == 'area' or data.type == 'line' %}
+			stroke: {
+				width: {% if data.stroke-width %}[{{ data.stroke-width | join: ', '}}]{% else %}2{% endif %},
+				{% if data.stroke-dash %}dashArray: [{{ data.stroke-dash | join: ', '}}],{% endif %}
+				lineCap: "round",
+				curve: "{{ data.stroke-curve | default: 'smooth' }}",
+			},
+			{% endif %}
 
-         {% if data.show-data-labels %}
-         dataLabels: {
-            enabled: true,
-         },
-         {% endif %}
+			{% if data.series %}
+			{% if data.type == 'pie' or data.type == 'donut' or data.type == 'radialBar' %}
+			series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
+			labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
 
-         {% if data.categories or data.days-labels-count %}
-         xaxis: {
-            {% if data.categories %}categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],{% endif %}
-            {% if data.days-labels-count %}type: 'datetime',{% endif %}
-         },
-         {% endif %}
+			{% else %}series: [{% for serie in data.series %}{
+				name: "{{ serie.name }}",
+				data: [{{ serie.data | join: ', ' }}]
+			}{% unless forloop.last %},{% endunless %}{% endfor %}],
+			{% endif %}
+			{% endif %}
 
-         {% if data.auto-min %}
-         yaxis: {
-            min: function(min) { return min },
-         },
-         {% endif %}
+			{% if data.show - grid %}
+			grid: {
+				show: true,
+			},
+			{% endif %}
 
-         {% if data.days-labels-count %}
-         labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n+1}`),
-         {% endif %}
+			{% if data.show-data-labels %}
+			dataLabels: {
+				enabled: true,
+			},
+			{% endif %}
 
-         {% if data.rotated %}
-         plotOptions: {
-            bar: {
-               horizontal: true,
-            }
-         },
-         {% endif %}
+			{% if data.categories or data.days-labels-count %}
+			xaxis: {
+				{% if data.categories %}
+				categories: [{% for category in data.categories %}"{{ category }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
+			{% endif %}
 
-         {% if data.series %}
-         colors: [
-            {% for serie in data.series %}
-            {{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
-         ],
-         {% endif %}
+			{% if data.days-labels-count %}
+				type: 'datetime', {% endif %}
+			},
+			{% endif %}
 
-         {% if data.hide-legend %}
-         legend: {
-            show: false, //hide legend
-         },
-         {% endif %}
+			{% if data.days-labels-count %}
+			labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n + 1}`),
+			{% endif %}
 
-         {% if data.hide-tooltip %}
-         tooltip: {
-            enabled: false
-         },
-         {% endif %}
+			{% if data.series %}
+			colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'blue' %}"{{ color | tabler_color }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
+			{% endif %}
 
-         {% if data.hide-points %}
-         point: {
-            show: false
-         },
-         {% endif %}
+			{% if data.hide-legend %}
+			legend: {
+				show: false,
+			},
+			{% endif %}
 
-         {% if data.show-markers %}
-         markers: {
-            size: 2
-         },
-         {% endif %}
-      })).render();
-   });
+			{% if data.hide-tooltip %}
+			tooltip: {
+				enabled: false
+			},
+			{% endif %}
+
+			{% if data.hide-points %}
+			point: {
+				show: false
+			},
+			{% endif %}
+
+			{% if data.show-markers %}
+			markers: {
+				size: 2
+			},
+			{% endif %}
+		})).render();
+	});
+	// @formatter:on
 </script>
 {% endcapture %}
 
 {% if include.show-scripts %}
-   {{ script }}
+{{ script }}
 {% else %}
-   {% capture_global scripts %}
-      {{ script }}
-   {% endcapture_global %}
+{% capture_global scripts %}
+{{ script }}
+{% endcapture_global %}
 {% endif %}
 
 {% endif %}
diff --git a/pages/_includes/ui/map.html b/pages/_includes/ui/map.html
index 4702b4db8..a2f6fec51 100644
--- a/pages/_includes/ui/map.html
+++ b/pages/_includes/ui/map.html
@@ -5,6 +5,8 @@
 
 {% if data %}
 <div id="map-{{ id }}" style="height: {{ height }}rem"></div>
+
+{% append_lib jqvmap %}
 {% capture script %}
 <script>
 	{% if jekyll.environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
@@ -17,7 +19,8 @@
 			borderColor: 'transparent',
 			{% if data.zoom %}enableZoom: true,{% endif %}
 			{% if data.values %}
-			scaleColors: [tabler.colorVariation('{{ color }}', 'lightest'), tabler.colors.{{ color }}],
+	      {% assign color-light = color | append: "-100" %}
+			scaleColors: ["{{ color | tabler_color: '100' }}", "{{ color | tabler_color }}"],
 			normalizeFunction: 'polynomial',
 			values: (chart_data = {{ data.values }}),
 			onLabelShow: function (event, label, code) {
diff --git a/pages/_includes/ui/sparkline.html b/pages/_includes/ui/sparkline.html
index a233e70f7..d32f65934 100644
--- a/pages/_includes/ui/sparkline.html
+++ b/pages/_includes/ui/sparkline.html
@@ -4,7 +4,8 @@
 {% assign square = true %}
 {% endif %}
 
-<div class="sparkline{% if square %} sparkline-square{% endif %}{% if include.wide %} sparkline-wide{% endif %}" data-spark="{{ include.data }}" data-spark-type="{{  include.type }}" {% if include.color %}data-spark-color="{{ include.color }}"{% endif %}>
+{% append_lib peity %}
+<div class="sparkline{% if square %} sparkline-square{% endif %}{% if include.wide %} sparkline-wide{% endif %}" data-spark="{{ include.data }}" data-spark-type="{{  include.type }}" {% if include.color %}data-spark-color="{{ include.color | tabler_color }}" data-spark-color-bg="{{ include.color | tabler_color: '100' }}"{% endif %}>
 	{% if include.label %}
 	<div class="sparkline-label">
 		{{ include.label }}
diff --git a/pages/_layouts/base.html b/pages/_layouts/base.html
index 87de7e286..1a53dcb03 100644
--- a/pages/_layouts/base.html
+++ b/pages/_layouts/base.html
@@ -7,8 +7,8 @@
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <meta http-equiv="Content-Language" content="en"/>
 
-   <meta name="msapplication-TileColor" content="{{ site.colors.blue.hex }}"/>
-   <meta name="theme-color" content="{{ site.colors.blue.hex }}"/>
+   <meta name="msapplication-TileColor" content="{{ site.data.colors.blue }}"/>
+   <meta name="theme-color" content="{{ site.data.colors.blue }}"/>
 
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
@@ -37,7 +37,7 @@
 
 	{{ content }}
 
-	{% include_cached layout/js.html %}
+	{% include layout/js.html %}
 	{% include layout/js-capture.html %}
 
 	{% if site.debug and jekyll.environment == 'development' %}
diff --git a/pages/_plugins/jekyll-capture.rb b/pages/_plugins/jekyll-capture.rb
index 71b8fd0ae..f152c89f8 100644
--- a/pages/_plugins/jekyll-capture.rb
+++ b/pages/_plugins/jekyll-capture.rb
@@ -1,38 +1,54 @@
 module Jekyll
-
   module Tags
-
     class CaptureGlobal < Liquid::Block
-
       def initialize(tag_name, text, tokens)
         super
         @text = text.strip
       end
 
       def render(context)
-        if $capture_global[@text] === nil
-          $capture_global[@text] = '';
+        if $captured_global[@text] === nil
+          $captured_global[@text] = '';
         end
 
-        $capture_global[@text] += super.strip + "\n\n"
+        $captured_global[@text] += super.strip + "\n\n"
 
         ''
       end
+    end
 
+    class CaptureScripts < Liquid::Tag
+      def initialize(tag_name, text, tokens)
+        super
+        @text = text.strip
+      end
+
+      def render(context)
+        unless $captured_libs.include? @text
+          $captured_libs.push(@text)
+        end
+
+        ''
+      end
     end
   end
 
   Jekyll::Hooks.register :site, :after_init do |page, jekyll|
-    $capture_global = {}
+    $captured_global = {}
+    $captured_libs = []
   end
 
   Jekyll::Hooks.register :pages, :pre_render do |page, jekyll|
-    jekyll.site['capture_global'] = $capture_global
+    jekyll.site['captured_global'] = $captured_global
+    jekyll.site['captured_libs'] = $captured_libs
   end
 
   Jekyll::Hooks.register :pages, :post_render do |page, jekyll|
-    $capture_global = {}
+    $captured_global = {}
+    $captured_libs = []
   end
 end
 
 Liquid::Template.register_tag('capture_global', Jekyll::Tags::CaptureGlobal)
+Liquid::Template.register_tag('append_lib', Jekyll::Tags::CaptureScripts)
+
diff --git a/pages/_plugins/jekyll-filters.rb b/pages/_plugins/jekyll-filters.rb
index 8b2423f06..b8e64d9ef 100644
--- a/pages/_plugins/jekyll-filters.rb
+++ b/pages/_plugins/jekyll-filters.rb
@@ -69,16 +69,6 @@ module Jekyll
     end
 
 
-    def tabler_js_color(color)
-      color = color.split('-')
-
-      if color.size == 2
-        'tabler.colorVariation("'+ color[0] + '", "'+ color[1] + '")'
-      else
-        'tabler.colors["'+ color[0] + '"]'
-      end
-    end
-
     def replace_regex(input, reg_str, repl_str)
       re = Regexp.new reg_str
 
@@ -89,6 +79,15 @@ module Jekyll
       r, g, b = color.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/).captures
       "rgb(#{r.hex}, #{g.hex}, #{b.hex})"
     end
+
+    def tabler_color(color, variation = false)
+      if variation
+        color = color + '-' + variation
+      end
+
+      Jekyll.sites.first.data['colors'][color]
+    end
+
   end
 end
 
diff --git a/pages/tmp.html b/pages/tmp.html
index 3fce34bf3..f9cafe51d 100644
--- a/pages/tmp.html
+++ b/pages/tmp.html
@@ -3,6 +3,13 @@ tmp: true
 ---
 
 <div class="row">
+	<div class="col-md-6 col-lg-4">
+		<div class="card">
+			<div class="card-body">
+				{% include ui/chart.html chart-id="completion-tasks" height=15 %}
+			</div>
+		</div>
+	</div>
    <div class="col-12">
       <div class="card">
          <div class="card-body">
diff --git a/scss/_debug.scss b/scss/_debug.scss
new file mode 100644
index 000000000..71752ef9a
--- /dev/null
+++ b/scss/_debug.scss
@@ -0,0 +1,32 @@
+$debug: false;
+
+@if $debug {
+  $colors: ("blue": $blue, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "green": $green, "teal": $teal, "cyan": $cyan);
+
+  @each $name, $color in $colors {
+    @debug ("#{$name}: '#{$color}'");
+    @debug ("#{$name}-100: '#{tint-color($color, 8)}'");
+    @debug ("#{$name}-200: '#{tint-color($color, 6)}'");
+    @debug ("#{$name}-300: '#{tint-color($color, 4)}'");
+    @debug ("#{$name}-400: '#{tint-color($color, 2)}'");
+    @debug ("#{$name}-500: '#{$color}'");
+    @debug ("#{$name}-600: '#{shade-color($color, 2)}'");
+    @debug ("#{$name}-700: '#{shade-color($color, 4)}'");
+    @debug ("#{$name}-800: '#{shade-color($color, 6)}'");
+    @debug ("#{$name}-900: '#{shade-color($color, 8)}'");
+  }
+
+  @debug ("gray: '#{$gray-500}'");
+  @debug ("gray-100: '#{$gray-100}'");
+  @debug ("gray-200: '#{$gray-200}'");
+  @debug ("gray-300: '#{$gray-300}'");
+  @debug ("gray-400: '#{$gray-400}'");
+  @debug ("gray-500: '#{$gray-500}'");
+  @debug ("gray-600: '#{$gray-600}'");
+  @debug ("gray-700: '#{$gray-700}'");
+  @debug ("gray-800: '#{$gray-800}'");
+  @debug ("gray-900: '#{$gray-900}'");
+}
+
+@debug ("border-color: '#{$border-color}'");
+@debug ("text-muted: '#{$text-muted}'");
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 197e01a1c..e88435a4a 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -14,6 +14,8 @@ $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
 $icon-fonts: () !default;
 
 // COLORS
+$theme-color-interval: 10% !default;
+
 $light-black: rgba(0, 0, 0, .4) !default;
 $light-white: rgba(255, 255, 255, .4) !default;
 $min-black: rgba(135, 150, 165, .032) !default;
diff --git a/scss/mixins/_functions.scss b/scss/mixins/_functions.scss
index 342f9e7e4..77782a410 100644
--- a/scss/mixins/_functions.scss
+++ b/scss/mixins/_functions.scss
@@ -1,12 +1,12 @@
-@function alpha-attribute($color, $background) {
-  $percent: alpha($color) * 100%;
-  $opaque: opacify($color, 1);
-
-  @return mix($opaque, $background, $percent);
-}
+//@function alpha-attribute($color, $background) {
+//  $percent: alpha($color) * 100%;
+//  $opaque: opacify($color, 1);
+//
+//  @return mix($opaque, $background, $percent);
+//}
 
 @function theme-color-lighter($color) {
-  @return rgba($color, .2);
+  @return tint-color($color, 8);
 }
 
 @function str-replace($string, $search, $replace: "") {
diff --git a/scss/tabler.scss b/scss/tabler.scss
index 2fa16a663..66b815617 100644
--- a/scss/tabler.scss
+++ b/scss/tabler.scss
@@ -73,3 +73,7 @@
 
 @import "dark";
 @import "rtl";
+
+@import "debug";
+
+
diff --git a/scss/utils/_colors.scss b/scss/utils/_colors.scss
index c51cbb25b..3c9c041df 100644
--- a/scss/utils/_colors.scss
+++ b/scss/utils/_colors.scss
@@ -5,12 +5,10 @@ COLORS VARIATIONS
  */
 @if $enable-color-hues {
   @each $color, $value in $colors {
-    .bg-#{$color}-lightest { background: mix($value, #fff, 10%); }
     .bg-#{$color}-lighter { background: mix($value, #fff, 30%); }
     .bg-#{$color}-light { background: mix($value, #fff, 70%); }
     .bg-#{$color}-dark { background: mix($value, #000, 80%); }
     .bg-#{$color}-darker { background: mix($value, #000, 40%); }
-    .bg-#{$color}-darkest { background: mix($value, #000, 20%); }
   }
 }