@harnessio/ui 1.3.24 → 1.3.27

package/dist/tailwind.config.js

@@ -1986,7 +1986,26 @@ const ce = {
   },
   ".cn-dual-pane-stepper-content-header": {
     padding: "var(--cn-spacing-6) var(--cn-spacing-6) 0",
-    flexShrink: "0"
+    flexShrink: "0",
+    gap: "var(--cn-spacing-3)"
+  },
+  // Same v5 setup-head type as SinglePane. These classes own type — do not wrap
+  // the nodes in Text (its font-* / text-cn-* utilities would force !important).
+  // `--cn-line-height-20` / `-24` are not emitted. Title: `--cn-line-height-6-normal`
+  // (24px). Intro: `--cn-line-height-6-tight` (20px).
+  ".cn-dual-pane-stepper-content-title": {
+    margin: "0",
+    fontSize: "var(--cn-font-size-6)",
+    fontWeight: "var(--cn-font-weight-default-normal-600)",
+    lineHeight: "var(--cn-line-height-6-normal)",
+    letterSpacing: "var(--cn-tracking-tight)",
+    color: "var(--cn-text-1)"
+  },
+  ".cn-dual-pane-stepper-content-subtitle": {
+    margin: "0",
+    fontSize: "var(--cn-font-size-4)",
+    lineHeight: "var(--cn-line-height-6-tight)",
+    color: "var(--cn-text-2)"
   },
   ".cn-dual-pane-stepper-card-stack": {
     overflow: "auto",
@@ -2110,6 +2129,11 @@ const ce = {
       cursor: "default"
     }
   },
