From 64eafeea46699aa574387787044d34504dc29698 Mon Sep 17 00:00:00 2001
From: lizerk <lizerk-dev@gmail.com>
Date: Mon, 13 Apr 2026 23:41:16 +0300
Subject: [PATCH] refactor(frontend): normalize danger action shells

---
 docs/guides/frontend/02-FOUNDATION.md          | 4 +++-
 docs/guides/frontend/08-UI-REVIEW-CHECKLIST.md | 1 +
 frontend/src/app/globals.css                   | 5 +++--
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/docs/guides/frontend/02-FOUNDATION.md b/docs/guides/frontend/02-FOUNDATION.md
index c8ccfb64..7d3f9f37 100644
--- a/docs/guides/frontend/02-FOUNDATION.md
+++ b/docs/guides/frontend/02-FOUNDATION.md
@@ -128,7 +128,9 @@ Foundation layer уже существует и задаётся в этих ф
 
 Правило:
 
-- destructive state должен быть семантическим, а не декоративно тяжёлым
+- danger action использует ту же базовую оболочку, что и `app-action-secondary`
+- destructive state отличать тоном, текстом и hover-состоянием, а не исчезающим контейнером
+- icon-only danger action не должен выглядеть "голой" иконкой рядом с secondary control
 
 ## Badge, menu, feedback, selected
 
diff --git a/docs/guides/frontend/08-UI-REVIEW-CHECKLIST.md b/docs/guides/frontend/08-UI-REVIEW-CHECKLIST.md
index c27c38bc..5d823c1a 100644
--- a/docs/guides/frontend/08-UI-REVIEW-CHECKLIST.md
+++ b/docs/guides/frontend/08-UI-REVIEW-CHECKLIST.md
@@ -33,6 +33,7 @@
 - Есть ли один очевидный primary action?
 - Не спорят ли secondary и danger actions по визуальному весу с primary?
 - Семантика destructive actions понятна?
+- В парных action-clusters `danger` не выглядит ли недорисованным по сравнению с `secondary`?
 
 ## 6. Responsive
 
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index e4b20b85..35656186 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -394,13 +394,14 @@ html[data-bs-theme="dark"] .app-input::-webkit-calendar-picker-indicator {
 }
 
 .app-action-danger {
-  border: 1px solid transparent;
-  background: transparent;
+  border: 1px solid color-mix(in srgb, var(--danger-foreground) 18%, var(--border-strong));
+  background: var(--surface-elevated);
   color: #dc2626;
 }
 
 .app-action-danger:hover {
   background: var(--danger-soft);
+  border-color: color-mix(in srgb, var(--danger-foreground) 24%, var(--border-strong));
 }
 
 .app-selected {