@tabler/core 1.0.0-beta2 → 1.0.0-beta6

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 {
@@ -399,7 +399,7 @@ Navbar vertical
             }
 
             .navbar-brand {
-              padding: (($navbar-height - $navbar-brand-image-height) / 2) 0;
+              padding: (($navbar-height - $navbar-brand-image-height) * .5) 0;
               justify-content: center;
             }
 

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,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);
@@ -14,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);
 

package/src/scss/mixins/_mixins.scss

@@ -13,41 +13,28 @@
   }
 }
 
-@mixin scrollbar($is-dark: false) {
-  &::-webkit-scrollbar {
+@mixin scrollbar {
+  #{if(&, "&", "*")}::-webkit-scrollbar {
     width: 6px;
     height: 6px;
-    transition: .3s background;
+    @include transition(background $transition-time);
   }
 
-  &::-webkit-scrollbar-thumb {
+  #{if(&, "&", "*")}::-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;
-    }
+  #{if(&, "&", "*")}::-webkit-scrollbar-track {
+    background: rgba(var(--#{$variable-prefix}body-color-rgb), .06);
   }
 
-  &::-webkit-scrollbar-corner {
-    background: transparent;
+  #{if(&, "&", "*")}: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;
-    }
+  #{if(&, "&", "*")}::-webkit-scrollbar-corner {
+    background: transparent;
   }
 }
 
@@ -72,16 +59,18 @@
       }
     }
 
-    @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,6 @@
 
 @import "vendor/nouislider";
 @import "vendor/litepicker";
-@import "vendor/choices";
+@import "vendor/tom-select";
+@import "vendor/apexcharts";
+@import "vendor/jsvectormap";

package/src/scss/tabler.scss

@@ -1,2 +1,2 @@
-@import "tabler-core";
+@import "core";
 

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;

package/src/scss/ui/_alerts.scss

@@ -50,5 +50,5 @@
   line-height: $h4-line-height;
   font-weight: $font-weight-bold;
   margin-bottom: .25rem;
-  color: var(--tblr-alert-color);
+  color: var(--#{$variable-prefix}alert-color);
 }

package/src/scss/ui/_avatars.scss

