From 83c78c58b84dce4b7e69f05d42ab0ae2278a087f Mon Sep 17 00:00:00 2001
From: Danil Khaliulin <danielooneilie@gmail.com>
Date: Mon, 24 Aug 2026 21:26:40 +0800
Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=B5=D1=81?=
 =?UTF-8?q?=D1=82=D0=B8=20badge=20=D0=BD=D0=B0=20=D0=BD=D0=BE=D0=B2=D1=8B?=
 =?UTF-8?q?=D0=B5=20=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B:=20=D0=B0=D0=BA?=
 =?UTF-8?q?=D1=86=D0=B5=D0=BD=D1=82=D0=BD=D1=8B=D0=B9=20=D1=88=D1=80=D0=B8?=
 =?UTF-8?q?=D1=84=D1=82=20=D0=B8=20dot-=D0=B2=D0=B0=D1=80=D0=B8=D0=B0?=
 =?UTF-8?q?=D0=BD=D1=82=D1=8B=20=D0=B1=D0=B5=D0=B7=20=D1=81=D0=B8=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=BD=D0=B8=D0=BC=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../prime-preset/tokens/components/badge.ts   | 53 ++++++++++++-------
 .../badge/examples/badge-dot.component.ts     |  2 +-
 .../examples/badge-severity.component.ts      |  2 +-
 .../badge/examples/badge-sizes.component.ts   |  2 +-
 4 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/lib/providers/prime-preset/tokens/components/badge.ts b/src/lib/providers/prime-preset/tokens/components/badge.ts
index 9aff43a4..247f96c5 100644
--- a/src/lib/providers/prime-preset/tokens/components/badge.ts
+++ b/src/lib/providers/prime-preset/tokens/components/badge.ts
@@ -1,25 +1,38 @@
 export const badgeCss = ({ dt }: { dt: (token: string) => string }): string => `
-  /* ─── Badge extend: публикуем кастомные переменные в :root ─── */
-  :root {
-    --p-badge-extend-dot-success-background: ${dt('badge.extend.extDot.success.background')};
-    --p-badge-extend-dot-info-background:    ${dt('badge.extend.extDot.info.background')};
-    --p-badge-extend-dot-warn-background:    ${dt('badge.extend.extDot.warn.background')};
-    --p-badge-extend-dot-danger-background:  ${dt('badge.extend.extDot.danger.background')};
-    --p-badge-extend-dot-lg-size:            ${dt('badge.extend.extDot.lg.size')};
-    --p-badge-extend-dot-xlg-size:           ${dt('badge.extend.extDot.xlg.size')};
-    --p-badge-extend-padding:                ${dt('badge.extend.ext.padding')};
-  }
+.p-badge.p-component {
+  font-family: ${dt('fonts.fontFamily.heading')};
+  line-height: ${dt('fonts.lineHeight.350')};
+}
 
-  /* ─── Dot-вариант: бейдж без значения ─── */
-  .p-badge.p-badge-dot {
-    padding: var(--p-badge-extend-padding);
-  }
+.p-badge.p-badge-dot {
+  padding: ${dt('badge.extend.ext.padding')};
+}
 
-  .p-badge.p-badge-dot.p-badge-success { background: var(--p-badge-extend-dot-success-background); }
-  .p-badge.p-badge-dot.p-badge-info    { background: var(--p-badge-extend-dot-info-background); }
-  .p-badge.p-badge-dot.p-badge-warn    { background: var(--p-badge-extend-dot-warn-background); }
-  .p-badge.p-badge-dot.p-badge-danger  { background: var(--p-badge-extend-dot-danger-background); }
+.p-badge.p-badge-dot.p-badge-success {
+  background: ${dt('badge.extend.extDot.success.background')};
+}
 
-  .p-badge.p-badge-dot.p-badge-lg  { min-width: unset; width: var(--p-badge-extend-dot-lg-size);  height: var(--p-badge-extend-dot-lg-size); }
-  .p-badge.p-badge-dot.p-badge-xl  { min-width: unset; width: var(--p-badge-extend-dot-xlg-size); height: var(--p-badge-extend-dot-xlg-size); }
+.p-badge.p-badge-dot.p-badge-info {
+  background: ${dt('badge.extend.extDot.info.background')};
+}
+
+.p-badge.p-badge-dot.p-badge-warn {
+  background: ${dt('badge.extend.extDot.warn.background')};
+}
+
+.p-badge.p-badge-dot.p-badge-danger {
+  background: ${dt('badge.extend.extDot.danger.background')};
+}
+
+.p-badge.p-badge-dot.p-badge-lg {
+  min-width: unset;
+  width: ${dt('badge.extend.extDot.lg.size')};
+  height: ${dt('badge.extend.extDot.lg.size')};
+}
+
+.p-badge.p-badge-dot.p-badge-xl {
+  min-width: unset;
+  width: ${dt('badge.extend.extDot.xlg.size')};
+  height: ${dt('badge.extend.extDot.xlg.size')};
+}
 `;
diff --git a/src/stories/components/badge/examples/badge-dot.component.ts b/src/stories/components/badge/examples/badge-dot.component.ts
index bd9f80fd..f5c03604 100644
--- a/src/stories/components/badge/examples/badge-dot.component.ts
+++ b/src/stories/components/badge/examples/badge-dot.component.ts
@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/angular';
 import { ExtraBadgeSeverity, ExtraBadgeSize, ExtraBadgeComponent } from '../../../../lib/components/badge/badge.component';
 
 const template = `
-<div class="bg-surface-ground p-4">
+<div class="p-4">
   <extra-badge [severity]="severity" [size]="size"></extra-badge>
 </div>
 `;
diff --git a/src/stories/components/badge/examples/badge-severity.component.ts b/src/stories/components/badge/examples/badge-severity.component.ts
index 056a8880..309a2e8c 100644
--- a/src/stories/components/badge/examples/badge-severity.component.ts
+++ b/src/stories/components/badge/examples/badge-severity.component.ts
@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/angular';
 import { ExtraBadgeSeverity, ExtraBadgeSize, ExtraBadgeComponent } from '../../../../lib/components/badge/badge.component';
 
 const template = `
-<div class="bg-surface-ground p-4">
+<div class="p-4">
   <extra-badge [value]="value" [severity]="severity" [size]="size"></extra-badge>
 </div>
 `;
diff --git a/src/stories/components/badge/examples/badge-sizes.component.ts b/src/stories/components/badge/examples/badge-sizes.component.ts
index 3561abbf..34195d2e 100644
--- a/src/stories/components/badge/examples/badge-sizes.component.ts
+++ b/src/stories/components/badge/examples/badge-sizes.component.ts
@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/angular';
 import { ExtraBadgeSize, ExtraBadgeComponent } from '../../../../lib/components/badge/badge.component';
 
 const template = `
-<div class="bg-surface-ground p-4">
+<div class="p-4">
   <extra-badge [value]="value" [size]="size"></extra-badge>
 </div>
 `;