@tabler/core 1.0.0-beta12 → 1.0.0-beta14

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-size: $card-ribbon-font-size;
   font-weight: var(--#{$prefix}font-weight-bold);
-  line-height: 1.5rem;
+  line-height: 1;
   color: $white;
   text-align: center;
   text-transform: uppercase;
   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;
@@ -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

@@ -69,7 +69,7 @@
 }
 
 .status-lite {
-  border: var(--#{$prefix}border-width) 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

@@ -81,7 +81,7 @@
     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%);
   }
@@ -90,7 +90,7 @@
     font-weight: var(--#{$prefix}font-weight-bold);
 
     &:before {
-      background: $white;
+      background: $card-bg;
     }
 
     & ~ .step-item {

package/src/scss/ui/_tables.scss

@@ -103,7 +103,7 @@
         }
 
         tr {
-          border-bottom: var(--#{$prefix}border-width) solid $table-border-color;
+          border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $table-border-color;
         }
 
         .btn {
@@ -138,7 +138,7 @@
   &:after,
   &.asc:after,
   &.desc:after {
-    content: '';
+    content: "";
     display: inline-flex;
     width: 1rem;
     height: 1rem;

package/src/scss/ui/_toasts.scss

@@ -1,6 +1,6 @@
 .toast {
   background: $white;
-  border: $alert-border-width solid $alert-border-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,31 +29,40 @@ 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;
-  font-weight: var(--#{$prefix}font-weight-medium);
+h4,
+.h4 {
+  font-size: var(--#{$prefix}font-size-h4);
+  line-height: var(--#{$prefix}line-height-h4);
 }
 
-h5 {
-  line-height: $h5-line-height;
-  font-weight: var(--#{$prefix}font-weight-medium);
+h5,
+.h5 {
+  font-size: var(--#{$prefix}font-size-h5);
+  line-height: var(--#{$prefix}line-height-h5);
 }
 
-h6 {
-  line-height: $h6-line-height;
-  font-weight: var(--#{$prefix}font-weight-medium);
+h6,
+.h6 {
+  font-size: var(--#{$prefix}font-size-h6);
+  line-height: var(--#{$prefix}line-height-h6);
 }
 
 strong,
@@ -64,7 +73,7 @@ b {
 
 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;
@@ -99,45 +108,24 @@ dl {
 pre {
   padding: $pre-padding;
   background: $pre-bg;
-  color: var(--#{$prefix}code-color);
+  color: $pre-color;
   border-radius: var(--#{$prefix}border-radius);
+
+  code {
+    background: transparent;
+  }
 }
 
 code {
-  background: $pre-bg;
+  background: var(--#{$prefix}code-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;
-//  }
-//}
+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%;

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

@@ -20,7 +20,7 @@ Color Input
   width: 1.5rem;
   height: 1.5rem;
   color: $white;
-  border: var(--#{$prefix}border-width) solid $input-border-color-translucent;
+  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);
 

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

@@ -18,7 +18,7 @@ Image check
   display: block;
   margin: 0;
   user-select: none;
-  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   border-radius: 3px;
 
   .form-imagecheck-input:focus ~ & {
@@ -42,9 +42,9 @@ Image check
     pointer-events: none;
     content: "";
     user-select: none;
-    background: $white;
-    border: var(--#{$prefix}border-width) solid $border-color;
-    border-radius: 3px;
+    background: $form-check-input-bg;
+    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+    border-radius: $form-check-input-border-radius;
     @include transition(opacity $transition-time);
 
     .form-imagecheck-input:checked ~ & {
@@ -55,6 +55,14 @@ Image check
       background-size: $form-check-input-checked-bg-size;
       border-color: $form-check-input-checked-border-color;
     }
+
+    .form-imagecheck-input[type="radio"] ~ & {
+      border-radius: $form-check-radio-border-radius;
+    }
+
+    .form-imagecheck-input[type="radio"]:checked ~ & {
+      background-image: escape-svg($form-check-radio-checked-bg-image);
+    }
   }
 }
 

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

@@ -41,7 +41,7 @@ Select group
   text-align: center;
   cursor: pointer;
   user-select: none;
-  border: var(--#{$prefix}border-width) solid $input-border-color;
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color;
   border-radius: 3px;
   @include transition(border-color $transition-time, background $transition-time, color $transition-time);
 
@@ -50,7 +50,7 @@ Select group
   }
 
   &:hover {
-    color: $body-color;
+    color: var(--#{$prefix}body-color);
   }
 }
 

package/src/scss/utils/_colors.scss

@@ -1,5 +1,3 @@
-@use "bootstrap";
-
 // All colors
 @each $color, $value in $theme-colors {
   .bg-#{"" + $color} {
@@ -8,7 +6,7 @@
 
   .bg-#{"" + $color}-lt {
     color: var(--#{$prefix}#{$color}) !important;
-    background: rgba(var(--#{$prefix}#{$color}-rgb), .1) !important; //todo
+    background-color: rgba(var(--#{$prefix}#{$color}-rgb), .1) !important; //todo
   }
 }
 
@@ -16,6 +14,10 @@
   .text-#{"" + $color} {
     color: var(--#{$prefix}#{$color}) !important;
   }
+
+  .text-#{"" + $color}-fg {
+    color: var(--#{$prefix}#{$color}-fg) !important;
+  }
 }
 
 @each $color, $value in $gray-colors {

package/src/scss/vendor/_apexcharts.scss

@@ -1,2 +1,28 @@
 .apexcharts-tooltip {
+  color: $tooltip-color !important;
+  background: $tooltip-bg !important;
+  font-size: $tooltip-font-size !important;
+  padding: .25rem !important;
+  box-shadow: none !important;
+}
+
+.apexcharts-tooltip-title {
+  background: transparent !important;
+  border: 0 !important;
+  margin: 0 !important;
+  font-weight: var(--#{$prefix}font-weight-bold);
+  padding: .25rem .5rem !important;
+}
+
+.apexcharts-tooltip-y-group {
+  padding: 2px 0 !important;
+}
+
+.apexcharts-tooltip-series-group {
+  padding: 0 .5rem 0 !important;
+}
+
+.apexcharts-tooltip-marker {
+  width: 10px !important;
+  height: 10px !important;
 }

package/src/scss/vendor/_jsvectormap.scss

@@ -14,7 +14,7 @@
 
 .jvm-series-container .jvm-legend {
   background-color: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
-  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   min-width: 8rem;
 
   .jvm-legend-inner .jvm-legend-tick {
@@ -29,7 +29,7 @@
 }
 
 .jvm-zoom-btn {
-  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
   color: var(--#{$prefix}body-color);
   padding: 0;

package/src/scss/vendor/_litepicker.scss

@@ -9,7 +9,7 @@
   --litepicker-is-end-color-bg: #{ var(--#{$prefix}primary) };
   --litepicker-is-today-color: #{ var(--#{$prefix}primary) };
   --litepicker-month-header-color: var(--#{$prefix}body-color);
-  --litepicker-container-months-color-bg: var(--#{$prefix}card-bg);
+  --litepicker-container-months-color-bg: var(--#{$prefix}bg-surface);
   font: inherit;
   user-select: none;
 
@@ -18,9 +18,9 @@
   }
 
   .container__main {
-    border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
     border-radius: var(--#{$prefix}border-radius);
-    box-shadow: $dropdown-box-shadow;
+    box-shadow: none;
   }
 
   .container__months {
@@ -52,6 +52,7 @@
 
   .datepicker-inline & .container__months {
     box-shadow: none;
+    background-color: var(--#{$prefix}bg-forms);
   }
 }
 

package/src/scss/vendor/_tinymce.scss

@@ -1,5 +1,5 @@
 .tox-tinymce {
-  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
   border-radius: $border-radius !important;
   font-family: var(--#{$prefix}font-sans-serif) !important;
 }
@@ -10,7 +10,7 @@
 
 .tox:not(.tox-tinymce-inline) {
   .tox-editor-header {
-    border-bottom: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
+    border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
     box-shadow: none !important;
     padding: 0 !important;
   }
@@ -21,5 +21,16 @@
 }
 
 .tox-statusbar {
-  border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
+  border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
+}
+
+.tox .tox-toolbar,
+.tox .tox-toolbar__overflow,
+.tox .tox-toolbar__primary {
+  background: transparent !important;
+}
+
+.tox .tox-toolbar-overlord,
+.tox:not(.tox-tinymce-inline) .tox-editor-header {
+  background: transparent !important;
 }