feat: enhance sidebar and layout options in theme settings

.changeset/bootstrap-exports-cleanup.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Refactored Bootstrap exports to use single source of truth in `bootstrap.js` and removed duplicate exports from `tabler.js` for better maintainability.

.changeset/btn-icon-square.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fixed `.btn-icon` to be square by aligning `min-width` calculation with base `.btn` formula.

.changeset/card-gradient-components.md

@@ -1,6 +0,0 @@
----
-"@tabler/core": minor
----
-
-Added `.card-gradient` component with gradient variants, direction modifiers, and animated backgrounds.
-

.changeset/card-gradients-page.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Added new `card-gradients.html` page showcasing various gradient card styles and components.
-

.changeset/change-password-modal.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Added Change Password modal with current password, new password with strength indicator, confirm password validation, and show/hide password toggles.
-

.changeset/confirm-delete-modal.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Added Confirm Delete modal with warning icon, confirmation checkbox, and JavaScript validation to enable delete button only when confirmed.
-

.changeset/crypto-dashboard.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Added new Crypto Dashboard page with cryptocurrency portfolio overview, market data, and order history.
-

.changeset/crypto-data-files.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": patch
----
-
-Added crypto markets and orders data files (`crypto-markets.json`, `crypto-orders.json`) for cryptocurrency dashboard functionality.
-

.changeset/edit-profile-modal.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Added Edit Profile modal with avatar upload, personal information fields, social links, and date of birth.
-

.changeset/eleven-trainers-sip.md

@@ -1,5 +0,0 @@
----
-"@tabler/preview": patch
----
-
-Update Tabler Icons to v3.35.0

.changeset/fix-border-color-translucent-dark.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Updated `$border-color-translucent-dark` from `rgba(72, 110, 149, 0.14)` to `rgba(128, 150, 172, 0.2)` to improve visibility of form checkboxes and other form elements in dark mode.

.changeset/fix-input-icon-z-index.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fixed `.input-icon-addon` z-index issue with form validation feedback and added default height.

.changeset/fix-status-colors-variables.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fixed status color classes to use CSS variables instead of hardcoded values and include social colors (bitbucket, facebook, etc.) in status class generation.

.changeset/fix-white-space-scrollbar.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fixed white space on left side when scrollbar is present by replacing `margin-inline-start: calc(100vw - 100%)` with `scrollbar-gutter: stable` on `html` element, with `overflow-y: scroll` fallback for unsupported browsers.

.changeset/flags-avatars-updates.md

@@ -1,6 +0,0 @@
----
-"@tabler/core": patch
----
-
-Updated flags and avatars styling for better visual consistency.
-

.changeset/funny-kings-double.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Update SCSS to use logical properties

.changeset/geist-fonts.md

@@ -1,7 +0,0 @@
----
-"@tabler/core": minor
-"@tabler/docs": patch
----
-
-Added Geist font family integration.
-

.changeset/language-selector.md

@@ -1,6 +0,0 @@
----
-"@tabler/core": minor
-"@tabler/preview": minor
----
-
-Added language selector dropdown to navbar with flag indicators for multilingual support.

.changeset/many-dogs-rest.md

@@ -1,6 +0,0 @@
----
-"@tabler/core": patch
----
-
-Added `border-top-left-radius` and `border-top-right-radius` to first and last child elements in `.card-table` for proper corner rounding.
-

.changeset/media-print-mixin.md

@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Added `media-print` mixin and print styles to hide interactive components during printing.

.changeset/menu-structure-refactor.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Refactored page-menu structure for dashboards and updated navigation menu organization.
-

.changeset/navbar-side-refactor.md

@@ -1,7 +0,0 @@
----
-"@tabler/core": minor
-"@tabler/preview": minor
----
-
-Refactored navbar-side component by consolidating separate include files (apps, language, notifications, theme, user) into a single `navbar-side.html` file for better maintainability.
-

.changeset/new-task-modal.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Added New Task modal with fields for task name, description, assigned user, priority, due date, and category tags.
-

.changeset/redundant-nullish-operator.md

@@ -1,6 +0,0 @@
----
-"@tabler/core": patch
----
-
-Removed redundant nullish coalescing operator from `html` option in popover and tooltip initialization.
-

.changeset/silly-crabs-walk.md

@@ -1,7 +0,0 @@
----
-"@tabler/core": patch
-"@tabler/preview": patch
----
-
-Added Driver.js library integration and Tour demo page for interactive product tours and onboarding guides.
-

.changeset/tasks-list-page.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Added new Task List page with tables showing tasks organized by status (Upcoming, In Progress, Completed) and modal dialog for adding new tasks.
-

.changeset/upgrade-apexcharts.md

@@ -1,7 +0,0 @@
----
-"@tabler/core": minor
-"@tabler/preview": minor
----
-
-Upgraded `apexcharts` from `3.54.1` to `5.3.6` and added CSS variables (`--chart-{id}-color-{index}`) for dynamic chart colors to fix compatibility with the new version.
-

.changeset/young-needles-love.md

@@ -1,5 +0,0 @@
----
-"@tabler/preview": patch
----
-
-Added comprehensive All Elements page with all UI components and Bootstrap elements

.github/workflows/argos.yml

@@ -26,7 +26,7 @@ jobs:
     if: false
     steps:
       - name: Clone repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Cache turbo build setup
         uses: actions/cache@v4
@@ -40,7 +40,7 @@ jobs:
         uses: pnpm/action-setup@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: "${{ env.NODE }}"
           cache: 'pnpm'

.github/workflows/bundlewatch.yml

@@ -17,7 +17,7 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Cache turbo build setup
         uses: actions/cache@v4
