@tabler/core 1.0.0-beta20 → 1.0.0-beta21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/core",
-  "version": "1.0.0-beta20",
+  "version": "1.0.0-beta21",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {
@@ -11,19 +11,18 @@
     "build-docs": "mkdir public && touch public/index.html && echo 'ok'",
     "preview": "gulp build --preview",
     "svg-optimize": "svgo -f svg/brand --pretty",
-    "unused-files": "node build/unused-files.js",
+    "unused-files": "node .build/unused-files.js",
     "release": "release-it",
-    "svg-icons": "gulp svg-icons",
-    "percy": "gulp build && npx percy snapshot demo",
+    "svg-icons": "node .build/import-icons.js",
     "bundlewatch": "bundlewatch",
-    "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
     "storybook": "start-storybook -p 6006",
-    "changelog": "gulp changelog",
-    "icons": "ncu -u @tabler/icons && pnpm install && gulp svg-icons && git add . && git commit -am \"update icons to v`pnpm info @tabler/icons version`\" && git push",
-    "download-images": "node build/download-images.js",
+    "changelog": "node .build/changelog.js",
+    "icons": "git checkout dev && BRANCH_NAME=\"dev-tabler-icons-`pnpm info @tabler/icons version`\" && git branch $BRANCH_NAME && git checkout $BRANCH_NAME && ncu -u @tabler/icons && pnpm install && pnpm run svg-icons && git add . && git commit -am \"update icons to v`pnpm info @tabler/icons version`\" && git push origin $BRANCH_NAME && git checkout dev",
+    "download-images": "node .build/download-images.js",
     "optimize-images": "for i in ./src/static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done",
     "format:check": "prettier --check src/**/*.{js,scss} --cache",
-    "format:write": "prettier --write src/**/*.{js,scss} --cache"
+    "format:write": "prettier --write src/**/*.{js,scss} --cache",
+    "illustrations": "node .build/import-illustrations.js"
   },
   "repository": {
     "type": "git",
@@ -51,6 +50,7 @@
     "node": ">=18"
   },
   "files": [
+    "docs/**/*",
     "dist/**/*",
     "src/js/**/*.{js,map}",
     "src/img/**/*.{svg}",
@@ -131,28 +131,28 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.21.8",
-    "@babel/preset-env": "^7.21.5",
-    "@changesets/cli": "^2.26.1",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
+    "@changesets/cli": "^2.27.8",
     "@rollup/plugin-commonjs": "^24.1.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/pluginutils": "^5.0.2",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.7",
+    "@rollup/pluginutils": "^5.1.0",
     "@rollup/stream": "^2.0.0",
-    "@shopify/prettier-plugin-liquid": "^1.0.6",
-    "all-contributors-cli": "^6.25.0",
-    "apexcharts": "^3.40.0",
-    "autoprefixer": "^10.4.14",
+    "@shopify/prettier-plugin-liquid": "^1.5.0",
+    "all-contributors-cli": "^6.26.1",
+    "apexcharts": "^3.53.0",
+    "autoprefixer": "^10.4.20",
     "autosize": "^6.0.1",
-    "browser-sync": "^2.29.1",
+    "browser-sync": "^2.29.3",
     "bundlewatch": "^0.3.3",
     "choices.js": "^10.2.0",
-    "chromatic": "^6.17.4",
-    "countup.js": "^2.6.2",
+    "countup.js": "^2.8.0",
     "cross-spawn": "^7.0.3",
     "dropzone": "^6.0.0-beta.2",
     "flatpickr": "^4.6.13",
     "fslightbox": "^3.4.1",
+    "glob": "^10.4.5",
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-clean-css": "^4.3.0",
@@ -164,34 +164,34 @@
     "gulp-rtlcss": "^2.0.0",
     "gulp-sass": "^5.1.0",
     "gulp-terser": "^2.1.0",
-    "imageoptim-cli": "^3.0.7",
-    "imask": "^6.6.1",
-    "jsvectormap": "^1.5.3",
+    "imageoptim-cli": "^3.1.9",
+    "imask": "^7.6.1",
+    "jsvectormap": "^1.6.0",
     "list.js": "^2.3.1",
     "litepicker": "^2.0.12",
-    "nouislider": "^15.7.0",
+    "nouislider": "^15.8.1",
     "plyr": "^3.7.8",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.45",
     "prettier": "^2.8.8",
-    "release-it": "^15.10.3",
+    "release-it": "^15.11.0",
     "request": "^2.88.2",
     "rollup": "2.79.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleanup": "^3.2.1",
-    "sass": "^1.62.1",
-    "star-rating.js": "^4.3.0",
-    "tinymce": "^6.4.2",
-    "tom-select": "^2.2.2",
+    "sass": "^1.77.8",
+    "star-rating.js": "^4.3.1",
+    "tinymce": "^7.3.0",
+    "tom-select": "^2.3.1",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "yaml": "^2.2.2",
+    "yaml": "^2.5.1",
     "yargs": "^17.7.2",
-    "zod": "^3.21.4"
+    "zod": "^3.23.8"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@tabler/icons": "^2.32.0",
-    "bootstrap": "5.3.1"
+    "@tabler/icons": "^3.14.0",
+    "bootstrap": "5.3.3"
   },
   "peerDependencies": {
     "@melloware/coloris": "^0.19.1",
@@ -209,7 +209,7 @@
     "nouislider": "^15.7.0",
     "plyr": "^3.7.8",
     "star-rating.js": "^4.3.0",
-    "tinymce": "^6.4.2",
+    "tinymce": "^6.4.2 || ^7.0.0",
     "tom-select": "^2.2.2"
   },
   "peerDependenciesMeta": {

package/src/js/src/toast.js

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

package/src/scss/_variables-dark.scss

@@ -3,13 +3,13 @@
 //
 $darken-dark: darken($dark, 2%) !default;
 $lighten-dark: lighten($dark, 2%) !default;
-$border-color-dark: lighten($dark, 4%) !default;
+$border-color-dark: lighten($dark, 8%) !default;
 $border-color-translucent-dark: rgba(72, 110, 149, .14) !default;
 $border-dark-color-dark: lighten($dark, 4%) !default;
-$border-color-active-dark: lighten($dark, 12%) !default;
+$border-active-color-dark: lighten($dark, 12%) !default;
 
 //new bootsrap variables
-$body-color-dark: $light !default;
+$body-color-dark: $gray-200 !default;
 $body-emphasis-color-dark: $white !default;
 
 $code-color-dark: var(--#{$prefix}gray-300) !default;

package/src/scss/_variables.scss

@@ -135,15 +135,15 @@ $text-secondary-dark-opacity: 0.8 !default;
 $border-opacity: 0.16 !default;
 $border-light-opacity: 0.08 !default;
 $border-dark-opacity: 0.24 !default;
-$border-active-opacity: 0.48 !default;
-
-$gray-50: #fcfdfe !default;
-$gray-100: #f6f8fb !default;
-$gray-200: #eef1f4 !default;
-$gray-300: #dadfe5 !default;
-$gray-400: #bbc3cd !default;
-$gray-500: #929dab !default;
-$gray-600: #667382 !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;
@@ -159,14 +159,14 @@ $bg-surface-secondary: var(--#{$prefix}gray-100) !default;
 $bg-surface-tertiary: var(--#{$prefix}gray-50) !default;
 $bg-surface-dark: var(--#{$prefix}dark) !default;
 
-$body-bg: $gray-100 !default;
+$body-bg: $gray-50 !default;
 $body-color: $dark !default;
-$body-emphasis-color: $dark !default;
+$body-emphasis-color: $gray-700 !default;
 
 $color-contrast-dark: $body-color !default;
 $color-contrast-light: $light !default;
 
-$blue: #0054a6 !default;
+$blue: #066fd1 !default;
 $azure: #4299e1 !default;
 $indigo: #4263eb !default;
 $purple: #ae3ec9 !default;
@@ -179,7 +179,7 @@ $green: #2fb344 !default;
 $teal: #0ca678 !default;
 $cyan: #17a2b8 !default;
 
-$color-blue: #0054a6;
+$color-blue: #066fd1;
 $color-azure: #3586c9;
 $color-indigo: #4263eb;
 $color-purple: #ae3ec9;
@@ -192,12 +192,12 @@ $color-green: #2fb344;
 $color-teal: #0ca678;
 $color-cyan: #17a2b8;
 
-$text-secondary: $gray-600 !default;
-$text-secondary-light: $gray-500 !default;
-$text-secondary-dark: $gray-700 !default;
+$text-secondary: $gray-500 !default;
+$text-secondary-light: $gray-400 !default;
+$text-secondary-dark: $gray-600 !default;
 
-$border-color: $gray-300 !default;
-$border-color-translucent: rgba(4, 32, 69, 0.14);
+$border-color: $gray-200 !default;
+$border-color-translucent: rgba(4, 32, 69, 0.1);
 
 $border-dark-color: $gray-400 !default;
 $border-dark-color-translucent: rgba(4, 32, 69, 0.27);
@@ -209,7 +209,7 @@ $active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default;
 $active-color: var(--#{$prefix}primary) !default;
 $active-border-color: var(--#{$prefix}primary) !default;
 
-$hover-bg: rgba(var(--#{$prefix}text-secondary-rgb), 0.04) !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;
@@ -251,6 +251,7 @@ $extra-colors: (
 ) !default;
 
 $social-colors: (
+  "x": #000000,
   "facebook": #1877f2,
   "twitter": #1da1f2,
   "linkedin": #0a66c2,
@@ -265,7 +266,7 @@ $social-colors: (
   "rss": #ffa500,
   "flickr": #0063dc,
   "bitbucket": #0052cc,
-  "tabler": #0054a6,
+  "tabler": #066fd1,
 ) !default;
 
 $gray-colors: (
@@ -293,7 +294,7 @@ $border-radius-lg: 8px !default;
 $border-radius-pill: 100rem !default;
 
 // Icons
-$icon-color: var(--#{$prefix}gray-500) !default;
+$icon-color: var(--#{$prefix}gray-400) !default;
 
 // Code
 $code-color: var(--#{$prefix}gray-600) !default;
@@ -514,7 +515,7 @@ $alert-border-color: var(--#{$prefix}border-color-translucent) !default;
 $alert-shadow: rgba($dark, 0.04) 0 2px 4px 0 !default;
 
 // Breadcrumb
-$breadcrumb-divider-color: var(--#{$prefix}secondary) !default;
+$breadcrumb-divider-color: var(--#{$prefix}gray-500) !default;
 $breadcrumb-link-color: var(--#{$prefix}link-color) !default;
 $breadcrumb-active-color: inherit !default;
 $breadcrumb-active-font-weight: var(--#{$prefix}font-weight-bold) !default;
@@ -533,7 +534,7 @@ $badge-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $badge-padding-y: 0.25em !default;
 $badge-padding-x: 0.5em !default;
 $badge-empty-size: 0.5rem !default;
-$badge-color: var(--#{$prefix}secondary) !default;
+$badge-color: var(--#{$prefix}gray-500) !default;
 $badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
 
 // Buttons
@@ -583,7 +584,7 @@ $card-border-color: var(--#{$prefix}border-color-translucent) !default;
 $card-border-radius: var(--#{$prefix}border-radius) !default;
 
 $card-spacer-x: 1.25rem !default;
-$card-spacer-y: 1.25rem !default;
+$card-spacer-y: 1rem !default;
 
 $card-cap-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $card-cap-color: inherit !default;
@@ -642,7 +643,7 @@ $dropdown-link-active-bg: var(--#{$prefix}active-bg) !default;
 $dropdown-box-shadow: var(--#{$prefix}box-shadow-dropdown) !default;
 
 $dropdown-divider-bg: $dropdown-border-color !default;
-$dropdown-divider-margin-y: var(--#{$prefix}spacer) !default;
+$dropdown-divider-margin-y: var(--#{$prefix}spacer-2) !default;
 
 // Tooltip
 $tooltip-bg: var(--#{$prefix}bg-surface-dark) !default;
@@ -655,7 +656,7 @@ $loader-size: 2.5rem !default;
 
 // Lists
 $list-group-header-bg: var(--#{$prefix}bg-surface-tertiary) !default;
-$list-group-header-color: var(--#{$prefix}secondary) !default;
+$list-group-header-color: var(--#{$prefix}gray-500) !default;
 
 $list-group-border-color: var(--#{$prefix}border-color) !default;
 $list-group-item-padding-y: $card-cap-padding-y !default;
@@ -694,7 +695,7 @@ $modal-sm: 380px !default;
 // Nav
 $nav-link-padding-y: 0.5rem !default;
 $nav-link-padding-x: 0.75rem !default;
-$nav-link-color: var(--#{$prefix}secondary) !default;
+$nav-link-color: var(--#{$prefix}gray-500) !default;
 $nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
 $nav-link-icon-size: $icon-size !default;
 $nav-link-icon-color: var(--#{$prefix}icon-color) !default;
@@ -720,6 +721,8 @@ $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $navbar-height: 3.5rem !default;
 $navbar-padding-y: 0.25rem !default;
 
+$navbar-hover-color: $white !default;
+
 $navbar-border-width: var(--#{$prefix}border-width) !default;
 $navbar-border-color: var(--#{$prefix}border-color) !default;
 
@@ -757,7 +760,7 @@ $sidebar-width: 15rem !default;
 
 // Page
 $page-title-font-size: var(--#{$prefix}font-size-h2) !default;
-$page-title-line-height: var(--#{$prefix}line-height-h4) !default;
+$page-title-line-height: var(--#{$prefix}line-height-h2) !default;
 $page-title-font-weight: var(--#{$prefix}font-weight-headings) !default;
 
 // Popover
@@ -770,13 +773,13 @@ $popover-body-color: inherit !default;
 $footer-padding-y: 2rem !default;
 $footer-bg: $white !default;
 $footer-border-color: var(--#{$prefix}border-color) !default;
-$footer-color: var(--#{$prefix}secondary) !default;
+$footer-color: var(--#{$prefix}gray-500) !default;
 
 // Pagination
 $pagination-border-width: 0 !default;
 $pagination-padding-y: 0.25rem !default;
 $pagination-padding-x: 0.25rem !default;
-$pagination-color: var(--#{$prefix}secondary) !default;
+$pagination-color: var(--#{$prefix}gray-500) !default;
 $pagination-bg: transparent !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
@@ -812,7 +815,7 @@ $table-border-color: var(--#{$prefix}border-color-translucent) !default;
 $table-th-border-color: var(--#{$prefix}border-color-translucent) !default;
 $table-th-padding-x: $table-cell-padding-x !default;
 $table-th-padding-y: 0.5rem !default;
-$table-th-color: var(--#{$prefix}secondary) !default;
+$table-th-color: var(--#{$prefix}gray-500) !default;
 $table-th-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $table-striped-order: even !default;
 $table-striped-bg: var(--#{$prefix}bg-surface-tertiary) !default;
@@ -824,7 +827,7 @@ $table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org
 
 // Toasts
 $toast-border-color: var(--#{$prefix}border-color) !default;
-$toast-header-color: var(--#{$prefix}secondary) !default;
+$toast-header-color: var(--#{$prefix}gray-500) !default;
 
 // Tracking
 $tracking-height: 1.5rem !default;
@@ -853,7 +856,7 @@ $input-border-color-translucent: var(--#{$prefix}border-color-translucent) !defa
 $input-placeholder-color: $text-secondary-light !default;
 
 $input-group-addon-bg: var(--#{$prefix}bg-surface-secondary) !default;
-$input-group-addon-color: var(--#{$prefix}secondary) !default;
+$input-group-addon-color: var(--#{$prefix}gray-500) !default;
 
 $input-border-radius: var(--#{$prefix}border-radius) !default;
 
@@ -910,6 +913,8 @@ $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;
+
 // Legend
 $legend-bg: var(--#{$prefix}border-color) !default;
 $legend-size: 0.75em !default;

package/src/scss/layout/_dark.scss

@@ -5,6 +5,10 @@ body {
     .hide-theme-light {
       display: none !important;
     }
+
+    .img-dark {
+      display: none !important;
+    }
   }
 
   &.theme-dark,
@@ -12,6 +16,10 @@ body {
     .hide-theme-dark {
       display: none !important;
     }
+
+    .img-light {
+      display: none !important;
+    }
   }
 }
 
@@ -43,8 +51,8 @@ body {
       --#{$prefix}dark-mode-border-color-translucent
     );
     --#{$prefix}border-dark-color: var(--#{$prefix}dark-mode-border-dark-color);
-    --#{$prefix}border-color-active: var(
-      --#{$prefix}dark-mode-border-color-active
+    --#{$prefix}border-active-color: var(
+      --#{$prefix}dark-mode-border-active-color
     );
 
     --#{$prefix}btn-color: #{$darken-dark};

package/src/scss/layout/_navbar.scss

@@ -1,4 +1,3 @@
-
 @mixin navbar-vertical-nav {
   .navbar-collapse {
     flex-direction: column;
@@ -14,7 +13,7 @@
       margin-right: 0;
 
       .nav-link {
-        padding: .5rem calc(#{$container-padding-x} / 2);
+        padding: 0.5rem calc(#{$container-padding-x} / 2);
         justify-content: flex-start;
       }
     }
@@ -40,6 +39,12 @@
         padding-left: add(calc(#{$container-padding-x} / 2), 1.75rem);
         color: inherit;
 
+        &.disabled {
+          color: var(--#{$prefix}gray-300);
+          pointer-events: none;
+          background-color: transparent;
+        }
+
         &.active,
         &:active {
           background: var(--#{$prefix}navbar-active-bg);
@@ -110,8 +115,8 @@ Navbar
 
       .badge {
         position: absolute;
-        top: .375rem;
-        right: .375rem;
+        top: 0.375rem;
+        right: 0.375rem;
         transform: translate(50%, -50%);
       }
     }
@@ -147,7 +152,7 @@ Navbar
             position: absolute;
             left: 0;
             right: 0;
-            bottom: -.25rem;
+            bottom: -0.25rem;
             border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
             border-bottom-width: 2px;
           }
@@ -215,7 +220,12 @@ Navbar toggler
   width: 1.25em;
   background: currentColor;
   border-radius: 10px;
-  @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);
+  @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
+  );
   position: relative;
 
   &:before,
@@ -232,11 +242,11 @@ Navbar toggler
   }
 
   &:before {
-    top: -.45em;
+    top: -0.45em;
   }
 
   &:after {
-    bottom: -.45em;
+    bottom: -0.45em;
   }
 
   .navbar-toggler[aria-expanded="true"] & {
@@ -316,7 +326,7 @@ Navbar vertical
             }
 
             .navbar-brand {
-              padding: (($navbar-height - $navbar-brand-image-height) * .5) 0;
+              padding: (($navbar-height - $navbar-brand-image-height) * 0.5) 0;
               justify-content: center;
             }
 
@@ -330,8 +340,8 @@ Navbar vertical
               min-height: auto;
 
               .nav-link {
-                padding-top: .5rem;
-                padding-bottom: .5rem;
+                padding-top: 0.5rem;
+                padding-bottom: 0.5rem;
               }
             }
 
@@ -365,7 +375,6 @@ Navbar vertical
   }
 }
 
-
 .navbar-overlap {
   &:after {
     content: "";
@@ -378,4 +387,4 @@ Navbar vertical
     z-index: -1;
     box-shadow: inherit;
   }
-}
+}

package/src/scss/layout/_page.scss

@@ -6,10 +6,7 @@
 }
 
 .page-center {
-  .container {
-    margin-top: auto;
-    margin-bottom: auto;
-  }
+  justify-content: center;
 }
 
 .page-wrapper {
@@ -33,6 +30,9 @@
 .page-body {
   margin-top: var(--#{$prefix}page-padding-y);
   margin-bottom: var(--#{$prefix}page-padding-y);
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 
 .page-body-card {

package/src/scss/layout/_root.scss

@@ -45,7 +45,7 @@
 
   --#{$prefix}dark-mode-border-color: #{$border-color-dark};
   --#{$prefix}dark-mode-border-color-translucent: #{$border-color-translucent-dark};
-  --#{$prefix}dark-mode-border-color-active: #{$border-color-active-dark};
+  --#{$prefix}dark-mode-border-active-color: #{$border-active-color-dark};
   --#{$prefix}dark-mode-border-dark-color: #{$border-dark-color-dark};
 
   --#{$prefix}page-padding: #{$page-padding};

package/src/scss/mixins/_mixins.scss

@@ -15,7 +15,7 @@
 
 @mixin scrollbar($color: var(--#{$prefix}body-color-rgb)) {
   #{if(&, "&", "*")} {
-    scrollbar-color: rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .16) transparent;
+    scrollbar-color: rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .16);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar {
@@ -60,9 +60,9 @@
 
 @mixin focus-ring($show-border: false) {
   outline: 0;
-  box-shadow: 0 0 $focus-ring-blur $focus-ring-width rgba(var(--tblr-primary-rgb), 0.25);
+  box-shadow: 0 0 $focus-ring-blur $focus-ring-width rgba(var(--#{$prefix}primary-rgb), 0.25);
 
   @if($show-border) {
-    border-color: rgba(var(--tblr-primary-rgb), 0.25);
+    border-color: rgba(var(--#{$prefix}primary-rgb), 0.25);
   }
-}
+}

package/src/scss/ui/_alerts.scss

@@ -1,6 +1,6 @@
 .alert {
   --#{$prefix}alert-color: #{var(--#{$prefix}secondary)};
-  --tblr-alert-bg: #{var(--#{$prefix}surface)};
+  --#{$prefix}alert-bg: #{var(--#{$prefix}bg-surface)};
   border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
   border-left: .25rem var(--#{$prefix}border-style) var(--#{$prefix}alert-color);
   box-shadow: $alert-shadow;
@@ -56,4 +56,4 @@
   font-weight: var(--#{$prefix}font-weight-bold);
   margin-bottom: .25rem;
   color: var(--#{$prefix}alert-color);
-}
+}

package/src/scss/ui/_buttons.scss

@@ -7,7 +7,7 @@
   --#{$prefix}btn-color: var(--#{$prefix}body-color);
   --#{$prefix}btn-border-color: #{$btn-border-color};
   --#{$prefix}btn-hover-bg: var(--#{$prefix}btn-bg);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}border-color-active);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}border-active-color);
   --#{$prefix}btn-box-shadow: var(--#{$prefix}box-shadow-input);
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-bg};
@@ -50,7 +50,7 @@
 }
 
 .btn-link {
-  color: $link-color;
+  color: #{lighten($primary, 5%)};
   background-color: transparent;
   border-color: transparent;
   box-shadow: none;
@@ -72,8 +72,8 @@
   .btn-#{$color} {
     @if $color == 'dark' {
       --#{$prefix}btn-border-color: var(--#{$prefix}dark-mode-border-color);
-      --#{$prefix}btn-hover-border-color: var(--#{$prefix}dark-mode-border-color-active);
-      --#{$prefix}btn-active-border-color: var(--#{$prefix}dark-mode-border-color-active);
+      --#{$prefix}btn-hover-border-color: var(--#{$prefix}dark-mode-border-active-color);
+      --#{$prefix}btn-active-border-color: var(--#{$prefix}dark-mode-border-active-color);
     } @else {
       --#{$prefix}btn-border-color: transparent;
       --#{$prefix}btn-hover-border-color: transparent;

package/src/scss/ui/_dropdowns.scss

@@ -1,5 +1,6 @@
 .dropdown-menu {
   user-select: none;
+  background-clip: border-box;
 
   &.card {
     padding: 0;

package/src/scss/ui/_empty.scss

@@ -28,11 +28,6 @@
 .empty-img {
   margin: 0 0 2rem;
   line-height: 1;
-
-  img {
-    height: 8rem;
-    width: auto;
-  }
 }
 
 .empty-header {