@layer components {
/* ── ds-alert — MUI Alert ──
* Inline message banner. Visual: tinted background + colored leading icon
* + dark colored text, all in one semantic hue. Reference: MUI Alert
* "standard" variant (Image #127) — that's now the DEFAULT here.
*
* Variants:
* .ds-alert--success | --info | --warning | --error (severity)
* .ds-alert (no variant modifier) → standard tint (MUI default)
* .ds-alert--filled → opt-in solid bg + white text
* .ds-alert--outlined → opt-in white bg + colored border/text
* .ds-alert--standard → alias of default (back-compat)
*
* Auto-icon: a leading icon is painted via ::before per severity (Feather-
* style outline, colored by --alert-icon). If a caller provides a manual
* .ds-alert__icon child, the auto-icon is suppressed via :has().
*
* Typography:
* title → 14px / medium 500 (per [[feedback-unbold-text]] — no bold)
* description → 14px / regular 400
*
* Palette: MUI Alert exact tokens — scoped to the component via
* CSS custom properties (--alert-bg / --alert-text / --alert-icon) so the
* site-wide tokens (which use a different Aegis palette) are not disturbed. */
.ds-alert {
/* Per-severity overrides below set these three. Defaults give a
* neutral grey alert when no severity is set. */
--alert-bg: rgba(0, 0, 0, 0.06);
--alert-text: rgba(0, 0, 0, 0.87);
--alert-icon: rgba(0, 0, 0, 0.54);
display: flex;
align-items: flex-start;
gap: 12px;
padding: 6px 16px;
font-family: var(--font-family-sans);
font-size: var(--font-size-sm); /* 14px MUI body2 */
font-weight: var(--font-weight-regular);
letter-spacing: 0.15px;
line-height: 1.5; /* MUI Alert line-height */
border-radius: 4px;
border: 1px solid transparent;
background: var(--alert-bg);
color: var(--alert-text);
position: relative;
}
/* ── Auto-icon (::before) — one mask SVG per severity ──
* Only emitted when the caller hasn't placed a manual .ds-alert__icon
* inside the alert. Mask-image lets us reuse one SVG per severity and
* tint it from `--alert-icon` via background-color. */
.ds-alert:not(:has(.ds-alert__icon))::before {
content: "";
flex-shrink: 0;
width: 22px;
height: 22px;
margin-top: 7px; /* aligns with first line of body text at 14px / 1.5 */
background-color: var(--alert-icon);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* ── Manual icon slot (overrides the auto-icon — :has() above hides ::before) ── */
.ds-alert__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
margin-top: 7px;
color: var(--alert-icon);
}
.ds-alert__icon svg { width: 22px; height: 22px; }
.ds-alert__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 0; /* MUI Alert vertical breathing room */
}
.ds-alert__title {
margin: 0;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium); /* MUI alert title is 500, not bold */
line-height: 1.5;
color: var(--alert-text);
}
.ds-alert__description {
margin: 0;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-regular);
line-height: 1.5;
color: var(--alert-text);
}
.ds-alert__action {
margin-left: 8px;
flex-shrink: 0;
align-self: center;
}
.ds-alert__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin: 4px -8px 4px 8px;
border: none;
background: transparent;
color: var(--alert-icon);
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
font-size: 18px;
line-height: 1;
transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
align-self: center;
box-shadow: none;
}
.ds-alert__close:hover { background: rgba(0, 0, 0, 0.08); }
.ds-alert--filled .ds-alert__close { color: #fff; }
.ds-alert--filled .ds-alert__close:hover { background: rgba(255, 255, 255, 0.18); }
/* ────────────────────────────────────────────────────────────────────
* DEFAULT (standard) — light tint bg + dark text + colored icon
* Palette pinned to MUI Alert tokens (image #127).
* ──────────────────────────────────────────────────────────────────── */
.ds-alert--success,
.ds-alert--standard.ds-alert--success {
--alert-bg: #edf7ed;
--alert-text: #1e4620;
--alert-icon: #2e7d32; /* MUI success.main */
}
.ds-alert--info,
.ds-alert--standard.ds-alert--info {
--alert-bg: #e5f6fd;
--alert-text: #014361;
--alert-icon: #0288d1; /* MUI info.main */
}
.ds-alert--warning,
.ds-alert--standard.ds-alert--warning {
--alert-bg: #fff4e5;
--alert-text: #663c00;
--alert-icon: #ed6c02; /* MUI warning.main */
}
.ds-alert--error,
.ds-alert--standard.ds-alert--error {
--alert-bg: #fdeded;
--alert-text: #5f2120;
--alert-icon: #d32f2f; /* MUI error.main */
}
/* ── Auto-icon masks per severity — Feather-style outlines that match
* the reference (Image #127). Inline single-quoted SVG = no URL encoding
* needed. Mask reads the SVG's alpha (stroke), background-color tints it. */
.ds-alert--success:not(:has(.ds-alert__icon))::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ds-alert--info:not(:has(.ds-alert__icon))::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ds-alert--warning:not(:has(.ds-alert__icon))::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.ds-alert--error:not(:has(.ds-alert__icon))::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* ────────────────────────────────────────────────────────────────────
* FILLED variant — solid bg + white text/icons. Use only for
* highest-priority blocking interrupts (rare).
* ──────────────────────────────────────────────────────────────────── */
.ds-alert--filled.ds-alert--success { --alert-bg: #2e7d32; --alert-text: #fff; --alert-icon: #fff; }
.ds-alert--filled.ds-alert--info { --alert-bg: #0288d1; --alert-text: #fff; --alert-icon: #fff; }
.ds-alert--filled.ds-alert--warning { --alert-bg: #ed6c02; --alert-text: #fff; --alert-icon: #fff; }
.ds-alert--filled.ds-alert--error { --alert-bg: #d32f2f; --alert-text: #fff; --alert-icon: #fff; }
/* ────────────────────────────────────────────────────────────────────
* OUTLINED variant — white bg + 1px colored border + colored text/icon.
* ──────────────────────────────────────────────────────────────────── */
.ds-alert--outlined { --alert-bg: #fff; border-color: currentColor; }
.ds-alert--outlined.ds-alert--success { --alert-text: #1e4620; --alert-icon: #2e7d32; border-color: #2e7d32; }
.ds-alert--outlined.ds-alert--info { --alert-text: #014361; --alert-icon: #0288d1; border-color: #0288d1; }
.ds-alert--outlined.ds-alert--warning { --alert-text: #663c00; --alert-icon: #ed6c02; border-color: #ed6c02; }
.ds-alert--outlined.ds-alert--error { --alert-text: #5f2120; --alert-icon: #d32f2f; border-color: #d32f2f; }
} /* end @layer components */