@@ -31,7 +31,7 @@ jobs:
         uses: pnpm/action-setup@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: "${{ env.NODE }}"
           cache: 'pnpm'

.github/workflows/calibreapp-image-actions.yml

@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           persist-credentials: false
 

.github/workflows/lockfiles.yaml

@@ -12,9 +12,9 @@ jobs:
     name: Verify lock file integrity
     steps:
       - name: Clone Tabler
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Prevent lock file change
-        uses: xalvarez/prevent-file-change-action@v3
+        uses: xalvarez/prevent-file-change-action@v2
         with:
           githubToken: ${{ secrets.GITHUB_TOKEN }}
           pattern: Gemfile.lock|pnpm-lock.json|pnpm-lock.yaml

.github/workflows/release.yml

@@ -21,13 +21,13 @@ jobs:
       pull-requests: write # to create pull request
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Install PNPM
         uses: pnpm/action-setup@v4
 
       - name: Setup Node.js 18
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: "${{ env.NODE }}"
           cache: 'pnpm'

.github/workflows/test.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Clone repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Cache turbo build setup
         uses: actions/cache@v4
@@ -28,7 +28,7 @@ jobs:
         uses: pnpm/action-setup@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version: "${{ env.NODE }}"
           cache: 'pnpm'

.prettierrc

@@ -4,17 +4,7 @@
 	"printWidth": 320,
 	"proseWrap": "always",
 	"semi": false,
-	"singleQuote": true,
-	"quoteProps": "consistent",
+	"singleQuote": false,
 	"tabWidth": 2,
-	"useTabs": false,
-	"trailingComma": "all",
-	"overrides": [
-		{
-			"files": "*.scss",
-			"options": {
-				"parser": "scss"
-			}
-		}
-	]
+	"trailingComma": "all"
 }

core/.build/compare-variables.mjs

@@ -1,82 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-// Get __dirname in ES modules
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// File paths (relative to core/.build directory)
-const bootstrapPath = path.join(__dirname, '../node_modules/bootstrap/scss/_variables.scss');
-const tablerPath = path.join(__dirname, '../scss/_variables.scss');
-
-// Function to extract variable names from SCSS file
-function extractVariables(filePath) {
-  const content = fs.readFileSync(filePath, 'utf8');
-  const variables = new Set();
-  
-  // Regex to find SCSS variables
-  // Looks for patterns like: $variable-name: value
-  // Includes variables in maps and lists
-  const variableRegex = /\$([a-zA-Z0-9_-]+)\s*[:=]/g;
-  
-  let match;
-  while ((match = variableRegex.exec(content)) !== null) {
-    const varName = match[1];
-    variables.add(varName);
-  }
-  
-  return variables;
-}
-
-// Main function
-function compareVariables() {
-  console.log('Analyzing Bootstrap variables...');
-  const bootstrapVars = extractVariables(bootstrapPath);
-  console.log(`Found ${bootstrapVars.size} variables in Bootstrap\n`);
-  
-  console.log('Analyzing Tabler variables...');
-  const tablerVars = extractVariables(tablerPath);
-  console.log(`Found ${tablerVars.size} variables in Tabler\n`);
-  
-  // Find variables that are in Bootstrap but not in Tabler
-  const missingInTabler = [];
-  for (const varName of bootstrapVars) {
-    if (!tablerVars.has(varName)) {
-      missingInTabler.push(varName);
-    }
-  }
-  
-  // Sort alphabetically
-  missingInTabler.sort();
-  
-  console.log('='.repeat(60));
-  console.log(`Variables in Bootstrap that are missing in Tabler: ${missingInTabler.length}`);
-  console.log('='.repeat(60));
-  
-  if (missingInTabler.length === 0) {
-    console.log('All Bootstrap variables are present in Tabler!');
-  } else {
-    console.log('\nList of missing variables:\n');
-    missingInTabler.forEach((varName, index) => {
-      console.log(`${(index + 1).toString().padStart(4)}. $${varName}`);
-    });
-  }
-  
-  // Optionally: show statistics
-  console.log('\n' + '='.repeat(60));
-  console.log('Statistics:');
-  console.log(`  Bootstrap: ${bootstrapVars.size} variables`);
-  console.log(`  Tabler:    ${tablerVars.size} variables`);
-  console.log(`  Missing:    ${missingInTabler.length} variables`);
-  console.log(`  Coverage:   ${((1 - missingInTabler.length / bootstrapVars.size) * 100).toFixed(1)}%`);
-  console.log('='.repeat(60));
-}
-
-// Run analysis
-try {
-  compareVariables();
-} catch (error) {
-  console.error('Error during analysis:', error.message);
-  process.exit(1);
-}

core/.build/import-fonts.mjs

@@ -1,55 +0,0 @@
-#!/usr/bin/env node
-
-'use strict'
-
-import { existsSync, mkdirSync } from 'fs'
-import { copySync } from 'fs-extra/esm'
-import { fileURLToPath } from 'url'
-import { join, dirname } from 'node:path'
-
-const __dirname = dirname(fileURLToPath(import.meta.url))
-
-const fromDir = join(__dirname, '..', 'node_modules/geist/dist/fonts')
-const toDir = join(__dirname, '..', 'fonts')
-
-// Create fonts directory if it doesn't exist
-if (!existsSync(toDir)) {
-	mkdirSync(toDir, { recursive: true })
-}
-
-// Copy geist-mono fonts
-const monoFrom = join(fromDir, 'geist-mono')
-const monoTo = join(toDir, 'geist-mono')
-
-if (existsSync(monoFrom)) {
-	if (!existsSync(monoTo)) {
-		mkdirSync(monoTo, { recursive: true })
-	}
-	
-	copySync(monoFrom, monoTo, {
-		dereference: true,
-	})
-	
-	console.log(`Successfully copied geist-mono fonts`)
-} else {
-	console.warn(`Warning: geist-mono fonts not found at ${monoFrom}`)
-}
-
-// Copy geist-sans fonts
-const sansFrom = join(fromDir, 'geist-sans')
-const sansTo = join(toDir, 'geist-sans')
-
-if (existsSync(sansFrom)) {
-	if (!existsSync(sansTo)) {
-		mkdirSync(sansTo, { recursive: true })
-	}
-	
-	copySync(sansFrom, sansTo, {
-		dereference: true,
-	})
-	
-	console.log(`Successfully copied geist-sans fonts`)
-} else {
-	console.warn(`Warning: geist-sans fonts not found at ${sansFrom}`)
-}
-

