From 8bc0d6008b910b4e11232d36377f2572f184be2b Mon Sep 17 00:00:00 2001 From: Ju-MINJAE Date: Fri, 31 Oct 2025 17:26:58 +0900 Subject: [PATCH 1/5] fix: improve color contrast in AlertBox info variant - Change info background from bg-info-600 to bg-info-400 - Improves text contrast ratio to meet WCAG 2.1 AA standards - Ensures better readability for users with visual impairments The darker background (info-400) provides better contrast with white text, meeting the minimum 4.5:1 contrast ratio requirement. Fixes #8290 --- packages/ui-components/src/Common/AlertBox/index.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-components/src/Common/AlertBox/index.module.css b/packages/ui-components/src/Common/AlertBox/index.module.css index c0dae1fbba9ee..a838b1aedd692 100644 --- a/packages/ui-components/src/Common/AlertBox/index.module.css +++ b/packages/ui-components/src/Common/AlertBox/index.module.css @@ -47,7 +47,7 @@ } &.info { - @apply bg-info-600; + @apply bg-info-400; .title { @apply bg-info-700; From 144ecb943c39875eda2ece0636623b5f999e8e5e Mon Sep 17 00:00:00 2001 From: Ju-MINJAE Date: Fri, 31 Oct 2025 17:26:58 +0900 Subject: [PATCH 2/5] fix: resolve CSS conflict between AlertBox and markdown styles - Keep background color at bg-info-600 as per design system - Add !important to paragraph color to override markdown styles - Fix text color conflict where p tags inherit markdown paragraph styles The issue was a CSS specificity conflict. Paragraph elements inside AlertBox were inheriting black text color from markdown styles instead of maintaining the white text color defined in AlertBox styles. Fixes #8290 --- packages/ui-components/src/Common/AlertBox/index.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/ui-components/src/Common/AlertBox/index.module.css b/packages/ui-components/src/Common/AlertBox/index.module.css index c0dae1fbba9ee..068530e3bf6a0 100644 --- a/packages/ui-components/src/Common/AlertBox/index.module.css +++ b/packages/ui-components/src/Common/AlertBox/index.module.css @@ -15,6 +15,10 @@ text-sm text-white; + p { + color: white !important; + } + a { @apply font-bold text-white From 91a4588703381b994f75f8cb53c5c089077b61e4 Mon Sep 17 00:00:00 2001 From: Ju-MINJAE Date: Fri, 31 Oct 2025 19:04:27 +0900 Subject: [PATCH 3/5] improve color contrast in AlertBox info variant --- packages/ui-components/src/Common/AlertBox/index.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-components/src/Common/AlertBox/index.module.css b/packages/ui-components/src/Common/AlertBox/index.module.css index c6cf8af1fa604..e68e336bd8217 100644 --- a/packages/ui-components/src/Common/AlertBox/index.module.css +++ b/packages/ui-components/src/Common/AlertBox/index.module.css @@ -16,7 +16,7 @@ text-white; p { - color: white !important; + @apply text-white; } a { @@ -51,7 +51,7 @@ } &.info { - @apply bg-info-400; + @apply bg-info-600; .title { @apply bg-info-700; From 12aa2510bd3aedca12b5cd9e04825d4792d22d7e Mon Sep 17 00:00:00 2001 From: Ju-MINJAE Date: Fri, 31 Oct 2025 23:12:47 +0900 Subject: [PATCH 4/5] fix: add span and div to text color override --- packages/ui-components/src/Common/AlertBox/index.module.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/ui-components/src/Common/AlertBox/index.module.css b/packages/ui-components/src/Common/AlertBox/index.module.css index e68e336bd8217..90640288f3299 100644 --- a/packages/ui-components/src/Common/AlertBox/index.module.css +++ b/packages/ui-components/src/Common/AlertBox/index.module.css @@ -15,7 +15,9 @@ text-sm text-white; - p { + p, + span, + div { @apply text-white; } From bf497185b84c246bc113490d0ee5d3455bd529f3 Mon Sep 17 00:00:00 2001 From: Ju-MINJAE Date: Sat, 1 Nov 2025 11:04:17 +0900 Subject: [PATCH 5/5] fix: use wildcard selector for text color override --- packages/ui-components/src/Common/AlertBox/index.module.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/ui-components/src/Common/AlertBox/index.module.css b/packages/ui-components/src/Common/AlertBox/index.module.css index 90640288f3299..25538a4b223e4 100644 --- a/packages/ui-components/src/Common/AlertBox/index.module.css +++ b/packages/ui-components/src/Common/AlertBox/index.module.css @@ -15,9 +15,7 @@ text-sm text-white; - p, - span, - div { + * { @apply text-white; }