bastian/ashen-realms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add DangerBadge shared component

Browse Source 
Renders the 5 HuntEncounter danger tiers as German text plus a
per-tier BEM modifier class, mirroring travel-panel's text+class
danger pattern so color is never the sole signal. Colors map across
the existing 3 semantic tokens (success/warning/danger).
This commit is contained in:
Bastian Wagner
2026-08-19 13:26:58 +02:00
parent 49eb110b25
commit 59269a7608
4 changed files with 106 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
apps/web/src/app/shared/danger-badge/danger-badge.component.scss Normal file
View File

@@ -0,0 +1,44 @@
:host {
display: inline-block;
}
.danger-badge {
display: inline-flex;
align-items: center;
padding: var(--ar-space-1) var(--ar-space-2);
border: 1px solid var(--ar-border);
border-radius: var(--ar-radius-sm);
background: var(--ar-panel-muted);
color: var(--ar-text);
font-family: Georgia, 'Times New Roman', serif;
font-size: var(--ar-font-sm);
letter-spacing: 0.02em;
}
.danger-badge--weak {
color: var(--ar-success);
border-color: var(--ar-success);
}
.danger-badge--match {
color: var(--ar-success);
border-color: var(--ar-success);
font-weight: 700;
}
.danger-badge--strong {
color: var(--ar-warning);
border-color: var(--ar-warning);
}
.danger-badge--very-dangerous {
color: var(--ar-danger);
border-color: var(--ar-danger);
}
.danger-badge--deadly {
color: var(--ar-danger);
border-color: var(--ar-danger);
font-weight: 700;
background: color-mix(in srgb, var(--ar-danger) 18%, var(--ar-panel-muted));
}