Close #19

Author: Ohswedd

css/components/badge.css

@@ -4,6 +4,7 @@
   align-items: center;
   justify-content: center;
   padding: clamp(0.3rem, 0.5vw, 0.6rem) clamp(0.6rem, 1vw, 0.8rem);
+  margin: var(--space-4) auto; 
   font-size: clamp(0.65rem, 1vw, 0.8rem);
   font-weight: 500;
   line-height: 1;
@@ -13,41 +14,41 @@
   text-transform: uppercase;
   white-space: nowrap;
   transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
+  box-shadow: var(--shadow-sm); /* Slight shadow for depth */
 }
 
-/* Variants */
-.badge-primary { --badge-bg: var(--primary); --badge-color: #fff; }
-.badge-secondary { --badge-bg: var(--secondary); --badge-color: #fff; }
-.badge-success { --badge-bg: var(--success); --badge-color: #fff; }
-.badge-danger { --badge-bg: var(--danger); --badge-color: #fff; }
-.badge-warning { --badge-bg: var(--warning); --badge-color: #fff; }
-.badge-info { --badge-bg: var(--info); --badge-color: #fff; }
+/* Badge Variants */
+.badge[data-variant="primary"] { --badge-bg: var(--primary); --badge-color: #fff; }
+.badge[data-variant="secondary"] { --badge-bg: var(--secondary); --badge-color: #fff; }
+.badge[data-variant="success"] { --badge-bg: var(--success); --badge-color: #fff; }
+.badge[data-variant="danger"] { --badge-bg: var(--danger); --badge-color: #fff; }
+.badge[data-variant="warning"] { --badge-bg: var(--warning); --badge-color: #fff; }
+.badge[data-variant="info"] { --badge-bg: var(--info); --badge-color: #fff; }
 
 /* Outline Badge Variant */
-.badge-outline {
+.badge[data-variant="outline"] {
   --badge-bg: transparent;
-  color: var(--badge-color, var(--primary));
   box-shadow: inset 0 0 0 1.5px currentColor;
+  color: var(--badge-color, var(--primary));
 }
-.badge-outline.badge-primary { --badge-color: var(--primary); }
-.badge-outline.badge-secondary { --badge-color: var(--secondary); }
-.badge-outline.badge-success { --badge-color: var(--success); }
-.badge-outline.badge-danger { --badge-color: var(--danger); }
-.badge-outline.badge-warning { --badge-color: var(--warning); }
-.badge-outline.badge-info { --badge-color: var(--info); }
+.badge[data-variant="outline"][data-color="primary"] { --badge-color: var(--primary); }
+.badge[data-variant="outline"][data-color="secondary"] { --badge-color: var(--secondary); }
+.badge[data-variant="outline"][data-color="success"] { --badge-color: var(--success); }
+.badge[data-variant="outline"][data-color="danger"] { --badge-color: var(--danger); }
+.badge[data-variant="outline"][data-color="warning"] { --badge-color: var(--warning); }
+.badge[data-variant="outline"][data-color="info"] { --badge-color: var(--info); }
 
 /* Soft Badge Variant (Lighter Background) */
-.badge-soft {
+.badge[data-variant="soft"] {
   background-color: var(--badge-bg-light, rgba(255, 255, 255, 0.1));
   color: var(--badge-bg);
 }
-.badge-primary.badge-soft { --badge-bg-light: rgba(0, 123, 255, 0.15); }
-.badge-secondary.badge-soft { --badge-bg-light: rgba(108, 117, 125, 0.15); }
-.badge-success.badge-soft { --badge-bg-light: rgba(40, 167, 69, 0.15); }
-.badge-danger.badge-soft { --badge-bg-light: rgba(220, 53, 69, 0.15); }
-.badge-warning.badge-soft { --badge-bg-light: rgba(255, 193, 7, 0.15); }
-.badge-info.badge-soft { --badge-bg-light: rgba(23, 162, 184, 0.15); }
+.badge[data-color="primary"][data-variant="soft"] { --badge-bg-light: rgba(0, 123, 255, 0.15); }
+.badge[data-color="secondary"][data-variant="soft"] { --badge-bg-light: rgba(108, 117, 125, 0.15); }
+.badge[data-color="success"][data-variant="soft"] { --badge-bg-light: rgba(40, 167, 69, 0.15); }
+.badge[data-color="danger"][data-variant="soft"] { --badge-bg-light: rgba(220, 53, 69, 0.15); }
+.badge[data-color="warning"][data-variant="soft"] { --badge-bg-light: rgba(255, 193, 7, 0.15); }
+.badge[data-color="info"][data-variant="soft"] { --badge-bg-light: rgba(23, 162, 184, 0.15); }
 
 /* Dot Badge for Notification Indicators */
 .badge-dot {
@@ -60,33 +61,30 @@
   margin-left: 0.25rem;
 }
 
-/* Sizes */
-.badge-sm {
+/* Badge Sizes */
+.badge[data-size="sm"] {
   padding: 0.2rem 0.4rem;
   font-size: 0.65rem;
 }
 
-.badge-lg {
+.badge[data-size="lg"] {
   padding: 0.4rem 0.8rem;
   font-size: 0.9rem;
 }
 
-/* Shapes */
-.badge-rounded { border-radius: var(--radius-full); }
-.badge-square { border-radius: 0; }
-.badge-pill { border-radius: 9999px; }
+/* Badge Shapes */
+.badge[data-shape="rounded"] { border-radius: var(--radius-full); }
+.badge[data-shape="square"] { border-radius: 0; }
+.badge[data-shape="pill"] { border-radius: 9999px; }
 
 /* Icon Badges */
-.badge-icon {
+.badge[data-icon="left"] {
   display: inline-flex;
   align-items: center;
   gap: 0.3rem;
 }
-.badge-icon svg { width: 1em; height: 1em; }
-
-/* Icon Position */
-.badge-icon-left .badge-icon { order: -1; }
-.badge-icon-right .badge-icon { order: 1; }
+.badge[data-icon="left"] svg { order: -1; width: 1em; height: 1em; }
+.badge[data-icon="right"] svg { order: 1; width: 1em; height: 1em; margin-left: 4px; }
 
 /* Badge Grouping and Stacking */
 .badge-group {
@@ -98,13 +96,6 @@
   position: relative;
 }
 
-.badge-stacked .badge-dot {
-  position: absolute;
-  top: 0;
-  right: 0;
-  transform: translate(25%, -25%);
-}
-
 /* Responsive Adjustments */
 @media (max-width: 768px) {
   .badge {