@tabler/core 1.0.0-beta4 → 1.0.0-beta5

package/src/scss/ui/_alerts.scss

@@ -50,5 +50,5 @@
   line-height: $h4-line-height;
   font-weight: $font-weight-bold;
   margin-bottom: .25rem;
-  color: var(--tblr-alert-color);
+  color: var(--#{$variable-prefix}alert-color);
 }

package/src/scss/ui/_avatars.scss

@@ -1,5 +1,6 @@
 .avatar {
   --#{$variable-prefix}avatar-size: #{$avatar-size};
+  --#{$variable-prefix}avatar-bg: var(--#{$variable-prefix}border-color-light);
   position: relative;
   width: var(--#{$variable-prefix}avatar-size);
   height: var(--#{$variable-prefix}avatar-size);
@@ -13,12 +14,12 @@
   text-transform: uppercase;
   vertical-align: bottom;
   user-select: none;
-  background: $gray-200 no-repeat center/cover;
+  background: var(--#{$variable-prefix}avatar-bg) no-repeat center/cover;
   border-radius: $avatar-border-radius;
 
   svg {
-    width: calc(var(--tblr-avatar-size) / #{divide(40, 24)});
-    height: calc(var(--tblr-avatar-size) / #{divide(40, 24)});
+    width: calc(var(--#{$variable-prefix}avatar-size) / #{divide(40, 24)});
+    height: calc(var(--#{$variable-prefix}avatar-size) / #{divide(40, 24)});
   }
 
   .badge {
@@ -88,7 +89,7 @@
   border: 1px dashed $border-color;
   background: $form-check-input-bg;
   flex-direction: column;
-  transition: .3s color, .3s background-color;
+  @include transition(color $transition-time, background-color $transition-time);
 
   svg {
     width: 1.5rem;
@@ -111,7 +112,7 @@
 
 .page-avatar {
   .page-cover ~ * & {
-    margin-top: calc(calc(-1 * calc(var(--tblr-avatar-size) * .5)) - #{$content-padding-y});
+    margin-top: calc(calc(-1 * calc(var(--#{$variable-prefix}avatar-size) * .5)) - #{$content-padding-y});
     box-shadow: 0 0 0 .25rem $body-bg;
   }
 }

package/src/scss/ui/_buttons.scss

@@ -1,21 +1,22 @@
 .btn {
+  --#{$variable-prefix}btn-color-text-rgb: var(--#{$variable-prefix}body-color-rgb);
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: $body-color;
-  background-color: $white;
-  border-color: $border-color-dark-transparent;
+  border-color: var(--#{$variable-prefix}border-color);
   white-space: nowrap;
 
+  background-color: var(--#{$variable-prefix}btn-color, var(--#{$variable-prefix}card-bg));
+  color: var(--#{$variable-prefix}btn-color-text);
+
   &:hover {
-    color: $body-color;
-    border-color: $text-muted-light;
-    background-color: $light;
+    color: var(--#{$variable-prefix}btn-color-text);
+    border-color: rgba(var(--#{$variable-prefix}btn-color-text-rgb), #{$border-active-opacity});
   }
 
-  &:focus {
-    border-color: rgba(var(--#{$variable-prefix}btn-color, hex-to-rgb($primary)), .5);
-    box-shadow: 0 0 0 $input-btn-focus-width rgba(var(--#{$variable-prefix}btn-color, hex-to-rgb($primary)), $input-btn-focus-color-opacity)
+  &:focus:not([disabled]):not(.disabled) {
+    border-color: var(--#{$variable-prefix}btn-color, #{$primary});
   }
 
   &:disabled,
@@ -29,7 +30,7 @@
     min-width: $icon-size;
     margin: 0 .5rem 0 -.25rem;
     vertical-align: bottom;
-    color: $text-muted;
+    color: inherit;
   }
 
   .avatar {
@@ -49,45 +50,36 @@
 }
 
 %btn-color {
-  background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
-  color: var(--#{$variable-prefix}btn-color-text);
-
-  .icon {
-    color: inherit;
-  }
+  border-color: $border-color-dark-transparent;
 
   &:hover {
     color: var(--#{$variable-prefix}btn-color-text);
-    background: rgba(var(--#{$variable-prefix}btn-color-darker), 1);
-    border-color: transparent;
+    background: var(--#{$variable-prefix}btn-color-interactive);
+    border-color: var(--#{$variable-prefix}btn-color);
   }
 }
 
 %btn-outline {
   background-color: transparent;
-  color: rgba(var(--#{$variable-prefix}btn-color), 1);
-  border-color: $border-color-transparent;
-
-  .icon {
-    color: inherit;
-  }
+  color: var(--#{$variable-prefix}btn-color);
+  border-color: var(--#{$variable-prefix}btn-color);
 
   &:hover {
-    background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
+    background-color: var(--#{$variable-prefix}btn-color);
     color: var(--#{$variable-prefix}btn-color-text);
-    border-color: rgba(var(--#{$variable-prefix}btn-color), 1);
+    border-color: var(--#{$variable-prefix}btn-color);
   }
 }
 
 %btn-ghost {
   background: transparent;
-  color: rgba(var(--#{$variable-prefix}btn-color), 1);
+  color: var(--#{$variable-prefix}btn-color);
   border-color: transparent;
 
   &:hover {
-    background-color: rgba(var(--#{$variable-prefix}btn-color), 1);
+    background-color: var(--#{$variable-prefix}btn-color);
     color: var(--#{$variable-prefix}btn-color-text);
-    border-color: rgba(var(--#{$variable-prefix}btn-color), 1);
+    border-color: var(--#{$variable-prefix}btn-color);
   }
 }
 
@@ -180,11 +172,13 @@
   }
 }
 
-
+//
+// Button color variations
+//
 $btn-colors: $theme-colors;
 
 @if $enable-extra-colors {
-  $btn-colors: map-merge($btn-colors, $colors);
+  $btn-colors: map-merge($btn-colors, $extra-colors);
 }
 
 @if $enable-social-colors {
@@ -195,8 +189,8 @@ $btn-colors: $theme-colors;
   .btn-#{$name},
   .btn-outline-#{$name},
   .btn-ghost-#{$name} {
-    --#{$variable-prefix}btn-color: #{hex-to-rgb($color)};
-    --#{$variable-prefix}btn-color-darker: #{hex-to-rgb(theme-color-darker($color))};
+    --#{$variable-prefix}btn-color: #{$color};
+    --#{$variable-prefix}btn-color-interactive: #{theme-color-darker($color)};
     --#{$variable-prefix}btn-color-text: #{color-contrast($color)};
   }
 

package/src/scss/ui/_calendars.scss

@@ -55,7 +55,7 @@
     border: 1px solid transparent;
     border-radius: $border-radius-pill;
     outline: 0;
-    transition: background .3s, border .3s, box-shadow .32s, color .3s;
+    @include transition(background $transition-time, border $transition-time, box-shadow .32s, color $transition-time);
 
     &:hover {
       color: $primary;

package/src/scss/ui/_cards.scss

@@ -1,5 +1,4 @@
 .border-0 {
-
   .card, .nav-link {
     border: 0 !important;
   }
@@ -7,12 +6,12 @@
   .card-stacked::after {
     border: 1px solid rgba($text-muted, 0.07) !important;
   }
-
 }
 
 .card {
   box-shadow: $card-shadow;
   border: $card-border-width solid $card-border-color;
+  background: var(--#{$variable-prefix}card-bg, #{$card-bg});
 
   @media print {
     border: none;
@@ -21,7 +20,7 @@
 
   @at-root a#{&} {
     color: inherit;
-    transition: .3s box-shadow;
+    @include transition(box-shadow $transition-time);
 
     &:hover {
       text-decoration: none;
@@ -94,8 +93,8 @@
   justify-content: center;
   padding: $card-spacer-y $card-spacer-x;
   text-align: center;
-  transition: .3s background;
-  border-top: 1px solid $border-color;
+  @include transition(background $transition-time);
+  border-top: 1px solid var(--#{$variable-prefix}border-color);
   flex: 1;
   color: inherit;
   font-weight: $font-weight-medium;
@@ -105,8 +104,8 @@
     background: $active-bg;
   }
 
-  &:not(:first-child) {
-    border-left: 1px solid $border-color;
+  & + & {
+    border-left: 1px solid var(--#{$variable-prefix}border-color);
   }
 }
 
@@ -187,7 +186,7 @@ Card footer
 
 .card-footer-gray {
   border-top: 0;
-  background: $min-black;
+  background: $gray-50;
 }
 
 .card-progress {

package/src/scss/ui/_flags.scss

@@ -24,7 +24,7 @@ $countries: (
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  border: 1px solid $border-color;
+  border: 1px solid var(--#{$variable-prefix}border-color);
   border-radius: 3px;
 }
 

package/src/scss/ui/_forms.scss

@@ -9,6 +9,7 @@ Form label
  */
 .form-label {
   display: block;
+  font-weight: $font-weight-medium;
 
   &.required {
     &:after {
@@ -30,11 +31,8 @@ Form hint
  */
 .form-hint {
   display: block;
-  font-size: $h5-font-size;
-  line-height: $h5-line-height;
   color: $text-muted;
 
-
   &:last-child {
     margin-bottom: 0;
   }
@@ -44,7 +42,7 @@ Form hint
   }
 
   .form-label + & {
-    margin-top: -.5rem;
+    margin-top: -.25rem;
   }
 
   .input-group + &,
@@ -59,7 +57,8 @@ Form control
  */
 .form-control {
   &:-webkit-autofill {
-    box-shadow: 0 0 0 1000px $white inset;
+    box-shadow: 0 0 0 1000px var(--#{$variable-prefix}body-bg) inset;
+    color: var(--#{$variable-prefix}body-color);
   }
 
   &:disabled,
@@ -130,8 +129,8 @@ Form control
 .form-fieldset {
   padding: 1rem;
   margin-bottom: 1rem;
-  background: $min-black;
-  border: 1px solid $border-color;
+  background: var(--#{$variable-prefix}border-color-light);
+  border: 1px solid var(--#{$variable-prefix}border-color);
   border-radius: $border-radius;
 }
 
@@ -151,9 +150,9 @@ Form help
   text-decoration: none;
   cursor: pointer;
   user-select: none;
-  background: $min-white;
+  background: $gray-100;
   border-radius: $border-radius-pill;
-  transition: .3s background-color, .3s color;
+  @include transition(background-color $transition-time, color $transition-time);
 
   &:hover,
   &[aria-describedby] {
@@ -199,7 +198,7 @@ Input group
 
   .input-group-text {
     background: transparent;
-    transition: $input-transition;
+    @include transition($input-transition);
 
     &:first-child {
       padding-right: 0;

package/src/scss/ui/_legend.scss

@@ -1,6 +1,6 @@
 .legend {
   display: inline-block;
-  background: $border-color;
+  background: var(--#{$variable-prefix}border-color-light);
   width: .75em;
   height: .75em;
   border-radius: $border-radius;

package/src/scss/ui/_lists.scss

@@ -11,7 +11,7 @@
   line-height: 1;
   text-transform: uppercase;
   color: $text-muted;
-  border-bottom: 1px solid $list-group-border-color;
+  border-bottom: 1px solid var(--#{$variable-prefix}border-color);
 
   .list-group-flush > & {
     &:last-child {
@@ -34,7 +34,7 @@
 .list-group-hoverable {
   .list-group-item-actions {
     opacity: 0;
-    transition: .3s opacity;
+    @include transition(opacity $transition-time);
   }
 
   .list-group-item:hover .list-group-item-actions,

package/src/scss/ui/_modals.scss

@@ -19,7 +19,7 @@
   }
 
   & + & {
-    border-top: 1px solid $border-color;
+    border-top: 1px solid var(--#{$variable-prefix}border-color);
   }
 }
 

package/src/scss/ui/_nav.scss

@@ -11,7 +11,7 @@
 
   .nav {
     margin-left: 1.25rem;
-    border-left: 1px solid $border-color;
+    border-left: 1px solid var(--#{$variable-prefix}border-color);
     padding-left: .5rem;
   }
 
@@ -63,14 +63,14 @@
 
 .nav-link {
   display: flex;
-  transition: .3s color;
+  @include transition(color $transition-time);
   align-items: center;
 }
 
 .nav-link-toggle {
   margin-left: auto;
   padding: 0 .25rem;
-  transition: .3s transform;
+  @include transition(transform $transition-time);
   @include caret();
 
   &:after {

package/src/scss/ui/_offcanvas.scss

@@ -1,3 +1,21 @@
-.offcanvas-blur {
-  backdrop-filter: blur($modal-backdrop-blur);
+.offcanvas {
+  background: var(--#{$variable-prefix}card-bg);
+}
+
+.offcanvas-header {
+  border-bottom: 1px solid $border-color-transparent;
+}
+
+.offcanvas-footer {
+  padding: $offcanvas-padding-y $offcanvas-padding-x;
+}
+
+.offcanvas-title {
+  font-size: $h3-font-size;
+  font-weight: $font-weight-medium;
+  line-height: 1.5rem;
+}
+
+.offcanvas-narrow {
+  width: 20rem;
 }

package/src/scss/ui/_progress.scss

@@ -16,6 +16,7 @@
   width: 100%;
   line-height: $progress-height;
   appearance: none;
+  background: var(--#{$variable-prefix}border-color-light);
 
   &::-webkit-progress-bar {
     background: $gray-100;
@@ -62,6 +63,6 @@
 
 .progress-separated {
   .progress-bar {
-    border-right: 2px solid $white;
+    border-right: 2px solid var(--#{$variable-prefix}card-bg, #{$card-bg});
   }
 }

package/src/scss/ui/_ribbons.scss

@@ -35,7 +35,7 @@
   }
 
   @if $enable-extra-colors {
-    @each $color, $value in $colors {
+    @each $color, $value in $extra-colors {
       &.bg-#{$color} {
         border-color: $value;
       }

package/src/scss/ui/_steps.scss

@@ -42,7 +42,7 @@
   @include step-color($primary);
 }
 
-@each $color, $value in $colors {
+@each $color, $value in $extra-colors {
   .steps-#{$color} {
     @include step-color($value);
   }

package/src/scss/ui/_switch-icon.scss

@@ -57,7 +57,7 @@
 .switch-icon-fade {
   .switch-icon-a,
   .switch-icon-b {
-    transition: opacity .5s;
+    @include transition(opacity .5s);
   }
 }
 
@@ -65,7 +65,7 @@
 .switch-icon-scale {
   .switch-icon-a,
   .switch-icon-b {
-    transition: opacity .5s, transform .0s .5s;
+    @include transition(opacity .5s, transform .0s .5s);
   }
 
   .switch-icon-b {
@@ -75,7 +75,7 @@
   &.active {
     .switch-icon-a,
     .switch-icon-b {
-      transition: opacity .0s, transform .5s;
+      @include transition(opacity .0s, transform .5s);
     }
 
     .switch-icon-b {
@@ -92,7 +92,7 @@
   .switch-icon-b {
     backface-visibility: hidden;
     transform-style: preserve-3d;
-    transition: opacity 0s .2s, transform .4s ease-in-out;
+    @include transition(opacity 0s .2s, transform .4s ease-in-out);
   }
 
   .switch-icon-a {
@@ -127,7 +127,7 @@
 
   .switch-icon-a,
   .switch-icon-b {
-    transition: opacity .3s, transform .3s;
+    @include transition(opacity $transition-time, transform $transition-time);
   }
 
   .switch-icon-a {

package/src/scss/ui/_tables.scss

@@ -12,11 +12,13 @@
       }
     }
   }
+
+  >:not(:first-child) {
+    border-top-width: $table-border-width;
+  }
 }
 
 .table-responsive {
-  margin-bottom: $spacer;
-
   .table {
     margin-bottom: 0;
   }

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

@@ -14,7 +14,7 @@ Form check
   margin-top: ($form-check-min-height - $form-check-input-width) * .5;
 
   .form-switch & {
-    transition: .3s background-color, .3s background-position;
+    @include transition(background-color$transition-time, background-position $transition-time);
   }
 }
 

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

@@ -34,7 +34,7 @@ Color Input
     background: no-repeat center center/$form-check-input-checked-bg-size;
     background-image: escape-svg($form-check-input-checked-bg-image);
     opacity: 0;
-    transition: .3s opacity;
+    @include transition(opacity $transition-time);
 
     .form-colorinput-input:checked ~ & {
       opacity: 1;

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

@@ -18,7 +18,7 @@ Image check
   display: block;
   margin: 0;
   user-select: none;
-  border: 1px solid $border-color;
+  border: 1px solid var(--#{$variable-prefix}border-color);
   border-radius: 3px;
 
   .form-imagecheck-input:focus ~ & {
@@ -27,7 +27,7 @@ Image check
   }
 
   .form-imagecheck-input:checked ~ & {
-    border-color: $border-color;
+    border-color: $primary;
   }
 
   &:before {
@@ -45,7 +45,7 @@ Image check
     background: $white;
     border: 1px solid $border-color;
     border-radius: 3px;
-    transition: .3s opacity;
+    @include transition(opacity $transition-time);
 
     .form-imagecheck-input:checked ~ & {
       background-color: $form-check-input-checked-bg-color;
@@ -62,7 +62,7 @@ Image check
   max-width: 100%;
   display: block;
   opacity: .64;
-  transition: .3s opacity;
+  @include transition(opacity $transition-time);
 
   &:first-child {
     border-top-left-radius: 2px;
@@ -86,7 +86,7 @@ Image check
   font-size: $font-size-sm;
   color: $text-muted;
   text-align: center;
-  transition: .3s color;
+  @include transition(color $transition-time);
 
   .form-imagecheck:hover &,
   .form-imagecheck-input:focus ~ .form-imagecheck-figure &,

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

@@ -43,7 +43,7 @@ Select group
   user-select: none;
   border: 1px solid $input-border-color;
   border-radius: 3px;
-  transition: border-color .3s, background .3s, color .3s;
+  @include transition(border-color $transition-time, background $transition-time, color $transition-time);
 
   .icon:only-child {
     margin: 0 -.25rem;
@@ -86,17 +86,23 @@ Select group
   }
 }
 
+.form-selectgroup-check-floated {
+  position: absolute;
+  top: $input-btn-padding-y;
+  right: $input-btn-padding-y;
+}
+
 .form-selectgroup-input:checked + .form-selectgroup-label {
   z-index: 1;
   color: $primary;
   background: rgba($primary, .04);
-  border-color: $input-focus-border-color;
+  border-color: $primary;
 }
 
 .form-selectgroup-input:focus + .form-selectgroup-label {
   z-index: 2;
   color: $primary;
-  border-color: $input-focus-border-color;
+  border-color: $primary;
   box-shadow: $input-btn-focus-box-shadow;
 }
 

package/src/scss/ui/forms/_validation.scss

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

package/src/scss/utils/_background.scss

@@ -1,11 +1,11 @@
 .bg-white-overlay {
   color: $white;
-  background-color: $light-white;
+  background-color: rgba($light, .24);
 }
 
 .bg-dark-overlay {
   color: $white;
-  background-color: $light-black;
+  background-color: rgba($dark, .24);
 }
 
 .bg-cover {

package/src/scss/utils/_colors.scss

@@ -1,22 +1,15 @@
 // stylelint-disable declaration-no-important
 
-/**
-SOCIAL COLORS
- */
-@each $color, $value in $social-colors {
-  .bg-#{"" + $color} {
-    color: #fff !important;
-    background: $value !important;
-  }
-
-  .text-#{"" + $color} {
+@each $color, $value in $theme-colors {
+  .bg-#{"" + $color}-lt {
     color: $value !important;
+    background: theme-color-lighter($value, true) !important;
   }
 }
 
-
+// Extra colors
 @if $enable-extra-colors {
-  @each $color, $value in map-merge($colors, (dark: $dark, muted: $text-muted, white: $white)) {
+  @each $color, $value in $extra-colors {
     .bg-#{"" + $color} {
       background: $value;
     }
@@ -31,3 +24,22 @@ SOCIAL COLORS
     }
   }
 }
+
+// Social colors
+@if $enable-social-colors {
+  @each $color, $value in $social-colors {
+    .bg-#{"" + $color} {
+      color: #ffffff !important;
+      background: $value !important;
+    }
+
+    .text-#{"" + $color} {
+      color: $value !important;
+    }
+
+    .bg-#{"" + $color}-lt {
+      color: $value !important;
+      background: theme-color-lighter($value, true) !important;
+    }
+  }
+}

package/src/scss/vendor/_apexcharts.scss

@@ -0,0 +1,2 @@
+.apexcharts-tooltip {
+}