@smwb/ui-styles 2.5.0 → 2.6.0

package/README.md

@@ -143,8 +143,33 @@ runtime tokens, so the dark theme follows without extra settings:
 | `@dagViewSelectedRing`                         | `--smwb-dag-view-selected-ring`                                         | `var(--smui-primaryColor)`                                                |
 | `@dagViewStatusIdle` … `@dagViewStatusSkipped` | `--smwb-dag-view-status-idle` … `-skipped`                              | outline, on-surface variant, info, success, warning, error, disabled text |
 | `@dagViewDimOpacity`                           | `--smwb-dag-view-dim-opacity`                                           | `0.35`                                                                    |
+| `@dagViewEdgeFlowColor`                        | `--smwb-dag-view-edge-flow-color`                                       | `var(--smwb-dag-view-status-running)`                                     |
+| `@dagViewEdgeFlowTrackColor`                   | `--smwb-dag-view-edge-flow-track-color`                                 | the flow colour mixed 45% with transparent                                |
+| `@dagViewNodeGlowColor`                        | `--smwb-dag-view-node-glow-color`                                       | `false`: the node's own accent                                            |
+| `@dagViewEdgeFlowWidth`                        | `--smwb-dag-view-edge-flow-width`                                       | `2.5px`                                                                   |
+| `@dagViewEdgeFlowDuration`                     | `--smwb-dag-view-edge-flow-duration`                                    | `0.6s` (one 24px dash period)                                             |
+| `@dagViewEdgeGlowOpacity`                      | `--smwb-dag-view-edge-glow-opacity`                                     | `0.25`                                                                    |
+| `@dagViewNodeGlowOpacity`                      | `--smwb-dag-view-node-glow-opacity`                                     | `0.6` (blur strength of the running node's inner glow)                    |
+| `@dagViewNodePulseDuration`                    | `--smwb-dag-view-node-pulse-duration`                                   | `1.4s` (the running node's dot and frame)                                 |
 | `@dagViewHeight`                               | — (the graph's `height`)                                                | `480px`                                                                   |
 
+The flow colours (`@dagViewEdgeFlowColor`, `@dagViewEdgeFlowTrackColor`, `@dagViewNodeGlowColor`) are colours and have
+`…Dark` twins, `false` by default; the width, durations and opacities are not colours and have none. The pulses' dash
+pattern (`@dagViewEdgeFlowDash` / `@dagViewEdgeFlowGap`, `6px` / `18px`) is compile time only: the flow keyframes move
+exactly one period, so `dash + gap` must stay the keyframe's stride.
+
+An edge the app marks `active` shows work flowing along it (`DagViewEdge.active`, `@smwb/ui-solid`): the edge lights in
+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
+`--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.
+
 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
 default: set it to give the dark theme its own value. At runtime, set the properties on the graph itself, since it

package/less/components/chip/chip.less

@@ -179,4 +179,99 @@
   .smui-chip-color(success; var(--smui-successColor); var(--smui-onSuccessColor));
   .smui-chip-color(warning; var(--smui-warningColor); var(--smui-onWarningColor));
   .smui-chip-color(info; var(--smui-infoColor); var(--smui-onInfoColor));
+
+  // A custom color (Chip's customColor prop) repaints the chip like the palette
+  // colors above, from custom properties the component sets inline on the root
+  // (internal: apps neither set nor target them):
+  // - --smwb-chip-custom-color: the color to draw, any CSS color (a translucent
+  //   one the component parses comes composited over the page background);
+  // - --smwb-chip-custom-fill / --smwb-chip-custom-on-color: the same color and
+  //   its black-or-white label, for the colors the component could measure;
+  // - --smwb-chip-custom-text-color: the caller's label color, when given.
+  // The guard mirrors the palette mixin's: the color class outranks the neutral
+  // rules, a selected filled chip keeps its fill, and a disabled chip keeps the
+  // disabled look. An outlined chip keeps the theme's label color: an arbitrary
+  // color as text on the page fails contrast on one of the themes.
+  &.smwb-chip_custom-color:not(&.smwb-disabled) {
+    // Without relative color syntax (below) only measured colors are painted;
+    // the others draw as the plain chip rather than under a guessed label color.
+    // The fill stays put on hover / active: no filter, it would dim the label.
+    &.smwb-filled {
+      &,
+      &:hover,
+      &:active,
+      &.smwb-selected {
+        background-color: var(--smwb-chip-custom-fill, var(--smui-chipsBg));
+      }
+      color: var(--smwb-chip-custom-text-color, var(--smwb-chip-custom-on-color, var(--smui-primaryTextColor)));
+      // The delete control follows the label color, so it reads on any fill;
+      // hovered, it gets a round tint of that color.
+      .smwb-chip__delete-icon {
+        border-radius: 50%;
+        svg {
+          &,
+          &:hover {
+            fill: currentColor;
+          }
+        }
+        &:hover {
+          background-color: color-mix(in srgb, currentColor 16%, transparent);
+        }
+      }
+    }
+    &.smwb-outlined {
+      color: var(--smwb-chip-custom-text-color, var(--smui-primaryTextColor));
+      border-color: var(--smwb-chip-custom-color);
+      &:hover {
+        background-color: color-mix(in srgb, var(--smwb-chip-custom-color) 12%, transparent);
+      }
+      &:active,
+      &.smwb-selected {
+        background-color: color-mix(in srgb, var(--smwb-chip-custom-color) 20%, transparent);
+      }
+      // A caller's label color is the delete control's too.
+      .smwb-chip__delete-icon svg {
+        fill: var(--smwb-chip-custom-text-color, var(--smui-chipsIconColor));
+        &:hover {
+          fill: var(--smwb-chip-custom-text-color, var(--smui-chipsIconColorHover));
+        }
+      }
+    }
+  }
+
+  // With relative color syntax the stylesheet picks the label itself, from the
+  // color as the browser understands it, so any valid CSS color is painted:
+  // - solid: the color made opaque (a translucent one the component could not
+  //   parse is drawn opaque, so the label is picked against what is shown);
+  // - pick: white while the fill's WCAG relative luminance is <= 0.17913, where
+  //   black and white contrast equally, black above: >= 4.58:1 either way;
+  // - label: the caller's text color, or the pick;
+  // - away: the same pick made for the label, i.e. black for a light label and
+  //   white for a dark one. Hover / active mix it into the fill, which moves the
+  //   fill away from the label: the contrast only grows.
+  // A value the browser cannot read makes these invalid at computed-value time:
+  // the fill is then transparent and the label inherits the surrounding text
+  // color, a readable plain chip.
+  @supports (color: color(from red srgb r g b)) {
+    @pick-channel: ~"clamp(0, (0.17913 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)";
+    &.smwb-chip_custom-color:not(&.smwb-disabled) {
+      --smwb-chip-custom-solid: ~"color(from var(--smwb-chip-custom-color) srgb r g b / 1)";
+      --smwb-chip-custom-pick: ~"color(from var(--smwb-chip-custom-solid) srgb-linear @{pick-channel} @{pick-channel} @{pick-channel} / 1)";
+      --smwb-chip-custom-label: var(--smwb-chip-custom-text-color, var(--smwb-chip-custom-pick));
+      --smwb-chip-custom-away: ~"color(from var(--smwb-chip-custom-label) srgb-linear @{pick-channel} @{pick-channel} @{pick-channel} / 1)";
+      &.smwb-filled {
+        &,
+        &.smwb-selected {
+          background-color: var(--smwb-chip-custom-solid);
+        }
+        &:hover {
+          background-color: color-mix(in srgb, var(--smwb-chip-custom-solid), var(--smwb-chip-custom-away) 8%);
+        }
+        &:active {
+          background-color: color-mix(in srgb, var(--smwb-chip-custom-solid), var(--smwb-chip-custom-away) 14%);
+        }
+        color: var(--smwb-chip-custom-label);
+      }
+    }
+  }
 }

package/less/components/dagView/dagView.less

@@ -21,6 +21,9 @@
   .smwb-dag-view-token(status-warning; StatusWarning; @suffix);
   .smwb-dag-view-token(status-error; StatusError; @suffix);
   .smwb-dag-view-token(status-skipped; StatusSkipped; @suffix);
+  .smwb-dag-view-token(edge-flow-color; EdgeFlowColor; @suffix);
+  .smwb-dag-view-token(edge-flow-track-color; EdgeFlowTrackColor; @suffix);
+  .smwb-dag-view-token(node-glow-color; NodeGlowColor; @suffix);
 }
 // The line style of the node frame, theme-wide and per built-in status. The status
 // ones are `false` by default: they emit nothing, so the node falls back to the
@@ -48,6 +51,11 @@
 .smwb-dag-view {
   .smwb-dag-view-tokens("");
   --smwb-dag-view-dim-opacity: @dagViewDimOpacity;
+  --smwb-dag-view-edge-flow-width: @dagViewEdgeFlowWidth;
+  --smwb-dag-view-edge-flow-duration: @dagViewEdgeFlowDuration;
+  --smwb-dag-view-edge-glow-opacity: @dagViewEdgeGlowOpacity;
+  --smwb-dag-view-node-glow-opacity: @dagViewNodeGlowOpacity;
+  --smwb-dag-view-node-pulse-duration: @dagViewNodePulseDuration;
   --smwb-dag-view-node-border-style: @dagViewNodeBorderStyle;
   .smwb-dag-view-border-style(pending; Pending);
   .smwb-dag-view-border-style(running; Running);
@@ -132,6 +140,62 @@
     fill: var(--smwb-dag-view-edge-active-color);
   }
 
+  // An edge the app marks `active`: work flows along it. The track is lit, a
+  // static glow lies under it and pulses run over it from source to target
+  // (the pulses only move, and only show, without reduced motion: see the end).
+  &__edge--flowing {
+    stroke: var(--smwb-dag-view-edge-flow-color);
+    stroke-width: var(--smwb-dag-view-edge-flow-width);
+  }
+
+  &__arrow--flow {
+    fill: var(--smwb-dag-view-edge-flow-color);
+  }
+
+  &__edge-glow {
+    fill: none;
+    stroke: var(--smwb-dag-view-edge-flow-color);
+    stroke-width: calc(var(--smwb-dag-view-edge-flow-width) * 3);
+    stroke-linecap: round;
+    stroke-opacity: var(--smwb-dag-view-edge-glow-opacity);
+    transition: opacity 0.12s;
+  }
+
+  &__edge-pulse {
+    display: none;
+    fill: none;
+    stroke: var(--smwb-dag-view-edge-flow-color);
+    stroke-width: calc(var(--smwb-dag-view-edge-flow-width) + 1px);
+    stroke-linecap: round;
+    stroke-dasharray: @dagViewEdgeFlowDash @dagViewEdgeFlowGap;
+    transition: opacity 0.12s;
+  }
+
+  &__edge-glow--dimmed,
+  &__edge-pulse--dimmed {
+    opacity: var(--smwb-dag-view-dim-opacity);
+  }
+
+  // A running node's frame glows from inside, in its accent (the node clips its
+  // overflow, so the glow cannot go outside). Only where the graph asks for it:
+  // the attribute is written by @smwb/ui-solid.
+  &[data-animate-running="true"] &__node[data-status="running"]::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    @glow: ~"var(--smwb-dag-view-node-glow-color, var(--smwb-dag-view-accent))";
+    box-shadow:
+      inset 0 0 0 1px @glow,
+      inset 0 0 12px 2px ~"color-mix(in srgb, @{glow} calc(var(--smwb-dag-view-node-glow-opacity) * 100%), transparent)";
+  }
+
+  // animateRunning={false}: running nodes stay still, the dot too.
+  &[data-animate-running="false"] &__node[data-status="running"] &__dot {
+    animation: none;
+  }
+
   &__node {
     --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-idle));
     .smwb-dag-view-status(pending);
@@ -304,10 +368,23 @@
   .smwb-dag-view-tokens("Dark");
 }
 
-// A running node's dot pulses, unless motion is reduced.
+// Motion only when the user has not asked for less: a running node's dot and
+// frame pulse, and pulses run along the active edges over a paler track.
+// With reduced motion the edges stay lit in the full flow colour and the
+// running node keeps a still glow.
 @media (prefers-reduced-motion: no-preference) {
   .smwb-dag-view__node[data-status="running"] .smwb-dag-view__dot {
-    animation: smwb-dag-view-pulse 1.4s ease-in-out infinite;
+    animation: smwb-dag-view-pulse var(--smwb-dag-view-node-pulse-duration) ease-in-out infinite;
+  }
+  .smwb-dag-view[data-animate-running="true"] .smwb-dag-view__node[data-status="running"]::before {
+    animation: smwb-dag-view-pulse var(--smwb-dag-view-node-pulse-duration) ease-in-out infinite;
+  }
+  .smwb-dag-view__edge--flowing {
+    stroke: var(--smwb-dag-view-edge-flow-track-color);
+  }
+  .smwb-dag-view__edge-pulse {
+    display: inline;
+    animation: smwb-dag-view-flow var(--smwb-dag-view-edge-flow-duration) linear infinite;
   }
 }
 
@@ -316,3 +393,12 @@
     opacity: 0.35;
   }
 }
+
+// One dash period along the path: a negative offset moves the dashes from the
+// path's start (the source) toward its end (the target).
+@dagViewEdgeFlowPeriod: (@dagViewEdgeFlowDash + @dagViewEdgeFlowGap);
+@keyframes smwb-dag-view-flow {
+  to {
+    stroke-dashoffset: -@dagViewEdgeFlowPeriod;
+  }
+}

package/less/components/grid/grid.less

@@ -71,12 +71,22 @@
   width: 100%;
   box-sizing: border-box;
 
+  // The class display beats the UA `[hidden]` rule, so it is pinned explicitly.
+  &[hidden] {
+    display: none;
+  }
+
   &__row {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     box-sizing: border-box;
 
+    // Same as on the grid: `hidden` on the node wins without app CSS.
+    &[hidden] {
+      display: none;
+    }
+
     .generate-spacing-class-count(spacing);
 
     &--nowrap {

package/less/components/stack/stack.less

@@ -11,6 +11,16 @@
 }
 
 .smwb-stack {
+  // Display lives in the class, not the inline style: an inline display would
+  // beat the UA `[hidden]` rule and keep a mounted, hidden Stack visible.
+  display: flex;
+
+  // The UA `[hidden]` rule loses to the class display above, so it is pinned
+  // explicitly — `hidden` on the node wins with no app CSS and no !important.
+  &[hidden] {
+    display: none;
+  }
+
   // layout is driven by inline flex props; this hook is for overrides
   min-width: 0;
 

package/less/components/tooltip/tooltip.less

@@ -22,6 +22,11 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
+    // Let the target shrink below its content width inside a fixed-width parent,
+    // so noWrap content (Typography noWrap) is truncated with an ellipsis instead
+    // of overflowing the parent.
+    min-width: 0;
+    max-width: 100%;
   }
 
   &__wrapper {
@@ -29,6 +34,11 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    // Without it the inline-flex wrapper cannot shrink below the content width
+    // (the flex automatic minimum size), so a long noWrap label overflows a
+    // fixed-width parent instead of truncating.
+    min-width: 0;
+    max-width: 100%;
   }
 }
 

package/less/default/globals/default.variables.less

@@ -589,6 +589,21 @@
 @dagViewStatusSkippedBorderStyle: false;
 // How far the nodes and edges away from the selection fade, with dimUnrelated.
 @dagViewDimOpacity: 0.35;
+// An edge the app marks `active`: work flows along it. The flow colour defaults
+// to the running status colour, so the dark theme follows on its own.
+@dagViewEdgeFlowColor: ~"var(--smwb-dag-view-status-running)";
+// The flowing edge's track: the flow colour mixed 45% with transparent.
+@dagViewEdgeFlowTrackColor: ~"color-mix(in srgb, var(--smwb-dag-view-edge-flow-color) 45%, transparent)";
+// A running node's inner glow colour; `false`: the node's own accent.
+@dagViewNodeGlowColor: false;
+@dagViewEdgeFlowWidth: 2.5px;
+@dagViewEdgeFlowDuration: 0.6s;
+@dagViewEdgeGlowOpacity: 0.25;
+@dagViewNodeGlowOpacity: 0.6;
+@dagViewNodePulseDuration: 1.4s;
+// The pulses' dash pattern, compile time only: the flow keyframes move one period.
+@dagViewEdgeFlowDash: 6px;
+@dagViewEdgeFlowGap: 18px;
 // The graph's height when the app sets none (its `height` prop or `style`).
 @dagViewHeight: 480px;
 
@@ -817,3 +832,7 @@
 @dagViewStatusWarningDark: false;
 @dagViewStatusErrorDark: false;
 @dagViewStatusSkippedDark: false;
+// Dark-only values of the flow colours; `false` = not set: the light value (a runtime token) applies.
+@dagViewEdgeFlowColorDark: false;
+@dagViewEdgeFlowTrackColorDark: false;
+@dagViewNodeGlowColorDark: false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-styles",
-  "version": "2.5.0",
+  "version": "2.6.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": [