@beyondwork/docx-react-component 1.0.52 → 1.0.54

package/src/ui-tailwind/review/tw-comment-sidebar.tsx

@@ -1,5 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Check, CornerDownRight, RotateCcw } from "lucide-react";
+import { Check, ChevronRight, CornerDownRight, RotateCcw } from "lucide-react";
+
+import { TwEmptyState } from "../chrome/tw-empty-state";
 
 import type { CommentSidebarSnapshot, CommentSidebarThreadSnapshot } from "../../api/public-types";
 import type {
@@ -49,41 +51,81 @@ export function TwCommentSidebar(props: TwCommentSidebarProps) {
     return map;
   }, [commentPresentations]);
 
+  // Partition threads into open / detached / resolved for ordered rendering
+  const openThreads = useMemo(
+    () => comments.threads.filter((t) => t.status === "open"),
+    [comments.threads],
+  );
+  const detachedThreads = useMemo(
+    () => comments.threads.filter((t) => t.status === "detached"),
+    [comments.threads],
+  );
+  const resolvedThreads = useMemo(
+    () => comments.threads.filter((t) => t.status === "resolved"),
+    [comments.threads],
+  );
+
+  const openCount = openThreads.length;
+  const resolvedCount = resolvedThreads.length;
+  const detachedCount = detachedThreads.length;
+
+  function renderThreadCard(thread: CommentSidebarThreadSnapshot) {
+    return (
+      <CommentThreadCard
+        key={thread.commentId}
+        thread={thread}
+        isActive={activeCommentId === thread.commentId}
+        currentUserId={currentUserId}
+        presentation={presentationByCommentId.get(thread.commentId)}
+        resolveAttachmentHref={resolveAttachmentHref}
+        onOpenComment={props.onOpenComment}
+        onResolveComment={props.onResolveComment}
+        onReopenComment={props.onReopenComment}
+        onAddReply={props.onAddReply}
+        onEditBody={props.onEditBody}
+      />
+    );
+  }
+
   return (
     <div className="outline-none">
-      <div className="mb-3 flex items-center gap-2 text-[11px] text-tertiary">
-        <span>{comments.openCommentIds.length} open</span>
-        <span className="text-border">·</span>
-        <span>{comments.resolvedCommentIds.length} resolved</span>
-        {comments.detachedCommentIds.length > 0 && (
-          <>
-            <span className="text-border">·</span>
-            <span>{comments.detachedCommentIds.length} detached</span>
-          </>
-        )}
-      </div>
+      {/* Counts header row */}
+      {(openCount + resolvedCount + detachedCount > 0) && (
+        <div className="mb-3 flex items-center gap-2 px-3 py-2 text-[11px] text-[var(--color-text-tertiary)]">
+          <span>{openCount} open</span>
+          <span aria-hidden="true">·</span>
+          <span>{resolvedCount} resolved</span>
+          {detachedCount > 0 && (
+            <>
+              <span aria-hidden="true">·</span>
+              <span className="text-[var(--color-semantic-warning)]">{detachedCount} detached</span>
+            </>
+          )}
+        </div>
+      )}
       {comments.threads.length > 0 ? (
         <div className="space-y-2">
-          {comments.threads.map((thread) => (
-            <CommentThreadCard
-              key={thread.commentId}
-              thread={thread}
-              isActive={activeCommentId === thread.commentId}
-              currentUserId={currentUserId}
-              presentation={presentationByCommentId.get(thread.commentId)}
-              resolveAttachmentHref={resolveAttachmentHref}
-              onOpenComment={props.onOpenComment}
-              onResolveComment={props.onResolveComment}
-              onReopenComment={props.onReopenComment}
-              onAddReply={props.onAddReply}
-              onEditBody={props.onEditBody}
-            />
-          ))}
+          {/* 1. Open threads first */}
+          {openThreads.map(renderThreadCard)}
+
+          {/* 2. Detached threads — visually distinct with warning left-rule */}
+          {detachedThreads.map(renderThreadCard)}
+
+          {/* 3. Resolved threads under a collapsed disclosure */}
+          {resolvedThreads.length > 0 && (
+            <details className="group mt-2">
+              <summary className="cursor-pointer list-none px-3 py-1.5 text-[11px] font-medium text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] flex items-center gap-1.5">
+                <ChevronRight className="h-3 w-3 transition-transform group-open:rotate-90" />
+                Resolved ({resolvedThreads.length})
+              </summary>
+              <div className="space-y-2 mt-1">
+                {resolvedThreads.map(renderThreadCard)}
+              </div>
+            </details>
+          )}
         </div>
       ) : (
-        <div className="rounded-lg bg-surface px-3 py-3 text-[11px] leading-5 text-tertiary ring-1 ring-border/40">
-          No comment threads yet. Select text and add one from the toolbar.
-        </div>
+        <TwEmptyState body="No comment threads yet. Select text and add one from the toolbar." />
       )}
     </div>
   );
