feat(ui): add accent badge variant

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);
+}

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>,
+}

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,