@tabler/core 1.0.0-beta17 → 1.0.0-beta19

package/src/scss/demo/_examples.scss

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

package/src/scss/layout/_dark.scss

@@ -1,183 +1,68 @@
 // 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-lighten};
-    --#{$prefix}bg-surface-tertiary: #{$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;
-  }
-
-  .timeline-event-icon {
-    background-color: #{$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,63 +1,3 @@
-@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};
-  --#{$prefix}scrollbar-color: var(--#{$prefix}white-rgb);
-  @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;
-}
 
 @mixin navbar-vertical-nav {
   .navbar-collapse {
@@ -74,7 +14,7 @@
       margin-right: 0;
 
       .nav-link {
-        padding: .5rem calc($container-padding-x / 2);
+        padding: .5rem calc(#{$container-padding-x} / 2);
         justify-content: flex-start;
       }
     }
@@ -97,7 +37,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,
@@ -107,11 +47,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);
       }
     }
 
@@ -133,14 +73,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: var(--#{$prefix}body-color);
+  --#{$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;
@@ -150,12 +93,6 @@ Navbar
     min-height: 0;
   }
 
-  @include navbar-color();
-
-  @include dark-mode {
-    @include navbar-dark();
-  }
-
   .dropdown-menu {
     position: absolute;
     z-index: $zindex-fixed;
@@ -202,20 +139,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;
           }
         }
 
@@ -255,6 +189,7 @@ Navbar brand
   font-weight: $navbar-brand-font-weight;
   margin: 0;
   line-height: 1;
+  gap: $spacer-2;
 }
 
 .navbar-brand-image {
@@ -320,21 +255,6 @@ 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 transparent
  */

package/src/scss/layout/_page.scss

@@ -6,7 +6,10 @@
 }
 
 .page-center {
-  justify-content: center;
+  .container {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
 }
 
 .page-wrapper {
@@ -28,14 +31,14 @@
 
 // Content body
 .page-body {
-  margin-top: var(--#{$prefix}content-padding);
-  margin-bottom: var(--#{$prefix}content-padding);
+  margin-top: var(--#{$prefix}page-padding-y);
+  margin-bottom: var(--#{$prefix}page-padding-y);
 }
 
 .page-body-card {
   background: var(--#{$prefix}bg-surface);
   border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $card-border-color;
-  padding: var(--#{$prefix}content-padding) 0;
+  padding: var(--#{$prefix}page-padding) 0;
   margin-bottom: 0;
   flex: 1;
 
@@ -80,13 +83,13 @@
   justify-content: center;
 
   .page-wrapper & {
-    margin: var(--#{$prefix}content-padding) 0 0;
+    margin: var(--#{$prefix}page-padding-y) 0 0;
   }
 }
 
 .page-header-border {
   border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  padding: var(--#{$prefix}content-padding) 0;
+  padding: var(--#{$prefix}page-padding-y) 0;
   margin: 0 !important;
   background-color: var(--#{$prefix}bg-surface);
 }

package/src/scss/layout/_root.scss

@@ -5,11 +5,18 @@
 
   @each $name, $color in map-merge($theme-colors, $gray-colors) {
     --#{$prefix}#{$name}: #{$color};
+    --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
     --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
     --#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
-    --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
+    --#{$prefix}#{$name}-lt: #{theme-color-lighter($color)};
+    --#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
   }
 
+  @each $name, $value in $spacers {
+    --#{$prefix}spacer-#{$name}: #{$value};
+  }
+  --#{$prefix}spacer: #{$spacer};
+
   --#{$prefix}bg-surface: #{$bg-surface};
   --#{$prefix}bg-surface-secondary: #{$bg-surface-secondary};
   --#{$prefix}bg-surface-tertiary: #{$bg-surface-tertiary};
@@ -17,8 +24,10 @@
   --#{$prefix}bg-forms: var(--#{$prefix}bg-surface);
 
   --#{$prefix}border-color: #{$border-color};
-  --#{$prefix}border-color-light: #{$border-color-light};
-  --#{$prefix}border-color-active: #{$border-color-active};
+  --#{$prefix}border-color-translucent: #{$border-color-translucent};
+  --#{$prefix}border-dark-color: #{$border-dark-color};
+  --#{$prefix}border-dark-color-translucent: #{$border-dark-color-translucent};
+  --#{$prefix}border-active-color: #{$border-active-color};
 
   --#{$prefix}icon-color: #{$icon-color};
 
@@ -30,11 +39,16 @@
   --#{$prefix}code-color: #{$code-color};
   --#{$prefix}code-bg: #{$code-bg};
 
-  --#{$prefix}content-padding: #{$content-padding};
-  --#{$prefix}dark-mode-border-color: #{$dark-mode-border-color};
-  --#{$prefix}dark-mode-border-color-light: #{$dark-mode-border-color-light};
-  --#{$prefix}dark-mode-border-color-active: #{$dark-mode-border-color-active};
+  --#{$prefix}dark-mode-border-color: #{$border-color-dark};
+  --#{$prefix}dark-mode-border-color-translucent: #{$border-color-translucent-dark};
+  --#{$prefix}dark-mode-border-color-active: #{$border-color-active-dark};
+  --#{$prefix}dark-mode-border-dark-color: #{$border-dark-color-dark};
 
+  --#{$prefix}page-padding: #{$page-padding};
+  --#{$prefix}page-padding-y: #{$page-padding-y};
+  @include media-breakpoint-down($cards-grid-breakpoint) {
+    --#{$prefix}page-padding: #{$page-padding-sm};
+  }
 
   @each $name, $value in $font-weights {
     --#{$prefix}font-weight-#{$name}: #{$value};

package/src/scss/mixins/_functions.scss

@@ -1,9 +1,5 @@
-@function theme-color-lighter($color, $transparent: false) {
-  @if ($transparent) {
-    @return rgba($color, .1);
-  } @else {
-    @return tint-color($color, 10%);
-  }
+@function theme-color-lighter($color, $background: #fff) {
+  @return mix($color, $background, 10%);
 }
 
 @function theme-color-darker($color) {

package/src/scss/mixins/_mixins.scss

@@ -48,38 +48,6 @@
   filter: brightness(0) invert(1);
 }
 
-@mixin dark-mode {
-  @if $enable-dark-mode {
-    $selector: &;
-
-    @media not print {
-      @if ($selector) {
-        .theme-dark & {
-          @content
-        }
-      } @else {
-        .theme-dark {
-          @content
-        }
-      }
-    }
-
-    @media not print {
-      @media (prefers-color-scheme: dark) {
-        @if ($selector) {
-          .theme-dark-auto & {
-            @content
-          }
-        } @else {
-          .theme-dark-auto {
-            @content
-          }
-        }
-      }
-    }
-  }
-}
-
 //
 // Elements list
 //