@monster-orange/den 0.2.7 → 0.3.0

package/src/ui/server/public/graph.css

@@ -5,13 +5,13 @@
    (a scrolling side panel, the pop-up) can clip it. */
 .dg,
 .dg-layer {
-  --dg-raised: #1c2330;
-  --dg-border-strong: #484f58;
-  --dg-faint: #6e7681;
-  --dg-remote: #39c5cf;
-  --dg-event: #bc8cff;
-  --dg-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-family: var(--dg-sans);
+  --dg-raised: var(--raised);
+  --dg-border-strong: var(--border-strong);
+  --dg-faint: var(--faint);
+  --dg-remote: var(--remote);
+  /* No event token: a hue between remote and bad, in any theme. */
+  --dg-event: color-mix(in oklab, var(--remote) 50%, var(--bad));
+  font-family: var(--sans);
   font-size: 14px;
   color: var(--text);
 }
@@ -120,10 +120,15 @@
   top: 0;
   transform-origin: 0 0;
 }
+/* R22b-1 (Ward QA of dev.34): the edge layer paints above the org and
+   repo frames and the cards (positioned, z-index auto, in DOM order), so
+   a line or an arrowhead crossing a frame is never hidden. It takes no
+   pointer events: cards and frames stay clickable under it. */
 .dg-world > svg {
   position: absolute;
   left: 0;
   top: 0;
+  z-index: 1;
   overflow: visible;
   pointer-events: none;
 }
@@ -193,7 +198,9 @@
   box-sizing: border-box;
 }
 .dg-grp.dg-org {
-  background: color-mix(in srgb, var(--oc) 4%, transparent);
+  /* The org's config color is a border and a dot, never the ground or
+     text: it was picked for one mode and fails contrast in the other. */
+  background: color-mix(in srgb, var(--surface) 55%, transparent);
   border-color: color-mix(in srgb, var(--oc) 45%, var(--border));
 }
 .dg-grp.dg-repo {
@@ -217,11 +224,21 @@
   min-width: 0;
 }
 .dg-org > .dg-ghead b {
-  color: var(--oc);
+  color: var(--text);
   font-size: 15px;
   font-weight: 600;
   white-space: nowrap;
 }
+.dg-org > .dg-ghead b::before {
+  content: "";
+  display: inline-block;
+  width: 9px;
+  height: 9px;
+  margin-right: 7px;
+  border-radius: 50%;
+  background: var(--oc);
+  vertical-align: 0.05em;
+}
 .dg-ghead .meta {
   color: var(--muted);
   font-size: 12px;
@@ -236,17 +253,23 @@
   color: var(--muted);
   white-space: nowrap;
 }
