@tabler/core 1.0.0-beta4 → 1.0.0-beta5

package/src/scss/_utilities.scss

@@ -1,4 +1,5 @@
 $margin-spacers: map-merge($spacers, (auto: auto, null: $spacer));
+
 $border-values: (
   null: $border-width solid $border-color-transparent,
   wide: $border-width-wide solid $border-color-transparent,
@@ -36,7 +37,16 @@ $utilities: (
       move: move,
       not-allowed: not-allowed,
       zoom-in: zoom-in,
-      zoom-out: zoom-out
+      zoom-out: zoom-out,
+      default: default,
+      none: none,
+      help: help,
+      progress: progress,
+      wait: wait,
+      text: text,
+      v-text: vertical-text,
+      grab: grab,
+      grabbing: grabbing,
     )
   ),
   "font-size": (
@@ -108,4 +118,4 @@ $utilities: (
     responsive: true,
     values: 2 3 4
   )
-) !default;
+) !default;

package/src/scss/_variables.scss

@@ -12,7 +12,7 @@ $enable-negative-margins: false !default;
 $assets-base: ".." !default;
 
 // FONTS
-$google-font: false !default;
+$google-font: 'Inter' !default;
 $google-font-monospaced: false !default;
 
 $font-family-sans-serif: $google-font, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
@@ -27,7 +27,7 @@ $icon-stroke-width: 1.5 !default;
 $icon-size: 1.25rem !default;
 
 //Fonts
-$font-size-base: .9375rem !default;
+$font-size-base: .875rem !default;
 $body-letter-spacing: 0 !default;
 
 $font-weight-light: 300 !default;
@@ -66,10 +66,6 @@ $display-font-sizes: (
   6: 2.5rem
 ) !default;
 
-$small-font-size: percentage(divide($h5-font-size, $font-size-base)) !default;
-$code-font-size: $small-font-size !default;
-$code-line-height: 1.25rem !default;
-
 $lead-font-size: $font-size-base !default;
 $lead-font-weight: $font-weight-normal !default;
 
@@ -82,10 +78,23 @@ $text-muted-light-opacity: .4 !default;
 $text-muted-dark-opacity: .8 !default;
 
 $border-opacity: .16 !default;
+$border-light-opacity: .08 !default;
 $border-dark-opacity: .24 !default;
-
-$light: #f4f6fa !default;
-$dark: #232e3c !default;
+$border-active-opacity: .48 !default;
+
+$gray-50: #f8fafc !default;
+$gray-100: #f1f5f9 !default;
+$gray-200: #e2e8f0 !default;
+$gray-300: #cbd5e1 !default;
+$gray-400: #94a3b8 !default;
+$gray-500: #64748b !default;
+$gray-600: #475569 !default;
+$gray-700: #334155 !default;
+$gray-800: #1e293b !default;
+$gray-900: #0f172a !default;
+
+$light: $gray-50 !default;
+$dark: $gray-800 !default;
 
 $body-bg: $light !default;
 $body-color: $dark !default;
@@ -93,24 +102,6 @@ $body-color: $dark !default;
 $color-contrast-dark: $dark !default;
 $color-contrast-light: $light !default;
 
-$light-black: rgba($dark, .24) !default;
-$light-mix: rgba(mix($light, $dark, 64%), .24) !default;
-$light-white: rgba($light, .24) !default;
-
-$min-black: rgba($dark, .024) !default;
-$min-white: rgba(mix($light, $dark, 48%), .1) !default;
-
-$gray-50: #fbfbfb !default;
-$gray-100: $light !default;
-$gray-200: mix($light, $dark, 98%) !default;
-$gray-300: mix($light, $dark, 94%) !default;
-$gray-400: mix($light, $dark, 88%) !default;
-$gray-500: mix($light, $dark, 78%) !default;
-$gray-600: mix($light, $dark, 60%) !default;
-$gray-700: mix($light, $dark, 36%) !default;
-$gray-800: mix($light, $dark, 16%) !default;
-$gray-900: $dark !default;
-
 $blue: #206bc4 !default;
 $azure: #4299e1 !default;
 $indigo: #4263eb !default;
