@tabler/core 1.1.0 → 1.2.0

package/scss/ui/_accordion.scss

@@ -3,41 +3,57 @@
   --#{$prefix}accordion-border-color: var(--#{$prefix}border-color);
   --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
   --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
+  --#{$prefix}accordion-padding-x: #{$accordion-body-padding-x};
+  --#{$prefix}accordion-gap: 0;
+  --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
   --#{$prefix}accordion-btn-color: var(--#{$prefix}accordion-color);
   --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
   --#{$prefix}accordion-btn-toggle-width: 1.25rem;
-  --#{$prefix}accordion-padding-x: #{$accordion-body-padding-x};
   --#{$prefix}accordion-btn-padding-x: var(--#{$prefix}accordion-padding-x);
   --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
+  --#{$prefix}accordion-btn-font-weight: var(--#{$prefix}font-weight-medium);
   --#{$prefix}accordion-body-padding-x: var(--#{$prefix}accordion-padding-x);
   --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
-  --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
-  --#{$prefix}accordion-gap: 0;
 
   display: flex;
   flex-direction: column;
   gap: var(--#{$prefix}accordion-gap);
 }
 
-.accordion-header {
+.accordion-button {
   position: relative;
   display: flex;
-  gap: 1rem;
   align-items: center;
   width: 100%;
   padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-padding-x);
-  color: var(--#{$prefix}accordion-btn-color);
-  text-align: left;
+  color: inherit;
+  text-align: inherit;
   background-color: transparent;
   border: 0;
-  overflow-anchor: none;
-  transition: transform $transition-time;
+  font-size: inherit;
+  font-weight: var(--#{$prefix}accordion-btn-font-weight);
+  gap: .75rem;
 
   &:not(.collapsed) {
     border-bottom-color: transparent;
     box-shadow: none;
     color: var(--#{$prefix}accordion-active-color);
   }
+}
+
+.accordion-header {
+  margin: 0;
+  position: relative;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  width: 100%;
+  color: var(--#{$prefix}accordion-btn-color);
+  text-align: left;
+  background-color: transparent;
+  border: 0;
+  overflow-anchor: none;
+  transition: transform $transition-time;
 
   &:hover {
     z-index: 2;
@@ -55,11 +71,11 @@
   }
 }
 
-.accordion-header-icon {
+.accordion-button-icon {
   color: var(--#{$prefix}secondary);
 }
 
-.accordion-header-toggle {
+.accordion-button-toggle {
   display: flex;
   line-height: 1;
   transition: $transition-time transform;
@@ -69,7 +85,7 @@
   width: var(--#{$prefix}accordion-btn-toggle-width);
   height: var(--#{$prefix}accordion-btn-toggle-width);
 
-  .accordion-header:not(.collapsed) & {
+  .accordion-button:not(.collapsed) & {
     transform: rotate(-180deg);
     color: var(--#{$prefix}accordion-active-color);
   }
@@ -79,23 +95,14 @@
   }
 }
 
-.accordion-header-toggle-plus {
-  .accordion-header:not(.collapsed) & {
+.accordion-button-toggle-plus {
+  .accordion-button:not(.collapsed) & {
     path:first-child {
       opacity: 0;
     }
   } 
 }
 
-.accordion-header-text {
-  margin-bottom: 0;
-
-  h1, h2, h3, h4, h5, h6,
-  .h1, .h2, .h3, .h4, .h5, .h6 {
-    margin-bottom: 0;
-  }
-}
-
 .accordion-item {
   color: var(--#{$prefix}accordion-color);
   border: var(--#{$prefix}border-width) solid var(--#{$prefix}accordion-border-color);
@@ -145,13 +152,11 @@
       border-bottom: 0;
     }
 
-    // stylelint-disable selector-max-class
     > .accordion-collapse,
     > .accordion-header .accordion-button,
     > .accordion-header .accordion-button.collapsed {
       @include border-radius(0);
     }
-    // stylelint-enable selector-max-class
   }
 }
 
@@ -165,7 +170,7 @@
 }
 
 .accordion-inverted {
-  .accordion-header-toggle {
+  .accordion-button-toggle {
     order: -1;
     margin-left: 0;
   }

package/scss/ui/_alerts.scss

@@ -1,15 +1,17 @@
 .alert {
-  --#{$prefix}alert-bg: transparent;
+  // scss-docs-start alert-variables
+  --#{$prefix}alert-color: var(--#{$prefix}body-color);
+  --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), .1)};
   --#{$prefix}alert-padding-x: #{$alert-padding-x};
   --#{$prefix}alert-padding-y: #{$alert-padding-y};
   --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
-  --#{$prefix}alert-color: inherit;
-  --#{$prefix}alert-border-color: var(--#{$prefix}border-color);
+  --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-color), .2)};
   --#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color);
   --#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
   --#{$prefix}alert-link-color: inherit;
   --#{$prefix}alert-heading-font-weight: var(--#{$prefix}font-weight-medium);
-
+  // scss-docs-end
+  
   position: relative;
   padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
   margin-bottom: var(--#{$prefix}alert-margin-bottom);
@@ -66,8 +68,8 @@
 
   .btn-close {
     position: absolute;
-    top: 0;
-    right: 0;
+    top: calc(var(--#{$prefix}alert-padding-x) / 2 - 1px);
+    right: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px);
     z-index: 1;
     padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
   }
@@ -75,12 +77,21 @@
 
 .alert-important {
   border-color: var(--#{$prefix}alert-color);
-  color: var(--#{$prefix}alert-color);
+  background-color: var(--#{$prefix}alert-color);
+  color: var(--#{$prefix}white);
 
-  .btn-close,
   .alert-description {
     color: inherit;
   }
+
+  .alert-icon {
+    color: inherit;
+  }
+}
+
+.alert-minor {
+  background: transparent;
+  border-color: var(--tblr-border-color);
 }
 
 @each $name, $color in $theme-colors {

package/scss/ui/_avatars.scss

@@ -1,10 +1,12 @@
 .avatar {
-  --#{$prefix}avatar-size: #{$avatar-size};
+  --#{$prefix}avatar-size: var(--#{$prefix}avatar-list-size, #{$avatar-size});
   --#{$prefix}avatar-status-size: #{$avatar-status-size};
   --#{$prefix}avatar-bg: #{$avatar-bg};
-  --#{$prefix}avatar-box-shadow: #{$avatar-box-shadow};
+  --#{$prefix}avatar-box-shadow-color: var(--#{$prefix}border-color-translucent);
+  --#{$prefix}avatar-box-shadow: inset 0 0 0 1px var(--#{$prefix}avatar-box-shadow-color);
   --#{$prefix}avatar-font-size: #{$avatar-font-size};
   --#{$prefix}avatar-icon-size: #{$avatar-icon-size};
+  --#{$prefix}avatar-brand-size: #{$avatar-brand-size};
   position: relative;
   width: var(--#{$prefix}avatar-size);
   height: var(--#{$prefix}avatar-size);
@@ -22,6 +24,7 @@
   background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
   border-radius: $avatar-border-radius;
   box-shadow: var(--#{$prefix}avatar-box-shadow);
+  transition: color $transition-time, background-color $transition-time, box-shadow $transition-time;
 
   .icon {
     width: var(--#{$prefix}avatar-icon-size);
@@ -38,6 +41,11 @@
 
   @at-root a#{&} {
     cursor: pointer;
+    
+    &:hover {
+      color: var(--#{$prefix}primary);
+      --#{$prefix}avatar-box-shadow-color: var(--#{$prefix}primary);
+    }
   }
 }
 
@@ -51,11 +59,12 @@
     --#{$prefix}avatar-status-size: #{map-get($size, status-size)};
     --#{$prefix}avatar-font-size: #{map-get($size, font-size)};
     --#{$prefix}avatar-icon-size: #{map-get($size, icon-size)};
-  }
+    --#{$prefix}avatar-brand-size: #{map-get($size, brand-size)};
 
-  .avatar-#{$avatar-size} .badge:empty {
-    width: map-get($size, status-size);
-    height: map-get($size, status-size);
+    .badge:empty {
+      width: map-get($size, status-size);
+      height: map-get($size, status-size);
+    }
   }
 }
 
@@ -63,6 +72,7 @@
 // Avatar list
 //
 .avatar-list {
+  --#{$prefix}avatar-list-size: #{$avatar-size};
   @include elements-list;
 
   a.avatar {
@@ -78,7 +88,13 @@
 
   .avatar {
     margin-right: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
-    box-shadow: var(--#{$prefix}avatar-box-shadow), 0 0 0 2px var(--#{$prefix}card-cap-bg, var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)));
+    box-shadow: var(--#{$prefix}avatar-box-shadow), 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+  }
+}
+
+@each $avatar-size, $size in $avatar-sizes {
+  .avatar-list-#{$avatar-size} {
+    --#{$prefix}avatar-list-size: #{map-get($size, size)};
   }
 }
 
@@ -86,8 +102,6 @@
 // Avatar upload
 //
 .avatar-upload {
-  width: 4rem;
-  height: 4rem;
   border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
   background: $form-check-input-bg;
   box-shadow: none;
@@ -116,4 +130,16 @@
 .avatar-cover {
   margin-top: calc(-.5 * var(--#{$prefix}avatar-size));
   box-shadow: 0 0 0 .25rem var(--#{$prefix}card-bg, var(--#{$prefix}body-bg));
+}
+
+.avatar-brand {
+  width: var(--#{$prefix}avatar-brand-size);
+  height: var(--#{$prefix}avatar-brand-size);
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  z-index: 1000;
+  background: var(--#{$prefix}bg-surface);
+  border-radius: var(--#{$prefix}border-radius);
+  border: 1px solid var(--#{$prefix}border-color);
 }

package/scss/ui/_badges.scss

@@ -28,7 +28,7 @@
   line-height: var(--#{$prefix}badge-line-height);
 
   @at-root a#{&} {
-    color: $card-bg;
+    background: var(--#{$prefix}bg-surface-secondary);
   }
 
   .icon {

package/scss/ui/_buttons.scss

@@ -10,7 +10,7 @@
   --#{$prefix}btn-border-color: #{$btn-border-color};
   --#{$prefix}btn-hover-bg: var(--#{$prefix}btn-bg);
   --#{$prefix}btn-hover-border-color: var(--#{$prefix}border-active-color);
-  --#{$prefix}btn-box-shadow: var(--#{$prefix}box-shadow-input);
+  --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-input);
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-bg};
   --#{$prefix}btn-active-border-color: #{$active-border-color};
@@ -72,7 +72,7 @@
 //
 // Button color variations
 //
-@each $color, $value in $theme-colors {
+@each $color, $value in map-merge($theme-colors, $social-colors) {
   .btn-#{$color} {
     @if $color == 'dark' {
       --#{$prefix}btn-border-color: var(--#{$prefix}dark-mode-border-color);
@@ -84,7 +84,7 @@
       --#{$prefix}btn-active-border-color: transparent;
     }
 
-    --#{$prefix}btn-color: var(--#{$prefix}#{$color}-fg);
+    --#{$prefix}btn-color: var(--#{$prefix}#{$color}-fg, #{$white});
     --#{$prefix}btn-bg: var(--#{$prefix}#{$color});
     --#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
     --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color}-darken);
@@ -92,7 +92,7 @@
     --#{$prefix}btn-active-bg: var(--#{$prefix}#{$color}-darken);
     --#{$prefix}btn-disabled-bg: var(--#{$prefix}#{$color});
     --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color}-fg);
-    --#{$prefix}btn-box-shadow: var(--#{$prefix}box-shadow-input);
+    --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-input);
   }
 
   .btn-outline-#{$color} {
@@ -107,21 +107,19 @@
     --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color});
     --#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color});
   }
-}
 
-@each $name, $color in $theme-colors {
-  .btn-ghost-#{$name} {
-    --#{$prefix}btn-color: var(--#{$prefix}#{$name});
+  .btn-ghost-#{$color} {
+    --#{$prefix}btn-color: var(--#{$prefix}#{$color});
     --#{$prefix}btn-bg: transparent;
     --#{$prefix}btn-border-color: transparent;
-    --#{$prefix}btn-hover-color: var(--#{$prefix}#{$name}-fg);
-    --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$name});
-    --#{$prefix}btn-hover-border-color: var(--#{$prefix}#{$name});
-    --#{$prefix}btn-active-color: var(--#{$prefix}#{$name}-fg);
-    --#{$prefix}btn-active-bg: var(--#{$prefix}#{$name});
+    --#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color});
+    --#{$prefix}btn-hover-border-color: var(--#{$prefix}#{$color});
+    --#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
+    --#{$prefix}btn-active-bg: var(--#{$prefix}#{$color});
     --#{$prefix}btn-active-border-color: transparent;
     --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$name});
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color});
     --#{$prefix}btn-disabled-bg: transparent;
     --#{$prefix}btn-disabled-border-color: transparent;
     --#{$prefix}gradient: none;
@@ -186,9 +184,9 @@
 .btn-floating {
   position: fixed;
   z-index: $zindex-fixed;
-  bottom: 1.5rem;
-  right: 1.5rem;
-  border-radius: $border-radius-pill;
+  bottom: 1rem;
+  left: 1rem;
+  box-shadow: var(--#{$prefix}shadow-dropdown);
 }
 
 //

package/scss/ui/_close.scss

@@ -1,7 +1,60 @@
 .btn-close {
+  --#{$prefix}btn-close-color: currentColor;
+  --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
+  --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
+  --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
+  --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
+  --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
+  --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
+  --#{$prefix}btn-close-size: #{$btn-close-width};
+
+  width: var(--#{$prefix}btn-close-size);
+  height: var(--#{$prefix}btn-close-size);
+  padding: $btn-close-padding-y $btn-close-padding-x;
+  color: var(--#{$prefix}btn-close-color);
+  mask: var(--#{$prefix}btn-close-bg) no-repeat center/calc(var(--#{$prefix}btn-close-size) * .75);
+  background-color: var(--#{$prefix}btn-close-color);
+  border: 0;
+  border-radius: var(--tblr-border-radius);
+  opacity: var(--#{$prefix}btn-close-opacity);
   cursor: pointer;
+  display: block;
+
+  &:hover {
+    color: var(--#{$prefix}btn-close-color);
+    text-decoration: none;
+    opacity: var(--#{$prefix}btn-close-hover-opacity);
+  }
 
   &:focus {
-    outline: none;
+    outline: 0;
+    box-shadow: var(--#{$prefix}btn-close-focus-shadow);
+    opacity: var(--#{$prefix}btn-close-focus-opacity);
+  }
+
+  &:disabled,
+  &.disabled {
+    pointer-events: none;
+    user-select: none;
+    opacity: var(--#{$prefix}btn-close-disabled-opacity);
   }
-}
+}
+
+// @mixin btn-close-white() {
+//   --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
+// }
+
+// .btn-close-white {
+//   @include btn-close-white();
+// }
+
+// :root,
+// [data-bs-theme="light"] {
+//   --#{$prefix}btn-close-filter: #{$btn-close-filter};
+// }
+
+// @if $enable-dark-mode {
+//   @include color-mode(dark, true) {
+//     @include btn-close-white();
+//   }
+// }

package/scss/ui/_dropdowns.scss

@@ -109,6 +109,7 @@
 
 .dropdown-menu-card {
   padding: 0;
+  min-width: 20rem;
 
   > .card {
     margin: 0;

package/scss/ui/_forms.scss

@@ -68,7 +68,7 @@ Form control
  */
 .form-control {
   &:-webkit-autofill {
-    box-shadow: 0 0 0 1000px var(--#{$prefix}body-bg) inset;
+    box-shadow: 0 0 0 1000px var(--#{$prefix}bg-surface-secondary) inset;
     color: var(--#{$prefix}body-color);
     -webkit-text-fill-color: var(--#{$prefix}body-color);
   }
@@ -125,7 +125,7 @@ Form control
 .form-fieldset {
   padding: 1rem;
   margin-bottom: 1rem;
-  background: var(--#{$prefix}body-bg);
+  background: var(--#{$prefix}bg-surface-secondary);
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   border-radius: var(--#{$prefix}border-radius);
 }
@@ -238,4 +238,14 @@ label[for="floating-input"] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
+
+/**
+Forms on mobile devices 
+  */
+.form-control,
+.form-select {
+  @include media-breakpoint-down(sm) {
+    font-size: 1rem;
+  }
 }

package/scss/ui/_markdown.scss

@@ -2,7 +2,7 @@
 Markdown
  */
 .markdown {
-  line-height: $line-height-lg;
+  line-height: $line-height-xl;
 
   > :first-child {
     margin-top: 0;
@@ -24,6 +24,10 @@ Markdown
     h1, h2, h3, h4, h5, h6 {
       font-weight: var(--#{$prefix}font-weight-bold);
     }
+
+    h2, h3, h4, h5, h6 {
+      margin-top: 2.5rem;
+    }
   }
 
   > table {
@@ -39,5 +43,10 @@ Markdown
   > img,
   > p > img {
     border-radius: var(--#{$prefix}border-radius);
+    border: 1px solid var(--#{$prefix}border-color);
+  }
+
+  > pre {
+    max-height: 20rem;
   }
 }

package/scss/ui/_nav.scss

@@ -1,3 +1,7 @@
+.nav {
+  --#{$prefix}nav-link-hover-bg: #{color-transparent(var(--#{$prefix}nav-link-color), 0.04)};
+}
+
 .nav-vertical {
   &,
   .nav {
@@ -13,7 +17,8 @@
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    font-weight: var(--#{$prefix}font-weight-medium);
+    font-weight: var(--#{$prefix}font-weight-bold);
+    color: var(--#{$prefix}nav-link-active-color);
   }
 
   &.nav-pills {
@@ -46,7 +51,12 @@
     color: $nav-bordered-link-active-color;
     border-color: $nav-bordered-link-active-border-color;
   }
+}
 
+.nav-underline {
+  .nav-link {
+    border-radius: 0;
+  }
 }
 
 .nav-link {

package/scss/ui/_offcanvas.scss

@@ -1,5 +1,5 @@
 .offcanvas-header {
-  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent;
+  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 }
 
 .offcanvas-footer {

package/scss/ui/_pagination.scss

@@ -1,5 +1,7 @@
 .pagination {
+  --#{$prefix}pagination-gap: .25rem;
   user-select: none;
+  gap: var(--#{$prefix}pagination-gap);
 }
 
 .page-link {

package/scss/ui/_signature.scss

@@ -1,12 +1,14 @@
 .signature {
+  --#{$prefix}signature-padding: var(--#{$prefix}spacer-1);
+  --#{$prefix}signature-border-radius: var(--#{$prefix}border-radius);
   border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
-  padding: var(--#{$prefix}spacer-1);
+  padding: var(--#{$prefix}signature-padding);
   border-radius: var(--#{$prefix}border-radius);
 }
 
 .signature-canvas {
   border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
-  border-radius: var(--#{$prefix}border-radius-sm);
+  border-radius: calc(var(--#{$prefix}signature-border-radius) - var(--#{$prefix}signature-padding));
   display: block;
   cursor: crosshair;
   width: 100%;

package/scss/ui/_steps.scss

@@ -17,6 +17,10 @@
 @each $name, $color in $extra-colors {
   .steps-#{$name} {
     --#{$prefix}steps-color: var(--#{$prefix}#{$name});
+
+    &-lt {
+      --#{$prefix}steps-color: var(--#{$prefix}#{$name}-lt);
+    }
   }
 }
 

package/scss/ui/_tables.scss

@@ -154,8 +154,24 @@ Table sort
 //
 .table-selectable {
   tbody tr {
+    .on-checked {
+      display: none;
+    }
+
+    .on-unchecked {
+      display: initial;
+    }
+
     &:has(.table-selectable-check:checked) {
       background-color: $table-active-bg;
+
+      .on-checked {
+        display: initial;
+      }
+
+      .on-unchecked {
+        display: none;
+      }
     }
   }
 }

package/scss/ui/_tags.scss

@@ -7,7 +7,7 @@
   border-radius: var(--#{$prefix}border-radius);
   padding: 0 0.5rem;
   background: var(--#{$prefix}bg-surface);
-  box-shadow: var(--#{$prefix}box-shadow-input);
+  box-shadow: var(--#{$prefix}shadow-input);
   gap: .5rem;
 
   .btn-close {