core/img/flags/eu.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" fill="none" viewBox="0 0 20 15"><path fill="#3d58db" fill-rule="evenodd" d="M0 0v15h20V0z" clip-rule="evenodd"/><path fill="#ffd018" fill-rule="evenodd" d="m9.407 2.442-.14.818.733-.385.735.386-.14-.818.594-.64h-.821L10 1l-.367.804h-.822zm0 10.855-.14.819.734-.387.735.387-.14-.819.594-.639h-.821L10 11.855l-.367.804h-.822l.595.64zM3.484 8.743l.14-.818-.594-.64h.822l.367-.803.367.804h.822l-.595.639.14.818-.734-.386zm1.352 1.77-.14.818.734-.386.735.386-.14-.818.594-.64h-.821L5.43 9.07l-.367.804H4.24zm9.009.818.14-.818-.595-.64h.822l.367-.803.368.804h.821l-.594.639.14.818-.735-.386zm-9.01-6.062-.14.818.735-.386.735.386-.14-.818.594-.639h-.821l-.368-.804-.367.804H4.24zm9.01.818.14-.818-.595-.639h.822l.367-.804.368.804h.821l-.594.64.14.817-.735-.386zM6.66 12.595l-.14.819.735-.387.734.386-.14-.818.595-.639h-.822l-.367-.804-.368.804h-.821zm5.418.819.14-.819-.594-.639h.821l.367-.804.368.804h.821l-.594.64.14.817-.735-.386zM6.52 3.971l.735-.387.734.387-.14-.818.595-.64h-.822l-.367-.804-.368.804h-.821l.594.64zm5.558 0 .14-.818-.594-.64h.821l.367-.804.368.804h.821l-.594.64.14.818-.735-.387zM15.14 7.85l-.14.818.735-.386.735.386-.14-.818.593-.64h-.82l-.368-.803-.368.804h-.821z" clip-rule="evenodd"/></svg> 
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="16" fill="none"><mask id="a" width="21" height="16" x="0" y="0" mask-type="alpha" maskUnits="userSpaceOnUse"><path fill="#fff" d="M.001.927h20v15h-20z"/></mask><g mask="url(#a)"><path fill="#F7FCFF" fill-rule="evenodd" d="M.001.927v15h20v-15h-20Z" clip-rule="evenodd"/><mask id="b" width="21" height="16" x="0" y="0" mask-type="alpha" maskUnits="userSpaceOnUse"><path fill="#fff" fill-rule="evenodd" d="M.001.927v15h20v-15h-20Z" clip-rule="evenodd"/></mask><g fill-rule="evenodd" clip-rule="evenodd" mask="url(#b)"><path fill="#3D58DB" d="M.001.927v15h20v-15h-20Z"/><path fill="#FFD018" d="m9.407 3.137-.14.818L10 3.57l.735.386-.14-.818.594-.64h-.821L10 1.695l-.367.804h-.822l.595.639Zm0 10.855-.14.819.734-.387.735.387-.14-.819.594-.639h-.821L10 12.55l-.367.804h-.822l.595.64ZM3.484 9.438l.14-.818-.594-.64h.822l.367-.803.367.804h.822l-.595.639.14.818-.734-.386-.735.386Zm1.352 1.77-.14.818.734-.386.735.386-.14-.818.594-.64h-.821l-.368-.803-.367.804H4.24l.595.639Zm9.009.818.14-.818-.595-.64h.822l.367-.803.368.804h.821l-.594.639.14.818-.735-.386-.734.386Zm-9.01-6.062-.14.818.735-.386.735.386-.14-.818.594-.639h-.821l-.368-.804-.367.804H4.24l.595.64Zm9.01.818.14-.818-.595-.639h.822l.367-.804.368.804h.821l-.594.64.14.817-.735-.386-.734.386ZM6.66 13.29l-.14.819.735-.387.734.386-.14-.818.595-.639h-.822l-.367-.804-.368.804h-.821l.594.64Zm5.418.819.14-.819-.594-.639h.821l.367-.804.368.804h.821l-.594.64.14.817-.735-.386-.734.386ZM6.52 4.666l.735-.387.734.387-.14-.818.595-.64h-.822l-.367-.804-.368.804h-.821l.594.64-.14.818Zm5.558 0 .14-.818-.594-.64h.821l.367-.804.368.804h.821l-.594.64.14.818-.735-.387-.734.387Zm3.062 3.879-.14.818.735-.386.735.386-.14-.818.593-.64h-.82l-.368-.803-.368.804h-.821l.594.639Z"/></g></g></svg>

core/js/src/autosize.js

@@ -1,8 +1,7 @@
 // Autosize plugin
