@tabler/core 1.0.0-beta15 → 1.0.0-beta17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/core",
-  "version": "1.0.0-beta15",
+  "version": "1.0.0-beta17",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {
@@ -17,7 +17,9 @@
     "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
     "storybook": "start-storybook -p 6006",
     "changelog": "gulp changelog",
-    "icons": "ncu -u @tabler/icons && npm install && gulp svg-icons && git add . && git commit -am \"update icons to v`npm info @tabler/icons version`\" && git push"
+    "icons": "ncu -u @tabler/icons && npm install && gulp svg-icons && git add . && git commit -am \"update icons to v`npm info @tabler/icons version`\" && git push",
+    "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"
   },
   "repository": {
     "type": "git",
@@ -60,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",
@@ -117,20 +119,21 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.19.3",
-    "@babel/preset-env": "^7.19.3",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-node-resolve": "^14.1.0",
-    "@rollup/plugin-replace": "^4.0.0",
-    "@rollup/pluginutils": "^4.2.1",
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/pluginutils": "^5.0.2",
     "@rollup/stream": "^2.0.0",
-    "apexcharts": "^3.35.5",
-    "autoprefixer": "^10.4.12",
-    "autosize": "^5.0.1",
-    "browser-sync": "^2.27.10",
+    "@tabler/icons": "^2.1.2",
+    "apexcharts": "^3.36.3",
+    "autoprefixer": "^10.4.13",
+    "autosize": "^5.0.2",
+    "browser-sync": "^2.27.11",
     "bundlewatch": "^0.3.3",
-    "choices.js": "^10.1.0",
-    "chromatic": "^6.10.1",
+    "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",
@@ -147,34 +150,35 @@
     "gulp-rtlcss": "^2.0.0",
     "gulp-sass": "^5.1.0",
     "gulp-terser": "^2.1.0",
+    "imageoptim-cli": "^3.0.7",
     "imask": "^6.4.3",
     "jsvectormap": "^1.5.1",
     "list.js": "^2.3.1",
     "litepicker": "^2.0.12",
     "nouislider": "^15.6.1",
-    "plyr": "^3.7.2",
-    "postcss": "^8.4.17",
-    "release-it": "^15.5.0",
-    "rollup": "^2.79.1",
+    "plyr": "^3.7.3",
+    "postcss": "^8.4.20",
+    "release-it": "^15.6.0",
+    "request": "^2.88.2",
+    "rollup": "2.79.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleanup": "^3.2.1",
-    "sass": "^1.55.0",
-    "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",
-    "yargs": "^17.6.0"
+    "yaml": "^2.2.1",
+    "yargs": "^17.6.2"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "@tabler/icons": "^1.109.0",
-    "bootstrap": "~5.2.2"
+    "bootstrap": "5.3.0-alpha1"
   },
   "peerDependencies": {
-    "apexcharts": "^3.35.5",
-    "autosize": "^5.0.1",
-    "choices.js": "^10.1.0",
+    "apexcharts": "^3.36.3",
+    "autosize": "^5.0.2",
+    "choices.js": "^10.2.0",
     "countup.js": "^2.3.2",
     "dropzone": "^6.0.0-beta.2",
     "flatpickr": "^4.6.13",
@@ -184,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": {
@@ -213,6 +217,9 @@
     "imask": {
       "optional": true
     },
+    "jsvectormap": {
+      "optional": true
+    },
     "list.js": {
       "optional": true
     },
@@ -222,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",
@@ -251,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/{_mixins-override.scss → _bootstrap-override.scss}

@@ -72,4 +72,11 @@
   $active-color: null
 ) {
   // Override bootstrap core
+}
+
+//
+// TODO: remove when https://github.com/twbs/bootstrap/pull/37425/ will be released
+//
+@function opaque($background, $foreground) {
+  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
 }

package/src/scss/_config.scss

@@ -5,4 +5,4 @@
 @import "mixins";
 
 @import "bootstrap-config";
-@import "mixins-override";
+@import "bootstrap-override";

package/src/scss/_core.scss

@@ -17,6 +17,7 @@
 @import "ui/badges";
 @import "ui/breadcrumbs";
 @import "ui/buttons";
+@import "ui/button-group";
 @import "ui/calendars";
 @import "ui/carousel";
 @import "ui/cards";
@@ -55,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

@@ -8,6 +8,7 @@ $enable-navbar-vertical: true !default;
 $enable-dark-mode: true !default;
 $enable-negative-margins: false !default;
 $enable-rfs: false !default;
+$enable-cssgrid: true !default;
 
 // ASSETS BASE
 $assets-base: ".." !default;
