From 076f0980fc5611ca3116f98a9520d23028c673ed Mon Sep 17 00:00:00 2001
From: Isa Ozler <1378630+isaozler@users.noreply.github.com>
Date: Fri, 17 May 2024 12:56:34 +0300
Subject: [PATCH] =?UTF-8?q?Fixed=20the=20accessibility=20issues=20(font-we?=
 =?UTF-8?q?ight=20and=20color)=20related=20to=20the=E2=80=A6=20(#2145)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fixed the accessibility issues (font-weight and color) related to the badge

* lint issue fix
---
 .changeset/nice-waves-clean.md                           | 5 +++++
 packages/libs/react-ui/src/components/Badge/Badge.css.ts | 9 +++++----
 2 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/nice-waves-clean.md

diff --git a/.changeset/nice-waves-clean.md b/.changeset/nice-waves-clean.md
new file mode 100644
index 0000000000..2f15d571a3
--- /dev/null
+++ b/.changeset/nice-waves-clean.md
@@ -0,0 +1,5 @@
+---
+'@kadena/react-ui': patch
+---
+
+Fixed the accessibility issues (font-weight and color) related to the badge
diff --git a/packages/libs/react-ui/src/components/Badge/Badge.css.ts b/packages/libs/react-ui/src/components/Badge/Badge.css.ts
index 194b5bb64a..9fb75f5918 100644
--- a/packages/libs/react-ui/src/components/Badge/Badge.css.ts
+++ b/packages/libs/react-ui/src/components/Badge/Badge.css.ts
@@ -11,10 +11,11 @@ export const badge = recipe({
       justifyContent: 'center',
       alignItems: 'center',
       lineHeight: 'base',
+      fontWeight: 'primaryFont.bold',
     }),
     {
       borderColor: token('color.neutral.n1@alpha20'),
-      color: token('color.neutral.n0@alpha70'),
+      color: token('color.text.base.inverse.@init'),
     },
   ],
   variants: {
@@ -22,19 +23,19 @@ export const badge = recipe({
       lg: {
         height: token('size.n8'),
         minWidth: token('size.n8'),
-        fontSize: '14px',
+        fontSize: token('typography.fontSize.sm'),
       },
       sm: {
         height: token('size.n4'),
         minWidth: token('size.n4'),
-        fontSize: '12px',
+        fontSize: token('typography.fontSize.xs'),
       },
     },
     style: {
       default: {
         backgroundColor: token('color.neutral.n99@alpha20'),
         borderColor: token('color.neutral.n99@alpha10'),
-        color: token('color.neutral.n100@alpha70'),
+        color: token('color.text.base.@init'),
       },
       inverse: {
         backgroundColor: token('color.neutral.n1@alpha10'),