frontend: hive-warn — replace severity+pulse with info/warning/error levels
mara, PR review: "i dont like that they still have different styling.
if anything, there should be distinction between info,warning,error
(semantics). all warnings should be styled identically."
Replaces the severity ('amber'|'red') + standalone pulse boolean with
a single level ('info'|'warning'|'error') attribute -- a fixed
three-tier ladder instead of an open combination. Colours reuse
theme.css's own already-documented semantics rather than inventing new
ones: --cyan is already "info accents", --amber already "warnings",
--red already "errors, fail state". Pulse is now baked into `error`
specifically rather than a separate opt-in knob, since the one call
site that wanted attention-grabbing (an active incident) is also the
one that's semantically error -- tying the two together removes a
combination that shouldn't exist independently of the tier.
Reclassified the three call sites explicitly (no implicit default
relied on): credentials.html's GitHub PAT advisory and core.js's K3PT
ST4T3 caveat are both `level="warning"` (same as before, and now
identical to each other by construction, not by coincidence);
swarm.js's port-collision banner is `level="error"` (an active
incident needing operator action now, not a standing caveat).
npm run build clean both packages, grepped for leftover
severity/pulse references (only prose mentions describing what this
replaces).
This commit is contained in:
parent
dfd92a7da9
commit
2ff4cddf9d
5 changed files with 39 additions and 31 deletions
|
|
@ -50,7 +50,7 @@ function renderTombstones(s) {
|
|||
// Wording is deliberately about what the list *is* rather than what it
|
||||
// isn't: nothing records a destroy, so "container absent" is the only thing
|
||||
// the backend can actually tell.
|
||||
const warn = el('hive-warn', {});
|
||||
const warn = el('hive-warn', { level: 'warning' });
|
||||
warn.append(
|
||||
el('strong', {}, 'shows every agent whose container is absent'),
|
||||
' — not only destroyed ones. An agent part-way through being spawned ' +
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@
|
|||
Security-warning banner + a link to generate a PAT. -->
|
||||
<section class="cred-pane" id="cred-pane-github" data-tab-pane="github"
|
||||
role="tabpanel" aria-labelledby="cred-tab-github" hidden>
|
||||
<hive-warn>
|
||||
<hive-warn level="warning">
|
||||
⚠ use a <strong>dedicated bot account</strong>, not a human's —
|
||||
and a <strong>minimally-scoped</strong> personal access token (only
|
||||
the repos/scopes the agent actually needs, e.g. <code>repo</code> +
|
||||
|
|
|
|||
|
|
@ -582,7 +582,7 @@ export function renderContainers(s) {
|
|||
// rebuild. The banner sits above the agent list so it's the
|
||||
// first thing the operator sees when something's wedged.
|
||||
if (portConflicts.length) {
|
||||
const banner = el('hive-warn', { severity: 'red', pulse: '' },
|
||||
const banner = el('hive-warn', { level: 'error' },
|
||||
el('strong', {}, '⚠ port collision'), ' — ');
|
||||
const groups = portConflicts.map((c) =>
|
||||
`:${c.port} (${c.agents.join(' + ')})`).join('; ');
|
||||
|
|
|
|||
|
|
@ -1,15 +1,20 @@
|
|||
/* hive-warn.css — shadow-DOM stylesheet for the <hive-warn> autonomous
|
||||
custom element (hive-warn.js). `severity` is an attribute on the HOST
|
||||
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([severity="…"])` sets `color`/`border-color`/`background`,
|
||||
which the shadow content then inherits/reads via `currentColor`, same
|
||||
pattern as hive-btn.css's `[variant]`. Default (no `severity` set) is
|
||||
amber — the more common case among the three call sites this replaces.
|
||||
`:host([level="…"])` sets `color`/`border-color`/`background`/
|
||||
whether it pulses, same pattern as hive-btn.css's `[variant]`.
|
||||
|
||||
Tint is a single canonical 8% for both severities — `.cred-warning`
|
||||
(the amber call site) was independently written at 10%, `.tombstone-warn`
|
||||
at 8%; picking one number is the whole point of this component
|
||||
existing (mara, on review: "so they are all themed consistently"). */
|
||||
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;
|
||||
|
|
@ -20,20 +25,19 @@
|
|||
color: var(--amber);
|
||||
background: color-mix(in srgb, var(--amber) 8%, transparent);
|
||||
}
|
||||
:host([severity="red"]) {
|
||||
: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);
|
||||
}
|
||||
|
||||
/* `pulse`: opt-in, for "something is wrong right now" rather than a
|
||||
standing caveat — deliberately not the default. A banner that's
|
||||
always present and always pulsing just trains you to stop seeing it
|
||||
(the reasoning on the original `.tombstone-warn`, which stays
|
||||
non-pulsing; `.port-conflict → severity="red" pulse` is the one
|
||||
call site that wants it). `currentColor` throughout so the glow
|
||||
matches whichever severity is active without a second color switch. */
|
||||
:host([pulse]) {
|
||||
/* 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,11 +7,15 @@
|
|||
// not three genuinely different needs.
|
||||
//
|
||||
// Purely presentational — no internal state, no lifecycle beyond
|
||||
// attaching its shadow root once. `severity` ('amber' | 'red', default
|
||||
// amber) and `pulse` (boolean) are read directly by hive-warn.css's
|
||||
// `:host([...])` selectors; unlike `<hive-btn>`'s `variant`/`disabled`
|
||||
// there's no inner native element that needs the attribute mirrored
|
||||
// onto it, so no `attributeChangedCallback` is needed at all.
|
||||
// attaching its shadow root once. `level` ('info' | 'warning' | 'error',
|
||||
// default 'warning') is read directly by hive-warn.css's
|
||||
// `:host([level="…"])` selectors — a fixed three-tier semantic ladder,
|
||||
// not an open severity+modifier combination (mara, on review: "there
|
||||
// should be distinction between info, warning, error — all warnings
|
||||
// should be styled identically"). Unlike `<hive-btn>`'s
|
||||
// `variant`/`disabled` there's no inner native element that needs the
|
||||
// attribute mirrored onto it, so no `attributeChangedCallback` is
|
||||
// needed at all — the CSS reads the host attribute directly.
|
||||
//
|
||||
// Content is arbitrary light-DOM children through the shadow tree's
|
||||
// single default `<slot>` — same reuse of the existing `<strong>`/
|
||||
|
|
@ -19,9 +23,9 @@
|
|||
// rewrite of their message content needed.
|
||||
//
|
||||
// Usage:
|
||||
// `<hive-warn>...</hive-warn>` (amber, static HTML)
|
||||
// `el('hive-warn', {}, ...)` (amber, JS-built)
|
||||
// `el('hive-warn', { severity: 'red', pulse: '' }, ...)` (urgent)
|
||||
// `<hive-warn level="warning">...</hive-warn>` (static HTML)
|
||||
// `el('hive-warn', { level: 'warning' }, ...)` (JS-built)
|
||||
// `el('hive-warn', { level: 'error' }, ...)` (active incident, pulses)
|
||||
|
||||
import { attachShadowCss } from '../shadow-css.js';
|
||||
import hiveWarnCss from './hive-warn.css';
|
||||
|
|
|
|||
Loading…
Reference in a new issue