@tabler/core 1.0.0-beta16 → 1.0.0-beta18

package/src/scss/demo/_examples.scss

@@ -22,7 +22,7 @@
 .example-content {
   font-size: $font-size-base;
   line-height: $line-height-base;
-  color: $body-color;
+  color: var(--#{$prefix}body-color);
   flex: 1;
   max-width: 100%;
 
@@ -76,20 +76,4 @@
   top: 0;
   height: 100%;
   border-radius: 2px 2px 0 0;
-}
-
-@include dark-mode {
-  .example {
-    background-color: $dark-mode-darken;
-    border-color: $dark-mode-border-color;
-  }
-
-  .example-content {
-    color: $dark-mode-text;
-  }
-
-  .example-code {
-    border-color: $dark-mode-border-color;
-    border-top: none;
-  }
 }

package/src/scss/demo.scss

@@ -1,21 +1,13 @@
-
-
 @import "config";
 @import "demo/highlight";
 @import "demo/examples";
 
-
 .card-sponsor {
-  background: #dbe7f6 no-repeat center/100% 100%;
-  border-color: #548ed2;
+  background: var(--#{$prefix}primary-lt) no-repeat center/100% 100%;
+  border-color: var(--#{$prefix}primary);
   min-height: 316px;
 }
 
-body.no-transitions * {
-  transition: none !important;
-}
-
-
 .dropdown-menu-demo {
   display: inline-block;
   width: 100%;
@@ -53,13 +45,12 @@ body.no-transitions * {
 }
 
 .demo-dividers {
-  >p {
-    opacity: .2;
+  > p {
+    opacity: 0.2;
     user-select: none;
   }
 }
 
-
 $demo-icon-size: 4rem;
 .demo-icons-list {
   display: flex;
@@ -68,7 +59,7 @@ $demo-icon-size: 4rem;
   margin: 0 -2px -1px 0;
   list-style: none;
 
-  >* {
+  > * {
     flex: 1 0 $demo-icon-size;
   }
 }
@@ -84,9 +75,11 @@ $demo-icon-size: 4rem;
   justify-content: center;
   aspect-ratio: 1;
   text-align: center;
-  padding: .5rem;
-  border-right: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+  padding: 0.5rem;
+  border-right: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
+    var(--#{$prefix}border-color);
+  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
+    var(--#{$prefix}border-color);
   color: inherit;
   cursor: pointer;
 
@@ -101,7 +94,6 @@ $demo-icon-size: 4rem;
   }
 }
 
-
 //
 // Settings
 //
@@ -121,12 +113,31 @@ $demo-icon-size: 4rem;
   height: 3rem;
   width: 3rem;
   position: relative;
-  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
+    var(--#{$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(--#{$prefix}primary) 50%, $light 50%); }
-}
+  &-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(--#{$prefix}primary) 50%,
+      $light 50%
+    );
+  }
+}

package/src/scss/layout/_core.scss

@@ -1,6 +1,5 @@
 // stylelint-disable property-no-vendor-prefix
 body {
-  overflow-y: scroll;
   letter-spacing: $body-letter-spacing;
   touch-action: manipulation;
   text-rendering: optimizeLegibility;
@@ -47,7 +46,7 @@ body {
     margin: 0 auto;
     max-width: var(--#{$prefix}theme-boxed-width);
     border-radius: var(--#{$prefix}theme-boxed-border-radius);
-    color: $body-color;
+    color: var(--#{$prefix}body-color);
 
     @include media-breakpoint-up(md) {
       border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);

package/src/scss/layout/_dark.scss

@@ -1,189 +1,68 @@
-/*!
- * 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;
+
+body {
+  &:not(.theme-dark):not([data-bs-theme="dark"]) {
+    .hide-theme-light {
+      display: none !important;
+    }
+  }
+
+  &.theme-dark,
+  &[data-bs-theme="dark"] {
+    .hide-theme-dark {
+      display: none !important;
+    }
+  }
 }
 
-@include dark-mode {
-  & {
-    --#{$prefix}body-color: #{$dark-mode-text};
-    --#{$prefix}body-color-rgb: #{to-rgb($dark-mode-text)};
-    --#{$prefix}muted: rgba(153, 159, 164, 1);
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    --#{$prefix}body-color: #{$body-color-dark};
+    --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+    --#{$prefix}muted: #{$text-muted-dark};
 
-    --#{$prefix}body-bg: #{$dark-mode-darken};
-    --#{$prefix}body-bg-rgb: #{to-rgb($dark-mode-darken)};
+    --#{$prefix}body-bg: #{$darken-dark};
+    --#{$prefix}body-bg-rgb: #{to-rgb($darken-dark)};
+    --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
 
-    --#{$prefix}bg-forms: #{$dark-mode-darken};
+    --#{$prefix}bg-forms: #{$darken-dark};
     --#{$prefix}bg-surface: #{$dark};
-    --#{$prefix}bg-surface-dark: #{$dark-mode-darken};
-    --#{$prefix}bg-surface-secondary: #{$dark-mode-darken};
+    --#{$prefix}bg-surface-dark: #{$darken-dark};
+    --#{$prefix}bg-surface-secondary: #{$lighten-dark};
+    --#{$prefix}bg-surface-tertiary: #{$darken-dark};
 
     --#{$prefix}link-color: #{lighten($primary, 8%)};
     --#{$prefix}link-hover-color: #{$primary};
 
-    --#{$prefix}active-bg: #{$dark-mode-lighten};
+    --#{$prefix}active-bg: #{$lighten-dark};
     --#{$prefix}disabled-color: var(--#{$prefix}gray-700);
 
-    --#{$prefix}card-bg: #{$dark-mode-darken};
-    --#{$prefix}card-bg-hover: #{$dark-mode-darken};
-    --#{$prefix}card-bg-rgb: #{to-rgb($dark-mode-darken)};
-    --#{$prefix}card-color: #{$dark-mode-text};
-
     --#{$prefix}border-color: var(--#{$prefix}dark-mode-border-color);
-    --#{$prefix}border-color-light: var(--#{$prefix}dark-mode-border-color-light);
-    --#{$prefix}border-color-active: var(--#{$prefix}dark-mode-border-color-active);
+    --#{$prefix}border-color-translucent: var(
+      --#{$prefix}dark-mode-border-color-translucent
+    );
+    --#{$prefix}border-dark-color: var(--#{$prefix}dark-mode-border-dark-color);
+    --#{$prefix}border-color-active: var(
+      --#{$prefix}dark-mode-border-color-active
+    );
 
-    --#{$prefix}btn-color: #{$dark-mode-darken};
+    --#{$prefix}btn-color: #{$darken-dark};
 
     --#{$prefix}code-color: var(--#{$prefix}body-color);
-    --#{$prefix}code-bg: #{$dark-mode-border-color-light};
-
-    color: $dark-mode-text;
-    background-color: $dark-mode-darken;
-  }
-
-  .page {
-    color: $dark-mode-text;
-  }
-
-  .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,
-  .toast,
-  .toast-header,
-  .alert:not(.alert-important) {
-    background-color: var(--#{$prefix}bg-surface);
-    color: inherit;
-  }
-
-  .modal {
-    --#{$prefix}modal-border-color: var(--#{$prefix}border-color);
-  }
-
-  .bg-light {
-    background-color: $dark-mode-darken !important;
-  }
-
-  .card-tabs .nav-tabs .nav-link {
-    background-color: $dark-mode-darken;
-    color: inherit;
-  }
-
-  .card-tabs .nav-tabs .nav-link.active {
-    background-color: $dark;
-    color: inherit;
-  }
-
-  .form-check-input:not(:checked),
-  .form-select,
-  .form-file-text,
-  .form-control,
-  .form-selectgroup-check {
-    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;
-  }
+    --#{$prefix}code-bg: #{$border-dark-color-dark};
 
-  .input-group-text {
-    border-color: $dark-mode-border-color;
-  }
-
-  .highlight {
-    background-color: $dark-mode-darken;
-  }
-
-  .avatar {
-    --#{$prefix}avatar-bg: #{$dark-mode-lighten};
-  }
-
-  .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(--#{$prefix}border-color);
-  }
-
-  .apexcharts-legend-text {
-    color: inherit !important;
-  }
-
-  .navbar-brand-autodark {
-    @include autodark-image;
-  }
-
-  .table thead th,
-  .input-group-text {
-    background: transparent;
-  }
-
-  .list-group-header {
-    background: $dark-mode-darken;
-  }
-
-  .list-group-item {
-    //border-color: $border-color-transparent;
-  }
-
-  .list-group-item:not(.disabled):not(:disabled) {
-    color: $dark-mode-text;
-  }
-
-  .list-group-item {
-    &.disabled,
-    &:disabled {
-      color: $gray-600;
+    @each $color, $value in $theme-colors {
+      --#{$prefix}#{$color}-lt: #{theme-color-lighter($value, $dark)};
+      --#{$prefix}#{$color}-lt-rgb: #{to-rgb(
+          theme-color-lighter($value, $dark)
+        )};
     }
-  }
-
-  .apexcharts-radialbar-area {
-    stroke: $dark-mode-border-color;
-  }
-
-  .form-control.is-invalid,
-  .was-validated .form-control:invalid {
-    border-color: var(--#{$prefix}danger);
-  }
 
-  .form-control.is-valid,
-  .was-validated .form-control:valid {
-    border-color: var(--#{$prefix}success);
+    .navbar-brand-autodark {
+      .navbar-brand-image {
+        @include autodark-image;
+      }
+    }
   }
 }

package/src/scss/layout/_navbar.scss

@@ -1,61 +1,64 @@
-@mixin navbar-color($bg-color: transparent, $color: $navbar-light-color, $brand-color: $navbar-light-brand-color, $link-active-color: $navbar-light-active-color, $link-disabled-color: $navbar-light-disabled-color, $link-active-bg: $navbar-light-active-bg) {
-  --#{$prefix}navbar-active-bg: #{$link-active-bg};
-  --#{$prefix}navbar-bg: #{$bg-color};
-  color: $color;
-
-  .navbar-brand {
-    color: $brand-color;
-
-    &:hover,
-    &:focus {
-      color: $brand-color;
-      opacity: .8;
-    }
-  }
-
-  .navbar-nav {
-    .nav-link {
-      color: $color;
-
-      &:hover,
-      &:focus {
-        color: $link-active-color;
-      }
-
-      &.disabled {
-        color: $link-disabled-color;
-      }
-    }
-
-    .show > .nav-link,
-    .active > .nav-link,
-    .nav-link.show,
-    .nav-link.active {
-      color: $link-active-color;
-    }
-  }
-
-  .navbar-toggler {
-    color: $brand-color;
-    border-color: transparent;
-  }
-
-  .navbar-text {
-    color: $color;
-
-    a,
-    a:hover,
-    a:focus {
-      color: $color;
-    }
-  }
-}
+//@mixin navbar-color($bg-color: transparent, $color: $navbar-light-color, $brand-color: $navbar-light-brand-color, $link-active-color: $navbar-light-active-color, $link-disabled-color: $navbar-light-disabled-color, $link-active-bg: $navbar-light-active-bg) {
+//  --#{$prefix}navbar-active-bg: #{$link-active-bg};
+//  --#{$prefix}navbar-bg: #{$bg-color};
+//  color: $color;
+//
+//  .navbar-brand {
+//    color: $brand-color;
+//
+//    &:hover,
+//    &:focus {
+//      color: $brand-color;
+//      opacity: .8;
+//    }
+//  }
+//
+//  .navbar-nav {
+//    .nav-link {
+//      color: $color;
+//
+//      &:hover,
+//      &:focus {
+//        color: $link-active-color;
+//      }
+//
+//      &.disabled {
+//        color: $link-disabled-color;
+//      }
+//    }
+//
+//    .show > .nav-link,
+//    .active > .nav-link,
+//    .nav-link.show,
+//    .nav-link.active {
+//      color: $link-active-color;
+//    }
+//  }
+//
+//  .navbar-toggler {
+//    color: $brand-color;
+//    border-color: transparent;
+//  }
+//
+//  .navbar-text {
+//    color: $color;
+//
+//    a,
+//    a:hover,
+//    a:focus {
+//      color: $color;
+//    }
+//  }
+//}
 
 @mixin navbar-dark {
-  --#{$prefix}navbar-border-color: #{$dark-mode-border-color};
   --#{$prefix}navbar-bg: #{$dark};
-  @include navbar-color($dark, $navbar-dark-color, $navbar-dark-brand-color, $navbar-dark-active-color, $navbar-dark-disabled-color, $navbar-dark-active-bg);
-  @include scrollbar;
+  --#{$prefix}scrollbar-color: var(--#{$prefix}white-rgb);
+  --#{$prefix}navbar-color: var(--#{$prefix}gray-400);
+
+  @each $color, $value in $theme-colors {
+    --#{$prefix}#{$color}-lt-rgb: #{to-rgb(theme-color-lighter($value, $dark))};
+  }
 }
 
 @mixin navbar-vertical-nav {
@@ -73,7 +76,7 @@
       margin-right: 0;
 
       .nav-link {
-        padding: .5rem calc($container-padding-x / 2);
+        padding: .5rem calc(#{$container-padding-x} / 2);
         justify-content: flex-start;
       }
     }
@@ -96,7 +99,7 @@
         min-width: 0;
         display: flex;
         width: auto;
-        padding-left: add(calc($container-padding-x / 2), 1.75rem);
+        padding-left: add(calc(#{$container-padding-x} / 2), 1.75rem);
         color: inherit;
 
         &.active,
@@ -106,11 +109,11 @@
       }
 
       .dropdown-menu .dropdown-item {
-        padding-left: add(calc($container-padding-x / 2), 3.25rem);
+        padding-left: add(calc(#{$container-padding-x} / 2), 3.25rem);
       }
 
       .dropdown-menu .dropdown-menu .dropdown-item {
-        padding-left: add(calc($container-padding-x / 2), 4.75rem);
+        padding-left: add(calc(#{$container-padding-x} / 2), 4.75rem);
       }
     }
 
@@ -132,14 +135,17 @@
 Navbar
  */
 .navbar {
+  --#{$prefix}navbar-bg: var(--#{$prefix}bg-surface);
   --#{$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-bg: transparent;
+  --#{$prefix}navbar-color: inherit;
+  --#{$prefix}navbar-border-color: #{$navbar-border-color};
   align-items: stretch;
   min-height: $navbar-height;
   box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 var(--#{$prefix}navbar-border-color);
   background: var(--#{$prefix}navbar-bg);
+  color: var(--#{$prefix}navbar-color);
 
   .navbar-collapse & {
     flex-grow: 1;
@@ -149,12 +155,6 @@ Navbar
     min-height: 0;
   }
 
-  @include navbar-color();
-
-  @include dark-mode {
-    @include navbar-dark();
-  }
-
   .dropdown-menu {
     position: absolute;
     z-index: $zindex-fixed;
@@ -201,20 +201,17 @@ Navbar
           flex: 1 1 auto;
         }
 
-        &.navbar-light,
-        .navbar-light {
-          .nav-item.active {
-            position: relative;
+        .nav-item.active {
+          position: relative;
 
-            &:after {
-              content: "";
-              position: absolute;
-              left: 0;
-              right: 0;
-              bottom: -.25rem;
-              border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
-              border-bottom-width: 2px;
-            }
+          &:after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: -.25rem;
+            border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
+            border-bottom-width: 2px;
           }
         }
 
@@ -254,6 +251,7 @@ Navbar brand
   font-weight: $navbar-brand-font-weight;
   margin: 0;
   line-height: 1;
+  gap: $spacer-2;
 }
 
 .navbar-brand-image {
@@ -319,20 +317,12 @@ Navbar toggler
   }
 }
 
-/**
-Navbar light
- */
-.navbar-light {
-  --#{$prefix}navbar-border-color: #{$navbar-border-color};
-  --#{$prefix}navbar-bg: var(--#{$prefix}bg-surface);
-}
-
-/**
-Navbar dark
- */
-.navbar-dark {
-  @include navbar-dark;
-}
+// /**
+// Navbar dark
+//  */
+// .navbar-dark {
+//   @include navbar-dark;
+// }
 
 /**
 Navbar transparent
@@ -386,7 +376,7 @@ Navbar vertical
             z-index: $zindex-fixed;
             align-items: flex-start;
             @include transition(transform $transition-time);
-            overflow-x: auto;
+            overflow-y: scroll;
             padding: 0;
 
             &.navbar-right {