Update default alert colours

Doist · Oct 30, 2023 · dad4339 · dad4339
1 parent 908afd6
commit dad4339
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git a/src/alert/alert.module.css b/src/alert/alert.module.css
@@ -11,30 +11,30 @@
     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);
 }
 
 .tone-positive {
     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);
 }
 
 .tone-caution {
     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);
 }
 
 .tone-critical {
     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
@@ -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
@@ -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;