react-pdf-highlighter-plus 1.2.0 → 1.3.1

package/dist/esm/style/PdfHighlighter.css

@@ -13,21 +13,21 @@
 }
 
 .PdfHighlighter::-webkit-scrollbar-thumb {
-  background-color: #9f9f9f;
-  border-radius: 5px;
+  background-color: var(--rphp-border-strong, #b7b3ab);
+  border-radius: 999px;
 }
 
 .PdfHighlighter::-webkit-scrollbar-thumb:hover {
-  background-color: #d1d1d1;
+  background-color: var(--rphp-text-muted, #8b8880);
 }
 
 .PdfHighlighter::-webkit-scrollbar-track {
-  background-color: #2c2c2c;
-  border-radius: 5px;
+  background-color: transparent;
+  border-radius: 999px;
 }
 
 .PdfHighlighter::-webkit-scrollbar-track-piece {
-  background-color: #2c2c2c;
+  background-color: transparent;
 }
 
 .PdfHighlighter__tip-container {
@@ -39,13 +39,19 @@
   position: absolute;
   inset: 0;
   z-index: 4;
+  /* Lives in .page as a sibling of .textLayer, not nested inside it — that
+     would scope our z-index to .textLayer's own local stacking context,
+     putting pdf.js's .annotationLayer (a .page-level sibling of .textLayer,
+     z-index 3) above our highlights globally and silently swallowing
+     clicks. Multiply is set explicitly here instead of inherited from
+     .textLayer: it's what makes a Text/Area highlight's color tint still
+     show the black text underneath (like a real highlighter pen) instead
+     of covering it. Opaque annotation types (Image/Drawing/Freetext/Shape)
+     render in .PdfHighlighter__note-layer instead, with normal blending. */
+  mix-blend-mode: multiply;
   pointer-events: none;
 }
 
-.textLayer > .PdfHighlighter__highlight-layer {
-  z-index: 4;
-}
-
 .PdfHighlighter__note-layer {
   position: absolute;
   inset: 0;
@@ -128,17 +134,18 @@
    colored text. Highlight/note/config layers render normally — they sit on
    already-recolored pages, so no counter-inversion is needed. */
 
-/* Dark mode: give every highlight a persistent red border so they stay legible
-   against the recolored dark page (light mode keeps the ring on scrolled-to
-   only). :not(--scrolledTo) so the active highlight keeps its stronger double
-   ring (equal-specificity rules would otherwise clobber it by load order). */
+/* Dark mode: give every highlight a persistent accent border so they stay
+   legible against the recolored dark page (light mode keeps the ring on
+   scrolled-to only). :not(--scrolledTo) so the active highlight keeps its
+   stronger double ring (equal-specificity rules would otherwise clobber it by
+   load order). */
 .PdfHighlighter--dark
   .TextHighlight:not(.TextHighlight--scrolledTo)
   .TextHighlight__part,
 .PdfHighlighter--dark
   .AreaHighlight:not(.AreaHighlight--scrolledTo)
   .AreaHighlight__part {
-  box-shadow: 0 0 0 1px #ff4141;
+  box-shadow: 0 0 0 1px var(--rphp-accent, #7b71f0);
 }
 
 /* The text/highlight layer blends with the page canvas via `multiply`
@@ -155,6 +162,13 @@
 .PdfHighlighter--dark .textLayer {
   mix-blend-mode: normal;
 }
+/* Our own highlight-layer sets multiply explicitly (it's a .page-level
+   sibling of .textLayer, not nested inside it — see PdfHighlighter__
+   highlight-layer above), so it needs this same dark-mode override in its
+   own right; it no longer inherits .textLayer's override through nesting. */
+.PdfHighlighter--dark .PdfHighlighter__highlight-layer {
+  mix-blend-mode: normal;
+}
 
 /* Live text selection: the default opaque blue + multiply/screen makes selected
    text unreadable on dark. Force a translucent selection with normal blend so

package/dist/esm/style/ShapeCanvas.css

@@ -6,7 +6,7 @@
   height: 100%;
   cursor: crosshair;
   z-index: 1000;
-  background: rgba(0, 0, 0, 0.1);
+  background: rgba(28, 27, 24, 0.1);
 }
 
 .ShapeCanvas__controls {
@@ -19,29 +19,35 @@
   align-items: center;
   gap: 12px;
   z-index: 1002;
+  font-family: var(--rphp-font);
 }
 
+/* Hint - dark ink pill */
 .ShapeCanvas__hint {
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
+  background: var(--rphp-text, #1c1b18);
+  color: #efece5;
   padding: 8px 16px;
-  border-radius: 6px;
-  font-size: 14px;
+  border-radius: var(--rphp-radius, 9px);
+  box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
+  font-size: 13px;
+  font-family: var(--rphp-font);
   white-space: nowrap;
 }
 
+/* Danger action */
 .ShapeCanvas__cancelButton {
-  padding: 8px 20px;
-  background: #f44336;
-  color: white;
+  padding: 6px 14px;
+  background: transparent;
+  color: var(--rphp-danger, #ef4444);
   border: none;
-  border-radius: 4px;
+  border-radius: var(--rphp-radius, 9px);
   cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
+  font-size: 13px;
+  font-weight: 600;
+  font-family: var(--rphp-font);
   transition: background 0.2s;
 }
 
 .ShapeCanvas__cancelButton:hover {
-  background: #d32f2f;
+  background: rgba(239, 68, 68, 0.12);
 }

package/dist/esm/style/ShapeHighlight.css

@@ -1,5 +1,6 @@
 .ShapeHighlight {
   position: absolute;
+  font-family: var(--rphp-font);
 }
 
 .ShapeHighlight__rnd {
@@ -21,11 +22,19 @@
 .ShapeHighlight--scrolledTo .ShapeHighlight__svg rect,
 .ShapeHighlight--scrolledTo .ShapeHighlight__svg ellipse,
 .ShapeHighlight--scrolledTo .ShapeHighlight__svg line {
-  stroke: #ff4141 !important;
+  stroke: var(--rphp-accent, #5b50e6) !important;
 }
 
 .ShapeHighlight--scrolledTo .ShapeHighlight__svg polygon {
-  fill: #ff4141 !important;
+  fill: var(--rphp-accent, #5b50e6) !important;
+}
+
+/* Selected: accent ring on the shape's bounding box */
+.ShapeHighlight--selected .ShapeHighlight__container {
+  box-shadow:
+    0 0 0 2px var(--rphp-accent, #5b50e6),
+    0 0 0 5px rgba(91, 80, 230, 0.25);
+  border-radius: 2px;
 }
 
 /* Toolbar wrapper - creates hover bridge between toolbar and shape */
@@ -33,22 +42,76 @@
   z-index: 10;
 }
 
-/* Toolbar - appears on hover */
+/* Toolbar - dark ink pill floating ABOVE the shape (never covers it).
+   Shown on hover or while the shape is selected. */
 .ShapeHighlight__toolbar {
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 2px 4px;
-  background: rgba(0, 0, 0, 0.7);
-  border-radius: 4px;
+  gap: 2px;
+  padding: 4px 6px;
+  background: var(--rphp-toolbar-bg, #1c1b18);
+  border-radius: var(--rphp-radius, 9px);
+  box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 0;
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.2s ease;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  transform: translateY(2px);
+  white-space: nowrap;
+}
+
+/* Hover bridge across the 6px gap between toolbar and shape */
+.ShapeHighlight__toolbar::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: 10px;
 }
 
 .ShapeHighlight__toolbar--visible {
   opacity: 1;
   pointer-events: auto;
+  transform: translateY(0);
+}
+
+/* Color dropdown trigger: current-color swatch + chevron */
+.ShapeHighlight__color-trigger {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 26px;
+  padding: 0 6px 0 4px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: #efece5;
+  border-radius: var(--rphp-radius-sm, 6px);
+  transition: background 0.15s, color 0.15s;
+}
+
+.ShapeHighlight__color-trigger:hover,
+.ShapeHighlight__color-trigger[aria-expanded="true"] {
+  background: rgba(255, 255, 255, 0.14);
+  color: #ffffff;
+}
+
+.ShapeHighlight__color-trigger-dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 1.5px solid rgba(255, 255, 255, 0.5);
+  flex-shrink: 0;
+}
+
+.ShapeHighlight__toolbar-divider {
+  width: 1px;
+  height: 16px;
+  margin: 0 3px;
+  background: rgba(255, 255, 255, 0.2);
 }
 
 .ShapeHighlight__style-button,
@@ -56,40 +119,43 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: 26px;
+  height: 26px;
   border: none;
   background: transparent;
   cursor: pointer;
-  color: white;
-  border-radius: 3px;
+  color: #efece5;
+  border-radius: var(--rphp-radius-sm, 6px);
   padding: 0;
-  transition: background 0.2s;
+  transition: background 0.15s, color 0.15s;
 }
 
 .ShapeHighlight__style-button:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.14);
+  color: #ffffff;
 }
 
 .ShapeHighlight__delete-button:hover {
-  background: rgba(255, 100, 100, 0.6);
+  background: rgba(239, 68, 68, 0.24);
+  color: #ff8a80;
 }
 
-/* Style Panel */
+/* Style Panel - light surface card (Verso popover) */
 .ShapeHighlight__style-panel {
-  margin-top: 4px;
-  background: rgba(0, 0, 0, 0.9);
-  border-radius: 6px;
-  padding: 8px;
+  margin-top: 6px;
+  background: var(--rphp-surface, #ffffff);
+  border: 1px solid var(--rphp-border, #e6e2da);
+  border-radius: var(--rphp-radius-lg, 12px);
+  padding: 12px;
   min-width: 180px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
 }
 
 .ShapeHighlight__style-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 8px;
+  margin-bottom: 10px;
 }
 
 .ShapeHighlight__style-row:last-child {
@@ -97,60 +163,63 @@
 }
 
 .ShapeHighlight__style-row label {
-  color: #ccc;
-  font-size: 11px;
+  color: var(--rphp-text-muted, #8b8880);
+  font-size: 10px;
+  font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-right: 8px;
-}
-
-/* Color options */
-.ShapeHighlight__color-options {
+  letter-spacing: 0.8px;
+  margin-right: 10px;
+}
+
+/* Color dropdown menu - same slot/positioning as the style panel */
+.ShapeHighlight__color-menu {
+  margin-top: 6px;
+  width: 180px;
+  background: var(--rphp-surface, #ffffff);
+  border: 1px solid var(--rphp-border, #e6e2da);
+  border-radius: var(--rphp-radius-lg, 12px);
+  box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
+  padding: 6px;
   display: flex;
-  align-items: center;
-  gap: 6px;
+  flex-direction: column;
+  gap: 1px;
 }
 
-.ShapeHighlight__color-presets {
+.ShapeHighlight__color-menu-item {
   display: flex;
-  gap: 4px;
-}
-
-.ShapeHighlight__color-preset {
-  width: 18px;
-  height: 18px;
-  border: 2px solid transparent;
-  border-radius: 50%;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 7px 8px;
+  border: none;
+  background: transparent;
+  border-radius: var(--rphp-radius-sm, 6px);
   cursor: pointer;
-  transition: transform 0.2s, border-color 0.2s;
-  padding: 0;
-}
-
-.ShapeHighlight__color-preset:hover {
-  transform: scale(1.15);
+  color: var(--rphp-text, #1c1b18);
+  font-size: 13px;
+  text-align: left;
 }
 
-.ShapeHighlight__color-preset.active {
-  border-color: #b958ff;
+.ShapeHighlight__color-menu-item:hover {
+  background: var(--rphp-surface-alt, #f4f2ee);
 }
 
-.ShapeHighlight__color-options input[type="color"] {
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  background: transparent;
+.ShapeHighlight__color-menu-dot {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 1px solid var(--rphp-border, #e6e2da);
+  flex-shrink: 0;
 }
 
-.ShapeHighlight__color-options input[type="color"]::-webkit-color-swatch-wrapper {
-  padding: 0;
+.ShapeHighlight__color-menu-label {
+  flex: 1;
 }
 
-.ShapeHighlight__color-options input[type="color"]::-webkit-color-swatch {
-  border: 1px solid #666;
-  border-radius: 4px;
+.ShapeHighlight__color-menu-check {
+  display: flex;
+  color: var(--rphp-accent, #5b50e6);
+  flex-shrink: 0;
 }
 
 /* Stroke width options */
@@ -161,22 +230,23 @@
 
 .ShapeHighlight__width-button {
   padding: 4px 8px;
-  background: transparent;
-  border: 1px solid #666;
-  border-radius: 4px;
+  background: var(--rphp-surface-alt, #f4f2ee);
+  border: 1px solid var(--rphp-border, #e6e2da);
+  border-radius: var(--rphp-radius-sm, 6px);
   cursor: pointer;
-  color: #ccc;
+  color: var(--rphp-text-secondary, #57544d);
   font-size: 11px;
-  transition: all 0.2s;
+  font-family: var(--rphp-font);
+  transition: all 0.15s;
 }
 
 .ShapeHighlight__width-button:hover {
-  border-color: #b958ff;
-  color: white;
+  border-color: var(--rphp-accent, #5b50e6);
+  color: var(--rphp-accent, #5b50e6);
 }
 
 .ShapeHighlight__width-button.active {
-  background: rgba(185, 88, 255, 0.2);
-  border-color: #b958ff;
-  color: #b958ff;
+  background: var(--rphp-accent-soft, #eceaf9);
+  border-color: var(--rphp-accent, #5b50e6);
+  color: var(--rphp-accent, #5b50e6);
 }

package/dist/esm/style/SignaturePad.css

@@ -1,83 +1,199 @@
+/* eSign modal — Verso surface card over a blurred ink overlay.
+   Button selectors are anchored to .SignaturePad__modal so they outrank
+   consumer CSS resets (e.g. Tailwind preflight's `[type='button']
+   { background-color: transparent }`) regardless of stylesheet load order. */
+
 .SignaturePad__overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(28, 27, 24, 0.55);
+  backdrop-filter: blur(3px);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 10000;
+  animation: SignaturePad-fade 0.15s ease;
+}
+
+@keyframes SignaturePad-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
+/* Dialog card */
 .SignaturePad__modal {
-  background: white;
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  background: var(--rphp-surface, #ffffff);
+  border: 1px solid var(--rphp-border, #e6e2da);
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
+  font-family: var(--rphp-font, sans-serif);
+  animation: SignaturePad-pop 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2);
+}
+
+@keyframes SignaturePad-pop {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Header: title + subtitle left, close right */
+.SignaturePad__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
 }
 
 .SignaturePad__title {
-  margin: 0 0 12px 0;
+  margin: 0;
   font-size: 16px;
-  font-weight: 600;
-  color: #333;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  color: var(--rphp-text, #1c1b18);
+}
+
+.SignaturePad__subtitle {
+  margin: 3px 0 0;
+  font-size: 12.5px;
+  color: var(--rphp-text-muted, #8b8880);
+}
+
+.SignaturePad__modal .SignaturePad__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--rphp-radius-sm, 6px);
+  background: transparent;
+  color: var(--rphp-text-muted, #8b8880);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.SignaturePad__modal .SignaturePad__close:hover {
+  background: var(--rphp-surface-alt, #f4f2ee);
+  color: var(--rphp-text, #1c1b18);
+}
+
+/* Canvas area: sunken paper with a signature baseline */
+.SignaturePad__canvas-wrap {
+  position: relative;
+  border: 1.5px dashed var(--rphp-border-strong, #b7b3ab);
+  border-radius: var(--rphp-radius-lg, 12px);
+  background: var(--rphp-bg, #faf9f6);
+  overflow: hidden;
+  transition: border-color 0.15s;
+}
+
+.SignaturePad__canvas-wrap:hover {
+  border-color: var(--rphp-accent, #5b50e6);
 }
 
 .SignaturePad__canvas {
   display: block;
-  border: 1px solid #ccc;
-  border-radius: 4px;
   cursor: crosshair;
   touch-action: none;
-  background: white;
+  background: transparent;
+  position: relative;
+  z-index: 1;
+}
+
+/* Baseline the signature sits on ("✕ ————") */
+.SignaturePad__baseline {
+  position: absolute;
+  left: 20px;
+  right: 20px;
+  bottom: 34px;
+  border-bottom: 1.5px solid var(--rphp-border, #e6e2da);
+  pointer-events: none;
+  z-index: 0;
 }
 
+.SignaturePad__baseline-x {
+  position: absolute;
+  left: 0;
+  bottom: 4px;
+  font-size: 11px;
+  color: var(--rphp-text-muted, #8b8880);
+}
+
+/* Footer: Clear on the left, Cancel + primary on the right */
 .SignaturePad__buttons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.SignaturePad__buttons-right {
   display: flex;
   gap: 8px;
-  margin-top: 12px;
-  justify-content: flex-end;
 }
 
-.SignaturePad__button {
+.SignaturePad__modal .SignaturePad__button {
   padding: 8px 16px;
-  font-size: 14px;
-  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 600;
+  font-family: var(--rphp-font, sans-serif);
+  border-radius: var(--rphp-radius, 9px);
   cursor: pointer;
-  transition: background-color 0.2s, border-color 0.2s;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
 }
 
-.SignaturePad__button--clear {
-  background: white;
-  border: 1px solid #ccc;
-  color: #666;
+/* Clear: quiet text button */
+.SignaturePad__modal .SignaturePad__button--clear {
+  background: transparent;
+  border: none;
+  color: var(--rphp-text-muted, #8b8880);
+  padding-left: 8px;
+  padding-right: 8px;
 }
 
-.SignaturePad__button--clear:hover {
-  background: #f5f5f5;
-  border-color: #999;
+.SignaturePad__modal .SignaturePad__button--clear:hover {
+  background: var(--rphp-surface-alt, #f4f2ee);
+  color: var(--rphp-text-secondary, #57544d);
 }
 
-.SignaturePad__button--cancel {
-  background: white;
-  border: 1px solid #ccc;
-  color: #666;
+/* Cancel: secondary */
+.SignaturePad__modal .SignaturePad__button--cancel {
+  background: var(--rphp-surface-alt, #f4f2ee);
+  border: 1px solid var(--rphp-border, #e6e2da);
+  color: var(--rphp-text-secondary, #57544d);
 }
 
-.SignaturePad__button--cancel:hover {
-  background: #f5f5f5;
-  border-color: #999;
+.SignaturePad__modal .SignaturePad__button--cancel:hover {
+  background: var(--rphp-surface-sunken, #efece5);
+  border-color: var(--rphp-border-strong, #b7b3ab);
 }
 
-.SignaturePad__button--done {
-  background: #2196f3;
-  border: 1px solid #2196f3;
-  color: white;
+/* Primary: accent */
+.SignaturePad__modal .SignaturePad__button--done {
+  background: var(--rphp-accent, #5b50e6);
+  border: 1px solid var(--rphp-accent, #5b50e6);
+  color: var(--rphp-text-on-accent, #ffffff);
+  box-shadow: 0 2px 8px -2px var(--rphp-accent, #5b50e6);
 }
 
-.SignaturePad__button--done:hover {
-  background: #1976d2;
-  border-color: #1976d2;
+.SignaturePad__modal .SignaturePad__button--done:hover {
+  background: var(--rphp-accent-strong, #4a40d4);
+  border-color: var(--rphp-accent-strong, #4a40d4);
 }