+/* Drawn as a link, so underlined like one: never color alone (a theme's
+   accent text can be as red as --bad). */
 .dg-lnk {
   background: none;
   border: 0;
   padding: 0;
-  color: var(--accent);
+  color: var(--accent-text);
   cursor: pointer;
   font-size: 12px;
   white-space: nowrap;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.2em;
+  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
 }
 .dg-lnk:hover {
-  text-decoration: underline;
+  text-decoration-color: currentColor;
 }
 .dg-gname {
   background: none;
@@ -294,7 +317,10 @@
   border-color: color-mix(in srgb, var(--dg-remote) 60%, var(--border));
 }
 .dg-card.down {
-  border-color: color-mix(in srgb, var(--red) 70%, var(--border));
+  border-color: color-mix(in srgb, var(--bad) 70%, var(--border));
+}
+.dg-card.degraded {
+  border-color: color-mix(in srgb, var(--warn) 70%, var(--border));
 }
 .dg-card .r1 {
   display: flex;
@@ -314,10 +340,14 @@
   background: var(--dg-faint);
 }
 .dg-dot.ok {
-  background: var(--green);
+  background: var(--ok);
 }
 .dg-dot.bad {
-  background: var(--red);
+  background: var(--bad);
+}
+/* A repo with a checked service down that isn't its entry (health-rollup.js). */
+.dg-dot.warn {
+  background: var(--warn);
 }
 .dg-card .nm {
   font-weight: 600;
@@ -345,8 +375,8 @@
   border-color: color-mix(in srgb, var(--dg-remote) 55%, transparent);
 }
 .dg-badge.hybrid {
-  color: var(--yellow);
-  border-color: color-mix(in srgb, var(--yellow) 55%, transparent);
+  color: var(--warn);
+  border-color: color-mix(in srgb, var(--warn) 55%, transparent);
 }
 .dg-card .r2 {
   font-family: var(--mono);
@@ -371,7 +401,7 @@
   min-width: 0;
 }
 .dg-card .r3 .h.bad {
-  color: var(--red);
+  color: var(--bad);
 }
 .dg-tag {
   font-size: 11px;
@@ -383,11 +413,11 @@
 }
 .dg-tag.entry {
   background: color-mix(in srgb, var(--accent) 16%, transparent);
-  color: var(--accent);
+  color: var(--accent-text);
 }
 .dg-tag.warn {
-  background: color-mix(in srgb, var(--yellow) 16%, transparent);
-  color: var(--yellow);
+  background: color-mix(in srgb, var(--warn) 16%, transparent);
+  color: var(--warn);
 }
 .dg-acts {
   display: flex;
@@ -425,17 +455,17 @@
   font-size: 12px;
 }
 .dg-btn.primary {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: #0d1117;
+  background: var(--accent-fill);
+  border-color: var(--accent-fill);
+  color: var(--on-accent);
   font-weight: 600;
 }
 .dg-btn.primary:hover {
   filter: brightness(1.1);
 }
 .dg-btn.armed {
-  border-color: var(--red);
-  color: var(--red);
+  border-color: var(--bad);
+  color: var(--bad);
   font-weight: 600;
 }
 .dg-card.compact {
@@ -466,13 +496,13 @@
   opacity: 0.22;
 }
 .dg-card.hit {
-  box-shadow: 0 0 0 2px var(--yellow);
+  box-shadow: 0 0 0 2px var(--warn);
 }
 
 /* edges */
 path.dg-e {
   fill: none;
-  stroke: #6e7681;
+  stroke: var(--faint);
   stroke-width: 1.4;
   transition: opacity 0.15s;
 }
