feat(components): add ease-badge component with variants (#249)

[bhavyabhardwaj001]

Pull Request Description

Resolves #249.

This submission adds a new lightweight, composable ease-badge component for use as status tags, labels, and notification counters.

It features context-aware scaling: by utilizing em units for padding and font-size, the badge automatically perfectly scales itself relative to its parent container (e.g. inflating inside an <h1> or shrinking inside an .ease-btn-sm).

---

Type of Change

• ✨ New animation / hover effect
• 🧩 New component
• 📝 Documentation improvement
• 🐛 Bug fix in an existing submission
• Other (describe below)

---

Submission Checklist

⚠️ PRs that fail this checklist will be closed without review.

• All changes are inside submissions/examples/your-feature-name/
• Includes demo.html — self-contained, opens in browser with no server
• Includes style.css — raw CSS for the proposed feature
• Includes README.md — what it does, how to use it, why it fits EaseMotion CSS
• No changes to core/
• No changes to components/
• One feature per PR (no bundled unrelated changes)

---

Feature Description

What does this add?

A new badge component with primary, success, danger, warning, and pill shape variants.

How does a developer use it?

<!-- Standard status label -->
<span class="ease-badge ease-badge-success">Active</span>

<!-- Pill-shaped notification counter -->
<span class="ease-badge ease-badge-danger ease-badge-pill">99+</span>

Why does it fit EaseMotion CSS?

It perfectly maps onto the existing design system variables. Furthermore, it explicitly pairs the bright background variables (--ease-color-success, etc.) against --ease-color-neutral-900 text to mathematically guarantee WCAG AA 4.5:1 contrast compliance out-of-the-box, ensuring EaseMotion CSS remains accessible by default.

---

Demo

• Demo added (demo.html works by opening directly in a browser)

---

Browser Testing

• Chrome
• Firefox
• Edge
• Safari (optional but appreciated)

---

Notes for Maintainer

All styles map strictly to existing --ease-* variables; no new colors or tokens were introduced!