feat(badge): add subtle-neutral variant

.changeset/badge-subtle-neutral.md

@@ -0,0 +1,11 @@
+---
+"@tailor-platform/app-shell": minor
+---
+
+Add the `subtle-neutral` Badge variant, for low-emphasis tags with no status. It reads the neutral roles (`bg-neutral-surface`, `text-neutral-text`, `hover:bg-neutral-surface-hover`), as the other subtle variants read their intent roles.
+
+```tsx
+<Badge variant="subtle-neutral">Archived</Badge>
+```
+
+In the default palette it has the same background as `neutral`, because `--muted` and `--secondary` have the same value (gray 100 in light mode, gray 800 in dark mode). In `bloom`, and in `cream` light mode, `--muted` is closer to the page background than `--secondary`, so `subtle-neutral` is quieter than `neutral`.

docs-manifest.json

@@ -82,7 +82,7 @@
       "hashes": {
         "typeSurface": "f28bf34ae1466912",
         "outline": "6138eac23571e177",
-        "snapshot": "d795320d53bd9ddb",
+        "snapshot": "049e72553f5b7a6f",
         "outputMd": "db2c4388ca783a75",
         "examples": "65d5fc73550e395a"
       }
@@ -206,11 +206,11 @@
       "claims": [],
       "symbols": ["Badge", "BadgeProps", "badgeVariants"],
       "hashes": {
-        "typeSurface": "86af3a3088ed46c4",
-        "outline": "c3273f9810b6dd91",
+        "typeSurface": "f4b8b24fb5f5bab1",
+        "outline": "0712a6c09e7ab542",
         "snapshot": null,
-        "outputMd": "0cb27fbce6f76e2e",
-        "examples": "edd9868442daa0b0"
+        "outputMd": "3d62a0fe0a539934",
+        "examples": "5aaa54515d4643ea"
       }
     },
     "button": {
@@ -1744,7 +1744,7 @@
     "packages/core/skills/app-shell-patterns/references/components/attachment.md": "35bebce540d6ac28",
     "packages/core/skills/app-shell-patterns/references/components/autocomplete.md": "bd6ae01bf39d1ad6",
     "packages/core/skills/app-shell-patterns/references/components/avatar.md": "a874b74c176bcb47",
-    "packages/core/skills/app-shell-patterns/references/components/badge.md": "0cb27fbce6f76e2e",
+    "packages/core/skills/app-shell-patterns/references/components/badge.md": "3d62a0fe0a539934",
     "packages/core/skills/app-shell-patterns/references/components/button.md": "bce0e2fada1d1638",
     "packages/core/skills/app-shell-patterns/references/components/card.md": "675dc665e5082ff0",
     "packages/core/skills/app-shell-patterns/references/components/checkbox.md": "14f7ba23f441df38",

docs-src/components/badge.docs.examples.tsx

@@ -12,6 +12,7 @@ export function BasicUsage() {
       <Badge variant="subtle-warning">Subtle Warning</Badge>
       <Badge variant="subtle-error">Subtle Error</Badge>
       <Badge variant="subtle-info">Subtle Info</Badge>
+      <Badge variant="subtle-neutral">Subtle Neutral</Badge>
     </div>
   );
 }

docs-src/components/badge.docs.outline.md

@@ -38,6 +38,7 @@ Filled variants for high emphasis, plus subtle variants for lower-emphasis statu
 <Badge variant="subtle-warning">Needs Attention</Badge>
 <Badge variant="subtle-error">Needs Review</Badge>
 <Badge variant="subtle-info">In Progress</Badge>
+<Badge variant="subtle-neutral">Archived</Badge>
 ```
 
 ### Outline Variants with Status Dots
@@ -69,6 +70,7 @@ type BadgeVariant =
   | "subtle-warning" // Low-emphasis yellow
   | "subtle-error" // Low-emphasis red/destructive
   | "subtle-info" // Low-emphasis blue
+  | "subtle-neutral" // Low-emphasis gray
   // Outline variants with status dots
   | "outline-success"
   | "outline-warning"
@@ -195,6 +197,7 @@ function ProductBadge({ product }: { product: Product }) {
 | `subtle-warning` | ![Subtle yellow badge] | Low-emphasis pending or attention states   |
 | `subtle-error`   | ![Subtle red badge]    | Low-emphasis failures or exceptions        |
 | `subtle-info`    | ![Subtle blue badge]   | Low-emphasis informational or in-progress  |
+| `subtle-neutral` | ![Subtle gray badge]   | Low-emphasis tags with no status           |
 
 ### Outline Variants
 

examples/vite-app/src/pages/showcase/primitives/page.tsx

@@ -177,6 +177,7 @@ const PrimitiveComponentsDemoPage = () => {
                   <Badge variant="subtle-warning">Subtle Warning</Badge>
                   <Badge variant="subtle-error">Subtle Error</Badge>
                   <Badge variant="subtle-info">Subtle Info</Badge>
+                  <Badge variant="subtle-neutral">Subtle Neutral</Badge>
                 </div>
               </div>
               <div>

packages/core/src/components/badge/badge.test.tsx

@@ -23,6 +23,7 @@ const variants = [
   "subtle-warning",
   "subtle-error",
   "subtle-info",
+  "subtle-neutral",
 ] as const;
 
 describe("badgeVariants semantic colour classes", () => {

packages/core/src/components/badge/badge.tsx

@@ -27,6 +27,8 @@ const badgeVariants = cva(
           "astw:border-transparent astw:bg-danger-surface astw:text-danger-text astw:hover:bg-danger-surface-hover",
         "subtle-info":
           "astw:border-transparent astw:bg-info-surface astw:text-info-text astw:hover:bg-info-surface-hover",
+        "subtle-neutral":
+          "astw:border-transparent astw:bg-neutral-surface astw:text-neutral-text astw:hover:bg-neutral-surface-hover",
         // Outline variants with status dots - matches Figma design
         "outline-success":
           "astw:gap-0.5 astw:pl-1.5 astw:pr-2 astw:border-border astw:bg-card astw:text-foreground",