@tabler/core 1.0.0-beta22 → 1.0.0-beta24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/core",
-  "version": "1.0.0-beta22",
+  "version": "1.0.0-beta24",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {
@@ -97,20 +97,20 @@
         "maxSize": "2 kB"
       },
       {
-        "path": "./dist/css/tabler-social.css",
+        "path": "./dist/css/tabler-socials.css",
         "maxSize": "2 kB"
       },
       {
-        "path": "./dist/css/tabler-social.min.css",
+        "path": "./dist/css/tabler-socials.min.css",
         "maxSize": "2 kB"
       },
       {
         "path": "./dist/css/tabler-vendors.css",
-        "maxSize": "7 kB"
+        "maxSize": "7.5 kB"
       },
       {
         "path": "./dist/css/tabler-vendors.min.css",
-        "maxSize": "6 kB"
+        "maxSize": "6.5 kB"
       },
       {
         "path": "./dist/js/tabler.js",
@@ -166,6 +166,7 @@
     "gulp-terser": "^2.1.0",
     "imageoptim-cli": "^3.1.9",
     "imask": "^7.6.1",
+    "js-beautify": "^1.15.1",
     "jsvectormap": "^1.6.0",
     "list.js": "^2.3.1",
     "litepicker": "^2.0.12",
@@ -182,6 +183,7 @@
     "star-rating.js": "^4.3.1",
     "tinymce": "^7.5.1",
     "tom-select": "^2.4.1",
+    "typed.js": "^2.1.0",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "yaml": "^2.6.1",
@@ -210,7 +212,8 @@
     "plyr": "^3.7.8",
     "star-rating.js": "^4.3.0",
     "tinymce": "^6.4.2 || ^7.0.0",
-    "tom-select": "^2.2.2"
+    "tom-select": "^2.2.2",
+    "typed.js": "^2.1.0"
   },
   "peerDependenciesMeta": {
     "@melloware/coloris": {

package/src/js/src/countup.js

@@ -0,0 +1,17 @@
+const elements = document.querySelectorAll('[data-countup]');
+
+if (elements.length) {
+	elements.forEach(function (element) {
+		let options = {};
+		try {
+			options = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {};
+		} catch (error) {}
+
+		const value = parseInt(element.innerHTML, 10);
+
+		const countUp = new window.countUp.CountUp(element, value, options);
+		if (!countUp.error) {
+			countUp.start();
+		}
+	});
+}

package/src/js/tabler.esm.js

@@ -1,6 +1,7 @@
 //Vendor
 
 import "./src/autosize"
+import "./src/countup"
 import "./src/input-mask"
 import "./src/dropdown"
 import "./src/tooltip"

package/src/js/tabler.js

@@ -1,6 +1,7 @@
 //Vendor
 
 import "./src/autosize"
+import "./src/countup"
 import "./src/input-mask"
 import "./src/dropdown"
 import "./src/tooltip"

package/src/scss/_utilities-marketing.scss

@@ -0,0 +1,209 @@
+$negative-spacers-extra: if(
+  $enable-negative-margins,
+  negativify-map(map-merge($spacers, $spacers-extra)),
+  null
+);
+
+$utilities: (
+  // Margin utilities
+  "margin":
+    (
+      responsive: true,
+      property: margin,
+      class: m,
+      values: $spacers-extra,
+    ),
+  "margin-x": (
+    responsive: true,
+    property: margin-right margin-left,
+    class: mx,
+    values: $spacers-extra,
+  ),
+  "margin-y": (
+    responsive: true,
+    property: margin-top margin-bottom,
+    class: my,
+    values: $spacers-extra,
+  ),
+  "margin-top": (
+    responsive: true,
+    property: margin-top,
+    class: mt,
+    values: $spacers-extra,
+  ),
+  "margin-end": (
+    responsive: true,
+    property: margin-right,
+    class: me,
+    values: $spacers-extra,
+  ),
+  "margin-bottom": (
+    responsive: true,
+    property: margin-bottom,
+    class: mb,
+    values: $spacers-extra,
+  ),
+  "margin-start": (
+    responsive: true,
+    property: margin-left,
+    class: ms,
+    values: $spacers-extra,
+  ),
+  // Negative margin utilities
+  "negative-margin":
+    (
+      responsive: true,
+      property: margin,
+      class: m,
+      values: $negative-spacers-extra,
+    ),
+  "negative-margin-x": (
+    responsive: true,
+    property: margin-right margin-left,
+    class: mx,
+    values: $negative-spacers-extra,
+  ),
+  "negative-margin-y": (
+    responsive: true,
+    property: margin-top margin-bottom,
+    class: my,
+    values: $negative-spacers-extra,
+  ),
+  "negative-margin-top": (
+    responsive: true,
+    property: margin-top,
+    class: mt,
+    values: $negative-spacers-extra,
+  ),
+  "negative-margin-end": (
+    responsive: true,
+    property: margin-right,
+    class: me,
+    values: $negative-spacers-extra,
+  ),
+  "negative-margin-bottom": (
+    responsive: true,
+    property: margin-bottom,
+    class: mb,
+    values: $negative-spacers-extra,
+  ),
+  "negative-margin-start": (
+    responsive: true,
+    property: margin-left,
+    class: ms,
+    values: $negative-spacers-extra,
+  ),
+  // Padding utilities
+  "padding":
+    (
+      responsive: true,
+      property: padding,
+      class: p,
+      values: $spacers-extra,
+    ),
+  "padding-x": (
+    responsive: true,
+    property: padding-right padding-left,
+    class: px,
+    values: $spacers-extra,
+  ),
+  "padding-y": (
+    responsive: true,
+    property: padding-top padding-bottom,
+    class: py,
+    values: $spacers-extra,
+  ),
+  "padding-top": (
+    responsive: true,
+    property: padding-top,
+    class: pt,
+    values: $spacers-extra,
+  ),
+  "padding-end": (
+    responsive: true,
+    property: padding-right,
+    class: pe,
+    values: $spacers-extra,
+  ),
+  "padding-bottom": (
+    responsive: true,
+    property: padding-bottom,
+    class: pb,
+    values: $spacers-extra,
+  ),
+  "padding-start": (
+    responsive: true,
+    property: padding-left,
+    class: ps,
+    values: $spacers-extra,
+  ),
+  // Gap utility
+  "gap":
+    (
+      responsive: true,
+      property: gap,
+      class: gap,
+      values: $spacers-extra,
+    ),
+  "row-gap": (
+    responsive: true,
+    property: row-gap,
+    class: row-gap,
+    values: $spacers-extra,
+  ),
+  "column-gap": (
+    responsive: true,
+    property: column-gap,
+    class: column-gap,
+    values: $spacers-extra,
+  ),
+  // Letter spacing
+  "spacing":
+    (
+      property: letter-spacing,
+      class: tracking,
+      values: (
+        tight: $spacing-tight,
+        normal: $spacing-normal,
+        wide: $spacing-wide,
+      ),
+    ),
+  "width": (
+    property: width,
+    class: w,
+    values: $spacers-extra,
+  ),
+  "height": (
+    property: height,
+    class: h,
+    values: $spacers-extra,
+  ),
+  "filter": (
+    property: filter,
+    class: filter,
+    values: (
+      grayscale: grayscale(100%),
+    ),
+  ),
+  "gutter-x": (
+    responsive: true,
+    css-var: true,
+    css-variable-name: gutter-x,
+    class: gx,
+    values: $spacers-extra,
+  ),
+  "gutter-y": (
+    responsive: true,
+    css-var: true,
+    css-variable-name: gutter-y,
+    class: gy,
+    values: $spacers-extra,
+  ),
+  "gutter": (
+    responsive: true,
+    css-var: true,
+    css-variable-name: gutter-x,
+    class: g,
+    values: $spacers-extra,
+  )
+);

package/src/scss/_utilities.scss

@@ -6,6 +6,11 @@ $border-values: (
   0: 0,
 );
 
+$utilities-border-colors: map-loop((
+  "red": red,
+  "green": green,
+), rgba-css-var, "$key", "border") !default;
+
 //Utilities
 $utilities: (
   "object": (
@@ -19,15 +24,6 @@ $utilities: (
       none: none,
     ),
   ),
-  "spacing": (
-    property: letter-spacing,
-    class: tracking,
-    values: (
-      tight: -0.05em,
-      normal: 0,
-      wide: 0.05em,
-    ),
-  ),
   "cursor": (
     property: cursor,
     class: cursor,

package/src/scss/_variables.scss

@@ -7,7 +7,7 @@ $enable-gradients: false !default;
 $enable-shadows: true !default;
 $enable-navbar-vertical: true !default;
 $enable-dark-mode: true !default;
-$enable-negative-margins: false !default;
+$enable-negative-margins: true !default;
 $enable-rfs: false !default;
 $enable-cssgrid: true !default;
 
@@ -26,7 +26,7 @@ $font-icons: () !default;
 /* prettier-ignore */
 $font-family-sans-serif: unquote("#{if($font-local, "#{$font-local}, ", ' ')}#{if($font-google, "#{$font-google}, ", ' ')}") 'Inter Var', Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
 /* prettier-ignore */
-$font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+$font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace !default;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
 
 //Icons
@@ -52,22 +52,29 @@ $line-height-600: 2.5rem !default;
 $line-height-700: 3rem !default;
 
 $font-size-base: 0.875rem !default;
+
+$spacing-wide: .04em !default;
+$spacing-normal: 0 !default;
+$spacing-tight: -.04em !default;
+
 $body-letter-spacing: 0 !default;
 
 $font-weight-light: 300 !default;
 $font-weight-normal: 400 !default;
 $font-weight-medium: 500 !default;
 $font-weight-bold: 600 !default;
+$font-weight-black: 700 !default;
 
 $headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
 $headings-margin-bottom: var(--#{$prefix}spacer) !default;
 
 $font-weights: (
-  light: $font-weight-light,
-  normal: $font-weight-normal,
-  medium: $font-weight-medium,
-  bold: $font-weight-bold,
-  headings: $headings-font-weight,
+  'light': $font-weight-light,
+  'normal': $font-weight-normal,
+  'medium': $font-weight-medium,
+  'bold': $font-weight-bold,
+  'black': $font-weight-black,
+  'headings': $headings-font-weight,
 ) !default;
 
 $line-height-base: divide(1.25rem, $font-size-base) !default;
@@ -293,6 +300,12 @@ $border-radius: 4px !default;
 $border-radius-lg: 8px !default;
 $border-radius-pill: 100rem !default;
 
+$border-values: (
+  null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent,
+  wide: $border-width-wide var(--#{$prefix}border-style) $border-color-translucent,
+  0: 0,
+);
+
 // Icons
 $icon-color: var(--#{$prefix}gray-400) !default;
 
@@ -331,13 +344,13 @@ $avatar-sizes: (
   "xs": (
     size: 1.25rem,
     font-size: $h6-font-size,
-    icon-size: 1rem,
+    icon-size: .75rem,
     status-size: .375rem
   ),
   "sm": (
     size: 2rem,
     font-size: $h5-font-size,
-    icon-size: 1.25rem,
+    icon-size: 1.5rem,
     status-size: .5rem
   ),
   "md": (
@@ -396,7 +409,7 @@ $grid-gutter-width: 1rem !default;
 $container-variations: (
   slim: 16rem,
   tight: 30rem,
-  narrow: 45rem,
+  narrow: 61.875rem,
 ) !default;
 
 // Spacers
@@ -406,9 +419,14 @@ $spacer-2: 0.5rem !default;
 $spacer-3: 1rem !default;
 $spacer-4: 1.5rem !default;
 $spacer-5: 2rem !default;
-$spacer-6: 3rem !default;
-$spacer-7: 5rem !default;
-$spacer-8: 8rem !default;
+$spacer-6: 2.5rem !default;
+
+$spacer-7: 3rem !default;
+$spacer-8: 4rem !default;
+$spacer-9: 5rem !default;
+$spacer-10: 6rem !default;
+$spacer-11: 7rem !default;
+$spacer-12: 8rem !default;
 
 $spacer: $spacer-3 !default;
 
@@ -420,11 +438,18 @@ $spacers: (
   4: $spacer-4,
   5: $spacer-5,
   6: $spacer-6,
+) !default;
+
+$spacers-extra: (
   7: $spacer-7,
   8: $spacer-8,
+  9: $spacer-9,
+  10: $spacer-10,
+  11: $spacer-11,
+  12: $spacer-12,
 ) !default;
 
-$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+$negative-spacers: null !default;
 
 // Sizes
 $size-spacers: (
@@ -453,6 +478,8 @@ $aspect-ratios: (
   "1x2": calc(2 / 1 * 100%),
   "3x1": calc(1 / 3 * 100%),
   "1x3": calc(3 / 1 * 100%),
+  "4x1": calc(1 / 4 * 100%),
+  "1x4": calc(4 / 1 * 100%),
   "4x3": calc(3 / 4 * 100%),
   "3x4": calc(4 / 3 * 100%),
   "16x9": calc(9 / 16 * 100%),
@@ -541,15 +568,20 @@ $badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
 $input-btn-line-height: $line-height-base !default;
 $input-btn-font-size: $font-size-base !default;
 $input-btn-font-family: var(--#{$prefix}font-sans-serif) !default;
-$input-btn-padding-y: 0.625rem - 0.0625rem !default;
+$input-btn-padding-y: 0.5rem - 0.0625rem !default;
+$input-btn-icon-size: $icon-size !default;
 
 $input-btn-font-size-sm: $h5-font-size !default;
 $input-btn-padding-x-sm: 0.25rem !default;
-$input-btn-padding-y-sm: 0.125rem !default;
+$input-btn-padding-y-sm: 0.125rem - 0.0625rem !default;
+$input-btn-line-height-sm: 1rem !default;
+$input-btn-icon-size-sm: 1rem !default;
 
 $input-btn-font-size-lg: $h2-font-size !default;
-$input-btn-padding-x-lg: 0.75rem !default;
-$input-btn-padding-y-lg: 0.5rem !default;
+$input-btn-padding-x-lg: 1.5rem !default;
+$input-btn-padding-y-lg: 0.75rem - 0.0625rem !default;
+$input-btn-line-height-lg: 2rem !default;
+$input-btn-icon-size-lg: 2rem !default;
 
 $input-btn-focus-width: 0.25rem !default;
 
@@ -563,7 +595,10 @@ $input-focus-color: var(--#{$prefix}body-color) !default;
 $input-box-shadow: var(--#{$prefix}box-shadow-input) !default;
 
 // Buttons
-$btn-disabled-opacity: 0.4 !default;
+$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
+$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+
+$btn-disabled-opacity: .4 !default;
 $btn-padding-x: 1rem !default;
 $btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $btn-border-color: var(--#{$prefix}border-color) !default;
@@ -605,8 +640,6 @@ $card-header-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $cards-grid-gap: var(--#{$prefix}page-padding) !default;
 $cards-grid-breakpoint: lg !default;
 
-$zindex-dropdown: 1;
-
 // Carousel
 $carousel-control-color: $white !default;
 $carousel-control-icon-width: 1.5rem !default;
@@ -722,6 +755,7 @@ $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 // Navbar
 $navbar-height: 3.5rem !default;
 $navbar-padding-y: 0.25rem !default;
+$navbar-light-color: var(--#{$prefix}muted) !default;
 
 $navbar-hover-color: $white !default;
 
@@ -731,8 +765,9 @@ $navbar-border-color: var(--#{$prefix}border-color) !default;
 $navbar-light-color: var(--#{$prefix}body-color) !default;
 $navbar-light-brand-color: var(--#{$prefix}body-color) !default;
 $navbar-light-active-color: var(--#{$prefix}body-color) color !default;
+$navbar-light-hover-color: var(--#{$prefix}body-color) color !default;
 $navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default;
-$navbar-light-active-bg: rgba(0, 0, 0, 0.06) !default;
+$navbar-light-active-bg: rgba(0, 0, 0, 0.2) !default;
 
 $navbar-dark-color: rgba($white, $text-secondary-opacity) !default;
 $navbar-dark-brand-color: $white !default;

package/src/scss/layout/_animations.scss

@@ -59,4 +59,5 @@
   to {
     opacity: 0;
   }
-}
+}
+

package/src/scss/layout/_navbar.scss

@@ -82,7 +82,6 @@ Navbar
   --#{$prefix}navbar-border-width: #{$navbar-border-width};
   --#{$prefix}navbar-active-border-color: #{$navbar-active-border-color};
   --#{$prefix}navbar-active-bg: #{$navbar-light-active-bg};
-  --#{$prefix}navbar-color: var(--#{$prefix}body-color);
   --#{$prefix}navbar-border-color: #{$navbar-border-color};
   align-items: stretch;
   min-height: $navbar-height;

package/src/scss/marketing/_browser.scss

@@ -0,0 +1,67 @@
+//
+// Browser
+//
+.browser {
+  border-radius: var(--#{$prefix}border-radius-lg);
+  box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
+  background: var(--#{$prefix}bg-surface-secondary);
+  overflow: hidden;
+}
+
+.browser-header {
+  padding: .25rem 1rem;
+  background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .03));
+  border-bottom: 1px solid var(--#{$prefix}border-color);
+  border-radius: calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0;
+}
+
+.browser-dots {
+  margin-right: 3rem;
+  display: flex;
+}
+
+.browser-dots-colored {
+  .browser-dot {
+    &:nth-child(1) {
+      background: #fb6058;
+    }
+
+    &:nth-child(2) {
+      background: #fcbe3b;
+    }
+
+    &:nth-child(3) {
+      background: #2ccb4c;
+    }
+  }
+}
+
+.browser-dot {
+  margin-right: .5rem;
+  width: .75rem;
+  min-width: .75rem;
+  height: .75rem;
+  background: var(--#{$prefix}border-color);
+  border-radius: 50%;
+  border: 1px solid var(--#{$prefix}border-color-dark);
+}
+
+.browser-input {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  padding: .25rem;
+  color: var(--#{$prefix}muted);
+  font-size: var(--#{$prefix}font-size-h5);
+  border-radius: var(--#{$prefix}border-radius);
+  line-height: 1;
+  cursor: pointer;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
+
+  &:hover {
+    text-decoration: none;
+  }
+}

package/src/scss/marketing/_core.scss

@@ -0,0 +1,8 @@
+.body-marketing {
+  --#{$prefix}body-font-size: 1rem;
+  --#{$prefix}body-line-height: 1.75;
+}
+
+.body-gradient {
+  background: var(--tblr-bg-surface) linear-gradient(to bottom, var(--tblr-bg-surface-secondary) 12%, var(--tblr-bg-surface) 99%) repeat-x top center/100% 100vh;
+}

package/src/scss/marketing/_hero.scss

@@ -0,0 +1,69 @@
+//
+// Hero
+//
+.hero {
+  text-align: center;
+  padding: 6.5rem 0;
+}
+
+.hero-title {
+  font-size: 3rem;
+  font-weight: var(--#{$prefix}font-weight-black);
+  letter-spacing: $spacing-tight;
+  line-height: $headings-line-height;
+
+  @include media-breakpoint-down(md) {
+    font-size: 2rem;
+  }
+}
+
+.hero-description {
+  color: var(--#{$prefix}muted);
+  font-size: var(--#{$prefix}font-size-h2);
+  line-height: 1.5;
+  margin: 0 auto;
+  max-width: 45rem;
+
+  @include media-breakpoint-down(sm) {
+    font-size: var(--#{$prefix}font-size-h3);
+  }
+}
+
+.hero-description-wide {
+  max-width: 61.875rem;
+}
+
+//
+// Hero subheader
+//
+.hero-subheader {
+  @include subheader;
+  margin-bottom: 0.5rem;
+}
+
+.hero-img {
+  margin: 4rem auto;
+  max-width: 65rem;
+  border-radius: $border-radius-lg;
+  position: relative;
+  z-index: 1;
+  //box-shadow: 0 10px 15px -3px rgba($color-text, 0.1),
+  //  0 4px 6px -2px rgba($color-text, 0.05);
+
+  img,
+  svg {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    position: relative;
+  }
+}
+//
+//.hero-img-side {
+//  img,
+//  svg {
+//    max-width: 100%;
+//    height: auto;
+//    display: block;
+//  }
+//}