@tabler/core 1.0.0-beta15 → 1.0.0-beta16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/core",
-  "version": "1.0.0-beta15",
+  "version": "1.0.0-beta16",
   "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",
@@ -117,20 +119,20 @@
     ]
   },
   "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",
@@ -147,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.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.109.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",

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";

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;
 
@@ -367,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%),
@@ -420,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: "·",
@@ -443,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;
@@ -677,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;
@@ -756,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/_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/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: var(--#{$prefix}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;
+  }
+}

package/src/scss/ui/_buttons.scss

@@ -6,9 +6,12 @@
   --#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
   --#{$prefix}btn-color: var(--#{$prefix}body-color);
   --#{$prefix}btn-border-color: var(--#{$prefix}border-color);
-  --#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface);
+  --#{$prefix}btn-hover-bg: var(--#{$prefix}btn-bg);
   --#{$prefix}btn-hover-border-color: var(--#{$prefix}border-color-active);
   --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-button);
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-bg};
+  --#{$prefix}btn-active-border-color: #{$active-border-color};
 
   display: inline-flex;
   align-items: center;
@@ -38,6 +41,12 @@
   .badge {
     top: auto;
   }
+
+  .btn-check + &:hover {
+    color: var(--#{$prefix}btn-hover-color);
+    background-color: var(--#{$prefix}btn-hover-bg);
+    border-color: var(--#{$prefix}btn-hover-border-color);
+  }
 }
 
 .btn-link {

package/src/scss/ui/_forms.scss

@@ -80,22 +80,6 @@ Form control
   &[size] {
     width: auto;
   }
-
-  &[type="number"] {
-    &::-webkit-inner-spin-button {
-      opacity: 1;
-      cursor: pointer;
-      height: subtract($input-height, 1px);
-      margin: 0 (-$input-padding-x) 0 0;
-    }
-
-    &::-moz-inner-spin-button {
-      opacity: 1;
-      cursor: pointer;
-      height: subtract($input-height, 1px);
-      margin: 0 (-$input-padding-x) 0 0;
-    }
-  }
 }
 
 .form-control-light {

package/src/scss/ui/_images.scss

@@ -1,10 +1,15 @@
 .img-responsive {
+  --#{$prefix}img-responsive-ratio: #{percentage(.75)};
   background: no-repeat center/cover;
-  padding-top: percentage(.75);
+  padding-top: var(--#{$prefix}img-responsive-ratio);
+}
+
+.img-responsive-grid {
+  padding-top: calc(var(--#{$prefix}img-responsive-ratio) - calc(var(--#{$prefix}gutter-y) / 2));
 }
 
 @each $key, $ratio in $aspect-ratios {
   .img-responsive-#{$key} {
-    padding-top: $ratio;
+    --#{$prefix}img-responsive-ratio: #{$ratio};
   }
 }

package/src/scss/ui/_steps.scss

@@ -1,53 +1,28 @@
-// stylelint-disable declaration-no-important
-
-@mixin step-size($border-width, $dot-size: 1rem) {
-  .step-item {
-    padding-top: add($dot-size, 4px);
-
-    &:after {
-      top: add($dot-size * .5, 2px);
-      height: $border-width;
-    }
-
-    &:before {
-      width: $dot-size;
-      height: $dot-size;
-    }
-  }
-}
-
-@mixin step-color($color) {
-  .step-item {
-    &:after,
-    &:before {
-      color: $white;
-      background: $color;
-    }
-
-    &.active:before {
-      color: inherit;
-      border-color: $color;
-    }
-  }
-}
-
+//
+// Steps
+//
 .steps {
+  --#{$prefix}steps-color: #{$steps-color};
+  --#{$prefix}steps-inactive-color: #{$steps-inactive-color};
+  --#{$prefix}steps-dot-size: .5rem;
+  --#{$prefix}steps-border-width: #{$steps-border-width};
   display: flex;
   flex-wrap: nowrap;
   width: 100%;
   padding: 0;
-  margin: 2rem 0;
+  margin: 0;
   list-style: none;
-  @include step-size(2px, .5rem);
-  @include step-color( var(--#{$prefix}primary) );
 }
 
-@each $color, $value in $extra-colors {
-  .steps-#{$color} {
-    @include step-color($value);
+@each $name, $color in $extra-colors {
+  .steps-#{$name} {
+    --#{$prefix}steps-color: var(--#{$prefix}#{$name});
   }
 }
 
+//
+// Step item
+//
 .step-item {
   position: relative;
   flex: 1 1 0;
@@ -56,6 +31,7 @@
   color: inherit;
   text-align: center;
   cursor: default;
+  padding-top: calc(var(--#{$prefix}steps-dot-size));
 
   @at-root a#{&} {
     cursor: pointer;
@@ -65,66 +41,112 @@
     }
   }
 
-  &:not(:first-child):after {
+  &:after,
+  &:before {
+    background: var(--#{$prefix}steps-color);
+  }
+
+  &:not(:last-child):after {
     position: absolute;
-    left: -50%;
+    left: 50%;
     width: 100%;
     content: "";
     transform: translateY(-50%);
   }
 
+  &:after {
+    top: calc(var(--#{$prefix}steps-dot-size) * .5);
+    height: var(--#{$prefix}steps-border-width);
+  }
+
   &:before {
+    content: "";
     position: absolute;
     top: 0;
     left: 50%;
     z-index: 1;
     box-sizing: content-box;
-    display: block;
-    content: "";
-    border: 2px var(--#{$prefix}border-style) $card-bg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     border-radius: $border-radius-pill;
     transform: translateX(-50%);
+    color: var(--#{$prefix}white);
+    width: var(--#{$prefix}steps-dot-size);
+    height: var(--#{$prefix}steps-dot-size);
   }
 
   &.active {
     font-weight: var(--#{$prefix}font-weight-bold);
 
-    &:before {
-      background: $card-bg;
+    &:after {
+      background: var(--#{$prefix}steps-inactive-color);
     }
 
     & ~ .step-item {
-      color: var(--#{$prefix}muted);
+      color: var(--#{$prefix}disabled-color);
 
       &:after,
       &:before {
-        background: $steps-color-inactive;
-      }
-
-      &:before {
-        color: var(--#{$prefix}muted) !important;
+        background: var(--#{$prefix}steps-inactive-color);
       }
     }
   }
 }
 
+//
+// Steps counter
+//
 .steps-counter {
+  --#{$prefix}steps-dot-size: 1.5rem;
   counter-reset: steps;
-  @include step-size(2px, 1.5rem);
 
   .step-item {
     counter-increment: steps;
 
     &:before {
-      font-size: $h5-font-size;
-      line-height: 1.5rem;
       content: counter(steps);
     }
+  }
+}
 
-    &.active ~ .step-item {
-      &:before {
-        background: $white;
+//
+// Steps vertical
+//
+.steps-vertical {
+  --#{$prefix}steps-dot-offset: 6px;
+  flex-direction: column;
+
+  &.steps-counter {
+    --#{$prefix}steps-dot-offset: -2px;
+  }
+
+  .step-item {
+    text-align: left;
+    padding-top: 0;
+    padding-left: calc(var(--#{$prefix}steps-dot-size) + 1rem);
+    min-height: auto;
+
+    &:not(:first-child) {
+      margin-top: 1rem;
+    }
+
+    &:before {
+      top: var(--#{$prefix}steps-dot-offset);
+      left: 0;
+      transform: translate(0, 0);
+    }
+
+    &:not(:last-child) {
+      &:after {
+        position: absolute;
+        content: '';
+        transform: translateX(-50%);
+        top: var(--#{$prefix}steps-dot-offset);
+        left: calc(var(--#{$prefix}steps-dot-size) * 0.5);
+        width: var(--#{$prefix}steps-border-width);
+        height: calc(100% + 1rem);
       }
     }
   }
-}
+}

package/src/scss/ui/forms/_form-colorinput.scss

@@ -46,10 +46,9 @@ Color Input
     box-shadow: $input-btn-focus-box-shadow;
   }
 
-  .form-colorinput-light & {
+  @at-root .form-colorinput-light & {
     &:before {
       background-image: escape-svg($form-check-input-checked-bg-image-dark);
     }
   }
 }
-

package/src/scss/ui/forms/_form-selectgroup.scss

@@ -94,9 +94,9 @@ Select group
 
 .form-selectgroup-input:checked + .form-selectgroup-label {
   z-index: 1;
-  color: var(--#{$prefix}primary);
-  background: rgba(var(--#{$prefix}primary-rgb), .04);
-  border-color: var(--#{$prefix}primary);
+  color: #{$active-color};
+  background: #{$active-bg};
+  border-color: #{$active-border-color};
 }
 
 .form-selectgroup-input:focus + .form-selectgroup-label {

package/src/scss/utils/_colors.scss

@@ -1,18 +1,22 @@
 // All colors
 @each $color, $value in map-merge($theme-colors, ( white: $white )) {
   .bg-#{"" + $color} {
-    background-color: var(--#{$prefix}#{$color}) !important;
+    --#{$prefix}bg-opacity: 1;
+    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
   }
 
   .bg-#{"" + $color}-lt {
-    color: var(--#{$prefix}#{$color}) !important;
-    background-color: rgba(var(--#{$prefix}#{$color}-rgb), .1) !important; //todo
+    --#{$prefix}bg-opacity: .1;
+    --#{$prefix}text-opacity: 1;
+    color: rgba(var(--#{$prefix}#{$color}-rgb, var(--#{$prefix}text-opacity))) !important;
+    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
   }
 }
 
 @each $color, $value in $theme-colors {
   .text-#{"" + $color} {
-    color: var(--#{$prefix}#{$color}) !important;
+    --#{$prefix}text-opacity: 1;
+    color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}text-opacity)) !important;
   }
 
   .text-#{"" + $color}-fg {
@@ -22,10 +26,11 @@
 
 @each $color, $value in $gray-colors {
   .bg-#{"" + $color} {
-    background-color: var(--#{$prefix}#{$color}) !important;
+    --#{$prefix}bg-opacity: .1;
+    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
   }
 
   .text-#{"" + $color}-fg {
-    color: color-contrast($value ) !important;
+    color: color-contrast($value) !important;
   }
 }