@tabler/core 1.1.0 → 1.2.0

package/scss/ui/_type.scss

@@ -1,11 +1,17 @@
 @import "typo/hr";
 
 .lead {
-  line-height: 1.4;
+  color: var(--#{$prefix}secondary);
+  font-size: inherit;
 }
 
 a {
   text-decoration-skip-ink: auto;
+  color: color-mix(in srgb, transparent, var(--#{$prefix}link-color) var(--#{$prefix}link-opacity, 100%));
+
+  &:hover {
+    color: color-mix(in srgb, transparent, var(--#{$prefix}link-hover-color) var(--#{$prefix}link-opacity, 100%));
+  }
 }
 
 h1,
@@ -107,10 +113,14 @@ dl {
 }
 
 pre {
+  --#{$prefix}scrollbar-color: #{$pre-color};
   padding: $pre-padding;
   background: $pre-bg;
   color: $pre-color;
   border-radius: var(--#{$prefix}border-radius);
+  line-height: $line-height-base;
+
+  @include scrollbar;
 
   code {
     background: transparent;
@@ -157,7 +167,7 @@ Selection
  */
 ::selection,
 .text-selected {
-  background-color: color-transparent(var(--#{$prefix}primary), .1);
+  background-color: color-transparent(var(--#{$prefix}primary), 0.1);
 }
 
 .text-selected {
@@ -179,6 +189,17 @@ a:hover:has(.icon) {
   text-decoration: none;
 }
 
+.link-hoverable {
+  border-radius: var(--#{$prefix}border-radius);
+  transition: background-color 0.15s ease-in-out;
+
+  &:hover {
+    text-decoration: none;
+    color: var(--#{$prefix}primary);
+    background: color-transparent(var(--#{$prefix}secondary), 0.04);
+  }
+}
+
 /**
 Subheader
  */
@@ -191,7 +212,7 @@ Mentions
  */
 .mention {
   display: inline-block;
-  box-shadow: var(--tblr-box-shadow-border);
+  box-shadow: var(--#{$prefix}box-shadow-border);
   border-radius: var(--#{$prefix}border-radius-pill);
   line-height: calc(16em / 12);
   font-size: calc(12em / 14);
@@ -199,11 +220,11 @@ Mentions
   background: var(--#{$prefix}bg-surface-tertiary);
   padding: calc(2em / 12) calc(8em / 12);
   font-weight: var(--#{$prefix}font-weight-medium);
-  
+
   @at-root a#{&} {
     cursor: pointer;
 
-    &:hover, 
+    &:hover,
     &.hover {
       background: var(--#{$prefix}bg-surface-secondary);
       text-decoration: underline;
@@ -243,10 +264,51 @@ $text-variants: (
 
 @each $variant, $color in $text-variants {
   .text-#{$variant} {
-    background: color-transparent($color, .04);
+    background: color-transparent($color, 0.04);
     background: color-transparent($color, 4%);
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-decoration-color: $color;
   }
-}
+}
+
+.steps {
+  --#{$prefix}steps-padding: 2rem;
+  --#{$prefix}steps-item-size: 1.5rem;
+  margin-left: 1rem;
+  padding-left: var(--#{$prefix}steps-padding);
+  counter-reset: step;
+  border-left: 1px solid var(--#{$prefix}border-color);
+  margin-bottom: 2rem;
+  flex-direction: column;
+
+  h3 {
+    counter-increment: step;
+
+    &:not(:first-child) {
+      margin-top: 2.5rem !important;
+    }
+
+    &:before {
+      content: counter(step);
+      display: inline-block;
+      position: absolute;
+      margin-top: 1px;
+      margin-left: calc(-1 * var(--#{$prefix}steps-padding) - var(--#{$prefix}steps-item-size) / 2);
+      width: var(--#{$prefix}steps-item-size);
+      height: var(--#{$prefix}steps-item-size);
+      text-align: center;
+      color: var(--#{$prefix}body-color);
+      border: 1px solid var(--#{$prefix}border-color);
+      background: var(--#{$prefix}bg-surface);
+      border-radius: var(--#{$prefix}border-radius);
+      line-height: calc(var(--#{$prefix}steps-item-size) - 2px);
+      font-size: var(--#{$prefix}font-size-h4);
+      font-weight: var(--#{$prefix}font-weight-bold);
+    }
+  }
+
+  >:last-child {
+    margin-bottom: 0;
+  }
+}

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

@@ -21,7 +21,7 @@ Color Input
   height: 1.5rem;
   color: $white;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent;
-  border-radius: 3px;
+  border-radius: var(--#{$prefix}border-radius);
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
 
   &:before {

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

@@ -2,6 +2,7 @@
 Image check
  */
 .form-imagecheck {
+  --#{$prefix}form-imagecheck-radius: var(--#{$prefix}border-radius);
   position: relative;
   margin: 0;
   cursor: pointer;
@@ -19,7 +20,7 @@ Image check
   margin: 0;
   user-select: none;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  border-radius: 3px;
+  border-radius: var(--#{$prefix}form-imagecheck-radius);
 
   .form-imagecheck-input:focus ~ & {
     border-color: var(--#{$prefix}primary);
@@ -73,13 +74,13 @@ Image check
   @include transition(opacity $transition-time);
 
   &:first-child {
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
+    border-top-left-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
+    border-top-right-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
   }
 
   &:last-child {
-    border-bottom-right-radius: 2px;
-    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
+    border-bottom-left-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
   }
 
   .form-imagecheck:hover &,

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

@@ -42,7 +42,7 @@ Select group
   cursor: pointer;
   user-select: none;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color;
-  border-radius: 3px;
+  border-radius: var(--#{$prefix}border-radius);
   box-shadow: $input-box-shadow;
   @include transition(border-color $transition-time, background $transition-time, color $transition-time);
 

package/scss/utils/_colors.scss

@@ -1,27 +1,55 @@
 // All colors
-@each $color, $value in map-merge($theme-colors, ( white: $white )) {
+@each $color, $value in map-merge($theme-colors, ( white: $white)) {
   .bg-#{"" + $color} {
-    --#{$prefix}bg-opacity: 1;
-    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
+    background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
   }
 
   .bg-#{"" + $color}-lt {
-    --#{$prefix}bg-opacity: 1;
-    --#{$prefix}text-opacity: 1;
-    color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}text-opacity)) !important;
-    background-color: rgba(var(--#{$prefix}#{$color}-lt-rgb), var(--#{$prefix}bg-opacity)) !important;
+    color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}text-opacity, 1) * 100%), transparent) !important;
+    background-color: color-mix(in srgb, var(--#{$prefix}#{$color}-lt) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
   }
 
   .border-#{"" + $color} {
-    --#{$prefix}border-opacity: 1;
-    border-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}border-opacity)) !important;
+    border-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}border-opacity, 1) * 100%), transparent) !important;
+  }
+
+  .bg-gradient-from-#{"" + $color} {
+    --#{$prefix}gradient-from: var(--#{$prefix}#{$color});
+  }
+
+  .bg-gradient-to-#{"" + $color} {
+    --#{$prefix}gradient-to: var(--#{$prefix}#{$color});
+  }
+
+  .bg-gradient-via-#{"" + $color} {
+    --#{$prefix}gradient-via: var(--#{$prefix}#{$color});
+    --#{$prefix}gradient-stops: var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-via, transparent), var(--#{$prefix}gradient-to, transparent);
+  }
+
+  .text-bg-#{"" + $color} {
+    color: color-contrast($value) if($enable-important-utilities, !important, null);
+    background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+  }
+
+  .link-#{"" + $color} {
+    color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}link-opacity, 1) * 100%), transparent) !important;
+    text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}link-underline-opacity, 1) * 100%), transparent) !important;
+
+    @if $link-shade-percentage != 0 {
+      &:hover,
+      &:focus {
+        $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+        color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+        text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+      }
+    }
   }
 }
 
 @each $color, $value in $theme-colors {
   .text-#{"" + $color} {
     --#{$prefix}text-opacity: 1;
-    color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}text-opacity)) !important;
+    color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}text-opacity) * 100%), transparent) !important;
   }
 
   .text-#{"" + $color}-fg {
@@ -32,7 +60,7 @@
 @each $color, $value in $gray-colors {
   .bg-#{"" + $color} {
     --#{$prefix}bg-opacity: 1;
-    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
+    background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;
   }
 
   .text-#{"" + $color}-fg {
@@ -40,6 +68,21 @@
   }
 }
 
+@each $color, $value in $social-colors {
+  .bg-#{"" + $color} {
+    --#{$prefix}bg-opacity: 1;
+    background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;
+  }
+
+  .text-#{"" + $color}-fg {
+    color: $value !important;
+  }
+}
+
+.bg-inverted {
+  --#{$prefix}bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--#{$prefix}bg-surface-inverted) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;
+}
 .bg-surface {
   background-color: var(--#{$prefix}bg-surface) !important;
 }
@@ -50,4 +93,8 @@
 
 .bg-surface-tertiary {
   background-color: var(--#{$prefix}bg-surface-tertiary) !important;
+}
+
+.bg-surface-backdrop {
+  background-color: color-transparent($modal-backdrop-bg, $modal-backdrop-opacity) !important;
 }

package/scss/utils/_scroll.scss

@@ -1,5 +1,3 @@
-// stylelint-disable declaration-no-important
-
 /*
 Scrollable
 */

package/scss/vendor/_coloris.scss

@@ -1,6 +1,11 @@
 .clr-picker {
-  box-shadow: var(--#{$prefix}box-shadow-dropdown);
+  box-shadow: var(--#{$prefix}shadow-dropdown);
   background-color: var(--#{$prefix}bg-surface);
+  border-radius: var(--#{$prefix}border-radius);
+}
+
+.clr-gradient {
+  border-radius: var(--#{$prefix}border-radius) var(--#{$prefix}border-radius) 0 0;
 }
 
 input.clr-color {

package/scss/vendor/_fslightbox.scss

@@ -1,6 +1,6 @@
 .fslightbox-container {
   font-family: inherit !important;
-  background: rgba($modal-backdrop-bg, $modal-backdrop-opacity) !important;
+  background: var(--#{$prefix}backdrop-bg) !important;
   backdrop-filter: blur($modal-backdrop-blur) !important;
 }
 

package/scss/vendor/_jsvectormap.scss

@@ -1,7 +1,6 @@
-// @import "jsvectormap/dist/jsvectormap";
-
 .jvm-tooltip {
-  background: $dark;
+  background: var(--#{$prefix}bg-surface-inverted);
+  color: var(--#{$prefix}text-inverted);
   font-family: inherit;
   font-size: $h5-font-size;
   box-shadow: $card-box-shadow;

package/scss/vendor/_litepicker.scss

@@ -62,6 +62,7 @@
     .container__months {
       box-shadow: none;
       background-color: var(--#{$prefix}bg-forms);
+      border-radius: calc(var(--#{$prefix}border-radius) - 1px);
     }
   }
 }

package/scss/vendor/_nouislider.scss

@@ -1,5 +1,3 @@
-// @import "nouislider/dist/nouislider";
-
 .noUi-target {
   border: 0;
   box-shadow: none;

package/scss/vendor/_tinymce.scss

@@ -1,4 +1,4 @@
-.tox-tinymce {
+.tox-hugerte {
   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;
@@ -12,7 +12,7 @@
   background: transparent !important;
 }
 
-.tox:not(.tox-tinymce-inline) {
+.tox:not(.tox-hugerte-inline) {
   .tox-editor-header {
     border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
     box-shadow: none !important;
@@ -29,6 +29,6 @@
 }
 
 .tox .tox-toolbar-overlord,
-.tox:not(.tox-tinymce-inline) .tox-editor-header {
+.tox:not(.tox-hugerte-inline) .tox-editor-header {
   background: transparent !important;
 }

package/scss/vendor/_tom-select.scss

@@ -2,8 +2,6 @@ $select-color-dropdown: #fff;
 $select-color-dropdown-border-top: red;
 $input-border-width: 1px;
 
-// @import "tom-select/src/scss/tom-select.bootstrap5.scss";
-
 :root {
   --ts-pr-clear-button: 0rem;
   --ts-pr-caret: 0rem;
@@ -13,6 +11,11 @@ $input-border-width: 1px;
   color: inherit;
 }
 
+.focus .ts-control {
+  border-radius: var(--#{$prefix}border-radius);
+}
+  
+
 .ts-control {
   color: inherit;
 
@@ -41,7 +44,7 @@ $input-border-width: 1px;
 .ts-dropdown {
   background: var(--#{$prefix}bg-surface);
   color: var(--#{$prefix}body-color);
-  box-shadow: var(--#{$prefix}box-shadow-dropdown);
+  box-shadow: var(--#{$prefix}shadow-dropdown);
   z-index: $zindex-dropdown;
 
   .option {
@@ -75,4 +78,4 @@ $input-border-width: 1px;
   &> div.item {
     color: var(--#{$prefix}gray-500);
   }
-}
+}

package/scss/vendor/_turbo.scss

@@ -0,0 +1,3 @@
+.turbo-progress-bar {
+  background: var(--#{$prefix}primary);
+}

package/scss/vendor/_wysiwyg.scss

@@ -0,0 +1,34 @@
+.tox-hugerte {
+  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;
+}
+
+.tox-toolbar__group {
+  padding: 0 .5rem 0;
+}
+
+.tox .tox-toolbar__primary {
+  background: transparent !important;
+}
+
+.tox:not(.tox-hugerte-inline) {
+  .tox-editor-header {
+    border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) 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) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
+}
+
+.tox .tox-toolbar-overlord,
+.tox:not(.tox-hugerte-inline) .tox-editor-header {
+  background: transparent !important;
+}

package/js/tabler.umd.js

@@ -1,15 +0,0 @@
-import "./src/autosize"
-import "./src/countup"
-import "./src/input-mask"
-import "./src/dropdown"
-import "./src/tooltip"
-import "./src/popover"
-import "./src/switch-icon"
-import "./src/tab"
-import "./src/toast"
-
-import * as bootstrap from "bootstrap"
-import * as tabler from "./src/tabler"
-
-globalThis.bootstrap = bootstrap
-globalThis.tabler = tabler