✨Add transparent badges

Author: Frontendland

src/components/Badge/Badge.astro

@@ -10,6 +10,7 @@ const {
     hover,
     small,
     rounded,
+    transparent,
     className,
     ...rest
 } = Astro.props
@@ -20,6 +21,7 @@ const classes = [
     hover && styles.hover,
     small && styles.small,
     rounded && styles.round,
+    transparent && styles.transparent,
     className
 ]
 ---

src/components/Badge/Badge.svelte

@@ -10,6 +10,7 @@
         hover,
         small,
         rounded,
+        transparent,
         className,
         onClick,
         children,
@@ -22,6 +23,7 @@
         (onClick || hover) && styles.hover,
         small && styles.small,
         rounded && styles.round,
+        transparent && styles.transparent,
         className
     ])
 </script>

src/components/Badge/Badge.tsx

@@ -11,6 +11,7 @@ const Badge = ({
     hover,
     small,
     rounded,
+    transparent,
     className,
     children,
     ...rest
@@ -21,6 +22,7 @@ const Badge = ({
         (onClick || hover) && styles.hover,
         small && styles.small,
         rounded && styles.round,
+        transparent && styles.transparent,
         className
     ])
 

src/components/Badge/badge.module.scss

@@ -91,4 +91,30 @@
     &.round {
         @include border-radius(lg);
     }
+
+    &.transparent {
+        @include background(transparent);
+        @include typography(primary);
+        @include spacing(p0);
+
+        &.secondary {
+            @include typography(primary-20);
+        }
+
+        &.info {
+            @include typography(info);
+        }
+
+        &.success {
+            @include typography(success);
+        }
+
+        &.warning {
+            @include typography(warning);
+        }
+
+        &.alert {
+            @include typography(alert);
+        }
+    }
 }

src/components/Badge/badge.ts

@@ -12,6 +12,7 @@ export type BadgeProps = {
     hover?: boolean
     small?: boolean
     rounded?: boolean
+    transparent?: boolean
     className?: string
     [key: string]: any
 }

src/pages/components/badge.astro

@@ -133,6 +133,64 @@ const sections = getSections({
                 </section.component>
             </ComponentWrapper>
 
+            <ComponentWrapper title="Rounded + small success">
+                <section.component theme="success" rounded={true} small={true}>
+                    Success
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Rounded + small  warning">
+                <section.component theme="warning" rounded={true} small={true}>
+                    Warning
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Rounded + small  alert">
+                <section.component theme="alert" rounded={true} small={true}>
+                    Alert
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Transparent">
+                <section.component transparent={true}>
+                    Transparent
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Transparent secondary">
+                <section.component theme="secondary" transparent={true}>
+                    Secondary
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Transparent info">
+                <section.component theme="info" transparent={true}>
+                    <Icon type="info" size={14} />
+                    Info
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Transparent success">
+                <section.component theme="success" transparent={true}>
+                    <Icon type="circle-check" size={14} />
+                    Success
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Transparent warning">
+                <section.component theme="warning" transparent={true}>
+                    <Icon type="warning" size={14} />
+                    Warning
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Transparent alert">
+                <section.component theme="alert" transparent={true}>
+                    <Icon type="alert" size={14} />
+                    Alert
+                </section.component>
+            </ComponentWrapper>
+
             <ComponentWrapper title="Chips (removable badge)">
                 <section.component
                     theme="outline"