feat(badge): add info + subtle-info variants, expand outline demo

.changeset/add-subtle-info-badge.md

@@ -0,0 +1,10 @@
+---
+"@tailor-platform/app-shell": patch
+---
+
+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
+<Badge variant="info">New</Badge>
+<Badge variant="subtle-info">In Progress</Badge>
+```

docs/components/badge.md

@@ -20,9 +20,11 @@ import { Badge, type BadgeVariant, type BadgeOptions } from "@tailor-platform/ap
 <Badge variant="success">Success</Badge>
 <Badge variant="warning">Warning</Badge>
 <Badge variant="error">Error</Badge>
+<Badge variant="info">Info</Badge>
 <Badge variant="subtle-success">Subtle Success</Badge>
 <Badge variant="subtle-warning">Subtle Warning</Badge>
 <Badge variant="subtle-error">Subtle Error</Badge>
+<Badge variant="subtle-info">Subtle Info</Badge>
 ```
 
 ## Variants
@@ -37,9 +39,11 @@ Filled variants for high emphasis, plus subtle variants for lower-emphasis statu
 <Badge variant="warning">Pending</Badge>
 <Badge variant="error">Rejected</Badge>
 <Badge variant="neutral">Draft</Badge>
+<Badge variant="info">New</Badge>
 <Badge variant="subtle-success">Matched</Badge>
 <Badge variant="subtle-warning">Needs Attention</Badge>
 <Badge variant="subtle-error">Needs Review</Badge>
+<Badge variant="subtle-info">In Progress</Badge>
 ```
 
 ### Outline Variants with Status Dots
@@ -72,9 +76,11 @@ 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
+  | "subtle-info" // Low-emphasis blue
   // Outline variants with status dots
   | "outline-success"
   | "outline-warning"
@@ -196,9 +202,11 @@ 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        |
+| `subtle-info`    | ![Subtle blue badge]   | Low-emphasis informational or in-progress  |
 
 ### Outline Variants
 

examples/nextjs-app/src/modules/pages/primitives-demo.tsx

@@ -95,16 +95,37 @@ export const primitiveComponentsDemoResource = defineResource({
           <Card.Root>
             <Card.Header title="Badge" />
             <Card.Content>
-              <div style={rowStyle}>
-                <Badge>Default</Badge>
-                <Badge variant="success">Success</Badge>
-                <Badge variant="warning">Warning</Badge>
-                <Badge variant="error">Error</Badge>
-                <Badge variant="neutral">Neutral</Badge>
-                <Badge variant="subtle-success">Subtle Success</Badge>
-                <Badge variant="subtle-warning">Subtle Warning</Badge>
-                <Badge variant="subtle-error">Subtle Error</Badge>
-                <Badge variant="outline-success">Outline</Badge>
+              <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+                <div>
+                  <div style={labelStyle}>Solid</div>
+                  <div style={rowStyle}>
+                    <Badge>Default</Badge>
+                    <Badge variant="success">Success</Badge>
+                    <Badge variant="warning">Warning</Badge>
+                    <Badge variant="error">Error</Badge>
+                    <Badge variant="neutral">Neutral</Badge>
+                    <Badge variant="info">Info</Badge>
+                  </div>
+                </div>
+                <div>
+                  <div style={labelStyle}>Subtle</div>
+                  <div style={rowStyle}>
+                    <Badge variant="subtle-success">Subtle Success</Badge>
+                    <Badge variant="subtle-warning">Subtle Warning</Badge>
+                    <Badge variant="subtle-error">Subtle Error</Badge>
+                    <Badge variant="subtle-info">Subtle Info</Badge>
+                  </div>
+                </div>
+                <div>
+                  <div style={labelStyle}>Outline</div>
+                  <div style={rowStyle}>
+                    <Badge variant="outline-success">Outline Success</Badge>
+                    <Badge variant="outline-warning">Outline Warning</Badge>
+                    <Badge variant="outline-error">Outline Error</Badge>
+                    <Badge variant="outline-info">Outline Info</Badge>
+                    <Badge variant="outline-neutral">Outline Neutral</Badge>
+                  </div>
+                </div>
               </div>
             </Card.Content>
           </Card.Root>

packages/core/src/components/badge.tsx

@@ -17,12 +17,15 @@ 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":
           "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",