/* psyc-tokens.css
* Augments cockpit.css. Drop in after it:
*
*
*
* Dark theme only. Monospace stack inherited from cockpit.css.
* All text-bearing tokens below hit WCAG AA (>=4.5:1) on --panel (#161a22).
*/
:root {
/* ---- Navy scale (anchored on cockpit bg/panel/border) ---- */
--navy-50: #d8dee9; /* body text (12.9:1) */
--navy-100: #aeb6c4; /* secondary text (7.7:1) */
--navy-200: #7d8597; /* muted (4.6:1) */
--navy-300: #5a6478; /* hairline emphasis */
--navy-400: #3a4458; /* strong border */
--navy-500: #262d3a; /* default border */
--navy-600: #1c2230; /* raised surface (panel-2) */
--navy-700: #161a22; /* panel surface */
--navy-800: #0f1115; /* app bg */
/* ---- Cyan scale (anchored on --accent #1ec8ff) ---- */
--cyan-50: #e0f7ff; /* highest-contrast text on panel */
--cyan-100: #b8eaff;
--cyan-200: #7dd6ff;
--cyan-300: #1ec8ff; /* accent */
--cyan-400: #0ba6db;
--cyan-500: #0982ad;
--cyan-600: #0a5f7d; /* filled-badge bg */
--cyan-700: #07394d; /* deepest */
/* ---- TLP (text-on-panel; AA verified) ---- */
--tlp-red: #ff5d5d; /* 5.3:1 */
--tlp-amber: #fbbf24; /* 11.0:1 */
--tlp-green: #4ade80; /* 11.4:1 */
--tlp-clear: #cbd5e1; /* 11.5:1 */
/* paired filled-badge tokens */
--tlp-red-bg: #7f1d1d; --tlp-red-fg: #fee2e2;
--tlp-amber-bg: #78350f; --tlp-amber-fg: #fef3c7;
--tlp-green-bg: #14532d; --tlp-green-fg: #d1fae5;
--tlp-clear-bg: #1c2230; --tlp-clear-fg: #cbd5e1;
/* ---- Severity (text-on-panel; AA verified) ---- */
--sev-low: #94a3b8; /* 6.6:1 */
--sev-medium: #fde047; /* 13.4:1 */
--sev-high: #fb923c; /* 7.8:1 */
--sev-critical: #ff5d5d; /* 5.3:1, paired with glow */
/* ---- Outcome (text-on-panel; AA verified) ---- */
--out-submitted: #7dd6ff; /* 9.0:1 cyan */
--out-acknowledged: #c4b5fd; /* 8.4:1 violet */
--out-rejected: #f87171; /* 6.0:1 red */
--out-actioned: #4ade80; /* 11.4:1 green */
/* ---- Spacing (4-step) ---- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 16px;
--sp-4: 24px;
/* ---- Type (4-step; px + weight) ---- */
--fs-xs: 11px; --fw-xs: 600; /* badges, eyebrows */
--fs-sm: 12px; --fw-sm: 400; /* meta, table head */
--fs-md: 14px; --fw-md: 400; /* body (cockpit base) */
--fs-lg: 18px; --fw-lg: 600; /* panel titles */
}
/* ===== Badges ============================================================ */
/* Shared base — overrides cockpit's .sev-badge / .tlp-badge with tokens. */
.sev-badge,
.tlp-badge,
.outcome-badge {
display: inline-block;
padding: 2px var(--sp-2);
border-radius: 3px;
font-size: var(--fs-xs);
font-weight: var(--fw-xs);
letter-spacing: 0.6px;
text-transform: uppercase;
line-height: 1.6;
border: 1px solid transparent;
white-space: nowrap;
}
/* Severity — outlined, text-driven (works on panel or row hover) */
.sev-badge { background: var(--navy-600); color: var(--navy-100); border-color: var(--navy-500); border-radius: 10px; }
.sev-badge.sev-low, tr.sev-low .sev-badge { color: var(--sev-low); border-color: var(--navy-400); }
.sev-badge.sev-medium, tr.sev-medium .sev-badge { color: var(--sev-medium); border-color: color-mix(in oklab, var(--sev-medium) 40%, var(--navy-500)); }
.sev-badge.sev-high, tr.sev-high .sev-badge { color: var(--sev-high); border-color: color-mix(in oklab, var(--sev-high) 50%, var(--navy-500)); }
.sev-badge.sev-critical, tr.sev-critical .sev-badge {
color: var(--sev-critical);
border-color: var(--sev-critical);
box-shadow: 0 0 0 1px color-mix(in oklab, var(--sev-critical) 25%, transparent);
}
/* TLP — filled chips (FIRST.org-style emphasis) */
.tlp-badge.tlp-RED { background: var(--tlp-red-bg); color: var(--tlp-red-fg); }
.tlp-badge.tlp-AMBER { background: var(--tlp-amber-bg); color: var(--tlp-amber-fg); }
.tlp-badge.tlp-GREEN { background: var(--tlp-green-bg); color: var(--tlp-green-fg); }
.tlp-badge.tlp-CLEAR { background: var(--tlp-clear-bg); color: var(--tlp-clear-fg); border-color: var(--navy-500); }
/* Outcome — text-driven with a leading dot for scannability in dense rows */
.outcome-badge { background: var(--navy-600); border-color: var(--navy-500); border-radius: 10px; }
.outcome-badge::before {
content: "";
display: inline-block;
width: 6px; height: 6px; border-radius: 50%;
margin-right: 6px; vertical-align: 1px;
background: currentColor;
box-shadow: 0 0 6px currentColor;
}
.outcome-badge.outcome-submitted { color: var(--out-submitted); }
.outcome-badge.outcome-acknowledged { color: var(--out-acknowledged); }
.outcome-badge.outcome-rejected { color: var(--out-rejected); border-color: color-mix(in oklab, var(--out-rejected) 35%, var(--navy-500)); }
.outcome-badge.outcome-actioned { color: var(--out-actioned); border-color: color-mix(in oklab, var(--out-actioned) 35%, var(--navy-500)); }
/* ===== Routes ============================================================ */
/* Block-level row inside a case "Routes" panel. Markup:
…
…
*/
.route-allowed,
.route-blocked {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--navy-500);
border-left-width: 3px;
border-radius: 4px;
background: var(--navy-600);
font-size: var(--fs-md);
margin-bottom: var(--sp-1);
}
.route-allowed { border-left-color: var(--out-actioned); }
.route-blocked { border-left-color: var(--out-rejected); }
.route-allowed .route-reason,
.route-blocked .route-reason {
font-size: var(--fs-sm);
color: var(--navy-200);
}
.route-allowed .route-dest::before { content: "→ "; color: var(--out-actioned); }
.route-blocked .route-dest::before { content: "⊘ "; color: var(--out-rejected); }
.route-blocked .route-dest { color: var(--navy-100); text-decoration: line-through; text-decoration-color: var(--navy-300); }
/* ===== Ledger row ======================================================= */
/* Tabular dense row for /ledger. Markup:
| … | … | … |
… | … |
AMBER |
ACTIONED |
*/
.ledger-row > td {
padding: var(--sp-1) var(--sp-2);
border-bottom: 1px solid var(--navy-500);
font-size: var(--fs-sm);
vertical-align: baseline;
}
.ledger-row:hover > td { background: var(--navy-600); }
.ledger-row .lg-ts { color: var(--navy-200); white-space: nowrap; width: 1%; }
.ledger-row .lg-case { color: var(--cyan-200); white-space: nowrap; width: 1%; }
.ledger-row .lg-dest { color: var(--navy-50); white-space: nowrap; }
.ledger-row .lg-hash {
color: var(--navy-100);
font-variant-ligatures: none;
max-width: 22ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
direction: rtl; /* clip the head of the hash, keep the tail */
text-align: left;
}
.ledger-row .lg-sub { color: var(--navy-100); white-space: nowrap; }
.ledger-row.is-rejected > td { background: color-mix(in oklab, var(--out-rejected) 6%, transparent); }
.ledger-row.is-actioned > td { background: color-mix(in oklab, var(--out-actioned) 5%, transparent); }
/* ===== Sealed package card =============================================== */
/* Panel/card variant for case detail + /sealed/{id}. Markup:
*/
.sealed-package-card {
position: relative;
background:
linear-gradient(180deg, color-mix(in oklab, var(--cyan-700) 35%, var(--navy-700)) 0, var(--navy-700) 64px),
var(--navy-700);
border: 1px solid var(--navy-500);
border-radius: 6px;
padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.sealed-package-card::before {
content: "";
position: absolute; inset: 0 0 auto 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--cyan-300), transparent);
opacity: 0.7;
}
.sealed-package-card .sp-head {
display: flex; justify-content: space-between; align-items: baseline;
gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.sealed-package-card .sp-head h2 {
margin: 0;
font-size: var(--fs-xs); font-weight: var(--fw-xs);
letter-spacing: 1.4px; text-transform: uppercase;
color: var(--cyan-200);
}
.sealed-package-card .sp-id {
font-size: var(--fs-sm); color: var(--navy-50);
background: var(--navy-600); border: 1px solid var(--navy-500);
padding: 2px var(--sp-2); border-radius: 3px;
}
.sealed-package-card .sp-meta {
display: grid; grid-template-columns: 160px 1fr; gap: var(--sp-1) var(--sp-3);
margin: 0 0 var(--sp-3); font-size: var(--fs-md);
}
.sealed-package-card .sp-meta dt { color: var(--navy-200); }
.sealed-package-card .sp-meta dd { margin: 0; color: var(--navy-50); }
.sealed-package-card .sp-meta .sp-hash { font-size: var(--fs-sm); color: var(--navy-100); word-break: break-all; }
.sealed-package-card .sp-recipients {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2);
}
.sealed-package-card .sp-recipients > li {
font-size: var(--fs-sm); color: var(--navy-50);
background: var(--navy-600); border: 1px solid var(--navy-500);
padding: 2px var(--sp-2); border-radius: 3px;
}
.sealed-package-card .sp-recipients > li .sp-size { color: var(--navy-200); margin-left: var(--sp-2); }