Merge remote-tracking branch 'origin/card' into card

# Conflicts:
#	src/scss/layout/_dark.scss

gulpfile.js

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

package.json

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

src/js/demo-theme.js

@@ -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}`);

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

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

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;