@tabler/core 1.0.0-beta11 → 1.0.0-beta13

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

@@ -18,16 +18,16 @@ Image check
   display: block;
   margin: 0;
   user-select: none;
-  border: 1px 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 ~ & {
-    border-color: $primary;
+    border-color: var(--#{$prefix}primary);
     box-shadow: $input-btn-focus-box-shadow;
   }
 
   .form-imagecheck-input:checked ~ & {
-    border-color: $primary;
+    border-color: var(--#{$prefix}primary);
   }
 
   &:before {
@@ -42,9 +42,9 @@ Image check
     pointer-events: none;
     content: "";
     user-select: none;
-    background: $white;
-    border: 1px 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: 1px 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);
   }
 }
 
@@ -94,15 +94,15 @@ Select group
 
 .form-selectgroup-input:checked + .form-selectgroup-label {
   z-index: 1;
-  color: $primary;
-  background: rgba($primary, .04);
-  border-color: $primary;
+  color: var(--#{$prefix}primary);
+  background: rgba(var(--#{$prefix}primary-rgb), .04);
+  border-color: var(--#{$prefix}primary);
 }
 
 .form-selectgroup-input:focus + .form-selectgroup-label {
   z-index: 2;
-  color: $primary;
-  border-color: $primary;
+  color: var(--#{$prefix}primary);
+  border-color: var(--#{$prefix}primary);
   box-shadow: $input-btn-focus-box-shadow;
 }
 
@@ -124,7 +124,7 @@ Alternate version of form select group
       color: inherit;
 
       .form-selectgroup-title {
-        color: $primary;
+        color: var(--#{$prefix}primary);
       }
 
       .form-selectgroup-label-content {

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

@@ -19,9 +19,8 @@ Hr text
   &:after,
   &:before {
     flex: 1 1 auto;
-    height: $hr-height;
-    background-color: currentColor;
-    opacity: $hr-opacity;
+    height: 1px;
+    background-color: var(--#{$prefix}border-color);
   }
 
   &:before {

package/src/scss/utils/_colors.scss

@@ -1,15 +1,12 @@
-// stylelint-disable declaration-no-important
-
 // All colors
 @each $color, $value in $theme-colors {
   .bg-#{"" + $color} {
-    --#{$prefix}bg-opacity: 1;
-    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
+    background-color: var(--#{$prefix}#{$color}) !important;
   }
 
   .bg-#{"" + $color}-lt {
-    color: $value !important;
-    background: theme-color-lighter($value, true) !important;
+    color: var(--#{$prefix}#{$color}) !important;
+    background-color: rgba(var(--#{$prefix}#{$color}-rgb), .1) !important; //todo
   }
 }
 
@@ -17,4 +14,18 @@
   .text-#{"" + $color} {
     color: var(--#{$prefix}#{$color}) !important;
   }
+
+  .text-#{"" + $color}-fg {
+    color: var(--#{$prefix}#{$color}-fg) !important;
+  }
+}
+
+@each $color, $value in $gray-colors {
+  .bg-#{"" + $color} {
+    background-color: var(--#{$prefix}#{$color}) !important;
+  }
+
+  .text-#{"" + $color}-fg {
+    color: color-contrast($value ) !important;
+  }
 }

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/_dropzone.scss

@@ -17,7 +17,7 @@
     margin: .5rem;
 
     .dz-image {
-      border-radius: $border-radius;
+      border-radius: var(--#{$prefix}border-radius);
     }
 
     .dz-success-mark {

package/src/scss/vendor/_jsvectormap.scss

@@ -4,17 +4,17 @@
   background: $dark;
   font-family: inherit;
   font-size: $h5-font-size;
-  box-shadow: $card-shadow;
+  box-shadow: $card-box-shadow;
 }
 
 .jvm-series-container .jvm-legend  .jvm-legend-title {
   border-bottom: 0;
-  font-weight: $font-weight-medium;
+  font-weight: var(--#{$prefix}font-weight-medium);
 }
 
 .jvm-series-container .jvm-legend {
-  background-color: var(--#{$prefix}card-bg);
-  border: 1px solid var(--#{$prefix}border-color);
+  background-color: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   min-width: 8rem;
 
   .jvm-legend-inner .jvm-legend-tick {
@@ -29,8 +29,8 @@
 }
 
 .jvm-zoom-btn {
-  border: 1px solid var(--#{$prefix}border-color);
-  background: var(--#{$prefix}card-bg);
+  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;
   display: flex;
@@ -40,7 +40,7 @@
   width: 1.5rem;
   height: 1.5rem;
   font-size: 1rem;
-  box-shadow: $card-shadow;
+  box-shadow: $card-box-shadow;
 
   &.jvm-zoomout {
     top: 2.5rem;

package/src/scss/vendor/_litepicker.scss

@@ -1,15 +1,15 @@
 .litepicker {
-  --litepicker-month-weekday-color: #{$text-muted};
-  --litepicker-button-prev-month-color: #{$text-muted};
-  --litepicker-button-next-month-color: #{$text-muted};
-  --litepicker-button-prev-month-color-hover: #{$primary};
-  --litepicker-button-next-month-color-hover: #{$primary};
+  --litepicker-month-weekday-color: #{var(--#{$prefix}muted)};
+  --litepicker-button-prev-month-color: #{var(--#{$prefix}muted)};
+  --litepicker-button-next-month-color: #{var(--#{$prefix}muted)};
+  --litepicker-button-prev-month-color-hover: #{ var(--#{$prefix}primary) };
+  --litepicker-button-next-month-color-hover: #{ var(--#{$prefix}primary) };
   --litepicker-day-color: var(--#{$prefix}body-color);
-  --litepicker-day-color-hover: #{$primary};
-  --litepicker-is-end-color-bg: #{$primary};
-  --litepicker-is-today-color: #{$primary};
+  --litepicker-day-color-hover: #{ var(--#{$prefix}primary) };
+  --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,15 +18,15 @@
   }
 
   .container__main {
-    border: 1px solid var(--#{$prefix}border-color);
-    border-radius: $border-radius;
-    box-shadow: $dropdown-box-shadow;
+    border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+    border-radius: var(--#{$prefix}border-radius);
+    box-shadow: none;
   }
 
   .container__months {
     .month-item-name,
     .month-item-year {
-      font-weight: $font-weight-medium !important;
+      font-weight: var(--#{$prefix}font-weight-medium) !important;
     }
 
     .button-next-month,
@@ -52,6 +52,7 @@
 
   .datepicker-inline & .container__months {
     box-shadow: none;
+    background-color: var(--#{$prefix}bg-forms);
   }
 }
 

package/src/scss/vendor/_plyr.scss

@@ -1,3 +1,3 @@
 body {
-  --plyr-color-main: #{$primary};
+  --plyr-color-main: #{var(--#{$prefix}primary)};
 }

package/src/scss/vendor/_tinymce.scss

@@ -1,5 +1,5 @@
 .tox-tinymce {
-  border: 1px 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: 1px 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: 1px 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;
 }

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

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