@tabler/core 1.0.0-beta10 → 1.0.0-beta12

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) solid $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-custom.scss

@@ -19,10 +19,10 @@ Form control dark theme fix
  */
 .form-control {
   &::file-selector-button {
-    background-color: var(--#{$variable-prefix}btn-color, #{$form-file-button-bg});
+    background-color: var(--#{$prefix}btn-color, #{$form-file-button-bg});
   }
 
   &:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: var(--#{$variable-prefix}btn-color, #{$form-file-button-hover-bg});
+    background-color: var(--#{$prefix}btn-color, #{$form-file-button-hover-bg});
   }
 }

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;
 

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(--#{$variable-prefix}border-color);
+  border: var(--#{$prefix}border-width) solid 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 {
@@ -43,7 +43,7 @@ Image check
     content: "";
     user-select: none;
     background: $white;
-    border: 1px solid $border-color;
+    border: var(--#{$prefix}border-width) solid $border-color;
     border-radius: 3px;
     @include transition(opacity $transition-time);
 

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) solid $input-border-color;
   border-radius: 3px;
   @include transition(border-color $transition-time, background $transition-time, color $transition-time);
 
@@ -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/forms/_validation.scss

@@ -1,5 +1,5 @@
 %validation-lite {
-  border-color: var(--#{$variable-prefix}border-color) !important;
+  border-color: var(--#{$prefix}border-color) !important;
 }
 
 @each $state, $data in $form-validation-states {

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,18 +1,29 @@
-// stylelint-disable declaration-no-important
+@use "bootstrap";
 
 // All colors
-@each $color, $value in theme-colors() {
+@each $color, $value in $theme-colors {
   .bg-#{"" + $color} {
-    color: #ffffff !important;
-    background: $value !important;
+    background-color: var(--#{$prefix}#{$color}) !important;
   }
 
+  .bg-#{"" + $color}-lt {
+    color: var(--#{$prefix}#{$color}) !important;
+    background: rgba(var(--#{$prefix}#{$color}-rgb), .1) !important; //todo
+  }
+}
+
+@each $color, $value in $theme-colors {
   .text-#{"" + $color} {
-    color: $value !important;
+    color: var(--#{$prefix}#{$color}) !important;
   }
+}
 
-  .bg-#{"" + $color}-lt {
-    color: $value !important;
-    background: theme-color-lighter($value, true) !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/_dropzone.scss

@@ -0,0 +1,27 @@
+.dropzone {
+  border: 1px dashed var(--#{$prefix}border-color);
+  color: var(--#{$prefix}muted);
+  padding: 1rem;
+
+  &.dz-drag-hover {
+    border: 1px dashed var(--#{$prefix}primary);
+    background: rgba(var(--#{$prefix}primary-rgb), .01);
+    color: var(--#{$prefix}primary);
+
+    .dz-message {
+      opacity: 1;
+    }
+  }
+
+  .dz-preview {
+    margin: .5rem;
+
+    .dz-image {
+      border-radius: var(--#{$prefix}border-radius);
+    }
+
+    .dz-success-mark {
+      height: 54px;
+    }
+  }
+}

package/src/scss/vendor/_fslightbox.scss

@@ -0,0 +1,13 @@
+.fslightbox-container {
+  font-family: inherit !important;
+  background: rgba($modal-backdrop-bg, $modal-backdrop-opacity) !important;
+  backdrop-filter: blur($modal-backdrop-blur) !important;
+}
+
+.fslightbox-slide-number-container {
+  color: inherit !important;
+}
+
+.fslightbox-slash {
+  background: currentColor !important;
+}

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(--#{$variable-prefix}card-bg);
-  border: 1px solid var(--#{$variable-prefix}border-color);
+  background-color: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
   min-width: 8rem;
 
   .jvm-legend-inner .jvm-legend-tick {
@@ -29,9 +29,9 @@
 }
 
 .jvm-zoom-btn {
-  border: 1px solid var(--#{$variable-prefix}border-color);
-  background: var(--#{$variable-prefix}card-bg);
-  color: var(--#{$variable-prefix}body-color);
+  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+  color: var(--#{$prefix}body-color);
   padding: 0;
   display: flex;
   align-items: center;
@@ -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-day-color: var(--#{$variable-prefix}body-color);
-  --litepicker-day-color-hover: #{$primary};
-  --litepicker-is-end-color-bg: #{$primary};
-  --litepicker-is-today-color: #{$primary};
-  --litepicker-month-header-color: var(--#{$variable-prefix}body-color);
-  --litepicker-container-months-color-bg: var(--#{$variable-prefix}card-bg);
+  --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: #{ 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);
   font: inherit;
   user-select: none;
 
@@ -18,15 +18,15 @@
   }
 
   .container__main {
-    border: 1px solid var(--#{$variable-prefix}border-color);
-    border-radius: $border-radius;
+    border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+    border-radius: var(--#{$prefix}border-radius);
     box-shadow: $dropdown-box-shadow;
   }
 
   .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,

package/src/scss/vendor/_plyr.scss

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

package/src/scss/vendor/_tinymce.scss

@@ -0,0 +1,25 @@
+.tox-tinymce {
+  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
+  border-radius: $border-radius !important;
+  font-family: var(--#{$prefix}font-sans-serif) !important;
+}
+
+.tox-toolbar__group {
+  padding: 0 .5rem 0;
+}
+
+.tox:not(.tox-tinymce-inline) {
+  .tox-editor-header {
+    border-bottom: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+  }
+}
+
+.tox-tbtn {
+  margin: 0 !important;
+}
+
+.tox-statusbar {
+  border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !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 {