@tabler/core 1.1.0 → 1.2.0

package/js/src/autosize.js

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

package/js/src/input-mask.js

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

package/js/tabler-theme.js

@@ -0,0 +1,35 @@
+/**
+ * demo-theme is specifically loaded right after the body and not deferred
+ * to ensure we switch to the chosen dark/light theme as fast as possible.
+ * This will prevent any flashes of the light theme (default) before switching.
+ */
+const themeConfig = {
+	"theme": "light",
+	"theme-base": "gray",
+	"theme-font": "sans-serif",
+	"theme-primary": "blue",
+	"theme-radius": "1",
+}
+
+const params = new Proxy(new URLSearchParams(window.location.search), {
+	get: (searchParams, prop) => searchParams.get(prop),
+})
+
+for (const key in themeConfig) {
+	const param = params[key]
+	let selectedValue
+
+	if (!!param) {
+		localStorage.setItem('tabler-' + key, param)
+		selectedValue = param
+	} else {
+		const storedTheme = localStorage.getItem('tabler-' + key)
+		selectedValue = storedTheme ? storedTheme : themeConfig[key]
+	}
+
+	if (selectedValue !== themeConfig[key]) {
+		document.documentElement.setAttribute('data-bs-' + key, selectedValue)
+	} else {
+		document.documentElement.removeAttribute('data-bs-' + key)
+	}
+}

package/js/{tabler.esm.js → tabler.js}

@@ -5,7 +5,23 @@ import "./src/dropdown"
 import "./src/tooltip"
 import "./src/popover"
 import "./src/switch-icon"
+import "./src/tab"
 import "./src/toast"
 
 export * as bootstrap from "bootstrap"
 export * as tabler from "./src/tabler"
+
+export {
+	Alert,
+	Modal,
+	Toast,
+	Tooltip,
+	Tab,
+	Button,
+	Carousel,
+	Collapse,
+	Dropdown,
+	Popover,
+	ScrollSpy,
+	Offcanvas
+} from 'bootstrap'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/core",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "repository": {
@@ -111,39 +111,41 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "bootstrap": "5.3.3"
-  },
-  "devDependencies": {
-    "@repo/banner": "1.0.0"
+    "bootstrap": "5.3.5"
   },
   "directories": {
     "doc": "docs"
   },
   "scripts": {
     "dev": "pnpm run watch",
-    "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy",
+    "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri",
     "clean": "shx rm -rf dist demo",
     "css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
     "css-compile": "sass scss/:dist/css/ --no-source-map --load-path=node_modules",
-    "css-banner": "node build/add-banner.mjs",
-    "css-prefix": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
-    "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
+    "css-banner": "node .build/add-banner.mjs",
+    "css-prefix": "postcss --config .build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
+    "css-rtl": "cross-env NODE_ENV=RTL postcss --config .build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
     "css-minify": "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\"",
     "js": "pnpm run js-compile && pnpm run js-minify",
-    "js-compile": "pnpm run js-compile-standalone && pnpm run js-compile-standalone-esm",
-    "js-compile-standalone": "rollup --config build/rollup.config.mjs --sourcemap",
-    "js-compile-standalone-esm": "rollup --environment ESM:true --config build/rollup.config.mjs --sourcemap",
-    "js-minify": "pnpm run js-minify-standalone && pnpm run js-minify-standalone-esm",
+    "js-compile": "pnpm run js-compile-standalone && pnpm run js-compile-standalone-esm && pnpm run js-compile-theme && pnpm run js-compile-theme-esm",
+    "js-compile-theme-esm": "rollup --environment THEME:true --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
+    "js-compile-theme": "rollup --environment THEME:true --config .build/rollup.config.mjs --sourcemap",
+    "js-compile-standalone": "rollup --config .build/rollup.config.mjs --sourcemap",
+    "js-compile-standalone-esm": "rollup --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
+    "js-minify": "pnpm run js-minify-standalone && pnpm run js-minify-standalone-esm && pnpm run js-minify-theme && pnpm run js-minify-theme-esm",
     "js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map\" --output dist/js/tabler.min.js dist/js/tabler.js",
     "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map\" --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
+    "js-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.js.map,includeSources,url=tabler-theme.min.js.map\" --output dist/js/tabler-theme.min.js dist/js/tabler-theme.js",
+    "js-minify-theme-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.esm.js.map,includeSources,url=tabler-theme.esm.min.js.map\" --output dist/js/tabler-theme.esm.min.js dist/js/tabler-theme.esm.js",
     "copy": "pnpm run copy-img",
     "copy-img": "shx mkdir -p dist/img && shx cp -rf img/* dist/img",
     "watch": "concurrently \"pnpm run watch-css\" \"pnpm run watch-js\"",
     "watch-css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css-compile && pnpm run css-prefix\"",
     "watch-js": "nodemon --watch js/ --ext js --exec \"pnpm run js-compile\"",
     "bundlewatch": "bundlewatch",
+    "generate-sri": "node .build/generate-sri.js",
     "format:check": "prettier --check src/**/*.{js,scss} --cache",
     "format:write": "prettier --write src/**/*.{js,scss} --cache"
   }

