From 5cbc9e48734f281492c5568ee01b0aee2762dba9 Mon Sep 17 00:00:00 2001
From: sdarbinyan <sdarbinyan@4pay.ru>
Date: Wed, 15 Jul 2026 03:33:09 +0400
Subject: [PATCH] feat(design-system): add reusable Badge primitive

Standalone, OnPush. Variants neutral/primary/success/warning/danger/info.
Colors consumed via existing tenant CSS vars with fallbacks.
---
 src/app/shared/ui/badge/badge.component.html |  1 +
 src/app/shared/ui/badge/badge.component.scss | 41 ++++++++++++++++++++
 src/app/shared/ui/badge/badge.component.ts   | 22 +++++++++++
 3 files changed, 64 insertions(+)
 create mode 100644 src/app/shared/ui/badge/badge.component.html
 create mode 100644 src/app/shared/ui/badge/badge.component.scss
 create mode 100644 src/app/shared/ui/badge/badge.component.ts

diff --git a/src/app/shared/ui/badge/badge.component.html b/src/app/shared/ui/badge/badge.component.html
new file mode 100644
index 0000000..40b3726
--- /dev/null
+++ b/src/app/shared/ui/badge/badge.component.html
@@ -0,0 +1 @@
+<ng-content />
diff --git a/src/app/shared/ui/badge/badge.component.scss b/src/app/shared/ui/badge/badge.component.scss
new file mode 100644
index 0000000..b1617d7
--- /dev/null
+++ b/src/app/shared/ui/badge/badge.component.scss
@@ -0,0 +1,41 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs, 0.25rem);
+  padding: 0.125rem var(--space-sm, 0.5rem);
+  border-radius: var(--radius-sm, 4px);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+:host.app-badge--neutral {
+  background: var(--bg-secondary, #f4f4f5);
+  color: var(--text-secondary, #6b7280);
+}
+
+:host.app-badge--primary {
+  background: color-mix(in srgb, var(--primary-color, #2f6e5d) 15%, transparent);
+  color: var(--primary-color, #2f6e5d);
+}
+
+:host.app-badge--success {
+  background: color-mix(in srgb, var(--success-color, #2e7d32) 15%, transparent);
+  color: var(--success-color, #2e7d32);
+}
+
+:host.app-badge--warning {
+  background: color-mix(in srgb, var(--warning-color, #b26a00) 15%, transparent);
+  color: var(--warning-color, #b26a00);
+}
+
+:host.app-badge--danger {
+  background: color-mix(in srgb, var(--error-color, #c0392b) 15%, transparent);
+  color: var(--error-color, #c0392b);
+}
+
+:host.app-badge--info {
+  background: color-mix(in srgb, var(--info-color, #1d6fa5) 15%, transparent);
+  color: var(--info-color, #1d6fa5);
+}
diff --git a/src/app/shared/ui/badge/badge.component.ts b/src/app/shared/ui/badge/badge.component.ts
new file mode 100644
index 0000000..7d473a6
--- /dev/null
+++ b/src/app/shared/ui/badge/badge.component.ts
@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+export type BadgeVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+
+@Component({
+  selector: 'app-badge',
+  standalone: true,
+  templateUrl: './badge.component.html',
+  styleUrl: './badge.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class.app-badge--neutral]': "variant() === 'neutral'",
+    '[class.app-badge--primary]': "variant() === 'primary'",
+    '[class.app-badge--success]': "variant() === 'success'",
+    '[class.app-badge--warning]': "variant() === 'warning'",
+    '[class.app-badge--danger]': "variant() === 'danger'",
+    '[class.app-badge--info]': "variant() === 'info'"
+  }
+})
+export class BadgeComponent {
+  readonly variant = input<BadgeVariant>('neutral');
+}