39b95c2ede
Pure `nix fmt` output from the commit before this one — no hand edits. 203 files: 52 md, 42 tsx, 32 js, 32 css, 21 ts, 13 html, 8 json, 3 mjs. Reproduce with `nix develop -c nix fmt` on the parent commit; the result should be byte-identical to this tree. None of the 13 `.prettierignore` entries appears here — verified by intersecting the changed-file list against the ignore file, with a control proving the intersection finds a match when one exists.
58 lines
2.3 KiB
CSS
58 lines
2.3 KiB
CSS
/* hive-warn.css — shadow-DOM stylesheet for the <hive-warn> autonomous
|
|
custom element (hive-warn.js). `level` is an attribute on the HOST
|
|
(how callers set it, `hive-warn.js`'s own header explains why) —
|
|
`:host([level="…"])` sets `color`/`border-color`/`background`/
|
|
whether it pulses, same pattern as hive-btn.css's `[variant]`.
|
|
|
|
Three levels, not an open-ended severity+modifier combination (mara,
|
|
on review: "there should be distinction between info, warning, error
|
|
— all warnings should be styled identically"). Colours reuse
|
|
theme.css's own documented semantics rather than inventing new
|
|
ones: --cyan is already "info accents", --amber already "warnings",
|
|
--red already "errors, fail state" (see theme.css's :root comments).
|
|
Pulse is baked into `error` specifically, not a separate opt-in
|
|
knob — the one call site that wants attention-grabbing (an active
|
|
incident) is also the one call site that's semantically `error`, so
|
|
tying the two together removes a combination that shouldn't exist
|
|
independently of the tier. */
|
|
|
|
:host {
|
|
display: block;
|
|
border: 1px solid var(--amber);
|
|
border-radius: 4px;
|
|
padding: 0.5em 0.8em;
|
|
margin-bottom: 0.6em;
|
|
color: var(--amber);
|
|
background: color-mix(in srgb, var(--amber) 8%, transparent);
|
|
}
|
|
:host([level="info"]) {
|
|
border-color: var(--cyan);
|
|
color: var(--cyan);
|
|
background: color-mix(in srgb, var(--cyan) 8%, transparent);
|
|
}
|
|
:host([level="error"]) {
|
|
border-color: var(--red);
|
|
color: var(--red);
|
|
background: color-mix(in srgb, var(--red) 8%, transparent);
|
|
/* Only `error` pulses — an active incident, not a standing caveat.
|
|
A banner that's always present and always pulsing just trains you
|
|
to stop seeing it, so `info`/`warning` deliberately stay still.
|
|
`currentColor` so the glow matches without a second colour switch. */
|
|
text-shadow: 0 0 6px color-mix(in srgb, currentColor 40%, transparent);
|
|
animation: hive-warn-pulse 2.4s ease-in-out infinite;
|
|
}
|
|
@keyframes hive-warn-pulse {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 12px -4px color-mix(in srgb, currentColor 55%, transparent);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 22px -2px color-mix(in srgb, currentColor 95%, transparent);
|
|
}
|
|
}
|
|
|
|
/* Explicit rather than relying on plain inheritance — matches what
|
|
every one of the three original rules declared, kept for parity. */
|
|
::slotted(strong) {
|
|
color: inherit;
|
|
}
|