diff --git a/.changeset/badge-subtle-neutral.md b/.changeset/badge-subtle-neutral.md
new file mode 100644
index 00000000..19f62a6b
--- /dev/null
+++ b/.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
+Archived
+```
+
+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`.
diff --git a/docs-manifest.json b/docs-manifest.json
index 387f1956..ee26b233 100644
--- a/docs-manifest.json
+++ b/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",
diff --git a/docs-src/components/badge.docs.examples.tsx b/docs-src/components/badge.docs.examples.tsx
index adc1cfa1..6cc06da8 100644
--- a/docs-src/components/badge.docs.examples.tsx
+++ b/docs-src/components/badge.docs.examples.tsx
@@ -12,6 +12,7 @@ export function BasicUsage() {
Subtle Warning
Subtle Error
Subtle Info
+ Subtle Neutral
);
}
diff --git a/docs-src/components/badge.docs.outline.md b/docs-src/components/badge.docs.outline.md
index 2e55255b..3272298e 100644
--- a/docs-src/components/badge.docs.outline.md
+++ b/docs-src/components/badge.docs.outline.md
@@ -38,6 +38,7 @@ Filled variants for high emphasis, plus subtle variants for lower-emphasis statu
Needs Attention
Needs Review
In Progress
+Archived
```
### 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
diff --git a/docs/components/badge.md b/docs/components/badge.md
index 6fae1784..6e6703fe 100644
--- a/docs/components/badge.md
+++ b/docs/components/badge.md
@@ -32,6 +32,7 @@ function BasicUsage() {
Subtle Warning
Subtle Error
Subtle Info
+ Subtle Neutral
);
}
@@ -54,6 +55,7 @@ Filled variants for high emphasis, plus subtle variants for lower-emphasis statu
Needs Attention
Needs Review
In Progress
+Archived
```
### Outline Variants with Status Dots
@@ -74,9 +76,9 @@ _Generated from the type surface — first-party props only._
### BadgeProps
-| Prop | Type | Default | Description |
-| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------- |
-| `variant?` | `"error" \| "neutral" \| "success" \| "warning" \| "info" \| "default" \| "subtle-success" \| "subtle-warning" \| "subtle-error" \| "subtle-info" \| "outline-success" \| "outline-warning" \| "outline-error" \| "outline-info" \| "outline-neutral" \| null` | `"default"` | Visual style variant |
+| Prop | Type | Default | Description |
+| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------- |
+| `variant?` | `"error" \| "neutral" \| "success" \| "warning" \| "info" \| "default" \| "subtle-success" \| "subtle-warning" \| "subtle-error" \| "subtle-info" \| "subtle-neutral" \| "outline-success" \| "outline-warning" \| "outline-error" \| "outline-info" \| "outline-neutral" \| null` | `"default"` | Visual style variant |
## Exports
@@ -99,6 +101,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"
@@ -225,6 +228,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
diff --git a/examples/vite-app/src/pages/showcase/primitives/page.tsx b/examples/vite-app/src/pages/showcase/primitives/page.tsx
index 6269570b..e4180313 100644
--- a/examples/vite-app/src/pages/showcase/primitives/page.tsx
+++ b/examples/vite-app/src/pages/showcase/primitives/page.tsx
@@ -177,6 +177,7 @@ const PrimitiveComponentsDemoPage = () => {
Subtle Warning
Subtle Error
Subtle Info
+ Subtle Neutral
diff --git a/packages/core/src/components/badge/badge.test.tsx b/packages/core/src/components/badge/badge.test.tsx
index 73de9715..fa00d583 100644
--- a/packages/core/src/components/badge/badge.test.tsx
+++ b/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", () => {
diff --git a/packages/core/src/components/badge/badge.tsx b/packages/core/src/components/badge/badge.tsx
index 7c716d8f..e0858a23 100644
--- a/packages/core/src/components/badge/badge.tsx
+++ b/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",