@tabler/core 1.0.0-beta5 → 1.0.0-beta9

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@tabler/core",
-  "version": "1.0.0-beta5",
+  "version": "1.0.0-beta9",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "scripts": {
     "start": "gulp start",
+    "start-plugins": "gulp start --with-plugins",
     "build": "gulp build",
     "preview": "gulp build --preview",
     "svg-optimize": "svgo -f svg/brand --pretty",
@@ -14,7 +15,7 @@
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
     "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "changelog": "gulp changelog"
   },
   "repository": {
     "type": "git",
@@ -55,23 +56,20 @@
   "main": "dist/js/tabler.js",
   "homepage": "https://tabler.io",
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/preset-env": "^7.15.8",
+    "@babel/core": "^7.17.5",
+    "@babel/preset-env": "^7.16.11",
     "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@rollup/plugin-replace": "^3.0.0",
-    "@rollup/pluginutils": "^4.1.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-replace": "^3.1.0",
+    "@rollup/pluginutils": "^4.1.2",
     "@rollup/stream": "^2.0.0",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/html": "^6.3.12",
-    "apexcharts": "^3.29.0",
-    "autoprefixer": "^10.3.7",
+    "apexcharts": "^3.33.1",
+    "autoprefixer": "^10.4.2",
     "autosize": "^5.0.1",
-    "browser-sync": "^2.27.5",
-    "bundlewatch": "^0.3.2",
-    "choices.js": "^9.0.1",
-    "chromatic": "^6.0.5",
+    "browser-sync": "^2.27.7",
+    "bundlewatch": "^0.3.3",
+    "choices.js": "^10.1.0",
+    "chromatic": "^6.4.3",
     "countup.js": "^2.0.8",
     "critical": "^4.0.1",
     "cross-spawn": "^7.0.3",
@@ -83,41 +81,42 @@
     "gulp-header": "^2.0.9",
     "gulp-minify": "^3.1.0",
     "gulp-postcss": "^9.0.1",
-    "gulp-purgecss": "^4.0.3",
+    "gulp-purgecss": "^4.1.3",
     "gulp-rename": "^2.0.0",
     "gulp-rtlcss": "^1.4.2",
-    "gulp-sass": "^5.0.0",
-    "imask": "^6.2.2",
-    "litepicker": "^2.0.11",
-    "node-sass": "^6.0.1",
-    "nouislider": "^15.5.0",
-    "postcss": "^8.3.11",
-    "release-it": "^14.11.6",
-    "rollup": "^2.58.0",
+    "gulp-sass": "^5.1.0",
+    "imask": "^6.4.2",
+    "jsvectormap": "^1.4.4",
+    "litepicker": "^2.0.12",
+    "nouislider": "^15.5.1",
+    "postcss": "^8.4.6",
+    "release-it": "^14.12.4",
+    "rollup": "^2.67.3",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleanup": "^3.2.1",
-    "storybook-addon-outline": "^1.4.1",
-    "tom-select": "^1.7.8",
+    "sass": "^1.49.8",
+    "tom-select": "^2.0.0",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "yaml": "^1.10.2",
-    "yargs": "^17.2.1"
+    "yargs": "^17.3.1"
   },
   "dependencies": {
-    "@popperjs/core": "^2.10.2",
-    "@tabler/icons": "^1.44.0",
+    "@popperjs/core": "^2.11.2",
+    "@tabler/icons": "^1.53.0",
     "bootstrap": "5.1.3"
   },
   "peerDependencies": {
-    "apexcharts": "^3.29.0",
+    "apexcharts": "^3.33.1",
     "autosize": "^5.0.1",
-    "choices.js": "^9.0.1",
+    "choices.js": "^10.1.0",
     "countup.js": "^2.0.8",
     "flatpickr": "^4.6.9",
-    "imask": "^6.2.2",
-    "litepicker": "^2.0.11",
-    "nouislider": "^15.5.0",
-    "tom-select": "^1.7.8"
+    "imask": "^6.4.2",
+    "jsvectormap": "^1.4.4",
+    "litepicker": "^2.0.12",
+    "nouislider": "^15.5.1",
+    "tom-select": "^2.0.0"
   },
   "peerDependenciesMeta": {
     "apexcharts": {
@@ -146,6 +145,9 @@
     },
     "tom-select": {
       "optional": true
+    },
+    "jsvectormap": {
+      "optional": true
     }
   },
   "resolutions": {

package/src/js/demo.js

@@ -3,13 +3,14 @@ const items = {
 	'theme': { localStorage: 'tablerTheme', default: 'light' },
 	'menu-position': { localStorage: 'tablerMenuPosition', default: 'top' },
 	'menu-behavior': { localStorage: 'tablerMenuBehavior', default: 'sticky' },
-	'container-layout': { localStorage: 'tablerContainerLayout', default: 'boxed' },
+	'container-layout': { localStorage: 'tablerContainerLayout', default: 'boxed' }
 }
 
 // Theme config
 const config = {}
 for (const [key, params] of Object.entries(items)) {
-	config[key] = localStorage.getItem(params.localStorage) ? localStorage.getItem(params.localStorage) : params.default
+   const lsParams = localStorage.getItem(params.localStorage)
+   config[key] = lsParams ? lsParams : params.default
 }
 
 // Parse url params
@@ -45,9 +46,7 @@ const toggleFormControls = (form) => {
 
 // Update body classes
 const updateBodyClasses = () => {
-	document.body.classList.remove('theme-dark');
-	document.body.classList.remove('theme-light');
-
+	document.body.classList.remove('theme-dark', 'theme-light');
 	document.body.classList.add(`theme-${config.theme}`);
 
 	// for (const [key, params] of Object.entries(items)) {

package/src/js/src/tab.js

@@ -12,3 +12,5 @@ export const EnableActivationTabsFromLocationHash = () => {
 	 });
   }
 }
