@tabler/core 1.0.0-beta11 → 1.0.0-beta13

package/src/scss/ui/_nav.scss

@@ -7,13 +7,13 @@
 
   .nav {
     margin-left: 1.25rem;
-    border-left: 1px solid var(--#{$prefix}border-color);
+    border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
     padding-left: .5rem;
   }
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    font-weight: $font-weight-bold;
+    font-weight: var(--#{$prefix}font-weight-bold);
   }
 
   &.nav-pills {
@@ -25,7 +25,7 @@
 // Nav bordered
 //
 .nav-bordered {
-  border-bottom: $nav-bordered-border-width solid $nav-bordered-border-color;
+  border-bottom: $nav-bordered-border-width var(--#{$prefix}border-style) $nav-bordered-border-color;
 
   .nav-item {
     + .nav-item {
@@ -38,7 +38,7 @@
     padding-right: 0;
     margin: 0 0 (- $nav-bordered-border-width );
     border: 0;
-    border-bottom: $nav-bordered-link-active-border-width solid transparent;
+    border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
     color: $text-muted;
   }
 
@@ -53,7 +53,7 @@
 .nav-tabs-alt {
   .nav-link {
     font-size: 13px;
-    font-weight: $font-weight-bold;
+    font-weight: var(--#{$prefix}font-weight-bold);
     text-transform: uppercase;
   }
 }
@@ -80,10 +80,10 @@
 }
 
 .nav-link-icon {
-  width: 1.5rem;
-  height: $icon-size;
-  margin-right: .25rem;
-  opacity: $text-muted-opacity;
+  width: $nav-link-icon-size;
+  height: $nav-link-icon-size;
+  margin-right: .5rem;
+  color: $nav-link-icon-color;
 
   svg {
     display: block;

package/src/scss/ui/_offcanvas.scss

@@ -1,9 +1,5 @@
-.offcanvas {
-  background: var(--#{$prefix}card-bg);
-}
-
 .offcanvas-header {
-  border-bottom: 1px solid $border-color-transparent;
+  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent;
 }
 
 .offcanvas-footer {
@@ -12,7 +8,7 @@
 
 .offcanvas-title {
   font-size: $h3-font-size;
-  font-weight: $font-weight-medium;
+  font-weight: var(--#{$prefix}font-weight-medium);
   line-height: 1.5rem;
 }
 

package/src/scss/ui/_pagination.scss

@@ -4,16 +4,20 @@
 
 .page-link {
   min-width: 1.75rem;
-  border-radius: $border-radius;
-
-  &:hover {
-    background: transparent;
-  }
+  border-radius: var(--#{$prefix}border-radius);
 }
 
 .page-item {
   text-align: center;
 
+  &:not(.active) {
+    .page-link {
+      &:hover {
+        background: transparent;
+      }
+    }
+  }
+
   &.page-prev,
   &.page-next {
     flex: 0 0 50%;
@@ -39,7 +43,7 @@
 
 .page-item-title {
   font-size: $h3-font-size;
-  font-weight: $font-weight-normal;
+  font-weight: var(--#{$prefix}font-weight-normal);
   color: $body-color;
 
   .page-link:hover & {

package/src/scss/ui/_placeholder.scss

@@ -4,6 +4,6 @@
   }
 
   &:not(.avatar):not([class*="card-img-"]), {
-    border-radius: $border-radius;
+    border-radius: var(--#{$prefix}border-radius);
   }
 }

package/src/scss/ui/_progress.scss

@@ -11,27 +11,29 @@
   }
 }
 
+/**
+Progress
+ */
 .progress {
   position: relative;
   width: 100%;
   line-height: $progress-height;
   appearance: none;
-  background: var(--#{$prefix}border-color-light);
 
   &::-webkit-progress-bar {
-    background: $gray-100;
+    background: var(--#{$prefix}progress-bg);
   }
 
   &::-webkit-progress-value {
-    background-color: $primary;
+    background-color: var(--#{$prefix}primary);
   }
 
   &::-moz-progress-bar {
-    background-color: $primary;
+    background-color: var(--#{$prefix}primary);
   }
 
   &::-ms-fill {
-    background-color: $primary;
+    background-color: var(--#{$prefix}primary);
     border: none;
   }
 }
@@ -40,6 +42,9 @@
   height: .25rem;
 }
 
+/**
+Progress bar
+ */
 .progress-bar {
   height: 100%;
 }
@@ -63,6 +68,40 @@
 
 .progress-separated {
   .progress-bar {
-    border-right: 2px solid var(--#{$prefix}card-bg, #{$card-bg});
+    box-shadow: 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
   }
 }
+
+
+/**
+Progressbg
+ */
+.progressbg {
+  position: relative;
+  padding: .25rem .5rem;
+  display: flex;
+}
+
+.progressbg-text {
+  position: relative;
+  z-index: 1;
+  @include text-truncate;
+}
+
+.progressbg-progress {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+  height: 100%;
+  background: transparent;
+  pointer-events: none;
+}
+
+.progressbg-value {
+  font-weight: var(--#{$prefix}font-weight-medium);
+  margin-left: auto;
+  padding-left: 2rem;
+}

package/src/scss/ui/_ribbons.scss

@@ -1,19 +1,22 @@
 // stylelint-disable declaration-no-important
 
 .ribbon {
+  --#{$prefix}ribbon-margin: #{$card-ribbon-margin};
+  --#{$prefix}ribbon-border-radius: #{$card-ribbon-border-radius};
   position: absolute;
   top: .75rem;
-  right: -($ribbon-margin);
+  right: calc(-1 * var(--#{$prefix}ribbon-margin));
   z-index: 1;
   padding: .25rem .75rem;
-  font-size: $h6-font-size;
-  font-weight: $font-weight-bold;
-  line-height: 1.5rem;
+  font-size: $card-ribbon-font-size;
+  font-weight: var(--#{$prefix}font-weight-bold);
+  line-height: 1;
   color: $white;
   text-align: center;
   text-transform: uppercase;
-  background: $primary;
-  border-color: $primary;
+  background: var(--#{$prefix}primary);
+  border-color: var(--#{$prefix}primary);
+  border-radius: var(--#{$prefix}ribbon-border-radius) 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -28,7 +31,7 @@
     height: 0;
     content: "";
     filter: brightness(70%);
-    border: ($ribbon-margin * .5) solid;
+    border: calc(var(--#{$prefix}ribbon-margin) * .5) solid;
     border-color: inherit;
     border-top-color: transparent;
     border-right-color: transparent;
@@ -37,11 +40,11 @@
   @if $enable-extra-colors {
     @each $color, $value in $extra-colors {
       &.bg-#{$color} {
-        border-color: $value;
+        border-color: var(--#{$prefix}#{$color});
       }
 
       &.bg-#{$color}-lt {
-        border-color: theme-color-lighter($value) !important;
+        border-color: rgba(var(--#{$prefix}#{$color}-rgb), .1) !important;
       }
     }
   }
@@ -54,10 +57,11 @@
 }
 
 .ribbon-top {
-  top: -($ribbon-margin);
+  top: calc(-1 * var(--#{$prefix}ribbon-margin));
   right: .75rem;
   width: 2rem;
   padding: .5rem 0;
+  border-radius: 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius);
 
   &:before {
     top: 0;
@@ -82,7 +86,7 @@
 
 .ribbon-start {
   right: auto;
-  left: -($ribbon-margin);
+  left: calc(-1 * var(--#{$prefix}ribbon-margin));
 
   &:before {
     top: auto;
@@ -101,6 +105,7 @@
 
 .ribbon-bookmark {
   padding-left: .25rem;
+  border-radius: 0 0 var(--#{$prefix}ribbon-border-radius) 0;
 
   &:after {
     position: absolute;
@@ -119,7 +124,6 @@
 
   &.ribbon-left {
     padding-right: .5rem;
-    padding-left: .5rem;
 
     &:after {
       right: auto;
@@ -135,6 +139,7 @@
     padding-right: 0;
     padding-bottom: .25rem;
     padding-left: 0;
+    border-radius: 0 var(--#{$prefix}ribbon-border-radius) 0 0;
 
     &:after {
       top: 100%;

package/src/scss/ui/_status.scss

@@ -55,7 +55,7 @@
   text-transform: none;
   letter-spacing: normal;
   border-radius: $border-radius-pill;
-  font-weight: $font-weight-medium;
+  font-weight: var(--#{$prefix}font-weight-medium);
   line-height: 1;
   margin: 0;
 
@@ -69,7 +69,7 @@
 }
 
 .status-lite {
-  border: 1px solid var(--#{$prefix}border-color) !important;
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
   background: transparent !important;
   color: var(--#{$prefix}body-text) !important;
 }
@@ -97,7 +97,7 @@
 
 .status-dot-animated {
   &:before {
-    content: '';
+    content: "";
     position: absolute;
     inset: 0;
     z-index: 0;

package/src/scss/ui/_steps.scss

@@ -39,7 +39,7 @@
   margin: 2rem 0;
   list-style: none;
   @include step-size(2px, .5rem);
-  @include step-color($primary);
+  @include step-color( var(--#{$prefix}primary) );
 }
 
 @each $color, $value in $extra-colors {
@@ -81,16 +81,16 @@
     box-sizing: content-box;
     display: block;
     content: "";
-    border: 2px solid $white;
+    border: 2px var(--#{$prefix}border-style) $card-bg;
     border-radius: $border-radius-pill;
     transform: translateX(-50%);
   }
 
   &.active {
-    font-weight: $font-weight-bold;
+    font-weight: var(--#{$prefix}font-weight-bold);
 
     &:before {
-      background: $white;
+      background: $card-bg;
     }
 
     & ~ .step-item {

package/src/scss/ui/_tables.scss

@@ -1,3 +1,18 @@
+@include dark-mode {
+  $table-variants: (
+    "primary":    shift-color($primary, $table-bg-scale-dark),
+    "secondary":  shift-color($secondary, $table-bg-scale-dark),
+    "success":    shift-color($success, $table-bg-scale-dark),
+    "info":       shift-color($info, $table-bg-scale-dark),
+    "warning":    shift-color($warning, $table-bg-scale-dark),
+    "danger":     shift-color($danger, $table-bg-scale-dark),
+  );
+
+  @each $color, $value in $table-variants {
+    @include table-variant($color, $value);
+  }
+}
+
 .table {
   thead {
     th {
@@ -13,16 +28,16 @@
       }
     }
   }
-
-  > :not(:first-child) {
-    border-top-width: $table-border-width;
-  }
 }
 
 .table-responsive {
   .table {
     margin-bottom: 0;
   }
+
+  + .card-footer {
+    border-top: 0;
+  }
 }
 
 .table-transparent {
@@ -88,7 +103,7 @@
         }
 
         tr {
-          border-bottom: 1px solid $table-border-color;
+          border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $table-border-color;
         }
 
         .btn {
@@ -123,7 +138,7 @@
   &:after,
   &.asc:after,
   &.desc:after {
-    content: '';
+    content: "";
     display: inline-flex;
     width: 1rem;
     height: 1rem;
@@ -141,4 +156,10 @@
     background: $table-sort-asc-bg-image no-repeat center;
     opacity: 1;
   }
+}
+
+.table-borderless {
+  thead th {
+    background: transparent;
+  }
 }

package/src/scss/ui/_toasts.scss

@@ -1,7 +1,6 @@
 .toast {
   background: $white;
-  border: $alert-border-width solid $alert-border-color;
-  border-left: .25rem solid var(--#{$prefix}toast-color);
+  border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
   box-shadow: $alert-shadow;
 
   .toast-header {

package/src/scss/ui/_tracking.scss

@@ -0,0 +1,29 @@
+.tracking {
+  --#{$prefix}tracking-height: #{$tracking-height};
+  --#{$prefix}tracking-gap-width: #{$tracking-gap-width};
+  --#{$prefix}tracking-block-border-radius: #{$tracking-border-radius};
+  display: flex;
+  gap: var(--#{$prefix}tracking-gap-width);
+}
+
+.tracking-squares {
+  --#{$prefix}tracking-block-border-radius: var(--#{$prefix}border-radius-sm);
+
+  .tracking-block {
+    height: auto;
+
+    &:before {
+      content: "";
+      display: block;
+      padding-top: 100%;
+    }
+  }
+}
+
+.tracking-block {
+  flex: 1;
+  border-radius: var(--#{$prefix}tracking-block-border-radius);
+  height: var(--#{$prefix}tracking-height);
+  min-width: .25rem;
+  background: var(--#{$prefix}border-color);
+}

package/src/scss/ui/_type.scss

@@ -29,39 +29,51 @@ h6,
   }
 }
 
-h1 {
-  line-height: $h1-line-height;
+h1,
+.h1 {
+  font-size: var(--#{$prefix}font-size-h1);
+  line-height: var(--#{$prefix}line-height-h1);
 }
 
-h2 {
-  line-height: $h2-line-height;
+h2,
+.h2 {
+  font-size: var(--#{$prefix}font-size-h2);
+  line-height: var(--#{$prefix}line-height-h2);
 }
 
-h3 {
-  line-height: $h3-line-height;
+h3,
+.h3 {
+  font-size: var(--#{$prefix}font-size-h3);
+  line-height: var(--#{$prefix}line-height-h3);
 }
 
-h4 {
-  line-height: $h4-line-height;
+h4,
+.h4 {
+  font-size: var(--#{$prefix}font-size-h4);
+  line-height: var(--#{$prefix}line-height-h4);
 }
 
-h5 {
-  line-height: $h5-line-height;
+h5,
+.h5 {
+  font-size: var(--#{$prefix}font-size-h5);
+  line-height: var(--#{$prefix}line-height-h5);
 }
 
-h6 {
-  line-height: $h6-line-height;
+h6,
+.h6 {
+  font-size: var(--#{$prefix}font-size-h6);
+  line-height: var(--#{$prefix}line-height-h6);
 }
 
 strong,
 .strong,
 b {
-  font-weight: $font-weight-bold;
+  font-weight: var(--#{$prefix}font-weight-bold);
 }
 
 blockquote {
   padding-left: 1rem;
-  border-left: 2px solid $border-color;
+  border-left: 2px var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 
   p {
     margin-bottom: 1rem;
@@ -93,36 +105,28 @@ dl {
   }
 }
 
-code {
-  padding: 2px 4px;
-  background: rgba($code-color, .03);
-  border: 1px solid rgba($code-color, .064);
-  border-radius: $border-radius;
-  font-weight: $font-weight-normal;
-}
-
-
 pre {
-  padding: 1rem;
-  overflow: auto;
-  font-size: $h5-font-size;;
-  hyphens: none;
-  line-height: $code-line-height;
-  tab-size: 3;
-  border-radius: $border-radius;
-  white-space: pre-wrap;
-  background: mix($light, #ffffff, 50%);
-  border: 1px solid $border-color-transparent;
-  -webkit-font-smoothing: auto;
+  padding: $pre-padding;
+  background: $pre-bg;
+  color: $pre-color;
+  border-radius: var(--#{$prefix}border-radius);
 
   code {
-    padding: 0;
-    background: none;
-    border: none;
-    border-radius: 0;
+    background: transparent;
   }
 }
 
+code {
+  background: var(--#{$prefix}code-bg);
+  padding: 2px 4px;
+  border-radius: var(--#{$prefix}border-radius);
+}
+
+kbd {
+  font: inherit;
+  box-shadow: 0 0 0 1px var(--#{$prefix}border-color), 0 3px 0 0 var(--#{$prefix}bg-surface), 0 3px 0 1px var(--#{$prefix}border-color);
+}
+
 img {
   max-width: 100%;
 }
@@ -136,8 +140,7 @@ img {
 Selection
  */
 ::selection {
-  color: $white;
-  background-color: lighten($primary, 8%);
+  background-color: rgba(var(--#{$prefix}primary-rgb), .16);
 }
 
 /**

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

@@ -5,7 +5,19 @@ Form check
   user-select: none;
 
   &.form-check-highlight .form-check-input:not(:checked) ~ .form-check-label {
-    opacity: $text-muted-opacity;
+    color: var(--#{$prefix}muted);
+  }
+
+  .form-check-label-off {
+    color: var(--#{$prefix}muted);
+  }
+
+  .form-check-input:checked ~ .form-check-label-off {
+    display: none;
+  }
+
+  .form-check-input:not(:checked) ~ .form-check-label-on {
+    display: none;
   }
 }
 
@@ -57,9 +69,22 @@ Form switch
 }
 
 .form-switch-lg {
+  padding-left: 3.5rem;
+  min-height: 1.5rem;
+
   .form-check-input {
     height: 1.5rem;
     width: 2.75rem;
     background-size: 1.5rem;
+    margin-left: -3.5rem;
+  }
+
+  .form-check-label {
+    padding-top: .125rem;
   }
+}
+
+/*Correction of Form-check position*/
+.form-check-input:checked{
+  border: none;
 }

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

@@ -20,7 +20,7 @@ Color Input
   width: 1.5rem;
   height: 1.5rem;
   color: $white;
-  border: 1px solid $border-color-transparent;
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent;
   border-radius: 3px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
 
@@ -42,7 +42,7 @@ Color Input
   }
 
   .form-colorinput-input:focus ~ & {
-    border-color: $primary;
+    border-color: var(--#{$prefix}primary);
     box-shadow: $input-btn-focus-box-shadow;
   }
 

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

@@ -24,7 +24,7 @@ Icon input
   align-items: center;
   justify-content: center;
   min-width: 2.5rem;
-  color: $text-muted;
+  color: var(--#{$prefix}icon-color);
   pointer-events: none;
   font-size: 1.2em;