@tabler/core 1.0.0-beta14 → 1.0.0-beta16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/core",
-  "version": "1.0.0-beta14",
+  "version": "1.0.0-beta16",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {
@@ -13,11 +13,13 @@
     "release": "release-it",
     "svg-icons": "gulp svg-icons",
     "percy": "gulp build && npx percy snapshot demo",
-    "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
+    "bundlewatch": "bundlewatch",
     "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": "61 kB"
+        "maxSize": "65 kB"
       },
       {
         "path": "./dist/css/tabler.min.css",
-        "maxSize": "55 kB"
+        "maxSize": "60 kB"
       },
       {
         "path": "./dist/css/tabler.rtl.css",
-        "maxSize": "61 kB"
+        "maxSize": "65 kB"
       },
       {
         "path": "./dist/css/tabler.rtl.min.css",
-        "maxSize": "55 kB"
+        "maxSize": "60 kB"
       },
       {
         "path": "./dist/css/tabler-flags.css",
@@ -90,31 +92,47 @@
         "path": "./dist/css/tabler-payments.min.css",
         "maxSize": "2 kB"
       },
+      {
+        "path": "./dist/css/tabler-vendors.css",
+        "maxSize": "7 kB"
+      },
+      {
+        "path": "./dist/css/tabler-vendors.min.css",
+        "maxSize": "6 kB"
+      },
       {
         "path": "./dist/js/tabler.js",
-        "maxSize": "100 kB"
+        "maxSize": "60 kB"
       },
       {
         "path": "./dist/js/tabler.min.js",
-        "maxSize": "50 kB"
+        "maxSize": "45 kB"
+      },
+      {
+        "path": "./dist/js/tabler.esm.js",
+        "maxSize": "60 kB"
+      },
+      {
+        "path": "./dist/js/tabler.esm.min.js",
+        "maxSize": "45 kB"
       }
     ]
   },
   "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.2",
+    "@babel/preset-env": "^7.20.2",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.1",
+    "@rollup/pluginutils": "^5.0.2",
     "@rollup/stream": "^2.0.0",
-    "apexcharts": "^3.35.5",
-    "autoprefixer": "^10.4.12",
+    "apexcharts": "^3.36.3",
+    "autoprefixer": "^10.4.13",
     "autosize": "^5.0.1",
     "browser-sync": "^2.27.10",
     "bundlewatch": "^0.3.3",
     "choices.js": "^10.1.0",
-    "chromatic": "^6.10.1",
+    "chromatic": "^6.11.4",
     "countup.js": "^2.3.2",
     "cross-spawn": "^7.0.3",
     "dropzone": "^6.0.0-beta.2",
@@ -131,32 +149,34 @@
     "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",
+    "postcss": "^8.4.18",
     "release-it": "^15.5.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",
+    "sass": "^1.56.1",
     "tinymce": "^6.2.0",
