From 3458a60c8b69b824ac7b5c0ad15df5aa899ed313 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Fri, 3 Oct 2025 08:11:52 +0200 Subject: [PATCH 1/2] Reimplemented alert using semantic token --- packages/lib/src/alert/Alert.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/lib/src/alert/Alert.tsx b/packages/lib/src/alert/Alert.tsx index b2609c372..6ee7d21da 100644 --- a/packages/lib/src/alert/Alert.tsx +++ b/packages/lib/src/alert/Alert.tsx @@ -28,7 +28,7 @@ const AlertContainer = styled.div<{ background-color: ${(props) => (props.mode === "modal" && "var(--color-bg-neutral-lightest)") || - (props.semantic === "info" && "var(--color-bg-secondary-lighter)") || + (props.semantic === "info" && "var(--color-bg-info-lighter)") || (props.semantic === "success" && "var(--color-bg-success-lighter)") || (props.semantic === "warning" && "var(--color-bg-warning-lighter)") || (props.semantic === "error" && "var(--color-bg-error-lighter)")}; @@ -41,7 +41,7 @@ const TitleContainer = styled.div<{ mode: AlertPropsType["mode"]; semantic: Aler align-items: center; gap: var(--spacing-gap-s); color: ${(props) => - (props.semantic === "info" && "var(--color-fg-secondary-medium)") || + (props.semantic === "info" && "var(--color-fg-info-medium)") || (props.semantic === "success" && "var(--color-fg-success-medium)") || (props.semantic === "warning" && "var(--color-fg-warning-medium)") || (props.semantic === "error" && "var(--color-fg-error-medium)")}; From 079e50ad714bd0d811738bce6efc3abd647d0ce8 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Fri, 3 Oct 2025 13:14:54 +0200 Subject: [PATCH 2/2] Changed to appropiate color token --- packages/lib/src/alert/Alert.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/src/alert/Alert.tsx b/packages/lib/src/alert/Alert.tsx index 6ee7d21da..d53333fe2 100644 --- a/packages/lib/src/alert/Alert.tsx +++ b/packages/lib/src/alert/Alert.tsx @@ -41,7 +41,7 @@ const TitleContainer = styled.div<{ mode: AlertPropsType["mode"]; semantic: Aler align-items: center; gap: var(--spacing-gap-s); color: ${(props) => - (props.semantic === "info" && "var(--color-fg-info-medium)") || + (props.semantic === "info" && "var(--color-fg-info-strong)") || (props.semantic === "success" && "var(--color-fg-success-medium)") || (props.semantic === "warning" && "var(--color-fg-warning-medium)") || (props.semantic === "error" && "var(--color-fg-error-medium)")};