Merge pull request #88 from Synthetixio/feat/badge

feat: badge component added

Author: Rickk137

src/components/Badge/Badge.tsx

@@ -11,22 +11,23 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
 }
 
 const badgeColors = {
-  success: 'bg-green-light-3 text-green text-xs'
+  success: 'ui-border ui-border-green ui-bg-green ui-text-green ui-text-xs'
 };
 
 export const Badge: React.FC<BadgeProps> = ({
   className,
-  defaultClass = 'text-xs font-semibold px-2.5 py-0.5 rounded',
+  defaultClass = 'ui-text-xs ui-font-semibold ui-px-2.5 ui-py-0.5',
   variant = 'sucess',
   children,
   ...props
 }) => {
   return (
     <span
-      {...props}
-      className={clsx(className, defaultClass, badgeColors[variant as BadgeVariant])}
+      className={clsx(className, 'ui-rounded ui-inline-flex', badgeColors[variant as BadgeVariant])}
     >
-      {children}
+      <span {...props} className={clsx(defaultClass, 'ui-darker-40 ui-rounded')}>
+        {children}
+      </span>
     </span>
   );
 };

src/components/Card/Card.tsx

@@ -38,7 +38,7 @@ const CardRender: React.ForwardRefRenderFunction<HTMLDivElement, CardProps> = (
   return (
     <div
       ref={ref}
-      className={clsx('ui-shadow-md ui-p-[1px] ui-border', rounded, wrapperClassName, {
+      className={clsx('ui-shadow-md ui-p-[1px]', rounded, wrapperClassName, {
         'ui-gradient-gray-2 ui-text-white': variant === 'default',
         'ui-gradient-gray-1 ui-text-white': variant === 'gray',
         'ui-gradient-primary': variant === 'primary',
@@ -48,7 +48,7 @@ const CardRender: React.ForwardRefRenderFunction<HTMLDivElement, CardProps> = (
         'ui-gradient-pink ui-text-white': variant === 'pink',
         'ui-gradient-rainbow ui-text-white': variant === 'rainbow',
         'ui-bg-dark-blue ui-text-white': variant === 'dark-blue',
-        'ui-gradient-dark-blue ui-text-white ui-border-navy': variant === 'dark-blue-2',
+        'ui-gradient-dark-blue ui-text-white ui-border ui-border-navy': variant === 'dark-blue-2',
         'ui-border dark:ui-border-black ui-bg-white ui-border-gray-200 dark:ui-bg-gray-800 dark:ui-text-white':
           variant === 'standard'
       })}

src/styles/_variables.scss

@@ -155,6 +155,19 @@ html {
   -webkit-text-fill-color: transparent;
 }
 
+.ui-darker-20 {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.ui-darker-40 {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.ui-darker-60 {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+.ui-darker-80 {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
 $break-points: (
   'sm': 640px,
   'md': 768px,