package/scss/_bootstrap-components.scss

@@ -14,12 +14,10 @@
 @import "bootstrap/scss/nav";
 @import "bootstrap/scss/navbar";
 @import "bootstrap/scss/card";
-// @import "bootstrap/scss/accordion";
 @import "bootstrap/scss/breadcrumb";
 @import "bootstrap/scss/pagination";
 @import "bootstrap/scss/progress";
 @import "bootstrap/scss/list-group";
-@import "bootstrap/scss/close";
 @import "bootstrap/scss/toasts";
 @import "bootstrap/scss/modal";
 @import "bootstrap/scss/tooltip";
@@ -29,8 +27,5 @@
 @import "bootstrap/scss/offcanvas";
 @import "bootstrap/scss/placeholders";
 
-// Helpers
-@import "bootstrap/scss/helpers";
-
 // Utilities
 @import "bootstrap/scss/utilities/api";

package/scss/_core.scss

@@ -1,6 +1,8 @@
 @import "config";
 @import "bootstrap-components";
 
+@import "props";
+
 @import "fonts/webfonts";
 
 @import "layout/root";
@@ -65,6 +67,8 @@
 @import "ui/chat";
 @import "ui/signature";
 
+@import "helpers/index";
+
 @import "utils/background";
 @import "utils/colors";
 @import "utils/scroll";

package/scss/_props.scss

@@ -0,0 +1,91 @@
+@import "config";
+
+:root,
+:host {
+  /** Fonts */
+  --#{$prefix}font-monospace: #{$font-family-monospace};
+  --#{$prefix}font-sans-serif: #{$font-family-sans-serif};
+  --#{$prefix}font-serif: #{$font-family-serif};
+  --#{$prefix}font-comic: #{$font-family-comic};
+
+  /** Gray colors */
+  --#{$prefix}gray-50: #{$gray-50};
+  --#{$prefix}gray-100: #{$gray-100};
+  --#{$prefix}gray-200: #{$gray-200};
+  --#{$prefix}gray-300: #{$gray-300};
+  --#{$prefix}gray-400: #{$gray-400};
+  --#{$prefix}gray-500: #{$gray-500};
+  --#{$prefix}gray-600: #{$gray-600};
+  --#{$prefix}gray-700: #{$gray-700};
+  --#{$prefix}gray-800: #{$gray-800};
+  --#{$prefix}gray-900: #{$gray-900};
+  --#{$prefix}gray-950: #{$gray-950};
+
+  --#{$prefix}white: #{$white};
+  --#{$prefix}black: #{$black};
+  --#{$prefix}dark: #{$dark};
+  --#{$prefix}light: #{$light};
+
+  /** Brand colors */
+  --#{$prefix}brand: #{$primary};
+
+  /** Theme colors */
+  @each $name, $color in map-merge($theme-colors, $social-colors) {
+    --#{$prefix}#{$name}: #{$color};
+    --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
+    --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
+    --#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
+    --#{$prefix}#{$name}-darken: color-mix(in oklab, var(--#{$prefix}#{$name}), transparent 20%);
+    --#{$prefix}#{$name}-lt: #{theme-color-lighter($color)};
+    --#{$prefix}#{$name}-lt: color-mix(in oklab, var(--#{$prefix}#{$name}) 10%, transparent);
+    --#{$prefix}#{$name}-200: color-mix(in oklab, var(--#{$prefix}#{$name}) 20%, transparent);
+    --#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
+  }
+
+  /** Social colors */
+  @each $name, $color in $social-colors {
+    --#{$prefix}#{$name}: #{$color};
+  }
+
+  /** Spacers */
+  @each $name, $value in $spacers {
+    --#{$prefix}spacer-#{$name}: #{$value};
+  }
+
+  /** Font sizes */
+  @each $name, $value in $font-weights {
+    --#{$prefix}font-weight-#{$name}: #{$value};
+  }
+
+  @each $name, $value in $font-sizes {
+    --#{$prefix}font-size-h#{$name}: #{$value};
+  }
+
+  @each $name, $value in $line-heights {
+    --#{$prefix}line-height-#{$name}: #{$value};
+  }
+
+  /** Shadows */
+  @each $name, $value in $box-shadows {
+    --#{$prefix}shadow#{if($name, '-#{$name}', '')}: #{$value};
+  }
+
+  /** Border radiuses */
+  --#{$prefix}border-radius-scale: 1;
+  @each $name, $value in $border-radiuses {
+    @if $name {
+      --#{$prefix}border-radius-#{$name}: calc(#{$value} * var(--#{$prefix}border-radius-scale, 1));
+    } @else {
+      --#{$prefix}border-radius: #{$value};
+    }
+  }
+
+  /** Backdrops */
+  --#{$prefix}backdrop-opacity: #{$backdrop-opacity};
+  --#{$prefix}backdrop-bg: var(--#{$prefix}bg-surface-dark);
+  @each $name, $value in $backdrops {
+    --#{$prefix}backdrop-bg#{if($name, '-#{$name}', '')}: #{$value};
+  }
+  --#{$prefix}backdrop-blur: #{$backdrop-blur};
+  --#{$prefix}backdrop-filter: blur(var(--#{$prefix}backdrop-blur));
+}

