Refactor alert component styles and markup, remove Bootstrap styles (#2141)

core/scss/_bootstrap-components.scss

@@ -17,7 +17,6 @@
 // @import "bootstrap/scss/accordion";
 @import "bootstrap/scss/breadcrumb";
 @import "bootstrap/scss/pagination";
-@import "bootstrap/scss/alert";
 @import "bootstrap/scss/progress";
 @import "bootstrap/scss/list-group";
 @import "bootstrap/scss/close";

core/scss/ui/_alerts.scss

@@ -1,40 +1,86 @@
 .alert {
-  --#{$prefix}alert-color: #{var(--#{$prefix}secondary)};
-  --#{$prefix}alert-bg: #{var(--#{$prefix}bg-surface)};
-  border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
-  border-left: .25rem var(--#{$prefix}border-style) var(--#{$prefix}alert-color);
-  box-shadow: $alert-shadow;
+  --#{$prefix}alert-bg: transparent;
+  --#{$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: 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);
 
-  >:last-child {
-    margin-bottom: 0;
+  position: relative;
+  padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
+  margin-bottom: var(--#{$prefix}alert-margin-bottom);
+  background-color: var(--#{$prefix}alert-bg);
+  border-radius: var(--#{$prefix}alert-border-radius);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.alert-heading {
+  color: inherit;
+  margin-bottom: .25rem; // todo: use variable
+  font-weight: var(--#{$prefix}alert-heading-font-weight);
+}
+
+.alert-description {
+  color: var(--#{$prefix}secondary);
+}
+
+.alert-icon {
+  color: var(--#{$prefix}alert-color);
+  width: 1.25rem !important; // todo: use variable
+  height: 1.25rem !important;
+}
+
+.alert-action {
+  color: var(--#{$prefix}alert-color);
+  text-decoration: underline;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.alert-list {
+  margin: 0;
+}
+
+.alert-link {
+  font-weight: $alert-link-font-weight;
+  color: var(--#{$prefix}alert-link-color);
+
+  &,
+  &:hover {
+    color: var(--#{$prefix}alert-color);
+  }
+}
+
+
+.alert-dismissible {
+  padding-right: 3rem; //todo: use variable
+
+  .btn-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
   }
 }
 
 .alert-important {
-  border-color: transparent;
-  background: var(--#{$prefix}alert-color);
-  color: #fff;
+  border-color: var(--#{$prefix}alert-color);
+  color: var(--#{$prefix}alert-color);
 
-  .alert-icon,
-  .alert-link,
-  .alert-title {
+  .btn-close,
+  .alert-description {
     color: inherit;
   }
-
-  .alert-link:hover {
-    color: inherit;
-  }
-
-  .btn-close {
-    filter: var(--#{$prefix}btn-close-white-filter);
-  }
-}
-
-.alert-link, {
-  &,
-  &:hover {
-    color: var(--#{$prefix}alert-color);
-  }
 }
 
 @each $name, $color in $theme-colors {
@@ -42,18 +88,3 @@
     --#{$prefix}alert-color: var(--#{$prefix}#{$name});
   }
 }
-
-.alert-icon {
-  color: var(--#{$prefix}alert-color);
-  width: 1.5rem !important;
-  height: 1.5rem !important;
-  margin: -.125rem $alert-padding-x -.125rem 0;
-}
-
-.alert-title {
-  font-size: $h4-font-size;
-  line-height: $h4-line-height;
-  font-weight: var(--#{$prefix}font-weight-bold);
-  margin-bottom: .25rem;
-  color: var(--#{$prefix}alert-color);
-}