-const elements = document.querySelectorAll('[data-bs-toggle="autosize"]')
-
+const elements = document.querySelectorAll('[data-bs-toggle="autosize"]');
 if (elements.length) {
-  elements.forEach(function (element) {
-    window.autosize && window.autosize(element)
-  })
-}
+	elements.forEach(function (element) {
+		window.autosize && window.autosize(element);
+	});
+}

core/js/src/bootstrap.js

@@ -1,20 +1,3 @@
-export * as Popper from '@popperjs/core'
+export * as Popper from '@popperjs/core';
 
-// Export all Bootstrap components directly for consistent usage
-export {
-  Alert,
-  Button,
-  Carousel,
-  Collapse,
-  Dropdown,
-  Modal,
-  Offcanvas,
-  Popover,
-  ScrollSpy,
-  Tab,
-  Toast,
-  Tooltip
-} from 'bootstrap'
-
-// Re-export everything as namespace for backward compatibility
-export * as bootstrap from 'bootstrap'
+export { Dropdown, Tooltip, Popover, Tab, Toast } from 'bootstrap';

core/js/src/countup.js

@@ -1,25 +1,23 @@
-const elements = document.querySelectorAll('[data-countup]')
+const elements = document.querySelectorAll('[data-countup]');
 
 if (elements.length) {
-  elements.forEach(function (element) {
-    let options = {}
-    try {
-      const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {}
-      options = Object.assign(
-        {
-          enableScrollSpy: true,
-        },
-        dataOptions,
-      )
-    } catch (error) {}
+	elements.forEach(function (element) {
+		let options = {};
+		try {
+			const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {};
+			options = Object.assign({
+				'enableScrollSpy': true
+			}, dataOptions);
+			
+		} catch (error) {}
 
-    const value = parseInt(element.innerHTML, 10)
+		const value = parseInt(element.innerHTML, 10);
 
-    if (window.countUp && window.countUp.CountUp) {
-      const countUp = new window.countUp.CountUp(element, value, options)
-      if (!countUp.error) {
-        countUp.start()
-      }
-    }
-  })
+		if (window.countUp && window.countUp.CountUp) {
+			const countUp = new window.countUp.CountUp(element, value, options);
+			if (!countUp.error) {
+				countUp.start();
+			}
+		}
+	});
 }

core/js/src/dropdown.js

@@ -1,12 +1,12 @@
-import { Dropdown } from './bootstrap'
+import { Dropdown } from './bootstrap';
 
 /*
 Core dropdowns
  */
-let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'))
+let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'));
 dropdownTriggerList.map(function (dropdownTriggerEl) {
-  let options = {
-    boundary: dropdownTriggerEl.getAttribute('data-bs-boundary') === 'viewport' ? document.querySelector('.btn') : 'clippingParents',
-  }
-  return new Dropdown(dropdownTriggerEl, options)
-})
+	let options = {
+		boundary: dropdownTriggerEl.getAttribute('data-bs-boundary') === 'viewport' ? document.querySelector('.btn') : 'clippingParents',
+	}
+	return new Dropdown(dropdownTriggerEl, options);
+});

core/js/src/input-mask.js

@@ -1,10 +1,9 @@
 // Input mask plugin
 
-var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
+var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'));
 maskElementList.map(function (maskEl) {
-  window.IMask &&
-    new window.IMask(maskEl, {
-      mask: maskEl.dataset.mask,
-      lazy: maskEl.dataset['mask-visible'] === 'true',
-    })
-})
+	window.IMask && new window.IMask(maskEl, {
+		mask: maskEl.dataset.mask,
+		lazy: maskEl.dataset['mask-visible'] === 'true'
+	})
+});

core/js/src/popover.js

@@ -1,14 +1,14 @@
-import { Popover } from './bootstrap'
+import { Popover } from './bootstrap';
 
 /*
 Core popovers
  */
-let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
+let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
 popoverTriggerList.map(function (popoverTriggerEl) {
-  let options = {
-    delay: { show: 50, hide: 50 },
-    html: popoverTriggerEl.getAttribute('data-bs-html') === 'true',
-    placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
-  }
-  return new Popover(popoverTriggerEl, options)
-})
+	let options = {
+		delay: {show: 50, hide: 50},
+		html: popoverTriggerEl.getAttribute('data-bs-html') === "true" ?? false,
+		placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
+	};
+	return new Popover(popoverTriggerEl, options);
+});

core/js/src/sortable.js

@@ -2,22 +2,24 @@
 // Initializes Sortable on elements marked with [data-sortable]
 // Allows options via JSON in data attribute: data-sortable='{"animation":150}'
 
-const sortableElements = document.querySelectorAll('[data-sortable]')
+const sortableElements = document.querySelectorAll('[data-sortable]');
 
 if (sortableElements.length) {
   sortableElements.forEach(function (element) {
-    let options = {}
+    let options = {};
 
     try {
-      const rawOptions = element.getAttribute('data-sortable')
-      options = rawOptions ? JSON.parse(rawOptions) : {}
+      const rawOptions = element.getAttribute('data-sortable');
+      options = rawOptions ? JSON.parse(rawOptions) : {};
     } catch (e) {
       // ignore invalid JSON
     }
 
     if (window.Sortable) {
       // eslint-disable-next-line no-new
-      new window.Sortable(element, options)
+      new window.Sortable(element, options);
     }
-  })
+  });
 }
+
+

core/js/src/switch-icon.js

@@ -1,11 +1,11 @@
 /*
 Switch icons
  */
