Refactor SCSS imports, remove compile warnings (#2536)

.prettierrc

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

core/.build/compare-variables.mjs

@@ -0,0 +1,82 @@
+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/js/src/autosize.js

@@ -1,7 +1,8 @@
 // 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) {
+  elements.forEach(function (element) {
-		window.autosize && window.autosize(element);
+    window.autosize && window.autosize(element)
-	});
+  })
 }

core/js/src/bootstrap.js

@@ -1,3 +1,3 @@
-export * as Popper from '@popperjs/core';
+export * as Popper from '@popperjs/core'
 
-export { Dropdown, Tooltip, Popover, Tab, Toast } from 'bootstrap';
+export { Dropdown, Tooltip, Popover, Tab, Toast } from 'bootstrap'

core/js/src/countup.js

@@ -1,23 +1,25 @@
-const elements = document.querySelectorAll('[data-countup]');
+const elements = document.querySelectorAll('[data-countup]')
 
 if (elements.length) {
-	elements.forEach(function (element) {
+  elements.forEach(function (element) {
-		let options = {};
+    let options = {}
-		try {
+    try {
-			const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {};
+      const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {}
-			options = Object.assign({
+      options = Object.assign(
-				'enableScrollSpy': true
+        {
-			}, dataOptions);
+          enableScrollSpy: true,
+        },
+        dataOptions,
+      )
+    } catch (error) {}
 
-		} 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 (window.countUp && window.countUp.CountUp) {
+      if (!countUp.error) {
-			const countUp = new window.countUp.CountUp(element, value, options);
+        countUp.start()
-			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 = {
+  let options = {
-		boundary: dropdownTriggerEl.getAttribute('data-bs-boundary') === 'viewport' ? document.querySelector('.btn') : 'clippingParents',
+    boundary: dropdownTriggerEl.getAttribute('data-bs-boundary') === 'viewport' ? document.querySelector('.btn') : 'clippingParents',
-	}
+  }
-	return new Dropdown(dropdownTriggerEl, options);
+  return new Dropdown(dropdownTriggerEl, options)
-});
+})

core/js/src/input-mask.js

@@ -1,9 +1,10 @@
 // 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, {
+  window.IMask &&
-		mask: maskEl.dataset.mask,
+    new window.IMask(maskEl, {
-		lazy: maskEl.dataset['mask-visible'] === 'true'
+      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 = {
+  let options = {
-		delay: {show: 50, hide: 50},
+    delay: { show: 50, hide: 50 },
-		html: popoverTriggerEl.getAttribute('data-bs-html') === "true" ?? false,
+    html: popoverTriggerEl.getAttribute('data-bs-html') === 'true' ?? false,
-		placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
+    placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
-	};
+  }
-	return new Popover(popoverTriggerEl, options);
+  return new Popover(popoverTriggerEl, options)
-});
+})

core/js/src/sortable.js

@@ -2,24 +2,22 @@
 // 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');
+      const rawOptions = element.getAttribute('data-sortable')
-      options = rawOptions ? JSON.parse(rawOptions) : {};
+      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) => {
+  switchTriggerEl.addEventListener('click', (e) => {
-		e.stopPropagation();
+    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 tabsList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'))
-	 const matchedTabs = tabsList.filter(tab => tab.hash === locationHash);
+    const matchedTabs = tabsList.filter((tab) => tab.hash === locationHash)
 
-	 matchedTabs.map(tab => {
+    matchedTabs.map((tab) => {
-		new Tab(tab).show();
+      new Tab(tab).show()
-	 });
+    })
   }
 }
 

core/js/src/tabler.js

@@ -10,7 +10,7 @@ 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')) {
+  if (!toastTriggerEl.hasAttribute('data-bs-target')) {
-		return;
+    return
-	}
+  }
 
-	const toastEl = new Toast(toastTriggerEl.getAttribute('data-bs-target'));
+  const toastEl = new Toast(toastTriggerEl.getAttribute('data-bs-target'))
 
-	toastTriggerEl.addEventListener('click', () => {
+  toastTriggerEl.addEventListener('click', () => {
-		toastEl.show()
+    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 = {
+  let options = {
-		delay: {show: 50, hide: 50},
+    delay: { show: 50, hide: 50 },
-		html: tooltipTriggerEl.getAttribute("data-bs-html") === "true" ?? false,
+    html: tooltipTriggerEl.getAttribute('data-bs-html') === 'true' ?? false,
-		placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
+    placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
-	};
+  }
-	return new Tooltip(tooltipTriggerEl, options);
+  return new Tooltip(tooltipTriggerEl, options)
-});
+})

core/js/tabler-theme.js

@@ -4,32 +4,32 @@
  * This will prevent any flashes of the light theme (default) before switching.
  */
 const themeConfig = {
-	"theme": "light",
+  'theme': 'light',
-	"theme-base": "gray",
+  'theme-base': 'gray',
-	"theme-font": "sans-serif",
+  'theme-font': 'sans-serif',
-	"theme-primary": "blue",
+  'theme-primary': 'blue',
-	"theme-radius": "1",
+  'theme-radius': '1',
 }
 
 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]
+  const param = params[key]
-	let selectedValue
+  let selectedValue
 
-	if (!!param) {
+  if (!!param) {
-		localStorage.setItem('tabler-' + key, param)
+    localStorage.setItem('tabler-' + key, param)
-		selectedValue = param
+    selectedValue = param
-	} else {
+  } else {
-		const storedTheme = localStorage.getItem('tabler-' + key)
+    const storedTheme = localStorage.getItem('tabler-' + key)
-		selectedValue = storedTheme ? storedTheme : themeConfig[key]
+    selectedValue = storedTheme ? storedTheme : themeConfig[key]
-	}
+  }
 
-	if (selectedValue !== themeConfig[key]) {
+  if (selectedValue !== themeConfig[key]) {
-		document.documentElement.setAttribute('data-bs-' + key, selectedValue)
+    document.documentElement.setAttribute('data-bs-' + key, selectedValue)
-	} else {
+  } else {
-		document.documentElement.removeAttribute('data-bs-' + key)
+    document.documentElement.removeAttribute('data-bs-' + key)
-	}
+  }
 }

core/js/tabler.js

@@ -1,28 +1,15 @@
-import "./src/autosize"
+import './src/autosize'
-import "./src/countup"
+import './src/countup'
-import "./src/input-mask"
+import './src/input-mask'
-import "./src/dropdown"
+import './src/dropdown'
-import "./src/tooltip"
+import './src/tooltip'
-import "./src/popover"
+import './src/popover'
-import "./src/switch-icon"
+import './src/switch-icon'
-import "./src/tab"
+import './src/tab'
-import "./src/toast"
+import './src/toast'
-import "./src/sortable"
+import './src/sortable'
 
-export * as bootstrap from "bootstrap"
+export * as bootstrap from 'bootstrap'
-export * as tabler from "./src/tabler"
+export * as tabler from './src/tabler'
 
-export {
+export { Alert, Modal, Toast, Tooltip, Tab, Button, Carousel, Collapse, Dropdown, Popover, ScrollSpy, Offcanvas } from 'bootstrap'
-	Alert,
-	Modal,
-	Toast,
-	Tooltip,
-	Tab,
-	Button,
-	Carousel,
-	Collapse,
-	Dropdown,
-	Popover,
-	ScrollSpy,
-	Offcanvas
-} from 'bootstrap'

core/package.json

@@ -15,6 +15,8 @@
     "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": "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",
@@ -34,8 +36,8 @@
     "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 src/**/*.{js,scss} --cache",
+    "format:check": "prettier --check \"scss/**/*.scss\" \"js/**/*.js\" --cache",
-    "format:write": "prettier --write src/**/*.{js,scss} --cache"
+    "format:write": "prettier --write \"scss/**/*.scss\" \"js/**/*.js\" --cache"
   },
   "repository": {
     "type": "git",
@@ -157,6 +159,7 @@
     "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",

core/scss/_bootstrap-components.scss

@@ -1,30 +1,30 @@
 // Layout & components
-@import "bootstrap/scss/root";
+@import 'bootstrap/scss/root';
-@import "bootstrap/scss/reboot";
+@import 'bootstrap/scss/reboot';
-@import "bootstrap/scss/type";
+@import 'bootstrap/scss/type';
-@import "bootstrap/scss/images";
+@import 'bootstrap/scss/images';
-@import "bootstrap/scss/containers";
+@import 'bootstrap/scss/containers';
-@import "bootstrap/scss/grid";
+@import 'bootstrap/scss/grid';
-@import "bootstrap/scss/tables";
+@import 'bootstrap/scss/tables';
-@import "bootstrap/scss/forms";
+@import 'bootstrap/scss/forms';
-@import "bootstrap/scss/buttons";
+@import 'bootstrap/scss/buttons';
-@import "bootstrap/scss/transitions";
+@import 'bootstrap/scss/transitions';
-@import "bootstrap/scss/dropdown";
+@import 'bootstrap/scss/dropdown';
-@import "bootstrap/scss/button-group";
+@import 'bootstrap/scss/button-group';
-@import "bootstrap/scss/nav";
+@import 'bootstrap/scss/nav';
-@import "bootstrap/scss/navbar";
+@import 'bootstrap/scss/navbar';
-@import "bootstrap/scss/card";
+@import 'bootstrap/scss/card';
-@import "bootstrap/scss/pagination";
+@import 'bootstrap/scss/pagination';
-@import "bootstrap/scss/progress";
+@import 'bootstrap/scss/progress';
-@import "bootstrap/scss/list-group";
+@import 'bootstrap/scss/list-group';
-@import "bootstrap/scss/toasts";
+@import 'bootstrap/scss/toasts';
-@import "bootstrap/scss/modal";
+@import 'bootstrap/scss/modal';
-@import "bootstrap/scss/tooltip";
+@import 'bootstrap/scss/tooltip';
-@import "bootstrap/scss/popover";
+@import 'bootstrap/scss/popover';
-@import "bootstrap/scss/carousel";
+@import 'bootstrap/scss/carousel';
-@import "bootstrap/scss/spinners";
+@import 'bootstrap/scss/spinners';
-@import "bootstrap/scss/offcanvas";
+@import 'bootstrap/scss/offcanvas';
-@import "bootstrap/scss/placeholders";
+@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";
-@import "bootstrap/scss/variables-dark";
+// @import "bootstrap/scss/variables-dark";
-@import "bootstrap/scss/maps";
+// @import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
+@import 'bootstrap/scss/mixins';
-@import "bootstrap/scss/utilities";
+// @import "bootstrap/scss/utilities";

core/scss/_bootstrap-override.scss

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

core/scss/_config.scss

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

core/scss/_core.scss

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

core/scss/_debug.scss

@@ -1,49 +0,0 @@
-$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}'");
-  }
-}

core/scss/_maps.scss

