react-pdf-highlighter-plus 1.1.4 → 1.3.0

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;
@@ -123,24 +129,68 @@
   cursor: crosshair;
 }
 
-/* Dark mode - softer inversion for comfortable reading
-   Uses 0.9 intensity by default for a dark gray (~#1a1a1a) instead of pure black.
-   The brightness adjustment helps maintain readability.
-   Note: These are fallback values - actual intensity is controlled via inline styles
-   when darkModeInvertIntensity is customized in the theme prop. */
-.PdfHighlighter--dark .page {
-  filter: invert(0.9) hue-rotate(180deg) brightness(1.05);
+/* Dark mode recolors each page at draw time (OKLab map from theme.darkModeColors,
+   wired in PdfHighlighter). No CSS invert filter: inverting distorted photos and
+   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 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 var(--rphp-accent, #7b71f0);
+}
+
+/* The text/highlight layer blends with the page canvas via `multiply`
+   (pdf_viewer.css). Over the dark recolored page that crushes highlights to
+   near-black, and `screen` washes them out (recolored text is already light, so
+   light highlight + light text = no contrast). Instead: normal blend, and make
+   the highlight FILLS translucent via --hl-fill-alpha (TextHighlight /
+   AreaHighlight read it through color-mix). Translucency comes from the fill
+   color, not element opacity, so the red border ring stays crisp. The light text
+   then reads on a muted colored tint — a proper dark-mode highlight. */
+.PdfHighlighter--dark {
+  --hl-fill-alpha: 42%;
+}
+.PdfHighlighter--dark .textLayer {
+  mix-blend-mode: normal;
 }
-
-/* Double-invert highlights to preserve their original colors */
+/* 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 {
-  filter: invert(0.9) hue-rotate(180deg) brightness(0.95);
+  mix-blend-mode: normal;
 }
 
-.PdfHighlighter--dark .PdfHighlighter__note-layer {
-  filter: invert(0.9) hue-rotate(180deg) brightness(0.95);
+/* Live text selection: the default opaque blue + multiply/screen makes selected
+   text unreadable on dark. Force a translucent selection with normal blend so
+   the light text shows through the highlight. */
+.PdfHighlighter--dark .textLayer ::selection {
+  background: rgba(120, 162, 247, 0.4) !important;
+  mix-blend-mode: normal;
 }
-
-.PdfHighlighter--dark .PdfHighlighter__config-layer {
-  filter: invert(0.9) hue-rotate(180deg) brightness(0.95);
+.PdfHighlighter--dark .MouseSelection {
+  mix-blend-mode: normal;
+  opacity: 0.4;
+}
+
+/* Respect the OS "reduce motion" setting within the viewer (scoped so the
+   library doesn't override a consumer's whole app). */
+@media (prefers-reduced-motion: reduce) {
+  .PdfHighlighter,
+  .PdfHighlighter *,
+  .PdfHighlighter *::before,
+  .PdfHighlighter *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }

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);
 }