-let switchesTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="switch-icon"]'))
+let switchesTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="switch-icon"]'));
 switchesTriggerList.map(function (switchTriggerEl) {
-  switchTriggerEl.addEventListener('click', (e) => {
-    e.stopPropagation()
+	switchTriggerEl.addEventListener('click', (e) => {
+		e.stopPropagation();
 
-    switchTriggerEl.classList.toggle('active')
-  })
-})
+		switchTriggerEl.classList.toggle('active');
+	});
+});

core/js/src/tab.js

@@ -1,15 +1,15 @@
-import { Tab } from './bootstrap'
+import { Tab } from './bootstrap';
 
 export const EnableActivationTabsFromLocationHash = () => {
-  const locationHash = window.location.hash
+  const locationHash = window.location.hash;
 
   if (locationHash) {
-    const tabsList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'))
-    const matchedTabs = tabsList.filter((tab) => tab.hash === locationHash)
+	 const tabsList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'));
+	 const matchedTabs = tabsList.filter(tab => tab.hash === locationHash);
 
-    matchedTabs.map((tab) => {
-      new Tab(tab).show()
-    })
+	 matchedTabs.map(tab => {
+		new Tab(tab).show();
+	 });
   }
 }
 

core/js/src/tabler.js

@@ -10,8 +10,8 @@ export const getColor = (color, opacity = 1) => {
   const c = getComputedStyle(document.body).getPropertyValue(`--${prefix}${color}`).trim()
 
   if (opacity !== 1) {
-    return hexToRgba(c, opacity)
+	 return hexToRgba(c, opacity)
   }
 
   return c
-}
+}

core/js/src/toast.js

@@ -1,17 +1,17 @@
-import { Toast } from './bootstrap'
+import { Toast } from './bootstrap';
 
 /*
 Toasts
  */
-let toastsTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="toast"]'))
+let toastsTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="toast"]'));
 toastsTriggerList.map(function (toastTriggerEl) {
-  if (!toastTriggerEl.hasAttribute('data-bs-target')) {
-    return
-  }
+	if (!toastTriggerEl.hasAttribute('data-bs-target')) {
+		return;
+	}
 
-  const toastEl = new Toast(toastTriggerEl.getAttribute('data-bs-target'))
+	const toastEl = new Toast(toastTriggerEl.getAttribute('data-bs-target'));
 
-  toastTriggerEl.addEventListener('click', () => {
-    toastEl.show()
-  })
-})
+	toastTriggerEl.addEventListener('click', () => {
+		toastEl.show()
+	});
+});

core/js/src/tooltip.js

@@ -1,11 +1,11 @@
-import { Tooltip } from './bootstrap'
+import { Tooltip } from './bootstrap';
 
-let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
 tooltipTriggerList.map(function (tooltipTriggerEl) {
-  let options = {
-    delay: { show: 50, hide: 50 },
-    html: tooltipTriggerEl.getAttribute('data-bs-html') === 'true',
-    placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
-  }
-  return new Tooltip(tooltipTriggerEl, options)
-})
+	let options = {
+		delay: {show: 50, hide: 50},
+		html: tooltipTriggerEl.getAttribute("data-bs-html") === "true" ?? false,
+		placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
+	};
+	return new Tooltip(tooltipTriggerEl, options);
+});

core/js/tabler-theme.js

@@ -4,32 +4,35 @@
  * This will prevent any flashes of the light theme (default) before switching.
  */
 const themeConfig = {
-  'theme': 'light',
-  'theme-base': 'gray',
-  'theme-font': 'sans-serif',
-  'theme-primary': 'blue',
-  'theme-radius': '1',
+	"theme": "light",
+	"theme-base": "gray",
+	"theme-font": "sans-serif",
+	"theme-primary": "blue",
+	"theme-radius": "1",
+	"sidebar-position": "left",
+	"sidebar-behavior": "sticky",
+	"layout": "container",
 }
 
 const params = new Proxy(new URLSearchParams(window.location.search), {
-  get: (searchParams, prop) => searchParams.get(prop),
+	get: (searchParams, prop) => searchParams.get(prop),
 })
 
 for (const key in themeConfig) {
-  const param = params[key]
-  let selectedValue
+	const param = params[key]
+	let selectedValue
 
-  if (!!param) {
-    localStorage.setItem('tabler-' + key, param)
-    selectedValue = param
-  } else {
-    const storedTheme = localStorage.getItem('tabler-' + key)
-    selectedValue = storedTheme ? storedTheme : themeConfig[key]
-  }
+	if (!!param) {
+		localStorage.setItem('tabler-' + key, param)
+		selectedValue = param
+	} else {
+		const storedTheme = localStorage.getItem('tabler-' + key)
+		selectedValue = storedTheme ? storedTheme : themeConfig[key]
+	}
 
-  if (selectedValue !== themeConfig[key]) {
-    document.documentElement.setAttribute('data-bs-' + key, selectedValue)
-  } else {
-    document.documentElement.removeAttribute('data-bs-' + key)
-  }
-}
+	if (selectedValue !== themeConfig[key]) {
+		document.documentElement.setAttribute('data-bs-' + key, selectedValue)
+	} else {
+		document.documentElement.removeAttribute('data-bs-' + key)
+	}
+}

core/js/tabler.js

@@ -1,16 +1,28 @@
-import './src/autosize'
-import './src/countup'
-import './src/input-mask'
-import './src/dropdown'
-import './src/tooltip'
-import './src/popover'
-import './src/switch-icon'
-import './src/tab'
-import './src/toast'
-import './src/sortable'
+import "./src/autosize"
+import "./src/countup"
+import "./src/input-mask"
+import "./src/dropdown"
+import "./src/tooltip"
+import "./src/popover"
+import "./src/switch-icon"
+import "./src/tab"
+import "./src/toast"
+import "./src/sortable"
 
