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

#2145) * Fixed the accessibility issues (font-weight and color) related to the badge * lint issue fix
kadena-community · May 17, 2024 · 076f098 · 076f098
1 parent b45db66
commit 076f098
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/.changeset/nice-waves-clean.md 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
@@ -11,30 +11,31 @@ 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: {
     size: {
       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'),