From 140e796b219dd5275f8742010ccc1257a7f5c3c0 Mon Sep 17 00:00:00 2001
From: usrnk1 <7547651+usrnk1@users.noreply.github.com>
Date: Wed, 8 Jul 2026 19:42:07 +0200
Subject: [PATCH] feat(ui): add accent badge variant

---
 packages/ui/src/v2/components/badge-v2.css         | 6 ++++++
 packages/ui/src/v2/components/badge-v2.stories.tsx | 7 ++++++-
 packages/ui/src/v2/components/badge-v2.tsx         | 7 +++++--
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/v2/components/badge-v2.css b/packages/ui/src/v2/components/badge-v2.css
index 748c08a711..44dfc7489d 100644
--- a/packages/ui/src/v2/components/badge-v2.css
+++ b/packages/ui/src/v2/components/badge-v2.css
@@ -25,3 +25,9 @@
 [data-component="tag"][data-high-contrast] {
   border-color: var(--v2-border-border-strong);
 }
+
+[data-component="tag"][data-variant="accent"] {
+  border: 0;
+  background: var(--v2-background-bg-accent);
+  color: var(--v2-text-text-inverse);
+}
diff --git a/packages/ui/src/v2/components/badge-v2.stories.tsx b/packages/ui/src/v2/components/badge-v2.stories.tsx
index 084838c0e1..19af508bc2 100644
--- a/packages/ui/src/v2/components/badge-v2.stories.tsx
+++ b/packages/ui/src/v2/components/badge-v2.stories.tsx
@@ -8,10 +8,11 @@ Use alongside headings or lists for quick metadata.
 
 ### API
 - Accepts standard span props.
+- Optional: \`variant\` is \`neutral\` (default) or \`accent\`.
 - Optional: \`data-high-contrast\` attribute for stronger border contrast.
 
 ### Variants and states
-- Single size style.
+- Neutral and accent variants.
 - Optional high-contrast border style.
 
 ### Behavior
@@ -52,3 +53,7 @@ export const HighContrast = {
     </div>
   ),
 }
+
+export const Accent = {
+  render: () => <Tag variant="accent">New</Tag>,
+}
diff --git a/packages/ui/src/v2/components/badge-v2.tsx b/packages/ui/src/v2/components/badge-v2.tsx
index 3bb06259e1..8583d46da9 100644
--- a/packages/ui/src/v2/components/badge-v2.tsx
+++ b/packages/ui/src/v2/components/badge-v2.tsx
@@ -1,14 +1,17 @@
 import { type ComponentProps, splitProps } from "solid-js"
 import "./badge-v2.css"
 
-export interface TagProps extends ComponentProps<"span"> {}
+export interface TagProps extends ComponentProps<"span"> {
+  variant?: "neutral" | "accent"
+}
 
 export function Tag(props: TagProps) {
-  const [split, rest] = splitProps(props, ["class", "classList", "children"])
+  const [split, rest] = splitProps(props, ["class", "classList", "children", "variant"])
   return (
     <span
       {...rest}
       data-component="tag"
+      data-variant={split.variant ?? "neutral"}
       classList={{
         ...split.classList,
         [split.class ?? ""]: !!split.class,