fix(alert): status colors wcag compliant (#8014)

chakra-ui · Sep 22, 2023 · 6d12ea8 · 6d12ea8 · vercel · Sep 22, 2023
1 parent bd3d0fd
commit 6d12ea8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/.changeset/short-taxis-boil.md b/.changeset/short-taxis-boil.md
@@ -0,0 +1,6 @@
+---
+"@chakra-ui/alert": patch
+---
+
+Set the standard color for toasts and alerts to a slightly darker color to make
+i WCAG compatible
diff --git a/packages/components/theme/src/components/alert.ts b/packages/components/theme/src/components/alert.ts
@@ -56,7 +56,7 @@ const variantSubtle = definePartsStyle((props) => {
   const bg = getBg(props)
   return {
     container: {
-      [$fg.variable]: `colors.${c}.500`,
+      [$fg.variable]: `colors.${c}.600`,
       [$bg.variable]: bg.light,
       _dark: {
         [$fg.variable]: `colors.${c}.200`,
@@ -71,7 +71,7 @@ const variantLeftAccent = definePartsStyle((props) => {
   const bg = getBg(props)
   return {
     container: {
-      [$fg.variable]: `colors.${c}.500`,
+      [$fg.variable]: `colors.${c}.600`,
       [$bg.variable]: bg.light,
       _dark: {
         [$fg.variable]: `colors.${c}.200`,
@@ -89,7 +89,7 @@ const variantTopAccent = definePartsStyle((props) => {
   const bg = getBg(props)
   return {
     container: {
-      [$fg.variable]: `colors.${c}.500`,
+      [$fg.variable]: `colors.${c}.600`,
       [$bg.variable]: bg.light,
       _dark: {
         [$fg.variable]: `colors.${c}.200`,
@@ -107,7 +107,7 @@ const variantSolid = definePartsStyle((props) => {
   return {
     container: {
       [$fg.variable]: `colors.white`,
-      [$bg.variable]: `colors.${c}.500`,
+      [$bg.variable]: `colors.${c}.600`,
       _dark: {
         [$fg.variable]: `colors.gray.900`,
         [$bg.variable]: `colors.${c}.200`,