Add signal-color variants to Badge, rename destructive to danger

.changeset/badge-signal-colors.md

@@ -0,0 +1,9 @@
+---
+'@surfnet/curve-react': minor
+'@surfnet/curve-angular': minor
+'@surfnet/curve-contracts': minor
+---
+
+Add `info`, `success`, `warning`, and `danger` signal-color variants to the Badge component, styled as a subtle tint (`bg-<name>-subtle` / `text-<name>-subtle-foreground`), matching the Alert component's signal variants and the Figma spec.
+
+**Breaking:** the `destructive` variant is renamed to `danger`. Replace `variant="destructive"` with `variant="danger"` on `Badge` (Alert was already renamed in a previous release; other components are unaffected).

packages/angular/src/lib/ui/badge/src/lib/hlm-badge.stories.ts

@@ -102,7 +102,7 @@ export const Counts: Story = {
     template: `
       <div class="flex flex-wrap items-center gap-3">
         <span hlmBadge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">8</span>
-        <span hlmBadge variant="destructive" class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">99</span>
+        <span hlmBadge variant="danger" class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">99</span>
         <span hlmBadge variant="outline" class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">20+</span>
       </div>`,
   }),
@@ -130,7 +130,7 @@ export const StatusList: Story = {
         </li>
         <li class="flex items-center justify-between rounded-md border border-border px-3 py-2">
           <span>Rotate API credentials</span>
-          <span hlmBadge variant="destructive">Overdue</span>
+          <span hlmBadge variant="danger">Overdue</span>
         </li>
         <li class="flex items-center justify-between rounded-md border border-border px-3 py-2">
           <span>Archive old backups</span>

packages/angular/src/lib/ui/badge/src/lib/hlm-badge.ts

@@ -6,8 +6,13 @@ import { type VariantProps, cva } from 'class-variance-authority';
 const badgeVariantClasses = {
   default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
   secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
-  destructive:
-    'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
+  info: 'bg-info-subtle text-info-subtle-foreground [a]:hover:bg-info-subtle-hover focus-visible:ring-info/20 dark:focus-visible:ring-info/40',
+  success:
+    'bg-success-subtle text-success-subtle-foreground [a]:hover:bg-success-subtle-hover focus-visible:ring-success/20 dark:focus-visible:ring-success/40',
+  warning:
+    'bg-warning-subtle text-warning-subtle-foreground [a]:hover:bg-warning-subtle-hover focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40',
+  danger:
+    'bg-danger-subtle text-danger-subtle-foreground [a]:hover:bg-danger-subtle-hover focus-visible:ring-danger/20 dark:focus-visible:ring-danger/40',
   outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
   ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
   link: 'text-primary underline-offset-4 hover:underline',

packages/contracts/src/badge.ts

@@ -2,7 +2,17 @@ import { defineContract } from './define-contract.js';
 
 export const badgeContract = defineContract({
   props: {
-    variants: ['default', 'secondary', 'destructive', 'outline', 'ghost', 'link'],
+    variants: [
+      'default',
+      'secondary',
+      'info',
+      'success',
+      'warning',
+      'danger',
+      'outline',
+      'ghost',
+      'link',
+    ],
   },
   defaults: {
     variants: 'default',
@@ -12,7 +22,10 @@ export const badgeContract = defineContract({
     variants: {
       default: 'Primary brand fill — the most prominent badge style.',
       secondary: 'Muted fill — general-purpose secondary label.',
-      destructive: 'Danger tint — errors, warnings, or destructive states.',
+      info: 'Informational tint — does not require immediate action.',
+      success: 'Success tint — confirms a successful action or state.',
+      warning: 'Warning tint — highlights something that needs attention.',
+      danger: 'Danger tint — errors, warnings, or destructive states.',
       outline: 'Bordered, transparent fill — low-emphasis label.',
       ghost: 'No background or border — minimal label.',
       link: 'Looks like a hyperlink — inline actionable label.',

packages/react/src/components/ui/badge/badge.stories.tsx

@@ -70,7 +70,7 @@ export const Counts: Story = {
   render: () => (
     <div className="flex flex-wrap items-center gap-3">
       <Badge className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">8</Badge>
-      <Badge variant="destructive" className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
+      <Badge variant="danger" className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
         99
       </Badge>
       <Badge variant="outline" className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
@@ -106,7 +106,7 @@ export const StatusList: Story = {
       </li>
       <li className="flex items-center justify-between rounded-md border border-border px-3 py-2">
         <span>Rotate API credentials</span>
-        <Badge variant="destructive">Overdue</Badge>
+        <Badge variant="danger">Overdue</Badge>
       </li>
       <li className="flex items-center justify-between rounded-md border border-border px-3 py-2">
         <span>Archive old backups</span>

packages/react/src/components/ui/badge/badge.tsx

@@ -10,8 +10,13 @@ import { cn } from '@/lib/utils';
 const badgeVariantClasses = {
   default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
   secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
-  destructive:
-    'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+  info: 'bg-info-subtle text-info-subtle-foreground focus-visible:ring-info/20 dark:focus-visible:ring-info/40 [a]:hover:bg-info-subtle-hover',
+  success:
+    'bg-success-subtle text-success-subtle-foreground focus-visible:ring-success/20 dark:focus-visible:ring-success/40 [a]:hover:bg-success-subtle-hover',
+  warning:
+    'bg-warning-subtle text-warning-subtle-foreground focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40 [a]:hover:bg-warning-subtle-hover',
+  danger:
+    'bg-danger-subtle text-danger-subtle-foreground focus-visible:ring-danger/20 dark:focus-visible:ring-danger/40 [a]:hover:bg-danger-subtle-hover',
   outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
   ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
   link: 'text-primary underline-offset-4 hover:underline',

packages/tokens/src/tokens.groenvermogen-nkph2.json

@@ -133,7 +133,7 @@
   },
   "border-subtle": {
     "$type": "color",
-    "$value": "rgba(0, 0, 0, 0.08)"
+    "$value": "rgba(0, 0, 0, 0.06)"
   },
   "destructive-foreground": {
     "$type": "color",
@@ -225,11 +225,11 @@
   },
   "danger-subtle": {
     "$type": "color",
-    "$value": "rgba(254, 226, 226, 1)"
+    "$value": "rgba(255, 224, 222, 1)"
   },
   "danger-subtle-hover": {
     "$type": "color",
-    "$value": "rgba(254, 202, 202, 1)"
+    "$value": "rgba(246, 167, 163, 1)"
   },
   "danger-subtle-foreground": {
     "$type": "color",

packages/tokens/src/tokens.json

@@ -133,7 +133,7 @@
   },
   "border-subtle": {
     "$type": "color",
-    "$value": "rgba(0, 0, 0, 0.08)"
+    "$value": "rgba(0, 0, 0, 0.06)"
   },
   "destructive-foreground": {
     "$type": "color",

packages/tokens/src/tokens.shadcn-default-grey-background.json

@@ -133,7 +133,7 @@
   },
   "border-subtle": {
     "$type": "color",
-    "$value": "rgba(0, 0, 0, 0.08)"
+    "$value": "rgba(0, 0, 0, 0.06)"
   },
   "destructive-foreground": {
     "$type": "color",

packages/tokens/src/tokens.shadcn-default.json

@@ -133,7 +133,7 @@
   },
   "border-subtle": {
     "$type": "color",
-    "$value": "rgba(0, 0, 0, 0.08)"
+    "$value": "rgba(0, 0, 0, 0.06)"
   },
   "destructive-foreground": {
     "$type": "color",
@@ -225,11 +225,11 @@
   },
   "danger-subtle": {
     "$type": "color",
-    "$value": "rgba(254, 226, 226, 1)"
+    "$value": "rgba(255, 224, 222, 1)"
   },
   "danger-subtle-hover": {
     "$type": "color",
-    "$value": "rgba(254, 202, 202, 1)"
+    "$value": "rgba(246, 167, 163, 1)"
   },
   "danger-subtle-foreground": {
     "$type": "color",

packages/tokens/src/tokens.surf-blue-purple.json

@@ -133,7 +133,7 @@
   },
   "border-subtle": {
     "$type": "color",
-    "$value": "rgba(0, 0, 0, 0.08)"
+    "$value": "rgba(0, 0, 0, 0.06)"
   },
   "destructive-foreground": {
     "$type": "color",

packages/tokens/src/tokens.surf-blue-turquoise.json

@@ -133,7 +133,7 @@
   },
   "border-subtle": {
     "$type": "color",
-    "$value": "rgba(0, 0, 0, 0.08)"
+    "$value": "rgba(0, 0, 0, 0.06)"
   },
   "destructive-foreground": {
     "$type": "color",

packages/tokens/src/tokens.surf-blue-yellow.json

@@ -133,7 +133,7 @@
   },
   "border-subtle": {
     "$type": "color",
-    "$value": "rgba(0, 0, 0, 0.08)"
+    "$value": "rgba(0, 0, 0, 0.06)"
   },
   "destructive-foreground": {
     "$type": "color",

packages/tokens/src/tokens.surf-green.json

@@ -133,7 +133,7 @@
   },
   "border-subtle": {
     "$type": "color",
-    "$value": "rgba(0, 0, 0, 0.08)"
+    "$value": "rgba(0, 0, 0, 0.06)"
   },
   "destructive-foreground": {
     "$type": "color",

packages/tokens/src/tokens.surf-orange-turquoise.json

@@ -133,7 +133,7 @@
   },
   "border-subtle": {
     "$type": "color",
-    "$value": "rgba(0, 0, 0, 0.08)"
+    "$value": "rgba(0, 0, 0, 0.06)"
   },
   "destructive-foreground": {
     "$type": "color",
@@ -225,11 +225,11 @@
   },
   "danger-subtle": {
     "$type": "color",
-    "$value": "rgba(254, 226, 226, 1)"
+    "$value": "rgba(255, 224, 222, 1)"
   },
   "danger-subtle-hover": {
     "$type": "color",
-    "$value": "rgba(254, 202, 202, 1)"
+    "$value": "rgba(246, 167, 163, 1)"
   },
   "danger-subtle-foreground": {
     "$type": "color",

packages/tokens/src/tokens.surf-orange.json

@@ -133,7 +133,7 @@
   },
   "border-subtle": {
     "$type": "color",
-    "$value": "rgba(0, 0, 0, 0.08)"
+    "$value": "rgba(0, 0, 0, 0.06)"
   },
   "destructive-foreground": {
     "$type": "color",

packages/tokens/src/tokens.surf-pilot.json

@@ -133,7 +133,7 @@
   },
   "border-subtle": {
     "$type": "color",
-    "$value": "rgba(0, 0, 0, 0.08)"
+    "$value": "rgba(0, 0, 0, 0.06)"
   },
   "destructive-foreground": {
     "$type": "color",
@@ -225,11 +225,11 @@
   },
   "danger-subtle": {
     "$type": "color",
-    "$value": "rgba(254, 226, 226, 1)"
+    "$value": "rgba(255, 224, 222, 1)"
   },
   "danger-subtle-hover": {
     "$type": "color",
-    "$value": "rgba(254, 202, 202, 1)"
+    "$value": "rgba(246, 167, 163, 1)"
   },
   "danger-subtle-foreground": {
     "$type": "color",

packages/tokens/src/tokens.surf-purple-orange.json

@@ -133,7 +133,7 @@
   },
   "border-subtle": {
     "$type": "color",
-    "$value": "rgba(0, 0, 0, 0.08)"
+    "$value": "rgba(0, 0, 0, 0.06)"
   },
   "destructive-foreground": {
     "$type": "color",

packages/tokens/src/tokens.surf-purple.json

@@ -133,7 +133,7 @@
   },
   "border-subtle": {
     "$type": "color",
-    "$value": "rgba(0, 0, 0, 0.08)"
+    "$value": "rgba(0, 0, 0, 0.06)"
   },
   "destructive-foreground": {
     "$type": "color",

packages/tokens/src/tokens.surf-yellow.json

@@ -133,7 +133,7 @@
   },
   "border-subtle": {
     "$type": "color",
-    "$value": "rgba(0, 0, 0, 0.08)"
+    "$value": "rgba(0, 0, 0, 0.06)"
   },
   "destructive-foreground": {
     "$type": "color",