From c4a6a8693b989a0adcd769f58e7e6c39e815c5c4 Mon Sep 17 00:00:00 2001
From: Dave Heineman <dheineman@live.nl>
Date: Wed, 10 Aug 2022 13:57:54 +0200
Subject: [PATCH 1/5] Fix flashing white when dark theme is enabled (#1176)

Load the theme code as fast as possible to prevent flashing the light theme
before fetching and applying the dark theme from the URL or localstorage.
---
 gulpfile.js                  | 10 +++++++---
 src/js/demo-theme.js         | 25 +++++++++++++++++++++++++
 src/js/demo.js               | 17 -----------------
 src/pages/_layouts/base.html |  1 +
 4 files changed, 33 insertions(+), 20 deletions(-)
 create mode 100644 src/js/demo-theme.js

diff --git a/gulpfile.js b/gulpfile.js
index 07d0833f46..fc6cc1f093 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -287,6 +287,10 @@ gulp.task('js-demo', () => {
 	return compileJs('demo')
 })
 
+gulp.task('js-demo-theme', () => {
+	 return compileJs('demo-theme')
+})
+
 /**
  * Compile JS module files to dist directory
  */
@@ -420,7 +424,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()
 })
 
@@ -520,8 +524,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'))
diff --git a/src/js/demo-theme.js b/src/js/demo-theme.js
new file mode 100644
index 0000000000..c6e83c219b
--- /dev/null
+++ b/src/js/demo-theme.js
@@ -0,0 +1,25 @@
+/**
+ * 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
diff --git a/src/js/demo.js b/src/js/demo.js
index fb40124177..6aaaade6fb 100644
--- a/src/js/demo.js
+++ b/src/js/demo.js
@@ -1,6 +1,5 @@
 // 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')
 
diff --git a/src/pages/_layouts/base.html b/src/pages/_layouts/base.html
index 46f8e52514..3fcb8031c3 100644
--- a/src/pages/_layouts/base.html
+++ b/src/pages/_layouts/base.html
@@ -47,6 +47,7 @@
 
 {% 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 }}
 

From e738cc47bd79af1599fcc72fc06300c492d22ab5 Mon Sep 17 00:00:00 2001
From: Dave Heineman <dheineman@live.nl>
Date: Wed, 31 Aug 2022 12:59:24 +0200
Subject: [PATCH 2/5] Fix ApexChart heatmap initialization on the charts docs
 page (#1152)

---
 src/pages/_includes/ui/chart-heatmap.html | 139 ++++++++++++----------
 1 file changed, 73 insertions(+), 66 deletions(-)

diff --git a/src/pages/_includes/ui/chart-heatmap.html b/src/pages/_includes/ui/chart-heatmap.html
index 1db3c4ffb7..011cd86dd5 100644
--- a/src/pages/_includes/ui/chart-heatmap.html
+++ b/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: "{{ "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 %}
-			show: false,
+			colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}"{{ color[0] | tabler_color }}", {% 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 %}
 

From 86db6b1fbb34861b5c4dc9271b1cf760bcd47a50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Wed, 31 Aug 2022 21:49:09 +0200
Subject: [PATCH 3/5] update icons to v1.91.0 (#1230)

---
 package-lock.json         | 14 +++++++-------
 package.json              |  2 +-
 src/pages/_data/icons.yml | 19 +++++++++----------
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d36c991ebb..de08312126 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "MIT",
       "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"
       },
@@ -2398,9 +2398,9 @@
       }
     },
     "node_modules/@tabler/icons": {
-      "version": "1.91.0",
-      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-1.91.0.tgz",
-      "integrity": "sha512-hh3ly553MhAXvwU4rWwlvIKGKI2/Y9pqKUWHUpZF4hEa06DGjXUA4fJKwyf9TNq3xa2tcvD8J0tG3TaP18ZCtw==",
+      "version": "1.91.1",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-1.91.1.tgz",
+      "integrity": "sha512-4RSrNc7W8QOdpUwqAqvUQkxZeFyV3oh1XGG1KThIBYQgGvwz7c75C6DfJV399ietESFN6zPAbEfDVvdx66lAgw==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/codecalm"
@@ -19083,9 +19083,9 @@
       }
     },
     "@tabler/icons": {
-      "version": "1.91.0",
-      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-1.91.0.tgz",
-      "integrity": "sha512-hh3ly553MhAXvwU4rWwlvIKGKI2/Y9pqKUWHUpZF4hEa06DGjXUA4fJKwyf9TNq3xa2tcvD8J0tG3TaP18ZCtw==",
+      "version": "1.91.1",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-1.91.1.tgz",
+      "integrity": "sha512-4RSrNc7W8QOdpUwqAqvUQkxZeFyV3oh1XGG1KThIBYQgGvwz7c75C6DfJV399ietESFN6zPAbEfDVvdx66lAgw==",
       "requires": {}
     },
     "@tootallnate/once": {
diff --git a/package.json b/package.json
index 5dad9575dd..177b009d02 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
   },
   "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"
   },
diff --git a/src/pages/_data/icons.yml b/src/pages/_data/icons.yml
index c30e31a053..36030e9f6f 100644
--- a/src/pages/_data/icons.yml
+++ b/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"

From fa4afb01018bde6039ab27af1a9cdb757d0f5eed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Wed, 31 Aug 2022 22:10:16 +0200
Subject: [PATCH 4/5] update dependencies (#1231)

---
 package-lock.json | 412 +++++++++++++++++++++++-----------------------
 package.json      |  14 +-
 2 files changed, 210 insertions(+), 216 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index de08312126..25bc3a13a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,20 +15,20 @@
         "node-sass": "^7.0.1"
       },
       "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",
@@ -53,11 +53,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",
@@ -73,7 +73,7 @@
         "url": "https://github.com/sponsors/codecalm"
       },
       "peerDependencies": {
-        "apexcharts": "^3.35.4",
+        "apexcharts": "^3.35.5",
         "autosize": "^5.0.1",
         "choices.js": "^10.1.0",
         "countup.js": "^2.3.2",
@@ -171,21 +171,21 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.10.tgz",
-      "integrity": "sha512-JQM6k6ENcBFKVtWvLavlvi/mPcpYZ3+R+2EySDEMSMbp7Mn4FexlbbJVrx2R7Ijhr01T8gyqrOaABWIOgxeUyw==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.13.tgz",
+      "integrity": "sha512-ZisbOvRRusFktksHSG6pjj1CSvkPkcZq/KHD45LAkVP/oiHJkNBZWfpvlLmX8OtHDG8IuzsFlVRWo08w7Qxn0A==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.18.10",
+        "@babel/generator": "^7.18.13",
         "@babel/helper-compilation-targets": "^7.18.9",
         "@babel/helper-module-transforms": "^7.18.9",
         "@babel/helpers": "^7.18.9",
-        "@babel/parser": "^7.18.10",
+        "@babel/parser": "^7.18.13",
         "@babel/template": "^7.18.10",
-        "@babel/traverse": "^7.18.10",
-        "@babel/types": "^7.18.10",
+        "@babel/traverse": "^7.18.13",
+        "@babel/types": "^7.18.13",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -201,12 +201,12 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.10.tgz",
-      "integrity": "sha512-0+sW7e3HjQbiHbj1NeU/vN8ornohYlacAfZIaXhdoGweQqgcNy69COVciYYqEXJ/v+9OBA7Frxm4CVAuNqKeNA==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.13.tgz",
+      "integrity": "sha512-CkPg8ySSPuHTYPJYo7IRALdqyjM9HCbt/3uOBEFbzyGVP6Mn8bwFPB0jX6982JVNBlYzM1nnPkfjuXSOPtQeEQ==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.18.10",
+        "@babel/types": "^7.18.13",
         "@jridgewell/gen-mapping": "^0.3.2",
         "jsesc": "^2.5.1"
       },
@@ -574,9 +574,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.10.tgz",
-      "integrity": "sha512-TYk3OA0HKL6qNryUayb5UUEhM/rkOQozIBEA5ITXh5DWrSp0TlUQXMyZmnWxG/DizSWBeeQ0Zbc5z8UGaaqoeg==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.13.tgz",
+      "integrity": "sha512-dgXcIfMuQ0kgzLB2b9tRZs7TTFFaGM2AbtA4fJgUUYukzGH4jwsS7hzQHEGs67jdehpm22vkgKwvbU+aEflgwg==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -1698,19 +1698,19 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.10.tgz",
-      "integrity": "sha512-J7ycxg0/K9XCtLyHf0cz2DqDihonJeIo+z+HEdRe9YuT8TY4A66i+Ab2/xZCEW7Ro60bPCBBfqqboHSamoV3+g==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.13.tgz",
+      "integrity": "sha512-N6kt9X1jRMLPxxxPYWi7tgvJRH/rtoU+dbKAPDM44RFHiMH8igdsaSBgFeskhSl/kLWLDUvIh1RXCrTmg0/zvA==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.18.10",
+        "@babel/generator": "^7.18.13",
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-function-name": "^7.18.9",
         "@babel/helper-hoist-variables": "^7.18.6",
         "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/parser": "^7.18.10",
-        "@babel/types": "^7.18.10",
+        "@babel/parser": "^7.18.13",
+        "@babel/types": "^7.18.13",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -1719,9 +1719,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.10.tgz",
-      "integrity": "sha512-MJvnbEiiNkpjo+LknnmRrqbY1GPUUggjv+wQVjetM/AONoupqRALB7I6jGqNUAZsKcRIEu2J6FRFvsczljjsaQ==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.13.tgz",
+      "integrity": "sha512-ePqfTihzW0W6XAU+aMw2ykilisStJfDnsejDCXRchCcMJ4O0+8DhPXf2YUbZ6wjBlsEmZwLK/sPweWtu8hcJYQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.18.10",
@@ -1934,28 +1934,28 @@
       }
     },
     "node_modules/@octokit/auth-token": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.0.tgz",
-      "integrity": "sha512-MDNFUBcJIptB9At7HiV7VCvU3NcL4GnfCQaP8C5lrxWrRPMJBnemYtehaKSOlaM7AYxeRyj9etenu8LVpSpVaQ==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.1.tgz",
+      "integrity": "sha512-/USkK4cioY209wXRpund6HZzHo9GmjakpV9ycOkpMcMxMk7QVcVFVyCMtzvXYiHsB2crgDgrtNYSELYFBXhhaA==",
       "dev": true,
       "dependencies": {
-        "@octokit/types": "^6.0.3"
+        "@octokit/types": "^7.0.0"
       },
       "engines": {
         "node": ">= 14"
       }
     },
     "node_modules/@octokit/core": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.0.4.tgz",
-      "integrity": "sha512-sUpR/hc4Gc7K34o60bWC7WUH6Q7T6ftZ2dUmepSyJr9PRF76/qqkWjE2SOEzCqLA5W83SaISymwKtxks+96hPQ==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.0.5.tgz",
+      "integrity": "sha512-4R3HeHTYVHCfzSAi0C6pbGXV8UDI5Rk+k3G7kLVNckswN9mvpOzW9oENfjfH3nEmzg8y3AmKmzs8Sg6pLCeOCA==",
       "dev": true,
       "dependencies": {
         "@octokit/auth-token": "^3.0.0",
         "@octokit/graphql": "^5.0.0",
         "@octokit/request": "^6.0.0",
         "@octokit/request-error": "^3.0.0",
-        "@octokit/types": "^6.0.3",
+        "@octokit/types": "^7.0.0",
         "before-after-hook": "^2.2.0",
         "universal-user-agent": "^6.0.0"
       },
@@ -1964,12 +1964,12 @@
       }
     },
     "node_modules/@octokit/endpoint": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.0.tgz",
-      "integrity": "sha512-Kz/mIkOTjs9rV50hf/JK9pIDl4aGwAtT8pry6Rpy+hVXkAPhXanNQRxMoq6AeRgDCZR6t/A1zKniY2V1YhrzlQ==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.1.tgz",
+      "integrity": "sha512-/wTXAJwt0HzJ2IeE4kQXO+mBScfzyCkI0hMtkIaqyXd9zg76OpOfNQfHL9FlaxAV2RsNiOXZibVWloy8EexENg==",
       "dev": true,
       "dependencies": {
-        "@octokit/types": "^6.0.3",
+        "@octokit/types": "^7.0.0",
         "is-plain-object": "^5.0.0",
         "universal-user-agent": "^6.0.0"
       },
@@ -1978,13 +1978,13 @@
       }
     },
     "node_modules/@octokit/graphql": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.0.tgz",
-      "integrity": "sha512-1ZZ8tX4lUEcLPvHagfIVu5S2xpHYXAmgN0+95eAOPoaVPzCfUXJtA5vASafcpWcO86ze0Pzn30TAx72aB2aguQ==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.1.tgz",
+      "integrity": "sha512-sxmnewSwAixkP1TrLdE6yRG53eEhHhDTYUykUwdV9x8f91WcbhunIHk9x1PZLALdBZKRPUO2HRcm4kezZ79HoA==",
       "dev": true,
       "dependencies": {
         "@octokit/request": "^6.0.0",
-        "@octokit/types": "^6.0.3",
+        "@octokit/types": "^7.0.0",
         "universal-user-agent": "^6.0.0"
       },
       "engines": {
@@ -1992,18 +1992,18 @@
       }
     },
     "node_modules/@octokit/openapi-types": {
-      "version": "12.11.0",
-      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-12.11.0.tgz",
-      "integrity": "sha512-VsXyi8peyRq9PqIz/tpqiL2w3w80OgVMwBHltTml3LmVvXiphgeqmY9mvBw9Wu7e0QWk/fqD37ux8yP5uVekyQ==",
+      "version": "13.6.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-13.6.0.tgz",
+      "integrity": "sha512-bxftLwoZ2J6zsU1rzRvk0O32j7lVB0NWWn+P5CDHn9zPzytasR3hdAeXlTngRDkqv1LyEeuy5psVnDkmOSwrcQ==",
       "dev": true
     },
     "node_modules/@octokit/plugin-paginate-rest": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-3.1.0.tgz",
-      "integrity": "sha512-+cfc40pMzWcLkoDcLb1KXqjX0jTGYXjKuQdFQDc6UAknISJHnZTiBqld6HDwRJvD4DsouDKrWXNbNV0lE/3AXA==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-4.2.0.tgz",
+      "integrity": "sha512-8otLCIK9esfmOCY14CBnG/xPqv0paf14rc+s9tHpbOpeFwrv5CnECKW1qdqMAT60ngAa9eB1bKQ+l2YCpi0HPQ==",
       "dev": true,
       "dependencies": {
-        "@octokit/types": "^6.41.0"
+        "@octokit/types": "^7.2.0"
       },
       "engines": {
         "node": ">= 14"
@@ -2022,12 +2022,12 @@
       }
     },
     "node_modules/@octokit/plugin-rest-endpoint-methods": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-6.2.0.tgz",
-      "integrity": "sha512-PZ+yfkbZAuRUtqu6Y191/V3eM0KBPx+Yq7nh+ONPdpm3EX4pd5UnK2y2XgO/0AtNum5a4aJCDjqsDuUZ2hWRXw==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-6.4.0.tgz",
+      "integrity": "sha512-YP4eUqZ6vORy/eZOTdil1ZSrMt0kv7i/CVw+HhC2C0yJN+IqTc/rot957JQ7JfyeJD6HZOjLg6Jp1o9cPhI9KA==",
       "dev": true,
       "dependencies": {
-        "@octokit/types": "^6.41.0",
+        "@octokit/types": "^7.2.0",
         "deprecation": "^2.3.1"
       },
       "engines": {
@@ -2038,14 +2038,14 @@
       }
     },
     "node_modules/@octokit/request": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.0.tgz",
-      "integrity": "sha512-7IAmHnaezZrgUqtRShMlByJK33MT9ZDnMRgZjnRrRV9a/jzzFwKGz0vxhFU6i7VMLraYcQ1qmcAOin37Kryq+Q==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.1.tgz",
+      "integrity": "sha512-gYKRCia3cpajRzDSU+3pt1q2OcuC6PK8PmFIyxZDWCzRXRSIBH8jXjFJ8ZceoygBIm0KsEUg4x1+XcYBz7dHPQ==",
       "dev": true,
       "dependencies": {
         "@octokit/endpoint": "^7.0.0",
         "@octokit/request-error": "^3.0.0",
-        "@octokit/types": "^6.16.1",
+        "@octokit/types": "^7.0.0",
         "is-plain-object": "^5.0.0",
         "node-fetch": "^2.6.7",
         "universal-user-agent": "^6.0.0"
@@ -2055,12 +2055,12 @@
       }
     },
     "node_modules/@octokit/request-error": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.0.tgz",
-      "integrity": "sha512-WBtpzm9lR8z4IHIMtOqr6XwfkGvMOOILNLxsWvDwtzm/n7f5AWuqJTXQXdDtOvPfTDrH4TPhEvW2qMlR4JFA2w==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.1.tgz",
+      "integrity": "sha512-ym4Bp0HTP7F3VFssV88WD1ZyCIRoE8H35pXSKwLeMizcdZAYc/t6N9X9Yr9n6t3aG9IH75XDnZ6UeZph0vHMWQ==",
       "dev": true,
       "dependencies": {
-        "@octokit/types": "^6.0.3",
+        "@octokit/types": "^7.0.0",
         "deprecation": "^2.0.0",
         "once": "^1.4.0"
       },
@@ -2111,13 +2111,13 @@
       }
     },
     "node_modules/@octokit/rest": {
-      "version": "19.0.3",
-      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.3.tgz",
-      "integrity": "sha512-5arkTsnnRT7/sbI4fqgSJ35KiFaN7zQm0uQiQtivNQLI8RQx8EHwJCajcTUwmaCMNDg7tdCvqAnc7uvHHPxrtQ==",
+      "version": "19.0.4",
+      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.4.tgz",
+      "integrity": "sha512-LwG668+6lE8zlSYOfwPj4FxWdv/qFXYBpv79TWIQEpBLKA9D/IMcWsF/U9RGpA3YqMVDiTxpgVpEW3zTFfPFTA==",
       "dev": true,
       "dependencies": {
         "@octokit/core": "^4.0.0",
-        "@octokit/plugin-paginate-rest": "^3.0.0",
+        "@octokit/plugin-paginate-rest": "^4.0.0",
         "@octokit/plugin-request-log": "^1.0.4",
         "@octokit/plugin-rest-endpoint-methods": "^6.0.0"
       },
@@ -2126,12 +2126,12 @@
       }
     },
     "node_modules/@octokit/types": {
-      "version": "6.41.0",
-      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
-      "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-7.2.0.tgz",
+      "integrity": "sha512-pYQ/a1U6mHptwhGyp6SvsiM4bWP2s3V95olUeTxas85D/2kN78yN5C8cGN+P4LwJSWUqIEyvq0Qn2WUn6NQRjw==",
       "dev": true,
       "dependencies": {
-        "@octokit/openapi-types": "^12.11.0"
+        "@octokit/openapi-types": "^13.6.0"
       }
     },
     "node_modules/@orchidjs/sifter": {
@@ -2793,9 +2793,9 @@
       }
     },
     "node_modules/apexcharts": {
-      "version": "3.35.4",
-      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.35.4.tgz",
-      "integrity": "sha512-dsXjETHF2OmKtxNv66wBeFGU2qtZQnr6kp/vcNY05GWs4vcBepg54qNgOJ2Gp/gXskiGw/frrmIKGi8lJ/UDnQ==",
+      "version": "3.35.5",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.35.5.tgz",
+      "integrity": "sha512-Bi3aq35xWntI71JlywXTBBAOhuKTbB4wijKw4ClkIAFV904YDkHPIJ8N9LcZq9fvVb0VX1AEmyOFBOB2Vwsuew==",
       "dev": true,
       "dependencies": {
         "svg.draggable.js": "^2.2.2",
@@ -4275,9 +4275,9 @@
       }
     },
     "node_modules/chromatic": {
-      "version": "6.7.4",
-      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.7.4.tgz",
-      "integrity": "sha512-QW4i8RQsON0JVnFnRf+8y70aIJptvC0Oi/26YJ669Dl03WmJRpobNO5qWFPTiv3KFKMc1Qf6/qFsRVZCtn+bfA==",
+      "version": "6.8.0",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.8.0.tgz",
+      "integrity": "sha512-8xwweZKZMO+DlvbLTcn08sl0yM+SHlBtr7FilglaF7HZKvjvlXe+3DKtsB2YKRPEiEVeaOsZ4hCQSQCiEGAw7A==",
       "dev": true,
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.7",
@@ -7326,22 +7326,22 @@
       }
     },
     "node_modules/git-up": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/git-up/-/git-up-6.0.0.tgz",
-      "integrity": "sha512-6RUFSNd1c/D0xtGnyWN2sxza2bZtZ/EmI9448n6rCZruFwV/ezeEn2fJP7XnUQGwf0RAtd/mmUCbtH6JPYA2SA==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/git-up/-/git-up-7.0.0.tgz",
+      "integrity": "sha512-ONdIrbBCFusq1Oy0sC71F5azx8bVkvtZtMJAsv+a6lz5YAmbNnLD6HAB4gptHZVLPR8S2/kVN6Gab7lryq5+lQ==",
       "dev": true,
       "dependencies": {
         "is-ssh": "^1.4.0",
-        "parse-url": "^7.0.2"
+        "parse-url": "^8.1.0"
       }
     },
     "node_modules/git-url-parse": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-12.0.0.tgz",
-      "integrity": "sha512-I6LMWsxV87vysX1WfsoglXsXg6GjQRKq7+Dgiseo+h0skmp5Hp2rzmcEIRQot9CPA+uzU7x1x7jZdqvTFGnB+Q==",
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-13.0.0.tgz",
+      "integrity": "sha512-X1kozCqKL82dMrCLi4vie9SHDC+QugKskAMs4VUbIkhURKg5yDwxDmf6Ixg73J+/xVgK5TXKhzn8a94nHJHpnA==",
       "dev": true,
       "dependencies": {
-        "git-up": "^6.0.0"
+        "git-up": "^7.0.0"
       }
     },
     "node_modules/glob": {
@@ -12515,24 +12515,21 @@
       }
     },
     "node_modules/parse-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/parse-path/-/parse-path-5.0.0.tgz",
-      "integrity": "sha512-qOpH55/+ZJ4jUu/oLO+ifUKjFPNZGfnPJtzvGzKN/4oLMil5m9OH4VpOj6++9/ytJcfks4kzH2hhi87GL/OU9A==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/parse-path/-/parse-path-7.0.0.tgz",
+      "integrity": "sha512-Euf9GG8WT9CdqwuWJGdf3RkUcTBArppHABkO7Lm8IzRQp0e2r/kkFnmhu4TSK30Wcu5rVAZLmfPKSBBi9tWFog==",
       "dev": true,
       "dependencies": {
         "protocols": "^2.0.0"
       }
     },
     "node_modules/parse-url": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/parse-url/-/parse-url-7.0.2.tgz",
-      "integrity": "sha512-PqO4Z0eCiQ08Wj6QQmrmp5YTTxpYfONdOEamrtvK63AmzXpcavIVQubGHxOEwiIoDZFb8uDOoQFS0NCcjqIYQg==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/parse-url/-/parse-url-8.1.0.tgz",
+      "integrity": "sha512-xDvOoLU5XRrcOZvnI6b8zA6n9O9ejNk/GExuz1yBuWUGn9KA97GI6HTs6u02wKara1CeVmZhH+0TZFdWScR89w==",
       "dev": true,
       "dependencies": {
-        "is-ssh": "^1.4.0",
-        "normalize-url": "^6.1.0",
-        "parse-path": "^5.0.0",
-        "protocols": "^2.0.1"
+        "parse-path": "^7.0.0"
       }
     },
     "node_modules/parse5": {
@@ -13635,19 +13632,19 @@
       }
     },
     "node_modules/release-it": {
-      "version": "15.3.0",
-      "resolved": "https://registry.npmjs.org/release-it/-/release-it-15.3.0.tgz",
-      "integrity": "sha512-MI4EBGca+y4SskgBkWNIakFp/GvXfpZEMWkmqmsysPcou/L+E+sKd0oy33ovGCyLic+9SI2rv/lQ3ACgonmqdQ==",
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/release-it/-/release-it-15.4.1.tgz",
+      "integrity": "sha512-w6adXfE+bN/fdcG1KehgS7gYcTfZLYIPml4jPOUEtYQ6NJyaiCtCF/ks032w1jf6EUgvGgWruRP+2TyyyDDBgA==",
       "dev": true,
       "dependencies": {
         "@iarna/toml": "2.2.5",
-        "@octokit/rest": "19.0.3",
+        "@octokit/rest": "19.0.4",
         "async-retry": "1.3.3",
         "chalk": "5.0.1",
         "cosmiconfig": "7.0.1",
         "execa": "6.1.0",
         "form-data": "4.0.0",
-        "git-url-parse": "12.0.0",
+        "git-url-parse": "13.0.0",
         "globby": "13.1.2",
         "got": "12.3.1",
         "inquirer": "9.1.0",
@@ -14211,9 +14208,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "2.78.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz",
-      "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==",
+      "version": "2.79.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.0.tgz",
+      "integrity": "sha512-x4KsrCgwQ7ZJPcFA/SUu6QVcYlO7uRLfLAy0DSA4NS2eG8japdbpM50ToH7z4iObodRYOJ0soneF0iaQRJ6zhA==",
       "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -14356,9 +14353,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sass": {
-      "version": "1.54.4",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz",
-      "integrity": "sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==",
+      "version": "1.54.7",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.7.tgz",
+      "integrity": "sha512-3q7MQz7sCpVG6TLhUfZwGOcd2/sm2ghYN2JEdRjNiW04ILdvahdo9GuAs+bxsxZ3hDCKv+wUT5w0iFWGU0CxlA==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -17470,21 +17467,21 @@
       "dev": true
     },
     "@babel/core": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.10.tgz",
-      "integrity": "sha512-JQM6k6ENcBFKVtWvLavlvi/mPcpYZ3+R+2EySDEMSMbp7Mn4FexlbbJVrx2R7Ijhr01T8gyqrOaABWIOgxeUyw==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.18.13.tgz",
+      "integrity": "sha512-ZisbOvRRusFktksHSG6pjj1CSvkPkcZq/KHD45LAkVP/oiHJkNBZWfpvlLmX8OtHDG8IuzsFlVRWo08w7Qxn0A==",
       "dev": true,
       "requires": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.18.10",
+        "@babel/generator": "^7.18.13",
         "@babel/helper-compilation-targets": "^7.18.9",
         "@babel/helper-module-transforms": "^7.18.9",
         "@babel/helpers": "^7.18.9",
-        "@babel/parser": "^7.18.10",
+        "@babel/parser": "^7.18.13",
         "@babel/template": "^7.18.10",
-        "@babel/traverse": "^7.18.10",
-        "@babel/types": "^7.18.10",
+        "@babel/traverse": "^7.18.13",
+        "@babel/types": "^7.18.13",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -17493,12 +17490,12 @@
       }
     },
     "@babel/generator": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.10.tgz",
-      "integrity": "sha512-0+sW7e3HjQbiHbj1NeU/vN8ornohYlacAfZIaXhdoGweQqgcNy69COVciYYqEXJ/v+9OBA7Frxm4CVAuNqKeNA==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.13.tgz",
+      "integrity": "sha512-CkPg8ySSPuHTYPJYo7IRALdqyjM9HCbt/3uOBEFbzyGVP6Mn8bwFPB0jX6982JVNBlYzM1nnPkfjuXSOPtQeEQ==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.18.10",
+        "@babel/types": "^7.18.13",
         "@jridgewell/gen-mapping": "^0.3.2",
         "jsesc": "^2.5.1"
       },
@@ -17772,9 +17769,9 @@
       }
     },
     "@babel/parser": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.10.tgz",
-      "integrity": "sha512-TYk3OA0HKL6qNryUayb5UUEhM/rkOQozIBEA5ITXh5DWrSp0TlUQXMyZmnWxG/DizSWBeeQ0Zbc5z8UGaaqoeg==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.13.tgz",
+      "integrity": "sha512-dgXcIfMuQ0kgzLB2b9tRZs7TTFFaGM2AbtA4fJgUUYukzGH4jwsS7hzQHEGs67jdehpm22vkgKwvbU+aEflgwg==",
       "dev": true
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
@@ -18524,27 +18521,27 @@
       }
     },
     "@babel/traverse": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.10.tgz",
-      "integrity": "sha512-J7ycxg0/K9XCtLyHf0cz2DqDihonJeIo+z+HEdRe9YuT8TY4A66i+Ab2/xZCEW7Ro60bPCBBfqqboHSamoV3+g==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.13.tgz",
+      "integrity": "sha512-N6kt9X1jRMLPxxxPYWi7tgvJRH/rtoU+dbKAPDM44RFHiMH8igdsaSBgFeskhSl/kLWLDUvIh1RXCrTmg0/zvA==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.18.6",
-        "@babel/generator": "^7.18.10",
+        "@babel/generator": "^7.18.13",
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-function-name": "^7.18.9",
         "@babel/helper-hoist-variables": "^7.18.6",
         "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/parser": "^7.18.10",
-        "@babel/types": "^7.18.10",
+        "@babel/parser": "^7.18.13",
+        "@babel/types": "^7.18.13",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       }
     },
     "@babel/types": {
-      "version": "7.18.10",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.10.tgz",
-      "integrity": "sha512-MJvnbEiiNkpjo+LknnmRrqbY1GPUUggjv+wQVjetM/AONoupqRALB7I6jGqNUAZsKcRIEu2J6FRFvsczljjsaQ==",
+      "version": "7.18.13",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.13.tgz",
+      "integrity": "sha512-ePqfTihzW0W6XAU+aMw2ykilisStJfDnsejDCXRchCcMJ4O0+8DhPXf2YUbZ6wjBlsEmZwLK/sPweWtu8hcJYQ==",
       "dev": true,
       "requires": {
         "@babel/helper-string-parser": "^7.18.10",
@@ -18715,64 +18712,64 @@
       }
     },
     "@octokit/auth-token": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.0.tgz",
-      "integrity": "sha512-MDNFUBcJIptB9At7HiV7VCvU3NcL4GnfCQaP8C5lrxWrRPMJBnemYtehaKSOlaM7AYxeRyj9etenu8LVpSpVaQ==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.1.tgz",
+      "integrity": "sha512-/USkK4cioY209wXRpund6HZzHo9GmjakpV9ycOkpMcMxMk7QVcVFVyCMtzvXYiHsB2crgDgrtNYSELYFBXhhaA==",
       "dev": true,
       "requires": {
-        "@octokit/types": "^6.0.3"
+        "@octokit/types": "^7.0.0"
       }
     },
     "@octokit/core": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.0.4.tgz",
-      "integrity": "sha512-sUpR/hc4Gc7K34o60bWC7WUH6Q7T6ftZ2dUmepSyJr9PRF76/qqkWjE2SOEzCqLA5W83SaISymwKtxks+96hPQ==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.0.5.tgz",
+      "integrity": "sha512-4R3HeHTYVHCfzSAi0C6pbGXV8UDI5Rk+k3G7kLVNckswN9mvpOzW9oENfjfH3nEmzg8y3AmKmzs8Sg6pLCeOCA==",
       "dev": true,
       "requires": {
         "@octokit/auth-token": "^3.0.0",
         "@octokit/graphql": "^5.0.0",
         "@octokit/request": "^6.0.0",
         "@octokit/request-error": "^3.0.0",
-        "@octokit/types": "^6.0.3",
+        "@octokit/types": "^7.0.0",
         "before-after-hook": "^2.2.0",
         "universal-user-agent": "^6.0.0"
       }
     },
     "@octokit/endpoint": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.0.tgz",
-      "integrity": "sha512-Kz/mIkOTjs9rV50hf/JK9pIDl4aGwAtT8pry6Rpy+hVXkAPhXanNQRxMoq6AeRgDCZR6t/A1zKniY2V1YhrzlQ==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.1.tgz",
+      "integrity": "sha512-/wTXAJwt0HzJ2IeE4kQXO+mBScfzyCkI0hMtkIaqyXd9zg76OpOfNQfHL9FlaxAV2RsNiOXZibVWloy8EexENg==",
       "dev": true,
       "requires": {
-        "@octokit/types": "^6.0.3",
+        "@octokit/types": "^7.0.0",
         "is-plain-object": "^5.0.0",
         "universal-user-agent": "^6.0.0"
       }
     },
     "@octokit/graphql": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.0.tgz",
-      "integrity": "sha512-1ZZ8tX4lUEcLPvHagfIVu5S2xpHYXAmgN0+95eAOPoaVPzCfUXJtA5vASafcpWcO86ze0Pzn30TAx72aB2aguQ==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.1.tgz",
+      "integrity": "sha512-sxmnewSwAixkP1TrLdE6yRG53eEhHhDTYUykUwdV9x8f91WcbhunIHk9x1PZLALdBZKRPUO2HRcm4kezZ79HoA==",
       "dev": true,
       "requires": {
         "@octokit/request": "^6.0.0",
-        "@octokit/types": "^6.0.3",
+        "@octokit/types": "^7.0.0",
         "universal-user-agent": "^6.0.0"
       }
     },
     "@octokit/openapi-types": {
-      "version": "12.11.0",
-      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-12.11.0.tgz",
-      "integrity": "sha512-VsXyi8peyRq9PqIz/tpqiL2w3w80OgVMwBHltTml3LmVvXiphgeqmY9mvBw9Wu7e0QWk/fqD37ux8yP5uVekyQ==",
+      "version": "13.6.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-13.6.0.tgz",
+      "integrity": "sha512-bxftLwoZ2J6zsU1rzRvk0O32j7lVB0NWWn+P5CDHn9zPzytasR3hdAeXlTngRDkqv1LyEeuy5psVnDkmOSwrcQ==",
       "dev": true
     },
     "@octokit/plugin-paginate-rest": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-3.1.0.tgz",
-      "integrity": "sha512-+cfc40pMzWcLkoDcLb1KXqjX0jTGYXjKuQdFQDc6UAknISJHnZTiBqld6HDwRJvD4DsouDKrWXNbNV0lE/3AXA==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-4.2.0.tgz",
+      "integrity": "sha512-8otLCIK9esfmOCY14CBnG/xPqv0paf14rc+s9tHpbOpeFwrv5CnECKW1qdqMAT60ngAa9eB1bKQ+l2YCpi0HPQ==",
       "dev": true,
       "requires": {
-        "@octokit/types": "^6.41.0"
+        "@octokit/types": "^7.2.0"
       }
     },
     "@octokit/plugin-request-log": {
@@ -18783,24 +18780,24 @@
       "requires": {}
     },
     "@octokit/plugin-rest-endpoint-methods": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-6.2.0.tgz",
-      "integrity": "sha512-PZ+yfkbZAuRUtqu6Y191/V3eM0KBPx+Yq7nh+ONPdpm3EX4pd5UnK2y2XgO/0AtNum5a4aJCDjqsDuUZ2hWRXw==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-6.4.0.tgz",
+      "integrity": "sha512-YP4eUqZ6vORy/eZOTdil1ZSrMt0kv7i/CVw+HhC2C0yJN+IqTc/rot957JQ7JfyeJD6HZOjLg6Jp1o9cPhI9KA==",
       "dev": true,
       "requires": {
-        "@octokit/types": "^6.41.0",
+        "@octokit/types": "^7.2.0",
         "deprecation": "^2.3.1"
       }
     },
     "@octokit/request": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.0.tgz",
-      "integrity": "sha512-7IAmHnaezZrgUqtRShMlByJK33MT9ZDnMRgZjnRrRV9a/jzzFwKGz0vxhFU6i7VMLraYcQ1qmcAOin37Kryq+Q==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.1.tgz",
+      "integrity": "sha512-gYKRCia3cpajRzDSU+3pt1q2OcuC6PK8PmFIyxZDWCzRXRSIBH8jXjFJ8ZceoygBIm0KsEUg4x1+XcYBz7dHPQ==",
       "dev": true,
       "requires": {
         "@octokit/endpoint": "^7.0.0",
         "@octokit/request-error": "^3.0.0",
-        "@octokit/types": "^6.16.1",
+        "@octokit/types": "^7.0.0",
         "is-plain-object": "^5.0.0",
         "node-fetch": "^2.6.7",
         "universal-user-agent": "^6.0.0"
@@ -18840,35 +18837,35 @@
       }
     },
     "@octokit/request-error": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.0.tgz",
-      "integrity": "sha512-WBtpzm9lR8z4IHIMtOqr6XwfkGvMOOILNLxsWvDwtzm/n7f5AWuqJTXQXdDtOvPfTDrH4TPhEvW2qMlR4JFA2w==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.1.tgz",
+      "integrity": "sha512-ym4Bp0HTP7F3VFssV88WD1ZyCIRoE8H35pXSKwLeMizcdZAYc/t6N9X9Yr9n6t3aG9IH75XDnZ6UeZph0vHMWQ==",
       "dev": true,
       "requires": {
-        "@octokit/types": "^6.0.3",
+        "@octokit/types": "^7.0.0",
         "deprecation": "^2.0.0",
         "once": "^1.4.0"
       }
     },
     "@octokit/rest": {
-      "version": "19.0.3",
-      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.3.tgz",
-      "integrity": "sha512-5arkTsnnRT7/sbI4fqgSJ35KiFaN7zQm0uQiQtivNQLI8RQx8EHwJCajcTUwmaCMNDg7tdCvqAnc7uvHHPxrtQ==",
+      "version": "19.0.4",
+      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.4.tgz",
+      "integrity": "sha512-LwG668+6lE8zlSYOfwPj4FxWdv/qFXYBpv79TWIQEpBLKA9D/IMcWsF/U9RGpA3YqMVDiTxpgVpEW3zTFfPFTA==",
       "dev": true,
       "requires": {
         "@octokit/core": "^4.0.0",
-        "@octokit/plugin-paginate-rest": "^3.0.0",
+        "@octokit/plugin-paginate-rest": "^4.0.0",
         "@octokit/plugin-request-log": "^1.0.4",
         "@octokit/plugin-rest-endpoint-methods": "^6.0.0"
       }
     },
     "@octokit/types": {
-      "version": "6.41.0",
-      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
-      "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-7.2.0.tgz",
+      "integrity": "sha512-pYQ/a1U6mHptwhGyp6SvsiM4bWP2s3V95olUeTxas85D/2kN78yN5C8cGN+P4LwJSWUqIEyvq0Qn2WUn6NQRjw==",
       "dev": true,
       "requires": {
-        "@octokit/openapi-types": "^12.11.0"
+        "@octokit/openapi-types": "^13.6.0"
       }
     },
     "@orchidjs/sifter": {
@@ -19396,9 +19393,9 @@
       }
     },
     "apexcharts": {
-      "version": "3.35.4",
-      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.35.4.tgz",
-      "integrity": "sha512-dsXjETHF2OmKtxNv66wBeFGU2qtZQnr6kp/vcNY05GWs4vcBepg54qNgOJ2Gp/gXskiGw/frrmIKGi8lJ/UDnQ==",
+      "version": "3.35.5",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.35.5.tgz",
+      "integrity": "sha512-Bi3aq35xWntI71JlywXTBBAOhuKTbB4wijKw4ClkIAFV904YDkHPIJ8N9LcZq9fvVb0VX1AEmyOFBOB2Vwsuew==",
       "dev": true,
       "requires": {
         "svg.draggable.js": "^2.2.2",
@@ -20498,9 +20495,9 @@
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="
     },
     "chromatic": {
-      "version": "6.7.4",
-      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.7.4.tgz",
-      "integrity": "sha512-QW4i8RQsON0JVnFnRf+8y70aIJptvC0Oi/26YJ669Dl03WmJRpobNO5qWFPTiv3KFKMc1Qf6/qFsRVZCtn+bfA==",
+      "version": "6.8.0",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.8.0.tgz",
+      "integrity": "sha512-8xwweZKZMO+DlvbLTcn08sl0yM+SHlBtr7FilglaF7HZKvjvlXe+3DKtsB2YKRPEiEVeaOsZ4hCQSQCiEGAw7A==",
       "dev": true,
       "requires": {
         "@discoveryjs/json-ext": "^0.5.7",
@@ -22912,22 +22909,22 @@
       }
     },
     "git-up": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/git-up/-/git-up-6.0.0.tgz",
-      "integrity": "sha512-6RUFSNd1c/D0xtGnyWN2sxza2bZtZ/EmI9448n6rCZruFwV/ezeEn2fJP7XnUQGwf0RAtd/mmUCbtH6JPYA2SA==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/git-up/-/git-up-7.0.0.tgz",
+      "integrity": "sha512-ONdIrbBCFusq1Oy0sC71F5azx8bVkvtZtMJAsv+a6lz5YAmbNnLD6HAB4gptHZVLPR8S2/kVN6Gab7lryq5+lQ==",
       "dev": true,
       "requires": {
         "is-ssh": "^1.4.0",
-        "parse-url": "^7.0.2"
+        "parse-url": "^8.1.0"
       }
     },
     "git-url-parse": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-12.0.0.tgz",
-      "integrity": "sha512-I6LMWsxV87vysX1WfsoglXsXg6GjQRKq7+Dgiseo+h0skmp5Hp2rzmcEIRQot9CPA+uzU7x1x7jZdqvTFGnB+Q==",
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-13.0.0.tgz",
+      "integrity": "sha512-X1kozCqKL82dMrCLi4vie9SHDC+QugKskAMs4VUbIkhURKg5yDwxDmf6Ixg73J+/xVgK5TXKhzn8a94nHJHpnA==",
       "dev": true,
       "requires": {
-        "git-up": "^6.0.0"
+        "git-up": "^7.0.0"
       }
     },
     "glob": {
@@ -26880,24 +26877,21 @@
       "dev": true
     },
     "parse-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/parse-path/-/parse-path-5.0.0.tgz",
-      "integrity": "sha512-qOpH55/+ZJ4jUu/oLO+ifUKjFPNZGfnPJtzvGzKN/4oLMil5m9OH4VpOj6++9/ytJcfks4kzH2hhi87GL/OU9A==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/parse-path/-/parse-path-7.0.0.tgz",
+      "integrity": "sha512-Euf9GG8WT9CdqwuWJGdf3RkUcTBArppHABkO7Lm8IzRQp0e2r/kkFnmhu4TSK30Wcu5rVAZLmfPKSBBi9tWFog==",
       "dev": true,
       "requires": {
         "protocols": "^2.0.0"
       }
     },
     "parse-url": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/parse-url/-/parse-url-7.0.2.tgz",
-      "integrity": "sha512-PqO4Z0eCiQ08Wj6QQmrmp5YTTxpYfONdOEamrtvK63AmzXpcavIVQubGHxOEwiIoDZFb8uDOoQFS0NCcjqIYQg==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/parse-url/-/parse-url-8.1.0.tgz",
+      "integrity": "sha512-xDvOoLU5XRrcOZvnI6b8zA6n9O9ejNk/GExuz1yBuWUGn9KA97GI6HTs6u02wKara1CeVmZhH+0TZFdWScR89w==",
       "dev": true,
       "requires": {
-        "is-ssh": "^1.4.0",
-        "normalize-url": "^6.1.0",
-        "parse-path": "^5.0.0",
-        "protocols": "^2.0.1"
+        "parse-path": "^7.0.0"
       }
     },
     "parse5": {
@@ -27734,19 +27728,19 @@
       }
     },
     "release-it": {
-      "version": "15.3.0",
-      "resolved": "https://registry.npmjs.org/release-it/-/release-it-15.3.0.tgz",
-      "integrity": "sha512-MI4EBGca+y4SskgBkWNIakFp/GvXfpZEMWkmqmsysPcou/L+E+sKd0oy33ovGCyLic+9SI2rv/lQ3ACgonmqdQ==",
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/release-it/-/release-it-15.4.1.tgz",
+      "integrity": "sha512-w6adXfE+bN/fdcG1KehgS7gYcTfZLYIPml4jPOUEtYQ6NJyaiCtCF/ks032w1jf6EUgvGgWruRP+2TyyyDDBgA==",
       "dev": true,
       "requires": {
         "@iarna/toml": "2.2.5",
-        "@octokit/rest": "19.0.3",
+        "@octokit/rest": "19.0.4",
         "async-retry": "1.3.3",
         "chalk": "5.0.1",
         "cosmiconfig": "7.0.1",
         "execa": "6.1.0",
         "form-data": "4.0.0",
-        "git-url-parse": "12.0.0",
+        "git-url-parse": "13.0.0",
         "globby": "13.1.2",
         "got": "12.3.1",
         "inquirer": "9.1.0",
@@ -28167,9 +28161,9 @@
       }
     },
     "rollup": {
-      "version": "2.78.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz",
-      "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==",
+      "version": "2.79.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.0.tgz",
+      "integrity": "sha512-x4KsrCgwQ7ZJPcFA/SUu6QVcYlO7uRLfLAy0DSA4NS2eG8japdbpM50ToH7z4iObodRYOJ0soneF0iaQRJ6zhA==",
       "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
@@ -28274,9 +28268,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
-      "version": "1.54.4",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz",
-      "integrity": "sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==",
+      "version": "1.54.7",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.7.tgz",
+      "integrity": "sha512-3q7MQz7sCpVG6TLhUfZwGOcd2/sm2ghYN2JEdRjNiW04ILdvahdo9GuAs+bxsxZ3hDCKv+wUT5w0iFWGU0CxlA==",
       "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
diff --git a/package.json b/package.json
index 177b009d02..96111e2e09 100644
--- a/package.json
+++ b/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",
@@ -114,7 +114,7 @@
     "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",

From b4a078f32a429cda1e1ecc9917b3c7c3dbfeb774 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Wed, 31 Aug 2022 22:47:29 +0200
Subject: [PATCH 5/5] move SCSS variables to CSS variables (#1214)

---
 src/js/src/tabler.js                          |  17 ++
 src/js/tabler.js                              |   2 +
 src/pages/_data/charts.yml                    |  72 +++--
 src/pages/_data/colors.yml                    | 284 +++++++++---------
 src/pages/_data/maps-vector.yml               |   6 +-
 src/pages/_docs/avatars.md                    |   2 +-
 src/pages/_docs/switch-icon.md                |   4 +-
 src/pages/_includes/cards/charts/sales.html   |   2 +-
 src/pages/_includes/cards/map-vector.html     |   2 +-
 .../_includes/cards/most-visited-pages.html   |   4 +-
 src/pages/_includes/cards/table-users.html    |   2 +-
 src/pages/_includes/docs/menu.html            |   2 +-
 src/pages/_includes/layout/homepage.html      |   2 +-
 src/pages/_includes/ui/chart-heatmap.html     |  10 +-
 src/pages/_includes/ui/chart-sparkline.html   |   4 +-
 src/pages/_includes/ui/chart.html             |   2 +-
 src/pages/_includes/ui/map-vector.html        |   8 +-
 src/pages/_includes/ui/map.html               |   2 +-
 src/pages/_includes/ui/select.html            |   2 +-
 src/pages/_layouts/base.html                  |   6 +-
 src/pages/_layouts/docs.html                  |   2 +-
 src/pages/_plugins/jekyll-filters.rb          |  14 +-
 src/pages/activity.html                       |   1 +
 src/pages/widgets.html                        |   4 +-
 src/scss/_mixins-override.scss                |  52 ++--
 src/scss/_utilities.scss                      |   4 +-
 src/scss/_variables.scss                      | 150 +++++----
 src/scss/demo.scss                            |   2 +-
 src/scss/demo/_highlight.scss                 |   2 +-
 src/scss/layout/_core.scss                    |  16 +-
 src/scss/layout/_dark.scss                    |   3 +-
 src/scss/layout/_footer.scss                  |   2 +-
 src/scss/layout/_navbar.scss                  |  12 +-
 src/scss/layout/_page.scss                    |   2 +-
 src/scss/ui/_avatars.scss                     |   4 +-
 src/scss/ui/_buttons.scss                     |  17 +-
 src/scss/ui/_calendars.scss                   |  10 +-
 src/scss/ui/_cards.scss                       |   2 +-
 src/scss/ui/_carousel.scss                    |   2 +-
 src/scss/ui/_empty.scss                       |   2 +-
 src/scss/ui/_flags.scss                       |   4 +-
 src/scss/ui/_forms.scss                       |   4 +-
 src/scss/ui/_grid.scss                        |   4 +-
 src/scss/ui/_legend.scss                      |  12 +-
 src/scss/ui/_lists.scss                       |  15 +-
 src/scss/ui/_markdown.scss                    |   2 +-
 src/scss/ui/_nav.scss                         |   8 +-
 src/scss/ui/_offcanvas.scss                   |   2 +-
 src/scss/ui/_pagination.scss                  |   2 +-
 src/scss/ui/_placeholder.scss                 |   2 +-
 src/scss/ui/_progress.scss                    |   9 +-
 src/scss/ui/_ribbons.scss                     |   8 +-
 src/scss/ui/_steps.scss                       |   2 +-
 src/scss/ui/_type.scss                        |   6 +-
 src/scss/ui/forms/_form-colorinput.scss       |   4 +-
 src/scss/ui/forms/_form-icon.scss             |   2 +-
 src/scss/ui/forms/_form-imagecheck.scss       |   4 +-
 src/scss/ui/forms/_form-selectgroup.scss      |  10 +-
 src/scss/utils/_colors.scss                   |   7 +-
 src/scss/vendor/_dropzone.scss                |   2 +-
 src/scss/vendor/_litepicker.scss              |  12 +-
 src/scss/vendor/_plyr.scss                    |   2 +-
 src/scss/vendor/_tom-select.scss              |   2 +
 63 files changed, 463 insertions(+), 400 deletions(-)
 create mode 100644 src/js/src/tabler.js

diff --git a/src/js/src/tabler.js b/src/js/src/tabler.js
new file mode 100644
index 0000000000..2439558abe
--- /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 fa7911c193..916237191c 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 916671ec12..0427e4015a 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 2787005dbf..ce2bed31b8 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 eae74e33ff..368fe660f5 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 9440355e5e..419c9bede4 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 9c2d0b9a8c..67b06d833e 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 c5b50cdcd6..94e0f405d8 100644
--- a/src/pages/_includes/cards/charts/sales.html
+++ b/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>
diff --git a/src/pages/_includes/cards/map-vector.html b/src/pages/_includes/cards/map-vector.html
index 5fc10a25a0..76d4bf1148 100644
--- a/src/pages/_includes/cards/map-vector.html
+++ b/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>
diff --git a/src/pages/_includes/cards/most-visited-pages.html b/src/pages/_includes/cards/most-visited-pages.html
index eba321ccca..8f9509d945 100644
--- a/src/pages/_includes/cards/most-visited-pages.html
+++ b/src/pages/_includes/cards/most-visited-pages.html
@@ -24,9 +24,9 @@ <h3 class="card-title">Most Visited Pages</h3>
 				</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 %}
diff --git a/src/pages/_includes/cards/table-users.html b/src/pages/_includes/cards/table-users.html
index 2b8c2762e0..f25ff00658 100644
--- a/src/pages/_includes/cards/table-users.html
+++ b/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" %}
diff --git a/src/pages/_includes/docs/menu.html b/src/pages/_includes/docs/menu.html
index d435ecc6b8..c78092a3d8 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 %}
-				<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 %}
diff --git a/src/pages/_includes/layout/homepage.html b/src/pages/_includes/layout/homepage.html
index 88d3349c4f..cee0fefb36 100644
--- a/src/pages/_includes/layout/homepage.html
+++ b/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" %}
diff --git a/src/pages/_includes/ui/chart-heatmap.html b/src/pages/_includes/ui/chart-heatmap.html
index 011cd86dd5..1810278778 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 313165ba65..52763fe1c9 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 4d5fef10c6..c13d9c8dfd 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 991bf8f70c..418e44b542 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 be07f0a385..39442ebfb7 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 ef05a07a90..2023d11aaa 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 %}
-							<span class="badge bg-blue-lt">{{ label }}</span>
+							<span class="badge bg-primary-lt">{{ label }}</span>
 						{% endcapture %}
 					{% endif %}
 
diff --git a/src/pages/_layouts/base.html b/src/pages/_layouts/base.html
index 9bb4ceca78..e0ecc195b6 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 %}
+
 	<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 %}
diff --git a/src/pages/_layouts/docs.html b/src/pages/_layouts/docs.html
index 8dbe0cc9d7..10e8d0423b 100644
--- a/src/pages/_layouts/docs.html
+++ b/src/pages/_layouts/docs.html
@@ -26,7 +26,7 @@ <h1 class="m-0">{{ page.title }}</h1>
 							{% 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>
diff --git a/src/pages/_plugins/jekyll-filters.rb b/src/pages/_plugins/jekyll-filters.rb
index ed51dff54d..3a2c59e448 100644
--- a/src/pages/_plugins/jekyll-filters.rb
+++ b/src/pages/_plugins/jekyll-filters.rb
@@ -91,13 +91,13 @@ def concat_objects(object, object2)
       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 176c0f4488..49308adf05 100644
--- a/src/pages/activity.html
+++ b/src/pages/activity.html
@@ -1,6 +1,7 @@
 ---
 title: Activity
 page-header: Activity
+menu: extra.activity
 ---
 
 <div class="row justify-content-center">
diff --git a/src/pages/widgets.html b/src/pages/widgets.html
index e218d7d907..9fdf73c81a 100644
--- a/src/pages/widgets.html
+++ b/src/pages/widgets.html
@@ -37,7 +37,7 @@
 	</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 @@
 		{% 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>
diff --git a/src/scss/_mixins-override.scss b/src/scss/_mixins-override.scss
index e0c6cdaa9b..c6fe2ec464 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 dfddb0f851..256fad2175 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 774325d8a9..e6148cffb7 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,<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
@@ -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,<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;
 
@@ -646,8 +669,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;
 
@@ -659,14 +683,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;
diff --git a/src/scss/demo.scss b/src/scss/demo.scss
index dd44528a68..f863035382 100644
--- a/src/scss/demo.scss
+++ b/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 {
diff --git a/src/scss/demo/_highlight.scss b/src/scss/demo/_highlight.scss
index a936fa3458..68439f8f9b 100644
--- a/src/scss/demo/_highlight.scss
+++ b/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;
 }
 
diff --git a/src/scss/layout/_core.scss b/src/scss/layout/_core.scss
index 45ba9ad973..a43120d4aa 100644
--- a/src/scss/layout/_core.scss
+++ b/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 {
diff --git a/src/scss/layout/_dark.scss b/src/scss/layout/_dark.scss
index 4a1a5e4443..df64513df4 100644
--- a/src/scss/layout/_dark.scss
+++ b/src/scss/layout/_dark.scss
@@ -19,7 +19,6 @@ body:not(.theme-dark) .hide-theme-light {
     --#{$prefix}body-bg-rgb: #{to-rgb($dark-mode-darken)};
 
     --#{$prefix}card-bg: #{$dark};
-    --#{$prefix}card-bg-rgb: #{to-rgb($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) {
diff --git a/src/scss/layout/_footer.scss b/src/scss/layout/_footer.scss
index 87d1c1cbec..12f0608f2b 100644
--- a/src/scss/layout/_footer.scss
+++ b/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;
 }
 
diff --git a/src/scss/layout/_navbar.scss b/src/scss/layout/_navbar.scss
index 0cfae9fb5f..a3f728b3c3 100644
--- a/src/scss/layout/_navbar.scss
+++ b/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;
 }
 
diff --git a/src/scss/layout/_page.scss b/src/scss/layout/_page.scss
index 031e2888a9..e54a7686d3 100644
--- a/src/scss/layout/_page.scss
+++ b/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;
 }
 
diff --git a/src/scss/ui/_avatars.scss b/src/scss/ui/_avatars.scss
index 1012ee48d7..dba9677871 100644
--- a/src/scss/ui/_avatars.scss
+++ b/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;
   }
 }
diff --git a/src/scss/ui/_buttons.scss b/src/scss/ui/_buttons.scss
index 3ea7084f23..be2454ff27 100644
--- a/src/scss/ui/_buttons.scss
+++ b/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 {
diff --git a/src/scss/ui/_calendars.scss b/src/scss/ui/_calendars.scss
index 1cf3867d78..e847022a13 100644
--- a/src/scss/ui/_calendars.scss
+++ b/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);
     }
   }
 
diff --git a/src/scss/ui/_cards.scss b/src/scss/ui/_cards.scss
index e89de8db70..b43f948032 100644
--- a/src/scss/ui/_cards.scss
+++ b/src/scss/ui/_cards.scss
@@ -118,7 +118,7 @@
     bottom: -1px;
     left: -1px;
     content: "";
-    border: 1px solid $primary;
+    border: 1px solid var(--#{$prefix}primary);
     border-radius: inherit;
   }
 }
diff --git a/src/scss/ui/_carousel.scss b/src/scss/ui/_carousel.scss
index 628635e93d..b02869dd0b 100644
--- a/src/scss/ui/_carousel.scss
+++ b/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;
diff --git a/src/scss/ui/_empty.scss b/src/scss/ui/_empty.scss
index 6b13dc58b4..c67c3a94c7 100644
--- a/src/scss/ui/_empty.scss
+++ b/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);
 }
diff --git a/src/scss/ui/_flags.scss b/src/scss/ui/_flags.scss
index ff3d066d07..d400441c09 100644
--- a/src/scss/ui/_flags.scss
+++ b/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 {
diff --git a/src/scss/ui/_forms.scss b/src/scss/ui/_forms.scss
index dcbd0effbc..73d3ba30de 100644
--- a/src/scss/ui/_forms.scss
+++ b/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);
   }
 }
 
diff --git a/src/scss/ui/_grid.scss b/src/scss/ui/_grid.scss
index 87d8ce18c3..99ee22db50 100644
--- a/src/scss/ui/_grid.scss
+++ b/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) {
diff --git a/src/scss/ui/_legend.scss b/src/scss/ui/_legend.scss
index e08df38154..0d7d236c72 100644
--- a/src/scss/ui/_legend.scss
+++ b/src/scss/ui/_legend.scss
@@ -1,7 +1,11 @@
+/**
+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;
 }
diff --git a/src/scss/ui/_lists.scss b/src/scss/ui/_lists.scss
index 7ca8dca432..c07f1e1cdf 100644
--- a/src/scss/ui/_lists.scss
+++ b/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;
diff --git a/src/scss/ui/_markdown.scss b/src/scss/ui/_markdown.scss
index 4b843feab8..74ad3055a2 100644
--- a/src/scss/ui/_markdown.scss
+++ b/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
diff --git a/src/scss/ui/_nav.scss b/src/scss/ui/_nav.scss
index 724b95f332..648ce28c2e 100644
--- a/src/scss/ui/_nav.scss
+++ b/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;
diff --git a/src/scss/ui/_offcanvas.scss b/src/scss/ui/_offcanvas.scss
index 12c6fb48ef..367fa6f97f 100644
--- a/src/scss/ui/_offcanvas.scss
+++ b/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 {
diff --git a/src/scss/ui/_pagination.scss b/src/scss/ui/_pagination.scss
index 5117a73678..5c6012764c 100644
--- a/src/scss/ui/_pagination.scss
+++ b/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 {
diff --git a/src/scss/ui/_placeholder.scss b/src/scss/ui/_placeholder.scss
index 4b6e511df5..106d2a50ed 100644
--- a/src/scss/ui/_placeholder.scss
+++ b/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
diff --git a/src/scss/ui/_progress.scss b/src/scss/ui/_progress.scss
index 0ede2ef1d2..bcc4bbec62 100644
--- a/src/scss/ui/_progress.scss
+++ b/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;
   }
 }
diff --git a/src/scss/ui/_ribbons.scss b/src/scss/ui/_ribbons.scss
index 1af6508b44..6a459a19ae 100644
--- a/src/scss/ui/_ribbons.scss
+++ b/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;
       }
     }
   }
diff --git a/src/scss/ui/_steps.scss b/src/scss/ui/_steps.scss
index bff89eff5b..f1c6562014 100644
--- a/src/scss/ui/_steps.scss
+++ b/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 {
diff --git a/src/scss/ui/_type.scss b/src/scss/ui/_type.scss
index edde58fb4b..8a2056ee0d 100644
--- a/src/scss/ui/_type.scss
+++ b/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 {
diff --git a/src/scss/ui/forms/_form-colorinput.scss b/src/scss/ui/forms/_form-colorinput.scss
index 24abe05cdd..bfb9e75245 100644
--- a/src/scss/ui/forms/_form-colorinput.scss
+++ b/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;
   }
 
diff --git a/src/scss/ui/forms/_form-icon.scss b/src/scss/ui/forms/_form-icon.scss
index 8d4dc62ad0..b63e6505f5 100644
--- a/src/scss/ui/forms/_form-icon.scss
+++ b/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;
 
diff --git a/src/scss/ui/forms/_form-imagecheck.scss b/src/scss/ui/forms/_form-imagecheck.scss
index 79b0f78352..764fc5cf24 100644
--- a/src/scss/ui/forms/_form-imagecheck.scss
+++ b/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 {
diff --git a/src/scss/ui/forms/_form-selectgroup.scss b/src/scss/ui/forms/_form-selectgroup.scss
index 55b9c2ef43..7fa18b40eb 100644
--- a/src/scss/ui/forms/_form-selectgroup.scss
+++ b/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 {
diff --git a/src/scss/utils/_colors.scss b/src/scss/utils/_colors.scss
index 45dc10a09e..f481b8ab52 100644
--- a/src/scss/utils/_colors.scss
+++ b/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
   }
 }
 
diff --git a/src/scss/vendor/_dropzone.scss b/src/scss/vendor/_dropzone.scss
index dbfac056c6..01546590df 100644
--- a/src/scss/vendor/_dropzone.scss
+++ b/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 {
diff --git a/src/scss/vendor/_litepicker.scss b/src/scss/vendor/_litepicker.scss
index f393451d13..8997a43f13 100644
--- a/src/scss/vendor/_litepicker.scss
+++ b/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;
   }
 
diff --git a/src/scss/vendor/_plyr.scss b/src/scss/vendor/_plyr.scss
index bbd4d06a9b..1addf70005 100644
--- a/src/scss/vendor/_plyr.scss
+++ b/src/scss/vendor/_plyr.scss
@@ -1,3 +1,3 @@
 body {
-  --plyr-color-main: #{$primary};
+  --plyr-color-main: #{var(--#{$prefix}primary)};
 }
\ No newline at end of file
diff --git a/src/scss/vendor/_tom-select.scss b/src/scss/vendor/_tom-select.scss
index 2c21442c5e..ad02e7e0a7 100644
--- a/src/scss/vendor/_tom-select.scss
+++ b/src/scss/vendor/_tom-select.scss
@@ -1,3 +1,5 @@
+$select-color-dropdown-border-top: red;
+
 @import "~tom-select/src/scss/tom-select.bootstrap5.scss";
 
 .ts-input {