feat(Badge): light and dark grey badges

Hyphen · May 17, 2024 · 80aa757 · 80aa757
1 parent f19813a
commit 80aa757
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 24 deletions.
diff --git a/src/components/Badge/Badge.module.scss b/src/components/Badge/Badge.module.scss
@@ -1,13 +1,9 @@
 @import '@hyphen/hyphen-design-tokens/build/scss/variables';
 
 @mixin size-sm {
-  font-size: var(--badge-size-sm-font-size, var(--size-font-size-2xs));
-  padding: var(--badge-size-sm-padding-vertical, var(--size-spacing-xs))
-    var(--badge-size-sm-padding-horizontal, var(--size-spacing-xs));
-  border-radius: var(
-    --badge-size-sm-border-radius,
-    var(--size-border-radius-sm)
-  );
+  font-size: var(--size-font-size-xs);
+  padding: var(--size-spacing-2xs) var(--size-spacing-sm);
+  border-radius: var(--size-border-radius-lg);
 }
 
 %size-sm {
@@ -18,13 +14,9 @@
 }
 
 @mixin size-md {
-  font-size: var(--badge-size-md-font-size, var(--size-font-size-xs));
-  padding: var(--badge-size-md-padding-vertical, var(--size-spacing-sm))
-    var(--badge-size-md-padding-horizontal, var(--size-spacing-sm));
-  border-radius: var(
-    --badge-size-md-border-radius,
-    var(--size-border-radius-md)
-  );
+  font-size: var(--size-font-size-sm);
+  padding: var(--size-spacing-xs) var(--size-spacing-md);
+  border-radius: var(--size-border-radius-xl);
 }
 
 %size-md {
@@ -35,9 +27,9 @@
 }
 
 @mixin size-lg {
-  font-size: var(--size-font-size-sm);
-  padding: var(--size-spacing-md) var(--size-spacing-md);
-  border-radius: var(--size-border-radius-lg);
+  font-size: var(--size-font-size-md);
+  padding: var(--size-spacing-sm) var(--size-spacing-lg);
+  border-radius: var(--size-border-radius-2xl);
 }
 
 %size-lg {
@@ -89,10 +81,16 @@
     color: var(--color-base-black-500);
   }
 
-  &.grey {
+  &.light-grey {
     background-color: var(--color-base-grey-200);
-    border-color: var(--color-base-grey-300);
-    color: var(--color-base-grey-700);
+    border-color: var(--color-base-grey-200);
+    color: var(--color-base-grey-600);
+  }
+
+  &.dark-grey {
+    background-color: var(--color-base-grey-400);
+    border-color: var(--color-base-grey-400);
+    color: var(--color-base-white);
   }
 
   &.hyphen {

diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
@@ -10,11 +10,12 @@ const meta: Meta<typeof Badge> = {
 
 export default meta;
 
-export const Overview = () => <Badge variant="grey" message="Hello world!" />;
+export const Overview = () => <Badge message="Hello world!" />;
 
 export const Variants = () => {
   const variants = [
-    'grey',
+    'light-grey',
+    'dark-grey',
     'inverse',
     'purple',
     'blue',

diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -8,7 +8,7 @@ import { Box } from '../Box/Box';
 export type BadgeSize = 'sm' | 'md' | 'lg';
 
 export type BadgeVariant =
-  | 'grey'
+  | 'light-grey'
   | 'inverse'
   | 'green'
   | 'yellow'
@@ -44,7 +44,7 @@ export interface BadgeProps {
 export const Badge: FC<BadgeProps> = ({
   className = '',
   message = '',
-  variant = 'grey',
+  variant = 'light-grey',
   size = 'md',
   ...restProps
 }) => {