Stable Badge Component Release

Author: Ohswedd

demo.html

@@ -148,30 +148,30 @@ <h2 class="font-lg text-primary my-4">Avatar Component Showcase</h2>
     <h2 class="font-lg text-primary my-4">Badge Component Showcase</h2>
 
     <!-- Primary Badges -->
-    <div class="badge" data-variant="primary" data-size="sm" aria-label="Primary Small">Primary</div>
-    <div class="badge" data-variant="primary" data-size="md" aria-label="Primary Medium">Primary</div>
-    <div class="badge" data-variant="primary" data-size="lg" aria-label="Primary Large">Primary</div>
+    <div class="kroma-badge" data-variant="primary" data-size="sm" aria-label="Primary Small">Primary</div>
+    <div class="kroma-badge" data-variant="primary" data-size="md" aria-label="Primary Medium">Primary</div>
+    <div class="kroma-badge" data-variant="primary" data-size="lg" aria-label="Primary Large">Primary</div>
 
     <!-- Success, Warning, and Danger Variants with Soft Style -->
-    <div class="badge" data-style="soft" data-variant="success" aria-label="Soft Success">Success</div>
-    <div class="badge" data-style="soft" data-variant="warning" aria-label="Soft Warning">Warning</div>
-    <div class="badge" data-style="soft" data-variant="danger" aria-label="Soft Danger">Danger</div>
+    <div class="kroma-badge" data-style="soft" data-variant="success" aria-label="Soft Success">Success</div>
+    <div class="kroma-badge" data-style="soft" data-variant="warning" aria-label="Soft Warning">Warning</div>
+    <div class="kroma-badge" data-style="soft" data-variant="danger" aria-label="Soft Danger">Danger</div>
 
     <!-- Outline Badges with Different Colors -->
-    <div class="badge" data-style="outline" data-variant="info" aria-label="Info Outline">Info</div>
-    <div class="badge" data-style="outline" data-variant="secondary" aria-label="Secondary Outline">Secondary</div>
+    <div class="kroma-badge" data-style="outline" data-variant="info" aria-label="Info Outline">Info</div>
+    <div class="kroma-badge" data-style="outline" data-variant="secondary" aria-label="Secondary Outline">Secondary</div>
 
     <!-- Shape Variants -->
-    <div class="badge" data-shape="rounded" data-variant="primary" aria-label="Rounded Badge">Rounded</div>
-    <div class="badge" data-shape="square" data-variant="secondary" aria-label="Square Badge">Square</div>
-    <div class="badge" data-shape="pill" data-variant="success" aria-label="Pill Badge">Pill</div>
+    <div class="kroma-badge" data-shape="rounded" data-variant="primary" aria-label="Rounded Badge">Rounded</div>
+    <div class="kroma-badge" data-shape="square" data-variant="secondary" aria-label="Square Badge">Square</div>
+    <div class="kroma-badge" data-shape="pill" data-variant="success" aria-label="Pill Badge">Pill</div>
 
     <!-- Badges with Icons -->
-    <div class="badge" data-variant="danger" data-icon="left" aria-label="Danger Icon Left">
+    <div class="kroma-badge" data-variant="danger" data-icon="left" aria-label="Danger Icon Left">
       <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
       Danger
     </div>
-    <div class="badge" data-variant="info" data-icon="right" aria-label="Info Icon Right">
+    <div class="kroma-badge" data-variant="info" data-icon="right" aria-label="Info Icon Right">
       Info
       <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
     </div>

src/css/components/badge.css

@@ -1,5 +1,5 @@
 /* Base Badge Styles */
-.badge {
+.kroma-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -18,20 +18,20 @@
 }
 
 /* Outline Variant */
-.badge[data-variant][data-style="outline"] {
+.kroma-badge[data-variant][data-style="outline"] {
   background-color: transparent;
   box-shadow: inset 0 0 0 1.5px var(--variant-bg);
   color: var(--variant-bg);
 }
 
 /* Soft Variant */
-.badge[data-variant][data-style="soft"] {
+.kroma-badge[data-variant][data-style="soft"] {
   background-color: var(--variant-light-bg, rgba(0, 0, 0, 0.1));
   color: var(--variant-bg);
 }
 
 /* Dot Badge for Notification Indicators */
-.badge-dot {
+.kroma-badge-dot {
   width: 0.5rem;
   height: 0.5rem;
   border-radius: 50%;
@@ -42,61 +42,62 @@
 }
 
 /* Badge Sizes */
-.badge[data-size="sm"] {
+.kroma-badge[data-size="sm"] {
   padding: 0.2rem 0.4rem;
   font-size: 0.65rem;
 }
 
-.badge[data-size="lg"] {
+.kroma-badge[data-size="lg"] {
   padding: 0.4rem 0.8rem;
   font-size: 0.9rem;
 }
 
 /* Badge Shapes */
-.badge[data-shape="rounded"] {
+.kroma-badge[data-shape="rounded"] {
   border-radius: var(--radius-full);
 }
 
-.badge[data-shape="square"] {
+.kroma-badge[data-shape="square"] {
   border-radius: 0;
 }
 
-.badge[data-shape="pill"] {
+.kroma-badge[data-shape="pill"] {
   border-radius: 9999px;
 }
 
 /* Icon Badges */
-.badge[data-icon="left"] {
+.kroma-badge[data-icon="left"] {
   display: inline-flex;
   align-items: center;
   gap: 0.3rem;
 }
-.badge[data-icon="left"] svg {
+
+.kroma-badge[data-icon="left"] svg {
   order: -1;
   width: 1em;
   height: 1em;
 }
 
-.badge[data-icon="right"] svg {
+.kroma-badge[data-icon="right"] svg {
   order: 1;
   width: 1em;
   height: 1em;
   margin-left: 4px;
 }
 
 /* Badge Grouping and Stacking */
-.badge-group {
+.kroma-badge-group {
   display: inline-flex;
   gap: 0.2rem;
 }
 
-.badge-stacked {
+.kroma-badge-stacked {
   position: relative;
 }
 
 /* Responsive Adjustments */
 @media (max-width: 768px) {
-  .badge {
+  .kroma-badge {
     padding: clamp(0.2rem, 0.5vw, 0.3rem) clamp(0.4rem, 1vw, 0.6rem);
     font-size: clamp(0.6rem, 1vw, 0.7rem);
   }