From fca36d4f09e4ede4c22827a029b9397382eb2460 Mon Sep 17 00:00:00 2001 From: Erick Teowarang Date: Thu, 28 May 2026 14:01:36 +1000 Subject: [PATCH 1/3] feat(badge): add subtle-info variant Adds a low-emphasis blue badge variant for informational or in-progress status labels, completing the subtle-* family alongside success/warning/error. Co-Authored-By: Claude Opus 4.7 (1M context) --- .changeset/add-subtle-info-badge.md | 9 +++++++++ docs/components/badge.md | 4 ++++ .../nextjs-app/src/modules/pages/primitives-demo.tsx | 1 + packages/core/src/components/badge.tsx | 2 ++ 4 files changed, 16 insertions(+) create mode 100644 .changeset/add-subtle-info-badge.md diff --git a/.changeset/add-subtle-info-badge.md b/.changeset/add-subtle-info-badge.md new file mode 100644 index 00000000..f78bf20c --- /dev/null +++ b/.changeset/add-subtle-info-badge.md @@ -0,0 +1,9 @@ +--- +"@tailor-platform/app-shell": patch +--- + +Add `subtle-info` badge variant for low-emphasis informational status labels (e.g. in-progress, processing). + +```tsx +In Progress +``` diff --git a/docs/components/badge.md b/docs/components/badge.md index 81163eb6..efa8547e 100644 --- a/docs/components/badge.md +++ b/docs/components/badge.md @@ -23,6 +23,7 @@ import { Badge, type BadgeVariant, type BadgeOptions } from "@tailor-platform/ap Subtle Success Subtle Warning Subtle Error +Subtle Info ``` ## Variants @@ -40,6 +41,7 @@ Filled variants for high emphasis, plus subtle variants for lower-emphasis statu Matched Needs Attention Needs Review +In Progress ``` ### Outline Variants with Status Dots @@ -75,6 +77,7 @@ type BadgeVariant = | "subtle-success" // Low-emphasis green | "subtle-warning" // Low-emphasis yellow | "subtle-error" // Low-emphasis red/destructive + | "subtle-info" // Low-emphasis blue // Outline variants with status dots | "outline-success" | "outline-warning" @@ -199,6 +202,7 @@ function ProductBadge({ product }: { product: Product }) { | `subtle-success` | ![Subtle green badge] | Low-emphasis completed or matched statuses | | `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 | ### Outline Variants diff --git a/examples/nextjs-app/src/modules/pages/primitives-demo.tsx b/examples/nextjs-app/src/modules/pages/primitives-demo.tsx index dff62ddf..ed87deb5 100644 --- a/examples/nextjs-app/src/modules/pages/primitives-demo.tsx +++ b/examples/nextjs-app/src/modules/pages/primitives-demo.tsx @@ -104,6 +104,7 @@ export const primitiveComponentsDemoResource = defineResource({ Subtle Success Subtle Warning Subtle Error + Subtle Info Outline diff --git a/packages/core/src/components/badge.tsx b/packages/core/src/components/badge.tsx index 0a6f556a..ca3cbaab 100644 --- a/packages/core/src/components/badge.tsx +++ b/packages/core/src/components/badge.tsx @@ -23,6 +23,8 @@ const badgeVariants = cva( "astw:border-transparent astw:bg-yellow-500/10 astw:text-yellow-700 astw:hover:bg-yellow-500/20 astw:dark:text-yellow-500", "subtle-error": "astw:border-transparent astw:bg-destructive/10 astw:text-destructive astw:hover:bg-destructive/20", + "subtle-info": + "astw:border-transparent astw:bg-blue-500/10 astw:text-blue-700 astw:hover:bg-blue-500/20 astw:dark:text-blue-500", // 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", From ee9629834af66a26eaeb963bc3ab88ed2db23334 Mon Sep 17 00:00:00 2001 From: Erick Teowarang Date: Thu, 28 May 2026 14:08:32 +1000 Subject: [PATCH 2/3] feat(badge): add solid info variant + show all outline variants in demo Adds a solid blue `info` variant alongside the new `subtle-info`, filling the gap in the solid family (success/warning/error/neutral/info). Also expands the primitives demo to render all five outline variants instead of only `outline-success` as a placeholder. Co-Authored-By: Claude Opus 4.7 (1M context) --- .changeset/add-subtle-info-badge.md | 3 ++- docs/components/badge.md | 4 ++++ examples/nextjs-app/src/modules/pages/primitives-demo.tsx | 7 ++++++- packages/core/src/components/badge.tsx | 1 + 4 files changed, 13 insertions(+), 2 deletions(-) diff --git a/.changeset/add-subtle-info-badge.md b/.changeset/add-subtle-info-badge.md index f78bf20c..32b055bd 100644 --- a/.changeset/add-subtle-info-badge.md +++ b/.changeset/add-subtle-info-badge.md @@ -2,8 +2,9 @@ "@tailor-platform/app-shell": patch --- -Add `subtle-info` badge variant for low-emphasis informational status labels (e.g. in-progress, processing). +Add `info` and `subtle-info` badge variants for informational or in-progress status labels (blue palette, matching the existing `outline-info` dot color). Also extend the primitives demo to show all five outline variants (previously only `outline-success` was rendered). ```tsx +New In Progress ``` diff --git a/docs/components/badge.md b/docs/components/badge.md index efa8547e..c0b5039f 100644 --- a/docs/components/badge.md +++ b/docs/components/badge.md @@ -20,6 +20,7 @@ import { Badge, type BadgeVariant, type BadgeOptions } from "@tailor-platform/ap Success Warning Error +Info Subtle Success Subtle Warning Subtle Error @@ -38,6 +39,7 @@ Filled variants for high emphasis, plus subtle variants for lower-emphasis statu Pending Rejected Draft +New Matched Needs Attention Needs Review @@ -74,6 +76,7 @@ type BadgeVariant = | "warning" // Yellow | "error" // Red/destructive | "neutral" // Gray/secondary + | "info" // Blue | "subtle-success" // Low-emphasis green | "subtle-warning" // Low-emphasis yellow | "subtle-error" // Low-emphasis red/destructive @@ -199,6 +202,7 @@ function ProductBadge({ product }: { product: Product }) { | `warning` | ![Yellow badge] | Pending, in progress, attention needed | | `error` | ![Red badge] | Failed, rejected, critical | | `neutral` | ![Gray badge] | Draft, inactive, disabled | +| `info` | ![Blue badge] | Informational, new, in-progress | | `subtle-success` | ![Subtle green badge] | Low-emphasis completed or matched statuses | | `subtle-warning` | ![Subtle yellow badge] | Low-emphasis pending or attention states | | `subtle-error` | ![Subtle red badge] | Low-emphasis failures or exceptions | diff --git a/examples/nextjs-app/src/modules/pages/primitives-demo.tsx b/examples/nextjs-app/src/modules/pages/primitives-demo.tsx index ed87deb5..f0147bcd 100644 --- a/examples/nextjs-app/src/modules/pages/primitives-demo.tsx +++ b/examples/nextjs-app/src/modules/pages/primitives-demo.tsx @@ -101,11 +101,16 @@ export const primitiveComponentsDemoResource = defineResource({ Warning Error Neutral + Info Subtle Success Subtle Warning Subtle Error Subtle Info - Outline + Outline Success + Outline Warning + Outline Error + Outline Info + Outline Neutral diff --git a/packages/core/src/components/badge.tsx b/packages/core/src/components/badge.tsx index ca3cbaab..03d84fe8 100644 --- a/packages/core/src/components/badge.tsx +++ b/packages/core/src/components/badge.tsx @@ -17,6 +17,7 @@ const badgeVariants = cva( "astw:border-transparent astw:bg-destructive astw:text-destructive-foreground astw:hover:bg-destructive/80", neutral: "astw:border-transparent astw:bg-secondary astw:text-secondary-foreground astw:hover:bg-secondary/80", + info: "astw:border-transparent astw:bg-blue-500 astw:text-white astw:hover:bg-blue-600", "subtle-success": "astw:border-transparent astw:bg-green-500/10 astw:text-green-700 astw:hover:bg-green-500/20 astw:dark:text-green-500", "subtle-warning": From 6add6b082301dc0f7f6dc67ed6cb73894c2a2917 Mon Sep 17 00:00:00 2001 From: Erick Teowarang Date: Thu, 28 May 2026 14:10:16 +1000 Subject: [PATCH 3/3] chore(demo): split Badge demo into Solid / Subtle / Outline rows The single-row layout was too crowded after the info + outline variants were added. Mirrors the Button card's labeled-row pattern. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../src/modules/pages/primitives-demo.tsx | 47 ++++++++++++------- 1 file changed, 31 insertions(+), 16 deletions(-) diff --git a/examples/nextjs-app/src/modules/pages/primitives-demo.tsx b/examples/nextjs-app/src/modules/pages/primitives-demo.tsx index f0147bcd..7345af6a 100644 --- a/examples/nextjs-app/src/modules/pages/primitives-demo.tsx +++ b/examples/nextjs-app/src/modules/pages/primitives-demo.tsx @@ -95,22 +95,37 @@ export const primitiveComponentsDemoResource = defineResource({ -
- Default - Success - Warning - Error - Neutral - Info - Subtle Success - Subtle Warning - Subtle Error - Subtle Info - Outline Success - Outline Warning - Outline Error - Outline Info - Outline Neutral +
+
+
Solid
+
+ Default + Success + Warning + Error + Neutral + Info +
+
+
+
Subtle
+
+ Subtle Success + Subtle Warning + Subtle Error + Subtle Info +
+
+
+
Outline
+
+ Outline Success + Outline Warning + Outline Error + Outline Info + Outline Neutral +
+