@tabler/core 1.0.0-beta14 → 1.0.0-beta15

package/src/scss/ui/_lists.scss

@@ -91,7 +91,7 @@ Timeline
 .list-timeline-time {
   float: right;
   margin-left: 1rem;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
 }
 
 .list-timeline-icon {
@@ -105,7 +105,7 @@ Timeline
   height: 2.5rem;
   color: $white;
   text-align: center;
-  background: $text-muted;
+  background: var(--#{$prefix}muted);
   border-radius: $border-radius-pill;
 
   .icon {
@@ -134,9 +134,9 @@ Timeline
       left: add(7.5rem, 2px);
       z-index: 1;
       display: block;
-      width: 4px;
+      width: 2px;
       content: "";
-      background-color: $body-bg;
+      background-color: var(--#{$prefix}border-color);
     }
 
     & > li {
@@ -175,7 +175,7 @@ Timeline
     border: 0;
 
     .icon {
-      color: $text-muted;
+      color: var(--#{$prefix}muted);
     }
 
     &.active {

package/src/scss/ui/_loaders.scss

@@ -1,13 +1,3 @@
-@keyframes loader {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .loader {
   position: relative;
   display: block;
@@ -23,13 +13,13 @@
     width: 100%;
     height: 100%;
     content: "";
-    border: 1px solid;
+    border: 1px var(--#{$prefix}border-style);
     border-color: transparent;
     border-top-color: currentColor;
     border-left-color: currentColor;
 
     border-radius: $border-radius-pill;
-    animation: loader .6s linear;
+    animation: rotate-360 .6s linear;
     animation-iteration-count: infinite;
   }
 }

package/src/scss/ui/_modals.scss

@@ -29,7 +29,7 @@
   left: 0;
   right: 0;
   height: $modal-status-size;
-  background: $text-muted;
+  background: var(--#{$prefix}muted);
   border-radius: $modal-content-border-radius $modal-content-border-radius 0 0;
 }
 

package/src/scss/ui/_nav.scss

@@ -39,7 +39,7 @@
     margin: 0 0 (- $nav-bordered-border-width);
     border: 0;
     border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
-    color: $text-muted;
+    color: var(--#{$prefix}muted);
   }
 
   .nav-link.active,

package/src/scss/ui/_pagination.scss

@@ -33,7 +33,7 @@
 .page-item-subtitle {
   margin-bottom: 2px;
   font-size: 12px;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
   text-transform: uppercase;
 
   .page-item.disabled & {

package/src/scss/ui/_ribbons.scss

@@ -31,7 +31,7 @@
     height: 0;
     content: "";
     filter: brightness(70%);
-    border: calc(var(--#{$prefix}ribbon-margin) * .5) solid;
+    border: calc(var(--#{$prefix}ribbon-margin) * .5) var(--#{$prefix}border-style);
     border-color: inherit;
     border-top-color: transparent;
     border-right-color: transparent;
@@ -115,7 +115,7 @@
     width: 0;
     height: 0;
     content: "";
-    border: 1rem solid;
+    border: 1rem var(--#{$prefix}border-style);
     border-color: inherit;
     border-right-width: 0;
     border-left-color: transparent;

package/src/scss/ui/_steps.scss

@@ -94,7 +94,7 @@
     }
 
     & ~ .step-item {
-      color: $text-muted;
+      color: var(--#{$prefix}muted);
 
       &:after,
       &:before {
@@ -102,7 +102,7 @@
       }
 
       &:before {
-        color: $text-muted !important;
+        color: var(--#{$prefix}muted) !important;
       }
     }
   }

package/src/scss/ui/_type.scss

@@ -123,8 +123,14 @@ code {
 }
 
 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);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+  display: inline-block;
+  box-sizing: border-box;
+  max-width: 100%;
+  font-size: var(--#{$prefix}font-size-h5);
+  font-weight: $kbd-font-weight;
+  line-height: 1;
+  vertical-align: baseline;
 }
 
 img {

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

@@ -44,7 +44,7 @@ Form check
 
 .form-check-description {
   display: block;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
   font-size: $h5-font-size;
   margin-top: .25rem;
 }

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

@@ -92,7 +92,7 @@ Image check
 .form-imagecheck-caption {
   padding: .25rem;
   font-size: $font-size-sm;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
   text-align: center;
   @include transition(color $transition-time);
 

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

@@ -36,7 +36,7 @@ Select group
   padding: $input-btn-padding-y $input-btn-padding-x;
   font-size: $input-btn-font-size;
   line-height: $input-line-height;
-  color: $text-muted;
+  color: var(--#{$prefix}muted);
   background: $form-check-input-bg;
   text-align: center;
   cursor: pointer;

package/src/scss/ui/typo/_hr.scss

@@ -36,7 +36,7 @@ Hr text
   > *:first-child {
     padding-right: .5rem;
     padding-left: 0;
-    color: $text-muted;
+    color: var(--#{$prefix}muted);
   }
 
   &.hr-text-left {

package/src/scss/utils/_colors.scss

@@ -1,5 +1,5 @@
 // All colors
-@each $color, $value in $theme-colors {
+@each $color, $value in map-merge($theme-colors, ( white: $white )) {
   .bg-#{"" + $color} {
     background-color: var(--#{$prefix}#{$color}) !important;
   }

package/src/scss/vendor/_tom-select.scss

@@ -1,4 +1,5 @@
 $select-color-dropdown-border-top: red;
+$input-border-width: 1px;
 
 @import "~tom-select/src/scss/tom-select.bootstrap5.scss";