Minor change to SPAN highlight bgcolor computation, allowing for any CSS string

Author: rsimon

packages/text-annotator/src/highlight/span/color.ts

@@ -0,0 +1,18 @@
+import { colord } from 'colord';
+import { DEFAULT_STYLE, type HighlightStyle } from '../HighlightStyle';
+
+export const getBackgroundColor = (style?: HighlightStyle) => {
+  if (style?.fillOpacity !== undefined) {
+    // User-defined opacity: compute with user-defined fill or default
+    return colord(style?.fill || DEFAULT_STYLE.fill)
+      .alpha(style.fillOpacity)
+      .toHex();
+  } else if (!style?.fill) {
+    // Neither fill nor opacity - default
+    return colord(DEFAULT_STYLE.fill).alpha(DEFAULT_STYLE.fillOpacity).toHex();
+  } else {
+    // User defined fill, no opacity. Just pass through whatever the user 
+    // provided (incl. oklch colors, etc.)
+    return style.fill;
+  }
+}

packages/text-annotator/src/highlight/span/spansRenderer.ts

@@ -10,6 +10,7 @@ import { DEFAULT_STYLE, type HighlightStyleExpression } from '../HighlightStyle'
 import type { TextAnnotation } from 'src/model';
 
 import './spansRenderer.css';
+import { getBackgroundColor } from './color';
 
 const computeZIndex = (rect: Rect, all: Highlight[]): number => {
   const intersects = (a: Rect, b: Rect): boolean => (
@@ -85,9 +86,7 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
           span.style.width = `${rect.width}px`;
           span.style.height = `${rect.height}px`;
 
-          span.style.backgroundColor = colord(style?.fill || DEFAULT_STYLE.fill)
-            .alpha(style?.fillOpacity === undefined ? DEFAULT_STYLE.fillOpacity : style.fillOpacity)
-            .toHex();
+          span.style.backgroundColor = getBackgroundColor(style);
 
           if (style.underlineStyle)
             span.style.borderStyle = style.underlineStyle;

packages/text-annotator/test/index.html

@@ -334,9 +334,11 @@ <h3>Not annotatable block!</h3>
 
         const style = ((annotation, state, z) =>
           ({
-            fill: state.hovered ? '#ff0000' : undefined,
-            fillOpacity: state.selected ? 0.9 : 0.2,
-            underlineColor: '#9b3c06',
+            // fill: state.hovered ? '#ff0000' : undefined,
+            fill: 'oklch(0.72 0.18 237.15 / 0.25)',
+            // fillOpacity: state.selected ? 0.9 : 0.2,
+            // underlineColor: '#9b3c06',
+            underlineColor: 'oklch(0.72 0.19 232.06)',
             underlineOffset: (z * 3.5) || 0,
             underlineThickness: 2
           }));