@@ -1,5 +1,6 @@
 .avatar {
   --#{$variable-prefix}avatar-size: #{$avatar-size};
+  --#{$variable-prefix}avatar-bg: var(--#{$variable-prefix}border-color-light);
   position: relative;
   width: var(--#{$variable-prefix}avatar-size);
   height: var(--#{$variable-prefix}avatar-size);
@@ -13,12 +14,12 @@
   text-transform: uppercase;
   vertical-align: bottom;
   user-select: none;
-  background: $gray-200 no-repeat center/cover;
+  background: var(--#{$variable-prefix}avatar-bg) no-repeat center/cover;
   border-radius: $avatar-border-radius;
 
   svg {
-    width: calc(var(--tblr-avatar-size) / #{(40 / 24)});
-    height: calc(var(--tblr-avatar-size) / #{(40 / 24)});
+    width: calc(var(--#{$variable-prefix}avatar-size) / #{divide(40, 24)});
+    height: calc(var(--#{$variable-prefix}avatar-size) / #{divide(40, 24)});
   }
 
   .badge {
@@ -44,8 +45,8 @@
   }
 
   .avatar-#{$avatar-size} .badge:empty {
-    width: $size / 4;
-    height: $size / 4;
+    width: $size * .25;
+    height: $size * .25;
   }
 }
 
@@ -88,7 +89,7 @@
   border: 1px dashed $border-color;
   background: $form-check-input-bg;
   flex-direction: column;
-  transition: .3s color, .3s background-color;
+  @include transition(color $transition-time, background-color $transition-time);
 
   svg {
     width: 1.5rem;
@@ -111,7 +112,7 @@
 
 .page-avatar {
   .page-cover ~ * & {
-    margin-top: calc(calc(-1 * calc(var(--tblr-avatar-size) / 2)) - #{$content-padding-y});
+    margin-top: calc(calc(-1 * calc(var(--#{$variable-prefix}avatar-size) * .5)) - #{$content-padding-y});
     box-shadow: 0 0 0 .25rem $body-bg;
   }
 }

package/src/scss/ui/_badges.scss

@@ -1,19 +1,15 @@
 .badge {
-  display: inline-flex;
   justify-content: center;
   align-items: center;
   background: $gray-500;
   overflow: hidden;
   user-select: none;
-  padding: calc(.25rem - 1px) .25rem;
-  height: 1.25rem;
   border: 1px solid transparent;
-  min-width: 1.25rem;
+  min-width: ($badge-padding-y * 2 ) + (divide($badge-font-size, 100%) * 1em);
   font-weight: $headings-font-weight;
-  font-size: $h6-font-size;
   letter-spacing: .04em;
-  text-transform: uppercase;
   vertical-align: bottom;
+  text-transform: uppercase;
 
   @at-root a#{&} {
     color: $white;
@@ -40,7 +36,7 @@
     width: 1em;
     height: 1em;
     font-size: 1rem;
-    margin: 0 .25rem 0 0;
+    stroke-width: 2;
   }
 }
 
@@ -51,6 +47,5 @@
 }
 
 .badge-pill {
-  border-radius: 100px;
-  min-width: 1.75em;
+  border-radius: $border-radius-pill;
 }

package/src/scss/ui/_breadcrumbs.scss

@@ -23,8 +23,6 @@
 
 @each $name, $symbol in $breadcrumb-variants {
   .breadcrumb-#{$name} {
-    .breadcrumb-item + .breadcrumb-item:before {
-      content: $symbol;
-    }
+    --#{$variable-prefix}breadcrumb-divider: "#{quote($symbol)}";
   }
 }

package/src/scss/ui/_buttons.scss

@@ -1,21 +1,22 @@
 .btn {
+  --#{$variable-prefix}btn-color-text-rgb: var(--#{$variable-prefix}body-color-rgb);
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: $body-color;
-  background-color: $white;
-  border-color: $border-color-dark-transparent;
+  border-color: var(--#{$variable-prefix}border-color);
   white-space: nowrap;
 
+  background-color: var(--#{$variable-prefix}btn-color, var(--#{$variable-prefix}card-bg));
+  color: var(--#{$variable-prefix}btn-color-text);
+
   &:hover {
-    color: $body-color;
-    border-color: $text-muted-light;
-    background-color: $light;
+    color: var(--#{$variable-prefix}btn-color-text);
+    border-color: rgba(var(--#{$variable-prefix}btn-color-text-rgb), #{$border-active-opacity});
   }
 
-  &:focus {
-    border-color: rgba(var(--#{$variable-prefix}btn-color, hex-to-rgb($primary)), .5);
-    box-shadow: 0 0 0 $input-btn-focus-width rgba(var(--#{$variable-prefix}btn-color, hex-to-rgb($primary)), $input-btn-focus-color-opacity)
+  &:focus:not([disabled]):not(.disabled) {
+    border-color: var(--#{$variable-prefix}btn-color, #{$primary});
   }
 
   &:disabled,
@@ -29,7 +30,7 @@
     min-width: $icon-size;
     margin: 0 .5rem 0 -.25rem;
     vertical-align: bottom;
-    color: $text-muted;
+    color: inherit;
   }
 
   .avatar {
@@ -49,45 +50,36 @@
 }
 
 %btn-color {
-  background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
-  color: var(--#{$variable-prefix}btn-color-text);
-
-  .icon {
-    color: inherit;
-  }
+  border-color: $border-color-dark-transparent;
 
   &:hover {
     color: var(--#{$variable-prefix}btn-color-text);
-    background: rgba(var(--#{$variable-prefix}btn-color-darker), 1);
-    border-color: transparent;
+    background: var(--#{$variable-prefix}btn-color-interactive);
+    border-color: var(--#{$variable-prefix}btn-color);
   }
 }
 
 %btn-outline {
   background-color: transparent;
-  color: rgba(var(--#{$variable-prefix}btn-color), 1);
-  border-color: $border-color-transparent;
-
-  .icon {
-    color: inherit;
-  }
+  color: var(--#{$variable-prefix}btn-color);
+  border-color: var(--#{$variable-prefix}btn-color);
 
   &:hover {
-    background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
+    background-color: var(--#{$variable-prefix}btn-color);
     color: var(--#{$variable-prefix}btn-color-text);
-    border-color: rgba(var(--#{$variable-prefix}btn-color), 1);
+    border-color: var(--#{$variable-prefix}btn-color);
   }
 }
 
 %btn-ghost {
   background: transparent;
-  color: rgba(var(--#{$variable-prefix}btn-color), 1);
+  color: var(--#{$variable-prefix}btn-color);
   border-color: transparent;
 
   &:hover {
-    background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
+    background-color: var(--#{$variable-prefix}btn-color);
     color: var(--#{$variable-prefix}btn-color-text);
-    border-color: rgba(var(--#{$variable-prefix}btn-color), 1);
+    border-color: var(--#{$variable-prefix}btn-color);
   }
 }
 
@@ -180,23 +172,15 @@
   }
 }
 
-
-$btn-colors: $theme-colors;
-
-@if $enable-extra-colors {
-  $btn-colors: map-merge($btn-colors, $colors);
-}
-
-@if $enable-social-colors {
-  $btn-colors: map-merge($btn-colors, $social-colors);
-}
-
-@each $name, $color in $btn-colors {
+//
+// Button color variations
+//
+@each $name, $color in theme-colors() {
   .btn-#{$name},
   .btn-outline-#{$name},
   .btn-ghost-#{$name} {
-    --#{$variable-prefix}btn-color: #{hex-to-rgb($color)};
-    --#{$variable-prefix}btn-color-darker: #{hex-to-rgb(theme-color-darker($color))};
+    --#{$variable-prefix}btn-color: #{$color};
+    --#{$variable-prefix}btn-color-interactive: #{theme-color-darker($color)};
     --#{$variable-prefix}btn-color-text: #{color-contrast($color)};
   }
 

package/src/scss/ui/_calendars.scss

@@ -28,8 +28,8 @@
 }
 
 .calendar-date {
-  flex: 0 0 (100% / 7);
-  max-width: (100% / 7);
+  flex: 0 0 divide(100%, 7);
+  max-width: divide(100%, 7);
   padding: .2rem;
   text-align: center;
   border: 0;
@@ -55,7 +55,7 @@
     border: 1px solid transparent;
     border-radius: $border-radius-pill;
     outline: 0;
-    transition: background .3s, border .3s, box-shadow .32s, color .3s;
+    @include transition(background $transition-time, border $transition-time, box-shadow .32s, color $transition-time);
 
     &:hover {
       color: $primary;