Merge branch 'dev' into card

gulpfile.js

@@ -285,6 +285,10 @@ gulp.task('js-demo', () => {
 	return compileJs('demo')
 })
 
+gulp.task('js-demo-theme', () => {
+	 return compileJs('demo-theme')
+})
+
 /**
  * Compile JS module files to dist directory
  */
@@ -416,7 +420,7 @@ gulp.task('build-critical', (cb) => {
  */
 gulp.task('watch', (cb) => {
 	gulp.watch('./src/scss/**/*.scss', gulp.series('sass'))
-	gulp.watch('./src/js/**/*.js', gulp.parallel('js', 'mjs', 'js-demo'))
+	gulp.watch('./src/js/**/*.js', gulp.parallel('js', 'mjs', gulp.parallel('js-demo', 'js-demo-theme')))
 	cb()
 })
 
@@ -516,8 +520,8 @@ gulp.task('add-banner', () => {
 
 gulp.task('clean', gulp.series('clean-dirs', 'clean-jekyll'))
 
-gulp.task('start', gulp.series('clean', 'sass', 'js', 'js-demo', 'mjs', 'build-jekyll', gulp.parallel('watch-jekyll', 'watch', 'browser-sync')))
+gulp.task('start', gulp.series('clean', 'sass', 'js', gulp.parallel('js-demo', 'js-demo-theme'), 'mjs', 'build-jekyll', gulp.parallel('watch-jekyll', 'watch', 'browser-sync')))
 
-gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'css-rtl', 'css-minify', 'js', 'js-demo', 'mjs', 'copy-images', 'copy-libs', 'add-banner'))
+gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'css-rtl', 'css-minify', 'js', gulp.parallel('js-demo', 'js-demo-theme'), 'mjs', 'copy-images', 'copy-libs', 'add-banner'))
 gulp.task('build-demo', gulp.series('build-on', 'build-jekyll', 'copy-static', 'copy-dist', 'build-cleanup', 'build-purgecss'/*, 'build-critical'*/))
 gulp.task('build', gulp.series('build-core', 'build-demo'))

package.json

