Updated: 2026-07-14 11:17 ET
Audited: 2026-07-14 11:17 ET
Kind enum maps to a fixed background/text colour pair.Kind enum that resolves to a colour —
this replaces the scaffold's abuse of --kcm / --cass as generic colour aliases
(see the scaffold's alpa-policy-badge--active/monitor/info/virtual "colour alias" comment). A badge's colour is chosen by its
meaning, never by hand-picking another domain's badge class.
alpa-policy-badge*) consumers only —
the dark-surface alpa-fdetail-badge* usage (JumpseatDetailsPage.razor, 2 badges) is
intentionally NOT merged in. Real-code check found Kind=Kcm resolves to a different
colour in each context: light-surface Kcm is a green tint (#e8f5e9/#2a8a4c),
but the dark-surface "KCM Eligible" badge is solid blue (var(--alpa-blue)/white) — the same Kind
value, two different meanings, which breaks this component's own "colour is determined by Kind" principle if
forced together. This draft's original Size parameter (Sm/Md) assumed they could compose cleanly;
they can't without either a colour override escape hatch (defeats the purpose) or splitting Kcm into two
values. Left as a flagged finding for design confirmation, not resolved unilaterally — see
D52. Size is not implemented in this pass.
The Kind enum is the single source of truth for badge colour. Each value pins a background + text pair.
| Kind | Fill style | Background | Text | Meaning / usage |
|---|---|---|---|---|
Kcm | tint | #e8f5e9 | #2a8a4c green | KCM-eligible flight / Known Crewmember |
Cass | tint | #dfedf9 | #007bc2 blue | CASS program eligibility |
Active | solid | #16a34a | white | Active / enabled / confirmed status |
Monitor | solid | #007bc2 | white | Under monitoring / advisory |
Virtual | solid | #7c3aed | white | Virtual / online-only |
Info | solid | #007bc2 | white | General informational tag |
Note: Kcm and Active are both green but distinct — Kcm is a soft tint pill (eligibility marker on a light surface), Active is a solid fill (state). Monitor and Info share blue solid today; they remain separate enum values so they can diverge without a data migration.
Tier: atom. Implemented in both namespace copies per the current dual-write convention.
Size is not implemented — see the D52 callout above.
--mt modifier)
Actual home: ALPAMobile.Presentation/Components/Library/StatusBadge.razor (migrated 2026-07-15, WI-2254/D61).
| Parameter | Type | Required | Description |
|---|---|---|---|
Vm | StatusBadgeViewModel | Yes | Label/Kind/MarginTop state. |
@* Composed inside other controls — never colour-by-class *@
<StatusBadge Vm="@(new StatusBadgeViewModel { Label = "PILOTS", Kind = StatusBadgeKind.Kcm })" />
<StatusBadge Vm="@(new StatusBadgeViewModel { Label = "VIRTUAL", Kind = StatusBadgeKind.Virtual, MarginTop = true })" />Classes live in ALPAMobile/wwwroot/css/alpa-components.css under the alpa-status-badge block
(renamed from alpa-policy-badge*). alpa-fdetail-badge* is untouched — see the D52 callout.
| Class | Scope | Key rules |
|---|---|---|
.alpa-status-badge | Base | display:inline-block; font-family:var(--alpa-eyebrow); border-radius:3px |
.alpa-status-badge--sm | Size (only size built) | font-size:10px; font-weight:700; letter-spacing:0.5px; padding:2px 6px; text-transform:uppercase |
.alpa-status-badge--kcm | Kind | background:#e8f5e9; color:#2a8a4c |
.alpa-status-badge--cass | Kind | background:#dfedf9; color:#007bc2 |
.alpa-status-badge--active | Kind | background:#16a34a; color:#fff |
.alpa-status-badge--monitor | Kind | background:#007bc2; color:#fff |
.alpa-status-badge--virtual | Kind | background:#7c3aed; color:#fff |
.alpa-status-badge--info | Kind | background:#007bc2; color:#fff |
.alpa-status-badge--mt | Spacing modifier | margin-top:4px |
| Screen | Label | Kind | MarginTop |
|---|---|---|---|
| Airline Policies (2 usages) | ALPA / CASS | Kcm / Cass | No |
| Advocacy | ACTIVE / MONITOR (conditional) | Active / Monitor | No |
| MEC Events | VIRTUAL | Virtual | Yes |
| MEC Hotels | CONTRACT HOTEL | Active | Yes |
| KCM Airlines (2 usages) | PILOTS / FLIGHT ATTENDANTS | Kcm / Cass | No |
| KCM Policies Search (2 usages) | PILOTS / FLIGHT ATTENDANTS | Kcm / Cass | No |
Info is defined in the CSS/enum but has no real consumer yet — kept for forward use per the original spec's reasoning (Monitor/Info may diverge later without a data migration).
Kind whose meaning matches; never reuse Kcm/Cass just because the colour looks right. This is the exact drift D40 forbids.JumpseatDetailsPage.razor still uses the original alpa-fdetail-badge* classes directly.ComponentView.razor's dispatcher for consistency with every other atom, even though all 6 real consumers instantiate StatusBadgeViewModel directly.