@@ -0,0 +1,155 @@
+@use 'sass:map';
+
+// Re-assigned maps
+//
+// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
+
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value') !default;
+
+$theme-colors-text: (
+  'primary': $primary-text-emphasis,
+  'secondary': $secondary-text-emphasis,
+  'success': $success-text-emphasis,
+  'info': $info-text-emphasis,
+  'warning': $warning-text-emphasis,
+  'danger': $danger-text-emphasis,
+  'light': $light-text-emphasis,
+  'dark': $dark-text-emphasis,
+) !default;
+
+$theme-colors-bg-subtle: (
+  'primary': $primary-bg-subtle,
+  'secondary': $secondary-bg-subtle,
+  'success': $success-bg-subtle,
+  'info': $info-bg-subtle,
+  'warning': $warning-bg-subtle,
+  'danger': $danger-bg-subtle,
+  'light': $light-bg-subtle,
+  'dark': $dark-bg-subtle,
+) !default;
+
+$theme-colors-border-subtle: (
+  'primary': $primary-border-subtle,
+  'secondary': $secondary-border-subtle,
+  'success': $success-border-subtle,
+  'info': $info-border-subtle,
+  'warning': $warning-border-subtle,
+  'danger': $danger-border-subtle,
+  'light': $light-border-subtle,
+  'dark': $dark-border-subtle,
+) !default;
+
+$theme-colors-text-dark: null !default;
+$theme-colors-bg-subtle-dark: null !default;
+$theme-colors-border-subtle-dark: null !default;
+
+@if $enable-dark-mode {
+  $theme-colors-text-dark: (
+    'primary': $primary-text-emphasis-dark,
+    'secondary': $secondary-text-emphasis-dark,
+    'success': $success-text-emphasis-dark,
+    'info': $info-text-emphasis-dark,
+    'warning': $warning-text-emphasis-dark,
+    'danger': $danger-text-emphasis-dark,
+    'light': $light-text-emphasis-dark,
+    'dark': $dark-text-emphasis-dark,
+  ) !default;
+
+  $theme-colors-bg-subtle-dark: (
+    'primary': $primary-bg-subtle-dark,
+    'secondary': $secondary-bg-subtle-dark,
+    'success': $success-bg-subtle-dark,
+    'info': $info-bg-subtle-dark,
+    'warning': $warning-bg-subtle-dark,
+    'danger': $danger-bg-subtle-dark,
+    'light': $light-bg-subtle-dark,
+    'dark': $dark-bg-subtle-dark,
+  ) !default;
+
+  $theme-colors-border-subtle-dark: (
+    'primary': $primary-border-subtle-dark,
+    'secondary': $secondary-border-subtle-dark,
+    'success': $success-border-subtle-dark,
+    'info': $info-border-subtle-dark,
+    'warning': $warning-border-subtle-dark,
+    'danger': $danger-border-subtle-dark,
+    'light': $light-border-subtle-dark,
+    'dark': $dark-border-subtle-dark,
+  ) !default;
+}
+
+// Utilities maps
+//
+// Extends the default `$theme-colors` maps to help create our utilities.
+
+// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
+
+$utilities-colors: $theme-colors-rgb !default;
+
+$utilities-text: map.merge(
+  $utilities-colors,
+  (
+    'black': to-rgb($black),
+    'white': to-rgb($white),
+    'body': to-rgb($body-color),
+  )
+) !default;
+$utilities-text-colors: map-loop($utilities-text, rgba-css-var, '$key', 'text') !default;
+
+$utilities-text-emphasis-colors: (
+  'primary-emphasis': var(--#{$prefix}primary-text-emphasis),
+  'secondary-emphasis': var(--#{$prefix}secondary-text-emphasis),
+  'success-emphasis': var(--#{$prefix}success-text-emphasis),
+  'info-emphasis': var(--#{$prefix}info-text-emphasis),
+  'warning-emphasis': var(--#{$prefix}warning-text-emphasis),
+  'danger-emphasis': var(--#{$prefix}danger-text-emphasis),
+  'light-emphasis': var(--#{$prefix}light-text-emphasis),
+  'dark-emphasis': var(--#{$prefix}dark-text-emphasis),
+) !default;
+
+$utilities-bg: map.merge(
+  $utilities-colors,
+  (
+    'black': to-rgb($black),
+    'white': to-rgb($white),
+    'body': to-rgb($body-bg),
+  )
+) !default;
+$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, '$key', 'bg') !default;
+
+$utilities-bg-subtle: (
+  'primary-subtle': var(--#{$prefix}primary-bg-subtle),
+  'secondary-subtle': var(--#{$prefix}secondary-bg-subtle),
+  'success-subtle': var(--#{$prefix}success-bg-subtle),
+  'info-subtle': var(--#{$prefix}info-bg-subtle),
+  'warning-subtle': var(--#{$prefix}warning-bg-subtle),
+  'danger-subtle': var(--#{$prefix}danger-bg-subtle),
+  'light-subtle': var(--#{$prefix}light-bg-subtle),
+  'dark-subtle': var(--#{$prefix}dark-bg-subtle),
+) !default;
+
+$utilities-border: map.merge(
+  $utilities-colors,
+  (
+    'black': to-rgb($black),
+    'white': to-rgb($white),
+  )
+) !default;
+$utilities-border-colors: map-loop($utilities-border, rgba-css-var, '$key', 'border') !default;
+
+$utilities-border-subtle: (
+  'primary-subtle': var(--#{$prefix}primary-border-subtle),
+  'secondary-subtle': var(--#{$prefix}secondary-border-subtle),
+  'success-subtle': var(--#{$prefix}success-border-subtle),
+  'info-subtle': var(--#{$prefix}info-border-subtle),
+  'warning-subtle': var(--#{$prefix}warning-border-subtle),
+  'danger-subtle': var(--#{$prefix}danger-border-subtle),
+  'light-subtle': var(--#{$prefix}light-border-subtle),
+  'dark-subtle': var(--#{$prefix}dark-border-subtle),
+) !default;
+
+$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, '$key', 'link-underline') !default;
+
+$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+
+$gutters: $spacers !default;

core/scss/_mixins.scss

@@ -1,2 +1,2 @@
-@import "mixins/mixins";
+@import 'mixins/mixins';
-@import "mixins/functions";
+@import 'mixins/functions';

core/scss/_props.scss

@@ -1,5 +1,5 @@
-@use "sass:map";
+@use 'sass:map';
-@import "config";
+@import 'config';
 
 :root,
 :host {

core/scss/_utilities-marketing.scss

@@ -1,167 +1,158 @@
-@use "sass:map";
+@use 'sass:map';
 
-$negative-spacers-extra: if(
+$negative-spacers-extra: if($enable-negative-margins, negativify-map(map.merge($spacers, $spacers-extra)), null);
-  $enable-negative-margins,
-  negativify-map(map.merge($spacers, $spacers-extra)),
-  null
-);
 
 $utilities: (
   // Margin utilities
-  "margin":
+  'margin': (
-    (
       responsive: true,
       property: margin,
       class: m,
       values: $spacers-extra,
     ),
-  "margin-x": (
+  'margin-x': (
     responsive: true,
     property: margin-right margin-left,
     class: mx,
     values: $spacers-extra,
   ),
-  "margin-y": (
+  'margin-y': (
     responsive: true,
     property: margin-top margin-bottom,
     class: my,
     values: $spacers-extra,
   ),
-  "margin-top": (
+  'margin-top': (
     responsive: true,
     property: margin-top,
     class: mt,
     values: $spacers-extra,
   ),
-  "margin-end": (
+  'margin-end': (
     responsive: true,
     property: margin-right,
     class: me,
     values: $spacers-extra,
   ),
-  "margin-bottom": (
+  'margin-bottom': (
     responsive: true,
     property: margin-bottom,
     class: mb,
     values: $spacers-extra,
   ),
-  "margin-start": (
+  'margin-start': (
     responsive: true,
     property: margin-left,
     class: ms,
     values: $spacers-extra,
   ),
   // Negative margin utilities
-  "negative-margin":
+  'negative-margin': (
-    (
       responsive: true,
       property: margin,
       class: m,
       values: $negative-spacers-extra,
     ),
-  "negative-margin-x": (
+  'negative-margin-x': (
     responsive: true,
     property: margin-right margin-left,
     class: mx,
     values: $negative-spacers-extra,
   ),
-  "negative-margin-y": (
+  'negative-margin-y': (
     responsive: true,
     property: margin-top margin-bottom,
     class: my,
     values: $negative-spacers-extra,
   ),
-  "negative-margin-top": (
+  'negative-margin-top': (
     responsive: true,
     property: margin-top,
     class: mt,
     values: $negative-spacers-extra,
   ),
-  "negative-margin-end": (
+  'negative-margin-end': (
     responsive: true,
     property: margin-right,
     class: me,
     values: $negative-spacers-extra,
   ),
-  "negative-margin-bottom": (
+  'negative-margin-bottom': (
     responsive: true,
     property: margin-bottom,
     class: mb,
     values: $negative-spacers-extra,
   ),
-  "negative-margin-start": (
+  'negative-margin-start': (
     responsive: true,
     property: margin-left,
     class: ms,
     values: $negative-spacers-extra,
   ),
   // Padding utilities
-  "padding":
+  'padding': (
-    (
       responsive: true,
       property: padding,
       class: p,
       values: $spacers-extra,
     ),
-  "padding-x": (
+  'padding-x': (
     responsive: true,
     property: padding-right padding-left,
     class: px,
     values: $spacers-extra,
   ),
-  "padding-y": (
+  'padding-y': (
     responsive: true,
     property: padding-top padding-bottom,
     class: py,
     values: $spacers-extra,
   ),
-  "padding-top": (
+  'padding-top': (
     responsive: true,
     property: padding-top,
     class: pt,
     values: $spacers-extra,
   ),
-  "padding-end": (
+  'padding-end': (
     responsive: true,
     property: padding-right,
     class: pe,
     values: $spacers-extra,
   ),
-  "padding-bottom": (
+  'padding-bottom': (
     responsive: true,
     property: padding-bottom,
     class: pb,
     values: $spacers-extra,
   ),
-  "padding-start": (
+  'padding-start': (
     responsive: true,
     property: padding-left,
     class: ps,
     values: $spacers-extra,
   ),
   // Gap utility
-  "gap":
+  'gap': (
-    (
       responsive: true,
       property: gap,
       class: gap,
       values: $spacers-extra,
     ),
-  "row-gap": (
+  'row-gap': (
     responsive: true,
     property: row-gap,
     class: row-gap,
     values: $spacers-extra,
   ),
-  "column-gap": (
+  'column-gap': (
     responsive: true,
     property: column-gap,
     class: column-gap,
     values: $spacers-extra,
   ),
   // Letter spacing
-  "spacing":
+  'spacing': (
-    (
       property: letter-spacing,
       class: tracking,
       values: (
@@ -170,38 +161,38 @@ $utilities: (
         wide: $spacing-wide,
       ),
     ),
-  "width": (
+  'width': (
     property: width,
     class: w,
     values: $spacers-extra,
   ),
-  "height": (
+  'height': (
     property: height,
     class: h,
     values: $spacers-extra,
   ),
-  "filter": (
+  'filter': (
     property: filter,
     class: filter,
     values: (
       grayscale: grayscale(100%),
     ),
   ),
-  "gutter-x": (
+  'gutter-x': (
     responsive: true,
     css-var: true,
     css-variable-name: gutter-x,
     class: gx,
     values: $spacers-extra,
   ),
-  "gutter-y": (
+  'gutter-y': (
     responsive: true,
     css-var: true,
     css-variable-name: gutter-y,
     class: gy,
     values: $spacers-extra,
   ),
-  "gutter": (
+  'gutter': (
     responsive: true,
     css-var: true,
     css-variable-name: gutter-x,

core/scss/_utilities.scss

@@ -1,19 +1,127 @@
+@use 'sass:map';
+
 $border-values: (
-  null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
+  null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent),
-    var(--#{$prefix}border-color-translucent),
+  wide: $border-width-wide var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent),
-  wide: $border-width-wide var(--#{$prefix}border-style)
-    var(--#{$prefix}border-color-translucent),
   0: 0,
 );
 
-$utilities-border-colors: map-loop((
+$utilities-border-colors: map-loop(
-  "red": red,
+  (
-  "green": green,
+    'red': red,
-), rgba-css-var, "$key", "border") !default;
+    'green': green,
+  ),
+  rgba-css-var,
+  '$key',
+  'border'
+) !default;
 
 //Utilities
 $utilities: (
-  "object": (
+  'align': (
+    property: vertical-align,
+    class: align,
+    values: baseline top middle bottom text-bottom text-top,
+  ),
+  'float': (
+    responsive: true,
+    property: float,
+    values: (
+      start: left,
+      end: right,
+      none: none,
+    ),
+  ),
+  // Object Fit utilities
+  'object-fit': (
+      responsive: true,
+      property: object-fit,
+      values: (
+        contain: contain,
+        cover: cover,
+        fill: fill,
+        scale: scale-down,
+        none: none,
+      ),
+    ),
+  // Opacity utilities
+  'opacity': (
+      property: opacity,
+      values: (
+        0: 0,
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1,
+      ),
+    ),
+  'overflow': (
+    property: overflow,
+    values: auto hidden visible scroll,
+  ),
+  'overflow-x': (
+    property: overflow-x,
+    values: auto hidden visible scroll,
+  ),
+  'overflow-y': (
+    property: overflow-y,
+    values: auto hidden visible scroll,
+  ),
+  'display': (
+    responsive: true,
+    print: true,
+    property: display,
+    class: d,
+    values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none,
+  ),
+  'shadow': (
+    property: box-shadow,
+    class: shadow,
+    values: (
+      null: var(--#{$prefix}box-shadow),
+      sm: var(--#{$prefix}box-shadow-sm),
+      lg: var(--#{$prefix}box-shadow-lg),
+      none: none,
+    ),
+  ),
+  'focus-ring': (
+    css-var: true,
+    css-variable-name: focus-ring-color,
+    class: focus-ring,
+    values: map-loop($theme-colors-rgb, rgba-css-var, '$key', 'focus-ring'),
+  ),
+  'position': (
+    property: position,
+    values: static relative absolute fixed sticky,
+  ),
+  'top': (
+    property: top,
+    values: $position-values,
+  ),
+  'bottom': (
+    property: bottom,
+    values: $position-values,
+  ),
+  'start': (
+    property: left,
+    class: start,
+    values: $position-values,
+  ),
+  'end': (
+    property: right,
+    class: end,
+    values: $position-values,
+  ),
+  'translate-middle': (
+    property: transform,
+    class: translate-middle,
+    values: (
+      null: translate(-50%, -50%),
+      x: translateX(-50%),
+      y: translateY(-50%),
+    ),
+  ),
+  'object': (
     property: object-fit,
     class: object,
     values: (
@@ -24,7 +132,7 @@ $utilities: (
       none: none,
     ),
   ),
-  "cursor": (
+  'cursor': (
     property: cursor,
     class: cursor,
     values: (
@@ -46,78 +154,429 @@ $utilities: (
       crosshair: crosshair,
     ),
   ),
-  "border": (
+  'border': (
     property: border,
     values: $border-values,
   ),
-  "border-top": (
+  'border-top': (
     property: border-top,
     values: $border-values,
   ),
-  "border-end": (
+  'border-end': (
     class: border-end,
     property: border-right,
     values: $border-values,
   ),
-  "border-bottom": (
+  'border-bottom': (
     property: border-bottom,
     values: $border-values,
   ),
-  "border-start": (
+  'border-start': (
     class: border-start,
     property: border-left,
     values: $border-values,
   ),
-  "border-x": (
+  'border-x': (
     class: border-x,
     property: border-left border-right,
     values: $border-values,
   ),
-  "border-y": (
+  'border-y': (
     class: border-y,
     property: border-top border-bottom,
     values: $border-values,
   ),
-  "width": (
+  'border-color': (
+    property: border-color,
+    class: border,
+    local-vars: (
+      'border-opacity': 1,
+    ),
+    values: $utilities-border-colors,
+  ),
+  'subtle-border-color': (
+    property: border-color,
+    class: border,
+    values: $utilities-border-subtle,
+  ),
+  'border-width': (
+    property: border-width,
+    class: border,
+    values: $border-widths,
+  ),
+  'border-opacity': (
+    css-var: true,
+    class: border-opacity,
+    values: (
+      10: 0.1,
+      25: 0.25,
+      50: 0.5,
+      75: 0.75,
+      100: 1,
+    ),
+  ),
+  'width': (
     property: width,
     class: w,
     values: $size-values,
   ),
-  "height": (
+  'max-width': (
+    property: max-width,
+    class: mw,
+    values: (
+      100: 100%,
+    ),
+  ),
+  'viewport-width': (
+    property: width,
+    class: vw,
+    values: (
+      100: 100vw,
+    ),
+  ),
+  'min-viewport-width': (
+    property: min-width,
+    class: min-vw,
+    values: (
+      100: 100vw,
+    ),
+  ),
+  'height': (
     property: height,
     class: h,
     values: $size-values,
   ),
-  "columns": (
+  'max-height': (
+    property: max-height,
+    class: mh,
+    values: (
+      100: 100%,
+    ),
+  ),
+  'viewport-height': (
+    property: height,
+    class: vh,
+    values: (
+      100: 100vh,
+    ),
+  ),
+  'min-viewport-height': (
+    property: min-height,
+    class: min-vh,
+    values: (
+      100: 100vh,
+    ),
+  ),
+  'columns': (
     property: columns,
     class: columns,
     responsive: true,
     values: 2 3 4,
   ),
-  "bg-pattern": (
+  // Flex utilities
+  'flex': (
+      responsive: true,
+      property: flex,
+      values: (
+        fill: 1 1 auto,
+      ),
+    ),
+  'flex-direction': (
+    responsive: true,
+    property: flex-direction,
+    class: flex,
+    values: row column row-reverse column-reverse,
+  ),
+  'flex-grow': (
+    responsive: true,
+    property: flex-grow,
+    class: flex,
+    values: (
+      grow-0: 0,
+      grow-1: 1,
+    ),
+  ),
+  'flex-shrink': (
+    responsive: true,
+    property: flex-shrink,
+    class: flex,
+    values: (
+      shrink-0: 0,
+      shrink-1: 1,
+    ),
+  ),
+  'flex-wrap': (
+    responsive: true,
+    property: flex-wrap,
+    class: flex,
+    values: wrap nowrap wrap-reverse,
+  ),
+  'justify-content': (
+    responsive: true,
+    property: justify-content,
+    values: (
+      start: flex-start,
+      end: flex-end,
+      center: center,
+      between: space-between,
+      around: space-around,
+      evenly: space-evenly,
+    ),
+  ),
+  'align-items': (
+    responsive: true,
+    property: align-items,
+    values: (
+      start: flex-start,
+      end: flex-end,
+      center: center,
+      baseline: baseline,
+      stretch: stretch,
+    ),
+  ),
+  'align-content': (
+    responsive: true,
+    property: align-content,
+    values: (
+      start: flex-start,
+      end: flex-end,
+      center: center,
+      between: space-between,
+      around: space-around,
+      stretch: stretch,
+    ),
+  ),
+  'align-self': (
+    responsive: true,
+    property: align-self,
+    values: (
+      auto: auto,
+      start: flex-start,
+      end: flex-end,
+      center: center,
+      baseline: baseline,
+      stretch: stretch,
+    ),
+  ),
+  'order': (
+    responsive: true,
+    property: order,
+    values: (
+      first: -1,
+      0: 0,
+      1: 1,
+      2: 2,
+      3: 3,
+      4: 4,
+      5: 5,
+      last: 6,
+    ),
+  ),
+  // Margin utilities
+  'margin': (
+      responsive: true,
+      property: margin,
+      class: m,
+      values: map.merge(
+          $spacers,
+          (
+            auto: auto,
+          )
+        ),
+    ),
+  'margin-x': (
+    responsive: true,
+    property: margin-right margin-left,
+    class: mx,
+    values: map.merge(
+        $spacers,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  'margin-y': (
+    responsive: true,
+    property: margin-top margin-bottom,
+    class: my,
+    values: map.merge(
+        $spacers,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  'margin-top': (
+    responsive: true,
+    property: margin-top,
+    class: mt,
+    values: map.merge(
+        $spacers,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  'margin-end': (
+    responsive: true,
+    property: margin-right,
+    class: me,
+    values: map.merge(
+        $spacers,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  'margin-bottom': (
+    responsive: true,
+    property: margin-bottom,
+    class: mb,
+    values: map.merge(
+        $spacers,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  'margin-start': (
+    responsive: true,
+    property: margin-left,
+    class: ms,
+    values: map.merge(
+        $spacers,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  // Negative margin utilities
+  'negative-margin': (
+      responsive: true,
+      property: margin,
+      class: m,
+      values: $negative-spacers,
+    ),
+  'negative-margin-x': (
+    responsive: true,
+    property: margin-right margin-left,
+    class: mx,
+    values: $negative-spacers,
+  ),
+  'negative-margin-y': (
+    responsive: true,
+    property: margin-top margin-bottom,
+    class: my,
+    values: $negative-spacers,
+  ),
+  'negative-margin-top': (
+    responsive: true,
+    property: margin-top,
+    class: mt,
+    values: $negative-spacers,
+  ),
+  'negative-margin-end': (
+    responsive: true,
+    property: margin-right,
+    class: me,
+    values: $negative-spacers,
+  ),
+  'negative-margin-bottom': (
+    responsive: true,
+    property: margin-bottom,
+    class: mb,
+    values: $negative-spacers,
+  ),
+  'negative-margin-start': (
+    responsive: true,
+    property: margin-left,
+    class: ms,
+    values: $negative-spacers,
+  ),
+  // Padding utilities
+  'padding': (
+      responsive: true,
+      property: padding,
+      class: p,
+      values: $spacers,
+    ),
+  'padding-x': (
+    responsive: true,
+    property: padding-right padding-left,
+    class: px,
+    values: $spacers,
+  ),
+  'padding-y': (
+    responsive: true,
+    property: padding-top padding-bottom,
+    class: py,
+    values: $spacers,
+  ),
+  'padding-top': (
+    responsive: true,
+    property: padding-top,
+    class: pt,
+    values: $spacers,
+  ),
+  'padding-end': (
+    responsive: true,
+    property: padding-right,
+    class: pe,
+    values: $spacers,
+  ),
+  'padding-bottom': (
+    responsive: true,
+    property: padding-bottom,
+    class: pb,
+    values: $spacers,
+  ),
+  'padding-start': (
+    responsive: true,
+    property: padding-left,
+    class: ps,
+    values: $spacers,
+  ),
+  // Gap utility
+  'gap': (
+      responsive: true,
+      property: gap,
+      class: gap,
+      values: $spacers,
+    ),
+  'row-gap': (
+    responsive: true,
+    property: row-gap,
+    class: row-gap,
+    values: $spacers,
+  ),
+  'column-gap': (
+    responsive: true,
+    property: column-gap,
+    class: column-gap,
+    values: $spacers,
+  ),
+  'bg-pattern': (
     property: background,
     class: bg-pattern,
     values: (
-      transparent: #{url-svg(
+      transparent: #{url-svg('<svg width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="8" height="8" fill="rgba(130, 130, 130, .1)" /><rect x="8" y="8" width="8" height="8" fill="rgba(130, 130, 130, .1)" /></svg>')} repeat center/16px 16px,
-        '<svg width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="8" height="8" fill="rgba(130, 130, 130, .1)" /><rect x="8" y="8" width="8" height="8" fill="rgba(130, 130, 130, .1)" /></svg>'
+    ),
-      )} repeat center/16px 16px,
-    )
   ),
-  "bg-gradient": (
+  'bg-gradient': (
     property: background,
     class: bg-gradient,
     values: (
       null: linear-gradient(var(--#{$prefix}gradient-direction, to right), var(--#{$prefix}gradient-stops, var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-to, transparent))) no-repeat,
     ),
   ),
-  "bg-blur": (
+  'bg-blur': (
     property: backdrop-filter,
     class: bg-blur,
     values: (
-      null: blur($backdrop-blur)
+      null: blur($backdrop-blur),
-    )
+    ),
   ),
-  "bg-gradient-direction": (
+  'bg-gradient-direction': (
     property: --#{$prefix}gradient-direction,
     class: bg-gradient,
     values: (
@@ -131,7 +590,7 @@ $utilities: (
       to-ts: to top left,
     ),
   ),
-  "table-layout": (
+  'table-layout': (
     property: table-layout,
     class: table,
     values: (
@@ -139,4 +598,300 @@ $utilities: (
       fixed: fixed,
     ),
   ),
+  // Text
+  'font-family': (
+      property: font-family,
+      class: font,
+      values: (
+        monospace: var(--#{$prefix}font-monospace),
+      ),
+    ),
+  'font-size': (
+    property: font-size,
+    class: fs,
+    values: $font-sizes,
+  ),
+  'font-style': (
+    property: font-style,
+    class: fst,
+    values: italic normal,
+  ),
+  'font-weight': (
+    property: font-weight,
+    class: fw,
+    values: (
+      lighter: $font-weight-lighter,
+      light: $font-weight-light,
+      normal: $font-weight-normal,
+      medium: $font-weight-medium,
+      semibold: $font-weight-semibold,
+      bold: $font-weight-bold,
+      bolder: $font-weight-bolder,
+    ),
+  ),
+  'line-height': (
+    property: line-height,
+    class: lh,
+    values: (
+      1: 1,
+      sm: $line-height-sm,
+      base: $line-height-base,
+      lg: $line-height-lg,
+    ),
+  ),
+  'text-align': (
+    responsive: true,
+    property: text-align,
+    class: text,
+    values: (
+      start: left,
+      end: right,
+      center: center,
+    ),
+  ),
+  'text-decoration': (
+    property: text-decoration,
+    values: none underline line-through,
+  ),
+  'text-transform': (
+    property: text-transform,
+    class: text,
+    values: lowercase uppercase capitalize,
+  ),
+  'white-space': (
+    property: white-space,
+    class: text,
+    values: (
+      wrap: normal,
+      nowrap: nowrap,
+    ),
+  ),
+  'word-wrap': (
+    property: word-wrap word-break,
+    class: text,
+    values: (
+      break: break-word,
+    ),
+    rtl: false,
+  ),
+  'color': (
+    property: color,
+    class: text,
+    local-vars: (
+      'text-opacity': 1,
+    ),
+    values: map.merge(
+        $utilities-text-colors,
+        (
+          'muted': var(--#{$prefix}secondary-color),
+          // deprecated
+          'black-50': rgba($black, 0.5),
+          // deprecated
+          'white-50': rgba($white, 0.5),
+          // deprecated
+          'body-secondary': var(--#{$prefix}secondary-color),
+          'body-tertiary': var(--#{$prefix}tertiary-color),
+          'body-emphasis': var(--#{$prefix}emphasis-color),
+          'reset': inherit,
+        )
+      ),
+  ),
+  'text-opacity': (
+    css-var: true,
+    class: text-opacity,
+    values: (
+      25: 0.25,
+      50: 0.5,
+      75: 0.75,
+      100: 1,
+    ),
+  ),
+  'text-color': (
+    property: color,
+    class: text,
+    values: $utilities-text-emphasis-colors,
+  ),
+  'link-opacity': (
+    css-var: true,
+    class: link-opacity,
+    state: hover,
+    values: (
+      10: 0.1,
+      25: 0.25,
+      50: 0.5,
+      75: 0.75,
+      100: 1,
+    ),
+  ),
+  'link-offset': (
+    property: text-underline-offset,
+    class: link-offset,
+    state: hover,
+    values: (
+      1: 0.125em,
+      2: 0.25em,
+      3: 0.375em,
+    ),
+  ),
+  'link-underline': (
+    property: text-decoration-color,
+    class: link-underline,
+    local-vars: (
+      'link-underline-opacity': 1,
+    ),
+    values: map.merge(
+        $utilities-links-underline,
+        (
+          null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
+        )
+      ),
+  ),
+  'link-underline-opacity': (
+    css-var: true,
+    class: link-underline-opacity,
+    state: hover,
+    values: (
+      0: 0,
+      10: 0.1,
+      25: 0.25,
+      50: 0.5,
+      75: 0.75,
+      100: 1,
+    ),
+  ),
+  'background-color': (
+    property: background-color,
+    class: bg,
+    local-vars: (
+      'bg-opacity': 1,
+    ),
+    values: map.merge(
+        $utilities-bg-colors,
+        (
+          'transparent': transparent,
+          'body-secondary': rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
+          'body-tertiary': rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
+        )
+      ),
+  ),
+  'bg-opacity': (
+    css-var: true,
+    class: bg-opacity,
+    values: (
+      10: 0.1,
+      25: 0.25,
+      50: 0.5,
+      75: 0.75,
+      100: 1,
+    ),
+  ),
+  'subtle-background-color': (
+    property: background-color,
+    class: bg,
+    values: $utilities-bg-subtle,
+  ),
+  'gradient': (
+    property: background-image,
+    class: bg,
+    values: (
+      gradient: var(--#{$prefix}gradient),
+    ),
+  ),
+  'user-select': (
+    property: user-select,
+    values: all auto none,
+  ),
+  'pointer-events': (
+    property: pointer-events,
+    class: pe,
+    values: none auto,
+  ),
+  'rounded': (
+    property: border-radius,
+    class: rounded,
+    values: (
+      null: var(--#{$prefix}border-radius),
+      0: 0,
+      1: var(--#{$prefix}border-radius-sm),
+      2: var(--#{$prefix}border-radius),
+      3: var(--#{$prefix}border-radius-lg),
+      4: var(--#{$prefix}border-radius-xl),
+      5: var(--#{$prefix}border-radius-xxl),
+      circle: 50%,
+      pill: var(--#{$prefix}border-radius-pill),
+    ),
+  ),
+  'rounded-top': (
+    property: border-top-left-radius border-top-right-radius,
+    class: rounded-top,
+    values: (
+      null: var(--#{$prefix}border-radius),
+      0: 0,
+      1: var(--#{$prefix}border-radius-sm),
+      2: var(--#{$prefix}border-radius),
+      3: var(--#{$prefix}border-radius-lg),
+      4: var(--#{$prefix}border-radius-xl),
+      5: var(--#{$prefix}border-radius-xxl),
+      circle: 50%,
+      pill: var(--#{$prefix}border-radius-pill),
+    ),
+  ),
+  'rounded-end': (
+    property: border-top-right-radius border-bottom-right-radius,
+    class: rounded-end,
+    values: (
+      null: var(--#{$prefix}border-radius),
+      0: 0,
+      1: var(--#{$prefix}border-radius-sm),
+      2: var(--#{$prefix}border-radius),
+      3: var(--#{$prefix}border-radius-lg),
+      4: var(--#{$prefix}border-radius-xl),
+      5: var(--#{$prefix}border-radius-xxl),
+      circle: 50%,
+      pill: var(--#{$prefix}border-radius-pill),
+    ),
+  ),
+  'rounded-bottom': (
+    property: border-bottom-right-radius border-bottom-left-radius,
+    class: rounded-bottom,
+    values: (
+      null: var(--#{$prefix}border-radius),
+      0: 0,
+      1: var(--#{$prefix}border-radius-sm),
+      2: var(--#{$prefix}border-radius),
+      3: var(--#{$prefix}border-radius-lg),
+      4: var(--#{$prefix}border-radius-xl),
+      5: var(--#{$prefix}border-radius-xxl),
+      circle: 50%,
+      pill: var(--#{$prefix}border-radius-pill),
+    ),
+  ),
+  'rounded-start': (
+    property: border-bottom-left-radius border-top-left-radius,
+    class: rounded-start,
+    values: (
+      null: var(--#{$prefix}border-radius),
+      0: 0,
+      1: var(--#{$prefix}border-radius-sm),
+      2: var(--#{$prefix}border-radius),
+      3: var(--#{$prefix}border-radius-lg),
+      4: var(--#{$prefix}border-radius-xl),
+      5: var(--#{$prefix}border-radius-xxl),
+      circle: 50%,
+      pill: var(--#{$prefix}border-radius-pill),
+    ),
+  ),
+  'visibility': (
+    property: visibility,
+    class: null,
+    values: (
+      visible: visible,
+      invisible: hidden,
+    ),
+  ),
+  'z-index': (
+    property: z-index,
+    class: z,
+    values: $zindex-levels,
+  ),
 ) !default;

core/scss/_variables-dark.scss

@@ -1,4 +1,4 @@
-@use "sass:color";
+@use 'sass:color';
 
 //
 // Dark mode
@@ -6,7 +6,7 @@
 $darken-dark: color.adjust($dark, $lightness: -2%) !default;
 $lighten-dark: color.adjust($dark, $lightness: 2%) !default;
 $border-color-dark: color.adjust($dark, $lightness: 8%) !default;
-$border-color-translucent-dark: rgba(72, 110, 149, .14) !default;
+$border-color-translucent-dark: rgba(72, 110, 149, 0.14) !default;
 $border-dark-color-dark: color.adjust($dark, $lightness: 4%) !default;
 $border-active-color-dark: color.adjust($dark, $lightness: 12%) !default;
 
@@ -17,3 +17,96 @@ $body-emphasis-color-dark: $white !default;
 $code-color-dark: var(--#{$prefix}gray-300) !default;
 $text-secondary-dark: rgba(153, 159, 164, 1) !default;
 
+// Theme text emphasis dark
+$primary-text-emphasis-dark: tint-color($primary, 40%) !default;
+$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
+$success-text-emphasis-dark: tint-color($success, 40%) !default;
+$info-text-emphasis-dark: tint-color($info, 40%) !default;
+$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
+$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
+$light-text-emphasis-dark: $gray-100 !default;
+$dark-text-emphasis-dark: $gray-300 !default;
+
+// Theme bg subtle dark
+$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
+$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
+$success-bg-subtle-dark: shade-color($success, 80%) !default;
+$info-bg-subtle-dark: shade-color($info, 80%) !default;
+$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
+$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
+$light-bg-subtle-dark: $gray-800 !default;
+$dark-bg-subtle-dark: color.mix($gray-800, $black) !default;
+
+// Theme border subtle dark
+$primary-border-subtle-dark: shade-color($primary, 40%) !default;
+$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
+$success-border-subtle-dark: shade-color($success, 40%) !default;
+$info-border-subtle-dark: shade-color($info, 40%) !default;
+$warning-border-subtle-dark: shade-color($warning, 40%) !default;
+$danger-border-subtle-dark: shade-color($danger, 40%) !default;
+$light-border-subtle-dark: $gray-700 !default;
+$dark-border-subtle-dark: $gray-800 !default;
+
+// Body dark
+$body-bg-dark: $gray-900 !default;
+$body-secondary-color-dark: rgba($body-color-dark, 0.75) !default;
+$body-secondary-bg-dark: $gray-800 !default;
+$body-tertiary-color-dark: rgba($body-color-dark, 0.5) !default;
+$body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%) !default;
+
+// Headings dark
+$headings-color-dark: inherit !default;
+
+// Link dark
+$link-color-dark: tint-color($primary, 40%) !default;
+$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
+
+// Mark dark
+$mark-color-dark: $body-color-dark !default;
+$mark-bg-dark: shade-color($yellow, 60%) !default;
+
+//
+// Forms dark
+//
+
+$form-select-indicator-color-dark: $body-color-dark !default;
+$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
+
+$form-switch-color-dark: rgba($white, 0.25) !default;
+$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
+
+// Form validation colors dark
+$form-valid-color-dark: tint-color($green, 40%) !default;
+$form-valid-border-color-dark: tint-color($green, 40%) !default;
+$form-invalid-color-dark: tint-color($red, 40%) !default;
+$form-invalid-border-color-dark: tint-color($red, 40%) !default;
+
+//
+// Accordion dark
+//
+
+$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
+$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
+
+$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
+$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
+
+//
+// Carousel dark
+//
+
+$carousel-dark-indicator-active-bg: $black !default; // Deprecated in v5.3.4
+$carousel-dark-caption-color: $black !default; // Deprecated in v5.3.4
+$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Deprecated in v5.3.4
+
+$carousel-indicator-active-bg-dark: $carousel-dark-indicator-active-bg !default;
+$carousel-caption-color-dark: $carousel-dark-caption-color !default;
+$carousel-control-icon-filter-dark: $carousel-dark-control-icon-filter !default;
+
+//
+// Close button dark
+//
+
+$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4
+
+$btn-close-filter-dark: $btn-close-white-filter !default;

core/scss/fonts/_webfonts.scss

@@ -1,10 +1,10 @@
 @if $font-google {
-  $google-font-url: "https://fonts.googleapis.com/css2?family=" + str-replace($font-google, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
+  $google-font-url: 'https://fonts.googleapis.com/css2?family=' + str-replace($font-google, ' ', '+') + ':wght@300;400;500;600;700&display=swap' !default;
   @import url($google-font-url);
 }
 
 @if $font-google-monospaced {
-  $google-font-monospaced-url: "https://fonts.googleapis.com/css2?family=" + str-replace($font-google-monospaced, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
+  $google-font-monospaced-url: 'https://fonts.googleapis.com/css2?family=' + str-replace($font-google-monospaced, ' ', '+') + ':wght@300;400;500;600;700&display=swap' !default;
   @import url($google-font-monospaced-url);
 }
 

core/scss/helpers/_index.scss

@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
 
 //
 // Clearfix
@@ -30,14 +30,14 @@
 // Stretched link
 //
 .stretched-link {
-  &::#{$stretched-link-pseudo-element} {
+  &::after {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: $stretched-link-z-index;
+    z-index: 1;
-    content: "";
+    content: '';
   }
 }
 
@@ -116,7 +116,7 @@
   &::before {
     display: block;
     padding-top: var(--#{$prefix}aspect-ratio);
-    content: "";
+    content: '';
   }
 
   > * {
@@ -142,4 +142,3 @@
   // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
   box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
 }
-

core/scss/layout/_core.scss

@@ -1,11 +1,15 @@
-@use "sass:map";
+@use 'sass:map';
 
 // stylelint-disable property-no-vendor-prefix
 body {
   letter-spacing: $body-letter-spacing;
   touch-action: manipulation;
   text-rendering: optimizeLegibility;
-  font-feature-settings: "liga" 0, "cv03", "cv04", "cv11";
+  font-feature-settings:
+    'liga' 0,
+    'cv03',
+    'cv04',
+    'cv11';
   position: relative;
   min-height: 100%;
   height: 100%;
@@ -26,8 +30,8 @@ body {
 //
 .layout-fluid {
   .container,
-  [class^="container-"],
+  [class^='container-'],
-  [class*=" container-"] {
+  [class*=' container-'] {
     max-width: 100%;
   }
 }
@@ -40,7 +44,7 @@ body {
   --#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)};
 
   @include media-breakpoint-up(md) {
-    background: $dark linear-gradient(to right, rgba(#fff, .1), transparent) fixed;
+    background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
     padding: 1rem;
     --#{$prefix}theme-boxed-border-radius: #{$border-radius};
   }

core/scss/layout/_dark.scss

@@ -1,10 +1,10 @@
-@use "sass:color";
+@use 'sass:color';
 
 // stylelint-disable declaration-no-important
 
 @if $enable-dark-mode {
   :root {
-    &:not(.theme-dark):not([data-bs-theme="dark"]) {
+    &:not(.theme-dark):not([data-bs-theme='dark']) {
       .hide-theme-light {
         display: none !important;
       }
@@ -15,7 +15,7 @@
     }
 
     &.theme-dark,
-    &[data-bs-theme="dark"] {
+    &[data-bs-theme='dark'] {
       .hide-theme-dark {
         display: none !important;
       }
@@ -26,7 +26,6 @@
     }
   }
 
-
   @include color-mode(dark, true) {
     color-scheme: dark;
     --#{$prefix}body-color: var(--#{$prefix}gray-200);
@@ -48,16 +47,12 @@
     --#{$prefix}link-hover-color: color-mix(in srgb, var(--#{$prefix}primary), black 20%);
 
     --#{$prefix}active-bg: #{$lighten-dark};
-    --#{$prefix}disabled-color: #{color-transparent(var(--#{$prefix}body-color), .4)};
+    --#{$prefix}disabled-color: #{color-transparent(var(--#{$prefix}body-color), 0.4)};
 
     --#{$prefix}border-color: var(--#{$prefix}gray-700);
-    --#{$prefix}border-color-translucent: var(
+    --#{$prefix}border-color-translucent: var(--#{$prefix}dark-mode-border-color-translucent);
-      --#{$prefix}dark-mode-border-color-translucent
-    );
     --#{$prefix}border-dark-color: var(--#{$prefix}dark-mode-border-dark-color);
-    --#{$prefix}border-active-color: var(
+    --#{$prefix}border-active-color: var(--#{$prefix}dark-mode-border-active-color);
-      --#{$prefix}dark-mode-border-active-color
-    );
 
     --#{$prefix}btn-color: #{$darken-dark};
 
@@ -68,7 +63,7 @@
     }
   }
 
-  body[data-bs-theme=dark] [data-bs-theme=light] {
+  body[data-bs-theme='dark'] [data-bs-theme='light'] {
-    @extend [data-bs-theme=dark];
+    @extend [data-bs-theme='dark'];
   }
 }

core/scss/layout/_navbar.scss

@@ -1,10 +1,10 @@
-@use "sass:map";
+@use 'sass:map';
 
 @mixin navbar-vertical-nav {
   .navbar-collapse {
     flex-direction: column;
 
-    [class^="container"] {
+    [class^='container'] {
       flex-direction: column;
       align-items: stretch;
       padding: 0;
@@ -117,8 +117,8 @@ Navbar
 
       .badge {
         position: absolute;
-        top: .5rem;
+        top: 0.5rem;
-        right: .5rem;
+        right: 0.5rem;
         transform: translate(50%, -50%);
       }
     }
@@ -149,7 +149,7 @@ Navbar
           }
 
           &:after {
-            content: "";
+            content: '';
             position: absolute;
             left: 0;
             right: 0;
@@ -224,16 +224,11 @@ Navbar toggler
   background: currentColor;
   border-radius: 10px;
   position: relative;
-  @include transition(
+  @include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
-    top $navbar-toggler-animation-time $navbar-toggler-animation-time,
-    bottom $navbar-toggler-animation-time $navbar-toggler-animation-time,
-    transform $navbar-toggler-animation-time,
-    opacity 0s $navbar-toggler-animation-time
-  );
 
   &:before,
   &:after {
-    content: "";
+    content: '';
     display: block;
     height: inherit;
     width: inherit;
@@ -252,7 +247,7 @@ Navbar toggler
     bottom: -0.45em;
   }
 
-  .navbar-toggler[aria-expanded="true"] & {
+  .navbar-toggler[aria-expanded='true'] & {
     transform: rotate(45deg);
     @include transition(top $transition-time, bottom $transition-time, transform $transition-time $transition-time, opacity 0s $transition-time);
 
@@ -352,7 +347,7 @@ Navbar vertical
               }
             }
 
-            > [class^="container"] {
+            > [class^='container'] {
               flex-direction: column;
               align-items: stretch;
               min-height: 100%;
@@ -363,7 +358,7 @@ Navbar vertical
             ~ .page {
               padding-left: $sidebar-width;
 
-              [class^="container"] {
+              [class^='container'] {
                 padding-left: 1.5rem;
                 padding-right: 1.5rem;
               }
@@ -385,7 +380,7 @@ Navbar vertical
 
 .navbar-overlap {
   &:after {
-    content: "";
+    content: '';
     height: $navbar-overlap-height;
     position: absolute;
     top: 100%;

core/scss/layout/_page.scss

@@ -64,7 +64,7 @@
   position: relative;
 
   &:after {
-    content: "";
+    content: '';
     position: absolute;
     top: 0;
     left: 0;
@@ -74,7 +74,6 @@
   }
 }
 
-
 .page-header {
   display: flex;
   flex-wrap: wrap;
@@ -111,7 +110,7 @@
   svg {
     width: 1.5rem;
     height: 1.5rem;
-    margin-right: .25rem;
+    margin-right: 0.25rem;
   }
 }
 
@@ -121,7 +120,7 @@
 }
 
 .page-subtitle {
-  margin-top: .25rem;
+  margin-top: 0.25rem;
   color: var(--#{$prefix}secondary);
 }
 
@@ -155,7 +154,7 @@
 // Page tabs
 //
 .page-tabs {
-  margin-top: .5rem;
+  margin-top: 0.5rem;
   position: relative;
 }
 

core/scss/layout/_root.scss

@@ -11,7 +11,7 @@
 
 :root,
 :host,
-[data-bs-theme="light"] {
+[data-bs-theme='light'] {
   color-scheme: light;
   --#{$prefix}spacer: var(--#{$prefix}spacer-2);
 

core/scss/marketing/_browser.scss

@@ -9,8 +9,8 @@
 }
 
 .browser-header {
-  padding: .25rem 1rem;
+  padding: 0.25rem 1rem;
-  background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .03));
+  background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
   border-bottom: 1px solid var(--#{$prefix}border-color);
   border-radius: calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0;
 }
@@ -37,10 +37,10 @@
 }
 
 .browser-dot {
-  margin-right: .5rem;
+  margin-right: 0.5rem;
-  width: .75rem;
+  width: 0.75rem;
-  min-width: .75rem;
+  min-width: 0.75rem;
-  height: .75rem;
+  height: 0.75rem;
   background: var(--#{$prefix}border-color);
   border-radius: 50%;
   border: 1px solid var(--#{$prefix}border-color-dark);
@@ -52,13 +52,15 @@
   align-items: center;
   justify-content: center;
   text-decoration: none;
-  padding: .25rem;
+  padding: 0.25rem;
   color: var(--#{$prefix}secondary);
   font-size: var(--#{$prefix}font-size-h5);
   border-radius: var(--#{$prefix}border-radius);
   line-height: 1;
   cursor: pointer;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.05),
+    0 1px 2px 0 rgba(0, 0, 0, 0.05);
   background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
 
   &:hover {

core/scss/marketing/_pricing.scss

@@ -79,7 +79,7 @@ $pricing-card-width: 22rem;
   justify-content: center;
   font-size: 2.5rem;
   line-height: 1;
-  font-weight: $font-weight-black;
+  font-weight: $font-weight-bold;
   margin: 0.75rem 0;
 }
 

core/scss/marketing/_sections.scss

@@ -108,13 +108,13 @@
 
   .wave-2 {
     animation: move-forever2 24s linear infinite;
-    opacity: .5;
+    opacity: 0.5;
     animation-delay: -2s;
   }
 
   .wave-3 {
     animation: move-forever3 18s linear infinite;
-    opacity: .3;
+    opacity: 0.3;
     animation-delay: -2s;
   }
 }

core/scss/marketing/_shape.scss

@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
 
 .shape {
   --#{$prefix}shape-size: #{$avatar-size};

core/scss/mixins/_functions.scss

@@ -1,9 +1,9 @@
-@use "sass:math";
+@use 'sass:math';
-@use "sass:string";
+@use 'sass:string';
-@use "sass:list";
+@use 'sass:list';
-@use "sass:map";
+@use 'sass:map';
-@use "sass:color";
+@use 'sass:color';
-@use "sass:meta";
+@use 'sass:meta';
 
 @function theme-color-lighter($color, $background: #fff) {
   @return color.mix($color, $background, 10%);
@@ -16,7 +16,7 @@
 //
 // Replace all occurrences of a substring within a string.
 //
-@function str-replace($string, $search, $replace: "") {
+@function str-replace($string, $search, $replace: '') {
   $index: string.index($string, $search);
 
   @if $index {
@@ -56,11 +56,11 @@
 // Escape SVG strings.
 //
 @function escape-svg($string) {
-  @if string.index($string, "data:image/svg+xml") {
+  @if string.index($string, 'data:image/svg+xml') {
     @each $char, $encoded in $escaped-characters {
       // Do not escape the url brackets
-      @if string.index($string, "url(") == 1 {
+      @if string.index($string, 'url(') == 1 {
-        $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
+        $string: url('#{str-replace(string.slice($string, 6, -3), $char, $encoded)}');
       } @else {
         $string: str-replace($string, $char, $encoded);
       }
@@ -112,7 +112,7 @@
   $prev-key: null;
   $prev-num: null;
   @each $key, $num in $map {
-    @if $prev-num == null or math.unit($num) == "%" or math.unit($prev-num) == "%" {
+    @if $prev-num == null or math.unit($num) == '%' or math.unit($prev-num) == '%' {
       // Do nothing
     } @else if not math.compatible($prev-num, $num) {
       @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
@@ -126,7 +126,7 @@
 
 // Starts at zero
 // Used to ensure the min-width of the lowest breakpoint starts at 0.
-@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
+@mixin _assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
   @if list.length($map) > 0 {
     $values: map.values($map);
     $first-value: list.nth($values, 1);
@@ -138,14 +138,15 @@
 
 // Colors
 @function to-rgb($value) {
-  @return color.channel($value, "red", $space: rgb), color.channel($value, "green", $space: rgb), color.channel($value, "blue", $space: rgb);
+  @return color.channel($value, 'red', $space: rgb), color.channel($value, 'green', $space: rgb), color.channel($value, 'blue', $space: rgb);
 }
 
 // stylelint-disable scss/dollar-variable-pattern
 @function rgba-css-var($identifier, $target) {
-  @if $identifier == "body" and $target == "bg" {
+  @if $identifier == 'body' and $target == 'bg' {
     @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
-  } @if $identifier == "body" and $target == "text" {
+  }
+  @if $identifier == 'body' and $target == 'text' {
     @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
   } @else {
     @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
@@ -159,10 +160,15 @@
     // allow to pass the $key and $value of the map as an function argument
     $_args: ();
     @each $arg in $args {
-      $_args: list.append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
+      $_args: list.append($_args, if($arg == '$key', $key, if($arg == '$value', $value, $arg)));
     }
 
-    $_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...)));
+    $_map: map.merge(
+      $_map,
+      (
+        $key: meta.call(meta.get-function($func), $_args...),
+      )
+    );
   }
 
   @return $_map;
@@ -183,7 +189,7 @@
   $result: ();
   @each $key, $value in $map {
     @if $key != 0 {
-      $result: map.merge($result, ("n" + $key: (-$value)));
+      $result: map.merge($result, ('n' + $key: (-$value)));
     }
   }
   @return $result;
@@ -194,7 +200,12 @@
   $result: ();
   @each $key, $value in $map {
     @if (index($values, $key) != null) {
-      $result: map.merge($result, ($key: $value));
+      $result: map.merge(
+        $result,
+        (
+          $key: $value,
+        )
+      );
     }
   }
   @return $result;
@@ -218,7 +229,7 @@
 // @param {String} $search - Substring to replace
 // @param {String} $replace ('') - New value
 // @return {String} - Updated string
-@function str-replace($string, $search, $replace: "") {
+@function str-replace($string, $search, $replace: '') {
   $index: string.index($string, $search);
 
   @if $index {
@@ -233,11 +244,11 @@
 // Requires the use of quotes around data URIs.
 
 @function escape-svg($string) {
-  @if string.index($string, "data:image/svg+xml") {
+  @if string.index($string, 'data:image/svg+xml') {
     @each $char, $encoded in $escaped-characters {
       // Do not escape the url brackets
-      @if string.index($string, "url(") == 1 {
+      @if string.index($string, 'url(') == 1 {
-        $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
+        $string: url('#{str-replace(string.slice($string, 6, -3), $char, $encoded)}');
       } @else {
         $string: str-replace($string, $char, $encoded);
       }
@@ -252,7 +263,12 @@
 
 // A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
 // stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
-$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
+$_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0.0027 0.003 0.0033 0.0037 0.004 0.0044 0.0048 0.0052 0.0056 0.006 0.0065 0.007 0.0075 0.008 0.0086 0.0091 0.0097 0.0103 0.011 0.0116 0.0123 0.013 0.0137 0.0144 0.0152 0.016 0.0168 0.0176 0.0185 0.0194 0.0203 0.0212 0.0222 0.0232 0.0242
+  0.0252 0.0262 0.0273 0.0284 0.0296 0.0307 0.0319 0.0331 0.0343 0.0356 0.0369 0.0382 0.0395 0.0409 0.0423 0.0437 0.0452 0.0467 0.0482 0.0497 0.0513 0.0529 0.0545 0.0561 0.0578 0.0595 0.0612 0.063 0.0648 0.0666 0.0685 0.0704 0.0723 0.0742 0.0762 0.0782 0.0802 0.0823 0.0844 0.0865 0.0887 0.0908 0.0931 0.0953 0.0976
+  0.0999 0.1022 0.1046 0.107 0.1095 0.1119 0.1144 0.117 0.1195 0.1221 0.1248 0.1274 0.1301 0.1329 0.1356 0.1384 0.1413 0.1441 0.147 0.15 0.1529 0.1559 0.159 0.162 0.1651 0.1683 0.1714 0.1746 0.1779 0.1812 0.1845 0.1878 0.1912 0.1946 0.1981 0.2016 0.2051 0.2086 0.2122 0.2159 0.2195 0.2232 0.227 0.2307 0.2346 0.2384
+  0.2423 0.2462 0.2502 0.2542 0.2582 0.2623 0.2664 0.2705 0.2747 0.2789 0.2831 0.2874 0.2918 0.2961 0.3005 0.305 0.3095 0.314 0.3185 0.3231 0.3278 0.3325 0.3372 0.3419 0.3467 0.3515 0.3564 0.3613 0.3663 0.3712 0.3763 0.3813 0.3864 0.3916 0.3968 0.402 0.4072 0.4125 0.4179 0.4233 0.4287 0.4342 0.4397 0.4452 0.4508 0.4564
+  0.4621 0.4678 0.4735 0.4793 0.4851 0.491 0.4969 0.5029 0.5089 0.5149 0.521 0.5271 0.5333 0.5395 0.5457 0.552 0.5583 0.5647 0.5711 0.5776 0.5841 0.5906 0.5972 0.6038 0.6105 0.6172 0.624 0.6308 0.6376 0.6445 0.6514 0.6584 0.6654 0.6724 0.6795 0.6867 0.6939 0.7011 0.7084 0.7157 0.7231 0.7305 0.7379 0.7454 0.7529 0.7605
+  0.7682 0.7758 0.7835 0.7913 0.7991 0.807 0.8148 0.8228 0.8308 0.8388 0.8469 0.855 0.8632 0.8714 0.8796 0.8879 0.8963 0.9047 0.9131 0.9216 0.9301 0.9387 0.9473 0.956 0.9647 0.9734 0.9823 0.9911 1;
 
 @function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
   $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
@@ -278,7 +294,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   $l1: luminance($background);
   $l2: luminance(opaque($background, $foreground));
 
-  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
+  @return if($l1 > $l2, divide($l1 + 0.05, $l2 + 0.05), divide($l2 + 0.05, $l1 + 0.05));
 }
 
 // Return WCAG2.2 relative luminance
@@ -286,17 +302,22 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
 @function luminance($color) {
   $rgb: (
-    "r": math.round(color.channel($color, "red", $space: rgb)),
+    'r': math.round(color.channel($color, 'red', $space: rgb)),
-    "g": math.round(color.channel($color, "green", $space: rgb)),
+    'g': math.round(color.channel($color, 'green', $space: rgb)),
-    "b": math.round(color.channel($color, "blue", $space: rgb))
+    'b': math.round(color.channel($color, 'blue', $space: rgb)),
   );
 
   @each $name, $value in $rgb {
-    $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), list.nth($_luminance-list, $value + 1));
+    $value: if(divide($value, 255) < 0.04045, divide(divide($value, 255), 12.92), list.nth($_luminance-list, $value + 1));
-    $rgb: map.merge($rgb, ($name: $value));
+    $rgb: map.merge(
+      $rgb,
+      (
+        $name: $value,
+      )
+    );
   }
 
-  @return (map.get($rgb, "r") * .2126) + (map.get($rgb, "g") * .7152) + (map.get($rgb, "b") * .0722);
+  @return (map.get($rgb, 'r') * 0.2126) + (map.get($rgb, 'g') * 0.7152) + (map.get($rgb, 'b') * 0.0722);
 }
 
 // Return opaque color
@@ -305,7 +326,6 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   @return color.mix(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
 }
 
-// scss-docs-start color-functions
 // Tint a color: mix a color with white
 @function tint-color($color, $weight) {
   @return color.mix(white, $color, $weight);
@@ -320,7 +340,6 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 @function shift-color($color, $weight) {
   @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
 }
-// scss-docs-end color-functions
 
 // Return valid calc
 @function add($value1, $value2, $return-calc: true) {
@@ -336,7 +355,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
     @return $value1 + $value2;
   }
 
-  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + string.unquote(" + ") + $value2);
+  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + string.unquote(' + ') + $value2);
 }
 
 @function subtract($value1, $value2, $return-calc: true) {
@@ -357,10 +376,10 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   }
 
   @if meta.type-of($value2) != number {
-    $value2: string.unquote("(") + $value2 + string.unquote(")");
+    $value2: string.unquote('(') + $value2 + string.unquote(')');
   }
 
-  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + string.unquote(" - ") + $value2);
+  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + string.unquote(' - ') + $value2);
 }
 
 @function divide($dividend, $divisor, $precision: 10) {
@@ -383,7 +402,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
       $quotient: $quotient + 1;
     }
     $result: $result * 10 + $quotient;
-    $factor: $factor * .1;
+    $factor: $factor * 0.1;
     $remainder: $remainder * 10;
     $precision: $precision - 1;
     @if ($precision < 0 and $remainder >= $divisor * 5) {
@@ -394,10 +413,10 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   $dividend-unit: math.unit($dividend);
   $divisor-unit: math.unit($divisor);
   $unit-map: (
-    "px": 1px,
+    'px': 1px,
-    "rem": 1rem,
+    'rem': 1rem,
-    "em": 1em,
+    'em': 1em,
-    "%": 1%
+    '%': 1%,
   );
   @if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) {
     $result: $result * map.get($unit-map, $dividend-unit);

core/scss/mixins/_mixins.scss

@@ -2,7 +2,7 @@
   font-size: $h5-font-size;
   font-weight: var(--#{$prefix}font-weight-medium);
   text-transform: uppercase;
-  letter-spacing: .04em;   
+  letter-spacing: 0.04em;
 
   @if $include-line-height {
     line-height: $h5-line-height;
@@ -15,7 +15,7 @@
 
 @mixin scrollbar {
   #{if(&, "&", "*")} {
-    scrollbar-color: color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), .20) transparent;
+    scrollbar-color: color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), 0.2) transparent;
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar {
@@ -27,7 +27,7 @@
   #{if(&, "&", "*")}::-webkit-scrollbar-thumb {
     border-radius: 1rem;
     border: 5px solid transparent;
-    box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), .20);
+    box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), 0.2);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-track {
@@ -35,7 +35,7 @@
   }
 
   #{if(&, "&", "*")}:hover::-webkit-scrollbar-thumb {
-    box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), .40);
+    box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), 0.4);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-corner {
@@ -43,7 +43,6 @@
   }
 }
 
-
 @mixin autodark-image {
   filter: brightness(0) invert(1);
 }
@@ -51,7 +50,7 @@
 //
 // Elements list
 //
-@mixin elements-list($gap: .5rem) {
+@mixin elements-list($gap: 0.5rem) {
   --#{$prefix}list-gap: #{$gap};
   display: flex;
   flex-wrap: wrap;
@@ -62,7 +61,7 @@
   outline: 0;
   box-shadow: 0 0 $focus-ring-blur $focus-ring-width rgba(var(--#{$prefix}primary-rgb), 0.25);
 
-  @if($show-border) {
+  @if ($show-border) {
     border-color: rgba(var(--#{$prefix}primary-rgb), 0.25);
   }
 }

core/scss/tabler-flags.scss

@@ -1,2 +1 @@
-@import "config";
+@import 'ui/flags';
-@import "ui/flags";

core/scss/tabler-marketing.scss

@@ -1,13 +1,13 @@
-@import "config";
+@import 'config';
-@import "variables";
+@import 'variables';
-@import "utilities-marketing";
+@import 'utilities-marketing';
 
-@import "marketing/core";
+@import 'marketing/core';
-@import "marketing/hero";
+@import 'marketing/hero';
-@import "marketing/browser";
+@import 'marketing/browser';
-@import "marketing/sections";
+@import 'marketing/sections';
-@import "marketing/filters";
+@import 'marketing/filters';
-@import "marketing/pricing";
+@import 'marketing/pricing';
-@import "marketing/shape";
+@import 'marketing/shape';
 
-@import "bootstrap/scss/utilities/api";
+@import 'bootstrap/scss/utilities/api';

core/scss/tabler-payments.scss

@@ -1,2 +1 @@
-@import "config";
+@forward 'ui/payments';
-@import "ui/payments";

core/scss/tabler-props.scss

@@ -1 +1 @@
-@import "props"
+@import 'props';

core/scss/tabler-socials.scss

@@ -1,2 +1 @@
-@import "config";
+@import 'ui/social';
-@import "ui/social";

core/scss/tabler-themes.scss

@@ -1,6 +1,6 @@
-@import "config";
+@import 'config';
 
-[data-bs-theme-base="slate"] {
+[data-bs-theme-base='slate'] {
   --#{$prefix}gray-50: #f8fafc;
   --#{$prefix}gray-100: #f1f5f9;
   --#{$prefix}gray-200: #e2e8f0;
@@ -14,7 +14,7 @@
   --#{$prefix}gray-950: #020617;
 }
 
-[data-bs-theme-base="gray"] {
+[data-bs-theme-base='gray'] {
   --#{$prefix}gray-50: #f9fafb;
   --#{$prefix}gray-100: #f3f4f6;
   --#{$prefix}gray-200: #e5e7eb;
@@ -28,7 +28,7 @@
   --#{$prefix}gray-950: #030712;
 }
 
-[data-bs-theme-base="zinc"] {
+[data-bs-theme-base='zinc'] {
   --#{$prefix}gray-50: #fafafa;
   --#{$prefix}gray-100: #f4f4f5;
   --#{$prefix}gray-200: #e4e4e7;
@@ -42,7 +42,7 @@
   --#{$prefix}gray-950: #09090b;
 }
 
-[data-bs-theme-base="neutral"] {
+[data-bs-theme-base='neutral'] {
   --#{$prefix}gray-50: #fafafa;
   --#{$prefix}gray-100: #f5f5f5;
   --#{$prefix}gray-200: #e5e5e5;
@@ -56,7 +56,7 @@
   --#{$prefix}gray-950: #0a0a0a;
 }
 
-[data-bs-theme-base="stone"] {
+[data-bs-theme-base='stone'] {
   --#{$prefix}gray-50: #fafaf9;
   --#{$prefix}gray-100: #f5f5f4;
   --#{$prefix}gray-200: #e7e5e4;
@@ -70,7 +70,7 @@
   --#{$prefix}gray-950: #0c0a09;
 }
 
-[data-bs-theme-base="pink"] {
+[data-bs-theme-base='pink'] {
   --#{$prefix}gray-50: #fdf2f8;
   --#{$prefix}gray-100: #fce7f3;
   --#{$prefix}gray-200: #fbcfe8;
@@ -85,25 +85,25 @@
 }
 
 @each $name, $value in $extra-colors {
-  [data-bs-theme-primary="#{$name}"] {
+  [data-bs-theme-primary='#{$name}'] {
     --#{$prefix}primary: #{$value};
     --#{$prefix}primary-rgb: #{to-rgb($value)};
   }
 }
 
-@each $value in (0, .5, 1, 1.5, 2) {
+@each $value in (0, 0.5, 1, 1.5, 2) {
-  [data-bs-theme-radius="#{$value}"] {
+  [data-bs-theme-radius='#{$value}'] {
     --#{$prefix}border-radius-scale: #{$value};
   }
 }
 
-[data-bs-theme-primary="inverted"] {
+[data-bs-theme-primary='inverted'] {
   --#{$prefix}primary: var(--#{$prefix}gray-800);
   --#{$prefix}primary-fg: var(--#{$prefix}light);
   --#{$prefix}primary-rgb: #{to-rgb($dark)};
 
-  &[data-bs-theme="dark"],
+  &[data-bs-theme='dark'],
-  [data-bs-theme="dark"] {
+  [data-bs-theme='dark'] {
     --#{$prefix}primary: #{$light};
     --#{$prefix}primary-fg: var(--#{$prefix}dark);
     --#{$prefix}primary-rgb: #{to-rgb($light)};
@@ -111,10 +111,10 @@
 }
 
 @each $name, $value in (monospace: $font-family-monospace, sans-serif: $font-family-sans-serif, serif: $font-family-serif, comic: $font-family-comic) {
-  [data-bs-theme-font="#{$name}"] {
+  [data-bs-theme-font='#{$name}'] {
     --#{$prefix}body-font-family: var(--#{$prefix}font-#{$name});
 
-    @if $name == "monospace" {
+    @if $name == 'monospace' {
       --#{$prefix}body-font-size: 80%;
     }
   }

core/scss/tabler-vendors.scss

@@ -1,16 +1,16 @@
-@import "config";
+@import 'config';
 
-@import "vendor/nouislider";
+@import 'vendor/nouislider';
-@import "vendor/litepicker";
+@import 'vendor/litepicker';
-@import "vendor/tom-select";
+@import 'vendor/tom-select';
-@import "vendor/apexcharts";
+@import 'vendor/apexcharts';
-@import "vendor/jsvectormap";
+@import 'vendor/jsvectormap';
-@import "vendor/dropzone";
+@import 'vendor/dropzone';
-@import "vendor/fslightbox";
+@import 'vendor/fslightbox';
-@import "vendor/plyr";
+@import 'vendor/plyr';
-@import "vendor/wysiwyg";
+@import 'vendor/wysiwyg';
-@import "vendor/stars-rating";
+@import 'vendor/stars-rating';
-@import "vendor/coloris";
+@import 'vendor/coloris';
-@import "vendor/typed";
+@import 'vendor/typed';
-@import "vendor/turbo";
+@import 'vendor/turbo';
-@import "vendor/fullcalendar";
+@import 'vendor/fullcalendar';

core/scss/tabler.scss

@@ -1,2 +1 @@
-@import "core";
+@import 'core';
- 

core/scss/ui/_accordion.scss

@@ -32,7 +32,7 @@
   border: 0;
   font-size: inherit;
   font-weight: var(--#{$prefix}accordion-btn-font-weight);
-  gap: .75rem;
+  gap: 0.75rem;
 
   &:not(.collapsed) {
     border-bottom-color: transparent;

core/scss/ui/_alerts.scss

@@ -1,16 +1,14 @@
 .alert {
-  // scss-docs-start alert-variables
   --#{$prefix}alert-color: var(--#{$prefix}body-color);
-  --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), .1)};
+  --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), 0.1)};
   --#{$prefix}alert-padding-x: #{$alert-padding-x};
   --#{$prefix}alert-padding-y: #{$alert-padding-y};
   --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
-  --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-color), .2)};
+  --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-color), 0.2)};
   --#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color);
   --#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
   --#{$prefix}alert-link-color: inherit;
   --#{$prefix}alert-heading-font-weight: var(--#{$prefix}font-weight-medium);
-  // scss-docs-end
 
   position: relative;
   padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
@@ -25,7 +23,7 @@
 
 .alert-heading {
   color: inherit;
-  margin-bottom: .25rem; // todo: use variable
+  margin-bottom: 0.25rem; // todo: use variable
   font-weight: var(--#{$prefix}alert-heading-font-weight);
 }
 
@@ -62,7 +60,6 @@
   }
 }
 
-
 .alert-dismissible {
   padding-right: 3rem; //todo: use variable
 

core/scss/ui/_avatars.scss

@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
 
 .avatar {
   --#{$prefix}avatar-size: var(--#{$prefix}avatar-list-size, #{$avatar-size});
@@ -26,7 +26,10 @@
   background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
   border-radius: $avatar-border-radius;
   box-shadow: var(--#{$prefix}avatar-box-shadow);
-  transition: color $transition-time, background-color $transition-time, box-shadow $transition-time;
+  transition:
+    color $transition-time,
+    background-color $transition-time,
+    box-shadow $transition-time;
 
   .icon {
     width: var(--#{$prefix}avatar-icon-size);
@@ -94,7 +97,9 @@
 
   .avatar {
     margin-right: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
-    box-shadow: var(--#{$prefix}avatar-box-shadow), 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+    box-shadow:
+      var(--#{$prefix}avatar-box-shadow),
+      0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
   }
 }
 
@@ -130,12 +135,12 @@
 .avatar-upload-text {
   font-size: $h6-font-size;
   line-height: 1;
-  margin-top: .25rem;
+  margin-top: 0.25rem;
 }
 
 .avatar-cover {
-  margin-top: calc(-.5 * var(--#{$prefix}avatar-size));
+  margin-top: calc(-0.5 * var(--#{$prefix}avatar-size));
-  box-shadow: 0 0 0 .25rem var(--#{$prefix}card-bg, var(--#{$prefix}body-bg));
+  box-shadow: 0 0 0 0.25rem var(--#{$prefix}card-bg, var(--#{$prefix}body-bg));
 }
 
 .avatar-brand {

core/scss/ui/_badges.scss

@@ -16,7 +16,7 @@
   white-space: nowrap;
   justify-content: center;
   align-items: center;
-  gap: .25rem;
+  gap: 0.25rem;
   background: $badge-bg-color;
   overflow: hidden;
   user-select: none;

core/scss/ui/_breadcrumbs.scss

@@ -76,6 +76,6 @@
 
 @each $name, $symbol in $breadcrumb-variants {
   .breadcrumb-#{$name} {
-    --#{$prefix}breadcrumb-divider: "#{quote($symbol)}";
+    --#{$prefix}breadcrumb-divider: '#{quote($symbol)}';
   }
 }

core/scss/ui/_buttons.scss

@@ -1,5 +1,5 @@
-@use "sass:color";
+@use 'sass:color';
-@use "sass:map";
+@use 'sass:map';
 
 //
 // Button
@@ -78,7 +78,7 @@
 //
 @each $color, $value in map.merge($theme-colors, $social-colors) {
   .btn-#{$color} {
-    @if $color == "dark" {
+    @if $color == 'dark' {
       --#{$prefix}btn-border-color: var(--#{$prefix}dark-mode-border-color);
       --#{$prefix}btn-hover-border-color: var(--#{$prefix}dark-mode-border-active-color);
       --#{$prefix}btn-active-border-color: var(--#{$prefix}dark-mode-border-active-color);
@@ -175,7 +175,7 @@
   padding-left: 1.5em;
   border-radius: 10rem;
 
-  &[class*="btn-icon"] {
+  &[class*='btn-icon'] {
     padding: 0.375rem 15px;
   }
 }
@@ -236,7 +236,7 @@
   }
 
   &:after {
-    content: "";
+    content: '';
     display: inline-block;
     vertical-align: text-bottom;
     border: $spinner-border-width var(--#{$prefix}border-style) currentColor;

core/scss/ui/_calendars.scss

@@ -20,7 +20,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
-  padding: .5rem 0;
+  padding: 0.5rem 0;
 }
 
 .calendar-header {
@@ -30,13 +30,13 @@
 .calendar-date {
   flex: 0 0 calc(100% / 7);
   max-width: calc(100% / 7);
-  padding: .2rem;
+  padding: 0.2rem;
   text-align: center;
   border: 0;
 
   &.prev-month,
   &.next-month {
-    opacity: .25;
+    opacity: 0.25;
   }
 
   .date-item {
@@ -55,7 +55,7 @@
     border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
     border-radius: $border-radius-pill;
     outline: 0;
-    @include transition(background $transition-time, border $transition-time, box-shadow .32s, color $transition-time);
+    @include transition(background $transition-time, border $transition-time, box-shadow 0.32s, color $transition-time);
 
     &:hover {
       color: var(--#{$prefix}primary);
@@ -80,8 +80,8 @@
     right: 0;
     left: 0;
     height: 1.4rem;
-    content: "";
+    content: '';
-    background: rgba(var(--#{$prefix}primary-rgb), .1);
+    background: rgba(var(--#{$prefix}primary-rgb), 0.1);
     transform: translateY(-50%);
   }
 

core/scss/ui/_cards.scss

@@ -58,15 +58,15 @@
   width: calc(var(--#{$prefix}stamp-size) * 1);
   height: calc(var(--#{$prefix}stamp-size) * 1);
   position: relative;
-  top: calc(var(--#{$prefix}stamp-size) * -.25);
+  top: calc(var(--#{$prefix}stamp-size) * -0.25);
-  right: calc(var(--#{$prefix}stamp-size) * -.25);
+  right: calc(var(--#{$prefix}stamp-size) * -0.25);
-  font-size: calc(var(--#{$prefix}stamp-size) * .75);
+  font-size: calc(var(--#{$prefix}stamp-size) * 0.75);
   transform: rotate(10deg);
 
   .icon {
     stroke-width: 2;
-    width: calc(var(--#{$prefix}stamp-size) * .75);
+    width: calc(var(--#{$prefix}stamp-size) * 0.75);
-    height: calc(var(--#{$prefix}stamp-size) * .75);
+    height: calc(var(--#{$prefix}stamp-size) * 0.75);
   }
 }
 
@@ -96,7 +96,7 @@
   box-shadow: none;
 
   .card-body {
-    opacity: .64;
+    opacity: 0.64;
   }
 }
 
@@ -131,7 +131,7 @@
 Stacked card
  */
 .card-stacked {
-  --#{$prefix}card-stacked-offset: .25rem;
+  --#{$prefix}card-stacked-offset: 0.25rem;
   position: relative;
 
   &:after {
@@ -140,7 +140,7 @@ Stacked card
     right: var(--#{$prefix}card-stacked-offset);
     left: var(--#{$prefix}card-stacked-offset);
     height: var(--#{$prefix}card-stacked-offset);
-    content: "";
+    content: '';
     background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
     border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}card-border-color);
     border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
@@ -158,8 +158,8 @@ Stacked card
     right: 0;
     bottom: 0;
     left: 0;
-    content: "";
+    content: '';
-    background: rgba($dark, .48);
+    background: rgba($dark, 0.48);
   }
 
   &:first-child,
@@ -175,8 +175,8 @@ Stacked card
 }
 
 .card-actions {
-  margin: -.5rem -.5rem -.5rem auto;
+  margin: -0.5rem -0.5rem -0.5rem auto;
-  padding-left: .5rem;
+  padding-left: 0.5rem;
 
   a {
     text-decoration: none;
@@ -204,14 +204,14 @@ Stacked card
   background: $card-header-tabs-bg;
   flex: 1;
   margin: calc(var(--#{$prefix}card-cap-padding-y) * -1) calc(var(--#{$prefix}card-cap-padding-x) * -1) calc(var(--#{$prefix}card-cap-padding-y) * -1);
-  padding: calc(var(--#{$prefix}card-cap-padding-y) * .5) calc(var(--#{$prefix}card-cap-padding-x) * .5) 0;
+  padding: calc(var(--#{$prefix}card-cap-padding-y) * 0.5) calc(var(--#{$prefix}card-cap-padding-x) * 0.5) 0;
   border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
 }
 
 .card-header-pills {
   flex: 1;
-  margin-top: -.5rem;
+  margin-top: -0.5rem;
-  margin-bottom: -.5rem;
+  margin-bottom: -0.5rem;
 }
 
 // Card rotate
@@ -232,18 +232,18 @@ Stacked card
   &:hover {
     color: inherit;
     text-decoration: none;
-    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .08);
+    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.08);
   }
 }
 
 .card-link-rotate:hover {
   transform: rotate(1.5deg);
-  opacity: 1
+  opacity: 1;
 }
 
 .card-link-pop:hover {
   transform: translateY(-2px);
-  opacity: 1
+  opacity: 1;
 }
 
 // Card footer
@@ -267,7 +267,7 @@ Stacked card
 
 // Card progress
 .card-progress {
-  height: .25rem;
+  height: 0.25rem;
 
   &:last-child {
     border-radius: 0 0 2px 2px;
@@ -309,7 +309,7 @@ Stacked card
   }
 
   .card-title & {
-    margin: 0 0 0 .25rem;
+    margin: 0 0 0 0.25rem;
     font-size: $h4-font-size;
   }
 }
@@ -359,7 +359,7 @@ Card optinos
  */
 .card-options {
   top: 1.5rem;
-  right: .75rem;
+  right: 0.75rem;
   display: flex;
   margin-left: auto;
 }
@@ -367,11 +367,10 @@ Card optinos
 .card-options-link {
   display: inline-block;
   min-width: 1rem;
-  margin-left: .25rem;
+  margin-left: 0.25rem;
   color: var(--#{$prefix}secondary);
 }
 
-
 /**
 Card status
  */
@@ -451,22 +450,22 @@ Card table
   }
 
   tbody {
-		tr {
+    tr {
-			&:last-child {
+      &:last-child {
-				td {
+        td {
-					border-bottom: 0;
+          border-bottom: 0;
-				}
+        }
-			}
+      }
-		}
+    }
-	}
+  }
 
-	tfoot {
+  tfoot {
-		tr {
+    tr {
-			&:last-child {
+      &:last-child {
-				border-bottom: 0;
+        border-bottom: 0;
-			}
+      }
-		}
+    }
-	}
+  }
 
   .card-body + & {
     border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}table-border-color);
@@ -505,8 +504,8 @@ Card avatar
 .card-avatar {
   margin-left: auto;
   margin-right: auto;
-  box-shadow: 0 0 0 .25rem var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+  box-shadow: 0 0 0 0.25rem var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
-  margin-top: calc(-1 * calc(var(--#{$prefix}avatar-size) * .5));
+  margin-top: calc(-1 * calc(var(--#{$prefix}avatar-size) * 0.5));
 }
 
 /*

core/scss/ui/_carousel.scss

@@ -1,5 +1,4 @@
 .carousel {
-
 }
 
 .carousel-indicators-vertical {
@@ -30,7 +29,7 @@
 
 .carousel-indicators-thumb {
   [data-bs-target] {
-    width: $carousel-indicator-thumb-width * .5;
+    width: $carousel-indicator-thumb-width * 0.5;
     height: auto;
     background: no-repeat center/cover;
     border: 0;
@@ -44,7 +43,7 @@
     }
 
     &:before {
-      content: "";
+      content: '';
       padding-top: var(--#{$prefix}aspect-ratio, 100%);
       display: block;
     }
@@ -64,5 +63,5 @@
   right: 0;
   bottom: 0;
   height: 90%;
-  background: linear-gradient(0deg, rgba($dark, .9), rgba($dark, 0));
+  background: linear-gradient(0deg, rgba($dark, 0.9), rgba($dark, 0));
 }

core/scss/ui/_close.scss

@@ -1,6 +1,6 @@
 .btn-close {
   --#{$prefix}btn-close-color: currentColor;
-  --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
+  --#{$prefix}btn-close-bg: #{escape-svg($btn-close-bg)};
   --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
   --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
   --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
@@ -12,7 +12,7 @@
   height: var(--#{$prefix}btn-close-size);
   padding: $btn-close-padding-y $btn-close-padding-x;
   color: var(--#{$prefix}btn-close-color);
-  mask: var(--#{$prefix}btn-close-bg) no-repeat center/calc(var(--#{$prefix}btn-close-size) * .75);
+  mask: var(--#{$prefix}btn-close-bg) no-repeat center/calc(var(--#{$prefix}btn-close-size) * 0.75);
   background-color: var(--#{$prefix}btn-close-color);
   border: 0;
   border-radius: var(--tblr-border-radius);

core/scss/ui/_datagrid.scss

@@ -13,5 +13,5 @@
 
 .datagrid-title {
   @include subheader;
-  margin-bottom: .25rem;
+  margin-bottom: 0.25rem;
 }

core/scss/ui/_dropdowns.scss

@@ -1,5 +1,5 @@
 .dropdown-menu {
-  --#{$prefix}dropdown-item-gap: .5rem;
+  --#{$prefix}dropdown-item-gap: 0.5rem;
   --#{$prefix}dropdown-item-icon-size: #{$icon-size};
   --#{$prefix}dropdown-item-icon-color: var(--#{$prefix}tertiary);
   user-select: none;
@@ -46,7 +46,7 @@
 
 .dropdown-header {
   @include subheader;
-  padding-bottom: .25rem;
+  padding-bottom: 0.25rem;
   pointer-events: none;
 }
 
@@ -66,16 +66,15 @@
 
 .dropdown-menu-columns {
   display: flex;
-  flex: 0 .25rem;
+  flex: 0 0.25rem;
 }
 
 .dropdown-menu-arrow {
-
   &:before {
-    content: "";
+    content: '';
     position: absolute;
-    top: -.25rem;
+    top: -0.25rem;
-    left: .75rem;
+    left: 0.75rem;
     display: block;
     background: inherit;
     width: 14px;
@@ -91,7 +90,7 @@
 
   &.dropdown-menu-end {
     &:before {
-      right: .75rem;
+      right: 0.75rem;
       left: auto;
     }
   }
@@ -100,7 +99,7 @@
 .dropend {
   > .dropdown-menu {
     margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
-    margin-left: -.25rem;
+    margin-left: -0.25rem;
   }
 
   .dropdown-toggle {
@@ -120,4 +119,3 @@
     box-shadow: none;
   }
 }
-

core/scss/ui/_empty.scss

@@ -46,14 +46,13 @@
 
 .empty-title,
 .empty-subtitle {
-  margin: 0 0 .5rem;
+  margin: 0 0 0.5rem;
 }
 
 .empty-action {
   margin-top: 1.5rem;
 }
 
-
 .empty-bordered {
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   border-radius: var(--#{$prefix}border-radius);

core/scss/ui/_flags.scss

@@ -1,17 +1,14 @@
-@use "sass:map";
+@use 'sass:map';
-
+@use '../config';
-$countries: (
-  'ad', 'af', 'ae', 'afrun', 'ag', 'ai', 'al', 'am', 'ao', 'aq', 'ar', 'as', 'at', 'au', 'aw', 'ax', 'az', 'ba', 'bb', 'bd', 'be', 'bf', 'bg', 'bh', 'bi', 'bj', 'bl', 'bm', 'bn', 'bo', 'bq-bo', 'bq-sa', 'bq-se', 'br', 'bs', 'bt', 'bv', 'bw', 'by', 'bz', 'ca', 'cc', 'cd', 'cf', 'cg', 'ch', 'ci', 'ck', 'cl', 'cm', 'cn', 'co', 'cr', 'cu', 'cv', 'cw', 'cx', 'cy', 'cz', 'de', 'dj', 'dk', 'dm', 'do', 'dz', 'ec', 'ee', 'eg', 'eh', 'er', 'es', 'et', 'eu', 'fi', 'fj', 'fk', 'fm', 'fo', 'fr', 'ga', 'gb-eng', 'gb-sct', 'gb', 'gb-wls', 'gb-nir', 'gd', 'ge', 'gf', 'gg', 'gh', 'gi', 'gl', 'gm', 'gn', 'gp', 'gq', 'gr', 'gs', 'gt', 'gu', 'gw', 'gy', 'hk', 'hm', 'hn', 'hr', 'ht', 'hu', 'id', 'ie', 'il', 'im', 'in', 'io', 'iq', 'ir', 'is', 'it', 'je', 'jm', 'jo', 'jp', 'ke', 'kg', 'kh', 'ki', 'km', 'kn', 'kp', 'kr', 'kw', 'ky', 'kz', 'la', 'lb', 'lc', 'li', 'lk', 'lr', 'ls', 'lt', 'lu', 'lv', 'ly', 'ma', 'mc', 'md', 'me', 'mf', 'mg', 'mh', 'mk', 'ml', 'mm', 'mn', 'mo', 'mp', 'mq', 'mr', 'ms', 'mt', 'mu', 'mv', 'mw', 'mx', 'my', 'mz', 'na', 'nc', 'ne', 'nf', 'ng', 'ni', 'nl', 'no', 'np', 'nr', 'nu', 'nz', 'om', 'pa', 'pe', 'pf', 'pg', 'ph', 'pk', 'pl', 'pm', 'pn', 'pr', 'ps', 'pt', 'pw', 'py', 'qa', 'rainbow', 're', 'ro', 'rs', 'ru', 'rw', 'sa', 'sb', 'sc', 'sd', 'se', 'sg', 'sh', 'si', 'sj', 'sk', 'sl', 'sm', 'sn', 'so', 'sr', 'ss', 'st', 'sv', 'sx', 'sy', 'sz', 'tc', 'td', 'tf', 'tg', 'th', 'tj', 'tk', 'tl', 'tm', 'tn', 'to', 'tr', 'tt', 'tv', 'tw', 'tz', 'ua', 'ug', 'um', 'unasur', 'us', 'uy', 'uz', 'va', 'vc', 've', 'vg', 'vi', 'vn', 'vu', 'wf', 'ws', 'ye', 'za', 'zm', 'zw'
-);
 
 .flag {
   position: relative;
   display: inline-block;
-  width: $avatar-size;
+  width: config.$avatar-size;
   aspect-ratio: 1.33333;
   background: no-repeat center/cover;
-  box-shadow: $flag-box-shadow;
+  box-shadow: config.$flag-box-shadow;
-  border-radius: $flag-border-radius;
+  border-radius: config.$flag-border-radius;
   vertical-align: bottom;
 
   &.flag-country-np {
@@ -20,13 +17,13 @@ $countries: (
   }
 }
 
-@each $country in $countries {
+@each $country in config.$flag-countries {
   .flag-country-#{$country} {
-    background-image: url("#{$assets-base}/img/flags/#{$country}.svg");
+    background-image: url('#{config.$assets-base}/img/flags/#{$country}.svg');
   }
 }
 
-@each $flag-size, $size in $flag-sizes {
+@each $flag-size, $size in config.$flag-sizes {
   .flag-#{$flag-size} {
     width: map.get($size, size);
 

core/scss/ui/_forms.scss

@@ -14,7 +14,7 @@ Form label
 
   &.required {
     &:after {
-      content: "*";
+      content: '*';
       margin-left: 0.25rem;
       color: $red;
     }
@@ -233,7 +233,7 @@ Upload files
 Floating inputs
  */
 // Fix for the bug in twbs/bootstrap v5.3.3. Issue #39080. Should be fixed in v5.3.4
-label[for="floating-input"] {
+label[for='floating-input'] {
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;

core/scss/ui/_grid.scss

@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
 
 .row > * {
   min-width: 0;
@@ -17,13 +17,13 @@
   }
 }
 
-@each $name, $value in (0: 0, sm: .375rem, md: 1.5rem, lg: 3rem) {
+@each $name, $value in (0: 0, sm: 0.375rem, md: 1.5rem, lg: 3rem) {
   .row-#{$name} {
     margin-right: calc(-1 * $value);
     margin-left: calc(-1 * $value);
 
     > .col,
-    > [class*="col-"] {
+    > [class*='col-'] {
       padding-right: $value;
       padding-left: $value;
     }
@@ -36,7 +36,7 @@
 
 .row-deck {
   > .col,
-  > [class*="col-"] {
+  > [class*='col-'] {
     display: flex;
     align-items: stretch;
 
@@ -56,7 +56,15 @@
   }
 }
 
-@each $name, $size in map.merge((null: $spacer), $spacers) {
+@each $name,
+  $size
+    in map.merge(
+      (
+        null: $spacer,
+      ),
+      $spacers
+    )
+{
   $name-prefixed: if($name == null, null, '-#{$name}');
 
   .space-y#{$name-prefixed} {
@@ -71,7 +79,15 @@
   }
 }
 
-@each $name, $size in map.merge((null: $spacer), $spacers) {
+@each $name,
+  $size
+    in map.merge(
+      (
+        null: $spacer,
+      ),
+      $spacers
+    )
+{
   $name-prefixed: if($name == null, null, '-#{$name}');
 
   .divide-y#{$name-prefixed} {

core/scss/ui/_icons.scss

@@ -22,7 +22,7 @@
 //
 .icon-inline {
   --#{$prefix}icon-size: 1rem;
-  vertical-align: -.2rem;
+  vertical-align: -0.2rem;
 }
 
 //
@@ -54,19 +54,19 @@
 // Icons animation
 //
 .icon-pulse {
-  transition: all .15s ease 0s;
+  transition: all 0.15s ease 0s;
   animation: pulse 2s ease infinite;
-  animation-fill-mode: both
+  animation-fill-mode: both;
 }
 
 .icon-tada {
-  transition: all .15s ease 0s;
+  transition: all 0.15s ease 0s;
   animation: tada 3s ease infinite;
-  animation-fill-mode: both
+  animation-fill-mode: both;
 }
 
 .icon-rotate {
-  transition: all .15s ease 0s;
+  transition: all 0.15s ease 0s;
   animation: rotate-360 3s linear infinite;
-  animation-fill-mode: both
+  animation-fill-mode: both;
 }

core/scss/ui/_images.scss

@@ -1,7 +1,7 @@
-@use "sass:math";
+@use 'sass:math';
 
 .img-responsive {
-  --#{$prefix}img-responsive-ratio: #{math.percentage(.75)};
+  --#{$prefix}img-responsive-ratio: #{math.percentage(0.75)};
   background: no-repeat center/cover;
   padding-top: var(--#{$prefix}img-responsive-ratio);
 }

core/scss/ui/_lists.scss

@@ -5,7 +5,7 @@
 
 .list-group-header {
   background: $list-group-header-bg;
-  padding: .5rem $list-group-item-padding-x;
+  padding: 0.5rem $list-group-item-padding-x;
   font-size: $h5-font-size;
   font-weight: var(--#{$prefix}font-weight-medium);
   line-height: 1;
@@ -69,11 +69,9 @@
   }
 }
 
-
-
 .list-group-transparent {
   --#{$prefix}list-group-border-radius: 0;
-  margin: 0 (- $list-group-item-padding-x);
+  margin: 0 (-$list-group-item-padding-x);
 
   .list-group-item {
     background: none;

core/scss/ui/_loaders.scss

@@ -12,14 +12,14 @@
     left: 0;
     width: 100%;
     height: 100%;
-    content: "";
+    content: '';
     border: 1px var(--#{$prefix}border-style);
     border-color: transparent;
     border-top-color: currentColor;
     border-left-color: currentColor;
 
     border-radius: $border-radius-pill;
-    animation: rotate-360 .6s linear;
+    animation: rotate-360 0.6s linear;
     animation-iteration-count: infinite;
   }
 }
@@ -47,12 +47,11 @@ Dimmer
 
     .dimmer-content {
       pointer-events: none;
-      opacity: .1;
+      opacity: 0.1;
     }
   }
 }
 
-
 @keyframes animated-dots {
   0% {
     transform: translateX(-100%);
@@ -66,7 +65,7 @@ Dimmer
 
   &:after {
     display: inline-block;
-    content: "...";
+    content: '...';
     animation: animated-dots 1.2s steps(4, jump-none) infinite;
   }
 }

core/scss/ui/_markdown.scss

@@ -21,11 +21,20 @@ Markdown
   }
 
   > {
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
       font-weight: var(--#{$prefix}font-weight-bold);
     }
 
-    h2, h3, h4, h5, h6 {
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
       margin-top: 2.5rem;
     }
   }
@@ -38,7 +47,7 @@ Markdown
   > blockquote {
     font-size: $h3-font-size;
     margin: 1.5rem 0;
-    padding: .5rem 1.5rem;
+    padding: 0.5rem 1.5rem;
   }
 
   > img,

core/scss/ui/_modals.scss

@@ -1,4 +1,5 @@
-.modal-content, .modal-header {
+.modal-content,
+.modal-header {
   > .btn-close {
     position: absolute;
     top: 0;
@@ -51,10 +52,10 @@
   @if $modal-footer-border-width == 0 {
     padding-top: 0;
   } @else {
-    padding-top: .75rem;
+    padding-top: 0.75rem;
   }
 
-  padding-bottom: .75rem;
+  padding-bottom: 0.75rem;
 }
 
 .modal-blur {

core/scss/ui/_nav.scss

@@ -12,7 +12,7 @@
   .nav {
     margin-left: 1.25rem;
     border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-    padding-left: .5rem;
+    padding-left: 0.5rem;
   }
 
   .nav-link.active,
@@ -76,7 +76,7 @@
 
 .nav-link-toggle {
   margin-left: auto;
-  padding: 0 .25rem;
+  padding: 0 0.25rem;
   @include transition(transform $transition-time);
   @include caret();
 
@@ -84,7 +84,7 @@
     margin: 0;
   }
 
-  @at-root .nav-link[aria-expanded="true"] & {
+  @at-root .nav-link[aria-expanded='true'] & {
     transform: rotate(180deg);
   }
 }
@@ -92,7 +92,7 @@
 .nav-link-icon {
   width: $nav-link-icon-size;
   height: $nav-link-icon-size;
-  margin-right: .5rem;
+  margin-right: 0.5rem;
   color: $nav-link-icon-color;
 
   svg {

core/scss/ui/_pagination.scss

@@ -1,6 +1,6 @@
 .pagination {
   margin: 0;
-  --#{$prefix}pagination-gap: .25rem;
+  --#{$prefix}pagination-gap: 0.25rem;
   user-select: none;
   gap: var(--#{$prefix}pagination-gap);
   line-height: var(--#{$prefix}body-line-height);
@@ -20,8 +20,8 @@
 }
 
 .page-text {
-  padding-left: .5rem;
+  padding-left: 0.5rem;
-  padding-right: .5rem;
+  padding-right: 0.5rem;
 }
 
 .page-item {

core/scss/ui/_payments.scss

@@ -1,29 +1,28 @@
-@use "sass:map";
+@use 'sass:map';
-
+@use '../config';
-$payment-icons: ("2c2p", "2checkout", "adyen", "affirm", "alipay-plus", "alipay", "allegro-pay", "amazon-pay", "amazon", "americanexpress", "applepay", "authorize", "autopay", "bancontact", "binance-usd", "bitcoin", "bitpay", "bkash", "blik", "braintree", "cash-app", "chime", "cirrus", "clickandbuy", "coinkite", "dinersclub", "directdebit", "discover", "dotpay", "dwolla", "easypaisa", "ebay", "elo", "epayco", "esewa", "ethereum", "eway", "fonepay", "giropay", "google-pay", "googlewallet", "hubspot", "ingenico", "ideal", "imepay", "jcb", "khalti", "klarna", "laser", "litecoin", "maestro", "mastercard", "mercado-pago", "metamask", "mir", "monero", "moneygram", "neteller", "ogone", "okpay", "opensea", "paybox", "payconiq", "payka", "payline", "paymill", "payone", "payoneer", "paypal", "paypo", "paysafe", "paysafecard", "payu", "payza", "poli", "przelewy24", "revolut-pay", "ripple", "sage", "samsung-pay", "sepa", "shop-pay", "shopify", "skrill", "solana", "solo", "spingo", "square", "stax", "stripe", "switch", "tether", "tpay", "troy", "true-usd", "ukash", "unionpay", "venmo", "verifone", "verisign", "visa", "we-chat-pay", "webmoney", "westernunion", "wise", "worldpay", "zelle");
 
 .payment {
-  height: $avatar-size;
+  height: config.$avatar-size;
   aspect-ratio: 1.66666;
   display: inline-block;
   background: no-repeat center/100% 100%;
   vertical-align: bottom;
   font-style: normal;
-  box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
   border-radius: 2px;
 }
 
-@each $payment in $payment-icons {
+@each $payment in config.$payment-providers {
   .payment-provider-#{$payment} {
-    background-image: url("#{$assets-base}/img/payments/#{$payment}.svg");
+    background-image: url('#{config.$assets-base}/img/payments/#{$payment}.svg');
   }
 
   .payment-provider-#{$payment}-dark {
-    background-image: url("#{$assets-base}/img/payments/#{$payment}-dark.svg");
+    background-image: url('#{config.$assets-base}/img/payments/#{$payment}-dark.svg');
   }
 }
 
-@each $payment-size, $size in $payment-sizes {
+@each $payment-size, $size in config.$payment-sizes {
   .payment-#{$payment-size} {
     height: map.get($size, size);
   }

core/scss/ui/_placeholder.scss

@@ -1,9 +1,9 @@
 .placeholder {
-  &:not(.btn):not([class*="bg-"]) {
+  &:not(.btn):not([class*='bg-']) {
     background-color: currentColor !important;
   }
 
-  &:not(.avatar):not([class*="card-img-"]), {
+  &:not(.avatar):not([class*='card-img-']) {
     border-radius: var(--#{$prefix}border-radius);
   }
 }

core/scss/ui/_progress.scss

@@ -39,11 +39,11 @@ Progress
 }
 
 .progress-sm {
-  height: .25rem;
+  height: 0.25rem;
 }
 
 .progress-lg {
-  height: .75rem;
+  height: 0.75rem;
 }
 
 .progress-xl {
@@ -65,13 +65,13 @@ Progress bar
     top: 0;
     bottom: 0;
     left: 0;
-    content: "";
+    content: '';
     background-color: inherit;
     will-change: left, right;
   }
 
   &:before {
-    animation: progress-indeterminate 1.5s cubic-bezier(.65, .815, .735, .395) infinite;
+    animation: progress-indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   }
 }
 
@@ -81,13 +81,12 @@ Progress bar
   }
 }
 
-
 /**
 Progressbg
  */
 .progressbg {
   position: relative;
-  padding: .25rem .5rem;
+  padding: 0.25rem 0.5rem;
   display: flex;
 }
 
@@ -125,12 +124,12 @@ Progress steps
   padding: 0;
   margin: 0;
   list-style: none;
-  gap: .25rem;
+  gap: 0.25rem;
 }
 
 .progress-steps-item {
   flex: 1 1 0;
-  min-height: .25rem;
+  min-height: 0.25rem;
   margin-top: 0;
   color: inherit;
   text-align: center;

core/scss/ui/_ribbons.scss

@@ -4,10 +4,10 @@
   --#{$prefix}ribbon-margin: #{$card-ribbon-margin};
   --#{$prefix}ribbon-border-radius: #{$card-ribbon-border-radius};
   position: absolute;
-  top: .75rem;
+  top: 0.75rem;
   right: calc(-1 * var(--#{$prefix}ribbon-margin));
   z-index: 1;
-  padding: .25rem .75rem;
+  padding: 0.25rem 0.75rem;
   font-size: $card-ribbon-font-size;
   font-weight: var(--#{$prefix}font-weight-bold);
   line-height: 1;
@@ -29,9 +29,9 @@
     bottom: 100%;
     width: 0;
     height: 0;
-    content: "";
+    content: '';
     filter: brightness(70%);
-    border: calc(var(--#{$prefix}ribbon-margin) * .5) var(--#{$prefix}border-style);
+    border: calc(var(--#{$prefix}ribbon-margin) * 0.5) var(--#{$prefix}border-style);
     border-color: inherit;
     border-top-color: transparent;
     border-right-color: transparent;
@@ -44,7 +44,7 @@
       }
 
       &.bg-#{$color}-lt {
-        border-color: rgba(var(--#{$prefix}#{$color}-rgb), .1) !important;
+        border-color: rgba(var(--#{$prefix}#{$color}-rgb), 0.1) !important;
       }
     }
   }
@@ -58,9 +58,9 @@
 
 .ribbon-top {
   top: calc(-1 * var(--#{$prefix}ribbon-margin));
-  right: .75rem;
+  right: 0.75rem;
   width: 2rem;
-  padding: .5rem 0;
+  padding: 0.5rem 0;
   border-radius: 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius);
 
   &:before {
@@ -74,7 +74,7 @@
 
   &.ribbon-start {
     right: auto;
-    left: .75rem;
+    left: 0.75rem;
 
     &:before {
       top: 0;
@@ -101,11 +101,11 @@
 
 .ribbon-bottom {
   top: auto;
-  bottom: .75rem;
+  bottom: 0.75rem;
 }
 
 .ribbon-bookmark {
-  padding-left: .25rem;
+  padding-left: 0.25rem;
   border-radius: 0 0 var(--#{$prefix}ribbon-border-radius) 0;
 
   &:after {
@@ -115,30 +115,30 @@
     display: block;
     width: 0;
     height: 0;
-    content: "";
+    content: '';
     border: 1rem var(--#{$prefix}border-style);
     border-color: inherit;
     border-right-width: 0;
     border-left-color: transparent;
-    border-left-width: .5rem;
+    border-left-width: 0.5rem;
   }
 
   &.ribbon-left {
-    padding-right: .5rem;
+    padding-right: 0.5rem;
 
     &:after {
       right: auto;
       left: 100%;
       border-right-color: transparent;
 
-      border-right-width: .5rem;
+      border-right-width: 0.5rem;
       border-left-width: 0;
     }
   }
 
   &.ribbon-top {
     padding-right: 0;
-    padding-bottom: .25rem;
+    padding-bottom: 0.25rem;
     padding-left: 0;
     border-radius: 0 var(--#{$prefix}ribbon-border-radius) 0 0;
 
@@ -150,8 +150,7 @@
       border-width: 1rem;
       border-top-width: 0;
       border-bottom-color: transparent;
-      border-bottom-width: .5rem;
+      border-bottom-width: 0.5rem;
     }
   }
 }
-

core/scss/ui/_segmented.scss

@@ -2,15 +2,14 @@
   --#{$prefix}nav-bg: var(--#{$prefix}bg-surface-tertiary);
   --#{$prefix}nav-padding: 2px;
   --#{$prefix}nav-height: 2.5rem;
-  --#{$prefix}nav-gap: .25rem;
+  --#{$prefix}nav-gap: 0.25rem;
   --#{$prefix}nav-active-bg: var(--#{$prefix}bg-surface);
   --#{$prefix}nav-font-size: inherit;
   --#{$prefix}nav-radius: 6px;
 
-
   --#{$prefix}nav-link-disabled-color: var(--#{$prefix}disabled-color);
-  --#{$prefix}nav-link-gap: .25rem;
+  --#{$prefix}nav-link-gap: 0.25rem;
-  --#{$prefix}nav-link-padding-x: .75rem;
+  --#{$prefix}nav-link-padding-x: 0.75rem;
   --#{$prefix}nav-link-icon-size: 1.25rem;
   display: inline-flex;
   flex-wrap: wrap;
@@ -19,11 +18,11 @@
   list-style: none;
   background: var(--#{$prefix}nav-bg);
   border-radius: calc(var(--#{$prefix}nav-radius) + var(--#{$prefix}nav-padding));
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
 
   .nav-link {
     display: inline-flex;
-    gap: calc(.25rem + var(--#{$prefix}nav-link-gap));
+    gap: calc(0.25rem + var(--#{$prefix}nav-link-gap));
     align-items: center;
     margin: 0;
     font-size: var(--#{$prefix}nav-font-size);
@@ -37,14 +36,16 @@
     text-decoration: none;
     white-space: nowrap;
     cursor: pointer;
-    transition: background-color $transition-time, color $transition-time;
+    transition:
+      background-color $transition-time,
+      color $transition-time;
     border-radius: var(--#{$prefix}nav-radius);
     flex-grow: 1;
     justify-content: center;
 
     &:hover,
-    &.hover  {
+    &.hover {
-      background: rgba(0, 0, 0, .04);
+      background: rgba(0, 0, 0, 0.04);
       color: var(--#{$prefix}body-color);
     }
 
@@ -69,7 +70,7 @@
   .nav-link-icon {
     width: var(--#{$prefix}nav-link-icon-size);
     height: var(--#{$prefix}nav-link-icon-size);
-    margin: 0 -.25rem;
+    margin: 0 -0.25rem;
     color: inherit;
   }
 }
@@ -86,8 +87,8 @@
   --#{$prefix}nav-height: 2rem;
   --#{$prefix}nav-font-size: var(--tblr-font-size-h5);
   --#{$prefix}nav-radius: 4px;
-  --#{$prefix}nav-link-padding-x: .5rem;
+  --#{$prefix}nav-link-padding-x: 0.5rem;
-  --#{$prefix}nav-link-gap: .25rem;
+  --#{$prefix}nav-link-gap: 0.25rem;
   --#{$prefix}nav-link-icon-size: 1rem;
 }
 
@@ -96,6 +97,6 @@
   --#{$prefix}nav-font-size: var(--tblr-font-size-h3);
   --#{$prefix}nav-radius: 8px;
   --#{$prefix}nav-link-padding-x: 1rem;
-  --#{$prefix}nav-link-gap: .5rem;
+  --#{$prefix}nav-link-gap: 0.5rem;
   --#{$prefix}nav-link-icon-size: 1.5rem;
 }

core/scss/ui/_social.scss

@@ -1,53 +1,26 @@
-@use "sass:map";
+@use 'sass:map';
-
+@use '../config';
-$apps: (
-  "apple",
-  "discord",
-  "dribbble",
-  "facebook",
-  "figma",
-  "github",
-  "google",
-  "instagram",
-  "linkedin",
-  "medium",
-  "meta",
-  "metamask",
-  "pinterest",
-  "reddit",
-  "signal",
-  "skype",
-  "snapchat",
-  "spotify",
-  "telegram",
-  "tiktok",
-  "tumblr",
-  "twitch",
-  "vk",
-  "x",
-  "youtube"
-);
 
 .social {
   position: relative;
   display: inline-block;
-  height: $avatar-size;
+  height: config.$avatar-size;
   aspect-ratio: 1;
   background: no-repeat center/cover;
   vertical-align: bottom;
 }
 
-@each $app in $apps {
+@each $app in config.$social-apps {
   .social-app-#{$app} {
-    background-image: url("#{$assets-base}/img/social/#{$app}.svg");
+    background-image: url('#{config.$assets-base}/img/social/#{$app}.svg');
 
     &.social-gray {
-      background-image: url("#{$assets-base}/img/social/#{$app}-gray.svg");
+      background-image: url('#{config.$assets-base}/img/social/#{$app}-gray.svg');
     }
   }
 }
 
-@each $flag-size, $size in $flag-sizes {
+@each $flag-size, $size in config.$flag-sizes {
   .social-#{$flag-size} {
     height: map.get($size, size);
   }

core/scss/ui/_stars.scss

@@ -4,6 +4,6 @@
   font-size: $h5-font-size;
 
   .star:not(:first-child) {
-    margin-left: .25rem;
+    margin-left: 0.25rem;
   }
 }

core/scss/ui/_status.scss

@@ -9,16 +9,16 @@
 
 @keyframes status-pulsate-secondary {
   10% {
-    transform: scale(1, 1)
+    transform: scale(1, 1);
   }
   30% {
-    transform: scale(3, 3)
+    transform: scale(3, 3);
   }
   80% {
-    transform: scale(3, 3)
+    transform: scale(3, 3);
   }
   100% {
-    transform: scale(1, 1)
+    transform: scale(1, 1);
   }
 }
 
@@ -47,10 +47,10 @@
   display: inline-flex;
   align-items: center;
   height: var(--#{$prefix}status-height);
-  padding: .25rem .75rem;
+  padding: 0.25rem 0.75rem;
-  gap: .5rem;
+  gap: 0.5rem;
   color: var(--#{$prefix}status-color);
-  background: rgba(var(--#{$prefix}status-color-rgb), .1);
+  background: rgba(var(--#{$prefix}status-color-rgb), 0.1);
   font-size: $font-size-base;
   text-transform: none;
   letter-spacing: normal;
@@ -97,13 +97,13 @@
 
 .status-dot-animated {
   &:before {
-    content: "";
+    content: '';
     position: absolute;
     inset: 0;
     z-index: 0;
     background: inherit;
     border-radius: inherit;
-    opacity: .6;
+    opacity: 0.6;
     animation: 1s linear 2s backwards infinite status-pulsate-tertiary;
   }
 }
@@ -121,7 +121,7 @@
 }
 
 .status-indicator-circle {
-  --#{$prefix}status-circle-size: .75rem;
+  --#{$prefix}status-circle-size: 0.75rem;
   position: absolute;
   left: 50%;
   top: 50%;
@@ -137,12 +137,12 @@
 
   &:nth-child(2) {
     z-index: 2;
-    opacity: .1;
+    opacity: 0.1;
   }
 
   &:nth-child(3) {
     z-index: 1;
-    opacity: .3;
+    opacity: 0.3;
   }
 }
 

core/scss/ui/_steps.scss

@@ -4,7 +4,7 @@
 .steps {
   --#{$prefix}steps-color: #{$steps-color};
   --#{$prefix}steps-inactive-color: #{$steps-inactive-color};
-  --#{$prefix}steps-dot-size: .5rem;
+  --#{$prefix}steps-dot-size: 0.5rem;
   --#{$prefix}steps-border-width: #{$steps-border-width};
   display: flex;
   flex-wrap: nowrap;
@@ -54,17 +54,17 @@
     position: absolute;
     left: 50%;
     width: 100%;
-    content: "";
+    content: '';
     transform: translateY(-50%);
   }
 
   &:after {
-    top: calc(var(--#{$prefix}steps-dot-size) * .5);
+    top: calc(var(--#{$prefix}steps-dot-size) * 0.5);
     height: var(--#{$prefix}steps-border-width);
   }
 
   &:before {
-    content: "";
+    content: '';
     position: absolute;
     top: 0;
     left: 50%;

core/scss/ui/_switch-icon.scss

@@ -58,7 +58,7 @@
 .switch-icon-fade {
   .switch-icon-a,
   .switch-icon-b {
-    @include transition(opacity .5s);
+    @include transition(opacity 0.5s);
   }
 }
 
@@ -66,7 +66,7 @@
 .switch-icon-scale {
   .switch-icon-a,
   .switch-icon-b {
-    @include transition(opacity .5s, transform .0s .5s);
+    @include transition(opacity 0.5s, transform 0s 0.5s);
   }
 
   .switch-icon-b {
@@ -76,7 +76,7 @@
   &.active {
     .switch-icon-a,
     .switch-icon-b {
-      @include transition(opacity .0s, transform .5s);
+      @include transition(opacity 0s, transform 0.5s);
     }
 
     .switch-icon-b {
@@ -93,7 +93,7 @@
   .switch-icon-b {
     backface-visibility: hidden;
     transform-style: preserve-3d;
-    @include transition(opacity 0s .2s, transform .4s ease-in-out);
+    @include transition(opacity 0s 0.2s, transform 0.4s ease-in-out);
   }
 
   .switch-icon-a {

core/scss/ui/_tables.scss

@@ -83,8 +83,7 @@
         }
 
         tr {
-          border-bottom: var(--#{$prefix}border-width)
+          border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $table-border-color;
-            var(--#{$prefix}border-style) $table-border-color;
         }
 
         .btn {
@@ -119,14 +118,14 @@ Table sort
   }
 
   &:after {
-    content: "";
+    content: '';
     display: inline-flex;
     width: 1rem;
     height: 1rem;
     vertical-align: bottom;
     mask-image: $table-sort-bg-image;
     background: currentColor;
-    margin-left: .25rem;
+    margin-left: 0.25rem;
   }
 
   &.asc:after {

core/scss/ui/_tags.scss

@@ -8,7 +8,7 @@
   padding: 0 0.5rem;
   background: var(--#{$prefix}bg-surface);
   box-shadow: var(--#{$prefix}shadow-input);
-  gap: .5rem;
+  gap: 0.5rem;
 
   .btn-close {
     margin-right: -0.25rem;
@@ -16,15 +16,15 @@
     padding: 0;
     width: 1rem;
     height: 1rem;
-    font-size: .5rem;
+    font-size: 0.5rem;
   }
 }
 
 .tag-badge {
   --#{$prefix}badge-font-size: #{$h6-font-size};
-  --#{$prefix}badge-padding-x: .25rem;
+  --#{$prefix}badge-padding-x: 0.25rem;
-  --#{$prefix}badge-padding-y: .125rem;
+  --#{$prefix}badge-padding-y: 0.125rem;
-  margin-right: -.25rem;
+  margin-right: -0.25rem;
 }
 
 .tag-avatar,
@@ -32,7 +32,7 @@
 .tag-payment,
 .tag-icon,
 .tag-check {
-  margin-left: -.25rem;
+  margin-left: -0.25rem;
 }
 
 .tag-icon {
@@ -48,7 +48,6 @@
   background-size: 1rem;
 }
 
-
 //
 // Tags list
 //

core/scss/ui/_timeline.scss

@@ -18,7 +18,7 @@
     margin-bottom: var(--#{$prefix}page-padding);
 
     &:before {
-      content: "";
+      content: '';
       position: absolute;
       top: var(--#{$prefix}timeline-icon-size);
       left: calc(var(--#{$prefix}timeline-icon-size) / 2);
@@ -40,7 +40,7 @@
   background: var(--#{$prefix}bg-surface-secondary);
   color: var(--#{$prefix}secondary);
   border-radius: var(--#{$prefix}border-radius);
-  z-index: 5
+  z-index: 5;
 }
 
 .timeline-event-card {

core/scss/ui/_toasts.scss

@@ -6,7 +6,7 @@
     user-select: none;
   }
 
-  button[data-bs-dismiss="toast"] {
+  button[data-bs-dismiss='toast'] {
     outline: none;
   }
 

core/scss/ui/_toolbar.scss

@@ -2,10 +2,10 @@
   display: flex;
   flex-wrap: nowrap;
   flex-shrink: 0;
-  margin: 0 -.5rem;
+  margin: 0 -0.5rem;
 
   > * {
-    margin: 0 .5rem;
+    margin: 0 0.5rem;
   }
 
   @include media-print {

core/scss/ui/_tracking.scss

@@ -13,7 +13,7 @@
     height: auto;
 
     &:before {
-      content: "";
+      content: '';
       display: block;
       padding-top: 100%;
     }
@@ -24,6 +24,6 @@
   flex: 1;
   border-radius: var(--#{$prefix}tracking-block-border-radius);
   height: var(--#{$prefix}tracking-height);
-  min-width: .25rem;
+  min-width: 0.25rem;
   background: var(--#{$prefix}border-color);
 }

core/scss/ui/_type.scss

@@ -1,4 +1,4 @@
-@import "typo/hr";
+@import 'typo/hr';
 
 .lead {
   color: var(--#{$prefix}secondary);
@@ -94,7 +94,7 @@ blockquote {
     text-align: right;
 
     &:before {
-      content: "— ";
+      content: '— ';
     }
   }
 }
@@ -181,8 +181,8 @@ Selection
 /**
 Links
  */
-[class^="link-"],
+[class^='link-'],
-[class*=" link-"] {
+[class*=' link-'] {
   &.disabled {
     color: $nav-link-disabled-color !important;
     pointer-events: none;
@@ -311,20 +311,19 @@ $text-variants: (
     }
   }
 
-  >:last-child {
+  > :last-child {
     margin-bottom: 0;
   }
 }
 
-
 .callout {
   margin-bottom: 1.5rem;
   border: 1px solid var(--#{$prefix}primary-200);
   border-radius: var(--#{$prefix}border-radius);
-  padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
   background: var(--#{$prefix}primary-lt);
 
-  &>:last-child {
+  & > :last-child {
     margin-bottom: 0;
   }
 }

core/scss/ui/forms/_form-check.scss

@@ -23,7 +23,7 @@ Form check
 
 .form-check-input {
   background-size: $form-check-input-width;
-  margin-top: ($form-check-min-height - $form-check-input-width) * .5;
+  margin-top: ($form-check-min-height - $form-check-input-width) * 0.5;
   box-shadow: $form-check-input-box-shadow;
 
   .form-switch & {
@@ -36,8 +36,8 @@ Form check
 
   &.required {
     &:after {
-      content: "*";
+      content: '*';
-      margin-left: .25rem;
+      margin-left: 0.25rem;
       color: $red;
     }
   }
@@ -47,10 +47,9 @@ Form check
   display: block;
   color: var(--#{$prefix}secondary);
   font-size: $h5-font-size;
-  margin-top: .25rem;
+  margin-top: 0.25rem;
 }
 
-
 .form-check-single {
   margin: 0;
 
@@ -65,7 +64,7 @@ Form switch
 .form-switch {
   .form-check-input {
     height: $form-switch-height;
-    margin-top: ($form-check-min-height - $form-switch-height) * .5;
+    margin-top: ($form-check-min-height - $form-switch-height) * 0.5;
   }
 }
 
@@ -81,11 +80,11 @@ Form switch
   }
 
   .form-check-label {
-    padding-top: .125rem;
+    padding-top: 0.125rem;
   }
 }
 
 /*Correction of Form-check position*/
-.form-check-input:checked{
+.form-check-input:checked {
   border: none;
 }

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

@@ -22,7 +22,7 @@ Color Input
   color: $white;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent;
   border-radius: var(--#{$prefix}border-radius);
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 
   &:before {
     position: absolute;
@@ -30,7 +30,7 @@ Color Input
     left: 0;
     width: 100%;
     height: 100%;
-    content: "";
+    content: '';
     background: no-repeat center center/$form-check-input-checked-bg-size;
     background-image: escape-svg($form-check-input-checked-bg-image);
     opacity: 0;

core/scss/ui/forms/_form-custom.scss

@@ -10,7 +10,7 @@ Bootstrap color input
 /**
 Remove the cancel buttons in Chrome and Safari on macOS.
  */
-[type="search"]::-webkit-search-cancel-button {
+[type='search']::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
 

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

@@ -33,15 +33,15 @@ Image check
 
   &:before {
     position: absolute;
-    top: .25rem;
+    top: 0.25rem;
-    left: .25rem;
+    left: 0.25rem;
     z-index: 1;
     display: block;
     width: $form-check-input-width;
     height: $form-check-input-width;
     color: $white;
     pointer-events: none;
-    content: "";
+    content: '';
     user-select: none;
     background: $form-check-input-bg;
     border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
@@ -57,11 +57,11 @@ Image check
       border-color: $form-check-input-checked-border-color;
     }
 
-    .form-imagecheck-input[type="radio"] ~ & {
+    .form-imagecheck-input[type='radio'] ~ & {
       border-radius: $form-check-radio-border-radius;
     }
 
-    .form-imagecheck-input[type="radio"]:checked ~ & {
+    .form-imagecheck-input[type='radio']:checked ~ & {
       background-image: escape-svg($form-check-radio-checked-bg-image);
     }
   }
@@ -70,7 +70,7 @@ Image check
 .form-imagecheck-image {
   max-width: 100%;
   display: block;
-  opacity: .64;
+  opacity: 0.64;
   @include transition(opacity $transition-time);
 
   &:first-child {
@@ -91,7 +91,7 @@ Image check
 }
 
 .form-imagecheck-caption {
-  padding: .25rem;
+  padding: 0.25rem;
   font-size: $font-size-sm;
   color: var(--#{$prefix}secondary);
   text-align: center;

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

@@ -48,7 +48,7 @@ Select group
   @include transition(border-color $transition-time, background $transition-time, color $transition-time);
 
   .icon:only-child {
-    margin: 0 -.25rem;
+    margin: 0 -0.25rem;
   }
 
   &:hover {
@@ -64,11 +64,11 @@ Select group
   vertical-align: middle;
   box-shadow: $form-check-input-box-shadow;
 
-  .form-selectgroup-input[type="checkbox"] + .form-selectgroup-label & {
+  .form-selectgroup-input[type='checkbox'] + .form-selectgroup-label & {
     border-radius: $form-check-input-border-radius;
   }
 
-  .form-selectgroup-input[type="radio"] + .form-selectgroup-label & {
+  .form-selectgroup-input[type='radio'] + .form-selectgroup-label & {
     border-radius: $form-check-radio-border-radius;
   }
 
@@ -80,11 +80,11 @@ Select group
     border-color: $form-check-input-checked-border-color;
   }
 
-  .form-selectgroup-input[type="checkbox"]:checked + .form-selectgroup-label & {
+  .form-selectgroup-input[type='checkbox']:checked + .form-selectgroup-label & {
     background-image: escape-svg($form-check-input-checked-bg-image);
   }
 
-  .form-selectgroup-input[type="radio"]:checked + .form-selectgroup-label & {
+  .form-selectgroup-input[type='radio']:checked + .form-selectgroup-label & {
     background-image: escape-svg($form-check-radio-checked-bg-image);
   }
 }

core/scss/ui/typo/_hr.scss

@@ -1,4 +1,3 @@
-
 /**
 Horizontal rules
  */
@@ -24,17 +23,17 @@ Hr text
   }
 
   &:before {
-    content: "";
+    content: '';
-    margin-right: .5rem;
+    margin-right: 0.5rem;
   }
 
   &:after {
-    content: "";
+    content: '';
-    margin-left: .5rem;
+    margin-left: 0.5rem;
   }
 
   > *:first-child {
-    padding-right: .5rem;
+    padding-right: 0.5rem;
     padding-left: 0;
     color: var(--#{$prefix}secondary);
   }
@@ -46,15 +45,15 @@ Hr text
     }
 
     & > *:first-child {
-      padding-right: .5rem;
+      padding-right: 0.5rem;
-      padding-left: .5rem;
+      padding-left: 0.5rem;
     }
   }
 
   &.hr-text-right,
   &.hr-text-end {
     &:before {
-      content: "";
+      content: '';
     }
 
     &:after {
@@ -63,7 +62,7 @@ Hr text
 
     & > *:first-child {
       padding-right: 0;
-      padding-left: .5rem;
+      padding-left: 0.5rem;
     }
   }
 
@@ -73,5 +72,5 @@ Hr text
 }
 
 .hr-text-spaceless {
-  margin: -.5rem 0;
+  margin: -0.5rem 0;
 }

core/scss/utils/_background.scss

@@ -1,11 +1,11 @@
 .bg-white-overlay {
   color: $white;
-  background-color: rgba($light, .24);
+  background-color: rgba($light, 0.24);
 }
 
 .bg-dark-overlay {
   color: $white;
-  background-color: rgba($dark, .24);
+  background-color: rgba($dark, 0.24);
 }
 
 .bg-cover {

core/scss/utils/_colors.scss

@@ -1,39 +1,47 @@
-@use "sass:map";
+@use 'sass:map';
 
 // All colors
-@each $color, $value in map.merge($theme-colors, ( white: $white)) {
+@each $color,
-  .bg-#{"" + $color} {
+  $value
+    in map.merge(
+      $theme-colors,
+      (
+        white: $white,
+      )
+    )
+{
+  .bg-#{'' + $color} {
     background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
   }
 
-  .bg-#{"" + $color}-lt {
+  .bg-#{'' + $color}-lt {
     color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}text-opacity, 1) * 100%), transparent) !important;
     background-color: color-mix(in srgb, var(--#{$prefix}#{$color}-lt) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
   }
 
-  .border-#{"" + $color} {
+  .border-#{'' + $color} {
     border-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}border-opacity, 1) * 100%), transparent) !important;
   }
 
-  .bg-gradient-from-#{"" + $color} {
+  .bg-gradient-from-#{'' + $color} {
     --#{$prefix}gradient-from: var(--#{$prefix}#{$color});
   }
 
-  .bg-gradient-to-#{"" + $color} {
+  .bg-gradient-to-#{'' + $color} {
     --#{$prefix}gradient-to: var(--#{$prefix}#{$color});
   }
 
-  .bg-gradient-via-#{"" + $color} {
+  .bg-gradient-via-#{'' + $color} {
     --#{$prefix}gradient-via: var(--#{$prefix}#{$color});
     --#{$prefix}gradient-stops: var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-via, transparent), var(--#{$prefix}gradient-to, transparent);
   }
 
-  .text-bg-#{"" + $color} {
+  .text-bg-#{'' + $color} {
     color: color-contrast($value) if($enable-important-utilities, !important, null);
     background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
   }
 
-  .link-#{"" + $color} {
+  .link-#{'' + $color} {
     color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}link-opacity, 1) * 100%), transparent) !important;
     text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}link-underline-opacity, 1) * 100%), transparent) !important;
 
@@ -49,34 +57,34 @@
 }
 
 @each $color, $value in $theme-colors {
-  .text-#{"" + $color} {
+  .text-#{'' + $color} {
     --#{$prefix}text-opacity: 1;
     color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}text-opacity) * 100%), transparent) !important;
   }
 
-  .text-#{"" + $color}-fg {
+  .text-#{'' + $color}-fg {
     color: var(--#{$prefix}#{$color}-fg) !important;
   }
 }
 
 @each $color, $value in $gray-colors {
-  .bg-#{"" + $color} {
+  .bg-#{'' + $color} {
     --#{$prefix}bg-opacity: 1;
     background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;
   }
 
-  .text-#{"" + $color}-fg {
+  .text-#{'' + $color}-fg {
     color: var(--#{$prefix}#{$color}-fg) !important;
   }
 }
 
 @each $color, $value in $social-colors {
-  .bg-#{"" + $color} {
+  .bg-#{'' + $color} {
     --#{$prefix}bg-opacity: 1;
     background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;
   }
 
-  .text-#{"" + $color}-fg {
+  .text-#{'' + $color}-fg {
     color: var(--#{$prefix}#{$color}-fg) !important;
   }
 }