Refactor SCSS for alerts and close button styles (#2239)

.changeset/soft-icons-add.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Refactor SCSS for alerts and close button styles

core/scss/_bootstrap-components.scss

@@ -14,12 +14,10 @@
 @import "bootstrap/scss/nav";
 @import "bootstrap/scss/navbar";
 @import "bootstrap/scss/card";
-// @import "bootstrap/scss/accordion";
 @import "bootstrap/scss/breadcrumb";
 @import "bootstrap/scss/pagination";
 @import "bootstrap/scss/progress";
 @import "bootstrap/scss/list-group";
-@import "bootstrap/scss/close";
 @import "bootstrap/scss/toasts";
 @import "bootstrap/scss/modal";
 @import "bootstrap/scss/tooltip";

core/scss/_variables.scss

@@ -216,7 +216,7 @@ $secondary: $text-secondary !default;
 $muted: $text-secondary !default;
 $success: $green !default;
 $info: $azure !default;
-$warning: $orange !default;
+$warning: $yellow !default;
 $danger: $red !default;
 
 $link-color: $primary !default;

core/scss/ui/_alerts.scss

@@ -1,10 +1,10 @@
 .alert {
-  --#{$prefix}alert-bg: transparent;
+  --#{$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;
@@ -66,8 +66,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 +75,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 {

core/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();
+//   }
+// }

preview/pages/_includes/ui/alert.html

@@ -11,7 +11,7 @@
 	{% endif %}
 {% endunless %}
 
-<div class="alert{% if include.important %} alert-important{% endif %} alert-{{ include.type | default: 'primary'}}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
+<div class="alert{% if include.important %} alert-important{% elsif include.minor %} alert-minor{% endif %} alert-{{ include.type | default: 'primary'}}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
 
 	<div class="alert-icon">
 		{% include "ui/icon.html" icon=icon class="alert-icon" %}

preview/pages/alerts.html

@@ -62,4 +62,15 @@ permalink: alerts.html
 			</div>
 		</div>
 	</div>
+	<div class="col-lg-6">
+		<div class="card">
+			<div class="card-body">
+				<h2 class="card-title">Minor alerts</h2>
+				{% include "ui/alert.html" show-close minor=true type="danger" title="Password does not meet requirements:" list="Minimum 8 characters,Include a special character" %}
+				{% include "ui/alert.html" show-close minor=true type="success" description="This is a custom alert box with a description." %}
+				{% include "ui/alert.html" show-close minor=true type="warning" description="This is a custom alert box with a description." %}
+				{% include "ui/alert.html" show-close minor=true type="info" description="This is a custom alert box with a description." %}
+			</div>
+		</div>
+	</div>
 </div>