+
+EnableActivationTabsFromLocationHash()

package/src/js/tabler.js

@@ -6,10 +6,8 @@ import './src/dropdown';
 import './src/tooltip';
 import './src/popover';
 import './src/switch-icon';
-import { EnableActivationTabsFromLocationHash } from './src/tab';
+import './src/tab';
 import './src/toast';
 import * as bootstrap from 'bootstrap';
 
 window.bootstrap = bootstrap;
-
-EnableActivationTabsFromLocationHash();

package/src/scss/_core.scss

@@ -43,8 +43,9 @@
 @import "ui/progress";
 @import "ui/ribbons";
 @import "ui/markdown";
-@import "ui/skeleton";
+@import "ui/placeholder";
 @import "ui/steps";
+@import "ui/status";
 @import "ui/switch-icon";
 @import "ui/tables";
 @import "ui/toasts";

package/src/scss/_utilities.scss

@@ -49,27 +49,6 @@ $utilities: (
       grabbing: grabbing,
     )
   ),
-  "font-size": (
-    property: font-size,
-    class: text,
-    values: (
-      h1: $h1-font-size,
-      h2: $h2-font-size,
-      h3: $h3-font-size,
-      h4: $h4-font-size,
-      h5: $h5-font-size,
-      h6: $h6-font-size,
-    )
-  ),
-  "font-weight": (
-    property: font-weight,
-    values: (
-      light: $font-weight-light,
-      normal: $font-weight-normal,
-      medium: $font-weight-medium,
-      bold: $font-weight-bold,
-    )
-  ),
   "border": (
     property: border,
     values: $border-values

package/src/scss/_variables.scss

@@ -7,20 +7,21 @@ $enable-gradients: false !default;
 $enable-navbar-vertical: true !default;
 $enable-dark-mode: true !default;
 $enable-negative-margins: false !default;
+$enable-rfs: false !default;
 
 // ASSETS BASE
 $assets-base: ".." !default;
 
 // FONTS
-$google-font: 'Inter' !default;
-$google-font-monospaced: false !default;
+$font-google: null !default;
+$font-google-monospaced: null !default;
+$font-local: null !default;
+$font-icons: () !default;
 
-$font-family-sans-serif: $google-font, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
-$font-family-monospace: $google-font-monospaced, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+$font-family-sans-serif: unquote("#{if($font-local, "#{$font-local}, ", ' ')}#{if($font-google, "#{$font-google}, ", ' ')}")-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;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
 
-// EXTERNAL FONTS
-$icon-fonts: () !default;
 
 //Icons
 $icon-stroke-width: 1.5 !default;
@@ -57,6 +58,8 @@ $h5-line-height: divide(1rem, $h5-font-size) !default;
 $h6-font-size: divide(10rem, 16) !default;
 $h6-line-height: divide(1rem, $h6-font-size) !default;
 
+$small-font-size: percentage(divide($h5-font-size, $font-size-base)) !default;
+
 $display-font-sizes: (
   1: 5rem,
   2: 4.5rem,
@@ -82,7 +85,7 @@ $border-light-opacity: .08 !default;
 $border-dark-opacity: .24 !default;
 $border-active-opacity: .48 !default;
 
-$gray-50: #f8fafc !default;
+$gray-50: #fafbfc !default;
 $gray-100: #f1f5f9 !default;
 $gray-200: #e2e8f0 !default;
 $gray-300: #cbd5e1 !default;
@@ -96,7 +99,7 @@ $gray-900: #0f172a !default;
 $light: $gray-50 !default;
 $dark: $gray-800 !default;
 
-$body-bg: $light !default;
+$body-bg: #f5f7fb !default;
 $body-color: $dark !default;
 
 $color-contrast-dark: $dark !default;
@@ -133,8 +136,8 @@ $border-color-dark-transparent: rgba($text-muted, $border-dark-opacity) !default
 $border-color-active: mix($text-muted, #ffffff, percentage($border-active-opacity)) !default;
 $border-color-active-transparent: rgba($text-muted, $border-active-opacity) !default;
 
-$active-bg: rgba($blue, .06) !default;
-$hover-bg: rgba($text-muted, .06) !default;
+$active-bg: rgba($blue, .04) !default;
+$hover-bg: rgba($text-muted, .04) !default;
 
 $primary: $blue !default;
 $secondary: $text-muted !default;
@@ -205,15 +208,14 @@ $border-radius-lg: 8px !default;
 $border-radius-pill: 100rem !default;
 
 // Code
-$small-font-size: percentage(divide($h5-font-size, $font-size-base)) !default;
-$code-color: $primary !default;
+$code-color: $text-muted-dark !default;
 $code-font-size: $small-font-size !default;
 $code-line-height: 1.25rem !default;
 
 // Avatars
 $avatar-size: 2.5rem !default;
 $avatar-sizes: (
-  "xs": 1.25rem,
+  "xs": 1.5rem,
   "sm": 2rem,
   "md": 3.75rem,
   "lg": 5rem,
@@ -326,6 +328,8 @@ $breadcrumb-variants: (
 $badge-font-size: $code-font-size !default;
 $badge-line-height: $code-line-height !default;
 $badge-font-weight: $font-weight-medium !default;
+$badge-padding-y: .25em !default;
+$badge-padding-x: .5em !default;
 $badge-empty-size: .5rem !default;
 
 //buttons
@@ -361,12 +365,13 @@ $card-border-width: $border-width !default;
 $card-border-color: $border-color-transparent !default;
 $card-border-radius: $border-radius !default;
 
-$card-cap-bg: $white !default;
-$card-cap-color: $text-muted !default;
-$card-cap-padding-x: 1rem !default;
-$card-cap-padding-y: .75rem !default;
+$card-spacer-x: 1.25rem !default;
+$card-spacer-y: 1rem !default;
 
-$card-spacer-x: 1rem !default;
+$card-cap-bg: $gray-50 !default;
+$card-cap-color: $text-muted !default;
+$card-cap-padding-x: $card-spacer-x !default;
+$card-cap-padding-y: $card-spacer-y !default;
 
 $card-status-size: $border-width-wide !default;
 $card-group-margin: 1.5rem !default;
@@ -374,6 +379,8 @@ $card-group-margin: 1.5rem !default;
 $card-shadow: $shadow !default;
 $card-shadow-hover: rgba($dark, .16) 0 2px 16px 0 !default;
 
+$card-stamp-opacity: .2 !default;
+
 $cards-grid-gap: 1rem !default;
 $cards-grid-breakpoint: lg !default;
 
@@ -516,6 +523,8 @@ $pagination-bg: transparent !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: rgba($text-muted, .5) !default;
 
+//statuses
+$status-dot-size: .5rem !default;
 
 //steps
 $steps-border-width: 2px !default;
@@ -552,12 +561,16 @@ $progress-height: .5rem !default;
 $ribbon-margin: .25rem !default;
 
 
+$list-group-bg: inherit !default;
 $list-group-border-color: $border-color !default;
 $list-group-action-color: inherit !default;
-$list-group-bg: inherit !default;
+$list-group-hover-bg: $hover-bg !default;
+$list-group-active-bg: $active-bg !default;
+$list-group-active-border-color: $list-group-border-color !default;
+$list-group-active-color: inherit !default;
 
 $input-bg: $white !default;
-$input-disabled-bg: $gray-100 !default;
+$input-disabled-bg: $gray-50 !default;
 $input-border-color: $border-color-dark !default;
 $input-border-color-transparent: $border-color-dark-transparent !default;
 $input-placeholder-color: $text-muted-light !default;
@@ -587,7 +600,7 @@ $form-check-input-checked-border-color: $input-border-color-transparent !default
 
 $form-check-label-disabled-opacity: $text-muted-opacity;
 
-$form-select-indicator-color: $border-color-dark !default;
+$form-select-indicator-color: $text-muted-light !default;
 
 $form-switch-width: 2rem !default;
 $form-switch-height: 1.125rem !default;
@@ -616,4 +629,8 @@ $flag-sizes: $avatar-sizes !default;
 $payment-sizes: $avatar-sizes !default;
 
 // Offcanvas
-$offcanvas-border-color: $border-color-transparent !default;
+$offcanvas-border-color: $border-color-transparent !default;
+
+// Placeholder
+$placeholder-opacity-min: .1 !default;
+$placeholder-opacity-max: .2 !default;

package/src/scss/demo/_highlight.scss

@@ -11,7 +11,6 @@ pre.highlight,
   max-height: 30rem;
   margin: 1.5rem 0;
   overflow: auto;
-  font-size: $code-font-size;
   border-radius: $border-radius;
   @include scrollbar;
 }

package/src/scss/demo.scss

@@ -60,7 +60,7 @@ body.no-transitions * {
 }
 
 
-$demo-icon-size: 7rem;
+$demo-icon-size: 4rem;
 .demo-icons-list {
   display: flex;
   flex-wrap: wrap;
@@ -82,7 +82,7 @@ $demo-icon-size: 7rem;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: $demo-icon-size;
+  aspect-ratio: 1;
   text-align: center;
   padding: .5rem;
   border-right: 1px solid var(--#{$variable-prefix}border-color);

package/src/scss/fonts/_webfonts.scss

@@ -1,15 +1,65 @@
-@if $google-font {
-  $google-font-url: "https://fonts.googleapis.com/css2?family=" + str-replace($google-font, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
+@if $font-google {
+  $google-font-url: "https://fonts.googleapis.com/css2?family=" + str-replace($font-google, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
   @import url($google-font-url);
+} @else if $font-local {
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-display: swap;
+    font-weight: 300;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-300.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-300.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-display: swap;
+    font-weight: 400;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-regular.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-regular.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-display: swap;
+    font-weight: 500;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-500.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-500.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-display: swap;
+    font-weight: 600;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-600.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-600.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: $font-local;
+    font-style: normal;
+    font-display: swap;
+    font-weight: 700;
+    src: local(''),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-700.woff2') format('woff2'),
+    url('#{$assets-base}/fonts/inter-v7-latin-ext_latin-700.woff') format('woff');
+  }
 }
 
-@if $google-font-monospaced {
-  $google-font-monospaced-url: "https://fonts.googleapis.com/css2?family=" + str-replace($google-font-monospaced, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
+@if $font-google-monospaced {
+  $google-font-monospaced-url: "https://fonts.googleapis.com/css2?family=" + str-replace($font-google-monospaced, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
   @import url($google-font-monospaced-url);
 }
 
-@if $icon-fonts {
-  @each $icon-font in $icon-fonts {
+@if $font-icons {
+  @each $icon-font in $font-icons {
     @import url($icon-font);
   }
 }

package/src/scss/layout/_core.scss

@@ -35,9 +35,41 @@ body {
 //
 // Fluid container
 //
-[data-container-layout="fluid"] {
+.layout-fluid {
+  .container,
   [class^="container-"],
   [class*=" container-"] {
     max-width: 100%;
   }
+}
+
+//
+// Boxed container
+//
+.layout-boxed {
+  --#{$variable-prefix}theme-boxed-border-radius: 0;
+  --#{$variable-prefix}theme-boxed-width: #{map-get($container-max-widths, xxl)};
+
+  @include media-breakpoint-up(md) {
+    background: $dark linear-gradient(to right, rgba(#fff, .1), transparent) fixed;
+    padding: 1rem;
+    --#{$variable-prefix}theme-boxed-border-radius: #{$border-radius};
+  }
+
+  .page {
+    margin: 0 auto;
+    max-width: var(--#{$variable-prefix}theme-boxed-width);
+    border-radius: var(--#{$variable-prefix}theme-boxed-border-radius);
+    color: $body-color;
+
+    @include media-breakpoint-up(md) {
+      border: 1px solid var(--tblr-border-color);
+      background: var(--tblr-body-bg);
+    }
+
+    > .navbar:first-child {
+      border-top-left-radius: var(--#{$variable-prefix}theme-boxed-border-radius);
+      border-top-right-radius: var(--#{$variable-prefix}theme-boxed-border-radius);
+    }
+  }
 }

package/src/scss/layout/_dark.scss

@@ -24,10 +24,16 @@ body:not(.theme-dark) .hide-theme-light {
     --#{$variable-prefix}border-color: #{$dark-mode-border-color};
     --#{$variable-prefix}border-color-light: #{$dark-mode-border-color-light};
 
+    --#{$variable-prefix}btn-color: #{$dark};
+
     color: $dark-mode-text;
     background-color: $dark-mode-darken;
   }
 
+  .page {
+    color: $dark-mode-text;
+  }
+
   .hide-theme-dark {
     display: none !important;
   }
@@ -152,17 +158,36 @@ body:not(.theme-dark) .hide-theme-light {
     background: transparent;
   }
 
+  .list-group-header {
+    background: $dark-mode-darken;
+  }
+
   .list-group-item {
-    color: $dark-mode-text;
     border-color: $border-color-transparent;
   }
 
-  .list-group-header {
-    background: $dark-mode-darken;
+  .list-group-item:not(.disabled):not(:disabled) {
+    color: $dark-mode-text;
+  }
+
+  .list-group-item {
+    &.disabled,
+    &:disabled {
+      color: $gray-600;
+    }
   }
 
   .apexcharts-radialbar-area {
     stroke: $dark-mode-border-color;
   }
-}
 
+  .form-control.is-invalid,
+  .was-validated .form-control:invalid {
+    border-color: var(--#{$variable-prefix}danger);
+  }
+
+  .form-control.is-valid,
+  .was-validated .form-control:valid {
+    border-color: var(--#{$variable-prefix}success);
+  }
+}

package/src/scss/layout/_navbar.scss

@@ -112,6 +112,7 @@
         display: flex;
         width: auto;
         padding-left: add($container-padding-x, 1.75rem);
+        color: inherit;
       }
 
       .dropdown-menu .dropdown-item {
@@ -129,7 +130,7 @@
 
     .nav-item.active:after {
       border-bottom-width: 0;
-      border-left-width: 2px;
+      border-left-width: 3px;
       right: auto;
       top: 0;
       bottom: 0;
@@ -392,6 +393,7 @@ Navbar vertical
             align-items: flex-start;
             @include transition(transform $transition-time);
             overflow-x: auto;
+            padding: 0;
 
             &.navbar-right {
               left: auto;

package/src/scss/layout/_page.scss

@@ -97,7 +97,7 @@
   margin: 0;
   font-size: $h2-font-size;
   line-height: $h2-line-height;
-  font-weight: $font-weight-medium;
+  font-weight: $font-weight-bold;
   color: inherit;
   display: flex;
   align-items: center;

package/src/scss/mixins/_functions.scss

@@ -1,8 +1,8 @@
 @function theme-color-lighter($color, $transparent: false) {
   @if ($transparent) {
-    @return rgba($color, .1);
+    @return rgba($color, .05);
   } @else {
-    @return tint-color($color, 9%);
+    @return tint-color($color, 5%);
   }
 }
 
@@ -10,6 +10,20 @@
   @return shade-color($color, 10%);
 }
 
+@function theme-colors($social: true) {
+  $colors: $theme-colors;
+
+  @if $enable-extra-colors {
+    $colors: map-merge($colors, $extra-colors);
+  }
+
+  @if ($enable-social-colors and $social) {
+    $colors: map-merge($colors, $social-colors);
+  }
+
+  @return $colors;
+}
+
 @function str-replace($string, $search, $replace: "") {
   $index: str-index($string, $search);