@smwb/ui-styles 2.8.0 → 2.9.0

package/README.md

@@ -199,13 +199,16 @@ An edge the app marks `active` shows work flowing along it (`DagViewEdge.active`
 the flow colour over a paler track, a static glow lies under it and pulses run from `source` to `target`; a running
 node's frame glows and pulses with its dot. This `active` is not the selection highlight — the selected node's edges
 keep `@dagViewEdgeActiveColor`, and where both apply the flowing edge wins the colour and the arrow. All flow rules and
-the node glow are gated on markup only `@smwb/ui-solid` writes (`data-animate-running` on the root, the flowing
-classes on the edge paths), so the shared CSS is inert for `@smwb/ui-react` until its own issue lands; the only
-change React sees is the new custom properties on its root and the dot's duration read from
+the node glow are gated on markup only `@smwb/ui-solid` writes (`data-animate-running` and `data-animate-flow` on
+the root, the flowing classes on the edge paths), so the shared CSS is inert for `@smwb/ui-react` until its own
+issue lands; the only change React sees is the new custom properties on its root and the dot's duration read from
 `--smwb-dag-view-node-pulse-duration`, whose default is the 1.4 s of before. Motion is CSS only: with
 `prefers-reduced-motion: reduce` the pulses stay hidden, the flowing edge stays lit in the full flow colour, and a
 running node keeps a still glow; `animateRunning={false}` stops a running node's glow and dot pulse without reduced
-motion.
+motion. `animateFlow={false}` (`data-animate-flow="false"` on the root) asks for that same still state on demand and
+keeps the light: the pulses are hidden, a running node's dot and frame hold still, the flowing edge stays lit in the
+full flow colour with its static glow, and the running node keeps its still glow. Those rules sit after the motion
+media query, which is what makes them win at equal specificity.
 
 The statuses are `idle`, `pending`, `running`, `success`, `warning`, `error` and `skipped`; a node with any other
 status is drawn as `idle`. Each colour variable has a `…Dark` twin (e.g. `@dagViewStatusSuccessDark`), `false` by

package/less/components/dagView/dagView.less

@@ -388,6 +388,25 @@
   }
 }
 
+// animateFlow={false}: the same still state reduced motion shows — the flow
+// stays lit in the full flow colour and the glows stay, nothing moves. The
+// block sits after the motion rules so its frame rule, of equal specificity
+// to theirs, wins.
+.smwb-dag-view[data-animate-flow="false"] {
+  .smwb-dag-view__edge--flowing {
+    stroke: var(--smwb-dag-view-edge-flow-color);
+  }
+  .smwb-dag-view__edge-pulse {
+    display: none;
+  }
+  .smwb-dag-view__node[data-status="running"] .smwb-dag-view__dot {
+    animation: none;
+  }
+  .smwb-dag-view__node[data-status="running"]::before {
+    animation: none;
+  }
+}
+
 @keyframes smwb-dag-view-pulse {
   50% {
     opacity: 0.35;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-styles",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "Framework-agnostic LESS design tokens and component styles (smwb-*) shared by the @smwb UI libraries. Prebuilt aggregate CSS lives in @smwb/ui-css.",
   "license": "MIT",
   "sideEffects": [