@tabler/core 1.0.0-beta10 → 1.0.0-beta12

package/src/scss/ui/_lists.scss

@@ -7,11 +7,11 @@
   background: $list-group-header-bg;
   padding: .5rem $list-group-item-padding-x;
   font-size: $h5-font-size;
-  font-weight: $font-weight-medium;
+  font-weight: var(--#{$prefix}font-weight-medium);
   line-height: 1;
   text-transform: uppercase;
-  color: $text-muted;
-  border-bottom: 1px solid var(--#{$variable-prefix}border-color);
+  color: $list-group-header-color;
+  border-bottom: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
 
   .list-group-flush > & {
     &:last-child {
@@ -21,20 +21,20 @@
 }
 
 .list-group-item {
-  background-color: rgba(27,125,241,0.02);
+  background-color: inherit;
 }
 
 .list-group-item.active {
-  background-color: inherit;
-  border-left-color: $yellow;
+  background-color: $dropdown-link-hover-bg;
+  border-left-color: $component-active-bg;
   border-left-width: $border-width-wide;
 }
 
 .list-group-item {
   &:active,
   &:focus,
-  &:hover{
-    background-color: inherit;
+  &:hover {
+    background-color: $dropdown-link-hover-bg;
   }
 }
 
@@ -42,13 +42,13 @@
   &.disabled,
   &:disabled {
     color: $gray-500;
-    background-color: rgba(27,125,241,0.02);
+    background-color: $dropdown-link-hover-bg;
   }
 }
 
 .list-bordered {
   .list-item {
-    border-top: 1px solid $border-color;
+    border-top: var(--#{$prefix}border-width) solid $border-color;
     margin-top: -1px;
 
     &:first-child {
@@ -69,6 +69,9 @@
   }
 }
 
+/**
+Timeline
+ */
 .list-timeline {
   position: relative;
   padding: 0;
@@ -114,7 +117,7 @@
 
 .list-timeline-title {
   margin: 0;
-  font-weight: $font-weight-bold;
+  font-weight: var(--#{$prefix}font-weight-bold);
 }
 
 .list-timeline-content {
@@ -164,19 +167,19 @@
 
 
 .list-group-transparent {
+  --#{$prefix}list-group-border-radius: 0;
   margin: 0 (- $list-group-item-padding-x);
 
   .list-group-item {
     background: none;
     border: 0;
-    border-radius: 3px;
 
     .icon {
       color: $text-muted;
     }
 
     &.active {
-      font-weight: $font-weight-bold;
+      font-weight: var(--#{$prefix}font-weight-bold);
       color: inherit;
       background: $active-bg;
 
@@ -200,7 +203,7 @@
   }
 
   & + & {
-    border-top: 1px solid $border-color;
+    border-top: var(--#{$prefix}border-width) solid $border-color;
   }
 }
 

package/src/scss/ui/_markdown.scss

@@ -2,7 +2,6 @@
 Markdown
  */
 .markdown {
-  font-size: 1rem;
   line-height: $line-height-lg;
 
   > :first-child {
@@ -23,7 +22,7 @@ Markdown
 
   > {
     h1, h2, h3, h4, h5, h6 {
-      font-weight: $font-weight-bold;
+      font-weight: var(--#{$prefix}font-weight-bold);
     }
   }
 
@@ -38,6 +37,6 @@ Markdown
   }
 
   > img {
-    border-radius: $border-radius;
+    border-radius: var(--#{$prefix}border-radius);
   }
 }

package/src/scss/ui/_modals.scss

@@ -19,7 +19,7 @@
   }
 
   & + & {
-    border-top: 1px solid var(--#{$variable-prefix}border-color);
+    border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
   }
 }
 

package/src/scss/ui/_nav.scss

@@ -7,13 +7,13 @@
 
   .nav {
     margin-left: 1.25rem;
-    border-left: 1px solid var(--#{$variable-prefix}border-color);
+    border-left: var(--#{$prefix}border-width) solid 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 {
@@ -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,9 @@
 .offcanvas {
-  background: var(--#{$variable-prefix}card-bg);
+  background: var(--#{$prefix}card-bg);
 }
 
 .offcanvas-header {
-  border-bottom: 1px solid $border-color-transparent;
+  border-bottom: var(--#{$prefix}border-width) solid $border-color-translucent;
 }
 
 .offcanvas-footer {
@@ -12,7 +12,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(--#{$variable-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(--#{$variable-prefix}card-bg, #{$card-bg});
+    border-right: 2px solid 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

@@ -7,13 +7,13 @@
   z-index: 1;
   padding: .25rem .75rem;
   font-size: $h6-font-size;
-  font-weight: $font-weight-bold;
+  font-weight: var(--#{$prefix}font-weight-bold);
   line-height: 1.5rem;
   color: $white;
   text-align: center;
   text-transform: uppercase;
-  background: $primary;
-  border-color: $primary;
+  background: var(--#{$prefix}primary);
+  border-color: var(--#{$prefix}primary);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -37,11 +37,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;
       }
     }
   }

package/src/scss/ui/_status.scss

@@ -40,26 +40,27 @@
 // Status
 //
 .status {
-  --#{$variable-prefix}status-color: #{$text-muted};
-  --#{$variable-prefix}status-color-rgb: #{to-rgb($text-muted)};
+  --#{$prefix}status-height: #{$status-height};
+  --#{$prefix}status-color: #{$text-muted};
+  --#{$prefix}status-color-rgb: #{to-rgb($text-muted)};
 
   display: inline-flex;
   align-items: center;
-  height: 2rem;
-  padding: .5rem .75rem;
+  height: var(--#{$prefix}status-height);
+  padding: .25rem .75rem;
   gap: .5rem;
-  color: var(--#{$variable-prefix}status-color);
-  background: rgba(var(--#{$variable-prefix}status-color-rgb), .1);
+  color: var(--#{$prefix}status-color);
+  background: rgba(var(--#{$prefix}status-color-rgb), .1);
   font-size: $font-size-base;
   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;
 
   .status-dot {
-    background: var(--#{$variable-prefix}status-color);
+    background: var(--#{$prefix}status-color);
   }
 
   .icon {
@@ -68,15 +69,15 @@
 }
 
 .status-lite {
-  border: 1px solid var(--#{$variable-prefix}border-color) !important;
+  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
   background: transparent !important;
-  color: var(--#{$variable-prefix}body-text) !important;
+  color: var(--#{$prefix}body-text) !important;
 }
 
-@each $name, $color in theme-colors() {
+@each $name, $color in $theme-colors {
   .status-#{$name} {
-    --#{$variable-prefix}status-color: #{$color};
-    --#{$variable-prefix}status-color-rgb: #{to-rgb($color)};
+    --#{$prefix}status-color: #{$color};
+    --#{$prefix}status-color-rgb: #{to-rgb($color)};
   }
 }
 
@@ -84,13 +85,13 @@
 // Status dot
 //
 .status-dot {
-  --#{$variable-prefix}status-dot-color: var(--#{$variable-prefix}status-color, #{$text-muted});
-  --#{$variable-prefix}status-size: #{$status-dot-size};
+  --#{$prefix}status-dot-color: var(--#{$prefix}status-color, #{$text-muted});
+  --#{$prefix}status-size: #{$status-dot-size};
   position: relative;
   display: inline-block;
-  width: var(--#{$variable-prefix}status-size);
-  height: var(--#{$variable-prefix}status-size);
-  background: var(--#{$variable-prefix}status-dot-color);
+  width: var(--#{$prefix}status-size);
+  height: var(--#{$prefix}status-size);
+  background: var(--#{$prefix}status-dot-color);
   border-radius: $border-radius-pill;
 }
 
@@ -121,24 +122,24 @@ $btn-colors: $theme-colors;
 // Status indicator
 //
 .status-indicator {
-  --#{$variable-prefix}status-indicator-size: 2.5rem;
-  --#{$variable-prefix}status-indicator-color: var(--#{$variable-prefix}status-color, #{$text-muted});
+  --#{$prefix}status-indicator-size: 2.5rem;
+  --#{$prefix}status-indicator-color: var(--#{$prefix}status-color, #{$text-muted});
   display: block;
   position: relative;
-  width: var(--#{$variable-prefix}status-indicator-size);
-  height: var(--#{$variable-prefix}status-indicator-size);
+  width: var(--#{$prefix}status-indicator-size);
+  height: var(--#{$prefix}status-indicator-size);
 }
 
 .status-indicator-circle {
-  --#{$variable-prefix}status-circle-size: .75rem;
+  --#{$prefix}status-circle-size: .75rem;
   position: absolute;
   left: 50%;
   top: 50%;
-  margin: calc(var(--#{$variable-prefix}status-circle-size) / -2) 0 0 calc(var(--#{$variable-prefix}status-circle-size) / -2);
-  width: var(--#{$variable-prefix}status-circle-size);
-  height: var(--#{$variable-prefix}status-circle-size);
+  margin: calc(var(--#{$prefix}status-circle-size) / -2) 0 0 calc(var(--#{$prefix}status-circle-size) / -2);
+  width: var(--#{$prefix}status-circle-size);
+  height: var(--#{$prefix}status-circle-size);
   border-radius: $border-radius-pill;
-  background: var(--#{$variable-prefix}status-color);
+  background: var(--#{$prefix}status-color);
 
   &:nth-child(1) {
     z-index: 3;

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 {
@@ -87,7 +87,7 @@
   }
 
   &.active {
-    font-weight: $font-weight-bold;
+    font-weight: var(--#{$prefix}font-weight-bold);
 
     &:before {
       background: $white;

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) solid $table-border-color;
         }
 
         .btn {
@@ -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(--#{$variable-prefix}toast-color);
   box-shadow: $alert-shadow;
 
   .toast-header {
@@ -15,6 +14,6 @@
 
 @each $state, $value in $theme-colors {
   .toast-#{$state} {
-    --#{$variable-prefix}toast-color: #{$value};
+    --#{$prefix}toast-color: #{$value};
   }
 }

package/src/scss/ui/_type.scss

@@ -43,20 +43,23 @@ h3 {
 
 h4 {
   line-height: $h4-line-height;
+  font-weight: var(--#{$prefix}font-weight-medium);
 }
 
 h5 {
   line-height: $h5-line-height;
+  font-weight: var(--#{$prefix}font-weight-medium);
 }
 
 h6 {
   line-height: $h6-line-height;
+  font-weight: var(--#{$prefix}font-weight-medium);
 }
 
 strong,
 .strong,
 b {
-  font-weight: $font-weight-bold;
+  font-weight: var(--#{$prefix}font-weight-bold);
 }
 
 blockquote {
@@ -93,36 +96,49 @@ 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;
-
-  code {
-    padding: 0;
-    background: none;
-    border: none;
-    border-radius: 0;
-  }
+  padding: $pre-padding;
+  background: $pre-bg;
+  color: var(--#{$prefix}code-color);
+  border-radius: var(--#{$prefix}border-radius);
 }
 
+code {
+  background: $pre-bg;
+  padding: 2px 4px;
+  border-radius: var(--#{$prefix}border-radius);
+}
+
+//code {
+//  padding: 2px 4px;
+//  background: rgba($code-color, .03);
+//  border: var(--#{$prefix}border-width) solid rgba($code-color, .064);
+//  border-radius: var(--#{$prefix}border-radius);
+//  font-weight: var(--#{$prefix}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: var(--#{$prefix}border-radius);
+//  white-space: pre-wrap;
+//  background: mix($light, #ffffff, 50%);
+//  border: var(--#{$prefix}border-width) solid $border-color-translucent;
+//  -webkit-font-smoothing: auto;
+//
+//  code {
+//    padding: 0;
+//    background: none;
+//    border: none;
+//    border-radius: 0;
+//  }
+//}
+
 img {
   max-width: 100%;
 }
@@ -136,8 +152,7 @@ img {
 Selection
  */
 ::selection {
-  color: $white;
-  background-color: lighten($primary, 8%);
+  background-color: rgba(var(--#{$prefix}primary-rgb), .16);
 }
 
 /**