@@ -57,20 +57,20 @@
   "main": "dist/js/tabler.js",
   "homepage": "https://tabler.io",
   "devDependencies": {
-    "@babel/core": "^7.18.10",
+    "@babel/core": "^7.18.13",
     "@babel/preset-env": "^7.18.10",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
     "@rollup/pluginutils": "^4.2.1",
     "@rollup/stream": "^2.0.0",
-    "apexcharts": "^3.35.4",
+    "apexcharts": "^3.35.5",
     "autoprefixer": "^10.4.8",
     "autosize": "^5.0.1",
     "browser-sync": "^2.27.10",
     "bundlewatch": "^0.3.3",
     "choices.js": "^10.1.0",
-    "chromatic": "^6.7.4",
+    "chromatic": "^6.8.0",
     "countup.js": "^2.3.2",
     "critical": "^4.0.1",
     "cross-spawn": "^7.0.3",
@@ -95,11 +95,11 @@
     "nouislider": "^15.6.1",
     "plyr": "^3.7.2",
     "postcss": "^8.4.16",
-    "release-it": "^15.3.0",
-    "rollup": "^2.78.1",
+    "release-it": "^15.4.1",
+    "rollup": "^2.79.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleanup": "^3.2.1",
-    "sass": "^1.54.4",
+    "sass": "^1.54.7",
     "tinymce": "^6.1.2",
     "tom-select": "^2.1.0",
     "vinyl-buffer": "^1.0.1",
@@ -109,12 +109,12 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "@tabler/icons": "^1.91.0",
+    "@tabler/icons": "^1.91.1",
     "bootstrap": "5.2.0",
     "node-sass": "^7.0.1"
   },
   "peerDependencies": {
-    "apexcharts": "^3.35.4",
+    "apexcharts": "^3.35.5",
     "autosize": "^5.0.1",
     "choices.js": "^10.1.0",
     "countup.js": "^2.3.2",

src/js/demo-theme.js

+/**
+ * demo-theme is specifically loaded right after the body and not deferred
+ * to ensure we switch to the chosen dark/light theme as fast as possible.
+ * This will prevent any flashes of the light theme (default) before switching.
+ */
+
+const themeStorageKey = 'tablerTheme'
+const defaultTheme = 'light'
+let selectedTheme
+
+// https://stackoverflow.com/a/901144
+const params = new Proxy(new URLSearchParams(window.location.search), {
+	 get: (searchParams, prop) => searchParams.get(prop),
+});
+
+if (!!params.theme) {
+	 localStorage.setItem(themeStorageKey, params.theme)
+	 selectedTheme = params.theme
+} else {
+	 const storedTheme = localStorage.getItem(themeStorageKey)
+	 selectedTheme = storedTheme ? storedTheme : defaultTheme
+}
+
+document.body.classList.remove('theme-dark', 'theme-light');
+document.body.classList.add(`theme-${selectedTheme}`);
\ No newline at end of file

src/js/demo.js

 // Setting items
 const items = {
-	'theme': { localStorage: 'tablerTheme', default: 'light' },
 	'menu-position': { localStorage: 'tablerMenuPosition', default: 'top' },
 	'menu-behavior': { localStorage: 'tablerMenuBehavior', default: 'sticky' },
 	'container-layout': { localStorage: 'tablerContainerLayout', default: 'boxed' }
@@ -44,16 +43,6 @@ const toggleFormControls = (form) => {
 	}
 }
 
-// Update body classes
-const updateBodyClasses = () => {
-	document.body.classList.remove('theme-dark', 'theme-light');
-	document.body.classList.add(`theme-${config.theme}`);
-
-	// for (const [key, params] of Object.entries(items)) {
-	// 	document.body.setAttribute(`data-${key}`, config[key]);
-	// }
-}
-
 // Submit form
 const submitForm = (form) => {
 	// Save data to localStorage
@@ -66,9 +55,6 @@ const submitForm = (form) => {
 		config[key] = value
 	}
 
-	// Update body classes
-	updateBodyClasses();
-
 	window.dispatchEvent(new Event('resize'));
 
 	(new bootstrap.Offcanvas(form)).hide()
@@ -78,9 +64,6 @@ const submitForm = (form) => {
 // Parse url
 parseUrl()
 
-// Update body classes
-updateBodyClasses();
-
 // Elements
 const form = document.querySelector('#offcanvasSettings')
 

src/js/src/tabler.js

+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

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;

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

src/pages/_data/colors.yml

-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'

src/pages/_data/icons.yml

@@ -3408,12 +3408,11 @@ brand-monday: <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler
   icon-tabler-brand-monday" width="24" height="24" viewBox="0 0 24 24"
   stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
   stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
-  fill="none"/><circle fill="#D8D8D8" cx="19.5" cy="15.5" r="1.5" /><path
-  d="M9.5 7a1.5 1.5 0 0 1 1.339 2.177l-4.034 7.074c-.264 .447 -.75 .749 -1.305
-  .749a1.5 1.5 0 0 1 -1.271 -2.297l3.906 -6.827a1.5 1.5 0 0 1 1.365 -.876z"
-  /><path d="M16.5 7a1.5 1.5 0 0 1 1.339 2.177l-4.034 7.074c-.264 .447 -.75 .749
-  -1.305 .749a1.5 1.5 0 0 1 -1.271 -2.297l3.906 -6.827a1.5 1.5 0 0 1 1.365
-  -.876z" /></svg>
+  fill="none"/><circle cx="19.5" cy="15.5" r="1.5" /><path d="M9.5 7a1.5 1.5 0 0
+  1 1.339 2.177l-4.034 7.074c-.264 .447 -.75 .749 -1.305 .749a1.5 1.5 0 0 1
+  -1.271 -2.297l3.906 -6.827a1.5 1.5 0 0 1 1.365 -.876z" /><path d="M16.5 7a1.5
+  1.5 0 0 1 1.339 2.177l-4.034 7.074c-.264 .447 -.75 .749 -1.305 .749a1.5 1.5 0
+  0 1 -1.271 -2.297l3.906 -6.827a1.5 1.5 0 0 1 1.365 -.876z" /></svg>
 brand-netbeans: <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler
   icon-tabler-brand-netbeans" width="24" height="24" viewBox="0 0 24 24"
   stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
@@ -3578,7 +3577,7 @@ brand-react: <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler
   fill="none"/><ellipse cx="12" cy="12" rx="4" ry="10" /><ellipse
   transform="rotate(60 12 12)" cx="12" cy="12" rx="4" ry="10" /><ellipse
   transform="rotate(-60 12 12)" cx="12" cy="12" rx="4" ry="10" /><circle
-  fill="#D8D8D8" cx="12" cy="12" r="1" /></svg>
+  fill="currentColor" cx="12" cy="12" r="1" /></svg>
 brand-reddit: <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler
   icon-tabler-brand-reddit" width="24" height="24" viewBox="0 0 24 24"
   stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
@@ -5101,9 +5100,9 @@ chess: <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler
   stroke="currentColor" fill="none" stroke-linecap="round"
   stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
   fill="none"/><path d="M12 3a3 3 0 0 1 3 3c0 1.113 -.6 2.482 -1.5 3l1.5
-  7h-6l1.5 -7c-.9 -.518 -1.5 -1.887 -1.5 -3a3 3 0 0 1 3 -3z" /><path
-  fill="#D8D8D8" d="M8 9h8" /><path d="M9 16l-2.316 .772a1 1 0 0 0 -.684
-  .949v2.279h12v-2.28a1 1 0 0 0 -.684 -.948l-2.316 -.772h-6z" /></svg>
+  7h-6l1.5 -7c-.9 -.518 -1.5 -1.887 -1.5 -3a3 3 0 0 1 3 -3z" /><path d="M8 9h8"
+  /><path d="M9 16l-2.316 .772a1 1 0 0 0 -.684 .949v2.279h12v-2.28a1 1 0 0 0
+  -.684 -.948l-2.316 -.772h-6z" /></svg>
 chevron-down-left: <svg xmlns="http://www.w3.org/2000/svg" class="icon
   icon-tabler icon-tabler-chevron-down-left" width="24" height="24" viewBox="0 0
   24 24" stroke-width="2" stroke="currentColor" fill="none"

src/pages/_data/maps-vector.yml

 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

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 %}

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" %}

src/pages/_includes/cards/charts/sales.html

@@ -11,6 +11,6 @@
 			<div>Conversion rate</div>
 			<div class="ms-auto">{% include ui/trending.html value=7 %}</div>
 		</div>
-		{% include ui/progress.html value=75 color="blue" size="sm" %}
+		{% include ui/progress.html value=75 color="primary" size="sm" %}
 	</div>
 </div>

src/pages/_includes/cards/map-vector.html

@@ -4,6 +4,6 @@
 		{% if include.title %}
 			<h3 class="card-title">{{ include.title }}</h3>
 		{% 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" %}
 	</div>
 </div>

src/pages/_includes/cards/most-visited-pages.html

@@ -24,9 +24,9 @@
 				</td>
 				<td class="text-muted">{{ page.visitors | format_number }}</td>
 				<td class="text-muted">{{ page.unique | format_number }}</td>
-				<td class="text-muted">{{ page.bounce-rate }}</td>
+				<td class="text-muted">{{ page.bounce }}</td>
 				<td class="text-end w-1">
-					{% 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" %}
 				</td>
 			</tr>
 			{% endfor %}

src/pages/_includes/cards/table-users.html

@@ -53,7 +53,7 @@
 				<td class="text-center">
 					{% assign percentage = forloop.index | random_number: 0, 100 %}
 <!--					<div class="mx-auto" data-value="{{ circle-percentage | divide: 100 }}"-->
-<!--					     data-thickness="3" data-color="blue">-->
+<!--					     data-thickness="3" data-color="primary">-->
 <!--						<div class="chart-circle-value">{{ percentage }}%</div>-->
 <!--					</div>-->
 					{% include ui/chart-sparkline.html percentage=percentage type="donut" %}

src/pages/_includes/docs/menu.html

@@ -19,7 +19,7 @@
 			{{ item.title }}
 
 			{% if item.show-version %}
-				<span class="badge bg-blue-lt ms-auto">{{ site.data.package.version }}</span>
+				<span class="badge bg-primary-lt ms-auto">{{ site.data.package.version }}</span>
 			{% endif %}
 
 			{% if item.children %}

src/pages/_includes/layout/homepage.html

@@ -16,7 +16,7 @@
 	<div class="col-12">
 		<div class="row row-cards">
 			<div class="col-sm-6 col-lg-3">
-				{% 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" %}
 			</div>
 			<div class="col-sm-6 col-lg-3">
 				{% include cards/small-stats.html color="green" icon="shopping-cart" title="78 Orders" description="32 shipped" %}

src/pages/_includes/ui/chart-heatmap.html

@@ -8,77 +8,84 @@
 {% capture script %}
 {% assign colors = include.colors | default: 1 %}
 <script>
-	var options = {
-		chart: {
-			height: {{ height | times: 16 }},
-			type: "heatmap",
-			toolbar: {
-				show: false,
-			},
-		},
-		dataLabels: {
-			enabled: {% if include.labels %}true{% else %}false{% endif %}
-		},
-		{% if include.scale %}
-		plotOptions: {
-			heatmap: {
-				enableShades: {% unless include.no-shades %}true{% else %}false{% endunless %},
-				colorScale: {
-					ranges: [{
-						from: 0,
-						to: 20,
-						name: "Low",
-						color: "{{ "green" | tabler_color }}"
-					}, {
-						from: 21,
-						to: 50,
-						name: "Medium",
-						color: "{{ "blue" | tabler_color }}"
-					}, {
-						from: 51,
-						to: 75,
-						name: "High",
-						color: "{{ "yellow" | tabler_color }}"
-					}, {
-						from: 76,
-						to: 100,
-						name: "Extreme",
-						color: "{{ "red" | tabler_color }}"
-					}]
-				}
-			}
-		},
-		{% else %}
-		colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}"{{ color[0] | tabler_color }}", {% endfor %}{% endif %}],
+	 // @formatter:off
+	 document.addEventListener("DOMContentLoaded", function () {
+		{% if jekyll.environment == 'development' %}
+		window.tabler_chart = window.tabler_chart || {};
 		{% endif %}
-		series: [
-		{% for i in site.months-short limit: 12 %}
-			{% assign month-i = forloop.index %}
-			{ name: "{{ i }}", data: [{% for j in (1..16) %}{x: '{{ j }}', y: {{ j | random_number: 0, 100  | plus: month-i | random_number: 0, 100 }}},{% endfor %}] },{% endfor %}
-		],
-		xaxis: {
-			type: "category"
-		},
-		legend: {
-			{% if include.legend %}
-			show: true,
-			position: 'bottom',
-			offsetY: 8,
-			markers: {
-				width: 10,
-				height: 10,
-				radius: 100,
+
+		window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
+			chart: {
+				height: {{ height | times: 16 }},
+				type: "heatmap",
+				toolbar: {
+					show: false,
+				},
+			},
+			dataLabels: {
+				enabled: {% if include.labels %}true{% else %}false{% endif %}
 			},
-			itemMargin: {
-				horizontal: 8,
+			{% if include.scale %}
+			plotOptions: {
+				heatmap: {
+					enableShades: {% unless include.no-shades %}true{% else %}false{% endunless %},
+					colorScale: {
+						ranges: [{
+							from: 0,
+							to: 20,
+							name: "Low",
+							color: tabler.getColor("green")
+						}, {
+							from: 21,
+							to: 50,
+							name: "Medium",
+							color: tabler.getColor("blue")
+						}, {
+							from: 51,
+							to: 75,
+							name: "High",
+							color: tabler.getColor("yellow")
+						}, {
+							from: 76,
+							to: 100,
+							name: "Extreme",
+							color: tabler.getColor("red")
+						}]
+					}
+	 			}
 			},
 			{% else %}
-			show: false,
+			colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}tabler.getColor("{{ color[0] }}"), {% endfor %}{% endif %}],
 			{% endif %}
-		},
-	};
-
-	(new ApexCharts(document.querySelector("#chart-{{ id }}"),options)).render();
+			series: [
+				{% for i in site.months-short limit: 12 %}
+				{% assign month-i = forloop.index %}
+		  		{ name: "{{ i }}", data: [{% for j in (1..16) %}{x: '{{ j }}', y: {{ j | random_number: 0, 100  | plus: month-i | random_number: 0, 100 }}},{% endfor %}] },
+				{% endfor %}
+			],
+			xaxis: {
+				type: "category"
+			},
+			legend: {
+				{% if include.legend %}
+				show: true,
+				position: 'bottom',
+				offsetY: 8,
+				markers: {
+					width: 10,
+					height: 10,
+					radius: 100,
+				},
+				itemMargin: {
+					horizontal: 8,
+				},
+				{% else %}
+				show: false,
+				{% endif %}
+			},
+		})).render();
+	 });
+	 // @formatter:on
 </script>
 {% endcapture %}
 

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 %}

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: {

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: {

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 %}

src/pages/_includes/ui/select.html

@@ -40,7 +40,7 @@
 					{% elsif include.indicator == 'label' %}
 						{% capture indicator-html %}
 							{% assign label = option[1].label %}
-							<span class="badge bg-blue-lt">{{ label }}</span>
+							<span class="badge bg-primary-lt">{{ label }}</span>
 						{% endcapture %}
 					{% endif %}
 

src/pages/_layouts/base.html

@@ -31,18 +31,19 @@
 		{% include layout/og.html %}
 	{% endif %}
 
+	{% include layout/css.html %}
+
 	<style>
 		@import url('https://rsms.me/inter/inter.css');
 		:root {
-			--tblr-font-sans-serif: Inter,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif !important;
+			--tblr-font-sans-serif: Inter,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
 		}
 	</style>
-
-	{% include layout/css.html %}
 </head>
 
 {% assign layout-dark = page.layout-dark | default: site.layout-dark %}
 <body {% if layout.body-class or page.body-class %} class="{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}"{% endif %}>
+<script src="{{ site.base }}/dist/js/demo-theme{% if jekyll.environment != 'development' %}.min{% endif %}.js{% if jekyll.environment == 'preview' %}?{{ site.time | date: '%s' }}{% endif %}"></script>
 
 	{{ content }}
 

src/pages/_layouts/docs.html

@@ -26,7 +26,7 @@ page-header: Documentation
 							{% if page.bootstrap-link %}
 							<p class="ms-auto">
 								<a href="https://getbootstrap.com/docs/5.0/{{ page.bootstrap-link }}" target="_blank" class="d-flex align-items-center">
-									{% 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
 								</a>
 							</p>

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

src/pages/activity.html

 ---
 title: Activity
 page-header: Activity
+menu: extra.activity
 ---
 
 <div class="row justify-content-center">

src/pages/widgets.html

@@ -37,7 +37,7 @@ libs: apexcharts
 	</div>
 
 	<div class="col-md-6 col-xl-3">
-		{% 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" %}
 	</div>
 	<div class="col-md-6 col-xl-3">
 		{% 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" %}
 	</div>
 
-	<div class="col-md-6 col-xl-3">{% 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" %}
+	<div class="col-md-6 col-xl-3">{% 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" %}
 	</div>
 	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html id="orders" chart-position="left" chart-type="donut" chart-data="56" color="green" title="78 Orders" description="32 shipped" %}
 	</div>

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
-//}
+@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

src/scss/_utilities.scss

 $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,
 );
 

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,16 +377,18 @@ $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;
@@ -385,9 +396,9 @@ $card-title-spacer-y: 1.25rem !default;
 $card-bg: $white !default;
 $card-color: $dark !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;
@@ -431,7 +442,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;
@@ -443,7 +454,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;
 
 
@@ -451,9 +462,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;
 
@@ -466,12 +478,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;
@@ -485,17 +497,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;
 
@@ -504,19 +518,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;
@@ -531,30 +545,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;
@@ -569,32 +588,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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;
 $table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !default;
 $table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 10l3 -3l3 3'/></svg>") !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
@@ -602,7 +624,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;
@@ -610,15 +632,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
@@ -626,9 +648,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;
@@ -636,7 +659,7 @@ $form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://w
 $form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
 $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle r='3' fill='#{$form-check-input-checked-color}' cx='8' cy='8' /></svg>") !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;
 
@@ -649,8 +672,9 @@ $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/200
 $form-switch-bg-size: auto !default;
 
 $form-range-track-height: .25rem !default;
-$form-range-track-bg: var(--#{$prefix}bg-100) !default;
-$form-range-thumb-border: 2px solid $form-range-track-bg !default;
+$form-range-track-bg: var(--#{$prefix}gray-200) !default;
+$form-range-thumb-border: 2px solid $white !default;
+$form-range-thumb-bg: var(--#{$prefix}primary) !default;
 $form-range-thumb-height: 1rem !default;
 $form-range-thumb-focus-box-shadow-width: .125rem !default;
 
@@ -662,14 +686,22 @@ $form-label-font-weight: $font-weight-medium !default;
 
 $caret-width: .36em !default;
 
+// Legend
+$legend-bg: var(--#{$prefix}gray-50) !default;
+$legend-size: .75em !default;
+$legend-border-radius: var(--#{$prefix}border-radius-sm) !default;
+
 //Flags
+$flag-border-size: var(--#{$prefix}border-size) !default;
+$flag-border-color: var(--#{$prefix}border-color) !default;
+$flag-border-radius: var(--#{$prefix}border-radius) !default;
 $flag-sizes: $avatar-sizes !default;
 
 //Payments
 $payment-sizes: $avatar-sizes !default;
 
 // Offcanvas
-$offcanvas-border-color: $border-color-transparent !default;
+$offcanvas-border-color: var(--#{$prefix}border-color-translucent) !default;
 
 // Placeholder
 $placeholder-opacity-min: .1 !default;

src/scss/demo.scss

@@ -21,7 +21,7 @@ body.no-transitions * {
   width: 100%;
   position: relative;
   top: 0;
-  margin-bottom: 1rem;
+  margin-bottom: 1rem !important;
 }
 
 .demo-icon-preview {

src/scss/demo/_highlight.scss

@@ -11,7 +11,7 @@ pre.highlight,
   max-height: 30rem;
   margin: 1.5rem 0;
   overflow: auto;
-  border-radius: $border-radius;
+  border-radius: var(--#{$prefix}border-radius);
   @include scrollbar;
 }
 

src/scss/layout/_core.scss

@@ -3,22 +3,20 @@
   font-size: 16px;
   height: 100%;
 
-  @each $name, $color in $gray-colors {
+  @each $name, $color in $theme-colors {
     --#{$prefix}#{$name}: #{$color};
-  }
-
-  @each $name, $color in $gray-colors {
-    --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
+    --#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
+    --#{$prefix}#{$name}-light: #{theme-color-lighter($color)};
+    //--#{$prefix}#{$name}-rgb: #{to-rgb($color)};
   }
 
   --#{$prefix}card-bg: #{$card-bg};
-  --#{$prefix}card-bg-rgb: #{to-rgb($card-bg)};
 
   --#{$prefix}border-color: #{$border-color};
-  --#{$prefix}border-color-rgb: #{to-rgb($border-color)};
-
   --#{$prefix}border-color-light: #{$border-color-light};
-  --#{$prefix}border-color-light-rgb: #{to-rgb($border-color-light)};
+
+  --#{$prefix}icon-color: #{$icon-color};
+  --#{$prefix}disabled-bg: #{$disabled-bg};
 }
 
 body {

src/scss/layout/_dark.scss

@@ -18,8 +18,7 @@ body:not(.theme-dark) .hide-theme-light {
     --#{$prefix}body-bg: #{$dark-mode-darken};
     --#{$prefix}body-bg-rgb: #{to-rgb($dark-mode-darken)};
 
-    --#{$prefix}card-bg: #{$dark-mode-darken};
-    --#{$prefix}card-bg-rgb: #{to-rgb($dark-mode-darken)};
+    --#{$prefix}card-bg: #{$dark};
 
     --#{$prefix}border-color: #{$dark-mode-border-color};
     --#{$prefix}border-color-light: #{$dark-mode-border-color-light};
@@ -169,7 +168,7 @@ body:not(.theme-dark) .hide-theme-light {
   }
 
   .list-group-item {
-    border-color: $border-color-transparent;
+    border-color: $border-color-translucent;
   }
 
   .list-group-item:not(.disabled):not(:disabled) {

src/scss/layout/_footer.scss

@@ -2,7 +2,7 @@
   border-top: 1px solid $footer-border-color;
   background-color: $footer-bg;
   padding: $footer-padding-y 0;
-  color: $text-muted;
+  color: $footer-color;
   margin-top: auto;
 }
 

src/scss/layout/_navbar.scss

@@ -143,6 +143,8 @@
 Navbar
  */
 .navbar {
+  --#{$prefix}navbar-border-color: #{$navbar-border-color};
+  --#{$prefix}navbar-active-border-color: #{$navbar-active-border-color};
   align-items: stretch;
   min-height: $navbar-height;
 
@@ -173,7 +175,7 @@ Navbar
       min-width: 2rem;
       min-height: 2rem;
       justify-content: center;
-      border-radius: $border-radius;
+      border-radius: var(--#{$prefix}border-radius);
 
       .badge {
         position: absolute;
@@ -226,16 +228,16 @@ Navbar
               left: 0;
               right: 0;
               bottom: -.25rem;
-              border: 0 solid $primary;
+              border: 0 solid var(--#{$prefix}navbar-active-border-color);
               border-bottom-width: 2px;
             }
           }
 
           &.navbar-vertical {
-            box-shadow: inset -1px 0 0 0 $navbar-light-border-color;
+            box-shadow: inset calc(-1 * #{$navbar-border-width}) 0 0 0 var(--#{$prefix}navbar-border-color);
 
             &.navbar-right {
-              box-shadow: inset 1px 0 0 0 $navbar-light-border-color;
+              box-shadow: inset calc(1 * #{$navbar-border-width}) 0 0 0 var(--#{$prefix}navbar-border-color);
             }
           }
         }
@@ -336,7 +338,7 @@ Navbar toggler
 Navbar light
  */
 .navbar-light {
-  box-shadow: inset 0 -1px 0 0 $navbar-light-border-color;
+  box-shadow: inset 0 calc(-1 * #{$navbar-border-width}) 0 0 var(--#{$prefix}navbar-border-color);
   background-color: $white;
 }
 

src/scss/layout/_page.scss

@@ -85,7 +85,7 @@
 }
 
 .page-header-border {
-  border-bottom: 1px solid $border-color-transparent;
+  border-bottom: 1px solid $border-color-translucent;
   padding-bottom: $content-padding-y;
 }
 

src/scss/ui/_avatars.scss

@@ -94,8 +94,8 @@
   }
 
   &:hover {
-    border-color: $primary;
-    color: $primary;
+    border-color: var(--#{$prefix}primary);
+    color: var(--#{$prefix}primary);
     text-decoration: none;
   }
 }

src/scss/ui/_buttons.scss

@@ -13,15 +13,6 @@
   justify-content: center;
   white-space: nowrap;
 
-  //&:hover {
-  //  color: var(--#{$prefix}btn-color-text);
-  //  border-color: rgba(var(--#{$prefix}btn-color-text-rgb), #{$border-active-opacity});
-  //}
-  //
-  //&:focus:not([disabled]):not(.disabled) {
-  //  border-color: var(--#{$prefix}btn-color, #{$primary});
-  //}
-
   .icon {
     width: var(--#{$prefix}btn-icon-size);
     height: var(--#{$prefix}btn-icon-size);
@@ -73,6 +64,10 @@
   .btn-#{$color} {
     --#{$prefix}btn-border-color: transparent;
     --#{$prefix}btn-color: #{color-contrast($value)};
+    --#{$prefix}btn-bg: var(--#{$prefix}#{$color});
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color}-darken);
+    --#{$prefix}btn-hover-color: #{color-contrast($value)};
+    --#{$prefix}btn-hover-border-color: transparent;
   }
 }
 
@@ -193,7 +188,7 @@
   height: 2rem;
   align-items: center;
   justify-content: center;
-  border-radius: $border-radius;
+  border-radius: var(--#{$prefix}border-radius);
 
   &:after {
     content: none;
@@ -211,7 +206,7 @@
   }
 
   &.show {
-    color: $primary;
+    color: var(--#{$prefix}primary);
   }
 
   .icon {

src/scss/ui/_calendars.scss

@@ -2,7 +2,7 @@
   display: block;
   font-size: $font-size-sm;
   border: 1px solid $border-color;
-  border-radius: $border-radius;
+  border-radius: var(--#{$prefix}border-radius);
 }
 
 .calendar-nav {
@@ -58,7 +58,7 @@
     @include transition(background $transition-time, border $transition-time, box-shadow .32s, color $transition-time);
 
     &:hover {
-      color: $primary;
+      color: var(--#{$prefix}primary);
       text-decoration: none;
       background: #fefeff;
       border-color: $border-color;
@@ -66,7 +66,7 @@
   }
 
   .date-today {
-    color: $primary;
+    color: var(--#{$prefix}primary);
     border-color: $border-color;
   }
 }
@@ -89,8 +89,8 @@
   &.range-end {
     .date-item {
       color: $white;
-      background: $primary;
-      border-color: $primary;
+      background: var(--#{$prefix}primary);
+      border-color: var(--#{$prefix}primary);
     }
   }
 

src/scss/ui/_cards.scss

@@ -120,7 +120,7 @@
     bottom: -1px;
     left: -1px;
     content: "";
-    border: 1px solid $primary;
+    border: 1px solid var(--#{$prefix}primary);
     border-radius: inherit;
   }
 }

src/scss/ui/_carousel.scss

@@ -34,7 +34,7 @@
     height: auto;
     background: no-repeat center/cover;
     border: 0;
-    border-radius: $border-radius;
+    border-radius: var(--#{$prefix}border-radius);
     box-shadow: $shadow;
     margin: 0 $carousel-indicator-spacer;
     opacity: $carousel-indicator-thumb-opacity;

src/scss/ui/_empty.scss

@@ -61,5 +61,5 @@
 
 .empty-bordered {
   border: 1px solid $border-color;
-  border-radius: $border-radius;
+  border-radius: var(--#{$prefix}border-radius);
 }

src/scss/ui/_flags.scss

@@ -24,8 +24,8 @@ $countries: (
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  border: 1px solid var(--#{$prefix}border-color);
-  border-radius: 3px;
+  border: $flag-border-size solid $flag-border-color;
+  border-radius: $flag-border-radius;
 }
 
 @each $country in $countries {

src/scss/ui/_forms.scss

@@ -141,7 +141,7 @@ Form control
   margin-bottom: 1rem;
   background: var(--#{$prefix}body-bg);
   border: 1px solid var(--#{$prefix}border-color);
-  border-radius: $border-radius;
+  border-radius: var(--#{$prefix}border-radius);
 }
 
 /**
@@ -167,7 +167,7 @@ Form help
   &:hover,
   &[aria-describedby] {
     color: $white;
-    background: $primary;
+    background: var(--#{$prefix}primary);
   }
 }
 

src/scss/ui/_grid.scss

@@ -90,7 +90,7 @@
 
   .divide-y#{$name-prefixed} {
     > :not(template) ~ :not(template) {
-      border-top: 1px solid $border-color-transparent !important;
+      border-top: 1px solid $border-color-translucent !important;
     }
 
     > :not(template):not(:first-child) {
@@ -104,7 +104,7 @@
 
   .divide-x#{$name-prefixed} {
     > :not(template) ~ :not(template) {
-      border-left: 1px solid $border-color-transparent !important;
+      border-left: 1px solid $border-color-translucent !important;
     }
 
     > :not(template):not(:first-child) {

src/scss/ui/_legend.scss

+/**
+Legend
+ */
 .legend {
+  --#{$prefix}legend-size: #{$legend-size};
   display: inline-block;
-  background: var(--#{$prefix}gray-100);
-  width: .75em;
-  height: .75em;
-  border-radius: $border-radius;
+  background: $legend-bg;
+  width: var(--#{$prefix}legend-size);
+  height: var(--#{$prefix}legend-size);
+  border-radius: $legend-border-radius;
 }

src/scss/ui/_lists.scss

@@ -10,7 +10,7 @@
   font-weight: $font-weight-medium;
   line-height: 1;
   text-transform: uppercase;
-  color: $text-muted;
+  color: $list-group-header-color;
   border-bottom: 1px solid var(--#{$prefix}border-color);
 
   .list-group-flush > & {
@@ -25,16 +25,16 @@
 }
 
 .list-group-item.active {
-  background-color: rgba(27,125,241,0.02);
-  border-left-color: $yellow;
+  background-color: $dropdown-link-hover-bg;
+  border-left-color: $component-active-bg;
   border-left-width: $border-width-wide;
 }
 
 .list-group-item {
   &:active,
   &:focus,
-  &:hover{
-    background-color: rgba(27,125,241,0.02);
+  &:hover {
+    background-color: $dropdown-link-hover-bg;
   }
 }
 
@@ -42,7 +42,7 @@
   &.disabled,
   &:disabled {
     color: $gray-500;
-    background-color: rgba(27,125,241,0.02);
+    background-color: $dropdown-link-hover-bg;
   }
 }
 
@@ -69,6 +69,9 @@
   }
 }
 
+/**
+Timeline
+ */
 .list-timeline {
   position: relative;
   padding: 0;

src/scss/ui/_markdown.scss

@@ -38,6 +38,6 @@ Markdown
   }
 
   > img {
-    border-radius: $border-radius;
+    border-radius: var(--#{$prefix}border-radius);
   }
 }
\ No newline at end of file

src/scss/ui/_nav.scss

@@ -80,10 +80,10 @@
 }
 
 .nav-link-icon {
-  width: 1.5rem;
-  height: $icon-size;
-  margin-right: .25rem;
-  opacity: $text-muted-opacity;
+  width: $nav-link-icon-size;
+  height: $nav-link-icon-size;
+  margin-right: .5rem;
+  color: $nav-link-icon-color;
 
   svg {
     display: block;

src/scss/ui/_offcanvas.scss

@@ -3,7 +3,7 @@
 }
 
 .offcanvas-header {
-  border-bottom: 1px solid $border-color-transparent;
+  border-bottom: 1px solid $border-color-translucent;
 }
 
 .offcanvas-footer {

src/scss/ui/_pagination.scss

@@ -4,7 +4,7 @@
 
 .page-link {
   min-width: 1.75rem;
-  border-radius: $border-radius;
+  border-radius: var(--#{$prefix}border-radius);
 }
 
 .page-item {

src/scss/ui/_placeholder.scss

@@ -4,6 +4,6 @@
   }
 
   &:not(.avatar):not([class*="card-img-"]), {
-    border-radius: $border-radius;
+    border-radius: var(--#{$prefix}border-radius);
   }
 }
\ No newline at end of file

src/scss/ui/_progress.scss

@@ -19,22 +19,21 @@ Progress
   width: 100%;
   line-height: $progress-height;
   appearance: none;
-  background: var(--#{$prefix}gray-100);
 
   &::-webkit-progress-bar {
-    background: $gray-100;
+    background: var(--#{$prefix}progress-bg);
   }
 
   &::-webkit-progress-value {
-    background-color: $primary;
+    background-color: var(--#{$prefix}primary);
   }
 
   &::-moz-progress-bar {
-    background-color: $primary;
+    background-color: var(--#{$prefix}primary);
   }
 
   &::-ms-fill {
-    background-color: $primary;
+    background-color: var(--#{$prefix}primary);
     border: none;
   }
 }

src/scss/ui/_ribbons.scss

@@ -12,8 +12,8 @@
   color: $white;
   text-align: center;
   text-transform: uppercase;
-  background: $primary;
-  border-color: $primary;
+  background: var(--#{$prefix}primary);
+  border-color: var(--#{$prefix}primary);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -37,11 +37,11 @@
   @if $enable-extra-colors {
     @each $color, $value in $extra-colors {
       &.bg-#{$color} {
-        border-color: $value;
+        border-color: var(--#{$prefix}#{$color});
       }
 
       &.bg-#{$color}-lt {
-        border-color: theme-color-lighter($value) !important;
+        border-color: rgba(var(--#{$prefix}#{$color}-rgb), .1) !important;
       }
     }
   }

src/scss/ui/_steps.scss

@@ -39,7 +39,7 @@
   margin: 2rem 0;
   list-style: none;
   @include step-size(2px, .5rem);
-  @include step-color($primary);
+  @include step-color( var(--#{$prefix}primary) );
 }
 
 @each $color, $value in $extra-colors {

src/scss/ui/_type.scss

@@ -113,7 +113,7 @@ code {
 //  padding: 2px 4px;
 //  background: rgba($code-color, .03);
 //  border: 1px solid rgba($code-color, .064);
-//  border-radius: $border-radius;
+//  border-radius: var(--#{$prefix}border-radius);
 //  font-weight: $font-weight-normal;
 //}
 
@@ -125,10 +125,10 @@ code {
 //  hyphens: none;
 //  line-height: $code-line-height;
 //  tab-size: 3;
-//  border-radius: $border-radius;
+//  border-radius: var(--#{$prefix}border-radius);
 //  white-space: pre-wrap;
 //  background: mix($light, #ffffff, 50%);
-//  border: 1px solid $border-color-transparent;
+//  border: 1px solid $border-color-translucent;
 //  -webkit-font-smoothing: auto;
 //
 //  code {

src/scss/ui/forms/_form-colorinput.scss

@@ -20,7 +20,7 @@ Color Input
   width: 1.5rem;
   height: 1.5rem;
   color: $white;
-  border: 1px solid $border-color-transparent;
+  border: 1px solid $input-border-color-translucent;
   border-radius: 3px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
 
@@ -42,7 +42,7 @@ Color Input
   }
 
   .form-colorinput-input:focus ~ & {
-    border-color: $primary;
+    border-color: var(--#{$prefix}primary);
     box-shadow: $input-btn-focus-box-shadow;
   }
 

src/scss/ui/forms/_form-icon.scss

@@ -24,7 +24,7 @@ Icon input
   align-items: center;
   justify-content: center;
   min-width: 2.5rem;
-  color: $text-muted;
+  color: var(--#{$prefix}icon-color);
   pointer-events: none;
   font-size: 1.2em;
 

src/scss/ui/forms/_form-imagecheck.scss

@@ -22,12 +22,12 @@ Image check
   border-radius: 3px;
 
   .form-imagecheck-input:focus ~ & {
-    border-color: $primary;
+    border-color: var(--#{$prefix}primary);
     box-shadow: $input-btn-focus-box-shadow;
   }
 
   .form-imagecheck-input:checked ~ & {
-    border-color: $primary;
+    border-color: var(--#{$prefix}primary);
   }
 
   &:before {

src/scss/ui/forms/_form-selectgroup.scss

@@ -94,15 +94,15 @@ Select group
 
 .form-selectgroup-input:checked + .form-selectgroup-label {
   z-index: 1;
-  color: $primary;
+  color: var(--#{$prefix}primary);
   background: rgba($primary, .04);
-  border-color: $primary;
+  border-color: var(--#{$prefix}primary);
 }
 
 .form-selectgroup-input:focus + .form-selectgroup-label {
   z-index: 2;
-  color: $primary;
-  border-color: $primary;
+  color: var(--#{$prefix}primary);
+  border-color: var(--#{$prefix}primary);
   box-shadow: $input-btn-focus-box-shadow;
 }
 
@@ -124,7 +124,7 @@ Alternate version of form select group
       color: inherit;
 
       .form-selectgroup-title {
-        color: $primary;
+        color: var(--#{$prefix}primary);
       }
 
       .form-selectgroup-label-content {

src/scss/utils/_colors.scss

@@ -3,13 +3,12 @@
 // All colors
 @each $color, $value in $theme-colors {
   .bg-#{"" + $color} {
-    --#{$prefix}bg-opacity: 1;
-    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
+    background-color: var(--#{$prefix}#{$color}) !important;
   }
 
   .bg-#{"" + $color}-lt {
-    color: $value !important;
-    background: theme-color-lighter($value, true) !important;
+    color: var(--#{$prefix}#{$color}) !important;
+    background: rgba(var(--#{$prefix}#{$color}-rgb), .1) !important; //todo
   }
 }
 

src/scss/vendor/_dropzone.scss

@@ -17,7 +17,7 @@
     margin: .5rem;
 
     .dz-image {
-      border-radius: $border-radius;
+      border-radius: var(--#{$prefix}border-radius);
     }
 
     .dz-success-mark {

src/scss/vendor/_litepicker.scss

@@ -2,12 +2,12 @@
   --litepicker-month-weekday-color: #{$text-muted};
   --litepicker-button-prev-month-color: #{$text-muted};
   --litepicker-button-next-month-color: #{$text-muted};
-  --litepicker-button-prev-month-color-hover: #{$primary};
-  --litepicker-button-next-month-color-hover: #{$primary};
+  --litepicker-button-prev-month-color-hover: #{ var(--#{$prefix}primary) };
+  --litepicker-button-next-month-color-hover: #{ var(--#{$prefix}primary) };
   --litepicker-day-color: var(--#{$prefix}body-color);
-  --litepicker-day-color-hover: #{$primary};
-  --litepicker-is-end-color-bg: #{$primary};
-  --litepicker-is-today-color: #{$primary};
+  --litepicker-day-color-hover: #{ var(--#{$prefix}primary) };
+  --litepicker-is-end-color-bg: #{ var(--#{$prefix}primary) };
+  --litepicker-is-today-color: #{ var(--#{$prefix}primary) };
   --litepicker-month-header-color: var(--#{$prefix}body-color);
   --litepicker-container-months-color-bg: var(--#{$prefix}card-bg);
   font: inherit;
@@ -19,7 +19,7 @@
 
   .container__main {
     border: 1px solid var(--#{$prefix}border-color);
-    border-radius: $border-radius;
+    border-radius: var(--#{$prefix}border-radius);
     box-shadow: $dropdown-box-shadow;
   }
 

src/scss/vendor/_plyr.scss

 body {
-  --plyr-color-main: #{$primary};
+  --plyr-color-main: #{var(--#{$prefix}primary)};
 }
\ No newline at end of file

src/scss/vendor/_tom-select.scss

+$select-color-dropdown-border-top: red;
+
 @import "~tom-select/src/scss/tom-select.bootstrap5.scss";
 
 .ts-input {