move SCSS variables to CSS variables (#1214)

tabler · Aug 31, 2022 · b4a078f · b4a078f
1 parent fa4afb0
commit b4a078f
Show file tree

Hide file tree

Showing 63 changed files with 463 additions and 400 deletions.
diff --git a/src/js/src/tabler.js b/src/js/src/tabler.js
@@ -0,0 +1,17 @@
+export const prefix = 'tblr-'
+
+export const hexToRgba = (hex, opacity) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+
+  return result ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${opacity})` : null
+}
+
+export const getColor = (color, opacity = 1) => {
+  const c = getComputedStyle(document.documentElement).getPropertyValue(`--${prefix}${color}`).trim()
+
+  if (opacity !== 1) {
+	 return hexToRgba(c, opacity)
+  }
+
+  return c
+}
diff --git a/src/js/tabler.js b/src/js/tabler.js
@@ -9,5 +9,7 @@ import './src/switch-icon';
 import './src/tab';
 import './src/toast';
 import * as bootstrap from 'bootstrap';
+import * as tabler from './src/tabler';
 
 window.bootstrap = bootstrap;
+window.tabler = tabler;
diff --git a/src/pages/_data/charts.yml b/src/pages/_data/charts.yml
@@ -4,7 +4,7 @@ active-users-2:
   datetime: true
   series:
     - name: Mobile
-      color: blue
+      color: primary
       data: [ 4164, 4652, 4817, 4841, 4920, 5439, 5486, 5498, 5512, 5538, 5841, 5877, 6086, 6146, 6199, 6431, 6704, 7939, 8127, 8296, 8322, 8389, 8411, 8502, 8868, 8977, 9273, 9325, 9345, 9430 ]
     - name: Desktop
       color: azure
@@ -20,13 +20,15 @@ demo-pie:
   legend: true
   series:
     - name: Direct
-      color: blue
+      color: primary
       data: 44
     - name: Affilliate
-      color: blue-300
+      color: primary
+      color-opacity: .8
       data: 55
     - name: E-mail
-      color: blue-100
+      color: primary
+      color-opacity: .6
       data: 12
     - name: Other
       color: gray-300
@@ -53,7 +55,7 @@ demo-bar:
       color: red
       data: [ 9, 7, 5, 8, 6, 9, 4 ]
     - name: Magical notebook
-      color: blue
+      color: primary
       data: [ 25, 12, 19, 32, 25, 24, 10 ]
 
 demo-area:
@@ -62,7 +64,7 @@ demo-area:
   datetime: true
   series:
     - name: series1
-      color: blue
+      color: primary
       data: [ 56, 40, 39, 47, 34, 48, 44 ]
     - name: series2
       color: purple
@@ -81,7 +83,7 @@ demo-line:
       color: green
       data: [ 59, 80, 61, 66, 70, 84, 87, 64, 94, 56, 55, 67 ]
     - name: Total Visits
-      color: blue
+      color: primary
       data: [ 53, 51, 52, 41, 46, 60, 45, 43, 30, 50, 58, 59 ]
 
 social-referrals:
@@ -111,13 +113,15 @@ mentions:
   series:
     - name: Web
       data: [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 2, 12, 5, 8, 22, 6, 8, 6, 4, 1, 8, 24, 29, 51, 40, 47, 23, 26, 50, 26, 41, 22, 46, 47, 81, 46, 6]
-      color: blue
+      color: primary
     - name: Social
       data: [2, 5, 4, 3, 3, 1, 4, 7, 5, 1, 2, 5, 3, 2, 6, 7, 7, 1, 5, 5, 2, 12, 4, 6, 18, 3, 5, 2, 13, 15, 20, 47, 18, 15, 11, 10, 0]
-      color: blue-300
+      color: primary
+      color-opacity: .8
     - name: Other
       data: [2, 9, 1, 7, 8, 3, 6, 5, 5, 4, 6, 4, 1, 9, 3, 6, 7, 5, 2, 8, 4, 9, 1, 2, 6, 7, 5, 1, 8, 3, 2, 3, 4, 9, 7, 1, 6]
-      color: green-200
+      color: green
+      color-opacity: .8
 
 completion-tasks:
   demo: true
@@ -201,13 +205,15 @@ campaigns:
   sparkline: true
   series:
     - name: Total Sent
-      color: blue
+      color: primary
       data: 44
     - name: Reached
-      color: blue-300
+      color: primary
+      color-opacity: .8
       data: 36
     - name: Opened
-      color: blue-100
+      color: primary
+      color-opacity: .6
       data: 18
 
 tasks:
@@ -221,7 +227,7 @@ tasks:
   hide-tooltip: true
   series:
     - name: 'New'
-      color: blue
+      color: primary
       data: [0, 0, 1, 2, 21, 9, 12, 10, 31, 13, 65, 10, 12, 6, 4, 3, 0]
     - name: 'Completed'
       color: lime
@@ -239,15 +245,15 @@ development-activity:
   datetime: true
   series:
     - name: 'Purchases'
-      color: blue
+      color: primary
       data: [3, 5, 4, 6, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 8, 4, 14, 30, 17, 19, 15, 14, 25, 32, 40, 55, 60, 48, 52, 70]
 
 uptime:
   type: area
   datetime: true
   series:
     - name: 'Uptime'
-      color: blue
+      color: primary
       data: [ 150, 160, 170, 161, 167, 162, 161, 152, 141, 144, 154, 166, 176, 187, 198, 210, 196, 207, 200, 187, 192, 204, 193, 204, 208, 196, 193, 178, 191, 204, 218, 211, 218, 216, 201, 197, 190, 179, 172, 158, 159, 147, 152, 152, 144, 137, 136, 123, 112, 99, 100, 95, 105, 116, 125, 124, 133, 129, 116, 119, 109, 114, 115, 111, 96, 104, 104, 102, 116, 126, 117, 130, 124, 126, 131, 143, 130, 116, 118, 122, 132, 126, 136, 123, 112, 116, 113, 113, 109, 99, 100, 95, 83, 79, 64, 79, 81, 94, 99, 97, 83, 71, 75, 69, 71, 75, 84, 90, 100, 96, 108, 102, 116, 112, 112, 102, 115, 120, 118, 118 ]
 
 uptime-incidents:
@@ -267,7 +273,7 @@ line:
       color: orange
       data: [2, 8, 6, 7, 14, 11]
     - name: Marketing
-      color: blue
+      color: primary
       data: [5, 15, 11, 15, 21, 25]
     - name: Sales
       color: green
@@ -283,7 +289,7 @@ line-stroke:
       color: orange
       data: [8, 10, 11, 12, 20, 27, 30]
     - name: Marketing
-      color: blue
+      color: primary
       data: [3, 16, 17, 19, 20, 30, 30]
     - name: Sales
       color: green
@@ -307,7 +313,7 @@ temperature:
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
   series:
     - name: Tokyo
-      color: blue
+      color: primary
       data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
     - name: London
       color: green
@@ -320,7 +326,7 @@ area:
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
   series:
     - name: Maximum
-      color: blue
+      color: primary
       data: [11, 8, 15, 18, 19, 17]
     - name: Minimum
       color: pink
@@ -334,7 +340,7 @@ area-spline:
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
   series:
     - name: Maximum
-      color: blue
+      color: primary
       data: [11, 8, 15, 18, 19, 17]
     - name: Minimum
       color: pink
@@ -349,7 +355,7 @@ area-spline-stacked:
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
   series:
     - name: Maximum
-      color: blue
+      color: primary
       data: [11, 8, 15, 18, 19, 17]
     - name: Minimum
       color: pink
@@ -364,7 +370,7 @@ spline:
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
   series:
     - name: Hestavollane
-      color: blue
+      color: primary
       data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
     - name: Vik
       color: green
@@ -376,16 +382,19 @@ pie:
   sparkline: true
   series:
     - name: A
-      color: blue-700
+      color: primary
       data: 63
     - name: B
-      color: blue
+      color: primary
+      color-opacity: .8
       data: 44
     - name: C
-      color: blue-300
+      color: primary
+      color-opacity: .6
       data: 12
     - name: D
-      color: blue-100
+      color: primary
+      color-opacity: .4
       data: 14
 
 donut:
@@ -396,7 +405,8 @@ donut:
       color: green
       data: 63
     - name: Minimum
-      color: green-300
+      color: green
+      color-opacity: .8
       data: 37
 
 
@@ -406,7 +416,7 @@ scatter:
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
   series:
     - name: Maximum
-      color: blue
+      color: primary
       data: [11, 8, 15, 18, 19, 17]
     - name: Minimum
       color: pink
@@ -432,7 +442,7 @@ combination:
       color: green
       data: [300, 200, 160, 400, 250, 250]
     - name: Sales
-      color: blue
+      color: primary
       data: [200, 130, 90, 240, 130, 220]
 
 revenue-bg:
@@ -451,7 +461,7 @@ new-clients:
   stroke-dash: [0, 3]
   series:
     - name: May
-      color: blue
+      color: primary
       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-600