+  // Completed items already fade to 0.6 (see stepper.ts). inert is also 0.6, so without this
+  // reset the body is 0.6×0.6. Hover-restore on the item would still leave the body darker.
+  ".cn-stepper-step-item:has(.cn-stepper-step-completed) .cn-flow-stepper-card-content[inert]": {
+    opacity: "1"
+  },
   ".cn-flow-stepper-card-description": {
     paddingLeft: "calc(var(--cn-size-4) + var(--cn-spacing-3))",
     marginTop: "var(--cn-spacing-1)"
@@ -3812,7 +3836,7 @@ const tr = {
     height: "100%",
     flex: "1",
     minHeight: "0",
-    background: "var(--cn-bg-0)",
+    background: "var(--cn-bg-2)",
     overflow: "hidden"
   },
   ".cn-single-pane-stepper-header": {
@@ -3837,7 +3861,33 @@ const tr = {
     }
   },
   ".cn-single-pane-stepper-content-header": {
-    marginBottom: "var(--cn-spacing-6)"
+    // v5 title→intro is 10px. No 10px token. `--cn-spacing-3` is 12px (closest). Do not pass
+    // a Layout gap prop: those utilities are @layer utilities and would override this.
+    gap: "var(--cn-spacing-3)",
+    // v5 intro-to-first-card is 8px. Do not use `--cn-spacing-6` (24px).
+    marginBottom: "var(--cn-spacing-2)"
+  },
+  // v5 setup head: 16px/600 title, 13px/`--cn-text-2` intro.
+  // Compiled line-height vars are `--cn-line-height-{fontSize}-{tightness}`, not the
+  // 4px-grid names (`--cn-line-height-20` / `-24` are not emitted). Title uses
+  // `--cn-line-height-6-normal` (fontSize.6 × 1.5 = 1.5rem = 24px). Intro uses
+  // `--cn-line-height-6-tight` (× 1.25 = 1.25rem = 20px), closest to v5 13px/1.55.
+  // No token between `--cn-text-2` and `--cn-text-3`. `--cn-text-3` was too dark on MFE.
+  // These classes own type. Do not wrap the nodes in Text — its font-* / text-cn-*
+  // utilities are @layer utilities and would win without !important.
+  ".cn-single-pane-stepper-content-title": {
+    margin: "0",
+    fontSize: "var(--cn-font-size-6)",
+    fontWeight: "var(--cn-font-weight-default-normal-600)",
+    lineHeight: "var(--cn-line-height-6-normal)",
+    letterSpacing: "var(--cn-tracking-tight)",
+    color: "var(--cn-text-1)"
+  },
+  ".cn-single-pane-stepper-content-subtitle": {
+    margin: "0",
+    fontSize: "var(--cn-font-size-4)",
+    lineHeight: "var(--cn-line-height-6-tight)",
+    color: "var(--cn-text-2)"
   },
   ".cn-single-pane-stepper-card-stack": {
     overflow: "auto",
@@ -3877,9 +3927,9 @@ const tr = {
     // keep the active card in focus. SinglePane is a timeline: contentTitle
     // lives in this stack and should start at the top, and the last step
     // should end the scroll content. Do not copy those spacers here.
-    // Vertical padding matches YamlOutput's header (--cn-spacing-3 = 12px) so
-    // contentTitle lines up with the YAML pane title. Sides stay --cn-spacing-6.
-    padding: "var(--cn-spacing-3) var(--cn-spacing-6)"
+    // UUI-3566 — v5 stack sides are 40px (`--cn-spacing-10`). Vertical 16px
+    // (`--cn-spacing-4`) lines up with YAML chrome top after that header moved to 16px.
+    padding: "var(--cn-spacing-4) var(--cn-spacing-10) var(--cn-spacing-4)"
   }
 }, pr = ["sm", "md", "lg", "xs"], gr = ["2xs", "xs", "sm", "md", "lg", "xl"], br = ["xs", "sm", "md", "lg"], vr = ["sm"];
 function hr() {
@@ -4392,13 +4442,28 @@ const mr = {
         display: "none"
       },
       "& .cn-stepper-connector": {
-        bottom: "var(--cn-spacing-4-half)"
+        // Last item has no next ring. Default bottom is negative (extends into the next head
+        // pad). Pin a 2px inset so the trunk stops just under this ring (UUI-3574).
+        bottom: "var(--cn-spacing-half)"
       },
       // Stop the trunk where the elbow's rounded corner begins (radius above the branch arm)
       // so the vertical line doesn't poke past the bend on the last step.
       "&:has(.cn-stepper-nested-step-placeholder) .cn-stepper-connector": {
         bottom: "calc(var(--cn-size-8) + var(--cn-rounded-5))"
       }
+    },
+    // UUI-3585 — v5 `.pq-card[data-state="done"]` is opacity ~0.58 on the whole card. Canary used
+    // to dim only `[inert]` card body. Opacity on `.cn-stepper-step-content` is a no-op because
+    // that box is `display: contents`. Fade the item (rail head + body). No 0.58 token; 0.6
+    // matches the inert opacity. Hover / completed-head focus-visible restore the way v5 does.
+    "&:has(.cn-stepper-step-completed)": {
+      opacity: "0.6",
+      "&:hover": {
+        opacity: "1"
+      },
+      "&:has(.cn-stepper-step-completed:focus-visible)": {
+        opacity: "1"
+      }
     }
   },
   /* Step Button */
