@tabler/core 1.0.0-beta16 → 1.0.0-beta17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/core",
-  "version": "1.0.0-beta16",
+  "version": "1.0.0-beta17",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {
@@ -62,19 +62,19 @@
     "files": [
       {
         "path": "./dist/css/tabler.css",
-        "maxSize": "65 kB"
+        "maxSize": "67 kB"
       },
       {
         "path": "./dist/css/tabler.min.css",
-        "maxSize": "60 kB"
+        "maxSize": "62 kB"
       },
       {
         "path": "./dist/css/tabler.rtl.css",
-        "maxSize": "65 kB"
+        "maxSize": "67 kB"
       },
       {
         "path": "./dist/css/tabler.rtl.min.css",
-        "maxSize": "60 kB"
+        "maxSize": "62 kB"
       },
       {
         "path": "./dist/css/tabler-flags.css",
@@ -119,20 +119,21 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
-    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-replace": "^5.0.1",
+    "@rollup/plugin-replace": "^5.0.2",
     "@rollup/pluginutils": "^5.0.2",
     "@rollup/stream": "^2.0.0",
+    "@tabler/icons": "^2.1.2",
     "apexcharts": "^3.36.3",
     "autoprefixer": "^10.4.13",
-    "autosize": "^5.0.1",
-    "browser-sync": "^2.27.10",
+    "autosize": "^5.0.2",
+    "browser-sync": "^2.27.11",
     "bundlewatch": "^0.3.3",
-    "choices.js": "^10.1.0",
-    "chromatic": "^6.11.4",
+    "choices.js": "^10.2.0",
+    "chromatic": "^6.14.0",
     "countup.js": "^2.3.2",
     "cross-spawn": "^7.0.3",
     "dropzone": "^6.0.0-beta.2",
@@ -155,30 +156,29 @@
     "list.js": "^2.3.1",
     "litepicker": "^2.0.12",
     "nouislider": "^15.6.1",
-    "plyr": "^3.7.2",
-    "postcss": "^8.4.18",
-    "release-it": "^15.5.0",
+    "plyr": "^3.7.3",
+    "postcss": "^8.4.20",
+    "release-it": "^15.6.0",
     "request": "^2.88.2",
-    "rollup": "^2.79.1",
+    "rollup": "2.79.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleanup": "^3.2.1",
-    "sass": "^1.56.1",
-    "tinymce": "^6.2.0",
+    "sass": "^1.57.1",
+    "tinymce": "^6.3.1",
     "tom-select": "^2.2.2",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "yaml": "^2.1.3",
+    "yaml": "^2.2.1",
     "yargs": "^17.6.2"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "@tabler/icons": "^1.111.0",
-    "bootstrap": "~5.2.2"
+    "bootstrap": "5.3.0-alpha1"
   },
   "peerDependencies": {
     "apexcharts": "^3.36.3",
-    "autosize": "^5.0.1",
-    "choices.js": "^10.1.0",
+    "autosize": "^5.0.2",
+    "choices.js": "^10.2.0",
     "countup.js": "^2.3.2",
     "dropzone": "^6.0.0-beta.2",
     "flatpickr": "^4.6.13",
@@ -188,8 +188,8 @@
     "list.js": "^2.3.1",
     "litepicker": "^2.0.12",
     "nouislider": "^15.6.1",
-    "plyr": "^3.7.2",
-    "tinymce": "^6.2.0",
+    "plyr": "^3.7.3",
+    "tinymce": "^6.3.1",
     "tom-select": "^2.2.2"
   },
   "peerDependenciesMeta": {
@@ -217,6 +217,9 @@
     "imask": {
       "optional": true
     },
+    "jsvectormap": {
+      "optional": true
+    },
     "list.js": {
       "optional": true
     },
@@ -226,22 +229,16 @@
     "nouislider": {
       "optional": true
     },
-    "tom-select": {
+    "plyr": {
       "optional": true
     },
     "tinymce": {
       "optional": true
     },
-    "jsvectormap": {
-      "optional": true
-    },
-    "plyr": {
+    "tom-select": {
       "optional": true
     }
   },
-  "resolutions": {
-    "**/**/node-gyp": "^5.0.0"
-  },
   "release-it": {
     "hooks": {
       "after:bump": "gulp build --latest-version ${latestVersion} --new-version ${version} && gulp build-demo",
@@ -255,5 +252,8 @@
     "github": {
       "release": true
     }
+  },
+  "directories": {
+    "doc": "docs"
   }
 }

package/src/scss/_bootstrap-components.scss

@@ -1,38 +1,38 @@
 // Layout & components
-@import "~bootstrap/scss/root";
-@import "~bootstrap/scss/reboot";
-@import "~bootstrap/scss/type";
-@import "~bootstrap/scss/images";
-@import "~bootstrap/scss/containers";
-@import "~bootstrap/scss/grid";
-@import "~bootstrap/scss/tables";
-@import "~bootstrap/scss/forms";
-@import "~bootstrap/scss/buttons";
-@import "~bootstrap/scss/transitions";
-@import "~bootstrap/scss/dropdown";
-@import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/nav";
-@import "~bootstrap/scss/navbar";
-@import "~bootstrap/scss/card";
-@import "~bootstrap/scss/accordion";
-@import "~bootstrap/scss/breadcrumb";
-@import "~bootstrap/scss/pagination";
-@import "~bootstrap/scss/badge";
-@import "~bootstrap/scss/alert";
-@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";
-@import "~bootstrap/scss/popover";
-@import "~bootstrap/scss/carousel";
-@import "~bootstrap/scss/spinners";
-@import "~bootstrap/scss/offcanvas";
-@import "~bootstrap/scss/placeholders";
+@import "../../node_modules/bootstrap/scss/root";
+@import "../../node_modules/bootstrap/scss/reboot";
+@import "../../node_modules/bootstrap/scss/type";
+@import "../../node_modules/bootstrap/scss/images";
+@import "../../node_modules/bootstrap/scss/containers";
+@import "../../node_modules/bootstrap/scss/grid";
+@import "../../node_modules/bootstrap/scss/tables";
+@import "../../node_modules/bootstrap/scss/forms";
+@import "../../node_modules/bootstrap/scss/buttons";
+@import "../../node_modules/bootstrap/scss/transitions";
+@import "../../node_modules/bootstrap/scss/dropdown";
+@import "../../node_modules/bootstrap/scss/button-group";
+@import "../../node_modules/bootstrap/scss/nav";
+@import "../../node_modules/bootstrap/scss/navbar";
+@import "../../node_modules/bootstrap/scss/card";
+@import "../../node_modules/bootstrap/scss/accordion";
+@import "../../node_modules/bootstrap/scss/breadcrumb";
+@import "../../node_modules/bootstrap/scss/pagination";
+@import "../../node_modules/bootstrap/scss/badge";
+@import "../../node_modules/bootstrap/scss/alert";
+@import "../../node_modules/bootstrap/scss/progress";
+@import "../../node_modules/bootstrap/scss/list-group";
+@import "../../node_modules/bootstrap/scss/close";
+@import "../../node_modules/bootstrap/scss/toasts";
+@import "../../node_modules/bootstrap/scss/modal";
+@import "../../node_modules/bootstrap/scss/tooltip";
+@import "../../node_modules/bootstrap/scss/popover";
+@import "../../node_modules/bootstrap/scss/carousel";
+@import "../../node_modules/bootstrap/scss/spinners";
+@import "../../node_modules/bootstrap/scss/offcanvas";
+@import "../../node_modules/bootstrap/scss/placeholders";
 
 // Helpers
-@import "~bootstrap/scss/helpers";
+@import "../../node_modules/bootstrap/scss/helpers";
 
 // Utilities
-@import "~bootstrap/scss/utilities/api";
+@import "../../node_modules/bootstrap/scss/utilities/api";

package/src/scss/_bootstrap-config.scss

@@ -1,6 +1,7 @@
 // Config
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/maps";
-@import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/utilities";
+@import "../../node_modules/bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/variables-dark";
+@import "../../node_modules/bootstrap/scss/maps";
+@import "../../node_modules/bootstrap/scss/mixins";
+@import "../../node_modules/bootstrap/scss/utilities";

package/src/scss/_core.scss

@@ -56,6 +56,7 @@
 @import "ui/toasts";
 @import "ui/toolbar";
 @import "ui/tracking";
+@import "ui/timeline";
 @import "ui/type";
 @import "ui/charts";
 @import "ui/offcanvas";

package/src/scss/_variables.scss

@@ -54,7 +54,7 @@ $font-weight-normal: 400 !default;
 $font-weight-medium: 500 !default;
 $font-weight-bold: 600 !default;
 
-$headings-font-weight: var(--#{$prefix}font-weight-medium) !default;
+$headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
 
 $font-weights: (
   light: $font-weight-light,
@@ -149,7 +149,8 @@ $light: $gray-50 !default;
 $dark: $gray-800 !default;
 
 $bg-surface: var(--#{$prefix}white) !default;
-$bg-surface-secondary: var(--#{$prefix}light) !default;
+$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;
@@ -190,11 +191,9 @@ $active-border-color: var(--#{$prefix}primary) !default;
 
 $hover-bg: rgba(var(--#{$prefix}muted-rgb), .04) !default;
 
-$disabled-bg: var(--#{$prefix}gray-100) !default;
+$disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $disabled-color: var(--#{$prefix}gray-300) !default;
 
-$link-color: var(--#{$prefix}primary) !default;
-$link-hover-color: var(--#{$prefix}primary-darken) !default;
 
 $primary: $blue !default;
 $secondary: $text-muted !default;
@@ -203,6 +202,8 @@ $info: $azure !default;
 $warning: $orange !default;
 $danger: $red !default;
 
+$link-color: $primary !default;
+
 $theme-colors: (
   "primary": $primary,
   "secondary": $text-muted,
@@ -289,26 +290,29 @@ $icon-color: var(--#{$prefix}gray-500) !default;
 $code-color: var(--#{$prefix}gray-600) !default;
 $code-font-size: $small-font-size !default;
 $code-line-height: 1.25rem !default;
-$code-bg: var(--#{$prefix}gray-100) !default;
+$code-bg: var(--#{$prefix}bg-surface-secondary) !default;
 
 $pre-padding: 1rem !default;
 $pre-bg: var(--#{$prefix}bg-surface-dark) !default;
 $pre-color: var(--#{$prefix}light) !default;
 
-$kbd-padding-x: 4px !default;
-$kbd-padding-y: 2px !default;
+$kbd-padding-x: .5rem !default;
+$kbd-padding-y: .25rem !default;
 $kbd-font-weight: var(--#{$prefix}font-weight-medium) !default;
-$kbd-color: var(--#{$prefix}muted) !default;
+$kbd-font-size: var(--#{$prefix}font-size-h5) !default;
+$kbd-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !default;
+$kbd-color: var(--#{$prefix}muted-dark) !default;
 $kbd-bg: var(--#{$prefix}code-bg) !default;
 $kbd-border-radius: var(--#{$prefix}border-radius) !default;
 
 // Avatars
 $avatar-size: 2.5rem !default;
+$avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $avatar-sizes: (
   "xs": 1.5rem,
   "sm": 2rem,
   "md": 4rem,
-  "lg": 5rem,
+  "lg": 5.5rem,
   "xl": 7rem,
   "2xl": 11rem,
 ) !default;
@@ -326,11 +330,18 @@ $hr-margin-y: 2rem !default;
 $caret-width: .36em !default;
 $caret-spacing: .4em !default;
 
+//Sizing
+$content-padding: 1.25rem !default;
+
+$container-padding-x: var(--#{$prefix}content-padding) !default;
+$grid-gutter-width: var(--#{$prefix}content-padding) !default;
+
 // Grid
 $grid-gutter-width: 1rem !default;
 $container-padding-x: 1.5rem !default;
 
 $container-variations: (
+  slim: 16rem,
   tight: 30rem,
   narrow: 45rem,
 ) !default;
@@ -367,6 +378,13 @@ $size-values: map-merge($spacers, (
   auto: auto
 )) !default;
 
+
+$container-variations: (
+  tight: 30rem,
+  narrow: 45rem,
+) !default;
+
+
 // Aspect ratios
 $aspect-ratios: (
   "1x1": 100%,
@@ -384,6 +402,7 @@ $aspect-ratios: (
 
 // Shadows
 $shadow: rgba(var(--#{$prefix}body-color-rgb), .04) 0 2px 4px 0 !default;
+$shadow-inset: inset rgba(var(--#{$prefix}body-color-rgb), .04) 0 0 0 1px !default;
 $shadow-transparent: 0 0 0 0 transparent !default;
 $shadow-button: 0 1px 0 rgba(var(--#{$prefix}body-color-rgb), .04) !default;
 $shadow-button-inset: inset 0 -1px 0 rgba(var(--#{$prefix}body-color-rgb), .2) !default;
@@ -421,7 +440,7 @@ $alert-padding-x: 1rem !default;
 $alert-padding-y: 1rem !default;
 $alert-link-font-weight: var(--#{$prefix}font-weight-bold) !default;
 
-$alert-border-width: 1px !default;
+$alert-border-width: var(--#{$prefix}border-width) !default;
 $alert-border-color: var(--#{$prefix}border-color-translucent) !default;
 $alert-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
 
@@ -492,7 +511,7 @@ $card-border-radius: var(--#{$prefix}border-radius) !default;
 $card-spacer-x: 1.5rem !default;
 $card-spacer-y: 1rem !default;
 
-$card-cap-bg: var(--#{$prefix}bg-surface-secondary) !default;
+$card-cap-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $card-cap-color: inherit !default;
 $card-cap-padding-x: $card-spacer-x !default;
 $card-cap-padding-y: $card-spacer-y !default;
@@ -506,7 +525,7 @@ $card-ribbon-margin: .25rem !default;
 $card-ribbon-border-radius: var(--#{$prefix}border-radius) !default;
 $card-ribbon-font-size: $h6-font-size !default;
 
-$card-header-tabs-bg: var(--#{$prefix}bg-surface-secondary) !default;
+$card-header-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 
 $cards-grid-gap: 1rem !default;
 $cards-grid-breakpoint: lg !default;
@@ -531,6 +550,7 @@ $datagrid-padding: 1.5rem !default;
 $datagrid-item-width: 15rem !default;
 
 // Dropdown
+$dropdown-bg: var(--#{$prefix}bg-surface) !default;
 $dropdown-item-padding-x: .75rem !default;
 $dropdown-item-padding-y: .5rem !default;
 $dropdown-font-size: $font-size-base !default;
@@ -576,7 +596,7 @@ $modal-content-inner-border-radius: subtract(var(--#{$prefix}modal-border-radius
 
 $modal-header-padding: 1.5rem !default;
 $modal-header-height: 3.5rem !default;
-$modal-header-border-width: 1px !default;
+$modal-header-border-width: var(--#{$prefix}border-width) !default;
 $modal-header-border-color: var(--#{$prefix}border-color) !default;
 $modal-header-bg: $white !default;
 $modal-inner-padding: 1.5rem !default;
@@ -613,7 +633,7 @@ $nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
 $nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-border-color !default;
 $nav-tabs-link-active-border-color: $nav-tabs-link-hover-border-color !default;
 $nav-tabs-link-active-color: var(--#{$prefix}body-color) !default;
-$nav-tabs-bg: var(--#{$prefix}bg-surface-secondary) !default;
+$nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 
 
 // Navbar
@@ -709,9 +729,9 @@ $table-th-border-color: var(--#{$prefix}border-color-translucent) !default;
 $table-th-padding-x: $table-cell-padding-x !default;
 $table-th-padding-y: .5rem !default;
 $table-th-color: var(--#{$prefix}muted) !default;
-$table-th-bg: var(--#{$prefix}gray-50) !default;
+$table-th-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $table-striped-order: even !default;
-$table-striped-bg: var(--#{$prefix}bg-surface-secondary) !default;
+$table-striped-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $table-group-separator-color: var(--#{$prefix}border-color-translucent) !default;
 
 $table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;

package/src/scss/demo/_examples.scss

@@ -22,7 +22,7 @@
 .example-content {
   font-size: $font-size-base;
   line-height: $line-height-base;
-  color: $body-color;
+  color: var(--#{$prefix}body-color);
   flex: 1;
   max-width: 100%;
 

package/src/scss/layout/_core.scss

@@ -47,7 +47,7 @@ body {
     margin: 0 auto;
     max-width: var(--#{$prefix}theme-boxed-width);
     border-radius: var(--#{$prefix}theme-boxed-border-radius);
-    color: $body-color;
+    color: var(--#{$prefix}body-color);
 
     @include media-breakpoint-up(md) {
       border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);

package/src/scss/layout/_dark.scss

@@ -1,10 +1,3 @@
-/*!
- * Tabler (v0.9.0): _dark.scss
- * Copyright 2018-2021 The Tabler Authors
- * Copyright 2018-2021 codecalm
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */
-
 // stylelint-disable declaration-no-important
 body:not(.theme-dark) .hide-theme-light {
   display: none !important;
@@ -22,7 +15,8 @@ body:not(.theme-dark) .hide-theme-light {
     --#{$prefix}bg-forms: #{$dark-mode-darken};
     --#{$prefix}bg-surface: #{$dark};
     --#{$prefix}bg-surface-dark: #{$dark-mode-darken};
-    --#{$prefix}bg-surface-secondary: #{$dark-mode-darken};
+    --#{$prefix}bg-surface-secondary: #{$dark-mode-lighten};
+    --#{$prefix}bg-surface-tertiary: #{$dark-mode-darken};
 
     --#{$prefix}link-color: #{lighten($primary, 8%)};
     --#{$prefix}link-hover-color: #{$primary};
@@ -118,8 +112,8 @@ body:not(.theme-dark) .hide-theme-light {
     background-color: $dark-mode-darken;
   }
 
-  .avatar {
-    --#{$prefix}avatar-bg: #{$dark-mode-lighten};
+  .timeline-event-icon {
+    background-color: #{$dark-mode-lighten};
   }
 
   .markdown,

package/src/scss/layout/_navbar.scss

@@ -54,8 +54,9 @@
 @mixin navbar-dark {
   --#{$prefix}navbar-border-color: #{$dark-mode-border-color};
   --#{$prefix}navbar-bg: #{$dark};
+  --#{$prefix}scrollbar-color: var(--#{$prefix}white-rgb);
   @include navbar-color($dark, $navbar-dark-color, $navbar-dark-brand-color, $navbar-dark-active-color, $navbar-dark-disabled-color, $navbar-dark-active-bg);
-  @include scrollbar;
+  //@include scrollbar;
 }
 
 @mixin navbar-vertical-nav {
@@ -386,7 +387,7 @@ Navbar vertical
             z-index: $zindex-fixed;
             align-items: flex-start;
             @include transition(transform $transition-time);
-            overflow-x: auto;
+            overflow-y: scroll;
             padding: 0;
 
             &.navbar-right {

package/src/scss/layout/_page.scss

@@ -28,14 +28,14 @@
 
 // Content body
 .page-body {
-  margin-top: $content-padding-y;
-  margin-bottom: $content-padding-y;
+  margin-top: var(--#{$prefix}content-padding);
+  margin-bottom: var(--#{$prefix}content-padding);
 }
 
 .page-body-card {
   background: var(--#{$prefix}bg-surface);
   border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $card-border-color;
-  padding: $content-padding-y 0;
+  padding: var(--#{$prefix}content-padding) 0;
   margin-bottom: 0;
   flex: 1;
 
@@ -80,13 +80,13 @@
   justify-content: center;
 
   .page-wrapper & {
-    margin: $content-padding-y 0 0;
+    margin: var(--#{$prefix}content-padding) 0 0;
   }
 }
 
 .page-header-border {
   border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  padding: $content-padding-y 0;
+  padding: var(--#{$prefix}content-padding) 0;
   margin: 0 !important;
   background-color: var(--#{$prefix}bg-surface);
 }
@@ -121,6 +121,32 @@
   color: var(--#{$prefix}muted);
 }
 
+//
+// Page cover
+//
+.page-cover {
+  --#{$prefix}page-cover-blur: 20px;
+  --#{$prefix}page-cover-padding: 1rem;
+  min-height: 6rem;
+  padding: var(--#{$prefix}page-cover-padding) 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.page-cover-img {
+  position: absolute;
+  top: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+  left: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+  right: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+  bottom: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
+  pointer-events: none;
+  filter: blur(var(--#{$prefix}page-cover-blur));
+  object-fit: cover;
+  background-size: cover;
+  background-position: center;
+  z-index: -1;
+}
+
 //
 // Page tabs
 //

package/src/scss/layout/_root.scss

@@ -12,6 +12,7 @@
 
   --#{$prefix}bg-surface: #{$bg-surface};
   --#{$prefix}bg-surface-secondary: #{$bg-surface-secondary};
+  --#{$prefix}bg-surface-tertiary: #{$bg-surface-tertiary};
   --#{$prefix}bg-surface-dark: #{$bg-surface-dark};
   --#{$prefix}bg-forms: var(--#{$prefix}bg-surface);
 
@@ -29,6 +30,7 @@
   --#{$prefix}code-color: #{$code-color};
   --#{$prefix}code-bg: #{$code-bg};
 
+  --#{$prefix}content-padding: #{$content-padding};
   --#{$prefix}dark-mode-border-color: #{$dark-mode-border-color};
   --#{$prefix}dark-mode-border-color-light: #{$dark-mode-border-color-light};
   --#{$prefix}dark-mode-border-color-active: #{$dark-mode-border-color-active};

package/src/scss/mixins/_mixins.scss

@@ -14,23 +14,28 @@
 }
 
 @mixin scrollbar($color: var(--#{$prefix}body-color-rgb)) {
+  #{if(&, "&", "*")} {
+    scrollbar-color: rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .16) transparent;
+  }
+
   #{if(&, "&", "*")}::-webkit-scrollbar {
-    width: .5rem;
-    height: .5rem;
+    width: 1rem;
+    height: 1rem;
     @include transition(background $transition-time);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-thumb {
-    border-radius: 5px;
-    background: rgba($color, .16);
+    border-radius: 1rem;
+    border: 5px solid transparent;
+    box-shadow: inset 0 0 0 1rem rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .16);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-track {
-    background: rgba($color, .06);
+    background: transparent;
   }
 
   #{if(&, "&", "*")}:hover::-webkit-scrollbar-thumb {
-    background: rgba($color, .32);
+    box-shadow: inset 0 0 0 1rem rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .32);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-corner {