@beyondwork/docx-react-component 1.0.52 → 1.0.54

package/src/ui-tailwind/theme/editor-theme.css

@@ -14,6 +14,7 @@
  */
 
 @import "tailwindcss";
+@import "./tokens.css";
 
 @theme {
   /* Backgrounds */
@@ -32,9 +33,8 @@
   --color-secondary: #6b6b6b;
   --color-tertiary: #616161;
 
-  /* Accent */
-  --color-accent: #18b394;
-  --color-accent-soft: rgba(24, 179, 148, 0.1);
+  /* Accent — 6a.S1 forest-green flip. Values resolve through tokens.css. */
+  --color-accent: var(--color-accent-primary);
   --color-workflow: #7557d8;
   --color-workflow-soft: rgba(117, 87, 216, 0.12);
 
@@ -123,8 +123,7 @@
    * the .dark block below so the transform lives in one place.
    */
   --shadow-hairline: 0 0 0 1px var(--color-border);
-  --shadow-soft: 0 4px 14px -10px rgba(16, 24, 40, 0.14);
-  --shadow-float: 0 12px 28px -20px rgba(16, 24, 40, 0.18);
+  /* --shadow-soft / --shadow-float / --shadow-focus owned by tokens.css (§3.3/§3.4). */
 
   /*
    * Tailwind shadow-sm / shadow-md / shadow-lg / shadow-xl follow the runtime
@@ -170,26 +169,10 @@
   --color-secondary: #A5B7AC;
   --color-tertiary: #7F9187;
 
-  --color-accent: #53B487;
-  --color-accent-soft: rgba(83, 180, 135, 0.16);
+  /* Accent / semantic / change / comment dark values owned by tokens.css. */
   --color-workflow: #c7b6ff;
   --color-workflow-soft: rgba(199, 182, 255, 0.16);
 
-  --color-comment: #c7b6ff;
-  --color-comment-soft: rgba(199, 182, 255, 0.18);
-  --color-comment-strong: rgba(199, 182, 255, 0.24);
-  --color-insert: #8fd2a9;
-  --color-insert-soft: rgba(143, 210, 169, 0.18);
-  --color-delete: #d78d84;
-  --color-delete-soft: rgba(215, 141, 132, 0.14);
-
-  --color-warning: #c7b6ff;
-  --color-warning-soft: rgba(199, 182, 255, 0.16);
-  --color-danger: #d78d84;
-  --color-danger-soft: rgba(215, 141, 132, 0.16);
-  --color-success: #8fd2a9;
-  --color-success-soft: rgba(143, 210, 169, 0.18);
-
   --color-border: rgba(255, 255, 255, 0.09);
   --color-border-strong: rgba(255, 255, 255, 0.16);
 
@@ -202,8 +185,7 @@
   --color-page-ruler: color-mix(in srgb, var(--color-border) 70%, transparent);
   --color-workspace-canvas: #111827;
 
-  --shadow-soft: 0 6px 18px -10px rgba(0, 0, 0, 0.55);
-  --shadow-float: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
+  /* --shadow-soft / --shadow-float / --shadow-focus owned by tokens.css. */
 }
 
 /*
@@ -509,6 +491,26 @@
   background: color-mix(in srgb, var(--color-danger) 14%, transparent);
 }
 
+/* §3.7 canonical scope families */
+.wre-scope-rail-tint-blocked {
+  background: var(--color-scope-tint-blocked);
+}
+.wre-scope-rail-tint-in-scope {
+  background: var(--color-scope-tint-in-scope);
+}
+.wre-scope-rail-tint-suggest {
+  background: var(--color-scope-tint-suggest);
+}
+.wre-scope-rail-tint-comment {
+  background: var(--color-scope-tint-comment);
+}
+.wre-scope-rail-tint-scheduled {
+  background: var(--color-scope-tint-scheduled);
+}
+.wre-scope-rail-tint-proposed {
+  background: var(--color-scope-tint-proposed);
+}
+
 .wre-scope-rail-tint-active {
   outline: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
   outline-offset: -1px;
@@ -585,6 +587,14 @@
 .wre-scope-rail-stripe.wre-scope-rail-label-secondary { color: var(--color-secondary); }
 .wre-scope-rail-stripe.wre-scope-rail-label-danger { color: var(--color-danger); }
 
+/* §3.7 canonical scope families — stripe color */
+.wre-scope-rail-stripe.wre-scope-rail-tint-blocked   { background: var(--color-scope-tint-blocked); }
+.wre-scope-rail-stripe.wre-scope-rail-tint-in-scope  { background: var(--color-scope-tint-in-scope); }
+.wre-scope-rail-stripe.wre-scope-rail-tint-suggest   { background: var(--color-scope-tint-suggest); }
+.wre-scope-rail-stripe.wre-scope-rail-tint-comment   { background: var(--color-scope-tint-comment); }
+.wre-scope-rail-stripe.wre-scope-rail-tint-scheduled { background: var(--color-scope-tint-scheduled); }
+.wre-scope-rail-stripe.wre-scope-rail-tint-proposed  { background: var(--color-scope-tint-proposed); }
+
 /*
  * ─── Scope rail label pill ───
  *
@@ -650,6 +660,38 @@
   background: color-mix(in srgb, var(--color-danger) 8%, var(--color-canvas, #fff));
 }
 
+/* §3.7 canonical scope families — label pill */
+.wre-scope-rail-label-blocked {
+  color: var(--color-semantic-error);
+  border-color: color-mix(in srgb, var(--color-semantic-error) 40%, transparent);
+  background: color-mix(in srgb, var(--color-semantic-error) 8%, var(--color-canvas, #fff));
+}
+.wre-scope-rail-label-suggest {
+  color: var(--color-semantic-warning);
+  border-color: color-mix(in srgb, var(--color-semantic-warning) 42%, transparent);
+  background: color-mix(in srgb, var(--color-semantic-warning) 8%, var(--color-canvas, #fff));
+}
+.wre-scope-rail-label-scheduled {
+  color: var(--color-semantic-info);
+  border-color: color-mix(in srgb, var(--color-semantic-info) 40%, transparent);
+  background: color-mix(in srgb, var(--color-semantic-info) 8%, var(--color-canvas, #fff));
+}
+.wre-scope-rail-label-comment {
+  color: var(--color-accent-primary);
+  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
+  background: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-canvas, #fff));
+}
+.wre-scope-rail-label-in-scope {
+  color: var(--color-accent-primary);
+  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
+  background: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-canvas, #fff));
+}
+.wre-scope-rail-label-proposed {
+  color: var(--color-accent-primary);
+  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
+  background: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-canvas, #fff));
+}
+
 .wre-scope-rail-label-active {
   box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
 }
@@ -782,10 +824,14 @@
  * — consumers pick whichever matches their payload shape.
  */
 .wre-rail-card {
+  --wre-rail-card-edge: var(--color-border-default);
+  --wre-rail-card-eyebrow: var(--color-text-tertiary);
   position: relative;
-  border-radius: var(--radius-card);
-  background: var(--color-surface);
-  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
+  border-radius: var(--radius-lg);
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-subtle);
+  border-left: 3px solid var(--wre-rail-card-edge);
+  box-shadow: var(--shadow-soft);
   padding: 14px 16px 16px;
   overflow: hidden;
   transition: background-color var(--motion-fast) ease-out,
@@ -810,34 +856,23 @@
 }
 
 .wre-rail-card[data-tone="inReview"] {
-  --wre-rail-card-edge: var(--color-accent);
-  --wre-rail-card-eyebrow: var(--color-accent);
-  --wre-rail-card-progress-fill: var(--color-accent);
+  --wre-rail-card-edge: var(--color-semantic-warning);
+  --wre-rail-card-eyebrow: var(--color-semantic-warning);
 }
 
 .wre-rail-card[data-tone="blocked"] {
-  --wre-rail-card-edge: var(--color-danger);
-  --wre-rail-card-eyebrow: var(--color-danger);
-  --wre-rail-card-progress-fill: var(--color-danger);
-  background: color-mix(in srgb, var(--color-danger-soft) 75%, var(--color-surface));
+  --wre-rail-card-edge: var(--color-semantic-error);
+  --wre-rail-card-eyebrow: var(--color-semantic-error);
 }
 
 .wre-rail-card[data-tone="scheduled"] {
-  --wre-rail-card-edge: var(--color-tertiary);
-  --wre-rail-card-eyebrow: var(--color-tertiary);
-  --wre-rail-card-progress-fill: var(--color-tertiary);
+  --wre-rail-card-edge: var(--color-semantic-info);
+  --wre-rail-card-eyebrow: var(--color-semantic-info);
 }
 
 .wre-rail-card[data-tone="resolved"] {
-  --wre-rail-card-edge: var(--color-success);
-  --wre-rail-card-eyebrow: var(--color-success);
-  --wre-rail-card-progress-fill: var(--color-success);
-}
-
-.wre-rail-card[data-tone="neutral"] {
-  --wre-rail-card-edge: var(--color-border-strong);
-  --wre-rail-card-eyebrow: var(--color-tertiary);
-  --wre-rail-card-progress-fill: var(--color-secondary);
+  --wre-rail-card-edge: var(--color-semantic-success);
+  --wre-rail-card-eyebrow: var(--color-semantic-success);
 }
 
 .wre-rail-card__eyebrow {
@@ -1007,3 +1042,197 @@
   color: var(--color-primary);
   background: color-mix(in srgb, var(--color-accent-soft) 80%, var(--color-subtle));
 }
+
+/*
+ * Lane 6d — Slice U1 (L8 Phase E): active H/F band chrome.
+ *
+ * Idle bands sit at 0.6 opacity so the header/footer content is
+ * visible but doesn't compete with the body; hover bumps to 0.85; the
+ * active band goes to full opacity and gains a 3 px accent ribbon
+ * across its top edge plus a floating "Header — Section N" label in
+ * the top-left corner so reviewers always know which band they are
+ * editing when a section break changes the chrome.
+ *
+ * When any H/F story is active the chrome layer's root carries
+ * `data-story-active="header|footer"` and the body PM surface dims to
+ * 0.65 so the active band reads as the focal surface.
+ */
+.wre-page-band {
+  opacity: 0.6;
+  transition: opacity var(--motion-fast, 120ms) ease-out;
+  pointer-events: auto;
+}
+
+.wre-page-band:hover {
+  opacity: 0.85;
+}
+
+.wre-page-band[data-active="true"] {
+  opacity: 1;
+}
+
+.wre-page-band[data-active="true"]::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--color-accent);
+  border-radius: 0 0 var(--radius-pill) var(--radius-pill);
+  pointer-events: none;
+}
+
+.wre-page-band__label {
+  position: absolute;
+  top: 6px;
+  left: 10px;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  background: var(--color-surface);
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  box-shadow: var(--shadow-soft);
+  pointer-events: none;
+  z-index: 1;
+}
+
+[data-page-stack-chrome-layer][data-story-active="header"]
+  ~ [data-pm-body-slot],
+[data-page-stack-chrome-layer][data-story-active="footer"]
+  ~ [data-pm-body-slot] {
+  opacity: 0.65;
+  transition: opacity var(--motion-fast, 120ms) ease-out;
+}
+
+/*
+ * Lane 6d — Slice S2: print variant.
+ *
+ * At print time, collapse all editor chrome (toolbar, rails, overlays,
+ * page-break spacers, dock chrome) and let the browser paginate the
+ * paper cards one per physical sheet.  Intentionally no `@page` rule —
+ * the browser's print dialog owns paper size / margins so the host
+ * application doesn't need to fight it.
+ */
+@media print {
+  .wre-toolbar,
+  .wre-status-bar,
+  .wre-review-rail,
+  .wre-scope-rail-layer,
+  .wre-page-chrome-widget,
+  .wre-workspace-dock,
+  .wre-mode-dock,
+  [data-chrome-overlay],
+  [data-pin-surface] {
+    display: none !important;
+  }
+
+  [data-paper-frame] {
+    box-shadow: none !important;
+    border: none !important;
+    border-radius: 0 !important;
+    margin: 0 !important;
+    zoom: 1 !important;
+    page-break-after: always;
+  }
+
+  [data-paper-frame]:last-child {
+    page-break-after: auto;
+  }
+
+  .wre-page-surface {
+    color: #000;
+    background: #fff;
+  }
+}
+
+/*
+ * §6.23 — Scrollbar grammar (Lane 6c.S10)
+ * Thin track, thumb low-contrast until hover. Consistent across
+ * rail, long popovers, and the health panel.
+ * Scoped to the editor root class to avoid leaking into host chrome.
+ */
+.wre-editor ::-webkit-scrollbar,
+.wre-editor *::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.wre-editor ::-webkit-scrollbar-track,
+.wre-editor *::-webkit-scrollbar-track {
+  background: transparent;
+}
+.wre-editor ::-webkit-scrollbar-thumb,
+.wre-editor *::-webkit-scrollbar-thumb {
+  background: var(--color-border-default);
+  border-radius: 9999px;
+}
+.wre-editor ::-webkit-scrollbar-thumb:hover,
+.wre-editor *::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-strong);
+}
+.wre-editor,
+.wre-editor * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-default) transparent;
+}
+
+/*
+ * §6.9 — Table grip hit area + affordance (Lane 6c.U8 / Commit C18)
+ *
+ * Visual stripe is 2 px; hit area is extended to 8 px via ::before pseudo-
+ * element (3 px pad each side). On coarse-pointer devices the ::before extends
+ * to 44 px total for WCAG 2.5.5 touch-target compliance.
+ *
+ * State cascade:
+ *   default  → transparent background (invisible, pointer affordance only)
+ *   hover    → --color-border-default  (subtle stripe appears)
+ *   active   → --color-accent-primary  (vivid stripe during drag)
+ */
+.wre-table-grip-col {
+  position: absolute;
+  width: 2px;
+  background: transparent;
+  cursor: col-resize;
+  transition: background 75ms ease;
+}
+.wre-table-grip-col::before {
+  content: "";
+  position: absolute;
+  inset: 0 -3px;
+}
+.wre-table-grip-col:hover {
+  background: var(--color-border-default);
+}
+.wre-table-grip-col[data-active="true"] {
+  background: var(--color-accent-primary);
+}
+
+.wre-table-grip-row {
+  position: absolute;
+  height: 2px;
+  background: transparent;
+  cursor: row-resize;
+  transition: background 75ms ease;
+}
+.wre-table-grip-row::before {
+  content: "";
+  position: absolute;
+  inset: -3px 0;
+}
+.wre-table-grip-row:hover {
+  background: var(--color-border-default);
+}
+.wre-table-grip-row[data-active="true"] {
+  background: var(--color-accent-primary);
+}
+
+@media (pointer: coarse) {
+  .wre-table-grip-col::before {
+    inset: 0 -21px; /* 44 px total touch hit area */
+  }
+  .wre-table-grip-row::before {
+    inset: -21px 0; /* 44 px total touch hit area */
+  }
+}