@@ -4410,7 +4475,11 @@ const mr = {
     width: "100%",
     border: "none",
     background: "none",
-    padding: "0",
+    // UUI-3574 — v5 `.pq-card__head` pad is 16px; signed-off closest token is 12px. Horizontal
+    // stays 0 so the indicator column does not shift. This drops the circle, so the connector
+    // `top` below must move by the same amount or the trunk paints through the number.
+    paddingBlock: "var(--cn-spacing-3)",
+    paddingInline: "0",
     cursor: "pointer",
     textAlign: "left",
     "&:disabled": {
@@ -4503,16 +4572,17 @@ const mr = {
     marginTop: "var(--cn-spacing-half)",
     minWidth: "0"
   },
-  // Step badge — opt-in "Step n/m" pill shown next to the step title (StepperStep `showStepBadge`).
-  // Values match the CDv2 prototype (pq-step-badge): neutral surface-2 background, subtle border,
-  // muted text — a de-emphasized progress indicator, not a status/theme tag.
+  // Step badge — opt-in "Step n/m" chip next to the step title (StepperStep `showStepBadge`).
+  // Prototype `.pq-step-badge` is radius 4px (`--cn-rounded-2`), not a pill. `--cn-tag-radius-default`
+  // is `--cn-rounded-3` (6px) and `--cn-rounded-full` is 9999px. Do not use Tag: Tag-sm restyles
+  // type and height (UUI-3585).
   ".cn-stepper-step-badge": {
     display: "inline-flex",
     alignItems: "center",
     flexShrink: "0",
     // Vertical padding matches --cn-spacing-half (2px) exactly.
     padding: "var(--cn-spacing-half) var(--cn-spacing-2)",
-    borderRadius: "var(--cn-rounded-full)",
+    borderRadius: "var(--cn-rounded-2)",
     border: "var(--cn-spacing-px) solid var(--cn-border-2)",
     background: "var(--cn-bg-2)",
     color: "var(--cn-text-3)",
@@ -4523,11 +4593,13 @@ const mr = {
     fontWeight: "var(--cn-font-weight-default-normal-500)",
     lineHeight: "1.35"
   },
-  // Active row's badge gets a brand-tinted recolor to match the prototype's active-state badge (base/default case above already matches the prototype's neutral state)
+  // Active row's badge matches v5 `--pq-step-accent` / fill / border (`--cn-set-blue-outline-*`).
+  // Do not use `--cn-border-brand` / `--cn-set-brand-outline-*` — those read as a pill tint, not
+  // the prototype's blue outline chip (UUI-3585).
   ".cn-stepper-step-active .cn-stepper-step-badge": {
-    borderColor: "var(--cn-border-brand)",
-    background: "var(--cn-set-brand-outline-bg)",
-    color: "var(--cn-text-brand)"
+    borderColor: "var(--cn-set-blue-outline-border)",
+    background: "var(--cn-set-blue-outline-bg)",
+    color: "var(--cn-set-blue-outline-text)"
   },
   // Step Panel — container for arbitrary content rendered below a top-level Step (no StepGroup
   // ancestor). Mirrors `.cn-stepper-nested-step-panel`'s indent-under-the-title pattern, but without
@@ -4535,7 +4607,8 @@ const mr = {
   // column (--cn-size-5) plus its gap (--cn-spacing-4) so panel content lines up under the title text.
   ".cn-stepper-step-panel": {
     marginLeft: "calc(var(--cn-size-5) + var(--cn-spacing-4))",
-    marginTop: "var(--cn-spacing-2)",
+    // UUI-3575 — v5 head-to-body gap is the head padding-block. Extra panel margin doubles it.
+    marginTop: "0",
     minWidth: "0"
   },
   // Step-level collapse wrapper/trigger/icon/panel — parallel to the .cn-stepper-nested-step-collapse-*
@@ -4590,8 +4663,10 @@ const mr = {
   ".cn-stepper-connector": {
     position: "absolute",
     left: "calc((var(--cn-size-5) - var(--cn-spacing-px)) / 2)",
-    top: "var(--cn-size-5)",
-    bottom: "0",
+    // v5 connector is `margin: 2px 0`. Offset by the 12px head pad plus that 2px inset so the
+    // trunk misses the number and still meets the next ring (UUI-3574).
+    top: "calc(var(--cn-spacing-3) + var(--cn-size-5) + var(--cn-spacing-half))",
+    bottom: "calc(var(--cn-spacing-half) - var(--cn-spacing-3))",
     width: "var(--cn-spacing-px)",
     borderRadius: "var(--cn-rounded-1)",
     // The vertical trunk must sit ABOVE the nested-step branch elbows. The branch wires live in the