added the high contrast variant (#2147)

* added the high contrast variant and fixed the inline spacing for the large variant * exported the Badge component
kadena-community · May 17, 2024 · 9cb50ea · 9cb50ea
1 parent 076f098
commit 9cb50ea
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 0 deletions.
diff --git a/.changeset/perfect-cheetahs-visit.md b/.changeset/perfect-cheetahs-visit.md
@@ -0,0 +1,5 @@
+---
+"@kadena/react-ui": patch
+---
+
+added the high contrast variant and fixed the inline spacing for the large variant
diff --git a/packages/libs/react-ui/src/components/Badge/Badge.css.ts b/packages/libs/react-ui/src/components/Badge/Badge.css.ts
@@ -23,6 +23,7 @@ export const badge = recipe({
       lg: {
         height: token('size.n8'),
         minWidth: token('size.n8'),
+        paddingInline: token('size.n2'),
         fontSize: token('typography.fontSize.sm'),
       },
       sm: {
@@ -40,6 +41,9 @@ export const badge = recipe({
       inverse: {
         backgroundColor: token('color.neutral.n1@alpha10'),
       },
+      highContrast: {
+        backgroundColor: token('color.background.base.inverse.default'),
+      },
       info: {
         backgroundColor: token(
           'color.background.semantic.info.inverse.default',

diff --git a/packages/libs/react-ui/src/index.ts b/packages/libs/react-ui/src/index.ts
@@ -54,6 +54,7 @@ export {
   Accordion,
   AccordionItem,
   Avatar,
+  Badge,
   Box,
   Breadcrumbs,
   BreadcrumbsItem,