@@ -138,7 +180,9 @@ function CommentThreadCard(props: {
         isActive
           ? "bg-accent-soft/40 ring-accent/25 shadow-[var(--shadow-soft)]"
           : "hover:bg-surface",
-        thread.status === "detached" ? "opacity-70" : "",
+        thread.status === "detached"
+          ? "border-l-[3px] border-[var(--color-semantic-warning)] opacity-70 pl-2.5"
+          : "",
       ].join(" ")}
       onClick={() => props.onOpenComment?.(thread)}
       onKeyDown={(event) => {
@@ -154,13 +198,20 @@ function CommentThreadCard(props: {
           {thread.createdBy.charAt(0).toUpperCase()}
         </span>
         <span className="truncate text-[10px] font-medium text-primary">{thread.createdBy}</span>
+        {thread.status === "detached" && (
+          <span
+            data-comment-thread-detached-chip="true"
+            className="inline-flex items-center rounded-full bg-[var(--color-semantic-warning-soft)] text-[var(--color-semantic-warning)] text-[9px] font-semibold uppercase tracking-[0.08em] px-1.5 py-0.5 ml-1.5"
+          >
+            Detached
+          </span>
+        )}
         <span data-comment-thread-created-at="true" className="text-[9px] text-tertiary">
           {formatCommentDate(thread.createdAt)}
         </span>
         <span className="flex-1" />
         {isDraftThread ? <StatusBadge label="draft" tone="draft" /> : null}
         {thread.status === "resolved" ? <StatusBadge label="resolved" tone="resolved" /> : null}
-        {thread.status === "detached" ? <StatusBadge label="detached" tone="detached" /> : null}
       </div>
 
       {/* Excerpt — anchored text from document */}

package/src/ui-tailwind/review/tw-health-panel.tsx

@@ -7,6 +7,7 @@ import type {
   EditorWarning,
   WorkflowBlockedCommandReason,
 } from "../../api/public-types";
+import { TwEmptyState } from "../chrome/tw-empty-state";
 
 export interface TwHealthPanelProps {
   compatibility: CompatibilityPanelSnapshot;
@@ -14,127 +15,186 @@ export interface TwHealthPanelProps {
   blockedReasons?: WorkflowBlockedCommandReason[];
 }
 
-export function TwHealthPanel(props: TwHealthPanelProps) {
-  const { compatibility, warnings, blockedReasons = [] } = props;
-  const supportedCount = compatibility.featureEntries.filter(
-    (e) => e.featureClass === "supported-roundtrip",
-  ).length;
-  const preserveOnlyCount = compatibility.featureEntries.filter(
-    (e) => e.featureClass === "preserve-only",
-  ).length;
-  const blockedCount = compatibility.featureEntries.filter(
-    (e) => e.featureClass === "unsupported-fatal",
-  ).length;
+type SeverityKey = "error" | "warning" | "info";
+
+interface IssueRow {
+  id: string;
+  message: string;
+  detail?: string;
+  badge?: string;
+  icon: React.ReactNode;
+}
 
+function renderIssueRow(item: IssueRow, severityKey: SeverityKey) {
   return (
-    <div className="outline-none">
-      <p className="text-xs text-tertiary mb-3">
-        {supportedCount} supported · {preserveOnlyCount} preserve-only · {blockedCount} blocked
-        {warnings.length > 0 ? ` · ${warnings.length} warning${warnings.length !== 1 ? "s" : ""}` : ""}
-      </p>
+    <div
+      key={item.id}
+      className="flex rounded-[var(--radius-sm)] transition-colors hover:bg-[var(--color-bg-hover)]"
+    >
+      <div
+        className="w-[3px] shrink-0 rounded-l-[var(--radius-sm)]"
+        style={{ backgroundColor: `var(--color-semantic-${severityKey})` }}
+      />
+      <div className="flex items-start gap-2 p-2.5 flex-1">
+        {item.icon}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between gap-2">
+            <span className="text-sm font-medium text-[var(--color-text-primary)]">
+              {item.message}
+            </span>
+            {item.badge != null && (
+              <span
+                className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium"
+                style={{
+                  color: `var(--color-semantic-${severityKey})`,
+                  backgroundColor: `var(--color-semantic-${severityKey}-soft)`,
+                }}
+              >
+                {item.badge}
+              </span>
+            )}
+          </div>
+          {item.detail != null && (
+            <p className="text-xs text-[var(--color-text-tertiary)] mt-0.5">{item.detail}</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
 
+function renderGroup(
+  items: IssueRow[],
+  label: string,
+  severityKey: SeverityKey,
+) {
+  if (items.length === 0) return null;
+  return (
+    <section key={label}>
+      <header className="flex items-center gap-2 mb-1.5">
+        <span
+          className="inline-flex items-center rounded-[var(--radius-sm)] px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.08em]"
+          style={{
+            backgroundColor: `var(--color-semantic-${severityKey}-soft)`,
+            color: `var(--color-semantic-${severityKey})`,
+          }}
+        >
+          {label}
+        </span>
+        <span className="text-[10px] text-[var(--color-text-tertiary)]">{items.length}</span>
+      </header>
       <div className="space-y-1">
-        {compatibility.featureEntries.map((entry) => (
-          <div key={entry.featureEntryId} className="flex rounded-lg transition-colors hover:bg-surface">
-            {entry.featureClass !== "supported-roundtrip" ? (
-              <div className={`w-0.5 shrink-0 rounded-l-lg ${
-                entry.featureClass === "unsupported-fatal" ? "bg-danger" : "bg-comment"
-              }`} />
-            ) : null}
-            <div className="flex items-start gap-2 p-2.5 flex-1">
-              <HealthIcon featureClass={entry.featureClass} />
-              <div className="flex-1 min-w-0">
-                <div className="flex items-start justify-between gap-2">
-                  <span className="text-sm font-medium text-primary">{entry.message}</span>
-                  <FeatureClassBadge featureClass={entry.featureClass} />
-                </div>
-                <p className="text-xs text-tertiary mt-0.5">{entry.featureKey}</p>
-              </div>
-            </div>
-          </div>
-        ))}
+        {items.map((item) => renderIssueRow(item, severityKey))}
+      </div>
+    </section>
+  );
+}
 
-        {warnings.map((warning) => (
-          <div key={warning.warningId} className="flex rounded-lg transition-colors hover:bg-surface">
-            <div className={`w-0.5 shrink-0 rounded-l-lg ${
-              warning.severity === "warning" ? "bg-comment" : "bg-accent"
-            }`} />
-            <div className="flex items-start gap-2 p-2.5 flex-1">
-              {warning.severity === "warning" ? (
-                <AlertTriangle className="h-4 w-4 text-comment shrink-0 mt-0.5" />
-              ) : (
-                <Info className="h-4 w-4 text-accent shrink-0 mt-0.5" />
-              )}
-              <div className="flex-1 min-w-0">
-                <div className="flex items-start justify-between gap-2">
-                  <span className="text-sm font-medium text-primary">{warning.message}</span>
-                  <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${
-                    warning.severity === "warning"
-                      ? "text-comment bg-warning-soft"
-                      : "text-accent bg-accent-soft"
-                  }`}>
-                    {warning.code.replace(/_/g, " ")}
-                  </span>
-                </div>
-                <p className="text-xs text-tertiary mt-0.5">{warning.source}</p>
-              </div>
-            </div>
-          </div>
-        ))}
+export function TwHealthPanel(props: TwHealthPanelProps) {
+  const { compatibility, warnings, blockedReasons = [] } = props;
 
-        {blockedReasons.length > 0 ? (
-          <>
-            <div className="border-t border-border mt-2 pt-2">
-              <p className="text-xs font-medium text-tertiary mb-1">Workflow blocked reasons</p>
-            </div>
-            {blockedReasons.map((reason, index) => (
-              <div key={`blocked-${index}`} className="flex rounded-lg transition-colors hover:bg-surface">
-                <div className="w-0.5 shrink-0 rounded-l-lg bg-amber-400" />
-                <div className="flex items-start gap-2 p-2.5 flex-1">
-                  <ShieldAlert className="h-4 w-4 text-amber-500 shrink-0 mt-0.5" />
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-start justify-between gap-2">
-                      <span className="text-sm font-medium text-primary">{reason.message}</span>
-                      <span className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium text-amber-700 bg-amber-100">
-                        {reason.code.replace(/_/g, " ")}
-                      </span>
-                    </div>
-                    {reason.scopeId ? (
-                      <p className="text-xs text-tertiary mt-0.5">scope: {reason.scopeId}</p>
-                    ) : null}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </>
-        ) : null}
+  // Blocked export group: unsupported-fatal entries
+  const blockedExportItems: IssueRow[] = compatibility.featureEntries
+    .filter((e) => e.featureClass === "unsupported-fatal")
+    .map((e) => ({
+      id: e.featureEntryId,
+      message: e.message,
+      detail: e.featureKey,
+      badge: "blocked",
+      icon: (
+        <ShieldAlert
+          className="h-4 w-4 shrink-0 mt-0.5"
+          style={{ color: "var(--color-semantic-error)" }}
+        />
+      ),
+    }));
 
-        {compatibility.featureEntries.length === 0 && warnings.length === 0 && blockedReasons.length === 0 ? (
-          <p className="text-xs text-tertiary py-4">
-            No compatibility entries or warnings to display.
-          </p>
-        ) : null}
-      </div>
+  // Warning group: preserve-only entries + workflow blocked reasons + "warning"-severity EditorWarnings
+  const warningItems: IssueRow[] = [
+    ...compatibility.featureEntries
+      .filter((e) => e.featureClass === "preserve-only")
+      .map((e) => ({
+        id: e.featureEntryId,
+        message: e.message,
+        detail: e.featureKey,
+        badge: "preserve-only",
+        icon: (
+          <Shield
+            className="h-4 w-4 shrink-0 mt-0.5"
+            style={{ color: "var(--color-semantic-warning)" }}
+          />
+        ),
+      })),
+    ...blockedReasons.map((r, index) => ({
+      id: `blocked-reason-${index}`,
+      message: r.message,
+      detail: r.scopeId != null ? `scope: ${r.scopeId}` : undefined,
+      badge: r.code.replace(/_/g, " "),
+      icon: (
+        <ShieldAlert
+          className="h-4 w-4 shrink-0 mt-0.5"
+          style={{ color: "var(--color-semantic-warning)" }}
+        />
+      ),
+    })),
+    ...warnings
+      .filter((w) => w.severity === "warning")
+      .map((w) => ({
+        id: w.warningId,
+        message: w.message,
+        detail: w.source,
+        badge: w.code.replace(/_/g, " "),
+        icon: (
+          <AlertTriangle
+            className="h-4 w-4 shrink-0 mt-0.5"
+            style={{ color: "var(--color-semantic-warning)" }}
+          />
+        ),
+      })),
+  ];
+
+  // Info group: "info"-severity EditorWarnings
+  const infoItems: IssueRow[] = warnings
+    .filter((w) => w.severity === "info")
+    .map((w) => ({
+      id: w.warningId,
+      message: w.message,
+      detail: w.source,
+      badge: w.code.replace(/_/g, " "),
+      icon: (
+        <Info
+          className="h-4 w-4 shrink-0 mt-0.5"
+          style={{ color: "var(--color-semantic-info)" }}
+        />
+      ),
+    }));
+
+  const hasAnyIssue =
+    blockedExportItems.length > 0 || warningItems.length > 0 || infoItems.length > 0;
+
+  return (
+    <div className="outline-none">
+      {!hasAnyIssue ? (
+        <TwEmptyState body="All export checks passed." />
+      ) : (
+        <div className="space-y-3">
+          {renderGroup(blockedExportItems, "Blocked export", "error")}
+          {renderGroup(warningItems, "Warning", "warning")}
+          {renderGroup(infoItems, "Info", "info")}
+        </div>
+      )}
     </div>
   );
 }
 
-function HealthIcon(props: { featureClass: CompatibilityFeatureEntry["featureClass"] }) {
-  switch (props.featureClass) {
-    case "supported-roundtrip":
-      return <ShieldCheck className="h-4 w-4 text-insert shrink-0 mt-0.5" />;
-    case "preserve-only":
-      return <Shield className="h-4 w-4 text-comment shrink-0 mt-0.5" />;
-    case "unsupported-fatal":
-      return <ShieldAlert className="h-4 w-4 text-danger shrink-0 mt-0.5" />;
-  }
-}
-
 function FeatureClassBadge(props: { featureClass: CompatibilityFeatureEntry["featureClass"] }) {
   const styles: Record<string, string> = {
-    "supported-roundtrip": "text-insert bg-insert-soft",
-    "preserve-only": "text-comment bg-warning-soft",
-    "unsupported-fatal": "text-danger bg-delete-soft",
+    "supported-roundtrip":
+      "text-[var(--color-semantic-success)] bg-[var(--color-semantic-success-soft)]",
+    "preserve-only":
+      "text-[var(--color-semantic-warning)] bg-[var(--color-semantic-warning-soft)]",
+    "unsupported-fatal":
+      "text-[var(--color-semantic-error)] bg-[var(--color-semantic-error-soft)]",
   };
   const labels: Record<string, string> = {
     "supported-roundtrip": "supported",
@@ -142,8 +202,13 @@ function FeatureClassBadge(props: { featureClass: CompatibilityFeatureEntry["fea
     "unsupported-fatal": "blocked",
   };
   return (
-    <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${styles[props.featureClass]}`}>
+    <span
+      className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${styles[props.featureClass] ?? ""}`}
+    >
       {labels[props.featureClass]}
     </span>
   );
 }
+
+// Keep FeatureClassBadge exported for potential external use
+export { FeatureClassBadge };

package/src/ui-tailwind/review/tw-rail-card.tsx

@@ -51,6 +51,12 @@ export interface TwRailCardProps {
   onClick?: () => void;
   onSelect?: () => void;
   isActive?: boolean;
+  /**
+   * U6 — bidirectional rail↔scope focus sync.  When `true` the card
+   * receives a subtle focus ring (accent-primary/30) to signal that its
+   * matching scope card is currently open in the overlay.
+   */
+  isFocused?: boolean;
   dataTestId?: string;
 }
 
@@ -69,6 +75,7 @@ export function TwRailCard(props: TwRailCardProps) {
     onClick,
     onSelect,
     isActive,
+    isFocused,
     dataTestId,
   } = props;
 
@@ -80,9 +87,10 @@ export function TwRailCard(props: TwRailCardProps) {
     : 0;
 
   const commonProps: Record<string, unknown> = {
-    className: "wre-rail-card block w-full text-left",
+    className: `wre-rail-card block w-full text-left${isFocused ? " ring-1 ring-[var(--color-accent-primary)]/30" : ""}`,
     "data-tone": tone,
     "data-active": isActive ? "true" : "false",
+    "data-focused": isFocused ? "true" : undefined,
     "data-testid": dataTestId,
   };
 

package/src/ui-tailwind/review/tw-review-rail.tsx

@@ -99,7 +99,9 @@ export interface TwReviewRailProps {
 const focusRingClass =
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
 
-const PILL_TRIGGER_CLASS = `flex-1 rounded-lg px-3 py-1.5 text-xs font-medium text-tertiary transition-colors data-[state=active]:bg-surface data-[state=active]:text-primary data-[state=active]:shadow-[0_1px_0_var(--color-shadow)] outline-none ${focusRingClass}`;
+const PILL_TRIGGER_CLASS = `flex-1 rounded-[var(--radius-md)] px-3 py-1.5 text-xs font-medium text-[var(--color-text-tertiary)] transition-colors data-[state=active]:bg-[var(--color-bg-selected)] data-[state=active]:text-[var(--color-text-primary)] outline-none ${focusRingClass}`;
+
+const UNDERLINE_TRIGGER_CLASS = `flex items-center gap-1.5 px-3 py-2 text-xs font-medium text-[var(--color-text-tertiary)] border-b-2 border-transparent transition-colors data-[state=active]:border-[var(--color-accent-primary)] data-[state=active]:text-[var(--color-text-primary)] outline-none ${focusRingClass}`;
 
 export function TwReviewRail(props: TwReviewRailProps) {
   const variant = props.variant ?? "docked";
@@ -110,18 +112,19 @@ export function TwReviewRail(props: TwReviewRailProps) {
   const workflowSegments = props.scopeRailSegments ?? [];
   const workflowCount =
     props.workflowCount ?? (props.workflowTab ? undefined : workflowSegments.length);
-  const widthClass = editorial ? "w-[360px]" : "w-[336px]";
+  const widthClass = editorial ? "w-[360px]" : "w-[320px]";
   const drawerWidthClass = editorial
     ? "w-[min(360px,calc(100vw-1rem))]"
     : "w-[min(336px,calc(100vw-1rem))]";
 
   return (
     <aside
+      role="complementary"
       aria-label="Review rail"
       data-wre-drawer={variant === "drawer" ? "true" : "false"}
       data-editorial-header={editorial ? "true" : "false"}
       className={[
-        "flex flex-col border-l border-border/60 bg-[var(--color-sidebar-tint)]",
+        "flex flex-col border-l border-[var(--color-border-subtle)]/60 bg-[var(--color-bg-sidebar)]",
         variant === "drawer"
           ? `h-full ${drawerWidthClass} max-w-full shrink-0 shadow-[var(--shadow-float)]`
           : `${widthClass} shrink-0`,
@@ -133,11 +136,19 @@ export function TwReviewRail(props: TwReviewRailProps) {
         className="flex flex-1 flex-col min-h-0"
       >
         {editorial ? (
-          <header className="shrink-0 px-4 pt-[18px] pb-3">
-            <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-tertiary">
+          <header
+            className="shrink-0 px-4 pt-[18px] pb-3"
+            style={{
+              paddingLeft: "calc(16px * var(--space-density-multiplier))",
+              paddingRight: "calc(16px * var(--space-density-multiplier))",
+              paddingTop: "calc(18px * var(--space-density-multiplier))",
+              paddingBottom: "calc(12px * var(--space-density-multiplier))",
+            }}
+          >
+            <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-[var(--color-text-tertiary)]">
               {intelligenceEyebrow}
             </p>
-            <p className="mt-1 text-[16px] font-semibold text-primary">
+            <p className="mt-1 text-[16px] font-semibold text-[var(--color-text-primary)]">
               {headerTitle}
             </p>
           </header>
@@ -149,67 +160,50 @@ export function TwReviewRail(props: TwReviewRailProps) {
               ? "flex shrink-0 items-center gap-2 border-b border-border/60 px-2"
               : "flex shrink-0 border-b border-border/60 px-3 py-2"
           }
+          style={
+            editorial
+              ? {
+                  paddingLeft: "calc(8px * var(--space-density-multiplier))",
+                  paddingRight: "calc(8px * var(--space-density-multiplier))",
+                }
+              : {
+                  paddingLeft: "calc(12px * var(--space-density-multiplier))",
+                  paddingRight: "calc(12px * var(--space-density-multiplier))",
+                  paddingTop: "calc(8px * var(--space-density-multiplier))",
+                  paddingBottom: "calc(8px * var(--space-density-multiplier))",
+                }
+          }
           aria-label="Review rail sections"
         >
           <Tabs.Trigger
             value="workflow"
-            className={
-              editorial
-                ? `wre-rail-tab outline-none ${focusRingClass}`
-                : PILL_TRIGGER_CLASS
-            }
+            className={editorial ? UNDERLINE_TRIGGER_CLASS : PILL_TRIGGER_CLASS}
           >
             {editorial ? "Workflow" : "Workflow "}
             {workflowCount !== undefined && workflowCount > 0 ? (
-              <span
-                className={
-                  editorial
-                    ? "wre-rail-tab__count"
-                    : "ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-subtle px-1.5 py-px text-[10px] font-medium text-tertiary"
-                }
-              >
+              <span className="ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-[var(--color-bg-muted)] px-1.5 py-px text-[10px] font-medium text-[var(--color-text-tertiary)]">
                 {workflowCount}
               </span>
             ) : null}
           </Tabs.Trigger>
           <Tabs.Trigger
             value="comments"
-            className={
-              editorial
-                ? `wre-rail-tab outline-none ${focusRingClass}`
-                : PILL_TRIGGER_CLASS
-            }
+            className={editorial ? UNDERLINE_TRIGGER_CLASS : PILL_TRIGGER_CLASS}
           >
             {editorial ? "Comments" : "Comments "}
             {props.comments.totalCount > 0 ? (
-              <span
-                className={
-                  editorial
-                    ? "wre-rail-tab__count"
-                    : "ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-subtle px-1.5 py-px text-[10px] font-medium text-tertiary"
-                }
-              >
+              <span className="ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-[var(--color-bg-muted)] px-1.5 py-px text-[10px] font-medium text-[var(--color-text-tertiary)]">
                 {props.comments.totalCount}
               </span>
             ) : null}
           </Tabs.Trigger>
           <Tabs.Trigger
             value="changes"
-            className={
-              editorial
-                ? `wre-rail-tab outline-none ${focusRingClass}`
-                : PILL_TRIGGER_CLASS
-            }
+            className={editorial ? UNDERLINE_TRIGGER_CLASS : PILL_TRIGGER_CLASS}
           >
             {editorial ? "Changes" : "Changes "}
             {props.trackedChanges.totalCount > 0 ? (
-              <span
-                className={
-                  editorial
-                    ? "wre-rail-tab__count"
-                    : "ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-subtle px-1.5 py-px text-[10px] font-medium text-tertiary"
-                }
-              >
+              <span className="ml-1 inline-flex min-w-[14px] items-center justify-center rounded-full bg-[var(--color-bg-muted)] px-1.5 py-px text-[10px] font-medium text-[var(--color-text-tertiary)]">
                 {props.trackedChanges.totalCount}
               </span>
             ) : null}