package/scss/_utilities.scss

@@ -102,5 +102,34 @@ $utilities: (
         '<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": (
+    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-gradient-direction": (
+    property: --#{$prefix}gradient-direction,
+    class: bg-gradient,
+    values: (
+      to-t: to top,
+      to-te: to top right,
+      to-e: to right,
+      to-be: to bottom right,
+      to-b: to bottom,
+      to-bs: to bottom left,
+      to-s: to left,
+      to-ts: to top left,
+    ),
+  ),
+  "table-layout": (
+    property: table-layout,
+    class: table,
+    values: (
+      auto: auto,
+      fixed: fixed,
+    ),
+  ),
 ) !default;

package/scss/_variables-dark.scss

@@ -11,7 +11,7 @@ $border-dark-color-dark: color.adjust($dark, $lightness: 4%) !default;
 $border-active-color-dark: color.adjust($dark, $lightness: 12%) !default;
 
 //new bootsrap variables
-$body-color-dark: $gray-200 !default;
+$body-color-dark: $gray-200 !default; 
 $body-emphasis-color-dark: $white !default;
 
 $code-color-dark: var(--#{$prefix}gray-300) !default;

package/scss/_variables.scss

@@ -24,8 +24,9 @@ $font-local: null !default;
 $font-icons: () !default;
 
 $font-family-sans-serif: unquote("#{if($font-local, "#{$font-local}, ", ' ')}#{if($font-google, "#{$font-google}, ", ' ')}") 'Inter Var', Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
-$font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace !default;
+$font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Monaco, Consolas, Liberation Mono, Courier New, monospace !default;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
+$font-family-comic: "Comic Sans MS", "Comic Sans", 'Chalkboard SE', 'Comic Neue', sans-serif, cursive !default;
 
 //Icons
 $icon-stroke-width: 1.5 !default;
@@ -78,6 +79,7 @@ $font-weights: (
 $line-height-base: divide(1.25rem, $font-size-base) !default;
 $line-height-sm: divide(1rem, $font-size-base) !default;
 $line-height-lg: divide(1.5rem, $font-size-base) !default;
+$line-height-xl: divide(1.75rem, $font-size-base) !default;
 
 $h1-font-size: 1.5rem !default;
 $h1-line-height: 2rem !default;
@@ -144,16 +146,17 @@ $border-light-opacity: 0.08 !default;
 $border-dark-opacity: 0.24 !default;
 $border-active-opacity: 0.58 !default;
 
-$gray-50:  #f6f8fb !default;
-$gray-100: #eef3f6 !default;
-$gray-200: #dce1e7 !default;
-$gray-300: #b8c4d4 !default;
-$gray-400: #8a97ab !default;
-$gray-500: #6c7a91 !default;
-$gray-600: #49566c !default;
-$gray-700: #3a4859 !default;
-$gray-800: #182433 !default;
-$gray-900: #040a11 !default;
+$gray-50:  #f9fafb !default;
+$gray-100: #f3f4f6 !default;
+$gray-200: #e5e7eb !default;
+$gray-300: #d1d5db !default;
+$gray-400: #9ca3af !default;
+$gray-500: #6b7280 !default;
+$gray-600: #4b5563 !default;
+$gray-700: #374151 !default;
+$gray-800: #1f2937 !default;
+$gray-900: #111827 !default;
+$gray-950: #030712 !default;
 
 $black: #000000 !default;
 $white: #ffffff !default;
@@ -186,19 +189,7 @@ $green: #2fb344 !default;
 $teal: #0ca678 !default;
 $cyan: #17a2b8 !default;
 
-$color-blue: #066fd1;
-$color-azure: #3586c9;
-$color-indigo: #4263eb;
-$color-purple: #ae3ec9;
-$color-pink: #d6336c;
-$color-red: #e73f3f;
-$color-orange: #f76707;
-$color-yellow: #f59f00;
-$color-lime: #74b816;
-$color-green: #2fb344;
-$color-teal: #0ca678;
-$color-cyan: #17a2b8;
-
+$text-muted: $gray-500 !default;
 $text-secondary: $gray-500 !default;
 $text-secondary-light: $gray-400 !default;
 $text-secondary-dark: $gray-600 !default;
@@ -219,27 +210,28 @@ $active-border-color: var(--#{$prefix}primary) !default;
 $hover-bg: rgba(var(--#{$prefix}secondary-rgb), 0.08) !default;
 
 $disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
-$disabled-color: var(--#{$prefix}gray-300) !default;
+$disabled-color: color-transparent(var(--#{$prefix}body-color), .4) !default;
 
 $primary: $blue !default;
 $secondary: $text-secondary !default;
+$muted: $text-secondary !default;
 $success: $green !default;
 $info: $azure !default;
-$warning: $orange !default;
+$warning: $yellow !default;
 $danger: $red !default;
 
 $link-color: $primary !default;
 
 $theme-colors: (
   "primary": $primary,
-  "secondary": $text-secondary,
+  "secondary": $secondary,
   "success": $success,
   "info": $info,
   "warning": $warning,
   "danger": $danger,
   "light": $light,
   "dark": $dark,
-  "muted": $text-secondary,
+  "muted": $muted,
 ) !default;
 
 $extra-colors: (
@@ -289,7 +281,16 @@ $gray-colors: (
   gray-900: $gray-900,
 ) !default;
 
-$theme-colors: map-merge($theme-colors, map-merge($extra-colors, $social-colors));
+$theme-colors: map-merge($theme-colors, map-merge($extra-colors, ()));
+
+// BACKDROPS
+$backdrop-opacity: 24% !default;
+$backdrop-blur: 4px !default;
+$backdrop-bg: var(--#{$prefix}gray-800) !default;
+$backdrops: (
+  dark: color-mix(in srgb, var(--#{$prefix}color-dark), transparent var(--#{$prefix}backdrop-opacity)),
+  light: color-mix(in srgb, var(--#{$prefix}color-light), transparent var(--#{$prefix}backdrop-opacity)),
+) !default;
 
 // Borders
 $border-width: 1px !default;
@@ -300,6 +301,15 @@ $border-radius: 6px !default;
 $border-radius-lg: 8px !default;
 $border-radius-pill: 100rem !default;
 
+$border-radiuses: (
+  0: 0,
+  sm: $border-radius-sm,
+  md: $border-radius,
+  lg: $border-radius-lg,
+  pill: $border-radius-pill,
+  null: var(--#{$prefix}border-radius-md),
+) !default;
+
 $border-values: (
   null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent,
   wide: $border-width-wide var(--#{$prefix}border-style) $border-color-translucent,
@@ -310,10 +320,10 @@ $border-values: (
 $icon-color: var(--#{$prefix}gray-400) !default;
 
 // Code
-$code-color: var(--#{$prefix}gray-600) !default;
+$code-color: var(--#{$prefix}primary) !default;
 $code-font-size: $font-size-reative-sm !default;
 $code-line-height: 1.25rem !default;
-$code-bg: var(--#{$prefix}bg-surface-secondary) !default;
+$code-bg: var(--#{$prefix}primary-lt) !default;
 
 $pre-padding: 1rem !default;
 $pre-bg: var(--#{$prefix}bg-surface-dark) !default;
@@ -333,54 +343,62 @@ $avatar-size: 2.5rem !default;
 $avatar-status-size: .75rem !default;
 $avatar-font-size: 1rem !default;
 $avatar-icon-size: 1.5rem !default;
+$avatar-brand-size: 1.25rem !default;
 $avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $avatar-sizes: (
   "xxs": (
     size: 1rem,
     font-size: .5rem,
-    icon-size: .75rem,
-    status-size: .25rem
+    icon-size: .5rem,
+    status-size: .25rem,
+    brand-size: .5rem
   ),
   "xs": (
     size: 1.25rem,
     font-size: $h6-font-size,
     icon-size: .75rem,
-    status-size: .375rem
+    status-size: .375rem,
+    brand-size: .75rem
   ),
   "sm": (
     size: 2rem,
     font-size: $h5-font-size,
     icon-size: 1.5rem,
-    status-size: .5rem
+    status-size: .5rem,
+    brand-size: 1rem
   ),
   "md": (
     size: 2.5rem,
     font-size: $h4-font-size,
     icon-size: 1.5rem,
-    status-size: .75rem
+    status-size: .75rem,
+    brand-size: 1.25rem
   ),
   "lg": (
     size: 3rem,
     font-size: $h2-font-size,
     icon-size: 2rem,
-    status-size: .75rem
+    status-size: .75rem,
+    brand-size: 1.25rem
   ),
   "xl": (
     size: 5rem,
     font-size: 2rem,
     icon-size: 3rem,
-    status-size: 1rem
+    status-size: 1rem,
+    brand-size: 1.25rem
   ),
   "2xl": (
     size: 7rem,
     font-size: 3rem,
     icon-size: 5rem,
-    status-size: 1rem
+    status-size: 1rem,
+    brand-size: 2rem
   ),
 ) !default;
 $avatar-border-radius: var(--#{$prefix}border-radius) !default;
 $avatar-font-size: $h4-font-size !default;
-$avatar-box-shadow: var(--#{$prefix}box-shadow-border) !default;
+$avatar-box-shadow: var(--#{$prefix}shadow-border) !default;
 $avatar-list-spacing: -0.5;
 
 $link-decoration: none !default;
@@ -498,13 +516,13 @@ $box-shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), 0.16) 0 2px 16px 0
 $box-shadow-dropdown: 0 16px 24px 2px rgba(0, 0, 0, 0.07), 0 6px 30px 5px rgba(0, 0, 0, 0.06), 0 8px 10px -5px rgba(0, 0, 0, 0.1) !default;
 
 $box-shadows: (
-  box-shadow: $box-shadow,
-  box-shadow-border: $box-shadow-border,
-  box-shadow-transparent: $box-shadow-transparent,
-  box-shadow-input: $box-shadow-input,
-  box-shadow-card: $box-shadow-card,
-  box-shadow-card-hover: $box-shadow-card-hover,
-  box-shadow-dropdown: $box-shadow-dropdown,
+  null: $box-shadow,
+  border: $box-shadow-border,
+  transparent: $box-shadow-transparent,
+  input: $box-shadow-input,
+  card: $box-shadow-card,
+  card-hover: $box-shadow-card-hover,
+  dropdown: $box-shadow-dropdown,
 ) !default;
 
 $box-shadow-inset: 0 0 transparent !default;
@@ -569,7 +587,7 @@ $badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
 // Buttons
 $input-btn-line-height: $line-height-base !default;
 $input-btn-font-size: $font-size-base !default;
-$input-btn-font-family: var(--#{$prefix}font-sans-serif) !default;
+$input-btn-font-family: var(--#{$prefix}body-font-face) !default;
 $input-btn-padding-y: 0.5rem - 0.0625rem !default;
 $input-btn-icon-size: $icon-size !default;
 
@@ -594,7 +612,7 @@ $input-height-lg: null !default;
 $input-border-radius: var(--#{$prefix}border-radius) !default;
 $input-color: var(--#{$prefix}body-color) !default;
 $input-focus-color: var(--#{$prefix}body-color) !default;
-$input-box-shadow: var(--#{$prefix}box-shadow-input) !default;
+$input-box-shadow: var(--#{$prefix}shadow-input) !default;
 
 // Buttons
 $btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
@@ -605,7 +623,7 @@ $btn-padding-x: 1rem !default;
 $btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $btn-border-color: var(--#{$prefix}border-color) !default;
 $btn-border-radius: var(--#{$prefix}border-radius) !default;
-$btn-box-shadow: var(--#{$prefix}box-shadow-input) !default;
+$btn-box-shadow: var(--#{$prefix}shadow-input) !default;
 
 // Cards
 $card-title-spacer-y: 1.25rem !default;
@@ -677,16 +695,16 @@ $dropdown-max-width: 25rem !default;
 $dropdown-scrollable-height: 13rem !default;
 $dropdown-link-active-color: var(--#{$prefix}primary) !default;
 $dropdown-link-active-bg: var(--#{$prefix}active-bg) !default;
-$dropdown-box-shadow: var(--#{$prefix}box-shadow-dropdown) !default;
+$dropdown-box-shadow: var(--#{$prefix}shadow-dropdown) !default;
 
 $dropdown-divider-bg: $dropdown-border-color !default;
 $dropdown-divider-margin-y: var(--#{$prefix}spacer-2) !default;
 
 // Tooltip
-$tooltip-bg: var(--#{$prefix}bg-surface-dark) !default;
-$tooltip-color: var(--#{$prefix}light) !default;
+$tooltip-bg: var(--#{$prefix}bg-surface-inverted) !default;
+$tooltip-color: var(--#{$prefix}text-inverted) !default;
 $tooltip-padding-y: var(--#{$prefix}spacer-1) !default;
-$tooltip-padding-x: var(--#{$prefix}spacer-2) !default;
+$tooltip-padding-x: var(--#{$prefix}spacer-3) !default;
 
 // Loader
 $loader-size: 2.5rem !default;
@@ -701,7 +719,7 @@ $list-group-item-padding-x: $card-cap-padding-x !default;
 
 // Modals
 $modal-backdrop-opacity: 0.24 !default;
-$modal-backdrop-bg: $dark !default;
+$modal-backdrop-bg: $backdrop-bg !default;
 $modal-backdrop-blur: 4px !default;
 
 $modal-fade-transform: translate(0, -1rem) !default;
@@ -760,7 +778,7 @@ $navbar-height: 3.5rem !default;
 $navbar-padding-y: 0.25rem !default;
 $navbar-light-color: var(--#{$prefix}secondary) !default;
 
-$navbar-hover-color: $white !default;
+$navbar-hover-color: var(--#{$prefix}body-color) !default;
 
 $navbar-border-width: var(--#{$prefix}border-width) !default;
 $navbar-border-color: var(--#{$prefix}border-color) !default;
@@ -899,7 +917,7 @@ $input-bg: var(--#{$prefix}bg-forms) !default;
 $input-disabled-bg: $disabled-bg !default;
 $input-border-color: var(--#{$prefix}border-color) !default;
 $input-border-color-translucent: var(--#{$prefix}border-color-translucent) !default;
-$input-placeholder-color: $text-secondary-light !default;
+$input-placeholder-color: var(--#{$prefix}tertiary) !default;
 
 $input-group-addon-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $input-group-addon-color: var(--#{$prefix}gray-500) !default;
@@ -930,7 +948,7 @@ $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://w
 $form-check-label-disabled-opacity: $text-secondary-opacity;
 
 $form-select-indicator-color: $text-secondary-light !default;
-$form-select-box-shadow: var(--#{$prefix}box-shadow-input) !default;
+$form-select-box-shadow: var(--#{$prefix}shadow-input) !default;
 
 $form-switch-width: 2rem !default;
 $form-switch-height: 1.25rem !default;
@@ -959,7 +977,7 @@ $form-feedback-icon-invalid: str-replace(
 $form-label-font-size: $h4-font-size !default;
 $form-label-font-weight: var(--#{$prefix}font-weight-medium) !default;
 
-$form-secondary-color: var(--#{$prefix}gray-500) !default;
+$form-secondary-color: var(--#{$prefix}secondary) !default;
 
 // Legend
 $legend-bg: var(--#{$prefix}border-color) !default;
@@ -967,7 +985,7 @@ $legend-size: 0.75em !default;
 $legend-border-radius: var(--#{$prefix}border-radius-sm) !default;
 
 // Flags
-$flag-box-shadow: var(--#{$prefix}box-shadow-border) !default;
+$flag-box-shadow: var(--#{$prefix}shadow-border) !default;
 $flag-border-radius: var(--#{$prefix}border-radius) !default;
 $flag-sizes: $avatar-sizes !default;
 
@@ -977,6 +995,7 @@ $payment-sizes: $avatar-sizes !default;
 // Offcanvas
 $offcanvas-bg-color: var(--#{$prefix}bg-surface) !default;
 $offcanvas-border-color: var(--#{$prefix}border-color) !default;
+$offcanvas-backdrop-bg: $backdrop-bg !default;
 
 // Placeholder
 $placeholder-opacity-min: 0.1 !default;