From dad4339ed37698b72f1e23a61ec7433c773789e0 Mon Sep 17 00:00:00 2001
From: Frankie Yan <frankie@doist.com>
Date: Mon, 30 Oct 2023 13:30:36 -0700
Subject: [PATCH] Update default alert colours

---
 src/alert/alert.module.css   |  8 ++++----
 src/alert/alert.tsx          |  2 +-
 src/styles/design-tokens.css | 24 ++++++++++++------------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/alert/alert.module.css b/src/alert/alert.module.css
index 26f758425..d5b95121a 100644
--- a/src/alert/alert.module.css
+++ b/src/alert/alert.module.css
@@ -11,7 +11,7 @@
     background-color: var(--reactist-alert-tone-info-background);
     border-color: var(--reactist-alert-tone-info-border);
 }
-.tone-info svg {
+.tone-info .icon {
     color: var(--reactist-alert-tone-info-icon);
 }
 
@@ -19,7 +19,7 @@
     background-color: var(--reactist-alert-tone-positive-background);
     border-color: var(--reactist-alert-tone-positive-border);
 }
-.tone-positive svg {
+.tone-positive .icon {
     color: var(--reactist-alert-tone-positive-icon);
 }
 
@@ -27,7 +27,7 @@
     background-color: var(--reactist-alert-tone-caution-background);
     border-color: var(--reactist-alert-tone-caution-border);
 }
-.tone-caution svg {
+.tone-caution .icon {
     color: var(--reactist-alert-tone-caution-icon);
 }
 
@@ -35,6 +35,6 @@
     background-color: var(--reactist-alert-tone-critical-background);
     border-color: var(--reactist-alert-tone-critical-border);
 }
-.tone-critical svg {
+.tone-critical .icon {
     color: var(--reactist-alert-tone-critical-icon);
 }
diff --git a/src/alert/alert.tsx b/src/alert/alert.tsx
index a1cc7f5b2..455e7cee5 100644
--- a/src/alert/alert.tsx
+++ b/src/alert/alert.tsx
@@ -34,7 +34,7 @@ function Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {
             className={[styles.container, getClassNames(styles, 'tone', tone)]}
         >
             <Columns space="small" alignY="top">
-                <Column width="content">
+                <Column width="content" exceptionallySetClassName={styles.icon}>
                     <AlertIcon tone={tone} />
                 </Column>
                 <Column>
diff --git a/src/styles/design-tokens.css b/src/styles/design-tokens.css
index b4b4d6141..2bab5c1d9 100644
--- a/src/styles/design-tokens.css
+++ b/src/styles/design-tokens.css
@@ -86,21 +86,21 @@
     /* component-specific */
 
     /* alerts */
-    --reactist-alert-tone-info-icon: #1d438c;
-    --reactist-alert-tone-info-border: rgb(36, 111, 224);
-    --reactist-alert-tone-info-background: rgba(36, 111, 224, 0.1);
+    --reactist-alert-tone-info-icon: rgba(49, 111, 234);
+    --reactist-alert-tone-info-border: rgba(238, 238, 238);
+    --reactist-alert-tone-info-background: rgba(250, 250, 250);
 
-    --reactist-alert-tone-positive-icon: #035017;
-    --reactist-alert-tone-positive-border: rgb(5, 133, 39);
-    --reactist-alert-tone-positive-background: rgba(5, 133, 39, 0.1);
+    --reactist-alert-tone-positive-icon: rgba(5, 133, 39);
+    --reactist-alert-tone-positive-border: rgba(238, 238, 238);
+    --reactist-alert-tone-positive-background: rgba(250, 250, 250);
 
-    --reactist-alert-tone-caution-icon: #5e3704;
-    --reactist-alert-tone-caution-border: rgb(235, 141, 19);
-    --reactist-alert-tone-caution-background: rgba(235, 141, 19, 0.2);
+    --reactist-alert-tone-caution-icon: rgba(235, 137, 9);
+    --reactist-alert-tone-caution-border: rgba(238, 238, 238);
+    --reactist-alert-tone-caution-background: rgba(250, 250, 250);
 
-    --reactist-alert-tone-critical-icon: #b03d32;
-    --reactist-alert-tone-critical-border: rgb(209, 69, 59);
-    --reactist-alert-tone-critical-background: rgba(209, 69, 59, 0.1);
+    --reactist-alert-tone-critical-icon: rgba(220, 76, 62);
+    --reactist-alert-tone-critical-border: rgba(238, 238, 238);
+    --reactist-alert-tone-critical-background: rgba(250, 250, 250);
 
     /* toasts */
     --reactist-toast-actionable-primary-tint: #39d1ef;