-// Re-export everything from bootstrap.js (single source of truth)
-export * from './src/bootstrap'
+export * as bootstrap from "bootstrap"
+export * as tabler from "./src/tabler"
 
-// Re-export tabler namespace
-export * as tabler from './src/tabler'
+export {
+	Alert,
+	Modal,
+	Toast,
+	Tooltip,
+	Tab,
+	Button,
+	Carousel,
+	Collapse,
+	Dropdown,
+	Popover,
+	ScrollSpy,
+	Offcanvas
+} from 'bootstrap'

core/libs.json

@@ -166,14 +166,5 @@
       "dist/turbo.es2017-umd.js"
     ],
     "head": true
-  },
-  "driver.js": {
-    "npm": "driver.js",
-    "js": [
-      "dist/driver.js.iife.js"
-    ],
-    "css": [
-      "dist/driver.css"
-    ]
   }
 }

core/package.json

@@ -5,42 +5,37 @@
   "homepage": "https://tabler.io",
   "scripts": {
     "dev": "pnpm run clean && pnpm run copy && pnpm run watch",
-    "build": "pnpm run clean && pnpm run build-assets && pnpm run copy && pnpm run generate-sri",
-    "build-assets": "concurrently \"pnpm run css\" \"pnpm run js\"",
+    "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri",
     "clean": "shx rm -rf dist demo",
     "css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
     "css-compile": "sass --no-source-map --load-path=node_modules --style expanded scss/:dist/css/",
     "css-banner": "node .build/add-banner.mjs",
     "css-prefix": "postcss --config .build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
     "css-rtl": "cross-env NODE_ENV=RTL postcss --config .build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
-    "css-minify": "concurrently \"pnpm run css-minify-main\" \"pnpm run css-minify-rtl\"",
+    "css-minify": "pnpm run css-minify-main && pnpm run css-minify-rtl",
     "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
     "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
-    "css-lint": "pnpm run css-lint-variables",
-    "css-lint-variables": "find-unused-sass-variables scss/ node_modules/bootstrap/scss/",
     "js": "pnpm run js-compile && pnpm run js-minify",
-    "js-compile": "concurrently \"pnpm run js-compile-standalone\" \"pnpm run js-compile-standalone-esm\" \"pnpm run js-compile-theme\" \"pnpm run js-compile-theme-esm\"",
+    "js-compile": "pnpm run js-compile-standalone && pnpm run js-compile-standalone-esm && pnpm run js-compile-theme && pnpm run js-compile-theme-esm",
     "js-compile-theme-esm": "rollup --environment THEME:true --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
     "js-compile-theme": "rollup --environment THEME:true --config .build/rollup.config.mjs --sourcemap",
     "js-compile-standalone": "rollup --config .build/rollup.config.mjs --sourcemap",
     "js-compile-standalone-esm": "rollup --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
-    "js-minify": "concurrently \"pnpm run js-minify-standalone\" \"pnpm run js-minify-standalone-esm\" \"pnpm run js-minify-theme\" \"pnpm run js-minify-theme-esm\"",
+    "js-minify": "pnpm run js-minify-standalone && pnpm run js-minify-standalone-esm && pnpm run js-minify-theme && pnpm run js-minify-theme-esm",
     "js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map\" --output dist/js/tabler.min.js dist/js/tabler.js",
     "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map\" --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
     "js-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.js.map,includeSources,url=tabler-theme.min.js.map\" --output dist/js/tabler-theme.min.js dist/js/tabler-theme.js",
     "js-minify-theme-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.esm.js.map,includeSources,url=tabler-theme.esm.min.js.map\" --output dist/js/tabler-theme.esm.min.js dist/js/tabler-theme.esm.js",
-    "copy": "concurrently \"pnpm run copy-img\" \"pnpm run copy-libs\" \"pnpm run copy-fonts\"",
+    "copy": "pnpm run copy-img && pnpm run copy-libs",
     "copy-img": "shx mkdir -p dist/img && shx cp -rf img/* dist/img",
     "copy-libs": "node .build/copy-libs.mjs",
-    "copy-fonts": "shx mkdir -p dist/fonts && shx cp -rf fonts/* dist/fonts",
-    "import-fonts": "node .build/import-fonts.mjs",
     "watch": "concurrently \"pnpm run watch-css\" \"pnpm run watch-js\"",
     "watch-css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css-compile && pnpm run css-prefix\"",
     "watch-js": "nodemon --watch js/ --ext js --exec \"pnpm run js-compile\"",
     "bundlewatch": "bundlewatch",
     "generate-sri": "node .build/generate-sri.js",
-    "format:check": "prettier --check \"scss/**/*.scss\" \"js/**/*.js\" --cache",
-    "format:write": "prettier --write \"scss/**/*.scss\" \"js/**/*.js\" --cache"
+    "format:check": "prettier --check src/**/*.{js,scss} --cache",
+    "format:write": "prettier --write src/**/*.{js,scss} --cache"
   },
   "repository": {
     "type": "git",
@@ -154,19 +149,17 @@
     "bootstrap": "5.3.8"
   },
   "devDependencies": {
-    "@hotwired/turbo": "^8.0.18",
+    "@hotwired/turbo": "^8.0.13",
     "@melloware/coloris": "^0.25.0",
-    "apexcharts": "^5.3.6",
+    "apexcharts": "3.54.1",
     "autosize": "^6.0.1",
     "choices.js": "^11.1.0",
     "clipboard": "^2.0.11",
     "countup.js": "^2.9.0",
     "dropzone": "^6.0.0-beta.2",
-    "find-unused-sass-variables": "^6.1.0",
     "flatpickr": "^4.6.13",
     "fslightbox": "^3.7.4",
     "fullcalendar": "^6.1.19",
-    "geist": "^1.5.1",
     "hugerte": "^1.0.9",
     "imask": "^7.6.1",
     "jsvectormap": "^1.7.0",
@@ -178,8 +171,7 @@
     "sortablejs": "^1.15.6",
     "star-rating.js": "^4.3.1",
     "tom-select": "^2.4.3",
-    "typed.js": "^2.1.0",
-    "driver.js": "^1.0.0"
+    "typed.js": "^2.1.0"
   },
   "directories": {
     "doc": "docs"

core/scss/_bootstrap-components.scss

@@ -1,30 +1,30 @@
 // Layout & components
-@import 'bootstrap/scss/root';
-@import 'bootstrap/scss/reboot';
-@import 'bootstrap/scss/type';
-@import 'bootstrap/scss/images';
-@import 'bootstrap/scss/containers';
-@import 'bootstrap/scss/grid';
-@import 'bootstrap/scss/tables';
-@import 'bootstrap/scss/forms';
-@import 'bootstrap/scss/buttons';
-@import 'bootstrap/scss/transitions';
-@import 'bootstrap/scss/dropdown';
-@import 'bootstrap/scss/button-group';
-@import 'bootstrap/scss/nav';
-@import 'bootstrap/scss/navbar';
-@import 'bootstrap/scss/card';
-@import 'bootstrap/scss/pagination';
-@import 'bootstrap/scss/progress';
-@import 'bootstrap/scss/list-group';
-@import 'bootstrap/scss/toasts';
-@import 'bootstrap/scss/modal';
-@import 'bootstrap/scss/tooltip';
-@import 'bootstrap/scss/popover';
-@import 'bootstrap/scss/carousel';
-@import 'bootstrap/scss/spinners';
-@import 'bootstrap/scss/offcanvas';
-@import 'bootstrap/scss/placeholders';
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/placeholders";
 
 // Utilities
-@import 'bootstrap/scss/utilities/api';
+@import "bootstrap/scss/utilities/api";

core/scss/_bootstrap-config.scss

@@ -1,6 +1,6 @@
 // Config
-// @import "bootstrap/scss/variables";
-// @import "bootstrap/scss/variables-dark";
-// @import "bootstrap/scss/maps";
-@import 'bootstrap/scss/mixins';
-// @import "bootstrap/scss/utilities";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";

core/scss/_bootstrap-override.scss

@@ -1,26 +1,26 @@
-@use 'sass:color';
+@use "sass:color";
 
 @mixin caret($direction: down) {
-  $selector: 'after';
+  $selector: "after";
 
-  @if $direction == 'left' {
-    $selector: 'before';
+  @if $direction == "left" {
+    $selector: "before";
   }
 
   &:#{$selector} {
-    content: '';
+    content: "";
     display: inline-block;
     vertical-align: $caret-vertical-align;
     width: $caret-width;
     height: $caret-width;
     border-bottom: 1px var(--#{$prefix}border-style);
-    border-inline-start: 1px var(--#{$prefix}border-style);
-    margin-inline-end: 0.1em;
+    border-left: 1px var(--#{$prefix}border-style);
+    margin-right: 0.1em;
 
-    @if $direction != 'left' {
-      margin-inline-start: $caret-spacing;
+    @if $direction != "left" {
+      margin-left: $caret-spacing;
     } @else {
-      margin-inline-end: $caret-spacing;
+      margin-right: $caret-spacing;
     }
 
     @if $direction == down {
@@ -34,7 +34,7 @@
     }
   }
 
-  @if $direction == 'left' {
+  @if $direction == "left" {
     &:after {
       content: none;
     }
@@ -45,11 +45,30 @@
   // 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) {
+@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) {
+@mixin button-outline-variant(
+  $color: null,
+  $color-hover: null,
+  $active-background: null,
+  $active-border: null,
+  $active-color: null
+) {
   // Override bootstrap core
 }
 

core/scss/_config.scss

@@ -1,8 +1,9 @@
-@import 'mixins';
-@import 'variables';
-@import 'variables-dark';
-@import 'maps';
-@import 'utilities';
 
-@import 'bootstrap-config';
-@import 'bootstrap-override';
+
+@import "mixins";
+@import "variables";
+@import "variables-dark";
+@import "utilities";
+
+@import "bootstrap-config";
+@import "bootstrap-override";

core/scss/_core.scss

@@ -1,80 +1,84 @@
-@import 'config';
-@import 'bootstrap-components';
+@import "config";
+@import "bootstrap-components";
 
-@import 'props';
+@import "props";
 
-@import 'fonts/webfonts';
-@import 'fonts/geist';
+@import "fonts/webfonts";
 
-@import 'layout/root';
-@import 'layout/animations';
-@import 'layout/core';
-@import 'layout/navbar';
-@import 'layout/page';
-@import 'layout/footer';
-@import 'layout/dark';
+@import "layout/root";
+@import "layout/animations";
+@import "layout/core";
+@import "layout/navbar";
+@import "layout/page";
+@import "layout/footer";
+@import "layout/dark";
 
-@import 'ui/accordion';
-@import 'ui/alerts';
-@import 'ui/avatars';
-@import 'ui/badges';
-@import 'ui/breadcrumbs';
-@import 'ui/buttons';
-@import 'ui/button-group';
-@import 'ui/calendars';
-@import 'ui/carousel';
-@import 'ui/cards';
-@import 'ui/close';
-@import 'ui/dropdowns';
-@import 'ui/datagrid';
-@import 'ui/empty';
-@import 'ui/grid';
-@import 'ui/icons';
-@import 'ui/images';
-@import 'ui/forms';
-@import 'ui/forms/form-icon';
-@import 'ui/forms/form-colorinput';
-@import 'ui/forms/form-imagecheck';
-@import 'ui/forms/form-selectgroup';
-@import 'ui/forms/form-custom';
-@import 'ui/forms/form-check';
-@import 'ui/forms/validation';
-@import 'ui/legend';
-@import 'ui/lists';
-@import 'ui/loaders';
-@import 'ui/login';
-@import 'ui/modals';
-@import 'ui/nav';
-@import 'ui/stars';
-@import 'ui/pagination';
-@import 'ui/popovers';
-@import 'ui/progress';
-@import 'ui/ribbons';
-@import 'ui/markdown';
-@import 'ui/placeholder';
-@import 'ui/segmented';
-@import 'ui/steps';
-@import 'ui/status';
-@import 'ui/switch-icon';
-@import 'ui/tables';
-@import 'ui/tags';
-@import 'ui/toasts';
-@import 'ui/toolbar';
-@import 'ui/tracking';
-@import 'ui/timeline';
-@import 'ui/type';
-@import 'ui/charts';
-@import 'ui/offcanvas';
-@import 'ui/chat';
-@import 'ui/signature';
+@import "ui/accordion";
+@import "ui/alerts";
+@import "ui/avatars";
+@import "ui/badges";
+@import "ui/breadcrumbs";
+@import "ui/buttons";
+@import "ui/button-group";
+@import "ui/calendars";
+@import "ui/carousel";
+@import "ui/cards";
+@import "ui/close";
+@import "ui/dropdowns";
+@import "ui/datagrid";
+@import "ui/empty";
+@import "ui/grid";
+@import "ui/icons";
+@import "ui/images";
+@import "ui/forms";
+@import "ui/forms/form-icon";
+@import "ui/forms/form-colorinput";
+@import "ui/forms/form-imagecheck";
+@import "ui/forms/form-selectgroup";
+@import "ui/forms/form-custom";
+@import "ui/forms/form-check";
+@import "ui/forms/validation";
+@import "ui/legend";
+@import "ui/lists";
+@import "ui/loaders";
+@import "ui/login";
+@import "ui/modals";
+@import "ui/nav";
+@import "ui/stars";
+@import "ui/pagination";
+@import "ui/popovers";
+@import "ui/progress";
+@import "ui/ribbons";
+@import "ui/markdown";
+@import "ui/placeholder";
+@import "ui/segmented";
+@import "ui/steps";
+@import "ui/status";
+@import "ui/switch-icon";
+@import "ui/tables";
+@import "ui/tags";
+@import "ui/toasts";
+@import "ui/toolbar";
+@import "ui/tracking";
+@import "ui/timeline";
+@import "ui/type";
+@import "ui/charts";
+@import "ui/offcanvas";
+@import "ui/chat";
+@import "ui/signature";
 
-@import 'helpers/index';
+@import "helpers/index";
 
-@import 'utils/background';
-@import 'utils/colors';
-@import 'utils/scroll';
-@import 'utils/sizing';
-@import 'utils/opacity';
-@import 'utils/shadow';
-@import 'utils/text';
-@import 'utils/hover';
+@import "utils/background";
+@import "utils/colors";
+@import "utils/scroll";
+@import "utils/sizing";
+@import "utils/opacity";
+@import "utils/shadow";
+@import "utils/text";
+@import "utils/hover";
+
+@import "debug";
+
+
+@import "debug";

core/scss/_debug.scss

@@ -0,0 +1,49 @@
+$debug: false;
+
+@if $debug {
+  $colors: (
+    "blue": $blue,
+    "azure": $azure,
+    "indigo": $indigo,
+    "purple": $purple,
+    "pink": $pink,
+    "red": $red,
+    "orange": $orange,
+    "yellow": $yellow,
+    "lime": $lime,
+    "green": $green,
+    "teal": $teal,
+    "cyan": $cyan,
+  );
+
+  @each $name, $color in $colors {
+    @debug ("#{$name}: '#{$color}'");
+    @debug ("#{$name}-100: '#{tint-color($color, 8)}'");
+    @debug ("#{$name}-200: '#{tint-color($color, 6)}'");
+    @debug ("#{$name}-300: '#{tint-color($color, 4)}'");
+    @debug ("#{$name}-400: '#{tint-color($color, 2)}'");
+    @debug ("#{$name}-500: '#{$color}'");
+    @debug ("#{$name}-600: '#{shade-color($color, 2)}'");
+    @debug ("#{$name}-700: '#{shade-color($color, 4)}'");
+    @debug ("#{$name}-800: '#{shade-color($color, 6)}'");
+    @debug ("#{$name}-900: '#{shade-color($color, 8)}'");
+  }
+
+  @debug ("gray: '#{$gray-500}'");
+  @debug ("gray-100: '#{$gray-100}'");
+  @debug ("gray-200: '#{$gray-200}'");
+  @debug ("gray-300: '#{$gray-300}'");
+  @debug ("gray-400: '#{$gray-400}'");
+  @debug ("gray-500: '#{$gray-500}'");
+  @debug ("gray-600: '#{$gray-600}'");
+  @debug ("gray-700: '#{$gray-700}'");
+  @debug ("gray-800: '#{$gray-800}'");
+  @debug ("gray-900: '#{$gray-900}'");
+
+  @debug ("border-color: '#{$border-color}'");
+  @debug ("text-secondary: '#{$text-secondary}'");
+
+  @each $name, $color in $social-colors {
+    @debug ("#{$name}: '#{$color}'");
+  }
+}