@@ -481,7 +511,7 @@ path.dg-e.hard {
   stroke-width: 1.8;
 }
 path.dg-e.soft {
-  stroke: #8b949e;
+  stroke: var(--muted);
   stroke-dasharray: 6 4;
 }
 path.dg-e.event {
@@ -494,15 +524,57 @@ path.dg-e.cross {
   stroke-dasharray: 9 4;
 }
 path.dg-e.intra {
-  stroke: #8b949e;
+  stroke: var(--muted);
   stroke-width: 1.5;
 }
+/* A lit edge's base becomes a faint track in its kind's colour, so the
+   flow overlay on top of it reads (Ward QA of dev.35: dashes in the same
+   colour on a full-strength line were barely visible). The arrowhead's
+   fill is its own and stays full strength. */
 path.dg-e.hl {
   stroke-width: 2.6;
+  stroke-opacity: 0.3;
 }
 path.dg-e.dim {
   opacity: 0.12;
 }
+/* R22b-2: a highlighted edge flows from data-f to data-t (the arrow's
+   way): a marching-dash overlay in the base path's colour, wider than the
+   track, one 20px dash cycle a second. Decreasing dashoffset moves the
+   dashes toward the end. */
+path.dg-flow {
+  fill: none;
+  display: none;
+  stroke: var(--faint);
+  stroke-width: 3.6;
+  stroke-linecap: round;
+  stroke-dasharray: 10 10;
+}
+path.dg-flow.on {
+  display: inline;
+  animation: dg-flow 1s linear infinite;
+}
+path.dg-flow.hard {
+  stroke: var(--accent);
+}
+path.dg-flow.soft,
+path.dg-flow.intra {
+  stroke: var(--muted);
+}
+path.dg-flow.event {
+  stroke: var(--dg-event);
+}
+path.dg-flow.cross {
+  stroke: var(--dg-remote);
+}
+@keyframes dg-flow {
+  from {
+    stroke-dashoffset: 20;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
 
 /* panel */
 .dg-panel {
@@ -523,7 +595,7 @@ path.dg-e.dim {
   inset: 0;
   height: auto;
   grid-template-rows: none;
-  background: rgb(1 4 9 / 0.6);
+  background: rgb(0 0 0 / 0.6);
   z-index: 900;
   display: grid;
   place-items: center;
@@ -534,7 +606,7 @@ path.dg-e.dim {
   max-height: min(86vh, 900px);
   border: 1px solid var(--border);
   border-radius: 14px;
-  box-shadow: 0 24px 60px rgb(0 0 0 / 0.5);
+  box-shadow: var(--shadow);
 }
 .dg-resize {
   position: absolute;
@@ -569,10 +641,22 @@ path.dg-e.dim {
   background: none;
   border: 0;
   padding: 0;
-  color: var(--accent);
+  color: var(--accent-text);
   cursor: pointer;
   font: inherit;
 }
+.dg-crumb-org {
+  color: var(--text);
+  white-space: nowrap;
+}
+.dg-crumb-org i {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 5px;
+  border-radius: 50%;
+  vertical-align: 0.05em;
+}
 .dg-crumbs button:hover {
   text-decoration: underline;
 }
@@ -627,14 +711,14 @@ path.dg-e.dim {
   white-space: nowrap;
 }
 .dg-pill.ok {
-  color: var(--green);
-  border-color: color-mix(in srgb, var(--green) 50%, transparent);
-  background: color-mix(in srgb, var(--green) 10%, transparent);
+  color: var(--ok);
+  border-color: color-mix(in srgb, var(--ok) 50%, transparent);
+  background: color-mix(in srgb, var(--ok) 10%, transparent);
 }
 .dg-pill.bad {
-  color: var(--red);
-  border-color: color-mix(in srgb, var(--red) 55%, transparent);
-  background: color-mix(in srgb, var(--red) 10%, transparent);
+  color: var(--bad);
+  border-color: color-mix(in srgb, var(--bad) 55%, transparent);
+  background: color-mix(in srgb, var(--bad) 10%, transparent);
 }
 .dg-actions {
   display: flex;
@@ -655,7 +739,7 @@ path.dg-e.dim {
   border-radius: 10px;
   padding: 6px;
   z-index: 1000; /* above the pop-up (900) */
-  box-shadow: 0 12px 30px rgb(0 0 0 / 0.45);
+  box-shadow: var(--shadow);
 }
 .dg-menu[hidden] {
   display: none;
@@ -692,10 +776,10 @@ path.dg-e.dim {
   cursor: not-allowed;
 }
 .dg-mg.danger button {
-  color: var(--red);
+  color: var(--bad);
 }
 .dg-menu button.armed {
-  background: color-mix(in srgb, var(--red) 18%, transparent);
+  background: color-mix(in srgb, var(--bad) 18%, transparent);
   font-weight: 600;
 }
 .dg-tabs {
@@ -736,7 +820,7 @@ path.dg-e.dim {
   font-weight: 600;
 }
 .dg-sec a {
-  color: var(--accent);
+  color: var(--accent-text);
 }
 .dg dl.kv {
   display: grid;
@@ -842,7 +926,7 @@ path.dg-e.dim {
   color: var(--text);
 }
 .dg table.svc button.nm:hover {
-  color: var(--accent);
+  color: var(--accent-text);
 }
 .dg-logbar {
   display: flex;
@@ -907,7 +991,7 @@ path.dg-e.dim {
   overflow-wrap: anywhere;
 }
 .dg ol.act .refused {
-  color: var(--red);
+  color: var(--bad);
   font-style: normal;
 }
 .dg-who {
@@ -919,8 +1003,8 @@ path.dg-e.dim {
   white-space: nowrap;
 }
 .dg-who.agent {
-  color: var(--yellow);
-  border-color: color-mix(in srgb, var(--yellow) 55%, transparent);
+  color: var(--warn);
+  border-color: color-mix(in srgb, var(--warn) 55%, transparent);
 }
 .dg-layers span {
   font-family: var(--mono);
@@ -961,7 +1045,7 @@ path.dg-e.dim {
     border-radius: 14px 14px 0 0;
     z-index: 800;
     padding-bottom: env(safe-area-inset-bottom, 0px);
-    box-shadow: 0 -12px 30px rgb(0 0 0 / 0.45);
+    box-shadow: var(--shadow);
   }
   .dg-stage > .dg-panel .dg-resize {
     display: none;
@@ -977,4 +1061,14 @@ path.dg-e.dim {
   .dg * {
     transition: none !important;
   }
+  /* No motion: the lit edge stays thicker, in the accent colour. */
+  path.dg-flow.on {
+    animation: none;
+    display: none;
+  }
+  path.dg-e.hl {
+    stroke: var(--accent);
+    stroke-width: 3;
+    stroke-opacity: 1;
+  }
 }