chore: tweak alert styles

Candinya · Nov 3, 2024 · 0c12b47 · 0c12b47
1 parent f6f1d25
commit 0c12b47
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 6 deletions.
diff --git a/src/scss/kr-core.scss b/src/scss/kr-core.scss
@@ -724,7 +724,6 @@ table {
 .alert {
   padding: 1rem;
   margin: 2rem 0;
-  border: 1px solid transparent;
   display: flex;
   flex-direction: row;
 
@@ -766,7 +765,6 @@ table {
 
   &-primary {
     background-color: #cfe2ff;
-    border-color: #b6d4fe;
 
     .icon,
     .text :not(code) {
@@ -776,7 +774,6 @@ table {
 
   &-success {
     background-color: #d1e7dd;
-    border-color: #badbcc;
 
     .icon,
     .text :not(code) {
@@ -786,7 +783,6 @@ table {
 
   &-danger {
     background-color: #f8d7da;
-    border-color: #f5c2c7;
 
     .icon,
     .text :not(code) {
@@ -796,7 +792,6 @@ table {
 
   &-info {
     background-color: #cff4fc;
-    border-color: #b6effb;
 
     .icon,
     .text :not(code) {
@@ -806,7 +801,6 @@ table {
 
   &-warning {
     background-color: #fff3cd;
-    border-color: #ffecb5;
 
     .icon,
     .text :not(code) {

diff --git a/src/scss/kr-theme/base.scss b/src/scss/kr-theme/base.scss
@@ -272,6 +272,73 @@ a:hover,
     background: $card_background;
   }
 }
+
+.alert {
+  .icon {
+    background-color: $card_background;
+  }
+
+  &-primary {
+    background-color: $alert_primary_bg;
+
+    .icon,
+    .text :not(code) {
+      color: $alert_primary_text;
+    }
+    .text {
+      border-color: $alert_primary_text;
+    }
+  }
+
+  &-success {
+    background-color: $alert_success_bg;
+
+    .icon,
+    .text :not(code) {
+      color: $alert_success_text;
+    }
+    .text {
+      border-color: $alert_success_text;
+    }
+  }
+
+  &-danger {
+    background-color: $alert_danger_bg;
+
+    .icon,
+    .text :not(code) {
+      color: $alert_danger_text;
+    }
+    .text {
+      border-color: $alert_danger_text;
+    }
+  }
+
+  &-info {
+    background-color: $alert_info_bg;
+
+    .icon,
+    .text :not(code) {
+      color: $alert_info_text;
+    }
+    .text {
+      border-color: $alert_info_text;
+    }
+  }
+
+  &-warning {
+    background-color: $alert_warning_bg;
+
+    .icon,
+    .text :not(code) {
+      color: $alert_warning_text;
+    }
+    .text {
+      border-color: $alert_warning_text;
+    }
+  }
+}
+
 /******************* Variables ********************/
 :root {
   --kr-theme-select-text: #{$select_text};

diff --git a/src/scss/kr-theme/dark.scss b/src/scss/kr-theme/dark.scss
@@ -11,5 +11,15 @@ $page_background: #181c27;
 $info_background: #3c495bbb;
 $navbar_desktop: #181c27cc;
 $navbar_mobile: #16171ae6;
+$alert_primary_bg: #2563ebcd;
+$alert_primary_text: #cfe2ff;
+$alert_success_bg: #16a34acd;
+$alert_success_text: #d1e7dd;
+$alert_danger_bg: #dc2626cd;
+$alert_danger_text: #f8d7da;
+$alert_info_bg: #0891b2cd;
+$alert_info_text: #cff4fc;
+$alert_warning_bg: #ca8a04cd;
+$alert_warning_text: #fff3cd;
 
 @import "./base.scss";
diff --git a/src/scss/kr-theme/light.scss b/src/scss/kr-theme/light.scss
@@ -11,5 +11,15 @@ $page_background: #f5f5f5;
 $info_background: #e0e0e0aa;
 $navbar_desktop: #282a2c99;
 $navbar_mobile: #16171ae6;
+$alert_primary_bg: #cfe2ffcd;
+$alert_primary_text: #084298;
+$alert_success_bg: #d1e7ddcd;
+$alert_success_text: #0f5132;
+$alert_danger_bg: #f8d7dacd;
+$alert_danger_text: #842029;
+$alert_info_bg: #cff4fccd;
+$alert_info_text: #055160;
+$alert_warning_bg: #fff3cdcd;
+$alert_warning_text: #664d03;
 
 @import "./base.scss";