@carlonicora/nextjs-jsonapi 1.129.1 → 1.130.0

package/src/features/billing/components/widgets/BillingAlertBanner.tsx

@@ -15,15 +15,15 @@ export function BillingAlertBanner({ subscription, onUpdatePayment, onAddPayment
   if (subscription.status === SubscriptionStatus.PAST_DUE) {
     return (
       <div className="bg-red-50 border border-red-200 rounded-lg p-4 flex items-start gap-x-3">
-        <AlertCircle className="h-5 w-5 text-red-600 mt-0.5" />
+        <AlertCircle className="text-destructive mt-0.5 h-5 w-5" />
         <div className="flex-1">
-          <h3 className="font-semibold text-red-900">Payment Failed</h3>
-          <p className="text-sm text-red-700 mt-1">
+          <h3 className="text-destructive text-sm font-medium">Payment Failed</h3>
+          <p className="text-destructive mt-1 text-sm">
             Your last payment failed. Please update your payment method to avoid service interruption.
           </p>
         </div>
         {onUpdatePayment && (
-          <Button variant="outline" size="sm" onClick={onUpdatePayment} className="border-red-300 text-red-700">
+          <Button variant="outline" size="sm" onClick={onUpdatePayment} className="text-destructive border-red-300">
             Update Payment Method
           </Button>
         )}
@@ -40,16 +40,16 @@ export function BillingAlertBanner({ subscription, onUpdatePayment, onAddPayment
     if (daysRemaining <= 7) {
       return (
         <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 flex items-start gap-x-3">
-          <AlertCircle className="h-5 w-5 text-yellow-600 mt-0.5" />
+          <AlertCircle className="text-warning mt-0.5 h-5 w-5" />
           <div className="flex-1">
-            <h3 className="font-semibold text-yellow-900">Trial Ending Soon</h3>
-            <p className="text-sm text-yellow-700 mt-1">
+            <h3 className="text-warning text-sm font-medium">Trial Ending Soon</h3>
+            <p className="text-warning mt-1 text-sm">
               Your trial ends in {daysRemaining} {daysRemaining === 1 ? "day" : "days"}. Add a payment method to
               continue your subscription.
             </p>
           </div>
           {onAddPayment && (
-            <Button variant="outline" size="sm" onClick={onAddPayment} className="border-yellow-300 text-yellow-700">
+            <Button variant="outline" size="sm" onClick={onAddPayment} className="text-warning border-yellow-300">
               Add Payment Method
             </Button>
           )}

package/src/features/billing/stripe-customer/components/containers/PaymentMethodsContainer.tsx

@@ -42,7 +42,7 @@ export function PaymentMethodsContainer() {
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-x-3">
           <CreditCard className="h-8 w-8" />
-          <h1 className="text-3xl font-bold">Payment Methods</h1>
+          <h1 className="text-primary text-3xl font-semibold">Payment Methods</h1>
         </div>
         <Button onClick={() => setShowAddPaymentMethod(true)}>Add Payment Method</Button>
       </div>
@@ -52,7 +52,7 @@ export function PaymentMethodsContainer() {
         <div className="flex flex-col items-center justify-center gap-y-4 rounded-lg border-2 border-dashed border-gray-300 bg-muted/50 p-12">
           <CreditCard className="h-16 w-16 text-muted-foreground" />
           <div className="text-center">
-            <h3 className="mb-2 text-xl font-semibold">No payment methods</h3>
+            <h3 className="mb-2 text-sm font-medium">No payment methods</h3>
             <p className="mb-4 text-muted-foreground">
               Add a payment method to enable subscriptions and secure checkout.
             </p>

package/src/features/billing/stripe-customer/components/details/PaymentMethodCard.tsx

@@ -91,7 +91,9 @@ export function PaymentMethodCard({ paymentMethod, onUpdate }: PaymentMethodCard
       <Card className="relative">
         {/* Default Badge */}
         {isDefault && (
-          <Badge className="absolute right-2 top-2 bg-green-100 text-green-800 hover:bg-green-100">Default</Badge>
+          <Badge variant="softGreen" className="absolute right-2 top-2">
+            Default
+          </Badge>
         )}
 
         <CardHeader className="flex flex-row items-center justify-between pb-2">
@@ -118,7 +120,11 @@ export function PaymentMethodCard({ paymentMethod, onUpdate }: PaymentMethodCard
                   Set as Default
                 </DropdownMenuItem>
               )}
-              <DropdownMenuItem onClick={() => setShowRemoveDialog(true)} disabled={loading} className="text-red-600">
+              <DropdownMenuItem
+                onClick={() => setShowRemoveDialog(true)}
+                disabled={loading}
+                className="text-destructive"
+              >
                 Remove
               </DropdownMenuItem>
             </DropdownMenuContent>

package/src/features/billing/stripe-customer/components/forms/PaymentMethodForm.tsx

@@ -132,7 +132,7 @@ export function PaymentMethodForm({ onSuccess, onCancel, isLoading = false }: Pa
       {/* Set as Default Checkbox */}
       <div className="flex items-center gap-x-2">
         <Checkbox id="setAsDefault" checked={setAsDefault} onCheckedChange={(checked) => setSetAsDefault(!!checked)} />
-        <Label htmlFor="setAsDefault" className="text-sm font-normal">
+        <Label htmlFor="setAsDefault" className="font-normal">
           Set as default payment method
         </Label>
       </div>

package/src/features/billing/stripe-invoice/components/details/InvoiceDetails.tsx

@@ -62,29 +62,29 @@ export function InvoiceDetails({
           {/* Invoice Info Grid */}
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <span className="text-sm font-medium text-muted-foreground">Billing Period:</span>
-              <p className="font-medium">
+              <span className="text-muted-foreground text-xs">Billing Period:</span>
+              <p className="text-sm">
                 {formatDate(invoice.periodStart)} - {formatDate(invoice.periodEnd)}
               </p>
             </div>
 
             {invoice.dueDate && (
               <div>
-                <span className="text-sm font-medium text-muted-foreground">Due Date:</span>
-                <p className="font-medium">{formatDate(invoice.dueDate)}</p>
+                <span className="text-muted-foreground text-xs">Due Date:</span>
+                <p className="text-sm">{formatDate(invoice.dueDate)}</p>
               </div>
             )}
 
             {invoice.paidAt && (
               <div>
-                <span className="text-sm font-medium text-muted-foreground">Paid Date:</span>
-                <p className="font-medium">{formatDate(invoice.paidAt)}</p>
+                <span className="text-muted-foreground text-xs">Paid Date:</span>
+                <p className="text-sm">{formatDate(invoice.paidAt)}</p>
               </div>
             )}
 
             <div>
-              <span className="text-sm font-medium text-muted-foreground">Attempt Count:</span>
-              <p className="font-medium">{invoice.attemptCount}</p>
+              <span className="text-muted-foreground text-xs">Attempt Count:</span>
+              <p className="text-sm">{invoice.attemptCount}</p>
             </div>
           </div>
 
@@ -112,14 +112,14 @@ export function InvoiceDetails({
           {/* Amount Breakdown */}
           <div className="space-y-2 border-t pt-4">
             <div className="flex justify-between">
-              <span className="text-sm font-medium text-muted-foreground">Subtotal:</span>
-              <span className="font-medium">{formatCurrency(invoice.subtotal, invoice.currency)}</span>
+              <span className="text-muted-foreground text-xs">Subtotal:</span>
+              <span className="text-sm">{formatCurrency(invoice.subtotal, invoice.currency)}</span>
             </div>
 
             {invoice.tax !== undefined && invoice.tax > 0 && (
               <div className="flex justify-between">
-                <span className="text-sm font-medium text-muted-foreground">Tax:</span>
-                <span className="font-medium">{formatCurrency(invoice.tax, invoice.currency)}</span>
+                <span className="text-muted-foreground text-xs">Tax:</span>
+                <span className="text-sm">{formatCurrency(invoice.tax, invoice.currency)}</span>
               </div>
             )}
 
@@ -130,17 +130,15 @@ export function InvoiceDetails({
 
             {invoice.amountPaid > 0 && (
               <div className="flex justify-between">
-                <span className="text-sm font-medium text-muted-foreground">Amount Paid:</span>
-                <span className="font-medium text-green-600">
-                  {formatCurrency(invoice.amountPaid, invoice.currency)}
-                </span>
+                <span className="text-muted-foreground text-xs">Amount Paid:</span>
+                <span className="text-sm text-success">{formatCurrency(invoice.amountPaid, invoice.currency)}</span>
               </div>
             )}
 
             {invoice.amountRemaining > 0 && (
               <div className="flex justify-between">
-                <span className="text-sm font-medium text-muted-foreground">Amount Due:</span>
-                <span className="font-medium text-red-600">
+                <span className="text-muted-foreground text-xs">Amount Due:</span>
+                <span className="text-sm text-destructive">
                   {formatCurrency(invoice.amountRemaining, invoice.currency)}
                 </span>
               </div>

package/src/features/billing/stripe-invoice/components/lists/InvoicesList.tsx

@@ -54,12 +54,12 @@ export function InvoicesList({ invoices, onInvoicesChange }: InvoicesListProps)
                   className="cursor-pointer hover:bg-muted/50"
                 >
                   <TableCell className="font-medium">{invoiceNumber}</TableCell>
-                  <TableCell className="text-muted-foreground text-sm">{date}</TableCell>
+                  <TableCell className="text-muted-foreground text-xs">{date}</TableCell>
                   <TableCell>
                     <InvoiceStatusBadge status={invoice.status} />
                   </TableCell>
                   <TableCell className="text-right font-medium">{amount}</TableCell>
-                  <TableCell className="text-muted-foreground text-sm">{period}</TableCell>
+                  <TableCell className="text-muted-foreground text-xs">{period}</TableCell>
                 </TableRow>
               );
             })}

package/src/features/billing/stripe-invoice/components/widgets/InvoiceStatusBadge.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Badge, type BadgeProps } from "../../../../../shadcnui";
 import { InvoiceStatus } from "../../data/stripe-invoice.interface";
 
 type InvoiceStatusBadgeProps = {
@@ -8,34 +9,34 @@ type InvoiceStatusBadgeProps = {
 
 type StatusConfig = {
   label: string;
-  color: string;
+  variant: BadgeProps["variant"];
 };
 
 const statusConfig: Record<InvoiceStatus, StatusConfig> = {
   [InvoiceStatus.DRAFT]: {
     label: "Draft",
-    color: "bg-gray-100 text-gray-800",
+    variant: "softGray",
   },
   [InvoiceStatus.OPEN]: {
     label: "Open",
-    color: "bg-blue-100 text-blue-800",
+    variant: "softBlue",
   },
   [InvoiceStatus.PAID]: {
     label: "Paid",
-    color: "bg-green-100 text-green-800",
+    variant: "softGreen",
   },
   [InvoiceStatus.VOID]: {
     label: "Void",
-    color: "bg-gray-100 text-gray-800",
+    variant: "softGray",
   },
   [InvoiceStatus.UNCOLLECTIBLE]: {
     label: "Uncollectible",
-    color: "bg-red-100 text-red-800",
+    variant: "softRed",
   },
 };
 
 export function InvoiceStatusBadge({ status }: InvoiceStatusBadgeProps) {
   const config = statusConfig[status] || statusConfig[InvoiceStatus.DRAFT];
 
-  return <span className={`${config.color} text-xs px-2 py-1 rounded-full font-medium`}>{config.label}</span>;
+  return <Badge variant={config.variant}>{config.label}</Badge>;
 }

package/src/features/billing/stripe-price/components/lists/PricesList.tsx

@@ -11,6 +11,7 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
+  Badge,
   Button,
 } from "../../../../../shadcnui";
 import { formatCurrency } from "../../../components/utils/currency";
@@ -184,24 +185,16 @@ export function PricesList({ productId, onPricesChange }: PricesListProps) {
 
                 <div className="flex flex-wrap gap-2">
                   {price.active ? (
-                    <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full font-medium">
-                      Active
-                    </span>
+                    <Badge variant="softGreen">Active</Badge>
                   ) : (
-                    <span className="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full font-medium">
-                      Inactive
-                    </span>
+                    <Badge variant="softGray">Inactive</Badge>
                   )}
 
-                  {price.recurring?.usageType === "metered" && (
-                    <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full font-medium">
-                      Metered
-                    </span>
-                  )}
+                  {price.recurring?.usageType === "metered" && <Badge variant="softBlue">Metered</Badge>}
 
-                  <span className="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full font-medium uppercase">
+                  <Badge variant="softGray" className="uppercase">
                     {price.currency}
-                  </span>
+                  </Badge>
                 </div>
               </div>
             );

package/src/features/billing/stripe-product/components/containers/ProductsAdminContainer.tsx

@@ -20,7 +20,7 @@ export function ProductsAdminContainer() {
   if (!hasRole(getRoleId().Administrator)) {
     return (
       <div className="flex h-64 items-center justify-center">
-        <p className="text-red-600 font-semibold">Permission denied. Administrator access required.</p>
+        <p className="text-destructive text-xs/relaxed">Permission denied. Administrator access required.</p>
       </div>
     );
   }
@@ -55,7 +55,7 @@ export function ProductsAdminContainer() {
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-x-3">
           <Package className="h-8 w-8" />
-          <h1 className="text-3xl font-bold">Product & Price Management</h1>
+          <h1 className="text-primary text-3xl font-semibold">Product & Price Management</h1>
         </div>
         <Button onClick={() => setShowCreateProduct(true)}>Create Product</Button>
       </div>
@@ -65,7 +65,7 @@ export function ProductsAdminContainer() {
         <div className="bg-muted/50 flex flex-col items-center justify-center gap-y-4 rounded-lg border-2 border-dashed p-12">
           <Package className="text-muted-foreground h-16 w-16" />
           <div className="text-center">
-            <h3 className="mb-2 text-xl font-semibold">No products yet</h3>
+            <h3 className="mb-2 text-sm font-medium">No products yet</h3>
             <p className="text-muted-foreground mb-4">
               Create your first product to start offering subscriptions to your customers.
             </p>

package/src/features/billing/stripe-product/components/lists/ProductsList.tsx

@@ -11,6 +11,7 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
+  Badge,
   Button,
 } from "../../../../../shadcnui";
 import { PricesList } from "../../../stripe-price/components/lists/PricesList";
@@ -85,15 +86,11 @@ export function ProductsList({ products, onProductsChange }: ProductsListProps)
                 <Package className="h-6 w-6 text-primary" />
                 <div className="flex-1">
                   <div className="flex items-center gap-x-3">
-                    <h3 className="text-lg font-semibold">{product.name}</h3>
+                    <h3 className="text-sm font-medium">{product.name}</h3>
                     {product.active ? (
-                      <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full font-medium">
-                        Active
-                      </span>
+                      <Badge variant="softGreen">Active</Badge>
                     ) : (
-                      <span className="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full font-medium">
-                        Inactive
-                      </span>
+                      <Badge variant="softGray">Inactive</Badge>
                     )}
                   </div>
                   {product.description && <p className="text-muted-foreground text-sm mt-1">{product.description}</p>}

package/src/features/billing/stripe-promotion-code/components/PromoCodeInput.tsx

@@ -68,21 +68,21 @@ export function PromoCodeInput({
       <div className="space-y-2">
         <div className="flex items-center justify-between p-3 bg-green-50 border border-green-200 rounded-lg">
           <div className="flex items-center gap-2">
-            <Check className="h-4 w-4 text-green-600" />
-            <span className="font-medium text-green-800">{appliedCode.code}</span>
-            <span className="text-sm text-green-600">{formatDiscount(appliedCode)}</span>
+            <Check className="text-success h-4 w-4" />
+            <span className="text-success font-medium">{appliedCode.code}</span>
+            <span className="text-success text-sm">{formatDiscount(appliedCode)}</span>
           </div>
           <Button
             variant="ghost"
             size="sm"
             onClick={onRemove}
             disabled={disabled}
-            className="text-green-700 hover:text-green-900 hover:bg-green-100"
+            className="text-success hover:bg-green-100 hover:text-success"
           >
             <X className="h-4 w-4" />
           </Button>
         </div>
-        <p className="text-sm text-green-600">{formatDuration(appliedCode)}</p>
+        <p className="text-success text-sm">{formatDuration(appliedCode)}</p>
       </div>
     );
   }
@@ -102,7 +102,7 @@ export function PromoCodeInput({
           {isValidating ? <Loader2 className="h-4 w-4 animate-spin" /> : "Apply"}
         </Button>
       </div>
-      {error && <p className="text-sm text-red-500">{error}</p>}
+      {error && <p className="text-destructive text-xs/relaxed">{error}</p>}
     </div>
   );
 }

package/src/features/billing/stripe-subscription/components/containers/SubscriptionsContainer.tsx

@@ -55,7 +55,7 @@ export function SubscriptionsContainer({ onOpenWizard, hasActiveRecurringSubscri
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-x-3">
           <CreditCard className="h-8 w-8" />
-          <h1 className="text-3xl font-bold">Subscriptions</h1>
+          <h1 className="text-primary text-3xl font-semibold">Subscriptions</h1>
         </div>
         {subscriptions.length > 0 && (
           <Button onClick={() => onOpenWizard?.()}>
@@ -74,7 +74,7 @@ export function SubscriptionsContainer({ onOpenWizard, hasActiveRecurringSubscri
         <div className="flex flex-col items-center justify-center py-12 space-y-4">
           <CreditCard className="h-16 w-16 text-muted-foreground" />
           <div className="text-center">
-            <h3 className="text-xl font-semibold mb-2">No Active Subscriptions</h3>
+            <h3 className="text-sm font-medium mb-2">No Active Subscriptions</h3>
             <p className="text-muted-foreground mb-6">Choose a subscription plan to get started with our services.</p>
             <Button onClick={() => onOpenWizard?.()}>Subscribe to a Plan</Button>
           </div>

package/src/features/billing/stripe-subscription/components/details/SubscriptionDetails.tsx

@@ -117,7 +117,7 @@ export function SubscriptionDetails({
           <div className="space-y-6">
             {/* Status */}
             <div className="flex items-center gap-x-3">
-              <span className="text-sm font-medium text-muted-foreground">Status:</span>
+              <span className="text-muted-foreground text-xs">Status:</span>
               <SubscriptionStatusBadge
                 status={subscription.status}
                 cancelAtPeriodEnd={subscription.cancelAtPeriodEnd}
@@ -127,20 +127,20 @@ export function SubscriptionDetails({
             {/* Plan Info */}
             <div className="space-y-2">
               <div className="flex justify-between">
-                <span className="text-sm font-medium text-muted-foreground">Plan:</span>
-                <span className="font-medium">{formatPlanName(subscription.price)}</span>
+                <span className="text-muted-foreground text-xs">Plan:</span>
+                <span className="text-sm">{formatPlanName(subscription.price)}</span>
               </div>
               <div className="flex justify-between">
-                <span className="text-sm font-medium text-muted-foreground">Billing Amount:</span>
-                <span className="font-medium">{formatBillingAmount(subscription.price)}</span>
+                <span className="text-muted-foreground text-xs">Billing Amount:</span>
+                <span className="text-sm">{formatBillingAmount(subscription.price)}</span>
               </div>
             </div>
 
             {/* Current Period */}
             <div className="space-y-2">
               <div className="flex justify-between">
-                <span className="text-sm font-medium text-muted-foreground">Current Period:</span>
-                <span className="font-medium">
+                <span className="text-muted-foreground text-xs">Current Period:</span>
+                <span className="text-sm">
                   {formatDate(subscription.currentPeriodStart)} - {formatDate(subscription.currentPeriodEnd)}
                 </span>
               </div>
@@ -149,15 +149,15 @@ export function SubscriptionDetails({
             {/* Trial Info */}
             {subscription.trialEnd && (
               <div className="flex justify-between">
-                <span className="text-sm font-medium text-muted-foreground">Trial Ends:</span>
-                <span className="font-medium">{formatDate(subscription.trialEnd)}</span>
+                <span className="text-muted-foreground text-xs">Trial Ends:</span>
+                <span className="text-sm">{formatDate(subscription.trialEnd)}</span>
               </div>
             )}
 
             {/* Cancellation Warning */}
             {subscription.cancelAtPeriodEnd && (
               <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
-                <p className="text-sm text-yellow-800">
+                <p className="text-warning text-xs/relaxed">
                   This subscription will be canceled at the end of the current period on{" "}
                   {formatDate(subscription.currentPeriodEnd)}.
                 </p>

package/src/features/billing/stripe-subscription/components/widgets/PricingCard.tsx

@@ -67,7 +67,7 @@ export function PricingCard({
       )}
 
       <CardHeader className="pb-2">
-        <h3 className="font-semibold text-lg">{description}</h3>
+        <h3 className="text-sm font-medium">{description}</h3>
       </CardHeader>
 
       <CardContent className="pb-4 grow">
@@ -80,7 +80,7 @@ export function PricingCard({
           <ul className="space-y-2">
             {features.map((feature, index) => (
               <li key={index} className="flex items-start gap-2">
-                <Check className="h-4 w-4 text-green-500 mt-0.5 shrink-0" />
+                <Check className="text-success mt-0.5 h-4 w-4 shrink-0" />
                 <span className="text-sm text-muted-foreground">{feature}</span>
               </li>
             ))}

package/src/features/billing/stripe-subscription/components/widgets/ProductPricingRow.tsx

@@ -2,6 +2,7 @@
 
 import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
 import { StripeProductInterface } from "../../../stripe-product";
+import { SectionHeader } from "../../../../../components/typography";
 import { PricingCard } from "./PricingCard";
 
 export type ProductPricingRowProps = {
@@ -28,7 +29,7 @@ export function ProductPricingRow({
   return (
     <div className="space-y-3">
       {/* Product name header */}
-      <h3 className="font-semibold text-lg">{product.name}</h3>
+      <SectionHeader>{product.name}</SectionHeader>
 
       {/* Price cards in columns */}
       <div

package/src/features/billing/stripe-subscription/components/widgets/ProrationPreview.tsx

@@ -16,7 +16,7 @@ export function ProrationPreview({ preview }: ProrationPreviewProps) {
         {preview.lineItems.map((item, index) => (
           <div key={index} className="flex justify-between text-sm">
             <span className="text-blue-800">{item.description}</span>
-            <span className={`font-medium ${item.amount < 0 ? "text-green-600" : "text-blue-900"}`}>
+            <span className={`font-medium ${item.amount < 0 ? "text-success" : "text-blue-900"}`}>
               {formatCurrency(item.amount, preview.currency)}
             </span>
           </div>

package/src/features/billing/stripe-subscription/components/widgets/SubscriptionStatusBadge.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Badge, type BadgeProps } from "../../../../../shadcnui";
 import { SubscriptionStatus } from "../../data";
 
 type SubscriptionStatusBadgeProps = {
@@ -9,47 +10,47 @@ type SubscriptionStatusBadgeProps = {
 
 type StatusConfig = {
   label: string;
-  color: string;
+  variant: BadgeProps["variant"];
 };
 
 const statusConfig: Record<SubscriptionStatus, StatusConfig> = {
   [SubscriptionStatus.ACTIVE]: {
     label: "Active",
-    color: "bg-green-100 text-green-800",
+    variant: "softGreen",
   },
   [SubscriptionStatus.TRIALING]: {
     label: "Trial",
-    color: "bg-blue-100 text-blue-800",
+    variant: "softBlue",
   },
   [SubscriptionStatus.PAST_DUE]: {
     label: "Past Due",
-    color: "bg-red-100 text-red-800",
+    variant: "softRed",
   },
   [SubscriptionStatus.CANCELED]: {
     label: "Canceled",
-    color: "bg-gray-100 text-gray-800",
+    variant: "softGray",
   },
   [SubscriptionStatus.PAUSED]: {
     label: "Paused",
-    color: "bg-yellow-100 text-yellow-800",
+    variant: "softYellow",
   },
   [SubscriptionStatus.UNPAID]: {
     label: "Unpaid",
-    color: "bg-orange-100 text-orange-800",
+    variant: "softOrange",
   },
   [SubscriptionStatus.INCOMPLETE]: {
     label: "Incomplete",
-    color: "bg-gray-100 text-gray-800",
+    variant: "softGray",
   },
   [SubscriptionStatus.INCOMPLETE_EXPIRED]: {
     label: "Expired",
-    color: "bg-gray-100 text-gray-800",
+    variant: "softGray",
   },
 };
 
 const cancelingConfig: StatusConfig = {
   label: "Canceling",
-  color: "bg-amber-100 text-amber-800",
+  variant: "softAmber",
 };
 
 export function SubscriptionStatusBadge({ status, cancelAtPeriodEnd }: SubscriptionStatusBadgeProps) {
@@ -58,5 +59,5 @@ export function SubscriptionStatusBadge({ status, cancelAtPeriodEnd }: Subscript
     ? cancelingConfig
     : statusConfig[status] || statusConfig[SubscriptionStatus.CANCELED];
 
-  return <span className={`${config.color} text-xs px-2 py-1 rounded-full font-medium`}>{config.label}</span>;
+  return <Badge variant={config.variant}>{config.label}</Badge>;
 }

package/src/features/billing/stripe-subscription/components/wizards/WizardStepPaymentMethod.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { PaymentMethodForm } from "../../../stripe-customer/components/forms/PaymentMethodForm";
+import { SectionHeader } from "../../../../../components/typography";
 
 type WizardStepPaymentMethodProps = {
   onBack: () => void;
@@ -12,7 +13,7 @@ export function WizardStepPaymentMethod({ onBack, onSuccess, isProcessing }: Wiz
   return (
     <div className="space-y-6">
       <div className="text-center">
-        <h3 className="font-semibold text-lg">Add Payment Method</h3>
+        <SectionHeader>Add Payment Method</SectionHeader>
         <p className="text-sm text-muted-foreground">Enter your card details to complete your subscription</p>
       </div>