@@ -53,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,
@@ -88,12 +89,12 @@ $h6-line-height: 1rem !default;
 $small-font-size: 85.714285% !default;
 
 $font-sizes: (
-  h1: $h1-font-size,
-  h2: $h2-font-size,
-  h3: $h3-font-size,
-  h4: $h4-font-size,
-  h5: $h5-font-size,
-  h6: $h6-font-size,
+  1: $h1-font-size,
+  2: $h2-font-size,
+  3: $h3-font-size,
+  4: $h4-font-size,
+  5: $h5-font-size,
+  6: $h6-font-size,
 ) !default;
 
 $line-heights: (
@@ -148,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;
@@ -183,15 +185,15 @@ $border-color-light-translucent: rgba($text-muted, $border-light-opacity) !defau
 $border-color-active: mix($text-muted, #ffffff, percentage($border-active-opacity)) !default;
 $border-color-active-translucent: rgba($text-muted, $border-active-opacity) !default;
 
-$active-bg: var(--#{$prefix}gray-100) !default;
+$active-bg: rgba(var(--#{$prefix}primary-rgb), .04) !default;
+$active-color: var(--#{$prefix}primary) !default;
+$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;
@@ -200,6 +202,8 @@ $info: $azure !default;
 $warning: $orange !default;
 $danger: $red !default;
 
+$link-color: $primary !default;
+
 $theme-colors: (
   "primary": $primary,
   "secondary": $text-muted,
@@ -286,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;
@@ -323,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;
@@ -364,9 +378,20 @@ $size-values: map-merge($spacers, (
   auto: auto
 )) !default;
 
+
+$container-variations: (
+  tight: 30rem,
+  narrow: 45rem,
+) !default;
+
+
 // Aspect ratios
 $aspect-ratios: (
   "1x1": 100%,
+  "2x1": calc(1 / 2 * 100%),
+  "1x2": calc(2 / 1 * 100%),
+  "3x1": calc(1 / 3 * 100%),
+  "1x3": calc(3 / 1 * 100%),
   "4x3": calc(3 / 4 * 100%),
   "3x4": calc(4 / 3 * 100%),
   "16x9": calc(9 / 16 * 100%),
@@ -377,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;
@@ -414,13 +440,16 @@ $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;
 
 // Breadcrumb
 $breadcrumb-divider-color: var(--#{$prefix}muted) !default;
+$breadcrumb-link-color: var(--#{$prefix}link-color) !default;
 $breadcrumb-active-color: inherit !default;
+$breadcrumb-active-font-weight: var(--#{$prefix}font-weight-bold) !default;
+$breadcrumb-disabled-color: var(--#{$prefix}disabled-color) !default;
 
 $breadcrumb-variants: (
   dots: "·",
@@ -443,11 +472,11 @@ $input-btn-font-family: var(--#{$prefix}font-sans-serif) !default;
 $input-btn-padding-y: .5rem - .0625rem !default;
 
 $input-btn-font-size-sm: $h5-font-size !default;
-$input-btn-padding-x-sm: .5rem !default;
+$input-btn-padding-x-sm: .25rem !default;
 $input-btn-padding-y-sm: .125rem !default;
 
 $input-btn-font-size-lg: $h2-font-size !default;
-$input-btn-padding-x-lg: 1.5rem !default;
+$input-btn-padding-x-lg: .75rem !default;
 $input-btn-padding-y-lg: .5rem !default;
 
 $input-btn-focus-width: .25rem !default;
@@ -482,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;
@@ -496,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;
@@ -521,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;
@@ -566,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;
@@ -603,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
@@ -677,7 +707,9 @@ $status-height: 1.5rem !default;
 
 // Steps
 $steps-border-width: 2px !default;
-$steps-color-inactive: #f3f5f5 !default;
+$steps-color: var(--#{$prefix}primary) !default;
+$steps-inactive-color: var(--#{$prefix}border-color) !default;
+$steps-margin: 2rem 0 !default;
 
 // Spinner
 $spinner-width: 1.5rem !default;
@@ -697,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;
@@ -756,7 +788,7 @@ $form-check-input-checked-bg-color: var(--#{$prefix}primary) !default;
 $form-check-input-checked-color: var(--#{$prefix}bg-forms) !default;
 $form-check-input-checked-bg-repeat: repeat !default;
 $form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$white}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
-$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$white}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
+$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$body-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
 $form-check-input-checked-border-color: $input-border-color-translucent !default;
 
 $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle r='3' fill='#{$white}' cx='8' cy='8' /></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 {