diff --git a/src/js/src/tabler.js b/src/js/src/tabler.js
new file mode 100644
index 000000000..2439558ab
--- /dev/null
+++ 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
+}
\ No newline at end of file
diff --git a/src/js/tabler.js b/src/js/tabler.js
index fa7911c19..916237191 100644
--- 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
index 916671ec1..0427e4015 100644
--- 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,7 +245,7 @@ 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:
@@ -247,7 +253,7 @@ uptime:
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
diff --git a/src/pages/_data/colors.yml b/src/pages/_data/colors.yml
index 2787005db..ce2bed31b 100644
--- a/src/pages/_data/colors.yml
+++ b/src/pages/_data/colors.yml
@@ -1,145 +1,145 @@
-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'
-
-azure: '#45aaf2'
-azure-100: '#daeefc'
-azure-200: '#b5ddfa'
-azure-300: '#8fccf7'
-azure-400: '#6abbf5'
-azure-500: '#45aaf2'
-azure-600: '#3788c2'
-azure-700: '#296691'
-azure-800: '#1c4461'
-azure-900: '#0e2230'
-
-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: '#cd201f'
-red-100: '#f5d2d2'
-red-200: '#eba6a5'
-red-300: '#e17979'
-red-400: '#d74d4c'
-red-500: '#cd201f'
-red-600: '#a41a19'
-red-700: '#7b1313'
-red-800: '#520d0c'
-red-900: '#290606'
-
-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'
-
-lime: '#94d82d'
-lime-100: '#eaf7d5'
-lime-200: '#d4efab'
-lime-300: '#bfe881'
-lime-400: '#a9e057'
-lime-500: '#94d82d'
-lime-600: '#76ad24'
-lime-700: '#59821b'
-lime-800: '#3b5612'
-lime-900: '#1e2b09'
-
-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: '#cbcfd6'
-gray-100: '#f5f7fb'
-gray-200: '#f1f3f8'
-gray-300: '#e9ecf1'
-gray-400: '#dee1e7'
-gray-500: '#cbcfd6'
-gray-600: '#a8aeb7'
-gray-700: '#7a828f'
-gray-800: '#545d6d'
-gray-900: '#354052'
+#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'
+#
+#azure: '#45aaf2'
+#azure-100: '#daeefc'
+#azure-200: '#b5ddfa'
+#azure-300: '#8fccf7'
+#azure-400: '#6abbf5'
+#azure-500: '#45aaf2'
+#azure-600: '#3788c2'
+#azure-700: '#296691'
+#azure-800: '#1c4461'
+#azure-900: '#0e2230'
+#
+#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: '#cd201f'
+#red-100: '#f5d2d2'
+#red-200: '#eba6a5'
+#red-300: '#e17979'
+#red-400: '#d74d4c'
+#red-500: '#cd201f'
+#red-600: '#a41a19'
+#red-700: '#7b1313'
+#red-800: '#520d0c'
+#red-900: '#290606'
+#
+#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'
+#
+#lime: '#94d82d'
+#lime-100: '#eaf7d5'
+#lime-200: '#d4efab'
+#lime-300: '#bfe881'
+#lime-400: '#a9e057'
+#lime-500: '#94d82d'
+#lime-600: '#76ad24'
+#lime-700: '#59821b'
+#lime-800: '#3b5612'
+#lime-900: '#1e2b09'
+#
+#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: '#cbcfd6'
+#gray-100: '#f5f7fb'
+#gray-200: '#f1f3f8'
+#gray-300: '#e9ecf1'
+#gray-400: '#dee1e7'
+#gray-500: '#cbcfd6'
+#gray-600: '#a8aeb7'
+#gray-700: '#7a828f'
+#gray-800: '#545d6d'
+#gray-900: '#354052'
border-color: 'rgba(110, 117, 130, 0.2)'
text-muted: '#6e7582'
diff --git a/src/pages/_data/maps-vector.yml b/src/pages/_data/maps-vector.yml
index eae74e33f..368fe660f 100644
--- a/src/pages/_data/maps-vector.yml
+++ b/src/pages/_data/maps-vector.yml
@@ -1,13 +1,13 @@
world:
title: World map
map: world
- color: blue
+ color: primary
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, "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 }'
world-merc:
title: World map
map: world_merc
- color: blue
+ color: primary
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, "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 }'
@@ -39,7 +39,7 @@ world-markers:
world-lines:
title: Map with markers
map: world_merc
- color: blue
+ color: primary
lines:
- from: Russia
to: Greenland
diff --git a/src/pages/_docs/avatars.md b/src/pages/_docs/avatars.md
index 9440355e5..419c9bede 100644
--- a/src/pages/_docs/avatars.md
+++ b/src/pages/_docs/avatars.md
@@ -63,7 +63,7 @@ Customize the color of the avatars' background. You can click [here]({% docs_url
{% include ui/avatar.html placeholder="AB" color="green" %}
{% include ui/avatar.html placeholder="CD" color="red" %}
{% include ui/avatar.html placeholder="EF" color="yellow" %}
-{% include ui/avatar.html placeholder="GH" color="blue" %}
+{% include ui/avatar.html placeholder="GH" color="primary" %}
{% include ui/avatar.html placeholder="IJ" color="purple" %}
{% endcapture %}
{% include example.html code=code centered=true %}
diff --git a/src/pages/_docs/switch-icon.md b/src/pages/_docs/switch-icon.md
index 9c2d0b9a8..67b06d833 100644
--- a/src/pages/_docs/switch-icon.md
+++ b/src/pages/_docs/switch-icon.md
@@ -10,7 +10,7 @@ banner: icons
To replace the icons, all should add `active` class to the `switch-icon` component.
{% capture code %}
-{% include ui/switch-icon.html icon="circle" icon-b="square" icon-b-color="blue" %}
+{% include ui/switch-icon.html icon="circle" icon-b="square" icon-b-color="primary" %}
{% endcapture %}
{% include example.html code=code wrapper="d-flex space-x-2" %}
@@ -19,7 +19,7 @@ To replace the icons, all should add `active` class to the `switch-icon` compone
You can also add a fancy animation to add variety to your button. See demo below:
{% capture code %}
-{% include ui/switch-icon.html icon="circle" icon-b-class="icon-filled" icon-b-color="blue" %}
+{% include ui/switch-icon.html icon="circle" icon-b-class="icon-filled" icon-b-color="primary" %}
{% include ui/switch-icon.html variant="fade" icon-b-class="icon-filled" %}
{% include ui/switch-icon.html variant="scale" icon="star" icon-b-class="icon-filled" icon-b-color="yellow" %}
{% include ui/switch-icon.html variant="flip" icon="thumb-up" icon-b-color="facebook" %}
diff --git a/src/pages/_includes/cards/charts/sales.html b/src/pages/_includes/cards/charts/sales.html
index c5b50cdcd..94e0f405d 100644
--- a/src/pages/_includes/cards/charts/sales.html
+++ b/src/pages/_includes/cards/charts/sales.html
@@ -11,6 +11,6 @@
Conversion rate
{% include ui/trending.html value=7 %}
- {% include ui/progress.html value=75 color="blue" size="sm" %}
+ {% include ui/progress.html value=75 color="primary" size="sm" %}
diff --git a/src/pages/_includes/cards/map-vector.html b/src/pages/_includes/cards/map-vector.html
index 5fc10a25a..76d4bf114 100644
--- a/src/pages/_includes/cards/map-vector.html
+++ b/src/pages/_includes/cards/map-vector.html
@@ -4,6 +4,6 @@
{% if include.title %}
{{ include.title }}
{% endif %}
- {% include ui/map-vector.html map-id=map color="blue" ratio="21x9" %}
+ {% include ui/map-vector.html map-id=map color="primary" ratio="21x9" %}
diff --git a/src/pages/_includes/cards/most-visited-pages.html b/src/pages/_includes/cards/most-visited-pages.html
index eba321ccc..8f9509d94 100644
--- a/src/pages/_includes/cards/most-visited-pages.html
+++ b/src/pages/_includes/cards/most-visited-pages.html
@@ -24,9 +24,9 @@
{{ page.visitors | format_number }} |
{{ page.unique | format_number }} |
- {{ page.bounce-rate }} |
+ {{ page.bounce }} |
- {% include ui/chart-sparkline.html type="line" data=data id=id small=true %}
+ {% include ui/chart-sparkline.html type="line" data=data id=id small=true color="primary" %}
|
{% endfor %}
diff --git a/src/pages/_includes/cards/table-users.html b/src/pages/_includes/cards/table-users.html
index 2b8c2762e..f25ff0065 100644
--- a/src/pages/_includes/cards/table-users.html
+++ b/src/pages/_includes/cards/table-users.html
@@ -53,7 +53,7 @@
{% assign percentage = forloop.index | random_number: 0, 100 %}
-
+
{% include ui/chart-sparkline.html percentage=percentage type="donut" %}
diff --git a/src/pages/_includes/docs/menu.html b/src/pages/_includes/docs/menu.html
index d435ecc6b..c78092a3d 100644
--- a/src/pages/_includes/docs/menu.html
+++ b/src/pages/_includes/docs/menu.html
@@ -19,7 +19,7 @@
{{ item.title }}
{% if item.show-version %}
- {{ site.data.package.version }}
+ {{ site.data.package.version }}
{% endif %}
{% if item.children %}
diff --git a/src/pages/_includes/layout/homepage.html b/src/pages/_includes/layout/homepage.html
index 88d3349c4..cee0fefb3 100644
--- a/src/pages/_includes/layout/homepage.html
+++ b/src/pages/_includes/layout/homepage.html
@@ -16,7 +16,7 @@
- {% include cards/small-stats.html color="blue" icon="currency-dollar" title="132 Sales" description="12 waiting payments" %}
+ {% include cards/small-stats.html color="primary" icon="currency-dollar" title="132 Sales" description="12 waiting payments" %}
{% include cards/small-stats.html color="green" icon="shopping-cart" title="78 Orders" description="32 shipped" %}
diff --git a/src/pages/_includes/ui/chart-heatmap.html b/src/pages/_includes/ui/chart-heatmap.html
index 011cd86dd..181027877 100644
--- a/src/pages/_includes/ui/chart-heatmap.html
+++ b/src/pages/_includes/ui/chart-heatmap.html
@@ -34,28 +34,28 @@
from: 0,
to: 20,
name: "Low",
- color: "{{ "green" | tabler_color }}"
+ color: tabler.getColor("green")
}, {
from: 21,
to: 50,
name: "Medium",
- color: "{{ "blue" | tabler_color }}"
+ color: tabler.getColor("blue")
}, {
from: 51,
to: 75,
name: "High",
- color: "{{ "yellow" | tabler_color }}"
+ color: tabler.getColor("yellow")
}, {
from: 76,
to: 100,
name: "Extreme",
- color: "{{ "red" | tabler_color }}"
+ color: tabler.getColor("red")
}]
}
}
},
{% else %}
- colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}"{{ color[0] | tabler_color }}", {% endfor %}{% endif %}],
+ colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}tabler.getColor("{{ color[0] }}"), {% endfor %}{% endif %}],
{% endif %}
series: [
{% for i in site.months-short limit: 12 %}
diff --git a/src/pages/_includes/ui/chart-sparkline.html b/src/pages/_includes/ui/chart-sparkline.html
index 313165ba6..52763fe1c 100644
--- a/src/pages/_includes/ui/chart-sparkline.html
+++ b/src/pages/_includes/ui/chart-sparkline.html
@@ -71,11 +71,11 @@
{% endif %}
{% if type == 'donut' %}
- colors: ["{{ color | default: 'blue' | tabler_color }}"],
+ colors: [tabler.getColor("{{ color | default: 'primary' }}")],
series: [{{ data }}],
{% else %}
series: [{
- color: "{{ color | default: 'blue' | tabler_color }}",
+ color: tabler.getColor("{{ color | default: 'primary' }}"),
data: [{{ data }}]
}],
{% endif %}
diff --git a/src/pages/_includes/ui/chart.html b/src/pages/_includes/ui/chart.html
index 4d5fef10c..c13d9c8df 100644
--- a/src/pages/_includes/ui/chart.html
+++ b/src/pages/_includes/ui/chart.html
@@ -195,7 +195,7 @@
{% 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 %}],
+ colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'primary' %}tabler.getColor("{{ color }}"{% if serie.color-opacity %}, {{ serie.color-opacity }}{% endif %}){% unless forloop.last %}, {% endunless %}{% endfor %}],
{% endif %}
legend: {
diff --git a/src/pages/_includes/ui/map-vector.html b/src/pages/_includes/ui/map-vector.html
index 991bf8f70..418e44b54 100644
--- a/src/pages/_includes/ui/map-vector.html
+++ b/src/pages/_includes/ui/map-vector.html
@@ -37,7 +37,7 @@
{% if data.values %}
// -------- Series --------
visualizeData: {
- scale: ['#F8FAFC', '{{ data.color | tabler_color }}'],
+ scale: ['#F8FAFC', tabler.getColor('{{ data.color }}')],
values: {{ data.values }},
},
{% endif %}
@@ -57,11 +57,11 @@
opacity: 1,
strokeWidth: 3,
stokeOpacity: .5,
- fill: '{{ color | tabler_color }}'
+ fill: tabler.getColor('{{ color }}')
},
hover: {
- fill: '{{ color | tabler_color }}',
- stroke: '{{ color | tabler_color }}'
+ fill: tabler.getColor('{{ color }}'),
+ stroke: tabler.getColor('{{ color }}')
}
},
markerLabelStyle: {
diff --git a/src/pages/_includes/ui/map.html b/src/pages/_includes/ui/map.html
index be07f0a38..39442ebfb 100644
--- a/src/pages/_includes/ui/map.html
+++ b/src/pages/_includes/ui/map.html
@@ -28,7 +28,7 @@
{% for marker in data.markers %}
- new mapboxgl.Marker({ color: "{{ 'blue' | tabler_color }}" }).setLngLat([{{ marker.center[1] }}, {{ marker.center[0] }}]).addTo(map);
+ new mapboxgl.Marker({ color: tabler.getColor("{{ 'primary' }}") }).setLngLat([{{ marker.center[1] }}, {{ marker.center[0] }}]).addTo(map);
{% endfor %}
{% if jekyll.environment == 'development' %}window.tabler_map["map-{{ map-id }}"] = map;{% endif %}
diff --git a/src/pages/_includes/ui/select.html b/src/pages/_includes/ui/select.html
index ef05a07a9..2023d11aa 100644
--- a/src/pages/_includes/ui/select.html
+++ b/src/pages/_includes/ui/select.html
@@ -40,7 +40,7 @@
{% elsif include.indicator == 'label' %}
{% capture indicator-html %}
{% assign label = option[1].label %}
- {{ label }}
+ {{ label }}
{% endcapture %}
{% endif %}
diff --git a/src/pages/_layouts/base.html b/src/pages/_layouts/base.html
index 9bb4ceca7..e0ecc195b 100644
--- a/src/pages/_layouts/base.html
+++ b/src/pages/_layouts/base.html
@@ -31,14 +31,14 @@
{% include layout/og.html %}
{% endif %}
+ {% include layout/css.html %}
+
-
- {% include layout/css.html %}
{% assign layout-dark = page.layout-dark | default: site.layout-dark %}
diff --git a/src/pages/_layouts/docs.html b/src/pages/_layouts/docs.html
index 8dbe0cc9d..10e8d0423 100644
--- a/src/pages/_layouts/docs.html
+++ b/src/pages/_layouts/docs.html
@@ -26,7 +26,7 @@ page-header: Documentation
{% if page.bootstrap-link %}
- {% include ui/icon.html icon="external-link" color="blue" class="pe-1" %}
+ {% include ui/icon.html icon="external-link" color="primary" class="pe-1" %}
Bootstrap documentation
diff --git a/src/pages/_plugins/jekyll-filters.rb b/src/pages/_plugins/jekyll-filters.rb
index ed51dff54..3a2c59e44 100644
--- a/src/pages/_plugins/jekyll-filters.rb
+++ b/src/pages/_plugins/jekyll-filters.rb
@@ -91,13 +91,13 @@ module Jekyll
object
end
- def tabler_color(color, variation = false)
- if variation
- color = color + '-' + variation.to_s
- end
-
- Jekyll.sites.first.data['colors'][color]
- end
+ # def tabler_color(color, variation = false)
+ # if variation
+ # color = color + '-' + variation.to_s
+ # end
+ #
+ # Jekyll.sites.first.data['colors'][color]
+ # end
def seconds_to_minutes(seconds)
seconds = seconds.to_i.round
diff --git a/src/pages/activity.html b/src/pages/activity.html
index 176c0f448..49308adf0 100644
--- a/src/pages/activity.html
+++ b/src/pages/activity.html
@@ -1,6 +1,7 @@
---
title: Activity
page-header: Activity
+menu: extra.activity
---
diff --git a/src/pages/widgets.html b/src/pages/widgets.html
index e218d7d90..9fdf73c81 100644
--- a/src/pages/widgets.html
+++ b/src/pages/widgets.html
@@ -37,7 +37,7 @@ libs: apexcharts
- {% include cards/small-stats.html id="currency" icon="currency-dollar" color="blue" title="132 Sales" description="12 waiting payments" %}
+ {% include cards/small-stats.html id="currency" icon="currency-dollar" color="primary" title="132 Sales" description="12 waiting payments" %}
{% include cards/small-stats.html id="shopping-cart" icon="shopping-cart" color="green" title="78 Orders" description="32 shipped" %}
@@ -49,7 +49,7 @@ libs: apexcharts
{% include cards/small-stats.html id="message" icon="message" color="yellow" title="132 Comments" description="16 waitings" %}
- {% include cards/small-stats.html id="sales" chart-position="left" chart-type="donut" chart-data="56" color="blue" title="132 Sales" description="12 waiting payments" %}
+ {% include cards/small-stats.html id="sales" chart-position="left" chart-type="donut" chart-data="56" color="primary" title="132 Sales" description="12 waiting payments" %}
{% include cards/small-stats.html id="orders" chart-position="left" chart-type="donut" chart-data="56" color="green" title="78 Orders" description="32 shipped" %}
diff --git a/src/scss/_mixins-override.scss b/src/scss/_mixins-override.scss
index e0c6cdaa9..c6fe2ec46 100644
--- a/src/scss/_mixins-override.scss
+++ b/src/scss/_mixins-override.scss
@@ -47,29 +47,29 @@
// Override bootstrap core
}
-//@mixin button-variant(
-// $background: null,
-// $border: null,
-// $color: null,
-// $hover-background: null,
-// $hover-border: null,
-// $hover-color: null,
-// $active-background: null,
-// $active-border: null,
-// $active-color: null,
-// $disabled-background: null,
-// $disabled-border: null,
-// $disabled-color: null
-//) {
-// // Override bootstrap core
-//}
-//
-//@mixin button-outline-variant(
-// $color: null,
-// $color-hover: null,
-// $active-background: null,
-// $active-border: null,
-// $active-color: null
-//) {
-// // Override bootstrap core
-//}
\ No newline at end of file
+@mixin button-variant(
+ $background: null,
+ $border: null,
+ $color: null,
+ $hover-background: null,
+ $hover-border: null,
+ $hover-color: null,
+ $active-background: null,
+ $active-border: null,
+ $active-color: null,
+ $disabled-background: null,
+ $disabled-border: null,
+ $disabled-color: null
+) {
+ // Override bootstrap core
+}
+
+@mixin button-outline-variant(
+ $color: null,
+ $color-hover: null,
+ $active-background: null,
+ $active-border: null,
+ $active-color: null
+) {
+ // Override bootstrap core
+}
\ No newline at end of file
diff --git a/src/scss/_utilities.scss b/src/scss/_utilities.scss
index dfddb0f85..256fad217 100644
--- a/src/scss/_utilities.scss
+++ b/src/scss/_utilities.scss
@@ -1,8 +1,8 @@
$margin-spacers: map-merge($spacers, (auto: auto, null: $spacer));
$border-values: (
- null: $border-width solid $border-color-transparent,
- wide: $border-width-wide solid $border-color-transparent,
+ null: $border-width solid $border-color-translucent,
+ wide: $border-width-wide solid $border-color-translucent,
0: 0,
);
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 774325d8a..e6148cffb 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -97,7 +97,7 @@ $gray-800: #1d273b !default;
$gray-900: #0f172a !default;
$light: $gray-50 !default;
-$dark: $gray-800 !default;
+$dark: $gray-900 !default;
$body-bg: $gray-100 !default;
$body-color: $dark !default;
@@ -125,19 +125,23 @@ $text-muted-light: mix($body-color, #ffffff, percentage($text-muted-light-opacit
$text-muted-dark: mix($body-color, #ffffff, percentage($text-muted-dark-opacity)) !default;
$border-color: mix($text-muted, #ffffff, percentage($border-opacity)) !default;
-$border-color-transparent: rgba($text-muted, $border-opacity) !default;
+$border-color-translucent: rgba($text-muted, $border-opacity) !default;
$border-color-light: mix($text-muted, #ffffff, percentage($border-light-opacity)) !default;
-$border-color-light-transparent: rgba($text-muted, $border-light-opacity) !default;
+$border-color-light-translucent: rgba($text-muted, $border-light-opacity) !default;
$border-color-dark: mix($text-muted, #ffffff, percentage($border-dark-opacity)) !default;
-$border-color-dark-transparent: rgba($text-muted, $border-dark-opacity) !default;
+$border-color-dark-translucent: rgba($text-muted, $border-dark-opacity) !default;
$border-color-active: mix($text-muted, #ffffff, percentage($border-active-opacity)) !default;
-$border-color-active-transparent: rgba($text-muted, $border-active-opacity) !default;
+$border-color-active-translucent: rgba($text-muted, $border-active-opacity) !default;
$active-bg: rgba($blue, .04) !default;
$hover-bg: rgba($text-muted, .04) !default;
+$disabled-bg: var(--#{$prefix}gray-100) !default;
+
+$link-color: var(--#{$prefix}primary) !default;
+$link-hover-color: var(--#{$prefix}primary-darken) !default;
$primary: $blue !default;
$secondary: $text-muted !default;
@@ -148,7 +152,7 @@ $danger: $red !default;
$theme-colors: (
"primary": $primary,
- "secondary": $secondary,
+ "secondary": $text-muted,
"success": $success,
"info": $info,
"warning": $warning,
@@ -222,13 +226,17 @@ $border-radius: 4px !default;
$border-radius-lg: 8px !default;
$border-radius-pill: 100rem !default;
+// Icons
+$icon-color: var(--#{$prefix}gray-500) !default;
+
// Code
-$code-color: $text-muted-dark !default;
+$code-color: var(--#{$prefix}gray-600) !default;
$code-font-size: $small-font-size !default;
$code-line-height: 1.25rem !default;
+$code-bg: var(--#{$prefix}gray-100) !default;
$pre-padding: 1rem !default;
-$pre-bg: $gray-100 !default;
+$pre-bg: $code-bg !default;
// Avatars
$avatar-size: 2.5rem !default;
@@ -240,7 +248,7 @@ $avatar-sizes: (
"xl": 7rem,
"2xl": 11rem,
) !default;
-$avatar-border-radius: $border-radius !default;
+$avatar-border-radius: var(--#{$prefix}border-radius) !default;
$avatar-font-size: $h4-font-size;
$link-decoration: none !default;
@@ -318,7 +326,7 @@ $overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6
//accordion
$accordion-bg: transparent !default;
$accordion-color: var(--#{$prefix}body-color) !default;
-$accordion-border-color: $border-color-transparent !default;
+$accordion-border-color: var(--#{$prefix}border-color-translucent) !default;
$accordion-icon-width: 1rem !default;
$accordion-button-bg: transparent !default;
@@ -332,11 +340,11 @@ $alert-padding-y: 1rem !default;
$alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: 1px !default;
-$alert-border-color: $border-color-transparent !default;
+$alert-border-color: var(--#{$prefix}border-color-translucent) !default;
$alert-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
//breadcrumb
-$breadcrumb-divider-color: $text-muted !default;
+$breadcrumb-divider-color: var(--#{$prefix}muted) !default;
$breadcrumb-active-color: inherit !default;
$breadcrumb-variants: (
@@ -356,6 +364,7 @@ $badge-empty-size: .5rem !default;
//buttons
$input-btn-line-height: $line-height-base !default;
$input-btn-font-size: $font-size-base !default;
+$input-btn-font-family: var(--#{$prefix}font-family) !default;
$input-btn-padding-y: .5rem - .0625rem !default;
$input-btn-font-size-sm: $h5-font-size !default;
@@ -368,23 +377,25 @@ $input-btn-padding-y-lg: .5rem !default;
$input-btn-focus-width: .25rem !default;
+// inputs
$input-height: null !default;
$input-height-sm: null !default;
$input-height-lg: null !default;
+$input-border-radius: var(--#{$prefix}border-radius) !default;
$input-color: inherit !default;
$input-focus-color: inherit !default;
-//buttons
+// buttons
$btn-padding-x: 1rem !default;
$btn-font-weight: $font-weight-medium !default;
-$btn-border-radius: $border-radius !default;
+$btn-border-radius: var(--#{$prefix}border-radius) !default;
//cards
$card-title-spacer-y: 1.25rem !default;
-$card-border-width: $border-width !default;
-$card-border-color: $border-color-transparent !default;
-$card-border-radius: $border-radius !default;
+$card-border-width: var(--#{$prefix}border-width) !default;
+$card-border-color: var(--#{$prefix}border-color) !default;
+$card-border-radius: var(--#{$prefix}border-radius) !default;
$card-spacer-x: 1.25rem !default;
$card-spacer-y: 1rem !default;
@@ -428,7 +439,7 @@ $datagrid-item-width: 15rem !default;
$dropdown-item-padding-x: .75rem !default;
$dropdown-item-padding-y: .5rem !default;
$dropdown-font-size: $font-size-base !default;
-$dropdown-border-color: $border-color-transparent !default;
+$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
$dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-padding-y: .25rem !default;
$dropdown-link-color: inherit !default;
@@ -440,7 +451,7 @@ $dropdown-max-width: 25rem !default;
$dropdown-scrollable-height: 13rem !default;
-$dropdown-link-active-color: $primary !default;
+$dropdown-link-active-color: var(--#{$prefix}primary) !default;
$dropdown-link-active-bg: $active-bg !default;
@@ -448,9 +459,10 @@ $dropdown-link-active-bg: $active-bg !default;
$loader-size: 2.5rem !default;
//lists
-$list-group-header-bg: $light !default;
+$list-group-header-bg: var(--#{$prefix}light) !default;
+$list-group-header-color: var(--#{$prefix}muted) !default;
-$list-group-border-color: $border-color !default;
+$list-group-border-color: var(--#{$prefix}border-color) !default;
$list-group-item-padding-y: $card-cap-padding-y !default;
$list-group-item-padding-x: $card-cap-padding-x !default;
@@ -463,12 +475,12 @@ $modal-fade-transform: translate(0, -1rem) !default;
$modal-content-border-color: transparent !default;
$modal-content-bg: $gray-50 !default;
-$modal-content-border-radius: $border-radius !default;
+$modal-content-border-radius: var(--#{$prefix}border-radius) !default;
$modal-header-padding: 1.5rem !default;
$modal-header-height: 3.5rem !default;
$modal-header-border-width: 1px !default;
-$modal-header-border-color: $border-color !default;
+$modal-header-border-color: var(--#{$prefix}border-color) !default;
$modal-header-bg: $white !default;
$modal-inner-padding: 1.5rem !default;
$modal-footer-border-width: 0 !default;
@@ -482,17 +494,19 @@ $modal-md: 540px !default;
$modal-sm: 380px !default;
//nav
-$nav-link-color: inherit !default;
$nav-link-padding-y: .5rem !default;
$nav-link-padding-x: .75rem !default;
+$nav-link-color: inherit !default;
+$nav-link-icon-size: $icon-size !default;
+$nav-link-icon-color: var(--#{$prefix}icon-color) !default;
-$nav-pills-link-active-color: $primary !default;
+$nav-pills-link-active-color: var(--#{$prefix}primary) !default;
$nav-pills-link-active-bg: $active-bg !default;
-$nav-bordered-border-color: $border-color !default;
-$nav-bordered-border-width: $border-width !default;
-$nav-bordered-link-active-color: $primary !default;
-$nav-bordered-link-active-border-color: $primary !default;
+$nav-bordered-border-color: var(--#{$prefix}border-color) !default;
+$nav-bordered-border-width: var(--#{$prefix}border-width) !default;
+$nav-bordered-link-active-color: var(--#{$prefix}primary) !default;
+$nav-bordered-link-active-border-color: var(--#{$prefix}primary) !default;
$nav-bordered-link-active-border-width: 2 * $border-width !default;
$nav-bordered-margin-x: 1.25rem !default;
@@ -501,19 +515,19 @@ $nav-bordered-margin-x: 1.25rem !default;
$navbar-height: 3.5rem !default;
$navbar-padding-y: .25rem !default;
-$navbar-light-color: $body-color !default;
-$navbar-light-brand-color: $body-color !default;
-$navbar-light-border-color: $border-color-transparent !default;
-$navbar-light-active-color: $body-color !default;
+$navbar-border-width: var(--#{$prefix}border-width) !default;
+$navbar-border-color: var(--#{$prefix}border-color) !default;
+
+$navbar-light-color: var(--#{$prefix}body-color) !default;
+$navbar-light-brand-color: var(--#{$prefix}body-color) !default;
+$navbar-light-active-color: var(--#{$prefix}body-color)color !default;
$navbar-light-disabled-color: rgba($body-color, .3) !default;
$navbar-dark-color: rgba($white, $text-muted-opacity) !default;
$navbar-dark-brand-color: $white !default;
-$navbar-dark-border-color: $border-color-transparent !default;
$navbar-dark-active-color: $white !default;
$navbar-dark-disabled-color: rgba($white, .3) !default;
-
$navbar-brand-padding-y: $nav-link-padding-y !default;
$navbar-brand-image-height: 2rem !default;
$navbar-brand-margin-right: 0 !default;
@@ -528,30 +542,35 @@ $navbar-toggler-focus-width: 0 !default;
$navbar-nav-link-padding-x: $nav-link-padding-x !default;
+$navbar-active-border-color: var(--#{$prefix}primary) !default;
+
$navbar-overlap-height: 9rem !default;
//sidebar
$sidebar-width: 15rem !default;
//popover
-$popover-border-color: $border-color !default;
+$popover-border-color: var(--#{$prefix}border-color) !default;
//footer
$footer-padding-y: 2rem !default;
$footer-bg: $white !default;
-$footer-border-color: $border-color !default;
-$footer-border-color: $border-color !default;
+$footer-border-color: var(--#{$prefix}border-color) !default;
+$footer-color: var(--#{$prefix}muted) !default;
//pagination
$pagination-border-width: 0 !default;
$pagination-padding-y: .25rem !default;
$pagination-padding-x: .25rem !default;
-$pagination-color: $text-muted !default;
+$pagination-color: var(--#{$prefix}muted) !default;
$pagination-bg: transparent !default;
$pagination-disabled-bg: transparent !default;
$pagination-disabled-color: rgba($text-muted, .5) !default;
+$pagination-active-bg: var(--#{$prefix}primary) !default;
+$pagination-active-border-color: var(--#{$prefix}primary) !default;
+
//statuses
$status-dot-size: .5rem !default;
$status-height: 1.5rem !default;
@@ -566,32 +585,35 @@ $spinner-height: 1.5rem !default;
$spinner-width-sm: 1rem !default;
$spinner-height-sm: 1rem !default;
$spinner-border-width: 2px !default;
+$spinner-border-width-sm: 1px !default;
//tables
$table-bg-scale-dark: 40% !default;
$table-color: inherit !default;
$table-cell-padding-x: .75rem !default;
$table-cell-padding-y: .75rem !default;
-$table-border-color: $border-color-transparent !default;
-$table-th-border-color: $border-color-transparent !default;
+$table-border-color: var(--#{$prefix}border-color-translucent) !default;
+$table-th-border-color: var(--#{$prefix}border-color-translucent) !default;
$table-th-padding-x: $table-cell-padding-x !default;
$table-th-padding-y: .5rem !default;
-$table-th-color: $text-muted !default;
+$table-th-color: var(--#{$prefix}muted) !default;
$table-th-bg: var(--#{$prefix}gray-50) !default;
$table-striped-order: even !default;
-$table-striped-bg: var(--#{$prefix}border-color-light) !default;
-$table-group-separator-color: $border-color-transparent !default;
+$table-striped-bg: var(--#{$prefix}gray-50) !default;
+$table-group-separator-color: var(--#{$prefix}border-color-translucent) !default;
$table-sort-bg-image: url("data:image/svg+xml, ") !default;
$table-sort-asc-bg-image: url("data:image/svg+xml, ") !default;
$table-sort-desc-bg-image: url("data:image/svg+xml, ") !default;
//toasts
-$toast-border-color: $border-color !default;
-$toast-header-color: $text-muted !default;
+$toast-border-color: var(--#{$prefix}border-color) !default;
+$toast-header-color: var(--#{$prefix}muted) !default;
//progress
-$progress-bg: $border-color !default;
+$progress-bg: var(--#{$prefix}gray-200) !default;
+$progress-border-radius: var(--#{$prefix}border-radius) !default;
+$progress-bar-bg: var(--#{$prefix}primary) !default;
$progress-height: .5rem !default;
//ribbons
@@ -599,7 +621,7 @@ $ribbon-margin: .25rem !default;
$list-group-bg: inherit !default;
-$list-group-border-color: $border-color !default;
+$list-group-border-color: var(--#{$prefix}border-color) !default;
$list-group-action-color: inherit !default;
$list-group-hover-bg: $hover-bg !default;
$list-group-active-bg: $active-bg !default;
@@ -607,15 +629,15 @@ $list-group-active-border-color: $list-group-border-color !default;
$list-group-active-color: inherit !default;
$input-bg: $white !default;
-$input-disabled-bg: $gray-50 !default;
-$input-border-color: $border-color-dark !default;
-$input-border-color-transparent: $border-color-dark-transparent !default;
+$input-disabled-bg: $disabled-bg !default;
+$input-border-color: var(--#{$prefix}border-color) !default;
+$input-border-color-translucent: var(--#{$prefix}border-color-translucent) !default;
$input-placeholder-color: $text-muted-light !default;
$input-group-addon-bg: $light !default;
-$input-group-addon-color: $text-muted !default;
+$input-group-addon-color: var(--#{$prefix}muted) !default;
-$input-border-radius: $border-radius !default;
+$input-border-radius: var(--#{$prefix}border-radius) !default;
//Forms
@@ -623,9 +645,10 @@ $form-check-margin-bottom: .5rem !default;
$form-check-input-width: 1rem !default;
$form-check-padding-start: $form-check-input-width + .5rem !default;
$form-check-input-bg: $white !default;
-$form-check-input-border: 1px solid $input-border-color-transparent !default;
-$form-check-input-border-radius: $border-radius !default;
+$form-check-input-border: 1px solid $input-border-color-translucent !default;
+$form-check-input-border-radius: var(--#{$prefix}border-radius) !default;
$form-check-input-checked-bg-size: 1rem !default;
+$form-check-input-checked-bg-color: var(--#{$prefix}primary) !default;
$form-check-input-checked-color: $white !default;
$form-check-input-checked-bg-repeat: repeat !default;
@@ -633,7 +656,7 @@ $form-check-input-checked-bg-image: url("data:image/svg+xml, ") !default;
$form-check-radio-checked-bg-image: url("data:image/svg+xml, ") !default;
-$form-check-input-checked-border-color: $input-border-color-transparent !default;
+$form-check-input-checked-border-color: $input-border-color-translucent !default;
$form-check-label-disabled-opacity: $text-muted-opacity;
@@ -646,8 +669,9 @@ $form-switch-bg-image: url("data:image/svg+xml, |