style fixes

Author: mydea

src/components/alert/styles.scss

@@ -1,5 +1,4 @@
 .alert {
-  background: var(--accent-2);
   margin-bottom: 1rem;
   padding: 0.5rem 1rem;
   border-radius: 6px;
@@ -8,6 +7,7 @@
   flex-direction: row;
   gap: 0.7em;
   line-height: 1.75em;
+  border: 1px solid var(--alert-highlight-color);
 
   p {
     margin-bottom: 0.5rem;
@@ -28,32 +28,31 @@
     padding-inline-start: 0;
     margin: 0;
   }
+
+  .alert-header {
+    font-weight: 500;
+    color: inherit;
+  }
 }
 
 .alert-icon {
   flex: 1em 0 0;
   height: 1.75em;
-}
-
-.alert-header {
-  font-weight: 500;
+  color: var(--alert-highlight-color);
 }
 
 .alert-info {
+  --alert-highlight-color: var(--desatPurple5);
   background: var(--desatPurple15);
-  background: color-mix(in srgb, var(--desatPurple15), transparent 10%);
 }
 
 .alert-success {
+  --alert-highlight-color: var(--successGreen);
   background: var(--successGreen);
   background: color-mix(in srgb, var(--successGreen), transparent 85%);
 }
 
 .alert-warning {
+  --alert-highlight-color: var(--flame0);
   background: var(--desatFlame8);
-  background: color-mix(in srgb, var(--desatFlame8), transparent 10%);
-
-  > .alert-icon {
-    color: var(--flame5);
-  }
 }