-    "tom-select": "^2.2.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"
+    "yargs": "^17.6.2"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "@tabler/icons": "^1.105.0",
+    "@tabler/icons": "^1.111.0",
     "bootstrap": "~5.2.2"
   },
   "peerDependencies": {
-    "apexcharts": "^3.35.5",
+    "apexcharts": "^3.36.3",
     "autosize": "^5.0.1",
     "choices.js": "^10.1.0",
     "countup.js": "^2.3.2",
@@ -170,7 +190,7 @@
     "nouislider": "^15.6.1",
     "plyr": "^3.7.2",
     "tinymce": "^6.2.0",
-    "tom-select": "^2.2.1"
+    "tom-select": "^2.2.2"
   },
   "peerDependenciesMeta": {
     "apexcharts": {

package/src/scss/{_mixins-override.scss → _bootstrap-override.scss}

@@ -11,8 +11,8 @@
     vertical-align: $caret-vertical-align;
     width: $caret-width;
     height: $caret-width;
-    border-bottom: 1px solid;
-    border-left: 1px solid;
+    border-bottom: 1px var(--#{$prefix}border-style);
+    border-left: 1px var(--#{$prefix}border-style);
     margin-right: .1em;
 
     @if $direction != 'left' {
@@ -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

@@ -4,6 +4,7 @@
 @import "fonts/webfonts";
 
 @import "layout/root";
+@import "layout/animations";
 @import "layout/core";
 @import "layout/navbar";
 @import "layout/page";
@@ -16,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";

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;
@@ -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: (
@@ -183,7 +184,9 @@ $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;
 
@@ -228,7 +231,7 @@ $extra-colors: (
 ) !default;
 
 $social-colors: (
-  "facebook": #3b5998,
+  "facebook": #1877F2,
   "twitter": #1da1f2,
   "linkedin": #0a66c2,
   "google": #dc4e41,
@@ -292,9 +295,11 @@ $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-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $kbd-color: var(--#{$prefix}muted) !default;
-$kbd-bg: transparent !default;
+$kbd-bg: var(--#{$prefix}code-bg) !default;
 $kbd-border-radius: var(--#{$prefix}border-radius) !default;
 
 // Avatars
@@ -302,7 +307,7 @@ $avatar-size: 2.5rem !default;
 $avatar-sizes: (
   "xs": 1.5rem,
   "sm": 2rem,
-  "md": 3.75rem,
+  "md": 4rem,
   "lg": 5rem,
   "xl": 7rem,
   "2xl": 11rem,
@@ -365,6 +370,10 @@ $size-values: map-merge($spacers, (
 // 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%),
@@ -418,7 +427,10 @@ $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: "·",
@@ -441,11 +453,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;
@@ -675,7 +687,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;
@@ -754,7 +768,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/layout/_animations.scss

@@ -0,0 +1,62 @@
+@keyframes pulse {
+  from {
+    opacity: 1;
+    transform: scale3d(.8, .8, .8)
+  }
+
+  50% {
+    transform: scale3d(1, 1, 1);
+    opacity: 1
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(.8, .8, .8)
+  }
+}
+
+@keyframes tada {
+  0% {
+    transform: scale3d(1, 1, 1)
+  }
+
+  10%, 5% {
+    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg)
+  }
+
+  15%, 25%, 35%, 45% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg)
+  }
+
+  20%, 30%, 40% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg)
+  }
+
+  50% {
+    transform: scale3d(1, 1, 1)
+  }
+}
+
+@keyframes rotate-360 {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes blink {
+  from {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

package/src/scss/layout/_page.scss

@@ -118,7 +118,7 @@
 
 .page-subtitle {
   margin-top: .25rem;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
 }
 
 //

package/src/scss/layout/_root.scss

@@ -39,7 +39,7 @@
   }
 
   @each $name, $value in $font-sizes {
-    --#{$prefix}font-size-#{$name}: #{$value};
+    --#{$prefix}font-size-h#{$name}: #{$value};
   }
 
   @each $name, $value in $line-heights {

package/src/scss/mixins/_functions.scss

@@ -44,4 +44,5 @@
     @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
   }
   @return if($n > 1, nth($breakpoint-names, $n - 1), null);
-}
+}
+

package/src/scss/mixins/_mixins.scss

@@ -76,29 +76,11 @@
 }
 
 //
-// Button ghost
+// Elements list
 //
-@mixin button-ghost-variant(
-  $color,
-  $color-hover: color-contrast($color),
-  $active-background: $color,
-  $active-border: $color,
-  $active-color: color-contrast($active-background)
-) {
-  --#{$prefix}btn-color: #{$color};
-  --#{$prefix}btn-bg: transparent;
-  --#{$prefix}btn-border-color: transparent;
-  --#{$prefix}btn-hover-color: #{$color-hover};
-  --#{$prefix}btn-hover-bg: #{$active-background};
-  --#{$prefix}btn-hover-border-color: #{$active-border};
-  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
-  --#{$prefix}btn-active-color: #{$active-color};
-  --#{$prefix}btn-active-bg: #{$active-background};
-  --#{$prefix}btn-active-border-color: transparent;
-  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
-  --#{$prefix}btn-disabled-color: #{$color};
-  --#{$prefix}btn-disabled-bg: transparent;
-  --#{$prefix}btn-disabled-border-color: transparent;
-  --#{$prefix}gradient: none;
-  --#{$prefix}btn-box-shadow: none;
+@mixin elements-list($gap: .5rem) {
+  --#{$prefix}list-gap: #{$gap};
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--#{$prefix}list-gap);
 }

package/src/scss/ui/_alerts.scss

@@ -1,5 +1,5 @@
 .alert {
-  --#{$prefix}alert-color: #{$text-muted};
+  --#{$prefix}alert-color: #{var(--#{$prefix}muted)};
   background: $white;
   border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
   border-left: .25rem var(--#{$prefix}border-style) var(--#{$prefix}alert-color);
@@ -32,9 +32,9 @@
   }
 }
 
-@each $state, $value in $theme-colors {
-  .alert-#{$state} {
-    --#{$prefix}alert-color: #{$value};
+@each $name, $color in $theme-colors {
+  .alert-#{$name} {
+    --#{$prefix}alert-color: var(--#{$prefix}#{$name});
   }
 }
 

package/src/scss/ui/_avatars.scss

@@ -9,7 +9,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
   text-align: center;
   text-transform: uppercase;
   vertical-align: bottom;
@@ -52,18 +52,7 @@
 
 
 .avatar-list {
-  display: inline-flex;
-  padding: 0;
-  margin: 0 0 -.5rem;
-  flex-wrap: wrap;
-
-  .avatar {
-    margin-bottom: .5rem;
-
-    &:not(:last-child) {
-      margin-right: .5rem;
-    }
-  }
+  @include elements-list;
 
   a.avatar {
     &:hover {

package/src/scss/ui/_badges.scss

@@ -40,18 +40,39 @@
   }
 }
 
-.badge-sm {
-  font-size: $h6-font-size;
-  line-height: $h6-line-height;
-  padding: 0 .25rem;
-}
-
-// bordered
+//
+// Outline badge
+//
 .badge-outline {
   background-color: transparent;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) currentColor;
 }
 
+//
+// Pill badge
+//
 .badge-pill {
   border-radius: $border-radius-pill;
+}
+
+//
+// Badges list
+//
+.badges-list {
+  @include elements-list;
+}
+
+//
+// Notification badge
+//
+.badge-notification {
+  position: absolute !important;
+  top: 0 !important;
+  right: 0 !important;
+  transform: translate(50%, -50%);
+  z-index: 1;
+}
+
+.badge-blink {
+  animation: blink 2s infinite;
 }

package/src/scss/ui/_breadcrumbs.scss

@@ -1,10 +1,13 @@
 .breadcrumb {
+  --#{$prefix}breadcrumb-item-active-font-weight: #{$breadcrumb-active-font-weight};
+  --#{$prefix}breadcrumb-item-disabled-color: #{$breadcrumb-disabled-color};
+  --#{$prefix}breadcrumb-link-color: #{$breadcrumb-link-color};
   padding: 0;
   margin: 0;
   background: transparent;
 
   a {
-    color: $text-muted;
+    color: var(--#{$prefix}breadcrumb-link-color);
 
     &:hover {
       text-decoration: underline;
@@ -12,8 +15,27 @@
   }
 }
 
+.breadcrumb-muted {
+  --#{$prefix}breadcrumb-link-color: var(--#{$prefix}muted);
+}
+
 .breadcrumb-item {
   &.active {
+    font-weight: var(--#{$prefix}breadcrumb-item-active-font-weight);
+
+    a {
+      color: inherit;
+      pointer-events: none;
+    }
+  }
+
+  &.disabled {
+    color: var(--#{$prefix}breadcrumb-item-disabled-color);
+
+    &:before {
+      color: inherit;
+    }
+
     a {
       color: inherit;
       pointer-events: none;

package/src/scss/ui/_button-group.scss

@@ -0,0 +1,14 @@
+.btn-group,
+.btn-group-vertical {
+  > .btn-check:checked + .btn,
+  > .btn:active,
+  > .btn.active {
+    z-index: 5;
+  }
+
+  > .btn-check:focus + .btn,
+  > .btn:hover,
+  > .btn:focus {
+    z-index: 1;
+  }
+}