/* ============================================================ Alert / Inline Banner — LSH-ds (Heilsugátt DS) ============================================================ Persistent, in-flow status banner: neutral (base) / success / warning / error. Distinct from Toast (transient, floating). Spec: docs/specs/2026-07-07-alert-design.md (Figma 3923:7584) - Base .alert = neutral. State modifiers set the surface and the element-scoped --alert-accent hook (icon colour). - Actions compose the Button component untouched (btn-sm in lg, btn-xs in .alert-md). - Dark mode: neutral surface + text ride the semantic tokens; the three status surfaces are deliberately one step louder than the --bg-*-primary flips (*-900 tier, not *-950 — spec decision D1), so they are overridden explicitly below. Overrides are keyed to [data-theme="dark"] only: main.js always stamps the attribute on , and attribute-keyed descendant selectors compose with the CodePen theme wrapper. - Zero new :root tokens. --alert-accent is element-scoped. ============================================================ */ .alert { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-4); /* 16px icon -> text */ min-height: 56px; padding: var(--spacing-3) var(--spacing-10); /* 12px 40px */ background-color: var(--bg-secondary); --alert-accent: var(--brand-600); --alert-title-color: var(--text-primary); --alert-link-color: var(--text-secondary); } /* Icon — bare 20px glyph. The Figma anatomy's concentric rings never render in banner instances and are not shipped (D6). */ .alert-icon { flex-shrink: 0; font-size: 20px; line-height: 1; color: var(--alert-accent); } /* Content — title + description flow inline and wrap naturally */ .alert-content { flex: 1 1 20ch; margin: 0; font-size: var(--font-size-sm); /* 14px */ line-height: 1.25rem; /* 20px */ } .alert-title { font-weight: 600; color: var(--text-primary); margin-right: var(--spacing-1); /* 4px title -> description */ } .alert-text { font-weight: 400; color: var(--text-secondary); } /* Actions — composed DS buttons; right-aligned. Drops to its own right-aligned line when the banner is too narrow (flex-wrap). */ .alert-actions { display: flex; align-items: center; gap: var(--spacing-2); /* 8px between buttons */ margin-left: auto; padding-left: var(--spacing-2); /* root gap 16 + 8 = 24px min to content */ } /* ── States ──────────────────────────────────────────────── */ .alert-success { background-color: var(--bg-success-primary); /* success-50 light */ --alert-accent: var(--success-700); --alert-title-color: var(--success-800); /* D2: normalized from Figma's 900-tier drift */ --alert-link-color: var(--success-900); } .alert-warning { background-color: var(--bg-warning-primary); /* warning-50 light */ --alert-accent: var(--warning-700); --alert-title-color: var(--warning-800); --alert-link-color: var(--warning-900); } .alert-error { background-color: var(--bg-error-primary); /* error-25 light */ --alert-accent: var(--error-700); --alert-title-color: var(--error-800); --alert-link-color: var(--error-900); } /* ── Size: md ────────────────────────────────────────────── */ .alert-md { min-height: 48px; padding: var(--spacing-3) var(--spacing-8); /* 12px 32px */ } /* ── Dismissed (set by js/alert.js) ──────────────────────── */ .alert[hidden] { display: none; } /* ── Compact link variant (LSH-127) ──────────────────────── */ /* Single-line row: optional icon · state-tinted title · optional trailing count Badge + link. Same state surfaces + accents as the banner. Titles ride the state 800 tier, links + severity words the 900 tier, via the element-scoped hooks defined in the state blocks above (banner elements never read them). Compact rows have no .alert-content wrapper, so text elements carry their own font metrics. No close button, no JS. Spec: docs/specs/2026-07-12-alert-compact-design.md */ .alert-compact { padding: var(--spacing-3) var(--spacing-6); /* 12px 24px */ gap: var(--spacing-5); /* 20px icon -> title */ } .alert-compact .alert-title { font-size: var(--font-size-sm); /* no .alert-content to inherit from */ line-height: 1.25rem; color: var(--alert-title-color); margin-right: 0; /* the root gap owns spacing */ } /* NEWS-pattern category label stays neutral on tinted rows. (0,3,0 — beats the tinted title rule by specificity, not order) */ .alert-compact .alert-title.alert-title-neutral { color: var(--text-primary); } /* Trailing cluster: count badge + link, pushed right */ .alert-compact-end { display: inline-flex; align-items: center; gap: var(--spacing-2); /* 8px badge -> link */ margin-left: auto; } /* Emphasized severity word (NEWS vocabulary) — link tint, not a link */ .alert-severity { font-size: var(--font-size-sm); line-height: 1.25rem; color: var(--alert-link-color); } .alert-link { font-size: var(--font-size-sm); line-height: 1.25rem; color: var(--alert-link-color); text-decoration: none; } .alert-link:hover { text-decoration: underline; } .alert-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--brand-500); border-radius: 2px; } /* ── Dark mode (spec §5 + D1) ────────────────────────────── */ /* Status surfaces at the *-900 tier; accents lift to *-200 / brand-500. Neutral bg (--bg-secondary) and both text tokens flip on their own. The dark-state rules must stay AFTER the dark-neutral rule: same specificity (0,2,0), source order decides the accent. */ [data-theme="dark"] .alert { --alert-accent: var(--brand-500); } [data-theme="dark"] .alert-success { background-color: var(--success-900); --alert-accent: var(--success-200); --alert-title-color: var(--success-200); --alert-link-color: var(--success-300); } [data-theme="dark"] .alert-warning { background-color: var(--warning-900); --alert-accent: var(--warning-200); --alert-title-color: var(--warning-200); --alert-link-color: var(--warning-300); } [data-theme="dark"] .alert-error { background-color: var(--error-900); --alert-accent: var(--error-200); --alert-title-color: var(--error-200); --alert-link-color: var(--error-300); }