fix: at rendering time, darken bookmark colours (default yellow bookmark indicator was near invisible in white margin), currently works fine in light and dark color themes...also updated NPM packages (added color manipulation lib)

Author: danielweck

package-lock.json

@@ -281,6 +281,7 @@
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "classnames": "^2.5.1",
+    "color": "^5.0.0",
     "debounce": "^2.2.0",
     "debug": "^4.4.0",
     "divina-player-js": "git+https://github.com/readium/divina-player-js.git#4e1f859afb14b916923ec136af0284a72e22a990",
@@ -289,7 +290,7 @@
     "glob": "^11.0.1",
     "history": "^5.3.0",
     "i18next": "^24.2.3",
-    "inversify": "^7.1.0",
+    "inversify": "^7.2.0",
     "jsdom": "^26.0.0",
     "lunr": "^2.3.9",
     "lunr-languages": "^1.14.0",
@@ -343,7 +344,7 @@
     "@axe-core/react": "^4.10.1",
     "@babel/generator": "^7.26.10",
     "@electron/fuses": "^1.8.0",
-    "@electron/notarize": "^3.0.0",
+    "@electron/notarize": "^3.0.1",
     "@electron/rebuild": "^3.7.1",
     "@jest/globals": "^29.7.0",
     "@kogai/typed_i18n": "^0.6.0",

package.json

@@ -15,7 +15,7 @@ import { eventChannel, SagaIterator } from "redux-saga";
 import { put } from "redux-saga/effects";
 import { call as callTyped, select as selectTyped } from "typed-redux-saga/macro";
 
-import { IHighlight } from "@r2-navigator-js/electron/common/highlight";
+import { HighlightDrawTypeMarginBookmark, IHighlight, IHighlightDefinition } from "@r2-navigator-js/electron/common/highlight";
 import {
     highlightsCreate, highlightsDrawMargin, highlightsRemove,
 } from "@r2-navigator-js/electron/renderer";
@@ -24,6 +24,7 @@ import { readerLocalActionHighlights } from "../../actions";
 import {
     IHighlightHandlerState, IHighlightMounterState,
 } from "readium-desktop/common/redux/states/renderer/highlight";
+import Color from "color";
 
 const debug = debug_("readium-desktop:renderer:reader:redux:sagas:highlight:mounter");
 
@@ -66,7 +67,20 @@ export function* mountHighlight(href: string, handlerState: IHighlightHandlerSta
 
     debug(`mountHighlight CREATE ... -- href: [${href}] highlightDefinitions: [${highlightDefinitions ? highlightDefinitions.length : JSON.stringify(highlightDefinitions, null, 4)}]`);
 
-    const createdHighlights = yield* callTyped(highlightsCreate, href, highlightDefinitions);
+    const createdHighlights = yield* callTyped(highlightsCreate, href, highlightDefinitions.map((def) => {
+        if (def.drawType === HighlightDrawTypeMarginBookmark) { // TODO: this currently works ok in light/dark color themes, but could be applied more smartly? (user preference?)
+            const color = Color.rgb(def.color.red, def.color.green, def.color.blue).darken(0.3);
+            return {
+                ...def,
+                color: {
+                    red: color.red(),
+                    green: color.green(),
+                    blue: color.blue(),
+                },
+            } satisfies IHighlightDefinition;
+        }
+        return def;
+    }));
 
     debug(`mountHighlight CREATED -- href: [${href}] createdHighlights: [${createdHighlights ? createdHighlights.length : JSON.stringify(createdHighlights, null, 4)}]`);