@@ -133,9 +124,15 @@ $text-muted-dark: mix($body-color, #ffffff, percentage($text-muted-dark-opacity)
 $border-color: mix($text-muted, #ffffff, percentage($border-opacity)) !default;
 $border-color-transparent: rgba($text-muted, $border-opacity) !default;
 
+$border-color-light: mix($text-muted, #ffffff, percentage($border-light-opacity)) !default;
+$border-color-light-transparent: rgba($text-muted, $border-light-opacity) !default;
+
 $border-color-dark: mix($text-muted, #ffffff, percentage($border-dark-opacity)) !default;
 $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;
 
@@ -146,7 +143,32 @@ $info: $azure !default;
 $warning: $orange !default;
 $danger: $red !default;
 
-$code-color: $primary !default;
+$theme-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "info": $info,
+  "warning": $warning,
+  "danger": $danger,
+  "light": $light,
+  "dark":  $dark,
+  "muted": $text-muted
+) !default;
+
+$extra-colors: (
+  "blue": $blue,
+  "azure": $azure,
+  "indigo": $indigo,
+  "purple": $purple,
+  "pink": $pink,
+  "red": $red,
+  "orange": $orange,
+  "yellow": $yellow,
+  "lime": $lime,
+  "green": $green,
+  "teal": $teal,
+  "cyan": $cyan,
+) !default;
 
 $social-colors: (
   "facebook": #3b5998,
@@ -166,25 +188,11 @@ $social-colors: (
   "tabler": #206bc4
 ) !default;
 
-$colors: (
-  "blue": $blue,
-  "azure": $azure,
-  "indigo": $indigo,
-  "purple": $purple,
-  "pink": $pink,
-  "red": $red,
-  "orange": $orange,
-  "yellow": $yellow,
-  "lime": $lime,
-  "green": $green,
-  "teal": $teal,
-  "cyan": $cyan,
-) !default;
-
-
 // Dark mode
 $dark-mode-darken: darken($dark, 2%) !default;
 $dark-mode-lighten: lighten($dark, 2%) !default;
+$dark-mode-border-color: lighten($dark, 8%) !default;
+$dark-mode-border-color-light: lighten($dark, 4%) !default;
 $dark-mode-text: $light;
 
 // Borders
@@ -196,6 +204,12 @@ $border-radius: 4px !default;
 $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-font-size: $small-font-size !default;
+$code-line-height: 1.25rem !default;
+
 // Avatars
 $avatar-size: 2.5rem !default;
 $avatar-sizes: (
@@ -259,7 +273,7 @@ $container-variations: (
 
 $content-padding-y: 1.25rem !default;
 
-
+// Acpect ratios
 $aspect-ratios: (
   "1x1": 100%,
   "4x3": calc(3 / 4 * 100%),
@@ -270,16 +284,23 @@ $aspect-ratios: (
   "9x21": calc(21 / 9 * 100%),
 ) !default;
 
-// overlay
+// Shadows
+$shadow: rgba($dark, .04) 0 2px 4px 0 !default;
+
+// Transitions
+$transition-time: .3s !default;
+
+// Overlay
 $overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%) !default;
 
 //accordion
+$accordion-bg: transparent !default;
 $accordion-border-color: $border-color-transparent !default;
 $accordion-icon-width: 1rem !default;
 
+$accordion-button-bg: transparent !default;
 $accordion-button-active-bg: transparent !default;
 $accordion-button-active-color: inherit !default;
-
 $accordion-button-focus-border-color: $accordion-border-color !default;
 
 //alerts
@@ -308,7 +329,6 @@ $badge-font-weight: $font-weight-medium !default;
 $badge-empty-size: .5rem !default;
 
 //buttons
-$input-color: $body-color !default;
 $input-btn-line-height: $line-height-base !default;
 $input-btn-font-size: $font-size-base !default;
 $input-btn-padding-y: .5rem - .0625rem !default;
@@ -351,7 +371,7 @@ $card-spacer-x: 1rem !default;
 $card-status-size: $border-width-wide !default;
 $card-group-margin: 1.5rem !default;
 
-$card-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
+$card-shadow: $shadow !default;
 $card-shadow-hover: rgba($dark, .16) 0 2px 16px 0 !default;
 
 $cards-grid-gap: 1rem !default;
@@ -515,9 +535,9 @@ $table-border-color: $border-color-transparent !default;
 $table-head-border-color: $border-color-transparent !default;
 $table-head-padding-y: .5rem !default;
 $table-head-color: $text-muted !default;
-$table-head-bg: $light !default;
+$table-head-bg: var(--#{$variable-prefix}border-color-light) !default;
 $table-striped-order: even !default;
-$table-striped-bg: $light !default;
+$table-striped-bg: var(--#{$variable-prefix}border-color-light) !default;
 $table-group-separator-color: $border-color-transparent !default;
 
 //toasts
@@ -536,6 +556,7 @@ $list-group-border-color: $border-color !default;
 $list-group-action-color: inherit !default;
 $list-group-bg: inherit !default;
 
+$input-bg: $white !default;
 $input-disabled-bg: $gray-100 !default;
 $input-border-color: $border-color-dark !default;
 $input-border-color-transparent: $border-color-dark-transparent !default;
@@ -575,8 +596,8 @@ $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/200
 $form-switch-bg-size: auto !default;
 
 $form-range-track-height: .25rem !default;
-$form-range-track-bg: $light-mix !default;
-$form-range-thumb-border: 2px solid $white !default;
+$form-range-track-bg: var(--#{$variable-prefix}border-color-light) !default;
+$form-range-thumb-border: 2px solid $form-range-track-bg !default;
 $form-range-thumb-height: 1rem !default;
 $form-range-thumb-focus-box-shadow-width: .125rem !default;
 
@@ -594,3 +615,5 @@ $flag-sizes: $avatar-sizes !default;
 //Payments
 $payment-sizes: $avatar-sizes !default;
 
+// Offcanvas
+$offcanvas-border-color: $border-color-transparent !default;

package/src/scss/demo/_examples.scss

@@ -79,8 +79,17 @@
 }
 
 @include dark-mode {
+  .example {
+    background-color: $dark-mode-darken;
+    border-color: $dark-mode-border-color;
+  }
+
+  .example-content {
+    color: $dark-mode-text;
+  }
+
   .example-code {
-    border: 1px solid $border-color;
+    border-color: $dark-mode-border-color;
     border-top: none;
   }
 }

package/src/scss/demo.scss

@@ -85,8 +85,8 @@ $demo-icon-size: 7rem;
   height: $demo-icon-size;
   text-align: center;
   padding: .5rem;
-  border-right: 1px solid $border-color;
-  border-bottom: 1px solid $border-color;
+  border-right: 1px solid var(--#{$variable-prefix}border-color);
+  border-bottom: 1px solid var(--#{$variable-prefix}border-color);
   color: inherit;
   cursor: pointer;
 
@@ -101,3 +101,32 @@ $demo-icon-size: 7rem;
   }
 }
 
+
+//
+// Settings
+//
+.settings-btn {
+  position: fixed;
+  right: -1px;
+  top: 10rem;
+
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  box-shadow: $shadow;
+}
+
+.settings-scheme {
+  display: inline-block;
+  border-radius: 50%;
+  height: 3rem;
+  width: 3rem;
+  position: relative;
+  border: 1px solid var(--#{$variable-prefix}border-color);
+  box-shadow: $shadow;
+
+  &-light { background: linear-gradient(135deg, $white 50%, $light 50%); }
+  &-mixed { background-image: linear-gradient(135deg, $dark 50%, #fff 50%); }
+  &-transparent { background: $light; }
+  &-dark { background: $dark; }
+  &-colored { background-image: linear-gradient(135deg, var(--#{$variable-prefix}primary) 50%, $light 50%); }
+}

package/src/scss/layout/_core.scss

@@ -1,8 +1,16 @@
 // stylelint-disable property-no-vendor-prefix
-html {
+:root {
   font-size: 16px;
-  scroll-behavior: smooth;
   height: 100%;
+
+  --#{$variable-prefix}card-bg: #{$card-bg};
+  --#{$variable-prefix}card-bg-rgb: #{to-rgb($card-bg)};
+
+  --#{$variable-prefix}border-color: #{$border-color};
+  --#{$variable-prefix}border-color-rgb: #{to-rgb($border-color)};
+
+  --#{$variable-prefix}border-color-light: #{$border-color-light};
+  --#{$variable-prefix}border-color-light-rgb: #{to-rgb($border-color-light)};
 }
 
 body {
@@ -14,12 +22,22 @@ body {
   position: relative;
   min-height: 100%;
 
-  * {
-    @include scrollbar;
-  }
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
   @media print {
     background: transparent;
   }
 }
 
+@include scrollbar;
+
+//
+// Fluid container
+//
+[data-container-layout="fluid"] {
+  [class^="container-"],
+  [class*=" container-"] {
+    max-width: 100%;
+  }
+}

package/src/scss/layout/_dark.scss

@@ -0,0 +1,168 @@
+/*!
+ * 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;
+}
+
+@include dark-mode {
+  & {
+    --#{$variable-prefix}body-color: #{$dark-mode-text};
+    --#{$variable-prefix}body-color-rgb: #{to-rgb($dark-mode-text)};
+
+    --#{$variable-prefix}body-bg: #{$dark-mode-darken};
+    --#{$variable-prefix}body-bg-rgb: #{to-rgb($dark-mode-darken)};
+
+    --#{$variable-prefix}card-bg: #{$dark};
+    --#{$variable-prefix}card-bg-rgb: #{to-rgb($dark)};
+
+    --#{$variable-prefix}border-color: #{$dark-mode-border-color};
+    --#{$variable-prefix}border-color-light: #{$dark-mode-border-color-light};
+
+    color: $dark-mode-text;
+    background-color: $dark-mode-darken;
+  }
+
+  .hide-theme-dark {
+    display: none !important;
+  }
+
+  .text-body {
+    color: $dark-mode-text!important;
+  }
+
+  .card,
+  .card-footer,
+  .card-stacked::after,
+  .footer:not(.footer-transparent),
+  .modal-content,
+  .modal-header,
+  .dropdown-menu,
+  .alert:not(.alert-important) {
+    background-color: $dark;
+    color: inherit;
+  }
+
+  .card {
+    border-color: transparent;
+  }
+
+  .card-tabs .nav-tabs .nav-link {
+    background-color: $dark-mode-darken;
+    color: inherit;
+  }
+
+  pre {
+    background-color: $dark-mode-darken;
+    border-color: $dark-mode-border-color;
+  }
+
+  .card-tabs .nav-tabs .nav-link.active {
+    background-color: $dark;
+    color: inherit;
+  }
+
+  .btn-white,
+  .form-file-button {
+    //@include button-variant($dark-mode-lighten, $border-color, $dark-mode-text, rgba($dark, 0), $border-color, $dark-mode-text);
+    background-image: none;
+  }
+
+  .form-check-input:not(:checked),
+  .form-select,
+  .form-file-text,
+  .form-control,
+  .form-selectgroup-label,
+  .form-selectgroup-check,
+  .form-imagecheck-figure:before {
+    background-color: $dark-mode-darken;
+    color: $dark-mode-text;
+    border-color: $dark-mode-border-color;
+  }
+
+  .form-control-plaintext {
+    color: $dark-mode-text;
+  }
+
+  .input-group-flat .input-group-text {
+    background-color: $dark-mode-darken;
+  }
+
+  .input-group-text {
+    border-color: $dark-mode-border-color;
+  }
+
+  .highlight {
+    background-color: $dark-mode-darken;
+  }
+
+  .avatar {
+    --#{$variable-prefix}avatar-bg: #{$dark-mode-lighten};
+  }
+
+  .avatar-list-stacked .avatar {
+    box-shadow: 0 0 0 2px $dark;
+  }
+
+  .markdown,
+  .markdown>*,
+  .accordion-button {
+    color: inherit;
+  }
+
+  .btn-close,
+  .accordion-button:after {
+    filter: $btn-close-white-filter;
+  }
+
+  .apexcharts-text {
+    fill: $dark-mode-text;
+  }
+
+  .apexcharts-gridline {
+    stroke: var(--#{$variable-prefix}border-color);
+  }
+
+  .apexcharts-legend-text {
+    color: inherit !important;
+  }
+
+  .apexcharts-tooltip {
+    background: $dark !important;
+    border: 1px solid $dark-mode-border-color !important;
+    box-shadow: 2px 2px 6px -4px $dark-mode-darken !important;
+
+    .apexcharts-tooltip-title {
+      background: $dark !important;
+      border-bottom: 1px solid $dark-mode-border-color !important;
+    }
+  }
+
+  .navbar-brand-autodark {
+    @include autodark-image;
+  }
+
+  .table thead th,
+  .input-group-text {
+    background: transparent;
+  }
+
+  .list-group-item {
+    color: $dark-mode-text;
+    border-color: $border-color-transparent;
+  }
+
+  .list-group-header {
+    background: $dark-mode-darken;
+  }
+
+  .apexcharts-radialbar-area {
+    stroke: $dark-mode-border-color;
+  }
+}
+

package/src/scss/layout/_navbar.scss

@@ -58,7 +58,7 @@
 
 @mixin navbar-dark {
   @include navbar-color($dark, $navbar-dark-color, $navbar-dark-brand-color, $navbar-dark-active-color, $navbar-dark-disabled-color);
-  @include scrollbar(true);
+  @include scrollbar;
 
   .input-icon-addon {
     color: rgba($dark-mode-text, .64);
@@ -291,7 +291,7 @@ Navbar toggler
   width: 1.25em;
   background: currentColor;
   border-radius: 10px;
-  transition: $navbar-toggler-animation-time $navbar-toggler-animation-time top, $navbar-toggler-animation-time $navbar-toggler-animation-time bottom, $navbar-toggler-animation-time transform, 0s $navbar-toggler-animation-time opacity;
+  @include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
   position: relative;
 
   &:before,
@@ -304,7 +304,7 @@ Navbar toggler
     background: inherit;
     position: absolute;
     left: 0;
-    transition: inherit;
+    @include transition(inherit);
   }
 
   &:before {
@@ -317,7 +317,7 @@ Navbar toggler
 
   .navbar-toggler[aria-expanded="true"] & {
     transform: rotate(45deg);
-    transition: .3s top, .3s bottom, .3s .3s transform, 0s .3s opacity;
+    @include transition(top $transition-time, bottom $transition-time, transform $transition-time $transition-time, opacity 0s $transition-time);
 
     &:before {
       top: 0;
@@ -390,7 +390,7 @@ Navbar vertical
             bottom: 0;
             z-index: $zindex-fixed;
             align-items: flex-start;
-            transition: .3s transform;
+            @include transition(transform $transition-time);
             overflow-x: auto;
 
             &.navbar-right {

package/src/scss/mixins/_functions.scss

@@ -1,7 +1,3 @@
-@function hex-to-rgb($hex) {
-  @return red($hex), green($hex), blue($hex);
-}
-
 @function theme-color-lighter($color, $transparent: false) {
   @if ($transparent) {
     @return rgba($color, .1);

package/src/scss/mixins/_mixins.scss

@@ -13,41 +13,28 @@
   }
 }
 
-@mixin scrollbar($is-dark: false) {
+@mixin scrollbar {
   &::-webkit-scrollbar {
     width: 6px;
     height: 6px;
-    transition: .3s background;
+    @include transition(background $transition-time);
   }
 
   &::-webkit-scrollbar-thumb {
     border-radius: 5px;
-
-    @if ($is-dark) {
-      background: transparent;
-    } @else {
-      background: $gray-600;
-    }
+    background: rgba(var(--#{$variable-prefix}body-color-rgb), .16);
   }
 
   &::-webkit-scrollbar-track {
-    @if ($is-dark) {
-      background: transparent;
-    } @else {
-      background: $gray-300;
-    }
+    background: rgba(var(--#{$variable-prefix}body-color-rgb), .06);
   }
 
-  &::-webkit-scrollbar-corner {
-    background: transparent;
+  &:hover::-webkit-scrollbar-thumb {
+    background: rgba(var(--#{$variable-prefix}body-color-rgb), .32);
   }
 
-  &:hover::-webkit-scrollbar-thumb {
-    @if ($is-dark) {
-      background: mix($white, $dark, 20%);
-    } @else {
-      background: $gray-600;
-    }
+  &::-webkit-scrollbar-corner {
+    background: transparent;
   }
 }
 
@@ -72,14 +59,16 @@
       }
     }
 
-    @media not print and (prefers-color-scheme: dark) {
-      @if ($selector) {
-        .theme-dark-auto & {
-          @content
-        }
-      } @else {
-        .theme-dark-auto {
-          @content
+    @media not print {
+      @media (prefers-color-scheme: dark) {
+        @if ($selector) {
+          .theme-dark-auto & {
+            @content
+          }
+        } @else {
+          .theme-dark-auto {
+            @content
+          }
         }
       }
     }

package/src/scss/tabler-vendors.scss

@@ -2,4 +2,5 @@
 
 @import "vendor/nouislider";
 @import "vendor/litepicker";
-@import "vendor/choices";
+@import "vendor/tom-select";
+@import "vendor/apexcharts";

package/src/scss/ui/_accordion.scss

@@ -11,6 +11,7 @@
   &:not(.collapsed) {
     font-weight: $font-weight-bold;
     border-bottom-color: transparent;
+    box-shadow: none;
 
     &:after {
       opacity: 1;