From 4c03c65933da539af223c73e581bf99274bc86a4 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 20 Nov 2024 09:43:39 +0100
Subject: [PATCH] feat!: Change colours for Alert (#1757)

---
 packages/css/src/components/alert/alert.scss         |  4 ++++
 packages/react/src/Alert/Alert.tsx                   |  2 +-
 .../tokens/src/components/ams/alert.tokens.json      | 12 +++++-------
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/css/src/components/alert/alert.scss b/packages/css/src/components/alert/alert.scss
index 47d4d0a207..52a0e0a817 100644
--- a/packages/css/src/components/alert/alert.scss
+++ b/packages/css/src/components/alert/alert.scss
@@ -23,17 +23,21 @@
 }
 
 .ams-alert--error {
+  background-color: var(--ams-alert-error-background-color);
   border-color: var(--ams-alert-error-border-color);
 }
 
 .ams-alert--info {
+  background-color: var(--ams-alert-info-background-color);
   border-color: var(--ams-alert-info-border-color);
 }
 
 .ams-alert--success {
+  background-color: var(--ams-alert-success-background-color);
   border-color: var(--ams-alert-success-border-color);
 }
 
 .ams-alert--warning {
+  background-color: var(--ams-alert-warning-background-color);
   border-color: var(--ams-alert-warning-border-color);
 }
diff --git a/packages/react/src/Alert/Alert.tsx b/packages/react/src/Alert/Alert.tsx
index fddfb9841d..d3d4357f07 100644
--- a/packages/react/src/Alert/Alert.tsx
+++ b/packages/react/src/Alert/Alert.tsx
@@ -68,7 +68,7 @@ export const Alert = forwardRef(
           )}
           {children}
         </div>
-        {closeable && <IconButton label={closeButtonLabel} size={alertSize} onClick={onClose} />}
+        {closeable && <IconButton contrastColor label={closeButtonLabel} size={alertSize} onClick={onClose} />}
       </Tag>
     )
   },
diff --git a/proprietary/tokens/src/components/ams/alert.tokens.json b/proprietary/tokens/src/components/ams/alert.tokens.json
index df8fe6b937..3d0c670451 100644
--- a/proprietary/tokens/src/components/ams/alert.tokens.json
+++ b/proprietary/tokens/src/components/ams/alert.tokens.json
@@ -7,23 +7,21 @@
       "padding-block": { "value": "{ams.space.md}" },
       "padding-inline": { "value": "{ams.space.lg}" },
       "error": {
+        "background-color": { "value": "{ams.brand.color.red.20}" },
         "border-color": { "value": "{ams.brand.color.red.60}" }
       },
       "info": {
-        "border-color": { "value": "{ams.brand.color.blue.60}" }
+        "background-color": { "value": "{ams.brand.color.azure.20}" },
+        "border-color": { "value": "{ams.brand.color.azure.60}" }
       },
       "success": {
+        "background-color": { "value": "{ams.brand.color.green.20}" },
         "border-color": { "value": "{ams.brand.color.green.60}" }
       },
       "warning": {
+        "background-color": { "value": "{ams.brand.color.orange.20}" },
         "border-color": { "value": "{ams.brand.color.orange.60}" }
       },
-      "close": {
-        "fill": { "value": "{ams.brand.color.neutral.100}" },
-        "hover": {
-          "fill": { "value": "{ams.brand.color.blue.60}" }
-        }
-      },
       "content": {
         "gap": { "value": "{ams.space.sm}" }
       }